@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&display=swap');

/* ==================================================================
   Site-wide typography default (2026-10-04): the founders-page font
   styles become the site default. Geist replaces Inter (via --sans and
   body), and display headings take the founders light-weight treatment
   (300 + tight tracking). Explicit selectors only: the comic masthead
   (Oswald), booking (Poppins) and results (Source Serif 4) keep their
   own faces. Loaded by every frame page; the v18 copy wins where both
   load (identical rules).
   ================================================================== */
:root { --sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#hero-h, .dest-h1, .legal h1, .founders-h1, .page-head h1 {
  font-weight: 300;
  letter-spacing: -0.03em;
}
.wwd h2, .rbs h2, .lab .lab__wrap h2, .brain h2, .final-cta h2 {
  font-weight: 300;
  letter-spacing: -0.025em;
}
.faq .faq-heading {
  font-weight: 300;
  letter-spacing: -0.025em;
}
/* v17: Lumina demos + cosmetic revisions (Sept 16, 2026). */
/* ---- hero: no sun filter; gradient comes off the hero text ---- */
.solar-scene .hero-sun { filter:none !important; }
@media(max-width:700px){
 
 .solar-scene .hero-sun { filter:none !important; }
}

/* ---- navbar: fully transparent until scroll ---- */
.nav {
 background:transparent !important;
 backdrop-filter:none;
 border-bottom-color:transparent !important;
}
.nav.is-stuck {
 background:linear-gradient(180deg,rgba(4,6,12,.86),rgba(4,6,12,.34)) !important;
 border-bottom-color:var(--line) !important;
 backdrop-filter:blur(10px);
}

/* ---- what we do: always-open boxes ---- */
.wwd-row summary { cursor:default; pointer-events:none; }
.wwd-row summary .chev { display:none; }
.wwd-row p { padding:0 16px 16px; }
.wwd-row { background:rgba(255,255,255,.025); }
.wwd-row[open] { background:rgba(94,234,212,.03); }
.wwd-row .chev { pointer-events:none; }

/* ---- report book: squared hardcover, spine out, reflective floor ---- */
/* box-reflect lives on the wrapper: it is a grouping property and would flatten preserve-3d on the body. */
.book { perspective:1500px; }
.book__body { border-radius:2px !important; transform:rotateY(24deg) !important; }
.book__cover { border-radius:2px; padding-left:46px !important; }
.book__spine {
 left:0; right:auto; width:30px; border-radius:0;
 transform:translateZ(1px);
 background:linear-gradient(90deg,#0a0e14 0%,#141c28 55%,#1f2937 100%);
 display:flex; flex-direction:column; justify-content:space-between; align-items:center;
 padding:16px 0;
 box-shadow:1px 0 0 rgba(255,190,200,.12);
}
.book__spine-title {
 writing-mode:vertical-rl; text-orientation:mixed;
 font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
 color:rgba(238,244,250,.92); white-space:nowrap;
}
.book__spine-foot {
 writing-mode:vertical-rl; font-size:8px; letter-spacing:.3em; text-transform:uppercase;
 color:rgba(238,244,250,.6);
}
.book__floor {
 position:relative; height:110px; margin-top:8px; pointer-events:none;
 background:radial-gradient(ellipse 46% 100% at 50% 0%,rgba(148,205,255,.14) 0%,rgba(94,234,212,.05) 38%,transparent 72%);
}
.book__floor::before {
 content:""; position:absolute; left:12%; right:12%; top:-2px; height:1px;
 background:linear-gradient(90deg,transparent,rgba(170,215,255,.35),transparent);
}
.book:focus-within .book__body { transform:rotateY(17deg) translateY(-5px) scale(1.01); }

/* ---- SOS Brain: reverted copy, enhanced hypersphere ---- */
.brain { text-align:center; }
.brain h2 { text-align:center; max-width:none; }
.brain__tagline { margin:18px auto 0; max-width:none; }
.brain__mount { max-width:min(640px,100%); margin:clamp(28px,4vw,44px) auto 0; transform:scale(1.15); transform-origin:top center; }
.brain__mount sos-brain::part(canvas) { filter:drop-shadow(0 0 30px rgba(94,234,212,.32)) drop-shadow(0 0 70px rgba(94,234,212,.14)) saturate(1.3) brightness(1.1); }
@media(max-width:860px){ .brain__mount { transform:scale(1.06); } }

/* ---- FAQ: unique icons replace the ring ---- */
.faq-card::after { content:none; }
.faq-card__icon { position:absolute; top:18px; right:20px; color:var(--teal); opacity:.85; z-index:1; }
.faq-card summary { padding-top:24px; }
.faq-card .chev { display:none; }

/* ---- ticker: real brand marks ---- */
.marquee__item svg.marquee__logo { height:22px; width:auto; color:#cfdbe4; }

/* ---- what we do: always-open boxes ---- */
.wwd-box { border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); padding:16px; }
.wwd-box__title { display:block; font-weight:600; color:var(--ink); font-size:15px; margin-bottom:8px; }
.wwd-box p { margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.wwd .wwd-rows { display:grid; gap:10px; margin-top:22px; grid-auto-rows:1fr; }
.wwd .wwd-rows .wwd-box { height:100%; }

/* ---- systems lab: live demo area ---- */
.lab-demos { padding-top:0; }
.lab-demos .lab-section__title { margin-bottom:10px; }
.lab-demos__sub { color:var(--ink-2); font-size:clamp(15px,1.4vw,17px); margin:0 0 26px; }
.demo-tabs { display:flex; gap:10px; flex-wrap:wrap; }
.demo-tab {
 cursor:pointer; border:1px solid rgba(94,234,212,.28); border-radius:12px;
 background:rgba(255,255,255,.02); color:var(--ink-2);
 padding:14px 20px; font-size:15px; font-weight:600; min-height:48px;
 transition:border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.demo-tab:hover { border-color:rgba(94,234,212,.55); color:var(--ink); }
.demo-tab[aria-selected="true"] { border-color:var(--teal); color:var(--ink); background:rgba(94,234,212,.08); box-shadow:0 0 22px rgba(94,234,212,.12); }
.demo-panel { margin-top:20px; border:1px solid rgba(148,176,200,.14); border-radius:14px; background:rgba(6,11,20,.55); padding:clamp(14px,2vw,24px); }
.demo-mount { min-height:320px; display:flow-root; }
.demo-mount[hidden] { display:none; }
.demo-stub { margin:0; padding:clamp(28px,6vw,64px) 20px; text-align:center; color:var(--ink-2); font-size:15px; border:1px dashed rgba(148,176,200,.3); border-radius:10px; }

/* ---- galactic starfield: fully opaque, brighter, bloomed ---- */
.hero .orbit-stars { opacity:1; filter:drop-shadow(0 0 2.5px rgba(186,219,255,.6)); }
.orbit-stars circle { fill:#ffffff; }

/* ---- GoHighLevel raster icon (official app mark) ---- */
.marquee__item img.marquee__logo { height:22px; width:auto; border-radius:5px; }

/* ---- hero headline weight ---- */
#hero-h { font-weight: 600; }

/* ---- RBS page fixes (Sept 19): kill the double top gap (dest-main 64px + section ~120px stacked); spine translateZ(1px) projected its top edge above the cover under rotateY(24deg), reading as two overlapping edges ---- */
.dest-main .rbs { padding-top: 0; }
.book__spine { transform: none; }

/* ---- book floor: it was the only in-flow child inside the aspect-ratio-fixed .book, so it painted its wash + 1px highlight line over the TOP of the cover face (horizontal line at a different angle than the rotated cover edge). Pin it below the book where it belongs. ---- */
.book__floor { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; }

/* ---- RBS page (Sept 19): drop the main padding-block entirely, drop the book 80px ---- */
.dest-main:has(> .rbs) { padding-block: 0; }
.rbs .book { margin-top: 80px; }

/* founders: Shant's box links out (keep the dest-person look inside the anchor) */
.dest-person-link { display: block; text-decoration: none; color: inherit; }

/* ---- RBS highlighted stat quote (CallRail, verbatim from the published PDF) ---- */
.rbs-quote { max-width: 760px; margin: 50px auto 0; padding: 0 24px 26px; text-align: center; }
.rbs-quote blockquote { margin: 0; }
.rbs-quote p { margin: 0; font-size: clamp(21px, 2.7vw, 31px); line-height: 1.35; color: #e9eef6; font-weight: 600; }
.rbs-quote figcaption { margin-top: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(233,238,246,.5); }

/* ---- legal pages (terms/privacy): California boilerplate prose ---- */
.legal-wrap { max-width: 760px; text-align: left; }
.legal-body h2 { font-size: clamp(19px, 2.3vw, 25px); margin: 34px 0 10px; color: #e9eef6; }
.legal-body p, .legal-body li { color: #b7c7cf; font-size: 15px; line-height: 1.7; margin: 10px 0; }
.legal-body ul { padding-left: 22px; }
.legal-body strong { color: #e9eef6; }
.legal-body a { color: #5eead4; }

/* ---- reflection optics (Sept 20): the floor must mirror the book's slanted bottom edge ---- */
.book__floor { background: radial-gradient(ellipse 46% 100% at 48% 0%,rgba(148,205,255,.14) 0%,rgba(94,234,212,.05) 38%,transparent 72%); }
.book__floor::before { transform: rotate(-4.62deg); }

/* ---- reflection anchor (Sept 20): the rotated body projects 13.1px BELOW the .book border box, so the box-reflect flip line + the floor sat above the book's true bottom edge. Anchor both to the real edge. ---- */

.book__floor { top: calc(100% + 13px); }

/* ---- reflection v2: true slanted mirror ----
   box-reflect mirrored across a HORIZONTAL line, so its seam zig-zagged against the -4.62deg
   contact edge; a duplicate book mirrored across the CONTACT LINE itself
   (rotate(-4.62) scaleY(-1) rotate(4.62) about the bottom-edge midpoint at 47.9% 100%)
   keeps the reflected top edge continuous with the incident bottom edge. ---- */
.book { -webkit-box-reflect: none; }
.book-mirror {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transform: rotate(-4.62deg) scaleY(-1) rotate(4.62deg);
  transform-origin: 47.9% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.3), transparent 60%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.3), transparent 60%);
}
.book-mirror .book__body { box-shadow: none; }
.book__floor { top: 100%; margin-top: 0; }

/* ---- announcement bar (handoff item 1, 2026-09-24) ---- */
.sos-announce {
  display: block;
  background: #f4f1ea;
  color: #141a26;
  padding: 8px 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.sos-announce__track { display: inline-flex; width: max-content; animation: sos-announce-ticker 40s linear infinite; }
.sos-announce__seq { display: inline-flex; align-items: center; }
.sos-announce__item { padding: 0 22px; }
.sos-announce__dot { opacity: 0.55; }
.sos-announce:hover .sos-announce__track { animation-play-state: paused; }
@keyframes sos-announce-ticker { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .sos-announce { font-size: 12.5px; }
  .sos-announce__item { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sos-announce__track { animation: none; }
}
/* ============================================================
   SOS Agent widget — handoff addendum (appended to v17.css)
   Bottom-right placement, larger toggle, branded avatar badge,
   welcome bubble (.sos-agent-hello). Additive only.
   ============================================================ */

/* --- 1. Anchor the whole widget bottom-right --- */
.site-chat {
  left: auto;
  right: clamp(12px, 2.4vw, 26px);
  justify-items: end;
}

/* --- 2. Bigger, more prominent toggle --- */
.site-chat__toggle {
  gap: 10px;
  padding: 13px 20px;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--ink);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
  transition: border-color 200ms var(--ease), color 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
.site-chat__toggle:hover,
.site-chat__toggle:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal-glow), 0 0 22px var(--teal-glow);
}

/* --- 3. Branded avatar: circular "SOS" monogram badge ---
   (logo-orbital-a.webp is 1200x400 wide wordmark — a circular img
   crop would look wrong, so we render an intentional monogram
   badge in the dot slot instead.) */
.site-chat__dot {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--teal), var(--teal-2));
  color: #04302c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 0 10px var(--teal-glow);
}
.site-chat__dot::before { content: "SOS"; }

/* --- 4. Welcome bubble (child of #site-chat, added by teammate) --- */
.sos-agent-hello {
  order: -2; /* above the panel (order:-1) so nothing overlaps */
  position: relative;
  max-width: 260px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(7, 11, 19, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.95);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  animation: sos-hello-in 380ms var(--ease) both;
}
.sos-agent-hello::after { /* tail pointing down toward the toggle */
  content: "";
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: rgba(7, 11, 19, 0.94);
}
.sos-agent-hello__text { color: var(--ink-2); }
.sos-agent-hello__text strong { color: var(--teal); font-weight: 600; }
.sos-agent-hello__close {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.sos-agent-hello__close:hover { color: var(--ink); }
@keyframes sos-hello-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 5. Mobile: never block CTAs/forms/nav --- */
@media (max-width: 700px) {
  .site-chat {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .site-chat__toggle {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
    max-height: 52px;
  }
  .site-chat__dot { width: 20px; height: 20px; font-size: 7px; }
  .site-chat__panel {
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100dvh - 140px);
    margin-bottom: env(safe-area-inset-bottom);
  }
  .sos-agent-hello { max-width: min(250px, calc(100vw - 48px)); }
}

/* --- 6. Reduced motion: no entrance animation, no glide --- */
@media (prefers-reduced-motion: reduce) {
  .sos-agent-hello { animation: none; }
  .site-chat__toggle,
  .site-chat__toggle:hover { transition: none; }
}

/* ---- lab-brief treatment (handoff item 8, 2026-09-24) ---- */
.lab-brief { display: grid; gap: 10px; margin: 18px 0 6px; }
.lab-brief__line {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; margin: 0;
  border-left: 2px solid rgba(94, 234, 212, 0.55);
  background: rgba(7, 11, 19, 0.5);
  border-radius: 0 10px 10px 0;
  font-size: 15.5px; color: var(--ink-2);
}
.lab-brief__q, .lab-brief__num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 6px;
  border: 1px solid rgba(94,234,212,.35); border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--teal); background: rgba(94,234,212,.08);
}
.lab-brief__line--go { color: var(--ink); font-weight: 600; }
.lab-brief__line--go span { color: var(--teal); }
@media (max-width: 700px) { .lab-brief__line { font-size: 14px; } }

/* ---- FAQ accordion (handoff item 11, 2026-09-24) ---- */
.faq__cards { display: block; grid-template-columns: none; }
.faq-card {
  background: none; border: 0; border-radius: 0; padding: 0;
  border-bottom: 1px solid rgba(148, 176, 200, 0.18);
}
.faq-card:last-child { border-bottom: 1px solid rgba(148, 176, 200, 0.12); }
.faq-card summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 4px; list-style: none; cursor: pointer;
  font-size: 16px; color: var(--ink);
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary:hover .faq-card__q { color: var(--teal); }
.faq-card__icon, .faq-card__num { display: none; }
.faq-card .chev { flex: 0 0 auto; transition: transform 220ms var(--ease); color: var(--teal); }
.faq-card[open] .chev { transform: rotate(90deg); }
.faq-card__a { margin: 0 0 16px; padding: 0 4px; max-width: 68ch; color: var(--ink-2); }
@media (max-width: 700px) {
  .faq-card summary { padding: 14px 2px; font-size: 15px; }
}

/* ---- footer row rebalance (handoff item 12, 2026-09-24) ---- */
.footer .footer__row { justify-content: center; }
.footer .brand { display: none; }
.footer .footer__links { flex: 0 1 auto; justify-content: center; gap: 14px 22px; }
@media (max-width: 700px) {
  .footer__row { justify-content: center; }
  .footer__links { justify-content: center; }
}

/* ============================================================
   What We Do — flip cards (appended to website-v17/v17.css)
   Uses site tokens: --teal --ink --ink-2 --ink-3 --line --line-2 --ease --radius
   ============================================================ */

.wwd-flip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

/* --- card shell: fixed footprint, both faces share it --- */
.wwd-card {
  position: relative;
  aspect-ratio: 3 / 5;
  min-height: 440px;
  perspective: 1400px;
  cursor: pointer;
  border-radius: var(--radius);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.wwd-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.wwd-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.65s var(--ease);
}
.wwd-card.is-flipped .wwd-card__inner { transform: rotateY(180deg); }

.wwd-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 11, 19, 0.9);
  padding: 24px 22px;
  overflow: hidden;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.wwd-card:hover .wwd-card__face,
.wwd-card:focus-visible .wwd-card__face {
  border-color: rgba(94, 234, 212, 0.45);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.12), 0 0 24px rgba(94, 234, 212, 0.10);
}
.wwd-card__face--back {
  transform: rotateY(180deg);
  background: rgba(7, 11, 19, 0.94);
}

/* --- front --- */
.wwd-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(94, 234, 212, 0.06);
  color: var(--teal);
  flex: 0 0 auto;
}
.wwd-card__icon svg { width: 32px; height: 32px; }

.wwd-card__cat {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.wwd-card__lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}
.wwd-card__lines > span {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.wwd-card__lines > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--teal);
  border-radius: 50%;
  opacity: 0.85;
}

.wwd-card__summary {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  border-top: 1px solid var(--line);
}

.wwd-card__arrow {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--teal);
  background: rgba(7, 11, 19, 0.9);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.wwd-card:hover .wwd-card__arrow {
  background: rgba(94, 234, 212, 0.12);
  border-color: var(--teal);
}
.wwd-card__arrow svg { width: 16px; height: 16px; }

/* --- back --- */
.wwd-card__back-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.wwd-card__back-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.wwd-card__return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--teal);
  flex: 0 0 auto;
}
.wwd-card__return svg { width: 14px; height: 14px; }

.wwd-card__svc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.wwd-card__svc:last-of-type { border-bottom: 0; }
.wwd-card__svc strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.wwd-card__svc > span {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.wwd-card__cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.wwd-card__cta:hover { text-decoration: underline; }

/* --- responsive --- */
@media (max-width: 1100px) {
  .wwd-flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwd-card { aspect-ratio: 1 / 1; min-height: 480px; }
}
@media (max-width: 700px) {
  .wwd-flip {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .wwd-card { aspect-ratio: auto; height: 540px; min-height: 540px; }
}

/* --- reduced motion: no 3D flip animation, instant crossfade --- */
@media (prefers-reduced-motion: reduce) {
  .wwd-card__inner { transition: none; }
  .wwd-card__face { transition: opacity 0.01s linear; }
  .wwd-card.is-flipped .wwd-card__face--front { opacity: 0; }
  .wwd-card:not(.is-flipped) .wwd-card__face--back { opacity: 0; }
}

/* ---- homepage handoff 2026-09-25: lab stack + FAQ heading + chevrons ---- */
#systems-lab .wrap.lab__grid { display: block; }
.lab__head { margin-bottom: 10px; }
.lab__head .lede { max-width: 60ch; color: var(--ink-2); }
#systems-lab .lab__cta { margin-top: 24px; }
.faq-heading { font-size: clamp(34px, 5vw, 52px); margin: 0 0 6px; }
.faq__before { color: var(--ink-3); font-size: 15px; margin: 0 0 18px; }
.faq-card .chev { transform: rotate(90deg); }            /* collapsed: points down */
.faq-card[open] .chev { transform: rotate(270deg); }     /* expanded: points up */

/* ---- QA fixes (2026-09-25 homepage handoff) ---- */
/* flip card: aspect-ratio + min-height transferred min-height into a min-width
   (480px) that overflowed the 2-col track at tablet widths — use fixed height */
@media (max-width: 1100px) {
  .wwd-card { aspect-ratio: auto; height: 480px; }
}
/* FAQ chevron: restore visibility (old rule hides it) + down/up rotation */
.faq-card .chev { display: block; transform: rotate(90deg); }
.faq-card[open] .chev { transform: rotate(270deg); }
/* 2px residual horizontal drift from the hero orbit at tablet widths
   (overflow-x: clip avoids the sticky-nav break that overflow:hidden causes) */
html { overflow-x: clip; }

/* ---- SOS Agent back to bottom-left + open-fix (2026-09-25 user request) ---- */
.site-chat {
  left: clamp(12px, 2.4vw, 26px);
  right: auto;
  justify-items: start;
}
.sos-agent-hello::after { right: auto; left: 22px; }
@media (max-width: 700px) {
  .site-chat {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }
}

/* ticker size-down (user request, 2026-09-25) */
.sos-announce { padding: 5px 0; font-size: 12px; line-height: 1.35; }
.sos-announce__item { padding: 0 18px; }
@media (max-width: 700px) {
  .sos-announce { font-size: 11px; padding: 4px 0; }
}


/* ---- design review quick wins (2026-09-25) ---- */
/* #1 dim the hero sun: white headline text over the full-brightness core lost contrast */
.hero-sun { filter: brightness(0.82) saturate(0.9); }
/* #5 flip cards: real checkmarks instead of hollow circles */
.wwd-card__lines > span::before {
  content: "\2713";
  width: auto; height: auto;
  border: 0; border-radius: 0; background: none;
  color: var(--teal); font-weight: 700; font-size: 11px;
  top: 0; opacity: 1;
}
.wwd-card__hint {
  display: block; text-align: center;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-3); margin-top: 8px;
}
.wwd-card__face--front .wwd-card__arrow { margin-top: 4px; }
/* #8 ticker: fade the viewport edges instead of hard-clipping mid-word */
.sos-announce {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* #11 marquee: single-tint logos, color returns on hover / at center emphasis */
.marquee__logo { filter: grayscale(1) opacity(0.72); transition: filter 300ms ease; }
.marquee__item:hover .marquee__logo,
.marquee__item.is-centered .marquee__logo { filter: none; }
/* #9 mobile: collapse the chat pill to a small orb */
@media (max-width: 700px) {
  .site-chat__toggle {
    width: 48px; height: 48px; padding: 0;
    font-size: 0; gap: 0; justify-content: center;
  }
  .site-chat__toggle .site-chat__dot { width: 22px; height: 22px; font-size: 7px; }
}
/* the Sept-16 build hardened the sun at filter:none !important — match it */
.solar-scene .hero-sun { filter: brightness(0.82) saturate(0.9) !important; }
/* ---------- Large-display scaling (2026-10-02): sub-pages >=1600px ---------- */
@media (min-width: 999999px) {
  .wrap {
    max-width: min(calc(1180px + (100vw - 1600px) * 0.85), 1800px);
  }
  /* .wrap (this layer) would otherwise out-cascade website.css's .dest-wrap cap —
     re-pin the reading/form containers, then widen ONLY the RBS dest section */
  .dest-wrap {
    max-width: 760px;
  }
  .legal-wrap {
    max-width: 760px;
  }
  /* RBS dest section (quote + gap cards + diagnostic card) grows moderately; contact/legal keep 760px reading width */
  .dest-main:has(> .rbs) .dest-wrap {
    max-width: min(calc(760px + (100vw - 1600px) * 0.55), 1140px);
  }
  .dest-h1 {
    font-size: min(calc(41.6px + (100vw - 1600px) * 0.018), 72px);
  }
  .legal h1 {
    font-size: min(calc(52px + (100vw - 1600px) * 0.02), 84px);
  }
  .rbs h2 {
    font-size: min(calc(54px + (100vw - 1600px) * 0.022), 92px);
  }
  .rbs-quote {
    max-width: min(calc(760px + (100vw - 1600px) * 0.35), 1020px);
  }
  /* lab page: lab-main is its own 1180px container */
  .lab-main {
    max-width: min(calc(1180px + (100vw - 1600px) * 0.85), 1800px);
  }
  .brain-wing {
    max-width: min(calc(1180px + (100vw - 1600px) * 0.85), 1800px);
  }
  .lab-hero {
    max-width: min(calc(760px + (100vw - 1600px) * 0.6), 1240px);
  }
  .lab-hero h1 {
    font-size: min(calc(36.8px + (100vw - 1600px) * 0.018), 64px);
  }
}
/* Addendum (2026-10-04): lab.css scopes body.lab-body (0,1,1) which beats the
   plain body rule above regardless of load order, and the lab page's own hero
   heading needs the same founders treatment. */
body.lab-body { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.lab-hero h1 { font-weight: 300; letter-spacing: -0.03em; }

/* Addendum 2 (2026-10-04): the brain page's h1 carries an inline font-size only,
   so give it the same founders light treatment as the other sub-page h1s. */
#brain-h { font-weight: 300; letter-spacing: -0.03em; }

/* Addendum 3 (2026-10-04): the founders heading COLOR treatment site-wide.
   .accent-teal is the site's highlight-span convention (hero, wwd, lab, final
   CTA, brain); it now renders the founders gradient (pale #CFE9F5 -> teal
   #3FDCC7) instead of solid teal. Headings on light surfaces keep plain ink. */
.accent-teal {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #CFE9F5 0%, #3FDCC7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* flat render: the hero's readability shadow paints through the transparent
     gradient glyphs and reads as embossed */
  text-shadow: none;
}

/* Hero readability (2026-10-04): the gradient line needs its drop shadow back,
   but text-shadow paints THROUGH background-clip:text transparency (the emboss
   artifact). filter:drop-shadow shadows the rendered pixels instead, so the
   shadow sits behind the gradient glyphs like a normal drop shadow. */
#hero-h .accent-teal { filter: drop-shadow(4px 6px 6px #000); }
@media (min-width: 1600px) {
  /* scale point 1600 (2026-10-04 revision): 1080 zoomed too aggressively and the
     over-zoom wedge broke the fit; below 1600 keeps the base layout, above it the
     page zooms proportionally (2496 -> 1.56x, 3440 -> 2.15x). overflow-x: clip
     absorbs the classic-scrollbar wedge (100vw includes the scrollbar, the layout
     width does not). */
  html { zoom: calc(100vw / 1600px); overflow-x: clip; }
}
/* ==================================================================
   CANONICAL BUTTON SYSTEM (2026-10-06) — user directive: buttons
   site-wide (including the global header) squared and matching the
   founders closing "Let's Build" button (.fv19-btn-outline: 4px
   corners, 1px teal border, transparent fill, uppercase, wide
   tracking, teal hover tint). Hue identities keep their accent.
   Advisor round applied: white focus ring, dark backing for hero
   buttons over the bright sun art.
   ================================================================== */
.btn,
.nav__cta {
  border-radius: 4px;
  background: transparent;
  border: 1px solid #3FDCC7;
  color: #F2F5F8;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  min-height: 54px;
  padding: 0 36px;
  box-shadow: none;
  gap: 14px;
}
.btn:hover,
.nav__cta:hover {
  background-color: rgba(63, 220, 199, 0.12);
  color: #FFFFFF;
  transform: none;
  box-shadow: none;
}
.btn--burgundy { border-color: #E5384F; }
.btn--burgundy:hover { background-color: rgba(229, 56, 79, 0.14); }
.btn--ghost,
.btn--light { border-color: #3FDCC7; }
.btn--tbd { border-style: dashed; }
.nav__cta { min-height: 42px; padding: 0 24px; font-size: 12px; letter-spacing: 0.22em; }
.btn:focus-visible,
.nav__cta:focus-visible { outline: 2px solid #F2F5F8; outline-offset: 2px; }
/* Homepage hero buttons sit over the bright sun art: translucent dark backing */
.hero__actions .btn { background-color: rgba(5, 11, 22, 0.4); }
.hero__actions .btn:hover { background-color: rgba(13, 34, 46, 0.62); }

/* 2026-10-06: primary buttons are SOLID teal again (user directive: the hero
   "Show Me What I'm Missing" keeps the site's original teal fill; the squared
   4px corners stay). Hero-specific rules beat the hero dark-backing rule. */
.btn--primary {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-2) 100%);
  border-color: transparent;
  color: #032b28;
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
  color: #032b28;
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -14px rgba(94, 234, 212, 0.75);
}
.hero__actions .btn--primary { background: linear-gradient(180deg, var(--teal) 0%, var(--teal-2) 100%); }
.hero__actions .btn--primary:hover { background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%); }

/* ==================================================================
   HEADER CONSISTENCY (2026-10-06, user directive): nav links match the
   Let's Build button's font treatment exactly; every header control
   outline squared to 4px (nav pills, Explore dropdown, mobile menu).
   ================================================================== */
.nav__link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 4px;
}
.dropdown__menu { border-radius: 4px; }
.dropdown__menu a { border-radius: 4px; }
.mobile-menu-toggle { border-radius: 4px; }
.mobile-menu { border-radius: 4px; }
.mobile-menu a { border-radius: 4px; }

.mobile-menu:not([hidden]) { border-radius: 4px; }

/* Advisor round: mobile menu panel fully opaque (0.98 let light page
   headlines bleed through behind the items). */
.mobile-menu:not([hidden]) { background: rgba(8, 20, 26, 1); }

/* ==================================================================
   MOBILE FOOTER (2026-10-06, user directive: more appealing on mobile):
   centered column layout, comfortable tap targets, separators hidden,
   the copyright on its own quiet line. Specificity-boosted selectors
   (.footer .footer__row) so no page-local sheet can override.
   ================================================================== */
@media (max-width: 700px) {
  .footer { padding-block: 46px 42px; }
  .footer .footer__row {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .footer .footer__links {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .footer .footer__links .sep { display: none; }
  .footer .footer__links a {
    padding: 11px 18px;
    font-size: 13px;
    letter-spacing: 0.22em;
    color: var(--ink-2);
  }
  .footer .footer__links a:hover { color: var(--ink); }
  .footer .footer__links span:not(.sep) {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-3);
  }
}


/* ---------- 2026-10-06: global scale-down ~18% on non-mobile displays (user directive) ----------
   Mirrors the v18.css block for pages that do not load v18 (systems-lab, brain, terms, privacy).
   vh does not compensate for zoom, so viewport-filling heroes divide by the zoom factor. */
@media (min-width: 701px) {
  body { zoom: 0.82; }
  .hero { min-height: calc(min(92vh, 860px) / 0.82); }
}