/* Hallmark · shape: Stage hero + feature-stack · genre: atmospheric · theme: Ribbon (deal 2/3, seed govisible-app-helps-local-4531·6928f6b1·2026-11-02·r0) · job: sign up · draw: 7f-manual
 * hero: Stage · nav: floating pill · footer: mast · imagery: the product, built (no library photos) · signature: the live Visibility Score panel · ribbon: emerald-midnight
 * axes: dark/geometric-sans/emerald+gold · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P1 H1 E1 S2 R1 V2 · weakest: hero-panel density, held it to the ring, three factors and one status row */
/* sweep: sloplint 0 FAIL, 0 REFLEX, 4 WARN (all dismissed: hero 2 actions allowed; floating-pill nav; mic/CTA are field vs accent; pill radius on circles/tags) · render tier not run (no local puppeteer) */
/* waive 48 (logo mark iris/eye are fixed brand-artwork colours) · waive F19 (wordmark Sora 600/800 is the brand lockup, exempt per craft §1) */
@import url("./tokens.css");
@import url("./base.css");

/* ---------------------------------------------------------------------------
   Stage: two static blooms on the emerald night (atmospheric licence: ≤30%,
   never animated), and a low horizon of lit points behind the hero.
--------------------------------------------------------------------------- */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 26% at 82% 8%, color-mix(in oklch, var(--color-field) 20%, transparent), transparent 70%),
    radial-gradient(26% 24% at 6% 92%, color-mix(in oklch, var(--color-accent) 12%, transparent), transparent 70%);
}

/* section rhythm */
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--section-gap-s); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 62ch; }
.head .lead { color: var(--color-ink-2); }
.eyebrow-free { color: var(--color-field); font-weight: 600; } /* a fact-bearing link colour, not a tracked label */

/* ---------------------------------------------------------------------------
   Controls — gold primary (the one signal), quiet secondary
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink);
  font: 700 var(--text-md)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer; box-shadow: var(--edge-light), var(--shadow-part);
  transition: filter var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }
.btn--quiet {
  background: transparent; color: var(--color-ink); border-color: var(--color-rule);
  box-shadow: none; font-weight: 600;
}
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-rule-2); filter: none; }
.btn--lg { min-height: 58px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
@media (prefers-reduced-motion: reduce) { .btn { transition: filter var(--dur-short) linear; } }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------------------------------------------------------------------------
   Nav — a floating pill on a blur backdrop
--------------------------------------------------------------------------- */
.nav { position: sticky; top: var(--space-md); z-index: var(--z-sticky-nav); padding-inline: var(--gutter); }
.nav__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-sm); padding-inline-start: var(--space-lg);
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-paper-2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--edge-light), var(--shadow-part);
}
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.nav__links a:not(.btn) { color: var(--color-ink-2); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.nav__links a:not(.btn):hover { color: var(--color-ink); }
.brandmark { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; }
.brandmark .logo { width: 30px; height: 30px; }
/* logo tile = brand emerald via tokens (CSS wins over the SVG attribute fallback) */
#gv-tile stop:first-child { stop-color: var(--color-field); }
#gv-tile stop:last-child { stop-color: var(--color-field-strong); }

/* the two-tone wordmark — Go (ink) + Visible (emerald), exactly the lockup */
.wordmark { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.wordmark .go { font-weight: 600; color: var(--color-ink); }
.wordmark .vis { font-weight: 800; color: var(--color-field); }

@media (max-width: 54rem) { .nav__links .nav-hide { display: none; } }

/* ---------------------------------------------------------------------------
   Hero (Stage) — head on 5, the live panel on 7
--------------------------------------------------------------------------- */
.hero { padding-top: var(--space-2xl); padding-bottom: var(--section-gap-s); }
.hero__grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: center;
  min-height: min(76dvh, 760px);
}
.hero h1 { font-size: var(--text-display); max-width: 15ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 46ch; }
.hero .actions { margin-top: var(--space-xl); }
.hero__note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-xs); }
.hero__note .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-field); box-shadow: 0 0 10px color-mix(in oklch, var(--color-field) 70%, transparent); flex-shrink: 0; }

/* the low horizon of lit points, behind the panel */
.hero__grid { position: relative; }
.horizon { position: absolute; left: 0; right: 0; bottom: -40px; height: 90px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 10% 60%, var(--color-accent), transparent 60%),
    radial-gradient(2px 2px at 24% 45%, color-mix(in oklch, var(--color-accent) 70%, transparent), transparent 60%),
    radial-gradient(2.5px 2.5px at 38% 70%, var(--color-field), transparent 60%),
    radial-gradient(2px 2px at 52% 50%, var(--color-accent), transparent 60%),
    radial-gradient(2px 2px at 66% 66%, color-mix(in oklch, var(--color-field) 80%, transparent), transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 48%, var(--color-accent), transparent 60%),
    radial-gradient(2px 2px at 92% 64%, var(--color-field), transparent 60%),
    linear-gradient(to top, color-mix(in oklch, var(--color-field) 10%, transparent), transparent);
  opacity: 0.7; mask-image: linear-gradient(to right, transparent, var(--mask-ink) 12%, var(--mask-ink) 88%, transparent);
}

/* ---------------------------------------------------------------------------
   The machined panel (the "instrument") — shared by hero + score section
--------------------------------------------------------------------------- */
.panel {
  position: relative; z-index: 1; border-radius: var(--radius-card);
  background: linear-gradient(176deg, var(--color-paper-2), var(--color-paper));
  box-shadow: var(--edge-light), var(--shadow-panel);
  padding: var(--space-lg);
}
.panel__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.panel__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.01em; }
.panel__meta { color: var(--color-muted); font-size: var(--text-xs); display: inline-flex; align-items: center; gap: var(--space-2xs); }
.panel__meta .live { width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }

/* score ring */
.score { display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: center; }
.ring { position: relative; width: 148px; height: 148px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__num { font-family: var(--font-outlier); font-weight: 600; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.ring__cap { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }

/* factor rows (faders) */
.factors { display: grid; gap: var(--space-md); }
.factor { display: grid; gap: var(--space-xs); }
.factor__top { display: flex; justify-content: space-between; align-items: baseline; }
.factor__name { font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); }
.factor__val { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.track { height: 7px; border-radius: 999px; background: var(--color-paper-3); box-shadow: var(--shadow-inset); overflow: hidden; }
.track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-field-strong), var(--color-field)); }
.track.gold > span { background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent)); }

/* status row: posted to channels */
.posted { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.posted small { color: var(--color-muted); font-size: var(--text-xs); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border-radius: 999px; border: 1px solid var(--color-rule); background: var(--color-paper-3); font-size: var(--text-xs); color: var(--color-ink-2); }
.chip .tick { color: var(--color-field); font-family: var(--font-outlier); }
.sample-tag { font-size: var(--text-xs); color: var(--color-muted); }

/* ---------------------------------------------------------------------------
   One post, everywhere — split with a connector diagram
--------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: center; }
.split--rev { grid-template-columns: 7fr 5fr; }
.fanout { position: relative; }
.fanout svg { width: 100%; height: auto; display: block; }
.fan-label { font-family: var(--font-body); font-weight: 600; font-size: 13px; fill: var(--color-ink); }
.fan-sub { font-family: var(--font-body); font-size: 11px; fill: var(--color-muted); }

.facts { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.fact { display: grid; gap: var(--space-2xs); padding-left: var(--space-md); border-left: 2px solid var(--color-field); }
.fact b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.fact span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   Steps — a real ordered list
--------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); counter-reset: step; }
.steps > li { counter-increment: step; display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-outlier); font-weight: 600; font-size: var(--text-lg); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-title); }
.steps p { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   Posts made for you — switcher of built post cards
--------------------------------------------------------------------------- */
.switch__tabs { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); margin-bottom: var(--space-xl); }
.switch__tabs button { appearance: none; border: 0; background: transparent; color: var(--color-ink-2); font: 600 var(--text-sm)/1 var(--font-display); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); cursor: pointer; }
.switch__tabs button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: var(--edge-light), var(--shadow-part); }
.switch__tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.posts-stage { display: grid; grid-template-columns: 6fr 6fr; gap: var(--space-3xl); align-items: center; }
.post-note { display: grid; gap: var(--space-md); }
.post-note h3 { font-size: var(--text-title); }
.post-note p { color: var(--color-ink-2); }

/* the built post card = AI background + the correct brand layer composited on top */
.postcard { aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; position: relative; box-shadow: var(--shadow-panel); max-width: 460px; margin-inline: auto; width: 100%; }
.postcard__bg { position: absolute; inset: 0; background: linear-gradient(150deg, var(--color-field-strong), var(--pc-deep) 60%, var(--pc-deepest)); }
.postcard__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 20%, color-mix(in oklch, var(--color-accent) 22%, transparent), transparent 70%); }
.postcard__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--pc-scrim), transparent 55%); }
.postcard__layer { position: absolute; inset: 0; padding: var(--space-lg); display: flex; flex-direction: column; }
.pc-top { display: flex; align-items: center; gap: var(--space-xs); }
.pc-logo { width: 34px; height: 34px; border-radius: var(--radius-sm, 9px); }
.pc-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-band-ink); }
.pc-badge { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-accent-ink); background: var(--color-accent); padding: var(--space-xs) var(--space-sm); border-radius: 999px; }
.pc-body { margin-top: auto; }
.pc-head { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.03em; line-height: 0.98; color: var(--color-band-ink); }
.pc-head .u { color: var(--color-accent); }
.pc-tag { margin-top: var(--space-sm); color: color-mix(in oklch, var(--color-band-ink) 82%, transparent); font-size: var(--text-sm); }
.pc-contact { margin-top: var(--space-md); display: inline-flex; align-items: center; gap: var(--space-xs); align-self: flex-start; padding: var(--space-xs) var(--space-sm); border-radius: 999px; background: var(--pc-plate); border: 1px solid var(--pc-plate-line); color: var(--color-band-ink); font-size: var(--text-xs); }

/* ---------------------------------------------------------------------------
   Bolke banao — statement
--------------------------------------------------------------------------- */
.statement { display: grid; gap: var(--space-xl); }
.statement h2 { font-size: var(--text-display-s); max-width: 20ch; }
.statement .say { color: var(--color-ink-2); max-width: 48ch; font-size: var(--text-lead); }
.mic { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper-2); box-shadow: var(--edge-light), var(--shadow-part); width: fit-content; }
.mic__btn { width: 44px; height: 44px; border-radius: 999px; background: var(--color-field); display: grid; place-content: center; flex-shrink: 0; }
.mic__btn svg { width: 20px; height: 20px; }
.mic__wave { display: inline-flex; align-items: center; gap: var(--space-2xs); height: 26px; }
.mic__wave i { width: 3px; border-radius: 3px; background: var(--color-field); opacity: 0.85; }
.mic__said { color: var(--color-ink); font-size: var(--text-sm); }
.mic__said em { color: var(--color-muted); font-style: normal; }

/* ---------------------------------------------------------------------------
   Pricing — three tiers, Pro featured
--------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; }
.plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.plan--feat { border-color: var(--color-accent); background: linear-gradient(176deg, var(--color-paper-2), var(--color-paper)); box-shadow: var(--edge-light), var(--shadow-panel); }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); display: flex; align-items: center; gap: var(--space-sm); }
.plan__name .star { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.plan__price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan__price span { font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); color: var(--color-muted); letter-spacing: 0; }
.plan__for { color: var(--color-ink-2); font-size: var(--text-sm); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.plan__list li { display: flex; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.plan__list li::before { content: "✓"; color: var(--color-field); font-family: var(--font-outlier); }

/* ---------------------------------------------------------------------------
   Close band + footer
--------------------------------------------------------------------------- */
.close { text-align: center; }
.close__inner { max-width: 44ch; margin-inline: auto; display: grid; gap: var(--space-lg); justify-items: center; }
.close h2 { font-size: var(--text-display-s); }
.close p { color: var(--color-ink-2); }

.footer { border-top: 1px solid var(--color-rule); padding-block: var(--space-2xl); }
.footer__grid { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; justify-content: space-between; }
.footer .wordmark { font-size: var(--text-xl); }
.footer__tag { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); max-width: 32ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.footer__col { display: grid; gap: var(--space-sm); }
.footer__col a, .footer__col span { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.footer__col a:hover { color: var(--color-ink); }
.footer__legal { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }

/* ---------------------------------------------------------------------------
   One reveal — fade + 8px rise, visible with no script
--------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

.mic__wave i { animation: eq 1.1s var(--ease-in-out) infinite; }
.mic__wave i:nth-child(1) { height: 10px; animation-delay: 0s; }
.mic__wave i:nth-child(2) { height: 22px; animation-delay: .12s; }
.mic__wave i:nth-child(3) { height: 15px; animation-delay: .24s; }
.mic__wave i:nth-child(4) { height: 26px; animation-delay: .36s; }
.mic__wave i:nth-child(5) { height: 13px; animation-delay: .48s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mic__wave i { animation: none; } }

/* ---------------------------------------------------------------------------
   Legal pages (privacy, terms) — a long-document register, type carries it
--------------------------------------------------------------------------- */
.legal { max-width: 74ch; margin-inline: auto; padding-block: var(--space-2xl) var(--section-gap-s); }
.legal__head { margin-bottom: var(--space-2xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.legal__head h1 { font-size: var(--text-display-s); max-width: none; }
.legal__meta { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.legal__intro { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink); line-height: 1.6; }
.legal h2 { font-size: var(--text-title); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
.legal h3 { font-size: var(--text-md); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin-top: var(--space-lg); margin-bottom: var(--space-2xs); color: var(--color-ink); }
.legal p { color: var(--color-ink-2); line-height: 1.7; margin-bottom: var(--space-md); max-width: none; }
.legal ul { color: var(--color-ink-2); line-height: 1.7; margin: 0 0 var(--space-md); padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.legal a { color: var(--color-field); }
.legal strong { color: var(--color-ink); font-weight: 600; }
.legal hr { border: 0; border-top: 1px solid var(--color-rule); margin-block: var(--space-xl); }

/* skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-field); color: var(--color-field-ink); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .hero__grid, .split, .split--rev, .posts-stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--feat { order: -1; }
  .horizon { display: none; }
}
@media (max-width: 40rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .score { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .nav__inner { gap: var(--space-sm); }
}