/* Layout: a creator brief for one vertical video. Annotated phone first, then rate card + calculator,
   steps, banner spec, rules. Left-aligned and asymmetric; the harlequin diamond comes from the jester logo. */
:root{
  color-scheme: dark;
  --ink:#0d0b14;          /* page */
  --plum:#151120;         /* panels */
  --plum-2:#1d1730;       /* raised */
  --line:#2a2340;
  --text:#f2edfb;
  --muted:#a69bbd;
  --faint:#6f6688;
  --ghost:#38314d;
  --violet:#a978ff;       /* brand */
  --violet-hi:#bb94ff;
  --violet-ink:#160d2b;
  --gold:#f6c453;         /* money only */
  --ok:#3fd3a4;
  --no:#ff7a8a;

  --f-display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --f-body:"Onest","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --gutter:16px;
  --r-panel:24px;
  --r-tile:16px;
  --harlequin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='72' viewBox='0 0 44 72'%3E%3Cpath d='M22 0 44 36 22 72 0 36Z' fill='%23a978ff' fill-opacity='.09'/%3E%3C/svg%3E");
  --harlequin-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='36' viewBox='0 0 22 36'%3E%3Cpath d='M11 0 22 18 11 36 0 18Z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E");
}
@media (min-width:768px){ :root{ --gutter:32px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) }
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:50; background:var(--ink) }
img{ max-width:100%; display:block }
a{ color:inherit }
::selection{ background:var(--violet); color:var(--violet-ink) }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:8px }
[hidden]{ display:none !important }
h1,h2,h3{ text-wrap:balance }
p{ text-wrap:pretty }

.wrap{
  max-width:1200px; margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:58px; padding:0 28px; border-radius:999px;
  background:var(--violet); color:var(--violet-ink);
  font:600 17px/1 var(--f-body); text-decoration:none; white-space:nowrap;
  transition:background .15s;
}
.btn:hover{ background:var(--violet-hi) }
.btn svg{ width:20px; height:20px; fill:currentColor; flex:none }
.btn--sm{ height:42px; padding:0 20px; font-size:15px }
.btn--sm svg{ width:17px; height:17px }
.btn svg.arr{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s }
.btn:hover svg.arr{ transform:translateX(3px) }
.more{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text); font-weight:500; text-decoration:none;
  padding-block:6px; border-bottom:1px solid var(--ghost);
  transition:border-color .15s, color .15s;
}
.more:hover{ border-color:var(--violet); color:var(--violet-hi) }
.more svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2 }

/* ---------- header ---------- */
.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:rgba(13,11,20,.78);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.top .wrap{ display:flex; align-items:center; gap:32px; height:68px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none }
.brand img{ width:36px; height:36px; border-radius:10px }
.brand b{ font:400 18px/1 var(--f-display); letter-spacing:.01em }
.brand small{ font:500 15px/1 var(--f-body); color:var(--muted) }
.nav{ display:flex; gap:26px; margin-left:auto }
.nav a{ color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; transition:color .15s }
.nav a:hover{ color:var(--text) }
.top .btn{ flex:none }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--harlequin); background-size:44px 72px;
  -webkit-mask-image:radial-gradient(55% 65% at 76% 46%, #000 0%, transparent 78%);
          mask-image:radial-gradient(55% 65% at 76% 46%, #000 0%, transparent 78%);
}
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:40px; align-items:center;
  padding-block:64px 88px;
}
h1{
  margin:0;
  font:400 clamp(36px, 5.3vw, 70px)/1.04 var(--f-display); letter-spacing:-.005em;
}
.lead{ margin:26px 0 0; max-width:33em; color:var(--muted); font-size:clamp(17px, 1.55vw, 20px); line-height:1.55 }
.lead strong{ color:var(--text); font-weight:600 }
.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:36px }
.facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin:52px 0 0; max-width:580px; border-top:1px solid var(--line);
}
.facts > div{ padding:18px 14px 0 0; min-width:0 }
.facts > div + div{ padding-left:18px; border-left:1px solid var(--line) }
.facts dt{ font:600 clamp(18px, 2vw, 24px)/1.2 var(--f-body); font-variant-numeric:tabular-nums; white-space:nowrap }
.facts dt.money{ color:var(--gold) }
.facts dd{ margin:8px 0 0; color:var(--muted); font-size:13.5px; line-height:1.4 }

/* phone: a TikTok-style feed screen with the real CrazyGift banner in the middle of the video.
   Everything is sized in cqw (1% of the .device width) so the mockup scales as one piece. */
.stage{ display:flex; justify-content:center }
.device{ position:relative; width:min(300px, 64vw); margin-right:132px; container-type:inline-size }
.phone{
  position:relative; aspect-ratio:9/19.3; padding:1.1cqw; border-radius:16cqw;
  background:linear-gradient(150deg, #5d566f 0%, #29252f 20%, #16131b 50%, #2b2734 80%, #645c78 100%);
  box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.14), 0 40px 70px -36px rgba(0,0,0,.9);
}
/* side buttons: volume up/down on the left, power on the right */
.phone::before,.phone::after{ content:""; position:absolute; width:1.1cqw; border-radius:1cqw; background:#3b3646 }
.phone::before{ left:-.9cqw; top:22%; height:7%; box-shadow:0 17cqw 0 #3b3646 }
.phone::after{ right:-.9cqw; top:27%; height:11% }
.bezel{ height:100%; padding:2.3cqw; border-radius:15cqw; background:#030205 }
.screen{ position:relative; height:100%; border-radius:12.8cqw; overflow:hidden; isolation:isolate; background:#000; color:#fff; font-family:var(--f-body) }
.screen::before{ content:""; position:absolute; z-index:9; top:2.6cqw; left:50%; width:29cqw; height:8.6cqw; margin-left:-14.5cqw; border-radius:5cqw; background:#000 }
.screen::after{ content:""; position:absolute; z-index:9; bottom:1.5cqw; left:50%; width:34cqw; height:1.1cqw; margin-left:-17cqw; border-radius:1cqw; background:#fff }
.screen svg{ display:block; flex:none }

/* the creator's video: a symbolic, out-of-focus gameplay frame */
.vid{ position:absolute; inset:0 0 17cqw; overflow:hidden; background:radial-gradient(120% 70% at 50% 42%, #3d2577 0%, #170f2c 60%, #09070f 100%) }
.vid img{ position:absolute; border-radius:22%; filter:blur(.8cqw); opacity:.5 }
.vid img:nth-child(1){ width:64cqw; left:-16cqw; top:14%; rotate:-14deg }
.vid img:nth-child(2){ width:52cqw; right:-16cqw; top:52%; rotate:12deg; opacity:.45 }
.vid img:nth-child(3){ width:36cqw; left:4cqw; bottom:7%; rotate:9deg; opacity:.22 }
.vid::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.5), transparent 20%, transparent 58%, rgba(0,0,0,.6)) }

.tt-status{ position:absolute; z-index:8; top:4.4cqw; left:10cqw; right:7cqw; display:flex; justify-content:space-between; align-items:center; font:600 4cqw/1 var(--f-body) }
.tt-status i{ display:flex; align-items:center; gap:1.3cqw }
.tt-status svg{ height:3cqw; width:auto; fill:#fff }
.tt-top{ position:absolute; z-index:5; top:16cqw; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:5cqw; font:600 4.4cqw/1 var(--f-body); color:rgba(255,255,255,.62); text-shadow:0 1px 2px rgba(0,0,0,.3) }
.tt-top b{ position:relative; color:#fff; font-weight:700 }
.tt-top b::after{ content:""; position:absolute; left:50%; bottom:-2.3cqw; width:7cqw; height:.8cqw; margin-left:-3.5cqw; border-radius:1cqw; background:#fff }
.tt-top svg{ position:absolute; top:50%; translate:0 -50%; width:6.2cqw; height:6.2cqw; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.tt-top .tt-live{ left:5cqw } .tt-top .tt-search{ right:5cqw }

.tt-rail{ position:absolute; z-index:5; right:2.6cqw; bottom:20.5cqw; display:flex; flex-direction:column; align-items:center; gap:3cqw; font:600 3cqw/1 var(--f-body); text-shadow:0 1px 2px rgba(0,0,0,.45) }
.tt-rail > span{ display:flex; flex-direction:column; align-items:center; gap:1cqw }
.tt-rail svg{ width:8.4cqw; height:8.4cqw; fill:#fff; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35)) }
.tt-rail .tt-like svg{ fill:#fe2c55 }
.tt-av{ position:relative; margin-bottom:2.4cqw }
.tt-av img{ width:11cqw; height:11cqw; border-radius:50%; border:.45cqw solid #fff; object-fit:cover; background:#2a2140 }
.tt-av i{ position:absolute; left:50%; bottom:-2.3cqw; width:4.8cqw; height:4.8cqw; margin-left:-2.4cqw; border-radius:50%; background:#fe2c55; font:700 4cqw/4.6cqw var(--f-body); font-style:normal; text-align:center }
.tt-disc{ width:9.6cqw; height:9.6cqw; border-radius:50%; display:grid; place-items:center; background:radial-gradient(#3a3a3a 0 30%, #161616 31% 100%); animation:spin 6s linear infinite }
.tt-disc img{ width:5.6cqw; height:5.6cqw; border-radius:50% }
@keyframes spin{ to{ rotate:360deg } }

.tt-cap{ position:absolute; z-index:5; left:3.6cqw; right:17cqw; bottom:20.5cqw; display:grid; gap:1.5cqw; font:400 3.5cqw/1.35 var(--f-body); text-shadow:0 1px 2px rgba(0,0,0,.45) }
.tt-cap b{ font-weight:700; font-size:3.9cqw }
.tt-cap p{ margin:0 }
.tt-cap em{ font-style:normal; font-weight:700 }
.tt-music{ display:flex; align-items:center; gap:1.5cqw; min-width:0; white-space:nowrap }
.tt-music svg{ width:3.2cqw; height:3.2cqw; fill:#fff }
.tt-music span{ overflow:hidden; text-overflow:ellipsis }

.tt-progress{ position:absolute; z-index:5; left:0; right:0; bottom:17cqw; height:.55cqw; background:rgba(255,255,255,.22) }
.tt-progress i{ display:block; height:100%; background:rgba(255,255,255,.85); transform-origin:left; animation:fill 12s linear infinite }

.tt-nav{
  position:absolute; z-index:5; left:0; right:0; bottom:0; height:17cqw; padding:1.9cqw 1.5cqw 0;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); align-items:start; background:#000;
  font:500 2.4cqw/1 var(--f-body); color:rgba(255,255,255,.62)
}
.tt-nav > span{ display:flex; flex-direction:column; align-items:center; gap:1cqw; white-space:nowrap }
.tt-nav svg{ width:6.2cqw; height:6.2cqw; fill:currentColor }
.tt-nav .on{ color:#fff }
.tt-plus{ position:relative; width:10.6cqw; height:7cqw; margin-top:.6cqw; border-radius:2cqw; background:#fff; box-shadow:-.9cqw 0 0 #25f4ee, .9cqw 0 0 #fe2c55; display:grid; place-items:center; justify-self:center }
.tt-plus svg{ width:4cqw; height:4cqw; fill:#000 }

/* Banner: the real CrazyGift green-screen clip, keyed into assets/banner (see phone.js).
   Its wooden box fills 18–99% of the clip height, so the clip is lifted to put the box at 40% of
   the screen, clear of the right rail, and the jester hat can rise above it. */
.ad{ position:absolute; z-index:4; left:7%; right:7%; top:40%; translate:0 -58%; aspect-ratio:640/272; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)) }
.ad img,.ad canvas{ position:absolute; inset:0; width:100%; height:100% }
.ad canvas,.ad.is-live img{ opacity:0 }
.ad.is-live canvas{ opacity:1 }
.ad video{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
@keyframes fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.note{ position:absolute; left:calc(100% + 14px); width:118px; padding-left:12px; display:flex; flex-direction:column; justify-content:center; gap:5px }
.note b{ font:600 13.5px/1.3 var(--f-body); white-space:nowrap; font-variant-numeric:tabular-nums }
.note span{ font-size:12.5px; line-height:1.35; color:var(--muted) }
.note--ad{ border-left:2px solid var(--violet) }
.note--ad::before,.note--ad::after{ content:""; position:absolute; left:-2px; width:9px; height:2px; background:var(--violet) }
.note--ad::before{ top:0 } .note--ad::after{ bottom:0 }
.note--ad b{ color:var(--violet) }
/* bracket = the banner's wooden box: screen inset 3.4cqw, box 0.297 of the screen width tall, centred at 40% */
.note--ad{ top:calc(3.4cqw + (100% - 6.8cqw) * .4 - 13.85cqw); height:27.7cqw }
.note--pay{ top:62% }
.note--pay::before{ content:""; position:absolute; left:-12px; top:8px; width:18px; height:2px; background:var(--gold) }
.note--pay b{ color:var(--gold); padding-left:10px; font-variant-numeric:tabular-nums }
.note--pay span{ padding-left:10px }
.note--pay b span{ font:inherit; color:inherit; padding:0 }
.note--pay span span{ padding:0; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap }

/* ---------- sections ---------- */
section[id]{ scroll-margin-top:84px }
.sec{ padding-block:clamp(72px, 9vw, 120px) }
.sec-head{ display:grid; gap:14px; max-width:760px; margin-bottom:40px }
h2{ margin:0; font:400 clamp(28px, 3.4vw, 42px)/1.1 var(--f-display) }
.sec-head p{ margin:0; max-width:32em; color:var(--muted); font-size:17px }
.sec-head .more{ margin-top:8px }
.sec-head div{ min-width:0 }

/* rates + calculator */
.rates{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:24px; align-items:start }
.rate-list{ display:grid; gap:10px; margin:0; padding:0; border:0; min-width:0 }
.rate{
  position:relative; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:16px 18px; border-radius:var(--r-tile); background:var(--plum); border:1px solid var(--line);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.rate:hover{ border-color:#3e3462 }
.rate input{ position:absolute; opacity:0; pointer-events:none }
.rate:has(input:checked){ background:var(--plum-2); border-color:var(--violet) }
.rate:has(input:focus-visible){ outline:2px solid var(--violet); outline-offset:3px }
.radio{ width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--ghost); transition:box-shadow .15s }
.rate:has(input:checked) .radio{ box-shadow:inset 0 0 0 6px var(--violet) }
.rate-t{ min-width:0 }
.rate-t b{ display:block; font:600 17px/1.3 var(--f-body) }
.rate-t span{ display:block; margin-top:3px; color:var(--muted); font-size:14px; line-height:1.4 }
.price{ text-align:right }
.price b{ display:block; font:700 21px/1 var(--f-body); color:var(--gold); font-variant-numeric:tabular-nums }
.price span{ display:block; margin-top:7px; font:400 12.5px/1.2 var(--f-body); color:var(--faint); white-space:nowrap }
.rate-note{ margin:6px 2px 0; font-size:13.5px; color:var(--faint) }

.calc{ display:grid; gap:24px; padding:28px; border-radius:var(--r-panel); background:var(--plum); border:1px solid var(--line); min-width:0 }
.lbl{ display:block; font:500 14px/1.2 var(--f-body); color:var(--muted) }
.views-field{ display:flex; align-items:baseline; gap:12px; margin-top:14px; padding-bottom:10px; border-bottom:1px solid var(--line); transition:border-color .15s }
.views-field:focus-within{ border-color:var(--violet) }
#views-input{
  flex:1; width:100%; min-width:0; padding:0; border:0; outline:none; background:transparent; color:var(--text);
  font:600 clamp(26px, 3.3vw, 36px)/1.15 var(--f-body); font-variant-numeric:tabular-nums;
}
.views-field span{ color:var(--muted); font-size:15px; white-space:nowrap }
.slider{ display:grid; gap:10px }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:28px; margin:0; background:transparent; cursor:pointer }
input[type=range]:focus-visible{ outline-offset:6px }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--violet) var(--p,50%), var(--line) var(--p,50%)) }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%; background:var(--text); border:6px solid var(--violet); box-shadow:0 3px 12px rgba(0,0,0,.45) }
input[type=range]::-moz-range-track{ height:6px; border-radius:3px; background:var(--line) }
input[type=range]::-moz-range-progress{ height:6px; border-radius:3px; background:var(--violet) }
input[type=range]::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--text); border:6px solid var(--violet) }
.ticks{ display:flex; justify-content:space-between; font:400 12.5px/1 var(--f-body); color:var(--faint) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font:500 14px/1 var(--f-body); transition:border-color .15s, color .15s, background .15s;
}
.chip:hover{ color:var(--text); border-color:#3e3462 }
.chip[aria-pressed="true"]{ color:var(--text); border-color:var(--violet); background:rgba(169,120,255,.12) }
.result{ display:grid; gap:8px; padding-top:22px; border-top:1px dashed var(--line) }
.amount{ font:400 clamp(44px, 6vw, 72px)/1 var(--f-display); color:var(--gold); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.formula{ margin:4px 0 0; font:400 14px/1.5 var(--f-body); font-variant-numeric:tabular-nums; color:var(--muted); overflow-wrap:anywhere }
.warn{ margin:0; color:var(--no); font-size:14px }
.calc-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding-top:20px; border-top:1px solid var(--line) }
.calc-foot p{ margin:0; color:var(--muted); font-size:14px; max-width:26em }

/* steps */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 40px }
.step{ display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:2px solid var(--line); min-width:0 }
.step .n{ font:600 14px/1 var(--f-body); color:var(--violet) }
.step h3{ margin:2px 0 0; font:600 21px/1.25 var(--f-body) }
.step p{ margin:0; color:var(--muted) }
.step p b{ color:var(--text); font-weight:500 }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:10px }
.tag{
  display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border-radius:9px;
  background:var(--plum-2); border:1px solid var(--line); font:500 13px/1 var(--f-body); color:var(--text); white-space:nowrap;
}
.tag i{ font-style:normal; color:var(--faint) }
.tag--path{ flex-wrap:wrap; white-space:normal; line-height:1.5; padding-block:6px; row-gap:0 }
.step small{ display:block; margin-top:auto; padding-top:14px; border-top:1px dashed var(--line); color:var(--faint); font-size:13.5px; line-height:1.45 }

/* banner spec */
.spec{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px }
.spec-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-panel); background:var(--plum); border:1px solid var(--line); min-width:0 }
.fig{
  height:210px; display:grid; place-items:center; padding:22px;
  background:var(--plum-2); border-bottom:1px solid var(--line);
}
.spec-body{ padding:22px 24px 26px }
.spec-body h3{ margin:0; font:600 19px/1.3 var(--f-body) }
.spec-body p{ margin:8px 0 0; color:var(--muted); font-size:15px }

.fig-size{ display:flex; align-items:center; gap:12px }
.mini{ position:relative; width:92px; height:164px; border-radius:16px; border:2px solid var(--muted); overflow:hidden; background:var(--ink) }
.mini::before{ content:""; position:absolute; left:12px; right:12px; top:14px; height:36px; border-radius:8px; background:var(--plum-2) }
.mini::after{ content:""; position:absolute; left:12px; width:44px; bottom:30px; height:6px; border-radius:3px; background:var(--plum-2); box-shadow:0 12px 0 -1px var(--plum-2) }
.mini i{ position:absolute; left:8px; right:8px; top:37.5%; height:25%; border-radius:5px; background:repeating-linear-gradient(135deg, var(--violet) 0 6px, #9465f0 6px 12px) }
.dim{ position:relative; height:calc(164px * .25); display:flex; align-items:center; padding-left:12px; border-left:2px solid var(--violet); font:600 14px/1 var(--f-body); color:var(--violet); white-space:nowrap }
.dim::before,.dim::after{ content:""; position:absolute; left:-2px; width:8px; height:2px; background:var(--violet) }
.dim::before{ top:0 } .dim::after{ bottom:0 }

.tl{ width:100%; max-width:300px }
.tl-cap{ font:500 13px/1.4 var(--f-body); color:var(--muted) }
.tl-bar{ position:relative; height:34px; margin-top:16px; border-radius:8px; background:linear-gradient(90deg, #2c2546, #251f3b) }
.tl-min{ position:absolute; top:-7px; bottom:-7px; border-left:1px dashed var(--faint) }
.tl-ad{ position:absolute; top:50%; width:14px; height:14px; border-radius:2px; background:var(--violet); transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 0 3px #261f3c }
.tl-scale{ position:relative; height:12px; margin-top:12px; font:400 12px/1 var(--f-body); color:var(--faint) }
.tl-scale span{ position:absolute; top:0; transform:translateX(-50%) }
.tl-scale span:first-child{ transform:none }
.tl-scale span:last-child{ transform:translateX(-100%) }
.tl-key{ display:flex; align-items:center; gap:8px; margin-top:16px; font:400 12.5px/1 var(--f-body); color:var(--muted) }
.tl-key i{ width:9px; height:9px; border-radius:1px; background:var(--violet); transform:rotate(45deg) }

.player{ width:100%; max-width:270px; display:grid; gap:14px }
.p-row{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:center }
.p-ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--ink); color:var(--muted) }
.p-ico svg{ width:12px; height:12px; fill:currentColor }
.p-row--ad .p-ico{ background:var(--violet); color:var(--violet-ink) }
.p-meta{ display:flex; justify-content:space-between; gap:8px; font:500 12.5px/1 var(--f-body); color:var(--muted); white-space:nowrap }
.p-row--ad .p-meta{ color:var(--text) }
.p-track{ height:5px; margin-top:8px; border-radius:3px; background:var(--ghost); overflow:hidden }
.p-track i{ display:block; height:100%; width:46%; border-radius:3px; background:var(--muted) }
.p-row--ad .p-track i{ width:100%; background:var(--violet); transform-origin:left; animation:fill 5s linear infinite }

/* rules */
.rules{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 56px }
.rule-col{ min-width:0 }
.rule-col h3{ margin:0; font:600 19px/1.3 var(--f-body) }
.rule-col ul{ list-style:none; margin:18px 0 0; padding:0 }
.rule-col li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding:15px 0; border-top:1px solid var(--line) }
.rule-col li svg{ width:20px; height:20px; margin-top:2px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke:var(--ok) }
.rule-col--no li svg{ stroke:var(--no) }
.rule-col li span{ color:var(--text) }
.rule-col li small{ display:block; margin-top:2px; color:var(--muted); font-size:14px; line-height:1.45 }

/* faq */
.faq-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px 64px; align-items:start }
.faq-grid > div:first-child p{ margin:20px 0 0; color:var(--muted); font-size:17px; max-width:24em }
.faq-grid > div:first-child .more{ margin-top:20px }
.faq details{ border-bottom:1px solid var(--line) }
.faq details:first-child{ border-top:1px solid var(--line) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none; font:600 18px/1.35 var(--f-body);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--violet-hi) }
.pm{ position:relative; width:28px; height:28px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); transition:transform .25s, background .2s }
.pm::before,.pm::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; margin:-1px 0 0 -5.5px; border-radius:1px; background:currentColor }
.pm::after{ transform:rotate(90deg) }
.faq details[open] .pm{ transform:rotate(45deg); background:var(--plum-2) }
.faq details p{ margin:-6px 0 24px; max-width:56ch; color:var(--muted) }

/* final */
.final{ padding-block:0 clamp(72px, 9vw, 120px) }
.final-box{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px 40px; align-items:center;
  padding:clamp(28px, 5vw, 60px); border-radius:32px;
  background:var(--plum);
  border:1px solid var(--line);
}
.final-box > img{ width:240px; height:auto; filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)) }
.final-box h2{ font-size:clamp(28px, 3.4vw, 44px) }
.final-box p{ margin:14px 0 0; color:var(--muted); font-size:17px; max-width:34em }
.final-box p b{ color:var(--text); font-weight:500 }
.final-act{ display:grid; justify-items:start; gap:14px }
.final-act small{ color:var(--muted); font-size:14px }
.final-act small a{ color:var(--text); text-underline-offset:3px; text-decoration-color:var(--ghost) }

/* footer */
.foot{ padding-block:36px 28px; border-top:1px solid var(--line) }
.foot-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px }
.foot .brand img{ width:30px; height:30px; border-radius:8px }
.foot .brand b{ font-size:16px }
.foot-links{ display:flex; flex-wrap:wrap; gap:10px 24px; margin:0; padding:0; list-style:none }
.foot-links a{ color:var(--muted); font-size:14px; text-decoration:none }
.foot-links a:hover{ color:var(--text) }
.foot-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:24px; color:var(--faint); font-size:13px }
.age{ display:inline-grid; place-items:center; height:24px; padding:0 7px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--ghost); font:600 12px/1 var(--f-body); color:var(--muted) }
.legal{ margin:22px 0 0; font-size:10.5px; line-height:1.55; color:var(--ghost) }

/* mobile dock */
.dock{
  position:fixed; z-index:45; left:0; right:0; bottom:0;
  padding-top:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
  background:linear-gradient(rgba(13,11,20,0), rgba(13,11,20,.94) 34%);
  transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.dock.on{ transform:none }
.dock .btn{ width:100% }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{ display:none }
  .top .btn{ margin-left:auto }
}
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:minmax(0,1fr); gap:56px; padding-block:44px 80px }
  .hero::before{ -webkit-mask-image:radial-gradient(70% 45% at 50% 75%, #000, transparent 80%); mask-image:radial-gradient(70% 45% at 50% 75%, #000, transparent 80%) }
  .sec-head{ margin-bottom:32px }
  .rates, .rules, .faq-grid{ grid-template-columns:minmax(0,1fr) }
  .steps, .spec{ grid-template-columns:minmax(0,1fr) }
  .final-box{ grid-template-columns:minmax(0,1fr) }
  .final-box > img{ width:min(280px, 100%) }
  .foot{ padding-bottom:110px }
}
@media (min-width:901px){ .dock{ display:none } }
@media (max-width:560px){
  .device{ width:58vw; margin-right:110px }
  .note{ width:98px; left:calc(100% + 10px) }
  .note span{ font-size:11.5px }
  .note b{ font-size:11px }
  .note--ad span{ display:none }
  .price span{ display:none }
  .calc{ padding:22px 18px }
  .rate{ gap:12px; padding:14px }
  .price b{ font-size:19px }
  .cta-row .btn{ width:100% }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
}