/* ============================================================
   glass.css — Sage + Stone CINEMATIC DARK + LIQUID GLASS (site-wide)
   Palette derived from the hero aurora video: deep charcoal-navy
   base, cool light text, vivid brand teal accent + warm rose
   secondary (the burst's coral ray). Loaded AFTER styles.css on
   all inner pages. Pure CSS + the injected #lg-sheen SVG filter.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..650;1,9..144,400..600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F2EA; --bg-2:#EFE7DA;
  --ink:#26302A; --muted:#5B655C;
  --teal:#5F7A63; --teal-deep:#4F6A55; --rose:#9FB29A; --clay:#C0654A;
  --line:rgba(38,48,42,.12);
  --glass:rgba(255,255,255,.66);
  /* remap base tokens → light oat (these are never used as text color, verified) */
  --mist:rgba(38,48,42,.05); --paper-deep:rgba(239,231,218,.7);
}

/* ---------- readability: force any remaining LIGHT sections dark ---------- */
.final-cta,.page-hero,.section-light,.stats-section{ background:transparent !important; }
/* bespoke split hero panels (sponsors/feature pages) → dark + light text */
.hero-left,.hero-right,.hero-split,.hero-media,.pitch-panel,.intro-panel{ background:transparent !important; }
.hero-left h1,.hero-left h2,.hero-left h3,.hero-left strong,.hero-right h1,.hero-right h2{ color:var(--ink) !important; }
.hero-left p,.hero-left li,.hero-left .lede,.hero-left small,.hero-right p{ color:rgba(38,48,42,.78) !important; }
.hero-microbadges,.hero-microbadges *{ color:rgba(38,48,42,.7) !important; }
.final-cta h1,.final-cta h2,.final-cta h3,.page-hero h1,.page-hero h2{ color:var(--ink) !important; }
.final-cta p,.page-hero p,.page-hero .lede{ color:rgba(38,48,42,.74) !important; }
/* per-page #fff/inline-light sections → transparent (dark page shows through) + light text */
.form-block,[style*="background: #fff"],[style*="background:#fff"]{
  background:transparent !important; color:var(--ink) !important;
}
/* trial cards: beat per-page #fff (their own <style> loads last → needs strong override) */
.trial-card{ background:var(--glass) !important; color:var(--ink) !important; border:1px solid var(--line) !important; }
.trial-card *, .trial-card-head, .trial-card-tags{ color:var(--ink) !important; }
.trial-card .muted, .trial-card small{ color:rgba(38,48,42,.7) !important; }

/* ---------- cinematic dark canvas ---------- */
html{ background:var(--bg); }
body{
  background:transparent !important; color:var(--ink) !important;
  font-family:'Inter',-apple-system,system-ui,sans-serif !important;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(50% 42% at 84% 8%, rgba(192,101,74,.16), transparent 62%),
    radial-gradient(46% 44% at 12% 78%, rgba(159,178,154,.10), transparent 62%),
    radial-gradient(60% 55% at 50% 50%, rgba(192,101,74,.10), transparent 72%),
    linear-gradient(170deg,#FBF6EF 0%,#F2EBDD 50%,#F6F2EA 100%);
}

/* ---------- type ---------- */
h1,h2,h3,h4,.cine-h1,.dark-band h2{
  font-family:'Fraunces',Georgia,serif !important; color:var(--ink) !important; letter-spacing:-.01em;
}
p,li,small,.feature p,.split-panel p,.muted,.text-muted{ color:rgba(38,48,42,.72) !important; }
.eyebrow{ color:var(--teal) !important; }

/* ---------- liquid-glass card primitive (dark) ---------- */
.feature,.split-panel,.stat,.pricing-tier,.signal,.trial-card,.tile,
.item-card,.grade-card,.score-card,.sg-card,.pp-card,.card,.panel,.cine-card{
  position:relative;
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border:1px solid rgba(38,48,42,.16) !important;
  border-radius:18px !important;
  box-shadow: 0 20px 50px -24px rgba(38,48,42,.16), inset 0 1px 1px rgba(255,255,255,.26) !important;
}
.feature::before,.split-panel::before,.stat::before,.pricing-tier::before,
.tile::before,.item-card::before,.grade-card::before,.score-card::before,.card::before,.cine-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(130deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 34%, transparent 60%);
}
.feature>*,.split-panel>*,.stat>*,.pricing-tier>*,.tile>*,.item-card>*,.grade-card>*,.score-card>*,.card>*{
  position:relative; z-index:1;
}

/* containers → transparent, spaced */
.features,.split-panels,.stats-section,.stats-grid,.pricing-grid,.trial-list{
  background:transparent !important; border:none !important; gap:16px !important;
}
/* trial cards → spaced, soft rounded glass cards (was a hard-bordered flush list) */
.trial-list{ display:flex !important; flex-direction:column !important; }
.trial-card,.trial-card:not(:last-child){ border:1px solid var(--line) !important; border-radius:18px !important; }
.feature{ border-right:none !important; min-height:auto; }
.feature:hover,.split-panel:hover,.stat:hover,.signal:hover,.trial-card:hover{
  background:rgba(159,178,154,.18) !important; transform:translateY(-3px);
}
.feature:hover h3{ color:var(--ink) !important; }
.feature:hover .feature-icon{ color:var(--teal) !important; }

/* ---------- nav → dark glass ---------- */
nav{
  background: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-bottom:1px solid var(--line) !important;
}
.nav-logo,.nav-logo span,.cine-logo,.cine-logo span{ color:var(--ink) !important; }
.nav-logo .mark,.cine-logo .mark,.logo-icon{ background:linear-gradient(120deg,#5F7A63 0%,#8E975D 46%,#C0654A 100%) !important; color:#fff !important; }
.nav-links a,.cine-nav a{ color:rgba(38,48,42,.78) !important; }
.nav-links a:hover,.cine-nav a:hover{ color:var(--ink) !important; }
.nav-cta,.cine-book{ background:rgba(255,255,255,.92) !important; color:#26302A !important; border-radius:11px !important; border:none !important; }

/* ---------- buttons ---------- */
.btn-primary{
  background:rgba(255,255,255,.94) !important; color:#26302A !important; border:1px solid rgba(255,255,255,.5) !important;
  border-radius:11px !important; box-shadow:0 12px 30px -12px rgba(192,101,74,.5) !important;
}
.btn-primary:hover{ background:#fff !important; transform:translateY(-2px) !important; }
.btn-light{ background:rgba(255,255,255,.92) !important; color:#26302A !important; border:1px solid rgba(255,255,255,.4) !important; border-radius:11px !important; }
.btn-secondary{ background:rgba(38,48,42,.06) !important; border:1px solid var(--line) !important; color:var(--ink) !important; border-radius:11px !important; }

/* ---------- deep accent band ---------- */
.dark-band{
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(159,178,154,.5), transparent 60%),
    radial-gradient(55% 70% at 90% 90%, rgba(192,101,74,.18), transparent 60%),
    linear-gradient(160deg,#FBF6EF 0%,#EFE7DA 100%) !important;
  color:#26302A !important; border:1px solid var(--line) !important; border-radius:26px; margin:26px;
}
.dark-band h2,.dark-band h2 .em{ color:#26302A !important; }
.dark-band p{ color:rgba(38,48,42,.78) !important; }
.dark-band .eyebrow{ color:var(--teal) !important; }
.dark-band .btn-light{ background:#fff !important; color:#C0654A !important; }

/* ---------- cinematic hero on feature pages ---------- */
.cine{ color:var(--ink) !important; }
.cine-fallback{
  background:
    radial-gradient(55% 55% at 50% 80%, rgba(159,178,154,.22), transparent 60%),
    radial-gradient(50% 50% at 70% 30%, rgba(192,101,74,.18), transparent 62%),
    linear-gradient(160deg,#FBF6EF,#EFE7DA) !important;
}
.cine-scrim{ background:linear-gradient(180deg, rgba(246,242,234,0), rgba(246,242,234,.45)) !important; }
.cine-h1,.cine-h1 .dim{ color:var(--ink) !important; }
.cine-card .blurlayer{ background:rgba(255,255,255,.5) !important; }
.cine-score .v,.cine-card .v{ color:var(--teal) !important; }
.cine-cta{ background:rgba(255,255,255,.94) !important; color:#26302A !important; }
.cine-metric{ background:rgba(255,255,255,.55) !important; border:1px solid var(--line) !important; }

/* ---------- pricing ---------- */
.pricing-tier.featured{ background:rgba(255,255,255,.82) !important; border:1px solid rgba(192,101,74,.4) !important; box-shadow:0 24px 58px -24px rgba(192,101,74,.4), inset 0 1px 1px rgba(255,255,255,.3) !important; }
.pricing-tier-price .num{ color:var(--ink) !important; }

/* ---------- tool pages ---------- */
.grade-card{ color:var(--ink) !important; }
.grade-badge.g-a,.grade-badge.g-b{ color:#6E8470 !important; }
.item-card .iname{ color:var(--ink) !important; }
.item-card .ioutcome{ color:var(--teal) !important; }
.item-card .irat{ color:rgba(38,48,42,.78) !important; }
.item-buy-link,.iscore{ color:var(--teal) !important; }
.chip{ background:rgba(255,255,255,.9) !important; color:#26302A !important; border:1px solid rgba(255,255,255,.4) !important; }

/* ---------- footer ---------- */
footer{
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-top:1px solid var(--line) !important; color:rgba(38,48,42,.72) !important;
}
.footer-links a{ color:rgba(38,48,42,.72) !important; }
.footer-links a:hover{ color:var(--ink) !important; }
.footer-meta{ color:rgba(38,48,42,.5) !important; border-top-color:var(--line) !important; }

/* ---------- forms ---------- */
input[type="email"],input[type="text"],input,textarea,select{
  background:rgba(255,255,255,.7) !important; border:1px solid rgba(38,48,42,.2) !important; color:var(--ink) !important;
}
input::placeholder,textarea::placeholder{ color:rgba(38,48,42,.45) !important; }

/* ---------- refined controls (consistent across ALL pages) ---------- */
/* chips / segmented toggles / filter pills → clean light glass; terracotta when active */
.chip,.seg,.filter-pill,.tag-pill{
  background:rgba(38,48,42,.05) !important;
  border:1px solid rgba(38,48,42,.14) !important;
  color:var(--ink) !important; border-radius:999px !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover,.seg:hover,.filter-pill:hover{ background:rgba(38,48,42,.09) !important; border-color:rgba(38,48,42,.22) !important; }
.chip.on,.chip.solid,.chip.active,.chip[aria-pressed="true"],.seg.on,.seg.active,.filter-pill.active{
  background:rgba(192,101,74,.16) !important; border-color:rgba(192,101,74,.55) !important; color:#A24E37 !important;
}
/* form fields / field rows → light glass */
.field,.field-row,.sg-field,.form-field{
  background:rgba(255,255,255,.55) !important; border:1px solid var(--line) !important; border-radius:14px !important;
}
.field input,.field select,.field textarea{ background:transparent !important; border:none !important; }
/* native inputs / selects → consistent light glass + terracotta focus */
input,select,textarea{
  background:rgba(255,255,255,.65) !important; border:1px solid rgba(38,48,42,.14) !important;
  color:var(--ink) !important; border-radius:11px !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
input:focus,select:focus,textarea:focus{
  outline:none !important; border-color:rgba(192,101,74,.6) !important; box-shadow:0 0 0 3px rgba(192,101,74,.18) !important;
}
/* secondary/outline buttons */
.btn-outline,.btn-ghost,.sg-restart,.sg-applink{
  background:rgba(38,48,42,.05) !important; border:1px solid rgba(38,48,42,.2) !important;
  color:var(--ink) !important; border-radius:11px !important;
}
.btn-outline:hover,.btn-ghost:hover{ background:rgba(38,48,42,.09) !important; }
/* stack-grader chrome */
.sg-linkbtn,.sg-help a,.sg-count,.sg-progress span{ color:var(--teal) !important; }
.sg-progress{ background:rgba(38,48,42,.08) !important; }
.sg-step.active{ color:var(--teal) !important; }
/* tidy the cine particle wave so it reads neutral, not a stray hue */
.cine canvas,.cine svg .wave{ opacity:.7 }

/* ---------- misc ---------- */
hr,.rule{ border-color:var(--line) !important; }
::selection{ background:rgba(192,101,74,.3); }
@media (max-width:720px){
  .feature,.split-panel,.stat,.pricing-tier,.item-card,nav,footer{
    -webkit-backdrop-filter: blur(13px) saturate(150%); backdrop-filter: blur(13px) saturate(150%);
  }
}