/* ============================================================ AVA BACKSTAGE — css/backstage.css (Run 1 · Wave 0 foundation) Components only. Tokens live in assets/guide.css (BACKSTAGE TOKENS block) on the CIRCULANT base — one system, no forks. Loaded AFTER circulant.css + guide.css, BEFORE bridge.css. Motion law: transform / opacity / box-shadow only. Zero CLS. Curves: --hard-dock arrivals · --quiet-settle states · --receipt-pop chips+check · --glide crossfades · linear clock. ============================================================ */ /* ---- page base ---- */ body.backstage{background:var(--e0);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif; margin:0;padding-bottom:72px; /* persistent callbar reserve — zero CLS */ overflow-x:clip; /* P2 belt: clamp horizontal pan (clip keeps overflow-y visible; no sticky/fixed break) */ -webkit-font-smoothing:antialiased} /* key light — static, fixed, paints once, behind all content */ body.backstage::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; background:radial-gradient(1100px 620px at 72% -8%,var(--key-light),transparent 70%)} .bs-section{padding:64px 0} .bs-section--tight{padding:36px 0} .bs-center{text-align:center} /* B5 · mobile density — keep the homepage to ~9 screens */ @media(max-width:860px){ .bs-section{padding:38px 0} .bs-section--tight{padding:24px 0} .bs-hero{padding:28px 0 6px} } .bs-h2{font-size:clamp(26px,4.4vw,38px);line-height:1.12;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px} /* ---- visually-hidden live region (payoff announced to screen readers) ---- */ .bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- skip link ---- */ .bs-skiplink{position:fixed;top:-48px;left:12px;z-index:1000;background:var(--e3);color:var(--ink); box-shadow:var(--e3-sh);border-radius:0 0 10px 10px;padding:12px 18px;text-decoration:none; font-size:14px;transition:top .2s var(--quiet-settle)} .bs-skiplink:focus{top:0} /* ---- CTAs ---- */ .bs-cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px; padding:0 26px;border-radius:12px;font-weight:700;font-size:15.5px;letter-spacing:.04em;max-width:100%; text-decoration:none;border:1px solid transparent;cursor:pointer; transition:transform .18s var(--quiet-settle),box-shadow .18s var(--quiet-settle)} .bs-cta:active{transform:scale(.98)} .bs-cta-cyan{background:var(--cyan);color:#03151B} .bs-cta-cyan:hover{box-shadow:0 0 24px rgba(0,212,255,.35)} html[data-theme="light"] .bs-cta-cyan{color:#FFFFFF} .bs-cta-line{background:transparent;color:var(--ink);border-color:var(--line)} .bs-cta-line:hover{border-color:var(--cyan);color:var(--cyan)} /* ============================================================ ORB — one + ✓. Three paint layers, ZERO per-frame paint: body = static layered radial gradients; ::before = glow halo (opacity only); ::after = conic arc (static gradient, spun by transform, masked to a ring). States via [data-state=idle|active|working|done]. ============================================================ */ .orb{--size:44px;--lane:var(--cyan); position:relative;width:var(--size);height:var(--size);border-radius:50%; display:inline-block;flex:none;vertical-align:middle; background: radial-gradient(circle at 32% 26%,rgba(255,255,255,.85),transparent 31%), radial-gradient(circle at 66% 20%,rgba(255,255,255,.30),transparent 26%), radial-gradient(circle at 50% 118%,rgba(0,0,0,.55),transparent 55%), radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--lane) 62%,#FFFFFF 10%), color-mix(in srgb,var(--lane) 30%,#000000 42%) 78%); box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 calc(var(--size)*-.09) calc(var(--size)*.18) rgba(0,0,0,.38), 0 0 0 1px color-mix(in srgb,var(--lane) 40%,transparent); opacity:.38; transition:opacity .35s var(--quiet-settle),transform .35s var(--quiet-settle)} .orb::before{content:"";position:absolute;inset:-32%;border-radius:50%;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--lane) 45%,transparent),transparent 68%); opacity:0;transition:opacity .3s var(--quiet-settle)} .orb::after{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;opacity:0; background:conic-gradient(from 0deg,var(--lane) 0 78deg,transparent 78deg 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px)); transition:opacity .25s var(--glide)} .orb i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:800; font-size:calc(var(--size)*.46);line-height:1;color:#FFFFFF;transform:scale(0);pointer-events:none} html[data-theme="light"] .orb i{color:#FFFFFF} .orb[data-state="active"]{opacity:1;transform:scale(1.06)} .orb[data-state="active"]::before{opacity:.5} .orb[data-state="working"]{opacity:1;transform:scale(1.06)} .orb[data-state="working"]::before{opacity:.75} .orb[data-state="working"]::after{opacity:1;animation:orb-arc 900ms linear infinite} @keyframes orb-arc{to{transform:rotate(1turn)}} .orb[data-state="done"]{opacity:1;transform:none} .orb[data-state="done"]::before{opacity:.28} .orb[data-state="done"]::after{opacity:1;animation:none; background:conic-gradient(var(--live-green) 0 360deg)} .orb[data-state="done"] i{animation:orb-check .38s var(--receipt-pop) forwards} @keyframes orb-check{to{transform:scale(1)}} /* ---- SIGNAL PILL (compact tier): stacked orbs + live seconds + status ---- no flex gap — it would cancel the orb stack's negative margin */ .signal-pill{display:inline-flex;align-items:center;padding:8px 16px 8px 10px; border-radius:999px;background:var(--e1);box-shadow:var(--e1-sh);border:1px solid var(--line)} .signal-pill .orb{--size:32px} .signal-pill .sp-secs{margin-left:12px} .signal-pill .sp-status{margin-left:10px} .signal-pill .orb+.orb{margin-left:calc(var(--size)*-.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 calc(var(--size)*-.09) calc(var(--size)*.18) rgba(0,0,0,.38), 0 0 0 2px var(--e1)} /* surface ring on the stack */ .sp-secs{font-family:var(--g-mono);font-size:13px;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums} .sp-status{font-family:var(--g-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-mute)} /* ---- WIRING PANEL (static tier): one orb, dashed lines to systems ---- */ .wiring-panel{display:grid;grid-template-columns:auto 1fr;gap:0 26px;align-items:center; background:var(--e1);box-shadow:var(--e1-sh);border:1px solid var(--line); border-radius:14px;padding:22px 24px;margin:22px 0;max-width:520px} .wiring-panel .wp-orb{display:flex;flex-direction:column;align-items:center;gap:8px; font-family:var(--g-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-mute)} .wiring-panel .wp-orb .orb{--size:56px} .wiring-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .wiring-panel li{position:relative;padding-left:56px;font-family:var(--g-mono);font-size:13px; letter-spacing:.06em;color:var(--ink)} .wiring-panel li::before{content:"";position:absolute;left:0;top:50%;width:44px; border-top:1px dashed var(--g-line-cyan)} .wiring-panel li::after{content:"";position:absolute;left:46px;top:50%;width:5px;height:5px; margin-top:-2.5px;border-radius:50%;background:var(--cyan)} /* ---- receipt chips ---- */ .bs-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; font-family:var(--g-mono);font-size:12px;letter-spacing:.05em;color:var(--ink); background:var(--e2);box-shadow:var(--e2-sh);border:1px solid var(--line); transform:scale(0);animation:orb-check .38s var(--receipt-pop) forwards} .bs-chip.ok{border-color:color-mix(in srgb,var(--live-green) 45%,transparent);color:var(--live-green)} /* ---- persistent bottom callbar (e3, every viewport) ---- */ .bs-callbar{position:fixed;left:0;right:0;bottom:0;z-index:940;display:flex;gap:10px; align-items:center;justify-content:center;padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); background:var(--e3);box-shadow:var(--e3-sh);border-top:1px solid var(--line)} .bs-callbar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px; border-radius:10px;font-weight:700;font-size:14px;letter-spacing:.04em;text-decoration:none;padding:0 18px} .bs-callbar .bs-cb-tel{background:var(--cyan);color:#03151B;flex:1;max-width:420px} html[data-theme="light"] .bs-callbar .bs-cb-tel{color:#FFFFFF} .bs-callbar .bs-cb-book{border:1px solid var(--line);color:var(--ink)} /* yield to the open mobile burger menu (bnav-menu is z 899, callbar 940) */ body:has(.bnav-burger[aria-expanded="true"]) .bs-callbar{visibility:hidden} /* ============================================================ HOMEPAGE — LAYER 1 ============================================================ */ /* theme toggle styling + light tokens now live in bridge.css (site-wide) */ /* hero */ .bs-hero{padding:44px 0 8px;text-align:center} .bs-hero .g-eyebrow{margin-bottom:10px} .bs-hero h1{font-size:clamp(34px,8.6vw,64px);line-height:1.05;letter-spacing:-.02em; margin:0 auto .35em;max-width:16ch;color:var(--ink)} .bs-sub{font-size:clamp(15px,2.2vw,18px);line-height:1.55;color:var(--ink-mute); max-width:56ch;margin:0 auto 20px} .bs-hcta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* P2: at 390 the fixed-content CTAs (362px) overran the 350 column — stack them full-width so they fit instead of getting clipped by the overflow belt */ @media(max-width:440px){ .bs-hcta{flex-direction:column;align-items:stretch} .bs-hcta .bs-cta{width:100%} } .bs-micro{font-family:var(--g-mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-mute);margin:12px 0 16px} /* poster result strip (pre-tap) */ .bs-result{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center; padding:10px 18px 10px 12px;border-radius:16px;background:var(--e1);box-shadow:var(--e1-sh); border:1px solid var(--g-line-cyan);text-decoration:none;color:var(--ink)} .bs-result-line{font-family:var(--g-mono);font-size:13px;letter-spacing:.06em;color:var(--ink-mute)} .bs-result-line b{color:var(--live-green);font-weight:700} .bs-chipsrow{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap; padding:0;margin:18px 0 0} .bs-chipsrow li{font-family:var(--g-mono);font-size:12px;letter-spacing:.05em;color:var(--ink-mute); border:1px solid var(--line);border-radius:999px;padding:7px 14px} /* ============================================================ HOMEPAGE — LAYER 2 · THE THEATER (Run 1.5 · GROK PASS) Mobile = one streaming feed of glass agent cards. Desktop >=1024 = the same cards in 4 lane columns. ============================================================ */ .bs-theater-sub{font-size:clamp(17px,2.4vw,21px);color:var(--ink);margin:0 0 4px;font-weight:600} .bs-cutaway{color:var(--ink-mute);font-size:15px;margin:0 0 22px} /* trade chips */ .bs-trades{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px} .bs-trade{font-family:var(--g-mono);font-size:12px;letter-spacing:.08em;padding:9px 14px;min-height:40px; border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-mute);cursor:pointer; transition:color .2s var(--quiet-settle),border-color .2s var(--quiet-settle)} .bs-trade.is-on{border-color:var(--cyan);color:var(--cyan)} /* the stage — overflow visible so the sticky result strip can pin */ .bs-stage{position:relative;background:var(--e1);box-shadow:var(--e1-sh);border:1px solid var(--line); border-radius:18px;padding:20px} .bs-stagetop{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px} .bs-caller{flex:1;min-width:min(100%,320px);margin:0;max-width:none} .bs-start{font-family:var(--g-mono);font-size:12px;letter-spacing:.12em;padding:10px 18px;min-height:44px;flex:none; border-radius:10px;border:1px solid var(--cyan);background:transparent;color:var(--cyan);cursor:pointer} .bs-start:hover{background:rgba(0,212,255,.08)} /* stacked-orb signal pill — the feed header */ .bs-pill{display:flex;align-items:center;width:100%;max-width:440px;margin:0 0 16px; padding:8px 16px 8px 10px;border-radius:999px;background:var(--e2);box-shadow:var(--e2-sh);border:1px solid var(--line)} .bs-pill-orbs{display:inline-flex;align-items:center;flex:none} .bs-pill-orbs .orb{--size:28px} .bs-pill-orbs .orb+.orb{margin-left:calc(28px*-.32); box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 calc(28px*-.09) calc(28px*.18) rgba(0,0,0,.38),0 0 0 2px var(--e2)} .bs-pill-label{font-family:var(--g-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-mute);margin-left:14px} .bs-pill-secs{font-family:var(--g-mono);font-size:15px;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums;min-width:5ch;text-align:right;margin-left:auto;padding-left:12px;contain:layout paint} /* the feed */ .bs-floor{position:relative;margin:0 0 8px} .bs-feed{display:flex;flex-direction:column;gap:8px} /* mobile: one chronological stream */ .bs-lane{display:contents} /* cards hoist into the feed, ordered */ .bs-lanelabel{display:none} /* glass agent card — ghost at rest (AA-safe ghost color, not opacity), ignites on fire */ .bs-card{position:relative;display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:14px; background:var(--e1);box-shadow:var(--e1-sh);border:1px solid var(--line);border-left:2px solid var(--lane-c,var(--line)); cursor:default;--card-ink:#79818F;transition:border-color .3s var(--quiet-settle)} html[data-theme="light"] .bs-card{--card-ink:#5A6272} .bs-card[data-lane="intake"]{--lane-c:var(--lane-intake)} .bs-card[data-lane="triage"]{--lane-c:var(--lane-triage)} .bs-card[data-lane="tools"]{--lane-c:var(--lane-tools)} .bs-card[data-lane="output"]{--lane-c:var(--lane-output)} .bs-card .orb{--size:44px;flex:none} .bs-cbody{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .bs-cname{font-family:var(--g-mono);font-size:10.5px;letter-spacing:.12em;color:var(--card-ink); transition:color .3s var(--quiet-settle)} .bs-cpay{font-size:14px;line-height:1.35;color:var(--card-ink);transition:color .3s var(--quiet-settle)} .bs-cchip{flex:none;font-family:var(--g-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink); background:var(--e2);box-shadow:var(--e2-sh);border:1px solid var(--line);border-radius:999px; padding:5px 10px;transform:scale(0);opacity:0;transition:none} .bs-cchip.ok{border-color:color-mix(in srgb,var(--live-green) 45%,transparent);color:var(--live-green)} .bs-cchip[data-filled]{opacity:1;animation:orb-check .38s var(--receipt-pop) forwards} /* ignited card */ .bs-card.on{animation:card-dock .32s var(--hard-dock);cursor:pointer} .bs-card.on .bs-cname{color:var(--lane-c)} .bs-card.on .bs-cpay{color:var(--g-read)} .bs-card.on:hover{border-color:var(--g-line-cyan)} .bs-card.final{border-left-color:var(--live-green)} .bs-card.final .bs-cname,.bs-card.final .bs-cpay{color:var(--live-green)} @keyframes card-dock{from{opacity:.5;transform:translateY(14px)}to{opacity:1;transform:none}} /* wires overlay + THE LIVE WIRE dot (card-to-card mobile · lane-to-lane desktop) */ .bs-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0} .bs-wires path{fill:none;stroke:rgba(0,212,255,.14);stroke-width:1.5;stroke-dasharray:5 6; transition:stroke .3s var(--quiet-settle)} .bs-stage.is-running .bs-wires path{stroke:rgba(0,212,255,.4)} html[data-theme="light"] .bs-wires path{stroke:rgba(0,116,156,.2)} html[data-theme="light"] .bs-stage.is-running .bs-wires path{stroke:rgba(0,116,156,.45)} .bs-feed{position:relative;z-index:1} .bs-dot{position:absolute;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;z-index:2; background:var(--wire-c,var(--cyan));pointer-events:none;opacity:0; box-shadow:0 0 12px 3px color-mix(in srgb,var(--wire-c,var(--cyan)) 70%,transparent)} .bs-stage.is-running .bs-dot{opacity:1} .bs-dot.no-path{display:none} /* collapsed result strip (B4) — pins while you scroll the reviewed feed */ .bs-strip{position:sticky;top:74px;z-index:8;display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:0 0 14px;padding:11px 16px;border-radius:12px;background:var(--e3);box-shadow:var(--e3-sh); border:1px solid var(--g-line-cyan)} .bs-strip[hidden]{display:none} .bs-strip-r{font-family:var(--g-mono);font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:8px} .bs-strip-r b{color:var(--live-green);font-weight:700} .bs-strip-check{color:var(--live-green);font-weight:800} .bs-strip-t{font-family:var(--g-mono);font-size:11.5px;color:var(--ink-mute);font-variant-numeric:tabular-nums} .bs-strip-book{margin-left:auto;font-weight:700;font-size:13px;color:var(--cyan);text-decoration:none; border:1px solid var(--g-line-cyan);border-radius:9px;padding:8px 14px;min-height:40px;display:inline-flex;align-items:center} .bs-strip-replay{background:none;border:none;color:var(--ink-mute);font-family:var(--g-mono);font-size:12px; cursor:pointer;padding:8px;min-height:40px} .bs-strip-replay:hover{color:var(--cyan)} /* payoff card — e3 + key-light glow (S4, the money shot) */ .bs-payoff{position:absolute;left:50%;top:50%;width:min(92%,420px);z-index:6; transform:translate(-50%,-42%);opacity:0;text-align:center; background:color-mix(in srgb,var(--e3) 92%,transparent); box-shadow:var(--e3-sh), inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent), /* P3: 1px inner top highlight */ 0 0 60px 6px color-mix(in srgb,var(--cyan) 20%,transparent), /* soft colored outer glow */ 0 26px 64px -14px rgba(0,0,0,.6); /* depth drop */ border:1px solid transparent;border-radius:22px;padding:30px 26px;pointer-events:none;visibility:hidden; transition:transform .48s var(--quiet-settle),opacity .48s var(--quiet-settle),visibility 0s .48s} @supports ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){ .bs-payoff{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} /* P3: frosted glass where supported */ } @supports not ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){ .bs-payoff{background:var(--e3)} /* opaque fallback so text AA never depends on blur */ } /* P3: 1px gradient rim (cyan -> violet -> gold), corner-hugging via mask */ .bs-payoff::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px; background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 60%,transparent), color-mix(in srgb,var(--violet) 34%,transparent) 52%,color-mix(in srgb,var(--gold) 34%,transparent)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} /* RUN 1.9 P1: the radial circle/halo behind JOB BOOKED is REMOVED (Shane). Layered glass depth (box-shadow), the top highlight, the gradient rim (::after), and the coloured keywords all stay. */ .bs-payoff.in{transform:translate(-50%,-50%);opacity:1;pointer-events:auto;visibility:visible; transition:transform .48s var(--quiet-settle),opacity .48s var(--quiet-settle)} .bs-stage.is-reviewed .bs-payoff{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--glide),visibility 0s .3s} .bs-pr{font-size:clamp(26px,5vw,34px);font-weight:700;letter-spacing:.02em;color:var(--live-green);margin:0} .bs-pw{font-family:var(--g-mono);font-size:15px;letter-spacing:.1em;color:var(--gold);margin:8px 0 0} /* P3: gold */ .bs-ps{font-family:var(--g-mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute);margin:6px 0 0; font-variant-numeric:tabular-nums} .bs-ps [data-p-secs]{color:var(--cyan);font-weight:700;font-size:1.24em} /* P3: the count in cyan (large+bold = AA) */ .bs-pt{font-family:var(--g-mono);font-size:12.5px;letter-spacing:.14em;color:#A78BFA;margin:2px 0 0} /* P3: violet (bright for dark AA) */ html[data-theme="light"] .bs-pt{color:#6355E6} /* P3: light violet keeps AA on the white panel */ /* P4: light payoff = paper elevation (layered soft shadows + crisp top line), not glow; 96% opacity keeps every keyword safely above AA on the near-white panel */ html[data-theme="light"] .bs-payoff{background:color-mix(in srgb,var(--e3) 96%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,19,26,.06), 0 18px 44px -12px rgba(16,19,26,.28), 0 0 40px 2px color-mix(in srgb,var(--cyan) 12%,transparent)} .bs-pcta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px} .bs-preview{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:4px 0 0} .bs-replay,.bs-review{background:none;border:none;color:var(--ink-mute);font-family:var(--g-mono);font-size:12px; letter-spacing:.1em;cursor:pointer;padding:10px;min-height:44px} .bs-replay:hover,.bs-review:hover{color:var(--cyan)} .bs-pline{font-size:12.5px;color:var(--ink-mute);margin:6px 0 0} /* the feed dims behind the payoff on freeze; "review the call" restores it */ .bs-feed,.bs-pill{transition:opacity .32s var(--glide)} .bs-stage.is-frozen:not(.is-reviewed) .bs-feed{opacity:.4} /* replay veil — 180ms crossfade */ .bs-veil{position:absolute;inset:0;background:var(--e1);opacity:0;pointer-events:none;z-index:7;border-radius:18px; transition:opacity .18s var(--glide)} .bs-veil.on{opacity:1} /* party trick — phone mockup (e2), recap SMS */ .bs-phone{position:absolute;right:18px;bottom:18px;z-index:9;width:min(78%,260px); background:var(--e2);box-shadow:var(--e2-sh);border:1px solid var(--line);border-radius:18px; padding:14px;transform:translateY(8px) scale(.96);opacity:0;visibility:hidden; transition:transform .3s var(--receipt-pop),opacity .3s var(--quiet-settle),visibility 0s .3s} .bs-phone.in{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--receipt-pop),opacity .3s var(--quiet-settle)} .bs-phone .ph-top{font-family:var(--g-mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-mute);margin-bottom:8px} .bs-phone .ph-msg{background:var(--e3);box-shadow:var(--e3-sh);border-radius:12px 12px 12px 4px; padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink)} .bs-phone .ph-time{font-family:var(--g-mono);font-size:10.5px;color:var(--ink-mute);margin-top:6px} .bs-disclosure{font-family:var(--g-mono);font-size:11.5px;color:var(--ink-mute);margin-top:12px} /* desktop: the same cards in four lane columns */ @media(min-width:1024px){ .bs-feed{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start} .bs-lane{display:flex;flex-direction:column;gap:10px;padding-top:26px;position:relative} .bs-lane::before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;border-radius:2px; background:var(--lane-c,var(--line));opacity:.7} .bs-lane[data-lane="intake"]{--lane-c:var(--lane-intake)} .bs-lane[data-lane="triage"]{--lane-c:var(--lane-triage)} .bs-lane[data-lane="tools"]{--lane-c:var(--lane-tools)} .bs-lane[data-lane="output"]{--lane-c:var(--lane-output)} .bs-lanelabel{display:block;position:absolute;top:0;left:0;font-family:var(--g-mono);font-size:10.5px; letter-spacing:.18em;color:var(--lane-c)} .bs-card{flex-direction:column;align-items:flex-start;gap:8px} .bs-cchip{align-self:flex-start} } /* ---- objection strip ---- */ .bs-objections{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 0} .bs-ob{background:var(--e1);box-shadow:var(--e1-sh);border:1px solid var(--line);border-radius:14px;padding:20px 22px} .bs-ob h3{font-size:16.5px;color:var(--ink);margin:0 0 8px} .bs-ob p{font-size:15px;line-height:1.65;color:var(--g-read);margin:0} @media(max-width:760px){.bs-objections{grid-template-columns:1fr}} /* ---- pricing ---- */ .bs-ptabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px} .bs-ptab{font-family:var(--g-mono);font-size:12px;letter-spacing:.08em;padding:9px 16px;min-height:44px; border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-mute);cursor:pointer} .bs-ptab.is-on{border-color:var(--cyan);color:var(--cyan)} /* ============================================================ pricing — DONOR treatment (overview.html purple glass tiers) ported onto the tokens (Run 1.7 · SKIN ONLY, content frozen). Per-card accents: Starter=cyan · Growth=violet (the featured hero) · Operations=gold. Radial glow behind. Price stays gold per the ACCENT LAW. Both themes. ============================================================ */ .bs-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch; position:relative;max-width:1080px;margin:0 auto} .bs-tiers::before{content:"";position:absolute;inset:-80px 0;pointer-events:none;z-index:0; background: radial-gradient(ellipse 52% 54% at 50% 44%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 70%), radial-gradient(ellipse 74% 64% at 50% 56%,color-mix(in srgb,var(--cyan) 7%,transparent),transparent 72%)} @media(max-width:900px){.bs-tiers{grid-template-columns:1fr;gap:16px}.bs-tiers::before{inset:-24px 0}} .bs-tier{--accent:var(--cyan); --accent-line:color-mix(in srgb,var(--cyan) 45%,transparent); --accent-soft:color-mix(in srgb,var(--cyan) 12%,transparent); --accent-glow:color-mix(in srgb,var(--cyan) 35%,transparent); position:relative;z-index:1;display:flex;flex-direction:column;border-radius:20px;padding:34px 26px 26px; background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.04)); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); box-shadow:0 18px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07); transition:transform .25s var(--quiet-settle),box-shadow .25s var(--quiet-settle),border-color .25s var(--quiet-settle)} .bs-tier[data-tier="growth"]{--accent:var(--violet); --accent-line:color-mix(in srgb,var(--violet) 55%,transparent); --accent-soft:color-mix(in srgb,var(--violet) 14%,transparent); --accent-glow:color-mix(in srgb,var(--violet) 40%,transparent)} .bs-tier[data-tier="operations"]{--accent:var(--gold); --accent-line:color-mix(in srgb,var(--gold) 45%,transparent); --accent-soft:color-mix(in srgb,var(--gold) 12%,transparent); --accent-glow:color-mix(in srgb,var(--gold) 32%,transparent)} /* Growth = the featured purple hero (glass + violet glow + desktop scale) */ .bs-tier[data-tier="growth"]{border-color:color-mix(in srgb,var(--violet) 50%,transparent); background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.05)); box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 70px color-mix(in srgb,var(--violet) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.10)} @media(min-width:901px){.bs-tier[data-tier="growth"]{transform:scale(1.045)}} /* RUN 1.9: desync the 3 tier CTA laps (they aren't DOM siblings, so bridge's nth-of-type stagger can't reach them) */ .bs-tier[data-tier="growth"] .ava-lap::before{animation-delay:-1.7s} .bs-tier[data-tier="operations"] .ava-lap::before{animation-delay:-2.9s} /* light theme: glass → clean white card */ html[data-theme="light"] .bs-tier{background:#FFFFFF;box-shadow:var(--e2-sh); border-color:color-mix(in srgb,var(--accent) 34%,transparent)} html[data-theme="light"] .bs-tier[data-tier="growth"]{background:#FFFFFF; box-shadow:var(--e3-sh),0 0 46px color-mix(in srgb,var(--violet) 20%,transparent)} /* B3 selection ring — keeps the tab behavior; accent-colored, no layout shift */ .bs-tier.is-reco{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),0 18px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)} .bs-tier[data-tier="growth"].is-reco{ box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 26%,transparent),0 24px 80px rgba(0,0,0,.5),0 0 70px color-mix(in srgb,var(--violet) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.10)} @media(hover:hover){.bs-tier:hover{border-color:var(--accent)}} /* light theme needs its own state rules — the html-scoped light base out-specifies the bare .is-reco/:hover, so the B3 selection ring would otherwise never show */ html[data-theme="light"] .bs-tier.is-reco{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),var(--e2-sh)} html[data-theme="light"] .bs-tier[data-tier="growth"].is-reco{ box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 26%,transparent),var(--e3-sh),0 0 46px color-mix(in srgb,var(--violet) 20%,transparent)} @media(hover:hover){html[data-theme="light"] .bs-tier:hover{border-color:var(--accent)}} /* label / price / setup */ .bs-tier .t-flag{font-family:var(--g-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);font-weight:700;margin-bottom:8px;min-height:16px} /* growth flag: darkened --violet fails AA on the dark glass card → brighter in dark, darker on white */ .bs-tier[data-tier="growth"] .t-flag{color:var(--violet-bright)} html[data-theme="light"] .bs-tier[data-tier="growth"] .t-flag{color:var(--violet)} .bs-tier .t-name{font-size:19px;font-weight:700;color:var(--ink);margin:2px 0} .bs-tier .t-price{font-size:34px;font-weight:700;color:var(--gold);margin:6px 0 2px;letter-spacing:-.01em} .bs-tier .t-price span{font-size:15px;color:var(--ink-mute);font-weight:600} .bs-tier .t-setup{font-family:var(--g-mono);font-size:12.5px;color:var(--ink-mute);margin-bottom:18px} /* ✓-in-circle bullets (donor) */ .bs-tier ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:11px;flex:1;align-content:start} .bs-tier li{position:relative;padding:0 0 0 28px;font-size:14.5px;color:var(--g-read)} .bs-tier li::before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%; background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:800;line-height:18px;text-align:center} /* accent CTA pill; Growth = filled violet (darkened for AA white text) */ .bs-tier .bs-cta{margin-top:auto;width:100%;border-radius:999px; background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)} .bs-tier .bs-cta:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent)} .bs-tier[data-tier="growth"] .bs-cta{background:color-mix(in srgb,var(--violet) 78%,#000);color:#FFFFFF;border-color:transparent} .bs-tier[data-tier="growth"] .bs-cta:hover{background:color-mix(in srgb,var(--violet) 90%,#000);box-shadow:0 0 30px var(--accent-glow)} /* light theme CTA pills — accent-soft-on-white failed AA (and bs-cta-cyan forced white text onto a near-white tint = ~1.2:1). Outline pill on white + a darkened accent text that clears 4.5:1; Growth stays the filled violet. */ html[data-theme="light"] .bs-tier .bs-cta, html[data-theme="light"] .bs-tier .bs-cta-cyan{background:transparent; color:color-mix(in srgb,var(--accent) 82%,#000);border-color:var(--accent-line)} html[data-theme="light"] .bs-tier .bs-cta:hover, html[data-theme="light"] .bs-tier .bs-cta-cyan:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:var(--accent)} html[data-theme="light"] .bs-tier[data-tier="growth"] .bs-cta{background:color-mix(in srgb,var(--violet) 78%,#000);color:#FFFFFF;border-color:transparent} @media(max-width:900px){.bs-tier[data-tier="growth"],.bs-tier.is-reco,.bs-tier:hover{transform:none}} /* ============================================================ HEAR AVA — real-call audio clips (Run 1.6 · additive) Native