/* ============================================================
   GrantField · Editorial page system (full redesign)
   Confident sans (Geist), neutral paper palette, depth delivered by
   one dark band rather than color everywhere. One restrained accent.
   Real photography goes in labeled image slots. No serif, no faked
   imagery, no em dashes.
   ============================================================ */

:root {
  --paper: #F1EFE9; --paper-2: #E8E5DC; --paper-3: #DEDACE;
  --ink: #171710; --ink-2: #56544A; --ink-3: #6E6C61; --ink-4: #A8A69A;
  --hair: rgba(23,23,16,0.16); --hair-2: rgba(23,23,16,0.08);
  /* Opaque menu surface for the account dropdown. It sits over the landing's
     varied backgrounds (dark band, hero), so it must be solid -- the var was
     undefined here, which rendered the menu transparent ("liquid glass"). */
  --panel: #FBFAF7;
  --accent: #0E5A42;          /* deep saturated evergreen, used sparingly */
  --accent-2: #157A59;
  --night: #101410;           /* dark band canvas (depth + saturation) */
  --night-2: #161B16;
  --on-night: #EAE7DE; --on-night-2: #9DA89E;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: rgba(14,90,66,0.18); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
* { scrollbar-width: thin; scrollbar-color: #c9c5b8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cfcbbe; border-radius: 6px; }

.mono { font-family: var(--mono); }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lbl.sm { font-size: 10px; letter-spacing: 0.1em; }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1600px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 68px); }
.pad { padding: clamp(72px, 12vh, 150px) 0; }
[data-density="compact"] .pad { padding: clamp(44px, 7vh, 88px) 0; }
/* short sections fill the viewport below the nav so the next section cannot
   bleed in when scrolled flush to the masthead */
.tall { min-height: calc(100vh - var(--navH, 56px)); display: flex; align-items: center; }
.tall > .wrap { width: 100%; }

/* ---- paging: each top-level screen is one viewport tall (below the sticky
   masthead). The slide-6 "catch" is JS-driven (the magnet effect in
   editorial-page.jsx): a downward scroll always magnetizes onto slide 6 at the
   footer's black line, and a continued scroll then reveals the footer; an
   upward scroll from the bottom never catches. CSS scroll-snap is deliberately
   not used -- it was too weak to catch a fast flick and pulled both ways. ---- */
html { scroll-padding-top: var(--navH, 56px); }
/* ---- section rhythm: ONE system for every numbered slide ----
   Each slide (02-06) is a full-viewport beat with its content vertically
   centered, the same .pad breathing room, and the same 50px head-to-content
   gap (grids below set margin-top: 50px to match). No per-slide scales. */
.band, #cases, .final { min-height: calc(100vh - var(--navH, 56px)); display: flex; align-items: center; }
.band > .wrap, #cases > .wrap, .final > .wrap { width: 100%; }
/* value section (02/06) carries the integrated stat strip below the triad */
/* value section (02/06): live figures folded into each triad card */

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.16,.7,.3,1), transform 1s cubic-bezier(.16,.7,.3,1); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }
.rv.x1 { transition-delay: .08s; } .rv.x2 { transition-delay: .16s; } .rv.x3 { transition-delay: .26s; } .rv.x4 { transition-delay: .36s; }
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6,0,.2,1); }
.wipe.in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .rv, .wipe, .how, .phase { opacity: 1; transform: none; clip-path: none; transition: none; }
  .brand .mk::after { animation: none; }
}

/* ---- display type ---- */
.disp { font-family: var(--sans); font-weight: 650; letter-spacing: -0.04em; line-height: 0.98; color: var(--ink); text-wrap: balance; }
.h-xl { font-size: clamp(46px, 7vw, 104px); letter-spacing: -0.05em; line-height: 0.92; }
.h-lg { font-size: clamp(37px, 5.3vw, 71px); }
.h-md { font-size: clamp(26px, 3vw, 40px); }
.accent { color: var(--accent); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--ink); border-radius: 2px; transition: background .16s, color .16s, transform .16s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--hair); padding-bottom: 3px; transition: border-color .16s; }
.tlink:hover { border-color: var(--ink); }
.tlink svg { width: 15px; height: 15px; }

/* ---- focus indicators (keyboard) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
.btn:focus-visible, .tlink:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.email input:focus-visible, .fa-act.email input:focus-visible, .modal input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================
   NAV
   ============================================================ */
.brand { display: flex; align-items: center; gap: 11px; margin-left: -4px; }
.brand .mk { width: 26px; height: 26px; flex: none; position: relative; border-radius: 0; background: none; animation: none; }
.brand .mk::before { content: ""; position: absolute; inset: 0; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M11%206%20H7%20a1%201%200%200%200%20-1%201%20V25%20a1%201%200%200%200%201%201%20H11%20M21%206%20H25%20a1%201%200%200%201%201%201%20V25%20a1%201%200%200%201%20-1%201%20H21'%20stroke='black'%20stroke-width='1.8'%20fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M11%206%20H7%20a1%201%200%200%200%20-1%201%20V25%20a1%201%200%200%200%201%201%20H11%20M21%206%20H25%20a1%201%200%200%201%201%201%20V25%20a1%201%200%200%201%20-1%201%20H21'%20stroke='black'%20stroke-width='1.8'%20fill='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.brand .mk::after { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 7.6px; height: 7.6px; border-radius: 50%; background: var(--accent-2); transform: translate(-50%,-50%); animation: gfPulse 3s ease-in-out infinite; }
@keyframes gfPulse { 0%,100% { transform: translate(-50%,-50%) scale(0.82); opacity: 0.82; } 50% { transform: translate(-50%,-50%) scale(1.14); opacity: 1; } }
.brand .w { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.nav-left { display: flex; align-items: center; gap: clamp(20px,3vw,42px); }
.nav-left .links { display: flex; align-items: center; gap: clamp(12px,2vw,26px); }
.nav-left a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); transition: color .15s; white-space: nowrap; }
.nav-left a:hover { color: var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
/* Prime hero: centered, driven by inline styles + .gf-eyebrow / .gf-grad-ink
   (gf.css). The old left-aligned rules (.hero h1 margin, .hero .sub,
   .hero-live, .hero-cap) were retired with that composition. */
.hero { position: relative; }

/* ============================================================
   SECTION HEAD (numbered, editorial)
   ============================================================ */
.sec-head { display: flex; align-items: flex-start; gap: 18px; }
.sec-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-3); padding-top: 6px; flex: none; }
.sec-head .ttl { flex: 1; }

/* anchored sections: land flush under the sticky nav (nav is ~83px) so the
   color transition has no previous-section bleed */
#how, #product, #cases { scroll-margin-top: 84px; }

/* ============================================================
   VALUE (three principles)
   ============================================================ */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.tc { padding: 26px 24px 30px; }
.tc-head { display: flex; align-items: center; gap: 13px; }
.tc-n { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-3); }
.tc .mk { color: var(--accent); display: flex; align-items: center; }
.tc .mk svg { width: 36px; height: 36px; }
.tc h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 20px 0 0; }
.tc p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 50px; }
.how { padding: 26px 24px 4px; position: relative; opacity: 0; transform: translateX(46px); transition: opacity .9s cubic-bezier(.16,.7,.3,1), transform .9s cubic-bezier(.16,.7,.3,1); will-change: opacity, transform; }
.how.in { opacity: 1; transform: none; }
.how:nth-child(2) { transition-delay: .12s; }
.how:nth-child(3) { transition-delay: .24s; }
.how .num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.how h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 16px 0 0; }
.how p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 26px; }
.how .bar { position: absolute; top: 0; left: 24px; height: 2px; width: 0; border-radius: 0 0 2px 2px; background: var(--accent); transition: width 1s cubic-bezier(.2,.7,.3,1); }
.how.in .bar { width: 40px; }

/* ============================================================
   PRODUCT (dark band, depth + saturation)
   ============================================================ */
.band { background: var(--night); color: var(--on-night); position: relative; }
/* light variant of the product band (off-white, for comparison) */
.band.light { background: var(--paper); color: var(--ink); }
.band.light .lbl { color: var(--ink-3); }
.band.light .disp { color: var(--ink); }
.band.light .prod-copy .sub { color: var(--ink-2); }
.band.light .phase .pn { color: var(--ink-3); }
.band.light .phase .pt { color: var(--ink); }
.band.light .phase.on .pt { color: var(--accent); }
.band.light .phase .pd { color: var(--ink-2); }
.band.light .stage { background: rgba(255,255,255,0.52); border-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 28px rgba(10,92,66,0.10); }
.band.light .stage-chrome { border-bottom-color: rgba(20,20,15,0.1); }
.band.light .stage-chrome .d { background: rgba(20,20,15,0.18); }
.band.light .stage-chrome .l { color: var(--ink-2); }
.band .lbl { color: var(--on-night-2); }
.band .disp { color: var(--on-night); }
.prod-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,5vw,60px); align-items: start; margin-top: 26px; }
.prod-copy .sub { margin-top: 22px; font-size: clamp(15px,1.3vw,17px); line-height: 1.6; color: var(--on-night-2); max-width: 46ch; }
.phase-list { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.phase { display: flex; gap: 14px; padding: 16px 18px; opacity: 0; transform: translateY(20px); transition: opacity .85s cubic-bezier(.16,.7,.3,1), transform .85s cubic-bezier(.16,.7,.3,1); will-change: opacity, transform; }
.phase.in { opacity: 1; transform: none; }
.phase:nth-child(2) { transition-delay: .14s; }
.phase:nth-child(3) { transition-delay: .28s; }
.phase .pn { font-family: var(--mono); font-size: 11px; color: var(--on-night-2); flex: none; width: 24px; padding-top: 2px; transition: color .25s; }
.phase.on .pn { color: var(--accent-2); }
.phase .pt { font-size: 16px; font-weight: 500; color: var(--on-night); }
.phase .pd { font-size: 13px; color: var(--on-night-2); margin-top: 4px; line-height: 1.5; }
.phase.on .pt { color: #fff; }
.stage { position: relative; border: 1px solid rgba(234,231,222,0.16); background: #0a0d0a; overflow: hidden; aspect-ratio: 4 / 3.2; will-change: transform; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-chrome { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 11px 13px; border-bottom: 1px solid rgba(234,231,222,0.1); }
.stage-chrome .d { width: 8px; height: 8px; border-radius: 50%; background: rgba(234,231,222,0.2); }
.stage-chrome .l { margin-left: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-night-2); }

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 50px; }
.uc { padding: 26px 22px 28px; display: flex; flex-direction: column; }
.uc .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; }
.uc h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 14px 0 0; }
.uc p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; }
.uc .ex { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.03em; }
.uc .mk { margin-top: auto; padding-top: 30px; color: var(--ink); }
.uc .mk svg { width: 42px; height: 42px; display: block; }
.uc .mk .hl { color: var(--accent); }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final { text-align: center; position: relative; overflow: hidden; }
.final > .wrap { position: relative; z-index: 1; }
.final .in { display: flex; flex-direction: column; align-items: center; }
/* manual two-line heading: keep its own line break, avoid balance reflow */
.final .disp { text-wrap: nowrap; line-height: 0.86; }
/* at phone widths a manual line ("field to work.") can exceed the gutter-bound
   width at the clamp floor; let it wrap so it cannot clip. The <br> still sets
   the primary break. */
@media (max-width: 520px) { .final .disp { text-wrap: wrap; } }
.final .sub { margin: 10px auto 0; max-width: 48ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
/* final section action ladder (Explore -> Match -> Digest) */
.final-actions { width: min(640px, 100%); margin: 50px auto 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.fa-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 22px; width: 100%; }
.final-actions { align-self: stretch; }
.fa-l { min-width: 0; flex: 1 1 auto; }
.fa-l .lbl { display: block; }
.fa-l .fa-d { font-size: 14px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; }
.fa-act { flex: 0 0 auto; }
.fa-act.btn { width: auto; }
.fa-act.email { display: flex; gap: 8px; width: auto; justify-content: flex-end; }
.fa-act.email input { width: 196px; flex: none; background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.9); border-radius: 11px; color: var(--ink); padding: 13px 13px; font-size: 13.5px; outline: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 0 rgba(10,92,66,0.06); transition: box-shadow .15s, border-color .15s; }
.fa-act.email input:focus { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(16,163,116,0.16); }
.fa-act.email input::placeholder { color: var(--ink-3); }
@media (max-width: 640px) {
  .fa-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fa-act, .fa-act.email, .fa-act.email input { width: 100%; }
  .fa-act.email input { flex: 1; }
}
.email input { flex: 1; background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.9); border-radius: 11px; color: var(--ink); padding: 13px 15px; font-size: 14px; outline: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 0 rgba(10,92,66,0.06); }
.email input::placeholder { color: var(--ink-3); }

.footer { border-top: 1px solid var(--ink); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; padding: 56px 0 34px; }
.footer .w { font-weight: 600; font-size: 16px; }
.footer .tag { font-size: 13px; color: var(--ink-2); margin-top: 12px; max-width: 30ch; line-height: 1.5; }
.fcol h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.fcol a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 5px 0; transition: color .14s; }
.fcol a:hover { color: var(--ink); }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 30px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }

/* ============================================================
   SIGN-IN MODAL
   ============================================================ */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(20,18,12,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); will-change: backdrop-filter; backface-visibility: hidden; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .22s; }
.scrim.in { opacity: 1; pointer-events: auto; }
.modal { width: min(420px,100%); background: var(--paper); border: 1px solid var(--ink); border-radius: 4px; padding: 28px; transform: translateY(10px) scale(.98); transition: transform .26s cubic-bezier(.2,.7,.3,1); text-align: center; }
.scrim.in .modal { transform: none; }
.modal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal .br { display: flex; align-items: center; justify-content: center; gap: 11px; }
.modal .field { text-align: left; }
.modal h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 20px 0 0; }
.modal p { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.5; }
.modal label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.modal input { width: 100%; margin-top: 8px; background: var(--paper-2); border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); padding: 12px 14px; font-size: 14px; outline: 0; }
.modal .field { margin-top: 18px; }
.modal .foot { margin-top: 18px; } .modal .foot .btn { width: 100%; justify-content: center; }
.modal .alt { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.modal .alt a { color: var(--accent); }
.modal .note { margin-top: 14px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: center; }

@media (max-width: 1000px) {
  .uc-grid { grid-template-columns: 1fr 1fr; }
  .triad, .how-grid, .prod-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .uc-grid, .foot-grid { grid-template-columns: 1fr; } }

/* Reduce motion (Settings pref; gf-api sets data-reduce-motion on <html> on every page). */
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }