/* ============================================================
   docsdocs — marketing site (v2)
   Art direction: Editorial × Soft-Futurism, trust-forward
   Type: General Sans (Swiss neo-grotesk, unified)
   Palette: white base · periwinkle wash · indigo · ink · navy dark · amber x-ray
   ============================================================ */

:root {
  --periwinkle: #eaeeff;
  --periwinkle-2: #dfe5ff;
  --indigo: #3b4fe0;
  --indigo-700: #2c3bc4;
  --indigo-300: #9aa6f5;
  --ink: #0b1020;
  --ink-70: #3c4považ; /* replaced below */
  --ink-60: #4a5066;
  --ink-40: #7a8096;
  --line: #e9ebf4;
  --line-2: #eef0f7;
  --white: #ffffff;
  --paper: #fbfcff;
  --navy: #0a0e1f;
  --navy-2: #11162c;
  --amber: #3d63a4;
  --amber-2: #6f93cc;
  --mint: #19b886;
  --rose: #ff5b73;

  --font: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sharp: 8px;
  --r-mid: 14px;
  --r-soft: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  --maxw: 1200px;
  --gut: clamp(20px, 4.5vw, 56px);

  --shadow-1: 0 1px 2px rgba(11,16,32,.04), 0 8px 24px -16px rgba(11,16,32,.28);
  --shadow-2: 0 2px 4px rgba(11,16,32,.04), 0 24px 60px -28px rgba(28,38,110,.32);
  --shadow-float: 0 30px 80px -34px rgba(28,38,110,.46);
}
:root { --ink-70: #3c4256; }
/* clinical (muted, not poppy) finding palette for tooth/anomaly annotations */
:root {
  --f-caries: #e0a274;
  --f-calc:   #93c0a8;
  --f-bone:   #d597a1;
  --f-incip:  #ecc6a6;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Constrain the initial containing block so a too-wide element can't force the
   whole page wider than the phone (which made mobile browsers zoom everything
   out to ~0.2x). Use overflow-x: CLIP, not hidden — `hidden` makes html a scroll
   container and breaks `position: sticky` (the room-by-room scroll tour, the
   nav). `clip` caps the width the same way without that side effect. */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
/* Keep the page's top layer (the html element behind the sticky nav and any
   overscroll) the SAME color as the page body, per theme — no stray white band
   above the nav. */
html:has(body.theme-sand) { background: #eef1f7; }
html:has(body.theme-sage) { background: #f6f3ea; }
html:has(body.theme-blue) { background: #070a16; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--white);
  font-weight: 400; line-height: 1.55; letter-spacing: -0.011em;
  /* NO overflow-x here. The clip lives in the dedicated rule above; `hidden`
     would win the cascade (this rule comes later), turn body into its own
     scroll container (overflow-y computes to auto), and break every
     position: sticky on the page — the room-by-room tour un-pins into an
     endless empty green scroll. */
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--indigo); color: #fff; }

/* ---------- type scale (line-heights leave room for descenders) ---------- */
.display { font-weight: 600; letter-spacing: -0.038em; line-height: 1.05; font-size: clamp(40px, 5.6vw, 80px); }
.h1 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 500; letter-spacing: -0.033em; line-height: 1.12; }
.h2 { font-size: clamp(25px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; }
.h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.lead { font-size: clamp(16.5px, 1.35vw, 20px); color: var(--ink-60); line-height: 1.55; font-weight: 400; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section-pad { padding-block: clamp(64px, 8vw, 116px); }
.section-tight { padding-block: clamp(44px, 5vw, 72px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s, border-color .18s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 10px 26px -12px rgba(59,79,224,.75); }
.btn-primary:hover { background: var(--indigo-700); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-40); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); }
.btn-light { background: #fff; color: var(--ink); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- NAV + mega dropdown ---------- */
.nav { position: sticky; top: 14px; z-index: 80; max-width: min(1240px, calc(100% - 28px)); margin: 14px auto 0; border-radius: 18px;
  background: rgba(238,241,247,.72); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(40,52,74,.12); box-shadow: 0 16px 44px -22px rgba(40,52,74,.35);
  transition: background .25s, box-shadow .25s, border-color .25s; }
.nav.scrolled { background: rgba(238,241,247,.94); border-color: #dce0ee; box-shadow: 0 18px 50px -22px rgba(40,52,74,.45); }
.nav-inner { display: flex; align-items: center; height: 62px; gap: 0; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 20px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 30px; }
.nav-links > a, .nav-item > button {
  font-size: 14.5px; color: var(--ink-70); font-weight: 500; padding: 9px 13px; border-radius: 10px;
  background: none; border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s;
}
.nav-links > a:hover, .nav-item > button:hover { color: var(--ink); background: var(--periwinkle); }
.nav-item { position: relative; }
.nav-item > button .chev { transition: transform .2s; font-size: 10px; opacity: .6; }
.nav-item:hover > button .chev { transform: rotate(180deg); }
.tag-new { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--indigo); background: var(--periwinkle); padding: 2px 6px; border-radius: var(--r-pill); margin-left: 5px; vertical-align: middle; }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-cta .signin { font-size: 14.5px; color: var(--ink-70); font-weight: 500; padding: 9px 6px; }
.nav-cta .signin:hover { color: var(--ink); }
@media (max-width: 1040px){ .nav-links { display: none; } }

/* ---------- mobile nav: hamburger + dropdown ---------- */
.nav-burger { display: none; }
.nav-mobile { display: none; }
@media (max-width: 900px) {
  .nav-cta { display: none; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px; margin-left: auto; flex: none;
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-burger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
  .nav.on-dark .nav-burger span { background: #fff; }
  .nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 24px 60px -24px rgba(40,52,74,.45);
    padding: 8px;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .3s ease, opacity .25s ease, visibility .25s;
  }
  .nav.menu-open .nav-mobile { max-height: min(80vh, 560px); overflow-y: auto; opacity: 1; visibility: visible; }
  .nav-mobile a { padding: 13px 14px; border-radius: 11px; font-size: 16px; font-weight: 500; color: var(--ink); }
  .nav-mobile a:active, .nav-mobile a:hover { background: var(--periwinkle); }
  .nav-mobile-cta { margin-top: 6px; background: var(--indigo); color: #fff !important; text-align: center; font-weight: 600; }
}

/* mega menu — Archy-style: interactive-demo feature panel + module cards */
.mega {
  position: absolute; top: calc(100% + 8px); left: 0; transform: translateY(8px);
  width: min(840px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft);
  box-shadow: var(--shadow-float); padding: 14px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 90;
}
/* Transparent bridge spanning the 8px gap between button and dropdown so the
   cursor never crosses a dead zone that drops :hover and closes the menu. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }
.nav-item:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { display: grid; grid-template-columns: 268px 1fr; gap: 14px; }
/* Solutions menu with the feature panel removed — cards span the full width */
.mega-inner--cards-only { grid-template-columns: 1fr; }

/* left feature panel */
.mega-feature { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 232px; padding: 18px; border-radius: var(--r-mid); overflow: hidden; color: #fff; background: linear-gradient(158deg, var(--indigo), var(--indigo-700)); box-shadow: 0 20px 44px -22px var(--indigo); }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 90% at 100% 0%, rgba(255,255,255,.20), transparent 55%); pointer-events: none; }
.mega-feature-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mega-feature-label { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.mega-feature-arrow { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,.22); display: grid; place-items: center; font-size: 16px; flex: none; transition: transform .2s, background .2s; }
.mega-feature:hover .mega-feature-arrow { transform: translateX(3px); background: rgba(0,0,0,.34); }
.mega-feature-sub { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.20); font-size: 14px; font-weight: 500; transition: background .15s; }
.mega-feature-sub:hover { background: rgba(255,255,255,.20); }
.mega-feature-sub .lbl { display: inline-flex; align-items: center; }
.mega-feature-sub .tag-new { margin-left: 8px; background: #fff; color: var(--indigo); }
.mega-feature-sub .chevr { opacity: .85; font-size: 17px; }

/* right module cards */
.mega-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.mega-card { display: flex; flex-direction: column; gap: 9px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-mid); transition: background .15s, border-color .15s; }
.mega-card:nth-child(3) { grid-column: 1 / -1; }
/* four-card Solutions menu tiles as a clean 2×2 — no full-width 3rd card */
.mega-cards--quad .mega-card:nth-child(3) { grid-column: auto; }
.mega-card:hover { background: var(--paper); border-color: var(--indigo-300); }
.mega-card .mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mega-card .mc-title { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.mega-card .mc-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--periwinkle); color: var(--indigo); display: grid; place-items: center; font-size: 14px; flex: none; }
.mega-card .mc-desc { font-size: 12.5px; color: var(--ink-40); line-height: 1.45; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(36px, 5vw, 76px); padding-bottom: clamp(40px, 5vw, 72px); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.14fr; gap: clamp(24px, 3vw, 56px); align-items: center; }
@media (max-width: 980px){ .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-60); background: #fff; border: 1px solid var(--line); padding: 7px 14px 7px 11px; border-radius: var(--r-pill); margin-bottom: 24px; }
.hero-badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(25,184,134,.5);} 70%{box-shadow:0 0 0 7px rgba(25,184,134,0);} 100%{box-shadow:0 0 0 0 rgba(25,184,134,0);} }
.hero h1 { margin: 0 0 22px; }
.hero h1 .ital { color: var(--indigo); }
.hero-sub { max-width: 34ch; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-foot { display: flex; gap: 30px; margin-top: 36px; flex-wrap: wrap; }
.hero-foot .stat .n { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.hero-foot .stat .l { font-size: 13px; color: var(--ink-40); margin-top: 2px; }

/* line-based reveal (no descender clipping) */
.r-line { display: block; opacity: 0; transform: translateY(20px); animation: lineUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
.r-line:nth-child(2){animation-delay:.09s}.r-line:nth-child(3){animation-delay:.18s}
@keyframes lineUp { to { opacity: 1; transform: none; } }

/* ---------- product mock ---------- */
.mock { position: relative; border-radius: var(--r-soft); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-float); overflow: hidden; max-width: 540px; margin-inline: auto; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(#fff,#fbfcff); }
.mock-bar .tl { width: 10px; height: 10px; border-radius: 50%; }
.mock-tabs { display: flex; gap: 16px; margin-left: 14px; font-size: 12.5px; font-weight: 500; color: var(--ink-40); }
.mock-tabs .on { color: var(--ink); position: relative; }
.mock-tabs .on::after { content:""; position:absolute; left:0; right:0; bottom:-12px; height:2px; background: var(--indigo); }
.sched { display: grid; grid-template-columns: 40px 1fr 1fr; font-size: 11px; }
.sched .corner, .sched .colhead { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-40); font-weight: 600; }
.sched .colhead { border-left: 1px solid var(--line); letter-spacing: .03em; text-transform: uppercase; font-size: 9.5px; }
.sched .time { padding: 16px 6px; color: var(--ink-40); border-bottom: 1px solid var(--line); font-weight: 500; }
.sched .cell { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; min-height: 54px; }
.appt { border-radius: var(--r-sharp); padding: 7px 8px; font-weight: 500; line-height: 1.25; border-left: 3px solid; }
.appt .who { font-weight: 600; }
.appt .meta { color: var(--ink-60); font-size: 10px; }
.appt.teal { background: #e7f7f0; border-color: var(--mint); }
.appt.indigo { background: var(--periwinkle); border-color: var(--indigo); }
.appt.amber { background: #e9eef8; border-color: var(--amber); }
.appt.rose { background: #ffe9ec; border-color: var(--rose); }
.appt.blocked { background: repeating-linear-gradient(45deg,#f2f3f9,#f2f3f9 6px,#e9ebf5 6px,#e9ebf5 12px); border-color: var(--ink-40); color: var(--ink-40); }
.ticker { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; box-shadow: var(--shadow-float); font-size: 13px; }
.ticker .ai { width: 26px; height: 26px; border-radius: 8px; background: var(--indigo); display: grid; place-items: center; flex: none; }
.ticker .tline b { font-weight: 600; }
.ticker .tline .s { color: #b9c0e8; font-size: 11.5px; }
.ticker .ok { margin-left: auto; color: var(--mint); flex: none; }

/* ---------- trust marquee ---------- */
.trust { border-block: 1px solid var(--line); background: var(--paper); }
.trust .lbl { text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); padding-top: 38px; }
.marquee { overflow: hidden; padding-block: 28px 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: scrollx 32s linear infinite; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.wordmark { font-size: 23px; font-weight: 600; letter-spacing: -0.03em; color: #aab0c6; white-space: nowrap; transition: color .2s; filter: grayscale(1); opacity: .85; }
.wordmark:hover { color: var(--ink); filter: none; opacity: 1; }

/* ---------- "replaces" horizontal strip (dark) ---------- */
.replaces { background: var(--navy); color: #fff; }
.replaces h2 { color: #fff; }
.replaces .sub { color: #aab2e0; max-width: 52ch; margin-top: 14px; }
.strike-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.strike { position: relative; font-size: 15px; font-weight: 500; color: #8b93c4; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); padding: 10px 16px; border-radius: var(--r-pill); transition: color .2s; }
.strike::after { content:""; position:absolute; left:14%; right:14%; top:50%; height:1.5px; background: var(--rose); transform: scaleX(0); transform-origin:left; transition: transform .4s ease; }
.strike.in::after { transform: scaleX(1); }
.replaces-vis { margin-top: 40px; border-radius: var(--r-soft); border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); overflow: hidden; box-shadow: var(--shadow-float); }

/* ---------- section heading ---------- */
.sec-head { max-width: 60ch; margin-bottom: clamp(34px, 4vw, 52px); }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head p { margin-top: 14px; }
.sec-head.center { margin-inline: auto; text-align: center; }

/* ---------- cards / agents ---------- */
.cards { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft); padding: 26px; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--periwinkle-2); }
.card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--periwinkle); color: var(--indigo); display: grid; place-items: center; margin-bottom: 18px; font-size: 19px; }
.card h3 { margin: 0 0 7px; }
.card p { color: var(--ink-60); font-size: 14.5px; margin: 0; }
.card .role { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); margin-bottom: 12px; }
.card .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.card .tags span { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-60); background: var(--paper); border: 1px solid var(--line); padding: 5px 10px; border-radius: var(--r-pill); }
.card .corner-arrow { position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-40); transition: all .2s; }
.card:hover .corner-arrow { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-8{grid-column:span 8}.col-3{grid-column:span 3}.col-12{grid-column:span 12}
@media (max-width: 900px){ .cards { grid-template-columns: repeat(2,1fr); } .col-6,.col-4,.col-8,.col-3,.col-12{grid-column:span 1} }
@media (max-width: 560px){ .cards { grid-template-columns: 1fr; } }

.mini-ticker { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; font-size: 12.5px; color: var(--ink-60); }
.mini-ticker .row { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.mini-ticker .row b { color: var(--ink); font-weight: 600; }
.mini-ticker .pill { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); background: #e7f7f0; color: #137a59; font-weight: 700; margin-left: auto; }

/* toggle (front/back office) */
.toggle { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.toggle button { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-40); background: none; border: none; padding: 9px 20px; border-radius: var(--r-pill); cursor: pointer; transition: all .2s; }
.toggle button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

/* glass + washes */
.glass { background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(234,238,255,.72)); border: 1px solid #fff; border-radius: var(--r-soft); box-shadow: var(--shadow-2); }
.wash { background: var(--periwinkle); }
.wash-soft { background: linear-gradient(180deg, var(--paper), #fff); }
.wash-grad { background: radial-gradient(1100px 480px at 82% -8%, var(--periwinkle), transparent 60%), radial-gradient(820px 460px at -8% 108%, #eef1ff, transparent 55%); }

/* command bar */
.cmd { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-mid); padding: 16px 18px; box-shadow: var(--shadow-1); font-size: 16px; }
.cmd .k { font-size: 12px; color: var(--ink-40); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-weight: 700; flex: none; }
.cmd .typed { color: var(--ink); font-weight: 500; }
.cmd .caret { display: inline-block; width: 2px; height: 19px; background: var(--indigo); margin-left: 1px; animation: blink 1s steps(1) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }
.cmd-out { margin-top: 12px; display: grid; gap: 8px; }
.cmd-out .o { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: center; opacity: 0; transform: translateY(8px); }
.cmd-out .o.in { opacity: 1; transform: none; transition: all .4s ease; }
.cmd-out .o .chk { color: var(--mint); }

/* ---------- solutions modules ---------- */
.module { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.module.flip { grid-template-columns: 1.1fr 0.9fr; }
.module.flip .mvis { order: -1; }
@media (max-width: 900px){ .module, .module.flip { grid-template-columns: 1fr; } .module.flip .mvis { order: 0; } }
.module .feat-list { margin-top: 24px; display: grid; gap: 2px; }
.feat { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-mid); transition: background .2s; }
.feat:hover { background: var(--paper); }
.feat .fi { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 16px; }
.feat b { font-weight: 600; font-size: 15.5px; }
.feat p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-60); }
.mvis { border-radius: var(--r-soft); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-2); overflow: hidden; }

/* chat thread vis (communications) */
.chat { padding: 22px; display: grid; gap: 12px; background: var(--paper); }
.bub { max-width: 78%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-1); }
.bub.them { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bub.us { background: var(--indigo); color: #fff; justify-self: end; border-bottom-right-radius: 5px; }
.bub .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; display: block; margin-bottom: 3px; }

/* before/after */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width:820px){ .split { grid-template-columns: 1fr; } }
.before { background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft); padding: 30px; }
.before h3 { color: var(--ink-40); }
.before .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.before .chips .c { font-size: 12.5px; padding: 7px 12px; border-radius: var(--r-sharp); background: #f3f4fa; color: var(--ink-60); border: 1px solid var(--line); position: relative; }
.before .chips .c::after { content:""; position:absolute; inset:auto 8px 50% 8px; height:1.5px; background: var(--rose); opacity:.7; }
.after { background: var(--ink); color: #fff; border-radius: var(--r-soft); padding: 30px; position: relative; overflow: hidden; }
.after h3 { color: #fff; }
.after .one { margin-top: 14px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 15px; }
.after .glow { position:absolute; width: 300px; height: 300px; right: -60px; top: -60px; background: radial-gradient(circle, rgba(59,79,224,.5), transparent 60%); filter: blur(18px); }

/* migration */
.steps { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); border-radius: var(--r-soft); overflow: hidden; }
@media (max-width:900px){ .steps { grid-template-columns: 1fr; } }
.step { padding: 26px 22px; border-right: 1px solid var(--line); background:#fff; transition: background .2s; }
.step:last-child { border-right: none; }
.step:hover { background: var(--paper); }
.step .num { font-size: 13px; font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; }
.step h3 { margin: 12px 0 8px; font-size: 17px; }
.step p { font-size: 13px; color: var(--ink-60); margin: 0; }

/* FAQ editorial */
.faq-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 56px; }
@media (max-width:820px){ .faq-grid { grid-template-columns: 1fr; } }
.qa { border-top: 1.5px solid var(--ink); padding: 26px 0; }
.qa .n { font-size: 13px; font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.qa h3 { margin: 10px 0 12px; font-size: clamp(19px,1.8vw,24px); letter-spacing: -0.025em; }
.qa p { color: var(--ink-60); font-size: 15px; margin: 0; }

/* CTA */
.cta { border-radius: var(--r-xl); padding: clamp(44px,6vw,82px); text-align: center; position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.cta h2 { color: #fff; margin: 0 0 16px; }
.cta p { color: #aab2e0; max-width: 50ch; margin: 0 auto 28px; }
.cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .blob { position:absolute; border-radius:50%; filter: blur(40px); opacity:.8; }
.cta .b1 { width: 360px; height: 360px; background: rgba(59,79,224,.5); left: -80px; bottom: -160px; }
.cta .b2 { width: 300px; height: 300px; background: rgba(140,152,242,.32); right: -60px; top: -140px; }

/* footer */
footer { border-top: 1px solid var(--line); padding-block: 54px 36px; background: var(--paper); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width:820px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid img.flogo { height: 24px; margin-bottom: 14px; }
.foot-grid h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); margin: 0 0 14px; }
.foot-grid a { display: block; color: var(--ink-60); font-size: 14.5px; padding: 5px 0; }
.foot-grid a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-40); font-size: 13px; flex-wrap: wrap; gap: 10px; }

/* reveal on scroll */
.ios { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.ios.in { opacity: 1; transform: none; }
.ios.d1{transition-delay:.07s}.ios.d2{transition-delay:.14s}.ios.d3{transition-delay:.21s}.ios.d4{transition-delay:.28s}.ios.d5{transition-delay:.35s}
@media (prefers-reduced-motion: reduce), (max-width: 700px){ .ios,.r-line,.tooth-float,.scan-line,.det,.marquee-track{ animation:none!important; transition:none!important; opacity:1!important; transform:none!important; } }

/* ============================================================
   TOOTH centerpiece
   ============================================================ */
.tooth-stage { position: relative; display: grid; place-items: center; }
.tooth-wrap { position: relative; width: min(500px, 84vw); aspect-ratio: 1/1; }
.tooth-glow { position:absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(59,79,224,.22), transparent 62%); filter: blur(8px); }
.tooth-float { animation: floaty 8s ease-in-out infinite; transform-origin: center; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
/* AI scan beam — taller, glowing, sweeps the full cluster on a loop */
.scan-line { transform-box: fill-box; transform-origin: center; animation: scan 3.8s cubic-bezier(.45,0,.3,1) infinite; filter: drop-shadow(0 0 9px rgba(236,198,166,.6)); }
@keyframes scan { 0%{ transform: translateY(-178px); opacity:0;} 9%{opacity:1;} 50%{ transform: translateY(178px); opacity:1;} 60%{opacity:0;} 100%{ transform: translateY(178px); opacity:0;} }
/* finding ignites once (JS-synced to beam), then the dot breathes + the ring radar-pings forever */
.det { opacity: 0; transform-box: fill-box; transform-origin: center; }
.det.show { animation: detpop .55s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes detpop { 0%{ opacity:0; transform: scale(.4);} 60%{ transform: scale(1.18);} 100%{ opacity:1; transform: scale(1);} }
.det > circle:not(.det-ring), .det > ellipse { transform-box: fill-box; transform-origin: center; animation: detBreathe 2.8s ease-in-out infinite; }
@keyframes detBreathe { 0%,100%{ transform: scale(1); opacity:.5;} 50%{ transform: scale(1.18); opacity:.85;} }
.det-ring { animation: ring 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { 0%{ transform: scale(.55); opacity:.9;} 100%{ transform: scale(2); opacity:0;} }
.det-label { position: absolute; transform: translate(-50%,-50%); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .005em; padding: 5px 11px; box-shadow: var(--shadow-1); display: flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; transition: opacity .5s ease .2s; }
.det-label.in { opacity: 1; }
.det-label .swatch { width: 8px; height: 8px; border-radius: 2px; }
.det-label .pct { color: var(--ink-40); font-weight: 500; }
.det-label.dark { background: rgba(20,26,48,.62); border-color: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); }
.det-label.dark .pct { color: rgba(255,255,255,.62); }

/* x-ray drag reveal */
.reveal { position: relative; border-radius: var(--r-soft); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); user-select: none; background:#0a0d18; aspect-ratio: 16/10; }
.reveal .layer { position: absolute; inset: 0; }
.reveal .after-layer { clip-path: inset(0 0 0 var(--split, 50%)); }
.reveal .handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: #fff; cursor: ew-resize; }
.reveal .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-float); color: var(--indigo); font-size: 14px; font-weight: 700; }
.reveal .tagL, .reveal .tagR { position: absolute; top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color:#fff; background: rgba(0,0,0,.45); padding: 5px 10px; border-radius: var(--r-pill); }
.reveal .tagL { left: 14px; } .reveal .tagR { right: 14px; }

/* x-ray dark hero/section */
.dark { background: radial-gradient(1000px 600px at 70% -10%, #16203f, transparent 60%), linear-gradient(180deg, var(--navy), #070a16); color: #fff; }
.dark h1,.dark h2,.dark h3 { color: #fff; }
.dark .lead { color: #9fa8d0; }
.dark .eyebrow { color: var(--amber-2); }
.stat-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width:760px){ .stat-cards { grid-template-columns: 1fr; } }
.stat-card { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-soft); padding: 30px; position: relative; overflow: hidden; }
.stat-card .n { font-size: clamp(36px,4.4vw,56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.stat-card .l { color: #9fa8d0; font-size: 14px; margin-top: 10px; }
.stat-card .spark { position:absolute; right:-10px; bottom:-10px; width:120px; height:120px; background: radial-gradient(circle, rgba(90,130,194,.3), transparent 60%); filter: blur(10px); }

.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.legend .li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-60); }
.legend .li .sw { width: 12px; height: 12px; border-radius: 4px; }

.thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width:820px){ .thumbs { grid-template-columns: repeat(2,1fr); } }
.thumb { border: 1px solid var(--line); border-radius: var(--r-soft); overflow: hidden; background:#fff; transition: transform .2s, box-shadow .2s; }
.thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.thumb .img { aspect-ratio: 4/3; background: radial-gradient(circle at 50% 60%, #1a2138, #0a0d18); }
.thumb .cap { padding: 14px 16px; }
.thumb .cap b { font-size: 14.5px; } .thumb .cap span { display:block; font-size: 12px; color: var(--ink-40); margin-top: 2px; }

/* number band (light) */
.band { display: grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:760px){ .band { grid-template-columns: 1fr; } }
.band .b { padding: 40px 20px; text-align: center; border-right: 1px solid var(--line); }
.band .b:last-child { border-right: none; }
.band .b .n { font-size: clamp(38px,4.6vw,62px); font-weight: 600; letter-spacing: -0.04em; }
.band .b .l { color: var(--ink-60); font-size: 14.5px; margin-top: 6px; }

/* utility */
.center { text-align: center; }
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:56px}
.disclaimer { font-size: 12px; color: var(--ink-40); }
.divider { height: 1px; background: var(--line); }
.logo-dark { filter: brightness(0) invert(1); }

/* ============================================================
   SKIA AI page additions — dark-blue system, less bold,
   accordion, orbit, animated demo, app frame
   ============================================================ */

/* SAGE / SAND theme override (applied via body.theme-sage) */
body.theme-sage {
  --indigo: #5b8c6e;        /* sage green accent */
  --indigo-700: #47785a;
  --indigo-300: #9ec7ab;
  --periwinkle: #eef3ec;
  --periwinkle-2: #e2ece1;
  --amber: #c98a3d;
  --amber-2: #ddb27d;
  --navy: #14201a;          /* deep forest */
  --navy-2: #1c2a22;
}
body.theme-sage .dark { background: radial-gradient(1000px 600px at 70% -10%, #1d3328, transparent 60%), linear-gradient(180deg, #14201a, #0b1410); }
body.theme-sage .skia-app-frame { background: linear-gradient(180deg,#16241c,#0e1813); }

/* nav on dark */
/* floating detached top bar (Overjet-style): gap from the browser edge + sides, rounded, glassy */
.nav.on-dark { position: sticky; top: 14px; max-width: min(1240px, calc(100% - 28px)); margin: 14px auto 0; border-radius: 18px; background: rgba(18,24,44,.5); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 16px 46px -20px rgba(0,0,0,.7); }
.nav.on-dark .nav-inner { height: 62px; }
.nav.on-dark.scrolled { background: rgba(10,14,31,.78); }
/* dark page bg so the transparent nav blends into the hero (no white strip behind sticky nav) */
body.theme-blue { background: #070a16; }
.nav.on-dark .nav-links > a, .nav.on-dark .nav-item > button, .nav.on-dark .signin { color: #c5cbe6; }
body.theme-sage .nav.on-dark .nav-links > a, body.theme-sage .nav.on-dark .nav-item > button, body.theme-sage .nav.on-dark .signin { color: #c3d4c8; }
.nav.on-dark .nav-links > a:hover, .nav.on-dark .nav-item > button:hover { color:#fff; background: rgba(255,255,255,.08); }
.nav.on-dark.scrolled { background: rgba(10,14,31,.92); border-color: rgba(255,255,255,.08); }
body.theme-sage .nav.on-dark.scrolled { background: rgba(20,32,26,.92); }
.nav.on-dark .tag-new { background: rgba(90,130,194,.18); color: var(--amber-2); }

/* dark body type colors (white + secondary, not all white) */
.dark { --d-text:#eef1fb; --d-muted:#94a0c8; }
body.theme-sage .dark { --d-text:#eef3ec; --d-muted:#94ab9c; }
.dark p, .dark .d-muted { color: var(--d-muted); }
.dark .d-strong { color: var(--d-text); font-weight: 500; }

/* skia app frame (wraps the real xray-ai.png screenshot) */
.skia-app-frame { border-radius: var(--r-soft); border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg,#0e1430,#0a0e1f); overflow: hidden; box-shadow: var(--shadow-float); }
.skia-app-frame .bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.skia-app-frame .bar .tl { width:10px;height:10px;border-radius:50%; }
.skia-app-frame .bar .url { margin-left:12px; font-size:12px; color:#8b93c4; background:rgba(255,255,255,.05); padding:4px 12px; border-radius:8px; }
.skia-app-frame img { width:100%; display:block; }
.skia-app-frame .glow-edge { height:2px; background: linear-gradient(90deg, transparent, var(--indigo), transparent); }

/* tilt-on-hover for product shots */
.tilt { transition: transform .4s cubic-bezier(.2,.8,.2,1); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.tilt:hover { transform: perspective(1400px) rotateY(0) rotateX(0) scale(1.01); }

/* ---------- interactive accordion (Pearl-style) ---------- */
.acc-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,72px); align-items: center; }
@media (max-width: 920px){ .acc-wrap { grid-template-columns: 1fr; } }
.acc-vis { position: relative; border-radius: var(--r-soft); min-height: 420px; display: grid; place-items: center; overflow: hidden; border:1px solid rgba(255,255,255,.1); }
.acc-vis .pane { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.98); transition: opacity .5s, transform .5s; padding: 24px; }
.acc-vis .pane.on { opacity: 1; transform: none; }
.acc-list { display: grid; }
.acc-item { border-top: 1px solid rgba(255,255,255,.12); padding: 24px 0; cursor: pointer; display: flex; gap: 20px; align-items: flex-start; }
.acc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.acc-item .ix-num { font-size: clamp(22px,2.2vw,34px); font-weight: 600; line-height: 1; min-width: 50px; color: rgba(255,255,255,.2); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; transition: color .25s, transform .25s; }
.acc-item.on .ix-num { color: var(--indigo-300); transform: translateX(2px); }
.acc-main { flex: 1; }
.acc-item .head { display: flex; align-items: center; gap: 12px; }
.acc-item .head .t { font-size: clamp(21px,2vw,29px); font-weight: 500; color: var(--d-muted); transition: color .25s; letter-spacing: -0.025em; }
.acc-item.on .head .t { color: var(--d-text); }
.acc-item .head .ix { margin-left: auto; color: var(--d-muted); transition: transform .3s; }
.acc-item.on .head .ix { transform: rotate(180deg); color: var(--indigo-300); }
.acc-item .body { max-height: 0; overflow: hidden; transition: max-height .4s ease, margin .4s; }
.acc-item.on .body { max-height: 300px; margin-top: 12px; }
.acc-item .body p { color: var(--d-muted); font-size: 15px; margin: 0; max-width: 46ch; }
.acc-item .body .kw { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.acc-item .body .kw span { font-size:11.5px; color:var(--indigo-300); border:1px solid rgba(255,255,255,.14); padding:4px 10px; border-radius:var(--r-pill); }

/* radar / metric visual */
.radar-card { width: 320px; max-width: 80%; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius: var(--r-soft); padding: 24px; }
.calib-card .cc-h { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--indigo-300); text-transform: uppercase; }
.calib-card .cc-note { font-size: 13px; color: var(--d-muted); margin-top: 12px; }
/* calibration control-chart: tolerance band, dot cluster, scan sweep */
.calib-svg .cc-band { transform-box: fill-box; transform-origin: left center; animation: ccBandIn .6s cubic-bezier(.3,0,.2,1) both; }
@keyframes ccBandIn { from { transform: scaleX(0); opacity:0 } to { transform: scaleX(1); opacity:1 } }
.calib-svg .cc-dot { transform-box: fill-box; transform-origin: center; opacity:.95; animation: ccDotPop .42s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes ccDotPop { from { transform: scale(0); opacity:0 } to { transform: scale(1); opacity:.95 } }
.calib-svg .cc-scan { animation: ccScan 4.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes ccScan { 0%{ transform: translateX(0) } 100%{ transform: translateX(262px) } }
@media (prefers-reduced-motion: reduce), (max-width: 700px){ .calib-svg .cc-band, .calib-svg .cc-dot, .calib-svg .cc-scan { animation: none; opacity:1; transform:none; } }

/* ===== progression card (tracks change over time) — animated ===== */
.prog { position: relative; display: flex; gap: 18px; align-items: center; height: 100%; padding: 28px 24px; background: #0e1430; overflow: hidden; }
.prog-col { flex: 1; text-align: center; }
.prog-yr { font-family: var(--mono); font-size: 11px; color: var(--d-muted); margin-bottom: 12px; letter-spacing: .05em; }
.prog-yr.hot { color: var(--amber-2); }
.prog-frame { border-radius: 12px; background: radial-gradient(130% 120% at 50% 38%,#16203c,#0a0f22); border: 1px solid rgba(255,255,255,.07); padding: 16px; display: grid; place-items: center; }
.prog-frame.hot { border-color: rgba(224,162,116,.3); animation: progGlow 3.6s ease-in-out infinite; }
@keyframes progGlow { 0%,100%{ box-shadow: 0 0 22px -12px rgba(224,162,116,.45) } 50%{ box-shadow: 0 0 34px -6px rgba(224,162,116,.85) } }
.prog-arrow { position: relative; color: var(--indigo-300); font-size: 22px; flex: none; }
.prog-delta { position: absolute; left: 50%; top: -20px; transform: translateX(-50%) translateY(6px); font-family: var(--mono); font-size: 10px; color: var(--amber-2); white-space: nowrap; opacity: 0; animation: progDelta 3.6s ease-in-out infinite; }
@keyframes progDelta { 0%,18%{ opacity:0; transform: translateX(-50%) translateY(6px) } 42%,72%{ opacity:1; transform: translateX(-50%) translateY(0) } 92%,100%{ opacity:0; transform: translateX(-50%) translateY(0) } }
.prog-les { transform-box: fill-box; transform-origin: center; animation: progLes 3.6s ease-in-out infinite; }
@keyframes progLes { 0%,15%{ transform: scale(.55); opacity:.4 } 55%,100%{ transform: scale(1); opacity:.55 } }
.prog-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: progRing 3.6s ease-out infinite; }
@keyframes progRing { 0%,42%{ opacity:0; transform: scale(.6) } 56%{ opacity:.55; transform: scale(1) } 90%,100%{ opacity:0; transform: scale(2.1) } }
.prog-sweep { position: absolute; top: 0; bottom: 0; width: 38%; left: -38%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(154,166,245,.13), transparent); animation: progSweep 3.6s ease-in-out infinite; }
@keyframes progSweep { 0%{ left:-38% } 38%{ left:100% } 100%{ left:100% } }
@media (prefers-reduced-motion: reduce), (max-width: 700px){ .prog-frame.hot,.prog-delta,.prog-les,.prog-ring,.prog-sweep{ animation:none } .prog-les{ transform:none } .prog-ring,.prog-delta{ opacity:1 } }
body.theme-sage .prog { background: #fff; }
body.theme-sage .prog-frame { background: radial-gradient(130% 120% at 50% 38%,#eef3ea,#f3f2e8); border-color: #e6e5d8; }
/* sage: findings card matches the light "tracks over time" scheme */
body.theme-sage .findings-card { background: #fff !important; }
body.theme-sage .findings-card [style*="rgba(255,255,255,.1)"] { border-color: #e6e5d8 !important; }
/* sage: CTA section bg = the cream the section above ends on, so no hard white seam */
body.theme-sage section#demo { background: #eef0e3; }
body.theme-blue section#demo { background: #070a16; }

/* ---------- animated step demo ---------- */
.demo { position: relative; border-radius: var(--r-xl); overflow: hidden; border:1px solid rgba(255,255,255,.1); }
.demo-stage { position: relative; aspect-ratio: 16/9; background: radial-gradient(700px 400px at 30% 20%, #16203f, transparent 60%), #0a0e1f; }
body.theme-sage .demo-stage { background: radial-gradient(700px 400px at 30% 20%, #1d3328, transparent 60%), #0e1813; }
.demo-steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.1); }
.demo-step { padding: 18px 20px; border-right: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: background .2s; }
.demo-step:last-child { border-right: none; }
.demo-step.on { background: rgba(255,255,255,.05); }
.demo-step .s-n { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--indigo-300); }
.demo-step .s-t { font-size: 14px; font-weight: 500; color: var(--d-text); margin-top: 5px; }
.demo-step .s-d { font-size: 12px; color: var(--d-muted); margin-top: 3px; }
.demo-step .s-prog { height: 2px; background: rgba(255,255,255,.1); margin-top: 12px; border-radius: 2px; overflow: hidden; }
.demo-step .s-prog i { display:block; height:100%; width:0; background: var(--indigo); }
.demo-step.on .s-prog i { animation: fill 4s linear forwards; }
@keyframes fill { to { width: 100%; } }
/* demo scene layers */
.scene { position:absolute; inset:0; opacity:0; transition: opacity .6s; display:grid; place-items:center; }
.scene.on { opacity:1; }
.scene .chip { position:absolute; background: rgba(10,14,31,.7); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); backdrop-filter: blur(6px); }
.persona { display:flex; align-items:center; gap:14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-soft); padding:14px 18px; }
.persona .av { width:42px;height:42px;border-radius:50%; display:grid; place-items:center; font-size:18px; }

/* ---------- provider orbit ---------- */
.orbit-section { overflow-x: clip; }
/* responsive: stage sizes to its column, hugs right, hard-shifted right into the empty margin */
.orbit-stage { position: relative; width: clamp(340px, calc(50vw - 40px), 600px); aspect-ratio: 1; margin-left:auto; margin-right:0; transform: translateX(clamp(0px, 5vw, 96px)); display:grid; place-items:center; }
.orbit-ring { position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.orbit-ring.r1 { width:64%; height:64%; } .orbit-ring.r2 { width:100%; height:100%; }
.orbit-core { width:120px;height:120px;border-radius:50%; background: radial-gradient(circle at 40% 35%, var(--indigo), var(--indigo-700)); display:grid; place-items:center; box-shadow: 0 0 60px -10px var(--indigo); z-index:2; }
.orbit-core img { width:60px; }
.orbit-spin { position:absolute; width:100%; height:100%; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* node = positioner (left/top set inline at fixed angles). The inner span IS the pill and
   counter-rotates as a whole so the entire capsule (bg + text) stays upright through the spin. */
.orbit-node { position:absolute; transform:translate(-50%,-50%); }
.orbit-node, .orbit-spin { will-change: transform; }
.orbit-node > span { display:block; background:#fff; color:var(--ink); border-radius:var(--r-pill); padding:9px 16px; font-size:13px; font-weight:500; box-shadow: var(--shadow-2); white-space:nowrap; animation: spin 40s linear infinite reverse; }
@media (prefers-reduced-motion: reduce), (max-width: 700px){ .orbit-spin, .orbit-node > span { animation: none !important; } }

/* dark feature blocks (Overjet-style alternating) */
.fblock { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,64px); align-items:center; padding-block: clamp(28px,4vw,56px); }
.fblock.flip .fb-vis { order:-1; }
@media (max-width:900px){ .fblock, .fblock.flip { grid-template-columns:1fr; } .fblock.flip .fb-vis{order:0;} }
.fblock h3 { font-size: clamp(22px,2.4vw,32px); font-weight:500; letter-spacing:-0.025em; margin:0 0 12px; }
.fblock .lnk { display:inline-flex; align-items:center; gap:7px; color: var(--indigo-300); font-weight:500; margin-top:14px; border-bottom:1px solid currentColor; padding-bottom:2px; }
.fblock ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.fblock ul li { display:flex; gap:10px; color: var(--d-muted); font-size:14.5px; }
.fblock ul li::before { content:"›"; color: var(--indigo-300); font-weight:700; }
.fb-vis { border-radius: var(--r-soft); overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-float); }
.fb-vis img { width:100%; display:block; }

/* theme switch pill */
.theme-switch { display:inline-flex; gap:4px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); padding:4px; }
.theme-switch a { font-size:12.5px; font-weight:600; color: var(--d-muted); padding:6px 14px; border-radius:var(--r-pill); }
.theme-switch a.on { background:#fff; color:var(--ink); }
body.theme-sage .theme-switch a.on { background: var(--indigo); color:#fff; }

/* ============================================================
   DEMO v2 — high-quality product-tablet walkthrough
   ============================================================ */
.demo-stage { aspect-ratio: 16/9; }
.demo-bg { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 42px 42px; -webkit-mask: radial-gradient(82% 78% at 50% 42%, #000 40%, transparent); mask: radial-gradient(82% 78% at 50% 42%, #000 40%, transparent); }
.demo-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(620px 380px at 50% 36%, rgba(59,79,224,.20), transparent 62%); }
body.theme-sage .demo-bg::after { background: radial-gradient(620px 380px at 50% 36%, rgba(91,140,110,.22), transparent 62%); }
.scene { padding: clamp(20px,4vw,48px); }

.demo-tablet { width: min(580px, 86%); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0e1430; box-shadow: 0 50px 120px -34px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset; position: relative; z-index: 1; }
body.theme-sage .demo-tablet { background:#16241c; }
.demo-tablet .tbar { display:flex; gap:7px; align-items:center; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.demo-tablet .tbar .tl { width:9px;height:9px;border-radius:50%; }
.demo-tablet .tbar .u { margin-left:10px; font-size:11px; color:#8b93c4; font-weight:500; }
.demo-screen { position:relative; aspect-ratio: 16/9; background:#0a0d18; overflow:hidden; }
.demo-screen > svg, .demo-screen > img { width:100%; height:100%; object-fit:cover; display:block; }
.demo-screen .ov { position:absolute; inset:0; }

/* capture reticle + flash */
.reticle { position:absolute; top:50%; left:50%; width:120px; height:120px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.5); border-radius:14px; }
.reticle::before,.reticle::after{content:"";position:absolute;background:#fff;}
.reticle::before{left:50%;top:-8px;bottom:-8px;width:1px;transform:translateX(-50%);opacity:.5}
.reticle::after{top:50%;left:-8px;right:-8px;height:1px;transform:translateY(-50%);opacity:.5}
.reticle .corner{position:absolute;width:18px;height:18px;border:2px solid var(--amber)}
.reticle .c1{top:-2px;left:-2px;border-right:0;border-bottom:0}.reticle .c2{top:-2px;right:-2px;border-left:0;border-bottom:0}.reticle .c3{bottom:-2px;left:-2px;border-right:0;border-top:0}.reticle .c4{bottom:-2px;right:-2px;border-left:0;border-top:0}
.flash { position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%); transform:translateX(-100%); }
.scene.on .flash { animation: flashSweep 1.6s ease-in-out .3s infinite; }
@keyframes flashSweep { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* scan overlay (read) */
.scanbar { position:absolute; left:0; right:0; height:42px; top:0; background:linear-gradient(180deg,rgba(59,79,224,.4),rgba(59,79,224,0)); border-bottom:2px solid var(--indigo-300); }
.scene.on .scanbar { animation: scanY 2.6s cubic-bezier(.5,0,.5,1) infinite; }
body.theme-sage .scanbar { background:linear-gradient(180deg,rgba(91,140,110,.4),transparent); border-color:var(--indigo-300); }
@keyframes scanY { 0%{top:-12%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }
.region { position:absolute; border:1.5px solid rgba(224,162,116,.7); border-radius:4px; opacity:0; }
.scene.on .region { animation: regIn .4s ease forwards; }
.scene.on .region.r2{animation-delay:.5s}.scene.on .region.r3{animation-delay:.9s}
@keyframes regIn { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:none} }

/* progress ring */
.ring-prog { position:absolute; right:18px; top:18px; width:54px; height:54px; }
.ring-prog circle { fill:none; stroke-width:5; }
.ring-prog .bg { stroke:rgba(255,255,255,.12); }
.ring-prog .fg { stroke:var(--indigo-300); stroke-linecap:round; stroke-dasharray:151; stroke-dashoffset:151; transform:rotate(-90deg); transform-origin:center; }
.scene.on .ring-prog .fg { animation: ringFill 2.6s ease forwards; }
@keyframes ringFill { to { stroke-dashoffset: 32; } }
.ring-prog .pct { font-size:13px; font-weight:600; fill:#fff; }

/* chips + persona */
.demo-chip { position:absolute; background: rgba(8,11,24,.82); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:99px; backdrop-filter: blur(8px); box-shadow: 0 10px 28px -12px #000; z-index:3; white-space:nowrap; }
.scene.on .demo-chip { animation: chipIn .55s cubic-bezier(.2,1.3,.4,1) both; }
.scene.on .demo-chip.d1{animation-delay:.4s}.scene.on .demo-chip.d2{animation-delay:.8s}
@keyframes chipIn { from{opacity:0; transform: translateY(8px) scale(.94);} }
.demo-chip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.demo-persona { position:absolute; left:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,36px); display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:11px 16px 11px 12px; z-index:3; backdrop-filter:blur(6px); }
.demo-persona .av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none}
.demo-persona .pn{font-size:14px;font-weight:500;color:#fff}
.demo-persona .pr{font-size:12px;color:var(--d-muted)}

/* patient portal card (scene 3) */
.portal-card { width:min(420px,80%); background:#fff; color:var(--ink); border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); }
.portal-card .ph { padding:14px 18px; border-bottom:1px solid var(--line); font-weight:500; font-size:14px; }
.portal-card .pb { padding:18px; }
.portal-tooth { height:120px; border-radius:12px; background:radial-gradient(circle at 58% 42%, #fff, #f2f5ff); border:1px solid var(--line); position:relative; overflow:hidden; }
.portal-tooth .les { position:absolute; left:34%; top:38%; width:30px; height:30px; border-radius:50%; background:var(--amber); opacity:.8; box-shadow:0 0 0 6px rgba(90,130,194,.18); }

/* ---------- detection label leader lines ---------- */
.det-label.lead { z-index:4; }
.det-label.lead::after { content:""; position:absolute; top:50%; height:1px; width:24px; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px); opacity:.45; }
.det-label.lead-l::after { left:100%; margin-left:6px; }
.det-label.lead-r::after { right:100%; margin-right:6px; }

/* ============================================================
   THEME · SAGE = light sand-green (overrides; uses !important to beat inline dark bgs)
   ============================================================ */
body.theme-sage {
  --indigo:#5f9e7a; --indigo-700:#4c8567; --indigo-300:#3f7a5c;
  --amber:#bf7f39; --amber-2:#b07b3a;
  --ink:#26302a; --ink-60:#566055; --ink-40:#828c7e; --line:#e3e2d4;
  --periwinkle:#eef3ea; --periwinkle-2:#e3ebde; --paper:#f7f6ee;
}
/* flip dark sections to light sand */
body.theme-sage .dark { background: linear-gradient(180deg,#f6f3ea,#eef0e3) !important; color:#26302a !important; --d-text:#26302a; --d-muted:#5f6a5c; }
body.theme-sage .dark h1, body.theme-sage .dark h2, body.theme-sage .dark h3, body.theme-sage .dark .d-strong { color:#222b24 !important; }
body.theme-sage .dark .eyebrow { color:#3f7a5c !important; }
body.theme-sage .dark .lead, body.theme-sage .dark p, body.theme-sage .dark .d-muted { color:#5f6a5c !important; }

/* nav on light sand */
body.theme-sage { background: #f6f3ea; }
body.theme-sage .nav.on-dark { background: rgba(246,243,234,.72) !important; border-color: rgba(40,50,40,.12) !important; box-shadow: 0 16px 44px -22px rgba(40,50,40,.35) !important; }
body.theme-sage .nav.on-dark .nav-links > a, body.theme-sage .nav.on-dark .nav-item > button, body.theme-sage .nav.on-dark .signin { color:#3a443a !important; }
body.theme-sage .nav.on-dark .nav-links>a:hover, body.theme-sage .nav.on-dark .nav-item>button:hover { color:#1f261f !important; background:rgba(95,158,122,.12) !important; }
body.theme-sage .nav.on-dark.scrolled { background: rgba(246,243,234,.94) !important; border-color:#e3e2d4 !important; }
body.theme-sage .brand img.logo-dark, body.theme-sage .nav .logo-dark { filter:none !important; }
body.theme-sage .nav.on-dark .tag-new { background: rgba(95,158,122,.16); color:#3f7a5c; }

/* hero badge + secondary button */
body.theme-sage .hero-badge { background:#fff !important; border-color:#e3e2d4 !important; color:#566055 !important; }
body.theme-sage .hero-actions .btn:not(.btn-primary) { background:#fff !important; color:#26302a !important; border-color:#e3e2d4 !important; }

/* stat cards → white on sand */
body.theme-sage .stat-card { background:#fff !important; border-color:#e6e5d8 !important; box-shadow: var(--shadow-1); }
body.theme-sage .stat-card .n { color:#222b24 !important; }
body.theme-sage .stat-card .l { color:#5f6a5c !important; }
body.theme-sage .stat-card .spark { background: radial-gradient(circle, rgba(95,158,122,.18), transparent 60%) !important; }

/* skia app frame (browser) → white chrome, dark x-ray screen kept */
body.theme-sage .skia-app-frame { background:#fff !important; border-color:#e3e2d4 !important; }
body.theme-sage .skia-app-frame .bar { border-color:#ececdf !important; }
body.theme-sage .skia-app-frame .bar .url { background:#f0efe4 !important; color:#7a8472 !important; }

/* accordion */
body.theme-sage .acc-vis { background: radial-gradient(600px 360px at 40% 30%, #eef3ea, transparent 60%), #f3f2e8 !important; border-color:#e3e2d4 !important; }
body.theme-sage .acc-item { border-color:#e0e0d2 !important; }
body.theme-sage .acc-item .body .kw span { border-color:#d8d8c8 !important; color:#3f7a5c !important; }
body.theme-sage .radar-card { background:#fff !important; border-color:#e6e5d8 !important; }
body.theme-sage .radar-card svg g[stroke] { stroke: rgba(40,55,40,.14) !important; }

/* demo */
body.theme-sage .demo { border-color:#e3e2d4 !important; }
body.theme-sage .demo-stage { background: radial-gradient(620px 380px at 50% 36%, rgba(95,158,122,.16), transparent 62%), #eef0e3 !important; }
body.theme-sage .demo-bg { background-image: linear-gradient(rgba(40,60,40,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(40,60,40,.05) 1px,transparent 1px) !important; }
body.theme-sage .demo-tablet { background:#fff !important; border-color:#e3e2d4 !important; }
body.theme-sage .demo-tablet .tbar { border-color:#ececdf !important; }
body.theme-sage .demo-tablet .tbar .u { color:#7a8472 !important; }
body.theme-sage .demo-persona { background:#fff !important; border-color:#e6e5d8 !important; }
body.theme-sage .demo-persona .pn { color:#26302a !important; }
body.theme-sage .demo-steps { border-color:#e3e2d4 !important; }
body.theme-sage .demo-step { border-color:#e6e5d8 !important; }
body.theme-sage .demo-step.on { background: rgba(95,158,122,.08) !important; }
body.theme-sage .demo-step .s-t { color:#26302a !important; }
body.theme-sage .demo-step .s-d, body.theme-sage .demo-step .s-n { color:#5f6a5c !important; }
body.theme-sage .demo-step .s-prog { background:#e6e5d8 !important; }
body.theme-sage .demo-step .s-prog i { background: var(--indigo) !important; }

/* feature blocks + orbit */
body.theme-sage .fblock .lnk { color:#3f7a5c !important; }
body.theme-sage .fblock ul li::before { color:#5f9e7a !important; }
body.theme-sage .fb-vis { border-color:#e3e2d4 !important; }
body.theme-sage .orbit-ring { border-color: rgba(40,60,40,.14) !important; }
body.theme-sage .orbit-core { box-shadow: 0 0 50px -12px var(--indigo) !important; }

/* drag-reveal tag + legend dots stay; legend text */
body.theme-sage .legend .li { color:#5f6a5c !important; }

/* hero-tooth labels on light */
body.theme-sage .det-label.dark { background:#fff !important; border-color:#e3e2d4 !important; color:#26302a !important; box-shadow: var(--shadow-1); }
body.theme-sage .det-label.dark .pct { color:#828c7e !important; }

/* theme switch on light */
body.theme-sage .theme-switch { background:#fff; border-color:#e3e2d4; }
body.theme-sage .theme-switch a { color:#828c7e; }

/* tooth glow tint */
body.theme-sage .tooth-glow { background: radial-gradient(circle at 50% 40%, rgba(95,158,122,.22), transparent 60%) !important; }

/* ============================================================
   v7 — sage button all-green, bold-numbered accordion, tooth pane,
   heading-clip safety, refined demo
   ============================================================ */

/* sage primary button: all green — bg, text, arrow, glow (no orange/blue) */
body.theme-sage .btn-primary { background: var(--indigo) !important; color:#fff !important; box-shadow: 0 12px 26px -12px rgba(95,158,122,.7) !important; }
body.theme-sage .btn-primary:hover { background: var(--indigo-700) !important; }
body.theme-sage .btn-primary .arrow { color:#fff !important; }

/* sage accordion numeral */
body.theme-sage .acc-item .ix-num { color: rgba(40,60,40,.22) !important; }
body.theme-sage .acc-item.on .ix-num { color:#3f7a5c !important; }

/* heading clip safety — never let tall glyphs get cut at section tops */
.sec-head, .acc-wrap, .module, .fblock { overflow: visible; }
.dark .sec-head h2 { padding-top: 2px; }

/* accordion left pane: standalone tooth */
.acc-tooth { position: relative; width: 100%; display: grid; place-items: center; }
.acc-tooth svg { filter: drop-shadow(0 24px 50px rgba(0,0,0,.45)); }
.acc-tooth .det-label { position: absolute; }

/* patient portal tooth (demo scene 3) — center the molar, soft glow */
.portal-tooth { height: 138px; border-radius: 12px; background: radial-gradient(circle at 56% 40%, #ffffff, #eef2ff); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.portal-tooth svg { filter: drop-shadow(0 10px 24px rgba(120,140,200,.28)); }
.les-pulse { transform-box: fill-box; transform-origin: center; animation: lesPulse 2.4s ease-out infinite; }
@keyframes lesPulse { 0%{ opacity:.85; transform: scale(.8);} 70%{ opacity:0; transform: scale(1.9);} 100%{ opacity:0; } }

/* hero tooth showcase — centered stage, own breathing room (remodelled hero) */
.tooth-showcase { display: grid; place-items: center; margin-top: clamp(28px,4vw,56px); }
.tooth-showcase .ts-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); margin-bottom: clamp(6px,1.4vw,16px); }
.tooth-showcase .hero-tooth { width: 100%; }
.tooth-showcase .tooth-wrap { width: min(330px, 64vw); aspect-ratio: 360/440; margin-inline: auto; }
/* hero-side tooth (swapped into hero right column) — larger */
.hero-side-tooth { width: 100%; transform: translate(18px,-10px); }
.hero-side-tooth .tooth-wrap { width: min(700px, 112%); aspect-ratio: 660/470; margin-left: auto; margin-right: -2%; }
.hero-side-tooth .tooth-glow { inset: 4% 0; filter: blur(28px); }
@media (max-width: 980px){ .hero-side-tooth { transform: none; } .hero-side-tooth .tooth-wrap { width: min(560px, 92%); margin-inline: auto; } }
.screenshot-showcase .skia-app-frame { box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.tooth-showcase .det-label { font-size: 11px; }
@media (max-width: 600px){ .tooth-showcase .det-label { font-size: 9.5px; padding: 4px 8px; } }

/* refined demo: deeper stage vignette + soft inner light */
.demo-stage::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.45)); pointer-events:none; z-index:2; }
.demo-tablet { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.scene.on .demo-tablet { animation: tabletIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tabletIn { from{ opacity:0; transform: translateY(14px) scale(.985);} to{ opacity:1; transform:none; } }

/* ============================================================
   XSCAN — live AI radiograph scanner viewport (hero visual)
   ============================================================ */
.xscan{
  --neon:#8fa6ff; --neon2:#46e0c8; --panel-1:#141b3a; --panel-2:#0c1126;
  position:relative; width:min(700px,100%); margin-inline:auto; place-self:center;
  aspect-ratio:5/4; border-radius:26px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(143,166,255,.18), transparent 58%),
    linear-gradient(165deg,var(--panel-1),var(--panel-2));
  border:1px solid rgba(143,166,255,.2);
  box-shadow:0 40px 110px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 90px -34px rgba(143,166,255,.45);
}
body.theme-sage .xscan{ --neon:#5ad0a8; --neon2:#9bead0; --panel-1:#1c4339; --panel-2:#102b25;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(120,224,196,.2), transparent 58%),
    linear-gradient(165deg,var(--panel-1),var(--panel-2));
  border-color:rgba(120,224,196,.26);
  box-shadow:0 40px 110px -34px rgba(15,45,34,.55), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 90px -34px rgba(120,224,196,.5); }

/* faint perspective grid */
.xscan-grid{ position:absolute; inset:-2px; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(143,166,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(143,166,255,.10) 1px,transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(120% 100% at 50% 35%,#000,transparent 78%);
  animation:xgrid 14s linear infinite; }
body.theme-sage .xscan-grid{ background-image:linear-gradient(rgba(90,208,168,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(90,208,168,.10) 1px,transparent 1px); }
@keyframes xgrid{ from{ background-position:0 0,0 0; } to{ background-position:0 38px,38px 0; } }

.xscan-vign{ position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }
.xscan-aura{ position:absolute; z-index:1; inset:14% 8% 6%; pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb,var(--neon) 30%,transparent), transparent 70%);
  filter:blur(26px); animation:xaura 6s ease-in-out infinite; }
@keyframes xaura{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }

/* radiograph teeth */
.xscan-teeth{ position:absolute; z-index:2; inset:7% 6% 3%; width:88%; height:90%;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--neon) 45%,transparent)); animation:xfloat 8s ease-in-out infinite; }
@keyframes xfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.xtg use{ transform-box:fill-box; }
.xt-cluster{ transform-box:fill-box; transform-origin:center; animation:xbreathe 5s ease-in-out infinite; }
@keyframes xbreathe{ 0%,100%{ opacity:.92; } 50%{ opacity:1; } }

/* neon scan beam + heatmap trail */
.xscan-beam{ position:absolute; z-index:3; left:0; right:0; top:-12%; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--neon),var(--neon2),var(--neon),transparent);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--neon) 80%,transparent);
  animation:xbeam 5.5s cubic-bezier(.4,0,.25,1) infinite; }
.xscan-beam::before{ content:""; position:absolute; left:0; right:0; bottom:1px; height:120px;
  background:linear-gradient(to top, color-mix(in srgb,var(--neon) 26%,transparent), transparent);
  mask-image:linear-gradient(to top,#000,transparent); }
@keyframes xbeam{ 0%{ top:-12%; opacity:0; } 4%{ opacity:1; } 45%{ top:104%; opacity:1; } 54%{ opacity:0; } 100%{ top:104%; opacity:0; } }

/* lock-on detection reticles */
.xdet{ position:absolute; z-index:4; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  transform:translate(-50%,-50%); opacity:0; animation:xlock 5.5s cubic-bezier(.2,1.3,.35,1) infinite; }
.xd-caries{ animation-delay:1.0s; } .xd-calc{ animation-delay:1.4s; } .xd-bone{ animation-delay:1.8s; }
@keyframes xlock{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(1.55); } 6%{ opacity:1; transform:translate(-50%,-50%) scale(.92); }
  13%{ transform:translate(-50%,-50%) scale(1); } 82%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  93%{ opacity:0; transform:translate(-50%,-50%) scale(1.12); } 100%{ opacity:0; } }
.xbrk{ position:absolute; inset:0; border-radius:13px; border:1.4px solid var(--c);
  box-shadow:0 0 16px var(--cg), inset 0 0 14px -4px var(--cg);
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--c) 22%,transparent), transparent 62%); }
/* corner brackets */
.xbrk::before,.xbrk::after{ content:""; position:absolute; width:13px; height:13px; }
.xbrk::before{ top:-2px; left:-2px; border-top:2.4px solid var(--c); border-left:2.4px solid var(--c); border-top-left-radius:6px; }
.xbrk::after{ bottom:-2px; right:-2px; border-bottom:2.4px solid var(--c); border-right:2.4px solid var(--c); border-bottom-right-radius:6px; }
/* pinging halo */
.xdet::after{ content:""; position:absolute; inset:0; border-radius:14px; border:1.5px solid var(--c);
  animation:xping 2s ease-out infinite; }
@keyframes xping{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } }

/* confidence chips */
.xchip{ position:absolute; white-space:nowrap; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.02em;
  color:#eaf0ff; padding:5px 10px; border-radius:9px; background:rgba(10,14,30,.82); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent); box-shadow:0 6px 18px -8px #000; }
.xchip b{ color:var(--c); font-weight:600; }
.xd-caries .xchip{ left:0; bottom:calc(100% + 12px); }
.xd-calc .xchip{ left:calc(100% + 14px); top:50%; transform:translateY(-50%); }
.xd-bone .xchip{ left:50%; transform:translateX(-50%); top:calc(100% + 12px); }
/* connector tick from chip to box */
.xchip::after{ content:""; position:absolute; top:50%; width:12px; height:1px; background:var(--c); opacity:.6; }
.xd-caries .xchip::after{ top:100%; left:20px; width:1px; height:12px; }
.xd-calc .xchip::after{ right:100%; }
.xd-bone .xchip::after{ display:none; }

/* HUD */
.xscan-hud{ position:absolute; z-index:7; left:16px; top:14px; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:#c4cdf2; text-transform:uppercase; }
.xrec{ width:8px; height:8px; border-radius:50%; background:var(--neon2); box-shadow:0 0 10px var(--neon2); animation:xrec 1.4s ease-in-out infinite; }
@keyframes xrec{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.xscan-meter{ position:absolute; z-index:7; right:16px; bottom:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; color:#9aa6d8; }
.xscan-meter b{ color:#eaf0ff; font-weight:600; }

@media (max-width:980px){ .xscan{ margin-inline:auto; } }
@media (max-width:600px){ .xchip{ font-size:9.5px; padding:4px 8px; } .xscan-hud{ font-size:9px; } }
@media (prefers-reduced-motion: reduce), (max-width: 700px){
  .xscan-grid,.xscan-aura,.xscan-teeth,.xt-cluster,.xscan-beam,.xrec{ animation:none!important; }
  .xdet{ animation:none!important; opacity:1!important; } .xdet::after{ animation:none!important; opacity:0!important; }
}


/* ============================================================
   THEME · SAND-BLUE = light sandy-blue (clone of sage, blue accent)
   ============================================================ */
/* SAGE / SAND theme override (applied via body.theme-sand) */
body.theme-sand {
  --indigo: #5a82c2;        /* sage green accent */
  --indigo-700: #466fae;
  --indigo-300: #a8c1e8;
  --periwinkle: #e8eef8;
  --periwinkle-2: #dce4f2;
  --amber: #3d63a4;
  --amber-2: #6f93cc;
  --navy: #121826;          /* deep forest */
  --navy-2: #18202e;
}
body.theme-sand .dark { background: radial-gradient(1000px 600px at 70% -10%, #1b2740, transparent 60%), linear-gradient(180deg, #121826, #0a0e18); }
body.theme-sand .skia-app-frame { background: linear-gradient(180deg,#151d2e,#0d121e); }
body.theme-sand .nav.on-dark .nav-links > a, body.theme-sand .nav.on-dark .nav-item > button, body.theme-sand .nav.on-dark .signin { color: #c2cde4; }
body.theme-sand .nav.on-dark.scrolled { background: rgba(232,238,248,.92); }
body.theme-sand .dark { --d-text:#e8eef8; --d-muted:#93a3c0; }
body.theme-sand .prog { background: #fff; }
body.theme-sand .prog-frame { background: radial-gradient(130% 120% at 50% 38%,#e8eef8,#edf0f7); border-color: #dfe3f0; }
body.theme-sand .findings-card { background: #fff !important; }
body.theme-sand .findings-card [style*="rgba(255,255,255,.1)"] { border-color: #dfe3f0 !important; }
body.theme-sand section#demo { background: #e6ebf5; }
body.theme-sand .demo-stage { background: radial-gradient(700px 400px at 30% 20%, #1b2740, transparent 60%), #0d121e; }
body.theme-sand .theme-switch a.on { background: var(--indigo); color:#fff; }
body.theme-sand .demo-bg::after { background: radial-gradient(620px 380px at 50% 36%, rgba(90,122,182,.22), transparent 62%); }
body.theme-sand .demo-tablet { background:#151d2e; }
body.theme-sand .scanbar { background:linear-gradient(180deg,rgba(90,122,182,.4),transparent); border-color:var(--indigo-300); }
body.theme-sand {
  --indigo:#5a82c2; --indigo-700:#466fae; --indigo-300:#3d63a4;
  --amber:#3d63a4; --amber-2:#6f93cc;
  --ink:#283142; --ink-60:#586073; --ink-40:#828ca2; --line:#dce0ee;
  --periwinkle:#e8eef8; --periwinkle-2:#dce4f2; --paper:#f1f3f9;
}
body.theme-sand .dark { background: linear-gradient(180deg,#eef1f7,#e6ebf5) !important; color:#283142 !important; --d-text:#283142; --d-muted:#5a6479; }
body.theme-sand .dark h1, body.theme-sand .dark h2, body.theme-sand .dark h3, body.theme-sand .dark .d-strong { color:#1e2636 !important; }
body.theme-sand .dark .eyebrow { color:#3d63a4 !important; }
body.theme-sand .dark .lead, body.theme-sand .dark p, body.theme-sand .dark .d-muted { color:#5a6479 !important; }
body.theme-sand { background: #eef1f7; }
body.theme-sand .nav.on-dark { background: rgba(238,241,247,.72) !important; border-color: rgba(40,52,74,.12) !important; box-shadow: 0 16px 44px -22px rgba(40,52,74,.35) !important; }
body.theme-sand .nav.on-dark .nav-links > a, body.theme-sand .nav.on-dark .nav-item > button, body.theme-sand .nav.on-dark .signin { color:#394155 !important; }
body.theme-sand .nav.on-dark .nav-links>a:hover, body.theme-sand .nav.on-dark .nav-item>button:hover { color:#1c2230 !important; background:rgba(90,130,194,.12) !important; }
body.theme-sand .nav.on-dark.scrolled { background: rgba(238,241,247,.94) !important; border-color:#dce0ee !important; }
body.theme-sand .brand img.logo-dark, body.theme-sand .nav .logo-dark { filter:none !important; }
body.theme-sand .nav.on-dark .tag-new { background: rgba(90,130,194,.16); color:#3d63a4; }
body.theme-sand .hero-badge { background:#fff !important; border-color:#dce0ee !important; color:#586073 !important; }
body.theme-sand .hero-actions .btn:not(.btn-primary) { background:#fff !important; color:#283142 !important; border-color:#dce0ee !important; }
body.theme-sand .stat-card { background:#fff !important; border-color:#dfe3f0 !important; box-shadow: var(--shadow-1); }
body.theme-sand .stat-card .n { color:#1e2636 !important; }
body.theme-sand .stat-card .l { color:#5a6479 !important; }
body.theme-sand .stat-card .spark { background: radial-gradient(circle, rgba(90,130,194,.18), transparent 60%) !important; }
body.theme-sand .skia-app-frame { background:#fff !important; border-color:#dce0ee !important; }
body.theme-sand .skia-app-frame .bar { border-color:#e4e8f4 !important; }
body.theme-sand .skia-app-frame .bar .url { background:#ebeef6 !important; color:#79829a !important; }
body.theme-sand .acc-vis { background: radial-gradient(600px 360px at 40% 30%, #e8eef8, transparent 60%), #edf0f7 !important; border-color:#dce0ee !important; }
body.theme-sand .acc-item { border-color:#d9deec !important; }
body.theme-sand .acc-item .body .kw span { border-color:#d1d7e8 !important; color:#3d63a4 !important; }
body.theme-sand .radar-card { background:#fff !important; border-color:#dfe3f0 !important; }
body.theme-sand .radar-card svg g[stroke] { stroke: rgba(40,54,80,.14) !important; }
body.theme-sand .demo { border-color:#dce0ee !important; }
body.theme-sand .demo-stage { background: radial-gradient(620px 380px at 50% 36%, rgba(90,130,194,.16), transparent 62%), #e6ebf5 !important; }
body.theme-sand .demo-bg { background-image: linear-gradient(rgba(40,56,84,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(40,56,84,.05) 1px,transparent 1px) !important; }
body.theme-sand .demo-tablet { background:#fff !important; border-color:#dce0ee !important; }
body.theme-sand .demo-tablet .tbar { border-color:#e4e8f4 !important; }
body.theme-sand .demo-tablet .tbar .u { color:#79829a !important; }
body.theme-sand .demo-persona { background:#fff !important; border-color:#dfe3f0 !important; }
body.theme-sand .demo-persona .pn { color:#283142 !important; }
body.theme-sand .demo-steps { border-color:#dce0ee !important; }
body.theme-sand .demo-step { border-color:#dfe3f0 !important; }
body.theme-sand .demo-step.on { background: rgba(90,130,194,.08) !important; }
body.theme-sand .demo-step .s-t { color:#283142 !important; }
body.theme-sand .demo-step .s-d, body.theme-sand .demo-step .s-n { color:#5a6479 !important; }
body.theme-sand .demo-step .s-prog { background:#dfe3f0 !important; }
body.theme-sand .demo-step .s-prog i { background: var(--indigo) !important; }
body.theme-sand .fblock .lnk { color:#3d63a4 !important; }
body.theme-sand .fblock ul li::before { color:#5a82c2 !important; }
body.theme-sand .fb-vis { border-color:#dce0ee !important; }
body.theme-sand .orbit-ring { border-color: rgba(40,56,84,.14) !important; }
body.theme-sand .orbit-core { box-shadow: 0 0 50px -12px var(--indigo) !important; }
body.theme-sand .legend .li { color:#5a6479 !important; }
body.theme-sand .det-label.dark { background:#fff !important; border-color:#dce0ee !important; color:#283142 !important; box-shadow: var(--shadow-1); }
body.theme-sand .det-label.dark .pct { color:#828ca2 !important; }
body.theme-sand .theme-switch { background:#fff; border-color:#dce0ee; }
body.theme-sand .theme-switch a { color:#828ca2; }
body.theme-sand .tooth-glow { background: radial-gradient(circle at 50% 40%, rgba(90,130,194,.22), transparent 60%) !important; }
body.theme-sand .btn-primary { background: var(--indigo) !important; color:#fff !important; box-shadow: 0 12px 26px -12px rgba(90,130,194,.7) !important; }
body.theme-sand .btn-primary:hover { background: var(--indigo-700) !important; }
body.theme-sand .btn-primary .arrow { color:#fff !important; }
body.theme-sand .acc-item .ix-num { color: rgba(40,56,84,.22) !important; }
body.theme-sand .acc-item.on .ix-num { color:#3d63a4 !important; }
body.theme-sand .xscan{ --neon:#58b8e0; --neon2:#b8def0; --panel-1:#1d3a5e; --panel-2:#14233f;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(88,184,224,.2), transparent 58%),
    linear-gradient(165deg,var(--panel-1),var(--panel-2));
  border-color:rgba(88,184,224,.26);
  box-shadow:0 40px 110px -34px rgba(20,40,70,.55), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 90px -34px rgba(88,184,224,.5); }
body.theme-sand .xscan-grid{ background-image:linear-gradient(rgba(88,184,224,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(88,184,224,.10) 1px,transparent 1px); }

/* ============================================================
   THEME · SAND-BLUE — homepage dark content sections -> light sand
   (embedded product/device mockups stay dark on their own backing)
   ============================================================ */
body.theme-sand .replaces { background: linear-gradient(180deg,#eef1f7,#e6ebf5) !important; color: var(--ink) !important; }
body.theme-sand .replaces h2 { color: var(--ink) !important; }
body.theme-sand .replaces .sub { color: var(--ink-60) !important; }
body.theme-sand .replaces-vis { background: linear-gradient(180deg,#1b2740,#121826) !important; border-color: rgba(255,255,255,.08) !important; }

body.theme-sand .after { background:#fff !important; color:var(--ink) !important; border:1px solid #dfe3f0 !important; }
body.theme-sand .after h3 { color:var(--ink) !important; }
body.theme-sand .after p { color:var(--ink-60) !important; }
body.theme-sand .after .one { background:#eef1f7 !important; border-color:#dfe3f0 !important; }
body.theme-sand .after .one span { color:var(--ink-60) !important; }
body.theme-sand .after .glow { opacity:.22 !important; }

body.theme-sand .cta { background: linear-gradient(180deg,#eef1f7,#e6ebf5) !important; color:var(--ink) !important; }
body.theme-sand .cta h2 { color:var(--ink) !important; }
body.theme-sand .cta p { color:var(--ink-60) !important; }
body.theme-sand .cta .blob { opacity:.38 !important; }
body.theme-sand .cta .btn-light { background:var(--indigo) !important; color:#fff !important; }

/* ============================================================
   AUTOPILOT HOMEPAGE — hero console, carousel, fragmentation,
   AI-team tabs, why-cards, magnetic/tilt. (Opus build)
   ============================================================ */

/* ---- magnetic buttons + tilt (JS-driven, graceful without) ---- */
.magnetic { will-change: transform; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---- HERO · autopilot ---- */
.hero-auto { position: relative; overflow: hidden; padding-top: clamp(48px,6vw,96px); padding-bottom: clamp(56px,7vw,104px); }
.hero-auto .hero-grid { position: relative; z-index: 2; align-items: center; }
.hero-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-mesh span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: meshFloat 18s ease-in-out infinite; }
.hero-mesh span:nth-child(1){ width: 520px; height: 520px; background: radial-gradient(circle, rgba(90,130,194,.40), transparent 70%); top: -160px; right: -80px; }
.hero-mesh span:nth-child(2){ width: 440px; height: 440px; background: radial-gradient(circle, rgba(47,158,143,.22), transparent 70%); bottom: -180px; left: -60px; animation-delay: -6s; }
.hero-mesh span:nth-child(3){ width: 360px; height: 360px; background: radial-gradient(circle, rgba(108,111,214,.20), transparent 70%); top: 30%; left: 40%; animation-delay: -11s; }
@keyframes meshFloat { 0%,100%{ transform: translate(0,0) scale(1); } 33%{ transform: translate(40px,-30px) scale(1.08); } 66%{ transform: translate(-30px,24px) scale(.95); } }

.auto-word { position: relative; color: var(--indigo); white-space: nowrap; }
.auto-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .09em; border-radius: 2px; background: linear-gradient(90deg, var(--indigo), var(--mint)); transform: scaleX(0); transform-origin: left; animation: underliner 1s cubic-bezier(.2,.7,.2,1) .5s forwards; }
@keyframes underliner { to { transform: scaleX(1); } }

/* live console */
.hero-console { perspective: 1400px; }
.hc-frame { background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft); box-shadow: var(--shadow-float); overflow: hidden; transition: transform .2s ease; }
.hc-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.hc-traffic { display: flex; gap: 6px; }
.hc-traffic i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.hc-title { font-size: 12.5px; font-weight: 600; color: var(--ink-60); }
.hc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--indigo); }
.hc-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(25,184,134,.5); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 0%{ box-shadow: 0 0 0 0 rgba(25,184,134,.5);} 70%{ box-shadow: 0 0 0 8px rgba(25,184,134,0);} 100%{ box-shadow: 0 0 0 0 rgba(25,184,134,0);} }
.hc-feed { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 296px; background: linear-gradient(180deg, var(--paper), #fff); }
.ap-item { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px -16px rgba(20,40,70,.5); transform-origin: top; }
.ap-item.enter { animation: apIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes apIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
.ap-item.leaving { animation: apOut .4s ease forwards; }
@keyframes apOut { to { opacity: 0; transform: translateY(8px) scale(.98); height: 0; padding-top: 0; padding-bottom: 0; margin-top: -10px; } }
.ap-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex: none; background: var(--periwinkle); color: var(--indigo); }
.ap-body { min-width: 0; flex: 1; }
.ap-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sub { display: block; font-size: 12.5px; color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ap-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; flex: none; background: #e7f7f0; color: var(--mint); }
.ap-pill.warn { background: #fdeee0; color: var(--amber); }
.ap-pill.flag { background: #fdeaee; color: var(--rose); }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-60); }
.hc-foot .hc-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hc-human { color: var(--ink-40); }
.hc-play { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink-60); cursor: pointer; display: grid; place-items: center; font-size: 11px; transition: background .15s, color .15s; }
.hc-play:hover { background: var(--periwinkle); color: var(--indigo); }

/* ---- FEATURE CAROUSEL ---- */
.features-carousel { padding: clamp(56px,7vw,100px) 0; overflow: hidden; }
.fc-head { max-width: 720px; margin-bottom: clamp(28px,3.5vw,44px); }
.fc-head .h2 { margin: 12px 0 10px; }
.fc-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); cursor: grab; }
.fc-viewport.dragging { cursor: grabbing; }
.fc-track { display: flex; gap: 18px; padding: 8px 4vw; width: max-content; animation: fcScroll 60s linear infinite; }
.fc-viewport:hover .fc-track, .fc-viewport.paused .fc-track { animation-play-state: paused; }
@keyframes fcScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fc-card { flex: 0 0 320px; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft); box-shadow: 0 14px 34px -26px rgba(20,40,70,.5); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; position: relative; overflow: hidden; }
.fc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fc, var(--indigo)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.fc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(20,40,70,.55); border-color: color-mix(in srgb, var(--fc) 45%, var(--line)); }
.fc-card:hover::before { transform: scaleX(1); }
.fc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: color-mix(in srgb, var(--fc) 14%, #fff); color: var(--fc); }
.fc-name { font-size: 17px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.fc-tag { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--fc); padding: 2px 6px; border-radius: 99px; }
.fc-desc { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; flex: 1; }
.fc-go { font-size: 13px; font-weight: 600; color: var(--fc); display: inline-flex; align-items: center; gap: 6px; }
.fc-go i { transition: transform .2s; }
.fc-card:hover .fc-go i { transform: translateX(4px); }
.fc-controls { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.fc-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; flex: none; transition: background .15s, border-color .15s, transform .15s; }
.fc-btn:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: translateY(-2px); }
.fc-progress { flex: 1; height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; }
.fc-progress span { display: block; height: 100%; width: 18%; background: var(--indigo); border-radius: 99px; transition: transform .2s linear; }

/* ---- FRAGMENTATION ---- */
.frag { padding: clamp(60px,8vw,120px) 0; background: linear-gradient(180deg, #fff, var(--paper)); }
.frag-head { max-width: 760px; }
.frag-head .h1 { margin: 14px 0 16px; }
.frag-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: clamp(34px,4vw,52px) 0; }
.fstat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft); padding: 28px; box-shadow: 0 16px 38px -30px rgba(20,40,70,.5); transition: transform .2s ease, box-shadow .2s ease; }
.fstat:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20,40,70,.55); }
.fstat .fn { font-size: clamp(34px,4vw,52px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.fstat .fl { font-size: 14px; color: var(--ink-60); margin-top: 12px; max-width: 26ch; }
.frag-morph { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px,3vw,40px); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(22px,3vw,40px); box-shadow: var(--shadow-float); }
.fm-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 16px; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-chip { font-size: 12.5px; color: var(--ink-60); background: var(--paper); border: 1px solid var(--line); padding: 7px 12px; border-radius: 99px; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.frag-morph.unified .fm-chip { opacity: .35; transform: scale(.9); }
.fm-arrow { font-size: 26px; color: var(--indigo); display: grid; place-items: center; }
.fm-arrow span { display: inline-block; animation: arrowNudge 1.8s ease-in-out infinite; }
@keyframes arrowNudge { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(6px);} }
.fm-one { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, var(--indigo), var(--indigo-700)); color: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 20px 44px -22px var(--indigo); }
.fm-one-logo { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 16px; flex: none; }
.fm-one-text b { display: block; font-size: 15px; }
.fm-one-text span { font-size: 12.5px; color: rgba(255,255,255,.8); }
.fm-one-ok { margin-left: auto; color: #8ef0c8; font-size: 12px; }
.fm-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.fm-list li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink-60); }
.fm-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--mint); font-weight: 700; }

/* ---- AI TEAM tabs ---- */
.ai-team .sec-head { margin-bottom: clamp(26px,3vw,40px); }
.ait-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px,3vw,40px); border-bottom: 1px solid var(--line); padding-bottom: 0; }
.ait-tab { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-60); background: none; border: none; border-bottom: 2px solid transparent; padding: 11px 14px; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; }
.ait-tab .ait-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-40); opacity: .4; transition: all .2s; }
.ait-tab:hover { color: var(--ink); }
.ait-tab.on { color: var(--ink); border-bottom-color: var(--indigo); font-weight: 600; }
.ait-tab.on .ait-dot { background: var(--indigo); opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 18%, transparent); }
.ait-pane { display: block; }
.ait-pane[hidden] { display: none; }
.ait-pane.fade { animation: paneIn .4s ease; }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } }
.ait-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.ait-feature { grid-column: span 6; }
.ait-mini { grid-column: span 4; }
.ait-feature.card .mini-ticker, .card .mini-ticker { margin-top: 18px; }
.ait-mini.card .ic { margin-bottom: 14px; }

/* ---- WHY DOCSDOCS ---- */
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: clamp(28px,3vw,44px); }
.why-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-soft); padding: 30px; box-shadow: 0 16px 38px -30px rgba(20,40,70,.5); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; position: relative; overflow: hidden; }
.why-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.why-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(20,40,70,.55); border-color: var(--indigo-300); }
.why-card:hover::after { opacity: 1; }
.why-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--periwinkle); color: var(--indigo); display: grid; place-items: center; font-size: 22px; font-weight: 600; margin-bottom: 18px; }
.why-metric { font-size: clamp(28px,3vw,40px); font-weight: 600; letter-spacing: -.03em; color: var(--indigo); line-height: 1; }
.why-metric i { font-size: 15px; font-style: normal; font-weight: 500; color: var(--ink-40); letter-spacing: 0; }
.why-card h3 { margin: 14px 0 8px; }
.why-card p { color: var(--ink-60); font-size: 14.5px; margin: 0 0 18px; }
.why-go { font-size: 13.5px; font-weight: 600; color: var(--indigo); display: inline-flex; align-items: center; gap: 6px; }
.why-go i { transition: transform .2s; }
.why-card:hover .why-go i { transform: translateX(4px); }

@media (max-width: 920px){
  .frag-stats, .why-grid { grid-template-columns: 1fr; }
  .frag-morph { grid-template-columns: 1fr; }
  .fm-arrow { transform: rotate(90deg); }
  .ait-feature, .ait-mini { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce), (max-width: 700px){
  .hero-mesh span, .fc-track, .auto-word::after, .fm-arrow span, .hc-live i { animation: none !important; }
}

/* ============================================================
   HERO · LIVING MISSION CONTROL (Opus — the experience)
   split: copy left · living constellation right · threads in JS
   ============================================================ */
@property --bob { syntax: '<length>'; inherits: false; initial-value: 0px; }

.hx { position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center;
  padding: clamp(92px,11vh,140px) 0 clamp(64px,8vh,110px);
  --mx: 60%; --my: 40%;
  background:
    radial-gradient(120% 90% at 78% 4%, #eef2fb, transparent 58%),
    linear-gradient(180deg, #eaeef7, #e7ebf5); }
.hx-aurora { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; filter: blur(46px); opacity: .9;
  background:
    radial-gradient(30% 38% at 30% 26%, rgba(90,130,194,.30), transparent 70%),
    radial-gradient(34% 40% at 78% 24%, rgba(47,158,143,.28), transparent 70%),
    radial-gradient(40% 50% at 72% 76%, rgba(108,111,214,.28), transparent 70%),
    radial-gradient(28% 34% at 88% 56%, rgba(90,130,194,.24), transparent 70%);
  animation: hxAurora 24s ease-in-out infinite alternate; }
@keyframes hxAurora { 0%{ transform: translate(0,0) scale(1) rotate(0deg);} 50%{ transform: translate(2%,-2%) scale(1.06) rotate(2deg);} 100%{ transform: translate(-2%,2%) scale(1.02) rotate(-2deg);} }
.hx-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.hx-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background .2s;
  background: radial-gradient(440px 440px at var(--mx) var(--my), rgba(255,255,255,.5), transparent 60%); }

.hx-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
  align-items: center; gap: clamp(24px,4vw,64px); width: 100%; }

/* LEFT · copy */
.hx-copy { position: relative; z-index: 6; }
.hx-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-60);
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 15px; border-radius: 99px; box-shadow: 0 8px 22px -16px rgba(20,40,70,.5); }
.hx-badge .live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(25,184,134,.5); animation: pulseDot 1.8s infinite; }
.hx-title { font-size: clamp(44px, 5.6vw, 86px); font-weight: 600; letter-spacing: -.035em; line-height: .98; margin: 22px 0 0; }
.hx-line { display: block; overflow: hidden; padding-bottom: .04em; }
.hx-line [data-word] { display: inline-block; transform: translateY(110%); opacity: 0; }
.hx-title em { font-style: normal; position: relative; color: var(--indigo);
  background: linear-gradient(100deg, var(--indigo), #2f9e8f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hx-sub { font-size: clamp(16px,1.2vw,18px); color: var(--ink-60); line-height: 1.6; max-width: 46ch; margin: 24px 0 0; }
.hx-sub b { color: var(--ink); font-weight: 600; }
.hx-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.btn-glass { background: rgba(255,255,255,.6); color: var(--ink); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { background: #fff; }
.hx-play-ic { font-size: 11px; color: var(--indigo); }
.hx-metrics { display: flex; flex-wrap: wrap; gap: clamp(20px,2.6vw,44px); margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(40,49,66,.1); }
.hx-metric { display: flex; flex-direction: column; }
.hx-metric b { font-size: clamp(26px,2.4vw,34px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.hx-metric span { font-size: 12.5px; color: var(--ink-40); margin-top: 8px; line-height: 1.35; }

/* RIGHT · living field */
.hx-field { position: relative; z-index: 3; aspect-ratio: 1/1; width: 100%; max-width: 560px; margin-left: auto;
  pointer-events: none; }
.hx-threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.hx-threads line { stroke: url(#hx-thg); stroke-width: 1.5; stroke-dasharray: 3 7; animation: dashflow 1.4s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -20; } }

.hx-core { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px)); z-index: 4; }
.hx-core-disc { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff;
  background: radial-gradient(circle at 38% 32%, #6f93cc, var(--indigo) 55%, var(--indigo-700));
  box-shadow: 0 30px 70px -22px var(--indigo), inset 0 2px 6px rgba(255,255,255,.4); }
.hx-core-disc b { font-size: 15px; font-weight: 600; margin-top: 2px; }
.hx-core-logo { font-size: 20px; }
.hx-core-sub { font-size: 10px; color: rgba(255,255,255,.78); margin-top: 1px; }
.hx-core-ring { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; border-radius: 50%; transform: translate(-50%,-50%); border: 1.5px solid rgba(90,130,194,.4); animation: coreRing 3.4s ease-out infinite; }
.hx-core-ring.r2 { animation-delay: 1.7s; }
@keyframes coreRing { 0%{ opacity: .55; width: 132px; height: 132px; } 100%{ opacity: 0; width: 300px; height: 300px; } }
.hx-core.hot .hx-core-disc { animation: coreFlash .5s ease; }
@keyframes coreFlash { 0%,100%{ box-shadow: 0 30px 70px -22px var(--indigo), inset 0 2px 6px rgba(255,255,255,.4);} 40%{ box-shadow: 0 0 0 10px rgba(90,130,194,.18), 0 30px 80px -18px var(--indigo), inset 0 2px 6px rgba(255,255,255,.6);} }

.hx-sat { position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px));
  translate: 0 var(--bob);
  display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 9px; border-radius: 13px;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 16px 34px -20px rgba(20,40,70,.55); white-space: nowrap; z-index: 5;
  animation: satBob 6s ease-in-out infinite; will-change: transform, translate; }
.hx-sat:nth-of-type(2){ animation-duration: 7.2s; } .hx-sat:nth-of-type(4){ animation-duration: 6.6s; } .hx-sat:nth-of-type(6){ animation-duration: 7.8s; }
@keyframes satBob { 0%,100%{ --bob: 0px; } 50%{ --bob: -10px; } }
.hx-sat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; background: var(--periwinkle); color: var(--indigo); }
.hx-sat-tx { display: flex; flex-direction: column; line-height: 1.25; }
.hx-sat-tx b { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.hx-sat-tx i { font-size: 10.5px; color: var(--ink-40); font-style: normal; }
.hx-sat.hot { box-shadow: 0 0 0 4px rgba(90,130,194,.16), 0 20px 40px -18px rgba(20,40,70,.6); transition: box-shadow .2s; }
.hx-sat.hot .hx-sat-ic { background: var(--indigo); color: #fff; transition: background .2s; }

/* traveling pulse dots (JS) */
.hx-pulse { position: absolute; width: 9px; height: 9px; border-radius: 50%; z-index: 4; pointer-events: none; transform: translate(-50%,-50%);
  background: radial-gradient(circle, #fff, var(--indigo) 60%, transparent); box-shadow: 0 0 12px 2px rgba(90,130,194,.7); }

.hx-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); text-decoration: none; }
.hx-mouse { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid var(--ink-40); display: grid; justify-items: center; padding-top: 6px; }
.hx-mouse i { width: 3px; height: 7px; border-radius: 2px; background: var(--ink-40); animation: scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot { 0%{ transform: translateY(0); opacity: 1;} 70%{ transform: translateY(8px); opacity: 0;} 100%{ opacity: 0; } }

/* entrance */
.hx.in .hx-line [data-word] { animation: wordUp .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hx.in .hx-line:nth-child(1) [data-word]:nth-child(1){ animation-delay: .05s; }
.hx.in .hx-line:nth-child(1) [data-word]:nth-child(2){ animation-delay: .12s; }
.hx.in .hx-line:nth-child(2) [data-word]:nth-child(1){ animation-delay: .19s; }
.hx.in .hx-line:nth-child(2) [data-word]:nth-child(2){ animation-delay: .26s; }
.hx.in .hx-line:nth-child(3) [data-word]:nth-child(1){ animation-delay: .33s; }
.hx.in .hx-line:nth-child(3) [data-word]:nth-child(2){ animation-delay: .40s; }
@keyframes wordUp { to { transform: translateY(0); opacity: 1; } }
.hx [data-r] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.hx.in [data-r] { opacity: 1; transform: none; }
.hx.in .hx-badge { transition-delay: .15s; } .hx.in .hx-sub { transition-delay: .42s; } .hx.in .hx-cta { transition-delay: .54s; } .hx.in .hx-metrics { transition-delay: .64s; }
.hx-field { opacity: 0; transform: scale(.94); transition: opacity 1s ease .25s, transform 1.1s cubic-bezier(.2,.8,.2,1) .25s; }
.hx.in .hx-field { opacity: 1; transform: none; }

@media (max-width: 1040px){
  .hx-grid { grid-template-columns: 1fr; gap: 8px; }
  .hx-field { order: -1; max-width: 460px; margin: 0 auto; }
  .hx-sat-tx i { display: none; }
}
@media (max-width: 620px){
  .hx-field { max-width: 360px; }
  .hx-sat { padding: 6px; } .hx-sat-tx { display: none; }
  .hx-metrics { gap: 18px; }
}
/* phones: the mission-control hero is a full-viewport scene on desktop; stacked
   on a phone that 92vh min-height just creates dead space, so let it size to its
   content and keep the living constellation as a compact static topper. */
@media (max-width: 700px){
  .hx { min-height: auto; padding: clamp(64px,12vh,96px) 0 clamp(40px,7vh,64px); }
  .hx-field { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce), (max-width: 700px){
  .hx-aurora, .hx-threads line, .hx-core-ring, .hx-sat, .hx-mouse i { animation: none !important; }
  .hx .hx-line [data-word], .hx [data-r], .hx-field { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   THE COST OF FRAGMENTATION · four-pain cards (Opus)
   ============================================================ */
.tax { padding: clamp(78px,10vh,128px) 0; position: relative; }
.tax-head { max-width: 60ch; }
.tax-head .lead b { color: var(--ink); font-weight: 600; }
.tax-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 46px; }
.tax-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 24px;
  overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s; }
.tax-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: 0; transition: opacity .4s; }
.tax-card:hover { transform: translateY(-7px); box-shadow: 0 34px 64px -34px rgba(20,40,70,.45); }
.tax-top { display: flex; justify-content: space-between; align-items: center; }
.tax-tag { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px; }
.tag-red { color: #c2566f; background: rgba(194,86,111,.12); }
.tag-amber { color: #b0823a; background: rgba(176,130,58,.15); }
.tag-indigo { color: var(--indigo); background: var(--periwinkle); }
.tag-teal { color: #2f9e8f; background: rgba(47,158,143,.14); }
.tax-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--ink-40); background: #f1f3f8; }
.tax-viz { height: 98px; margin: 18px 0 16px; border-radius: 14px; background: #f6f8fc; border: 1px solid var(--line); position: relative; overflow: hidden; }
.tax-h { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 0; line-height: 1; }
.tax-h .mono { font-variant-numeric: tabular-nums; }
.tax-h-unit { font-size: 15px; color: var(--ink-40); font-weight: 500; margin-left: 2px; }
.tax-card p { font-size: 13.5px; color: var(--ink-60); line-height: 1.55; margin: 9px 0 0; }

/* error-prone viz */
.tax-viz-err { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 14px; }
.terr-claim { position: relative; display: flex; align-items: center; font-size: 11px; height: 24px; }
.terr-id { color: var(--ink-60); font-weight: 600; }
.terr-state { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 3px 8px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.s-ok { color: #2f9e8f; background: rgba(47,158,143,.14); animation: errOk 4.2s ease-in-out infinite; }
.s-bad { color: #c2566f; background: rgba(194,86,111,.16); opacity: 0; animation: errBad 4.2s ease-in-out infinite; }
.terr-claim.d2 .s-ok, .terr-claim.d2 .s-bad { animation-delay: .8s; }
@keyframes errOk { 0%,38%{ opacity: 1; } 50%,92%{ opacity: 0; } 100%{ opacity: 1; } }
@keyframes errBad { 0%,38%{ opacity: 0; transform: translateY(-50%) translateX(0); } 46%{ transform: translateY(-50%) translateX(-3px); } 52%{ transform: translateY(-50%) translateX(3px); } 56%,92%{ opacity: 1; transform: translateY(-50%) translateX(0); } 100%{ opacity: 0; } }

/* expensive viz */
.tax-viz-cost { display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding: 14px 16px; }
.tbar { width: 14px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#d9a14a,#b0823a); transform: scaleY(.18); transform-origin: bottom; opacity: .5; animation: barGrow .9s cubic-bezier(.2,.8,.2,1) forwards; }
.tbar:nth-child(2){ animation-delay: .08s; } .tbar:nth-child(3){ animation-delay: .16s; } .tbar:nth-child(4){ animation-delay: .24s; } .tbar:nth-child(5){ animation-delay: .32s; } .tbar:nth-child(6){ animation-delay: .4s; }
@keyframes barGrow { to { transform: scaleY(1); opacity: 1; } }
.tax-card:hover .tbar:last-child { animation: barThrob 1s ease-in-out infinite; }
@keyframes barThrob { 0%,100%{ transform: scaleY(1); } 50%{ transform: scaleY(1.12); } }

/* fragmented viz */
.tax-viz-frag { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 9px; padding: 18px 22px; }
.tax-viz-frag i { width: 9px; height: 9px; border-radius: 50%; background: var(--indigo); opacity: .3; animation: fragPulse 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes fragPulse { 0%,100%{ opacity: .22; transform: scale(.8); } 50%{ opacity: .9; transform: scale(1.12); } }
.tfrag-break { position: absolute; bottom: 6px; right: 9px; font-size: 9.5px; color: #c2566f; font-weight: 600; opacity: .9; }

/* time-wasting viz */
.tax-viz-time { display: grid; place-items: center; }
.tclock { position: relative; width: 62px; height: 62px; }
.tclock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tc-track { fill: none; stroke: #e2e7f0; stroke-width: 3; }
.tc-fill { fill: none; stroke: #2f9e8f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; animation: tcDrain 4s ease-in-out infinite; }
@keyframes tcDrain { 0%{ stroke-dashoffset: 97.4; } 100%{ stroke-dashoffset: 12; } }
.tc-hand { position: absolute; left: 50%; top: 50%; width: 2px; height: 20px; background: var(--ink); border-radius: 2px; transform-origin: bottom center; transform: translate(-50%,-100%); animation: tcSpin 3s linear infinite; }
@keyframes tcSpin { to { transform: translate(-50%,-100%) rotate(360deg); } }

/* the collapse strip */
.tax-collapse { margin-top: 32px; display: grid; grid-template-columns: 1fr auto 1.12fr; align-items: center; gap: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 28px; box-shadow: 0 22px 50px -36px rgba(20,40,70,.4); }
.tcol-stack { display: flex; flex-wrap: wrap; gap: 7px; }
.tcol-chip { font-size: 11.5px; color: var(--ink-60); background: #f1f3f8; border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px; transition: transform .35s, opacity .35s; }
.tax-collapse:hover .tcol-chip { opacity: .45; transform: scale(.95); }
.tcol-fold { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }
.tcol-one { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, var(--indigo), var(--indigo-300)); border-radius: 16px; padding: 16px 18px; color: #fff; box-shadow: 0 24px 50px -26px var(--indigo); }
.tcol-one-logo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 18px; flex: none; }
.tcol-one-tx b { display: block; font-size: 15px; font-weight: 600; }
.tcol-one-tx span { display: block; font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 2px; }
.tcol-one-cta { margin-left: auto; flex: none; color: #fff; font-weight: 600; font-size: 13px; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.tcol-one-cta i { transition: transform .3s; } .tcol-one-cta:hover i { transform: translateX(4px); }

@media (max-width: 1040px){ .tax-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px){ .tax-collapse { grid-template-columns: 1fr; } .tcol-fold { justify-self: start; } }
@media (max-width: 560px){ .tax-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce), (max-width: 700px){
  .s-ok, .s-bad, .tbar, .tax-viz-frag i, .tc-fill, .tc-hand { animation: none !important; }
  .s-bad { opacity: 1; position: static; transform: none; } .s-ok { display: none; }
  .tbar { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   AI TEAM · live console (Opus)
   ============================================================ */
.team { position: relative; }
.team-console { --tint: #5a82c2; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 18px; margin-top: 44px; align-items: stretch; }

/* left roster */
.team-roster { display: flex; flex-direction: column; gap: 10px; }
.trole { --tint: #5a82c2; position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 13px; align-items: center;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px 17px; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; overflow: hidden; }
.trole::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tint); opacity: 0; transition: opacity .35s; }
.trole-ava { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px;
  background: color-mix(in srgb, var(--tint) 14%, #fff); color: var(--tint); transition: background .35s, color .35s, transform .35s; }
.trole-tx b { font-size: 15px; font-weight: 600; color: var(--ink); display: block; line-height: 1.2; }
.trole-tx i { font-size: 12px; color: var(--ink-40); font-style: normal; }
.trole-st { grid-column: 2; display: none; align-items: center; gap: 7px; font-size: 12px; color: var(--tint); font-weight: 500; margin-top: 7px; }
.trole-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 0 var(--tint); animation: pulseDot 1.8s infinite; }
.trole:hover { transform: translateX(3px); box-shadow: 0 18px 38px -28px rgba(20,40,70,.4); }
.trole.on { border-color: transparent; box-shadow: 0 24px 46px -28px color-mix(in srgb, var(--tint) 60%, transparent); transform: translateX(3px); }
.trole.on::before { opacity: 1; }
.trole.on .trole-ava { background: var(--tint); color: #fff; transform: scale(1.04); }
.trole.on .trole-st { display: flex; }

/* right live stage */
.team-stage { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px 24px; overflow: hidden;
  box-shadow: 0 30px 64px -40px rgba(20,40,70,.45); display: flex; flex-direction: column; }
.ts-glow { position: absolute; top: -40%; right: -20%; width: 70%; height: 90%; pointer-events: none; filter: blur(60px); opacity: .5;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 60%, transparent), transparent 70%); transition: background .6s; }
.ts-head { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ts-ava { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; flex: none;
  background: var(--tint); color: #fff; box-shadow: 0 14px 28px -14px var(--tint); transition: background .5s; }
.ts-meta b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
.ts-meta span { display: block; font-size: 12.5px; color: var(--ink-40); margin-top: 1px; }
.ts-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--mint);
  background: rgba(47,158,143,.12); padding: 6px 12px; border-radius: 99px; }
.ts-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulseDot 1.6s infinite; }

.ts-feed { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 0 4px; min-height: 244px; }
.ts-item { display: flex; align-items: center; gap: 13px; background: #f6f8fc; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.ts-item.enter { opacity: 0; transform: translateY(-14px) scale(.98); }
.ts-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none;
  background: color-mix(in srgb, var(--tint) 13%, #fff); }
.ts-body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ts-body b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-body span { font-size: 12.5px; color: var(--ink-60); }
.ts-pill { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 600; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, #fff); padding: 4px 11px; border-radius: 99px; white-space: nowrap; }

.ts-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.ts-foot-lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }
.ts-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ts-tag { font-size: 12px; color: var(--ink-60); background: #f1f3f8; border: 1px solid var(--line); padding: 6px 12px; border-radius: 9px; }

@media (max-width: 920px){
  .team-console { grid-template-columns: 1fr; }
  .team-roster { flex-direction: row; flex-wrap: wrap; }
  .trole { flex: 1 1 240px; }
}
@media (prefers-reduced-motion: reduce), (max-width: 700px){
  .trole-dot, .ts-live i { animation: none !important; }
  .ts-item.enter { opacity: 1; transform: none; }
}

/* ============================================================
   NAV · collapse to mini island on scroll
   ============================================================ */
.nav { transition: background .25s, box-shadow .25s, border-color .25s, max-width .42s cubic-bezier(.4,0,.2,1); }
.nav-inner { transition: opacity .22s ease; }
.nav.condensed { max-width: min(540px, calc(100% - 28px)); }
.nav.condensed .nav-inner { opacity: 0; pointer-events: none; }

.nav-mini { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px;
  padding: 0 18px; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.nav.condensed .nav-mini { opacity: 1; pointer-events: auto; transition-delay: .08s; }

.nav-mini-menu { justify-self: start; margin-left: 24px; display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 8px 4px; transition: color .2s; }
.nm-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.nm-bars i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s; }
.nav-mini-menu:hover { color: var(--indigo); }
.nav-mini-logo { justify-self: center; display: flex; align-items: center; }
.nav-mini-logo img { height: 22px; width: auto; }
.nav-mini-cta { justify-self: end; }
@media (prefers-reduced-motion: reduce), (max-width: 700px){ .nav, .nav-inner, .nav-mini { transition: none !important; } }

/* ===================== Generic content pages (migration / about / how-to-shift) ===================== */
.page-hero { padding: 92px 0 64px; background: linear-gradient(180deg, var(--periwinkle), #fff); border-bottom: 1px solid var(--line); }
.page-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); margin-bottom: 16px; }
.page-title { font-size: clamp(34px, 5vw, 58px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 18px; }
.page-title .accent { color: var(--indigo); }
.page-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-60); line-height: 1.6; max-width: 60ch; margin: 0 0 28px; }
.page-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.page-sec { padding: 64px 0; }
.page-sec .page-lead { margin-bottom: 24px; }
.sec-title { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.015em; margin: 0 0 28px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.info-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-mid); background: #fff; transition: border-color .15s, box-shadow .15s; }
.info-card:hover { border-color: var(--indigo-300); box-shadow: var(--shadow-float); }
.info-card .ic-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--periwinkle); font-size: 19px; margin-bottom: 14px; }
.info-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.info-card p { font-size: 14px; color: var(--ink-60); line-height: 1.55; margin: 0; }
.page-cta-band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* numbered steps (how-to-shift) */
.step-list { display: grid; gap: 14px; counter-reset: step; max-width: 760px; }
.step-item { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-mid); background: #fff; }
.step-item::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo); color: #fff; font-weight: 600; font-size: 17px; }
.step-item h3 { font-size: 17px; font-weight: 600; margin: 4px 0 6px; letter-spacing: -.01em; }
.step-item p { font-size: 14px; color: var(--ink-60); line-height: 1.55; margin: 0; }

/* compact Migration & Resources dropdown — less empty feature panel */
.mig-mega { width: min(640px, 92vw); }
.mig-mega .mega-inner { grid-template-columns: 232px 1fr; }
.mig-mega .mega-feature { min-height: 0; gap: 20px; }

/* ===================== Migration page — rich components ===================== */
.mig-badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--indigo); background:var(--periwinkle); border:1px solid var(--indigo-300); padding:6px 13px; border-radius:var(--r-pill); margin-bottom:18px; }
.mig-badge i { width:7px; height:7px; border-radius:50%; background:var(--indigo); }

.sec-intro { font-size:16px; color:var(--ink-60); line-height:1.6; max-width:64ch; margin:-14px 0 30px; }

/* trust / stat band */
.trust-band { background:linear-gradient(180deg,#fff,var(--periwinkle)); border-block:1px solid var(--line); }
.trust-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; text-align:center; }
.trust-stat b { display:block; font-size:clamp(28px,3.4vw,40px); font-weight:600; letter-spacing:-.02em; color:var(--indigo); line-height:1; }
.trust-stat span { display:block; font-size:13.5px; color:var(--ink-60); margin-top:9px; line-height:1.4; }
.trust-note { text-align:center; font-size:13px; color:var(--ink-40); margin-top:26px; }
.trust-note a { color:var(--indigo); font-weight:600; }

/* PMS pill list */
.pill-row { display:flex; flex-wrap:wrap; gap:9px; }
.pill { font-size:13px; font-weight:500; color:var(--ink); background:#fff; border:1px solid var(--line); padding:7px 13px; border-radius:var(--r-pill); }
.pill.more { color:var(--indigo); border-color:var(--indigo-300); background:var(--periwinkle); }

/* two-column feature split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split.rev .split-media { order:-1; }
.split-media { padding:26px; border:1px solid var(--line); border-radius:var(--r-mid); background:var(--paper); }
@media(max-width:820px){ .split{ grid-template-columns:1fr; gap:24px; } .split.rev .split-media{ order:0; } }

/* guarantee / callout */
.callout { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; padding:26px 28px; border-radius:var(--r-mid); background:linear-gradient(158deg,var(--indigo),var(--indigo-700)); color:#fff; box-shadow:0 24px 50px -26px var(--indigo); }
.callout .co-ic { width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:22px; }
.callout h3 { font-size:19px; font-weight:600; margin:2px 0 8px; letter-spacing:-.01em; }
.callout p { font-size:14.5px; line-height:1.6; margin:0; color:rgba(255,255,255,.9); }

/* checklist */
.check-list { display:grid; gap:12px; max-width:720px; }
.check-item { display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start; font-size:15px; line-height:1.55; color:var(--ink); }
.check-item::before { content:"✓"; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--periwinkle); color:var(--indigo); font-weight:700; font-size:13px; }
.check-item b { font-weight:600; }

/* comparison table */
.compare-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-mid); }
.compare { width:100%; border-collapse:collapse; min-width:560px; font-size:14px; }
.compare th, .compare td { padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); }
.compare thead th { font-size:12.5px; letter-spacing:.02em; color:var(--ink-60); font-weight:600; background:var(--paper); }
.compare thead th.hl { color:var(--indigo); }
.compare tbody th { font-weight:500; color:var(--ink-60); }
.compare td.hl { background:var(--periwinkle); font-weight:600; color:var(--ink); }
.compare tr:last-child td, .compare tr:last-child th { border-bottom:0; }
.compare .yes { color:var(--indigo); font-weight:700; }
.compare .no { color:var(--ink-40); }

/* inline link band to cloud page */
.link-band { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:24px 28px; border:1px solid var(--indigo-300); border-radius:var(--r-mid); background:var(--periwinkle); }
.link-band h3 { font-size:18px; font-weight:600; margin:0 0 5px; letter-spacing:-.01em; }
.link-band p { font-size:14px; color:var(--ink-60); margin:0; max-width:60ch; }
@media(max-width:640px){ .link-band{ grid-template-columns:1fr; } }

/* FAQ */
.faq { display:grid; gap:12px; max-width:800px; }
.faq details { border:1px solid var(--line); border-radius:var(--r-mid); background:#fff; padding:2px 20px; }
.faq summary { cursor:pointer; list-style:none; padding:17px 0; font-weight:600; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--indigo); font-size:20px; font-weight:400; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 18px; font-size:14.5px; color:var(--ink-60); line-height:1.6; }