/* ═══ artin — v2: artic.win structure × arvel.world surfaces × the artin banner ═══
   Monochrome, like the banner: white paper, black ink, grey mist. Black-and-white
   mountain and cloud photography is the only colour field. Geist for words, Geist
   Mono for the accent phrase, buttons and every number. */
:root{
  --bg:#ffffff; --bg2:#f5f5f5; --ink:#0a0a0a; --ink2:rgba(10,10,10,.62); --ink3:rgba(10,10,10,.42);
  --line:rgba(10,10,10,.08); --line2:rgba(10,10,10,.15); --ok:#15803d;
  --sans:"Geist",-apple-system,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --glass:rgba(255,255,255,.72);
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:-.055em}
.dim{color:var(--ink3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink3)}
h1,h2{font-weight:500;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(28px,3.2vw,42px)}
h3{font-weight:500;letter-spacing:-.02em}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:36px;padding:0 15px;border-radius:5px;font:500 13px/1 var(--mono);letter-spacing:-.01em;border:1px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{border-color:var(--ink3)}
.btn:active{transform:scale(.98)}
.btn.solid{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:inset 0 -2px 0 rgba(255,255,255,.12),0 1px 0 rgba(0,0,0,.4)}
.btn.solid:hover{background:#262626}
.btn.solid:disabled{opacity:.88;cursor:not-allowed}
.btn.ghost{background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.btn.lg{height:44px;padding:0 22px;font-size:13.5px}
.btn.wide{width:100%;height:40px}
.arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ── nav: floating glass bar ── */
.nav{position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);width:min(1080px,calc(100% - 24px));height:52px;display:flex;align-items:center;gap:28px;padding:0 8px 0 18px;border-radius:10px;background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 var(--line),0 12px 32px -20px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:500;letter-spacing:-.035em}
.brand img{width:26px;height:26px}
.links{display:flex;gap:26px;font-size:14px;margin:0 auto}
.links a{opacity:.78}.links a:hover{opacity:1}
.nav-r{display:flex;align-items:center;gap:12px}
.xlink{display:grid;place-items:center;width:32px;height:32px}
.xlink svg{width:15px;height:15px;fill:var(--ink)}

/* ── hero: the banner ── */
.hero{position:relative;min-height:max(640px,100vh);display:flex;align-items:center;justify-content:flex-end;padding:110px max(40px,6vw) 80px;overflow:hidden}
.peak{position:absolute;left:0;bottom:0;width:min(1240px,74vw);height:auto;pointer-events:none;user-select:none;mix-blend-mode:multiply;opacity:0;transform:translateY(24px);transition:opacity 1.6s var(--ease),transform 2.2s var(--ease)}
.peak.in{opacity:1;transform:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(transparent,#fff);pointer-events:none}
.hero-copy{position:relative;z-index:2;width:min(520px,100%)}
.hero h1{font-size:clamp(42px,5vw,70px)}
.hero .lede{margin-top:22px;max-width:440px;color:var(--ink2);font-size:15.5px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hbar{display:inline-flex;margin-top:24px;border:1px solid var(--line2);border-radius:5px;overflow:hidden;font:12px var(--mono);background:#fff}
.hbar .tag{background:var(--ink);color:#fff;padding:8px 10px;font-weight:600}
.hbar-t{padding:8px 12px;color:var(--ink2);white-space:nowrap}

/* ── scene: framed clouds + window ── */
.scene{padding:0 16px;height:220vh;position:relative}
.scene-frame{position:sticky;top:0;height:100vh;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:#eee}
.scene-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p,0)*.1))}
.win{position:relative;width:min(820px,calc(100% - 40px));height:min(480px,58vh);background:rgba(255,255,255,.84);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.95);border-radius:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.35);display:flex;flex-direction:column}
.win-bar,.panel-bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--ink3);position:relative;flex:none}
.win-bar i,.panel-bar i{width:7px;height:7px;border-radius:2px;background:rgba(10,10,10,.13)}
.win-bar>span,.panel-bar>span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.win-body{flex:1;display:grid;place-items:center;padding:36px}
.reveal{font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.14;text-align:center;max-width:620px;text-wrap:balance}
.reveal .w{color:rgba(10,10,10,.13);transition:color .35s}
.reveal .w.on{color:var(--ink)}

/* ── people ── */
.people{position:relative;min-height:115vh;margin-top:60px;overflow:hidden;background-image:radial-gradient(rgba(10,10,10,.11) 1px,transparent 1px);background-size:22px 22px}
.people::before,.people::after{content:"";position:absolute;left:0;right:0;height:120px;z-index:1;pointer-events:none}
.people::before{top:0;background:linear-gradient(#fff,transparent)}
.people::after{bottom:0;background:linear-gradient(transparent,#fff)}
.cards{position:absolute;inset:0;pointer-events:none}
.pcard{position:absolute;width:150px;padding:7px 7px 8px;background:#fff;border:1px solid var(--line2);border-radius:4px;box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;filter:grayscale(1) contrast(1.05)}
.pcard div{display:flex;justify-content:space-between;margin-top:7px;font:10px var(--mono)}
.pcard div span{color:var(--ink3)}
.people-copy{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:30vh 24px 24vh;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.people-copy .big{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;color:var(--ink2)}
.people-copy .big .mono{color:var(--ink)}
.change{font-size:clamp(38px,5vw,64px);margin-top:26px;padding:4px 18px;background:#fff}

/* ── shared section frame ── */
.plats,.row,.lookup,.receipt,.costs,.faq,.closer{width:min(var(--wrap),calc(100% - 48px));margin-left:auto;margin-right:auto}
.sec-head{text-align:center;max-width:660px;margin:0 auto}
.sec-head p{margin-top:16px;color:var(--ink2)}
.fine{margin-top:14px;text-align:center;font:11px var(--mono);color:var(--ink3)}

/* ── platform cards (arvel's card row) ── */
.plats{padding:120px 0 40px}
.plat-row{display:grid;grid-template-columns:1fr 2.1fr 1fr 1fr 1fr;gap:10px;margin-top:56px}
.pc{display:flex;flex-direction:column;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:420px}
.pc h3{font-size:17px}
.pc>p{font-size:12.5px;color:var(--ink2);margin-top:5px;min-height:38px}
.ticks{list-style:none;font-size:12.5px;color:var(--ink2);display:grid;gap:5px;margin:2px 0 12px}
.ticks li::before{content:"✓";font-size:10px;margin-right:8px;color:var(--ink)}
.ph{flex:1;margin-top:10px;border-radius:7px;background:var(--img) center/cover;position:relative;display:flex;align-items:flex-start;padding:10px;min-height:180px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);font:10.5px var(--mono);color:var(--ink2);white-space:nowrap}
.chip b{font-weight:500;color:var(--ink)}
.chip i{font-style:normal;display:grid;place-items:center;width:14px;height:14px;border-radius:3px;background:var(--ink);color:#fff;font-size:9px}
.mini{margin:auto;width:min(320px,90%);display:grid;gap:6px}
.mini-r{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);font:11px var(--mono)}
.mini-r.on{outline:1.5px solid var(--ink)}
.mini-r img{width:20px;height:20px;border-radius:50%;filter:grayscale(1)}
.mini-r b{margin-left:auto;font-weight:500}

/* ── rows: copy + photo stage (arvel) ── */
.row{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center;padding:90px 0}
.row.rev{grid-template-columns:1.15fr 1fr}
.kicker{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin-bottom:16px}
.kbox{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--ink);color:#fff;font:11px var(--mono)}
.row-copy h2{font-size:clamp(28px,3vw,40px)}
.lines{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.lines li{padding:16px 0;border-bottom:1px solid var(--line)}
.lines b{font-weight:500;font-size:14px}
.lines p{font-size:13.5px;color:var(--ink2);margin-top:4px;max-width:440px}
.stage{position:relative;border-radius:14px;background:var(--img) center/cover;padding:56px 44px;min-height:520px;display:grid;place-items:center;overflow:hidden}
.panel{width:100%;border:1px solid rgba(255,255,255,.95);border-radius:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.4)}
.panel.narrow{max-width:380px}
.panel-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.panel-foot{padding:10px 16px;font:10.5px var(--mono);color:var(--ink3)}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{height:26px;padding:0 10px;border:1px solid var(--line2);border-radius:4px;background:#fff;font:12px var(--mono);color:var(--ink2);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.field{display:flex;align-items:center;height:38px;border:1px solid var(--line2);border-radius:5px;background:#fff;font:13px var(--mono);padding:0 12px;gap:2px}
.field:focus-within{border-color:var(--ink)}
.field .pre{color:var(--ink3)}
.field input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;color:var(--ink)}
.row2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.kv{display:grid;grid-template-columns:88px 1fr;gap:7px 12px;font:12px var(--mono);padding:6px 2px}
.kv dt{color:var(--ink3);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding-top:1px}
.note{font:10.5px var(--mono);color:var(--ink3);text-align:center}
.tbl{width:100%;border-collapse:collapse;font:12px var(--mono)}
.tbl th{text-align:left;font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th:last-child,.tbl td:last-child{text-align:right}
.tbl tr.new td{animation:flash 1.4s var(--ease)}
@keyframes flash{from{background:rgba(10,10,10,.06)}to{background:transparent}}
.to{display:inline-block;padding:2px 7px;border-radius:3px;background:var(--ink);color:#fff}
.sell{color:var(--ink3)}
.claim .who{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.claim .who img{width:36px;height:36px;border-radius:50%;filter:grayscale(1)}
.claim .who b{display:block;font:500 13px var(--mono)}
.claim .who span{font-size:12px;color:var(--ink3)}
.ok{margin-left:auto;font:10.5px var(--mono);font-style:normal;color:var(--ok);background:rgba(21,128,61,.09);padding:3px 8px;border-radius:3px}

/* ── how it works: grey band ── */
.how{background:var(--bg2);padding:110px max(24px,calc((100% - var(--wrap))/2));margin-top:60px}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.how-head h2{margin-top:12px}
.how-head>p{max-width:360px;color:var(--ink2);font-size:14px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:60px}
.steps li{border-top:1px solid var(--line2);padding-top:18px;position:relative}
.steps li::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--ink)}
.steps .n{font:11px var(--mono);color:var(--ink3)}
.steps h3{font-size:17px;margin-top:18px}
.steps p{font-size:13.5px;color:var(--ink2);margin-top:6px;max-width:300px}
.steps .meta{display:block;margin-top:22px;font:11px var(--mono);color:var(--ink3)}

/* ── lookup ── */
.lookup{position:relative;padding:150px 0;text-align:center;overflow:hidden}
.tags{position:absolute;inset:0;pointer-events:none}
.tags span{position:absolute;font:11px var(--mono);padding:3px 8px;border-radius:3px;border:1px solid var(--line2);background:#fff;color:var(--ink2);animation:bob 6s ease-in-out infinite alternate}
.tags span.a{background:var(--ink);color:#fff;border-color:var(--ink)}
@keyframes bob{to{transform:translateY(-12px)}}
.lookup h2{position:relative}
.look{position:relative;max-width:560px;margin:38px auto 0;text-align:left}
.look-row{display:flex;gap:8px;margin-top:10px}
.look select,.look input{height:40px;border:1px solid var(--line2);border-radius:5px;background:#fff;font:13px var(--mono);padding:0 12px;color:var(--ink);outline:0}
.look input{flex:1;min-width:0}
.look input:focus,.look select:focus{border-color:var(--ink)}
.look .btn{height:40px}
.look-out{margin-top:22px;text-align:center;color:var(--ink2);font-size:14px}
.look-out b{color:var(--ink);font-weight:500}
.look-out code{font:12px var(--mono);background:var(--bg2);padding:2px 6px;border-radius:3px}

/* ── receipt ── */
.receipt{padding:60px 0 110px;text-align:center}
.receipt .sub{margin-top:12px;color:var(--ink2)}
.log-panel{max-width:660px;margin:44px auto 0;text-align:left;background:#fff;border-color:var(--line2);box-shadow:0 30px 70px -40px rgba(0,0,0,.3)}
.log-top{display:grid;grid-template-columns:210px 1fr;border-bottom:1px solid var(--line)}
.coin{display:grid;place-items:center;min-height:130px;background:var(--img) center/cover;color:#fff;font-size:30px;letter-spacing:-.04em;font-weight:500}
.log-top .kv{padding:20px}
.log{padding:18px 20px}
.log ol{list-style:none;margin-top:10px;font:12px/1.9 var(--mono);color:var(--ink2)}
.log li::before{content:"> ";color:var(--ink3)}
.log li b{font-weight:500;color:var(--ink)}
.log li.live::before{content:"✓ ";color:var(--ok)}
.log li.live b{color:var(--ok)}
.log li{opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s var(--ease)}
.log.in li{opacity:1;transform:none}
.log.in li:nth-child(2){transition-delay:.15s}.log.in li:nth-child(3){transition-delay:.3s}.log.in li:nth-child(4){transition-delay:.45s}.log.in li:nth-child(5){transition-delay:.6s}

/* ── costs ── */
.costs{padding:40px 0 110px}
.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.cost{position:relative;padding:28px;border-right:1px solid var(--line)}
.cost:last-child{border-right:0}
.cost.hot{background:var(--ink);color:#fff}
.cost.hot>p,.cost.hot .price small,.cost.hot ul{color:rgba(255,255,255,.6)}
.cost.hot li::before{background:#fff}
.cost h3{font-size:16px}
.cost>p{font-size:13px;color:var(--ink3);margin-top:2px}
.price{font:400 46px/1 var(--mono);letter-spacing:-.06em;margin:32px 0 24px}
.price small{font-size:12px;letter-spacing:0;color:var(--ink3);margin-left:5px}
.cost ul{list-style:none;font-size:13px;color:var(--ink2);display:grid;gap:7px}
.cost li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--ink3);margin-right:10px;vertical-align:middle}
.pill{position:absolute;top:24px;right:24px;font:10px var(--mono);background:#fff;color:var(--ink);padding:3px 7px;border-radius:3px}

/* ── faq ── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:60px 0 120px;align-items:start}
.faq-sub{margin-top:12px;font-size:13.5px;color:var(--ink2)}
.faq-sub a{text-decoration:underline;text-underline-offset:3px}
.faq-l h2{margin-top:12px}
.qlist{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.qlist li{border-bottom:1px solid var(--line)}
.qlist button{display:flex;align-items:center;gap:18px;width:100%;padding:15px 4px;border:0;background:none;font:14px var(--sans);color:var(--ink2);text-align:left;cursor:pointer}
.qlist button span{font:11px var(--mono);color:var(--ink3)}
.qlist button::after{content:"→";margin-left:auto;font-family:var(--mono);opacity:0;transform:translateX(-6px);transition:.25s var(--ease)}
.qlist li.on button{color:var(--ink)}
.qlist li.on button::after{opacity:1;transform:none}
.qlist .qa-m{display:none;padding:0 4px 16px 44px;font-size:14px;color:var(--ink2)}
.faq-card{position:sticky;top:90px;border-radius:14px;background:var(--img) center/cover;min-height:520px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.qn{font:11px var(--mono);color:var(--ink2);align-self:flex-start;background:rgba(255,255,255,.75);padding:3px 7px;border-radius:3px}
.qa{background:rgba(255,255,255,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.95);border-radius:10px;padding:22px}
.qq{font:11px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.1em}
.qt{margin-top:10px;font-size:clamp(18px,1.7vw,23px);letter-spacing:-.025em;line-height:1.3;font-weight:450}
.qa.swap{animation:qfade .5s var(--ease)}
@keyframes qfade{from{opacity:0;transform:translateY(8px)}}

/* ── closer ── */
.closer{padding:60px 0 110px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.closer h2{font-size:clamp(30px,4vw,52px);max-width:900px;margin-top:4px}
.closer>p:not(.eyebrow){color:var(--ink2)}
.closer .btn{margin-top:6px}
.closer-row{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:12px;width:100%;margin-top:56px;align-items:end}
.cc{border-radius:12px;background:var(--img) center/cover;height:260px;display:flex;align-items:flex-end;justify-content:center;padding:18px}
.cc.mid{height:330px;align-items:center}

/* ── footer: black card ── */
.foot{margin:0 12px 12px;border-radius:16px;background:var(--ink);color:#fff;padding:56px max(28px,4vw) 26px;overflow:hidden}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-top h2{font-size:clamp(30px,3.4vw,44px);color:#fff}
.cols{display:flex;gap:56px;flex-wrap:wrap}
.cols div{display:flex;flex-direction:column;gap:9px;font-size:13px}
.cols b{font-weight:500;margin-bottom:4px}
.cols a{color:rgba(255,255,255,.6)}.cols a:hover{color:#fff}
.foot-mark{display:flex;align-items:center;gap:min(2.4vw,28px);margin:90px 0 40px}
.foot-mark img{width:clamp(80px,13vw,190px)}
.foot-mark span{font-size:clamp(90px,15vw,230px);font-weight:500;letter-spacing:-.06em;line-height:.8}
.disc{font-size:12px;color:rgba(255,255,255,.5);max-width:760px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.foot-b{display:flex;justify-content:space-between;margin-top:20px;font:11px var(--mono);color:rgba(255,255,255,.45)}

/* ── reveals ── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .links{display:none}
  .nav{padding-left:14px}.nav-r{margin-left:auto}
  .hero{flex-direction:column;justify-content:flex-start;align-items:stretch;padding:120px 16px 0;min-height:auto}
  .peak{position:relative;width:135%;max-width:none;margin:40px 0 0 -8%}
  .scene{padding:0 8px}
  .plat-row{grid-template-columns:1fr 1fr}
  .pc.wide{grid-column:1/-1}
  .pc{min-height:320px}
  .row,.row.rev,.faq{grid-template-columns:1fr;gap:36px;padding:64px 0}
  .row.rev .stage{order:2}
  .stage{padding:32px 14px;min-height:0}
  .how-head{flex-direction:column;align-items:flex-start}
  .steps,.cost-grid{grid-template-columns:1fr}
  .cost{border-right:0;border-bottom:1px solid var(--line)}
  .log-top{grid-template-columns:1fr}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
  .pcard{width:108px}
  .look-row{flex-wrap:wrap}.look input{flex-basis:100%;order:-1}
  .faq-card{display:none}
  .qlist li.on .qa-m{display:block}
  .closer-row{grid-template-columns:1fr}.cc,.cc.mid{height:200px}
  .foot-mark{margin:60px 0 30px}
}
@media (max-width:560px){
  .plats,.row,.lookup,.receipt,.costs,.faq,.closer{width:calc(100% - 32px)}
  .plat-row{grid-template-columns:1fr}
  .nav .btn{padding:0 11px}
  .hbar-t{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.peak{opacity:1;transform:none}
  .reveal .w{color:var(--ink)}
}

/* ═══ LIVE STATES ═══ */
.seg button.soon{opacity:.45;border-style:dashed}
.pc.soon{position:relative}
.pc.soon .ph{filter:grayscale(1) opacity(.55)}
.soon-tag{position:absolute;top:14px;right:14px;font:10px var(--mono);padding:2px 6px;border-radius:3px;border:1px dashed var(--line2);color:var(--ink3)}
.who-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12px;min-height:46px}
.who-row img{width:28px;height:28px;border-radius:50%;filter:grayscale(1)}
.who-row b{display:block;font:500 12.5px var(--mono)}
.who-row span{font:10.5px var(--mono);color:var(--ink3)}
.who-row em{margin-left:auto;font:10.5px var(--mono);font-style:normal;color:var(--ink2);background:var(--bg2);padding:3px 7px;border-radius:3px}
.err{color:#b42318}
.note.err{color:#b42318}
.note b{color:var(--ink);font-weight:500}
.note a,.kv a{text-decoration:underline;text-underline-offset:2px}
.steps-mini{display:grid;gap:5px;font:11.5px var(--mono);padding:4px 2px}
.steps-mini div{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.steps-mini i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink3)}
.steps-mini .sending i{border-color:var(--ink);border-top-color:transparent;animation:spin .8s linear infinite}
.steps-mini .done{color:var(--ink)}.steps-mini .done i{background:var(--ok);border-color:var(--ok)}
.steps-mini .fail{color:#b42318}.steps-mini .fail i{background:#b42318;border-color:#b42318}
.steps-mini a{margin-left:auto;color:var(--ink3)}
@keyframes spin{to{transform:rotate(360deg)}}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tbl .empty{text-align:center!important;color:var(--ink3);padding:34px 14px;white-space:normal}
.tbl .ci{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:-4px;margin-right:7px;object-fit:cover}
.tbl a{color:var(--ink3)}.tbl a:hover{color:var(--ink)}
.look-row.tight{margin:0}
.look-row.tight input{flex:1;min-width:0;height:38px;border:1px solid var(--line2);border-radius:5px;background:#fff;font:13px var(--mono);padding:0 12px;outline:0}
.look-row.tight input:focus{border-color:var(--ink)}
.look-row.tight .btn{height:38px}
#cout{display:flex;flex-direction:column;gap:12px}
.nv{margin-left:auto;font:10.5px var(--mono);font-style:normal;color:var(--ink3);background:var(--bg2);padding:3px 8px;border-radius:3px}
.vc{max-width:420px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line2);border-radius:8px;background:#fff;box-shadow:0 30px 60px -40px rgba(0,0,0,.3)}
.vc .who{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.vc .who img{width:36px;height:36px;border-radius:50%;filter:grayscale(1)}
.vc .who b{display:block;font:500 13px var(--mono)}
.vc .who span{font-size:12px;color:var(--ink3)}
.vc .ok{margin-left:auto}
.kv dd b{font-weight:500}
#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:80;background:var(--ink);color:#fff;font:12.5px var(--mono);padding:11px 16px;border-radius:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);transition:.35s var(--ease)}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast a{text-decoration:underline;color:#fff}

.who-row .man{display:flex;flex-direction:column;gap:6px;width:100%}
.who-row .man .dim{font:11px/1.45 var(--sans)}