/* Design system tokens (docs/DESIGN-BRIEF.md, final consolidated version).
   The original dark-theme :root block that used to live here (--bg/--card/
   --text/--muted/--border/--accent/--accent2) is gone — every rule in the
   file is now migrated off it (checkpoint 2), so it was dead weight, not
   a live fallback for anything.

   No manual toggle, no localStorage, no [data-theme] attribute this
   version — purely prefers-color-scheme. Same variable names in both
   blocks per the brief, so every component that uses them resolves to the
   right mode automatically with zero per-component dark-mode logic. */
:root {
  --canvas: #F6F5F2;
  --ink: #211F1C;
  --body-ink: #524E48;
  --hairline: #E4E1DB;
  --surface-card: #FFFFFF;
  --accent-teal: #0C7C82;
  --signal-warning: #C77D2E;
  --shadow-soft: rgba(33,31,28,.08);
  /* Single source of truth for inter-section rhythm — .header's bottom
     padding, every .section's top/bottom padding, and .footer's padding
     all reference this instead of individually-set values, so the gap
     from any section's end to the next section's start is identical
     throughout the page by construction. */
  --section-gap: 96px;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-data: "JetBrains Mono", "Fira Code", monospace;
}

/* Dark mode reverted to the original pre-redesign RizLabs theme, not the
   brief's own dark tokens — exact values pulled from git history
   (git show 7638bf0:assets/css/styles.css, unchanged through every
   pre-redesign commit), not approximated. Only canvas/ink/body-ink/
   hairline/surface-card revert: --accent-teal/--signal-warning/
   --shadow-soft keep the redesign's own values since those drive the
   status dot and trace-strip glow, not buttons — out of scope for this
   revert. Light mode is completely untouched. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0b1220;
    --ink: #e9eefb;
    --body-ink: #aab6d3;
    --hairline: #223252;
    --surface-card: #0f1a2e;
    --accent-teal: #14A0A8;
    --signal-warning: #E0994D;
    --shadow-soft: rgba(0,0,0,.35);
  }
}

/* Self-hosted (assets/fonts/) rather than a Google Fonts CDN call — the
   site has zero external network dependencies today, self-hosting keeps
   it that way. Both weights actually resolve to the same variable-capable
   file per family; this mirrors how Google's own css2 API serves them
   (confirmed by inspecting its response before downloading), not a
   mistake. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-body); color:var(--ink); background:var(--canvas);}
/* Anchor-link targets land below the sticky nav-bar, not underneath it —
   without this, clicking "Problem" etc. would scroll the heading partly
   under the bar. Matches .nav-bar's ~64px height plus a little breathing
   room. Smooth scrolling only when motion is welcome; default (reduced
   motion) is an instant jump, which is what happens with no
   scroll-behavior set at all. */
html{scroll-padding-top:80px}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---- Nav bar (its own sticky, full-width band — was floating directly on
   the hero/canvas before, with no visual identity of its own). Sticky
   rather than fixed: reserves its own space in normal flow, so nothing
   else needs manual top-padding compensation to avoid jumping under it. */
.nav-bar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
/* weight 600 (vs body/link weight 400), tight tracking, and a size bump
   over the nav links (which stay at the default ~16px) so this reads as
   the brand mark rather than another nav label. */
.brand{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--ink)}

.links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Underline draws in from the left on hover (transform, not a slide from
   off-screen) alongside the existing color shift — same restrained
   language as the trace-strip/steps-line draw-ins elsewhere on the page. */
/* :not(.btn) on the padding specifically — .links a's own specificity
   (class+type) beats .btn's (single class), so an unscoped padding-bottom
   here silently overrode part of .btn's own padding shorthand, breaking
   vertical centering on "Join waitlist" (paddingTop:10px vs
   paddingBottom:2px, confirmed via computed styles). */
.links a{position:relative;font-family:var(--font-body);color:var(--body-ink);font-weight:400;transition:color .15s ease}
.links a:not(.btn){padding-bottom:2px}
.links a:hover{color:var(--ink)}
.links a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}
.links a:not(.btn):hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .links a{transition:none}
  .links a:not(.btn)::after{transition:none}
}

.menu-btn{
  display:none;
  border:1px solid var(--hairline);
  background:var(--surface-card);
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
  font-weight:500;
  cursor:pointer;
}

/* Primary fill is ink, not teal — teal is reserved for signature/status
   uses only (trace glow, in-range dot), so it reads as a signal color
   rather than a generic action color. Pill shape, identical fill logic,
   everywhere on the page (no per-section variation). In light mode this
   inverts cleanly in dark mode since --ink/--canvas swap roles together —
   but dark mode overrides the fill entirely below (original site's
   cyan->violet gradient, explicit exception, not token-driven). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px;border-radius:9999px;background:var(--ink);color:var(--canvas);font-family:var(--font-body);font-weight:500;border:0;cursor:pointer;transition:opacity .15s ease}
.btn:hover{opacity:.85}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.btn.secondary:hover{opacity:1;border-color:var(--ink)}

/* Dark mode only: every .btn (nav, hero, form submit — not just the hero
   CTA) gets the original site's gradient fill instead of the redesign's
   solid ink pill, per explicit direction. Deliberately NOT token-driven
   (a --cta-gradient variable would suggest this is meant to generalize —
   it's a one-off exception for this one specific revert, not a new part
   of the design system). Confirmed before building broadly: light/dark
   buttons now differ in kind (gradient vs solid), not just retint. */
@media (prefers-color-scheme: dark) {
  .btn{
    background: linear-gradient(90deg, #7dd3fc, #a78bfa);
    color: #061023;
  }
}

/* .header now wraps only the hero (nav moved out to its own sticky
   .nav-bar) — no top padding here, .nav's own 18px/side padding plus
   .hero's margin-top:34px already provide the nav-to-hero gap; only the
   bottom padding (hero-to-first-section gap) is still this element's job. */
.header{padding:0 0 var(--section-gap);background:var(--canvas)}

/* align-items:center, not start: hero-card (trace strip + status +
   mini-grid + note) is substantially taller than hero-copy (headline +
   CTA + stat row), and align-items:start left ~220px of empty space below
   the shorter column since the row height is set by the taller one
   either way — centering redistributes that space evenly instead of
   dumping it all below hero-copy. */
.hero{margin-top:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.hero h1{font-family:var(--font-display);font-weight:500;letter-spacing:-0.03em;font-size:44px;line-height:1.05;margin:0 0 10px;color:var(--ink)}
.hero p{font-family:var(--font-body);color:var(--body-ink);font-size:16px;line-height:1.6;margin:0 0 18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.stat{padding:12px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface-card);box-shadow:none;transition:box-shadow .15s ease}
.stat:hover{box-shadow:0 4px 16px var(--shadow-soft)}
.stat-k{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.stat-v{font-family:var(--font-body);color:var(--body-ink);margin-top:4px;font-size:13px}

.hero-card{padding:16px;border-radius:20px;background:var(--surface-card);border:1px solid var(--hairline);box-shadow:none;transition:box-shadow .15s ease}
.hero-card:hover{box-shadow:0 8px 24px var(--shadow-soft)}
.card-title{font-family:var(--font-display);font-weight:500;color:var(--ink);margin-bottom:10px}
.status{display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;border:1px solid var(--hairline);background:var(--canvas);margin-bottom:12px}
.status .dot{width:10px;height:10px;border-radius:50%;background:var(--accent-teal)}
.status.warn .dot{background:var(--signal-warning)}
.status-main{font-family:var(--font-body);font-weight:500;color:var(--ink)}
.status-sub{font-family:var(--font-data);color:var(--body-ink);font-size:12px;margin-top:2px}

.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini{padding:12px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface-card);box-shadow:none;transition:box-shadow .15s ease}
.mini:hover{box-shadow:0 4px 16px var(--shadow-soft)}
.mini-label{font-family:var(--font-data);color:var(--body-ink);font-size:12px}
/* Live-graphic touch #2: a soft opacity dip-and-return as each value
   updates (see main.js render()), rather than an abrupt text swap —
   "ticking gently," not a flashy transition. */
.mini-value{font-family:var(--font-data);font-size:22px;font-weight:500;margin-top:6px;color:var(--ink);transition:opacity .3s ease}
.mini-value.tick{opacity:.35}
@media (prefers-reduced-motion: reduce){
  .mini-value{transition:none}
}
.mini-sub{font-family:var(--font-body);color:var(--body-ink);font-size:12px;margin-top:4px}

.note{font-family:var(--font-body);color:var(--body-ink);font-size:12px;margin-top:12px;line-height:1.5}

/* ---- Live temperature trace strip (signature element, already built —
   kept as-is per the brief, colors now resolve through the simplified
   token system above with no changes needed to the SVG/animation itself) */
.trace-strip{margin-bottom:14px}
.trace-svg{display:block;width:100%;height:56px}
.trace-band{fill:var(--canvas)}
.trace-line{fill:none;stroke:var(--hairline);stroke-width:1.5}
.trace-dot{fill:var(--accent-teal)}
.trace-dot-glow{fill:var(--accent-teal);opacity:.25}
.trace-labels{display:flex;justify-content:space-between;margin-top:4px}
.trace-label{font-family:var(--font-data);color:var(--body-ink);font-size:11px}

@keyframes trace-drift{
  0%   { transform:translateY(0px); }
  50%  { transform:translateY(-3px); }
  100% { transform:translateY(0px); }
}
.trace-dot,.trace-dot-glow{
  transform-origin:center;
  transform-box:fill-box;
  animation:trace-drift 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .trace-dot,.trace-dot-glow{ animation:none; }
}

/* ---- Continuous flow (docs/DESIGN-BRIEF.md checkpoint 2) ----
   No alternating background bands, and no drawn divider at all now — the
   border-bottom this had before was itself still a section-separator
   line, just a thinner one; removed entirely per explicit direction.
   Whitespace only (--section-gap), nothing drawn. */
.section{padding:var(--section-gap) 0}
h2{font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em;font-size:28px;margin:0 0 10px;color:var(--ink)}
.lead{font-family:var(--font-body);color:var(--body-ink);max-width:820px;line-height:1.7;margin:0 0 18px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{padding:16px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface-card);box-shadow:none;transition:box-shadow .15s ease}
.card:hover{box-shadow:0 4px 16px var(--shadow-soft)}
.card h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0 0 6px}
.card p{font-family:var(--font-body);margin:0;color:var(--body-ink);line-height:1.6}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.list{font-family:var(--font-body);margin:0;padding-left:18px;color:var(--body-ink);line-height:1.8}
.list strong{font-weight:500;color:var(--ink)}

/* No teal here — brief scopes it to CTA/in-range indicator/trace glow only
   ("nowhere else"). Distinguished from .card by fill (canvas vs
   surface-card), not color. */
.callout{padding:16px;border-radius:16px;border:1px solid var(--hairline);background:var(--canvas)}
.callout-title{font-family:var(--font-display);font-weight:500;color:var(--ink);margin-bottom:6px}
.callout p{font-family:var(--font-body);color:var(--body-ink);margin:0;line-height:1.6}

.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{padding:16px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface-card);box-shadow:none;transition:box-shadow .15s ease}
.step:hover{box-shadow:0 4px 16px var(--shadow-soft)}
.step-n{position:relative;z-index:1;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--canvas);border:1px solid var(--hairline);font-family:var(--font-display);font-weight:500;color:var(--ink);margin-bottom:10px}
.step h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0 0 6px}
.step p{font-family:var(--font-body);color:var(--body-ink);margin:0;line-height:1.6}

/* Live-graphic touch #1: connecting line across the step badges, draws
   itself in once when scrolled into view (see main.js). left/right:33px
   rather than a fixed width so it stays aligned with the first/last
   badge's center across viewport widths without JS measurement — the
   grid is symmetric, so the last badge's center is exactly 33px from the
   right edge, mirroring the first badge's 33px from the left. */
.steps-line{
  position:absolute;
  top:33px;
  left:33px;
  right:33px;
  height:1px;
  background:var(--hairline);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.2s ease;
}
.steps-line.in-view{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .steps-line{transition:none;transform:scaleX(1)}
}

/* On-scroll reveal for below-the-fold section content (see main.js) — a
   short fade + slight rise, not a slide from off-screen. Applied to each
   section's .container as a whole, not staggered per-card: this is polish,
   not the page's signature moment (the hero trace strip). Not applied to
   the hero itself (already visible on load, shouldn't fade in) or the
   nav-bar/footer (persistent chrome, not scroll-triggered content). */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

.embed{border-radius:16px;overflow:hidden;border:1px solid var(--hairline);background:var(--surface-card)}
iframe{width:100%;height:520px;border:0}

.hint{font-family:var(--font-body);color:var(--body-ink);font-size:13px;margin-top:10px}

/* No max-width here (was 860px, ~200px narrower than every other
   section's content — a leftover from the original pre-redesign CSS,
   never revisited): the form now spans the same width as #problem's
   cards, #how's steps, etc. instead of sitting narrower than its
   siblings for no reason tied to this content. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
label{display:flex;flex-direction:column;gap:8px;font-family:var(--font-body);color:var(--body-ink);font-size:13px}
input,textarea{padding:12px 12px;border-radius:12px;border:1px solid var(--hairline);background:var(--surface-card);color:var(--ink);font-family:var(--font-body);outline:none}
input:focus,textarea:focus{border-color:var(--ink)}
.small{font-family:var(--font-body);color:var(--body-ink);font-size:12px;line-height:1.6}

/* Same size as the nav-bar (18px 0 padding, matching .nav exactly) —
   bookend bars top and bottom of the page. Supersedes the earlier
   "extra breathing room before the footer" padding (was
   calc(--section-gap*1.5) 0 --section-gap ≈ 144px/96px, ~280px total vs
   nav-bar's 60px) — that request and this one are in real tension since
   footer's content is inherently two lines vs nav's one, so exact
   pixel-identical height isn't achievable without oddly cramped padding;
   matching the padding treatment itself is what actually reads as
   symmetric. Divider above it stays — that part of the earlier exception
   still holds. */
.footer{padding:18px 0;border-top:1px solid var(--hairline)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  iframe{height:420px}
  /* Redefines the variable, not a specific selector's padding, so it
     cascades to .header/.section/.footer at once — was a one-off
     .section{padding:56px 0} override before, which silently didn't
     apply to header/footer's own gaps. */
  :root{--section-gap:56px}

  .menu-btn{display:inline-flex}

  .links{
    display:none;
    width:100%;
    margin-top:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid var(--hairline);
    background:var(--surface-card);
  }
  .links.open{display:flex; flex-direction:column; align-items:stretch; gap:10px}
  /* Same specificity bug as the desktop underline padding, different
     symptom: this unscoped rule was overriding .btn's own pill
     border-radius (9999px -> 12px) and padding on "Join waitlist" in the
     mobile dropdown — not reported, but same root cause, found while
     fixing the reported one. */
  .links a:not(.btn){padding:10px 10px; border-radius:12px}
  .links a.btn{justify-content:center}
  .nav{align-items:flex-start; flex-wrap:wrap}
}

/* ==== Software-hub layer (rebrand: RizLabs as a software hub) ==========
   Everything below is additive — same tokens, same pill buttons, same
   hairline cards. Teal stays a signal colour (live/launching dots only). */

/* Smooth cross-page navigation in browsers that support it; others just
   navigate normally. Off entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}

:root{--ease-out:cubic-bezier(.2,.7,.2,1)}
.reveal{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}

.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:22px;height:22px;flex:none}
.brand-mark rect{fill:var(--ink)}
.brand-mark path{stroke:var(--canvas)}

.eyebrow{font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--body-ink);margin:0 0 12px}

/* Hero entrance: one soft rise on load, staggered by --d. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s var(--ease-out) both;animation-delay:calc(var(--d,0) * 90ms)}
@media (prefers-reduced-motion: reduce){.rise{animation:none}}

/* Staggered children inside a .reveal container. */
.stagger > *{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),box-shadow .15s ease}
.stagger > :nth-child(2){transition-delay:70ms,70ms,0s}
.stagger > :nth-child(3){transition-delay:140ms,140ms,0s}
.stagger > :nth-child(4){transition-delay:210ms,210ms,0s}
.stagger > :nth-child(5){transition-delay:280ms,280ms,0s}
.stagger > :nth-child(6){transition-delay:350ms,350ms,0s}
.reveal.in-view .stagger > *{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.stagger > *{opacity:1;transform:none;transition:none}}

/* ---- Hub hero ---- */
.hub-hero{margin-top:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hub-hero h1{font-family:var(--font-display);font-weight:500;letter-spacing:-0.035em;font-size:56px;line-height:1.02;margin:0 0 16px;color:var(--ink);text-wrap:balance}
.hub-hero p.sub{font-family:var(--font-body);color:var(--body-ink);font-size:18px;line-height:1.6;margin:0 0 24px;max-width:56ch}

/* Product board: the hub's calm "live" element — what RizLabs is shipping. */
.board{padding:8px;border-radius:20px;background:var(--surface-card);border:1px solid var(--hairline);transition:box-shadow .2s ease}
.board:hover{box-shadow:0 8px 24px var(--shadow-soft)}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 8px}
.board-title{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.board-meta{font-family:var(--font-data);font-size:11px;color:var(--body-ink)}
.board-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:14px;transition:background .2s ease}
.board-row:hover{background:var(--canvas)}
.board-row + .board-row{border-top:1px solid var(--hairline)}
.board-row:hover + .board-row,.board-row:hover{border-top-color:transparent}
.board-name{font-family:var(--font-body);font-weight:500;color:var(--ink)}
.board-sub{font-family:var(--font-body);font-size:13px;color:var(--body-ink)}

.icon-tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink)}
.icon-tile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-tile.lg{width:52px;height:52px;border-radius:16px}
.icon-tile.lg svg{width:24px;height:24px}

/* Status pills — teal dot only for things that are live/launching. */
.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:9999px;border:1px solid var(--hairline);font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--body-ink);white-space:nowrap;background:var(--surface-card)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--body-ink);opacity:.6}
.pill.live::before{background:var(--accent-teal);border-color:var(--accent-teal);opacity:1}
.pill.launch::before{background:var(--accent-teal);border-color:var(--accent-teal);opacity:1;animation:pulse 2.4s ease-in-out infinite}
.pill.build::before{border-color:var(--signal-warning);opacity:1}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-teal) 45%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-teal) 0%,transparent)}}
@media (prefers-reduced-motion: reduce){.pill.launch::before{animation:none}}

/* ---- Direction / pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.pillar{padding:22px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface-card);transition:box-shadow .2s ease,transform .25s var(--ease-out)}
.pillar:hover{box-shadow:0 6px 20px var(--shadow-soft)}
.pillar h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:16px 0 6px;font-size:18px}
.pillar p{font-family:var(--font-body);color:var(--body-ink);margin:0;line-height:1.6}
.pillar .more{display:inline-block;margin-top:14px;font-family:var(--font-body);font-weight:500;color:var(--ink);font-size:14px}
.more .arr{display:inline-block;transition:transform .2s var(--ease-out)}
a:hover .more .arr,.more:hover .arr{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){.more .arr{transition:none}}

/* Whole-card links */
a.card-link{display:block;color:inherit}
a.card-link:focus-visible,.btn:focus-visible,.links a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}

/* ---- Product grid ---- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface-card);height:100%;transition:box-shadow .2s ease}
a.card-link:hover .product,.product:hover{box-shadow:0 6px 20px var(--shadow-soft)}
.product-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.product h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0;font-size:19px}
.product p{font-family:var(--font-body);color:var(--body-ink);margin:0;line-height:1.6;flex:1}
.product .platforms{font-family:var(--font-body);font-size:13px;color:var(--body-ink)}

/* ---- Platforms strip ---- */
.platforms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.platform{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface-card)}
.platform-name{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.platform-sub{font-family:var(--font-body);font-size:13px;color:var(--body-ink);line-height:1.5}

/* ---- Principles (plain list, no boxes) ---- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px}
.principle{border-top:1px solid var(--hairline);padding-top:16px}
.principle h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0 0 6px;font-size:17px}
.principle p{font-family:var(--font-body);color:var(--body-ink);margin:0;line-height:1.6}

/* ---- Roadmap timeline ---- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative}
.phase{padding:20px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface-card)}
.phase-k{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--body-ink);margin-bottom:10px}
.phase ul{margin:0;padding-left:18px;color:var(--body-ink);line-height:1.8;font-family:var(--font-body)}
.phase li strong{font-weight:500;color:var(--ink)}

/* ---- Site overview / directory ---- */
.directory{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}
.dir-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--hairline);color:inherit;transition:padding .25s var(--ease-out)}
.dir-item:hover{padding-left:10px}
.dir-name{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.dir-desc{font-family:var(--font-body);font-size:14px;color:var(--body-ink);margin-top:2px}
.dir-item .arr{color:var(--body-ink);transition:transform .2s var(--ease-out)}
.dir-item:hover .arr{transform:translateX(3px);color:var(--ink)}
@media (prefers-reduced-motion: reduce){.dir-item,.dir-item .arr{transition:none}.dir-item:hover{padding-left:4px}}

/* ---- Contact band (still hairline, not a colour band) ---- */
.contact-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:28px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface-card)}
.contact-row h2{margin:0}
.contact-row p{margin:4px 0 0;font-family:var(--font-body);color:var(--body-ink)}

/* ---- App product page ---- */
.app-hero{margin-top:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.app-id{display:flex;gap:16px;align-items:center;margin-bottom:22px}
/* The app's own Play Store icon — the one place a product colour appears,
   because it has to match what people see on their home screen. */
.app-icon{width:72px;height:72px;flex:none;border-radius:20px;display:grid;place-items:center;background:linear-gradient(150deg,#5ab0ff,#3550ff 55%,#7a3cff);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 10px 24px -12px rgba(53,80,255,.7)}
.app-icon svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app-icon.sm{width:40px;height:40px;border-radius:12px;box-shadow:none}
.app-icon.sm svg{width:22px;height:22px}
.app-hero h1{font-family:var(--font-display);font-weight:500;letter-spacing:-0.035em;font-size:52px;line-height:1.03;margin:0 0 14px;color:var(--ink);text-wrap:balance}
.app-hero p.sub{font-family:var(--font-body);color:var(--body-ink);font-size:18px;line-height:1.6;margin:0 0 24px;max-width:52ch}
.btn[aria-disabled="true"]{cursor:default}
.store-note{font-family:var(--font-body);font-size:13px;color:var(--body-ink);margin-top:14px}

/* Phone mock with a calm scan line — Glass Scan's live moment. */
.phone{width:min(280px,100%);aspect-ratio:9/18;margin:0 auto;border-radius:38px;border:1px solid var(--hairline);background:var(--surface-card);padding:12px;box-shadow:0 20px 50px -28px var(--shadow-soft)}
.phone-screen{position:relative;height:100%;border-radius:28px;background:var(--canvas);overflow:hidden;display:grid;place-items:center}
.viewfinder{position:relative;width:62%;aspect-ratio:1;border-radius:18px}
.viewfinder::before{content:"";position:absolute;inset:0;border-radius:18px;
  background:
    linear-gradient(var(--ink),var(--ink)) top left/22px 2px,
    linear-gradient(var(--ink),var(--ink)) top left/2px 22px,
    linear-gradient(var(--ink),var(--ink)) top right/22px 2px,
    linear-gradient(var(--ink),var(--ink)) top right/2px 22px,
    linear-gradient(var(--ink),var(--ink)) bottom left/22px 2px,
    linear-gradient(var(--ink),var(--ink)) bottom left/2px 22px,
    linear-gradient(var(--ink),var(--ink)) bottom right/22px 2px,
    linear-gradient(var(--ink),var(--ink)) bottom right/2px 22px;
  background-repeat:no-repeat}
.viewfinder svg{position:absolute;inset:18%;width:64%;height:64%}
.viewfinder svg rect{fill:var(--ink)}
.scanline{position:absolute;left:8%;right:8%;top:10%;height:2px;border-radius:2px;background:var(--accent-teal);box-shadow:0 0 12px var(--accent-teal);animation:scan 2.8s var(--ease-out) infinite alternate}
@keyframes scan{from{top:10%}to{top:88%}}
.scan-result{position:absolute;left:12px;right:12px;bottom:14px;padding:10px 12px;border-radius:14px;background:var(--surface-card);border:1px solid var(--hairline);display:flex;gap:10px;align-items:center;animation:pop 5.6s var(--ease-out) infinite}
.scan-result .k{font-family:var(--font-body);font-size:11px;color:var(--body-ink)}
.scan-result .v{font-family:var(--font-data);font-size:12px;color:var(--ink)}
.scan-result .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-teal);flex:none}
@keyframes pop{0%,40%{opacity:0;transform:translateY(8px)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion: reduce){.scanline{animation:none;top:50%}.scan-result{animation:none}}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature{padding:20px;border-radius:16px;border:1px solid var(--hairline);background:var(--surface-card);transition:box-shadow .2s ease}
.feature:hover{box-shadow:0 4px 16px var(--shadow-soft)}
.feature h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:14px 0 6px;font-size:17px}
.feature p{font-family:var(--font-body);color:var(--body-ink);margin:0;line-height:1.6}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-body);color:var(--body-ink);line-height:1.6}
.checks li strong{font-weight:500;color:var(--ink)}
.checks svg{flex:none;width:18px;height:18px;margin-top:4px;fill:none;stroke:var(--accent-teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- Legal / policy reading page ---- */
.doc{max-width:760px;margin:0 auto;padding:56px 20px var(--section-gap)}
.doc h1{font-family:var(--font-display);font-weight:500;letter-spacing:-0.03em;font-size:44px;line-height:1.05;margin:0;color:var(--ink)}
.doc .meta{font-family:var(--font-body);color:var(--body-ink);font-size:14px;margin:14px 0 32px}
.doc .meta time{font-family:var(--font-data);font-size:13px}
.doc h2{font-size:22px;margin:44px 0 10px}
.doc p,.doc li{font-family:var(--font-body);color:var(--body-ink);line-height:1.75;font-size:16px;max-width:66ch}
.doc strong{font-weight:500;color:var(--ink)}
.doc ul.plain{padding-left:20px;margin:8px 0}
.doc ul.plain li{margin:4px 0}
.doc a.inline{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
.doc a.inline:hover{text-decoration-color:var(--ink)}
.short{padding:22px 24px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface-card);margin-bottom:8px}
.short h2{margin:0 0 14px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.toc a{font-family:var(--font-body);font-size:13px;color:var(--body-ink);padding:6px 12px;border:1px solid var(--hairline);border-radius:9999px;transition:border-color .15s ease,color .15s ease}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.table-wrap{overflow-x:auto;margin:14px 0 6px;border:1px solid var(--hairline);border-radius:16px;background:var(--surface-card)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:540px;font-family:var(--font-body);font-size:15px}
.table-wrap th,.table-wrap td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--hairline);color:var(--body-ink);line-height:1.6}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap th{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.table-wrap td:first-child{font-weight:500;color:var(--ink);white-space:nowrap}
.mail{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:12px 16px;border-radius:14px;border:1px solid var(--hairline);background:var(--surface-card);font-family:var(--font-body);font-weight:500;color:var(--ink)}
.breadcrumb{font-family:var(--font-body);font-size:13px;color:var(--body-ink);margin-bottom:22px}
.breadcrumb a:hover{color:var(--ink)}

/* ---- Footer sitemap ---- */
.footer-map{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px;padding:48px 0 28px}
.footer-col h4{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--body-ink);margin:0 0 12px}
.footer-col a{display:block;font-family:var(--font-body);font-size:14px;color:var(--ink);padding:4px 0;opacity:.85;transition:opacity .15s ease}
.footer-col a:hover{opacity:1}
.footer-col p{font-family:var(--font-body);font-size:14px;color:var(--body-ink);line-height:1.6;margin:10px 0 0;max-width:34ch}
.footer-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--hairline)}

@media (max-width: 900px){
  .hub-hero,.app-hero{grid-template-columns:1fr;margin-top:32px;gap:28px}
  .hub-hero h1{font-size:38px}
  .app-hero h1{font-size:36px}
  .pillars,.products,.principles,.timeline,.features{grid-template-columns:1fr}
  .platforms-row{grid-template-columns:repeat(2,1fr)}
  .directory{grid-template-columns:1fr}
  .footer-map{grid-template-columns:1fr 1fr}
  .footer-map .footer-col:first-child{grid-column:1/-1}
  .doc h1{font-size:34px}
  .doc{padding-top:32px}
}
.footer-site{border-top:1px solid var(--hairline)}
.board-row{color:inherit}
@media (max-width: 480px){
  .board-row{grid-template-columns:40px 1fr}
  .board-row .pill{grid-column:2;justify-self:start}
}

/* Nav "Contact" pill: `.links a` (class+type) outranks `.btn` (class), so
   it was inheriting the nav link colour (body-ink on an ink fill — and
   ink-on-ink on hover). Re-assert the button's own text colour here. */
.links a.btn,.links a.btn:hover{color:var(--canvas)}
@media (prefers-color-scheme: dark){
  .links a.btn,.links a.btn:hover{color:#061023}
}