/* ==========================================================================
   Roofaio marketing site — CODA-derived design language
   (mirrors docs/ui/design-language.md and typescript_ui theme tokens)
   Dark-first · charcoal canvas · Roofaio red accent · cream primary actions
   ========================================================================== */

:root {
  /* surfaces */
  --bg-canvas:    #22252a;
  --bg-card:      #2b2e35;
  --bg-elevated:  #34373f;
  --bg-input:     #1d1f24;
  --bg-hover:     rgba(244, 246, 247, .04);

  /* text */
  --text-primary:   #f4f6f7;
  --text-secondary: #878787;
  --text-tertiary:  #606c7a;

  /* borders */
  --border-primary:   #3f434b;
  --border-secondary: #525b68;

  /* status */
  --info:    #7cacff;
  --danger:  #ff6b6b;
  --success: #a3d795;
  --warning: #ffd966;

  /* brand */
  --accent:      #e03a2b;
  --accent-soft: rgba(224, 58, 43, .14);
  --ink:         #1c1a17;
  --cream:       #f6f1e7;

  /* type */
  --font-sans:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* shape */
  --r-md: 8px;
  --r-lg: 12px;

  --shadow-card: 0 12px 32px rgba(0, 0, 0, .20), 0 8px 16px rgba(0, 0, 0, .15),
                 0 2px 4px rgba(0, 0, 0, .10), 0 0 1px rgba(0, 0, 0, .30);
  --shadow-deep: 0 24px 64px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .20),
                 0 2px 4px rgba(0, 0, 0, .10), 0 0 1px rgba(0, 0, 0, .30);

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 190px; }

@media (max-width: 860px) {
  html { scroll-padding-top: 116px; }
}

body {
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .875em;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: .1em .35em;
}

::selection { background: var(--accent-soft); color: var(--cream); }

/* ---------- type utilities ---------- */
.serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: .005em; }

.kicker {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.kicker-accent { color: var(--cream); opacity: .82; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;               /* pill buttons, per design language */
  padding: 11px 22px;                 /* default size — the base class had NO
                                         padding, so unsized .btn pills rendered
                                         as slivers (account page bug 2026-08-28) */
  font-size: .925rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out),
              background 120ms var(--ease-out), color 120ms var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  /* translucent brand cream — the Stripe checkout "Pay" beige (2026-08-28):
     the pill sits ON the dark surface instead of punching a white hole in it */
  background: rgba(246, 241, 231, .55);
  color: var(--ink);
  border: 1px solid rgba(246, 241, 231, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .3);
}
.btn-primary:hover {
  background: rgba(246, 241, 231, .75);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15);
}
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-secondary);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--text-tertiary);
}
.btn-sm { padding: 8px 18px;  font-size: .875rem; }
.btn-lg { padding: 14px 30px; font-size: 1rem; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(34, 37, 42, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--border-primary); background: rgba(34, 37, 42, .94); }

.nav-inner {
  /* full page width — brand abuts the left viewport edge, not the content column */
  max-width: none;
  margin: 0;
  padding: 0 28px;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-brand { display: flex; align-items: center; flex: none; }
.nav-brand img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 120ms var(--ease-out);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-cta { flex: none; }
.nav-download { flex: none; margin-right: 10px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

/* ==========================================================================
   STICKY SECTION BANNER — a living blueprint strip under the nav.
   Desktop: visible drafting grid, drifting detail circle, radius dimension,
            scanner sweep, floating crest with shimmering rays, field-photo
            screenshot keystoned like it was shot from the lower right of a
            monitor and taped to a stack of plans, self-drawing dimension
            leader on every section swap, measuring-tape edge with a red
            comet progress head.
   Mobile:  falls back to a thin kicker strip.
   ========================================================================== */
.section-bar {
  position: fixed;
  top: 78px;
  left: 0; right: 0;
  z-index: 99;
  background: linear-gradient(180deg, rgba(30, 33, 39, .97), rgba(25, 27, 32, .95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(214, 204, 186, .16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38), 0 1px 0 rgba(244, 246, 247, .03) inset;
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
  overflow: hidden;
}
.section-bar.visible { transform: none; opacity: 1; }

/* blueprint paper: fine weave + major grid, both visible, drifting diagonally */
.section-bar::before {
  content: "";
  position: absolute;
  inset: -90px;
  background-image:
    linear-gradient(rgba(214, 204, 186, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 204, 186, .075) 1px, transparent 1px),
    linear-gradient(rgba(214, 204, 186, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 204, 186, .16) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px;
  animation: barDrift 42s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* soft ridge glows at the far ends — barely-there warmth, no sweeps */
.section-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px 130px at 4% 50%, rgba(246, 241, 231, .06), transparent 70%),
    radial-gradient(560px 150px at 96% 50%, rgba(246, 241, 231, .045), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@keyframes barDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(90px, 90px); }
}

/* drifting drafting geometry */
.section-bar-plans { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plan { position: absolute; }
.plan-dial {
  left: 11%;
  top: 50%;
  width: 172px; height: 172px;
  margin-top: -86px;
  opacity: .8;
  animation: dialSpin 90s linear infinite;
}
@keyframes dialSpin { to { transform: rotate(360deg); } }
.plan-dim {
  right: 5%;
  bottom: -16px;
  width: 260px; height: 72px;
  opacity: .9;
}

/* ---- tracer scenes: roof geometry drawn live, cycling endlessly ----
   Three 14s acts on a 42s shared timeline (0s / 14s / 28s offsets).
   Within each act the pen cursor rides the stroke's offset-path while
   the stroke dash-draws behind it; detail ticks pop in as it passes,
   then the whole scene holds and fades before the next act starts. */
.plan-tracer {
  top: 50%;
  width: 340px;
  height: 142px;
  margin-top: -71px;
  opacity: 0;
  animation: tracerCycle 42s linear infinite;
}
.tracer-a { left: 3%; }
.tracer-b { left: 42%;  animation-delay: -14s; }
.tracer-c { right: 3%;  animation-delay: -28s; margin-top: -59px; }

@keyframes tracerCycle {
  0%       { opacity: 0; }
  2.5%     { opacity: 1; }
  30%      { opacity: 1; }
  33.3334% { opacity: 0; }
  100%     { opacity: 0; }
}

/* main stroke: bright blueprint line, drawn by the pen */
.plan-tracer .pl {
  fill: none;
  stroke: rgba(232, 223, 205, .8);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: plDraw 42s linear infinite;
}
.tracer-b .pl { animation-delay: -14s; }
.tracer-c .pl { animation-delay: -28s; }
@keyframes plDraw {
  0%       { stroke-dashoffset: 100; }
  16%      { stroke-dashoffset: 0; }
  33.3334% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}

/* pen cursor: rides the exact same path, in sync with the draw */
.plan-tracer .pc {
  offset-rotate: 0deg;
  opacity: 0;
  animation: penRide 42s linear infinite;
}
.tracer-a .pc { offset-path: path('M16 30 H344 V70 H218 V124 H16 Z'); }
.tracer-b .pc { offset-path: path('M66 46 H190 V116 H66 Z'); animation-delay: -14s; }
.tracer-c .pc { offset-path: path('M96 116 L180 52 L264 116'); animation-delay: -28s; }
.plan-tracer .pc circle { fill: none; stroke: rgba(232, 223, 205, .95); stroke-width: 1.8; }
.plan-tracer .pc path   { fill: none; stroke: rgba(232, 223, 205, .95); stroke-width: 1.8; }
.plan-tracer .pc .pcd   { fill: rgba(232, 223, 205, .95); stroke: none; }
@keyframes penRide {
  0%       { offset-distance: 0%;   opacity: 0; }
  1.5%     { offset-distance: 0%;   opacity: 1; }
  16%      { offset-distance: 100%; opacity: 1; }
  18%      { offset-distance: 100%; opacity: 0; }
  33.3334% { offset-distance: 100%; opacity: 0; }
  100%     { offset-distance: 100%; opacity: 0; }
}

/* detail ticks: pop in staggered, as if snapped down as the pen passes */
.plan-tracer .pd {
  fill: none;
  stroke: rgba(214, 204, 186, .42);
  stroke-width: 1.1;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: pdPop 42s linear infinite;
}
.tracer-b .pd { animation-delay: -14s; }
.tracer-c .pd { animation-delay: -28s; }
.plan-tracer .pd-ghost { stroke: rgba(214, 204, 186, .16); stroke-dasharray: 5 6; stroke-dashoffset: 0; animation: none; }
@keyframes pdPop {
  0%       { stroke-dashoffset: 14; }
  8%       { stroke-dashoffset: 0; }
  33.3334% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}

/* hatch flood: zone fills with diagonal hatch right after its outline closes */
.plan-tracer .ph {
  fill: none;
  stroke: rgba(214, 204, 186, .34);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: phFlood 42s linear infinite;
}
.tracer-b .ph { animation-delay: -14s; }
@keyframes phFlood {
  0%       { stroke-dashoffset: 100; opacity: 1; }
  16%      { stroke-dashoffset: 100; opacity: 1; }
  24%      { stroke-dashoffset: 0;   opacity: 1; }
  30%      { opacity: 1; }
  33.3334% { stroke-dashoffset: 0;   opacity: 0; }
  100%     { stroke-dashoffset: 0;   opacity: 0; }
}

/* drain circles on the cricket scene: present from the start, no pop */
.plan-tracer .pd2 {
  fill: none;
  stroke: rgba(214, 204, 186, .5);
  stroke-width: 1.4;
}

/* anchor ring: snaps on at the start corner, or at the finish point */
.plan-tracer .pa {
  fill: none;
  stroke: rgba(246, 241, 231, .95);
  stroke-width: 1.9;
  opacity: 0;
  animation: paPop 42s linear infinite;
}
.tracer-b .pa { animation-delay: -14s; }
.tracer-c .pa { animation-delay: -28s; }
@keyframes paPop {
  0%       { opacity: 0; }
  3%       { opacity: 1; }
  30%      { opacity: 1; }
  33.3334% { opacity: 0; }
  100%     { opacity: 0; }
}
.plan-tracer .pa-late { animation-name: paPopLate; }
@keyframes paPopLate {
  0%       { opacity: 0; }
  15.5%    { opacity: 0; }
  17%      { opacity: 1; }
  30%      { opacity: 1; }
  33.3334% { opacity: 0; }
  100%     { opacity: 0; }
}

/* registration crosshairs spinning at the far ends on wide screens */
.section-bar-reg {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: regSpin 26s linear infinite;
}
.section-bar-reg-l { left: 10px; }
.section-bar-reg-r { right: 10px; animation-direction: reverse; }
@media (min-width: 1440px) { .section-bar-reg { opacity: .75; } }
@keyframes regSpin { to { transform: rotate(360deg); } }

.section-bar-inner {
  position: relative;
  z-index: 2;
  /* back in the centered content column — the bar stays full-bleed,
     its contents align with the page */
  max-width: 1200px;
  margin: 0 auto;
  padding: 17px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* floating crest with a warm halo and shimmering burst rays */
.section-bar-crest {
  width: 48px;
  height: 48px;
  flex: none;
  animation: crestFloat 5.2s ease-in-out infinite;
  filter:
    drop-shadow(0 0 9px rgba(246, 241, 231, .4))
    drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
@keyframes crestFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.crest-rays { transform-origin: 120px 104px; animation: crestPulse 3.6s var(--ease-out) infinite; }
@keyframes crestPulse {
  0%, 62%, 100% { opacity: 1;   transform: scale(1); }
  72%           { opacity: .5;  transform: scale(.93); }
  84%           { opacity: 1;   transform: scale(1.05); }
}
.crest-rays polygon { animation: rayGlint 2.6s ease-in-out infinite; }
.crest-rays polygon:nth-child(1) { animation-delay: 0s; }
.crest-rays polygon:nth-child(2) { animation-delay: .18s; }
.crest-rays polygon:nth-child(3) { animation-delay: .36s; }
.crest-rays polygon:nth-child(4) { animation-delay: .54s; }
.crest-rays polygon:nth-child(5) { animation-delay: .72s; }
@keyframes rayGlint {
  0%, 26%, 100% { opacity: 1; }
  12%           { opacity: .4; }
}

/* ---- text block: blueprint kicker, serif label, self-drawing leader ---- */
.section-bar-text { min-width: 0; }
.section-bar-kicker {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(214, 204, 186, .8);
  white-space: nowrap;
}
.section-bar-label {
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--cream);
  white-space: nowrap;
}
.section-bar-leader {
  display: block;
  width: 210px;
  height: 9px;
  margin: 3px 0 4px;
}
.section-bar.swap .section-bar-leader line { animation: drawLeader 620ms var(--ease-out) 90ms forwards; }
@keyframes drawLeader { to { stroke-dashoffset: 0; } }
.section-bar-tag {
  font-size: .92rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-bar-proof {
  margin-left: auto;
  text-align: right;
  flex: none;
  padding-left: 26px;
  border-left: 1px solid rgba(214, 204, 186, .22);
}
.section-bar-proof-num {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(246, 241, 231, .3);
}
.section-bar-proof-label {
  font-size: .76rem;
  color: var(--text-tertiary);
  margin-top: 6px;
  max-width: 190px;
  line-height: 1.4;
}
.section-bar-cta { flex: none; }

/* text/proof settle on swap (photo deals separately above) */
.section-bar.swap .section-bar-text,
.section-bar.swap .section-bar-proof { animation: barSwap 300ms var(--ease-out); }
@keyframes barSwap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- measuring-tape edge + red comet progress head ---- */
.section-bar-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg,
    rgba(246, 241, 231, .15) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
  opacity: .8;
  z-index: 2;
  pointer-events: none;
}
.section-bar-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  pointer-events: none;
}
.section-bar-progress span {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(246, 241, 231, .22), rgba(246, 241, 231, .85) 70%, #fffaf0);
  transition: width 80ms linear;
}
.section-bar-progress span::after {
  content: "";
  position: absolute;
  right: -3px; top: -2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f6f1e7;
  box-shadow: 0 0 10px 2px rgba(246, 241, 231, .55);
  animation: headPulse 1.8s ease-in-out infinite;
}
@keyframes headPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: .75; }
}

/* hide the nav CTA while the banner carries it — never two trial buttons */
body.banner-visible .nav-cta { visibility: hidden; }

/* ---- manual-mode band (How it works) ---- */
.manual-band {
  max-width: 1200px;
  margin: 100px auto 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  padding: 60px 48px;
  background: linear-gradient(180deg, var(--bg-card), rgba(43, 46, 53, .55));
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.manual-band h3 { font-size: 1.9rem; margin: 14px 0 18px; }
.manual-band p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.7; }
.manual-band .ticks { margin-top: 26px; }
.manual-band-video {
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
}
.manual-band-video video { width: 100%; height: auto; }

@media (max-width: 920px) {
  .manual-band { grid-template-columns: 1fr; gap: 32px; padding: 44px 28px; text-align: center; }
  .manual-band .ticks { display: inline-block; text-align: left; }
  .manual-band .kicker { justify-content: center; }
}

/* ---- slim pages (suggestions / account stubs) ---- */
.slim-main { min-height: 70vh; padding: 150px 24px 90px; }
.slim-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-card), rgba(43, 46, 53, .55));
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 64px 48px;
}
.slim-card .kicker { justify-content: center; }
.slim-card h1 { font-size: 2.2rem; margin: 16px 0 18px; }
.slim-card p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }
.slim-card .btn { margin-top: 14px; }
.slim-note { font-size: .85rem; color: var(--text-tertiary); margin-top: 22px; }

/* ---- legal documents (terms / privacy full text) ---- */
.slim-card-legal {
  max-width: 780px;
  text-align: left;
  padding: 64px 56px;
}
.slim-card-legal h1 { text-align: center; }
.slim-card-legal .legal-updated {
  text-align: center;
  color: var(--text-tertiary);
  font-size: .85rem;
  margin-bottom: 40px;
}
.slim-card-legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 36px 0 12px;
  color: var(--text-primary);
}
.slim-card-legal ul { margin: 0 0 14px 20px; }
.slim-card-legal li {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 8px;
}
.slim-card-legal strong { color: var(--text-primary); }
.slim-card-legal a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .slim-card-legal { padding: 44px 26px; } }
.dl-meta { font-size: .82rem; font-weight: 600; letter-spacing: .08em; color: var(--text-tertiary); margin-top: 4px !important; }
.slim-link { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---- signup form (slim pages) ---- */
.slim-card .field { text-align: left; margin-bottom: 14px; }
.slim-card .field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.slim-card .field input {
  width: 100%;
  background: rgba(34, 37, 42, .7);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-sm, 6px);
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color 140ms var(--ease-out);
}
.slim-card .field input:focus {
  outline: none;
  border-color: var(--accent);
}
/* contact form extras (textarea mirrors the input treatment) */
.slim-card .field textarea {
  width: 100%;
  background: rgba(34, 37, 42, .7);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-sm, 6px);
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: .95rem;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
  transition: border-color 140ms var(--ease-out);
}
.slim-card .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.slim-card .field-optional {
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
}
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- floating contact launcher (bottom-right, every page) ---- */
.contact-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90; /* below nav (100), above content + sticky walls */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(224, 58, 43, .35), 0 2px 8px rgba(0, 0, 0, .4);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.contact-launcher:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 30px rgba(224, 58, 43, .45), 0 3px 10px rgba(0, 0, 0, .45);
  color: var(--cream);
}
.contact-launcher:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
.contact-launcher svg { width: 24px; height: 24px; }
@media (max-width: 720px) {
  .contact-launcher { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-launcher { transition: none; }
  .contact-launcher:hover { transform: none; }
}
.slim-card .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 18px 0 6px;
}
.slim-card .check input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.slim-card .btn-block { width: 100%; margin-top: 18px; }
.form-fine { font-size: .78rem !important; color: var(--text-tertiary) !important; margin-top: 14px !important; }
.form-fine a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.form-error { font-size: .84rem; color: #ff9a9a; background: rgba(200, 60, 60, .12); border: 1px solid rgba(200, 60, 60, .35); border-radius: 8px; padding: 10px 14px; margin-top: 14px; }
.form-error[hidden] { display: none; }
.field-optional { color: var(--text-tertiary); font-weight: 400; }
/* password field with show/hide eye toggle */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px !important; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 4px; cursor: pointer; color: var(--text-tertiary); line-height: 0; }
.pw-toggle:hover { color: var(--cream); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .pw-slash { display: none; }
.pw-toggle:not(.on) .pw-slash { display: inline; }

/* numbered onboarding steps (welcome page) */
.steps-list { list-style: none; margin: 22px 0 8px; padding: 0; text-align: left; }
.steps-list li { border-top: 1px solid rgba(240, 234, 220, .12); padding: 16px 0; }
.steps-list li:first-child { border-top: 0; padding-top: 4px; }
.steps-list .step-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px !important; }
.steps-list .step-body { margin-bottom: 0 !important; font-size: .92rem; }
.steps-list .btn { margin-top: 12px; }
.steps-list .dl-meta a { color: var(--cream); }

/* account dashboard — a real settings page, not prose blocks (2026-08-28
   rework after reference review: left-aligned rows, icon + stacked identity,
   description-left / action-right rows, thin dividers) */
.dash { text-align: left; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dash-head h1 { font-size: 1.9rem; margin: 10px 0 4px; }
.dash-head .kicker { margin-bottom: 0; }
#dash-email { color: var(--text-tertiary); font-size: .9rem; margin: 0 !important; word-break: break-all; }
.dash-signout { flex: none; margin-top: 6px; }
.acct-section { border-top: 1px solid rgba(240, 234, 220, .12); margin-top: 30px; padding-top: 22px; text-align: left; }
.acct-head { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.acct-sub { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px !important; }
.acct-action-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.acct-action-row .acct-sub { flex: 1 1 260px; margin-bottom: 0 !important; }
.acct-action-row .btn { flex: none; margin-top: 0; }
.device-list { list-style: none; margin: 4px 0 0; padding: 0; }
.device-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(240, 234, 220, .08); }
.device-row:first-child { border-top: 0; }
.device-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: center; color: var(--cream); opacity: .9; }
.device-icon svg { width: 17px; height: 17px; }
.device-info { flex: 1; min-width: 0; }
.device-name { font-weight: 600; color: var(--text-primary); margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-meta { font-size: .78rem; color: var(--text-tertiary); margin: 3px 0 0 !important; }
.device-remove { flex: none; }
#device-count { font-size: .8rem; color: var(--text-tertiary); margin-bottom: 6px !important; }
#welcome-status { margin-top: 10px !important; margin-bottom: 0 !important; }

@media (max-width: 720px) {
  /* Slim-card padding was 48px — on a 412px phone that left ~315px of content
     width, which squeezed device rows into crumbs. Dashboard tightens up. */
  .slim-card { padding: 40px 24px; }
  .dash-head h1 { font-size: 1.6rem; }
  .dash-head { gap: 10px; }
  .dash-signout { margin-top: 2px; font-size: .85rem; }
}


/* nav link active state */
.nav-links a.active { color: var(--cream); }

@media (max-width: 860px) {
  /* thin fallback on mobile: kicker strip, no artwork */
  /* nav-inner is 64px here (vs 78px desktop) — the fixed bar must track it
     or a 14px gap opens between the header and the banner */
  .section-bar { top: 64px; background: rgba(29, 31, 36, .92); }
  .section-bar::before, .section-bar::after,
  .section-bar-plans, .section-bar-reg, .section-bar-edge { display: none; }
  .section-bar-inner { padding: 8px 24px; gap: 10px; }
  .section-bar-crest, .section-bar-kicker, .section-bar-leader,
  .section-bar-tag, .section-bar-proof, .section-bar-cta, .section-bar-progress { display: none; }
  .section-bar-label {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
  }
  /* nav CTA stays hidden while banner visible; banner CTA hidden on mobile,
     so restore nav CTA on small screens when the banner is up */
  body.banner-visible .nav-cta { visibility: hidden; }
  .section-bar-label::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 10px;
    vertical-align: 1px;
  }
  .nav-inner { height: 64px; padding: 0 20px; }
  .nav-brand img { height: 26px; }
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-cta { display: none; }
  .nav-download { display: none; }
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-primary);
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--border-primary); }
  .nav-links a:last-child { border-bottom: 0; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 190px 24px 130px;
  background: var(--bg-canvas);
}

/* rotating photo wall — six faded B&W roof frames cross-fading on one 48s clock */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.8);
  opacity: 0;
  transform: scale(1.02);
  animation: heroRotate 48s linear infinite;
  will-change: opacity;
}
.hero-bg-img:nth-child(1) { animation-delay: 0s; }
.hero-bg-img:nth-child(2) { animation-delay: -40s; }
.hero-bg-img:nth-child(3) { animation-delay: -32s; }
.hero-bg-img:nth-child(4) { animation-delay: -24s; }
.hero-bg-img:nth-child(5) { animation-delay: -16s; }
.hero-bg-img:nth-child(6) { animation-delay: -8s; }
@keyframes heroRotate {
  0%      { opacity: 0; transform: scale(1.02); }
  2%      { opacity: 1; }
  16.6667% { opacity: 1; }
  19.5%   { opacity: 0; }
  100%    { opacity: 0; transform: scale(1.1); }
}
/* legibility scrim: darkens top for nav, fades to solid canvas at the strip */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(224, 58, 43, .12), transparent 65%),
    linear-gradient(180deg, rgba(28, 26, 23, .82) 0%, rgba(34, 37, 42, .58) 36%, rgba(34, 37, 42, .74) 64%, var(--bg-canvas) 98%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.hero .kicker { color: var(--accent); }

/* ---- sections that re-run the photo wall (alternating with plain grey) ---- */
/* full-bleed: the section escapes the 1200px content column so the wall
   runs wall-to-wall like the hero; children re-join the column */
/* .section-bg must outrank .section (which is declared later at equal
   specificity) — hence the doubled class selector */
.section.section-bg {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
/* sticky photo wall: pins against the viewport top as soon as the section
   arrives, holds while all the section's content scrolls over it, then
   releases and scrolls away with the section's tail */
.hero-bg-section {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
  overflow: hidden;        /* clip the 1.02–1.1 scale drift (clip on the sticky
                              element itself; overflow on an ancestor would
                              break the stick) */
  /* no negative margin here — a -100vh margin would let the wall's box
     overflow the section bottom by a full viewport (the overrun bug) */
}
/* content wrapper: pulls all Features content up over the pinned wall and
   re-joins the centered 1200px content column */
.section-content {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* scrim lighter than I first set it — the photos should read through, while
   body text and the dark screenshot cards still hold their contrast */
.hero-bg-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 480px at 50% -160px, rgba(224, 58, 43, .10), transparent 65%),
    linear-gradient(180deg, rgba(34, 37, 42, .66) 0%, rgba(34, 37, 42, .55) 34%, rgba(34, 37, 42, .62) 66%, var(--bg-canvas) 99%);
}


/* hero brand block — crest + wordmark, echoing the app splash */
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
}
.hero-brand img { width: 76px; height: 76px; }
.hero-wordmark {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-indent: .22em;               /* optically re-centers tracked text */
  color: var(--cream);
}
.hero-wordmark span { color: var(--accent); }
.hero-tagline {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 24px;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
/* !important: the reveal system pins .reveal.armed.in { opacity: 1 } at 0,3,0
   later in this file, which would otherwise override the swap fade-out.
   Safe because the swap code never runs under prefers-reduced-motion,
   where the global reveal !important applies. */
.hero-title.swap-out { opacity: 0 !important; }
.hero-title em { font-style: italic; color: var(--cream); }

.hero-sub {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 36px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hero-fine {
  font-size: .82rem;
  color: var(--text-tertiary);
  letter-spacing: .02em;
}
.hero-dl {
  margin-top: 16px;
  font-size: .85rem;
}
.hero-dl a {
  color: var(--cream);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
.hero-dl a:hover { text-decoration-color: var(--cream); }
.hero-dl-meta {
  margin-left: 12px;
  font-size: .78rem;
  color: var(--text-tertiary);
  letter-spacing: .04em;
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.strip {
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-input);
  margin-top: 72px;
}
.strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.strip-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--text-secondary);
}
.strip-item strong { color: var(--text-primary); font-weight: 600; }
.strip-icon { width: 26px; height: 26px; flex: none; color: var(--accent); margin-top: 2px; }

@media (max-width: 860px) {
  .strip-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   SECTIONS (shared)
   ========================================================================== */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 24px 40px;
}
.section-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.18;
  margin-bottom: 18px;
}
.section-sub { color: var(--text-secondary); font-size: 1.05rem; }

/* ==========================================================================
   HOW IT WORKS — steps
   ========================================================================== */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.step {
  display: grid;
  grid-template-columns: 90px 1fr 1.25fr;
  gap: 36px;
  align-items: center;
}
.step-num {
  font-size: 2.6rem;
  color: var(--cream);
  opacity: .6;
  line-height: 1;
}
.step-body h3 {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.step-body p { color: var(--text-secondary); font-size: .98rem; }

.step-shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.step-shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-deep); }
.step-shot img, .step-shot video { width: 100%; height: auto; }
/* video figures aren't lightbox-zoomable */
.step-shot-video { cursor: default; }

@media (max-width: 920px) {
  .step { grid-template-columns: 1fr; gap: 18px; }
  .step-num { font-size: 1.8rem; }
}

/* ==========================================================================
   FEATURES — alternating rows
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 110px;
}
.feature-flip .feature-copy { order: 2; }
.feature-flip .feature-shot { order: 1; }

.feature-copy h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin-bottom: 16px;
}
.feature-copy h3 em { font-style: italic; color: var(--cream); }
.feature-copy > p { color: var(--text-secondary); margin-bottom: 22px; }
.feature-copy strong { color: var(--text-primary); }

.feature-shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.feature-shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-deep); }
.feature-shot img, .feature-shot video { width: 100%; height: auto; }
/* video figures aren't lightbox-zoomable */
.feature-shot-video { cursor: default; }

.ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  color: var(--text-secondary);
  font-size: .95rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 920px) {
  .feature { grid-template-columns: 1fr; gap: 28px; margin-bottom: 80px; }
  .feature-flip .feature-copy { order: 1; }
  .feature-flip .feature-shot { order: 2; }
}

/* ---------- depth grid ---------- */
.grid-head { text-align: center; margin-bottom: 36px; }
.grid-head h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

.depth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.depth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.depth-card:hover { transform: translateY(-2px); border-color: var(--border-secondary); }
.depth-card h4 { font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; }
.depth-card h4::before { content: "\2014\0020"; color: var(--accent); }
.depth-card p { color: var(--text-secondary); font-size: .9rem; }

.roadmap-note {
  text-align: center;
  color: var(--text-tertiary);
  font-size: .88rem;
  margin-top: 40px;
}
/* Features-section tail variant: the note previously sat ~24px above the point
   where the pinned photo wall fully scrolls away, so it read as though it
   appeared exactly where the background ends. Two changes make the placement
   read as intentional: (1) the note is styled like the section's sign-off —
   accent dash, brighter ink, slightly larger; (2) tail spacing pushes the
   wall's bottom edge well clear of the text while it's being read. Note:
   during release the wall edge tracks a constant (tail - 40px) below the
   note — both scroll together — so on short mobile viewports the tail must be
   viewport-scaled (72vh) to keep the edge off-screen until the note has been
   read. Spacing only — the sticky mechanic itself is untouched and still
   releases at the section bottom with no overrun. */
.roadmap-note-tail {
  margin-top: 110px;
  padding-bottom: 120px;
  color: var(--text-secondary);
  font-size: .95rem;
}
.roadmap-note-tail::before { content: "\2014\0020"; color: var(--accent); }
@media (max-width: 920px) {
  .roadmap-note-tail { margin-top: 90px; padding-bottom: 72vh; }
}

/* ---------- takeoff reel (full assistant first pass, speed-ramped) ---------- */
.takeoff-reel {
  max-width: 1040px;
  margin: 0 auto 110px;
}
.takeoff-reel-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}
.takeoff-reel-head h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin-bottom: 14px;
}
.takeoff-reel-sub { color: var(--text-secondary); font-size: 1rem; }
.takeoff-reel-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
}
.takeoff-reel-frame video { width: 100%; height: auto; }
.takeoff-reel-caption {
  text-align: center;
  color: var(--text-tertiary);
  font-size: .85rem;
  margin-top: 14px;
}
@media (max-width: 920px) {
  .takeoff-reel { margin-bottom: 80px; }
}

/* ==========================================================================
   MANIFESTO BAND
   ========================================================================== */
.manifesto {
  background:
    radial-gradient(800px 340px at 50% 120%, rgba(224, 58, 43, .10), transparent 70%),
    var(--bg-canvas);
  padding: 30px 24px 0;
}
.manifesto-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 0 8px;
}
.manifesto-quote {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.3;
  font-style: italic;
  color: var(--cream);
  margin-bottom: 22px;
}
.manifesto-quote::before { content: ""; display: block; width: 44px; height: 3px; background: var(--accent); margin: 0 auto 28px; border-radius: 2px; }
.manifesto-attr { margin-bottom: 18px; }
.manifesto-body {
  color: var(--text-secondary);
  font-size: 1.02rem;
  max-width: 620px;
  margin: 0 auto;
}
.manifesto-body em { color: var(--cream); font-style: italic; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats {
  background: var(--bg-input);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  margin-top: 80px;
}
.stats-lead {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 24px 0;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 24px 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  text-align: center;
}
@media (max-width: 1080px) {
  .stats-inner { grid-template-columns: repeat(3, 1fr); }
}
.stat-num {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--cream);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .88rem; color: var(--text-secondary); max-width: 220px; margin: 0 auto; }
.stat-unit { font-size: .45em; margin-left: .08em; color: var(--text-secondary); font-family: var(--font-sans); font-weight: 600; }

@media (max-width: 860px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: .93rem;
}
.compare th, .compare td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
  vertical-align: top;
}
.compare thead th {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-secondary);
}
.compare thead .col-us { color: var(--cream); }
.compare tbody th {
  font-weight: 500;
  color: var(--text-primary);
  width: 28%;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover { background: var(--bg-hover); }

.compare .col-us {
  background: var(--accent-soft);
  color: var(--cream);
  font-weight: 600;
}
.yes     { color: inherit; font-weight: 600; }
.partial { color: var(--warning); }
.no      { color: var(--text-tertiary); }

.table-fine {
  text-align: center;
  font-size: .8rem;
  color: var(--text-tertiary);
  margin-top: 18px;
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-card {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.price-left {
  padding: 48px 44px;
  background:
    radial-gradient(420px 240px at 20% -60px, rgba(224, 58, 43, .12), transparent 70%),
    var(--bg-elevated);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.price-amount { margin: 6px 0 12px; color: var(--text-secondary); font-size: 1.05rem; }
.price-amount .serif {
  font-size: 3.6rem;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.price-bill { color: var(--text-secondary); font-size: .92rem; margin-bottom: 28px; }
.price-fine { font-size: .78rem; color: var(--text-tertiary); margin-top: 16px; }

.price-right { padding: 48px 44px; }
.price-includes {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

@media (max-width: 860px) {
  .price-card { grid-template-columns: 1fr; }
  .price-left { border-right: 0; border-bottom: 1px solid var(--border-primary); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 120ms var(--ease-out);
}
.faq-item[open] { border-color: var(--border-secondary); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: .98rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-hover); }

.faq-icon {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
  transition: transform 160ms var(--ease-out);
}
.faq-icon::before { left: 0; top: 7px;  width: 16px; height: 2px; }
.faq-icon::after  { left: 7px; top: 0;  width: 2px;  height: 16px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }

.faq-body { padding: 0 22px 20px; }
.faq-body p { color: var(--text-secondary); font-size: .94rem; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta {
  margin-top: 110px;
  padding: 110px 24px;
  text-align: center;
  background:
    radial-gradient(900px 420px at 50% 130%, rgba(224, 58, 43, .16), transparent 70%),
    var(--bg-input);
  border-top: 1px solid var(--border-primary);
}
.final-inner { max-width: 640px; margin: 0 auto; }
.final-mark { margin: 0 auto 28px; }
.final-cta h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.18;
  margin-bottom: 16px;
}
.final-cta p { color: var(--text-secondary); margin-bottom: 32px; }
.final-cta .hero-fine { margin-top: 18px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--border-primary);
  background: var(--bg-canvas);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand img { height: 20px; margin-bottom: 14px; }
.footer-brand p { color: var(--text-secondary); font-size: .88rem; line-height: 1.55; }

.footer-head {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: .9rem;
  color: var(--text-secondary);
  transition: color 120ms var(--ease-out);
  width: fit-content;
}
.footer-col a:hover { color: var(--text-primary); }

.footer-base {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px;
  border-top: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-tertiary);
}

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 21, 24, .92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out);
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
  transform: scale(.97);
  transition: transform 160ms var(--ease-out);
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 22px; right: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.lightbox-close:hover { background: var(--border-primary); }

/* ==========================================================================
   SCROLL REVEAL — hard-hidden until observed; JS adds .armed to enable
   the hidden state, so no-JS or observer failure can never dim content.
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
.reveal.armed {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.armed.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.armed { opacity: 1 !important; transform: none !important; transition: none; }
  .btn, .feature-shot, .step-shot, .depth-card { transition: none; }
  /* hero photo wall: park on the first frame, no cycling */
  .hero-bg-img { animation: none !important; opacity: 0; }
  .hero-bg-img:first-child { opacity: 1; transform: none; }
  /* banner artwork: freeze every moving part, keep the still composition */
  .section-bar::before, .plan-dial, .section-bar-reg,
  .section-bar-crest, .crest-rays, .crest-rays polygon,
  .section-bar-progress span::after { animation: none !important; }
  /* tracers: freeze mid-scene — geometry visible, pen parked, no motion */
  .plan-tracer { animation: none !important; opacity: .55; }
  .plan-tracer .pl, .plan-tracer .pd, .plan-tracer .ph,
  .plan-tracer .pa, .plan-tracer .pc { animation: none !important; }
  .plan-tracer .pl { stroke-dashoffset: 0 !important; }
  .plan-tracer .pd { stroke-dashoffset: 0 !important; }
  .plan-tracer .ph { stroke-dashoffset: 0 !important; opacity: .8; }
  .plan-tracer .pa { opacity: .8 !important; }
  .plan-tracer .pc { opacity: 0 !important; }
  .section-bar-leader line { stroke-dashoffset: 0 !important; }
  .section-bar.swap .section-bar-text,
  .section-bar.swap .section-bar-proof { animation: none !important; }
  .hero-title { transition: none; }
  .hero-title.swap-out { opacity: 1; transform: none; }
}