/* @greenlight-spec docs/23-documentation-platform.md */
/* Aurora, the Greenlight brand identity, for the marketing home page.
   Faces: display Inter Tight 600, text Inter, record Geist Mono.
   Colour: ink on paper, one green (Signal) that means "the light is on".
   Light and dark are a class on <html>; .dark on an element makes an island that is always dark, .light the reverse. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --white: #FFFFFF;
  --graphite: #121514;
  --gsurf: #1B1F1D;
  --gline: #2B302D;
  --ash: #F4F4F1;                   /* text on graphite: full contrast, never dimmed */
  --signal: #56B881;
  --verdant: #19754B;
  --indigo: #7C6CF5;
  --red: #DC2626;
  --alarm: #F87171;                 /* red as text on graphite: --red is too dark to read there */

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-display: clamp(2.75rem, 6vw, 5.25rem);
  --text-h2: clamp(1.5rem, 2.4vw, 2rem);
  --text-lede: clamp(1.0625rem, 1.25vw, 1.1875rem);

  --r-ctl: 12px;
  --r-card: 16px;
  --r-sq: 10px;
  --r-tag: 6px;

  --ease-out-soft: cubic-bezier(.2, .7, .2, 1);
}

:root, .light {
  --ink: #141716;
  --paper: #FFFFFF;
  --stone: #F4F4F1;
  --line: #E4E4E7;
  --slate: #141716;                 /* secondary text is full-contrast ink, like the dashboard */
  --glow: #E3F4EA;
  --indigo-ink: #4B3FC7;
  --surface: #F4F4F5;
  --well: #EAEAEC;
  --go: var(--verdant);             /* green as text: Verdant on light, Signal on dark */
  --btn-hover: #000000;
  --logo-invert: 1;                 /* the vendor wordmarks are white artwork: inverted to ink on light ground */
  --shadow-frame: 0 1px 2px rgb(20 23 22 / .06), 0 12px 32px -12px rgb(20 23 22 / .18);
  --ring: #19754B;
  color-scheme: light;
}
.dark {
  --ink: #F4F4F1;
  --paper: #121514;
  --stone: #1B1F1D;
  --line: #2A2A2E;
  --slate: #F4F4F1;
  --glow: #1E3A2C;
  --indigo-ink: #9D91F8;
  --surface: #1C1C1E;
  --well: #26262A;
  --go: var(--signal);
  --btn-hover: #FFFFFF;
  --logo-invert: 0;
  --shadow-frame: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
  --ring: #56B881;
  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--line); corner-shape: squircle; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; }
body.no-scroll { overflow: hidden; }
img, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: inherit; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--signal) 35%, transparent); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; font-synthesis: none; }
h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: 1.125rem; line-height: 1.375; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; line-height: 1.375; }

/* ── Primitives ──────────────────────────────────────────────────────────── */
.label { font-family: var(--font-mono); font-size: .6875rem; line-height: 1.4; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.meta { font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; color: var(--slate); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.go { color: var(--go); }
.muted { color: var(--slate); }

/* The lamp: on is Signal, off is an outline in the current colour, agent is indigo. */
.lamp { display: inline-block; flex-shrink: 0; width: .625rem; height: .625rem; border-radius: 999px; background: var(--signal); corner-shape: round; }
.lamp-sm { width: .5rem; height: .5rem; }
.lamp-off { background: transparent; opacity: .4; box-shadow: inset 0 0 0 1.5px currentColor; }
.lamp-agent { background: var(--indigo); }
.cross { width: .625rem; height: .625rem; flex-shrink: 0; color: var(--ink); }

/* Buttons. One primary per view. */
.btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; white-space: nowrap; border: 1px solid var(--ink); border-radius: var(--r-ctl); background: var(--ink); color: var(--paper); font-size: .875rem; line-height: 1.45; font-weight: 500; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, transform .15s; }
.btn:hover { border-color: var(--btn-hover); background: var(--btn-hover); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: transparent; }
.btn-light { border-color: var(--white); background: var(--white); color: var(--graphite); }
.btn-light:hover { border-color: #E9E9EB; background: #E9E9EB; }
.btn-sm { height: 2.25rem; padding: 0 .75rem; border-radius: var(--r-sq); font-size: .8125rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--r-sq); border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn-icon:hover { border-color: var(--ink); background: var(--surface); }
.btn-icon svg { width: 1rem; height: 1rem; }
.btn-icon .ico-lg { width: 1.25rem; height: 1.25rem; }
/* Glass: white over the aurora and graphite; .btn-tint is the same in ink, for the floating bar. */
.btn-glass { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .1); color: var(--white); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-glass:hover { border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .15); }
.btn-tint { border-color: color-mix(in srgb, var(--ink) 15%, transparent); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.btn-tint:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.btn-text { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .5rem; font-size: .875rem; font-weight: 500; color: var(--white); text-underline-offset: .3em; }
.btn-text:hover { text-decoration: underline; }
.btn-text .play { color: var(--signal); }

.card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.framed { box-shadow: var(--shadow-frame); }
.tile { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sq); background: var(--glow); color: var(--go); }
.tile svg { width: 1.25rem; height: 1.25rem; }
.badge { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r-sq); background: var(--surface); padding: .25rem .625rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.4; }
.tag { display: inline-block; border-radius: var(--r-tag); background: var(--well); padding: .125rem .5rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.4; }
.vendor { width: auto; user-select: none; }
.vendor-ink { filter: invert(var(--logo-invert)); }
.site-link { color: var(--ink); text-underline-offset: .3em; }
.site-link:hover { text-decoration: underline; }

/* ── Page furniture ──────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 96rem; margin: 0 auto; padding: 0 1.5rem; }
.section { border-top: 1px solid var(--line); padding: 4rem 0; }
.section-stone { background: var(--stone); }
.section-head { max-width: 46rem; }
.section-head h2 { margin-bottom: 1.25rem; }
.section-head.center { margin: 0 auto; text-align: center; }
.intro { max-width: 40em; font-size: var(--text-lede); line-height: 1.5; color: var(--slate); }
.body-sm { font-size: .9375rem; line-height: 1.625; }
.on-graphite { background: var(--graphite); color: var(--ink); }
@media (min-width: 48rem) { .wrap { padding: 0 2.5rem; } .section { padding: 6rem 0; } }
@media (min-width: 64rem) { .section { padding: 7rem 0; } }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.logo { width: auto; aspect-ratio: 4.8941; }
.navlinks { display: none; align-items: center; gap: 1.5rem; }
.navlinks a { font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: .625rem; }
.only-phone { display: inline-flex; }
.from-sm, .from-lg { display: none; }
@media (min-width: 40rem) { .only-phone { display: none; } .from-sm { display: inline-flex; } }
@media (min-width: 64rem) { .from-lg { display: inline-flex; } }
@media (min-width: 48rem) { .navlinks { display: flex; } }

.topbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; height: 4.5rem; }
.topbar .logo { height: 1.75rem; }
.topbar .navlinks { justify-self: center; }
.topbar .nav-actions { justify-self: end; }
@media (min-width: 48rem) { .topbar { grid-template-columns: 1fr auto 1fr; } .topbar .logo { height: 2rem; } }

/* The floating bar: a glass pill that slides in once the reader scrolls, running opposite to the page theme. */
.floatbar { pointer-events: none; position: fixed; top: .875rem; left: 50%; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 3.5rem; width: min(calc(100% - 2rem), 72rem); padding: 0 .625rem 0 1.25rem; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--paper) 80%, transparent); color: var(--ink); opacity: 0; box-shadow: var(--shadow-frame); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); transform: translate(-50%, -140%); transition: transform .3s var(--ease-out-soft), opacity .3s var(--ease-out-soft); }
.floatbar.on { pointer-events: auto; opacity: 1; transform: translate(-50%, 0); }
.floatbar .logo { height: 1.5rem; }
@media (max-width: 760px) {
  .floatbar { left: 1rem; right: 1rem; width: auto; transform: translateY(-140%); }
  .floatbar.on { transform: none; }
}

/* The phone menu: full screen, on the page theme. */
.sheet { position: fixed; inset: 0; z-index: 40; padding: 1rem; background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; }
.sheet-head .logo { height: 1.75rem; }
.sheet ul { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.sheet li { border-bottom: 1px solid var(--line); }
.sheet li a { display: block; padding: 1rem 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.sheet-actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
.sheet-actions .btn { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; background: var(--graphite); color: var(--ink); }
.hero-aurora { pointer-events: none; position: absolute; inset: 0; z-index: 0; animation: fade 1.6s ease both; }
.hero-aurora canvas { width: 100%; height: 100%; }
.hero-aurora-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(18 21 20 / .9) 0%, rgb(18 21 20 / .7) 45%, rgb(18 21 20 / .2) 75%, transparent 100%); }
@media (min-width: 48rem) { .hero-aurora-fade { background: linear-gradient(0deg, rgb(18 21 20 / .85) 0%, rgb(18 21 20 / .6) 32%, rgb(18 21 20 / .15) 60%, transparent 100%); } }
.hero-main { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr; flex: 1; }
.hero-copy { align-self: end; padding: clamp(2rem, 6vh, 4rem) 0 clamp(2.5rem, 7vh, 4.5rem); }
.hero h1 { font-size: var(--text-display); line-height: 1; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--signal); }
/* --h1w is the headline's longest line, measured by home.js, so the lede ends on the same right edge. */
.hero-lede { max-width: var(--h1w, 32em); margin-top: 1.75rem; font-size: var(--text-lede); line-height: 1.5; color: var(--white); }
.hero-lede p + p { margin-top: 1rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.works { position: relative; z-index: 2; border-top: 1px solid var(--gline); background: var(--gsurf); padding: 1.5rem 0; }
.works .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.works .label { margin-right: .5rem; color: var(--ash); }

/* ── 1. The queue ────────────────────────────────────────────────────────── */
.queue { display: grid; margin-top: 3rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); }
.queue-col { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); }
.queue-now { background: var(--stone); }
.queue-lit { background: var(--paper); }
.queue-lit::before { content: ""; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, var(--glow), transparent 70%); }
.queue-col .label { position: relative; display: flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; }
.queue-now .lamp-off { opacity: 1; }
.queue-col ul { position: relative; }
.queue-col li { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem 0; font-size: .9375rem; line-height: 1.625; }
.queue-col li + li { border-top: 1px solid var(--line); }
.queue-now .cross { margin-top: .48em; color: var(--red); }
.queue-lit .lamp { margin-top: .55em; }
.queue-now li > span:first-of-type { flex: 1; min-width: 0; }
.verdict { flex-shrink: 0; margin-top: .35em; border: 1px solid var(--line); border-radius: var(--r-tag); background: var(--paper); padding: .125rem .375rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.4; color: var(--slate); }
@media (min-width: 48rem) { .queue { grid-template-columns: 1fr 1fr; } }

/* ── 2. Shadow AI ────────────────────────────────────────────────────────── */
.shadow { border-top: 1px solid var(--gline); border-bottom: 1px solid var(--gline); padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; }
.shadow-intro { max-width: 44em; margin: 0 auto; font-family: var(--font-mono); font-size: 1.0625rem; line-height: 1.45; color: var(--ash); }
.shadow-intro .dots { font-size: 1.15em; letter-spacing: .12em; }
.findings { display: grid; gap: 2rem; max-width: 66rem; margin: 2.25rem auto 0; }
.finding-n { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--white); }
.finding-l { max-width: 24em; margin: .75rem auto 0; font-size: .9375rem; line-height: 1.625; color: var(--ash); }
.shadow-close { max-width: 44rem; margin: 3rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--gline); font-family: var(--font-display); font-size: clamp(1.625rem, 3.2vw, 2.5rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; color: var(--white); }
.shadow-close strong { font-weight: 700; white-space: nowrap; color: var(--alarm); }
.shadow-close .warn { display: inline-block; width: .85em; height: .85em; margin-right: .625rem; vertical-align: -.05em; color: var(--alarm); }
@media (min-width: 40rem) { .findings { grid-template-columns: repeat(3, 1fr); } }

/* The dashed arrow from the "worrying" row of the queue down to the shadow-AI line that answers it; drawn by home.js. */
.connector { pointer-events: none; position: absolute; top: 0; left: 0; z-index: 3; width: 1px; height: 1px; overflow: visible; }
.connector-line { fill: none; stroke: #8B93A7; stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.connector-head { fill: #8B93A7; }

/* ── 3. Demo video ───────────────────────────────────────────────────────── */
.video { position: relative; aspect-ratio: 16 / 9; margin-top: 2.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--graphite); box-shadow: var(--shadow-frame); }
.video iframe, .yt-facade, .yt-facade img { position: absolute; inset: 0; width: 100%; height: 100%; }
.video iframe { border: 0; }
.yt-facade img { object-fit: cover; }
.yt-facade .btn { position: absolute; left: clamp(1rem, 3vw, 1.5rem); bottom: clamp(1rem, 3vw, 1.5rem); gap: .625rem; }
.yt-facade:hover .btn { transform: scale(1.03); }
.yt-facade .play { color: var(--verdant); }

/* ── 4. How it works ─────────────────────────────────────────────────────── */
.stages { display: grid; gap: 2rem 1rem; margin-top: 3.5rem; }
.stage { display: flex; flex-direction: column; }
.stage-head { display: flex; align-items: center; gap: .75rem; }
.stage-name { font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.stage-rule { display: none; flex: 1; height: 1px; background: var(--line); }
.stage .card { flex: 1; margin-top: 1.25rem; padding: 1.25rem; }
.stage .card h4 { margin-bottom: .5rem; }
.agent-ink { color: var(--indigo-ink); }
@media (min-width: 48rem) { .stages { grid-template-columns: repeat(4, 1fr); } .stage-rule { display: block; } }

.arch { margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 3.5rem; }
.arch > .label { display: flex; align-items: center; justify-content: center; gap: .625rem; margin-bottom: .875rem; color: var(--indigo-ink); }
.agents { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.agents > div { display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper); }
.wire { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 1rem 0; }
.wire i { width: 2px; height: 1.5rem; border-radius: 999px; background: var(--signal); corner-shape: round; }
.wire span { font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; font-weight: 500; color: var(--go); }
.wire-agent i { background: var(--indigo); }
.wire-agent span { color: var(--indigo-ink); }
.gl-plane { padding: 1.5rem; }
.gl-plane-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.gl-plane-name { display: inline-flex; align-items: center; gap: .625rem; font-size: 1.0625rem; font-weight: 600; }
.gl-plane-name svg { height: 1.25rem; width: auto; }
.gl-plane .badge { height: 2rem; padding: 0 .75rem; }
.caps { display: grid; gap: .75rem; }
.caps > div { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: .9375rem; font-weight: 500; }
.caps svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.tiers { display: grid; gap: 1rem; }
.tier { padding: 1.5rem; }
.tier-head { display: flex; align-items: flex-start; gap: .875rem; }
.tier-head > svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: .125rem; }
.tier-head h4 { font-size: 1.125rem; }
.tier-head .meta { margin-top: .25rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chips span { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem; border-radius: var(--r-sq); background: var(--well); font-size: .8125rem; font-weight: 500; }
@media (min-width: 40rem) { .agents { grid-template-columns: repeat(4, 1fr); } .caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .caps { grid-template-columns: repeat(3, 1fr); } .tiers { grid-template-columns: 1fr 1fr; } }

/* ── 5. Control plane tour ───────────────────────────────────────────────── */
.tour { display: grid; align-items: start; gap: 1.5rem; margin-top: 3rem; }
.tour-nav { display: grid; gap: .25rem; }
.tn { padding: .75rem 1rem; border: 1px solid transparent; border-radius: var(--r-ctl); text-align: left; transition: background-color .15s, border-color .15s; }
.tn:hover { background: color-mix(in srgb, var(--stone) 60%, transparent); }
.tn[aria-selected="true"] { border-color: var(--ink); background: var(--stone); }
.tn-t { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; font-weight: 600; }
.tn-d { display: none; margin-top: .375rem; font-size: .8125rem; line-height: 1.625; color: var(--slate); }
.tn[aria-selected="true"] .tn-d { display: block; }
.tn .lamp { background: transparent; opacity: .4; box-shadow: inset 0 0 0 1.5px currentColor; }
.tn[aria-selected="true"] .lamp { background: var(--signal); opacity: 1; box-shadow: none; }
.tour-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-frame); }
.tour-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@media (min-width: 40rem) { .tour-nav { grid-template-columns: 1fr 1fr; } }
/* Desktop: the tab list and the screenshot share top and bottom edges, whichever is taller sets the height. */
@media (min-width: 64rem) {
  .tour { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); align-items: stretch; }
  .tour-nav { display: flex; flex-direction: column; justify-content: space-between; }
  .tour-view { display: flex; flex-direction: column; }
  .tour-frame { flex: 1; }
}

/* ── 6. Use cases ────────────────────────────────────────────────────────── */
.cases { display: grid; gap: 1rem; margin-top: 3rem; }
.case { display: flex; flex-direction: column; padding: 1.25rem; }
.case h4 { margin-top: 1rem; }
.case p { margin-top: .375rem; }
.case .tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: 1rem; }
@media (min-width: 40rem) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cases { grid-template-columns: repeat(4, 1fr); } }

/* ── 7. Why Greenlight ───────────────────────────────────────────────────── */
.why { display: grid; align-items: start; gap: 3rem 4rem; margin-top: 3rem; }
.why-list { border-top: 1px solid var(--line); }
.why-list > div { display: flex; gap: .875rem; padding: 1.5rem 0; }
.why-list > div + div { border-top: 1px solid var(--line); }
.why-list .lamp { margin-top: .45em; }
.why-list h4 { margin-bottom: .375rem; }
.closer { margin-top: 3rem; text-align: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
/* Phone and tablet: the two side labels sit in a row above the grid; wide screens put them either side of it. */
.quad { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "left right" "grid grid" "bottom bottom"; gap: .75rem; }
.quad-axis { text-align: center; }
.quad-top { grid-area: top; color: var(--go); }
.quad-bottom { grid-area: bottom; }
.quad-left { grid-area: left; }
.quad-right { grid-area: right; text-align: right; }
.quad-grid { grid-area: grid; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.qc { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.qc p:first-child { font-size: .9375rem; font-weight: 600; }
.qc .meta { margin-top: .25rem; }
.qc-win { border-color: var(--signal); background: var(--glow); box-shadow: var(--shadow-frame); }
.qc-win p:first-child { display: flex; align-items: center; gap: .5rem; }
.qc-win svg { height: 1rem; width: auto; }
@media (min-width: 64rem) { .why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 80rem) {
  .quad { grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem; grid-template-areas: "top top top" "left grid right" "bottom bottom bottom"; align-items: center; column-gap: 1rem; }
  .quad-left { text-align: right; }
  .quad-right { text-align: left; }
}

/* ── 8. Customers ────────────────────────────────────────────────────────── */
.customers { display: grid; align-items: stretch; gap: 1.5rem; margin-top: 3rem; }
.study { padding: clamp(1.5rem, 3vw, 2.5rem); }
.study h3 { margin-top: 1.25rem; font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.02em; }
.study > p.muted { margin-top: 1rem; }
.study-list { display: grid; gap: .5rem; margin-top: .75rem; font-size: .9375rem; }
.study-list li { display: flex; align-items: flex-start; gap: .625rem; }
.study-list .lamp { margin-top: .5em; }
.study blockquote { margin-top: 2rem; padding-left: 1.25rem; border-left: 2px solid var(--signal); }
.study blockquote p { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.375; font-weight: 600; letter-spacing: -0.01em; }
.who { margin-top: .5rem; font-size: .8125rem; line-height: 1.45; color: var(--slate); }
.study-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.study-n { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--go); }
.study-stats .who { font-size: .8125rem; }
.testimonials { display: grid; gap: 1rem; }
.testimonial { padding: 1.5rem; }
.testimonial .label { margin-bottom: .75rem; }
.testimonial > p:not(.label) { font-size: 1.0625rem; line-height: 1.625; }
.testimonial .who { margin-top: .75rem; }
@media (min-width: 40rem) { .study-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .customers { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* ── 9. Pricing ──────────────────────────────────────────────────────────── */
/* Plans: Standard (indigo) and Enterprise (green) side by side, CTAs pinned to the bottom. */
.plans { display: grid; gap: 1rem; margin-top: 3rem; }
.plan { display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1.5px solid; border-radius: var(--r-card); background: var(--surface); }
.plan-standard { border-color: var(--indigo-ink); }
.plan-enterprise { border-color: var(--go); }
.plan-name { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.plan-standard .plan-name { color: var(--indigo-ink); }
.plan-enterprise .plan-name { color: var(--go); }
.plan-price { margin-top: .5rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.plan-price small { font-family: var(--font-sans); font-size: .8125rem; font-weight: 500; letter-spacing: normal; }
.plan > .body-sm { margin-top: .5rem; }
.per-app-rate { padding: 0 .375rem; border-radius: var(--r-tag); background: color-mix(in srgb, var(--indigo-ink) 12%, transparent); color: var(--indigo-ink); font-weight: 500; }
.plan-plus { margin-top: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: 600; }
.meters { margin-top: 1.25rem; border-bottom: 1px solid var(--line); list-style: none; }
.meters li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .875rem 0; border-top: 1px solid var(--line); }
.meters h4 { font-size: .9375rem; }
.meters .meta { flex-shrink: 0; color: var(--indigo-ink); }
.plan-list { display: grid; gap: .75rem; margin: 1.25rem 0 1.75rem; list-style: none; font-size: .875rem; line-height: 1.5; }
.plan-enterprise .plan-list { gap: 1.25rem; }
.plan-list li { display: flex; gap: .625rem; }
.plan-list svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .15rem; }
.plan-standard .plan-list svg { color: var(--indigo-ink); }
.plan-enterprise .plan-list svg { color: var(--go); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.calc { display: grid; gap: 1.5rem; margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--stone); }
.calc label { display: block; }
.calc label + label { margin-top: 2rem; }
.calc-val { display: block; margin-top: .5rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.calc-val small { font-size: 1rem; font-weight: 500; letter-spacing: normal; color: var(--slate); }
.calc input[type="range"] { display: block; width: 100%; margin-top: .75rem; accent-color: var(--go); }
.calc-note { margin-top: 2rem; font-size: .8125rem; line-height: 1.625; color: var(--slate); }
.calc-note b { color: var(--ink); }
.calc-out { padding: 1.5rem; border: 1px solid var(--gline); border-radius: var(--r-card); }
.calc-out .label { color: var(--ash); }
.calc-cost { margin-top: .5rem; font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--white); }
.calc-cost small { font-size: 1.125rem; font-weight: 500; letter-spacing: normal; color: var(--ash); }
.calc-out dl { margin-top: 1.5rem; border-top: 1px solid var(--gline); border-bottom: 1px solid var(--gline); font-size: .8125rem; line-height: 1.45; }
.calc-out dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
.calc-out dl > div + div { border-top: 1px solid var(--gline); }
.calc-out dt { color: var(--ash); }
.calc-out dt b, .calc-out dd { font-weight: 600; color: var(--white); }
.calc-out dd { flex-shrink: 0; }
.calc-out dt.total { font-weight: 600; color: var(--white); }
.calc-out dd.roi { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; color: var(--signal); }
.calc-out > p:last-child { margin-top: 1.25rem; font-size: .8125rem; line-height: 1.625; color: var(--ash); }
.facts { display: grid; gap: 1rem; margin-top: 1rem; }
.facts > div { display: flex; gap: .875rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.fact-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--r-tag); background: var(--glow); color: var(--go); }
.fact-ico svg { width: 1rem; height: 1rem; }
.facts h4 { font-size: .9375rem; }
.facts h4 sup { color: var(--go); }
.facts .body-sm { margin-top: .25rem; }
.fact-note { margin-top: .5rem; font-size: .6875rem; line-height: 1.4; }
.calc-scope { margin-top: .75rem; font-size: .8125rem; color: var(--ash); }
@media (min-width: 48rem) { .plans { grid-template-columns: 1fr 1fr; } .facts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .calc { grid-template-columns: 1fr 1fr; } }

/* ── 10. Install ─────────────────────────────────────────────────────────── */
.clouds { display: grid; gap: 1rem; margin-top: 3rem; }
.cloud { display: flex; flex-direction: column; padding: 1.5rem; }
.cloud-logo { display: flex; align-items: center; height: 2rem; }
.cloud-logo > svg { width: 1.75rem; height: 1.75rem; }
.cloud h3 { margin-top: 1.25rem; font-size: 1.375rem; }
.cloud p { margin: .5rem 0 1.5rem; }
.cloud .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 40rem) { .clouds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80rem) { .clouds { grid-template-columns: repeat(4, 1fr); } }

/* ── 11. FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 56rem; margin-top: 2.5rem; border-bottom: 1px solid var(--line); }
.faq-i { border-top: 1px solid var(--line); }
.faq-i h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 500; line-height: 1.375; letter-spacing: normal; }
.faq-i button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; text-align: left; color: var(--ink); }
.js .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out-soft); }
.js .faq-a > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .35s; }
.faq-a p { max-width: 60ch; padding-bottom: 1.35rem; font-size: 1rem; line-height: 1.625; color: var(--slate); }
.js .faq-a p { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .3s var(--ease-out-soft); }
.js .faq-open .faq-a { grid-template-rows: 1fr; }
.js .faq-open .faq-a > div { visibility: visible; transition-delay: 0s; }
.js .faq-open .faq-a p { opacity: 1; transform: none; transition-delay: .08s; }
.faq-mark { position: relative; flex: none; align-self: center; width: .875rem; height: .875rem; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--slate); transform: translate(-50%, -50%); transition: transform .3s var(--ease-out-soft), background .2s ease; }
.faq-mark::before { width: 100%; height: 1.5px; }
.faq-mark::after { width: 1.5px; height: 100%; }
.faq-i button:hover .faq-mark::before, .faq-i button:hover .faq-mark::after { background: var(--ink); }
.faq-open .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-open .faq-mark::before { transform: translate(-50%, -50%) rotate(180deg); }

/* ── 12. Closing call and footer ─────────────────────────────────────────── */
.access { border-top-color: var(--gline); }
.access .cta-row { justify-content: center; margin-top: 2.5rem; }
.footer { border-top: 1px solid var(--gline); padding: 3.5rem 0; color: var(--ash); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2rem 3rem; }
.footer-about { max-width: 30em; }
.footer .logo { height: 1.75rem; color: var(--white); }
.footer-line { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.625; color: var(--white); }
.footer .meta { color: var(--ash); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9375rem; }
.footer-nav a { color: var(--white); text-underline-offset: 4px; }
.footer-nav a:hover { text-decoration: underline; }

/* ── Book a demo ─────────────────────────────────────────────────────────── */
.cal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(18 21 20 / .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cal-modal { display: flex; flex-direction: column; width: 100%; max-width: 64rem; height: min(90svh, 52rem); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-frame); }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem 1rem; border-bottom: 1px solid var(--line); }
.cal-bar > p { font-weight: 600; }
.cal-bar > div { display: flex; align-items: center; gap: 1rem; }
.cal-bar .site-link { font-size: .8125rem; }
.cal-modal iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--white); }

/* ── Motion: everything arrives once, from slightly below, and then stays put. ── */
.rise { animation: rise .8s var(--ease-out-soft) both; animation-delay: var(--d, 0s); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s var(--ease-out-soft); will-change: opacity, transform; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s var(--ease-out-soft); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > :nth-child(2) { transition-delay: 70ms; }
.stagger.is-in > :nth-child(3) { transition-delay: 140ms; }
.stagger.is-in > :nth-child(4) { transition-delay: 210ms; }
.stagger.is-in > :nth-child(5) { transition-delay: 280ms; }
.stagger.is-in > :nth-child(6) { transition-delay: 350ms; }
.stagger.is-in > :nth-child(7) { transition-delay: 420ms; }
.stagger.is-in > :nth-child(8) { transition-delay: 490ms; }
.stagger.is-in > :nth-child(9) { transition-delay: 560ms; }
.stagger.is-in > :nth-child(n+10) { transition-delay: 630ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .hero-aurora { animation: none; }
  .js .reveal, .js .stagger > * { opacity: 1; transform: none; transition: none; }
  .js .faq-a, .js .faq-a > div, .js .faq-a p, .faq-mark::before, .faq-mark::after { transition: none; }
}