/* Shared Grayn theme. Mirrors the homepage (assets/css/tokens.css + site.css) so every page uses the
   same colours, buttons, header and footer. Loaded LAST on every inner page; applied by tools/apply_theme.py */

/* ---- palette: the four homepage brand colours + hairline border ---------------------------- */
:root, [data-theme="dark"] {
  --paper: #F3F4EA;
  --paper-2: #FFFFFF;
  --paper-3: #E6E4DC;
  --white: #FFFFFF;
  --ink: #16241C;
  --ink-2: #16241C;
  --ink-60: #616061;
  --copper: #1E6E4F;
  --copper-lt: #1E6E4F;
  --copper-glow: #E6E4DC;
  --green: #1E6E4F;
  --rule: #E6E4DC;
  --rule-soft: #E6E4DC;
  --border: #E6E4DC;
  --report-border: #E6E4DC;
  --radius-cta: 8px;
}
/* the ROI calculator uses its own variable names: map them onto the same palette */
:root, [data-theme="dark"] {
  --bg: #F3F4EA; --sand: #E6E4DC; --lg: #E6E4DC; --card-bg: #FFFFFF; --chart-grid: #E6E4DC;
  --copper-bg: rgba(30, 110, 79, 0.08); --text-primary: #16241C; --text-secondary: #16241C;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --radius: 10px; --radius-sm: 8px;
}
html, body { background: #F3F4EA; color: #16241C; }
body { font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; }
.theme-btn, .desktop-theme-btn { display: none !important; }   /* the homepage has no theme toggle */

/* the homepage has no scroll-progress bar */
.scroll-progress { display: none !important; }

/* ---- buttons: green fill / outlined, 8px radius, no shadow, nudge on hover ----------------- */
.btn, .btn-primary, .btn-ghost, .sticky-cta-btn, .book-btn, .tier-cta, .price-cta, .hero-cta,
.pc-btn, .sh-cta, .sf-btn {
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: transform .15s;
}
.btn-primary, .sticky-cta-btn, .book-btn, .tier-cta.cta-primary, .price-cta.cta-primary, .hero-cta,
.pc-btn-dark, .sh-cta {
  background: #1E6E4F !important;
  color: #FFFFFF !important;
  border: 1.5px solid #1E6E4F !important;
}
.btn-ghost, .tier-cta:not(.cta-primary), .price-cta:not(.cta-primary), .pc-btn-light {
  background: transparent !important;
  color: #16241C !important;
  border: 1.5px solid #16241C !important;
}
.btn:hover, .btn-primary:hover, .btn-ghost:hover, .sticky-cta-btn:hover, .book-btn:hover, .tier-cta:hover,
.price-cta:hover, .hero-cta:hover, .pc-btn:hover, .sh-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: none !important;
}
.btn-primary:hover, .sticky-cta-btn:hover, .book-btn:hover, .tier-cta.cta-primary:hover,
.price-cta.cta-primary:hover, .hero-cta:hover, .pc-btn-dark:hover, .sh-cta:hover {
  background: #1E6E4F !important; color: #FFFFFF !important; border-color: #1E6E4F !important;
}
.btn-ghost:hover, .tier-cta:not(.cta-primary):hover, .price-cta:not(.cta-primary):hover, .pc-btn-light:hover {
  background: transparent !important; color: #16241C !important; border-color: #16241C !important;
}

/* ---- header (same as the homepage) -------------------------------------------------------- */
.sh { position: sticky; top: 0; z-index: 100; background: #F3F4EA; border-bottom: 1px solid #E6E4DC; }
.sh-in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5.6vw, 80px); height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sh-brand { display: flex; align-items: center; gap: 7px; min-height: 44px; text-decoration: none; color: #16241C; }
.sh-brand img { width: 30px; height: 30px; display: block; }
.sh-brand span { font-weight: 800; font-size: 25px; letter-spacing: -0.03em; line-height: 1; color: #16241C; }
.sh-nav { display: flex; align-items: center; gap: 36px; }
.sh-nav a, .sh-login { font-size: 16px; color: #16241C; text-decoration: none; min-height: 44px; display: flex;
  align-items: center; font-weight: 400; }
.sh-nav a:hover, .sh-login:hover { color: #1E6E4F; }
.sh-act { display: flex; align-items: center; gap: 24px; }
.sh-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  font-size: 16px; text-decoration: none; }
.sh .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-right: -8px; border: 0; border-radius: 8px; background: transparent; color: #16241C; cursor: pointer; padding: 0; }
.sh .menu-btn .ico-close { display: none; }
.sh .menu-btn[aria-expanded="true"] .ico-open { display: none; }
.sh .menu-btn[aria-expanded="true"] .ico-close { display: inline; }
.sh .mobile-menu { display: none; border-top: 1px solid #E6E4DC; background: #F3F4EA;
  padding: 8px clamp(20px, 5.6vw, 80px) 16px; flex-direction: column; }
.sh .mobile-menu.is-open { display: flex; }
.sh .mobile-menu a { font-size: 18px; color: #16241C; text-decoration: none; min-height: 52px; display: flex;
  align-items: center; border-bottom: 1px solid #E6E4DC; }
.sh .mobile-menu a:last-child { border-bottom: 0; }
@media (max-width: 899px) { .sh .only-desk { display: none !important; } }
@media (min-width: 900px) { .sh .only-m { display: none !important; } }

/* ---- footer (same as the homepage) -------------------------------------------------------- */

/* dd:start */
/* --- Integrations dropdown (shared by homepage and inner pages) --- */
.dd-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;margin:0 -12px;border:0;border-radius:8px;
  background:transparent;color:#16241C;font:inherit;font-size:16px;font-weight:400;cursor:pointer}
.dd-btn:hover,.dd.is-open .dd-btn,.dd:focus-within .dd-btn{background:rgba(22,36,28,.06)}
.dd-chev{transition:transform .15s}
.dd.is-open .dd-chev{transform:rotate(180deg)}
.dd-panel{display:none;position:absolute;left:50%;top:calc(100% - 8px);transform:translateX(-50%);width:min(820px,calc(100vw - 40px));
  background:#FFFFFF;border:1px solid #E6E4DC;border-radius:14px;box-shadow:0 18px 48px rgba(22,36,28,.13);padding:28px 32px 20px;z-index:50}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.dd.is-open .dd-panel{display:block}
@media (hover:hover) and (pointer:fine){.dd:hover .dd-panel{display:block}.dd:hover .dd-chev{transform:rotate(180deg)}}
.dd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 36px}
.dd-col h3{margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid #E6E4DC;font-size:13px;font-weight:600;color:#616061;
  font-family:inherit;text-transform:none;letter-spacing:0}
.dd-col a{display:flex;align-items:center;gap:12px;min-height:42px;font-size:15px;color:#16241C;text-decoration:none}
.dd-col a:hover span{color:#1E6E4F}
.dd-col img{width:22px;height:22px;object-fit:contain;flex:0 0 auto;border-radius:4px}
.dd-soon{font-style:normal;font-size:11px;font-weight:600;color:#616061;background:#F3F4EA;border:1px solid #E6E4DC;border-radius:4px;padding:1px 6px}
.dd-all{display:block;margin-top:14px;padding-top:14px;border-top:1px solid #E6E4DC;font-size:15px;font-weight:600;color:#1E6E4F;text-decoration:none}
.dd-all:hover{text-decoration:underline}
.mm-dd{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0;border:0;
  border-bottom:1px solid #E6E4DC;background:transparent;color:#16241C;font:inherit;font-size:18px;text-align:left;cursor:pointer}
.mm-dd[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
.mm-list[hidden]{display:none}
.mm-list{display:flex;flex-direction:column;border-bottom:1px solid #E6E4DC;padding:4px 0 8px}
.mobile-menu .mm-list a{min-height:44px;font-size:16px;gap:12px;border-bottom:0}
.mobile-menu .mm-list img{width:22px;height:22px;object-fit:contain;border-radius:4px}
/* dd:end */