/* ==========================================================================
   anthryn — design preview (static HTML). Phase 1 + 2.
   Tokens map 1:1 to src/app/globals.css when this moves into Next.js.
   ========================================================================== */

:root {
  --paper: #f5f6fa;
  --raised: #ffffff;
  --ink: #141a3a;
  --ink-2: #4a5378;
  --ink-3: #8790ae;
  --rule: #e2e5ef;
  --rule-2: #eef0f6;

  --indigo: #4b44d9;
  --indigo-deep: #352fb0;
  --indigo-soft: #edecfe;
  --indigo-tint: #cfccfb;

  /* Data colours carry meaning everywhere on the site:
     marigold = evidence / quoted source, teal = agreement / positive,
     rose = objection / friction. */
  --marigold: #d98f06;
  --marigold-soft: #fdf2d6;
  --teal: #0e9a87;
  --teal-soft: #ddf4f0;
  --rose: #d8466a;
  --rose-soft: #fbe3e9;

  --night: #0f1336;
  --night-2: #1a1f4d;

  --shadow-lg: 0 1px 2px rgba(20, 26, 58, .05), 0 24px 60px -24px rgba(40, 44, 130, .28);
  --shadow-md: 0 1px 2px rgba(20, 26, 58, .05), 0 10px 28px -14px rgba(40, 44, 130, .22);
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;

  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Bengali",
    "Noto Sans Thai", "Noto Sans Arabic", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); }
h1 { font-size: clamp(40px, 4.9vw, 66px); line-height: 1.0; letter-spacing: -.04em; font-weight: 800; }
h2 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -.032em; font-weight: 800; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.18; letter-spacing: -.022em; font-weight: 750; }
h4 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 750; }
p { margin: 0; }
.soft { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.lede { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.small { font-size: 14px; line-height: 1.5; }
.tiny { font-size: 12.5px; line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.sec { padding: clamp(80px, 11vw, 140px) 0; }
/* (sections keep their own top padding) */
.sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.split { max-width: none; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; }
@media (max-width: 860px) { .sec-head.split { grid-template-columns: 1fr; gap: 16px; } }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 750; font-size: 15.5px; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 10px 24px -10px rgba(75, 68, 217, .7); }
.btn-primary:hover { background: var(--indigo-deep); }
.btn-ghost { background: var(--raised); border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-night { background: #fff; color: var(--night); }
.link {
  font-family: var(--font-display); font-weight: 750; font-size: 15px; color: var(--indigo);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.link svg { transition: transform .2s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* --- Nav ---------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 10px 0 22px; border-radius: 999px;
  background: color-mix(in srgb, #fff 80%, transparent);
  border: 1px solid var(--rule);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 30px -18px rgba(40, 44, 130, .35);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.035em; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--indigo);
  display: grid; place-items: center; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 0; background: none; text-decoration: none; font-size: 15px; font-weight: 550; color: var(--ink-2);
}
.nav-links a:hover, .nav-links button.nav-trigger:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--rule-2); }
.nav-trigger svg { transition: transform .2s var(--ease); }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  width: 640px; padding: 12px; border-radius: var(--r-lg); background: #fff;
  border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-dd:hover .dropdown, .has-dd:focus-within .dropdown, .has-dd.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.has-dd:hover .nav-trigger svg, .has-dd.open .nav-trigger svg { transform: rotate(180deg); }
.dropdown a { height: auto; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 12px; border-radius: var(--r-md); }
.dropdown a:hover { background: var(--paper); }
.dd-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--indigo-soft); color: var(--indigo); }
.dd-t { display: block; font-family: var(--font-display); font-weight: 750; font-size: 15px; color: var(--ink); }
.dd-d { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); margin-top: 2px; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--rule); background: #fff;
  align-items: center; justify-content: center; }
.mobile-sheet { display: none; }
@media (max-width: 960px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-sheet.open { display: block; position: fixed; inset: 92px 12px auto 12px; z-index: 59;
    background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    padding: 14px; max-height: calc(100vh - 110px); overflow: auto; }
  .mobile-sheet a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 600; }
  .mobile-sheet a:hover { background: var(--paper); }
  .mobile-sheet .ms-group { padding: 10px 14px 4px; font-size: 13px; color: var(--ink-3); }
}
@media (max-width: 480px) { .nav-bar { padding-left: 16px; } .nav-cta .btn-primary { padding: 0 14px; } }

/* --- Generic surfaces ----------------------------------------------------- */
.panel { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.card { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-md); }
.well { background: var(--paper); border-radius: var(--r-md); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.pill.indigo { background: var(--indigo-soft); color: var(--indigo-deep); }
.pill.teal { background: var(--teal-soft); color: #0a6f61; }
.pill.rose { background: var(--rose-soft); color: #a92d4e; }
.pill.gold { background: var(--marigold-soft); color: #8a5b00; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; flex: none; }
.live-dot { position: relative; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 99px; border: 1.5px solid currentColor; opacity: 0;
  animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

.avatar { width: 40px; height: 40px; border-radius: 99px; object-fit: cover; flex: none; background: var(--indigo-soft);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--indigo-deep);
  border: 2px solid #fff; box-shadow: 0 2px 8px -2px rgba(20, 26, 58, .25); }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 58px; height: 58px; font-size: 16px; }

/* ==========================================================================
   HOME — hero "the room"
   ========================================================================== */
.hero { padding: clamp(36px, 6vw, 72px) 0 clamp(60px, 8vw, 100px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 .quiet { color: var(--ink-3); font-weight: 700; display: block; }
.hero .lede { margin-top: 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 26px; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-3); max-width: 46ch; }
.hero-note svg { flex: none; margin-top: 2px; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.room { position: relative; aspect-ratio: 1 / .92; min-height: 480px; }
.room-bg { position: absolute; inset: 4% 2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(75, 68, 217, .10), rgba(75, 68, 217, .03) 70%, transparent);
}
.room-ring { position: absolute; inset: 9% 6%; border-radius: 50%; border: 1px dashed var(--indigo-tint); }
.room svg.tethers { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tethers line { stroke: var(--indigo-tint); stroke-width: 1.2; stroke-dasharray: 3 5; transition: stroke .3s; }
.tethers line.on { stroke: var(--indigo); stroke-dasharray: 5 6; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }

.brief {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(330px, 62%); z-index: 3;
  padding: 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
}
.brief-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brief h4 { margin-top: 12px; font-size: 16px; }
.brief .q { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.alt { margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: var(--paper); }
.alt-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.alt-row b { font-family: var(--font-display); }
.alt-line { font-size: 13px; color: var(--ink); margin: 3px 0 8px; line-height: 1.35; }
.bar { height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--indigo); transition: width .8s var(--ease); }
.bar.teal > i { background: var(--teal); }
.bar.gold > i { background: var(--marigold); }
.bar.rose > i { background: var(--rose); }
.brief-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.agreed { margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: var(--teal-soft); color: #0a5f54;
  font-size: 13px; line-height: 1.45; display: none; }
.agreed.show { display: block; animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.seats { position: absolute; inset: 0; z-index: 4; }
.speaking { margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.45; min-height: 116px; }
.speaking .who-now { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa0cf; margin-bottom: 6px; }
.speaking .native { display: block; font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
.speaking .gloss { color: #c3c7e8; }
.speaking .fade { animation: rise .4s var(--ease); }
.seat { position: absolute; translate: -50% -50%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seat .avatar { width: 62px; height: 62px; transition: transform .35s var(--ease), box-shadow .35s; }
.seat.on .avatar { transform: scale(1.1); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--indigo); }
.seat .who { text-align: center; line-height: 1.2; background: rgba(255, 255, 255, .85); padding: 3px 8px; border-radius: 8px; }
.seat .who b { display: block; font-family: var(--font-display); font-size: 13px; }
.seat .who span { font-size: 11.5px; color: var(--ink-3); }
.seat .vote { position: absolute; top: -4px; right: -6px; width: 24px; height: 24px; border-radius: 99px; font-size: 11px; font-weight: 800;
  font-family: var(--font-display); display: grid; place-items: center; background: var(--indigo); color: #fff;
  border: 2px solid #fff; transform: scale(0); transition: transform .3s var(--ease); }
.seat .vote.b { background: var(--marigold); }
.seat.voted .vote { transform: scale(1); }
.bubble {
  position: absolute; z-index: 6; width: 250px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #fff;
  font-size: 13.5px; line-height: 1.45; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none;
}
.bubble.show { opacity: 1; transform: none; }
.bubble .native { font-size: 15px; line-height: 1.5; display: block; margin-bottom: 6px; }
.bubble .gloss { color: #c3c7e8; }
.bubble .meta { display: block; margin-top: 8px; font-size: 11.5px; color: #9aa0cf; }
.room-caption { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 640px) {
  .room { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
  .room-bg, .room-ring, .room svg.tethers, .room-caption { display: none; }
  .seats { position: static; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .seat { position: static; translate: none; }
  .seat .avatar { width: 46px; height: 46px; }
  .seat .who { display: none; }
  .brief { position: static; translate: none; width: 100%; }
}

/* Market band — endonyms as the visual */
.markets { padding: 22px 0 0; }
.markets-lead { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); font-weight: 650; letter-spacing: -.02em;
  color: var(--ink-2); max-width: 820px; line-height: 1.35; }
.markets-lead b { color: var(--ink); font-weight: 800; }
.endonyms { margin-top: 30px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); }
.endo { padding: 22px 6px 20px 0; border-bottom: 1px solid var(--rule); }
.endo .script { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.endo .en { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 760px) { .endonyms { grid-template-columns: repeat(2, 1fr); } }

/* Problem rows */
.problem-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); }
.problem-grid .sticky { position: sticky; top: 120px; align-self: start; display: grid; gap: 20px; }
.qrow { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--rule); }
.qrow:last-child { border-bottom: 1px solid var(--rule); }
.qrow .team { font-size: 14px; font-weight: 600; color: var(--ink-3); padding-top: 6px; }
.qrow .ask { font-family: var(--font-display); font-size: clamp(20px, 2vw, 25px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.qrow .why { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } .problem-grid .sticky { position: static; } .qrow { grid-template-columns: 1fr; gap: 6px; } }

/* Workflow */
.flow { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }
.steps { display: grid; gap: 8px; }
.step { text-align: left; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border-radius: var(--r-lg);
  border: 1px solid transparent; background: transparent; position: relative; overflow: hidden; }
.step:hover { background: rgba(255, 255, 255, .6); }
.step[aria-selected="true"] { background: #fff; border-color: var(--rule); box-shadow: var(--shadow-md); }
.step .n { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; background: var(--rule-2); color: var(--ink-2); }
.step[aria-selected="true"] .n { background: var(--indigo); color: #fff; }
.step h4 { font-size: 17px; }
.step p { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.step .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--indigo); }
.step[aria-selected="true"] .prog.run { animation: prog 6s linear forwards; }
@keyframes prog { to { width: 100%; } }
.flow-stage { padding: 22px; min-height: 470px; }
.flow-view { display: none; }
.flow-view.on { display: block; animation: rise .45s var(--ease); }
@media (max-width: 960px) { .flow { grid-template-columns: 1fr; } .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .flow-stage { padding: 14px; } }

/* Workspaces tabs (home) */
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--rule);
  width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: none;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.ws { margin-top: 26px; }
.ws-panel { display: none; grid-template-columns: .82fr 1.18fr; gap: 0; overflow: hidden; }
.ws-panel.on { display: grid; animation: rise .45s var(--ease); }
.ws-copy { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--rule); }
.ws-copy ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 12px; }
.ws-copy li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.ws-copy li svg { margin-top: 3px; color: var(--indigo); }
.ws-copy .link { margin-top: auto; padding-top: 10px; }
.ws-stage { padding: clamp(18px, 2.4vw, 30px); background: linear-gradient(180deg, #fafbfe, #f2f3fa); }
@media (max-width: 960px) { .ws-panel.on { grid-template-columns: 1fr; } .ws-copy { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* Night section — simulation */
.night { background: var(--night); color: #e7e9fb; border-radius: clamp(28px, 4vw, 48px); margin: 0 12px; overflow: hidden; position: relative; }
.night h2, .night h3, .night h4 { color: #fff; }
.night .lede, .night .soft { color: #b3b8e0; }
.night .sec-head { position: relative; z-index: 2; }

/* Transcreation */
.tc { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; align-items: start; }
.tc-master { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.tc-master .hl { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.tc-out { padding: 28px; }
.tc-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tc-tab { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-weight: 600; font-size: 14px; }
.tc-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.tc-view { display: none; } .tc-view.on { display: block; animation: rise .4s var(--ease); }
.tc-local { font-size: 23px; line-height: 1.45; font-weight: 600; }
.tc-back { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--marigold); background: var(--marigold-soft); border-radius: 0 10px 10px 0; font-size: 14.5px; color: #5b4200; }
.notes { margin-top: 16px; display: grid; gap: 10px; }
.note { display: grid; grid-template-columns: 112px 1fr; gap: 12px; font-size: 14px; color: var(--ink-2); align-items: start; }
@media (max-width: 860px) { .tc { grid-template-columns: 1fr; } .note { grid-template-columns: 1fr; gap: 4px; } }

/* Grounded vs scripted */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vs .q { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.vs .q b { font-family: var(--font-display); font-size: 19px; letter-spacing: -.015em; }
.vs-card { padding: 26px; }
.vs-card.scripted { background: transparent; border: 1px dashed var(--ink-3); box-shadow: none; }
.vs-card .who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vs-card .ans { font-size: 15.5px; line-height: 1.65; }
.vs-card.scripted .ans { color: var(--ink-2); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
mark.ev { background: var(--marigold-soft); color: inherit; padding: 0 2px; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(217, 143, 6, .45); }
@media (max-width: 860px) { .vs { grid-template-columns: 1fr; } }
.layers { margin-top: 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.layer { padding: 20px; border-right: 1px solid var(--rule); }
.layer:last-child { border-right: 0; }
.layer .ln { font-family: var(--font-display); font-weight: 800; color: var(--indigo); font-size: 13px; }
.layer h4 { margin-top: 6px; }
.layer p { margin-top: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 900px) { .layers { grid-template-columns: 1fr; } .layer { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* Teams */
.team-panel { display: none; } .team-panel.on { display: grid; animation: rise .45s var(--ease); }
.team-panel { grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; margin-top: 26px; }
.tp-col { padding: clamp(24px, 3vw, 40px); }
.tp-col.before { background: var(--paper); border-right: 1px solid var(--rule); }
.tp-col h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.tp-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.tp-col li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.tp-col li svg { margin-top: 4px; }
.tp-col.after li { color: var(--ink); }
@media (max-width: 860px) { .team-panel { grid-template-columns: 1fr; } .tp-col.before { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* Comparison table */
.cmp-wrap { overflow-x: auto; border-radius: var(--r-xl); }
table.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-xl); overflow: hidden; }
.cmp th, .cmp td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 14.5px; vertical-align: top; }
.cmp thead th { font-family: var(--font-display); font-size: 14px; font-weight: 750; color: var(--ink-2); background: var(--paper); }
.cmp thead th.us { color: #fff; background: var(--indigo); }
.cmp td.us { background: #f7f6ff; color: var(--ink); font-weight: 550; }
.cmp tbody th { font-weight: 650; font-size: 14.5px; width: 24%; }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.yes, .no, .part { display: inline-flex; align-items: center; gap: 8px; }
.yes svg { color: var(--teal); } .no svg { color: var(--ink-3); } .part svg { color: var(--marigold); }

/* Honest by design */
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.honest .card { padding: 30px; }
.honest h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; margin-bottom: 18px; }
.honest dl { margin: 0; display: grid; gap: 16px; }
.honest dt { font-family: var(--font-display); font-weight: 750; font-size: 15.5px; }
.honest dd { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 0; font-family: var(--font-display); font-size: 19px; font-weight: 750; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--rule); display: grid; place-items: center; flex: none;
  transition: transform .25s var(--ease), background .2s; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq .a { padding: 0 0 24px; color: var(--ink-2); font-size: 16px; max-width: 64ch; display: grid; gap: 12px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* Final CTA */
.cta-box { padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start;
  background: var(--ink); color: #dfe2f7; border-radius: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; }
.cta-box h2 { color: #fff; }
.cta-box .lede { color: #b3b8e0; }
.cta-steps { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: s; }
.cta-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 15px; color: #c9cdf0; counter-increment: s; }
.cta-steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.form { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 16px; }
.form label, .form .lbl { font-size: 13.5px; font-weight: 650; color: var(--ink); display: block; margin-bottom: 7px; }
.form input, .form select { width: 100%; height: 46px; border-radius: 11px; border: 1px solid var(--rule); padding: 0 14px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.form input:focus, .form select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--indigo-soft); border-color: var(--indigo); color: var(--indigo-deep); }
.form-done { display: none; text-align: center; padding: 30px 10px; }
.form.sent > :not(.form-done) { display: none; }
.form.sent .form-done { display: block; }
@media (max-width: 900px) { .cta-box { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form .row2 { grid-template-columns: 1fr; } }

/* Footer */
.foot { padding: 72px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h5 { margin: 0 0 14px; font-family: var(--font-display); font-size: 14px; font-weight: 750; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; font-size: 14.5px; color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* Preview ribbon — this is a design file, not the site */
.ribbon { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 80; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; box-shadow: var(--shadow-lg); }
.ribbon a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-weight: 600; }
.ribbon a[aria-current="page"] { background: #fff; color: var(--ink); }
@media (max-width: 640px) { .ribbon > span { display: none; } }

.motion-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; font-weight: 600; }
.motion-toggle.light { border-color: var(--rule); background: #fff; color: var(--ink-2); }

/* ==========================================================================
   MOCKS — shared by home tabs, workflow and product pages
   ========================================================================== */
.m { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; font-size: 14px; }
.m + .m { margin-top: 14px; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule-2); }
.m-title { font-family: var(--font-display); font-weight: 750; font-size: 14.5px; letter-spacing: -.01em; }
.m-sub { font-size: 12.5px; color: var(--ink-3); }
.m-body { padding: 18px; }
.m-foot { padding: 12px 18px; border-top: 1px solid var(--rule-2); font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.m-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .m-grid2 { grid-template-columns: 1fr; } }

.hbar { display: grid; grid-template-columns: minmax(110px, 1.1fr) 2fr 44px; gap: 12px; align-items: center; padding: 7px 0; }
.hbar .lab { font-size: 13.5px; line-height: 1.3; }
.hbar .lab small { display: block; color: var(--ink-3); font-size: 12px; }
.hbar .val { font-family: var(--font-display); font-weight: 800; font-size: 14px; text-align: right; }
.hbar .bar { height: 9px; }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field .fl { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.field .fi { min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; font-size: 14px; }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pcard { position: relative; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 10px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.pcard.sel { border-color: var(--indigo); background: #faf9ff; }
.pcard .ck { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 99px; background: var(--indigo); color: #fff; display: none; place-items: center; }
.pcard.sel .ck { display: grid; }
.pcard b { font-size: 12.5px; line-height: 1.2; font-family: var(--font-display); }
.pcard span { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
@media (max-width: 560px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }

.quote-box { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 14px 16px; border-radius: 12px; background: var(--paper); font-size: 13.5px; }
.quote-box .tot { font-family: var(--font-display); font-weight: 800; font-size: 18px; }

.feed { display: grid; gap: 10px; }
.contrib { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; }
.contrib .nm { font-family: var(--font-display); font-weight: 750; font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.contrib p { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.contrib .re { font-size: 12px; color: var(--indigo); margin-top: 6px; display: inline-flex; gap: 6px; align-items: center; }
.contrib.dis { border-color: #f3c3cf; background: #fffafb; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Heatmap */
.heat { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 420px; border-radius: 16px; overflow: hidden; user-select: none; touch-action: none; }
.ad { position: absolute; inset: 0; background: linear-gradient(160deg, #2a1f6e 0%, #6b2fa4 55%, #e8774a 100%); color: #fff; padding: 9% 8%;
  display: flex; flex-direction: column; }
.ad .brandline { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(12px, 1.3vw, 15px); letter-spacing: -.02em; }
.ad .tag { font-size: 11px; padding: 4px 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }
.ad .ahl { margin-top: 9%; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.03em; }
.ad .asub { margin-top: 3%; font-size: clamp(11px, 1.1vw, 13.5px); opacity: .85; }
.ad .car { margin-top: auto; width: 100%; }
.ad .price { display: flex; justify-content: space-between; align-items: end; margin-top: 4%; }
.ad .price b { font-family: var(--font-display); font-size: clamp(15px, 1.7vw, 20px); }
.ad .price small { display: block; font-size: 10.5px; opacity: .75; }
.ad .acta { padding: 9px 14px; border-radius: 99px; background: #fff; color: #2a1f6e; font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 1.1vw, 13px); }
.heat-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split, 50%)); }
.heat-layer .ad { filter: grayscale(.85) brightness(.55); }
.heat-blobs { position: absolute; inset: 0; }
.heat-blobs i { position: absolute; border-radius: 50%; filter: blur(14px); opacity: .95; }
.heat-pin { position: absolute; z-index: 3; width: 26px; height: 26px; border-radius: 99px; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 12px;
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); translate: -50% -50%; }
.heat-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: #fff; translate: -1px 0; }
.heat-handle button { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 99px; border: 0; background: #fff; color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3); display: grid; place-items: center; cursor: ew-resize; }
.heat-labels { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.heat-labels span { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: rgba(15, 19, 54, .7); color: #fff; }
.views { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--rule-2); gap: 2px; }
.views button { height: 30px; padding: 0 12px; border-radius: 99px; border: 0; background: none; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.views button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.regions { display: grid; gap: 8px; }
.region { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; }
.region .heat-pin { position: static; translate: none; width: 26px; height: 26px; background: var(--ink); color: #fff; box-shadow: none; }
.region b { font-family: var(--font-display); font-size: 13.5px; display: block; }
.region span { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: block; }
.score { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.score small { color: var(--ink-3); font-weight: 600; font-size: 11px; }

/* Segments */
.seg-stage { position: relative; height: 340px; border-radius: 14px; background: var(--paper); overflow: hidden; }
.seg-dot { position: absolute; width: 16px; height: 16px; border-radius: 99px; translate: -50% -50%; left: 50%; top: 50%;
  transition: left 1.1s var(--ease), top 1.1s var(--ease); box-shadow: 0 0 0 2px #fff; }
.seg-col { position: absolute; bottom: 10px; translate: -50% 0; font-size: 12px; font-weight: 650; color: var(--ink-2); text-align: center; line-height: 1.25;
  transition: opacity .5s; white-space: nowrap; }
.seg-col small { display: block; color: var(--ink-3); font-weight: 500; }
.seg-stage[data-mode="demo"] .seg-col.mot, .seg-stage[data-mode="mot"] .seg-col.demo { opacity: 0; }
.seg-ring { position: absolute; translate: -50% -50%; border-radius: 99px; border: 1.5px dashed; opacity: 0; transition: opacity .6s .6s; }
.seg-stage[data-mode="mot"] .seg-ring { opacity: .55; }

/* Price chart */
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-3); }
.chart .ln { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }

/* Data table inside mocks */
.dt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dt th { text-align: left; font-weight: 650; color: var(--ink-3); font-size: 12px; padding: 0 8px 8px; border-bottom: 1px solid var(--rule); }
.dt td { padding: 10px 8px; border-bottom: 1px solid var(--rule-2); }
.dt td.r, .dt th.r { text-align: right; }
.dt tr.best td { background: #f5fbf9; }

/* Matrix */
.matrix { display: grid; grid-template-columns: 110px repeat(3, 1fr); gap: 6px; font-size: 12.5px; }
.matrix .h { color: var(--ink-3); font-weight: 650; display: flex; align-items: end; padding-bottom: 2px; }
.matrix .rl { display: flex; align-items: center; font-weight: 600; line-height: 1.25; }
.matrix .c { height: 54px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; }

/* Survey */
.qtypes { display: flex; flex-wrap: wrap; gap: 6px; }
.qt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--rule); font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #fff; }
.qt.on { border-color: var(--indigo); color: var(--indigo-deep); background: var(--indigo-soft); }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scale div { text-align: center; }
.scale .col { height: 80px; display: flex; align-items: flex-end; justify-content: center; }
.scale .col i { width: 70%; border-radius: 6px 6px 3px 3px; background: var(--indigo-tint); }
.scale .col i.hi { background: var(--indigo); }
.scale small { font-size: 11.5px; color: var(--ink-3); }

/* Browser frame (CX review) */
.browser { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.browser-bar .dots { display: flex; gap: 5px; } .browser-bar .dots i { width: 9px; height: 9px; border-radius: 99px; background: #d5d9e6; }
.browser-bar .url { flex: 1; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); display: flex; align-items: center; padding: 0 10px; gap: 6px; }
.page-mock { position: relative; padding: 18px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.sk { background: var(--rule-2); border-radius: 6px; height: 10px; }
.annot { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; }
.annot .heat-pin { position: static; translate: none; width: 24px; height: 24px; font-size: 11px; }
.annot.obs .heat-pin { background: var(--marigold); color: #fff; }
.annot.pred .heat-pin { background: var(--rose); color: #fff; }

/* Constellation (simulation) */
.const { position: relative; height: 470px; }
.const .disc { position: absolute; border-radius: 99px; border: 1px solid rgba(207, 204, 251, .18); background: radial-gradient(circle, rgba(124, 118, 255, .14), transparent 70%); translate: -50% -50%; }
.const .node { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; z-index: 2; }
.const .node .avatar { width: 54px; height: 54px; border-color: rgba(255, 255, 255, .9); transition: box-shadow .4s, transform .4s var(--ease); }
.const .node.done .avatar { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--teal); }
.const .node.talk .avatar { transform: scale(1.12); box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff; }
.const .node span { font-size: 12px; color: #aab0dc; }
.const .core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(300px, 70%); z-index: 3; padding: 20px; border-radius: 20px;
  background: rgba(26, 31, 77, .85); border: 1px solid rgba(207, 204, 251, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.const .core .big { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -.03em; line-height: 1; }
.const .core .big small { font-size: 18px; color: #8f95c8; font-weight: 700; }
.const .core .bar { background: rgba(255, 255, 255, .12); margin-top: 14px; }
.const .core .bar > i { background: linear-gradient(90deg, var(--indigo), #8f88ff); }
.sim-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; position: relative; z-index: 2; }
.night .contrib { border-color: rgba(207, 204, 251, .16); background: rgba(255, 255, 255, .04); }
.night .contrib .nm { color: #fff; }
.night .contrib p { color: #c3c7e8; }
.night .contrib .re { color: #a9a4ff; }
.night .contrib.dis { border-color: rgba(216, 70, 106, .45); background: rgba(216, 70, 106, .08); }
.sim-feed { max-height: 470px; overflow: hidden; display: grid; gap: 10px; align-content: start; }
.sim-feed .contrib { animation: rise .5s var(--ease); }
@media (max-width: 960px) { .sim-grid { grid-template-columns: 1fr; } .const { height: 420px; } }
@media (max-width: 560px) { .const .node .avatar { width: 42px; height: 42px; } .const .node span { display: none; } }

/* History / evidence drawer */
.hist { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 340px; }
.hist-list { border-right: 1px solid var(--rule-2); }
.hist-item { display: grid; gap: 4px; padding: 14px 18px; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; }
.hist-item.on { background: #faf9ff; box-shadow: inset 3px 0 0 var(--indigo); }
.hist-item b { font-family: var(--font-display); font-size: 14px; }
.hist-item .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--ink-3); font-size: 12px; }
.drawer { padding: 18px; display: grid; gap: 12px; align-content: start; }
.src { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--marigold-soft); font-size: 13px; color: #5b4200; }
.src b { font-family: var(--font-display); }
@media (max-width: 640px) { .hist { grid-template-columns: 1fr; } .hist-list { border-right: 0; } }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.p-hero { padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 5vw, 64px); }
.crumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.crumb a { text-decoration: none; color: var(--ink-2); }
.p-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.p-hero h1 { font-size: clamp(38px, 4.4vw, 58px); }
.p-hero h1 .quiet { color: var(--ink-3); font-weight: 700; display: block; }
.p-area { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-weight: 650; font-size: 15px; color: var(--indigo-deep); }
.p-area .dd-ico { width: 36px; height: 36px; }
@media (max-width: 900px) { .p-hero-grid { grid-template-columns: 1fr; } }
.p-main { padding: clamp(18px, 2.5vw, 30px); background: linear-gradient(180deg, #fafbfe, #f0f1f9); }
.ftable { display: grid; border-top: 1px solid var(--rule); }
.frow { display: grid; grid-template-columns: .8fr 1.2fr 1.1fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.frow.head { padding: 14px 0; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.frow h4 { font-size: 18px; }
.frow p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.frow .ben { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ink); }
.frow .ben svg { color: var(--teal); margin-top: 4px; }
@media (max-width: 860px) { .frow { grid-template-columns: 1fr; gap: 8px; } .frow.head { display: none; } }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gallery > div > .cap { margin-top: 14px; }
.gallery .cap h4 { font-size: 17px; }
.gallery .cap p { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr; } }
.asks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.ask-q { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.015em; line-height: 1.3; }
.ask-q small { display: block; margin-top: 10px; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0; }
@media (max-width: 860px) { .asks { grid-template-columns: 1fr; } }
.limit { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--rule); }
.limit .li { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--marigold-soft); color: var(--marigold); }
.next-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.next-areas a { display: grid; gap: 8px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--rule); background: #fff; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.next-areas a:hover { border-color: var(--indigo); transform: translateY(-2px); }
.next-areas a span { font-size: 14px; color: var(--ink-2); }
@media (max-width: 860px) { .next-areas { grid-template-columns: 1fr; } }

/* ==========================================================================
   USE CASES PAGE
   ========================================================================== */
.uc-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.uc-index a { padding: 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--rule); text-decoration: none; display: grid; gap: 6px; }
.uc-index a:hover { border-color: var(--indigo); }
.uc-index b { font-family: var(--font-display); font-size: 15.5px; }
.uc-index span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 960px) { .uc-index { grid-template-columns: 1fr 1fr; } }
.uc { padding: clamp(64px, 8vw, 110px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 90px; }
.uc-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.uc-copy { display: grid; gap: 20px; position: sticky; top: 110px; }
.uc-who { display: flex; gap: 8px; flex-wrap: wrap; }
.uc-decisions { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.uc-decisions li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.uc-uses { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-uses a { text-decoration: none; }
.ba { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; overflow: hidden; }
.ba .tp-col { padding: 22px; }
.ba .tp-col li { font-size: 14.5px; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: 1fr; } .uc-copy { position: static; } }
@media (max-width: 640px) { .ba { grid-template-columns: 1fr; } .ba .tp-col.before { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* Night section needs its own top padding (it follows another .sec). */
.sec.night { padding-top: clamp(80px, 11vw, 140px); }
.tc-master .hl { margin: 0; }
.seat .who { white-space: nowrap; }
.note .pill { justify-self: start; }
.tc-master .well { margin-top: 10px !important; }
.rnum { width: 26px; height: 26px; border-radius: 99px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 12px; flex: none; }

/* Grid children default to min-width:auto and can push the page wider than the phone. */
.hero-grid > *, .flow > *, .problem-grid > *, .sec-head > *, .uc-grid > *, .tc > *, .faq > *, .p-hero-grid > *,
.ws-panel > *, .sim-grid > *, .cta-box > *, .m-grid2 > *, .vs > *, .honest > *, .gallery > * { min-width: 0; }
.tabs { max-width: 100%; }
@media (max-width: 480px) { h1 { font-size: 38px; } .ws-copy { padding: 22px; } .ws-stage { padding: 12px; } }
.region .rnum { display: inline-flex; color: #fff; font-size: 12px; line-height: 1; }

/* --- Workspaces: scroll-pinned stepper ------------------------------------ */
.ws-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ws-count { display: none; flex: none; font-size: 13.5px; color: var(--ink-3); text-align: right; line-height: 1.3; }
.ws-count b { font-family: var(--font-display); color: var(--ink); font-size: 15px; }
.ws-hint { display: block; font-size: 12px; }
.tab { position: relative; }
.pin-track.pinned { height: calc(var(--n) * 75vh + 100vh); }
.pin-track.pinned .pin-sticky { position: sticky; top: 92px; height: calc(100vh - 92px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
.pin-track.pinned .ws-count { display: block; }
.pin-track.pinned .ws { margin-top: 18px; }
.pin-track.pinned .ws-panel.on { max-height: calc(100vh - 200px); }
.pin-track.pinned .ws-stage { overflow: hidden; }
.pin-track.pinned .heat { max-width: 300px; }
.pin-track.pinned .seg-stage { height: 280px; }
/* each tab fills a hairline as you scroll through its step */
.pin-track.pinned .tab::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .5; transform: scaleX(var(--p, 0)); transform-origin: left; }
.pin-track.pinned .tab[aria-selected="true"]::after { opacity: .8; }

/* Segment labels on narrow screens */
@media (max-width: 640px) { .seg-col { font-size: 10.5px; white-space: normal; width: 24%; } .seg-col small { display: none; } }

/* "How it works" pinned: progress lines follow scroll instead of a timer. */
.pin-track.pinned .step .prog { animation: none; width: calc(var(--p, 0) * 100%); }
.pin-track.pinned .flow { width: 100%; }
.pin-track.pinned .tab { padding: 0 14px; font-size: 14px; }
.pin-track.pinned .ws-hint { display: none; }

/* --- Workspaces step rail (replaces the pill tab bar) ----------------------- */
.ws-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 6px; background: #fff;
  border: 1px solid var(--rule); border-radius: 24px; box-shadow: var(--shadow-md); }
.ws-step { position: relative; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 14px 14px 20px; border: 0; border-radius: 18px; background: transparent; text-align: left;
  transition: background-color .3s var(--ease); }
.ws-step:hover { background: var(--paper); }
.ws-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--rule-2); color: var(--ink-3); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.ws-name { font-family: var(--font-display); font-weight: 750; font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink-2); }
.ws-meta { font-size: 12px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-line { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 3px; border-radius: 3px; background: var(--rule-2); overflow: hidden; }
.ws-line > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--indigo); transition: width .25s var(--ease); }
.ws-step[aria-selected="true"] { background: #f6f5ff; box-shadow: inset 0 0 0 1px var(--indigo-tint); }
.ws-step[aria-selected="true"] .ws-ico { background: var(--indigo); color: #fff; transform: scale(1.04); box-shadow: 0 8px 18px -8px rgba(75, 68, 217, .8); }
.ws-step[aria-selected="true"] .ws-name { color: var(--ink); }
.ws-step[aria-selected="true"] .ws-line > i { width: 100%; }
/* pinned: each line follows scroll; finished steps turn teal */
.pin-track.pinned .ws-step .ws-line > i { width: calc(var(--p, 0) * 100%); transition: none; }
.ws-step.done .ws-ico { background: var(--teal-soft); color: var(--teal); }
.ws-step.done .ws-line > i { background: var(--teal); }
.ws-step.done .ws-name { color: var(--ink); }
.pin-track.pinned .ws { margin-top: 16px; }
@media (max-width: 1100px) { .ws-meta { display: none; } .ws-step { padding-bottom: 18px; } }
@media (max-width: 960px) {
  .ws-rail { grid-template-columns: repeat(6, minmax(176px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .ws-rail::-webkit-scrollbar { display: none; }
}

/* How it works: finished steps */
.step.done .n { background: var(--teal-soft); color: var(--teal); }
.pin-track.pinned .step.done .prog { background: var(--teal); }
.ws-meta { display: none; }
.ws-ico { grid-row: auto; }
.ws-step { min-height: 76px; padding-bottom: 18px; }

/* ==========================================================================
   Compact pass: hero and simulation (user: both read too big)
   ========================================================================== */
.hero { padding: clamp(24px, 4vw, 48px) 0 clamp(32px, 4vw, 56px); }
.hero h1 { font-size: clamp(38px, 4.2vw, 56px); }
.hero .lede { margin-top: 20px; font-size: clamp(16px, 1.25vw, 18px); }
.hero-ctas { margin-top: 26px; }
.hero-note { margin-top: 18px; }
.room { aspect-ratio: 1 / .8; min-height: 0; max-height: 500px; }
.seat .avatar { width: 54px; height: 54px; }
.brief { width: min(300px, 58%); padding: 15px; }
.alt { margin-top: 8px; padding: 8px 11px; }
.alt-line { margin: 2px 0 6px; }
.speaking { min-height: 98px; margin-top: 10px; }
.sec.night { padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px); }
.night .sec-head { margin-bottom: 28px; }
.night h2 { font-size: clamp(28px, 3vw, 40px); }
.const { height: 360px; }
.const .node .avatar { width: 46px; height: 46px; }
.const .core { padding: 16px; width: min(260px, 64%); }
.const .core .big { font-size: 32px; }
.sim-feed { max-height: 360px; }
@media (max-width: 960px) { .const { height: 340px; } }
.w-card { width: min(310px, 100%); padding: 18px; }
.w-facts dd { font-size: 13.5px; }
/* Phone layout must win over the compact pass above. */
@media (max-width: 640px) {
  .room { aspect-ratio: auto; max-height: none; }
  .brief { width: 100%; }
  .seat .avatar { width: 44px; height: 44px; }
  .districts { gap: 2px; }
  .district { padding: 8px 10px; }
  .d-endo { font-size: 19px; }
}


/* ==========================================================================
   Hero district world
   ========================================================================== */
.hero-world { padding: clamp(20px, 3vw, 36px) 0 clamp(36px, 4vw, 56px); overflow: hidden; }
.hero-world .hero-grid { grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 3vw, 40px); }
.live-pill { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-md); }
.live-pill .dot { color: var(--teal); }
.live-pill [lang] { color: var(--indigo-deep); font-weight: 700; }

.world { position: relative; min-width: 0; }
.world::before { content: ""; position: absolute; inset: 4% -6% 8% -2%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(75, 68, 217, .10), rgba(75, 68, 217, .03) 60%, transparent),
              radial-gradient(circle, rgba(20, 26, 58, .07) 1px, transparent 1.2px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.w-scene { width: 100%; height: auto; display: block; overflow: visible; transition: opacity .24s var(--ease), transform .24s var(--ease); }
.w-scene.swap { opacity: 0; transform: translateY(8px) scale(.985); }
.w-person { cursor: pointer; outline: none; }
.w-person .w-ring { transform-box: fill-box; transform-origin: center; animation: wring 2.4s var(--ease) infinite; }
.w-person .w-vote { opacity: 0; transition: opacity .3s; }
.w-person.voted .w-vote { opacity: 1; }
@keyframes wring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.w-bob { transform-box: fill-box; animation: wbob 3.2s ease-in-out infinite; }
@keyframes wbob { 50% { transform: translateY(-1.6px); } }

.hs-study { position: absolute; top: 2%; left: 0; z-index: 4; width: 250px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .92);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hs-top { display: flex; justify-content: space-between; align-items: center; }
.hs-title { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 15px; letter-spacing: -.01em; }
.hs-q { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.hs-alt { margin-top: 9px; }
.hs-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 5px; line-height: 1.3; }
.hs-row b { font-family: var(--font-display); margin-right: 4px; }
.hs-row .num { font-family: var(--font-display); font-weight: 800; }
.hs-alt .bar { height: 5px; }
.hs-alt .bar > i { transition: width .6s var(--ease); }
.hs-foot { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

.w-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.w-bubble { position: absolute; width: 236px; translate: -50% -100%; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg); animation: rise .35s var(--ease); }
.w-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); transform: translateX(-50%) rotate(45deg); }
.w-bubble.left { translate: -86% -100%; } .w-bubble.left::after { left: 86%; }
.w-bubble.right { translate: -14% -100%; } .w-bubble.right::after { left: 14%; }
.w-bhead { display: flex; justify-content: space-between; align-items: center; }
.w-bhead .pill { height: 22px; font-size: 11px; }
.w-bubble p { font-size: 13.5px; line-height: 1.45; margin-top: 8px; color: var(--ink); }
.w-by { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.w-by .dot { color: var(--indigo); }

.w-card { position: absolute; right: 0; top: 6%; width: min(310px, 100%); padding: 18px; z-index: 6; animation: rise .35s var(--ease); }
.w-card[hidden] { display: none; }
.w-card-top { display: flex; justify-content: space-between; align-items: center; }
.w-close { width: 32px; height: 32px; border-radius: 99px; border: 1px solid var(--rule); background: #fff; display: grid; place-items: center; color: var(--ink-2); }
.w-card-who { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.w-card-who h4 { font-size: 19px; }
.w-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0 0; }
.w-facts dt { font-size: 12px; color: var(--ink-3); }
.w-facts dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.w-quote { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--marigold); background: var(--marigold-soft); border-radius: 0 10px 10px 0; font-size: 14px; color: #5b4200; line-height: 1.5; }

.w-bar { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: -6px; flex-wrap: wrap; position: relative; z-index: 3; }
.w-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.w-hint svg { width: 14px; height: 14px; flex: none; }
.w-switch { display: grid; grid-template-columns: 40px minmax(170px, auto) 40px; align-items: center; gap: 8px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-md); }
.w-switch button { width: 40px; height: 40px; border-radius: 99px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-2); }
.w-switch button.next { background: var(--indigo-soft); color: var(--indigo); }
.w-switch button:hover { background: var(--paper); }
.w-switch div { text-align: center; line-height: 1.2; }
.w-switch b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: .03em; }
.w-switch span { font-size: 12px; color: var(--ink-3); }

.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
.hero-stats { font-size: 14.5px; color: var(--ink-2); max-width: 44ch; line-height: 1.5; }
.hero-stats b { color: var(--ink); }
.dchips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dchip { display: inline-flex; align-items: baseline; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff;
  font-size: 16px; font-weight: 600; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; align-items: center; }
.dchip small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.dchip:hover { border-color: var(--ink-3); }
.dchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.dchip[aria-pressed="true"] small { color: #aab0dc; }

@media (max-width: 1100px) { .hero-foot { flex-direction: column; align-items: flex-start; } .dchips { justify-content: flex-start; } }
@media (max-width: 1000px) { .hero-world .hero-grid { grid-template-columns: 1fr; } .world { margin-top: 8px; } }
@media (max-width: 640px) {
  .hs-study { position: relative; width: 100%; margin-bottom: 8px; }
  .w-bubble { width: 190px; }
  .w-bubble p { font-size: 12.5px; }
  .w-card { position: relative; top: auto; margin-top: 10px; width: 100%; }
  .w-switch { width: 100%; grid-template-columns: 40px 1fr 40px; }
  .dchips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .dchip { flex: none; }
}
.hero-world .hero-grid { grid-template-columns: .86fr 1.14fr; }
.hero-world h1 { font-size: clamp(36px, 3.7vw, 52px); }
.hero-world .lede { font-size: clamp(16px, 1.15vw, 17.5px); }
.w-bubble { width: 218px; }
.dchip { height: 36px; font-size: 15px; padding: 0 12px; }
/* Small screens: one column (must come after the desktop column rule above). */
@media (max-width: 1000px) { .hero-world .hero-grid { grid-template-columns: 1fr; } }
.w-stage { position: relative; }

/* ==========================================================================
   Round 4: full-width shell, lighter type, living city, room, use cases
   ========================================================================== */
/* Full width: a 1600px shell with fluid gutters, for the menu and content. */
.wrap { max-width: 1600px; padding: 0 clamp(20px, 4vw, 64px); }
h2 { font-weight: 700; letter-spacing: -.035em; }
h3 { font-weight: 700; }

/* Hero type: large, light, one rotating word that names the decision */
.hero-world .hero-grid { grid-template-columns: .78fr 1.22fr; gap: clamp(16px, 2vw, 32px); }
.hero-h1 { font-size: clamp(42px, 4.6vw, 76px) !important; font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.hero-h1 .rot { display: inline-block; color: var(--indigo); font-weight: 600; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hero-h1 .rot.out { opacity: 0; transform: translateY(.18em); }
.hero-lede { font-size: clamp(17px, 1.3vw, 20px) !important; color: var(--ink-2); max-width: 34ch; margin-top: 22px; }

/* Canvas: bigger, bleeds to the right edge of the shell */
.world { margin-right: calc(-1 * clamp(0px, 3vw, 48px)); }
.w-stage { margin: -10px -12px 0 -24px; }
.w-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--indigo-tint);
  color: var(--indigo-deep); background: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.w-bubble { width: 232px; padding: 13px 15px; border-radius: 18px; }
.w-bubble p { font-size: 14.5px; line-height: 1.42; }
.w-bhead { gap: 8px; flex-wrap: wrap; }
.w-reply { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.w-by em { font-style: normal; margin-left: 6px; color: var(--teal); font-weight: 600; }
.w-by .dot { color: var(--marigold); }
.w-person, .w-walker { cursor: pointer; outline: none; }
.w-walker .w-hov { opacity: 0; transition: opacity .2s; }
.w-walker:hover .w-hov, .w-walker:focus-visible .w-hov { opacity: 1; }
.w-person:focus-visible circle[r="15"] { stroke-width: 3; }
.w-tip { position: absolute; translate: -50% -100%; z-index: 7; display: grid; gap: 3px; padding: 11px 13px; min-width: 190px; border-radius: 14px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); pointer-events: none; animation: rise .2s var(--ease); }
.w-tip .w-chip { justify-self: start; background: transparent; color: #c9c5ff; border-color: rgba(201, 197, 255, .4); margin-bottom: 4px; }
.w-tip b { font-family: var(--font-display); font-size: 14.5px; }
.w-tip span { font-size: 12.5px; color: #c3c7e8; line-height: 1.35; }
.w-tip .w-doing { color: #ffd88a; }
.w-tip .faint { color: #8f95c8; margin-top: 3px; }
.w-switch b { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 14px; }
.w-card .w-chip { height: 22px; }

/* The room, back as its own section */
.room-sec { padding-top: clamp(56px, 7vw, 96px); }
.room-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.room-grid > * { min-width: 0; }
.room-copy { display: grid; gap: 18px; }
.room-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.room-points li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.room-points .pill { justify-self: start; }
@media (max-width: 1000px) { .room-grid { grid-template-columns: 1fr; } }

/* Use cases by team */
.uc2 { display: none; grid-template-columns: 1fr 1.1fr; overflow: hidden; margin-top: 26px; }
.uc2.on { display: grid; animation: rise .45s var(--ease); }
.uc2-l { padding: clamp(24px, 3vw, 44px); display: grid; gap: 26px; align-content: start; background: var(--paper); border-right: 1px solid var(--rule); }
.uc2-block h4 { margin-bottom: 14px; }
.uc2-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.uc2-block li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.uc2-block li svg { margin-top: 4px; }
.uc2-block.after li { color: var(--ink); }
.uc2-block.after li svg { color: var(--teal); }
.uc2-r { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; }
.uc2-r h3 { font-size: clamp(20px, 1.7vw, 24px); }
.qlist { list-style: none; counter-reset: q; margin: 18px 0 0; padding: 0; }
.qlist li { counter-increment: q; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.qlist li:last-child { border-bottom: 1px solid var(--rule); }
.qlist li::before { content: "“"; font-size: 30px; line-height: .9; color: var(--indigo-tint); font-weight: 800; }
.uc2-links { margin-top: auto; padding-top: 22px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uc2-links .pill { text-decoration: none; }
.uc2-links .link { margin-left: auto; }
@media (max-width: 900px) { .uc2.on { grid-template-columns: 1fr; } .uc2-l { border-right: 0; border-bottom: 1px solid var(--rule); } }

@media (max-width: 1000px) { .hero-world .hero-grid { grid-template-columns: 1fr; } .world { margin-right: 0; } .w-stage { margin: 0; } }
@media (max-width: 640px) { .room-points li { grid-template-columns: 1fr; gap: 6px; } .w-bubble { width: 196px; } .w-bubble p { font-size: 13px; } }
/* Fit the whole district plus its switcher inside one screen. */
.w-stage { width: min(100% + 36px, calc((100vh - 250px) * 568 / 540)); margin: -12px auto 0; }
.hero-world { padding-top: clamp(8px, 2vw, 24px); }
.w-bubble { width: 212px; padding: 11px 13px; }
.w-bubble p { font-size: 13.5px; margin-top: 6px; }
.w-bar { margin-top: 0; }
.w-bubble, .w-bubble.left, .w-bubble.right { translate: none; }
.w-bubble::after, .w-bubble.left::after, .w-bubble.right::after { left: var(--tail, 50%); }

/* Round 5: sectors, steady bubbles, a slightly bigger canvas */
.w-stage { width: min(100% + 64px, calc((100vh - 200px) * 568 / 540)); margin: -24px auto 0; }
.world { margin-right: calc(-1 * clamp(0px, 4vw, 64px)); }
.w-bubble { width: 216px; transition: opacity .3s var(--ease), transform .3s var(--ease); animation: bubble-in .4s var(--ease); }
.w-bubble.leaving { opacity: 0; transform: translateY(-6px) scale(.97); }
.w-bubble.lifted::after { display: none; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.w-bubbles.dim .w-bubble { opacity: .25; }
.dchip i { width: 9px; height: 9px; border-radius: 99px; flex: none; }
.dchip { gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.dchip[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 1000px) { .world { margin-right: 0; } .w-stage { width: 100%; margin: 0; } }

/* Round 6: smaller copy column, bigger canvas */
@media (min-width: 1001px) {
  .hero-world .hero-grid { grid-template-columns: minmax(340px, .6fr) 1.4fr; gap: 0; }
  .hero-h1 { font-size: clamp(38px, 3.5vw, 58px) !important; }
  .hero-lede { font-size: clamp(16px, 1.1vw, 18px) !important; max-width: 32ch; margin-top: 18px; }
  .hero-world .hero-ctas { margin-top: 22px; }
  .hero-world .btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .hero-world .hero-note { font-size: 13px; max-width: 40ch; }
  .live-pill { margin-bottom: 16px; }
  .world { margin-right: calc(-1 * clamp(0px, 4vw, 64px)); margin-left: -40px; }
  .w-stage { width: min(100% + 80px, calc((100vh - 150px) * 568 / 540)); margin: -36px auto -8px; }
}
@media (min-width: 1001px) {
  .w-stage { width: min(100% + 120px, calc((100vh - 96px) * 568 / 540)); margin: -64px auto -20px; }
  .world { margin-left: -60px; }
}
@media (min-width: 1001px) {
  .hero-world { padding-top: 0; }
  .hero-world .hero-grid { align-items: start; }
  .hero-copy { padding-top: clamp(48px, 9vh, 120px); }
  .w-stage { width: min(100% + 180px, calc((100vh - 30px) * 568 / 540)); margin: -40px auto -30px; }
  .world { margin-left: -90px; margin-right: calc(-1 * clamp(0px, 5vw, 90px)); }
}

/* Round 7: keep the canvas below the menu, tidy the switcher row and chips */
@media (min-width: 1001px) {
  .hero-world { padding-top: 12px; }
  .hero-copy { padding-top: clamp(28px, 7vh, 96px); }
  .w-stage { width: min(100% + 180px, calc((100vh - 120px) * 568 / 540)); margin: 0 auto -24px; }
}
.w-bar { flex-direction: column-reverse; gap: 8px; margin-top: 0; }
.w-hint { font-size: 12.5px; }
.hero-foot { flex-wrap: nowrap; }
.dchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; justify-content: flex-start; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.dchips::-webkit-scrollbar { display: none; }
.dchip { flex: none; }
.hero-stats { flex: none; max-width: 38ch; }
@media (max-width: 1100px) { .hero-foot { flex-wrap: wrap; } }

/* Profile card: hover (w-tip.pf) and pinned on click (w-card.pf) */
.pf { background: rgba(255, 255, 255, .97); color: var(--ink); border: 1px solid var(--rule); border-radius: 22px; padding: 20px 22px 18px;
  box-shadow: 0 2px 4px rgba(20, 26, 58, .04), 0 24px 48px -18px rgba(40, 44, 130, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.w-tip.pf { display: block; width: 300px; min-width: 0; translate: none; gap: 0; pointer-events: none; animation: bubble-in .25s var(--ease); }
.w-card.pf { width: min(320px, 100%); }
.pf-top { display: flex; align-items: center; gap: 10px; }
.pf-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--indigo-tint); color: var(--indigo);
  font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pf-id { margin-left: auto; font-size: 12.5px; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-top .w-close { margin-left: 8px; }
.pf-who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pf-who .avatar { width: 42px; height: 42px; }
.pf-name { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.pf-sub { margin-top: 3px; font-size: 14px; color: var(--ink-3); line-height: 1.35; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 16px 0 0; }
.pf-grid .wide { grid-column: 1 / -1; }
.pf-grid dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pf-grid dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.pf-foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.pf-live { color: var(--indigo); font-weight: 700; }
.w-card.pf .w-quote { margin-top: 14px; }
.w-tip.pf span { color: inherit; }
.w-tip.pf .pf-chip { color: var(--indigo); }
.w-tip.pf .pf-id, .w-tip.pf .pf-sub { color: var(--ink-3); }
.w-tip.pf .pf-live { color: var(--indigo); }

/* ==========================================================================
   One roster, every kind of decision (replaces the single-study room)
   ========================================================================== */
.studies-sec { padding-top: clamp(64px, 8vw, 112px); }
.st-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.st-grid > * { min-width: 0; }
.st-copy { display: grid; gap: 18px; position: sticky; top: 110px; }
.st-list { display: grid; gap: 4px; margin-top: 8px; }
.st-item { position: relative; overflow: hidden; display: grid; gap: 2px; text-align: left; padding: 13px 16px; border-radius: 16px; border: 1px solid transparent; background: transparent; }
.st-item:hover { background: rgba(255, 255, 255, .7); }
.st-item[aria-selected="true"] { background: #fff; border-color: var(--rule); box-shadow: var(--shadow-md); }
.st-type { font-family: var(--font-display); font-weight: 750; font-size: 15.5px; color: var(--ink); }
.st-q { font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }
.st-item[aria-selected="true"] .st-q { color: var(--ink-2); }
.st-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--indigo); }
.st-item.run .st-prog { animation: prog 9.2s linear forwards; }

.st-panel { padding: clamp(20px, 2.6vw, 32px); }
.st-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.st-head h3 { margin-top: 10px; font-size: clamp(20px, 1.8vw, 26px); }
.st-head .soft { margin-top: 4px; font-size: 15px; }
.st-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 8px; margin-top: 22px; }
.st-tok { position: relative; display: grid; justify-items: center; }
.st-tok .avatar { width: 100%; max-width: 46px; height: auto; aspect-ratio: 1; font-size: 12px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--rule);
  opacity: .45; filter: grayscale(.5); transition: opacity .3s, filter .3s, box-shadow .3s, transform .3s var(--ease); }
.st-tok.v-a .avatar { opacity: 1; filter: none; box-shadow: 0 0 0 2.5px var(--indigo); transform: scale(1.04); }
.st-tok.v-b .avatar { opacity: 1; filter: none; box-shadow: 0 0 0 2.5px var(--marigold); transform: scale(1.04); }
.st-code { position: absolute; bottom: -6px; font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 99px;
  background: #fff; color: var(--ink-3); border: 1px solid var(--rule); }
.st-meta { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.st-meta b { color: var(--ink); }
.st-tally { display: grid; gap: 12px; margin-top: 18px; }
.st-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 14.5px; }
.st-l { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #fff; background: var(--indigo); }
.st-opt.b .st-l { background: var(--marigold); }
.st-n { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.st-tally .bar { height: 8px; }
.st-tally .bar > i { transition: width .25s var(--ease); }
.st-voice { margin-top: 18px; min-height: 92px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; }
.st-voice-in { display: grid; grid-template-columns: 32px 1fr; gap: 12px; animation: rise .4s var(--ease); }
.st-who { display: block; font-size: 12px; color: #9aa0cf; }
.st-native { display: block; font-size: 15.5px; margin-top: 4px; line-height: 1.5; }
.st-say { display: block; font-size: 14.5px; color: #dfe2f7; margin-top: 3px; line-height: 1.45; }
.st-synth { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--teal-soft); color: #0a5f54; font-size: 14.5px; line-height: 1.45;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.st-synth.show { opacity: 1; transform: none; }
.st-synth .pill { flex: none; background: #fff; }
.st-foot { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.st-foot .link { font-size: 13.5px; }
@media (max-width: 1000px) { .st-grid { grid-template-columns: 1fr; } .st-copy { position: static; } .st-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .st-wall { grid-template-columns: repeat(6, 1fr); } .st-list { grid-template-columns: 1fr; } }

/* ==========================================================================
   Round 8: smaller type, even sections that fit one window
   ========================================================================== */
h2 { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.12; }
h3 { font-size: clamp(18px, 1.5vw, 22px); }
.lede { font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.6; }
.sec { padding: clamp(56px, 6vw, 88px) 0; }
.sec-head { gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); }
.sec-head.split { gap: 32px; }
.sec.night { padding: clamp(48px, 5vw, 72px) 0; }
.hero-h1 { font-size: clamp(36px, 3.3vw, 54px) !important; }
.hero-lede { font-size: clamp(15.5px, 1.05vw, 17px) !important; }
.pin-track.pinned .pin-sticky > .wrap, .pin-track.pinned .pin-sticky > .flow { max-height: calc(100vh - 110px); }

/* --- Problem: four teams, four open questions ---------------------------- */
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pb-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 18px 18px 20px; display: grid; gap: 8px; align-content: start; }
.pb-card h3 { font-size: 17px; line-height: 1.3; }
.pb-card p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.pb-team { font-size: 12.5px; font-weight: 650; color: var(--indigo-deep); margin-top: 6px; }
.pb-vis { position: relative; height: 128px; border-radius: 14px; background: var(--paper); overflow: hidden; }
.pv-concepts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 22px 16px; align-items: end; }
.pv-concepts i { height: 70%; border-radius: 10px; background: #fff; border: 1.5px dashed var(--indigo-tint); }
.pv-concepts i.hi { height: 92%; border: 0; background: linear-gradient(180deg, var(--indigo-tint), var(--indigo)); }
.pv-concepts span { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 99px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); }
.pv-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 34px; }
.pv-ads b { border-radius: 10px; background: linear-gradient(150deg, #2a1f6e, #6b2fa4 60%, #e8774a); color: #fff; font-family: var(--font-display); font-size: 22px; display: grid; place-items: center; }
.pv-ads b.b { background: linear-gradient(150deg, #0e9a87, #14324a); }
.pv-ads em { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-style: normal; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.pv-price { display: flex; align-items: center; justify-content: space-around; padding: 0 12px; }
.pv-price i { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: var(--rule); z-index: 0; }
.pv-price span { position: relative; z-index: 1; padding: 7px 10px; border-radius: 10px 10px 10px 2px; background: #fff; border: 1px solid var(--rule); font-family: var(--font-display); font-weight: 750; font-size: 14px; }
.pv-price span.hi { background: var(--marigold); border-color: var(--marigold); color: #fff; transform: translateY(-14px) rotate(-4deg); box-shadow: var(--shadow-md); }
.pv-docs span { position: absolute; width: 46%; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); font-size: 12.5px; font-weight: 650; box-shadow: var(--shadow-md); }
.pv-docs span:nth-child(1) { left: 8%; top: 14%; transform: rotate(-7deg); }
.pv-docs span:nth-child(2) { left: 40%; top: 38%; transform: rotate(5deg); }
.pv-docs span:nth-child(3) { left: 14%; top: 62%; transform: rotate(-2deg); }
@media (max-width: 1100px) { .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pb-grid { grid-template-columns: 1fr; } }

/* --- Studies: pinned stepper with a different visual per study ------------ */
.studies-sec { padding-top: clamp(40px, 4vw, 64px); }
.st-grid { grid-template-columns: minmax(300px, .62fr) 1.38fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.pin-track.pinned .st-copy, .st-copy { position: static; gap: 12px; }
.st-list { gap: 2px; margin-top: 4px; }
.st-item { grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 10px 12px; }
.st-num { width: 30px; height: 30px; border-radius: 10px; background: var(--rule-2); color: var(--ink-2); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.st-item[aria-selected="true"] .st-num { background: var(--indigo); color: #fff; }
.st-item.done .st-num { background: var(--teal-soft); color: var(--teal); }
.st-type { display: block; font-size: 14.5px; }
.st-q { display: block; font-size: 12.5px; }
.pin-track.pinned .st-item .st-prog { animation: none; width: calc(var(--p, 0) * 100%); }
.st-panel { padding: clamp(18px, 2vw, 26px); }
.st-head h3 { margin-top: 8px; font-size: clamp(18px, 1.5vw, 22px); }
.st-head .soft { font-size: 14px; }
.st-strip { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 8px 10px; border-radius: 14px; background: var(--paper); }
.st-wall { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; flex: 1; min-width: 0; }
.st-tok { margin-left: -6px; }
.st-tok:first-child { margin-left: 0; }
.st-tok .avatar { width: 28px; height: 28px; max-width: none; font-size: 9px; border-width: 1.5px; box-shadow: 0 0 0 1.5px #fff; transform: none; }
.st-tok.v-a .avatar { box-shadow: 0 0 0 2px var(--indigo); transform: translateY(-2px); }
.st-tok.v-b .avatar { box-shadow: 0 0 0 2px var(--marigold); transform: translateY(-2px); }
.st-meta { margin: 0; flex: none; font-size: 12.5px; }
.st-body { margin-top: 14px; min-height: 236px; }
.st-voice { margin-top: 12px; min-height: 66px; padding: 11px 14px; border-radius: 14px; }
.st-native { font-size: 14px; margin-top: 2px; }
.st-say { font-size: 13.5px; }
.st-synth { margin-top: 10px; padding: 10px 12px; font-size: 13.5px; }
.st-foot { margin-top: 10px; }
.sb-note { margin-top: 8px; font-size: 12px; color: var(--ink-3); }

/* headline: two ad-like option cards */
.sb-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sb-ad { display: grid; gap: 14px; align-content: space-between; min-height: 220px; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, #f4f2ff, #fff); border: 1px solid var(--indigo-tint); }
.sb-ad.b { background: linear-gradient(160deg, #fff6e2, #fff); border-color: #f2d8a2; }
.sb-ad p { font-family: var(--font-display); font-size: clamp(18px, 1.5vw, 23px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.sb-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.sb-row .bar { height: 8px; } .sb-row .bar > i { transition: width .25s var(--ease); }

/* price: bar chart + objections */
.sb-price { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: center; }
.sb-price svg { width: 100%; height: auto; overflow: visible; }
.sb-bar { fill: var(--indigo-tint); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .6s var(--ease) var(--d); }
.sb-bar.pick { fill: var(--indigo); } .sb-bar.low { fill: #f3c3cf; }
.go .sb-bar { transform: scaleY(1); }
.sb-v { font-family: var(--font-display); font-weight: 800; font-size: 13px; fill: var(--ink); opacity: 0; transition: opacity .3s .6s; }
.go .sb-v { opacity: 1; }
.sb-l { font-size: 13px; fill: var(--ink-2); font-weight: 600; }
.sb-obj { display: grid; gap: 10px; }
.sb-obj div { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--paper); font-size: 13.5px; color: var(--ink-2); }
.sb-obj .pill { justify-self: start; }

/* concepts: ranked tiles with win rings */
.sb-concepts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sb-c { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--rule);
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease) var(--d), transform .4s var(--ease) var(--d); }
.go .sb-c { opacity: 1; transform: none; }
.sb-c:first-child { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.sb-rank { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 99px; background: var(--rule-2); font-size: 11px; font-weight: 800; display: grid; place-items: center; font-family: var(--font-display); }
.sb-c:first-child .sb-rank { background: var(--c); color: #fff; }
.sb-ring { position: relative; width: 84px; height: 84px; }
.sb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sb-arc { stroke-dasharray: 0 100; transition: stroke-dasharray .9s var(--ease) var(--d); }
.go .sb-arc { stroke-dasharray: var(--v) 100; }
.sb-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; }
.sb-cn { font-family: var(--font-display); font-size: 14px; line-height: 1.25; }
.sb-why { font-size: 12px; color: var(--ink-3); }

/* claims: trust gauges + segment table */
.sb-claim { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; }
.sb-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-g { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 10px; border-radius: 16px; background: var(--paper); }
.sb-g svg { width: 100%; max-width: 150px; }
.sb-garc { stroke-dasharray: 0 100; transition: stroke-dasharray 1s var(--ease); }
.sb-g.teal .sb-garc { stroke: var(--teal); } .sb-g.gold .sb-garc { stroke: var(--marigold); }
.go .sb-garc { stroke-dasharray: var(--v) 100; }
.sb-g b { font-family: var(--font-display); font-size: 24px; margin-top: -18px; }
.sb-g span { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.sb-g small { font-size: 11.5px; color: var(--ink-3); }
.sb-segs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sb-segs th { text-align: left; font-size: 11.5px; color: var(--ink-3); font-weight: 650; padding: 0 6px 8px; border-bottom: 1px solid var(--rule); }
.sb-segs td { padding: 9px 6px; border-bottom: 1px solid var(--rule-2); }
.sb-segs .r { text-align: right; }

/* creative: two ad thumbnails with attention dots */
.sb-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sb-cr { display: grid; gap: 8px; }
.sb-thumb { position: relative; height: 180px; border-radius: 16px; padding: 18px; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.sb-thumb b { font-family: var(--font-display); font-size: 21px; line-height: 1.1; margin-top: 18px; max-width: 80%; }
.sb-thumb small { font-size: 12.5px; opacity: .85; margin-top: 6px; }
.sb-cta { margin-top: auto; align-self: flex-start; font-style: normal; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: #fff; color: var(--ink); }
.sb-tag { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.sb-thumb em { position: absolute; width: 56px; height: 56px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 50, .85), rgba(255, 200, 0, .35) 60%, transparent);
  opacity: 0; transform: scale(.4); transition: opacity .5s var(--ease) var(--d), transform .5s var(--ease) var(--d); }
.go .sb-thumb em { opacity: 1; transform: none; }
.sb-stop { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; font-size: 13px; color: var(--ink-2); }
.sb-stop b { font-family: var(--font-display); font-size: 20px; color: var(--ink); }

/* markets: tiles with relevance bars */
.sb-markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-m { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid transparent;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease) var(--d), transform .35s var(--ease) var(--d); }
.go .sb-m { opacity: 1; transform: none; }
.sb-m.top { background: var(--teal-soft); border-color: #a8e2d8; }
.sb-mh { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.sb-mh b { font-family: var(--font-display); font-size: 14.5px; }
.sb-mh .num { font-family: var(--font-display); font-weight: 800; }
.sb-code { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: #fff; color: var(--ink-2); border: 1px solid var(--rule); }
.sb-m .bar { height: 6px; background: #fff; } .sb-m .bar > i { width: 0; transition: width .7s var(--ease) var(--d); }
.go .sb-m .bar > i { width: calc(var(--v) * 1%); }
.sb-m small { font-size: 12px; color: var(--ink-2); line-height: 1.35; }

@media (max-width: 1000px) { .st-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sb-price, .sb-claim { grid-template-columns: 1fr; } .sb-concepts { grid-template-columns: 1fr 1fr; } .sb-markets { grid-template-columns: 1fr 1fr; }
  .st-strip { flex-wrap: wrap; } .st-wall { flex-wrap: wrap; gap: 4px; } .st-tok { margin-left: 0; }
}

/* --- Use cases pinned: compact so it fits --------------------------------- */
.pin-track.pinned .uc2 { margin-top: 16px; }
.pin-track.pinned .uc2-l, .pin-track.pinned .uc2-r { padding: 22px 28px; }
.pin-track.pinned .uc2-l { gap: 16px; }
.pin-track.pinned .qlist li { padding: 11px 0; font-size: 16.5px; }
.uc2-block li { font-size: 14.5px; }
.st-wall { gap: 4px; }
.st-tok, .st-tok:first-child { margin-left: 0; }
.st-tok .avatar { width: 27px; height: 27px; }
.st-body { min-height: 214px; }
/* Shorter scroll per step: enough to read each step, no dead scrolling. */
.pin-track.pinned { height: calc(var(--n) * 48vh + 100vh); }
/* Panel strip: 24 faces share the available width and never run under the count. */
.st-wall { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.st-tok { min-width: 0; margin: 0; }
.st-tok .avatar { width: 100%; max-width: 27px; height: auto; aspect-ratio: 1; }
.st-meta { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .st-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); } .st-meta { white-space: normal; } }
/* Overlapping face stack: full-size faces, always room for the count. */
.st-wall { display: flex; flex-wrap: nowrap; gap: 0; overflow: hidden; padding: 3px 2px; }
.st-tok { flex: none; margin-left: -7px; }
.st-tok:first-child { margin-left: 0; }
.st-tok .avatar { width: 26px; height: 26px; max-width: none; aspect-ratio: auto; font-size: 8.5px; border: 1.5px solid #fff; }
.st-tok.v-a .avatar, .st-tok.v-b .avatar { transform: none; position: relative; }
@media (max-width: 760px) { .st-wall { flex-wrap: wrap; row-gap: 4px; } }
.st-tok { margin-left: -9px; } .st-tok:first-child { margin-left: 0; }

/* Frozen sections: heading + content sized to one window */
.pin-track.pinned .pin-sticky { justify-content: center; padding: 12px 0; overflow: hidden; }
.pin-track.pinned .sec-head { margin-bottom: 18px; }
.pin-track.pinned .sec-head h2 { font-size: clamp(24px, 2vw, 32px); }
.pin-track.pinned .sec-head .lede { font-size: 15px; }
.pin-track.pinned .flow-stage { min-height: 0; padding: 16px; }
.pin-track.pinned .step { padding: 14px; }
.pin-track.pinned .step p { font-size: 13.5px; }
.pin-track.pinned .flow .m-body { padding: 14px 16px; }
.pin-track.pinned .flow .field { margin-bottom: 9px; }
.pin-track.pinned .flow .fi { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
#how, #workspaces { padding-top: 24px; padding-bottom: 24px; }

/* ==========================================================================
   Round 9: rebuilt transcreation, grounded, comparison, FAQ, CTA, footer
   ========================================================================== */
/* Face strip: spaced faces, then a +N bubble */
.st-wall { display: flex; gap: 5px; overflow: hidden; padding: 3px 2px; }
.st-tok, .st-tok:first-child { margin-left: 0; }
.st-tok:nth-child(n+16) { display: none; }
.st-tok .avatar { width: 28px; height: 28px; font-size: 9px; }
.st-more { flex: none; height: 28px; min-width: 40px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px; }

/* Transcreation */
.tx { display: grid; grid-template-columns: .9fr 64px 1.5fr; align-items: stretch; overflow: hidden; }
.tx-master { padding: 28px; background: var(--paper); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.tx-lab { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.tx-hl { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; }
.tx-sub { color: var(--ink-2); font-size: 15px; }
.tx-cta { align-self: flex-start; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--rule); background: #fff; font-weight: 650; font-size: 13.5px; }
.tx-brief { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px dashed var(--rule); font-size: 13.5px; color: var(--ink-2); }
.tx-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, var(--paper), #fff); }
.tx-flow span { width: 44px; height: 44px; border-radius: 99px; background: var(--indigo); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(75, 68, 217, .7); }
.tx-flow small { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }
.tx-out { padding: 24px 28px; display: flex; flex-direction: column; }
.tx-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tx-tabs .tc-tab { height: 40px; padding: 0 16px; display: inline-flex; gap: 8px; align-items: center; }
.tx-tabs .tc-tab span { font-size: 15px; }
.tx-local { font-size: clamp(20px, 1.6vw, 25px); font-weight: 600; line-height: 1.45; }
.tx-back { margin-top: 10px; font-size: 14px; color: #5b4200; background: var(--marigold-soft); border-radius: 12px; padding: 10px 14px; line-height: 1.5; }
.tx-back b { display: block; font-size: 11.5px; letter-spacing: .02em; color: #8a5b00; margin-bottom: 2px; }
.tx-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tx-note { padding: 12px; border-radius: 12px; border: 1px solid var(--rule); display: grid; gap: 6px; }
.tx-note .pill { justify-self: start; }
.tx-note p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.tx-foot { margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 960px) { .tx { grid-template-columns: 1fr; } .tx-master { border-right: 0; border-bottom: 1px solid var(--rule); } .tx-flow { padding: 10px; flex-direction: row; } .tx-flow span { transform: rotate(90deg); } .tx-flow small { writing-mode: initial; transform: none; } .tx-notes { grid-template-columns: 1fr; } }

/* Grounded */
.gr { display: grid; grid-template-columns: 1fr 1.3fr .85fr; gap: 16px; align-items: stretch; }
.gr-q { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.gr-q span { width: 30px; height: 30px; border-radius: 99px; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 13px; flex: none; }
.gr-a { padding: 20px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 12px; }
.gr-a p { font-size: 15px; line-height: 1.6; }
.gr-a.scripted { border: 1.5px dashed #d9dce8; background: transparent; }
.gr-a.scripted p { color: var(--ink-3); }
.gr-a.grounded { background: #fff; border: 1px solid var(--indigo-tint); box-shadow: var(--shadow-lg); }
.gr-who { display: flex; align-items: center; gap: 12px; }
.gr-who b { display: block; font-family: var(--font-display); font-size: 15.5px; }
.gr-who small { font-size: 12.5px; color: var(--ink-3); }
.gr-who .pill { margin-left: auto; }
.gr-a.scripted .avatar { background: var(--rule-2); color: var(--ink-3); }
.gr-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.gr-flags span { font-size: 12px; font-weight: 650; color: #a92d4e; background: var(--rose-soft); padding: 4px 10px; border-radius: 99px; }
mark.ev[data-s]::after { content: attr(data-s); display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 3px; border-radius: 99px; background: var(--marigold); color: #fff;
  font-size: 10px; font-weight: 800; vertical-align: super; line-height: 1; }
.gr-src { display: grid; gap: 10px; align-content: start; }
.gr-lab { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.gr-card { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: var(--marigold-soft); }
.gr-card i { width: 22px; height: 22px; border-radius: 99px; background: var(--marigold); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; display: grid; place-items: center; }
.gr-card b { display: block; font-size: 13px; font-family: var(--font-display); color: #5b4200; }
.gr-card span { font-size: 13px; color: #6b5110; line-height: 1.4; }
.gr-card.dim { background: var(--paper); } .gr-card.dim i { background: var(--ink-3); } .gr-card.dim b, .gr-card.dim span { color: var(--ink-3); }
.layers2 { list-style: none; counter-reset: l; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.layers2::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 2px; background: var(--indigo-tint); }
.layers2 li { counter-increment: l; position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.layers2 li::before { content: counter(l); width: 36px; height: 36px; border-radius: 99px; background: #fff; border: 2px solid var(--indigo); color: var(--indigo); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; position: relative; z-index: 1; margin-bottom: 4px; }
.layers2 b { font-family: var(--font-display); font-size: 15px; }
.layers2 span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1000px) { .gr { grid-template-columns: 1fr; } .layers2 { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } .layers2::before { display: none; } }

/* Comparison: anthryn as a raised column */
.cmp2 { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); min-width: 860px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-xl); padding: 8px 0; }
.cmp2 > div { padding: 15px 18px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule-2); }
.cmp2 > .last { border-bottom: 0; }
.c2-h { font-family: var(--font-display); font-weight: 750; font-size: 14px !important; color: var(--ink-2); border-bottom: 1px solid var(--rule) !important; }
.c2-lab { font-weight: 650; color: var(--ink); }
.cmp2 .us { background: var(--indigo); color: #fff; font-weight: 600; border-bottom-color: rgba(255, 255, 255, .14); margin: 0 8px; }
.c2-h.us { color: #fff; border-radius: 18px 18px 0 0; margin-top: -16px; padding-top: 22px; font-size: 16px !important; border-bottom-color: rgba(255, 255, 255, .14) !important; }
.c2-c.us.last { border-radius: 0 0 18px 18px; margin-bottom: -16px; padding-bottom: 22px; }
.cmp2 .us { box-shadow: 0 0 0 0 transparent; }
.ic { width: 24px; height: 24px; border-radius: 99px; display: inline-grid; place-items: center; flex: none; }
.c2-c.yes .ic, .ic.yes { background: var(--teal-soft); color: var(--teal); }
.c2-c.part .ic, .ic.part { background: var(--marigold-soft); color: var(--marigold); }
.c2-c.no .ic, .ic.no { background: var(--rule-2); color: var(--ink-3); }
.c2-c.no { color: var(--ink-3); }
.cmp2 .us .ic { background: rgba(255, 255, 255, .16); color: #fff; }
.cmp2 .us.no { color: #c9c5ff; }
.cmp-wrap { padding: 16px 0; }
.c2-legend { margin-top: 10px; }
.c2-legend .ic { width: 20px; height: 20px; }

/* FAQ */
.fq-wrap { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.fq-side { display: grid; gap: 14px; }
.fq-help { margin-top: 10px; padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--rule); display: grid; gap: 6px; }
.fq-help b { font-family: var(--font-display); font-size: 16px; margin-top: 6px; }
.fq-help p { font-size: 14px; color: var(--ink-2); }
.avatar-row { display: flex; }
.avatar-row .avatar { width: 34px; height: 34px; margin-left: -8px; }
.avatar-row .avatar:first-child { margin-left: 0; }
.avatar-row .more { background: var(--ink); color: #fff; font-size: 11px; width: auto; padding: 0 9px; border-radius: 99px; }
.fq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.fq { background: #fff; border: 1px solid var(--rule); border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
.fq[open] { border-color: var(--indigo-tint); box-shadow: var(--shadow-md); }
.fq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 30px 1fr 28px; gap: 10px; align-items: start; padding: 16px 16px; }
.fq summary::-webkit-details-marker { display: none; }
.fq-n { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--indigo); padding-top: 2px; }
.fq-q { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em; }
.fq .pm { width: 28px; height: 28px; border-radius: 99px; background: var(--paper); display: grid; place-items: center; transition: transform .25s var(--ease), background .2s; }
.fq[open] .pm { transform: rotate(45deg); background: var(--indigo); color: #fff; }
.fq p { padding: 0 18px 18px 56px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 1000px) { .fq-wrap, .fq-grid { grid-template-columns: 1fr; } }

/* CTA */
.cta2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); border-radius: clamp(24px, 3vw, 40px); position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #2c2a8f 0%, #1a1f4d 45%, #10143a 100%); color: #dfe2f7; }
.cta2::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 118, 255, .35), transparent); pointer-events: none; }
.cta2 h2 { color: #fff; }
.cta2 .lede { color: #b3b8e0; margin-top: 12px; }
.cta2-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; position: relative; }
.cta2-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 10px 0; position: relative; }
.cta2-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 46px; bottom: -6px; width: 2px; background: rgba(255, 255, 255, .12); }
.cta2-steps i { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; font-family: var(--font-display); }
.cta2-steps b { display: block; color: #fff; font-family: var(--font-display); font-size: 15.5px; }
.cta2-steps span { font-size: 14px; color: #aab0dc; }
.cta2-panel { margin-top: 22px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #c9cdf0; }
.cta2-panel .avatar { border-color: #1a1f4d; }
.cta2-panel .more { background: #fff; color: var(--ink); }
.cta2-form { position: relative; z-index: 1; align-self: center; padding: 26px; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.cta2-form .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cta2-form .chip { width: 100%; }
.cta2-form input::placeholder { color: #a8afc6; }
@media (max-width: 1000px) { .cta2 { grid-template-columns: 1fr; } }

/* Footer */
.foot2 { margin-top: 24px; background: #fff; border-top: 1px solid var(--rule); padding: 48px 0 28px; }
.f2-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.f2-line { margin-top: 10px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.f2-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.f2-cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 32px; padding: 32px 0; }
.f2-cols h5 { margin: 0 0 12px; font-family: var(--font-display); font-size: 13.5px; color: var(--ink); }
.f2-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.f2-cols a { text-decoration: none; font-size: 14px; color: var(--ink-2); }
.f2-cols a:hover { color: var(--indigo); }
.f2-stat { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: start; padding: 20px; border-radius: 18px; background: var(--paper); }
.f2-stat b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--indigo); line-height: 1.1; }
.f2-stat span { align-self: center; font-size: 14px; color: var(--ink-2); }
.f2-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; border-top: 1px solid var(--rule); }
.f2-langs span { padding: 6px 12px; border-radius: 99px; background: var(--paper); font-size: 14px; color: var(--ink-2); }
.f2-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 860px) { .f2-cols { grid-template-columns: 1fr 1fr; } }
.cmp2 { padding: 8px 10px 8px 0; }
.cmp2 .us { margin: 0; }
.f2-stat { align-self: start; }
.tx-master .tx-cta { margin-bottom: 4px; }

/* ==========================================================================
   Round 10
   ========================================================================== */
/* One section rhythm: same gap between every component */
.sec, .sec.night { padding: clamp(40px, 4.5vw, 64px) 0; }
.sec.night { margin: clamp(24px, 3vw, 40px) 12px; padding: clamp(40px, 4vw, 56px) 0; }
#how, #workspaces, .studies-sec, #usecases { padding: clamp(24px, 3vw, 40px) 0; }

/* Section heads: heading with its subheading stacked under it, left aligned */
.sec-head, .sec-head.split { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 780px; align-items: start; margin-bottom: clamp(20px, 2.4vw, 32px); }
.sec-head .lede { max-width: 64ch; margin: 0; }
.pin-track.pinned .sec-head { margin-bottom: 14px; }

/* Progress lines: only the active step shows one; finished steps just turn teal */
.pin-track.pinned .tab::after { display: none; }
.pin-track.pinned .tab[aria-selected="true"]::after { display: block; opacity: .9; }
.pin-track.pinned .step .prog, .pin-track.pinned .st-item .st-prog { display: none; }
.pin-track.pinned .step[aria-selected="true"] .prog, .pin-track.pinned .st-item[aria-selected="true"] .st-prog { display: block; }
.st-item.done .st-type { color: var(--ink-2); }

/* Comparison: anthryn column highlighted inside the table */
.cmp-wrap { padding: 0; }
.cmp2 { padding: 10px; gap: 0; }
.c2-h.us { margin-top: 0; padding-top: 18px; border-radius: 16px 16px 0 0; }
.c2-c.us.last { margin-bottom: 0; padding-bottom: 18px; border-radius: 0 0 16px 16px; }

/* Transcreation: tighter master column, horizontal connector */
.tx { grid-template-columns: .85fr 1.5fr; }
.tx-flow { display: none; }
.tx-master { justify-content: flex-start; gap: 14px; position: relative; }
.tx-master::after { content: "→"; position: absolute; right: -19px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 99px; background: var(--indigo); color: #fff;
  display: grid; place-items: center; font-weight: 800; z-index: 2; box-shadow: 0 8px 20px -8px rgba(75, 68, 217, .7); }
.tx-brief { margin-top: 6px; }
.tx-out { padding-left: 40px; }
@media (max-width: 960px) { .tx { grid-template-columns: 1fr; } .tx-master::after { display: none; } .tx-out { padding-left: 24px; } }

/* Workspaces + How it works: every step has the same panel height */
.pin-track.pinned .ws-panel.on { height: clamp(420px, calc(100vh - 330px), 560px); max-height: none; }
.pin-track.pinned .ws-stage { display: flex; align-items: flex-start; justify-content: center; }
.pin-track.pinned .flow-stage { height: clamp(400px, calc(100vh - 260px), 560px); overflow: hidden; }
.ws-copy { overflow: hidden; }

/* Hero: lighter, larger type and compact speech bubbles, closer to the reference */
.hero-h1 { font-weight: 400 !important; letter-spacing: -.035em !important; font-size: clamp(40px, 3.8vw, 62px) !important; }
.hero-h1 .rot { font-weight: 500; }
.hero-lede { color: var(--ink-3) !important; }
.w-bubble { width: 196px; padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 28px -14px rgba(40, 44, 130, .4); }
.w-bubble p { font-size: 12.5px; line-height: 1.38; margin-top: 5px; }
.w-bubble .w-chip { height: 17px; font-size: 9px; padding: 0 7px; }
.w-reply { font-size: 10.5px; }
.w-by { margin-top: 5px; font-size: 11px; }

/* Simulation: reply network */
.sim2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; position: relative; z-index: 2; }
.sim2-stage { position: relative; aspect-ratio: 600 / 520; max-height: 520px; width: 100%; margin: 0 auto; }
.sim2-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sim2-spoke { stroke: rgba(207, 204, 251, .1); stroke-width: 1.2; transition: stroke .4s; }
.sim2-spoke.on { stroke: rgba(124, 118, 255, .6); stroke-dasharray: 4 5; animation: dash 1s linear infinite; }
.sim2-arc { fill: none; stroke: #a9a4ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .9s var(--ease) forwards; }
.sim2-arc.dis { stroke: #ff7a98; stroke-dasharray: 4 6; animation: none; }
.sim2-arc.old { opacity: .28; transition: opacity .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sim2-dot { fill: #fff; filter: drop-shadow(0 0 6px #a9a4ff); }
.sim2-dot.dis { fill: #ff7a98; filter: drop-shadow(0 0 6px #ff7a98); }
.sim2-dot.save { fill: #6fe0cf; filter: drop-shadow(0 0 6px #6fe0cf); }
.sim2-n { font-family: var(--font-display); font-weight: 800; font-size: 34px; fill: #fff; }
.sim2-of { font-size: 12px; fill: #8f95c8; }
[data-ring] { transition: stroke-dasharray .6s var(--ease); }
.sim2-nodes { position: absolute; inset: 0; }
.sim2-node { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; }
.sim2-node .avatar { width: 52px; height: 52px; border: 2px solid #2a2f66; position: relative; z-index: 1; transition: transform .4s var(--ease), box-shadow .4s; }
.sim2-node.done .avatar { box-shadow: 0 0 0 2px var(--teal); }
.sim2-node.talk .avatar { transform: scale(1.14); box-shadow: 0 0 0 3px #fff, 0 0 24px 4px rgba(124, 118, 255, .6); }
.sim2-node.hit .avatar { box-shadow: 0 0 0 3px #a9a4ff; }
.sim2-ripple { position: absolute; top: 0; width: 52px; height: 52px; border-radius: 99px; border: 2px solid #a9a4ff; opacity: 0; }
.sim2-node.talk .sim2-ripple { animation: ripple 1.4s var(--ease) infinite; }
@keyframes ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.sim2-name { font-size: 12px; color: #aab0dc; font-weight: 600; }
.sim2-vote { position: absolute; top: -4px; right: -8px; z-index: 2; width: 22px; height: 22px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; color: #fff; border: 2px solid var(--night); transform: scale(0); transition: transform .3s var(--ease); font-family: var(--font-display); }
.sim2-vote.a { background: var(--indigo); transform: scale(1); } .sim2-vote.b { background: var(--marigold); transform: scale(1); }
.sim2-study { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(207, 204, 251, .14); }
.sim2-study b { color: #fff; font-family: var(--font-display); font-size: 15px; margin-top: 6px; }
.sim2-study > span:last-child { font-size: 12px; color: #8f95c8; }
.sim2-live { background: rgba(14, 154, 135, .18) !important; color: #6fe0cf !important; justify-self: start; }
.sim2-ticks { position: absolute; left: 10%; right: 10%; bottom: -4px; display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.sim2-ticks i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); transition: background .4s; }
.sim2-ticks i.on { background: #7c76ff; }
.sim2-side { display: grid; gap: 14px; }
.sim2-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sim2-feed { display: grid; gap: 10px; min-height: 380px; align-content: start; }
.sim2-msg { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 13px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(207, 204, 251, .12);
  animation: msgin .45s var(--ease); }
@keyframes msgin { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.sim2-msg.dis { border-color: rgba(255, 122, 152, .45); background: rgba(216, 70, 106, .08); }
.sim2-msg .nm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #fff; font-family: var(--font-display); font-weight: 750; font-size: 14px; }
.sim2-text { margin-top: 4px; font-size: 14px; color: #c9cdf0; line-height: 1.45; }
.sim2-msg .re { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: #a9a4ff; }
.sim2-typing { display: none; gap: 4px; margin-top: 8px; }
.sim2-typing i { width: 6px; height: 6px; border-radius: 99px; background: #8f95c8; animation: typing 1s infinite; }
.sim2-typing i:nth-child(2) { animation-delay: .15s; } .sim2-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.sim2-msg.typing .sim2-typing { display: flex; }
.sim2-msg.typing .sim2-text, .sim2-msg.typing .re { display: none; }
.sim2-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #8f95c8; }
.sim2-legend span { display: inline-flex; gap: 6px; align-items: center; }
.sim2-legend i { width: 14px; height: 4px; border-radius: 2px; }
.lg-a { background: var(--indigo); } .lg-b { background: var(--marigold); } .lg-r { background: #a9a4ff; } .lg-d { background: #ff7a98; }
.st-pool { flex: none; font-size: 12.5px; color: var(--ink-3); padding-left: 12px; border-left: 1px solid var(--rule); }
.st-pool b { color: var(--indigo); font-family: var(--font-display); }
@media (max-width: 960px) { .sim2 { grid-template-columns: 1fr; } .sim2-node .avatar { width: 40px; height: 40px; } .sim2-ripple { width: 40px; height: 40px; } }
.sim2-study { position: static; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.sim2-study b { margin-top: 0; }
.sim2-study > span:last-child { grid-column: 2; }
.sim2-study .sim2-live { grid-row: span 2; }
.sim2-feed { min-height: 330px; }
.pin-track.pinned .ws-step:not([aria-selected="true"]) .ws-line { visibility: hidden; }

/* ==========================================================================
   Round 11
   ========================================================================== */
/* Hero: wider canvas, switcher overlaid on the slab corner, no chip row */
@media (min-width: 1001px) {
  .hero-world .hero-grid { grid-template-columns: minmax(320px, .5fr) 1.5fr; }
  .w-stage { width: min(100% + 200px, calc((100vh - 110px) * 576 / 470)); margin: 0 auto; }
  .world { margin-left: -120px; }
  .w-bar { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; margin: 0; z-index: 4; }
}
.hero-stat { margin-top: 22px; font-size: 14px; color: var(--ink-3); }
.hero-stat b { color: var(--ink); font-family: var(--font-display); }

/* One compact tab rail everywhere */
.ws-step { min-height: 0; padding: 9px 12px 13px; grid-template-columns: 32px 1fr; column-gap: 10px; border-radius: 14px; }
.ws-ico { width: 32px; height: 32px; border-radius: 10px; }
.ws-ico svg { width: 17px; height: 17px; }
.ws-name { font-size: 13.5px; }
.ws-line { bottom: 5px; left: 12px; right: 12px; height: 2.5px; }
.ws-rail { border-radius: 18px; padding: 5px; gap: 4px; }
.ws-rail.r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.ws-step:not([aria-selected="true"]) .ws-line { visibility: hidden; }
.tx-tabs .tc-tab { height: 36px; border-radius: 12px; }
.tx-tabs .tc-tab[aria-selected="true"] { background: #f6f5ff; color: var(--ink); border-color: var(--indigo-tint); box-shadow: inset 0 -2.5px 0 var(--indigo); }

/* How it works: steps column matches the panel height, evenly spaced */
.pin-track.pinned .flow { align-items: stretch; }
.pin-track.pinned .steps { grid-auto-rows: 1fr; height: clamp(400px, calc(100vh - 260px), 560px); }
.pin-track.pinned .step { align-content: center; }
.step.done .n { background: var(--teal-soft); color: var(--teal); }

/* Face strip: 11 faces and a +N bubble, never clipped */
.st-wall { flex: none; }
.st-tok:nth-child(n+12) { display: none; }
.st-strip { justify-content: space-between; }

/* Simulation: fits the window */
.sec.night { padding: clamp(28px, 3vw, 40px) 0; }
.night .sec-head { margin-bottom: 14px; }
.sim2-stage { max-height: min(440px, calc(100vh - 330px)); aspect-ratio: 600 / 520; width: auto; height: min(440px, calc(100vh - 330px)); }
.sim2-feed { min-height: 0; }
.sim2-msg:nth-child(n+4) { display: none; }
.sim2-msg { padding: 10px 12px; }

/* Comparison: four cards */
.cc-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 14px; align-items: stretch; }
.cc { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 22px; padding: 20px; }
.cc header { padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); margin-bottom: 6px; }
.cc h3 { font-size: 17px; }
.cc header p { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.cc-score { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.cc-score b { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-right: 2px; }
.cc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cc li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px dashed var(--rule-2); font-size: 14px; color: var(--ink); }
.cc li:last-child { border-bottom: 0; }
.cc li small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-bottom: 1px; }
.cc li.no { color: var(--ink-3); }
.cc li .ic { width: 22px; height: 22px; margin-top: 6px; }
.cc li.yes .ic { background: var(--teal-soft); color: var(--teal); }
.cc li.part .ic { background: var(--marigold-soft); color: var(--marigold); }
.cc li.no .ic { background: var(--rule-2); color: var(--ink-3); }
.cc.us { background: linear-gradient(170deg, #4b44d9, #2c2694); border: 0; color: #fff; transform: translateY(-10px); box-shadow: 0 30px 60px -28px rgba(75, 68, 217, .75); }
.cc.us header { border-color: rgba(255, 255, 255, .15); }
.cc.us h3, .cc.us .cc-score b { color: #fff; }
.cc.us header p, .cc.us .cc-score { color: #c9c5ff; }
.cc.us li { color: #fff; border-color: rgba(255, 255, 255, .12); }
.cc.us li small { color: #b6b2ff; }
.cc.us li .ic { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.cc.us li.no { color: #d9d6ff; }
.cc-badge { position: absolute; top: -12px; left: 20px; padding: 4px 10px; border-radius: 99px; background: var(--marigold); color: #fff; font-size: 11px; font-weight: 750; }
@media (max-width: 1000px) { .cc-grid { grid-template-columns: 1fr 1fr; } .cc.us { transform: none; } }
@media (max-width: 600px) { .cc-grid { grid-template-columns: 1fr; } .ws-rail.r5 { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; } }
@media (min-width: 1001px) {
  .hero-world .hero-grid { grid-template-columns: minmax(420px, .62fr) 1.38fr; }
  .world { margin-left: -90px; }
}
/* Round 12: no empty band on top, switcher below the scene */
@media (min-width: 1001px) {
  .hero-world { padding-top: 4px; }
  .hero-world .hero-grid { align-items: center; }
  .hero-copy { padding-top: 0; }
  .w-stage { width: min(100% + 200px, calc((100vh - 170px) * 576 / 440)); margin: 0 auto; }
  .w-bar { position: static; translate: none; margin-top: 4px; }
}
.w-bubble.leaving { transition-duration: .18s; }
@media (min-width: 1001px) {
  .w-stage { width: min(100% + 200px, calc((100vh - 160px) * 576 / 416)); }
  .hero-world .hero-grid { align-items: start; }
  .hero-copy { padding-top: clamp(40px, 9vh, 96px); }
}

/* ==========================================================================
   Round 13
   ========================================================================== */
/* Simulation: two columns (network | heading + conversation) so it fits one window */
@media (min-width: 961px) {
  .night > .wrap { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "stage head" "stage side" "stage foot"; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .night [data-mock="simulation"], .night .sim2 { display: contents; }
  .night .sec-head { grid-area: head; margin-bottom: 12px; }
  .night .sec-head h2 { font-size: clamp(24px, 2vw, 32px); }
  .night .sec-head .lede { font-size: 14.5px; }
  .night .sim2-stage { grid-area: stage; align-self: center; height: min(480px, calc(100vh - 170px)); max-height: none; width: auto; }
  .night .sim2-side { grid-area: side; gap: 10px; }
  .night > .wrap > p.tiny { grid-area: foot; margin-top: 10px !important; }
  .sim2-study { padding: 8px 12px; }
  .sim2-msg { padding: 9px 12px; }
  .sim2-text { font-size: 13.5px; margin-top: 2px; }
  .sim2-head h4 { font-size: 15px; }
}

/* Five layers: animated line, staggered reveal, travelling highlight */
.layers2::before { transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.layers2.go::before { transform: scaleX(1); }
.layers2::after { content: ""; position: absolute; top: 12px; left: calc(10% + var(--at, 0) * 20%); width: 12px; height: 12px; margin-left: -6px; border-radius: 99px;
  background: var(--indigo); box-shadow: 0 0 0 6px rgba(75, 68, 217, .18); opacity: 0; transition: left .9s var(--ease), opacity .4s; }
.layers2.go::after { opacity: 1; }
.layers2 li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.layers2.go li { opacity: 1; transform: none; }
.layers2.go li:nth-child(2) { transition-delay: .2s; } .layers2.go li:nth-child(3) { transition-delay: .4s; }
.layers2.go li:nth-child(4) { transition-delay: .6s; } .layers2.go li:nth-child(5) { transition-delay: .8s; }
.layers2 li::before { transition: background .35s, color .35s, transform .35s var(--ease), box-shadow .35s; }
.layers2 li.on::before { background: var(--indigo); color: #fff; transform: scale(1.12); box-shadow: 0 8px 20px -6px rgba(75, 68, 217, .6); }
.layers2 li.on b { color: var(--indigo-deep); }
@media (prefers-reduced-motion: reduce) { .layers2 li { opacity: 1; transform: none; } .layers2::before { transform: none; } }

/* anthryn comparison card: cleaner, higher-contrast colours */
.cc.us { background: linear-gradient(165deg, #5a52ec 0%, #4038c9 100%); }
.cc.us li .ic { background: #fff !important; color: var(--indigo) !important; }
.cc.us li.no .ic { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.cc.us li small { color: #d6d3ff; }
.cc.us li.no { color: #e4e2ff; }
.cc.us header p, .cc.us .cc-score { color: #e0deff; }
.cc-badge { background: #fff; color: var(--indigo-deep); box-shadow: 0 6px 16px -6px rgba(20, 26, 58, .35); }

/* ==========================================================================
   Use cases page (redesign)
   ========================================================================== */
.uc3-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 3vw, 40px); }
.uc3-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.uc3-hero-grid > * { min-width: 0; }
.uc3-hero .hero-h1 { font-size: clamp(36px, 3.6vw, 56px) !important; }
.uc3-hero .hero-lede { max-width: 46ch; }
.uc3-picks { display: grid; gap: 8px; }
.uc3-pick { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--rule);
  text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.uc3-pick:hover { border-color: var(--indigo-tint); transform: translateX(4px); }
.uc3-pick .ws-ico, .uc3-team .ws-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo); }
.uc3-pick b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.uc3-pick small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }

.uc3-railwrap { position: sticky; top: 86px; z-index: 40; padding: 6px 0; }
.uc3-rail .ws-step { text-decoration: none; }
.uc3-rail .ws-step[aria-selected="true"] .ws-ico { background: var(--indigo); color: #fff; }

.uc3 { padding: clamp(36px, 4vw, 56px) 0; scroll-margin-top: 150px; }
.uc3.alt { background: #fff; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.uc3-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.uc3-grid > * { min-width: 0; }
.uc3-copy { display: grid; gap: 14px; }
.uc3-team { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.uc3-team b { display: block; font-family: var(--font-display); font-size: 15px; }
.uc3-team small { display: block; font-size: 12.5px; color: var(--ink-3); }
.uc3-copy h2 { font-size: clamp(24px, 2.2vw, 34px); }
.uc3-qs { display: grid; gap: 6px; margin-top: 2px; }
.uc3-qs p { padding: 10px 14px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--indigo); font-family: var(--font-display); font-weight: 650; font-size: 15px; color: var(--ink); }
.uc3.alt .uc3-qs p { background: #f6f5ff; }
.uc3-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uc3-ba > div { padding: 12px 14px; border-radius: 14px; display: grid; gap: 6px; align-content: start; }
.uc3-ba .b { background: var(--rose-soft); } .uc3-ba .a { background: var(--teal-soft); }
.uc3-k { font-size: 12px; font-weight: 750; font-family: var(--font-display); }
.uc3-ba .b .uc3-k { color: #a92d4e; } .uc3-ba .a .uc3-k { color: #0a6f61; }
.uc3-ba p { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.uc3-ba .b svg { color: var(--rose); margin-top: 2px; } .uc3-ba .a svg { color: var(--teal); margin-top: 2px; }
.uc3-links { display: flex; gap: 8px; flex-wrap: wrap; }
.uc3-links .pill { text-decoration: none; }
.uc3-vis { max-height: calc(100vh - 190px); }
.uc3-vis .m { box-shadow: var(--shadow-lg); }
.uc3-vis .heat { max-width: 300px; }
.uc3-cta { grid-template-columns: 1.4fr 1fr; align-items: center; }
@media (max-width: 1000px) { .uc3-hero-grid, .uc3-grid { grid-template-columns: 1fr; } .uc3-vis { max-height: none; } .uc3-railwrap { top: 80px; } }
@media (max-width: 640px) { .uc3-ba { grid-template-columns: 1fr; } .uc3-rail { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; } }

/* ==========================================================================
   Home: attention heatmap section
   ========================================================================== */
.ht-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.ht-grid > * { min-width: 0; }
.ht-copy { display: grid; gap: 14px; }
.ht-copy h2 { font-size: clamp(26px, 2.4vw, 38px); }
.ht-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.ht-points li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.ht-points li i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); font-style: normal; }
.ht-points b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.ht-vis .heat { max-width: 340px; }
.ht-note { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1000px) { .ht-grid { grid-template-columns: 1fr; } }
/* Heatmap: labels move below the ad's top line; stronger hotspots */
.heat-labels { top: auto; bottom: 10px; }
.heat-labels span { font-size: 11px; padding: 3px 8px; }
.heat .ad .price { margin-bottom: 26px; }
.heat-blobs i { filter: blur(10px); opacity: 1; }
.heat-layer .ad { filter: grayscale(.9) brightness(.42); }
@media (min-width: 1001px) { .w-stage { width: min(100% + 200px, calc((100vh - 150px) * 576 / 446)); } }
.hero-world { overflow: visible; }
/* Canvas + switcher + menu always fit one window */
@media (min-width: 1001px) {
  .w-stage { width: min(100% + 200px, calc((100vh - 200px) * 576 / 446)); }
  .hero-world { padding-bottom: 16px; }
}

/* ==========================================================================
   Hero: canvas + fixed side panel (switcher with timer, profile)
   ========================================================================== */
@media (min-width: 1001px) {
  .hero-world .hero-grid { grid-template-columns: minmax(340px, .48fr) 1.52fr; align-items: center; }
  .hero-copy { padding-top: 0; }
  .world { margin: 0; margin-right: calc(-1 * clamp(0px, 2vw, 32px)); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: center; }
  .w-stage { width: 100%; max-width: calc((100vh - 130px) * 576 / 446); margin: 0 auto; }
}
.w-aside { display: grid; gap: 12px; align-content: center; position: relative; z-index: 5; }
.w-aside .w-switch { position: relative; width: 100%; min-width: 0; grid-template-columns: 40px 1fr 40px; padding: 6px 6px 14px; border-radius: 20px; overflow: hidden; }
.w-prog { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--rule-2); overflow: hidden; }
.w-prog > i { display: block; height: 100%; width: 0; background: var(--indigo); border-radius: inherit; }
.w-count { position: absolute; right: 54px; top: 8px; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.w-profile { min-height: 360px; padding: 20px; }
.w-profile.in > * { animation: rise .3s var(--ease); }
.pf-ov { display: grid; gap: 10px; }
.pf-ov .pf-chip { justify-self: start; }
.pf-ov .pf-name { margin-top: 2px; }
.pf-study { padding: 12px; border-radius: 14px; background: var(--paper); display: grid; gap: 6px; }
.pf-study > span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pf-study p { font-size: 13.5px; font-weight: 600; }
.pf-ab { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; font-size: 13.5px; }
.pf-ab b { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; color: #fff; font-family: var(--font-display); }
.pf-ab b.a { background: var(--indigo); } .pf-ab b.b { background: var(--marigold); }
.pf-k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.pf-cast { display: grid; gap: 2px; }
.pf-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; text-align: left; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; }
.pf-row:hover, .pf-row:focus-visible { background: #f6f5ff; }
.pf-row b { display: block; font-family: var(--font-display); font-size: 13.5px; }
.pf-row small { display: block; font-size: 12px; color: var(--ink-3); }
.w-profile .pf-foot { margin-top: 6px; }
@media (max-width: 1000px) { .world { display: grid; gap: 14px; } .w-profile { min-height: 0; } }
/* Bigger canvas beside the panel */
@media (min-width: 1001px) {
  .hero-world > .wrap { padding-left: 32px; padding-right: 24px; }
  .hero-world .hero-grid { grid-template-columns: 330px minmax(0, 1fr); gap: 0; }
  .hero-world .hero-h1 { font-size: clamp(36px, 3.2vw, 50px) !important; }
  .world { grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; margin: 0 0 0 -30px; }
  .w-stage { max-width: calc((100vh - 120px) * 576 / 446); }
}
.w-count { display: none; }
.w-aside .w-switch b { font-size: 13px; }

/* ==========================================================================
   Footer (redesign)
   ========================================================================== */
.f3 { margin-top: clamp(32px, 4vw, 56px); background: var(--night); color: #c9cdf0; border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0; overflow: hidden; position: relative; }
.f3-marquee { border-bottom: 1px solid rgba(207, 204, 251, .12); padding: 18px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.f3-track { display: flex; width: max-content; animation: marquee-slide 48s linear infinite; }
.f3-marquee:hover .f3-track { animation-play-state: paused; }
.f3-hi { display: grid; justify-items: center; gap: 2px; padding: 0 30px; border-right: 1px solid rgba(207, 204, 251, .1); }
.f3-hi b { font-size: clamp(22px, 2vw, 30px); font-weight: 600; color: #fff; line-height: 1.3; }
.f3-hi small { font-size: 11.5px; color: #8f95c8; }
.f3-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(32px, 4vw, 48px) 0; border-bottom: 1px solid rgba(207, 204, 251, .12); }
.f3-cta h2 { color: #fff; font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; max-width: 18ch; }
.f3-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.f3-mail { color: #fff; font-family: var(--font-display); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(255, 255, 255, .3); padding-bottom: 2px; }
.f3-mail:hover { border-color: #fff; }
.f3-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding: 36px 0 28px; }
.f3 .brand { color: #fff; }
.f3-brand p { margin-top: 12px; font-size: 14px; color: #aab0dc; max-width: 34ch; line-height: 1.55; }
.f3-stats { display: flex; gap: 22px; margin: 20px 0 0; }
.f3-stats dt { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #fff; letter-spacing: -.02em; }
.f3-stats dd { margin: 0; font-size: 12.5px; color: #8f95c8; }
.f3 h5 { margin: 4px 0 14px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff; }
.f3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f3 ul a { color: #aab0dc; text-decoration: none; font-size: 14px; }
.f3 ul a:hover { color: #fff; }
.f3-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid rgba(207, 204, 251, .12); font-size: 12.5px; color: #8f95c8; position: relative; z-index: 1; }
.f3-word { font-family: var(--font-display); font-weight: 800; letter-spacing: -.06em; line-height: .78; font-size: clamp(110px, 22vw, 340px); text-align: center; margin-top: -8px;
  background: linear-gradient(180deg, rgba(124, 118, 255, .35), rgba(124, 118, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
@media (max-width: 860px) { .f3-grid { grid-template-columns: 1fr 1fr; } .f3-brand { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .f3-track { animation: none; } }
/* Footer: compact */
.f3-marquee { padding: 10px 0; }
.f3-hi { padding: 0 22px; }
.f3-hi b { font-size: clamp(17px, 1.4vw, 21px); }
.f3-hi small { font-size: 10.5px; }
.f3-cta { padding: 22px 0; }
.f3-cta h2 { font-size: clamp(22px, 2vw, 30px); max-width: none; }
.f3-grid { grid-template-columns: 1.4fr repeat(3, 1fr); padding: 24px 0 18px; gap: 24px; }
.f3-brand p { margin-top: 8px; font-size: 13.5px; }
.f3-stats { margin-top: 12px; }
.f3-stats dt { font-size: 20px; }
.f3 h5 { margin-bottom: 10px; }
.f3 ul { gap: 7px; }
.f3 ul a { font-size: 13.5px; }
.f3-base { padding: 12px 0; }
.f3-word { font-size: clamp(80px, 13vw, 200px); margin-top: -4px; margin-bottom: -.12em; }
.f3-grid { grid-template-columns: 1.3fr 1.7fr 1fr 1fr; padding: 20px 0 14px; }
.f3-grid > div:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.f3-word { font-size: clamp(70px, 10vw, 160px); }
.f3 { margin-top: 16px; }
.f3-tag { margin-top: 10px !important; font-family: var(--font-display); font-size: 17px !important; font-weight: 600; color: #fff !important; }
.f3-grid { padding-top: 26px; }
#demo { padding-bottom: 8px; }

/* Heatmap animation: gaze path, pulsing hotspots, linked region rows */
.heat-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.heat-path polyline { fill: none; stroke: #fff; stroke-width: .7; stroke-dasharray: 2 2.4; stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; stroke-width: 2;
  stroke-dashoffset: 0; }
.heat.walk .heat-path polyline { animation: gaze 1.7s linear infinite; }
@keyframes gaze { to { stroke-dashoffset: -8.8; } }
.heat-eye { position: absolute; z-index: 4; width: 16px; height: 16px; translate: -50% -50%; border-radius: 99px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .35), 0 0 18px 6px rgba(255, 200, 0, .6);
  opacity: 0; transition: left .9s cubic-bezier(.6, 0, .3, 1), top .9s cubic-bezier(.6, 0, .3, 1), opacity .3s; pointer-events: none; }
.heat.walk .heat-eye { opacity: 1; }
.heat > .heat-pin { z-index: 5; transition: transform .35s var(--ease), background .3s, color .3s; }
.heat > .heat-pin.on { transform: scale(1.25); background: var(--marigold); color: #fff; }
.heat-blobs i { transition: transform .6s var(--ease); }
.heat-blobs i.on { animation: blobpulse 1.7s ease-in-out infinite; }
@keyframes blobpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.region { position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s, background .3s; }
.region.on { border-color: var(--marigold); background: #fffaf0; box-shadow: 0 6px 18px -10px rgba(217, 143, 6, .6); }
.region.on .rnum { background: var(--marigold); }
.rbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--marigold), #ff6a3d); transition: width .9s var(--ease); }
.region.seen .rbar { width: var(--v); }
@media (prefers-reduced-motion: reduce) { .heat-eye { display: none; } .heat-blobs i.on { animation: none; } }

/* Heatmap: survey grounding */
.ht-flow { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.ht-flow::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--teal), var(--indigo), var(--marigold)); }
.ht-flow li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 8px 0; position: relative; }
.hf-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--rule); position: relative; z-index: 1; }
.ht-flow li:nth-child(1) .hf-ico { color: var(--teal); border-color: #a8e2d8; }
.ht-flow li:nth-child(2) .hf-ico { color: var(--indigo); border-color: var(--indigo-tint); }
.ht-flow li:nth-child(3) .hf-ico { color: var(--marigold); border-color: #f2d8a2; }
.ht-flow b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.ht-flow span { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.score { display: grid; justify-items: end; line-height: 1.1; }
.score .hum { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: var(--teal); white-space: nowrap; margin-top: 2px; }
.hbar2 { position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; background: var(--teal); opacity: .8; transition: width .9s var(--ease) .15s; }
.region.seen .hbar2 { width: var(--v); }
.rg-legend { display: flex; gap: 14px; }
.rg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rg-legend i { width: 14px; height: 3px; border-radius: 2px; }
.lg-p { background: var(--marigold); } .lg-h { background: var(--teal); }

/* ==========================================================================
   Real people in, synthetic personas out
   ========================================================================== */
.pp-sec { padding: clamp(28px, 3vw, 44px) 0 clamp(8px, 1vw, 16px); }
.pp-head { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: end; margin-bottom: 22px; }
.pp-head h2 { font-size: clamp(26px, 2.4vw, 38px); }
@media (max-width: 900px) { .pp-head { grid-template-columns: 1fr; gap: 10px; } }
.pp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.pp-step { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 22px; padding: 16px 18px 20px; display: grid; gap: 6px; align-content: start; }
.pp-step:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 82px; width: 16px; height: 2px; background: var(--indigo-tint); z-index: 1; }
.pp-n { width: 26px; height: 26px; border-radius: 99px; background: var(--indigo); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; margin-top: 8px; }
.pp-step h3 { font-size: 17px; }
.pp-step p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.pp-vis { position: relative; height: 150px; border-radius: 16px; background: var(--paper); overflow: hidden; }
/* 1: survey cards */
.pv-card { position: absolute; left: 14px; right: 14px; top: 16px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-md); display: grid; gap: 5px; z-index: 2;
  animation: pvcard 6s var(--ease) infinite; }
.pv-card.back { top: 8px; left: 26px; right: 2px; z-index: 1; opacity: .55; transform: rotate(2deg); animation: none; }
.pv-card small { font-size: 10.5px; color: var(--teal); font-weight: 700; }
.pv-card b { font-size: 12.5px; font-family: var(--font-display); line-height: 1.3; }
.pv-opt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.pv-opt::before { content: ""; width: 12px; height: 12px; border-radius: 99px; border: 1.5px solid var(--rule); flex: none; }
.pv-opt.on::before { background: var(--teal); border-color: var(--teal); animation: pvtick 6s infinite; }
@keyframes pvcard { 0%, 70% { transform: none; opacity: 1; } 85% { transform: translateX(60%) rotate(6deg); opacity: 0; } 86% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pvtick { 0%, 20% { transform: scale(0); } 30%, 100% { transform: scale(1); } }
/* 2: dots flowing into the persona */
.pv-face { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%; border-radius: 99px; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--indigo), 0 10px 24px -8px rgba(75, 68, 217, .6); object-fit: cover; z-index: 2; }
.pv-dot { position: absolute; width: 10px; height: 10px; border-radius: 99px; background: var(--teal); left: 6%; z-index: 1; animation: pvflow 3s linear infinite; }
.pv-dot.d1 { top: 25%; } .pv-dot.d2 { top: 45%; animation-delay: .75s; } .pv-dot.d3 { top: 65%; animation-delay: 1.5s; } .pv-dot.d4 { top: 35%; animation-delay: 2.25s; }
@keyframes pvflow { 0% { left: 4%; opacity: 0; transform: scale(.6); } 15% { opacity: 1; } 75% { left: 46%; top: 47%; opacity: 1; transform: scale(1); } 85%, 100% { left: 48%; top: 47%; opacity: 0; transform: scale(.3); } }
.pv-tag { position: absolute; right: 8px; font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--indigo-tint); color: var(--indigo-deep); opacity: 0; animation: pvtag 6s infinite; }
.pv-tag.t1 { top: 18%; } .pv-tag.t2 { top: 42%; animation-delay: .5s; } .pv-tag.t3 { top: 66%; animation-delay: 1s; }
@keyframes pvtag { 0%, 15% { opacity: 0; transform: translateX(8px); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 3: answer traced to evidence */
.pv-bubble { position: absolute; left: 14px; right: 14px; top: 16px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.45; }
.pv-cite { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: var(--marigold-soft); color: #8a5b00; font-size: 12px; font-weight: 650; animation: pvcite 3s ease-in-out infinite; }
.pv-cite i { width: 8px; height: 8px; border-radius: 99px; background: var(--marigold); }
@keyframes pvcite { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 143, 6, .35); } 50% { box-shadow: 0 0 0 6px rgba(217, 143, 6, 0); } }
@media (max-width: 900px) { .pp { grid-template-columns: 1fr; } .pp-step::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .pv-card, .pv-dot, .pv-tag, .pv-cite, .pv-opt.on::before { animation: none; opacity: 1; } .pv-dot { display: none; } }
/* Same heading pattern as every other section: heading, subheading under it */
.pp-head { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 780px; align-items: start; margin-bottom: clamp(20px, 2.4vw, 28px); }
.pp-head .lede { max-width: 64ch; }
/* Smaller subheadings in every section head */
.sec-head .lede, .pp-head .lede, .ht-copy > .lede, .st-copy > .lede, .fq-side > .lede, .uc3-copy > .lede, .night .sec-head .lede, .pin-track.pinned .sec-head .lede {
  font-size: 14.5px !important; line-height: 1.55; max-width: 62ch; color: var(--ink-3);
}
.night .sec-head .lede { color: #aab0dc; }
.sec-head, .pp-head { gap: 6px; }

/* ==========================================================================
   One vertical rhythm: every section gets the same space
   ========================================================================== */
:root { --gap-y: clamp(36px, 4vw, 52px); }
.sec, .sec.night, #how, #workspaces, .studies-sec, #usecases, .pp-sec, .tx-sec, .gr-sec, #attention, #faq, #honest, #demo, .problem-sec { padding: var(--gap-y) 0 !important; }
.sec.night { margin: var(--gap-y) 12px !important; padding: clamp(28px, 3vw, 40px) 0 !important; }
.hero-world { padding-bottom: 0 !important; }
.pin-track.pinned { height: auto; }
.pin-track.pinned .pin-sticky { position: sticky; top: 100px; height: auto; padding: 0; display: block; overflow: visible; }
.uc3 { padding: var(--gap-y) 0 !important; }
.f3 { margin-top: var(--gap-y); }
.st-grid, .ht-grid { align-items: start; }

/* Hero copy: compact and scannable */
@media (min-width: 1001px) { .hero-world .hero-grid { grid-template-columns: 380px minmax(0, 1fr); } }
.hero-world .hero-h1 { font-size: clamp(36px, 3.3vw, 52px) !important; line-height: 1.04; }
.hero-world .hero-lede { font-size: 16px !important; line-height: 1.55; color: var(--ink-2) !important; max-width: 34ch; margin-top: 16px; }
.hero-world .hero-ctas { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
.hero-world .btn { height: 46px; padding: 0 20px; font-size: 14.5px; }
.hero-proof { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.hp-faces { display: flex; flex: none; }
.hp-faces .avatar { width: 32px; height: 32px; margin-left: -9px; font-size: 10px; }
.hp-faces .avatar:first-child { margin-left: 0; }
.hp-stats { display: flex; gap: 0; margin: 0; }
.hp-stats > div { padding: 0 14px; border-left: 1px solid var(--rule); }
.hp-stats > div:first-child { border-left: 0; padding-left: 0; }
.hp-stats dt { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.hp-stats dd { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.hp-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #0a6f61; background: var(--teal-soft); padding: 5px 11px; border-radius: 99px; }
.hero-stat { display: none; }

/* Sector panel: live poll + conversation list */
.w-profile { padding: 16px; min-height: 0; }
.pf-ov { display: grid; gap: 12px; }
.ov-k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ov-poll { padding: 14px; border-radius: 16px; background: linear-gradient(160deg, #f6f5ff, #fff); border: 1px solid var(--indigo-tint); display: grid; gap: 8px; }
.ov-top { display: flex; justify-content: space-between; align-items: center; }
.ov-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--teal); }
.ov-live i { width: 7px; height: 7px; border-radius: 99px; background: var(--teal); animation: ping-dot 1.4s infinite; }
@keyframes ping-dot { 50% { box-shadow: 0 0 0 4px rgba(14, 154, 135, .2); } }
.ov-q { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ov-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 13px; line-height: 1.3; }
.ov-row b { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; color: #fff; font-family: var(--font-display); }
.ov-opt.a .ov-row b { background: var(--indigo); } .ov-opt.b .ov-row b { background: var(--marigold); }
.ov-row em { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.ov-bar { display: block; height: 6px; margin: 6px 0 0 30px; border-radius: 99px; background: var(--rule-2); overflow: hidden; }
.ov-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .6s var(--ease); }
.ov-opt.a .ov-bar > i { background: var(--indigo); } .ov-opt.b .ov-bar > i { background: var(--marigold); }
.pf-cast { gap: 0; }
.pf-row { grid-template-columns: 32px 1fr auto; padding: 7px 6px; }
.ov-av { position: relative; }
.ov-talk { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 99px; background: var(--teal); border: 2px solid #fff; transform: scale(0); transition: transform .3s var(--ease); }
.pf-row.talking .ov-talk { transform: scale(1); animation: ping-dot 1.2s infinite; }
.pf-row.talking { background: #f6f5ff; }
.ov-vote { font-style: normal; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; font-family: var(--font-display); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s var(--ease); }
.ov-vote.a { background: var(--indigo); } .ov-vote.b { background: var(--marigold); }
.pf-row.voted .ov-vote { opacity: 1; transform: none; }
.ov-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); padding-top: 10px; border-top: 1px solid var(--rule-2); }
.ov-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--teal-soft); color: #0a6f61; font-weight: 700; font-size: 11.5px; }

/* Hero placement: one panel card (switcher header + content), aligned with the canvas */
@media (min-width: 1001px) {
  .hero-world .hero-grid { align-items: center; }
  .world { align-items: center; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
  .w-aside { gap: 0; align-self: center; max-height: calc(100vh - 130px); background: #fff; border: 1px solid var(--rule); border-radius: 24px;
    box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
  .w-aside .w-switch { border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; box-shadow: none; background: #fff; padding: 10px 10px 16px; flex: none; }
  .w-aside .w-profile { border: 0; border-radius: 0; box-shadow: none; padding: 14px 16px 16px; overflow: auto; scrollbar-width: none; flex: 1 1 auto; min-height: 0; background: #fff; }
  .w-aside .w-profile::-webkit-scrollbar { display: none; }
  .w-aside .w-prog { bottom: 8px; }
  .pf-row { padding: 5px 6px; }
  .ov-poll { padding: 12px; gap: 6px; }
  .pf-ov { gap: 10px; }
}

/* ==========================================================================
   Hero: full-width bar under the canvas (switcher | live question | people | badge)
   ========================================================================== */
@media (min-width: 1001px) {
  .world { display: block; margin: 0 0 0 -40px; }
  .w-stage { width: 100%; max-width: calc((100vh - 250px) * 576 / 446); margin: 0 auto; }
  .hero-world .hero-grid { grid-template-columns: 380px minmax(0, 1fr); align-items: center; }
}
.wbar { margin-top: 10px; display: grid !important; grid-template-columns: 250px minmax(0, 1fr); align-items: stretch; max-height: none !important;
  background: #fff; border: 1px solid var(--rule); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.wbar .w-switch { border: 0 !important; border-right: 1px solid var(--rule-2) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 10px 18px !important; align-content: center; }
.wbar .w-profile { padding: 12px 16px !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0; }
.wbar .pf-ov { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.2fr) auto; gap: 18px; align-items: center; }
.wbar .ov-poll { padding: 10px 12px; gap: 4px; }
.wbar .ov-q { font-size: 13.5px; }
.wbar .ov-row { font-size: 12.5px; }
.wbar .ov-bar { height: 4px; margin-top: 3px; }
.wbar .pf-ov > .ov-k { display: none; }
.wbar .pf-cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wbar .pf-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px; border: 1px solid var(--rule-2); border-radius: 14px; }
.wbar .pf-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbar .pf-row b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbar .ov-foot { flex-direction: column; align-items: flex-start; border: 0; padding: 0; gap: 6px; max-width: 150px; font-size: 11.5px; }
/* a hovered person's profile spans the bar in two columns */
.wbar .w-profile > .pf-top, .wbar .w-profile > .pf-who { display: inline-flex; }
.wbar .w-profile:not(:has(.pf-ov)) { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-top { grid-column: 1; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-who { grid-column: 1; margin-top: 8px; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-grid { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-foot, .wbar .w-profile:not(:has(.pf-ov)) .w-quote { grid-column: 1 / -1; margin-top: 8px; }
.wbar .pf-name { font-size: 19px; }
@media (max-width: 1100px) { .wbar { grid-template-columns: 1fr; } .wbar .w-switch { border-right: 0 !important; border-bottom: 1px solid var(--rule-2) !important; } .wbar .pf-ov { grid-template-columns: 1fr; } .wbar .pf-cast { grid-template-columns: 1fr 1fr; } .wbar .ov-foot { max-width: none; flex-direction: row; } }
/* Hero + bar fit one window */
@media (min-width: 1001px) {
  .hero-world { padding-top: 0 !important; }
  .hero-world .hero-copy { padding-top: 0; }
  .w-stage { max-width: calc((100vh - 290px) * 576 / 446); }
  .hero-world .hero-grid { align-items: center; }
}
.wbar { margin-top: 0; grid-template-columns: 200px minmax(0, 1fr); border-radius: 20px; }
.wbar .w-switch { grid-template-columns: 34px 1fr 34px !important; padding: 10px 8px 16px !important; }
.wbar .w-switch button { width: 34px; height: 34px; }
.wbar .w-switch b { font-size: 12px; letter-spacing: .1em; }
.wbar .w-switch span { font-size: 11.5px; }
.wbar .w-profile { padding: 10px 14px !important; }
.wbar .pf-ov { grid-template-columns: 260px minmax(0, 1fr) 130px; gap: 14px; }
.wbar .pf-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wbar .pf-row { padding: 6px 8px; }
.wbar .pf-row b, .wbar .pf-row small { white-space: normal; overflow: visible; }
.wbar .pf-row small { font-size: 11.5px; }
/* hovered profile: one row */
.wbar .w-profile:not(:has(.pf-ov)) { grid-template-columns: 220px minmax(0, 1fr) !important; row-gap: 0; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-top { grid-row: 1; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-who { grid-row: 2; margin-top: 4px; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-grid { grid-row: 1 / span 2; grid-template-columns: repeat(6, minmax(0, auto)); gap: 4px 20px; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-grid .wide { grid-column: auto; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-foot { display: none; }
.wbar .w-profile:not(:has(.pf-ov)) .w-quote { margin-top: 6px; padding: 6px 10px; font-size: 13px; }
.wbar .pf-name { font-size: 17px; }
.wbar .pf-sub { font-size: 12.5px; }

/* Rotating word: fixed slot, crossfade */
.hero-h1 .rot { display: inline-grid; vertical-align: bottom; }
.hero-h1 .rot > span { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hero-h1 .rot > span:not(.on) { opacity: 0; transform: translateY(.18em); }
.hero-h1 .rot.out { opacity: 1; transform: none; }

/* Wide canvas: fixed height, full width to the screen edge, neighbours fade out */
@media (min-width: 1001px) {
  .world { margin: 0 calc((100vw - min(100vw, 1600px)) / -2 - clamp(20px, 4vw, 64px)) 0 -60px; }
  .w-stage { width: 100%; max-width: none; height: max(420px, calc(100vh - 300px)); }
  .w-stage .w-scene { width: 100%; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent); }
}
.w-nb { cursor: pointer; outline: none; }
.w-nb > g:first-child { transition: opacity .3s; }
.w-nb:hover > g:first-child, .w-nb:focus-visible > g:first-child { opacity: .85; }
.w-nb-tag rect { transition: fill .2s, stroke .2s; }
.w-nb:hover .w-nb-tag rect, .w-nb:focus-visible .w-nb-tag rect { stroke: var(--indigo); }
@media (min-width: 1001px) {
  .world { margin-left: 0; }
  .w-stage .w-scene { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent); }
}
/* Bar polish */
.wbar { margin-top: 18px; grid-template-columns: 236px minmax(0, 1fr); }
.wbar .w-switch div { min-width: 0; }
.wbar .w-switch b, .wbar .w-switch span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbar .w-profile:not(:has(.pf-ov)) { grid-template-columns: 240px minmax(0, 1fr) !important; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-top { justify-content: flex-start; gap: 8px; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-id { margin-left: 0; font-size: 11.5px; }
.wbar .w-profile:not(:has(.pf-ov)) .pf-grid { align-self: center; }
.wbar .pf-grid dd { font-size: 14px; }
.wbar .w-switch .w-count { display: none !important; }
/* Compact speech bubbles */
.w-bubble { width: 184px; padding: 8px 10px; border-radius: 12px; }
.w-bubble p { font-size: 12px; line-height: 1.35; margin-top: 4px; }
.w-bubble .w-chip { height: 16px; font-size: 8.5px; padding: 0 6px; }
.w-reply { font-size: 10px; }
.w-by { font-size: 10.5px; margin-top: 4px; }
/* Hero + canvas + bar always inside one window */
@media (min-width: 1001px) {
  .w-stage { height: max(340px, calc(100vh - 340px)); }
  .wbar { margin-top: 12px; }
  .wbar .w-profile { padding: 8px 14px !important; }
  .wbar .ov-poll { padding: 8px 12px; }
  .wbar .pf-row { padding: 5px 8px; }
  .hero-world .hero-copy .live-pill { margin-bottom: 12px; }
  .hero-proof { margin-top: 18px; padding-top: 14px; }
}
/* Bar keeps one height in every state (overview, hover, pinned) */
@media (min-width: 1001px) {
  .wbar { height: 146px; }
  .wbar .w-profile { height: 146px; display: grid; align-content: center; overflow: hidden !important; }
  .wbar .w-profile:not(:has(.pf-ov)) { align-content: center; }
  .wbar .w-profile .w-quote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Enrich animation */
.pv-enrich { overflow: hidden; background: radial-gradient(120% 100% at 0% 50%, #e3f6f2, var(--paper) 55%); }
.en-src { position: absolute; left: 10px; top: 10px; font-size: 10.5px; font-weight: 700; color: var(--teal); padding: 3px 8px; border-radius: 99px; background: #fff; border: 1px solid #a8e2d8; z-index: 3; }
.en-p { position: absolute; left: 0; top: 0; width: 40px; height: 40px; will-change: transform; z-index: 2; }
.en-p svg { position: absolute; inset: -2px; width: 44px; height: 44px; }
.en-ring { transition: stroke-dasharray .6s var(--ease); }
.en-p .avatar { position: absolute; inset: 4px; width: 32px; height: 32px; border-width: 1.5px; box-shadow: none; }
.en-p.hit .avatar { animation: enhit .6s var(--ease); }
@keyframes enhit { 40% { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(14, 154, 135, .35); } }
.en-chip { position: absolute; left: 0; top: 0; z-index: 4; white-space: nowrap; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  background: var(--teal); color: #fff; box-shadow: 0 4px 10px -4px rgba(14, 154, 135, .6); pointer-events: none; }
/* step 1: back card is a skeleton, so texts never overlap */
.pv-card.back { display: grid; gap: 6px; padding: 12px; }
.pv-card .sk { display: block; height: 7px; width: 55%; border-radius: 4px; background: var(--rule); }
.pv-card .sk.s2 { width: 80%; }
/* Simulation: fixed-size feed, so new messages never resize the section */
.sim2-feed { height: 288px; overflow: hidden; align-content: start; grid-auto-rows: 88px; }
.sim2-msg { height: 88px; box-sizing: border-box; overflow: hidden; align-items: start; }
.sim2-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim2-msg .re { margin-top: 3px; }
.sim2-msg.typing .sim2-typing { margin-top: 10px; }
@media (min-width: 961px) {
  .night .sim2-stage { height: min(460px, calc(100vh - 200px)); }
  .night { max-height: none; }
}
@media (min-width: 961px) and (max-height: 820px) {
  .sim2-feed { height: 196px; } .sim2-msg:nth-child(n+3) { display: none; }
  .night .sec-head .lede { display: none; }
}

/* Transcreation: six markets, typed line, staged notes, fixed size */
.tx-tabs6 { flex-wrap: wrap; gap: 6px; }
.tx-tabs6 .tc-tab { position: relative; overflow: hidden; height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.tx-tabs6 .tc-tab span { font-size: 13.5px; }
.tx-prog { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0; background: var(--indigo); }
.tc-tab.run .tx-prog { animation: prog 6.5s linear forwards; }
.tx-body { min-height: 330px; }
.tx-local { min-height: 2.9em; }
.tx-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--indigo); animation: blink .8s steps(1) infinite; }
.done .tx-caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.tx-back, .tx-note { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.done .tx-back { opacity: 1; transform: none; }
.done .tx-note { opacity: 1; transform: none; transition-delay: calc(var(--d) + .2s); }
@media (prefers-reduced-motion: reduce) { .tx-back, .tx-note { opacity: 1; transform: none; } }
.tx-tabs6 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
.tx-tabs6::-webkit-scrollbar { display: none; }
.tx-tabs6 .tc-tab { flex: none; padding: 0 10px; font-size: 12.5px; }
.tx-tabs6 .tc-tab span { font-size: 13px; }

/* Enrich globe */
.pv-enrich { background: radial-gradient(90% 120% at 60% 55%, #eef0fb, var(--paper) 70%); height: 170px; }
.pv-enrich canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.en-src { display: inline-flex; align-items: center; gap: 6px; }
.en-src i { width: 7px; height: 7px; border-radius: 99px; background: var(--teal); animation: ping-dot 1.4s infinite; }
.en-faces, .en-chips { position: absolute; inset: 0; pointer-events: none; }
.en-face { position: absolute; left: 0; top: 0; transition: opacity .3s; will-change: transform; }
.en-face .avatar { width: 26px; height: 26px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--teal), 0 4px 10px -4px rgba(20, 26, 58, .4); }
.en-chips .en-chip { position: absolute; transform: translate(-50%, -100%); animation: chipup 1.9s var(--ease) forwards; font-size: 10px; padding: 2px 8px; }
@keyframes chipup { 0% { opacity: 0; transform: translate(-50%, -80%); } 15%, 75% { opacity: 1; transform: translate(-50%, -120%); } 100% { opacity: 0; transform: translate(-50%, -150%); } }
.pp .pp-vis { height: 170px; }
.en-face .avatar { width: 22px; height: 22px; }
.en-face::after { content: ""; position: absolute; left: 10px; top: 22px; width: 2px; height: 5px; background: var(--teal); border-radius: 1px; }
.pp .pp-vis, .pv-enrich { height: 200px; }

/* Dialect steps in transcreation */
.tx-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tx-steps i { width: 18px; height: 2px; background: var(--rule); }
.tx-s { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--rule-2); color: var(--ink-3); transition: background .3s, color .3s; }
.lit .tx-s.s1 { background: var(--rose-soft); color: #a92d4e; }
.dia .tx-s.s2 { background: var(--indigo-soft); color: var(--indigo-deep); }
.done .tx-s.s3 { background: var(--teal-soft); color: #0a6f61; }
.tx-lit { font-size: 15px; color: var(--ink-3); margin-bottom: 6px; opacity: 0; transition: opacity .4s; }
.tx-lit-k { display: inline-block; font-size: 10.5px; font-weight: 700; color: #a92d4e; margin-right: 8px; font-family: var(--font-body); }
.lit .tx-lit { opacity: 1; }
.dia .tx-lit { text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; opacity: .55; }
.tx-body { min-height: 400px; }
@media (prefers-reduced-motion: reduce) { .tx-lit { opacity: .55; text-decoration: line-through; } }

/* Localisation component */
.lc { padding: 20px; }
.lc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.lc-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.lc-tab b { font-family: var(--font-display); font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: var(--rule-2); color: var(--ink-2); }
.lc-tab[aria-selected="true"] { border-color: var(--indigo-tint); background: #f6f5ff; color: var(--ink); box-shadow: inset 0 -2.5px 0 var(--indigo); }
.lc-tab[aria-selected="true"] b { background: var(--indigo); color: #fff; }
.lc-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: stretch; }
.lc-ad { --h: #4b44d9; border-radius: 20px; padding: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--h) 18%, #fff), #fff); border: 1px solid var(--rule); transition: background .5s; }
.lc-frame { height: 100%; min-height: 300px; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--h) 75%, #141a3a), var(--h)); animation: rise .45s var(--ease); }
.lc-badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.lc-frame[dir="rtl"] .lc-badge { align-self: flex-end; }
.lc-frame b { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.lc-img { margin-top: 4px; flex: 1; min-height: 70px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .45); display: grid; place-items: center; font-size: 13px; color: rgba(255, 255, 255, .85); text-align: center; padding: 8px; }
.lc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-price { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.lc-cta { padding: 8px 14px; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; }
.lc-frame small { font-size: 12px; opacity: .8; }
.lc-list { display: grid; gap: 0; align-content: start; }
.lc-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--rule-2); animation: rise .4s var(--ease) both; animation-delay: var(--d); }
.lc-row span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.lc-row b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .lc-grid { grid-template-columns: 1fr; } .lc-row { grid-template-columns: 1fr; gap: 2px; } }

/* Localisation walkthrough */
.lc { padding: 18px 20px 20px; }
.lw-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--rule-2); }
.lw-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lw-steps b { width: 20px; height: 2px; background: var(--rule); }
.lw-step { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--ink-3); transition: color .3s; }
.lw-step i { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--rule-2); color: var(--ink-3); transition: background .3s, color .3s; }
.lw-step.on { color: var(--ink); } .lw-step.on i { background: var(--indigo); color: #fff; box-shadow: 0 0 0 4px var(--indigo-soft); }
.lw-step.done i { background: var(--teal-soft); color: var(--teal); }
.lw-mk { display: flex; gap: 6px; flex-wrap: wrap; }
.lw-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--rule); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lw-chip em { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: var(--rule-2); }
.lw-chip[aria-pressed="true"] { border-color: var(--indigo-tint); background: #f6f5ff; color: var(--ink); }
.lw-chip[aria-pressed="true"] em { background: var(--indigo); color: #fff; }
.lw-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; min-height: 420px; }
.lw-left { display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: 18px; background: var(--paper); }
.lw-field { display: grid; gap: 6px; }
.lw-lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lw-select { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--rule); background: #fff; font-weight: 600; font-size: 14px; }
.lw-select em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: var(--indigo); color: #fff; }
.lw-select i { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: 12px; }
.lw-states { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-st { padding: 7px 11px; border-radius: 10px; border: 1px solid var(--rule); background: #fff; font-size: 13px; color: var(--ink-2); transition: all .2s; }
.lw-st.on { border-color: var(--indigo); background: var(--indigo); color: #fff; box-shadow: 0 6px 14px -8px rgba(75, 68, 217, .8); }
.lw-input { min-height: 64px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--indigo-tint); background: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.35; }
.lw-tone { grid-template-columns: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lw-tone .lw-lab { width: 100%; }
.lw-right { display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.lw-talk { display: grid; gap: 8px; align-content: start; }
.lw-feed { display: grid; gap: 8px; min-height: 196px; align-content: start; }
.lw-msg { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); animation: rise .35s var(--ease); }
.lw-msg b { font-family: var(--font-display); font-size: 13.5px; }
.lw-re { font-size: 11.5px; color: var(--indigo); margin-left: 8px; }
.lw-say { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.lw-dots { display: none; gap: 4px; margin-top: 6px; } .lw-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3); animation: typing 1s infinite; }
.lw-dots i:nth-child(2) { animation-delay: .15s; } .lw-dots i:nth-child(3) { animation-delay: .3s; }
.lw-msg.typing .lw-dots { display: flex; } .lw-msg.typing .lw-say { display: none; }
.lw-out { padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #f6f5ff, #fff); border: 1px solid var(--indigo-tint); opacity: .35; transition: opacity .4s; display: grid; gap: 8px; align-content: start; }
.lw-out.show { opacity: 1; }
.lw-out-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lw-where { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.lw-line { font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; line-height: 1.45; min-height: 1.5em; }
.lw-out.done .tx-caret { display: none; }
.lw-back, .lw-notes, .lw-src { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.lw-out.done .lw-back, .lw-out.done .lw-notes, .lw-out.done .lw-src { opacity: 1; transform: none; }
.lw-back { font-size: 13.5px; color: #5b4200; background: var(--marigold-soft); padding: 8px 12px; border-radius: 10px; }
.lw-notes { display: flex; gap: 6px; flex-wrap: wrap; }
.lw-src { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 900px) { .lw-grid { grid-template-columns: 1fr; } }
/* Enrich globe v2: centred globe, persona orbit, side chips with leader lines */
.pv-enrich { background: radial-gradient(60% 80% at 50% 50%, #eceefb, var(--paper) 75%); }
.en-orb { position: absolute; left: 0; top: 0; transition: opacity .3s; will-change: transform; }
.en-orb .avatar { width: 24px; height: 24px; border: 2px solid #fff; box-shadow: 0 3px 8px -3px rgba(20, 26, 58, .4); }
.en-chips .en-chip { position: absolute; translate: 0 -50%; animation: chipin 2.6s var(--ease) forwards; display: grid; gap: 0; padding: 4px 9px; border-radius: 10px;
  background: #fff; color: var(--ink-2); border: 1px solid #a8e2d8; box-shadow: 0 6px 14px -8px rgba(14, 154, 135, .5); font-size: 10.5px; font-weight: 600; line-height: 1.3; transform: none; }
.en-chips .en-chip b { color: #0a6f61; font-size: 10.5px; }
.en-chips .en-chip.l { left: 12px; } .en-chips .en-chip.r { right: 12px; text-align: right; }
@keyframes chipin { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
.en-count { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--ink-3); }
.en-count b { font-family: var(--font-display); font-size: 14px; color: var(--teal); }
.en-chips .en-chip { width: max-content; max-width: 34%; }
.en-chips .en-chip.l { left: 12px; right: auto; } .en-chips .en-chip.r { right: 12px; left: auto; }
/* Walkthrough: literal vs dialect */
.lw-lit { font-size: 14.5px; color: var(--ink-3); line-height: 1.5; transition: opacity .4s; }
.lw-lit span, .lw-dk { display: inline-block; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-right: 8px; vertical-align: 2px; }
.lw-lit span { background: var(--rose-soft); color: #a92d4e; }
.lw-dk { background: var(--indigo-soft); color: var(--indigo-deep); }
.lw-out.strike .lw-lit { text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; opacity: .55; }
.lw-out.strike .lw-lit span { text-decoration: none; }
/* Answers card */
.pv-answer { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.an-q { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; animation: rise .35s var(--ease); }
.an-q span { width: 20px; height: 20px; border-radius: 99px; background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 10.5px; flex: none; }
.an-a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--ink); color: #fff; min-height: 76px; }
.an-a b { font-size: 12px; color: #9aa0cf; font-weight: 600; }
.an-t { font-size: 13px; line-height: 1.45; margin-top: 2px; }
.an-ev { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: var(--marigold-soft); color: #8a5b00; font-size: 12px; font-weight: 650;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.an-ev.show { opacity: 1; transform: none; }
.an-ev i { width: 8px; height: 8px; border-radius: 99px; background: var(--marigold); }
.an-ev.none { background: var(--rule-2); color: var(--ink-2); } .an-ev.none i { background: var(--ink-3); }
.an-dots { margin-top: auto; display: flex; gap: 4px; }
.an-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--rule); transition: all .3s; }
.an-dots i.on { width: 16px; background: var(--indigo); }
.pp-step .an-t { color: #fff; font-size: 13px; }
/* Walkthrough: creatives */
.lw-ad { --h: #4b44d9; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; color: #fff; min-height: 190px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--h) 70%, #141a3a), var(--h)); box-shadow: 0 14px 30px -18px rgba(20, 26, 58, .6); }
.lw-ad.sm { min-height: 150px; }
.lw-ad-tag { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.lw-ad[dir="rtl"] .lw-ad-tag { align-self: flex-end; }
.lw-ad b { font-family: var(--font-display); font-size: 17px; line-height: 1.3; min-height: 2.6em; }
.lw-ad .tx-caret { background: #fff; position: absolute; display: none; }
.lw-ad-car { flex: 1; min-height: 40px; border-radius: 10px; background:
  radial-gradient(ellipse 40% 12% at 50% 88%, rgba(0,0,0,.25), transparent),
  linear-gradient(180deg, transparent 45%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.9) 72%, transparent 72%) center / 62% 100% no-repeat; opacity: .85; }
.lw-ad-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lw-ad-foot span { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; }
.lw-ad-foot em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: #fff; color: var(--ink); }
.lw-out { position: relative; }
.lw-out-grid { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.lw-out-txt { display: grid; gap: 8px; }
.lw-out-head, .lw-out-grid { transition: opacity .4s; }
.lw-out:not(.show) .lw-out-head, .lw-out:not(.show) .lw-out-grid { opacity: 0; }
.lw-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--ink-3); transition: opacity .3s; }
.lw-out.show .lw-wait { opacity: 0; pointer-events: none; }
.lw-out:not(.show) { opacity: 1; border-style: dashed; background: #fafbfe; }
.lw-line { font-size: clamp(17px, 1.4vw, 21px); }
@media (max-width: 1100px) { .lw-out-grid { grid-template-columns: 1fr; } }
.lw-hl { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--teal-soft); color: #0a6f61; letter-spacing: .02em; text-transform: none; font-size: 10.5px; }
.lw-cities .lw-st.on { background: var(--teal); border-color: var(--teal); box-shadow: 0 6px 14px -8px rgba(14, 154, 135, .8); }
.lw-left { gap: 11px; }
.lw-ad.sm { min-height: 128px; }
.lw-ad.sm .lw-ad-car { min-height: 26px; }

/* ==========================================================================
   Product ad (serum), used by the heatmap and localisation
   ========================================================================== */
.sad { container-type: inline-size; position: absolute; inset: 0; overflow: hidden; color: #3c3226;
  background: radial-gradient(80% 60% at 75% 30%, #f6efe5, transparent), linear-gradient(165deg, #efe6da, #e2d4c1); font-family: var(--font-body); }
.sad-leaf { position: absolute; right: -6%; top: -4%; width: 42cqw; transform: rotate(8deg); }
.sad-stone { position: absolute; right: 4%; bottom: 7%; width: 50cqw; height: 9cqw; border-radius: 3cqw;
  background: linear-gradient(180deg, #ece2d2, #d8c9b2); box-shadow: 0 2cqw 4cqw -2cqw rgba(60, 40, 20, .35), inset 0 .5cqw 0 rgba(255,255,255,.5); }
.sad-prod { position: absolute; right: 12%; bottom: 13%; width: 30cqw; filter: drop-shadow(0 3cqw 3cqw rgba(60, 40, 20, .25)); }
.sad-bottle { width: 100%; height: auto; display: block; }
.sad-copy { position: absolute; left: 7%; top: 9%; width: 54%; display: flex; flex-direction: column; gap: 2.4cqw; }
.sad-h { font-family: "Cormorant Garamond", Georgia, var(--font-body); font-weight: 600; font-size: 8.6cqw; line-height: 1.04; letter-spacing: -.01em; color: #3a2e22; min-height: 1em; }
.sad[lang]:not([lang="en"]) .sad-h { font-family: var(--font-body); font-weight: 650; font-size: 6.6cqw; line-height: 1.3; }
.sad-sub { font-size: 3.2cqw; color: #5d5143; line-height: 1.35; }
.sad-ben { list-style: none; margin: 1.2cqw 0 0; padding: 0; display: grid; gap: 1.8cqw; }
.sad-ben li { display: grid; grid-template-columns: 6.4cqw 1fr; gap: 2cqw; align-items: center; }
.sad-ben i { width: 6.4cqw; height: 6.4cqw; border-radius: 99px; border: 1px solid #8a7a66; display: grid; place-items: center; color: #5d5143; }
.sad-ben i svg { width: 60%; height: 60%; }
.sad-ben b { display: block; font-size: 2.9cqw; font-weight: 650; color: #3c3226; }
.sad-ben small { display: block; font-size: 2.5cqw; color: #6b5d4c; }
.sad-cta { align-self: flex-start; margin-top: 1.6cqw; padding: 2.2cqw 4.6cqw; border-radius: 1.2cqw; background: #b39a6b; color: #fff; font-size: 3cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sad[lang]:not([lang="en"]) .sad-cta { letter-spacing: 0; text-transform: none; }
.sad-price { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 4.6cqw; color: #3a2e22; }
.sad-tag { position: absolute; z-index: 2; top: 3%; right: 3%; font-size: 2.6cqw; font-weight: 700; padding: 1cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .75); color: #5d5143; }
.sad[dir="rtl"] .sad-copy { left: auto; right: 7%; }
.sad[dir="rtl"] .sad-prod { right: auto; left: 12%; }
.sad[dir="rtl"] .sad-stone { right: auto; left: 4%; }
.sad[dir="rtl"] .sad-tag { right: auto; left: 3%; }
.sad[dir="rtl"] .sad-cta { align-self: flex-end; }

/* Heatmap on the product ad */
.heat { aspect-ratio: 4 / 5; }
.heat-layer .sad { filter: saturate(.7) brightness(.97); }
.heat-blobs { mix-blend-mode: multiply; }
.heat-blobs i { position: absolute; border-radius: 50%; filter: blur(14px); opacity: calc(.55 + var(--s) * .45);
  background: radial-gradient(closest-side, rgba(232, 92, 40, .95), rgba(248, 168, 80, .75) 45%, rgba(250, 210, 140, .35) 70%, transparent); }
.heat-blobs i.blue { background: radial-gradient(closest-side, rgba(232, 92, 40, .9), rgba(248, 168, 80, .65) 38%, rgba(120, 175, 235, .6) 62%, transparent); }
.heat-call { position: absolute; z-index: 3; translate: 0 -50%; max-width: 30%; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px -6px rgba(0,0,0,.3);
  font-size: 9.5px; line-height: 1.3; color: #3c3226; }
.heat-call b { display: block; font-family: var(--font-display); font-size: 15px; color: #e05a28; }
.heat-legend { position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 2.5%; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .88); font-size: 10px; font-weight: 600; color: #3c3226; }
.heat-legend i { flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #e85c28, #f8c878, #78afeb); }
.heat > .heat-pin { width: 22px; height: 22px; font-size: 11px; }
.heat-labels { display: none; }

/* Localisation creatives */
.lw-master { position: relative; width: min(100%, 250px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(20, 26, 58, .5); }
.lw-master .tx-caret { display: none; }
.lw-adwrap { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(20, 26, 58, .5); }
.lw-out-grid { grid-template-columns: 220px 1fr; }
/* Heatmap pins carry the share of attention */
.heat > .heat-pin.pct { width: auto; height: 24px; padding: 0 8px 0 3px; border-radius: 99px; gap: 5px; display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 12px; font-weight: 800; color: #e05a28; background: #fff; }
.heat > .heat-pin.pct i { width: 18px; height: 18px; border-radius: 99px; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10px; }
.heat > .heat-pin.pct.on { background: var(--marigold); color: #fff; }
.heat > .heat-pin.pct.on i { background: #fff; color: var(--marigold); }
.sad-leaf { width: 30cqw; right: -4%; top: -2%; }

/* Hyperlocal walkthrough: one fixed size in every step */
@media (min-width: 901px) {
  .lw-grid { height: 520px; min-height: 0; }
  .lw-left { height: 520px; overflow: hidden; gap: 10px; }
  .lw-master { width: 172px; }
  .lw-right { height: 520px; grid-template-rows: 226px 1fr; overflow: hidden; }
  .lw-feed { height: 196px; min-height: 0; overflow: hidden; }
  .lw-msg { padding: 7px 11px; }
  .lw-say { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lw-out { height: 280px; overflow: hidden; padding: 12px 14px; }
  .lw-out-grid { grid-template-columns: 172px 1fr; gap: 14px; }
  .lw-line { font-size: 18px; }
  .lw-lit { font-size: 13px; }
}
/* Hyperlocal: fit one window */
@media (min-width: 901px) {
  #localisation .sec-head { margin-bottom: 16px; }
  .lc { padding: 14px 18px 16px; }
  .lw-top { padding-bottom: 10px; margin-bottom: 12px; }
  .lw-grid, .lw-left, .lw-right { height: 432px; }
  .lw-left { padding: 12px 14px; gap: 8px; }
  .lw-select { height: 36px; }
  .lw-st { padding: 5px 10px; font-size: 12.5px; }
  .lw-master { width: 150px; }
  .lw-right { grid-template-rows: 206px 1fr; gap: 10px; }
  .lw-feed { height: 180px; gap: 6px; }
  .lw-out { height: 216px; padding: 10px 12px; gap: 6px; }
  .lw-out-grid { grid-template-columns: 136px 1fr; gap: 12px; }
  .lw-line { font-size: 16.5px; }
  .lw-back { padding: 6px 10px; font-size: 12.5px; }
}
/* Three messages always fit the fixed feed */
@media (min-width: 901px) {
  .lw-feed { height: 186px; grid-auto-rows: 58px; }
  .lw-msg { height: 58px; box-sizing: border-box; padding: 6px 11px; align-items: center; overflow: hidden; }
  .lw-msg b { font-size: 13px; }
  .lw-say { -webkit-line-clamp: 1; font-size: 12.5px; margin-top: 1px; }
  .lw-right { grid-template-rows: 210px 1fr; }
}
/* Output card fits its slot exactly */
@media (min-width: 901px) {
  .lw-right { grid-template-rows: 196px minmax(0, 1fr); gap: 10px; }
  .lw-feed { height: 176px; grid-auto-rows: 54px; }
  .lw-msg { height: 54px; }
  .lw-out { height: auto; min-height: 0; box-sizing: border-box; padding: 10px 12px; gap: 8px; align-content: start; }
  .lw-out-grid { grid-template-columns: 136px 1fr; align-items: start; }
  .lw-out-txt { gap: 6px; }
  .lw-notes .pill { font-size: 11.5px; height: 24px; }
}

/* ==========================================================================
   Study panel: filters, insights, persona tooltips
   ========================================================================== */
.st-head-r { display: grid; gap: 6px; justify-items: end; }
.st-conf { font-size: 11.5px; color: var(--ink-3); padding: 3px 9px; border-radius: 99px; background: var(--marigold-soft); }
.st-conf b { color: #8a5b00; }
.st-conf.hi { background: var(--teal-soft); } .st-conf.hi b { color: #0a6f61; }
.st-strip { position: relative; }
.st-tok { cursor: pointer; transition: opacity .3s, filter .3s; }
.st-tok.out { opacity: .2; filter: grayscale(1); }
.st-tok:hover .avatar, .st-tok:focus-visible .avatar { transform: translateY(-3px) scale(1.12); }
.st-tip { position: absolute; z-index: 5; top: calc(100% + 6px); width: 230px; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff;
  box-shadow: var(--shadow-lg); font-size: 12px; animation: rise .2s var(--ease); pointer-events: none; }
.st-tip b { font-family: var(--font-display); font-size: 13.5px; }
.st-tip span { color: #aab0dc; }
.st-tip em { font-style: normal; color: #dfe2f7; line-height: 1.4; }
.st-tv { justify-self: start; padding: 1px 8px; border-radius: 99px; font-weight: 700; font-size: 11px; color: #fff !important; }
.st-tv.a { background: var(--indigo); } .st-tv.b { background: var(--marigold); } .st-tv.n { background: rgba(255,255,255,.15); }
.st-segs { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.st-segs > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.st-seg { height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--rule); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.st-seg[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-body { margin-top: 10px; min-height: 186px; }
.sb-ad { min-height: 176px; padding: 14px; }
.sb-thumb { height: 150px; }
.st-ins { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 10px; margin-top: 10px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.st-ins.show { opacity: 1; transform: none; }
.st-in { padding: 10px 12px; border-radius: 14px; background: var(--paper); display: grid; gap: 6px; align-content: start; min-height: 128px; }
.st-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.st-r { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink); padding-bottom: 5px; }
.st-r b { font-family: var(--font-display); font-size: 12.5px; }
.st-r small { display: block; font-size: 10.5px; color: var(--ink-3); }
.st-r i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px; background: var(--indigo); transition: width .8s var(--ease); }
.st-r.sp i { background: var(--teal); }
.st-ins.show .st-r i { width: var(--v); }
.st-in.st-voice { margin: 0; background: var(--ink); color: #fff; min-height: 128px; padding: 10px 12px; }
.st-in.st-voice .st-k { color: #8f95c8; }
.st-voice-in { grid-template-columns: 28px 1fr; gap: 8px; }
.st-voice .st-say { font-size: 12.5px; }
.st-voice .st-native { font-size: 13px; }
.st-synth { margin-top: 10px; padding: 9px 12px; font-size: 13px; align-items: center; }
.st-synth .link { margin-left: auto; white-space: nowrap; font-size: 13px; }
.st-foot { display: none; }
@media (max-width: 900px) { .st-ins { grid-template-columns: 1fr; } }
.st-tip[hidden] { display: none; }

/* ==========================================================================
   The decision gap (replaces the four problem cards)
   ========================================================================== */
.gap { padding: 22px 24px 18px; }
.gap-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.gap-t { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -.01em; }
.gap-s { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.gap-toggle { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--rule-2); }
.gap-toggle button { height: 34px; padding: 0 16px; border: 0; border-radius: 99px; background: none; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink-2); transition: background .25s, color .25s; }
.gap-toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(20, 26, 58, .12); }
.gap-toggle button[data-mode="anthryn"][aria-pressed="true"] { background: var(--indigo); color: #fff; }
.gap-chart { position: relative; height: 270px; margin-top: 16px; }
.gap-chart svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 230px; overflow: visible; }
.gap-grid line { stroke: var(--rule-2); stroke-dasharray: 3 5; }
.gap-line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.gap-spend { position: absolute; right: 4px; top: 4px; font-size: 11.5px; font-weight: 600; color: var(--indigo); }
.gap-stages { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.gap-stages li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); transition: color .25s; }
.gap-stages li i { width: 12px; height: 12px; border-radius: 99px; background: #fff; border: 2px solid var(--rule); transition: all .25s; }
.gap-stages li.on { color: var(--ink); } .gap-stages li.on i { border-color: var(--indigo); background: var(--indigo); box-shadow: 0 0 0 5px var(--indigo-soft); }
/* the evidence band slides between "after launch" and "before you commit" */
.gap-band { position: absolute; top: 0; bottom: 36px; width: 36%; left: 63%; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px;
  background: linear-gradient(180deg, rgba(216, 70, 106, .12), rgba(216, 70, 106, .03)); border: 1.5px dashed rgba(216, 70, 106, .5);
  transition: left .9s cubic-bezier(.65, 0, .35, 1), background .6s, border-color .6s; }
.gap-band-lab { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 5px 11px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-md); font-size: 12px; }
.gap-band-lab i { width: 8px; height: 8px; border-radius: 99px; background: var(--rose); transition: background .6s; }
.gap-band-lab b { font-weight: 700; color: #a92d4e; }
.lab-anthryn { display: none; }
.gap-faces { display: flex; opacity: 0; transform: translateY(8px); transition: opacity .5s .5s, transform .5s .5s; }
.gap-faces .avatar { width: 28px; height: 28px; margin-left: -7px; border: 2px solid #fff; }
.gap-faces .avatar:first-child { margin-left: 0; }
.gap-faces span.avatar { width: auto; padding: 0 8px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 10.5px; }
.gap-chart[data-mode="anthryn"] .gap-band { left: 1%; background: linear-gradient(180deg, rgba(14, 154, 135, .16), rgba(14, 154, 135, .03)); border-color: rgba(14, 154, 135, .55); }
.gap-chart[data-mode="anthryn"] .gap-band-lab i { background: var(--teal); }
.gap-chart[data-mode="anthryn"] .gap-band-lab b { color: #0a6f61; }
.gap-chart[data-mode="anthryn"] .lab-today { display: none; } .gap-chart[data-mode="anthryn"] .lab-anthryn { display: inline; }
.gap-chart[data-mode="anthryn"] .gap-faces { opacity: 1; transform: none; }
/* team cards */
.gap-teams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.gap-team { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rule); background: #fff; display: grid; gap: 8px; align-content: start; cursor: default; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.gap-team.on { border-color: var(--indigo-tint); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gap-tag { font-size: 12px; font-weight: 700; color: var(--indigo-deep); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gap-tag em { font-style: normal; font-weight: 600; color: var(--ink-3); }
.gap-team h3 { font-size: 15.5px; line-height: 1.3; }
.gap-team p { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); padding: 7px 9px; border-radius: 10px; transition: opacity .5s, background .5s; }
.gap-team p b { font-size: 11px; font-weight: 750; }
.gt-today { background: var(--rose-soft); } .gt-today b { color: #a92d4e; }
.gt-with { background: var(--teal-soft); opacity: .35; } .gt-with b { color: #0a6f61; }
.gap[data-mode="anthryn"] .gt-with { opacity: 1; }
.gap[data-mode="anthryn"] .gt-today { opacity: .35; }
.gap-note { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 1100px) { .gap-teams { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .gap-teams { grid-template-columns: 1fr; } .gap-band { width: 44%; left: 55%; } .gap-stages li { font-size: 10.5px; } .gap-team p { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gap-band, .gap-faces { transition: none; } }
/* compact */
.gap { padding: 18px 22px 14px; }
.gap-chart { height: 214px; margin-top: 10px; }
.gap-chart svg { height: 176px; }
.gap-band { justify-content: flex-start; gap: 10px; bottom: 34px; }
.gap-teams { margin-top: 14px; gap: 10px; }
.gap-team { padding: 12px 14px; gap: 6px; }
.gap-tag { display: grid; gap: 1px; }
.gap-tag em { font-size: 11px; }
.gap-team h3 { font-size: 14.5px; }
.gap-team p { grid-template-columns: 1fr; gap: 1px; padding: 6px 9px; font-size: 12.5px; }
.gap-note { margin-top: 8px; }

/* ==========================================================================
   Decision cards: Today → With anthryn
   ========================================================================== */
.problem-sec .sec-head { margin-bottom: 16px; }
.dg-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dg-hint { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dg .gap-toggle button[data-mode="after"][aria-pressed="true"] { background: var(--indigo); color: #fff; }
.dg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dg-card { background: #fff; border: 1px solid var(--rule); border-radius: 22px; padding: 12px 12px 14px; display: grid; gap: 4px; align-content: start; transition: border-color .4s var(--d), box-shadow .4s var(--d); }
.dg[data-mode="after"] .dg-card { border-color: #bfe6de; box-shadow: 0 14px 30px -22px rgba(14, 154, 135, .55); }
.dg-vis { position: relative; height: 168px; border-radius: 16px; overflow: hidden; margin-bottom: 8px; background: var(--paper); transition: background .5s var(--d); }
.dg[data-mode="after"] .dg-vis { background: linear-gradient(170deg, #eefaf7, #f6f7fb); }
.dg-team { font-size: 11.5px; font-weight: 700; color: var(--indigo-deep); padding: 0 4px; }
.dg-card h3 { font-size: 15.5px; line-height: 1.3; padding: 0 4px; }
.dg-line { position: relative; display: grid; margin: 4px 0 0; padding: 7px 10px 7px 26px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; min-height: 52px; background: var(--rose-soft); color: #7a2440; transition: background .4s var(--d), color .4s var(--d); }
.dg-line::before { content: "Today"; position: absolute; left: 10px; top: 9px; width: 8px; height: 8px; border-radius: 99px; background: var(--rose); font-size: 0; transition: background .4s var(--d); }
.dg-line span { grid-area: 1 / 1; transition: opacity .35s var(--d), transform .35s var(--d); }
.dg-line .w { opacity: 0; transform: translateY(6px); }
.dg[data-mode="after"] .dg-line { background: var(--teal-soft); color: #0a5f54; }
.dg[data-mode="after"] .dg-line::before { background: var(--teal); }
.dg[data-mode="after"] .dg-line .t { opacity: 0; transform: translateY(-6px); }
.dg[data-mode="after"] .dg-line .w { opacity: 1; transform: none; }
/* shared transition timing per card */
.dg-vis * { transition-delay: var(--d); }
/* 1 concepts */
.vc-row { position: absolute; left: 14px; right: 14px; bottom: 14px; top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; }
.vc { display: grid; gap: 4px; justify-items: center; height: 100%; align-content: end; order: 0; }
.vc i { width: 100%; height: 60%; border-radius: 10px; background: #fff; border: 1.5px dashed var(--indigo-tint); transition: height .7s var(--ease), background .5s, border-color .5s; transition-delay: calc(var(--d) + var(--o) * 90ms); }
.vc b { font-family: var(--font-display); font-size: 13px; color: var(--ink); opacity: 0; transition: opacity .4s; transition-delay: calc(var(--d) + 300ms + var(--o) * 90ms); }
.vc span { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.dg[data-mode="after"] .vc i { height: var(--h); border-style: solid; border-color: transparent; background: linear-gradient(180deg, #b8b4f5, var(--indigo)); }
.dg[data-mode="after"] .vc:first-child i { background: linear-gradient(180deg, #7fd8c8, var(--teal)); }
.dg[data-mode="after"] .vc b { opacity: 1; }
.dg-q { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 99px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; transition: opacity .3s, transform .3s; }
.dg-pick { position: absolute; top: 10px; left: 12px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--teal); color: #fff; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.dg[data-mode="after"] .dg-q { opacity: 0; transform: scale(.6); }
.dg[data-mode="after"] .dg-pick { opacity: 1; transform: none; transition-delay: calc(var(--d) + 600ms); }
/* 2 ads */
.va { position: absolute; top: 16px; width: 42%; height: 92px; border-radius: 12px; padding: 10px; color: #fff; display: grid; align-content: start; gap: 2px; transition: transform .6s var(--ease), box-shadow .6s; }
.va.a { left: 6%; background: linear-gradient(150deg, #2a1f6e, #6b2fa4 60%, #e8774a); transform: rotate(-4deg); }
.va.b { right: 6%; background: linear-gradient(150deg, #0e9a87, #14324a); transform: rotate(4deg); }
.va b { font-family: var(--font-display); font-size: 18px; } .va small { font-size: 10.5px; opacity: .85; }
.va-v { position: absolute; left: 10px; bottom: 8px; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 17px; opacity: 0; transition: opacity .4s; }
.va-op { position: absolute; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); color: var(--ink-2); transition: opacity .35s, transform .35s; }
.va-op.o1 { left: 10%; top: 118px; } .va-op.o2 { right: 8%; top: 128px; }
.va-faces { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.va-faces .avatar { width: 24px; height: 24px; margin-left: -6px; border: 2px solid #fff; }
.va-faces span.avatar { width: auto; padding: 0 7px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 10px; }
.dg[data-mode="after"] .va.a { transform: rotate(0) translateY(-4px); box-shadow: 0 0 0 3px var(--teal), 0 12px 20px -10px rgba(14, 154, 135, .6); }
.dg[data-mode="after"] .va.b { transform: rotate(0); opacity: .75; }
.dg[data-mode="after"] .va-v { opacity: 1; transition-delay: calc(var(--d) + 300ms); }
.dg[data-mode="after"] .va-op { opacity: 0; transform: translateY(-6px); }
.dg[data-mode="after"] .va-faces { opacity: 1; transform: none; transition-delay: calc(var(--d) + 200ms); }
/* 3 price */
.v-price svg { position: absolute; left: 14px; right: 14px; top: 26px; width: calc(100% - 28px); height: 100px; overflow: visible; }
.vp-line { fill: none; stroke: var(--indigo); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease); transition-delay: var(--d); vector-effect: non-scaling-stroke; }
.vp-dot { fill: var(--rose); opacity: 0; transition: opacity .3s; }
.dg[data-mode="after"] .vp-line { stroke-dashoffset: 0; }
.dg[data-mode="after"] .vp-dot { opacity: 1; transition-delay: calc(var(--d) + 800ms); }
.vp-tag { position: absolute; left: 50%; top: 50px; translate: -50% 0; padding: 7px 12px; border-radius: 10px 10px 10px 2px; background: var(--marigold); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; transition: all .6s var(--ease); }
.vp-q { position: absolute; left: 50%; top: 92px; translate: -50% 0; font-size: 12px; font-weight: 600; color: var(--ink-3); transition: opacity .3s; }
.vp-obj { position: absolute; right: 10px; top: 10px; max-width: 64%; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); color: #a92d4e; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.vp-x { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); opacity: 0; transition: opacity .4s; }
.dg[data-mode="after"] .vp-tag { left: 70%; top: 96px; font-size: 11px; padding: 3px 7px; }
.dg[data-mode="after"] .vp-q { opacity: 0; }
.dg[data-mode="after"] .vp-obj { opacity: 1; transform: none; transition-delay: calc(var(--d) + 900ms); }
.dg[data-mode="after"] .vp-x { opacity: 1; }
/* 4 docs */
.vd { position: absolute; padding: 8px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-md); font-size: 11.5px; font-weight: 650; color: var(--ink-2); transition: all .6s var(--ease); }
.vd.d1 { left: 8%; top: 18px; transform: rotate(-8deg); } .vd.d2 { right: 6%; top: 58px; transform: rotate(6deg); } .vd.d3 { left: 14%; top: 104px; transform: rotate(-3deg); }
.vd-study { position: absolute; left: 12%; right: 12%; top: 22px; padding: 12px; border-radius: 12px; background: #fff; border: 1.5px solid #a8e2d8; box-shadow: 0 14px 26px -16px rgba(14, 154, 135, .6); display: grid; gap: 4px; font-size: 12px; color: #0a5f54;
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s, transform .5s var(--ease); }
.vd-study b { font-family: var(--font-display); font-size: 13px; color: var(--ink); }
.dg[data-mode="after"] .vd { left: 40%; right: auto; top: 70px; transform: rotate(0) scale(.6); opacity: 0; }
.dg[data-mode="after"] .vd-study { opacity: 1; transform: none; transition-delay: calc(var(--d) + 250ms); }
@media (max-width: 1100px) { .dg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dg-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dg * { transition: none !important; } }
.vc-row { top: auto; height: 130px; }
.vc { height: 130px; grid-template-rows: 1fr auto auto; align-content: stretch; }
.vc i { align-self: end; height: 30%; }
.dg[data-mode="after"] .vc i { height: calc(var(--h) * .8); }
.vp-line { vector-effect: none; stroke-width: 3; }
.v-price svg { height: auto; aspect-ratio: 2 / 1; top: 18px; }
.vp-line { stroke-linecap: butt; } .dg-line { min-height: 0; }

/* ==========================================================================
   How it works: study loop + study thread
   ========================================================================== */
.pin-track.pinned .flow, .flow { grid-template-columns: 380px minmax(0, 1fr); gap: 28px; align-items: center; }
.loop { position: relative; width: 360px; height: 360px; margin: 0 auto; }
.loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-prog { transition: stroke-dasharray .7s var(--ease); }
.loop-back { opacity: .35; transition: opacity .5s; }
.flow.at-end .loop-back { opacity: 1; animation: dash 1s linear infinite; }
.loop-rerun { position: absolute; left: 6px; top: 24px; font-size: 11.5px; font-weight: 700; color: #0a6f61; background: var(--teal-soft); padding: 3px 9px; border-radius: 99px; opacity: .45; transition: opacity .5s; }
.flow.at-end .loop-rerun { opacity: 1; }
.loop-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 190px; text-align: center; display: grid; gap: 6px; }
.loop-core.in { animation: rise .4s var(--ease); }
.loop-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); }
.loop-core b { font-family: var(--font-display); font-size: 19px; line-height: 1.2; letter-spacing: -.015em; }
.loop-core p { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
/* the four stations sit on the ring */
.loop-steps, .pin-track.pinned .loop-steps { position: absolute; inset: 0; display: block; height: auto; }
.loop-steps .step { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #fff; border: 1px solid var(--rule);
  box-shadow: var(--shadow-md); white-space: nowrap; grid-template-columns: none; overflow: visible; }
.loop-steps .step:nth-child(1) { left: 50%; top: 12px; }
.loop-steps .step:nth-child(2) { left: calc(100% - 4px); top: 50%; translate: -86% -50%; }
.loop-steps .step:nth-child(3) { left: 50%; top: calc(100% - 12px); }
.loop-steps .step:nth-child(4) { left: 4px; top: 50%; translate: -14% -50%; }
.loop-steps .step .n { width: 30px; height: 30px; border-radius: 99px; font-size: 13px; }
.loop-steps .step h4 { font-size: 13.5px; }
.loop-steps .step p, .loop-steps .step .prog { display: none !important; }
.loop-steps .step h4 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.loop-steps .step[aria-selected="true"] { border-color: var(--indigo); box-shadow: 0 10px 24px -12px rgba(75, 68, 217, .7); }
.loop-steps .step.done .n { background: var(--teal); color: #fff; }
/* study thread */
.flow-right { display: grid; gap: 12px; min-width: 0; }
.thread { padding: 12px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--rule); }
.thread-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.thread-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; position: relative; }
.th { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1.5px dashed var(--rule); color: var(--ink-3); transition: all .4s var(--ease); }
.th i { grid-row: span 2; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: var(--rule-2); transition: all .4s; }
.th b { font-family: var(--font-display); font-size: 13px; color: inherit; }
.th small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th.on { border-style: solid; border-color: var(--indigo); background: #f6f5ff; color: var(--ink); box-shadow: 0 8px 18px -12px rgba(75, 68, 217, .7); }
.th.on i { background: var(--indigo); color: #fff; }
.th.done { border-style: solid; border-color: #a8e2d8; background: var(--teal-soft); color: #0a5f54; }
.th.done i { background: var(--teal); color: transparent; position: relative; }
.th.done i::after { content: "✓"; position: absolute; color: #fff; font-size: 12px; }
.pin-track.pinned .flow-stage { height: clamp(330px, calc(100vh - 360px), 470px); }
@media (max-width: 1100px) { .flow, .pin-track.pinned .flow { grid-template-columns: 1fr; } .thread-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .loop { width: 300px; height: 300px; } .loop-core { width: 150px; } .loop-core p { display: none; } }
.loop-steps .step h4 { display: none; }
.sl { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.step:not(.loop-steps .step) .sl { display: none; }
.loop-steps .step { padding: 5px 13px 5px 5px; }
.loop-steps .step:nth-child(2) { left: 100%; translate: -70% -50%; }
.loop-steps .step:nth-child(4) { left: 0; translate: -30% -50%; }
.loop-core { width: 170px; }
.loop-core b { font-size: 17px; }
.loop-core p { font-size: 12.5px; }
.loop-rerun { left: 0; top: 30px; }