/* shopsystem.io — colours and type after icon.com, page structure after pebblely.com */
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(/fonts/dm-sans-400.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(/fonts/dm-sans-500.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url(/fonts/dm-sans-600.woff2) format("woff2"); }

:root {
  --ground: #f3f2f1;
  --glow: #e9dfda;
  --band: #ebe9e6;
  --card: #fcfbfa;
  --ink: #191f1f;
  --ink-2: #4a5050;
  --line: rgba(0, 0, 0, .13);
  --r: 22px;
  --r-btn: 14px;
  --w: 1120px;
  --pad: 24px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font: 400 17px/1.5 var(--font); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: calc(var(--w) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.center { text-align: center; }
.center .sub, .center .lead { margin-left: auto; margin-right: auto; }

/* Banner */
.banner { background: var(--ink); color: #fff; font-size: 15px; }
.banner .wrap { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: center; flex-wrap: wrap; }
.banner a { color: #fff; font-weight: 500; text-underline-offset: 3px; }

/* Nav */
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 21px; letter-spacing: -.03em; text-decoration: none; }
.mark { width: 28px; height: 28px; flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: var(--r-btn); font: 500 17px/1 var(--font); text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); background: #000; }
.btn:active { transform: translateY(1px); }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light:hover { background: var(--card); }
.btn.small { white-space: nowrap; height: 40px; padding: 0 18px; font-size: 15px; border-radius: 12px; }

/* Hero */
.hero { padding: 72px 0 48px; }
.hero h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -.025em; }
.lead { font-size: 20px; line-height: 1.45; margin-top: 20px; max-width: 34em; }
.closed-note { font-size: 15px; color: var(--ink-2); margin-top: 10px; }
.ctas { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* Tiles */
.t { position: relative; overflow: hidden; border-radius: var(--r); background: #cfc8c0; }
.t video, .t img { width: 100%; height: 100%; object-fit: cover; }
.r916 { aspect-ratio: 9 / 16; }
.r45 { aspect-ratio: 4 / 5; }
.r11 { aspect-ratio: 1 / 1; }

/* Wall */
.wall { padding-bottom: 72px; }
.wall .row { overflow: hidden; margin-bottom: 14px; }
.wall .track { display: flex; gap: 14px; width: max-content; }
.wall .t { height: 300px; flex: none; }
.wall .t.r916 { width: 169px; }
.wall .t.r11 { width: 300px; }
.wall .row[data-dir="right"] .track { margin-left: -120px; }
.wall.moving .track { animation: drift 70s linear infinite; }
.wall.moving .row[data-dir="right"] .track { animation-direction: reverse; }
.wall:hover .track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.wall-line { text-align: center; font-size: 18px; margin-top: 36px; }
.wall-line strong { font-weight: 500; }

/* Grey bands */
.band { background: var(--band); padding: 104px 0; }
.block { padding: 112px 0; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; }
.sub { font-size: 18px; margin-top: 14px; max-width: 36em; }

/* Split: one master into every placement */
/* One master → every placement */
.decline { margin-top: 56px; background: var(--card); border-radius: 28px; padding: 40px; display: grid; grid-template-columns: 200px 56px 1fr; gap: 24px; align-items: center; }
.dc-frame { position: relative; overflow: hidden; border-radius: 16px; background: #cfc8c0; }
.dc-frame img, .dc-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-master .dc-frame { aspect-ratio: 9 / 16; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px #E8336D; }
.dc-ok { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 11px 5px 8px; font-size: 13px; font-weight: 600; }
.dc-ok svg { width: 15px; height: 15px; color: #E8336D; }
.dc-label { margin-top: 16px; text-align: center; font-size: 16px; line-height: 1.35; }
.dc-label b { display: block; font-size: 19px; }
.dc-label span { color: var(--ink-2); }
.dc-flow { width: 56px; height: 28px; }
.dc-flow path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.chips { display: inline-flex; gap: 4px; background: var(--band); border-radius: 12px; padding: 4px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--ink-2); padding: 8px 13px; border-radius: 9px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(25,31,31,.12); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dc-grid { --h: 220px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.dc-tile { margin: 0; flex: none; }
.dc-tile .dc-frame { height: var(--h); }
.dc-tile.r916 .dc-frame { aspect-ratio: 9 / 16; }
.dc-tile.r23 .dc-frame { aspect-ratio: 2 / 3; }
.dc-tile.r45 .dc-frame { aspect-ratio: 4 / 5; }
.dc-tile.r11 .dc-frame { aspect-ratio: 1; }
[data-hook], [data-cta], [data-spon] { transition: opacity .2s; }
.swap { opacity: 0; }
.dc-tile figcaption { margin-top: 12px; font-size: 14px; line-height: 1.35; }
.dc-tile figcaption b { display: block; font-weight: 600; }
.dc-tile figcaption > span:last-child { color: var(--ink-2); }
.dc-logos { display: flex; gap: 5px; margin-bottom: 6px; }
.dc-logos svg { width: 16px; height: 16px; }
.dc-count { text-align: center; margin-top: 28px; font-size: 18px; color: var(--ink-2); }
.dc-count b { color: var(--ink); font-weight: 600; }

.channels { text-align: center; margin-top: 72px; }
.channels p { font-size: 16px; color: var(--ink-2); }
.channels li { display: inline-flex; align-items: center; gap: 10px; }
.channels li svg { width: 24px; height: 24px; flex: none; }
.channels ul { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 36px; margin-top: 14px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

/* Formats grid */
.formats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 48px; }
.formats .t { border-radius: 18px; }
.formats figcaption { font-size: 14.5px; line-height: 1.4; margin-top: 10px; }
.formats figcaption strong { display: block; font-size: 16px; font-weight: 600; }

/* Steps */

/* Thank-you band */
.ink-band { background: var(--ink); color: #fff; padding: 112px 0; }
.letter-card { margin: 48px auto 0; max-width: 720px; background: var(--card); color: var(--ink); border-radius: 24px; padding: 40px 44px 44px; }
.letter-card p { font-size: 19px; line-height: 1.6; }
.letter-card p + p { margin-top: 16px; }
.letter-card .sig { font-weight: 600; margin: 24px 0 28px; }


/* Footer */

/* Letter page */
.letter { max-width: 700px; margin: 0 auto; padding: 64px var(--pad) 96px; }
.letter .back { font-size: 15px; text-decoration: none; }
.letter .back:hover { text-decoration: underline; }
.letter h1 { font-size: clamp(46px, 6vw, 72px); line-height: 1; font-weight: 600; letter-spacing: -.025em; margin-top: 28px; }
.letter time { display: block; font-size: 15px; color: var(--ink-2); margin-top: 12px; }
.letter .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 36px 0 8px; }
.letter .strip img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #cfc8c0; }
.letter .text p { font-size: 19px; line-height: 1.65; margin-top: 20px; }
.letter .sign { margin-top: 32px; font-weight: 600; }

/* Entrances */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.rise.in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* Tablet */
@media (max-width: 1000px) {
  .decline { grid-template-columns: 1fr; justify-items: center; padding: 32px 24px; }
  .dc-master { width: 200px; }
  .dc-flow { transform: rotate(90deg); }
  .dc-out { width: 100%; }
  .dc-grid { justify-content: center; flex-wrap: wrap; --h: 230px; }
  .formats { grid-template-columns: repeat(3, 1fr); }
}

/* Phone */
@media (max-width: 640px) {
  :root { --pad: 18px; --r: 16px; }
  body { font-size: 16px; }
  .banner { font-size: 14px; }
  .hero { padding: 48px 0 36px; }
  .hero h1 br, .ink-band h2 br { display: none; }
  .hero h1 { font-size: 40px; }
  .lead { font-size: 18px; }
  .wall .t { height: 210px; }
  .wall .t.r916 { width: 118px; }
  .wall .t.r11 { width: 210px; }
  .band, .block, .ink-band { padding: 72px 0; }
  .formats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .channels ul { font-size: 17px; gap: 12px 22px; }
  .channels li svg { width: 20px; height: 20px; }
  .letter-card { padding: 28px 22px 30px; }
  .letter-card p { font-size: 17px; }
  .decline { padding: 24px 14px; border-radius: 20px; }
  .dc-controls { justify-content: center; }
  .dc-grid { --h: 200px; gap: 18px 12px; }
  .dc-master { width: 160px; }
  .dc-tile { width: calc(50% - 6px); }
  .dc-tile .dc-frame { height: auto; width: 100%; }
  .dc-grid { align-items: flex-start; }
  .dc-count { font-size: 16px; }
  .letter .text p { font-size: 18px; }
}

/* How it works: the whole section is the stage. Pinned while ten steps scroll past; light, ElevenLabs-like UI */
.how { --hl: rgba(15, 17, 17, .08); --mut: #6f7474; position: relative; height: calc(100vh + 10 * 58vh); background: #fafaf9; border-top: 1px solid var(--hl); border-bottom: 1px solid var(--hl); }
.how-pin { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); overflow: hidden; }
.how-frame { position: relative; height: 100%; display: flex; flex-direction: column; padding-top: 32px; padding-bottom: 28px; }
.how-frame::before, .how-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hl); }
.how-frame::before { left: 0; } .how-frame::after { right: 0; }
.how-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.eyebrow { font-size: 14px; color: var(--mut); margin-bottom: 8px; }
.how h2 { font-weight: 400; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.05; letter-spacing: -.025em; }
.how-intro { max-width: 22em; font-size: 16px; color: var(--mut); text-align: right; }
.tabs { display: flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 14px; background: #efeeec; }
.tab { position: relative; flex: var(--n) 1 0; min-width: 0; overflow: hidden; border: 0; border-radius: 10px; background: transparent; padding: 10px 14px; font: 500 14px/1 var(--font); color: var(--mut); text-align: left; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.tab span { position: relative; z-index: 1; white-space: nowrap; }
.tab i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--f, 0) * 100%); background: linear-gradient(90deg, #E8336D, #FF7A45, #FFC15E); transition: width .25s linear; }
.tab.on { background: #fff; color: #0f1111; box-shadow: 0 1px 2px rgba(15, 17, 17, .08), 0 0 0 1px rgba(15, 17, 17, .04); }
.how-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; margin-top: 26px; }
.how-copy { display: flex; flex-direction: column; min-height: 0; }
.how-count { display: flex; gap: 6px; font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; }
.how-count .cn { color: #0f1111; font-weight: 500; }
.how-texts { position: relative; flex: none; height: 232px; margin-top: 14px; }
.ht { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.ht.on { opacity: 1; transform: none; transition-delay: .08s; pointer-events: auto; }
.ht h3 { font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.ht p { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: #3d4242; max-width: 30em; }
.how-list { list-style: none; padding: 0; margin: auto 0 0; border-top: 1px solid var(--hl); }
.how-list button { display: flex; gap: 14px; width: 100%; padding: 7px 0; border: 0; border-bottom: 1px solid var(--hl); background: none; font: 400 14px/1.3 var(--font); color: #9a9e9e; text-align: left; cursor: pointer; transition: color .25s; }
.how-list button span { font-variant-numeric: tabular-nums; width: 20px; }
.how-list li.done button { color: #5c6161; }
.how-list li.on button { color: #0f1111; font-weight: 500; }
.how-list button:hover { color: #0f1111; }
.how-vis { position: relative; min-height: 0; }
.how-orb { position: absolute; z-index: 0; right: 4%; top: 18%; width: min(62vh, 640px); aspect-ratio: 1; pointer-events: none; transform: translate(var(--ox, 0), var(--oy, 0)) scale(var(--os, 1)); transition: transform 1.4s cubic-bezier(.3, .7, .2, 1), opacity 1s; opacity: .75; }
.how-orb i { position: absolute; inset: 0; border-radius: 50%; filter: blur(46px); mix-blend-mode: multiply; animation: orb 18s ease-in-out infinite; }
.how-orb i:nth-child(1) { background: radial-gradient(circle at 35% 35%, rgba(255, 193, 94, .75), transparent 62%); }
.how-orb i:nth-child(2) { background: radial-gradient(circle at 65% 45%, rgba(255, 122, 69, .55), transparent 60%); animation-delay: -6s; }
.how-orb i:nth-child(3) { background: radial-gradient(circle at 45% 70%, rgba(232, 51, 109, .45), transparent 60%); animation-delay: -12s; }
@keyframes orb { 0%, 100% { transform: rotate(0) scale(1); } 33% { transform: rotate(120deg) scale(1.08) translate(4%, -3%); } 66% { transform: rotate(240deg) scale(.94) translate(-3%, 4%); } }
.how-pin[data-c="1"] { --ox: -30%; --oy: 6%; --os: 1.1; }
.how-pin[data-c="2"] { --ox: -8%; --oy: -10%; --os: .95; }
.how-pin[data-c="3"] { --ox: -20%; --oy: 12%; --os: 1.2; }
.how-frame { z-index: 1; }

.stage { position: absolute; inset: 0; --k: 1; color: #0f1111; }
.stage-fit { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%) scale(var(--k)); }
.sc { position: absolute; inset: 0; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; font-size: 13px; line-height: 1.4; }
.sc.on { opacity: 1; visibility: visible; transition: opacity .45s ease .1s, visibility 0s; }
.sc > * { transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; }
.sc:not(.on) > * { transform: translateY(24px) scale(.98); opacity: 0; }
.sc.on > :nth-child(2) { transition-delay: .12s; }
.sc.on > :nth-child(3) { transition-delay: .24s; }
.sc.on > :nth-child(4) { transition-delay: .36s; }
.stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg { width: 16px; height: 16px; flex: none; }
.ag { width: 8px; height: 8px; border-radius: 50%; background: #0f1111; flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.lab { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; color: #0f1111; }
.panel, .win, .doc, .acct, .read, .rv, .social p { background: #fff; border: 1px solid rgba(15, 17, 17, .08); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 17, 17, .04), 0 24px 48px -32px rgba(15, 17, 17, .28); }

/* 01 store */
.win { position: relative; overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 14px; border-bottom: 1px solid rgba(15, 17, 17, .07); font-size: 11px; color: var(--mut); }
.dots { display: flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #e2e0dd; }
.pdp { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 18px; }
.pdp-img > img { height: 210px; border-radius: 12px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.thumbs img { height: 54px; border-radius: 8px; }
.pdp-brand { font-size: 10px; letter-spacing: .16em; color: var(--mut); }
.pdp-name { font-size: 22px; line-height: 1.1; font-weight: 500; margin-top: 6px; letter-spacing: -.01em; }
.pdp-stars { color: #0f1111; font-size: 12px; margin-top: 8px; }
.pdp-stars span { color: var(--mut); }
.pdp-price { font-size: 18px; font-weight: 500; margin-top: 8px; }
.pdp-opts { display: flex; gap: 6px; margin-top: 10px; }
.pdp-opts span { border: 1px solid #e2e0dd; border-radius: 999px; padding: 4px 11px; font-size: 11px; }
.pdp-opts .sel { border-color: #0f1111; }
.pdp-desc { font-size: 11.5px; color: var(--mut); margin-top: 10px; }
.pdp-cart { display: block; margin-top: 12px; background: #0f1111; color: #fff; text-align: center; border-radius: 999px; padding: 9px; font-size: 12px; font-weight: 500; }
.scan { position: absolute; left: 0; right: 0; top: 32px; height: 60px; background: linear-gradient(to bottom, transparent, rgba(255, 122, 69, .16) 90%, rgba(232, 51, 109, .7) 91%, transparent 93%); opacity: 0; pointer-events: none; }
.s-store.on .scan { animation: scan 2.6s cubic-bezier(.5, 0, .5, 1) .5s infinite; }
@keyframes scan { 0% { transform: translateY(-60px); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(310px); opacity: 0; } }
.pulls { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pulls li { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 17, 17, .1); font-size: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.pulls li::before { content: "✓ "; color: #E8336D; }
.s-store.on .pulls li { opacity: 1; transform: none; }
.s-store.on .pulls li:nth-child(1) { transition-delay: .9s; } .s-store.on .pulls li:nth-child(2) { transition-delay: 1.1s; } .s-store.on .pulls li:nth-child(3) { transition-delay: 1.3s; }
.s-store.on .pulls li:nth-child(4) { transition-delay: 1.5s; } .s-store.on .pulls li:nth-child(5) { transition-delay: 1.7s; } .s-store.on .pulls li:nth-child(6) { transition-delay: 1.9s; }
.chip-app { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--mut); }

/* 02 ads */
.panel { padding: 16px 18px 14px; }
.ph { display: flex; align-items: center; gap: 9px; font-size: 13px; margin-bottom: 10px; }
.ph b { font-weight: 500; }
.ph span { margin-left: auto; color: var(--mut); font-size: 12px; }
.trow { display: grid; grid-template-columns: 34px 1.2fr 1fr 1fr; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(15, 17, 17, .06); font-size: 12px; }
.trow.th { border: 0; color: var(--mut); font-size: 11px; padding: 0 0 4px; }
.trow img { width: 34px; height: 42px; border-radius: 7px; }
.trow.top > span:nth-child(2) { font-weight: 500; }
.trow.top > span:nth-child(2)::after { content: " ★"; color: #FF7A45; }
.bar { position: relative; display: block; height: 18px; }
.bar i { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 2px; width: 0; background: #0f1111; transition: width 1s cubic-bezier(.2, .7, .2, 1) .4s; }
.trow:not(.top) .bar i { background: #c9cccc; }
.s-ads.on .bar i { width: calc(var(--v) * 1.6%); }
.bar b { position: absolute; right: 0; top: 0; font-weight: 500; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.insight { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f6f5f3; font-size: 12.5px; color: #3d4242; }
.insight b { color: #0f1111; font-weight: 600; }
.social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.social p { display: grid; grid-template-columns: 16px 1fr; gap: 2px 8px; align-items: center; padding: 10px 12px; font-size: 12px; color: var(--mut); }
.social b { grid-column: 2; color: #0f1111; font-size: 13px; font-weight: 500; }

/* 03 reviews */
.s-rev { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-content: center; }
.cards { display: flex; flex-direction: column; gap: 10px; }
.rv { padding: 12px 14px; font-size: 12.5px; transform: rotate(var(--r, 0deg)); }
.rv:nth-child(1) { --r: -1.2deg; } .rv:nth-child(2) { --r: 1deg; margin-left: 10px; } .rv:nth-child(3) { --r: -.6deg; }
.src { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--mut); margin-bottom: 6px; }
.st { margin-left: auto; color: #0f1111; letter-spacing: 1px; }
.st.lo { color: #b5b8b8; }
.az { width: 16px; height: 16px; border-radius: 4px; background: #ff9900; color: #111; font: 700 12px/16px var(--font); text-align: center; }
mark { background: rgba(255, 193, 94, .4); color: inherit; border-radius: 3px; padding: 0 2px; }
mark.neg { background: rgba(232, 51, 109, .18); }
.read { padding: 16px 16px 12px; }
.read .big { font-size: 13px; color: var(--mut); }
.read .big b { display: block; font-size: 42px; line-height: 1; color: #0f1111; font-weight: 400; letter-spacing: -.03em; }
.cmp { font-size: 12.5px; margin-top: 8px; }
.cmp span { color: var(--mut); font-size: 11.5px; }
.kh { font-size: 11px; color: var(--mut); margin: 14px 0 4px; }
.hb { display: grid; grid-template-columns: 100px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; }
.hb i { height: 4px; border-radius: 2px; background: #0f1111; width: 0; transition: width 1s cubic-bezier(.2, .7, .2, 1) .5s; }
.hb.neg i { background: #E8336D; }
.s-rev.on .hb i { width: calc(var(--v) * 2.2%); }
.hb b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* 04 3D map */
.s-map { padding: 0; }
.cloud { position: absolute; left: 112px; top: 10px; width: 400px; height: 400px; }
.photos { position: absolute; left: 20px; top: 48px; width: 84px; display: flex; flex-direction: column; gap: 10px; }
.photos img { height: 84px; border-radius: 12px; box-shadow: 0 10px 24px -16px rgba(15, 17, 17, .5); }
.photos p { font-size: 12px; color: var(--mut); text-align: center; }
.map-meta { position: absolute; left: 20px; right: 20px; bottom: 34px; display: flex; gap: 8px; justify-content: center; }
.map-meta span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 17, 17, .1); font-size: 12px; }

/* 05 training */
.s-train { padding-top: 36px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days i { height: 4px; border-radius: 2px; background: rgba(15, 17, 17, .1); position: relative; overflow: hidden; }
.days i::after { content: ""; position: absolute; inset: 0; background: #0f1111; transform: scaleX(0); transform-origin: 0 50%; }
.s-train.on .days i::after { animation: fill .3s linear forwards; }
.s-train.on .days i:nth-child(2)::after { animation-delay: .3s; } .s-train.on .days i:nth-child(3)::after { animation-delay: .6s; } .s-train.on .days i:nth-child(4)::after { animation-delay: .9s; }
.s-train.on .days i:nth-child(5)::after { animation-delay: 1.2s; } .s-train.on .days i:nth-child(6)::after { animation-delay: 1.5s; } .s-train.on .days i:nth-child(7)::after { animation-delay: 1.8s; }
@keyframes fill { to { transform: none; } }
.renders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.renders figure { margin: 0; }
.renders img { height: 214px; border-radius: 12px; filter: blur(var(--b)) saturate(calc(1 - var(--b) / 14px)); }
.renders .done img { box-shadow: 0 0 0 2px #fafaf9, 0 0 0 3.5px #0f1111; }
.renders figcaption { font-size: 12px; color: var(--mut); margin-top: 10px; }
.loss { width: 100%; height: 100px; margin-top: 22px; overflow: visible; }
.loss path { fill: none; stroke: #0f1111; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 600; }
.s-train.on .loss path { transition: stroke-dashoffset 2.1s ease .2s; stroke-dashoffset: 0; }
.train-note { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--mut); }
.train-note b { font-size: 32px; color: #0f1111; font-weight: 400; letter-spacing: -.03em; }
.train-note span { margin-left: auto; color: #0f1111; }

/* 06 brief */
.s-brief { display: flex; align-items: center; }
.doc { width: 100%; padding: 18px 22px 8px; }
.doc-h { display: flex; align-items: center; gap: 10px; font-weight: 500; padding-bottom: 12px; border-bottom: 1px solid rgba(15, 17, 17, .07); }
.doc-h span:last-child { margin-left: auto; font-weight: 400; color: var(--mut); font-size: 12px; }
.doc dl { margin: 0; }
.doc dl div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(15, 17, 17, .05); opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
.doc dl div:last-child { border: 0; }
.doc dt { color: var(--mut); font-size: 12px; }
.doc dd { margin: 0; font-size: 13.5px; }
.doc dd.q { font-weight: 500; }
.s-brief.on dl div { opacity: 1; transform: none; }
.s-brief.on dl div:nth-child(1) { transition-delay: .3s; } .s-brief.on dl div:nth-child(2) { transition-delay: .55s; } .s-brief.on dl div:nth-child(3) { transition-delay: .8s; }
.s-brief.on dl div:nth-child(4) { transition-delay: 1.05s; } .s-brief.on dl div:nth-child(5) { transition-delay: 1.3s; } .s-brief.on dl div:nth-child(6) { transition-delay: 1.55s; } .s-brief.on dl div:nth-child(7) { transition-delay: 1.8s; }
.fm { display: inline-block; padding: 2px 9px; margin-right: 4px; border-radius: 999px; border: 1px solid rgba(15, 17, 17, .12); color: var(--mut); font-size: 11.5px; }
.fm.on { border-color: #0f1111; background: #0f1111; color: #fff; }

/* 07 realism */
.frame { position: absolute; left: 20px; top: 40px; width: 168px; height: 298px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 48px -30px rgba(15, 17, 17, .5); }
.frame .box { position: absolute; left: 30%; top: 15%; width: 50%; height: 30%; border: 1.5px solid #fff; border-radius: 8px; box-shadow: 0 0 0 999px rgba(15, 17, 17, .25); }
.loupe { position: absolute; left: 212px; top: 20px; width: 288px; height: 400px; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 48px -30px rgba(15, 17, 17, .5); }
.loupe img { transform: scale(1.12); transition: transform 6s ease; }
.s-real.on .loupe img { transform: scale(1); }
.pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #0f1111; font-size: 11px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.pin i { width: 8px; height: 8px; border-radius: 50%; background: #E8336D; }
.s-real.on .pin { opacity: 1; transform: none; }
.s-real.on .pin:nth-of-type(1) { transition-delay: .6s; } .s-real.on .pin:nth-of-type(2) { transition-delay: .9s; } .s-real.on .pin:nth-of-type(3) { transition-delay: 1.2s; } .s-real.on .pin:nth-of-type(4) { transition-delay: 1.5s; }
.real-note { position: absolute; left: 20px; right: 20px; bottom: 44px; font-size: 13.5px; color: var(--mut); }
.real-note b { color: #0f1111; font-weight: 500; }

/* 08 voice */
.s-voice { display: flex; flex-direction: column; justify-content: center; }
.s-voice .lab + * { margin-top: 14px; }
.wave { display: flex; align-items: center; gap: 2px; height: 120px; }
.wave i { flex: 1; border-radius: 2px; background: #d9dbdb; height: calc(var(--h) * 1%); transition: background .15s; }
.wave i.lit { background: #0f1111; }
.words { display: flex; justify-content: space-between; margin: 12px 0 34px; font-size: 15px; color: #b2b6b6; }
.words span { transition: color .2s; }
.words span.lit { color: #0f1111; }
.mouths { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mouths img { height: 140px; border-radius: 12px; opacity: .35; filter: grayscale(.6); transition: opacity .25s, filter .25s, box-shadow .25s; }
.mouths img.lit { opacity: 1; filter: none; box-shadow: 0 0 0 2px #fafaf9, 0 0 0 3.5px #E8336D; }

/* 09 edit */
.phone { position: relative; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -34px rgba(15, 17, 17, .6); }
.s-edit .phone { position: absolute; left: 20px; top: 40px; width: 216px; height: 384px; }
.phone video { width: 100%; height: 100%; object-fit: cover; }
.tl { position: absolute; left: 258px; top: 40px; right: 20px; }
.tracks { position: relative; margin-top: 16px; }
.tracks p { position: relative; height: 46px; border-bottom: 1px solid rgba(15, 17, 17, .07); }
.tracks span { position: absolute; left: 0; top: 16px; font-size: 11px; color: var(--mut); }
.clip { position: absolute; top: 12px; height: 22px; left: calc(64px + (100% - 64px) * var(--s) / 100); width: calc((100% - 64px) * (var(--e) - var(--s)) / 100 - 3px); border-radius: 6px; background: #e4e3e0; }
.clip.hot { background: #0f1111; }
.clip.vo { background: repeating-linear-gradient(90deg, #0f1111 0 1.5px, transparent 1.5px 4px); opacity: .55; }
.clip.cap { background: #FFC15E; }
.clip.pr { background: rgba(255, 122, 69, .45); }
.clip.mu { background: rgba(232, 51, 109, .22); }
.head { position: absolute; top: -6px; bottom: 0; left: calc(64px + (100% - 64px) * var(--p, 0)); width: 1.5px; background: #E8336D; }
.head::before { content: ""; position: absolute; left: -5px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #E8336D; }
.tc { margin-top: 16px; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tc .tcv { color: #0f1111; font-weight: 400; font-size: 26px; letter-spacing: -.02em; }

/* 10 live */
.s-live .phone { position: absolute; left: 24px; top: 40px; width: 222px; height: 394px; }
.feed-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #fff; }
.feed-top span:last-child { color: rgba(255, 255, 255, .8); }
.av { width: 20px; height: 20px; border-radius: 50%; background: #c48a5c; display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.feed-cta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #0f1111; font-size: 12px; font-weight: 600; }
.accts { position: absolute; left: 272px; right: 20px; top: 40px; display: flex; flex-direction: column; gap: 12px; }
.acct { padding: 14px 16px; }
.acct p:first-child { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.acct p:first-child b { font-weight: 500; }
.cp { margin-top: 8px; font-size: 12.5px; }
.pl { color: var(--mut); font-size: 11.5px; margin-top: 2px; }
.status { position: relative; height: 26px; margin-top: 10px; }
.status span { position: absolute; left: 0; top: 0; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.status .sup { background: #f1f0ee; color: var(--mut); }
.status .slive { background: rgba(47, 160, 90, .12); color: #1f7a43; opacity: 0; }
.status .slive::before { content: "● "; }
.s-live.on .status .sup { animation: out .3s ease 1.4s forwards; }
.s-live.on .status .slive { animation: in .3s ease 1.6s forwards; }
.s-live.on .acct:nth-child(2) .sup { animation-delay: 2s; }
.s-live.on .acct:nth-child(2) .slive { animation-delay: 2.2s; }
@keyframes out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes in { from { transform: translateY(6px); } to { opacity: 1; transform: none; } }
.files { padding: 6px 4px 0; font-size: 12.5px; color: var(--mut); }
.files b { display: block; font-size: 32px; line-height: 1.05; color: #0f1111; font-weight: 400; letter-spacing: -.03em; }
.s-live .acct .lg use[href="#i-tiktok-w"] { }

@media (max-height: 820px) { .how-list { display: none; } }
@media (max-width: 1000px) {
  .how { height: calc(100svh + 10 * 55svh); }
  .how-pin { top: var(--navh); height: calc(100svh - var(--navh)); }
  .how-frame { padding-top: 18px; padding-bottom: 16px; }
  .how-frame::before, .how-frame::after { display: none; }
  .how-top { display: block; }
  .how-intro, .tabs, .how-list, .eyebrow { display: none; }
  .how h2 { font-size: 24px; }
  .how-body { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 10px; }
  .how-vis { flex: 1; }
  .how-copy { flex: none; }
  .how-texts { height: 190px; margin-top: 6px; }
  .ht h3 { font-size: 22px; }
  .ht p { font-size: 15px; margin-top: 8px; }
  .how-orb { width: 80vw; right: -10%; top: 10%; }
}
@media (prefers-reduced-motion: reduce) {
  .sc, .sc > *, .ht, .how-orb { transition: none !important; }
  .stage *, .stage *::before, .stage *::after, .how-orb i { animation: none !important; transition: none !important; }
  .s-train .days i::after { transform: none; }
  .s-live .status .sup { opacity: 0; }
  .s-live .status .slive { opacity: 1; }
}

/* Nav: logo left, links centred in a pill with a sliding marker, status and note on the right */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(243, 242, 241, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .3s ease; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(25, 31, 31, .25); }
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; gap: 24px; }
.nav nav { position: relative; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.nav ul { position: relative; z-index: 1; display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nav ul a { display: block; padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 500; transition: color .25s ease; }
.nav ul a:hover { color: var(--ink); }
.nav ul a.cur { color: #fff; }
.nav-ind { position: absolute; z-index: 0; top: 5px; left: 5px; height: calc(100% - 10px); width: 0; border-radius: 999px; background: var(--ink); opacity: 0; transition: transform .45s cubic-bezier(.3, .8, .2, 1), width .45s cubic-bezier(.3, .8, .2, 1), opacity .3s; pointer-events: none; }
.nav ul li { position: relative; z-index: 2; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 16px; }
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.state i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #FFC15E, #E8336D); box-shadow: 0 0 0 4px rgba(232, 51, 109, .14); }

/* Our story: the credentials, with three reels of creatives drifting past */
.story { padding: 128px 0; overflow: hidden; }
.story-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.story h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.story .lead { margin-top: 24px; max-width: 30em; }
.figures { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 48px; margin: 44px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.figures dt { font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg, #E8336D, #FF7A45 55%, #FFC15E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.figures dd { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.story-end { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 44px; }
.story-end p { font-size: 18px; font-weight: 500; }
.reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; height: 620px; overflow: hidden; border-radius: 28px; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.reel .col { overflow: hidden; }
.reel .roll { display: flex; flex-direction: column; gap: 12px; animation: roll 38s linear infinite; }
.reel .down .roll { animation-direction: reverse; animation-duration: 46s; }
.reel .col:nth-child(3) .roll { animation-duration: 42s; }
.reel img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; }
.reel img[src*="/s"] { aspect-ratio: 1; }
@keyframes roll { to { transform: translateY(calc(-50% - 6px)); } }

/* Footer: the three frames of the mark, huge and in 3D, fanning out and folding back behind the content */
.site-foot { position: relative; overflow: hidden; isolation: isolate; background: #0d1212; color: #e9e5e0; padding: 104px 0 36px; }
.foot-bg { position: absolute; inset: 0; z-index: -1; perspective: 1600px; perspective-origin: 70% 40%; pointer-events: none; }
.foot-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 18, 18, .92) 8%, rgba(13, 18, 18, .4) 46%, rgba(13, 18, 18, 0) 75%), linear-gradient(transparent 70%, rgba(13, 18, 18, .9)); }
.fan { position: absolute; right: -4%; top: -6%; width: min(82vw, 1180px); height: 160%; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-24deg); }
.fr { position: absolute; bottom: 26%; left: 52%; border-radius: 9% / 5%; transform-origin: 50% 100%; transform-style: preserve-3d; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 0 160px -30px currentColor; opacity: .62; animation: fan 16s cubic-bezier(.45, 0, .2, 1) infinite; }
.fr.r9 { color: #FFC15E; width: 34%; aspect-ratio: 9 / 16; margin-left: -6%; background: linear-gradient(160deg, rgba(255, 193, 94, .8), rgba(255, 193, 94, .1) 75%); --a: 0deg; --b: 30deg; --x: 46%; --z: -120px; }
.fr.r4 { color: #FF7A45; width: 36%; aspect-ratio: 4 / 5; margin-left: -24%; background: linear-gradient(160deg, rgba(255, 122, 69, .8), rgba(255, 122, 69, .1) 75%); --a: 0deg; --b: 0deg; --x: 0%; --z: -40px; animation-delay: -.25s; }
.fr.r1 { color: #E8336D; width: 36%; aspect-ratio: 1; margin-left: -42%; background: linear-gradient(160deg, rgba(232, 51, 109, .8), rgba(232, 51, 109, .1) 75%); --a: 0deg; --b: -30deg; --x: -46%; --z: 40px; animation-delay: -.5s; }
@keyframes fan {
  0%, 12% { transform: translateZ(var(--z)) rotateZ(var(--a)); }
  42%, 58% { transform: translate3d(var(--x), -4%, calc(var(--z) * 2.2)) rotateZ(var(--b)) rotateY(calc(var(--b) * -.8)); }
  88%, 100% { transform: translateZ(var(--z)) rotateZ(var(--a)); }
}
.foot-in { position: relative; }
.thanks { padding-bottom: 120px; }
.th-eyebrow { font-size: 15px; color: #a7aeac; }
.th-title { margin-top: 18px; font-weight: 400; font-size: clamp(72px, 13vw, 200px); line-height: .9; letter-spacing: -.055em; color: #fff; }
.th-title span { display: inline-block; }
.th-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; margin-top: 56px; }
.th-text p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: #d9d4ce; max-width: 34em; }
.th-text p + p { margin-top: 16px; }
.th-text p:first-child { color: #fff; }
.th-sig { font-size: 20px; color: #fff; margin-bottom: 22px; }
.th-sig::before { content: ""; display: block; width: 44px; height: 2px; margin-bottom: 18px; background: linear-gradient(90deg, #FFC15E, #FF7A45, #E8336D); }
.th-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.site-foot .rv-w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.25em); transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.site-foot.in .rv-w { opacity: 1; filter: none; transform: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
.foot-links a { color: #b9b4ae; text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: #fff; }
.foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 40px; }
.site-foot .wordmark { color: #fff; }
.legal { font-size: 13.5px; color: #858d8b; }
.site-foot.plain { padding-top: 72px; }

@media (max-width: 1000px) {
  .th-body { grid-template-columns: 1fr; }
  .nav .wrap { grid-template-columns: 1fr auto; }
  .nav nav { display: none; }
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .reel { height: 460px; }
}
@media (max-width: 640px) {
  .th-body { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .thanks { padding-bottom: 80px; }
  .site-foot { padding-top: 72px; }
  .fan { width: 120vw; right: -40%; opacity: .7; }
  .nav .btn.small { padding: 0 14px; font-size: 14px; }
  .state { display: none; }
  .story { padding: 80px 0; }
  .figures { gap: 24px; }
  .figures dd { font-size: 13.5px; }
  .reel { height: 380px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel .roll, .fan .fr { animation: none !important; }
  .nav-ind { transition: none; }
}

/* One master → every placement: each output is the ad as it shows in its placement */
.dc-grid { align-items: flex-end; gap: 16px; }
.mk { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 31, 31, .08), 0 18px 34px -22px rgba(25, 31, 31, .45); font-size: 11px; line-height: 1.3; color: #111; }
.mk video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-media { position: relative; overflow: hidden; }
.mk .av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font-size: 10px; font-weight: 600; flex: none; }
.mk-reel { width: 176px; }
.mk-reel .mk { aspect-ratio: 9 / 16; background: #000; color: #fff; }
.mk-reel video { position: absolute; inset: 0; }
.mk-reel .mk::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.mk-onscreen { position: absolute; z-index: 1; left: 12px; right: 12px; top: 22%; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.15; color: #fff; -webkit-text-stroke: 3px rgba(0, 0, 0, .85); paint-order: stroke fill; letter-spacing: -.01em; }
.mk-rail { position: absolute; z-index: 1; right: 8px; bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; }
.mk-rail svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; margin-top: 6px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.mk-rail b { font-weight: 600; }
.mk-foot { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; }
.mk-foot p { font-size: 11px; margin-bottom: 7px; }
.mk-cta { display: block; text-align: center; padding: 7px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #111; font-weight: 600; font-size: 11.5px; }
.mk-pin { width: 168px; }
.mk-pin .mk { background: transparent; box-shadow: none; overflow: visible; }
.mk-pin .mk-media { aspect-ratio: 2 / 3; border-radius: 16px; box-shadow: 0 18px 34px -22px rgba(25, 31, 31, .45); }
.mk-title { margin-top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.mk-by { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #5f6363; font-size: 11px; }
.mk-by .av { width: 18px; height: 18px; font-size: 9px; }
.mk-by b { color: #111; font-weight: 600; }
.mk-feed, .mk-car { width: 200px; }
.mk-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px; }
.mk-head > span:nth-child(2) { display: flex; flex-direction: column; }
.mk-head b { font-size: 11.5px; }
.mk-head small { font-size: 10px; color: #6b6f6f; }
.mk-more { margin-left: auto; color: #6b6f6f; letter-spacing: 1px; }
.mk-feed .mk-media { aspect-ratio: 4 / 5; }
.mk-car .mk-media { aspect-ratio: 1; }
.mk-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #efefef; font-weight: 600; font-size: 11.5px; }
.mk-feed .mk-bar { background: #f6f6f6; }
.mk-cap { padding: 8px 10px 11px; font-size: 11.5px; }
.mk-cap b { font-weight: 600; }
.mk-hl { font-size: 11.5px; line-height: 1.2; }
.mk-btn { flex: none; padding: 5px 9px; border-radius: 6px; background: #efefef; font-size: 10.5px; }
.mk-count { position: absolute; right: 8px; top: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; }
.mk-dots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 10px; }
.mk-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d4d4d4; }
.mk-dots i.on { background: #0095f6; }
@media (min-width: 1001px) { .decline { grid-template-columns: 170px 40px 1fr; padding: 32px; gap: 24px; } }
.dc-tile figcaption { margin-top: 14px; }
@media (max-width: 1000px) {
  .dc-grid { justify-content: center; flex-wrap: wrap; gap: 24px 16px; }
}
@media (max-width: 640px) {
  .mk-reel, .mk-pin, .mk-feed, .mk-car { width: calc(50% - 8px); }
  .mk-onscreen { font-size: 13px; }
}

/* Contact page */
.contact { padding: 88px 0 120px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.contact .eyebrow { font-size: 14px; color: #6f7474; margin-bottom: 10px; }
.contact h1 { font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.035em; }
.ct-lead { font-size: 19px; line-height: 1.5; margin-top: 22px; max-width: 26em; color: #3d4242; }
.ct-co { margin: 44px 0 0; display: grid; gap: 20px; }
.ct-co dt { font-size: 13px; color: #6f7474; }
.ct-co dd { margin: 4px 0 0; font-size: 17px; line-height: 1.45; }
.ct-co a { text-underline-offset: 3px; }
.ct-form { background: #fff; border: 1px solid rgba(15, 17, 17, .08); border-radius: 28px; padding: 36px; box-shadow: 0 40px 80px -50px rgba(15, 17, 17, .35); display: grid; gap: 18px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fld { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld > span, .fld legend { font-size: 14px; font-weight: 500; padding: 0; }
.fld small { font-weight: 400; color: #8a8f8f; margin-left: 4px; }
.fld input, .fld textarea { width: 100%; font: 400 16px/1.4 var(--font); color: var(--ink); background: #fafaf9; border: 1px solid rgba(15, 17, 17, .12); border-radius: 14px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
.fld textarea { resize: vertical; min-height: 150px; }
.fld input:focus, .fld textarea:focus { outline: none; background: #fff; border-color: #0f1111; box-shadow: 0 0 0 4px rgba(15, 17, 17, .07); }
.fld [aria-invalid="true"] { border-color: #c22d5c; box-shadow: 0 0 0 4px rgba(194, 45, 92, .08); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics legend { width: 100%; margin-bottom: 8px; }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.topics label span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(15, 17, 17, .14); font-size: 14.5px; transition: background .2s, color .2s, border-color .2s; }
.topics input:checked + span { background: #0f1111; border-color: #0f1111; color: #fff; }
.topics input:focus-visible + span { outline: 2px solid #0f1111; outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.ct-send .btn[disabled] { opacity: .6; cursor: wait; }
.ct-note { font-size: 13.5px; color: #6f7474; }
.ct-status { font-size: 15px; min-height: 1px; }
.ct-status.ok { padding: 14px 16px; border-radius: 14px; background: rgba(47, 160, 90, .1); color: #1f6e3d; }
.ct-status.err { padding: 14px 16px; border-radius: 14px; background: rgba(194, 45, 92, .08); color: #a3244c; }
@media (max-width: 1000px) {
  .ct-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .contact { padding: 56px 0 80px; }
  .ct-form { padding: 22px; border-radius: 22px; }
  .ct-row { grid-template-columns: 1fr; }
}

/* Our story: the founder's signature (photo to come: replace .founder-ph with <img class="founder-ph" src="/media/karim.jpg" alt="Karim Bensfia">) */
.founder { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.founder-ph { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #FFC15E, #FF7A45 50%, #E8336D); color: #fff; font-weight: 600; font-size: 20px; letter-spacing: .02em; box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px rgba(25, 31, 31, .12); }
.founder p { display: flex; flex-direction: column; font-size: 17px; line-height: 1.35; }
.founder b { font-weight: 600; }
.founder span { color: var(--ink-2); font-size: 15px; }

/* Light sections (same language as How it works): near-white ground, hairline frame, light headings, white cards */
.el { --hl: rgba(15, 17, 17, .08); --mut: #6f7474; position: relative; overflow: hidden; background: #fafaf9; border-top: 1px solid var(--hl); }
.el-frame { position: relative; padding-top: 104px; padding-bottom: 104px; }
.el-frame::before, .el-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hl); }
.el-frame::before { left: 0; } .el-frame::after { right: 0; }
.el-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.el .eyebrow { font-size: 14px; color: var(--mut); margin-bottom: 8px; }
.el h2 { font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
.el-intro { max-width: 26em; font-size: 17px; color: var(--mut); }
/* One master → every placement */
#variants .decline { margin-top: 48px; background: #fff; border: 1px solid var(--hl); border-radius: 28px; box-shadow: 0 1px 2px rgba(15, 17, 17, .04), 0 40px 80px -56px rgba(15, 17, 17, .35); }
#variants .chips { background: #efeeec; border-radius: 12px; }
#variants .chip { font-weight: 500; color: var(--mut); }
#variants .chip[aria-pressed="true"] { background: #fff; color: #0f1111; box-shadow: 0 1px 2px rgba(15, 17, 17, .08), 0 0 0 1px rgba(15, 17, 17, .04); }
#variants .dc-master .dc-frame { box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #0f1111; }
#variants .dc-ok svg { color: #1f7a43; }
#variants .dc-label b { font-weight: 500; }
#variants .dc-tile figcaption b { font-weight: 500; }
#variants .dc-tile figcaption > span:last-child, #variants .dc-label span { color: var(--mut); }
#variants .dc-flow path { stroke: rgba(15, 17, 17, .4); stroke-width: 1.6; }
#variants .dc-count { text-align: left; margin-top: 24px; font-size: 16px; color: var(--mut); }
#variants .dc-count b { color: #0f1111; font-weight: 500; }
#variants .channels { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; text-align: left; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hl); }
#variants .channels p { font-size: 14px; color: var(--mut); }
#variants .channels ul { margin: 0; justify-content: flex-start; font-size: 17px; font-weight: 500; gap: 12px 30px; }
#variants .channels li svg { width: 20px; height: 20px; }
/* Formats */
#formats .formats { margin-top: 48px; gap: 16px; }
#formats .formats figure { background: #fff; border: 1px solid var(--hl); border-radius: 22px; padding: 8px 8px 16px; box-shadow: 0 30px 60px -48px rgba(15, 17, 17, .4); }
#formats .formats .t { border-radius: 15px; }
#formats .formats figcaption { padding: 0 8px; margin-top: 14px; font-size: 14px; color: var(--mut); }
#formats .formats figcaption strong { font-weight: 500; color: #0f1111; margin-bottom: 3px; }
/* Our story */
.el.story { padding: 0; }
.el.story .story-grid { padding-top: 112px; padding-bottom: 112px; }
.el.story h2 { font-size: clamp(36px, 4.2vw, 60px); }
.el.story .lead { color: #3d4242; font-size: 19px; }
.el.story .figures { border-top-color: var(--hl); }
.el.story .figures dt { font-weight: 400; }
.el.story .figures dd { color: var(--mut); }
.el.story .founder b { font-weight: 500; }
.el.story .founder span { color: var(--mut); }
.el.story .founder-ph { box-shadow: 0 0 0 3px #fafaf9, 0 0 0 4px rgba(15, 17, 17, .1); }
@media (max-width: 1000px) {
  .el-frame { padding-top: 72px; padding-bottom: 72px; }
  .el-frame::before, .el-frame::after { display: none; }
  .el-top { display: block; }
  .el-intro { margin-top: 14px; }
  .el.story .story-grid { padding-top: 72px; padding-bottom: 72px; }
  #variants .channels { gap: 14px; }
}
/* Contact and thank-you pages in the same light language */
.contact, .letter-page { background: #fafaf9; border-top: 1px solid rgba(15, 17, 17, .08); }
.contact .ct-grid { position: relative; }
.contact h1, .letter h1 { font-weight: 400; letter-spacing: -.035em; }
.ct-co dd { font-size: 16.5px; }
.letter time, .letter .back { color: #6f7474; }
.letter .strip img { border-radius: 14px; }
.letter .text p { color: #3d4242; }
.letter .sign { font-weight: 500; }
      }

/* Every ad teaches the next one: a lineage of ads, round after round */
.lineage { margin-top: 48px; padding: 28px 32px 30px; background: #fff; border: 1px solid var(--hl); border-radius: 28px; box-shadow: 0 1px 2px rgba(15, 17, 17, .04), 0 50px 90px -70px rgba(15, 17, 17, .45); color: #0f1111; }
.lab-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--hl); }
.lab-title { display: flex; align-items: center; gap: 12px; }
.lab-title img { width: 34px; height: 44px; border-radius: 8px; object-fit: cover; }
.lab-title span { display: flex; flex-direction: column; }
.lab-title b { font-weight: 500; font-size: 15px; }
.lab-title small { font-size: 13px; color: var(--mut); }
.lab-live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: #f3f2f0; font-size: 14px; }
.lab-live .ag { width: 8px; height: 8px; border-radius: 50%; background: #E8336D; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.lab-best { justify-self: end; display: flex; align-items: baseline; gap: 10px; }
.lab-best small { font-size: 13px; color: var(--mut); }
.lab-best b { font-size: 44px; font-weight: 400; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s; }
.lab-scroll { position: relative; }
.lab-rounds { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; padding-top: 26px; }
.lab-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lab-links path { fill: none; stroke: #0f1111; stroke-width: 1.2; stroke-opacity: .35; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .2, 1); }
.lab-links path.on { stroke-dashoffset: 0; }
.rd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.rd-h b { font-weight: 500; }
.rd-h span { font-size: 12.5px; color: var(--mut); }
@keyframes shimmer { to { background-position: -200% 0; } }
.lab-chart { display: block; width: 100%; height: 110px; margin-top: 22px; overflow: visible; }
.lab-chart .lc-line { fill: none; stroke: #E8336D; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lab-chart .gl { stroke: rgba(15, 17, 17, .07); stroke-width: 1; }
.lab-chart circle { fill: #fff; stroke: #E8336D; stroke-width: 2; }
.lab-chart text { font: 500 13px var(--font); fill: #0f1111; text-anchor: middle; }
.lab-chart .ax { font-weight: 400; fill: var(--mut); font-size: 12px; text-anchor: start; }
.lab-foot { display: flex; align-items: baseline; gap: 18px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--hl); }
.lab-insight { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lab-insight small { font-size: 13px; color: var(--mut); }
.lab-insight .it { font-size: 17px; transition: opacity .3s ease; }
.lab-insight .it.swap { opacity: 0; }
.lab-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.lab-steps .stp { opacity: .45; transition: opacity .45s ease; }
.lab-steps li.on .stp { opacity: 1; }
.lab-steps i { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(15, 17, 17, .1); overflow: hidden; margin-bottom: 18px; }
.lab-steps i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: #0f1111; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.lab-steps li.done i::after { transform: scaleX(1); background: rgba(15, 17, 17, .35); }
.lab-steps b { display: block; font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.lab-steps span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: #3d4242; }
@media (max-width: 1000px) {
  .lineage { padding: 20px 18px 22px; border-radius: 22px; }
  .lab-top { grid-template-columns: 1fr auto; }
  .lab-live { display: none; }
  .lab-best b { font-size: 34px; }
  .lab-scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; scrollbar-width: none; }
  .lab-scroll::-webkit-scrollbar { display: none; }
  .lab-rounds { grid-template-columns: repeat(5, 190px); gap: 28px; }
  .lab-chart { width: calc(5 * 190px + 4 * 28px); }
  .lab-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .lab-steps { grid-template-columns: 1fr; gap: 20px; }
  .lab-steps li:not(.on) span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lineage *, .lineage *::before, .lineage *::after { transition: none !important; animation: none !important; }
}

/* Global light pass: the whole site in one language (ground, banner, nav, hero, wall, footer) */
:root { --ground: #fafaf9; --navh: 84px; --hl: rgba(15, 17, 17, .08); --mut: #6f7474; --ink: #0f1111; }
html { scroll-padding-top: 96px; }
.banner { background: #f0efed; color: #0f1111; font-size: 14.5px; border-bottom: 1px solid var(--hl); }
.banner .wrap { min-height: 42px; }
.banner a { color: #0f1111; }
.banner span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: #E8336D; vertical-align: 1px; }
.nav { background: rgba(250, 250, 249, .86); }
.nav .wrap { height: var(--navh); }
.nav.scrolled { box-shadow: 0 1px 0 var(--hl); }
.nav nav { background: #fff; box-shadow: inset 0 0 0 1px var(--hl); }
.btn { background: #0f1111; border-color: #0f1111; border-radius: 999px; }
.btn:hover { background: #000; }
.btn.small { border-radius: 999px; }
.hero { padding: 96px 0 64px; }
.hero .wrap { position: relative; }
.hero h1 { font-weight: 400; font-size: clamp(46px, 6.6vw, 100px); line-height: .98; letter-spacing: -.045em; }
.hero .lead { font-size: 20px; color: #3d4242; margin-top: 26px; }
.hero .closed-note { color: var(--mut); }
.hero .ctas { margin-top: 34px; }
.wall { padding-bottom: 80px; }
.wall .t { border-radius: 16px; }
.wall-line { font-size: 17px; color: var(--mut); margin-top: 40px; }
.wall-line strong { color: #0f1111; }
.el-intro { color: #3d4242; }
.lp-intro, .how-intro { color: #3d4242; }
/* Footer, light */
.site-foot { background: #f3f2f0; color: #0f1111; border-top: 1px solid var(--hl); }
.foot-bg::after { background: linear-gradient(90deg, rgba(243, 242, 240, .96) 10%, rgba(243, 242, 240, .55) 48%, rgba(243, 242, 240, 0) 78%), linear-gradient(transparent 70%, rgba(243, 242, 240, .9)); }
.fr { opacity: .55; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 60px 120px -40px currentColor; }
.th-eyebrow { color: var(--mut); }
.th-title { color: #0f1111; }
.th-text p { color: #3d4242; }
.th-text p:first-child, .th-sig { color: #0f1111; }
.site-foot .btn.light { background: #0f1111; color: #fff; border-color: #0f1111; }
.site-foot .btn.light:hover { background: #000; }
.btn.ghost { color: #0f1111; border-color: rgba(15, 17, 17, .25); }
.btn.ghost:hover { background: rgba(15, 17, 17, .05); border-color: #0f1111; }
.foot-links a { color: #3d4242; }
.foot-links a:hover { color: #0f1111; }
.site-foot .wordmark { color: #0f1111; }
.legal { color: var(--mut); }
@media (max-width: 640px) {
  :root { --navh: 68px; }
  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 38px; }
  .banner { font-size: 13.5px; }
}
.el.story .figures dt { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #0f1111; }
.ht:not(.on) { visibility: hidden; transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.ht.on { visibility: visible; }
#variants .chip, .tab { color: #5c6161; }
@media (max-width: 1000px) {
  .ht p { font-size: 16px; }
  .lab-steps span, .lp-intro, .el-intro { font-size: 16px; }
}
.s-live .phone::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); pointer-events: none; }
.feed-top { z-index: 1; }
.wall { padding-bottom: 56px; }
.wall-line { margin-top: 32px; }
.el-frame { padding-top: 96px; padding-bottom: 104px; }
.el.story .story-grid { padding-top: 104px; padding-bottom: 112px; }
.lineage { margin-top: 44px; }

/* Lineage: data builds up day by day, the winner rises, its three variants are born from it */
.rd { position: relative; z-index: 1; }
.rd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.rd-h b { font-weight: 500; transition: color .4s; }
.rd-s { font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.rd:not(.on) .rd-h b { color: #9a9e9e; }
.rd.live .rd-s::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #2fa05a; vertical-align: 1px; animation: pulse 1.4s ease-in-out infinite; }
.rd-bar { position: relative; display: block; height: 2px; margin: 10px 0 2px; border-radius: 2px; background: rgba(15, 17, 17, .07); overflow: hidden; }
.rd-bar::after { content: ""; position: absolute; inset: 0; background: #0f1111; transform-origin: 0 50%; transform: scaleX(var(--d, 0)); }
.lv { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; min-height: 92px; padding: 9px; margin-top: 10px; border-radius: 16px; background: transparent; border: 1.5px dashed rgba(15, 17, 17, .12); transition: background .5s ease, border-color .5s ease, opacity .6s ease, transform .7s cubic-bezier(.2, .9, .2, 1), box-shadow .6s ease; }
.lv img { width: 46px; height: 72px; border-radius: 9px; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.lv p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; opacity: 0; transition: opacity .4s ease; }
.lv p b { font-size: 24px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.lv p small { font-size: 12px; color: #5f6464; }
.lv p span { width: 100%; font-size: 12.5px; color: #5f6464; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv em { margin-left: auto; align-self: center; padding: 2px 8px; border-radius: 999px; font: 500 11px/1.4 var(--font); font-style: normal; opacity: 0; transform: scale(.85); transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.4, .3, 1); }
.lv.in { background: #f6f5f3; border: 1.5px solid transparent; }
.lv.in img, .lv.in p { opacity: 1; }
.lv.won { z-index: 2; background: #fff; border-color: #0f1111; transform: scale(1.04); box-shadow: 0 26px 44px -26px rgba(15, 17, 17, .5); }
.lv.won em { opacity: 1; transform: none; background: #0f1111; color: #fff; }
.lv.lost { opacity: .4; transform: scale(.97); }
.lv.lost em { opacity: 1; transform: none; background: #e6e5e2; color: #5f6464; }
.lv.ghost i { width: 46px; height: 72px; border-radius: 9px; background: #ecebe8; opacity: 0; transition: opacity .4s; }
.lv.ghost p { display: grid; gap: 8px; }
.lv.ghost p b, .lv.ghost p span { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ecebe8, #f6f5f3, #ecebe8); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.lv.ghost p b { width: 60%; height: 16px; }
.lv.ghost.in i { opacity: 1; }
@keyframes shimmer { to { background-position: -200% 0; } }
.fly { position: absolute; z-index: 5; border-radius: 9px; object-fit: cover; pointer-events: none; box-shadow: 0 18px 34px -16px rgba(15, 17, 17, .55); }
.lineage.reset .rd, .lineage.reset .lab-chart { opacity: 0; transition: opacity .6s ease; }
.lineage .rd, .lineage .lab-chart { transition: opacity .6s ease; }
.lv em { margin-left: 0; }
.lv.won p small, .lv.lost p small { display: none; }
.lv:not(.won) { box-shadow: none; }
.wall-line .fict { display: block; margin-top: 8px; font-size: 13.5px; color: var(--mut); }
.lab-foot { justify-content: space-between; flex-direction: row-reverse; }
.lab-note { font-size: 13px; color: var(--mut); white-space: nowrap; }
@media (max-width: 1000px) { .lab-foot { flex-direction: column-reverse; gap: 10px; } .lab-note { white-space: normal; } }
.rd:not(.on) .rd-h b { color: #6f7474; }

/* Footer: one master, declined. On a fixed 520×360 stage (scaled by --fs): the three frames sit as the
   mark, merge into one master whose picture shows through, fan out as 1:1, 4:5 and 9:16 (the same ad,
   recropped), then fold back into the mark. The pointer tilts the stage. */
.fan { position: absolute; right: 4%; top: 48px; left: auto; bottom: auto; width: 520px; height: 360px; transform-origin: 100% 0; transform: scale(var(--fs, 1)) perspective(1400px) rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 8deg)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); opacity: .9; }
.fr, .fr.r9, .fr.r4, .fr.r1 { position: absolute; left: 0; bottom: 30px; top: auto; height: 280px; margin: 0; background: #ddd; border-radius: 16px; overflow: hidden; transform-origin: 0 100%; opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 40px 70px -40px rgba(15, 17, 17, .45); animation: decline 16s cubic-bezier(.65, 0, .25, 1) infinite; }
.fr.r9 { width: 157.5px; --c: 255, 193, 94; --lx: 294px; --ls: 1; --gx: 229px; --gs: .9; --sx: 395px; --ss: .82; --sr: 5deg; z-index: 1; }
.fr.r4 { width: 224px; --c: 255, 122, 69; --lx: 239px; --ls: .758; --gx: 199px; --gs: .9; --sx: 208px; --ss: .82; --sr: 0deg; z-index: 2; }
.fr.r1 { width: 280px; --c: 232, 51, 109; --lx: 184px; --ls: .606; --gx: 174px; --gs: .9; --sx: 5px; --ss: .82; --sr: -5deg; z-index: 3; }
.fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr::after { content: ""; position: absolute; inset: 0; background: rgb(var(--c)); animation: tint 16s cubic-bezier(.65, 0, .25, 1) infinite; }
.fr.r4, .fr.r4::after { animation-delay: -.1s; }
.fr.r1, .fr.r1::after { animation-delay: -.2s; }
@keyframes decline {
  0%, 14% { transform: translateX(var(--lx)) scale(var(--ls)); }
  26%, 34% { transform: translateX(var(--gx)) scale(var(--gs)); }
  48% { transform: translateX(var(--sx)) scale(var(--ss)) rotate(var(--sr)); }
  61% { transform: translate(var(--sx), -10px) scale(var(--ss)) rotate(var(--sr)); }
  74% { transform: translateX(var(--sx)) scale(var(--ss)) rotate(var(--sr)); }
  88%, 100% { transform: translateX(var(--lx)) scale(var(--ls)); }
}
@keyframes tint {
  0%, 18% { opacity: 1; }
  30%, 74% { opacity: .22; }
  88%, 100% { opacity: 1; }
}
.foot-bg::after { background: linear-gradient(90deg, rgba(243, 242, 240, .9) 20%, rgba(243, 242, 240, .3) 48%, rgba(243, 242, 240, 0) 62%), linear-gradient(transparent 50%, rgba(243, 242, 240, .85) 64%); }
@media (max-width: 1000px) { .fan { right: 2%; top: 24px; opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .fr, .fr::after { animation: none !important; }
  .fr { transform: translateX(var(--sx)) scale(var(--ss)) rotate(var(--sr)); }
  .fr::after { opacity: .22; }
}
.fan { right: 2%; }
.fr.r1 { --sx: 64px; }
.fr.r4 { --sx: 232px; }
.fr.r9 { --sx: 392px; }
.fan { right: 3.5%; top: 64px; }
@media (max-width: 640px) {
  .site-foot { padding-top: 230px; }
  .fan { top: 28px; right: 8%; opacity: 1; }
}
.fr, .fr.r9, .fr.r4, .fr.r1 { box-shadow: 0 40px 70px -40px rgba(15, 17, 17, .45); }
.wall-line { margin-top: 24px; } .wall-line .fict { margin-top: 0; }

/* Footer, reorganised: the note on the left, the animation in its own panel on the right */
.site-foot { padding-top: 112px; }
.thanks { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: stretch; padding-bottom: 104px; }
.th-copy { display: flex; flex-direction: column; }
.th-title { margin-top: 14px; font-size: clamp(64px, 8.6vw, 136px); line-height: .9; }
.th-text { margin-top: 40px; }
.th-text p { font-size: clamp(17px, 1.4vw, 20px); max-width: 32em; }
.th-side { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.th-sig { margin: 0; font-size: 18px; }
.th-sig::before { display: inline-block; vertical-align: middle; width: 28px; margin: 0 12px 2px 0; }
.th-stage { position: relative; margin: 0; min-height: 440px; border-radius: 32px; background: #e9e7e3; overflow: hidden; }
.th-stage .fan { position: absolute; left: 50%; top: 46%; right: auto; bottom: auto; width: 520px; height: 360px; margin: -180px 0 0 -260px; transform-origin: 50% 50%; transform: scale(var(--fs, 1)) perspective(1400px) rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 8deg)); opacity: 1; }
.th-stage figcaption { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-size: 14px; color: var(--mut); }
.foot-links { padding-top: 32px; border-top: 1px solid var(--hl); }
.foot-bar { margin-top: 28px; }
@media (max-width: 1000px) {
  .thanks { grid-template-columns: 1fr; gap: 40px; padding-bottom: 72px; }
  .th-stage { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .site-foot { padding-top: 64px; }
  .th-stage { aspect-ratio: 1; border-radius: 24px; }
  .th-side { flex-direction: column; align-items: flex-start; gap: 18px; }
  .th-ctas { width: 100%; }
}
.foot-links { border-top: 0; padding-top: 0; } .th-stage .fan { margin-left: -292px; }