/* klipai.id — tokens from the KlipAI brand book.
   One memorable thing: the hero "clip machine". Everything else stays quiet. */
:root {
  --ink: #17150f;
  --ink-2: #211e17;
  --ink-3: #2b2822;
  --paper: #faf9f5;
  --line: #e6e2d6;
  --muted: #5f5a4d;
  --on-dark: #f4f1e8;
  --on-dark-2: #ada797;
  --kuning: #ffb81c;
  --kuning-soft: #ffe7ad;
  --kuning-ink: #8a5b00;
  --live: #d92d20;
  --emph: #ff6b4a;
  --video: #0e0d0a;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: 16px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--on-dark); font: 400 16px/26px var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--kuning); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.h2 { font: 900 clamp(34px, 5.2vw, 60px)/.98 var(--font-display); font-stretch: 118%; letter-spacing: -.02em; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 10px; border: 0; font: 700 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: transform .15s ease-out; }
.btn--primary { background: var(--kuning); color: var(--ink); box-shadow: 0 3px 0 #000; }
.btn--primary:hover { transform: translateY(-2px); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.btn--big { min-height: 56px; padding: 14px 28px; font-size: 17px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(23, 21, 15, .86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.nav__logo img { height: 28px; width: auto; }
.nav__links { display: none; gap: 28px; font-weight: 600; font-size: 15px; }
.nav__links a { text-decoration: none; color: var(--on-dark-2); }
.nav__links a:hover { color: var(--on-dark); }
@media (min-width: 820px) { .nav__links { display: flex; } }
.nav .btn { min-height: 38px; padding: 6px 16px; font-size: 14px; }

/* ---------- hero ---------- */
.hero { padding-block: 56px 72px; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(60% 60% at 70% 30%, rgba(255,184,28,.16), transparent 70%); pointer-events: none; }
.hero__title { position: relative; font: 900 clamp(56px, 11.5vw, 148px)/.86 var(--font-display); font-stretch: 122%; letter-spacing: -.035em; }
.sticker { display: inline-block; background: var(--kuning); color: var(--ink); padding: .02em .14em .06em; border-radius: .12em; box-shadow: 0 .07em 0 #000; transform: rotate(-2deg); margin-top: .06em; }
.hero__lead { position: relative; max-width: 520px; margin: 28px 0 0; font-size: 19px; line-height: 29px; color: var(--on-dark-2); }

/* the machine: link → scan → moments → clips */
.machine { position: relative; margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.urlbar { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 620px; margin-inline: auto; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--ink-2); border: 1px solid rgba(255,255,255,.12); font: 500 15px/1 var(--font-mono); color: var(--on-dark); }
.urlbar__icon { width: 26px; height: 18px; border-radius: 5px; background: var(--live); color: #fff; display: grid; place-items: center; font-size: 9px; flex: none; }
.urlbar__text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.urlbar__caret { width: 2px; height: 18px; background: var(--kuning); animation: caret 1s steps(1) infinite; flex: none; }
.urlbar__btn { margin-left: auto; padding: 9px 14px; border-radius: 9px; background: var(--kuning); color: var(--ink); font: 700 13px var(--font-sans); white-space: nowrap; transition: transform .15s; flex: none; }
.machine.is-go .urlbar__btn { transform: scale(.94); }
@keyframes caret { 50% { opacity: 0; } }

.source { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; max-width: 620px; margin-inline: auto; background: var(--video); box-shadow: 0 30px 80px rgba(0,0,0,.5); opacity: .35; transition: opacity .5s; }
.source__video { width: 100%; height: 100%; }
.machine.is-go .source { opacity: 1; }
.scanline { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--kuning); box-shadow: 0 0 24px 8px rgba(255,184,28,.45); opacity: 0; }
.machine.is-scan .scanline { opacity: 1; animation: scan 2.6s cubic-bezier(.5,0,.5,1) forwards; }
@keyframes scan { from { left: 0; } to { left: 100%; } }
.source__time { position: absolute; right: 12px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.6); font-size: 12px; }

.timeline { position: relative; width: 100%; max-width: 980px; margin-inline: auto; height: 64px; border-radius: 12px; background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.bars { position: absolute; inset: 10px 8px; display: flex; align-items: center; gap: 2px; }
.bars span { flex: 1; background: #3b372e; border-radius: 2px; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--on-dark); left: 0; opacity: 0; }
.machine.is-scan .playhead { opacity: 1; animation: scan 2.6s cubic-bezier(.5,0,.5,1) forwards; }
.moment { position: absolute; top: 6px; bottom: 6px; left: var(--l); width: var(--w); border-radius: 7px; background: rgba(255,184,28,.28); border: 2px solid var(--kuning); transform: scaleY(0); transform-origin: bottom; display: grid; place-items: center; }
.moment b { font: 900 14px var(--font-display); color: var(--kuning); text-shadow: 0 1px 0 #000; }
.machine.is-found .moment { transform: scaleY(1); transition: transform .35s cubic-bezier(.3,1.6,.5,1) var(--d); }

.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 2.5vw, 28px); padding-top: 12px; min-height: 420px; }
.phone { position: relative; margin: 0; width: clamp(140px, 22vw, 230px); aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: var(--video); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.07); opacity: 0; transform: translateY(80px) scale(.85); }
.phone--big { width: clamp(160px, 25vw, 262px); }
.machine.is-clips .phone { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); transition: transform .7s cubic-bezier(.2,1.3,.4,1) var(--d), opacity .3s var(--d); }
.phone > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone .half { height: 50%; }
.phone .half--b { top: 50%; }
.phone--big::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #000; z-index: 1; }
@media (max-width: 640px) { .phone:not(.phone--big) { display: none; } .phone--big { width: 230px; } .phones { min-height: 430px; } }

.hook { position: absolute; left: 9%; right: 9%; top: 8%; z-index: 2; padding: 6px 8px; border-radius: 7px; background: var(--kuning); color: var(--ink); box-shadow: 0 3px 0 #000; transform: rotate(-1.5deg); font: 900 clamp(10px, 1.2vw, 13px)/1.2 var(--font-display); font-stretch: 112%; text-align: center; text-transform: uppercase; }
.score { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--kuning); border: 2px solid var(--kuning); font: 900 13px var(--font-display); }
.cap { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 20%; margin: 0; text-align: center; font: 900 clamp(18px, 2.3vw, 26px)/1.1 var(--font-display); font-stretch: 112%; text-transform: uppercase; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; }
.cap--mid { bottom: auto; top: 44%; }
.cap span { display: inline-block; margin: 0 .08em; transition: transform .12s ease-out, color .12s; }
.cap .on { color: var(--kuning); transform: scale(1.22); }
.cap .em { color: var(--emph); }
.cap .emoji { display: block; -webkit-text-stroke: 0; font-size: 1.3em; margin-bottom: .1em; }

.signup { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; max-width: 560px; }
.signup input[type=email] { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: var(--ink-2); color: var(--on-dark); font: 400 17px var(--font-sans); }
.signup input::placeholder { color: var(--on-dark-2); }
.signup__msg { flex-basis: 100%; min-height: 22px; font-size: 14px; font-weight: 600; }
.signup__msg--ok { color: #6ee7a8; }
.signup__msg--err { color: #ff9a8b; }

/* ---------- before / after ---------- */
.ba { background: var(--paper); color: var(--ink); padding-block: 88px; }
.ba__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .ba__in { grid-template-columns: .8fr 1.2fr; } }
.ba__copy p { color: var(--muted); font-size: 18px; line-height: 29px; max-width: 420px; margin: 18px 0 0; }
.ba__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: var(--video); box-shadow: 0 30px 70px rgba(23,21,15,.25); user-select: none; }
.ba__raw, .ba__clip { position: absolute; inset: 0; }
.ba__raw svg { width: 100%; height: 100%; filter: saturate(.75) brightness(.85); }
.ba__clip { clip-path: inset(0 0 0 var(--pos)); background: radial-gradient(80% 80% at 50% 50%, #2a2620, #0e0d0a); display: grid; place-items: center; }
.ba__phone { position: relative; height: 86%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.ba__phone svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__phone .cap { font-size: clamp(14px, 2vw, 22px); }
.ba__phone .hook { font-size: clamp(9px, 1vw, 12px); }
.ba__tag { position: absolute; left: 14px; top: 14px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 700; z-index: 3; }
.ba__tag--r { left: auto; right: 14px; background: var(--kuning); color: var(--ink); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: var(--kuning); pointer-events: none; z-index: 3; }
.ba__handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--kuning); color: var(--ink); display: grid; place-items: center; font-weight: 900; box-shadow: 0 4px 0 #000; }
.ba__range:focus-visible + .ba__handle::after { outline: 3px solid var(--ink); }

/* ---------- feature tiles ---------- */
.feats { padding-block: 96px; }
.tiles { display: grid; gap: 14px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tile--wide { grid-column: span 2; } }
.tile { border-radius: 20px; background: var(--ink-2); border: 1px solid rgba(255,255,255,.07); overflow: hidden; display: flex; flex-direction: column; }
.tile h3 { padding: 18px 22px 22px; font: 800 20px/1.15 var(--font-display); font-stretch: 112%; }
.art { position: relative; height: 210px; overflow: hidden; background: var(--video); }
.art > svg { width: 100%; height: 100%; }
.art--caption { display: grid; place-items: center; background: radial-gradient(70% 90% at 50% 60%, #2e3a45, #0e0d0a); }
.art--caption .cap { position: static; font-size: clamp(26px, 3.6vw, 40px); }
.art--follow .frame { position: absolute; top: 4%; bottom: 4%; width: 17%; border: 3px solid var(--kuning); border-radius: 10px; box-shadow: 0 0 0 999px rgba(14,13,10,.55); left: 12%; animation: follow 6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes follow { 0%, 40% { left: 12%; } 50%, 90% { left: 70%; } 100% { left: 12%; } }
.art--split { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; background: #000; padding-inline: 27%; }
.art--split svg { width: 100%; height: 100%; }
.art--gap { display: grid; place-items: center; background: #14120d; }
.wave { display: flex; align-items: center; gap: 3px; height: 110px; width: 86%; }
.wave span { flex: 1; border-radius: 2px; background: var(--kuning); transition: flex .5s, opacity .5s, margin .5s; }
.wave span.gap { background: #3b372e; }
.wave.is-cut span.gap { flex: 0 0 0; opacity: 0; margin: 0 -1.5px; }
.art--queue { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 22px; background: #14120d; font: 500 13px var(--font-mono); }
.q { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--ink-3); color: var(--on-dark-2); white-space: nowrap; overflow: hidden; }
.q i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #5f5a4d; flex: none; transition: all .3s; }
.q.done { color: var(--on-dark); }
.q.done i { background: var(--kuning); border-color: var(--kuning); box-shadow: inset 0 0 0 3px var(--ink-3); }
.art--score { display: grid; place-items: center; background: #14120d; }
.art--score svg { width: 64%; }
.gauge { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.3,0,.2,1); }
.tile.is-in .gauge { stroke-dashoffset: 6; }
.gauge__n { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font: 900 48px var(--font-display); font-stretch: 118%; color: var(--kuning); }
.marquee { height: 210px; display: flex; align-items: center; overflow: hidden; background: var(--kuning); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 14px; animation: marquee 30s linear infinite; padding-left: 14px; }
.marquee span { flex: none; padding: 14px 26px; border-radius: 14px; background: var(--ink); color: var(--kuning); font: 900 30px var(--font-display); font-stretch: 118%; }
@keyframes marquee { to { transform: translateX(-50%); } }
.art--caption2 { display: grid; place-items: center; background: linear-gradient(160deg, #23303a, #0e0d0a); padding: 22px; }
.post { width: 100%; padding: 16px 18px; border-radius: 14px; background: #fff; color: var(--ink); font-weight: 600; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.post em { font-style: normal; color: #1d6fd1; }
.art--local { display: grid; place-items: center; background: #14120d; }
.laptop { width: 64%; aspect-ratio: 16 / 10; border-radius: 10px 10px 4px 4px; background: #2b2822; border: 6px solid #3b372e; position: relative; display: grid; place-items: center; }
.laptop::after { content: ""; position: absolute; left: -14%; right: -14%; bottom: -16px; height: 10px; border-radius: 0 0 10px 10px; background: #3b372e; }
.laptop__bar { width: 70%; height: 10px; border-radius: 99px; background: #3b372e; overflow: hidden; position: relative; }
.laptop__bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--kuning); border-radius: 99px; animation: work 2.2s ease-in-out infinite; }
@keyframes work { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.nocloud { position: absolute; top: 18px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--ink-3); color: var(--kuning); font-size: 13px; font-weight: 700; }

/* ---------- pricing ---------- */
.prices { background: var(--kuning); color: var(--ink); padding-block: 96px; }
.pcards { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 820px) { .pcards { grid-template-columns: repeat(3, 1fr); } }
.pcard { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 20px; background: var(--paper); box-shadow: 0 5px 0 var(--ink); }
.pcard--pro { background: var(--ink); color: var(--on-dark); transform: rotate(-1.2deg); }
.pcard__name { font-weight: 700; font-size: 17px; }
.pcard__amt { font: 900 clamp(44px, 6vw, 64px)/1 var(--font-display); font-stretch: 118%; letter-spacing: -.02em; }
.pcard__amt small { font: 600 16px var(--font-sans); letter-spacing: 0; opacity: .7; }
.pcard__note { color: var(--muted); }
.pcard--pro .pcard__note { color: var(--on-dark-2); }
.pay { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pay span { padding: 8px 16px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 700; }

/* ---------- faq ---------- */
.faq { padding-block: 88px; background: var(--paper); color: var(--ink); }
.faq__in { display: grid; gap: 32px; }
@media (min-width: 900px) { .faq__in { grid-template-columns: .7fr 1.3fr; } }
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 900 24px var(--font-display); color: var(--kuning-ink); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; color: var(--muted); }

/* ---------- end CTA ---------- */
.end { padding-block: 110px; position: relative; overflow: hidden; }
.end::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,184,28,.18), transparent 70%); }
.end__in { position: relative; display: grid; gap: 36px; align-items: end; }
@media (min-width: 900px) { .end__in { grid-template-columns: 1fr 1fr; } }
.end__title { font: 900 clamp(56px, 10vw, 128px)/.86 var(--font-display); font-stretch: 122%; letter-spacing: -.035em; }
.signup--end { margin-top: 0; }

footer { border-top: 1px solid rgba(255,255,255,.08); padding-block: 32px; color: var(--on-dark-2); font-size: 14px; background: var(--ink); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.foot a { color: var(--on-dark-2); text-decoration: none; }
.foot a:hover { color: var(--on-dark); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- legal pages ---------- */
body:has(.legal) { background: var(--paper); color: var(--ink); color-scheme: light; }
.legal { max-width: 760px; padding-block: 56px 88px; }
.legal h1 { font: 900 44px/1 var(--font-display); font-stretch: 112%; }
.legal .meta { color: var(--muted); margin: 12px 0 32px; }
.legal h2 { font: 800 22px/28px var(--font-display); font-stretch: 112%; margin: 36px 0 10px; }
.legal p, .legal li { color: #2f2b22; }
.legal ul { padding-left: 20px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal td, .legal th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tablewrap { overflow-x: auto; }
.note { padding: 14px 16px; border-radius: 10px; background: var(--kuning-soft); }

/* ---------- scroll story: 16:9 → face → 9:16 → clips (driven by app.js via CSS vars) ---------- */
.story { position: relative; height: 420vh; background: linear-gradient(var(--ink), var(--video) 18%, var(--video) 82%, var(--ink)); }
.story__sticky { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); display: flex; align-items: center; overflow: hidden; }
.story__in { width: 100%; display: grid; gap: 20px; align-items: center; }
@media (min-width: 940px) { .story__in { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { position: relative; padding-left: 42px; font: 800 clamp(17px, 1.7vw, 22px)/1.2 var(--font-display); font-stretch: 112%; color: rgba(244,241,232,.26); transition: color .25s, transform .25s; }
.steps li::before { content: attr(data-n); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; font-size: 14px; }
.steps li.on { color: var(--on-dark-2); }
.steps li.now { color: var(--kuning); transform: translateX(6px); }
@media (max-width: 939px) { .steps { min-height: 54px; align-content: start; } .steps li { display: none; } .steps li.now { display: block; transform: none; } }

.story__view { perspective: 1500px; display: grid; place-items: center; }
.st { --s: 1; position: relative; width: min(100%, calc((100svh - 64px - 150px) * 16 / 9)); aspect-ratio: 16 / 9; transform-style: preserve-3d; }
.st__stage { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: var(--video); box-shadow: 0 40px 100px rgba(0,0,0,.6); will-change: transform, clip-path; }
.st__video { width: 100%; height: 100%; }
.st__crop { position: absolute; top: 0; bottom: 0; left: var(--cx, 4.375%); width: 31.625%; border: 3px solid var(--kuning); border-radius: 14px; container-type: size; opacity: var(--crop, 0); box-shadow: 0 0 0 200vmax rgba(14,13,10,calc(var(--crop, 0) * .62)); }
.st__crop .hook { font-size: 5.2cqw; opacity: var(--caps, 0); transform: rotate(-1.5deg) translateY(calc((1 - var(--caps, 0)) * -20%)); }
.st__crop .cap { font-size: 10cqw; -webkit-text-stroke-width: 1.6cqw; opacity: var(--caps, 0); }
.st__face { position: absolute; left: var(--fx, 20.6%); top: 47.5%; width: 16%; height: 33%; transform: translate(-50%, -50%); border: 2px dashed #fff; border-radius: 14px; opacity: var(--face, 0); }
.st__face i { position: absolute; left: -2px; top: -26px; padding: 2px 8px; border-radius: 6px; background: #fff; color: var(--ink); font: 700 12px/18px var(--font-sans); font-style: normal; white-space: nowrap; }
.st__time { position: absolute; right: 12px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.6); font-size: 12px; opacity: calc(1 - var(--m, 0) * 2); }
.st__side { position: absolute; left: 50%; top: 50%; margin: 0; height: calc(100% * var(--s) * .86); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--video); box-shadow: 0 30px 70px rgba(0,0,0,.6); container-type: size; opacity: var(--side, 0); transform: translate(-50%, -50%) translateY(var(--sy, 0px)) translateX(var(--sx, 0px)) translateZ(var(--sz, -300px)) rotateY(var(--sr, 0deg)); }
.st__side svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st__side .hook { font-size: 5.2cqw; }
.story--static { height: auto; padding-block: 72px; }
.story--static .story__sticky { position: static; height: auto; }

/* ---------- example clips per genre ---------- */
.reels { background: var(--paper); color: var(--ink); padding-block: 88px; }
.reels__row { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 32px); perspective: 1200px; }
@media (min-width: 900px) { .reels__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reel { margin: 0; }
.reel:nth-child(even) { transform: translateY(36px); }
.reel__phone { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: var(--video); box-shadow: 0 26px 60px rgba(23,21,15,.28); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.reel__phone > svg, .reel__phone > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__phone .half { height: 50%; }
.reel__phone .half--b { top: 50%; }
.reel[data-genre="gaming"] .reel__phone::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #000; z-index: 1; }
.reel__art { animation: pan 9s ease-in-out infinite alternate; transform-origin: center; }
@keyframes pan { from { transform: scale(1.14) translateX(-3.5%); } to { transform: scale(1.14) translateX(3.5%); } }
.reel.is-real .hook, .reel.is-real .cap, .reel.is-real .score, .reel.is-real .reel__phone > svg, .reel.is-real .reel__phone::after { display: none; }
.reel__sound { display: none; position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(23,21,15,.78); color: var(--on-dark); font: 700 12px/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
.reel.is-real .reel__sound { display: block; }
.reel__sound[aria-pressed="true"] { background: var(--kuning); color: var(--ink); }
.reel.is-real video { cursor: pointer; }
.reel figcaption { margin-top: 14px; font: 900 22px/1 var(--font-display); font-stretch: 115%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}