/* base reset */
html{-webkit-text-size-adjust:100%}
img,video{max-width:100%}
[hidden]{display:none!important}

:root{
  --gut:clamp(16px,4vw,40px);
  --bg:#F3F3EE; --surface:#FFFFFF; --ink:#1C1A17; --muted:#686357; --line:#DDD9CE;
  --yolk:#F0A800; --yolk-ink:#8A5800; --yolk-soft:#FFF1CC; --shell:#EAD9BC; --shell-shade:#C9B18A; --shadow:rgba(60,45,20,.16);
  --paper:#FBF8F0; --paper-ink:#2A2620; --paper-muted:#8A8274; --paper-line:rgba(120,110,90,.10); --paper-edge:#E7E1D3;
  --stage:#161412; --stage-ink:#F2EDE3; --stage-muted:#A8A195; --stage-line:#2E2A25;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Onest", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#151411; --surface:#1F1D19; --ink:#F1EDE4; --muted:#A39D90; --line:#35312A;
    --yolk:#F5B51F; --yolk-ink:#F7C555; --yolk-soft:#3A2E12; --shell:#D9C6A3; --shell-shade:#9C845E; --shadow:rgba(0,0,0,.45);
    --stage:#0C0B0A; --stage-line:#26231F;
    --paper:#24211C; --paper-ink:#EDE6D8; --paper-muted:#9D9585; --paper-line:rgba(237,230,216,.06); --paper-edge:#161411;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#151411; --surface:#1F1D19; --ink:#F1EDE4; --muted:#A39D90; --line:#35312A;
  --yolk:#F5B51F; --yolk-ink:#F7C555; --yolk-soft:#3A2E12; --shell:#D9C6A3; --shell-shade:#9C845E; --shadow:rgba(0,0,0,.45);
  --stage:#0C0B0A; --stage-line:#26231F;
  --paper:#24211C; --paper-ink:#EDE6D8; --paper-muted:#9D9585; --paper-line:rgba(237,230,216,.06); --paper-edge:#161411;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{background:var(--bg); color:var(--ink); font:16px/1.6 var(--body); padding-inline:var(--gut); padding-block:0 64px; overflow-x:clip}
.wrap{max-width:1160px; margin:0 auto}
h1,h2,h3{text-wrap:balance; margin:0}
h2{font:700 clamp(26px,3.6vw,40px)/1.1 var(--display); letter-spacing:-.02em}
h3{font:600 18px/1.3 var(--body)}
p{margin:0}
.eyebrow{font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
section{padding-block:72px; display:grid; gap:32px}
.sec-head{display:grid; gap:12px; max-width:720px}
.sec-head p{color:var(--muted); font-size:17px}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--yolk); outline-offset:3px}
.egg-ico{display:inline-block; width:.7em; height:.9em; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:var(--yolk); vertical-align:-.05em}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; margin-inline:calc(-1 * var(--gut)); padding:12px var(--gut);
  background:color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.nav-in{max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:10px; font:700 13px/1 var(--display); letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand .egg-ico{width:14px; height:18px}
.links{display:flex; gap:22px; font-size:14px}
.links a{color:var(--muted); text-decoration:none; white-space:nowrap}
@media (max-width:1380px){ .links{display:none} }
.links a:hover{color:var(--ink)}
.nav .btn{white-space:nowrap; flex:none}
@media (max-width:420px){ .nav .lg{display:none} }
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--yolk); transform-origin:0 50%; transform:scaleX(var(--p,0))}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font-weight:600; font-size:15px; text-decoration:none; transition:transform .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.yolk{background:var(--yolk); border-color:var(--yolk); color:#1A1712}
.btn.sm{padding:8px 14px; font-size:14px}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* hero */
.hero{padding-block:20px 0; display:grid; gap:28px}
.hero-stage{position:relative; border-radius:32px; overflow:hidden; aspect-ratio:16/9; max-width:100%; background:#F4B400; color:#1A1712}
.hero-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:settle 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
.hero-copy{position:relative; height:100%; padding:clamp(20px,4vw,52px); display:flex; flex-direction:column; justify-content:space-between; gap:20px}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px}
.hchip{font:500 12px/1 var(--mono); letter-spacing:.06em; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(26,23,18,.12)}
.hero h1{font:800 clamp(34px,6.6vw,86px)/.95 var(--display); letter-spacing:-.035em; max-width:58%}
.hero h1 span{display:block; animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.08s}
.hero h1 span:nth-child(3){animation-delay:.16s}
@keyframes up{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
.hero-date{font:500 13px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.hero-foot{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:end}
.lead{font-size:clamp(17px,1.6vw,20px); line-height:1.55; max-width:56ch}
.ctas{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}

/* holiday countdown */
.holiday{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; margin-top:28px; padding:clamp(18px,3vw,26px) clamp(20px,3.5vw,34px); border-radius:28px; background:var(--ink); color:var(--bg)}
.holiday .eyebrow{color:var(--yolk)}
.h-txt{display:grid; gap:8px}
.h-txt b{font:700 clamp(20px,2.4vw,28px)/1.1 var(--display); letter-spacing:-.015em}
.h-cd{display:flex; gap:10px; flex-wrap:wrap}
.h-cd .u{display:grid; justify-items:center; gap:6px; min-width:72px; padding:12px 10px 10px; border-radius:16px; background:color-mix(in srgb, var(--bg) 9%, var(--ink))}
.h-cd .n{font:800 clamp(28px,4vw,44px)/1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.h-cd .l{font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--bg) 60%, var(--ink))}
.h-cd .n.tick{animation:hTick .5s cubic-bezier(.2,.8,.2,1)}
@keyframes hTick{from{transform:translateY(-6px); opacity:.35}to{transform:none; opacity:1}}
.holiday.today{background:var(--yolk); color:#1A1712}
.holiday.today .eyebrow{color:#1A1712}
.holiday.today .h-cd .u{background:rgba(255,255,255,.35)}
.holiday.today .h-cd .l{color:rgba(26,23,18,.7)}
@media (max-width:560px){ .h-cd{width:100%; justify-content:space-between; gap:6px} .h-cd .u{min-width:0; flex:1; padding:10px 4px 8px} }

/* ticker */
.ticker{overflow:hidden; border-block:1px solid var(--line); padding-block:18px; margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex; width:max-content; animation:tick 48s linear infinite}
.ticker-track span{display:inline-flex; align-items:center; gap:28px; padding-right:28px; font:700 clamp(16px,2vw,22px)/1 var(--display); letter-spacing:-.01em; white-space:nowrap}
.ticker-track i{font-style:normal; color:var(--muted); font:500 13px/1 var(--mono); letter-spacing:.04em}
@keyframes tick{to{transform:translateX(-50%)}}

/* cinematic key message */
.cine{position:relative; border-radius:32px; overflow:hidden; background:#0E0D0B; color:#F4EFE6; min-height:520px; display:flex; align-items:center}
.cine img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%}
.cine::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,13,11,.96) 0%, rgba(14,13,11,.82) 42%, rgba(14,13,11,0) 72%)}
.cine-copy{position:relative; z-index:1; padding:clamp(24px,5vw,60px); max-width:640px; display:grid; gap:18px}
.cine .eyebrow{color:#B9B1A2}
.cine h2{color:#FFF6E6}
.say{font:400 clamp(17px,1.7vw,20px)/1.6 var(--body); color:#E7E0D3}
.say mark{background:rgba(245,181,31,.22); color:#FFE3A1; padding:0 .15em; border-radius:4px}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
.stat-t{padding:22px 22px 4px 0; display:grid; gap:8px; align-content:start}
.stat-t + .stat-t{padding-left:22px; border-left:1px solid var(--line)}
.stat-t b{font:800 clamp(32px,4.2vw,52px)/1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat-t b small{font-size:.45em; letter-spacing:0}
.stat-t span{font-size:14px; color:var(--muted); line-height:1.45}

/* bento */
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.b{background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:24px; display:grid; gap:10px; align-content:start; transition:transform .3s ease, box-shadow .3s ease}
.b:hover{transform:translateY(-2px); box-shadow:0 14px 34px var(--shadow)}
.b svg.ico{width:100%; height:64px; display:block; color:var(--ink)}
.b p{font-size:15px}
.b-big{grid-column:span 2; grid-row:span 2}
.b-photo{padding:0; overflow:hidden; gap:0; grid-template-rows:auto 1fr; align-content:stretch}
.b-photo .pic{position:relative; overflow:hidden; min-height:220px; background:#BDB5A9}
.b-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.b-photo:hover img{transform:scale(1.04)}
.b-photo .txt{padding:24px; display:grid; gap:10px}
.b-photo h3,.b-lab h3{font:700 clamp(20px,2.2vw,26px)/1.15 var(--display); letter-spacing:-.015em}
.b-lab{grid-template-rows:auto 1fr auto; align-content:stretch}
.b-lab svg{width:100%; max-height:280px; display:block}
.lab-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.verdict{font:700 22px/1 var(--display)}
.verdict.is-egg{color:var(--yolk-ink)}
.lab-val{font:500 13px/1 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums}
input[type=range]{width:100%; accent-color:var(--yolk)}
.src{font:400 12px/1.4 var(--mono); color:var(--muted)}
.quote{font-size:15px; font-weight:600; border-left:3px solid var(--yolk); padding-left:12px}

/* photos */
.shot{margin:0; border-radius:28px; overflow:hidden; position:relative; background:var(--line); max-width:100%}
.shot img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.035)}
.shot figcaption{position:absolute; left:14px; bottom:14px; width:fit-content; max-width:calc(100% - 28px); font:500 11px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(15,13,10,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:8px 11px; border-radius:999px}
.band{aspect-ratio:21/9}
.wide{aspect-ratio:16/9}
.four3{aspect-ratio:4/3}
.split{display:grid; grid-template-columns:1fr 1.15fr; gap:36px; align-items:center}

/* cases */
.cases{display:grid; grid-template-columns:repeat(4,1fr); gap:32px 24px}
.case{border-top:2px solid var(--ink); padding-top:16px; display:grid; gap:8px; align-content:start}
.case .yr{font:800 24px/1 var(--display); letter-spacing:-.02em; color:var(--yolk-ink); font-variant-numeric:tabular-nums}
.case h3{font-size:17px}
.case p{font-size:14.5px; line-height:1.55}
.case .so{font-size:14px; color:var(--muted); padding-top:4px}
.case .so::before{content:"→ "; color:var(--yolk-ink)}
.srcl{justify-self:start; font:400 12px/1.4 var(--mono); color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.srcl:hover{color:var(--ink); border-color:var(--yolk)}
.src a{color:inherit; text-decoration-color:var(--yolk); text-underline-offset:2px}

/* mts */
.logos{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.logo-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:14px; display:grid; gap:12px; align-content:start}
.logo-card svg{width:100%; height:auto; aspect-ratio:1; border-radius:14px; display:block}
.logo-card > div{display:grid; gap:6px; padding-inline:4px}
.logo-card b{display:block; font:700 17px/1.2 var(--display); letter-spacing:-.01em}
.logo-card span{display:block; font-size:14px; color:var(--muted); line-height:1.45}
.mts-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:start}
.timeline{list-style:none; margin:0 0 0 8px; padding:0; border-left:2px solid var(--line)}
.timeline li{position:relative; padding:0 0 28px 28px; display:grid; gap:4px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-9px; top:2px; width:14px; height:18px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:var(--bg); border:2px solid var(--yolk)}
.timeline li.key::before{background:#E30611; border-color:#E30611}
.timeline .when{font:500 13px/1.3 var(--mono); color:var(--yolk-ink); font-variant-numeric:tabular-nums}
.timeline h3{font:700 18px/1.25 var(--display); letter-spacing:-.01em}
.timeline p{font-size:15px; max-width:60ch}
.voices{display:grid; gap:12px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 84px)}
.voices > .eyebrow{padding-left:4px}
.voice{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:18px 20px; display:grid; gap:8px}
.voice p{font-size:15px}
.voice .pill.pro{background:#E8F3E3; color:#2F5E22; border-color:transparent}
.voice .pill.con{background:#FBE3E1; color:#9A1F16; border-color:transparent}
.lesson{background:var(--yolk-soft); border-radius:28px; padding:clamp(22px,4vw,44px); display:grid; gap:14px}
.lesson p{font-size:clamp(18px,2vw,23px); line-height:1.5; max-width:62ch; font-weight:500}
.lesson mark{background:var(--yolk); color:#1A1712; padding:0 .15em; border-radius:4px}
.check a{color:var(--ink); text-decoration-color:var(--yolk); text-underline-offset:3px}

/* egg rate */
:root{--up:#C8382A; --down:#1F8A4C; --up-soft:#FBE4E0; --down-soft:#E2F3E8}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--up:#FF8A78; --down:#5FD08E; --up-soft:#3B1F1A; --down-soft:#173123} }
:root[data-theme="dark"]{--up:#FF8A78; --down:#5FD08E; --up-soft:#3B1F1A; --down-soft:#173123}
.rate-chip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font:500 13px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.rate-chip .egg-ico{width:10px; height:13px}
.rate-chip .live{width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 var(--up); animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chg{display:inline-flex; align-items:center; gap:4px; font-weight:600}
.chg.up{color:var(--up)} .chg.down{color:var(--down)}
.rate{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0; border:1px solid var(--line); border-radius:32px; overflow:hidden; background:var(--surface)}
.rate-main{padding:clamp(22px,3.5vw,40px); display:grid; gap:18px; align-content:start; background:linear-gradient(160deg, var(--yolk-soft), transparent 70%)}
.ticker-sym{display:flex; align-items:center; gap:10px; font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ticker-sym b{color:var(--ink); font-weight:500}
.price{display:flex; align-items:baseline; gap:10px; font:800 clamp(56px,8vw,96px)/1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.price small{font-size:.38em; letter-spacing:0; color:var(--muted)}
.odo{display:inline-flex; overflow:hidden; height:1em; line-height:1}
.odo .col{display:inline-flex; flex-direction:column; transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.odo .col span{height:1em; display:block}
.odo .sep{display:inline-block}
.rate-sub{font-size:14px; color:var(--muted); max-width:44ch}
.chg-pill{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font:600 15px/1 var(--body); font-variant-numeric:tabular-nums}
.chg-pill.up{background:var(--up-soft); color:var(--up)} .chg-pill.down{background:var(--down-soft); color:var(--down)}
.rate-kpis{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.kpi{background:var(--surface); padding:12px 14px; display:grid; gap:4px}
.kpi span{font-size:12px; color:var(--muted)}
.kpi b{font:700 18px/1.15 var(--display); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.kpi i{font-style:normal; font-size:12px; color:var(--muted)}
.rate-chart{padding:clamp(18px,3vw,32px); display:grid; gap:14px; align-content:start; border-left:1px solid var(--line); min-width:0}
.chart-top{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.ranges{display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:var(--bg); border:1px solid var(--line)}
.ranges button{border:0; background:transparent; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--muted)}
.ranges button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.chart-box{position:relative; min-width:0}
.chart-box svg{width:100%; height:auto; display:block; overflow:visible}
.chart-box .grid line{stroke:var(--line); stroke-width:1}
.chart-box .axis text{fill:var(--muted); font:400 11px var(--mono); font-variant-numeric:tabular-nums}
.chart-box .line{fill:none; stroke:var(--yolk); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.chart-box .area{fill:url(#rateFill)}
.chart-box .pt{fill:var(--surface); stroke:var(--yolk); stroke-width:2}
.chart-box .pt.c{stroke-dasharray:2 2}
.chart-box .last{fill:var(--yolk); stroke:var(--surface); stroke-width:3}
.chart-box .pulse{fill:var(--yolk); opacity:.35; transform-box:fill-box; transform-origin:center; animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1); opacity:.45}100%{transform:scale(3.2); opacity:0}}
.chart-box .cross{stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3}
.chart-box .draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.4s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tip{position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); border-radius:12px; padding:8px 11px; font-size:12.5px; line-height:1.35; white-space:nowrap; transform:translate(-50%, calc(-100% - 12px)); box-shadow:0 10px 24px var(--shadow)}
.tip b{font:700 15px var(--display); display:block}
.tip i{font-style:normal; opacity:.75; display:block}
.chart-note{font-size:12px; color:var(--muted)}
.chart-note .dash{display:inline-block; width:10px; height:10px; border-radius:50%; border:2px dashed var(--yolk); vertical-align:-1px}
.chart-note .solid{display:inline-block; width:10px; height:10px; border-radius:50%; border:2px solid var(--yolk); vertical-align:-1px}
.rate-table{font-size:13px; width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.rate-table td,.rate-table th{padding:6px 8px; border-bottom:1px solid var(--line); text-align:left}
.rate-table td:nth-child(2){text-align:right; font-weight:600}
.table-wrap{max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:14px}
.linkbtn{border:0; background:none; padding:0; font-size:13px; color:var(--muted); text-decoration:underline; text-decoration-color:var(--yolk); text-underline-offset:3px}
.rate-fun{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.fun{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:20px 22px; display:grid; gap:10px; align-content:start}
.fun h3{font:700 17px/1.2 var(--display); letter-spacing:-.01em}
.fun .big{font:800 34px/1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.fun .big small{font-size:.45em; color:var(--muted); letter-spacing:0}
.fun p{font-size:14px; color:var(--muted)}
.fun input[type=range]{width:100%}
.vote{display:flex; gap:8px; flex-wrap:wrap}
.vote button{flex:1; border:1px solid var(--line); background:var(--bg); border-radius:14px; padding:12px 10px; font-weight:600; font-size:14px}
.vote button:hover{border-color:var(--ink)}
.vote button[aria-pressed="true"].up{background:var(--up-soft); color:var(--up); border-color:var(--up)}
.vote button[aria-pressed="true"].down{background:var(--down-soft); color:var(--down); border-color:var(--down)}
.countdown{display:flex; gap:6px; font:700 22px/1 var(--display); font-variant-numeric:tabular-nums}
.countdown span{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 9px; min-width:52px; text-align:center}
.countdown span i{display:block; font:400 10px/1 var(--mono); color:var(--muted); margin-top:4px; font-style:normal}
.regions{display:grid; gap:8px}
.reg{display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; font-size:13px}
.reg .bar{grid-column:1 / -1; height:8px; border-radius:8px; background:var(--line); overflow:hidden}
.reg .bar i{display:block; height:100%; border-radius:8px; background:var(--yolk); width:0; transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.reg b{font-variant-numeric:tabular-nums}
@media (max-width:980px){ .rate{grid-template-columns:1fr} .rate-chart{border-left:0; border-top:1px solid var(--line)} .rate-fun{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .rate-fun{grid-template-columns:1fr} .rate-chip .lbl{display:none} }
@media (max-width:420px){ .rate-chip{display:none} }

.crowd{display:grid; gap:6px}
.crowd-bar{display:flex; height:8px; border-radius:8px; overflow:hidden; background:var(--line); gap:2px}
.crowd-bar i{display:block; height:100%; transition:width .8s cubic-bezier(.2,.8,.2,1)}
.crowd-bar .u{background:var(--up)} .crowd-bar .d{background:var(--down)}
.crowd-txt{font-size:13px; color:var(--muted)}

/* lead-gen block */
.grow{display:grid; gap:clamp(24px,3.5vw,36px); background:var(--ink); color:var(--bg); border-radius:36px; padding:clamp(24px,5vw,60px)}
.grow .eyebrow{color:var(--yolk)}
.grow h2{color:var(--bg); max-width:18ch}
.grow-head{display:grid; gap:14px}
.grow-head p{color:color-mix(in srgb, var(--bg) 72%, var(--ink)); font-size:17px; max-width:62ch}
.pipe{position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.pipe li{position:relative; z-index:1; display:grid; gap:8px; align-content:start; padding:20px; border-radius:22px; background:color-mix(in srgb, var(--bg) 7%, var(--ink)); border:1px solid color-mix(in srgb, var(--bg) 12%, transparent)}
.pipe b{font:700 22px/1.1 var(--display); letter-spacing:-.015em}
.pipe p{font-size:14.5px; color:color-mix(in srgb, var(--bg) 70%, var(--ink))}
.pipe-n{font:500 12px/1 var(--mono); letter-spacing:.12em; color:var(--yolk)}
.pipe::before{content:""; position:absolute; left:8%; right:8%; top:31px; height:2px; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--yolk) 70%, transparent) 0 8px, transparent 8px 14px); z-index:0}
.pipe-egg{position:absolute; z-index:2; top:22px; left:8%; width:15px; height:19px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:var(--yolk); box-shadow:0 0 0 4px color-mix(in srgb, var(--yolk) 25%, transparent); animation:eggRun 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes eggRun{0%{left:8%}30%{left:8%}45%{left:calc(50% - 7px)}60%{left:calc(50% - 7px)}75%{left:calc(92% - 15px)}100%{left:calc(92% - 15px)}}
.proof{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:color-mix(in srgb, var(--bg) 14%, transparent); border-radius:20px; overflow:hidden}
.proof div{background:var(--ink); padding:16px 18px; display:grid; gap:4px}
.proof b{font:800 clamp(22px,2.6vw,30px)/1 var(--display); letter-spacing:-.02em; color:var(--yolk)}
.proof span{font-size:13px; color:color-mix(in srgb, var(--bg) 65%, var(--ink))}
.grow-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:18px; align-items:start}
.offer{display:grid; gap:14px; padding:clamp(18px,3vw,28px); border-radius:24px; background:color-mix(in srgb, var(--yolk) 14%, var(--ink)); border:1px solid color-mix(in srgb, var(--yolk) 35%, transparent)}
.offer h3{font:700 22px/1.15 var(--display); color:var(--yolk)}
.offer-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.offer-list li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px}
.offer-list li::before{content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--yolk); color:#1A1712; font-weight:700; font-size:13px}
.offer-note{font-size:13.5px; color:color-mix(in srgb, var(--bg) 70%, var(--ink))}
.quick{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:color-mix(in srgb, var(--bg) 65%, var(--ink))}
.quick span{flex-basis:100%}
.qc{padding:8px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--bg) 25%, transparent); color:var(--bg); text-decoration:none; font-size:13.5px}
.qc:hover{border-color:var(--yolk)}
.quiz{display:grid; gap:16px; padding:clamp(18px,3vw,28px); border-radius:24px; background:color-mix(in srgb, var(--bg) 7%, var(--ink)); border:1px solid color-mix(in srgb, var(--bg) 12%, transparent); min-width:0}
.q-top{display:grid; gap:8px}
.q-step{font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--bg) 60%, var(--ink))}
.q-bar{height:6px; border-radius:6px; background:color-mix(in srgb, var(--bg) 14%, transparent); overflow:hidden}
.q-bar i{display:block; height:100%; width:25%; background:var(--yolk); border-radius:6px; transition:width .45s cubic-bezier(.2,.8,.2,1)}
.q-pane{border:0; margin:0; padding:0; display:grid; gap:12px; min-width:0}
.q-pane legend{font:700 clamp(20px,2.2vw,26px)/1.15 var(--display); letter-spacing:-.015em; padding:0; margin-bottom:4px}
.q-pane:not([hidden]){animation:qIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes qIn{from{opacity:0; transform:translateX(14px)}to{opacity:1; transform:none}}
.q-hint{font-size:13.5px; color:color-mix(in srgb, var(--bg) 62%, var(--ink))}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip span{display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:14px; border:1px solid color-mix(in srgb, var(--bg) 25%, transparent); font-size:14.5px; transition:background .2s, border-color .2s, color .2s}
.chip:hover span{border-color:var(--yolk)}
.chip input:checked + span{background:var(--yolk); border-color:var(--yolk); color:#1A1712; font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--yolk); outline-offset:2px}
.quiz .fld{color:color-mix(in srgb, var(--bg) 70%, var(--ink))}
.quiz .fld input,.quiz .fld textarea{color:var(--bg)}
.q-nav{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.q-nav .btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.quiz .btn.line{background:transparent; color:var(--bg); border-color:color-mix(in srgb, var(--bg) 35%, transparent)}
.q-done{display:grid; gap:8px; padding:18px; border-radius:18px; background:color-mix(in srgb, var(--yolk) 18%, var(--ink)); border:1px solid var(--yolk)}
.q-done b{font:700 20px/1.2 var(--display); color:var(--yolk)}
.q-done p{font-size:14.5px}
@media (max-width:980px){ .pipe{grid-template-columns:1fr} .pipe::before,.pipe-egg{display:none} .proof{grid-template-columns:repeat(3,1fr)} .grow-grid{grid-template-columns:1fr} }
@media (max-width:560px){ .proof{grid-template-columns:1fr 1fr} }

/* zhvanetsky-style sheets */
.zh{padding-block:28px}
.zh-page{position:relative; max-width:760px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(22px,5vw,64px) clamp(24px,4vw,40px);
  background:var(--paper); color:var(--paper-ink); border-radius:6px; transform:rotate(-.6deg);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 40px var(--shadow), 0 2px 0 -1px var(--paper), 0 3px 0 -1px var(--paper-edge), 0 6px 0 -2px var(--paper), 0 7px 0 -2px var(--paper-edge)}
.zh:nth-of-type(even) .zh-page{transform:rotate(.5deg)}
.zh-clip{position:absolute; top:-22px; left:44px; width:22px; height:56px; color:#8C8F94}
.zh-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-muted); margin-bottom:18px}
.zh-title{font:500 italic clamp(30px,4vw,44px)/1.05 "Cormorant Garamond", Georgia, serif; margin-bottom:18px; color:var(--paper-ink)}
.zh-body{display:grid; gap:6px}
.zh-part{display:grid; gap:10px}
.zh-body p{font:400 clamp(15px,1.6vw,17px)/1.75 var(--mono); max-width:60ch; text-align:left}
.zh-sep{text-align:center!important; max-width:none!important; letter-spacing:.6em; color:var(--paper-muted); margin:14px 0}
.zh-page summary{list-style:none; cursor:pointer; display:grid}
.zh-page summary::-webkit-details-marker{display:none}
.zh-page summary:focus-visible{outline:2px solid var(--yolk); outline-offset:6px; border-radius:4px}
.zh-teaser{font:400 clamp(15px,1.6vw,17px)/1.75 var(--mono); max-width:60ch}
.zh-toggle{justify-self:start; display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:9px 14px 9px 16px; border-radius:999px; border:1px solid var(--paper-edge); background:color-mix(in srgb, var(--paper-ink) 5%, transparent); font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--paper-ink); transition:background .2s ease}
.zh-page summary:hover .zh-toggle{background:color-mix(in srgb, var(--yolk) 30%, transparent)}
.zh-toggle svg{width:16px; height:16px; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.zh-toggle .t-close{display:none}
.zh-page[open] .zh-toggle .t-open{display:none}
.zh-page[open] .zh-toggle .t-close{display:inline}
.zh-page[open] .zh-toggle svg{transform:rotate(180deg)}
.zh-page .zh-body{padding-top:10px}
.zh-page[open] summary{margin-bottom:0}
.zh-page[open] .zh-body{animation:zhIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes zhIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.zh-note{margin-top:22px; font:400 11px/1.4 var(--mono); color:var(--paper-muted)}

/* share */
.share{display:grid; grid-template-columns:1fr auto; gap:20px 32px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:clamp(22px,4vw,40px)}
.share-txt{display:grid; gap:10px}
.share-txt p{color:var(--muted)}
.share-btns{display:flex; flex-wrap:wrap; gap:10px}
.btn.sh{color:#fff; border-color:transparent}
.btn.sh svg{width:18px; height:18px}
.btn.tg{background:#229ED9}
.btn.vk{background:#0077FF}
.vk-ico{font:800 12px/1 var(--body); letter-spacing:.02em; border:1.5px solid currentColor; border-radius:6px; padding:3px 4px}
.share-url{grid-column:1 / -1; width:100%; font:inherit; font-size:14px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink)}
@media (max-width:760px){ .share{grid-template-columns:1fr} }

/* footer */
.site-foot{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; padding-block:28px 8px; border-top:1px solid var(--line)}
.credit{font-size:14px; color:var(--muted)}
.credit a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--yolk)}
.credit a:hover{color:var(--yolk-ink)}

/* dark stage */
.dark{background:var(--stage); color:var(--stage-ink); box-shadow:0 0 0 100vmax var(--stage); clip-path:inset(0 -100vmax); padding-block:88px; margin-block:24px}
.dark .eyebrow{color:var(--stage-muted)}
.dark .sec-head p{color:var(--stage-muted)}
.dark .shot{background:var(--stage-line)}
.bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.hint{font:400 12px/1.3 var(--mono); color:var(--stage-muted)}
.styles{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.tile{display:grid; gap:12px; text-align:left; background:none; border:0; padding:0; color:inherit; perspective:900px}
.tile .art{border-radius:18px; overflow:hidden; aspect-ratio:200/260; max-width:100%; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)); box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.tile .art svg,.tile .art img{width:100%; height:100%; display:block; object-fit:cover}
.seg{display:inline-flex; padding:4px; border-radius:999px; background:var(--stage-line); gap:2px}
.seg button{border:0; background:transparent; color:var(--stage-muted); padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600}
.seg button[aria-pressed="true"]{background:var(--stage-ink); color:var(--stage)}
.bar-r{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.case .pic{border-radius:16px; overflow:hidden; aspect-ratio:4/3; max-width:100%; background:var(--line); margin-bottom:6px}
.case .pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.case:hover .pic img{transform:scale(1.05)}
.b .ico-img{width:100%; height:150px; object-fit:cover; border-radius:16px; display:block; background:var(--line)}
.hero-stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease}
.hero-stage video.on{opacity:1}
.hero-stage video{object-position:80% 50%}
.vid-toggle{position:absolute; right:16px; bottom:16px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid rgba(26,23,18,.15); background:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#1A1712; font-size:12px; line-height:1; display:grid; place-items:center}
.vid-toggle:hover{background:rgba(255,255,255,.65)}
.hero-date{padding-right:52px}
.ave{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; background:var(--ink); color:var(--bg); border-radius:32px; padding:clamp(24px,5vw,56px)}
.ave h2{color:var(--bg)}
.ave p{color:color-mix(in srgb, var(--bg) 72%, var(--ink)); font-size:17px; max-width:52ch}
.ave .eyebrow{color:var(--yolk)}
.ave-txt{display:grid; gap:14px}
.ave-cta{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.ave .btn.line{background:transparent; color:var(--bg); border-color:color-mix(in srgb, var(--bg) 35%, transparent)}
.ave-link{color:var(--bg); text-decoration-color:var(--yolk); text-underline-offset:3px}
.lead-form{display:grid; gap:12px; background:color-mix(in srgb, var(--bg) 7%, var(--ink)); border-radius:22px; padding:clamp(18px,3vw,26px)}
.fld{display:grid; gap:6px; font-size:13px; color:color-mix(in srgb, var(--bg) 70%, var(--ink))}
.fld input,.fld textarea{width:100%; font:inherit; font-size:16px; color:var(--bg); background:transparent; border:1px solid color-mix(in srgb, var(--bg) 25%, transparent); border-radius:12px; padding:11px 13px; resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--yolk)}
.chk{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; font-size:13px; line-height:1.45; color:color-mix(in srgb, var(--bg) 80%, var(--ink)); cursor:pointer}
.chk input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--yolk)}
.chk a{color:var(--bg); text-decoration-color:var(--yolk); text-underline-offset:2px}
.lead-form .btn{justify-self:start}
.lead-form .btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.form-note{font-size:13px; color:color-mix(in srgb, var(--bg) 60%, var(--ink)); min-height:1.4em}
.form-note.ok{color:var(--yolk)}
.form-note.err{color:#FF9A8A}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.legal{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px}
.legal a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.legal a:hover{color:var(--ink); border-color:var(--yolk)}
.cookie{position:fixed; z-index:40; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); margin-inline:auto; max-width:760px; display:flex; gap:16px; align-items:center; padding:16px 18px; border-radius:20px;
  background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line); box-shadow:0 18px 40px var(--shadow)}
.cookie p{font-size:13.5px; line-height:1.5; color:var(--ink)}
.cookie a{color:var(--ink); text-decoration-color:var(--yolk); text-underline-offset:2px}
.cookie .btn{flex:none}
@media (max-width:560px){ .cookie{flex-direction:column; align-items:stretch} .cookie .btn{justify-content:center} }
.tile:hover .art{box-shadow:0 22px 44px rgba(0,0,0,.45)}
.tile b{font-weight:600; font-size:15px; display:block}
.tile span{font-size:13px; color:var(--stage-muted); line-height:1.4; display:block}

/* test */
.test3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:stretch}
.test3 .shot{min-height:280px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:24px; display:grid; gap:12px; align-content:start}
.panel ol{margin:0; padding-left:20px; display:grid; gap:6px; font-size:15px}
.hyp{font-size:15px}
.hyp b{color:var(--yolk-ink)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.card{display:grid; gap:8px; align-content:start}
.card .art{border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:200/260; max-width:100%; background:#fff; cursor:pointer; padding:0; transition:transform .25s ease}
.card .art:hover{transform:translateY(-3px)}
.card .art svg{width:100%; height:100%; display:block}
.card .cap{font-size:13px; line-height:1.35}
.card .cap i{font-style:normal; color:var(--muted); display:block}
.tally{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tally button{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:7px 4px; font-size:13px}
.tally button:hover{border-color:var(--yolk)}
.meter{height:6px; border-radius:6px; background:var(--line); overflow:hidden}
.meter i{display:block; height:100%; background:var(--yolk); width:0; transition:width .3s}
.stat{font:400 12px/1.2 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums}

/* myths */
.myth-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; align-items:start}
.myth-wrap .shot{position:sticky; top:calc(env(safe-area-inset-top,0px) + 84px)}
.myths{display:grid; gap:12px}
.myth{display:grid; grid-template-columns:1fr 1.4fr; background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden}
.myth > div{padding:20px 22px; display:grid; gap:8px; align-content:start}
.myth .no{border-right:1px solid var(--line)}
.pill{justify-self:start; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.myth .yes .pill{background:var(--yolk-soft); border-color:transparent; color:var(--yolk-ink)}
.myth .no p{font-weight:600; text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--muted) 60%, transparent); text-decoration-thickness:1px}
.myth p{font-size:15px}

/* phrases */
.phrases{display:grid; grid-template-columns:1fr 1fr; gap:14px; list-style:none; margin:0; padding:0}
.phrases li{display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:22px 24px; background:var(--surface); border:1px solid var(--line); border-radius:22px}
.phrases li::before{content:"«"; font:800 44px/.6 var(--display); color:var(--yolk)}
.phrases p{font-size:18px; font-weight:500; line-height:1.45}
.copy{justify-self:start; border:1px solid var(--line); background:transparent; border-radius:999px; padding:6px 12px; font-size:13px; color:var(--muted)}
.copy:hover{color:var(--ink); border-color:var(--yolk)}

.check{margin:0; padding:0; list-style:none; display:grid; gap:12px; font-size:15px; max-width:780px}
.check li{display:grid; grid-template-columns:18px 1fr; gap:12px}
.check li::before{content:""; width:12px; height:15px; margin-top:4px; border:2px solid var(--yolk); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%}
.foot{color:var(--muted); font-size:13px; padding-top:8px; max-width:780px}

/* scroll reveal where supported; content is visible without it */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    @keyframes rise{from{opacity:0; transform:translateY(32px)}to{opacity:1; transform:none}}
  }
}

/* show mode */
#show{position:fixed; inset:0; z-index:50; display:grid; grid-template-rows:1fr auto; background:#111}
#stage{display:grid; place-items:center; overflow:hidden; cursor:pointer; min-height:0}
#stage svg{height:100%; width:100%; display:block}
.showbar{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(17,17,17,.92); color:#F2EFE8}
.showbar .t b{font:700 16px/1.2 var(--display); display:block}
.showbar .t span{font-size:13px; color:#B9B3A6}
.showbar .ctrls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.showbar button{background:transparent; color:#F2EFE8; border:1px solid #444; border-radius:999px; padding:8px 14px; font-size:14px}
.showbar button:hover{border-color:#F5B51F}
.showbar .n{font:500 13px var(--mono); color:#B9B3A6; font-variant-numeric:tabular-nums}

@media (max-width:980px){
  .links{display:none}
  .hero-foot,.split,.myth-wrap{grid-template-columns:1fr}
  .ctas{justify-content:flex-start}
  .stats{grid-template-columns:1fr 1fr}
  .stat-t:nth-child(3){padding-left:0; border-left:0}
  .bento{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:1fr 1fr}
  .styles{grid-template-columns:repeat(3,1fr)}
  .test3{grid-template-columns:1fr 1fr}
  .test3 .shot{grid-column:1 / -1; aspect-ratio:16/9; min-height:0}
  .myth-wrap .shot{position:relative; top:0}
  .band{aspect-ratio:16/9}
  .logos{grid-template-columns:1fr 1fr}
  .ave{grid-template-columns:1fr}
  .ave-cta{justify-content:flex-start}
  .mts-grid{grid-template-columns:1fr}
  .voices{position:static}
}
@media (max-width:700px){
  .hero-stage{aspect-ratio:4/5}
  .hero h1{max-width:100%}
  .cine{flex-direction:column; align-items:stretch; min-height:0}
  .cine img{position:relative; height:auto; aspect-ratio:16/9}
  .cine::after{display:none}
  .phrases{grid-template-columns:1fr}
  .test3{grid-template-columns:1fr}
}
@media (max-width:560px){
  section{padding-block:52px}
  .bento,.cases{grid-template-columns:1fr}
  .b-big{grid-column:auto; grid-row:auto}
  .b-photo .pic{aspect-ratio:16/10; min-height:0}
  .styles{grid-template-columns:1fr 1fr}
  .myth{grid-template-columns:1fr}
  .myth .no{border-right:0; border-bottom:1px solid var(--line)}
  .stats{grid-template-columns:1fr}
  .stat-t + .stat-t{padding-left:0; border-left:0; border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}