/* =============================================================================
   site.css — the Emergent public marketing design (PublicHome), ported verbatim
   for the live server-rendered home. Self-contained: its own obsidian+brass
   tokens + button primitives so the home needs only fonts.css + this file, and
   never touches the contended ledger.css. Font faces come from fonts.css.
   Source: gcs_gcs_ui.zip src/index.css :root + src/App.css (hero + public site).
   Doctrine: brass = money/active/focus only; the single primary action is ivory.
   ========================================================================== */

:root{
  --bg-0:#0A0A0C; --bg-1:#0E0D10; --bg-2:#111014;
  --paper-0:#121115; --paper-1:#17151A; --paper-2:#1B1820;
  --hairline:#26232B; --hairline-2:#3B3742;
  --brass-200:#EDDFB8; --brass-300:#DFC791; --brass-400:#D2B378;
  --brass-500:#C9A96E; --brass-600:#A08149; --brass-700:#6F5830;
  --brass-a08:rgba(201,169,110,.08); --brass-a14:rgba(201,169,110,.14);
  --brass-a28:rgba(201,169,110,.28); --brass-a45:rgba(201,169,110,.45); --brass-a60:rgba(201,169,110,.60);
  --ink-0:#F4EFE4; --ink-1:#E7E1D5; --ink-2:#B6AFA3; --ink-3:#8E8779;
  --ink-a04:rgba(244,239,228,.04);
  --ok:#8CD9AD; --warn:#D9A441; --danger:#E0806C;
  --btn-ink:#191307;
  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --sans:"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;
  --shadow-lift:0 2px 4px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.85), 0 48px 90px -60px rgba(0,0,0,.9);
  --shadow-float:0 4px 10px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.9), 0 70px 120px -70px rgba(0,0,0,.95);
  --edge-top:inset 0 1px 0 rgba(244,239,228,.06);
}

/* Obsidian marketing surface — declare the scheme so UA controls, scrollbars
   and the caret paint dark rather than a pale-blue wash. */
:root{ color-scheme: dark; }

*{ box-sizing:border-box; }
html{ background:var(--bg-0); }
html.gcs-site, .gcs-site body{ height:auto; }
body.gcs-site{
  margin:0; font-family:var(--sans); color:var(--ink-1);
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(201,169,110,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(201,169,110,.05), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.gcs-site ::selection{ background:var(--brass-a28); color:var(--ink-0); }
/* Lining figures — the serif's default oldstyle 0 reads as "o". See index.css. */
html{ font-variant-numeric: lining-nums; font-feature-settings:"lnum" 1; }
.tnum{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1, "tnum" 1; }
.site a{ color:inherit; }

/* Buttons */
.site .btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-size:14px; font-weight:500; border-radius:12px; padding:12px 20px; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .25s ease, background-color .25s ease, color .2s ease; }
.site .btn--primary{ color:var(--btn-ink); background:linear-gradient(180deg,#fbf7ee,var(--ink-1)); box-shadow:var(--edge-top), 0 12px 26px -14px rgba(0,0,0,.9); }
.site .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(0,0,0,.9); }
.site .btn--quiet{ color:var(--ink-1); background:var(--ink-a04); border-color:var(--hairline-2); }
.site .btn--quiet:hover{ color:var(--ink-0); border-color:var(--brass-a45); background:var(--brass-a08); transform:translateY(-1px); }
.site .btn--ghost{ color:var(--ink-1); background:rgba(18,17,21,.5); border-color:var(--hairline-2); backdrop-filter:blur(8px); }
.site .btn--ghost:hover{ color:var(--ink-0); border-color:var(--brass-a45); background:var(--brass-a08); transform:translateY(-1px); }
.site .btn--sm{ padding:9px 15px; font-size:13px; border-radius:10px; }
.site .link{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; background:none; border:0; padding:0; text-decoration:none;
  font-family:var(--sans); font-size:13.5px; color:var(--brass-300); transition:color .2s ease, gap .2s ease; }
.site .link:hover{ color:var(--brass-200); gap:9px; }

.eyebrow{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-300); display:inline-flex; align-items:center; gap:8px; }
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg, var(--brass-500), transparent); }

/* Tilt card base */
.tilt{ position:relative; transform-style:preserve-3d; will-change:transform; transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.card{ border-radius:16px; padding:22px 24px; background:linear-gradient(160deg, var(--paper-2), var(--paper-0)); border:1px solid var(--hairline); box-shadow:var(--shadow-lift), var(--edge-top); }
.card:hover{ border-color:var(--hairline-2); }
.hero__grain{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero__loading{ position:absolute; inset:0; background:radial-gradient(300px circle at 70% 40%, var(--brass-a14), transparent 60%); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* ================= Public site ================= */
.site{ min-height:100vh; }
.hero-full{ position:relative; min-height:100vh; display:flex; flex-direction:column; overflow:hidden;
  background:radial-gradient(120% 100% at 70% 0%, rgba(201,169,110,.12), transparent 55%), linear-gradient(180deg,var(--bg-1),var(--bg-0) 70%); }
.hero-full__canvas{ position:absolute; inset:0; z-index:0; }
.hero-full__canvas canvas{ width:100% !important; height:100% !important; }
.hero-full__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 120%, rgba(10,10,12,.9), transparent 60%), linear-gradient(180deg, rgba(10,10,12,.55) 0%, transparent 30%, rgba(10,10,12,.4) 100%); }
.site-nav{ position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px clamp(20px,5vw,64px); }
.site-nav__brand{ display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:19px; color:var(--ink-0); text-decoration:none; }
.site-nav__links{ display:flex; align-items:center; gap:26px; }
.site-nav__links a{ color:var(--ink-2); text-decoration:none; font-size:14px; transition:color .2s ease; }
.site-nav__links a:hover{ color:var(--ink-0); }
.site-nav__links .btn{ color:var(--btn-ink); }
@media (max-width:760px){ .site-nav__links a:not(.btn){ display:none; } }
.hero-full__copy{ position:relative; z-index:5; margin:auto 0; padding:0 clamp(20px,5vw,64px); max-width:920px; }
.headline{ font-family:var(--serif); font-weight:600; color:var(--ink-0); font-size:clamp(38px,5vw,68px); line-height:1.04; letter-spacing:.3px; margin:14px 0 0; text-shadow:0 4px 40px rgba(0,0,0,.7); max-width:16ch; }
.headline .ital{ font-style:italic; color:var(--brass-200); }
.subhead{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-1); line-height:1.6; max-width:60ch; margin:22px 0 0; text-shadow:0 1px 14px rgba(0,0,0,.8); }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-full__scrollcue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5; width:24px; height:38px; border:1.5px solid var(--brass-a45); border-radius:14px; }
.hero-full__scrollcue span{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:8px; border-radius:3px; background:var(--brass-400); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0; transform:translate(-50%,12px)} 100%{opacity:0} }

.site-sec{ max-width:1160px; margin:0 auto; padding:clamp(70px,9vw,130px) clamp(20px,5vw,48px) 0; }
.site-sec__head{ margin-bottom:44px; max-width:760px; }
.site-sec__title{ font-family:var(--serif); font-weight:600; color:var(--ink-0); font-size:clamp(30px,4vw,50px); line-height:1.05; margin:16px 0 0; letter-spacing:.3px; }
.site-sec__title .ital{ font-style:italic; color:var(--brass-200); }
.site-sec__lede{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:16px 0 0; max-width:66ch; }

.leak-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .leak-grid{ grid-template-columns:1fr; } }
.leak{ display:flex; flex-direction:column; gap:12px; }
.leak__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--brass-300); background:var(--brass-a08); border:1px solid var(--brass-a28); box-shadow:var(--edge-top); }
.leak__t{ font-family:var(--serif); font-size:22px; color:var(--ink-0); }
/* Finding 1: the four body-copy styles on this page ran 14 / 13.5 / 13 / 14px — one page, four sizes, all under the 15px the ledes already use. */
.leak__d{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:0; }
/* Finding 2: this card sits in the leak grid beside .card siblings but padded itself 26/28 against their 22/24 — a visible step in one row. */
.leak--sum{ display:flex; flex-direction:column; justify-content:center; gap:14px; border-radius:16px; padding:22px 24px;
  background:linear-gradient(160deg, rgba(201,169,110,.14), var(--paper-0) 70%); border:1px solid var(--brass-a28); box-shadow:var(--shadow-lift),var(--edge-top); }
.leak--sum p{ font-family:var(--serif); font-size:22px; color:var(--ink-0); line-height:1.35; margin:0; }

/* Finding 3: the three card grids on this page gutter at 20 / 16 / 20px — the middle one read as tighter for no reason. */
.feature-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:800px){ .feature-list{ grid-template-columns:1fr; } }
.feature-link{ text-decoration:none; display:block; color:inherit; }
.feature{ display:flex; align-items:center; gap:20px; padding:22px 24px; }
.feature__n{ font-family:var(--serif); font-size:30px; color:var(--brass-500); min-width:46px; }
.feature__t{ font-size:17px; font-weight:600; color:var(--ink-0); }
.feature__d{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:5px 0 0; } /* Finding 1 */
.feature__go{ color:var(--ink-3); margin-left:auto; transition:transform .2s ease,color .2s ease; }
.feature:hover .feature__go{ color:var(--brass-300); transform:translateX(3px); }

.flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center; }
/* Finding 4: every other card on this page rounds to 16px; only the flow nodes used 18px, so the corners disagreed down the page. */
.flow__node{ flex:1; min-width:220px; max-width:320px; text-align:center; padding:30px 26px; border-radius:16px;
  background:linear-gradient(160deg,var(--paper-2),var(--paper-0)); border:1px solid var(--hairline); box-shadow:var(--shadow-lift),var(--edge-top); }
.flow__node--core{ background:linear-gradient(160deg,rgba(201,169,110,.14),var(--paper-0) 70%); border-color:var(--brass-a28); transform:scale(1.06); }
.flow__ic{ width:56px; height:56px; margin:0 auto 16px; border-radius:16px; display:grid; place-items:center; color:var(--brass-300); background:var(--brass-a08); border:1px solid var(--brass-a28); }
.flow__k{ font-family:var(--serif); font-size:22px; color:var(--ink-0); margin-bottom:8px; }
.flow__node p{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:0; } /* Finding 1 */
.flow__link{ align-self:center; width:46px; height:2px; background:linear-gradient(90deg,var(--brass-600),var(--brass-300)); position:relative; }
.flow__link::after{ content:""; position:absolute; right:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--brass-300); box-shadow:0 0 10px var(--brass-a60); }
@media (max-width:820px){ .flow__link{ width:2px; height:34px; background:linear-gradient(180deg,var(--brass-600),var(--brass-300)); } .flow__node--core{ transform:none; } }

.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
@media (max-width:900px){ .pricing{ grid-template-columns:1fr; } }
.price{ position:relative; display:flex; flex-direction:column; gap:6px; padding:30px 28px; }
.price--featured{ background:linear-gradient(160deg, rgba(201,169,110,.12), var(--paper-0) 72%); border-color:var(--brass-a45); box-shadow:var(--shadow-float),var(--edge-top); }
.price__flag{ align-self:flex-start; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--btn-ink); background:linear-gradient(90deg,var(--brass-300),var(--brass-500)); padding:5px 13px; border-radius:999px; margin:0 0 20px; box-shadow:0 6px 16px -8px rgba(201,169,110,.7); }
.price__name{ font-family:var(--serif); font-size:24px; color:var(--ink-0); }
.price__amt{ font-family:var(--serif); font-size:48px; color:var(--brass-200); line-height:1; margin:6px 0 2px; }
.price__amt .cur{ font-size:.5em; vertical-align:top; color:var(--brass-400); margin-right:2px; }
.price__per{ font-family:var(--sans); font-size:14px; color:var(--ink-3); margin-left:4px; }
.price__tag{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-1); line-height:1.4; margin:2px 0 16px; }
.price__feats{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.price__feats li{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-1); } /* Finding 1 */
.price__feats li svg{ color:var(--brass-400); flex:none; }
.price__cta{ margin-top:auto; justify-content:center; }

.site-foot{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:clamp(70px,9vw,120px); padding:34px 20px; border-top:1px solid var(--hairline); font-size:13px; color:var(--ink-3); text-align:center; }
.site-foot a{ text-decoration:none; color:var(--ink-3); }
/* Finding 5: --ink-3 dimmed to .7 opacity measures ~3.1:1 on this obsidian ground (AA needs 4.5), and these links sat at 12px beside 13px siblings in the same row. Full opacity is 5.5:1. */
.site-foot__op{ color:var(--ink-3); text-decoration:none; font-size:13px; border-left:1px solid var(--hairline-2); padding-left:12px; transition:color .2s ease; }
.site-foot__op:hover{ color:var(--brass-300); }

@media (prefers-reduced-motion: reduce){ .site *{ animation:none !important; } }