/* tokens */
:root {
  --ink: #000000;
  --ink-2: #111110;
  --ink-3: #1D1C1A;
  --bone: #F1EFE7;
  --paper: #FBFAF6;
  --sand: #B8A37E;
  --sand-deep: #8A7757;
  --sand-tile: #E9E3D3;
  --grey: #6E6C66;
  --grey-2: #86847D;
  --grey-light: #B9B6AD;
  --line-dark: rgba(241, 239, 231, 0.14);
  --line-light: rgba(0, 0, 0, 0.10);
  --display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --nav-h: 48px;
  --sub-h: 52px;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--text); font-size: 17px; line-height: 1.47; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.page-light { background: var(--paper); color: var(--ink); }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--sub-h) + 12px); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 6px; }
.light :focus-visible, .page-light :focus-visible { outline-color: var(--sand-deep); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--bone); color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.wrap { max-width: 1068px; margin: 0 auto; padding-inline: 22px; }
.wrap--narrow { max-width: 760px; }
.center { text-align: center; }
section { position: relative; }
.dark { background: var(--ink); color: var(--bone); }
.light { background: var(--paper); color: var(--ink); }
.sandbg { background: var(--sand-tile); color: var(--ink); }

/* type */
.eyebrow { font-family: var(--display); font-size: clamp(19px, 1.8vw, 21px); font-weight: 600; color: var(--sand); letter-spacing: -0.005em; }
.light .eyebrow, .page-light .eyebrow, .sandbg .eyebrow { color: var(--sand-deep); }
.mega { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.03; font-size: clamp(44px, 7.4vw, 88px); text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(36px, 5.4vw, 64px); text-wrap: balance; }
.h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(26px, 3.2vw, 36px); text-wrap: balance; }
.h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; font-size: 21px; }
.lede { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.38; font-weight: 500; color: var(--grey-light); max-width: 36em; letter-spacing: -0.005em; }
.center .lede, .lede.c { margin-inline: auto; }
.lede b { color: var(--bone); font-weight: 600; }
.light .lede, .page-light .lede, .sandbg .lede { color: var(--grey); }
.light .lede b, .page-light .lede b { color: var(--ink); }
.body { font-size: 17px; line-height: 1.55; color: var(--grey-light); max-width: 40em; }
.light .body, .page-light .body, .sandbg .body, .tile.white .body, .tile.sand .body { color: var(--grey); }
.small { font-size: 14px; color: var(--grey-2); }
.label { font-size: 14px; font-weight: 600; color: var(--sand); letter-spacing: 0.01em; }
.light .label, .page-light .label, .tile.white .label, .tile.sand .label { color: var(--sand-deep); }
.stack > * + * { margin-top: var(--gap, 18px); }

/* placeholders */
.ph { font-family: ui-monospace, Menlo, monospace; font-size: 0.72em; font-weight: 500; letter-spacing: 0.02em; padding: 0.1em 0.45em; border: 1px dashed currentColor; border-radius: 6px; opacity: 0.75; }
.mega .ph, .h2 .ph { font-size: 0.5em; vertical-align: 0.15em; }
.ph-box { display: grid; place-items: center; text-align: center; padding: 20px; border: 1px dashed var(--line-dark); border-radius: 22px; color: var(--grey-2); font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; min-height: 120px; background: rgba(241, 239, 231, 0.03); }
.light .ph-box, .page-light .ph-box, .tile.white .ph-box, .tile.sand .ph-box { border-color: rgba(0, 0, 0, 0.18); background: rgba(0, 0, 0, 0.025); color: var(--grey); }

/* buttons (glass pills) */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 980px; font-size: 17px; font-weight: 500; border: 1px solid transparent; cursor: pointer; white-space: nowrap; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.pill--sm { min-height: 32px; padding: 0 15px; font-size: 13px; }
.pill--light { background: rgba(241, 239, 231, 0.94); color: var(--ink); border-color: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); }
.pill--light:hover { background: #fff; }
.pill--dark { background: rgba(0, 0, 0, 0.88); color: var(--bone); border-color: #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.pill--dark:hover { background: #000; }
.pill--ghost { background: rgba(184, 163, 126, 0.06); color: var(--sand); border-color: var(--sand); }
.pill--ghost:hover { background: rgba(184, 163, 126, 0.16); }
.light .pill--ghost, .page-light .pill--ghost, .sandbg .pill--ghost { color: var(--sand-deep); border-color: var(--sand-deep); }
.pill[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.more { color: var(--sand); font-size: 17px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; }
.more::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.more:hover { text-decoration: underline; }
.light .more, .page-light .more, .tile.white .more, .tile.sand .more, .sandbg .more { color: var(--sand-deep); }
.ctas { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.center .ctas { justify-content: center; }
@media (max-width: 560px) {
  .ctas .pill { width: 100%; }
  .pill { white-space: normal; text-align: center; }
}
@media (prefers-reduced-transparency: reduce) { .pill { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* global nav + product subnav */
.gnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; height: var(--nav-h); background: rgba(0, 0, 0, 0.74); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line-dark); color: var(--bone); }
.gnav .in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; font-size: 13px; }
.brand svg { width: 22px; height: 22px; fill: currentColor; }
.gnav .links { display: flex; gap: 28px; color: rgba(241, 239, 231, 0.8); list-style: none; padding: 0; margin: 0; }
.gnav .links a { padding: 12px 0; }
.gnav .links a:hover { color: var(--bone); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 12px; letter-spacing: 0.12em; min-height: 44px; padding: 0 4px; }
.subnav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 55; height: var(--sub-h); background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line-dark); color: var(--bone); }
.subnav .in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.subnav .t { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.subnav .r { display: flex; align-items: center; gap: 22px; font-size: 13px; color: rgba(241, 239, 231, 0.8); }
.subnav .r a:not(.pill):hover { color: var(--bone); }
.page-light .gnav { background: rgba(251, 250, 246, 0.8); color: var(--ink); border-bottom-color: var(--line-light); }
.page-light .gnav .links { color: rgba(0, 0, 0, 0.72); }
.page-light .gnav .links a:hover { color: var(--ink); }
.page-light .subnav { background: rgba(251, 250, 246, 0.72); color: var(--ink); border-bottom-color: var(--line-light); }
.page-light .subnav .r { color: rgba(0, 0, 0, 0.72); }
.page-light .subnav .r a:not(.pill):hover { color: var(--ink); }
.mobile-menu { display: none; }
@media (max-width: 820px) {
  .gnav .links, .gnav .gcta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .subnav .r a:not(.pill) { display: none; }
  .mobile-menu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 70; background: var(--ink); color: var(--bone); padding: 12px 22px 26px; border-bottom: 1px solid var(--line-dark); }
  .page-light .mobile-menu { background: var(--paper); color: var(--ink); border-bottom-color: var(--line-light); }
  .mobile-menu.is-open { display: block; }
  .mobile-menu ul { list-style: none; padding: 0; margin: 0 0 18px; }
  .mobile-menu li a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line-dark); font-family: var(--display); font-size: 22px; font-weight: 600; }
  .page-light .mobile-menu li a { border-bottom-color: var(--line-light); }
  .mobile-menu .pill { width: 100%; }
  .mobile-menu .more { margin-top: 16px; }
}

/* entrances */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* section spacing */
.sec { padding-block: clamp(96px, 12vw, 150px); }
.sec--tight { padding-block: clamp(72px, 9vw, 110px); }
.sec-head { margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head .lede { margin-top: 18px; }

/* hero */
.hero { padding-top: clamp(56px, 7vw, 88px); overflow-x: clip; }
.hero .eyebrow { margin-bottom: 12px; }
.hero .lede { margin-top: 22px; }
.hero .lede + .lede { margin-top: 12px; font-size: clamp(17px, 1.5vw, 19px); }
.hero .ctas { margin-top: 30px; }
.hero .meta { margin-top: 18px; font-size: 14px; color: var(--grey-2); }
.hero .meta b { color: var(--sand); font-weight: 600; }
.stage { position: relative; margin-top: 56px; height: 165vh; }
.stage .pin { position: sticky; top: calc(var(--nav-h) + var(--sub-h) + 24px); height: calc(100vh - 140px); display: grid; place-items: center; }

/* device frame (product UI) */
.device { width: min(880px, 92vw); border-radius: 28px; background: var(--ink-2); border: 1px solid var(--line-dark); box-shadow: 0 60px 140px rgba(184, 163, 126, 0.14), 0 0 0 10px #0B0B0A, 0 0 0 11px rgba(241, 239, 231, 0.08); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.device--hero { aspect-ratio: 16 / 10; transform: scale(var(--s, 0.84)) translateY(var(--y, 36px)); transform-origin: 50% 20%; will-change: transform; }
.device .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line-dark); font-weight: 600; font-size: 15px; color: var(--bone); }
.device .who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #2A2926; display: grid; place-items: center; font-size: 11px; color: var(--sand); letter-spacing: 0.06em; border: 1px solid var(--line-dark); flex: none; }
.device .chat { padding: 26px 26px 10px; display: grid; gap: 16px; align-content: start; }
.msg { max-width: 72%; padding: 14px 18px; border-radius: 20px; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.45; }
.msg.u { justify-self: end; background: var(--bone); color: var(--ink); border-bottom-right-radius: 6px; }
.msg.c { justify-self: start; background: var(--ink-3); color: var(--bone); border: 1px solid var(--line-dark); border-bottom-left-radius: 6px; }
.msg .src { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-dark); font-size: 12px; color: var(--grey-2); }
.js .device--hero .msg { opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 10px)); }
.device .input { margin: 12px 22px 22px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line-dark); color: var(--grey-2); font-size: 15px; }
.device .ph-box { border: 0; border-radius: 0; background: transparent; }
@media (max-width: 640px) {
  .device--hero { aspect-ratio: 9 / 14; width: min(380px, 90vw); }
  .msg { max-width: 88%; }
  .stage { height: 140vh; }
}

/* proof band / numbers */
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.logos .ph-box { min-height: 76px; border-radius: 16px; font-size: 10px; padding: 10px; }
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.num { text-align: center; }
.num .v { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 6.4vw, 84px); letter-spacing: -0.04em; line-height: 1; }
.num .v small { font-size: 0.45em; letter-spacing: -0.02em; }
.num .v .ph { font-size: 0.26em; vertical-align: middle; }
.num .k { margin-top: 10px; color: var(--grey); font-size: 16px; font-weight: 500; }
.dark .num .k { color: var(--grey-light); }
@media (max-width: 820px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
}

/* word-lit statement */
.statement .track { height: 210vh; }
.statement .pin { position: sticky; top: 28vh; }
.statement .say { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(34px, 5.6vw, 66px); max-width: 16em; }
.statement .w { color: #3A3935; transition: color 160ms linear; }
.statement .w.on { color: var(--bone); }
.statement .w.on.accent { color: var(--sand); }
.light.statement .w { color: #D6D2C6; }
.light.statement .w.on { color: var(--ink); }
.light.statement .w.on.accent { color: var(--sand-deep); }
.statement .after { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; }
@media (max-width: 760px) { .statement .after { grid-template-columns: 1fr; } }

/* collage */
.collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.collage .ph-box { min-height: 170px; }
.collage .resolve { grid-column: 1 / -1; border-radius: 22px; padding: 26px 28px; background: var(--ink-2); border: 1px solid var(--line-dark); }
.collage .resolve .label { display: block; margin-bottom: 8px; }
@media (max-width: 760px) { .collage { grid-template-columns: 1fr 1fr; } }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { border-radius: 28px; padding: 40px 36px; min-height: 360px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; position: relative; }
.tile.dark { background: var(--ink-2); color: var(--bone); border: 1px solid var(--line-dark); }
.tile.black { background: var(--ink); color: var(--bone); }
.tile.sand { background: var(--sand-tile); color: var(--ink); }
.tile.white { background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
.tile.wide { grid-column: 1 / -1; min-height: 320px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.tile .art { margin-top: auto; }
.tile.compact { min-height: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: 980px; font-size: 14px; font-weight: 500; background: rgba(0, 0, 0, 0.06); }
.tile.dark .chip, .tile.black .chip { background: rgba(241, 239, 231, 0.1); }
.branch { display: grid; gap: 10px; }
.branch .q { padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--bone); font-size: 15px; justify-self: start; }
.branch .a { padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.07); font-size: 15px; justify-self: end; max-width: 88%; }
@media (max-width: 900px) { .tiles--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .tiles, .tiles--3 { grid-template-columns: 1fr; }
  .tile.wide { grid-template-columns: 1fr; }
  .tile { padding: 32px 24px; min-height: 0; }
}

/* pinned story */
.story .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.story .visual { position: sticky; top: calc(var(--nav-h) + var(--sub-h) + 40px); height: min(540px, 66vh); border-radius: 28px; background: var(--ink-2); border: 1px solid var(--line-dark); overflow: hidden; }
.panel { position: absolute; inset: 0; padding: 34px; display: grid; align-content: center; gap: 14px; opacity: 0; transform: scale(0.98); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.panel.on { opacity: 1; transform: none; }
.panel .big { font-family: var(--display); font-size: clamp(72px, 11vw, 140px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--sand); }
.panel .ph-box { min-height: 180px; }
.steps { display: grid; }
.step { min-height: 72vh; display: grid; align-content: center; padding-block: 40px; }
.step .label { display: block; margin-bottom: 10px; }
.step .body { margin-top: 14px; font-size: 19px; }
@media (max-width: 820px) {
  .story .cols { grid-template-columns: 1fr; }
  .story .visual { top: calc(var(--nav-h) + var(--sub-h) + 12px); height: 40vh; z-index: 1; }
  .step { min-height: 62vh; position: relative; z-index: 2; }
  .step > div { background: rgba(0, 0, 0, 0.84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 22px; border-radius: 20px; border: 1px solid var(--line-dark); }
}

/* case study */
.case-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: stretch; }
.case-grid .video { aspect-ratio: 16 / 9; min-height: 0; }
.case-grid .summary { border-radius: 28px; background: #fff; padding: 32px; display: grid; align-content: center; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.shots .ph-box { aspect-ratio: 9 / 16; min-height: 0; font-size: 10px; padding: 10px; }
.after-proof { margin-top: 48px; }
@media (max-width: 820px) { .case-grid { grid-template-columns: 1fr; } .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* gates */
.gates { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 44px; }
.gate { padding: 16px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line-light); font-weight: 600; font-size: 17px; text-align: center; }
.gate span { display: block; font-size: 13px; color: var(--grey); font-weight: 500; margin-top: 4px; }
.criteria { margin: 36px auto 0; max-width: 560px; padding: 22px 26px; border-radius: 20px; border: 1px dashed rgba(0, 0, 0, 0.2); }

/* faq */
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line-light); }
.dark .faq-list { border-top-color: var(--line-dark); }
.faq-list details { border-bottom: 1px solid var(--line-light); }
.dark .faq-list details { border-bottom-color: var(--line-dark); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 68px; padding: 20px 0; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.7vw, 21px); letter-spacing: -0.012em; line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); position: relative; }
.dark .faq-list .pm { background: rgba(241, 239, 231, 0.1); }
.faq-list .pm::before, .faq-list .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 220ms var(--ease); }
.faq-list .pm::after { transform: rotate(90deg); }
.faq-list details[open] .pm::after { transform: rotate(0deg); }
.faq-list .answer { padding: 0 0 26px; }

/* footer */
.foot { background: #F5F4EF; color: var(--grey); font-size: 12px; padding: 22px 0 32px; }
.foot .rule { border-top: 1px solid var(--line-light); margin-top: 12px; padding-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0; }
.foot a:hover { text-decoration: underline; color: var(--ink); }

/* transform page parts */
.portrait { aspect-ratio: 16 / 9; max-width: 980px; margin: 56px auto 0; border-radius: 28px; min-height: 0; }
.side-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-light); max-width: 560px; }
.quote-tile { border-radius: 28px; background: #fff; padding: clamp(32px, 5vw, 64px); max-width: 920px; margin: 0 auto; }
.quote-tile .q { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-light); font-family: var(--display); font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.mech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.mech div { border-radius: 20px; background: #fff; padding: 20px 22px; }
.mech dt { font-size: 13px; color: var(--grey); font-weight: 500; }
.mech dd { margin-top: 6px; font-weight: 600; }
@media (max-width: 760px) { .mech { grid-template-columns: 1fr 1fr; } }
.caps { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; border-top: 1px solid var(--line-light); }
.caps li { padding: 22px 4px; border-bottom: 1px solid var(--line-light); font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -0.012em; line-height: 1.3; }
.weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 32%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 22px 18px; margin-inline: -22px; list-style: none; }
.weeks li { scroll-snap-align: start; }
@media (max-width: 760px) { .weeks { grid-auto-columns: 82%; } }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 24%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; list-style: none; padding-left: 0; margin: 0; }
.strip li { scroll-snap-align: start; }
.strip .ph-box { min-height: 150px; }
@media (max-width: 760px) { .strip { grid-auto-columns: 78%; } }
.reassure { margin-top: 16px; }

/* enrollment */
.enroll { padding: clamp(48px, 7vw, 90px) 0 clamp(90px, 10vw, 130px); }
.enroll .grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; margin-top: 44px; }
.sumcard { border-radius: 28px; background: #fff; padding: 32px; }
.sumcard .fee { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-block: 1px solid var(--line-light); margin-top: 18px; }
.sumcard .fee strong { font-family: var(--display); font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -0.03em; }
.sumcard ul { list-style: none; padding: 0; margin: 0; }
.sumcard li { padding: 16px 0; border-bottom: 1px solid var(--line-light); }
.sumcard li .label { display: block; margin-bottom: 6px; }
.paycard { position: sticky; top: calc(var(--nav-h) + var(--sub-h) + 24px); border-radius: 28px; background: var(--ink); color: var(--bone); padding: 32px; }
.paycard .body { color: var(--grey-light); margin-top: 10px; }
.agree { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 22px; padding: 16px; border: 1px solid var(--line-dark); border-radius: 16px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--bone); }
.agree a { text-decoration: underline; text-underline-offset: 3px; }
.paycard .pill { width: 100%; margin-top: 18px; }
.paycard .small { margin-top: 14px; color: var(--grey-light); }
.paycard .small a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .enroll .grid2 { grid-template-columns: 1fr; } .paycard { position: static; } }

/* dialog form (shared JS contract) */
.dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); overflow: auto; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dialog-inner { padding: 36px 36px 30px; }
@media (max-width: 560px) { .dialog-inner { padding: 28px 20px 22px; } }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dialog-close { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.06); border: 0; border-radius: 50%; cursor: pointer; }
.dialog-close svg { width: 16px; height: 16px; }
.form { display: grid; gap: 18px; margin-top: 22px; }
.field { display: grid; gap: 8px; }
.field > label, .field > legend { font-size: 14px; font-weight: 600; padding: 0; }
.field .hint { font-weight: 400; color: var(--grey); font-size: 13px; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 14px; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sand-deep); outline-offset: 1px; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: #A3261B; }
.field .error { color: #A3261B; font-size: 13.5px; font-weight: 500; }
.field .error:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 980px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.14); cursor: pointer; font-size: 14.5px; }
.check input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.check:has(input:checked) { border-color: var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.form-foot .small a { text-decoration: underline; }
.form-status { font-size: 14px; }
.form-success { display: none; }
.is-sent .form { display: none; }
.is-sent .form-success { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .device--hero { transform: none; }
  .js .device--hero .msg { opacity: 1; transform: none; }
  .stage, .statement .track { height: auto; }
  .stage .pin, .statement .pin { position: static; height: auto; }
  .statement .w { color: inherit !important; }
  .panel { transition: none; }
}
@media (max-width: 560px) {
  .subnav .t { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .subnav .in { gap: 10px; }
}
@media (max-width: 400px) {
  .mega { font-size: 36px; }
  .h2 { font-size: 30px; }
  .h3 { font-size: 24px; }
  .mega, .h2, .h3 { overflow-wrap: break-word; hyphens: auto; }
}

/* one action, carried down the page on small screens where the nav button is hidden */
.cta-bar { display: none; }
@media (max-width: 820px) {
  .cta-bar {
    display: block; position: fixed; left: 0; right: 0; z-index: 65;
    bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.86); border-top: 1px solid var(--line-dark);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    transform: translateY(110%); transition: transform 260ms var(--ease);
  }
  .page-light .cta-bar { background: rgba(251, 250, 246, 0.9); border-top-color: var(--line-light); }
  .cta-bar.is-on { transform: none; }
  .cta-bar .in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .cta-bar .bar-copy { display: flex; flex-wrap: nowrap; gap: 10px; font-size: 12px; color: var(--grey-2); min-width: 0; white-space: nowrap; overflow: hidden; }
  .cta-bar .bar-copy span { overflow: hidden; text-overflow: ellipsis; }
  .cta-bar .bar-copy span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--sand); margin-right: 10px; vertical-align: 3px; }
  .cta-bar .pill { flex: none; }
  @media (max-width: 540px) { .cta-bar .bar-copy span:nth-child(n+3) { display: none; } }
  @media (max-width: 400px) { .cta-bar .bar-copy span:nth-child(n+2) { display: none; } }
  main { padding-bottom: 64px; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .cta-bar { transition: none; }
}

/* booking popup: every CTA opens the scheduler (Calendly) inside the dialog, so the calendar fills it */
.dialog--book { width: min(1040px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); background: #fff; overflow: hidden; }
.dialog--book .dialog-inner { display: flex; flex-direction: column; height: 100%; padding: 28px 28px 0; }
.book-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; max-width: none; margin-top: 8px; color: var(--grey); }
.book-sub .more { flex: none; font-size: 15px; color: var(--sand-deep); text-decoration: underline; text-underline-offset: 3px; }
.book-frame { position: relative; flex: 1 1 auto; min-height: 0; margin: 16px -28px 0; border-top: 1px solid var(--line-light); background: #fff; }
.book-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.book-wait { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; padding: 24px; text-align: center; color: var(--grey); font-size: 15px; }
.book-frame[data-loaded] .book-wait { display: none; }
@media (max-width: 560px) {
  /* phones: the popup takes nearly the whole screen and the heading shrinks, so the calendar gets the room */
  .dialog--book { width: calc(100vw - 12px); max-width: none; height: calc(100dvh - 12px); max-height: none; border-radius: 22px; }
  .dialog--book .dialog-inner { padding: 16px 16px 0; }
  .dialog--book .dialog-head { align-items: center; }
  .dialog--book .dialog-head .label { display: none; }
  .dialog--book .h3 { margin-top: 0 !important; font-size: 19px; line-height: 1.2; }
  .dialog--book .dialog-close { width: 40px; height: 40px; margin: 0 -4px 0 0; }
  .book-sub { margin-top: 6px; font-size: 15px; }
  .book-sub-more { display: none; }
  .book-frame { margin: 12px -16px 0; }
}
/* booking step inside the lead dialog */
.book { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-light); }
.book[hidden] { display: none; }

/* ---------- what we build: the scroll film ----------
   Four acts play in a pinned stage as you scroll, then the camera pulls back to show
   all four as one pipeline. Frames are drawn in a fixed 560x420 space and scaled.
   Without motion (or without script) the same frames sit in a plain grid. */
.sec-film { padding-bottom: 0; }
.film { position: relative; margin-top: clamp(8px, 2vw, 24px); }
.stage { position: relative; background: var(--ink); color: var(--bone); }
.frame { position: relative; width: 560px; height: 420px; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #1a1813 0%, #0b0b0a 58%); border: 1px solid rgba(241, 239, 231, 0.10); }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px var(--sand), inset 0 0 90px rgba(184, 163, 126, 0.22); opacity: var(--glow, 0); }
.f-idx { position: absolute; left: 22px; top: 18px; font: 500 12px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.1em; color: var(--grey-2); }
.frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.frame [pathLength] { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }

/* 01 knowledge system */
.k-box { position: absolute; left: 90px; top: 70px; width: 380px; height: 280px; border-radius: 22px; background: rgba(241, 239, 231, 0.025); }
.k-box-line rect { stroke: rgba(184, 163, 126, 0.55); stroke-width: 1.2; }
.k-box-h { position: absolute; left: 20px; top: 20px; font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-light); }
.k-box-ok { position: absolute; right: 16px; top: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(184, 163, 126, 0.55); font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); }
.k-box-ok::before { content: ""; width: 8px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.k-links path { stroke: rgba(184, 163, 126, 0.42); stroke-width: 1; }
.k-shard { position: absolute; left: 257px; top: 206px; width: 46px; height: 8px; border-radius: 4px; background: rgba(241, 239, 231, 0.24); opacity: 0; }
.k-shard.w2 { width: 64px; }
.k-shard.w3 { width: 30px; background: rgba(184, 163, 126, 0.55); }
.k-tile { position: absolute; width: 104px; height: 96px; border-radius: 16px; background: #181713; border: 1px solid rgba(241, 239, 231, 0.13); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; font-size: 13px; font-weight: 600; color: var(--bone); }
.k-tick { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 3px #0b0b0a; }
.k-tick::after, .p-tick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translate(-50%, -65%) rotate(-45deg); }
.ic { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 46px; height: 32px; }
.ic-book b { width: 10px; height: 32px; border-radius: 2px; background: var(--bone); }
.ic-book b:nth-child(2) { height: 27px; background: var(--sand); }
.ic-book b:nth-child(3) { height: 30px; background: #5b5850; transform: rotate(8deg); transform-origin: bottom left; }
.ic-course { border: 1.5px solid rgba(241, 239, 231, 0.55); border-radius: 6px; align-items: center; }
.ic-course::after { content: ""; position: absolute; left: 5px; bottom: 4px; width: 60%; height: 2px; border-radius: 1px; background: var(--sand); }
.ic-course b, .ic-video b { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--bone); margin-bottom: 3px; }
.ic-pod { align-items: center; gap: 4px; }
.ic-pod b { width: 4px; height: 14px; border-radius: 2px; background: var(--bone); }
.ic-pod b:nth-child(2) { height: 26px; background: var(--sand); } .ic-pod b:nth-child(3) { height: 32px; } .ic-pod b:nth-child(4) { height: 20px; background: var(--sand); } .ic-pod b:nth-child(5) { height: 10px; }
.ic-video { width: 48px; height: 30px; border-radius: 6px; background: #3a3730; align-items: center; }
.ic-video b { margin: 0; }
.ic-doc { width: 32px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 0 5px; border: 1.5px solid rgba(241, 239, 231, 0.55); border-radius: 4px; }
.ic-doc b { height: 2px; width: 100%; border-radius: 1px; background: rgba(241, 239, 231, 0.6); }
.ic-doc b:nth-child(2) { width: 70%; } .ic-doc b:nth-child(4) { width: 50%; background: var(--sand); }
.k-scan { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, var(--sand), transparent); box-shadow: 0 0 26px 8px rgba(184, 163, 126, 0.35); opacity: 0; }

/* 02 methodology mapping */
.e { stroke: rgba(241, 239, 231, 0.38); stroke-width: 1.5; }
.e.hot { stroke: var(--sand); stroke-width: 2.2; }
.m-yn { position: absolute; font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); }
.m-q { position: absolute; left: 20px; top: 176px; width: 152px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #1d1c19; border: 1px solid rgba(241, 239, 231, 0.16); font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.m-q b { display: block; height: 5px; margin-top: 9px; border-radius: 3px; background: rgba(241, 239, 231, 0.2); transform-origin: left; }
.m-q b + b { width: 62%; margin-top: 6px; }
.m-dia { position: absolute; top: 192px; width: 46px; height: 46px; }
.m-dia.d1 { left: 207px; } .m-dia.d2 { left: 307px; }
.m-dia::before, .m-dia::after { content: ""; position: absolute; inset: 7px; border-radius: 6px; transform: rotate(45deg); }
.m-dia::before { background: #1d1c19; border: 1.5px solid rgba(184, 163, 126, 0.75); }
.m-dia::after { background: var(--sand); box-shadow: 0 0 26px 6px rgba(184, 163, 126, 0.55); opacity: var(--hot, 0); }
.m-dl { position: absolute; width: 120px; text-align: center; font: 500 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: var(--grey-light); }
.m-dl.l1 { left: 170px; top: 250px; } .m-dl.l2 { left: 270px; top: 166px; }
.m-node { position: absolute; padding: 11px 15px; border-radius: 14px; background: #1d1c19; border: 1px solid rgba(241, 239, 231, 0.16); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.m-node::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--sand); box-shadow: 0 0 40px rgba(184, 163, 126, 0.45); opacity: var(--hot, 0); }
.m-node.hot { --hot: 1; color: color-mix(in srgb, var(--ink) calc(var(--hot) * 100%), var(--bone)); }
.m-node.hot { white-space: normal; width: 150px; line-height: 1.25; }
.n-follow { left: 300px; top: 52px; opacity: 0.4; } .n-answer { left: 392px; top: 187px; } .n-human { left: 360px; top: 334px; opacity: 0.4; }
.m-node > * , .m-node { isolation: isolate; }
.m-node::before { z-index: -1; }
.m-pulse { position: absolute; left: 386px; top: 209px; width: 12px; height: 12px; border-radius: 50%; background: #fff6e2; box-shadow: 0 0 0 4px rgba(184, 163, 126, 0.5), 0 0 26px 8px rgba(184, 163, 126, 0.7); opacity: 0; }
.m-ripple { position: absolute; left: 392px; top: 187px; width: 150px; height: 58px; border-radius: 14px; border: 2px solid var(--sand); opacity: 0; }

/* 03 product experience */
.p-calls path { stroke: rgba(184, 163, 126, 0.65); stroke-width: 1; }
.p-call { position: absolute; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(184, 163, 126, 0.5); font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); background: #0b0b0a; }
.p-phone { position: absolute; left: 190px; top: 22px; width: 180px; height: 376px; border-radius: 30px; background: linear-gradient(180deg, #121210, #0c0c0b); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 80px rgba(184, 163, 126, 0.08); }
.p-outline rect { stroke: rgba(241, 239, 231, 0.4); stroke-width: 1.5; }
.p-notch { position: absolute; left: 66px; top: 11px; width: 48px; height: 13px; border-radius: 8px; background: #000; border: 1px solid rgba(241, 239, 231, 0.12); }
.p-row { position: absolute; left: 12px; right: 12px; height: 44px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: #1c1b18; font-size: 11.5px; font-weight: 600; }
.p-acct { top: 36px; } .p-pay { top: 92px; }
.p-av { width: 18px; height: 18px; border-radius: 50%; background: var(--sand-tile); flex: none; }
.p-card { width: 20px; height: 14px; border-radius: 3px; border: 1.5px solid rgba(241, 239, 231, 0.55); flex: none; position: relative; }
.p-card::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: rgba(241, 239, 231, 0.55); }
.p-tick { position: relative; margin-left: auto; width: 17px; height: 17px; border-radius: 50%; background: var(--sand); flex: none; }
.p-tick::after { width: 7px; height: 4px; }
.p-bub { position: absolute; display: flex; flex-direction: column; gap: 5px; padding: 11px; border-radius: 14px; }
.p-bub b { display: block; height: 4px; border-radius: 2px; background: rgba(241, 239, 231, 0.35); transform-origin: left; }
.p-bub.me { right: 12px; top: 150px; width: 100px; background: #2a2924; border-bottom-right-radius: 4px; }
.p-bub.me b:nth-child(2) { width: 60%; }
.p-bub.ai { left: 12px; top: 204px; width: 132px; background: rgba(184, 163, 126, 0.16); border: 1px solid rgba(184, 163, 126, 0.4); border-bottom-left-radius: 4px; }
.p-bub.ai b { background: rgba(184, 163, 126, 0.75); } .p-bub.ai b:nth-child(3) { width: 55%; }
.p-prog { top: 306px; height: 50px; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.p-bar { display: block; height: 5px; border-radius: 3px; background: rgba(241, 239, 231, 0.12); }
.p-bar > i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--sand); transform-origin: left; }

/* 04 business intelligence */
.i-stream { position: absolute; left: 18px; top: 44px; width: 150px; height: 330px; }
.i-bub { position: absolute; left: 0; width: 64px; height: 22px; border-radius: 11px 11px 11px 3px; background: #1f1e1a; border: 1px solid rgba(241, 239, 231, 0.14); }
.i-bub::before { content: ""; position: absolute; left: 9px; right: 14px; top: 9px; height: 3px; border-radius: 2px; background: rgba(241, 239, 231, 0.35); }
.i-bub:nth-child(1) { top: 10px; left: 40px; } .i-bub:nth-child(2) { top: 64px; left: 8px; } .i-bub:nth-child(3) { top: 120px; left: 58px; }
.i-bub:nth-child(4) { top: 178px; left: 20px; } .i-bub:nth-child(5) { top: 236px; left: 66px; } .i-bub:nth-child(6) { top: 292px; left: 4px; }
.i-dash { position: absolute; left: 176px; top: 34px; width: 364px; height: 352px; padding: 18px 20px; border-radius: 20px; background: #121210; border: 1px solid rgba(241, 239, 231, 0.13); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.i-head { display: flex; align-items: center; justify-content: space-between; font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-light); }
.i-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px rgba(184, 163, 126, 0.2); }
.i-bar { margin-top: 14px; font-size: 12px; color: var(--grey-light); }
.i-bar span { display: block; margin-bottom: 6px; }
.i-bar b { display: block; height: 7px; border-radius: 4px; background: rgba(241, 239, 231, 0.08); }
.i-bar b i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sand-deep), var(--sand)); transform-origin: left; }
.i-dash .i-spark { position: relative; inset: auto; display: block; width: 100%; height: 44px; margin: 16px 0 6px; }
.i-spark path { stroke: var(--sand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.i-mem { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; margin-top: 8px; padding: 0 10px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--grey-light); }
.i-mem > i { width: 16px; height: 16px; border-radius: 50%; background: #3a3730; flex: none; }
.i-mem.hot { --hot: 1; color: var(--bone); background: rgba(184, 163, 126, calc(0.16 * var(--hot))); box-shadow: inset 0 0 0 1px rgba(184, 163, 126, calc(0.6 * var(--hot))); }
.i-mem.hot > i { background: var(--sand); }
.i-mem em { position: relative; margin-left: auto; padding: 5px 9px; border-radius: 999px; background: var(--sand); color: var(--ink); font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; }
.i-mem em::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--sand); opacity: 0; }

/* captions */
.cap-i { font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.cap-i span { color: var(--bone); margin-right: 8px; }
.cap-t { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.08; letter-spacing: -0.02em; color: var(--bone); }
.cap-s { margin-top: 12px; font-size: 15px; }
.bks, .chapters, .film-skip, .st-grid, .threads { display: none; }
.film-tail { background: var(--ink); text-align: center; padding: 40px 22px clamp(80px, 10vw, 120px); }
.film-tail .more { color: var(--sand); }

/* static layout: frames in a grid, captions under each */
.film:not(.film-on) .stage { display: grid; grid-template-columns: repeat(4, 280px); justify-content: center; gap: 18px 18px; padding: clamp(56px, 7vw, 88px) 22px 8px; }
.film:not(.film-on) .world, .film:not(.film-on) .caps { display: contents; }
.film:not(.film-on) .frame { zoom: 0.5; grid-row: 1; }
.film:not(.film-on) .cap { grid-row: 2; }
.film:not(.film-on) [data-frame="1"], .film:not(.film-on) [data-cap="1"] { grid-column: 2; }
.film:not(.film-on) [data-frame="2"], .film:not(.film-on) [data-cap="2"] { grid-column: 3; }
.film:not(.film-on) [data-frame="3"], .film:not(.film-on) [data-cap="3"] { grid-column: 4; }
.film:not(.film-on) [data-frame="0"], .film:not(.film-on) [data-cap="0"] { grid-column: 1; }
@media (max-width: 1239px) {
  .film:not(.film-on) .stage { grid-template-columns: repeat(2, 340px); column-gap: 22px; }
  .film:not(.film-on) .frame { zoom: 0.607; }
  .film:not(.film-on) [data-frame="2"], .film:not(.film-on) [data-cap="2"] { grid-column: 1; }
  .film:not(.film-on) [data-frame="3"], .film:not(.film-on) [data-cap="3"] { grid-column: 2; }
  .film:not(.film-on) [data-frame="2"], .film:not(.film-on) [data-frame="3"] { grid-row: 3; margin-top: 24px; }
  .film:not(.film-on) [data-cap="2"], .film:not(.film-on) [data-cap="3"] { grid-row: 4; }
}
@media (max-width: 759px) {
  .film:not(.film-on) .stage { grid-template-columns: 336px; }
  .film:not(.film-on) .frame { zoom: 0.6; grid-column: 1 !important; }
  .film:not(.film-on) .cap { grid-column: 1 !important; margin-bottom: 26px; }
  .film:not(.film-on) [data-frame="0"] { grid-row: 1; } .film:not(.film-on) [data-cap="0"] { grid-row: 2; }
  .film:not(.film-on) [data-frame="1"] { grid-row: 3; } .film:not(.film-on) [data-cap="1"] { grid-row: 4; }
  .film:not(.film-on) [data-frame="2"] { grid-row: 5; margin-top: 0; } .film:not(.film-on) [data-cap="2"] { grid-row: 6; }
  .film:not(.film-on) [data-frame="3"] { grid-row: 7; margin-top: 0; } .film:not(.film-on) [data-cap="3"] { grid-row: 8; }
}
@media (max-width: 389px) {
  .film:not(.film-on) .stage { grid-template-columns: 280px; padding-inline: 16px; }
  .film:not(.film-on) .frame { zoom: 0.5; }
}

/* film: pinned stage driven by apple.js */
.film-on { height: 640vh; }
.film-on .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.film-on .stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(var(--sdir, 90deg), var(--sbg, #000) 0, var(--sbg, #000) var(--s1, 0px), rgba(0, 0, 0, 0) var(--s2, 0px)); opacity: calc(1 - var(--fin, 0)); }
.film-on .world { position: absolute; z-index: 1; left: 0; top: 0; transform-origin: 0 0; will-change: transform; opacity: var(--lt, 1); }
.film-on .frame { position: absolute; will-change: opacity; }
.film-on .frame * { will-change: auto; }
.film-on .i-bub { left: 0; }
.film-on .threads { display: block; position: absolute; left: 0; top: 0; max-width: none; overflow: visible; }
.threads path { fill: none; stroke: var(--sand); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); opacity: 0.75; }
.threads circle { fill: #fff6e2; filter: drop-shadow(0 0 10px rgba(184, 163, 126, 0.9)); }
.film-on .st-grid { display: block; position: absolute; inset: -40px; background-image: radial-gradient(rgba(241, 239, 231, 0.09) 1px, transparent 1.6px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 55%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 60% 55%, #000 20%, transparent 75%); opacity: calc(var(--lt, 1) * 0.9); will-change: transform; }
.film-on .caps { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; opacity: var(--lt, 1); }
.film-on .cap { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.film-on .cap-t { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.03; margin-top: 18px; }
.film-on .cap-s { margin-top: 18px; font-size: clamp(16px, 1.25vw, 18px); max-width: 26em; }
.film-on .bks { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bk { position: absolute; left: 0; top: 0; padding-top: 14px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--grey-light); opacity: 0; }
.bk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border: 1px solid rgba(184, 163, 126, 0.6); border-bottom: 0; border-radius: 6px 6px 0 0; }
.bk-a { color: var(--sand); }
.film-on .chapters { z-index: 3; display: flex; gap: 6px; position: absolute; bottom: 34px; left: 0; opacity: var(--lt, 1); }
.chapters i { position: relative; width: 38px; height: 3px; border-radius: 2px; background: rgba(241, 239, 231, 0.16); overflow: hidden; }
.chapters i::after { content: ""; position: absolute; inset: 0; background: var(--sand); transform: scaleX(var(--f, 0)); transform-origin: left; }
.film-on .film-skip { z-index: 4; display: inline-block; position: absolute; right: 22px; bottom: 24px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(241, 239, 231, 0.18); font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-light); opacity: var(--lt, 1); transition: color 0.2s, border-color 0.2s; }
.film-on .film-skip:hover { color: var(--bone); border-color: rgba(241, 239, 231, 0.5); }
@media (max-width: 819px) {
  .film-on { height: 580vh; }
  .film-on .cap-t { font-size: 27px; margin-top: 12px; }
  .film-on .cap-s { font-size: 15px; margin-top: 10px; line-height: 1.45; }
  .film-on .chapters { bottom: 26px; }
  .film-on .film-skip { right: 14px; bottom: 16px; }
}

/* ambient life */
@media (prefers-reduced-motion: no-preference) {
  .ic-pod b { animation: podWave 1.1s ease-in-out infinite; transform-origin: center; }
  .ic-pod b:nth-child(2) { animation-delay: -0.2s; } .ic-pod b:nth-child(3) { animation-delay: -0.45s; } .ic-pod b:nth-child(4) { animation-delay: -0.7s; } .ic-pod b:nth-child(5) { animation-delay: -0.9s; }
  .i-live { box-shadow: none; }
  .i-mem.hot em::after { animation: tagRing 1.8s ease-out infinite; }
}
@keyframes podWave { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(184, 163, 126, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(184, 163, 126, 0); } }
@keyframes tagRing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.7); } }

/* ---------- 21 days: a self-playing explainer on a light stage ----------
   One 480x600 canvas scaled to fit. A single timeline in seconds drives every element,
   so scenes can hand off with real transitions: push-in, clone-out, launch curtain, iris. */
.wf { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); justify-content: center; gap: clamp(32px, 5vw, 64px); align-items: center; }
.wf-player { width: 100%; max-width: min(520px, calc(74vh * 0.8)); justify-self: center; }
.wf-screen { position: relative; aspect-ratio: 480 / 600; border-radius: 28px; overflow: hidden; background: rgba(243, 240, 231, 0.72); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08); }
.wf-canvas { position: absolute; left: 0; top: 0; width: 480px; height: 600px; transform-origin: 0 0; transform: scale(var(--k, 1)); color: var(--ink); font-family: var(--text); }
.wf-canvas svg { max-width: none; }
.wf-canvas [pathLength] { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }
.wf-mono, .wf-day i, .wf-tag, .wf-ex { font: 500 10.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; }
.wf-top { position: absolute; left: 24px; right: 24px; top: 20px; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
.wf-day { display: inline-flex; align-items: baseline; gap: 8px; }
.wf-day b { font-family: var(--display); font-weight: 600; font-size: 25px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wf-day i { color: var(--grey); }
.wf-tag { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(138, 119, 87, 0.5); color: var(--sand-deep); background: rgba(255, 255, 255, 0.6); }
.wf-ex { position: absolute; left: 24px; top: 56px; z-index: 5; font-size: 9.5px; color: var(--grey-2); }
.ws { position: absolute; inset: 0; opacity: 0; }
.ws-build { opacity: 1; }
.wf-canvas .card, .bd-doc, .bd-rule, .ts-review, .ro-feed, .ro-chg, .cr-inbox { background: #fff; border: 1px solid var(--line-light); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07); }

/* phone shared by build and test */
.wf-phone { position: absolute; left: 90px; top: 116px; width: 300px; height: 472px; padding: 8px; border-radius: 42px; background: #0d0d0c; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.22); transform-origin: 50% 50%; z-index: 3; }
.wp-screen { position: relative; height: 100%; border-radius: 34px; background: #fff; overflow: hidden; }
.wp-head { display: flex; align-items: center; gap: 9px; height: 54px; padding: 8px 18px 0; border-bottom: 1px solid var(--line-light); font-size: 13.5px; font-weight: 600; }
.wp-head i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--sand), var(--sand-deep)); }
.wp-head em { margin-left: auto; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; color: var(--sand-deep); }
.wp-hello, .wp-chat { position: absolute; left: 12px; right: 12px; top: 66px; bottom: 58px; }
.wp-hello { display: flex; flex-direction: column; }
.tc { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 7px; }
.bb { position: relative; margin: 0; max-width: 212px; padding: 9px 12px; border-radius: 17px; font-size: 14px; line-height: 1.36; }
.bb.me { align-self: flex-end; background: var(--ink); color: var(--bone); border-bottom-right-radius: 5px; }
.bb.ai { align-self: flex-start; max-width: 222px; background: var(--sand-tile); border-bottom-left-radius: 5px; }
.bb.v1::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: var(--ink); transform: scaleX(var(--x, 1)); transform-origin: left; }
.bw { position: relative; align-self: flex-start; }
.typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 12px 13px; border-radius: 16px; background: var(--sand-tile); opacity: 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.vd { align-self: flex-start; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(138, 119, 87, 0.45); font: 500 9.5px/1.1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sand-deep); }
.vd.flag { border-color: var(--ink); color: var(--ink); background: #fff; }
.wp-in { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 38px; margin: 0; padding: 0 5px 0 14px; display: flex; align-items: center; justify-content: space-between; border-radius: 19px; border: 1px solid var(--line-light); font-size: 13px; color: var(--grey-2); }
.wp-in i { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }

/* 1 build */
.bd-course { position: absolute; left: 36px; top: 70px; width: 160px; height: 96px; border-radius: 12px; background: #1c1b18; overflow: hidden; }
.bd-play { position: absolute; left: 64px; top: 22px; width: 32px; height: 32px; border-radius: 50%; background: rgba(241, 239, 231, 0.9); }
.bd-play::after { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); }
.bd-cap { position: absolute; left: 10px; bottom: 12px; font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.bd-course i { position: absolute; left: 0; bottom: 0; width: 62%; height: 3px; background: var(--sand); }
.bd-pod { position: absolute; left: 206px; top: 72px; height: 32px; padding: 0 14px 0 10px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line-light); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); font-size: 12.5px; font-weight: 600; }
.bd-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.bd-wave b { width: 3px; height: 8px; border-radius: 2px; background: var(--sand-deep); }
.bd-wave b:nth-child(2), .bd-wave b:nth-child(4) { height: 14px; } .bd-wave b:nth-child(3) { height: 16px; background: var(--sand); }
.bd-book { position: absolute; left: 336px; top: 56px; width: 96px; height: 130px; border-radius: 4px 8px 8px 4px; background: #16150f; border-left: 7px solid var(--sand-deep); }
.bd-book span { position: absolute; left: 10px; top: 14px; right: 8px; font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.1; color: var(--sand); }
.bd-doc { position: absolute; left: 32px; top: 106px; width: 416px; height: 234px; padding: 16px 22px; border-radius: 18px; }
.bd-h { display: flex; justify-content: space-between; margin-bottom: 12px; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-2); }
.bd-t { font-size: 15.5px; line-height: 1.62; color: #34322d; }
.bd-t mark { color: var(--ink); font-weight: 600; padding: 1px 0; background: linear-gradient(var(--sand-tile), var(--sand-tile)) no-repeat 0 0; background-size: calc(var(--h, 1) * 100%) 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bd-rule { position: absolute; top: 366px; width: 128px; height: 88px; padding: 12px 12px 12px 14px; border-radius: 14px; border-left: 3px solid var(--sand); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bd-rule span { display: block; margin-bottom: 8px; font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-deep); }
.bd-v1 { position: absolute; left: 140px; top: 466px; width: 200px; height: 30px; line-height: 30px; text-align: center; border-radius: 999px; background: var(--ink); color: var(--bone); font: 600 10px/30px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; z-index: 4; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }

/* 2 test */
.ts-tabs { position: absolute; left: 0; right: 0; top: 78px; display: flex; justify-content: center; gap: 8px; }
.ts-tab { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--ink) calc(var(--on, 0) * 100%), rgba(0, 0, 0, 0.12)); background: color-mix(in srgb, var(--ink) calc(var(--on, 0) * 100%), #fff); color: color-mix(in srgb, var(--bone) calc(var(--on, 0) * 100%), var(--grey)); }
.ts-review { position: absolute; left: 64px; top: 420px; width: 352px; height: 150px; padding: 18px 20px; border-radius: 20px; z-index: 4; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2); }
.ts-av { position: absolute; left: 20px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bone); display: grid; place-items: center; font: 600 9.5px/1 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; }
.ts-rh { margin: 8px 0 0 48px; font-size: 14.5px; font-weight: 600; }
.ts-rl { display: flex; align-items: center; gap: 9px; margin-top: 28px; font-size: 14px; color: #34322d; }
.ts-rl i { width: 20px; height: 20px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 2.8 6-6.3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ts-stamp { position: absolute; right: 20px; top: 18px; padding: 7px 12px; border-radius: 8px; border: 2px solid var(--sand-deep); color: var(--sand-deep); font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-7deg); }

/* 3 rollout */
.ro-lab { position: absolute; left: 0; right: 0; top: 84px; display: grid; justify-items: center; margin: 0; }
.ro-lab span { grid-area: 1 / 1; font: 500 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-deep); }
.ro-ph { position: absolute; width: 80px; height: 126px; border-radius: 17px; background: #0d0d0c; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); z-index: 2; }
.ro-ph::before { content: ""; position: absolute; inset: 5px; border-radius: 12px; background: #fff; }
.ro-ph i { position: absolute; left: 31px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--sand); }
.ro-ph:nth-of-type(2) i { background: var(--sand-deep); } .ro-ph:nth-of-type(4) i { background: #3a3730; } .ro-ph:nth-of-type(5) i { background: var(--sand-tile); }
.ro-ph b { position: absolute; left: 14px; top: 46px; width: 52px; height: 7px; border-radius: 4px; background: var(--sand-tile); }
.ro-ph b + b { top: 58px; width: 36px; left: 30px; background: rgba(0, 0, 0, 0.12); }
.ro-ph em { position: absolute; inset: -7px; border-radius: 22px; border: 2px solid var(--sand); opacity: var(--pg, 0); transform: scale(calc(1.18 - 0.18 * var(--pg, 0))); }
.ro-crowd { position: absolute; inset: 0; z-index: 1; }
.ro-crowd i { position: absolute; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.ro-feed { position: absolute; left: 32px; top: 282px; width: 416px; height: 166px; padding: 14px 16px; border-radius: 16px; }
.ro-fh { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.ro-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.ro-q { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 14px; font-weight: 500; }
.ro-q i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sand-tile); }
.ro-chg { position: absolute; left: 32px; width: 416px; height: 32px; border-radius: 10px; }
.ro-k { position: absolute; left: 12px; top: 11px; font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-deep); }
.ro-a, .ro-b { position: absolute; left: 76px; top: 0; line-height: 30px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ro-a { opacity: calc(1 - var(--f, 1)); color: var(--grey); }
.ro-b { opacity: var(--f, 1); }
.ro-chg em { position: absolute; right: 7px; top: 6px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); }
.ro-chg em::before { content: "!"; position: absolute; inset: 0; text-align: center; font: 700 11px/15px var(--text); font-style: normal; opacity: calc(1 - var(--f, 1)); }
.ro-chg em::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat; opacity: var(--f, 1); }
.ro-tog { position: absolute; left: 32px; top: 546px; width: 416px; height: 40px; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; background: var(--ink); color: var(--bone); font-size: 13.5px; font-weight: 600; }
.ro-sw { position: relative; width: 42px; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--sand) calc(var(--on, 1) * 100%), #3a3730); }
.ro-sw i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bone); transform: translateX(calc(var(--on, 1) * 18px)); }

/* 4 after launch */
.cr-strip { position: absolute; left: 32px; top: 88px; width: 416px; height: 16px; }
.cr-line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: rgba(0, 0, 0, 0.1); }
.cr-line::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--sand-deep); transform: scaleX(var(--m, 1)); transform-origin: left; }
.cr-mark { position: absolute; left: -5px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(184, 163, 126, 0.35); transform: translateX(calc(var(--m, 1) * 416px)); }
.cr-inbox { position: absolute; left: 32px; top: 116px; width: 416px; height: 470px; border-radius: 18px; overflow: hidden; }
.cr-h { display: flex; justify-content: space-between; margin: 0; padding: 16px 16px 14px; border-bottom: 1px solid var(--line-light); font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.cr-h span + span { color: var(--sand-deep); }
.cr-it { position: absolute; left: 12px; right: 12px; height: 72px; padding: 12px 14px; border-radius: 13px; background: #FBFAF6; border: 1px solid var(--line-light); }
.cr-it:nth-of-type(1) { top: 56px; } .cr-it:nth-of-type(2) { top: 138px; } .cr-it:nth-of-type(3) { top: 220px; } .cr-it:nth-of-type(4) { top: 302px; } .cr-it:nth-of-type(5) { top: 384px; }
.cr-k { font: 600 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-deep); }
.cr-d { margin-left: 8px; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-2); }
.cr-it p { margin: 10px 0 0; max-width: 262px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-it.alert { border-color: var(--ink); }
.cr-it.alert p { max-width: 110px; }
.cr-ring { position: absolute; left: 136px; top: 28px; width: 34px; height: 34px; transform: rotate(-90deg); }
.cr-ring circle { fill: none; stroke-width: 4; }
.cr-ring .bg { stroke: rgba(0, 0, 0, 0.08); }
.cr-ring .fg { stroke: var(--sand-deep); stroke-linecap: round; }
.cr-t { position: absolute; left: 178px; top: 40px; font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.cr-s { position: absolute; right: 14px; top: 24px; height: 24px; }
.cr-s b { position: absolute; right: 0; top: 0; padding: 6px 10px; border-radius: 999px; white-space: nowrap; font: 600 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.cr-s b:first-child { border: 1px solid rgba(0, 0, 0, 0.2); color: var(--grey); opacity: calc(1 - var(--f, 1)); }
.cr-s b + b { background: var(--sand); color: var(--ink); opacity: var(--f, 1); }

/* transitions and the pointer */
.wf-curtain { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: var(--bone); transform: translateX(-100%); }
.wf-curtain span { font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }
.wf-curtain b { font-family: var(--display); font-size: 92px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.wf-curtain b i { font-style: normal; color: var(--sand); }
.wf-iris { position: absolute; left: 240px; top: 300px; z-index: 9; width: calc(var(--d, 900) * 1px); height: calc(var(--d, 900) * 1px); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1400px #F3F0E7; pointer-events: none; }
.wf-cursor { position: absolute; left: 0; top: 0; z-index: 10; width: 20px; height: 26px; opacity: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)); }
.wf-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.wf-click { position: absolute; left: -16px; top: -16px; z-index: 10; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--sand-deep); opacity: 0; }

/* player chrome (light) */
.wf-track { display: flex; align-items: flex-start; gap: 6px; margin-top: 18px; }
.wf-play { flex: none; position: relative; top: -13px; margin-right: 6px; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); background: #fff; cursor: pointer; display: grid; place-items: center; }
.wf-play i { width: 9px; height: 11px; border-left: 2.5px solid var(--ink); border-right: 2.5px solid var(--ink); }
.wf-play.paused i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
.wf-still .wf-play { display: none; }
.wf-seg { flex: 1; position: relative; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.wf-seg.after { flex: 1.25; }
.wf-seg::before { content: ""; display: block; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.12); }
.wf-seg.after::before { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 6px, transparent 6px 10px); }
.wf-fill { position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 2px; background: var(--sand-deep); transform: scaleX(var(--f, 0)); transform-origin: left; }
.wf-sl { display: block; margin-top: 10px; font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-2); transition: color 250ms; }
.wf-seg.on .wf-sl { color: var(--ink); }
.wf-launch { flex: none; position: relative; padding-top: 12px; font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-deep); }
.wf-launch::before { content: ""; position: absolute; left: 50%; top: -5px; width: 2px; height: 13px; margin-left: -1px; background: var(--sand-deep); border-radius: 1px; }
.wf-list { display: grid; gap: 4px; margin: 0; }
.wf-step { padding: 16px 0 16px 22px; border-left: 2px solid var(--line-light); opacity: 0.42; cursor: pointer; transition: opacity 350ms var(--ease), border-color 350ms var(--ease); }
.wf-step.on { opacity: 1; border-left-color: var(--sand-deep); }
.wf-step .label { display: block; margin-bottom: 8px; }
.wf-step .body { margin-top: 8px; font-size: 16px; }
@media (max-width: 900px) {
  .wf { grid-template-columns: minmax(0, 1fr); }
  .wf-player { max-width: 520px; }
  .wf-screen { border-radius: 22px; }
}
@media (max-width: 420px) {
  .wf-sl { font-size: 9.5px; letter-spacing: 0.06em; }
  .wf-launch { font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: tdot 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes tdot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ---------- proof numbers: each digit spins like an odometer and lands left to right ---------- */
.num .v[data-roll] { font-size: clamp(36px, 4.1vw, 56px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll { display: inline-flex; align-items: flex-start; }
.roll .col { display: inline-block; height: 1.06em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 22%, #000 78%, transparent 100%); }
.roll.landed .col { -webkit-mask-image: none; mask-image: none; }
.roll .rstrip { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; will-change: transform; }
.roll .rstrip span { display: block; height: 1.06em; line-height: 1.06em; text-align: center; }
.roll .sym { display: inline-block; height: 1.06em; line-height: 1.06em; opacity: 0; transform: translateY(0.35em) scale(0.8); }
.roll.is-on .rstrip { transform: translateY(calc(var(--n) * -1.06em)); transition: transform var(--dur) cubic-bezier(0.12, 0.8, 0.22, 1.04) var(--delay); animation: rollBlur var(--dur) var(--delay) both; }
.roll.is-on .sym { opacity: 1; transform: none; transition: opacity 420ms ease var(--delay), transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay); }
.roll.landed { animation: numPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.roll.landed::after { content: ""; }
@keyframes rollBlur { 0% { filter: blur(0); } 12% { filter: blur(2.5px); } 70% { filter: blur(1.2px); } 100% { filter: blur(0); } }
@keyframes numPop { 0% { transform: scale(1); color: inherit; } 35% { transform: scale(1.07); color: var(--sand-deep); } 100% { transform: scale(1); } }
.dark .roll.landed { animation-name: numPopDark; }
@keyframes numPopDark { 0% { transform: scale(1); } 35% { transform: scale(1.07); color: var(--sand); } 100% { transform: scale(1); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 400px) { .num .v[data-roll] { font-size: 30px; } }

/* ---------- problem: a member hunts for an answer, then asks once ----------
   600x520 canvas scaled to fit; plays once when seen, with a replay. The approved
   paragraphs sit beside it and light up with each beat. */
.pf { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.pf-screen { position: relative; aspect-ratio: 600 / 520; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 70% at 50% 0%, #22201a 0%, #0f0f0e 70%); border: 1px solid var(--line-dark); }
.pf-canvas { position: absolute; left: 0; top: 0; width: 600px; height: 520px; transform-origin: 0 0; transform: scale(var(--k, 1)); font-family: var(--text); color: var(--ink); }
.pf-canvas svg { max-width: none; }
.pf-bar { position: absolute; left: 0; right: 0; top: 0; height: 28px; margin: 0; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; color: var(--grey-2); }
.pf-dots { display: flex; gap: 6px; } .pf-dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a3730; }
.pf-q { position: absolute; left: 80px; top: 46px; width: 440px; height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-radius: 23px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); z-index: 3; }
.pf-glass { flex: none; position: relative; width: 14px; height: 14px; border: 2px solid var(--grey); border-radius: 50%; }
.pf-glass::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: var(--grey); transform: rotate(45deg); }
.pf-qt { font-size: 15.5px; font-weight: 600; white-space: nowrap; clip-path: inset(0 calc((1 - var(--tw, 1)) * 100%) 0 0); }
.pf-caret { width: 2px; height: 20px; margin-left: -8px; background: var(--ink); }
.pw { position: absolute; border-radius: 12px; overflow: hidden; background: #FBFAF6; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); z-index: 2; }
.pw-t { display: flex; align-items: center; gap: 5px; height: 26px; margin: 0; padding: 0 10px; background: #ECE8DD; }
.pw-t i { width: 8px; height: 8px; border-radius: 50%; background: #d3ccbc; }
.pw-t span { margin-left: 8px; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.pw-b { padding: 12px 14px; }
.pw-h { margin: 0; font-size: 14.5px; font-weight: 600; }
.pw-s { margin: 3px 0 0; font-size: 11.5px; color: var(--grey); }
.pw-pod { left: 26px; top: 112px; width: 256px; height: 150px; }
.pod-wave { display: flex; align-items: center; gap: 3px; height: 30px; margin-top: 12px; }
.pod-wave i { flex: none; width: 3px; border-radius: 2px; background: var(--sand-deep); opacity: 0.7; }
.pod-scrub { position: relative; display: block; height: 4px; margin-top: 12px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); }
.pod-scrub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--sc, 0.2) * 100%); border-radius: inherit; background: var(--sand-deep); }
.pod-scrub i { position: absolute; top: -4px; left: calc(var(--sc, 0.2) * 100% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.pw-book { left: 318px; top: 104px; width: 256px; height: 196px; }
.pw-book .pw-b { height: 170px; overflow: hidden; }
.book-lines { margin-top: 6px; }
.book-lines b { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(0, 0, 0, 0.12); }
.book-lines b:nth-child(2n) { width: 86%; } .book-lines b:nth-child(3n) { width: 72%; }
.book-lines b.hi { background: var(--sand); width: 64%; }
.pw-course { left: 52px; top: 286px; width: 246px; height: 176px; }
.cs-vid { position: relative; display: block; height: 86px; border-radius: 8px; background: #1c1b18; }
.cs-vid i { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--bone); }
.pw-course .pw-s { margin-top: 9px; }
.cs-prog { position: relative; display: block; height: 4px; margin-top: 9px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); }
.cs-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 29%; border-radius: inherit; background: var(--sand-deep); }
.pw-mail { left: 330px; top: 318px; width: 244px; height: 160px; }
.ml-search { margin: 0; padding: 6px 10px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.14); font: 500 10.5px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--grey); }
.ml-row { display: flex; justify-content: space-between; margin: 9px 0 0; font-size: 12px; }
.ml-row b { font-weight: 600; } .ml-row span { font: 500 10px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--grey-2); }
.pf-snip { position: absolute; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--bone); font-size: 13.5px; font-style: italic; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(241, 239, 231, 0.14); z-index: 4; opacity: 0; }
.sn-pod { left: 120px; top: 238px; } .sn-book { left: 356px; top: 256px; } .sn-course { left: 96px; top: 448px; font-style: normal; } .sn-mail { left: 372px; top: 482px; font-style: normal; }
.pf-th { position: absolute; margin: 0; padding: 8px 13px; border-radius: 15px 15px 15px 4px; background: var(--sand); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); z-index: 5; opacity: 0; }
.th1 { left: 170px; top: 170px; } .th2 { left: 362px; top: 294px; } .th3 { left: 196px; top: 236px; font-size: 16px; }
.pf-chat { position: absolute; left: 90px; top: 104px; width: 420px; height: 300px; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(184, 163, 126, 0.35); z-index: 1; }
.pc-head { display: flex; align-items: center; gap: 9px; height: 48px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--line-light); font-size: 13.5px; font-weight: 600; }
.pc-head i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--sand), var(--sand-deep)); }
.pc-head em { margin-left: auto; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; color: var(--sand-deep); }
.pc-me { position: absolute; right: 16px; top: 62px; max-width: 290px; margin: 0; padding: 9px 13px; border-radius: 16px 16px 5px 16px; background: var(--ink); color: var(--bone); font-size: 15px; line-height: 1.35; }
.pc-ai { position: absolute; left: 16px; top: 116px; width: 340px; }
.pc-ai p { margin: 0; padding: 11px 14px; border-radius: 16px 16px 16px 5px; background: var(--sand-tile); font-size: 15px; line-height: 1.42; }
.pc-typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 12px 13px; border-radius: 16px; background: var(--sand-tile); opacity: 0; }
.pc-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.pc-src { position: absolute; left: 16px; top: 246px; display: flex; gap: 6px; margin: 0; }
.pc-src span { padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(138, 119, 87, 0.5); background: #FBFAF6; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sand-deep); }
.pf-cursor { position: absolute; left: 0; top: 0; width: 20px; height: 26px; z-index: 9; opacity: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }
.pf-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.pf-click { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--sand); z-index: 9; opacity: 0; }
.pf-foot { display: flex; align-items: center; justify-content: space-between; margin: 12px 4px 0; }
.pf-ex { font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); }
.pf-replay { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-dark); background: none; color: var(--grey-light); font: 500 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), color 200ms, border-color 200ms; }
.pf-done .pf-replay { opacity: 1; visibility: visible; }
.pf-replay:hover { color: var(--bone); border-color: rgba(241, 239, 231, 0.4); }
.pf-still .pf-replay { display: none; }
.pf-caps { display: grid; gap: 20px; }
.pf-cap { transition: opacity 500ms var(--ease), color 500ms var(--ease); }
.pf-live .pf-cap { opacity: 0.3; }
.pf-live .pf-cap.on, .pf-done .pf-cap { opacity: 1; }
@media (max-width: 900px) { .pf { grid-template-columns: minmax(0, 1fr); } .pf-screen { border-radius: 18px; } }
@media (prefers-reduced-motion: no-preference) {
  .pf-caret { animation: caretBlink 1s steps(1) infinite; }
  .pc-typing i { animation: tdot 1s ease-in-out infinite; }
  .pc-typing i:nth-child(2) { animation-delay: 0.15s; } .pc-typing i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* hero without the device demo */
.hero--plain { display: flex; align-items: center; min-height: calc(100vh - var(--nav-h) - var(--sub-h)); min-height: calc(100svh - var(--nav-h) - var(--sub-h) - env(safe-area-inset-top, 0px)); padding-block: clamp(40px, 6vh, 72px); }
.hero--plain > .wrap { width: 100%; }
.hero--plain + .statement { border-top: 1px solid var(--line-dark); }

/* ---------- liquid glass on the 21-day player ----------
   Ported from the liquid-glass button: the same stacked bevel shadows for the rim, an SVG
   displacement filter on the backdrop (Chromium), and a blur fallback everywhere else.
   Soft sand light sits behind the panel so the glass has something to bend. */
.wf-glass { position: relative; }
.wf-glow { position: absolute; inset: 4% -6% 6% -6%; z-index: 0; pointer-events: none; }
.wf-glow i { position: absolute; border-radius: 50%; filter: blur(34px); }
.wf-glow i:nth-child(1) { left: -2%; top: 6%; width: 46%; height: 34%; background: rgba(184, 163, 126, 0.55); }
.wf-glow i:nth-child(2) { right: -4%; top: 38%; width: 52%; height: 30%; background: rgba(233, 227, 211, 0.95); }
.wf-glow i:nth-child(3) { left: 18%; bottom: 0; width: 58%; height: 26%; background: rgba(138, 119, 87, 0.32); }
.wf-glass .wf-screen { z-index: 1; }
.glass-warp { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); }
@supports (backdrop-filter: url(#wf-glass)) {
  .glass-warp { backdrop-filter: url(#wf-glass) saturate(1.35); }
}
.wf-glass .wf-canvas { z-index: 1; }
.glass-rim { position: absolute; inset: 0; z-index: 20; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6),
    inset 0 0 6px 6px rgba(0, 0, 0, 0.05), inset 0 0 2px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 22px rgba(255, 255, 255, 0.55), 0 0 12px rgba(255, 255, 255, 0.15); }
.glass-rim::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 16%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 22%); }
.glass-rim::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .wf-glow i:nth-child(1) { animation: glowA 16s ease-in-out infinite alternate; }
  .wf-glow i:nth-child(2) { animation: glowB 19s ease-in-out infinite alternate; }
  .wf-glow i:nth-child(3) { animation: glowA 22s ease-in-out -6s infinite alternate-reverse; }
}
@keyframes glowA { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, 24%) scale(1.15); } }
@keyframes glowB { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-22%, -18%) scale(0.92); } }

#how { overflow-x: clip; }
@media (max-width: 900px) { .wf-glow { inset: 4% 0 6% 0; } }

/* ---------- client marquee: glass tiles drifting past (placeholder logos for now) ---------- */
#results { overflow-x: clip; }
.marquee { position: relative; width: 100vw; margin: 26px 0 0 calc(50% - 50vw); padding: 40px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-glow { position: absolute; inset: 0; pointer-events: none; }
.mq-glow i { position: absolute; top: 30%; height: 40%; border-radius: 50%; filter: blur(26px); }
.mq-glow i:nth-child(1) { left: 12%; width: 28%; background: rgba(184, 163, 126, 0.45); }
.mq-glow i:nth-child(2) { left: 44%; width: 22%; background: rgba(233, 227, 211, 0.95); }
.mq-glow i:nth-child(3) { left: 64%; width: 26%; background: rgba(138, 119, 87, 0.28); }
.mq-track { position: relative; display: flex; gap: 16px; width: max-content; margin: 0; padding: 0 8px; }
.mq-tile { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; width: 208px; height: 78px; border-radius: 20px; isolation: isolate;
  background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.03), 0 8px 22px rgba(0, 0, 0, 0.06),
    inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6),
    inset 0 0 6px 6px rgba(0, 0, 0, 0.04), inset 0 0 2px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 16px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.15); }
.mq-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 42%); }
.mq-name { font: 500 10.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
/* abstract placeholder marks */
.mk { position: relative; flex: none; width: 26px; height: 26px; }
.mk-ring { border-radius: 50%; border: 5px solid var(--ink); }
.mk-dot { border-radius: 50%; background: var(--sand-deep); }
.mk-dia { width: 20px; height: 20px; background: var(--ink); transform: rotate(45deg); border-radius: 4px; }
.mk-half { border-radius: 26px 26px 0 0; height: 13px; background: var(--sand-deep); }
.mk-tri { background: var(--ink); clip-path: polygon(50% 4%, 96% 92%, 4% 92%); }
.mk-bars { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px); }
.mk-duo::before, .mk-duo::after { content: ""; position: absolute; top: 5px; width: 16px; height: 16px; border-radius: 50%; }
.mk-duo::before { left: 0; background: var(--ink); } .mk-duo::after { right: 0; background: var(--sand); mix-blend-mode: multiply; }
.mk-plus { background: linear-gradient(var(--sand-deep), var(--sand-deep)) center / 8px 100% no-repeat, linear-gradient(var(--sand-deep), var(--sand-deep)) center / 100% 8px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .marquee.is-running .mq-track { animation: mqScroll var(--mq-dur, 40s) linear infinite; }
  .marquee.is-running:hover .mq-track { animation-play-state: paused; }
  .mq-glow i:nth-child(1) { animation: glowA 14s ease-in-out infinite alternate; }
  .mq-glow i:nth-child(3) { animation: glowB 17s ease-in-out infinite alternate; }
}
@keyframes mqScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { width: auto; margin-left: 0; -webkit-mask-image: none; mask-image: none; }
  .mq-track { flex-wrap: wrap; justify-content: center; width: auto; }
}
@media (max-width: 600px) { .mq-tile { width: 176px; height: 68px; } .marquee { margin-top: 32px; } }

[hidden] { display: none !important; }

/* ---------- FAQ: glass cards, a live question counter, smooth opening with staggered answers ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--nav-h) + var(--sub-h) + 40px); }
.faq-side .h2 { text-align: left; font-size: clamp(34px, 3.7vw, 52px); }
.faq-meter { margin-top: 40px; }
.fm-num { display: inline-block; height: 1em; overflow: hidden; padding: 0 0.1em 0 0.03em; margin-left: -0.03em; vertical-align: bottom;  /* side padding so the tight tracking never clips the last digit */ font-family: var(--display); font-weight: 700; font-size: clamp(64px, 8vw, 116px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.fm-roll { display: flex; flex-direction: column; transform: translateY(calc(var(--a, 0) * -1em)); transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.fm-roll b { display: block; height: 1em; font-weight: 700; }
.fm-of { margin-left: 10px; font: 500 12px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: var(--grey-2); }
.fm-bars { display: flex; gap: 6px; margin-top: 20px; }
.fm-bars i { width: 26px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); transition: background-color 400ms var(--ease), transform 400ms var(--ease); transform-origin: left; }
.fm-bars i.seen { background: var(--sand); }
.fm-bars i.on { background: var(--sand-deep); transform: scaleY(1.6); }
.faq .faq-list { max-width: none; margin: 0; border-top: 0; display: grid; gap: 12px; }
.faq .fq { position: relative; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 20px; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.7), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.6),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.35), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 18px rgba(255, 255, 255, 0.5);
  transition: box-shadow 400ms var(--ease), background-color 400ms var(--ease), transform 400ms var(--ease); }
.faq .fq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 163, 126, 0.22), transparent 62%); }
.faq .fq:hover::before { opacity: 1; }
.faq .fq[open] { background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(138, 119, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.faq .fq summary { min-height: 0; padding: 22px 22px 22px 24px; gap: 18px; justify-content: flex-start; }
.fq-n { flex: none; width: 22px; font: 500 11px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: var(--sand-deep); }
.fq-q { flex: 1; }
.faq .pm { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 300ms var(--ease), color 300ms var(--ease); }
.faq .fq[open] .pm { transform: rotate(135deg); background: var(--ink); color: var(--bone); }
.faq .fq[open] .pm::after { transform: rotate(90deg); }
.faq .answer { overflow: hidden; padding: 0; }
.fq-a { position: relative; padding: 2px 28px 26px 64px; }
.fq-a::before { content: ""; position: absolute; left: 34px; top: 4px; bottom: 28px; width: 2px; border-radius: 1px; background: linear-gradient(var(--sand-deep), rgba(184, 163, 126, 0.15)); transform-origin: top; }
.fa-lead { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); }
.fq-a .body { margin-top: 10px; font-size: 16px; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .faq .fq[open] .fq-a > p { animation: faqIn 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(140ms + var(--i) * 90ms); }
  .faq .fq[open] .fq-a::before { animation: faqLine 700ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .faq .fq:hover { transform: translateY(-2px); }
  .faq-grid.pre .fq { opacity: 0; transform: translateY(26px); }
  .faq-grid.pre.in .fq { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 400ms var(--ease), background-color 400ms var(--ease); transition-delay: calc(var(--k) * 70ms), calc(var(--k) * 70ms), 0s, 0s; }
}
@keyframes faqIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes faqLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-side { position: static; }
  .faq-meter { display: none; }
  .faq-side .h2 { text-align: center; }
  .fq-a { padding: 0 20px 22px 44px; }
  .fq-a::before { left: 22px; }
  .faq .fq summary { padding: 18px 18px 18px 18px; gap: 12px; }
}

/* ---------- demo film (the creator film from the current site, for now) ---------- */
.device--film { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.device--film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.film-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; padding: 0; border: 0; cursor: pointer; color: var(--bone);
  background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)); transition: opacity 400ms var(--ease), visibility 400ms; }
.film-play span { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 18px rgba(255, 255, 255, 0.18), 0 20px 50px rgba(0, 0, 0, 0.35); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.film-play svg { width: 30px; height: 30px; margin-left: 4px; fill: var(--bone); }
.film-play em { font: 500 11px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: rgba(241, 239, 231, 0.9); }
.film-play:hover span, .film-play:focus-visible span { transform: scale(1.08); }
.device--film.is-playing .film-play { opacity: 0; visibility: hidden; }
@media (max-width: 600px) { .film-play span { width: 64px; height: 64px; } .film-play svg { width: 24px; height: 24px; } }
#demo .sec-head .lede { margin-left: auto; margin-right: auto; }

/* ---------- liquid glass buttons, site-wide ----------
   Same recipe as the glass panels (from the liquid-glass button): a tinted frosted body,
   a top-left sheen, and the stacked bevel shadows on the rim. Light/dark rims follow the section. */
.pill { position: relative; isolation: isolate; overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 250ms var(--ease), box-shadow 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%); opacity: 0.9; transition: opacity 250ms var(--ease); }
.pill::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .pill:hover { transform: translateY(-1px) scale(1.03); }
  .pill:active { transform: scale(0.98); }
}
.pill:hover::before { opacity: 1; }

/* frosted bone glass: the main call to action on dark */
.pill--light { background-color: rgba(241, 239, 231, 0.8); color: var(--ink); border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28), 0 0 18px rgba(241, 239, 231, 0.12),
    inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.8), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.7),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.4), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.4),
    inset 0 0 6px 4px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.pill--light:hover { background-color: rgba(255, 255, 255, 0.9); }

/* smoked ink glass: the main call to action on light */
.pill--dark { background-color: rgba(10, 10, 9, 0.8); color: var(--bone); border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.5), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.7),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.45), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.3),
    inset 0 0 6px 4px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.pill--dark::before { opacity: 0.35; }
.pill--dark:hover { background-color: rgba(0, 0, 0, 0.84); }
.pill--dark:hover::before { opacity: 0.5; }

/* clear sand glass: the secondary action */
.pill--ghost { background-color: rgba(184, 163, 126, 0.1); border-color: rgba(184, 163, 126, 0.75);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.45), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.6),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.3), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 6px 4px rgba(184, 163, 126, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.pill--ghost::before { opacity: 0.35; }
.pill--ghost:hover { background-color: rgba(184, 163, 126, 0.2); }
.light .pill--ghost, .page-light .pill--ghost, .sandbg .pill--ghost { background-color: rgba(255, 255, 255, 0.45); border-color: rgba(138, 119, 87, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.6), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.5),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.3), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.light .pill--ghost::before, .page-light .pill--ghost::before, .sandbg .pill--ghost::before { opacity: 0.9; }
.pill[aria-disabled="true"]:hover { transform: none; }

/* the small round controls get the same glass */
.wf-play, .pf-replay, .film-skip, .faq .pm, .dialog-close {
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.6), inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.5),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.3), inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.08); }
.wf-play { background: rgba(255, 255, 255, 0.6); }
.faq .pm { background: rgba(255, 255, 255, 0.55); }
.dark .pf-replay, .pf-replay, .film-on .film-skip { background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.5), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.6),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.35), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
@media (prefers-reduced-transparency: reduce) {
  .pill, .wf-play, .pf-replay, .film-skip, .faq .pm, .dialog-close { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pill--light { background-color: var(--bone); } .pill--dark { background-color: var(--ink); }
}

/* ---------- hero: a glass N in a field of sand light (drawn in code, no video) ---------- */
.hero--field { position: relative; isolation: isolate; overflow: hidden; }
.hero--field > .wrap { position: relative; z-index: 3; }
.hero-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.hero--field::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, #000 100%); }
.hero-n { position: absolute; z-index: 2; top: 50%; right: max(3vw, calc(50% - 640px)); width: min(34vw, 500px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.hn-tilt { position: absolute; left: 0; top: 0; width: 500px; height: 500px; transform-origin: 0 0;
  transform: scale(var(--hs, 1)) perspective(1400px) rotateY(var(--ry, -16deg)) rotateX(var(--rx, 6deg)); }
.hn-frost { position: absolute; inset: 0; background: rgba(241, 239, 231, 0.03); -webkit-backdrop-filter: blur(7px) brightness(1.25) saturate(1.3); backdrop-filter: blur(7px) brightness(1.25) saturate(1.3); }
.hn-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; max-width: none; }
.hn-glow { fill: #B8A37E; opacity: 0.22; }
.hn-body { fill: url(#hnBody); }
.hn-spec { fill: url(#hnSpec); mix-blend-mode: screen; }
.hn-rim { fill: none; stroke: url(#hnRim); stroke-width: 1.6; }
@media (min-width: 961px) {
  .hero--field { text-align: left; }
  .hero--field .wrap { max-width: none; padding-left: max(clamp(32px, 6vw, 110px), calc(50% - 800px)); }
  .hero--field .mega { max-width: 9.5em; font-size: clamp(48px, 6vw, 84px); }
  .hero--field .lede { max-width: 31em; margin-left: 0; }
  .hero--field .ctas { justify-content: flex-start; }
  .hero--field .meta { text-align: left; }
}
@media (max-width: 960px) {
  .hero-n { top: 50%; right: 50%; width: min(96vw, 540px); transform: translate(50%, -50%); opacity: 0.5; }
  .hero--field::after { background: radial-gradient(90% 60% at 50% 45%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.1)); }
}
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hero--field.gl .hero-gl { display: block; }
.hero--field.gl .hn-tilt { display: none; }
/* without WebGL the flat glass N stays, recoloured white */
.hero--field:not(.gl) .hn-body { fill: rgba(250, 248, 242, 0.92); }
.hero--field::after { background: radial-gradient(110% 90% at 0% 50%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0) 62%) !important; }
.hero-n { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(214, 170, 90, 0.18)); }
@media (max-width: 960px) {
  .hero--field { padding-top: calc(clamp(40px, 6vh, 72px) + min(30vw, 150px)); }
  .hero-n { top: 22px; width: min(34vw, 170px); opacity: 1; transform: translateX(50%); }
  .hero--field::after { background: radial-gradient(100% 60% at 50% 55%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 75%) !important; }
}

/* ---------- hero: the N as a black hole (ray-traced in WebGL behind the stars and the N) ---------- */
.hero-bh { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: none; background: #000; }
.hero--field.bh .hero-bh { display: block; }
.hero--field.bh .hero-field { mix-blend-mode: screen; }
.hero--field.bh .hero-n { filter: drop-shadow(0 0 28px rgba(0, 0, 0, 0.6)); }
.hero--field.bhn .hero-n { visibility: hidden; }
.hero--field.bh .lede, .hero--field.bh .meta { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85); }
.hero--field.bh::after { background: radial-gradient(110% 90% at 0% 50%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0) 64%) !important; }
@media (max-width: 960px) {
  .hero--field.bh::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.72) 100%) !important; }
}

/* client marquee hidden until real logos are approved (remove "hidden" in index.html to bring it back) */
.marquee[hidden] { display: none !important; }

/* ======================================================================
   Centred-hero version (versions/apple/centred/, body.v-centre)
   The black hole sits in the middle, the headline and buttons to its left, the byline to its right.
   One header: clear over the hero, then a white floating bar once the hero is scrolled past.
   ====================================================================== */
.v-centre { --sub-h: 0px; --nav-h: 72px; }
.v-centre .gnav { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto 0; height: 72px; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.v-centre .gnav .in { pointer-events: auto; position: relative; max-width: 100%; margin: 0 auto; height: 72px; padding-inline: max(28px, 4vw);
  border-radius: 0; background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: max-width 520ms var(--ease), height 420ms var(--ease), margin 420ms var(--ease), padding 420ms var(--ease), background-color 360ms var(--ease), box-shadow 360ms var(--ease), border-radius 420ms var(--ease), color 300ms var(--ease); }
.v-centre .gnav .links { position: absolute; left: 50%; transform: translateX(-50%); gap: 28px; white-space: nowrap; font-size: 14px; font-weight: 500; color: rgba(241, 239, 231, 0.86); }
.v-centre .gnav .brand { font-size: 15px; letter-spacing: 0.06em; }
.v-centre .gnav .brand svg { width: 24px; height: 24px; }
/* floating bar after the hero */
.v-centre .gnav.nav-float .in { max-width: 960px; height: 54px; margin-top: 12px; padding-inline: 22px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 30px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1); }
.v-centre .gnav.nav-float .links { color: rgba(0, 0, 0, 0.78); }
.v-centre .gnav.nav-float .links a:hover { color: #000; }
.v-centre .gnav.nav-float .gcta { background-color: #0b0b0b; color: #fff; border-color: #0b0b0b; box-shadow: none; }
.v-centre .gnav.nav-float .gcta:hover { background-color: #222; }
.v-centre .gnav.nav-float .nav-toggle { color: var(--ink); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .v-centre .gnav.nav-float .in { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
@media (max-width: 1100px) { .v-centre .gnav .links { gap: 20px; font-size: 13px; } }
@media (max-width: 1000px) { .v-centre .gnav.nav-float .in { max-width: calc(100% - 24px); } }
@media (max-width: 820px) {
  .v-centre .gnav.nav-float .in { padding-inline: 18px 12px; }
  .v-centre .mobile-menu { top: 72px; }
}

/* hero */
.v-centre .hero--centre { min-height: 100vh; min-height: 100svh; padding: 72px 0 0; display: flex; align-items: stretch; text-align: left; }
.v-centre .hero--centre .hero-n { top: 50%; left: 50%; right: auto; width: min(21vw, 310px); transform: translate(-50%, -50%); }
.v-centre .hc { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 0 max(28px, 4vw) clamp(40px, 7vh, 80px); }
.v-centre .hc-l { max-width: min(38vw, 600px); }
.v-centre .hc .ctas { gap: 12px; }
.v-centre .hc .pill:not(.pill--sm) { font-size: 15px; padding: 0 20px; }
.v-centre .hc .mega { font-size: clamp(36px, 3.3vw, 58px); line-height: 1.05; letter-spacing: -0.03em; max-width: 9em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.v-centre .hc .ctas { margin-top: 28px; }
.v-centre .hc .pill:not(.pill--sm) { min-height: 46px; font-size: 16px; padding: 0 22px; }
.v-centre .hc-r { justify-self: end; max-width: min(24vw, 380px); }
.v-centre .hc .lede { margin-top: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; color: rgba(241, 239, 231, 0.84); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8); }
.v-centre .hc .meta { margin-top: 16px; font-size: 13px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
.v-centre .hc-rails { position: absolute; z-index: 2; inset: 0 max(14px, 2vw); border-left: 1px dashed rgba(241, 239, 231, 0.12); border-right: 1px dashed rgba(241, 239, 231, 0.12); pointer-events: none; }
.v-centre .hero--field.bh::after, .v-centre .hero--field::after { background:
    radial-gradient(42% 70% at 0% 58%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 100%),
    radial-gradient(36% 60% at 100% 55%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0) 16%) !important; }
@media (max-width: 960px) {
  .v-centre .hero--centre { padding-top: calc(72px + min(40vw, 200px) + 24px); }
  .v-centre .hero--centre .hero-n { top: calc(72px + 12px + min(4vw, 20px)); width: min(32vw, 160px); transform: translateX(-50%); }
  .v-centre .hc { grid-template-columns: 1fr; text-align: center; gap: 22px; align-content: start; padding-bottom: 56px; }
  .v-centre .hc-l, .v-centre .hc-r { max-width: 34em; justify-self: center; }
  .v-centre .hc .mega { font-size: clamp(38px, 8.6vw, 56px); margin-inline: auto; }
  .v-centre .hc .ctas { justify-content: center; }
  .v-centre .hc-rails { display: none; }
  .v-centre .hero--field.bh::after, .v-centre .hero--field::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.7) 100%) !important; }
}
@media (max-width: 420px) { .hero .ctas .pill { font-size: 15px; padding: 0 18px; } }

/* phones: the black hole plays as a pre-rendered loop (the N is baked into it) */
.hero-bhv { position: absolute; z-index: 0; object-fit: cover; pointer-events: none; background: #000; max-width: none !important; max-height: none !important; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.hero--field.bhv .hero-field { mix-blend-mode: screen; }
.hero--field.bhv .hero-n { visibility: hidden; }

/* phones: the statement is not pinned or scroll-scrubbed; its words light up in a quick cascade */
@media (max-width: 760px) {
  .statement .track { height: auto; }
  .statement .pin { position: static; }
  .statement .say .w { transition: color 420ms var(--ease); }
  .statement .say.say-lit .w { color: var(--bone); transition-delay: calc(var(--i, 0) * 55ms); }
  .statement .say.say-lit .w.accent { color: var(--sand); }
}

/* phones: the build film as a tap-through card (no 580vh scroll) */
.film-on.film-steps { height: auto; }
.film-steps .stage { position: relative; top: auto; height: max(420px, min(calc(100vh - 160px), 690px)); height: max(420px, min(calc(100svh - 160px), 690px)); min-height: 0; }
.film-steps .film-skip { display: none !important; }
.film-steps .chapters { pointer-events: auto; }
.film-steps .chapters i { cursor: pointer; }
.film-steps .chapters i::before { content: ""; position: absolute; inset: -14px -3px; }
.film-steps .chapters i { overflow: visible; }
.film-steps .chapters i::after { border-radius: 2px; }
.film-ctl { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: var(--lt, 1); }
.film-ctl .fc-count { order: 2; flex: 1; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* read out by screen readers; the ticks show it on screen */
.fc-btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(241, 239, 231, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.4); color: var(--bone); cursor: pointer; }
.fc-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-prev { order: 1; } .fc-next { order: 3; } .fc-play { order: 4; width: 36px; height: 36px; }
.fc-play .i-play { display: none; fill: currentColor; stroke: none; }
.fc-play[aria-pressed="false"] .i-play { display: block; } .fc-play[aria-pressed="false"] .i-pause { display: none; }
.film-steps .chapters { bottom: 30px !important; left: 50% !important; transform: translateX(-50%); }

/* ======================================================================
   Phones and small tablets: keep the glass look, drop what makes it slow.
   Live background blur (backdrop-filter) re-blurs everything behind it on every frame, and the
   21-day panel sat on top of animated blurred glows, which is what made scrolling crawl.
   Here the glass is painted instead (tinted body, sheen, bevelled rim stay), the glows are
   soft gradients rather than blurred shapes, and blur is taken out of the small animations.
   ====================================================================== */
@media (max-width: 820px) {
  .gnav, .subnav, .cta-bar, .step > div, .mq-tile, .faq .fq, .film-play span, .pill, .wf-play, .pf-replay,
  .film-skip, .faq .pm, .dialog-close, .glass-warp, .hn-frost, .v-centre .gnav.nav-float .in, .dialog::backdrop {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .gnav { background: rgba(0, 0, 0, 0.94); }
  .subnav { background: rgba(10, 10, 9, 0.94); }
  .cta-bar { background: rgba(0, 0, 0, 0.95); }
  .v-centre .gnav.nav-float .in { background: rgba(255, 255, 255, 0.97); }
  .page-light .gnav { background: rgba(251, 250, 246, 0.96); }
  .page-light .subnav { background: rgba(251, 250, 246, 0.95); }
  /* buttons: slightly denser tint to make up for the missing blur */
  .pill--light { background-color: rgba(241, 239, 231, 0.95); }
  .pill--ghost { background-color: rgba(184, 163, 126, 0.16); }
  .light .pill--ghost, .page-light .pill--ghost, .sandbg .pill--ghost { background-color: rgba(255, 255, 255, 0.72); }
  .pf-replay, .film-skip { background: rgba(28, 27, 24, 0.9); }
  .film-play span { background: rgba(20, 20, 18, 0.55); }
  /* 21 days: painted glass over soft gradient glows */
  .wf-glow i { filter: none; will-change: transform; }
  .wf-glow i:nth-child(1) { background: radial-gradient(closest-side, rgba(184, 163, 126, 0.5), rgba(184, 163, 126, 0)); }
  .wf-glow i:nth-child(2) { background: radial-gradient(closest-side, rgba(233, 227, 211, 0.9), rgba(233, 227, 211, 0)); }
  .wf-glow i:nth-child(3) { background: radial-gradient(closest-side, rgba(138, 119, 87, 0.3), rgba(138, 119, 87, 0)); }
  .glass-warp { background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.56) 100%),
      radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1.4px) 0 0 / 22px 22px,
      rgba(246, 243, 235, 0.55); }
  /* FAQ: painted glass cards, no blur in the answer animation */
  .faq .fq { background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76)); }
  .faq .fq[open] { background: linear-gradient(165deg, #fff, rgba(255, 255, 255, 0.9)); }
  .faq .fq[open] .fq-a > p { animation-name: faqInM; }
  .mq-glow i { filter: none; background: radial-gradient(closest-side, rgba(184, 163, 126, 0.4), rgba(184, 163, 126, 0)) !important; }
  /* stats roll without the motion blur */
  .roll.is-on .rstrip { animation: none; }
}
@keyframes faqInM { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* phones: FAQ cards stay glassy but cheap to redraw while they open (one soft shadow instead of
   seven layered ones, no hover spotlight, no shadow/colour transitions) and the answer fades in quickly */
@media (max-width: 820px) {
  .faq .fq { isolation: auto; transition: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
  .faq .fq[open] { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(138, 119, 87, 0.35), inset 0 1px 0 #fff; }
  .faq .fq::before { display: none; }
  .faq .answer { contain: paint; }
  .faq .fq[open] .fq-a > p { animation-duration: 320ms; animation-delay: calc(60ms + var(--i) * 50ms); }
  .faq .fq[open] .fq-a::before { animation-duration: 360ms; animation-delay: 40ms; }
}

/* phones: the menu drops down smoothly (a quick reveal from the top with the links following
   one after another) instead of popping in; closing reverses it */
@media (max-width: 820px) {
  .mobile-menu { display: block; visibility: hidden; pointer-events: none; opacity: 0;
    clip-path: inset(0 0 100% 0 round 0 0 18px 18px); transform: translateY(-6px);
    transition: clip-path 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 340ms; }
  .mobile-menu.is-open { visibility: visible; pointer-events: auto; opacity: 1; clip-path: inset(0 0 0 0 round 0 0 18px 18px); transform: none;
    transition: clip-path 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
  .mobile-menu li, .mobile-menu .pill { opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
  .mobile-menu.is-open li, .mobile-menu.is-open .pill { opacity: 1; transform: none; transition: opacity 260ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1); }
  .mobile-menu.is-open li:nth-child(1) { transition-delay: 40ms; } .mobile-menu.is-open li:nth-child(2) { transition-delay: 75ms; }
  .mobile-menu.is-open li:nth-child(3) { transition-delay: 110ms; } .mobile-menu.is-open li:nth-child(4) { transition-delay: 145ms; }
  .mobile-menu.is-open li:nth-child(5) { transition-delay: 180ms; } .mobile-menu.is-open .pill { transition-delay: 210ms; }
  .nav-toggle { transition: opacity 150ms ease; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.is-open, .mobile-menu li, .mobile-menu .pill { transition: none !important; }
}
.film-steps .world, .film-steps .caps { translate: var(--dx, 0px) 0; }
.film-steps.snap .world, .film-steps.snap .caps { transition: translate 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.film-steps .stage { touch-action: pan-y; }

/* legal pages (Privacy, Terms) */
.legal { padding-top: clamp(56px, 8vw, 96px); }
.lg-title { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(40px, 6vw, 64px); margin-top: 10px; }
.lg-date { margin-top: 14px; font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); }
.lg-body { margin-top: 40px; color: #3b3a36; font-size: 17px; line-height: 1.65; }
.lg-body .lg-intro { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--ink); padding-bottom: 28px; border-bottom: 1px solid var(--line-light); }
.lg-body h2 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2vw, 24px); letter-spacing: -0.015em; color: var(--ink); margin: 44px 0 0; scroll-margin-top: 90px; }
.lg-body p { margin: 14px 0 0; }
.lg-body ul { margin: 14px 0 0; padding-left: 1.2em; }
.lg-body li { margin-top: 8px; }
.lg-body li::marker { color: var(--sand-deep); }
.lg-body b { color: var(--ink); font-weight: 600; }
.lg-back { font-size: 13px; color: inherit; opacity: 0.75; }
.lg-back:hover { opacity: 1; }
.page-light .gnav .lg-back { color: var(--ink); }

/* content protection: nothing to select, long-press save or drag out (form fields stay usable) */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, video, canvas, svg, picture { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
video::-internal-media-controls-download-button { display: none; }
video::-webkit-media-controls-enclosure { overflow: hidden; }

/* phones: sections that are off screen skip layout and painting, so opening a FAQ answer (which
   moves everything below it) only has to lay out what is actually visible */
@media (max-width: 820px) {
  .statement, #demo, #build, #how, #results, #price, #discuss, .foot { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  .faq .fq { contain: layout paint; }
  .faq .answer { will-change: height; }
}
/* the film card never scrolls inside itself (a tap or focus could nudge it sideways on small phones) */
.film-on .stage { overflow: clip; }
@media (max-width: 360px) { .film-steps .chapters i { width: 24px; } }

/* no blue tap flash or focus ring when tapping buttons and links on phones (Android and iOS);
   keyboard users still get the sand focus ring */
html, body, a, button, summary, label, input, select, textarea, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }
summary { -webkit-tap-highlight-color: transparent; }
summary::-webkit-details-marker { display: none; }
@media (hover: none) {
  /* touch: a focused element keeps no ring after the tap (the dialog's close button, the menu toggle) */
  button:focus-visible, a:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: none; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sand-deep); outline-offset: 1px; }
}

/* FAQ closing: the card starts returning to its closed look the moment it begins to close (the
   + turns back, the open tint and border fade) instead of switching at the end */
.faq .fq[open].closing .pm { transform: none; background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.faq .fq[open].closing .pm::after { transform: none; }
.faq .fq[open].closing { background: rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
@media (max-width: 820px) {
  .faq .fq { transition: background-color 320ms ease, box-shadow 320ms ease; }
  .faq .fq[open].closing { background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
}

/* ======================================================================
   Smoothness at every screen size (8 Oct). The phone treatment above now applies on desktop too:
   live background blur re-blurs everything behind it on every frame, and here it sat over moving
   things (the hero, the marquee, the drifting glows, the page scrolling under the header), which
   is what made the homepage crawl on desktop. The glass is painted instead, the glows are soft
   gradients rather than blurred shapes, and the live dots pulse with a ring that the graphics chip
   moves (scale and fade) instead of a shadow repainted every frame. Animations in sections that
   are off screen are paused by keynote.js (class zz-off).
   ====================================================================== */
.gnav, .subnav, .cta-bar, .step > div, .mq-tile, .faq .fq, .film-play span, .pill, .wf-play, .pf-replay,
.film-skip, .faq .pm, .dialog-close, .glass-warp, .hn-frost, .v-centre .gnav.nav-float .in, .dialog::backdrop {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.gnav { background: rgba(0, 0, 0, 0.94); }
.subnav { background: rgba(10, 10, 9, 0.94); }
.cta-bar { background: rgba(0, 0, 0, 0.95); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.v-centre .gnav.nav-float .in { background: rgba(255, 255, 255, 0.97); }
.page-light .gnav { background: rgba(251, 250, 246, 0.96); }
.page-light .subnav { background: rgba(251, 250, 246, 0.95); }
.page-light .cta-bar { background: rgba(251, 250, 246, 0.96); }
.pill--light { background-color: rgba(241, 239, 231, 0.95); }
.pill--ghost { background-color: rgba(184, 163, 126, 0.16); }
.light .pill--ghost, .page-light .pill--ghost, .sandbg .pill--ghost { background-color: rgba(255, 255, 255, 0.72); }
.pf-replay, .film-skip { background: rgba(28, 27, 24, 0.9); }
.film-play span { background: rgba(20, 20, 18, 0.55); }
.mq-tile { background: rgba(255, 255, 255, 0.78); }
.step > div { background: rgba(0, 0, 0, 0.9); }
.wf-glow i { filter: none; }
.wf-glow i:nth-child(1) { background: radial-gradient(closest-side, rgba(184, 163, 126, 0.5), rgba(184, 163, 126, 0)); }
.wf-glow i:nth-child(2) { background: radial-gradient(closest-side, rgba(233, 227, 211, 0.9), rgba(233, 227, 211, 0)); }
.wf-glow i:nth-child(3) { background: radial-gradient(closest-side, rgba(138, 119, 87, 0.3), rgba(138, 119, 87, 0)); }
.glass-warp { background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.56) 100%),
    radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1.4px) 0 0 / 22px 22px,
    rgba(246, 243, 235, 0.55); }
.faq .fq { background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76)); }
.faq .fq[open] { background: linear-gradient(165deg, #fff, rgba(255, 255, 255, 0.9)); }
.mq-glow i { filter: none; background: radial-gradient(closest-side, rgba(184, 163, 126, 0.4), rgba(184, 163, 126, 0)) !important; }
.hn-frost { background: rgba(241, 239, 231, 0.07); }
@media (prefers-reduced-motion: no-preference) {
  .i-live, .ro-live { position: relative; }
  .i-live::after, .ro-live::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
    background: rgba(184, 163, 126, 0.25); pointer-events: none; animation: liveRing 1.6s ease-in-out infinite; }
}
@keyframes liveRing { 0%, 100% { transform: scale(0.636); opacity: 1; } 50% { transform: scale(1); opacity: 0; } }
/* sections off screen: their looping animations wait (keynote.js adds zz-off) */
.zz-off, .zz-off *, .zz-off *::before, .zz-off *::after { animation-play-state: paused !important; }
/* the shooting stars sit on the black hole with plain transparency: the screen blend looked the
   same (a few pixels differ, by at most 14 levels of 255) but made the whole hero a blended layer */
.hero--field.bh .hero-field, .hero--field.bhv .hero-field { mix-blend-mode: normal; }

/* touch: the small controls keep their look but answer to a finger-sized area (44 px), as a tap target should */
@media (pointer: coarse) {
  .wf-play, .fc-play, .foot .links a { position: relative; }
  .wf-play::after, .fc-play::after, .foot .links a::after { content: ""; position: absolute; inset: -8px; }
  .fc-play::after { inset: -4px; }
  .foot .links a::after { inset: -12px -6px; }
}