/* Obscura site v5 homepage (home.css) = draft 02 "One Line" v4 minus nav/footer (now in kit/kit.css).
   Load after kit/kit.css.
   Obscura — draft 02 "One Line" v4 (hybrid: One Line + Aperture's light)
   Swiss editorial. One terracotta line is one document's journey: it starts as
   a dot, tangles, stalls, goes straight, and keeps going past "Simpan". */

:root {
  --paper: #F5F4F0;
  --ink: #141413;
  --muted: #6F6B64;
  --faint: #A9A49B;
  --hair: #E2DED5;
  --accent: #C2492E;
  --accent-dk: #E0613F;          /* the line on the one dark section */
  --dark-muted: #A29D93;
  --dark-hair: #2E2C28;
  --grey-line: #9C978E;          /* the "other" line in chapter 05 */

  --pad: 40px;
  --gap: 24px;
  --maxw: 1520px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --f-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
b { font-weight: 500; }
em { font-style: normal; font-family: var(--f-mono); font-size: .72em; letter-spacing: .02em; color: var(--accent); vertical-align: .08em; margin-right: .3em; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font: 500 14px/1 var(--f-sans);
}
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- grid ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { grid-column: 2 / 13; }
.c-2-7 { grid-column: 2 / 7; }
.c-2-8 { grid-column: 2 / 8; }
.c-2-9 { grid-column: 2 / 9; }
.c-2-10 { grid-column: 2 / 10; }
.c-2-11 { grid-column: 2 / 11; }
.c-2-12 { grid-column: 2 / 12; }
.c-2-13 { grid-column: 2 / 13; }
.c-8-13 { grid-column: 8 / 13; }
.c-1-13 { grid-column: 1 / 13; }
.c-9-13 { grid-column: 9 / 13; }

/* ---------- type ---------- */
.display {
  font-weight: 500;
  font-size: calc(clamp(52px, 10vw, 192px) * var(--ts, 1));
  line-height: .93;
  letter-spacing: -.048em;
  text-wrap: balance;
}
.h2 {
  font-weight: 500;
  font-size: calc(clamp(38px, 5.4vw, 104px) * var(--ts, 1));
  line-height: .98;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.h2--long { font-size: calc(clamp(34px, 4.4vw, 84px) * var(--ts, 1)); line-height: 1.0; }
.lede { font-size: clamp(19px, 1.45vw, 24px); line-height: 1.45; letter-spacing: -.012em; max-width: 34em; }
.body { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; letter-spacing: -.008em; max-width: 36em; }
.body--muted { color: var(--muted); }
.label, .src, .idx, .num, .note, .small, .lang, .tag, figcaption {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.label { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.src { color: var(--muted); }
.num { color: var(--muted); font-feature-settings: "zero"; }
.small { color: var(--muted); max-width: 60em; }
.tag { color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.tag::before { content: ""; width: 14px; height: 1px; background: currentColor; display: block; }

/* section index "(01) ──" */
.idx {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 40px;
}
.idx__n { color: var(--ink); }
.idx__rule { display: block; width: 56px; height: 1px; background: currentColor; transform-origin: 0 50%; }

/* ---------- buttons & links ---------- */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 24px;
  background: var(--ink); color: var(--paper);
  font: 500 16px/1 var(--f-sans); letter-spacing: -.01em;
  border-radius: 999px;
  transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover { background: #2a2926; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.link {
  display: inline-flex; gap: 8px; align-items: center;
  font: 500 16px/1 var(--f-sans);
  padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* nav: provided by kit/kit.css */

/* ---------- sections + the line ---------- */
.sec { position: relative; }
.line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 3;
}
.line .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line .ln--dot { stroke-width: 3; stroke-dasharray: 0 9; }
.line .mk { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.line .node { fill: var(--paper); stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease), fill .5s var(--ease); }
.line .node--pop { transform: scale(0); }
.line .node.is-on { transform: scale(1); fill: var(--accent); }
.line .node--ring.is-on { fill: var(--accent); }
.line .node--hollow.is-on { fill: var(--paper); }
.line .nlab { font: 400 11px/1 var(--f-mono); fill: var(--muted); letter-spacing: .04em; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .6s var(--ease); }
.line .nlab.is-on { opacity: 1; }
.line .head circle { fill: var(--accent); }
.line .head .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .5; transform-box: fill-box; transform-origin: center; animation: ring 2.4s var(--ease) infinite; }
.line .head { transition: opacity .3s linear; }
.js:not(.dot-in) .hero .line .head { visibility: hidden; }

@keyframes ring { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
/* the second, shorter line (chapter 05) */
.line .gl { fill: none; stroke: var(--grey-line); stroke-width: 1.5; stroke-linecap: butt; }
.line .gl-node { fill: var(--paper); stroke: var(--grey-line); stroke-width: 1.5; }
.line .gl-cap { stroke: var(--ink); stroke-width: 2; stroke-linecap: butt; }

/* ---------- HERO ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 130px 0 64px; }
.hero .idx { margin-bottom: 34px; }
.hero .display { font-size: calc(clamp(52px, 8.6vw, 168px) * var(--ts, 1)); line-height: .96; max-width: 11.5em; }
.hero .display .l { display: block; }
.hero .display .l--soft { color: var(--muted); }
.hero__dot { height: 2px; margin: clamp(40px, 5.6vh, 68px) 0 clamp(36px, 4.8vh, 58px); }
.hero__foot { align-items: end; }
.hero__foot .lede { grid-column: 1 / 7; }
.hero__foot .ctas { grid-column: 8 / 12; display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; justify-self: start; }

/* ---------- chapters (shared) ---------- */
.ch { padding: clamp(140px, 17vh, 200px) 0; }
.ch .h2 { margin-bottom: clamp(56px, 7vw, 104px); }

/* (01) BERLIKU */
.ch1__left { align-self: start; }
.counters { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); border-top: 1px solid var(--hair); }
.counters li { padding: 22px 0 30px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 10px; }
.counters__n { font-weight: 500; font-size: clamp(64px, 7.4vw, 136px); line-height: .86; letter-spacing: -.06em; font-variant-numeric: tabular-nums; margin-left: -.04em; }
.counters__t { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.3; color: var(--muted); letter-spacing: -.01em; max-width: 12em; }
.ch1 .tag { margin-top: 22px; }
.ch1__body { margin-top: clamp(40px, 4vw, 64px); }
.tangle-box { min-height: clamp(480px, 38vw, 580px); align-self: stretch; }

/* (02) HARGA */
.stat { position: relative; margin-bottom: clamp(56px, 6vw, 96px); }
.stat__num {
  font-weight: 500; font-size: clamp(120px, 21vw, 400px); line-height: .82; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums; margin-left: -.06em; white-space: nowrap;
}
.stat__pct { color: var(--muted); }
.stat__cap { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-top: clamp(44px, 4.6vw, 84px); font-size: clamp(19px, 1.6vw, 26px); letter-spacing: -.02em; max-width: 40em; }
.waiting {
  position: absolute; top: 0; left: 0; transform: translate(-100%, -50%);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.waiting__dots i { font-style: normal; opacity: .15; animation: tick 1.8s steps(1) infinite; }
.waiting__dots i:nth-child(2) { animation-delay: .6s; }
.waiting__dots i:nth-child(3) { animation-delay: 1.2s; }
@keyframes tick { 0% { opacity: 1; } 66% { opacity: .15; } }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: clamp(72px, 8vw, 128px); }
.mini { border-top: 1px solid var(--hair); padding-top: 22px; }
.mini__num { font-size: clamp(30px, 2.8vw, 48px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 12px; }
.mini__txt { font-size: 17px; line-height: 1.45; max-width: 24em; margin-bottom: 10px; }
.mini--note { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; }
.mini--note .small { max-width: 30em; }
.kicker { font-weight: 500; font-size: calc(clamp(28px, 3.3vw, 60px) * var(--ts, 1)); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.ch2 { padding-bottom: clamp(220px, 28vh, 300px); }

/* (03) SATU JALUR — the one dark section */
.ch3 { background: var(--ink); color: var(--paper); padding: 0; }
.ch3 .line .node { fill: var(--ink); stroke: var(--accent-dk); }
.ch3 .line .node.is-on { fill: var(--accent-dk); }
.ch3 .line .ln { stroke: var(--accent-dk); }
.ch3 .line .head circle { fill: var(--accent-dk); }
.ch3 .line .head .ring { stroke: var(--accent-dk); fill: none; }
.ch3__in { min-height: 100vh; min-height: 100svh; padding-top: clamp(110px, 14vh, 150px); padding-bottom: clamp(56px, 8vh, 96px); align-content: space-between; row-gap: 48px; }
.ch3 .idx, .ch3 .num, .ch3 .small { color: var(--dark-muted); }
.ch3 .idx__n { color: var(--paper); }
.ch3 .h2 { margin-bottom: 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-top: 44px; }
.step { padding-top: 34px; padding-right: 12px; }
.step h3 { font-weight: 500; font-size: clamp(22px, 2vw, 34px); letter-spacing: -.028em; line-height: 1.1; margin: 14px 0 12px; }
.step p { font-size: 16px; line-height: 1.45; color: var(--dark-muted); max-width: 19em; }
.step { transition: opacity .7s var(--ease); }
.js:not(.reduce) .step { opacity: .22; }
.js:not(.reduce) .step.is-on { opacity: 1; }
.ch3__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; flex-wrap: wrap; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ch3__kicker { font-weight: 500; font-size: clamp(24px, 2.4vw, 42px); letter-spacing: -.03em; line-height: 1.1; }
.ch3__foot .small { max-width: 30em; }
.js:not(.reduce) .ch3__foot { opacity: 0; transform: translateY(16px); }
.js:not(.reduce) .ch3__foot.is-on { opacity: 1; transform: none; }

/* (04) BERLANJUT */
.ch4 .h2 { margin-bottom: clamp(200px, 19vw, 290px); }
.track { display: grid; grid-template-columns: repeat(4, minmax(0, .58fr)) repeat(2, minmax(0, 1.3fr)); column-gap: var(--gap); margin-bottom: clamp(96px, 10vw, 150px); }
.track li { padding-top: 30px; display: flex; flex-direction: column; gap: 8px; }
.track__done { font-size: 15px; color: var(--muted); letter-spacing: -.01em; }
.track__new { font-weight: 500; font-size: clamp(26px, 2.4vw, 42px); letter-spacing: -.035em; line-height: 1; }
.track__new .num { letter-spacing: .02em; }
.track__new { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js:not(.reduce) .track__new { opacity: .18; }
.js:not(.reduce) .track__new.is-on { opacity: 1; }

.more { border-top: 1px solid var(--ink); }
.more__row { display: grid; grid-template-columns: 3fr 4fr 3fr; column-gap: var(--gap); padding: 30px 0 40px; border-bottom: 1px solid var(--hair); align-items: start; }
.more__h h3 { font-weight: 500; font-size: clamp(24px, 2.1vw, 36px); letter-spacing: -.03em; line-height: 1.05; margin-top: 10px; }
.more__p { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; max-width: 30em; }

/* tiny hairline illustrations */
.illo { font-size: 13px; line-height: 1.35; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.illo .tag { margin-top: 6px; font-size: 11px; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--hair); width: 100%; }
.bar--m { width: 72%; }
.bar--s { width: 44%; }
.illo__q { align-self: flex-end; border: 1px solid var(--ink); border-radius: 14px 14px 3px 14px; padding: 8px 12px; max-width: 88%; letter-spacing: -.005em; }
.illo__a { border-left: 1px solid var(--hair); padding: 4px 0 4px 12px; display: flex; flex-direction: column; gap: 7px; width: 82%; }
.illo__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 5px 11px; font: 400 11px/1.2 var(--f-mono); letter-spacing: .02em; }
.sheet { border-top: 1px solid var(--ink); }
.sheet > div { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.sheet dt { font: 400 11px/1.2 var(--f-mono); color: var(--muted); letter-spacing: .02em; }
.sheet dd { display: contents; }
.sheet b { font: 400 12px/1 var(--f-mono); color: var(--accent); text-align: right; }

.proof { display: grid; grid-template-columns: 7fr 3fr; column-gap: var(--gap); align-items: end; margin-top: clamp(96px, 10vw, 150px); }
.proof__shot img { width: 100%; border: 1px solid var(--hair); background: #fff; }
.proof__shot figcaption { margin-top: 18px; }
.proof__note { font-size: 15px; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 16px; margin-bottom: 38px; }

/* (05) SHAREPOINT */
.ch5 .grid { align-items: center; }
.ch5__text .h2 { margin-bottom: 44px; }
.ch5__text .body + .body { margin-top: 18px; }
.ch5__text .small { margin-top: 30px; max-width: 34em; }
.ch5__text .link { margin-top: 30px; }
.compare { position: relative; }
.compare__stops { display: grid; grid-auto-rows: 54px; }
.compare__stops li { text-align: right; font-size: clamp(17px, 1.3vw, 21px); letter-spacing: -.015em; color: var(--muted); display: flex; align-items: center; justify-content: flex-end; }
.compare__stops li.is-end { color: var(--ink); }
.compare__stops li.is-on-only { color: var(--ink); font-weight: 500; }
.compare__key { display: flex; justify-content: flex-end; gap: 24px; margin-top: 28px; font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.key { display: inline-flex; align-items: center; gap: 10px; }
.key i { display: block; width: 28px; height: 2px; position: relative; }
.key--sp i { background: var(--grey-line); height: 1.5px; }
.key--sp i::after { content: ""; position: absolute; right: 0; top: -5px; width: 2px; height: 12px; background: var(--ink); }
.key--ob i { background: var(--accent); }

/* (06) BUKTI */
.ch6 .h2 { margin-bottom: 28px; }
.shot { margin: clamp(88px, 9vw, 130px) 0 clamp(88px, 9vw, 130px); }
.shot img { width: 100%; border: 1px solid var(--hair); background: #fff; }
.shot figcaption { margin-top: 46px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.facts { border-top: 1px solid var(--ink); }
.facts__row { display: grid; grid-template-columns: 2fr 8fr; gap: var(--gap); padding: 20px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.facts dd { font-size: 17px; }
.facts dd i { font-style: normal; color: var(--muted); padding: 0 12px; }
.trust { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--gap); }
.trust > span { color: var(--muted); }
.trust b { color: var(--ink); display: block; }
.ch6 .small { margin-top: 28px; }

/* (07) CTA */
.ch7 { padding-bottom: clamp(120px, 14vh, 180px); }
.display--cta { font-size: calc(clamp(48px, 7vw, 140px) * var(--ts, 1)); margin-bottom: clamp(48px, 5vw, 80px); }
.ch7__copy .body + .body { margin-top: 18px; }
.cta-row { display: flex; justify-content: flex-end; align-items: center; gap: 40px; margin-top: clamp(80px, 9vw, 140px); }
.btn--xl { height: 88px; padding: 0 0 0 40px; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -.02em; gap: 0; }
.btn__slot { display: block; width: 92px; height: 100%; }
.btn-receive.is-received { background: var(--accent); }
.btn-receive.is-received:hover { background: #a93d25; }
.ch7.is-received .line .head circle { fill: var(--paper); }
.ch7.is-received .line .head .ring { stroke: var(--paper); fill: none; }

/* footer: provided by kit/kit.css */

/* ---------- JS reveal hooks (only hide when JS is running) ---------- */
/* opacity only, never visibility/display (search engines render without scrolling). The hero lines are never
   pre-hidden: they paint with the first frame (LCP) and the curtain lifts over them; home.js only drifts them. */
.js [data-split] { opacity: 0; }
.js.ready [data-split], .reduce [data-split] { opacity: 1; }
.split-line { padding-bottom: .08em; margin-bottom: -.08em; }

/* ================= v3 additions ================= */

/* (03) INI OBSCURA — the pivot */
.pv { padding: 0; }
.pv__in { min-height: 100vh; min-height: 100svh; padding-top: clamp(104px, 13vh, 140px); padding-bottom: clamp(44px, 6vh, 72px); align-content: space-between; row-gap: 16px; }
.ch .pv__h { font-size: clamp(48px, 6.6vw, 124px); margin-bottom: 0; }
.pv__stage { position: relative; height: clamp(250px, 40vh, 390px); }
.pv__word {
  position: absolute; margin: 0; transform: translateY(-100%); padding-bottom: 20px;
  font-weight: 500; font-size: clamp(40px, 4.9vw, 80px); line-height: 1; letter-spacing: .3em; white-space: nowrap;
}
.pv__word i { font-style: normal; display: inline-block; transition: opacity .9s var(--ease), transform 1.1s var(--ease), color .9s var(--ease), text-shadow .9s var(--ease); }
.js:not(.reduce) .pv__word i { opacity: .28; color: transparent; text-shadow: 0 0 24px var(--ink); }
.js:not(.reduce) .pv__word.is-on i { opacity: 1; transform: none; color: var(--ink); text-shadow: 0 0 0 rgba(20, 20, 19, 0); }
.pv__word i:nth-child(2) { transition-delay: .07s; } .pv__word i:nth-child(3) { transition-delay: .14s; }
.pv__word i:nth-child(4) { transition-delay: .21s; } .pv__word i:nth-child(5) { transition-delay: .28s; }
.pv__word i:nth-child(6) { transition-delay: .35s; } .pv__word i:nth-child(7) { transition-delay: .42s; }
.pv__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; grid-column: 2 / 12; }
.pv__sub { max-width: 30em; }
.pv__small { max-width: 24em; text-align: right; }
.line .mark .mk-s { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.line .mark .mk-row { stroke-linecap: round; }
.line .mark .mk-doc { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.line .mark .mk-fold { fill: transparent; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; transition: fill .8s var(--ease) .5s; }
.line .mark .mk-cone { opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(0); transition: transform 1.2s var(--ease), opacity .5s var(--ease); }
.line.is-on .mark .mk-cone { opacity: 1; transform: none; }
.line.is-on .mark .mk-fold { fill: var(--accent); }

/* (04) product proof under each stop */
.ch3 .h2--long { font-size: calc(clamp(34px, 4vw, 72px) * var(--ts, 1)); }
.ch3__sub { margin-top: 20px; font-size: clamp(17px, 1.3vw, 21px); color: var(--dark-muted); letter-spacing: -.01em; }
.ch3__in { row-gap: 36px; }
.steps { padding-top: 36px; }
.step { padding-top: 28px; }
.step h3 { margin: 12px 0 10px; }
.step { display: flex; flex-direction: column; }
.step p { margin-bottom: 20px; }
.crop { margin-top: auto; aspect-ratio: 16 / 10; max-height: 20vh; overflow: hidden; border: 1px solid #3A3833; background: #1E1D1A; }
.crop img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }


/* (05) TANYA */
.ch4 .h2 { margin-bottom: clamp(180px, 17vw, 260px); }
.track__next .num::after { content: " ↓"; }
.ask { display: grid; grid-template-columns: 4fr 7fr; column-gap: calc(var(--gap) * 2); align-items: end; border-top: 1px solid var(--ink); padding-top: 30px; }
.ask .more__p { margin: 14px 0 34px; }
.ask .illo { margin-bottom: 4px; }
.proof__shot img { width: 100%; border: 1px solid var(--hair); background: #fff; }
.proof__shot figcaption { margin-top: 16px; }
.ch4 .proof__note { margin: 34px 0 0; border-top: 0; padding-top: 0; }

/* (06) intro */
.gi { padding-bottom: clamp(110px, 15vh, 170px); }
.gi__lead { font-size: clamp(19px, 1.6vw, 26px); letter-spacing: -.015em; color: var(--muted); margin-bottom: 20px; }
.ch.gi .h2 { margin-bottom: 36px; }
.ci { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin-top: clamp(48px, 5vw, 72px); }
.ci > div { border-top: 1px solid var(--hair); padding-top: 18px; padding-right: 24px; }
.ci dt { margin-bottom: 10px; color: var(--ink); }
.ci dd { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; max-width: 28em; }

/* (06) the graph stage */
.gg { position: relative; }
.gg .line { z-index: 1; }
.gg__in { min-height: 100vh; min-height: 100svh; padding-top: 92px; padding-bottom: 26px; display: flex; flex-direction: column; justify-content: center; }
.gfit { position: relative; z-index: 2; margin: 0; }
.graph { position: relative; width: 1320px; padding: 46px 0 50px; transform-origin: 0 0; }
.graph__dots { position: absolute; inset: 0 -24px; pointer-events: none; }
.graph__dots::before {
  content: ""; position: absolute; inset: 0;  /* the mask lives on a static child so the animated (opacity) element carries no mask */
  background: radial-gradient(circle, #D3CDC2 1px, transparent 1.3px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 45% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 45% 50%, #000 55%, transparent 100%);
}
.graph__edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.graph__chips { position: absolute; inset: 0; pointer-events: none; }
.graph__grid { position: relative; display: grid; grid-template-columns: 196px repeat(4, 168px); column-gap: 113px; row-gap: 92px; align-items: center; }

.gc { position: relative; display: flex; flex-direction: column; background: #FBFAF7; border: 1px solid #D3CDC2; font-size: 10.5px; line-height: 1.35; transition: filter .6s var(--ease), box-shadow .6s var(--ease); }
.gc__k { display: flex; align-items: center; gap: 7px; padding: 10px 10px 0; font: 500 9.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gc__t { padding: 7px 10px 8px; font-weight: 500; font-size: 12px; line-height: 1.28; letter-spacing: -.008em; min-height: 47px; }
.gc__m { padding: 0 10px 9px; display: grid; gap: 3px; }
.gc__m > div { display: flex; justify-content: space-between; gap: 10px; }
.gc__m dt { color: var(--muted); }
.gc__m dd { text-align: right; }
.gc__bar { margin: 0 6px 6px; display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--paper); padding: 5px 8px; font-size: 10px; letter-spacing: .01em; }
.gc__bar i { font-style: normal; font-size: 10px; }
.ic { display: inline-block; width: 8px; height: 10px; border: 1px solid currentColor; border-radius: 1px; }
.ic--prj { width: 11px; height: 8px; border-top-width: 2.5px; }
.ic--con { box-shadow: inset 0 -2px 0 currentColor; }
.gc--con { border-left: 3px solid var(--accent); }
.gc--prj { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gc--prj .gc__k { color: var(--accent); }
.gc--prj .gc__t { font-size: 14px; min-height: 0; padding-bottom: 10px; }
.gc--old { filter: opacity(.5); }
.cnt { font-weight: 500; display: inline-block; min-width: 1ch; }
.cnt--sug { color: var(--accent); }
.cnt.is-tick { animation: tick-up .5s var(--ease); }
@keyframes tick-up { 0% { transform: translateY(5px); opacity: 0; } 100% { transform: none; opacity: 1; } }

.chip {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px;
  font: 500 10.5px/1.1 var(--f-sans); letter-spacing: -.003em;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  transition: filter .6s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.chip--grey { color: var(--muted); border-color: #CFC9BE; font-weight: 400; }
.chip--sug { border-style: dashed; border-color: var(--accent); }
.chip--sug i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: transform .5s var(--ease), width .5s var(--ease), margin .5s var(--ease); }
.chip--old { filter: opacity(.5); }

.graph__edges .e { fill: none; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: butt; transition: stroke .5s var(--ease), stroke-width .4s var(--ease); }
.graph__edges .e-mk { fill: none; stroke: #fff; stroke-width: 10; }
.edge { transition: opacity .6s var(--ease); }
.edge--grey .e { stroke: #BEB8AD; stroke-width: 1; }
.edge--rec .e { stroke: var(--ink); }
.edge--rec .e-arr { fill: var(--ink); }
.edge--sug .e { stroke: var(--accent); stroke-dasharray: 4 4; }
.edge--sug .e-arr { fill: var(--accent); transition: fill .5s var(--ease); }
.edge--old { opacity: .5; }

/* beat 5: select INV -> PO, dim everything else */
.graph.is-sel:not(.is-rel) .gc:not(.is-pick),
.graph.is-sel:not(.is-rel) .chip:not(.chip--pick) { filter: opacity(.18); }
.graph.is-sel:not(.is-rel) .edge:not(.edge--pick) { opacity: .14; }
.graph.is-sel:not(.is-rel) .gc.is-pick { box-shadow: 0 0 0 1.5px var(--accent); }
.graph.is-sel .edge--pick .e { stroke-width: 2; }
.graph.is-sel .chip--pick { border-width: 1.5px; }
/* beat 6: accepted. Solid, no dot */
.graph.is-acc .edge--pick .e { stroke-dasharray: none; }
.graph.is-acc .chip--pick { border-style: solid; }
.graph.is-acc .chip--pick i { transform: scale(0); width: 0; margin-right: -6px; }
/* beat 7: released. Now a recorded connection like the others */
.graph.is-rel .edge--pick .e { stroke: var(--ink); stroke-width: 1.25; }
.graph.is-rel .edge--pick .e-arr { fill: var(--ink); }
.graph.is-rel .chip--pick { border-color: var(--ink); border-width: 1px; }

.insp {
  position: absolute; z-index: 3; background: #FBFAF7; border: 1px solid #D3CDC2; border-top: 2px solid var(--accent);
  padding: 16px 18px 18px; font-size: 12px; line-height: 1.45;
}
.graph .insp { opacity: 0; transform: translateX(32px); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.graph.is-sel .insp { opacity: 1; transform: none; }
.insp__k { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.insp__k i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.insp__h { font-weight: 500; font-size: 22px; letter-spacing: -.025em; line-height: 1.1; margin: 10px 0 14px; }
.insp__ft > div { border-left: 2px solid var(--ink); padding: 1px 0 1px 10px; margin-bottom: 10px; }
.insp__ft dt { font: 400 10px/1.3 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.insp__ft dd { font-weight: 500; font-size: 12px; line-height: 1.3; }
.insp__scope { margin: 2px 0 12px; }
.insp__q { margin: 0; border-top: 1px solid var(--hair); padding-top: 10px; }
.insp__ql { font: 400 10px/1.3 var(--f-mono); color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.insp__pg { font: 400 10px/1.3 var(--f-mono); color: var(--muted); margin-top: 3px; }
.insp__btns { display: flex; gap: 8px; margin-top: 14px; }
.insp__acc, .insp__rej { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; font-weight: 500; font-size: 12.5px; border: 1px solid var(--ink); transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease); }
.insp__acc { background: var(--ink); color: var(--paper); }
.insp__acc::before { content: "✓"; display: inline-block; width: 0; overflow: hidden; transition: width .4s var(--ease), margin .4s var(--ease); }
.graph.is-acc .insp__acc { background: var(--accent); border-color: var(--accent); animation: press .6s var(--ease); }
.graph.is-acc .insp__acc::before { width: 1em; margin-right: 4px; }
.graph.is-acc .insp__rej { opacity: .4; }
@keyframes press { 0% { transform: scale(1); } 30% { transform: scale(.92); } 100% { transform: scale(1); } }

.gg__foot { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 40px; margin-top: 10px; padding-top: 14px; }
.legend { display: flex; gap: 28px; font: 400 12px/1.4 var(--f-mono); color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.lg { display: inline-flex; align-items: center; gap: 10px; }
.lg i { display: block; width: 30px; height: 0; border-top: 1.5px solid var(--ink); }
.lg--sug i { border-top: 1.5px dashed var(--accent); position: relative; }
.lg--sug i::after { content: ""; position: absolute; left: 12px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gg__note { max-width: 46em; }
.gg:has(.graph.is-sel:not(.is-rel)) .line .head { visibility: hidden; }
.lg { white-space: nowrap; }
.gg__foot { padding-right: 96px; }
.facts dd > span { white-space: nowrap; }

/* graph as a list of connections (tablet + phone) */
.glist { display: none; }
.gl-hub { background: #FBFAF7; border: 1px solid var(--accent); box-shadow: 0 0 0 1px var(--accent); padding: 14px 16px 12px; max-width: 420px; }
.gl-hub .gc__k { padding: 0; color: var(--accent); }
.gl-hub__t { font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.15; margin: 8px 0 12px; }
.gl-hub .gc__m { padding: 0; font-size: 13px; gap: 4px; }
.gl-cnt { position: relative; color: var(--accent); }
.gl-cnt b { font-weight: 500; transition: opacity .4s var(--ease) 1.4s, transform .5s var(--ease) 1.4s; display: inline-block; }
.gl-cnt__b { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(6px); }
.glist:has(.insp--m.is-on) .gl-cnt__a, .reduce .gl-cnt__a { opacity: 0; transform: translateY(-6px); }
.glist:has(.insp--m.is-on) .gl-cnt__b, .reduce .gl-cnt__b { opacity: 1; transform: none; }
.gl-rows { margin: 18px 0 0; border-top: 1px solid var(--ink); max-width: 560px; }
.gl { display: grid; grid-template-columns: 1fr 1.35fr .9fr; align-items: center; column-gap: 10px; padding: 12px 0 13px; border-bottom: 1px solid var(--hair); transition: opacity .7s var(--ease); }
.js:not(.reduce) .gl { opacity: .16; }
.js:not(.reduce) .gl.is-on { opacity: 1; }
.gl__a, .gl__b { font: 500 12px/1.2 var(--f-mono); letter-spacing: .01em; }
.gl__a small { display: block; font: 400 12px/1.3 var(--f-sans); color: var(--muted); margin-top: 3px; letter-spacing: 0; }
.gl__b { text-align: right; }
.gl__e { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gl__e b { font-weight: 500; font-size: 11.5px; line-height: 1.2; text-align: center; display: inline-flex; align-items: center; gap: 5px; }
.gl__e i { display: block; position: relative; width: 100%; height: 0; border-top: 1.5px solid var(--ink); }
.gl__e i::after { content: ""; position: absolute; right: -1px; top: -5.5px; border: 4.5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.gl--grey .gl__e b { color: var(--muted); font-weight: 400; }
.gl--grey .gl__e i { border-top: 1px solid #BEB8AD; }
.gl--grey .gl__e i::after { display: none; }
.gl--sug .gl__e b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: transform .5s var(--ease) 1.2s; }
.gl--sug .gl__e i { border-top: 1.5px dashed var(--accent); }
.gl--sug .gl__e i::after { border-left-color: var(--accent); }
.gl--pick .gl__e i::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) 1.1s; }
.glist:has(.insp--m.is-on) .gl--pick .gl__e i::before, .reduce .gl--pick .gl__e i::before { transform: none; }
.glist:has(.insp--m.is-on) .gl--pick .gl__e b::before, .reduce .gl--pick .gl__e b::before { transform: scale(0); }
.insp--m { position: relative; margin-top: 18px; max-width: 420px; transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js:not(.reduce) .insp--m { opacity: 0; transform: translateY(16px); }
.js:not(.reduce) .insp--m.is-on { opacity: 1; transform: none; }
.insp--m .insp__acc { transition-delay: .9s; }
.insp--m.is-on .insp__acc, .reduce .insp--m .insp__acc { background: var(--accent); border-color: var(--accent); }
.insp--m.is-on .insp__acc::before, .reduce .insp--m .insp__acc::before { width: 1em; margin-right: 4px; transition-delay: .9s; }

/* (07) SharePoint: name the two lines */
.line .lnlab { font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-anchor: start; dominant-baseline: central; paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.line .gl-lab { fill: var(--muted); }
.line .ob-lab { fill: var(--accent); }

@media (max-width: 1000px) {
  .gfit { display: none; }
  .glist { display: block; }
  .gg__in { min-height: 0; padding-top: 0; padding-bottom: 120px; display: block; }
  .gg .line { z-index: 3; }
  .gg__foot { display: block; margin-top: 36px; padding-right: 0; }
  .gg__foot > * + * { margin-top: 14px; }
  .legend { flex-wrap: wrap; gap: 10px 24px; white-space: normal; }
}
@media (max-width: 1100px) {
  .ask { grid-template-columns: 1fr; row-gap: 40px; }
  .ci { grid-template-columns: 1fr; row-gap: 28px; }
}

/* EN v3.1: full sentences. Keep last lines from ending on a single word */
p, dd, li, figcaption, blockquote { text-wrap: pretty; }
.gc__t, .counters__t { text-wrap: balance; }
.counters__t { max-width: 14em; }

/* EN hero: the hook is two full clauses (four lines), so it runs a size smaller with more air above the line */
html[lang=en] .hero .display { font-size: calc(clamp(48px, 7.4vw, 144px) * var(--ts, 1)); max-width: 13em; }
html[lang=en] .hero__dot { margin-top: clamp(64px, 9vh, 96px); }
/* (04) footer: kicker and small print side by side, the kicker balanced */
.ch3__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22em); align-items: end; column-gap: 48px; }
.ch3__kicker { font-size: clamp(22px, 2.1vw, 36px); text-wrap: balance; max-width: 24em; }

/* ---------- mid widths ---------- */
@media (max-width: 1100px) {
  .trust { grid-template-columns: 1fr; gap: 10px; }
  .more__row { grid-template-columns: 1fr 2fr; row-gap: 22px; }
  .more__row .illo { grid-column: 2; }
}

/* ---------- mobile: the left spine ---------- */
@media (max-width: 760px) {
  :root { --pad: 20px; --gap: 16px; }
  body { font-size: 17px; }
  .wrap { padding-left: 52px; padding-right: 20px; }
  .grid { display: block; }

  .hero { min-height: 0; padding: 116px 0 56px; }
  .hero .wrap { padding-left: 20px; }
  .display, .hero .display { font-size: calc(clamp(42px, 12.4vw, 60px) * var(--ts, 1)); line-height: .96; letter-spacing: -.045em; }
  .hero__dot { margin: 34px 0 30px; }
  .hero__foot { display: block; padding-left: 32px; }
  .hero__foot .ctas { margin-top: 28px; gap: 22px; flex-wrap: wrap; }

  .ch { padding: 88px 0; }
  .idx { margin-bottom: 26px; }
  .h2, .h2--long { font-size: calc(clamp(32px, 9.4vw, 42px) * var(--ts, 1)); line-height: 1.03; }
  .ch .h2 { margin-bottom: 40px; }

  .tangle-box { min-height: 0; height: 330px; margin: 0 0 36px; }
  .ch1 .grid { display: flex; flex-direction: column; }
  .ch1 .tangle-box { order: 2; }
  .ch1__left { order: 3; }
  .counters__n { font-size: 64px; }
  .counters li { padding: 16px 0 20px; }

  .stat__num { font-size: 25vw; }
  .stat__cap { margin-top: 30px; }
  .waiting { position: static; display: block; margin-bottom: 18px; transform: none; }
  .stat { display: flex; flex-direction: column; }
  .stat .waiting { order: -1; }
  .minis { grid-template-columns: 1fr; gap: 32px; }
  .kicker { font-size: calc(28px * var(--ts, 1)); }
  .ch2 { padding-bottom: 88px; }

  .ch3__in { min-height: 0; padding-top: 104px; padding-bottom: 104px; display: block; }
  .ch3__head { margin-bottom: 56px; }
  .steps { grid-template-columns: 1fr; padding-top: 0; gap: 0; }
  .step { padding: 0 0 40px; }
  .steps .step { padding-top: 0; }
  .step h3 { margin-top: 6px; }
  .ch3__foot { display: block; margin-top: 16px; }
  .ch3__kicker { font-size: 26px; margin-bottom: 18px; }

  .ch4 .h2 { margin-bottom: 40px; }
  .track { display: block; margin-bottom: 56px; }
  .track li { padding: 0; flex-direction: row; align-items: baseline; gap: 14px; height: 40px; }
  .track__new { font-size: 24px; height: 46px !important; }
  .more__row { display: block; padding: 22px 0 30px; }
  .more__h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
  .more__h h3 { margin-top: 0; font-size: 26px; }
  .illo { margin-top: 24px; max-width: 100%; }
  .proof { display: block; margin-top: 56px; }
  .proof__note { margin: 26px 0 0; }

  .ch5__text .h2 { margin-bottom: 32px; }
  .compare { margin-top: 56px; margin-left: -52px; padding-left: 64px; }
  .compare__stops { grid-auto-rows: 46px; }
  .compare__stops li { justify-content: flex-start; text-align: left; }
  .compare__key { justify-content: flex-start; }

  .shot { margin: 56px 0; }
  .facts__row { grid-template-columns: 1fr; gap: 8px; }
  .facts dd i { padding: 0 6px; }
  .display--cta { font-size: calc(clamp(38px, 10.6vw, 52px) * var(--ts, 1)); }
  .cta-row { flex-direction: column-reverse; align-items: stretch; gap: 22px; margin-top: 56px; }
  .cta-row .link { align-self: flex-start; }
  .btn--xl { height: auto; min-height: 68px; padding: 14px 22px 14px 50px; font-size: 17px; line-height: 1.25; white-space: normal; justify-content: flex-start; }
  .btn__slot { display: none; }
}


/* ---------- short desktop viewports (e.g. 1280x720): keep pinned chapters and the hero inside one screen ---------- */
@media (min-width: 761px) and (max-height: 820px) {
  .hero { padding-top: 104px; padding-bottom: 40px; }
  .hero .display { font-size: calc(min(8.6vw, 12vh) * var(--ts, 1)); }
  html[lang=en] .hero .display { font-size: calc(min(7.4vw, 11vh) * var(--ts, 1)); }
  .hero__dot { margin-top: 6vh; margin-bottom: 4.5vh; }
  html[lang=en] .hero__dot { margin-top: 9vh; margin-bottom: 4.5vh; }
  .ch3__in { padding-top: 96px; padding-bottom: 28px; row-gap: 18px; }
  .ch3 .h2--long { font-size: calc(min(4vw, 6.4vh) * var(--ts, 1)); }
  .ch3 .idx { margin-bottom: 22px; }
  .ch3__sub { margin-top: 10px; font-size: 16px; }
  .steps { padding-top: 26px; }
  .step { padding-top: 20px; }
  .step h3 { font-size: 24px; margin: 8px 0 6px; }
  .step p { font-size: 13.5px; line-height: 1.42; margin-bottom: 12px; }
  .crop { max-height: 13vh; }
  .ch3__kicker { font-size: 22px; }
}

/* ---------- v3 mobile ---------- */
@media (max-width: 760px) {
  .pv__in { min-height: 0; padding-top: 96px; padding-bottom: 88px; display: block; }
  .ch .pv__h { font-size: clamp(40px, 11.2vw, 56px); margin-bottom: 30px; }
  .pv__stage { height: 300px; margin-bottom: 64px; }
  .pv__word { transform: translateX(-50%); padding: 0; font-size: 22px; letter-spacing: .32em; margin-right: -.32em; }
  .pv__foot { display: block; }
  .pv__small { text-align: left; margin-top: 18px; }
  .ch3__sub { margin-top: 14px; }
  .crop { max-height: none; margin-top: 16px; }
  .step p { max-width: none; }
  .ch4 .h2 { margin-bottom: 40px; }
  .track__new { font-size: 24px; }
  .ask { padding-top: 22px; }
  .ask .more__p { margin: 10px 0 0; }
  .gi { padding-bottom: 40px; }
  .ci { margin-top: 40px; }
  .gl { grid-template-columns: .95fr 1.3fr .8fr; column-gap: 8px; }
  .gl__a, .gl__b { font-size: 11px; }
  .gl__a small { font-size: 11px; }
  .gl__e b { font-size: 11px; }
  .gg__in { padding-bottom: 88px; }
  .compare { margin-top: 120px; }
  html[lang=en] .ch5 .h2 { font-size: calc(30px * var(--ts, 1)); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .waiting__dots i { opacity: 1; }
}


/* ================= v4: the light is Obscura =================
   Before the pivot things are out of focus and the line is lost. After the line
   passes through the mark's pinhole, it carries a soft terracotta light, and what
   it reaches comes into focus. Blur = a static filter on small elements, or a
   pre-blurred copy crossfaded with opacity. Nothing full-screen is filtered. */

/* the line's head: a soft glow once it carries the light */
.line .head .glow { opacity: 0; transition: opacity .8s var(--ease); }
.sec.is-lit .line .head .glow, .pv .line.is-on .head .glow { opacity: 1; }
.line .halo { fill: none; stroke: var(--accent-dk); stroke-linecap: round; stroke-linejoin: round; }
.line .halo--a { stroke-width: 16; stroke-opacity: .07; }
.line .halo--b { stroke-width: 7; stroke-opacity: .16; }
.line .nglow { opacity: 0; transition: opacity .9s var(--ease), transform 1.1s var(--ease); transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.line .nglow.is-on { opacity: .45; transform: scale(.75); }
.line .nglow.is-cur { opacity: 1; transform: none; }

/* blurred fragments (hero + tangle): never in focus */
.frags { position: absolute; pointer-events: none; z-index: 2; }
.frag { position: absolute; left: 0; top: 0; white-space: nowrap; }
.frag__in {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 12.5px/1 var(--f-mono); letter-spacing: -.01em; color: #4A4741;
  padding: 9px 13px; border: 1px solid #D8D3C9; border-radius: 8px; background: #FBFAF7;
  /* soft edges without a filter layer: blurred text via text-shadow, blurred outline via box-shadow */
  --bb: calc(var(--b, 2.4px) * 1.6);
  color: transparent; text-shadow: 0 0 var(--bb) #4A4741; border-color: transparent; box-shadow: 0 0 var(--bb) 1px #CFC9BD; opacity: var(--o, .75);
  animation: drift var(--d, 16s) ease-in-out infinite alternate;
}
.frag--bubble .frag__in { border-radius: 16px 16px 16px 4px; font: 400 14px/1 var(--f-sans); background: #fff; }
.f-ico { color: #4A4741; box-shadow: 0 0 var(--bb, 3px) 0 #4A4741; width: 13px; height: 13px; flex: none; border: 1.4px solid currentColor; border-radius: 2px; opacity: .7; display: block; }
.f-folder { border-radius: 1px 3px 2px 2px; height: 10px; width: 14px; }
.f-mail { height: 10px; width: 14px; }
.f-pen { border-radius: 50% 50% 2px 50%; width: 10px; height: 10px; transform: rotate(45deg); }
@keyframes drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 100% { transform: translate3d(12px, -9px, 0) rotate(1deg); } }
.frags.is-paused .frag__in { animation-play-state: paused; }

.frags--hero { left: 0; top: 0; width: 0; height: 0; }
.fh1 { --b: 1.6px; --o: .8; --d: 17s; }
.fh2 { --b: 1.2px; --o: .9; --d: 13s; }
.fh3 { --b: 3.6px; --o: .55; --d: 20s; }
.frags--hero .frag { transition: opacity 1.6s var(--ease); }
.js:not(.reduce):not(.frags-in) .frags--hero .frag { opacity: 0; }

.frags--tangle { inset: 0; }
.frags--tangle .frag { transition: opacity 1.2s var(--ease); }
.frags--tangle .frag:nth-child(odd) .frag__in { --b: 2.8px; --o: .6; --d: 19s; }
.frags--tangle .frag:nth-child(even) .frag__in { --b: 1.8px; --o: .78; --d: 15s; }
.js:not(.reduce) .frags--tangle .frag { opacity: 0; }
.js:not(.reduce) .frags--tangle .frag.is-on { opacity: 1; }

/* hero: line two arrives blurred and snaps into focus (a blurred copy crossfades out) */
.fx { position: relative; }
/* focus ghost: no filter layer (Safari rasterises filtered, opacity-animated layers as visible boxes). The copy is transparent and its text-shadow is the blur; text-shadow radius = 2 x the old blur() sigma. */
.fx-ghost { position: absolute; left: 0; top: 0; width: 100%; color: transparent; text-shadow: 0 0 calc(var(--fxb, 16px) * 2) var(--fxc, #141413); pointer-events: none; user-select: none; opacity: 0; }
.fx-ghost * { color: transparent; text-shadow: inherit; }
.fx-ghost .stat__pct { text-shadow: 0 0 calc(var(--fxb, 16px) * 2) var(--muted); }

/* (02) the price, projected inside a hairline ring */
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(40px, 5vw, 88px); }
.proj { --D: min(40vw, 70vh, 600px); position: relative; width: var(--D); height: var(--D); display: grid; place-items: center; }
.proj__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proj__ring circle { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: .4; stroke-dasharray: 1.02 1.02; }
.proj__pin { position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--ink); }
.proj__pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--paper); }
.proj__cone { position: absolute; left: 0; top: 14%; width: 100%; height: 72%; transform-origin: 0 50%; }
.proj__cone svg { width: 100%; height: 100%; display: block; }
.stat .stat__num { position: relative; font-size: calc(var(--D) * .3); margin: 0; padding-left: .04em; line-height: 1; }
.stat .stat__num .fx-ghost { --fxb: 20px; }
.stat .stat__cap { margin-top: 0; display: block; max-width: 13em; font-size: clamp(22px, 2vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.stat .stat__cap .src { display: block; margin-top: 16px; letter-spacing: .02em; }
.js:not(.reduce) .proj__pin { transform: scale(0); }

/* (03) pivot: the cone of light out of the pinhole */
.pv__glow { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transform: scaleX(.15); transform-origin: 0 50%; transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.pv__glow svg { width: 100%; height: 100%; display: block; }
.pv .line.is-on ~ .pv__glow { opacity: 1; transform: none; }
.pv .line { z-index: 3; }

/* (04) the dark path: the light reaches each node and its crop comes into focus */
.crop { position: relative; }
.crop img { position: absolute; inset: 0; }
.crop .crop__blur { image-rendering: auto; }
.crop::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(224, 97, 63, .75); box-shadow: 0 0 44px rgba(224, 97, 63, .28); opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.js:not(.reduce) .crop__img { opacity: 0; transition: opacity 1.1s var(--ease) .1s; }
.js:not(.reduce) .step.is-on .crop__img { opacity: 1; }
.js:not(.reduce) .step.is-cur .crop::after { opacity: 1; }
.js:not(.reduce) .steps.has-cur .step.is-on:not(.is-cur) { opacity: .5; }
.step h3 { transition: text-shadow .9s var(--ease); }
.js:not(.reduce) .step.is-cur h3 { text-shadow: 0 0 28px rgba(227, 135, 106, .5); }

/* (05) the answer resolves from blur, then its source */
.illo__a { position: relative; }
.illo__a .bar { transition: box-shadow 1.1s var(--ease), opacity 1.1s var(--ease), background-color 1s var(--ease); }
.js:not(.reduce) .illo__a .bar { opacity: .55; box-shadow: 0 0 6px 2px rgba(214, 208, 197, .85); }
.js:not(.reduce) .illo.is-on .illo__a .bar { opacity: 1; background: #D6D0C5; box-shadow: 0 0 0 0 rgba(214, 208, 197, 0); }
.illo__chip { transition: text-shadow .9s var(--ease) .7s, color .9s var(--ease) .7s, opacity .9s var(--ease) .7s, transform .9s var(--ease) .7s; }
.js:not(.reduce) .illo__chip { color: transparent; text-shadow: 0 0 8px var(--accent); opacity: 0; transform: translateY(6px); }
.js:not(.reduce) .illo.is-on .illo__chip { color: var(--accent); text-shadow: 0 0 0 rgba(194, 73, 46, 0); opacity: 1; transform: none; }

/* (06) suggestions are soft until a person accepts one */
.g-cone { position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.g-cone svg { width: 100%; height: 100%; display: block; transform: scaleX(.2); transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.g-spot { position: absolute; left: 0; top: 0; width: 132px; height: 132px; z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.7); transition: opacity .7s var(--ease), transform 1s var(--ease);
  background: radial-gradient(circle, rgba(194, 73, 46, .16), rgba(194, 73, 46, 0) 68%); }
.g-spot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.g-spot circle { fill: none; stroke: var(--accent); stroke-opacity: .75; stroke-width: .8; stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02; transition: stroke-dashoffset 1.1s var(--ease) .1s; }
.graph.is-sel:not(.is-rel) .g-cone { opacity: 1; }
.graph.is-sel:not(.is-rel) .g-cone svg { transform: none; }
.graph.is-sel:not(.is-rel) .g-spot { opacity: 1; transform: none; }
.graph.is-sel:not(.is-rel) .g-spot circle { stroke-dashoffset: 0; }
.graph__edges, .graph__chips { z-index: 1; }
.graph__grid { z-index: 2; }
.graph .insp { z-index: 3; }
/* mobile list: soft suggestions, the picked one comes into focus */
.gl--pick { position: relative; }
.gl--pick::before { content: ""; position: absolute; inset: -6px -10px; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(194, 73, 46, .12), rgba(194, 73, 46, 0) 75%); opacity: 0; transition: opacity 1s var(--ease) .4s; }
.glist:has(.insp--m.is-on) .gl--pick::before { opacity: 1; }
.gl-rows { position: relative; z-index: 0; }

/* (07) SharePoint's line ends in shadow; ours runs on, lit */
.line .gl-shade { opacity: 0; }

/* reduced motion: final states, everything sharp */
.reduce .fx-ghost { display: none; }
.reduce .frag__in { color: #4A4741; text-shadow: none; border-color: #D8D3C9; box-shadow: none; animation: none; opacity: .5; }
.reduce .frag .f-ico { box-shadow: none; }
.reduce .crop__blur { display: none; }
.reduce .proj__ring circle { stroke-dasharray: none; }
.reduce .pv__glow, .reduce .pv .line .mk-cone { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .stat { display: flex; flex-direction: column; align-items: flex-start; }
  .proj { --D: min(calc(100vw - 80px), 320px); margin: 0 0 30px; }
  .stat .stat__cap { font-size: 22px; }
  .frags--hero { display: none; }
  .frag__in { font-size: 10.5px; padding: 6px 9px; }
  .frag--bubble .frag__in { font-size: 12px; }
}

/* v5: the facts row overflowed at 390px in v4 (nowrap spans); let them wrap on phones */
@media (max-width: 760px) {
  .facts dd > span { white-space: normal; }
  .trust > span { min-width: 0; }
  .pv { overflow-x: clip; }   /* the pivot's light cone ran ~28px past the edge */
}