/* Switzer self-hosted (Fontshare ITF FFL), replaces api.fontshare.com runtime dependency */
@font-face{font-family:'Switzer';src:url('/v2/assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Switzer';src:url('/v2/assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Switzer';src:url('/v2/assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Switzer';src:url('/v2/assets/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}
/* ============================================================================
   AIMNOW.AI v2 - complete homepage
   Register B (clean marketing). Continues 05 Design/22-new-direction.
   Notes + pre-render declaration: 05 Design/23-homepage-complete/design-notes.md
   No WebGL. No chat bubbles. Canvas: ONLY the C0037 section-anchored living
   orb (R31, Mohamed's 2026-08-03 rule revision) - never scroll/cursor-coupled.
   ========================================================================== */
:root{
  /* surfaces */
  --paper:#FFFFFF;
  --shell:#F7F9FC;
  /* text */
  --ink:#1B1D21;      /* 16.88:1 on paper */
  --body:#434956;     /* 9.03:1 on paper  */
  --muted:#5A6373;    /* 6.24:1 on paper  */
  --quiet:#5F6B7E;    /* 5.40:1 on paper  */
  /* lines */
  --line:#E5E7EB;
  --line-2:#D8DDE5;
  --edge:#848E9E;     /* 3.31:1 - UI boundaries and waveform at rest */
  --blue-line:#BCD0FB;
  --caller:#8E93E8;   /* recorded-call caller voice, violet-leaning blue */
  --caller-deep:#6B70D4;
  /* accent */
  --blue:#2563EB;
  --blue-deep:#1E40AF;
  /* 13px uppercase labels sit on the tint band as often as on paper, and on
     that ground --blue measures 4.50:1 -- the floor itself, not over it. The
     tint comment below reasons about ink body text and missed these. One
     deeper step clears every ground the labels actually land on. */
  --blue-label:#1D4ED8;
  --blue-press:#1D4ED8;
  --ice:#EAF0FE;
  --ice-ink:#1E40AF;
  --danger:#C81E1E;
  /* dark band */
  --night:#04050A;
  --night-lift:#0D1322;
  --night-ink:#FFFFFF;
  --night-mono:#E7ECF5;
  --night-chip:#C6CEDC;
  --night-lede:#AAB3C6;
  --night-accent:#7EA6FF;
  /* type */
  --sans:'Switzer','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:var(--sans); /* retired the monospace face, Mohamed 2026-08-01: labels use the brand sans */
  /* geometry */
  --page:clamp(20px,4vw,56px);
  --shell-w:1240px;
  --r-pill:999px;
  --r-card:18px;
  --r-tile:12px;
  --r-field:10px;
  --r-bar:2px;
  /* elevation - hairline at rest; only the player lifts and only the dialog overlays */
  --lift-player:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(20,40,90,.06),0 24px 48px -32px rgba(20,40,90,.28);
  --lift-dialog:0 30px 70px -30px rgba(20,40,90,.45);
  --lift-cta:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(30,64,175,.35),0 10px 24px -10px rgba(37,99,235,.5);
  --ring:0 0 0 3px rgba(37,99,235,.28);
  /* motion */
  --t-fast:140ms;
  --t-base:200ms;
  --t-slow:320ms;
  --ease:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,p,dl,dd,dt,figure,ul,li{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--ice)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.shell{max-width:var(--shell-w);margin:0 auto;padding-left:var(--page);padding-right:var(--page)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:90;transform:translateY(-160%);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 20px;font-size:15px;font-weight:600;text-decoration:none;transition:transform var(--t-base) var(--ease)}
.skip:focus{transform:translateY(0)}

/* ---- C0004 mono label. Correction A: 13px floor, tracking cut to .05em ---- */
.eyebrow-b{display:inline-block;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--blue-label);margin-bottom:20px}

/* ---- headings ---- */
.h2{font-size:clamp(28px,3.1vw,40px);line-height:1.08;letter-spacing:-.026em;font-weight:600;color:var(--ink);text-wrap:balance;max-width:20ch}
.h2.wide{max-width:24ch}
.lede{font-size:18px;line-height:1.62;color:var(--body);max-width:62ch;text-wrap:pretty;margin-top:18px}
.sec{padding-top:144px;padding-bottom:144px}
.sec-shell{background:var(--shell);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head>.tlink{margin-top:20px}

/* ============================ NAV (C0002 +v2-static) ====================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;height:64px;display:flex;align-items:center;
  background:rgba(255,255,255,0);border-bottom:1px solid transparent;
  transition:background var(--t-base) ease,border-color var(--t-base) ease;
}
.nav[data-scrolled="true"]{background:var(--paper);border-bottom-color:var(--line)}
.nav .shell{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;height:44px;white-space:nowrap}
.brand img{width:24px;height:24px}
.navlinks{display:flex;align-items:center;gap:2px}
.navlinks a{
  display:inline-flex;align-items:center;height:44px;padding:0 11px;
  font-size:15px;color:var(--muted);text-decoration:none;white-space:nowrap;
  border-radius:var(--r-pill);transition:color var(--t-base) ease,background var(--t-base) ease;
}
.navlinks a:hover{color:var(--ink);background:var(--shell)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-pill);color:var(--ink);cursor:pointer;transition:border-color var(--t-base) ease,background var(--t-base) ease}
.burger:hover{border-color:var(--edge);background:var(--shell)}
.burger:focus-visible{outline:none;box-shadow:var(--ring)}
html.menu-open,body.menu-open{overflow:hidden;overscroll-behavior:none}
.menu{
  display:none;position:fixed;inset:0;z-index:39;height:100vh;height:100dvh;background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);
  transition:opacity var(--t-base) var(--ease),transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow);
}
.menu[data-open="true"]{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition-delay:0s;
}
.menu .shell{min-height:100%;padding-top:76px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.menu a{display:flex;align-items:center;min-height:52px;font-size:17px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.menu a:last-of-type{border-bottom:0}
.menu .pill{margin-top:16px;width:100%}
.menu .pill-primary,.menu .pill-primary:hover,.menu .pill-primary:focus-visible,.menu .pill-primary:active{color:#FFFFFF}

/* ============================ PILLS (C0003) =============================== */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;
  text-decoration:none;cursor:pointer;border:1px solid transparent;text-align:center;
  transition:background var(--t-base) ease,border-color var(--t-base) ease,color var(--t-base) ease,transform var(--t-fast) ease,box-shadow var(--t-base) ease;
}
.pill-primary{background:var(--blue);color:#FFFFFF;box-shadow:var(--lift-cta)}
.pill-primary:hover{background:var(--blue-deep);transform:translateY(-1px)}
.pill-primary:active{background:var(--blue-press);transform:scale(.98)}
.pill-primary:focus-visible{outline:none;box-shadow:var(--lift-cta),var(--ring)}
.pill-ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.pill-ghost:hover{border-color:var(--edge);background:var(--shell);transform:translateY(-1px)}
.pill-ghost:active{transform:scale(.98)}
.pill-ghost:focus-visible{outline:none;box-shadow:var(--ring)}
.pill-nav{height:44px;padding:0 20px;font-size:15px}
.pill[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}
.pill[data-locked="true"]{opacity:.55}
.pill-glyph{width:20px;height:20px;border-radius:50%;background:var(--ice);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:none}
.pill-glyph svg{width:8px;height:8px;margin-left:1px}

/* text link with a hairline underline that grows on hover */
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px;font-weight:500;color:var(--blue);text-decoration:none}
.tlink span{position:relative}
.tlink span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
.tlink:hover span::after{transform:scaleX(1)}
.tlink svg{width:14px;height:14px;transition:transform var(--t-base) var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ============================ 01 HERO ===================================== */
.hero{padding-top:168px;padding-bottom:112px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;grid-template-rows:auto auto;gap:0 64px;align-items:start}
.hero-a{grid-column:1;grid-row:1;max-width:640px}
.hero-b{grid-column:1;grid-row:2;max-width:640px;padding-top:48px}
.hero-obj{grid-column:2;grid-row:1 / span 2;align-self:center}
/* R32.2 (Mohamed 2026-08-03): the dot is gone and the chip is quieter. It was
   reading as a badge with something to announce; it is a label. Type stays at
   the 13px floor (Mohamed's own rule) and the weight comes off the box instead:
   the 6px dot and its 8px gap are removed, padding tightens 8/16 -> 5/12, and
   the saturated ice fill + blue border drop to a plain hairline on paper so the
   blue survives only in the word itself. */
.eyebrow{
  display:inline-flex;align-items:center;
  background:transparent;border:1px solid var(--line);color:var(--blue);
  border-radius:var(--r-pill);padding:5px 12px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.05em;
}
h1{
  margin:24px 0 0;font-size:clamp(36px,4.7vw,60px);line-height:1.06;letter-spacing:-.03em;
  font-weight:600;color:var(--ink);text-wrap:balance;max-width:15ch;
}
h1 .second{color:var(--body)}
.hero-lede{margin-top:24px;font-size:19px;line-height:1.6;color:var(--body);max-width:56ch;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.chips{display:flex;border-top:1px solid var(--line);padding-top:24px}
.hero-b.chips{margin-top:52px}
.chips>div{padding:0 24px;border-left:1px solid var(--line);flex:1;min-width:0}
.chips>div:first-child{padding-left:0;border-left:0}
.chips b{display:block;font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.chips span{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:var(--muted)}

/* C0024 +live-call (VOICE REQUEST) was retired from the V2 Home on 2026-08-25.
   Its `.player*` rules are gone: no page, no JS and no builder emits that
   markup. `.wave` stays - v2.js builds it at runtime for the C0025 ringing
   state - and so does `--lift-player`, which home-alive.css still reads. */
.wave{position:relative;flex:1;min-width:0;height:48px;display:flex;align-items:center;justify-content:space-between}
.wave i{display:block;width:3px;flex:0 0 3px;border-radius:var(--r-bar);background:var(--edge);transition:background var(--t-base) ease}

@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(var(--bs,1.04))}}
.wave i[data-breathe]{transform-origin:center;animation:breathe 6.4s ease-in-out infinite;animation-delay:var(--bd,0s)}

/* ==================== 02 STATEMENT BAND ================================== */
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--shell)}
.statement .shell{padding-top:40px;padding-bottom:40px;text-align:center}
.statement p{font-size:18px;color:var(--body);max-width:60ch;margin:0 auto}

/* ==================== 03 DEPLOYS - numbered hairline grid ================= */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cell{padding:32px 28px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell-n{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--quiet);font-variant-numeric:tabular-nums}
.cell h3{margin-top:20px;font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.32}
.cell p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ==================== 04 LIFE OF A CALL ================================== */
.call-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:64px;align-items:start}
.rows{border-top:1px solid var(--line);margin-inline:0}
.row{
  display:block;
  width:100%;padding:24px 16px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;
  cursor:pointer;transition:background var(--t-base) ease;
}
.row{position:relative}
.row::before{
  content:"";position:absolute;inset:5px 0;z-index:-1;
  border-radius:var(--r-field);background:transparent;
  transition:background var(--t-base) ease;
}
.row:hover::before{background:var(--paper)}
.row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:0}
.row-n{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--quiet);font-variant-numeric:tabular-nums;margin-bottom:10px;transition:color var(--t-base) ease}
.row-copy{display:block;min-width:0}
.row-title{display:block;font-size:20px;line-height:1.3;letter-spacing:-.014em;font-weight:600;color:var(--ink)}
.row-desc{display:block;margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted);max-width:56ch;text-wrap:pretty}
.row[data-on="true"]::before{background:var(--paper)}
.row[data-on="true"] .row-n{color:var(--blue)}
.row[data-on="true"] .row-title{color:var(--ink)}

/* -------- C0026 CALL TIMELINE - a call, never a chat --------------------- */
.ct{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:20px 22px 22px;position:sticky;top:88px}
.ct-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ct-state{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.ct-state i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--edge);transition:background var(--t-base) ease,box-shadow var(--t-base) ease}
.ct[data-live="true"] .ct-state i{background:var(--blue);box-shadow:0 0 8px rgba(37,99,235,.75)}
.ct-sample{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--quiet)}
.ct-clock{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0 12px}
.ct-el{font-family:var(--mono);font-size:15px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
.ct-el b{font-weight:500;color:var(--quiet)}
.ct-legend{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--quiet)}
.ct-legend span{display:inline-flex;align-items:center;gap:6px}
.ct-legend em{width:9px;height:3px;border-radius:2px;background:var(--caller-deep);font-style:normal;flex:none}
.ct-legend span:last-child em{background:var(--blue)}

.ct-track{position:relative;height:76px;display:flex;align-items:center;justify-content:space-between;gap:1px;padding:0 1px;touch-action:pan-y}
.ct-track b{display:block;flex:1 1 0;min-width:1px;border-radius:var(--r-bar);background:var(--caller);opacity:.34;transition:opacity var(--t-base) ease,background var(--t-base) ease}
.ct-track b[data-who="agent"]{background:var(--blue)}
.ct-track b[data-who="team"]{background:var(--blue-deep)}
.ct-track b[data-lit="true"]{opacity:1}
.ct-head-line{position:absolute;top:2px;bottom:2px;width:2px;background:var(--ink);border-radius:1px;transform:translateX(-1px);transition:left var(--t-slow) var(--ease);pointer-events:none}
.ct-ticks{display:flex;border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);margin-top:2px}
.ct-tick{
  /* The UA button default (outset 2px black) was drawing this strip's frame on
     every page, Home included. Only border-left is ours. */
  flex:1 1 0;min-width:0;border:0;border-left:1px solid var(--line);padding:10px 0 0;
  background:transparent;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--quiet);font-variant-numeric:tabular-nums;text-align:center;
  min-height:44px;transition:color var(--t-base) ease;
}
.ct-tick:first-child{border-left:0}
.ct-tick:hover{color:var(--ink)}
.ct-tick[data-on="true"]{color:var(--blue)}
.ct-tick:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.ct-now{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ct-meter{display:inline-flex;align-items:flex-end;gap:3px;height:16px;flex:none}
.ct-meter i{width:3px;border-radius:2px;background:var(--edge);height:5px;transition:background var(--t-base) ease}
.ct[data-live="true"] .ct-meter i{background:var(--blue);animation:meter 1s ease-in-out infinite}
.ct[data-live="true"] .ct-meter i:nth-child(2){animation-delay:.18s}
.ct[data-live="true"] .ct-meter i:nth-child(3){animation-delay:.36s}
@keyframes meter{0%,100%{height:5px}50%{height:16px}}
.ct-role{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ct-line{margin-top:12px;font-size:16px;line-height:1.5;color:var(--body);min-height:48px}
.ct-out{
  display:flex;align-items:flex-start;gap:14px;width:100%;margin-top:16px;text-align:left;
  padding:16px 16px 16px 14px;border-radius:var(--r-tile);background:var(--shell);
  border:1px solid var(--line);font-family:inherit;cursor:pointer;min-height:44px;
  transition:border-color var(--t-base) ease,background var(--t-base) ease;
}
.ct-out[data-on="true"]{border-color:var(--blue-line);background:var(--ice)}
.ct-out:hover{border-color:var(--blue-line)}
.ct-out:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ct-out span{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--quiet);flex:none;padding-top:3px}
.ct-out em{font-style:normal;font-size:16px;line-height:1.45;color:var(--ink);font-weight:500}

/* ---------------------------------------------------------------------------
   C0160 - parked call transport (the C0026 panel on the 14 detail pages).

   Same markup as C0026. What differs is the truth behind it: those pages have
   no audio, so this panel is a transport parked on one moment of an
   illustrative call, never one that plays. v2.js stamps data-ct-tabs="true"
   only on the panels it actually wires, and the homepage recorded call is
   excluded by data-recorded before that ever happens - so nothing below can
   reach C0026's real player.

   Two laws hold every rule here: nothing loops, because a loop on a panel with
   no audio is a claim of live audio; and nothing moves except as a reply to
   something the reader did.
   ------------------------------------------------------------------------- */

/* JS-off: the strip is a set of buttons nothing has wired yet, and the track
   has no bars in it. Say both honestly rather than dressing them as live.
   C0026 sets border-LEFT on the cells and never resets the other three, so the
   user agent's own 2px outset black button border has been drawing the frame
   and the cell divisions all along. Reset here, scoped: the identical fault on
   the homepage recorded call is reported, not silently restyled from this
   packet. */
.ct:not([data-recorded]) .ct-tick{border-top:0;border-right:0;border-bottom:0;cursor:default}
.ct:not([data-recorded]) .ct-track:empty{
  background:linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat;
}

/* -- the strip becomes a segmented control ------------------------------- */
.ct[data-ct-tabs="true"] .ct-ticks{position:relative;overflow:hidden}
.ct[data-ct-tabs="true"] .ct-tick{
  cursor:pointer;padding-bottom:12px;background:var(--shell);
  transition:background var(--t-fast) ease,color var(--t-fast) ease;
}
.ct[data-ct-tabs="true"] .ct-tick:hover{background:var(--paper);color:var(--ink)}
/* 13px blue on a light ground is exactly what --blue-label exists for:
   --blue measures 4.50:1 on the tint, --blue-label 5.87:1 on --ice. */
.ct[data-ct-tabs="true"] .ct-tick[data-on="true"]{
  background:var(--paper);color:var(--blue-label);font-weight:500;
}
/* After the selected rule, so pressing the cell that is already selected still
   answers rather than doing nothing. */
.ct[data-ct-tabs="true"] .ct-tick:active{background:var(--ice)}
/* The selected marker is one rule that travels, so a selection is legible as
   a movement and not only as a colour swap. Equal cells, so an index and a
   count place it exactly, at any width, with no measurement. It is drawn 28px
   wide inside its cell, not cell-wide: the strip is a list of controls and the
   track above is the time ruler, and a cell-wide bar sitting 2px under a
   time-proportional band invites a comparison between two different scales. */
.ct[data-ct-tabs="true"] .ct-ticks::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;
  width:calc(100% / var(--ct-n,4));
  background:linear-gradient(var(--blue),var(--blue)) 50% 0/28px 2px no-repeat;
  transform:translateX(calc(var(--ct-i,0) * 100%));
  transition:transform var(--t-slow) var(--ease);
}

/* -- the track carries where you are in the call -------------------------- */
/* Three tiers, not two: what is behind you, the stretch you are reading, and
   what is still ahead. The middle tier is the one C0026 never had. */
.ct[data-ct-tabs="true"] .ct-track b{
  position:relative;opacity:.2;transition-delay:calc(var(--bi,0) * 1.1ms);
}
.ct[data-ct-tabs="true"] .ct-track b[data-lit="true"]{opacity:.5}
.ct[data-ct-tabs="true"] .ct-track b[data-cur="true"]{opacity:1}
/* The selected segment's real span, from its own start and end seconds. */
.ct[data-ct-tabs="true"] .ct-track::before{
  content:"";position:absolute;top:0;bottom:0;pointer-events:none;
  left:var(--ct-band-x,0%);width:var(--ct-band-w,0%);
  background:var(--ice);border-radius:var(--r-tile);
  transition:left var(--t-slow) var(--ease),width var(--t-slow) var(--ease);
}

/* -- the head dot and the meter say WHO, not "we are live" ---------------- */
.ct[data-ct-tabs="true"][data-who="caller"] .ct-state i{
  background:var(--caller-deep);box-shadow:0 0 0 3px rgba(107,112,212,.16);
}
.ct[data-ct-tabs="true"][data-who="agent"] .ct-state i,
.ct[data-ct-tabs="true"][data-who="team"] .ct-state i{
  background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.16);
}
.ct[data-ct-tabs="true"][data-live] .ct-meter i{
  animation:none;transform-origin:bottom;height:6px;
}
.ct[data-ct-tabs="true"][data-live] .ct-meter i:nth-child(2){height:14px}
.ct[data-ct-tabs="true"][data-live] .ct-meter i:nth-child(3){height:9px}
.ct[data-ct-tabs="true"][data-who="caller"] .ct-meter i{background:var(--caller-deep)}
.ct[data-ct-tabs="true"][data-who="agent"] .ct-meter i,
.ct[data-ct-tabs="true"][data-who="team"] .ct-meter i{background:var(--blue)}

/* -- the reply: one settle, one rise, then rest --------------------------- */
.ct-panel{min-width:0}
.ct-panel:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r-tile)}
.ct-el-now{font-style:normal;display:inline-block}
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-meter i{
  animation:ct-settle var(--t-slow) var(--ease) both;
}
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-meter i:nth-child(2){animation-delay:60ms}
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-meter i:nth-child(3){animation-delay:120ms}
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-el-now,
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-role,
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-line{
  animation:ct-rise var(--t-base) var(--ease) both;
}
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-role{animation-delay:40ms}
.ct[data-ct-tabs="true"][data-ct-move="true"] .ct-line{animation-delay:80ms}
@keyframes ct-settle{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
@keyframes ct-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==================== 05 PLATFORM - spec sheet rows ====================== */
.spec{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:76px 300px minmax(0,1fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec-row h3{font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.32}
.spec-row p{font-size:16px;line-height:1.6;color:var(--muted);max-width:62ch;text-wrap:pretty}
.spec-n{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--quiet);font-variant-numeric:tabular-nums}

/* ==================== 05b PLATFORM GOES DARK (R32.3) ====================
   Mohamed asked for this section dark and flagged the real risk himself: .dash
   sits immediately after it and is already near-black, so two flat slabs of the
   same tone would fuse into one shapeless block with no seam.

   Solved with a tonal STEP instead of a second slab. This section takes
   --night-lift (#0D1322, a deep ink-blue); .dash keeps --night (#04050A, the
   true black) and stays the darkest point on the page. The homepage therefore
   DESCENDS: light -> deep blue -> black -> light. The two dark sections read as
   one chapter with a visible floor, not as a repeated band, and the dashboard
   still owns the deepest tone (which is what a screen should be). */
.sec-plat,.sec-night{
  position:relative;overflow:clip;
  background:var(--night-lift);
  background-image:radial-gradient(76% 60% at 16% 94%,#151F37 0%,var(--night-lift) 58%);
  border-top:1px solid rgba(255,255,255,.10);
}
.sec-plat .eyebrow-b,.sec-night .eyebrow-b{color:var(--night-accent)}
.sec-plat h2,.sec-night h2{color:var(--night-ink)}
.sec-plat .lede,.sec-night .lede{color:var(--night-lede)}
.sec-plat .spec,.sec-night .spec{border-top-color:rgba(255,255,255,.14)}
.sec-plat .spec-row,.sec-night .spec-row{border-bottom-color:rgba(255,255,255,.10)}
.sec-plat .spec-row h3,.sec-night .spec-row h3{color:var(--night-ink)}
.sec-plat .spec-row p,.sec-night .spec-row p{color:var(--night-lede)}
.sec-plat .spec-n,.sec-night .spec-n{color:var(--night-chip)}
/* R32.8: the rest of the site inherits the homepage's descent. `.sec-night` is
   the same treatment as the Platform band, reusable on any section. Interior
   pages carry element types the homepage band never had, so they are covered
   here rather than left to read as ink-on-ink: */
.sec-night h3,.sec-night h4{color:var(--night-ink)}
.sec-night p,.sec-night li{color:var(--night-lede)}
.sec-night .blist{border-top-color:rgba(255,255,255,.16)}
.sec-night .blist li{border-color:rgba(255,255,255,.10)}
.sec-night .blist li::before{background:var(--night-accent)}
.sec-night .note{color:var(--night-chip)}
.sec-night .tags a,.sec-night .tag{color:var(--night-chip);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.sec-night .tags a:hover{border-color:var(--night-accent);color:var(--night-ink)}
.sec-night .rows,.sec-night .row{border-color:rgba(255,255,255,.10)}
.sec-night .row h3{color:var(--night-ink)}
.sec-night .row p{color:var(--night-lede)}
.sec-night .row-n{color:var(--night-chip)}
.sec-night blockquote{color:var(--night-ink)}
.sec-night a{color:var(--night-accent)}
/* statement bands are already full-bleed quote moments: as .sec-night they lose
   their light borders and gain the same deep ground */
.statement.sec-night{background:var(--night-lift);border-top-color:rgba(255,255,255,.10);border-bottom-color:rgba(255,255,255,.10)}
.statement.sec-night p,.statement.sec-night h2{color:var(--night-ink)}
/* Dark-ground lift is done by the ENGINE (tones:[1] on the plat seat in
   v2-orb-mount.js), not from CSS. Two CSS attempts were tried and rejected
   first, and both failures are worth keeping on record:
     mix-blend-mode:screen - the engine always paints a faint full-canvas
       aurora (its dim hook cannot be a true 0: it reads `__aimAuroraDim || 0.18`
       so zero restores the default), and screen lifted that wash too, printing
       the canvas rectangle onto the section as a visible lighter box.
     filter:brightness(2.35) - multiplies RGB blind, so the specular layer and
       the 2.4x glow sprite clipped to flat white and the dome lost its volume.
   tones lerps each dot toward (0.78,0.84,0.97) AFTER the INK->STEEL depth
   shading, so the near/far separation survives and the ball still reads 3D. */
.sec-plat svg.orb-plat{color:var(--night-chip)}  /* no-JS / reduced-motion print */

/* ==================== 06 CALL VISIBILITY - the one dark band ============= */
.dash{
  background:var(--night);
  background-image:radial-gradient(90% 70% at 72% 12%,var(--night-lift) 0%,var(--night) 62%);
  padding-top:120px;padding-bottom:120px;color:var(--night-lede);
}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:72px;align-items:center}
.dash .eyebrow-b{color:var(--night-accent)}
.dash h2{color:var(--night-ink)}
.dash .lede{color:var(--night-lede)}
.dash-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.dash-tag{font-size:15px;color:var(--night-chip);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:var(--r-pill);padding:9px 18px}
.board{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card);padding:8px 20px 20px}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.board-head span{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--night-mono)}
.board-head b{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--night-chip)}
.tile{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.tile:last-child{border-bottom:0;padding-bottom:8px}
.tile span{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--night-chip)}
.tile b{font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--night-ink)}

/* ==================== 07 PROOF NUMBERS =================================== */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.proof>div{padding:40px 32px 8px;border-left:1px solid var(--line)}
.proof>div:first-child{padding-left:0;border-left:0}
.proof b{display:block;font-size:clamp(32px,3.4vw,44px);line-height:1.02;letter-spacing:-.03em;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.proof span{display:block;margin-top:14px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-label)}
.proof p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted);max-width:34ch}

/* ==================== 08 SOLUTIONS - rule-topped catalogue =============== */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.card{padding:32px 40px 36px 0;border-bottom:1px solid var(--line)}
.grid2 .card:nth-child(odd){padding-right:56px;border-right:1px solid var(--line)}
.grid2 .card:nth-child(even){padding-left:40px;padding-right:0}
.card i{display:block;width:28px;height:2px;background:var(--blue);margin-bottom:20px}
.card h3{font-size:21px;font-weight:600;letter-spacing:-.014em;color:var(--ink);line-height:1.3}
.card p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch;text-wrap:pretty}

/* ==================== 09 INDUSTRIES ====================================== */
.ind-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags li{font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:11px 20px}

/* ==================== 11 FAQ (C0027) ===================================== */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
/* The question is normal inline flow, NOT flex: a flex container turns every
   contiguous text run into its own flex item, so a question containing an
   inline <span data-brand> was split into three items and spread apart by
   justify-content:space-between (measured 137.8px between "Can" and the brand
   word on /v2/index.html at 1440). Block flow keeps any number of inline spans
   glued into one sentence; the +/- marker is pushed to the right edge by
   absolute positioning against the reserved 46px right padding (22px marker +
   the original 24px gap), and stays vertically centred on wrapped questions. */
.faq summary{
  display:block;position:relative;
  min-height:72px;padding:23px 46px 23px 0;cursor:pointer;list-style:none;
  font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.35;
  transition:color var(--t-base) ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.faq-sign{position:absolute;right:0;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--quiet);transition:color var(--t-base) ease}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:currentColor;border-radius:1px;transition:transform var(--t-slow) var(--ease)}
.faq-sign::after{transform:rotate(90deg)}
.faq details[open] .faq-sign{color:var(--blue)}
.faq details[open] .faq-sign::after{transform:rotate(0deg)}
.faq summary:hover .faq-sign{color:var(--blue)}
.faq-a{padding:0 56px 28px 0;font-size:17px;line-height:1.62;color:var(--body);max-width:80ch;text-wrap:pretty}
.faq details[open] .faq-a{animation:faqin var(--t-slow) var(--ease) 1}
@keyframes faqin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ==================== 12 CLOSING CTA ===================================== */
.cta{background:linear-gradient(180deg,var(--ice) 0%,#F5F8FE 100%);border-top:1px solid var(--blue-line)}
/* bottom padding sits a step under the top: the CTA button carries its own
   visual mass low in the band, and the footer follows immediately after, so
   symmetric 104/104 stacked with the footer's own top padding into a void */
.cta .shell{padding-top:96px;padding-bottom:88px;text-align:center}
.cta .eyebrow-b{color:var(--ice-ink)}
.cta h2{margin-left:auto;margin-right:auto;max-width:18ch}
.cta p{margin:20px auto 0;font-size:18px;line-height:1.62;color:var(--body);max-width:64ch;text-wrap:pretty}
.cta .pill{margin-top:36px}
/* The closing panel now offers a choice: the primary opens the call dialog and
   the ghost still reaches /demo. The panel centres its children rather than
   laying them out in a row, so the pair needs its own row box to carry the gap.
   Deliberately the same 12px gap .hero-cta uses, so the two action pairs on a
   page behave identically; the 520px full-width stacking is matched there too. */
.cta .cta-pair{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.cta .cta-pair .pill{margin-top:0}

/* The split hero's left column is at its narrowest between 1081px and the
   point the hero stacks, and there the longest approved primary label plus
   the secondary needs 570px against a 544px column: 26px short, so the pair
   wrapped and the two pills sat on top of each other. Trimming the pill
   padding and the gap in that band alone recovers 28px and keeps them on one
   row, without touching the labels, the rest of the desktop range, or the
   deliberate stacked layout below 760px. */
@media (min-width:1081px) and (max-width:1160px){
  .hero-cta .pill,.cta .cta-pair .pill{padding-left:16px;padding-right:16px}
  .hero-cta,.cta .cta-pair{gap:6px}
}

/* ==================== 13 FOOTER ========================================== */
.foot{background:var(--paper);border-top:1px solid var(--line)}
.foot .shell{padding-top:64px;padding-bottom:88px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:48px 32px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.foot-brand .brand{height:auto;margin-bottom:16px}
.foot-brand p{font-size:16px;line-height:1.6;color:var(--muted);max-width:34ch}
.foot-brand .pill{margin-top:24px}
.fcol h4{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--quiet);margin-bottom:8px}
.fcol a{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--body);text-decoration:none;transition:color var(--t-base) ease}
.fcol a:hover{color:var(--blue)}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:32px}
/* R32.6 (Mohamed 2026-08-03): ported from the previous version's footer, which
   he asked to take things from. Values are the original's, not re-invented:
   clamp(52px,8.6vw,142px), line-height .85, weight 600, tracking -.035em, fill
   #EEF3FB with a 1px #E1E8F4 stroke so the word reads as an embossed watermark
   rather than grey text. It replaces the closing-band orb he rejected: the page
   still signs off with something, but with type instead of a third orb, which
   is the "let the shape disappear in some sections" rule. Decorative only:
   aria-hidden, unselectable, and it carries data-brand so it flips with the
   brand token. `nowrap` is safe because the clamp floor (52px) still fits the
   narrowest supported viewport; overflow measured 0 at 375px. */
.foot-word{
  margin:0 0 48px;text-align:center;white-space:nowrap;user-select:none;pointer-events:none;
  font-size:clamp(52px,8.6vw,142px);line-height:.85;font-weight:600;letter-spacing:-.035em;
  color:#EEF3FB;-webkit-text-stroke:1px #E1E8F4;
}
.foot-base p{font-size:14px;color:var(--muted)}

/* ==================== C0025 - CALL REQUEST DIALOG ======================== */
.scrim{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;background:rgba(16,22,38,.42)}
.scrim[data-open="true"]{display:flex}
.sheet{width:100%;max-width:520px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--lift-dialog);padding:28px;animation:sheetin var(--t-slow) var(--ease) 1}
@keyframes sheetin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.sheet-head h2{font-size:22px;font-weight:600;letter-spacing:-.018em;color:var(--ink);line-height:1.3}
.sheet-head p{margin-top:6px;font-size:16px;color:var(--muted)}
.x{width:44px;height:44px;flex:none;margin:-10px -10px 0 0;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;transition:background var(--t-base) ease,color var(--t-base) ease}
.x:hover{background:var(--shell);color:var(--ink)}
.x:focus-visible{outline:none;box-shadow:var(--ring)}
.fields{display:grid;gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f>span:not(.tel){display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:7px}
.f input,.f select{width:100%;height:50px;padding:0 14px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-field);transition:border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235F6B7E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.f input::placeholder{color:#78808F}
.f input:hover,.f select:hover{border-color:var(--quiet)}
.f input:focus,.f select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:var(--danger)}
.tel{display:flex;align-items:center;border:1px solid var(--edge);border-radius:var(--r-field);overflow:hidden;transition:border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.tel:hover{border-color:var(--quiet)}
.tel:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.tel[data-bad="true"]{border-color:var(--danger)}
.tel b{font-weight:500;font-size:16px;color:var(--muted);padding:0 12px 0 14px;border-right:1px solid var(--line);height:26px;display:inline-flex;align-items:center;flex:none}
.tel input{border:0;border-radius:0;height:50px;flex:1;min-width:0}
.tel input:focus{box-shadow:none}
.err{display:none;margin-top:7px;font-size:14px;color:var(--danger)}
.err[data-on="true"]{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:4px 0}
.consent input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.box{width:22px;height:22px;flex:none;border-radius:6px;border:1px solid var(--edge);background:var(--paper);display:inline-flex;align-items:center;justify-content:center;margin-top:2px;transition:background var(--t-base) ease,border-color var(--t-base) ease;pointer-events:none}
.box svg{width:13px;height:13px;opacity:0;transition:opacity var(--t-fast) ease}
.consent input:checked+.box{background:var(--blue);border-color:var(--blue)}
.consent input:checked+.box svg{opacity:1}
.consent input:focus-visible+.box{box-shadow:var(--ring)}
.legal{font-size:14px;line-height:1.55;color:var(--muted)}
.legal a{color:var(--blue);text-decoration:none}
.legal a:hover{text-decoration:underline}
.sheet .pill-primary{width:100%;margin-top:4px}
.suberr{margin-top:12px;font-size:14px;color:var(--danger);text-align:center;min-height:1px}
.ring-state{text-align:center;padding:8px 0 4px}
.ring-state .wave{margin:0 auto 24px;max-width:280px}
.ring-time{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--blue);font-variant-numeric:tabular-nums}
.ring-cap{margin-top:16px;font-size:17px;line-height:1.55;color:var(--ink)}
.ring-cap b{font-weight:600}
.ring-lbl{margin-top:20px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--quiet)}
.ring-state .pill-ghost{margin-top:24px}

@media (max-width:760px){
  .scrim{padding:12px}
  .sheet{max-width:520px;margin:12px auto;padding:20px}
  .sheet-head{margin-bottom:18px}
  .two{grid-template-columns:minmax(0,1fr)}
  .sheet input,.sheet select,.sheet textarea{font-size:16px}
}

/* ============================ RESPONSIVE ================================= */
@media (max-width:1200px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 420px;gap:0 48px}
  .call-grid{grid-template-columns:minmax(0,1fr) 420px;gap:48px}
  .dash-grid{grid-template-columns:minmax(0,1fr) 430px;gap:48px}
  .foot-top{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr));gap:40px 32px}
}
@media (max-width:1080px){
  .navlinks{display:none}
  .nav .pill-nav{display:none}
  .burger{display:inline-flex}
  .menu{display:block}
  .hero{padding-top:136px;padding-bottom:88px}
  .sec,.dash{padding-top:96px;padding-bottom:96px}
  .cta .shell{padding-top:88px;padding-bottom:88px}
  .hero-grid,.call-grid,.dash-grid,.ind-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .hero-a,.hero-b,.hero-obj{grid-column:1;max-width:none}
  .hero-a{grid-row:1}
  .hero-obj{grid-row:2;justify-self:start;width:100%;max-width:520px}
  .hero-b{grid-row:3;padding-top:0}
  .hero--orb-only .hero-b{grid-row:2}
  .call-grid>.ct{order:1}
  .call-grid>.rows{order:2}
  .ct{position:static;max-width:560px}
  .board{max-width:560px}
  .spec-row{grid-template-columns:64px 260px minmax(0,1fr);gap:20px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .sec-head{margin-bottom:40px}
}
@media (max-width:760px){
  .hero{padding-top:112px;padding-bottom:64px}
  .sec,.dash{padding-top:72px;padding-bottom:72px}
  .cta .shell{padding-top:64px;padding-bottom:60px}
  .statement .shell{padding-top:32px;padding-bottom:32px}
  .grid3,.grid2{grid-template-columns:minmax(0,1fr);border-left:0}
  .cell{padding:26px 0 30px;border-right:0}
  .grid2 .card,.grid2 .card:nth-child(odd),.grid2 .card:nth-child(even){padding:26px 0 30px;border-right:0}
  .spec-row{grid-template-columns:56px minmax(0,1fr);gap:8px 16px;padding:22px 0}
  .spec-row h3,.spec-row p{grid-column:2}
  .spec-row dt{grid-column:2}
  .spec-row dd{grid-column:2}
  .spec-n{grid-row:1;grid-column:1}
  .row{padding:24px 16px}
  .proof{grid-template-columns:minmax(0,1fr)}
  .proof div{padding:28px 0 4px;border-left:0;border-top:1px solid var(--line)}
  .proof div:first-child{border-top:0;padding-top:24px}
  .chips{flex-direction:column;gap:20px;align-items:stretch}
  /* Stacked, the divider becomes an accent bar on each item. The first item
     used to take --blue, which read as a selected state on three peers that
     are not selectable, and contradicted the hero rule that its one accent
     moment belongs to the primary action. Desktop paints none of them blue.
     The :first-child override stays: the desktop rule .chips>div:first-child
     zeroes that border and lives outside this query, so without it the first
     item stacks with no bar at all. Same ink as its peers now, not --blue. */
  .chips div{padding:0 0 0 16px;border-left:2px solid var(--line)}
  .chips div:first-child{padding-left:16px;border-left:2px solid var(--line)}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:40px}
  .foot .shell{padding-top:44px}
  .sheet{padding:22px}
  .two{grid-template-columns:1fr}
  .scrim{padding:12px}
  .faq-a{padding-right:0}
  .faq summary{padding-right:38px}
  .ct-track{height:64px}
}
@media (max-width:520px){
  .hero-cta,.cta .cta-pair{flex-direction:column;align-items:stretch}
  .hero-cta .pill,.cta .cta-pair .pill{width:100%;height:auto;min-height:50px;padding:16px 24px;line-height:1.2}
  .ct{padding:18px 16px 18px}
  .ct-clock{flex-direction:column;align-items:flex-start;gap:8px}
  h1{max-width:none}
}

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .wave i[data-breathe]{animation:none;transform:none}
  .wave i[data-lead]{background:var(--blue)}
  .ct[data-live="true"] .ct-meter i{animation:none;height:16px}
}

/* ============================================================================
   SHARED PAGE SYSTEM - archetype additions (standard page + guide page).
   Additive only: nothing above this line is modified, so the approved
   homepage renders exactly as before. Same tokens, same rhythm.
   ========================================================================== */

/* ---- C0028 page hero: the approved hero with the object column removed ---- */
.hero-grid.solo{grid-template-columns:minmax(0,1fr);gap:0}
.hero-grid.solo .hero-a{grid-column:1;grid-row:1;max-width:760px}
.hero-grid.solo h1{max-width:22ch}
.hero-grid.solo .hero-b{grid-column:1;grid-row:2;max-width:none;padding-top:48px}

/* ---- C0028 +evidence-index: sourced facts fill an art-free hero ---------- */
.hero-index{
  align-self:center;overflow:hidden;padding:24px;background:var(--shell);
  border:1px solid var(--line);border-radius:var(--r-card);
}
.hero-index__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.hero-index__head span{
  font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.4;
  letter-spacing:.04em;text-transform:uppercase;color:var(--blue-label);
}
.hero-index__head b{font-size:13px;font-weight:500;line-height:1.4;color:var(--quiet)}
.hero-index li{border-bottom:1px solid var(--line)}
.hero-index li:last-child{border-bottom:0}
.hero-index li>a,.hero-index--plans li{
  display:grid;grid-template-columns:72px minmax(0,1fr) 16px;gap:16px;align-items:center;
  min-height:72px;padding:16px 0;color:inherit;text-decoration:none;
}
.hero-index--plans li{grid-template-columns:72px minmax(0,1fr)}
.hero-index li>a{transition:background var(--t-base) ease}
.hero-index li>a:hover{background:var(--paper)}
.hero-index li>a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:0}
.hero-index li>a svg{width:16px;height:16px;color:var(--blue);transition:transform var(--t-base) var(--ease)}
.hero-index li>a:hover svg{transform:translateX(3px)}
.hero-index__number{font-size:16px;font-weight:600;line-height:1.3;color:var(--blue)}
.hero-index--plans .hero-index__number{font-size:20px;letter-spacing:-.012em}
.hero-index__copy{display:block;min-width:0}
.hero-index__copy strong{display:block;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.hero-index__copy small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}

/* ---- C0029 rule list: hairline bullets with a blue tick ------------------ */
.blist{border-top:1px solid var(--line)}
.blist li{
  display:grid;grid-template-columns:8px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty;
}
.blist li::before{content:"";width:8px;height:2px;border-radius:1px;background:var(--blue);transform:translateY(-5px)}
.blist.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.blist.two li{padding-right:8px}

/* ---- C0030 caveat note: the honest small print under a claim ------------- */
.note{margin-top:14px;font-size:16px;line-height:1.55;color:var(--muted);max-width:64ch;text-wrap:pretty}

/* ---- C0031 step sequence: the approved spec rows, made walkable ---------- */
.spec.steps .spec-row{transition:background var(--t-base) ease}
.spec.steps .spec-row:hover{background:var(--shell)}
.spec.steps .spec-row:hover .spec-n{color:var(--blue)}
.spec-row-link{position:relative;padding-right:48px;color:inherit;text-decoration:none;transition:background var(--t-base) ease}
.spec-row-link::after{content:"\2192";position:absolute;right:16px;top:50%;font-size:20px;line-height:1;color:var(--blue);transform:translateY(-50%);transition:transform var(--t-base) var(--ease)}
.spec-row-link:hover{background:var(--shell)}
.spec-row-link:hover::after{transform:translate(3px,-50%)}
.spec-row-link:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:0}
.grid2--linked .card-link h3::after{content:"\2192";display:inline-block;margin-left:8px;color:var(--blue);transition:transform var(--t-base) var(--ease)}
.grid2--linked .card-link:hover h3::after{transform:translateX(3px)}

/* ---- C0032 link tags: the approved tag pills, made navigable ------------- */
.tags.links li{padding:0;transition:border-color var(--t-base) ease,background var(--t-base) ease}
.tags.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;color:var(--ink);text-decoration:none;transition:color var(--t-base) ease}
.tags.links li:hover{border-color:var(--blue-line);background:var(--ice)}
.tags.links li:hover a{color:var(--ice-ink)}
.tags.links a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-pill)}

@media (max-width:760px){
  .hero-index{padding:16px}
  .hero-index__head{align-items:flex-start}
  .hero-index li>a,.hero-index--plans li{grid-template-columns:56px minmax(0,1fr) 16px;gap:16px}
  .hero-index--plans li{grid-template-columns:64px minmax(0,1fr)}
  .blist.two{grid-template-columns:minmax(0,1fr);column-gap:0}
  .blist.two li{padding-right:0}
}

/* ---- C0031 flow variant: numbered steps with no sub-title ---------------- */
.spec.flow .spec-row{grid-template-columns:76px minmax(0,1fr)}
.spec.flow .spec-row p{max-width:78ch}
@media (max-width:1080px){.spec.flow .spec-row{grid-template-columns:64px minmax(0,1fr)}}
@media (max-width:760px){.spec.flow .spec-row{grid-template-columns:56px minmax(0,1fr)}}

/* ---- C0002 +v2-static: the current page in the shared nav ---------------- */
.navlinks a[aria-current="page"]{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--blue)}

/* ============================================================================
   SOURCED FILL + REVIEW MODE - 2026-08-02.
   Additive only: nothing above this line is modified.
   C0033 testimony record - C0034 plan band - C0035 review overlay.
   Notes + pre-render declaration: 05 Design/29-sourced-fill/design-notes.md
   ========================================================================== */

/* ---------------------------------------------------------------------------
   C0033 - testimony record.
   The Customers rebuild of 2026-08-25 moved the record itself to
   page-customers.css, which owns its own geometry. What survives here is the
   part still worn by live markup: the section rule, the label, the follow-on
   link and the accent mark. The row grid, its number gutter, its quotation and
   its attribution block (.testify-row / .t-n / .t-q / .t-meta / .t-who /
   .t-org) went with the rebuild and were verified unused across all 79 staged
   pages, every asset script and every builder before being removed.
   ------------------------------------------------------------------------- */
.testify{border-top:1px solid var(--line)}
.t-mark{display:block;width:28px;height:2px;background:var(--blue);margin-top:5px}
.t-head{font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-label);line-height:1.5}
.t-more{margin-top:8px}
.t-more .tlink{font-size:16px}

/* ---------------------------------------------------------------------------
   C0034 - plan band.
   Extension of the approved .proof band: a four-column variant, the tier name
   raised above the quota numeral, and a hairline price line under it.
   Same tokens, same hairline column rhythm, no shadow at any state.
   ------------------------------------------------------------------------- */
.proof.plans{grid-template-columns:repeat(4,minmax(0,1fr))}
.proof.plans>div{padding:36px 28px 32px;transition:background var(--t-base) ease}
.proof.plans>div:first-child{padding-left:0}
.proof.plans>div:hover,.proof.plans>div:focus-within{background:var(--paper)}
.proof .plan-tier{
  display:block;position:relative;margin:0;padding-bottom:9px;
  font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-label);
}
.proof .plan-tier::after{
  content:"";position:absolute;left:0;bottom:0;width:52px;height:2px;border-radius:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.proof.plans>div:hover .plan-tier::after,.proof.plans>div:focus-within .plan-tier::after{transform:scaleX(1)}
.proof.plans>div>b{margin-top:16px;font-size:clamp(30px,3vw,42px)}
/* the unit and the rate line stay sentence case on purpose: the tier name is
   the ONE caps label per column, so four columns spend four labels, not twelve */
.proof .plan-unit{
  display:block;margin-top:8px;font-family:var(--sans);font-size:15px;font-weight:400;
  line-height:1.4;letter-spacing:0;text-transform:none;color:var(--muted);
}
/* min-height keeps the four blurbs on one baseline even though Enterprise
   publishes no monthly rate line */
.proof .plan-price{margin-top:24px;padding-top:16px;min-height:62px;border-top:1px solid var(--line-2)}
.proof .plan-price b{display:block;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.008em;color:var(--ink)}
.proof .plan-price i{
  display:block;margin-top:5px;font-style:normal;font-size:13px;font-weight:400;
  line-height:1.4;letter-spacing:0;text-transform:none;color:var(--quiet);
}
.proof.plans p{margin-top:18px}
.plan-inc{margin-top:64px;font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.32;margin-bottom:20px}

@media (max-width:1080px){
  .proof.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof.plans>div{padding:32px 24px 28px}
  .proof.plans>div:nth-child(odd){padding-left:0;border-left:0}
  .proof.plans>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .proof.plans{grid-template-columns:minmax(0,1fr)}
  .proof.plans>div,.proof.plans>div:nth-child(odd){padding:28px 0 26px;border-left:0}
  .proof.plans>div:first-child{border-top:0;padding-top:24px}
  .proof.plans>div:nth-child(n+2){border-top:1px solid var(--line)}
  .plan-inc{margin-top:48px}
}

/* ---------------------------------------------------------------------------
   C0035 - review overlay.
   OFF unless <html data-review="on">, which only ?review=1 sets in v2.js.
   Every selector below is scoped under that attribute, so a normal visitor
   gets no review styling and no review DOM at all. Layout is never touched:
   outlines and absolutely-positioned pseudo-elements only, plus one fixed
   panel. Amber throughout; brand blue is never used by this layer.
   ------------------------------------------------------------------------- */
[data-review="on"]{
  --rev:#B45309;        /* 5.02:1 on paper, 4.76:1 on shell */
  --rev-deep:#7C2D12;   /* 9.04:1 on the panel tint         */
  --rev-tint:#FFFBEB;
  --rev-soft:rgba(180,83,9,.16);
  --rev-w:340px;
}
[data-review="on"] body{counter-reset:rev}
[data-review="on"] [data-sourced]{
  position:relative;counter-increment:rev;
  outline:2px dashed var(--rev);outline-offset:6px;border-radius:4px;
  transition:outline-color var(--t-base) ease;
}
[data-review="on"] [data-sourced]:hover,
[data-review="on"] [data-sourced]:focus-within{outline-color:var(--rev-deep)}
[data-review="on"] [data-sourced]:focus{outline-color:var(--rev-deep)}

/* the numbered pin - a CSS counter, so no DOM is injected into the content */
[data-review="on"] [data-sourced]::after{
  content:counter(rev);position:absolute;top:-11px;right:-11px;z-index:35;
  min-width:25px;height:25px;padding:0 7px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--rev);color:#FFFFFF;
  font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;
  border-radius:var(--r-pill);pointer-events:none;
  box-shadow:0 1px 2px rgba(69,26,3,.3),0 8px 18px -10px rgba(69,26,3,.6);
  transition:transform var(--t-base) var(--ease);
}
[data-review="on"] [data-sourced]:hover::after,
[data-review="on"] [data-sourced]:focus-within::after{transform:scale(1.12)}

/* the note itself, straight from data-source-note */
[data-review="on"] [data-sourced]::before{
  content:attr(data-source-note);position:absolute;left:0;top:-14px;z-index:34;
  transform:translateY(-100%);max-width:min(430px,78vw);
  padding:11px 15px;border-radius:var(--r-tile);
  background:var(--rev-deep);color:#FFFFFF;
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.45;letter-spacing:0;
  text-transform:none;text-align:left;overflow-wrap:anywhere;box-shadow:var(--lift-dialog);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base) ease,visibility var(--t-base) ease;
}
[data-review="on"] [data-sourced]:hover::before,
[data-review="on"] [data-sourced]:focus-within::before,
[data-review="on"] [data-sourced][data-rev-flash="on"]::before{opacity:1;visibility:visible}

@keyframes revflash{0%,100%{outline-color:var(--rev)}30%,70%{outline-color:var(--rev-deep)}}
[data-review="on"] [data-sourced][data-rev-flash="on"]{outline-width:3px;animation:revflash 900ms var(--ease) 1}

/* the summary panel - the only floating surface this layer adds */
.rev{
  position:fixed;z-index:55;right:20px;top:84px;width:var(--rev-w);
  max-height:calc(100vh - 108px);display:flex;flex-direction:column;
  background:var(--rev-tint);border:1px solid var(--rev);border-radius:var(--r-card);
  box-shadow:var(--lift-dialog);overflow:hidden;
  animation:revin var(--t-slow) var(--ease) 1;
}
@keyframes revin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.rev-head{padding:14px 16px 16px;border-bottom:1px solid var(--rev-soft);flex:none}
.rev-kick{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rev-deep)}
.rev-tag i{width:8px;height:8px;border-radius:50%;background:var(--rev);flex:none}
.rev-toggle{
  min-height:44px;padding:0 14px;border:1px solid var(--rev);border-radius:var(--r-pill);
  background:transparent;color:var(--rev-deep);cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--t-base) ease;
}
.rev-toggle:hover{background:rgba(180,83,9,.1)}
.rev-toggle:focus-visible{outline:2px solid var(--rev-deep);outline-offset:2px}
.rev-note{margin-top:12px;font-size:16px;line-height:1.5;color:var(--rev-deep)}
.rev-note b{font-weight:600}
.rev-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.rev-item{
  display:grid;grid-template-columns:25px minmax(0,1fr);gap:12px;align-items:start;
  width:100%;text-align:left;padding:13px 16px;
  background:transparent;border:0;border-bottom:1px solid var(--rev-soft);cursor:pointer;
  font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--rev-deep);
  overflow-wrap:anywhere;
  transition:background var(--t-base) ease;
}
.rev-list li:last-child .rev-item{border-bottom:0}
.rev-item:hover{background:rgba(180,83,9,.09)}
.rev-item:focus-visible{outline:2px solid var(--rev-deep);outline-offset:-2px}
.rev-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:var(--r-pill);flex:none;
  background:var(--rev);color:#FFFFFF;font-size:13px;font-weight:600;line-height:1;
}
.rev-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;border-top:1px solid var(--rev-soft);flex:none}
.rev-count{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rev-deep)}
.rev-exit{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--rev-deep);text-decoration:underline;text-underline-offset:3px}
.rev-exit:focus-visible{outline:2px solid var(--rev-deep);outline-offset:2px;border-radius:4px}
/* peek: while a jumped-to item is flashing, the panel gets out of its way */
.rev[data-peek="true"]{opacity:.1;pointer-events:none;transition:opacity var(--t-base) ease}
.rev[data-open="false"]{width:auto;max-width:calc(100vw - 40px)}
.rev[data-open="false"] .rev-note,
.rev[data-open="false"] .rev-list,
.rev[data-open="false"] .rev-foot{display:none}
.rev[data-open="false"] .rev-head{border-bottom:0}

@media (max-width:1080px){
  .rev{right:12px;left:12px;width:auto;top:auto;bottom:12px;max-height:46vh}
  .rev[data-open="false"]{left:auto;max-width:calc(100vw - 24px)}
  [data-review="on"] [data-sourced]::before{max-width:min(320px,82vw)}
}

@media (prefers-reduced-motion:reduce){
  [data-review="on"] [data-sourced][data-rev-flash="on"]{animation:none;outline-color:var(--rev-deep)}
}

/* ============================================================================
   R30 REFINEMENT (2026-08-03) - additive only, nothing above is modified.
   ========================================================================== */

/** C0036 · orb-mark (still print): seeded dot-sphere, decorative only.
    Bleed rule: may bleed off-edge, never crosses text. No motion, no shadow. */
.orb-mark{position:absolute;pointer-events:none;color:var(--ink)}
.hero{
  position:relative;overflow:clip;
  --hero-orb-size:clamp(720px,62vw,920px);
  --hero-orb-canvas-size:calc(var(--hero-orb-size) * 1.32);
}
.hero>.shell{position:relative}
.hero-a,.hero-obj,.hero-b{position:relative;z-index:2}
/* R32.1 (Mohamed 2026-08-03): the hero seat moved from the dome under the
   player card to a quarter-crop in the screen's TOP RIGHT corner. `.hero-obj`
   is deliberately NOT positioned, so `.orb-hero` resolves against `.hero`,
   which is full-bleed width; the corner offsets are then true screen edges
   rather than shell-gutter edges, and `.hero{overflow:clip}` does the cropping.
   Mohamed's 2026-08-25 revision makes the sphere a hero-side object rather than
   a corner fragment. The canvas is 1.32 times the visible sphere's design size,
   with equal internal safety margin on all sides. That prevents the WebGL
   particle envelope from meeting a straight canvas edge. The sphere keeps the
   same center and about 60% viewport visibility. */
.orb-hero{
  width:var(--hero-orb-canvas-size);height:var(--hero-orb-canvas-size);left:auto;
  right:calc(var(--hero-orb-size) * -.56);
  top:calc(76px - var(--hero-orb-size) * .16);z-index:1;
  transform:none;opacity:.96;
}
canvas.orb-hero[data-orb-interactive]:not([data-orb-entrance]){
  pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;
}
canvas.orb-hero[data-orb-interactive][data-orb-dragging="true"]{cursor:grabbing}
@media (max-width:1080px){.orb-hero{display:none}}

/* Item B: footer rebalance after the brand-column CTA removal */
.foot .shell{padding-top:72px}
@media (max-width:760px){.foot .shell{padding-top:52px}}

/* Item D: home statement band - tighter, one type step up */
.statement-lead .shell{padding-top:28px;padding-bottom:28px}
.statement-lead p{font-size:19px}
@media (max-width:760px){.statement-lead .shell{padding-top:22px;padding-bottom:22px}}

/* Item C: home proof band recomposed as an aligned stat trio (C0009 metric-trio,
   recomposed). Subgrid rows share baselines across the three columns. */
.proof.trio{grid-template-rows:repeat(3,auto);border-bottom:1px solid var(--line)}
.proof.trio>div{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;padding:36px 32px 40px}
.proof.trio>div:first-child{padding-left:0}
.proof.trio b{font-size:clamp(30px,2.8vw,40px);line-height:1.05}
.proof.trio span{margin-top:12px}
.proof.trio p{margin-top:10px;font-size:16px}
@media (max-width:760px){
  .proof.trio{grid-template-rows:none;border-bottom:0}
  .proof.trio>div{display:block;padding:28px 0 24px}
}

/* ============================================================================
   R31 - LIVING ORB + AMBIENT WASH + COMPACT DIALOG (2026-08-03) - additive.
   Notes + pre-render declaration: 05 Design/31-living-orb/design-notes.md
   Rule revision on record: canvas is allowed ONLY for orb instances anchored
   in their own section (no scroll-follow, no cursor-chase, no travel).
   ========================================================================== */

/** C0037 orb-live RETIRED 2026-08-03 (R32) -> replaced by C0038, which mounts
    the original orb-engine-3.js into these same boxes. The geometry below is
    unchanged and is now C0038's; the canvas still carries the SVG print's
    classes, so box, bleed, clearances and hide-breakpoints stay shared by
    construction, and the print stays in markup as the no-JS, no-WebGL and
    prefers-reduced-motion frame. */
/* no display rule for canvas.orb-mark: absolute positioning blockifies it,
   and a higher-specificity rule here would defeat the hide breakpoints */
svg.orb-mark[data-upgraded]{display:none}
/* The orb is a signature shape, not a background fill, so it must not be cut
   flat at the section seam. Clipping stays on the horizontal axis to keep the
   page from ever scrolling sideways; the vertical axis is free so the shape
   bleeds whole over the next band. */
.sec-plat{position:relative;z-index:1;overflow-x:clip;overflow-y:visible}
/* the platform orb rises over the section's top-right corner, beside the
   head zone: dome core cut by the section edge, arc bleeding off the right.
   left:max() keeps >=60px to the head text at every width from 1200 up and
   keeps the bleed at ultra-wide; vertical bottom stays >=60px above the
   first spec row's text (measured in 05 Design/31-living-orb) */
/* R32.3 (Mohamed 2026-08-03): the seat drops to the section's BOTTOM LEFT and
   is quarter-cropped like the hero. Half the box sits past the left edge and
   half past the bottom, so only the top-right quadrant is on screen.

   Sized to the corner it actually has, not to the hero's. At 660px the visible
   quarter was 330px wide and ran straight through the "05 / 06" and "06 / 06"
   spec rows (measured), because the shell's left gutter is only ~218px. A 400px
   box shows 200px, which fits that gutter, and the section's bottom padding
   opens to 260px so the quarter clears the last row by the 60px bleed law
   instead of sitting on it. */
.orb-plat{
  width:400px;height:400px;
  top:auto;bottom:-200px;left:-200px;opacity:1;
}
.sec-plat{padding-bottom:260px}
/* That 260px is clearance for the orb bleeding out of this band on desktop.
   On a phone the orb is far smaller and the reserve read as a screen of empty
   dark below the spine, so it scales back to the section's own rhythm. */
@media (max-width:900px){.sec-plat{padding-bottom:132px}}
@media (max-width:640px){.sec-plat{padding-bottom:96px}}
@media (max-width:1199px){.orb-plat{display:none}}

/* C0000 +ambient-wash: the live site's entrance backdrop family, site-wide.
   Layer 1 is the recorded reference wash (E9F0FF, px-anchored to stay above
   the fold on long documents); layers 2-4 are fainter blue/lavender pools
   placed proportionally down the page. Deepest tint sits where no 13px blue
   label lives; AA re-measured on content tints (05 Design/31-living-orb). */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(1200px 620px at 72% -140px,#E9F0FF 0%,#F2F6FC 46%,rgba(255,255,255,0) 78%),
    radial-gradient(1000px 720px at -160px 22%,rgba(233,240,255,.7) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(920px 660px at calc(100% + 180px) 55%,rgba(238,240,252,.6) 0%,rgba(255,255,255,0) 72%),
    radial-gradient(1100px 780px at -80px 92%,rgba(234,240,254,.55) 0%,rgba(255,255,255,0) 74%);
  background-repeat:no-repeat;
}
/* shell bands go translucent so the wash breathes through while the
   paper/shell alternation survives; cards, dialog, nav, and the dark band
   keep their approved surfaces */
/* R32.4 (Mohamed 2026-08-03, "break this silence"): the alternation existed but
   was inaudible. Measured, the tinted bands sat at luminance .927 against a
   ~1.0 page, a step too small to read as rhythm, so eleven sections looked like
   one white sheet. Deepened to ~.87 and given a hairline top/bottom so each
   band states where it starts and ends. Still a tint, not a colour: body text
   is ink, so the contrast ratio moves by a rounding error, and the ambient wash
   still shows through. This plus the dark chapter at 05-06 is the whole
   rhythm: light, tint, light, tint, DARK, BLACK, light, tint, light, tint,
   light, ice. */
.sec-shell{background:rgba(233,239,248,.94);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement{background:rgba(233,239,248,.94)}

/* C0025 +compact (desktop only, >=761px viewport): the full form on one
   screen at 1440x900 AND 1440x800 with no internal scroll. Field set, copy,
   validation, and the /api/lead contract unchanged; mobile keeps the shipped
   behaviour. 5px label margin = declared optical exception; 13px legal floor. */
@media (min-width:761px){
  .sheet{padding:20px 26px}
  .sheet-head{margin-bottom:14px}
  .sheet-head h2{font-size:20px}
  .sheet-head p{margin-top:4px;font-size:15px}
  .fields{gap:12px}
  .f>span:not(.tel){font-size:14px;margin-bottom:5px}
  .f input,.f select,.tel input{height:44px}
  /* volume/phone row: the volume column takes a step more so the longest
     chosen option ("0 - 5000 calls per month") renders unclipped */
  .fields .two:nth-of-type(3){grid-template-columns:1.08fr .92fr}
  .f select{padding-right:34px}
  .legal{font-size:13px;line-height:1.5}
  .consent{padding:2px 0}
  .sheet .pill-primary{margin-top:0}
  .suberr{margin-top:8px}
}

/* ============================================================================
   R32 - REAL ORB ENGINE + ENTRANCE (2026-08-03) - additive.
   Mohamed's ruling: "use the old ORB as it is, but not make him working in the
   whole website, so we keep loading screen, and we a little animations."
   The lightweight C0037 reimplementation is retired; C0038 mounts the original
   orb-engine-3.js into the SAME boxes, so every measured clearance above still
   holds. C0039 is the ported entrance.
   ========================================================================== */

/** C0038 · orb-anchored: the real engine in a fixed section seat. The canvas
    carries the SVG print's own classes, so box, bleed, clearances and the
    hide-breakpoints in the R30/R31 blocks above are shared by construction and
    the section boxes never change (zero layout shift).
    Deliberately NO `canvas.orb-mark{display:...}` rule: absolute positioning
    already blockifies the canvas, and an element+class selector would outrank
    the `.orb-hero`/`.orb-plat` hide breakpoints and keep a seat alive on
    phones. Measured: with such a rule the platform seat still rendered at
    1199px. */

/** C0039 · orb-entrance: the opening moment, ported from the shared layer
    (06 Build/builders/chat-ball.html "entrance v3"). Only the hero seat plays;
    it is lifted to <body> for the duration because .hero has overflow:clip. */
#aimLoad{
  position:fixed;inset:0;z-index:50;
  background:radial-gradient(1200px 620px at 72% -4%,#E9F0FF 0%,#F2F6FC 46%,#FFFFFF 78%);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .45s ease .05s;
}
/* once released, the fading overlay must not swallow the first click: it stays
   for the 650ms cleanup only, and it is decorative (aria-hidden) */
#aimLoad[data-done]{pointer-events:none}
#aimWord{
  position:relative;font-size:clamp(60px,11vw,150px);font-weight:600;
  letter-spacing:-.03em;line-height:1;white-space:nowrap;
  color:rgba(27,29,33,.07);user-select:none;opacity:0;transition:opacity .35s ease;
}
#aimWord.up{opacity:1}
#aimFill{
  position:absolute;inset:0;color:var(--blue);opacity:.85;
  clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(.3,.7,.3,1);
}
/* no invisible scroll behind the intro */
html.aim-loading,html.aim-loading body{overflow:hidden !important}
/* the hero seat plays full-viewport above the wash, then returns to its box */
canvas[data-orb-entrance]{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:60;
  transform:scale(2.4);transform-origin:50% 50%;opacity:1;
  transition:opacity .5s ease,transform .65s cubic-bezier(.32,.72,0,1);
}
canvas[data-orb-entrance][data-orb-exit]{opacity:0;transform:scale(1.35)}
/* the platform seat stays out of the opening */
html.aim-loading canvas[data-orb-seat="plat"]{visibility:hidden}

/* "a little animations": the hero rises once, as the shape takes its seat */
html.aim-reveal [data-enter]{opacity:0}
html.aim-reveal [data-enter].aim-in{animation:aimUp .82s cubic-bezier(.32,.72,0,1) forwards}
@keyframes aimUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  /* the entrance never runs here (v2-orb-boot.js returns before it starts) and
     the C0036 print is the static frame; these are belt-and-braces */
  #aimLoad{display:none}
  html.aim-reveal [data-enter],html.aim-reveal [data-enter].aim-in{opacity:1;animation:none}
}

/* ============================================================================
   R32.8b - .sec-night, declared LAST on purpose (2026-08-03)
   ----------------------------------------------------------------------------
   The first attempt at the site-wide dark chapter lost two cascade fights, and
   the failures were invisible in code review but obvious under measurement:

     1. `.sec-shell`'s tint is declared later in this file (R32.4) at equal
        specificity, so every chapter that happened to be `sec sec-shell` kept
        its LIGHT background while its text went white. Measured 1.16:1 on the
        h2 and 1.82:1 on body copy - unreadable, on 5 pages.
     2. `.blist li` sets `color:var(--body)` further down, so bullet text on the
        dark ground measured 2.05:1 on 16 guide pages.

   Both are fixed the same way: declare the dark chapter after everything it has
   to beat, and match specificity where a class-on-class rule is needed. Nothing
   here is `!important` - the ordering does the work.
   ========================================================================== */
.sec.sec-night,.statement.sec-night{
  background:var(--night-lift);
  background-image:radial-gradient(76% 60% at 16% 94%,#151F37 0%,var(--night-lift) 58%);
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);
}
.sec-night h2,.sec-night h3,.sec-night h4{color:var(--night-ink)}
.sec-night p,.sec-night .lede,.sec-night li{color:var(--night-lede)}
.sec-night .blist li{color:var(--night-lede);border-color:rgba(255,255,255,.10)}
.sec-night .blist li::before{background:var(--night-accent)}
.sec-night .eyebrow-b{color:var(--night-accent)}
.sec-night .note,.sec-night .spec-n,.sec-night .row-n{color:var(--night-chip)}
.sec-night .spec,.sec-night .spec-row,.sec-night .rows,.sec-night .row{border-color:rgba(255,255,255,.10)}
.sec-night .spec-row h3,.sec-night .row h3{color:var(--night-ink)}
.sec-night .spec-row p,.sec-night .row p{color:var(--night-lede)}
.sec-night blockquote{color:var(--night-ink)}
.sec-night .tags a,.sec-night .tag{
  color:var(--night-chip);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);
}
.sec-night .tags a:hover{border-color:var(--night-accent);color:var(--night-ink)}
.sec-night a{color:var(--night-accent)}
.sec-night a:hover{color:var(--night-ink)}
.sec-night .spec.steps .spec-row:hover{background:rgba(255,255,255,.04)}
.sec-night .spec.steps .spec-row:hover .spec-n{color:var(--night-accent)}

/* ============================================================================
   R32.9 - the hub pages actually link to their children (2026-08-03)
   ----------------------------------------------------------------------------
   Found by crawling the deploy rather than by testing chosen paths: /industries
   and /use-cases listed every child as a plain heading with ZERO links, so both
   hubs were dead ends and three detail pages were reachable from nowhere at all.
   The cards are now anchors. Copy is untouched - only the wrapping element
   changed - and the hover language is the one already in use elsewhere
   (C0031 step rows: shell tint + the accent turning blue in 200ms).
   ========================================================================== */
.card-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.card-link:hover h3{color:var(--blue)}
.card-link h3{transition:color var(--t-base) ease}
.card-link i{transition:width var(--t-base) var(--ease)}
.card-link:hover i{width:44px}
.card-link:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* the dark chapter on /use-cases carries these cards too */
.sec-night .card-link:hover h3{color:var(--night-accent)}