/* Klarocast — public landing page ("/", anonymous visitors only).
 *
 * Loaded after fonts.css and tokens.css (colors). Everything here is
 * specific to the landing: hero guide grid, device drawings (.kx … — the
 * app's real screens redrawn in CSS, hence Inter / Plus Jakarta Sans), bento,
 * FAQ. The portal's own sheet is portal.css; neither loads the other.
 *
 * Motion: one orchestrated hero entrance; every animation is dropped under
 * `prefers-reduced-motion: reduce`. `.no-js` keeps revealed blocks visible
 * when JavaScript is off. */

:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
--r1:8px;--r2:12px;--r3:16px;--r4:24px;--ease:cubic-bezier(.2,.7,.2,1);
--t-xs:12px;--t-sm:14px;--t-md:16px;--t-lg:18px;--t-xl:clamp(20px,2vw,24px);--t-2xl:clamp(32px,4.4vw,52px);--t-hero:clamp(44px,7.4vw,92px);}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-md)/1.6 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Big Shoulders Display","Hanken Grotesk",sans-serif;margin:0;letter-spacing:-.02em;line-height:1.15;font-weight:600}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
img{display:block}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--accent);color:var(--on-accent);padding:var(--s2) var(--s4);border-radius:var(--r1);z-index:200;font-weight:600}.skip:focus{top:var(--s2)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s4)}@media(min-width:768px){.wrap{padding:0 var(--s6)}}
.ic{width:20px;height:20px;flex:none}
.lead{color:var(--ink2);font-size:var(--t-lg);line-height:1.6;max-width:56ch;margin:var(--s4) 0 0}
.muted{color:var(--ink2)}.sm{font-size:var(--t-sm)}.center{text-align:center}
.sec{padding:var(--s9) 0;position:relative}@media(max-width:767px){.sec{padding:var(--s8) 0}}
.sec h2{font-size:var(--t-2xl);letter-spacing:-.035em;font-weight:600}
.sec-head{max-width:720px;margin-bottom:var(--s7)}.sec-head.c{margin-inline:auto;text-align:center}.sec-head.c .lead{margin-inline:auto}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border-radius:var(--r2);border:1px solid transparent;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--t-md);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,background .2s;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 24px -8px var(--glow)}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 32px -10px var(--glow)}
.btn:active{transform:translateY(0)}.btn .ic{width:18px;height:18px}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line2);box-shadow:none}.btn.ghost:hover{background:var(--raise)}
.btn.sm{min-height:36px;padding:0 var(--s4);font-size:var(--t-sm)}
.btn.full{width:100%}.btn.danger{background:var(--danger);color:#fff;box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.dangerh{color:var(--danger)!important}
/* nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.scrolled{background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s5);height:64px}
.logo{display:flex;align-items:center;gap:var(--s2);font:700 19px "Big Shoulders Display";color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.links{display:none;gap:var(--s1);margin-left:var(--s4)}.links a{color:var(--ink2);text-decoration:none;font-size:var(--t-sm);font-weight:500;padding:var(--s2) var(--s3);border-radius:var(--r1);transition:color .2s,background .2s}
.links a:hover{color:var(--ink);background:var(--line)}
@media(min-width:960px){.links{display:flex}}
.nav-r{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.ibtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r2);border:1px solid var(--line2);background:transparent;color:var(--ink2);transition:color .2s,background .2s}.ibtn:hover{color:var(--ink);background:var(--line)}
.ibtn svg{width:18px;height:18px;fill:currentColor}.ibtn .ic{fill:none}
.th-sun{display:none}:root[data-theme="light"] .th-sun{display:block}:root[data-theme="light"] .th-moon{display:none}
.nav .btn.ghost{display:none}@media(min-width:600px){.nav .btn.ghost{display:inline-flex}}
.nav .btn{min-height:40px;padding:0 var(--s4);font-size:var(--t-sm)}
/* hero */
.hero{padding:var(--s8) 0 var(--s7);text-align:center;position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-240px;width:1200px;height:900px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);z-index:-1;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent);-webkit-mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent);opacity:.6}
.badge{display:inline-flex;gap:var(--s2);align-items:center;border:1px solid var(--line2);background:var(--glass);border-radius:999px;padding:6px 14px 6px 8px;font-size:13px;color:var(--ink2);backdrop-filter:blur(8px)}
.badge b{background:var(--accent-soft);color:var(--accent-text);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}
.hero h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.05em;font-weight:700;margin:var(--s5) auto var(--s5);max-width:13ch}
.hero h1 em{font-style:normal;background:linear-gradient(95deg,#FFA23A 10%,#ffd9a8 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .hero h1 em{background-image:linear-gradient(95deg,#c25e00,#FFA23A)}
.hero .lead{margin:0 auto;font-size:clamp(17px,1.6vw,20px)}
.cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.cta-note{margin-top:var(--s4);font-size:13px;color:var(--ink3)}
.stage{position:relative;margin:var(--s8) auto 0;max-width:980px}
.stage .phone{position:absolute;right:-8px;bottom:-40px;width:168px;display:none;transform:rotate(3deg)}@media(min-width:820px){.stage .phone{display:block}}
.stage::after{content:"";position:absolute;inset:auto 8% -60px;height:120px;background:var(--glow);filter:blur(80px);z-index:-1}
/* notice */
.notice{margin-top:var(--s7);display:flex;gap:var(--s4);align-items:flex-start;text-align:left;border:1px solid var(--line2);border-radius:var(--r3);padding:var(--s4) var(--s5);background:var(--surface);font-size:var(--t-sm);color:var(--ink2);max-width:980px;margin-inline:auto}
.notice .ic{color:var(--accent-text);margin-top:2px}.notice b{color:var(--ink)}
/* TV mock */
.tv{background:#0a0a0e;border-radius:18px;padding:10px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 1px #000,0 50px 100px -40px rgba(0,0,0,.9)}
.tv-scr{border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#121218,#0b0b10);color:#f5f2ec;font-size:clamp(7px,1.05vw,12px);padding:1.4em;text-align:left}
.tv-foot{height:4px;width:30%;margin:10px auto -6px;background:#1c1c24;border-radius:4px}
.tv-top{display:flex;align-items:center;gap:2em;margin-bottom:1.3em}.tv-brand{display:flex;gap:.5em;align-items:center;font-weight:700;font-family:"Big Shoulders Display"}.tv-brand img{width:1.6em;height:1.6em}
.tv-tabs{display:flex;gap:1.6em;color:#8f8a80}.tv-tabs b{color:#fff;box-shadow:0 2px 0 #FFA23A;padding-bottom:3px}.tv-clock{margin-left:auto;color:#aaa;font-variant-numeric:tabular-nums}
@media(max-width:560px){.tv-tabs span:nth-child(n+4){display:none}}
.tv-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:1.5em;margin-bottom:1.3em}
.tv-video{position:relative;aspect-ratio:16/9;border-radius:.6em;background:radial-gradient(80% 90% at 70% 20%,rgba(255,162,58,.45),transparent 60%),radial-gradient(60% 70% at 10% 90%,rgba(91,140,255,.35),transparent 60%),linear-gradient(160deg,#2a2230,#0d0d14);overflow:hidden}
.live{position:absolute;left:.8em;top:.8em;background:#e5484d;color:#fff;font-weight:700;font-size:.8em;padding:.2em .6em;border-radius:.3em;letter-spacing:.05em}
.tv-bar{position:absolute;left:.8em;right:.8em;bottom:.8em;height:.3em;border-radius:1em;background:rgba(255,255,255,.2)}.tv-bar i{display:block;height:100%;width:58%;border-radius:inherit;background:#FFA23A}
.tv-meta{display:flex;flex-direction:column;justify-content:center;gap:.4em}.tv-meta small{color:#aaa}.tv-meta strong{font:600 1.7em/1.1 "Big Shoulders Display"}.tv-meta p{margin:0;color:#aaa;line-height:1.4}
.chips{display:flex;gap:.5em;margin-top:.3em}.chips em{font-style:normal;font-weight:600;border:1px solid rgba(255,255,255,.18);border-radius:.4em;padding:.25em .7em}.chips em:last-child{color:#ff8d8d}
.epg{position:relative;display:grid;gap:.35em}.now{position:absolute;top:-.2em;bottom:-.2em;width:2px;background:#FFA23A;z-index:2;margin-left:12%;box-shadow:0 0 8px #FFA23A}
.er{display:flex;gap:.35em}.ch{flex:0 0 18%;white-space:nowrap;overflow:hidden;display:flex;gap:.6em;align-items:center;background:#1a1a22;border-radius:.4em;padding:.75em .8em;font-weight:600}.ch i{width:1em;height:1em;border-radius:.25em}
.pg{background:#16161d;border-radius:.4em;padding:.75em .8em;color:#b7b2a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pg.on{background:#FFA23A;color:#1c1000;font-weight:700;box-shadow:0 0 0 2px #fff}
.vhero{aspect-ratio:21/8;border-radius:.6em;margin-bottom:1.2em;padding:1.4em;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(10,10,14,.92) 20%,transparent 70%),radial-gradient(70% 90% at 80% 30%,#ff9d3a,#6b2a08 55%,#1a1016)}
.vhero small{color:#FFA23A;font-weight:700;letter-spacing:.1em;font-size:.8em}.vhero strong{display:block;font:700 2em/1.1 "Big Shoulders Display";margin:.2em 0}.vhero p{margin:0 0 .6em;color:#bbb}.chips em.pl{background:#FFA23A;color:#1c1000;border-color:#FFA23A}
.vrow{margin-top:.9em}.vrow span{font-weight:600;color:#ccc;display:block;margin-bottom:.5em}.vrow div{display:grid;grid-template-columns:repeat(6,1fr);gap:.6em}.vrow i{aspect-ratio:2/3;border-radius:.4em}.vrow i.f{box-shadow:0 0 0 2px #fff,0 0 20px rgba(255,162,58,.6);transform:scale(1.06)}
/* phone mock */
.phone{background:#0a0a0e;border-radius:28px;padding:7px;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.ph-scr{border-radius:22px;background:#0f0f14;color:#f5f2ec;padding:12px 10px 8px;font-size:10px;position:relative;overflow:hidden;text-align:left}
.notch{width:36%;height:12px;background:#000;border-radius:0 0 8px 8px;margin:-12px auto 10px}
.ph-h{display:flex;gap:6px;align-items:center;font-size:12px}.ph-h img{width:16px;height:16px}
.ph-card{position:relative;margin:10px 0;border-radius:10px;padding:10px 10px 18px;background:linear-gradient(140deg,#3a2615,#15151c);border:1px solid rgba(255,255,255,.08)}.ph-card small{color:#bbb;display:block}.ph-card strong{font-size:12px}
.ph-card .tv-bar{bottom:7px;left:10px;right:10px}
.ph-l{color:#aaa;margin:8px 0 6px;font-weight:600}.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.posters i{aspect-ratio:2/3;border-radius:5px}
.ph-nav{display:flex;justify-content:space-around;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.ph-nav *{width:14px;height:3px;border-radius:2px;background:#333}.ph-nav b{background:#FFA23A}
/* groups */
.grp.alt{background:linear-gradient(180deg,transparent,var(--bg2) 20%,var(--bg2) 80%,transparent)}
.grp-in{display:grid;gap:var(--s7);align-items:center}@media(min-width:1000px){.grp-in{grid-template-columns:5fr 6fr;gap:var(--s8)}.grp.alt .grp-copy{order:2}}
.flist{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;gap:var(--s1)}
.fi{display:flex;gap:var(--s4);padding:var(--s3) var(--s4);margin-inline:calc(-1 * var(--s4));border-radius:var(--r2);transition:background .2s}
.fi:hover{background:var(--line)}
.fi .ic{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text)}
.fi h4{font-size:var(--t-md);font-family:Inter;font-weight:600;letter-spacing:-.01em}.fi p{margin:2px 0 0;font-size:var(--t-sm);color:var(--ink2);line-height:1.5}
.vis-frame{position:relative;border-radius:var(--r4);padding:var(--s5);background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.vis-frame::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.5;pointer-events:none}
.prof{padding:var(--s7) var(--s5);text-align:center}.pq{font:600 var(--t-xl) "Big Shoulders Display";margin:0 0 var(--s6)}
.avs{display:flex;justify-content:center;gap:var(--s5);flex-wrap:wrap}.avs span{display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--ink2);position:relative}
.avs i{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;font:700 28px "Big Shoulders Display";font-style:normal;color:#1c1000;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));transition:transform .25s var(--ease),box-shadow .25s}
.avs span:first-child i{box-shadow:0 0 0 3px var(--bg2),0 0 0 5px var(--accent)}
.avs i.add{background:transparent;border:1.5px dashed var(--line2);color:var(--ink3)}
@media(max-width:480px){.avs{gap:var(--s3)}.avs i{width:56px;height:56px;font-size:22px;border-radius:16px}}
.avs em{font-style:normal;font-size:11px;color:var(--ink3)}
.cw{margin-top:var(--s7);text-align:left}.cw small{color:var(--ink2);font-weight:600}.cw-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s3)}
.cw-row div{aspect-ratio:16/10;border-radius:var(--r2);position:relative;overflow:hidden;background:linear-gradient(150deg,#3a2615,#15151c);border:1px solid var(--line)}
.cw-row div:nth-child(2){background:linear-gradient(150deg,#1b2c6b,#101018)}.cw-row div:nth-child(3){background:linear-gradient(150deg,#0f4a37,#0f1013)}
.cw-row b{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}.cw-row b::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:#FFA23A;border-radius:inherit}
.cw-row span{position:absolute;left:8px;bottom:16px;font-size:11px;color:#eee}
/* connect bento */
.bento{display:grid;gap:var(--s4);grid-template-columns:1fr}@media(min-width:900px){.bento{grid-template-columns:repeat(6,1fr)}.b-qr{grid-column:span 4;grid-row:span 2}.b-help,.b-dev{grid-column:span 2}}
.tile{position:relative;border-radius:var(--r4);padding:var(--s6);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.tile:hover{border-color:var(--line2)}
.b-qr{display:flex;flex-direction:column}.b-qr .facts{margin-top:auto;padding-top:var(--s5)}.b-qr .flow{margin-bottom:var(--s5)}
.tile h3{font-size:var(--t-xl);margin:var(--s4) 0 var(--s2)}.tile p{margin:0;color:var(--ink2);font-size:var(--t-sm)}
.tile>.ic{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text)}
.flow{display:grid;gap:var(--s4);margin-top:var(--s6);align-items:center}@media(min-width:640px){.flow{grid-template-columns:1fr auto 1fr}}
.fl-tv{background:#0b0b10;color:#f5f2ec;border-radius:var(--r3);padding:var(--s5);border:1px solid rgba(255,255,255,.1);display:flex;gap:var(--s4);align-items:center}
.fl-tv .qr{width:96px;flex:none}.fl-tv small{color:#aaa;font-size:12px;display:block}.fl-tv strong{font:700 22px/1.2 "Big Shoulders Display",sans-serif;letter-spacing:.08em;color:#FFA23A}
.fl-arrow{justify-self:center;color:var(--ink3);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}.fl-arrow .ic{animation:nudge 2s var(--ease) infinite}
@media(max-width:639px){.fl-arrow .ic{transform:rotate(90deg);animation:none}}
@keyframes nudge{50%{transform:translateX(4px)}}
.fl-ph{border-radius:var(--r3);padding:var(--s5);background:var(--bg2);border:1px solid var(--line)}.fl-ph b{display:block;margin-bottom:var(--s3);font-size:var(--t-sm)}
.fake-in{height:36px;border-radius:var(--r1);background:var(--input);border:1px solid var(--line2);margin-bottom:var(--s2);display:flex;align-items:center;padding:0 var(--s3);font-size:13px;color:var(--ink3)}
.fake-btn{height:36px;border-radius:var(--r1);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:13px;font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);font-size:13px;color:var(--ink2)}.facts span{display:flex;gap:6px;align-items:center}.facts .ic{width:16px;height:16px;color:var(--ok)}
.mini{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s2)}.mini li{display:flex;align-items:center;gap:var(--s3);font-size:13px;padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--bg2);border:1px solid var(--line)}
.mini .ic{width:16px;height:16px;color:var(--ink2)}.mini em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink3)}
/* devices */
.devgrid{display:grid;gap:var(--s4);grid-template-columns:1fr}@media(min-width:720px){.devgrid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1040px){.devgrid{grid-template-columns:repeat(4,1fr)}}
.dv{border-radius:var(--r3);padding:var(--s5);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:var(--s2)}
.dv .ic{width:28px;height:28px;color:var(--accent-text);margin-bottom:var(--s2)}.dv h3{font-size:var(--t-lg)}.dv p{margin:0;font-size:var(--t-sm);color:var(--ink2)}
.dv .tag{margin-top:auto;padding-top:var(--s3);font-size:12px;color:var(--ink3)}
/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);counter-reset:s}@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r3);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),transparent)}
.steps .n{font:600 13px "Big Shoulders Display",sans-serif;color:var(--accent-text);display:inline-flex;width:32px;height:32px;border-radius:50%;border:1px solid var(--accent);align-items:center;justify-content:center}
.steps h3{font-size:var(--t-lg);margin:var(--s4) 0 var(--s2)}.steps p{margin:0;color:var(--ink2);font-size:var(--t-sm)}
@media(min-width:900px){.steps li:not(:last-child)::after{content:"";position:absolute;top:47px;right:calc(-1 * var(--s4));width:var(--s4);height:1px;background:var(--line2)}}
/* faq */
.faq-in{display:grid;gap:var(--s7)}@media(min-width:960px){.faq-in{grid-template-columns:1fr 1.6fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s4);align-items:center;padding:var(--s5) 0;font-weight:600;font-size:var(--t-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .3s var(--ease);color:var(--ink2)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-text)}
.faq .ans{padding:0 var(--s6) var(--s5) 0;color:var(--ink2);font-size:var(--t-sm);margin:0}
/* footer */
footer{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s6);font-size:var(--t-sm);color:var(--ink2)}
.foot{display:grid;gap:var(--s6);grid-template-columns:1fr 1fr}@media(min-width:900px){.foot{grid-template-columns:2fr repeat(2,1fr)}}
.foot .brand{grid-column:1/-1}@media(min-width:900px){.foot .brand{grid-column:auto}}
.foot h4{font:600 var(--t-xs) Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:var(--s4)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}.foot a{color:var(--ink2);text-decoration:none}.foot a:hover{color:var(--ink)}
.foot .brand p{max-width:40ch;margin:var(--s4) 0 0}
.ph-tag{font-size:11px;border:1px dashed var(--warn);color:var(--warn);border-radius:6px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.legal-line{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-size:13px;color:var(--ink3)}
/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* ============ a3 : type ============ */
:root{--disp:"Big Shoulders Display","Hanken Grotesk",sans-serif;--t-2xl:clamp(40px,5.6vw,72px);--t-hero:clamp(64px,12.5vw,184px)}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.005em;font-weight:800;line-height:1}
h3,h4{font-weight:700;letter-spacing:.005em}
.sec h2{font-weight:800;letter-spacing:-.01em;line-height:.95}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.62;max-width:52ch}
.logo{font:800 24px var(--disp);letter-spacing:.01em}
.btn{border-radius:10px;font-weight:700;letter-spacing:.005em}
.links a{font-weight:600}
/* ============ a3 : hero guide ============ */
.hero3{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,7vw,96px) 0 var(--s8)}
.guide{--gut:56px;--now:calc(var(--gut) + (100% - var(--gut)) * .5667);position:absolute;inset:0 0 auto 0;height:min(760px,100%);z-index:-2;padding:24px 0 0;font:600 13px var(--disp);letter-spacing:.02em;
 -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.gruler{display:flex;height:28px;align-items:center;color:var(--ink3);margin-left:var(--gut)}
.gruler span{flex:1;border-left:1px solid var(--line2);padding-left:8px;font-size:14px}
.gr{display:flex;gap:4px;height:clamp(64px,8vw,92px);margin-bottom:4px;opacity:0;transform:translateX(40px);animation:gin .9s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + 100ms)}
.gn{width:calc(var(--gut) - 4px);flex:none;display:grid;place-items:center;font:800 22px var(--disp);color:var(--ink3);border-right:1px solid var(--line)}
.gt{display:flex;gap:4px;flex:1;min-width:0}
.gc{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:12px 14px;border-radius:4px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);color:var(--ink3);font-size:clamp(13px,1.2vw,16px)}
.gc.hot{background:var(--accent);color:#1c1000;border-color:transparent;animation:hot .5s 1.55s both;box-shadow:0 0 60px -6px var(--glow)}
.ph{position:absolute;top:18px;bottom:0;left:var(--now);width:2px;background:var(--accent);box-shadow:0 0 24px 2px var(--glow);transform-origin:top;animation:ph 1.1s .5s var(--ease) both}
.ph-t{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--accent);color:#1c1000;font:800 14px var(--disp);padding:3px 8px;border-radius:3px;letter-spacing:.03em}
.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 40%,color-mix(in srgb,var(--bg) 30%,transparent) 70%,transparent),
 radial-gradient(40% 50% at 57% 30%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
@keyframes gin{to{opacity:1;transform:none}}
@keyframes ph{from{transform:scaleY(0)}}
@keyframes hot{from{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink3);box-shadow:none}}
.hero-in{position:relative;padding-top:clamp(24px,5vw,72px)}
.onair{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--s4);font:700 20px var(--disp);color:var(--ink2);letter-spacing:.01em}
.onair i{width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.2);animation:pulse 2s 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(229,72,77,0)}}
.hero3 h1{font-size:var(--t-hero);font-weight:900;line-height:.84;letter-spacing:-.012em;margin:0;max-width:9ch;text-wrap:balance}
.hero3 h1 .l{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.hero3 h1 .l>span{display:inline-block;animation:rise .9s var(--ease) both}
.hero3 h1 .l:nth-child(1)>span{animation-delay:.25s}.hero3 h1 .l:nth-child(2)>span{animation-delay:.36s}.hero3 h1 .l:nth-child(3)>span{animation-delay:.47s}
@keyframes rise{from{transform:translateY(105%)}}
.hero3 .lead{margin-top:var(--s5);color:var(--ink2);animation:fade .8s .8s both}
.hero3 .cta{justify-content:flex-start;animation:fade .8s .95s both}
.hero3 .cta-note{color:var(--ink3);font-size:14px;margin-top:var(--s4);animation:fade .8s 1.05s both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.hero3 .stage{margin-top:clamp(56px,8vw,112px);max-width:1080px;margin-inline:auto 0;perspective:1600px}
.hero3 .stage .tv{transform-origin:50% 0}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .hero3 .stage .tv{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
 .hero3 .stage .phone{animation:float linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
 @keyframes tilt{from{transform:rotateX(16deg) scale(.95)}to{transform:none}}
 @keyframes float{from{translate:0 80px}to{translate:0 0}}
 .grp-vis .vis-frame,.bento .tile,.shell{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
 @keyframes lift{from{transform:translateY(48px)}to{transform:none}}
}}
.hero3 .notice{margin-top:var(--s8);max-width:none;border-left:3px solid var(--accent);border-radius:6px}
:root[data-theme="light"] .gc{background:rgba(255,255,255,.6)}
:root[data-theme="light"] .gc.hot{background:var(--accent)}
@media(max-width:767px){
 .guide{--gut:36px}.gn{font-size:17px}.gruler span{font-size:11px;padding-left:4px}
 .gc{padding:8px 8px;font-size:12px}.gr{height:54px}
 .veil{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),var(--bg) 85%),linear-gradient(90deg,var(--bg),transparent)}
 .hero3 h1{font-size:clamp(50px,16vw,96px)}
}
/* motion only for the hero: scrap the generic per-section fade-ups */
.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}
/* ============ a3 : sections ============ */
.grp.alt{background:linear-gradient(180deg,transparent,var(--bg2) 20%,var(--bg2) 80%,transparent)}
.fi h4{font-size:22px;font-weight:700}
.flist .ic{color:var(--accent-text)}
.steps li{border-radius:4px;background:none;border:0;border-top:2px solid var(--line2);padding:var(--s5) 0 0}
.steps li:first-child{border-top-color:var(--accent)}
.steps li::after{display:none!important}
.steps .n{font:900 72px/1 var(--disp);width:auto;height:auto;border:0;color:var(--accent-text);justify-content:flex-start}
.steps h3{font-size:28px;margin-top:var(--s3)}
.sec-head.c{text-align:left;margin-inline:0}
.faq details summary{font:600 18px/1.35 "Hanken Grotesk",sans-serif}
@media (prefers-reduced-motion:reduce){.gr,.hero3 h1 .l>span,.ph,.gc.hot{opacity:1!important;transform:none!important}}
.kx-tv .k{position:absolute;inset:0;--u:calc(100cqw/1280);font-size:calc(13*var(--u));overflow:hidden;background:#050507}.kx-tv .tnav{position:absolute;left:calc(37*var(--u));top:calc(19*var(--u));width:calc(1206*var(--u));height:calc(48*var(--u));border-radius:calc(16*var(--u));background:rgba(28,28,32,.64);border:calc(1*var(--u)) solid rgba(255,255,255,.08);z-index:3}.kx-tv .tlogo{position:absolute;left:calc(17*var(--u));top:calc(12*var(--u));display:flex;align-items:center;gap:calc(4*var(--u));font-weight:700;font-size:calc(19*var(--u));letter-spacing:calc(-.4*var(--u))}.kx-tv .tlogo img{width:calc(25*var(--u));height:calc(25*var(--u))}.kx-tv .ni{position:absolute;top:calc(9*var(--u));height:calc(28*var(--u));transform:translateX(-50%);display:flex;align-items:center;padding:0 calc(15*var(--u));border-radius:calc(14*var(--u));color:#A49A94;font-size:calc(12.5*var(--u));font-weight:500;white-space:nowrap;border:calc(2*var(--u)) solid transparent}.kx-tv .ni.ic{padding:0 calc(6*var(--u));font-size:calc(13*var(--u))}.kx-tv .ni.on{background:rgba(255,255,255,.12);color:#fff}.kx-tv .ni.fo{border-color:rgba(255,162,58,.9);background:rgba(255,162,58,.12);color:#fff}.kx-tv .tclock{position:absolute;right:calc(56*var(--u));top:calc(17*var(--u));font-size:calc(11.5*var(--u));color:#8A827C;font-variant-numeric:tabular-nums}.kx-tv .tav{position:absolute;right:calc(18*var(--u));top:calc(10*var(--u));width:calc(27*var(--u));height:calc(27*var(--u));border-radius:50%;display:grid;place-items:center;font-size:calc(12*var(--u));font-weight:600;background:linear-gradient(135deg,#FFA23A,#f26700)}.kx-tv .pt{position:absolute;left:calc(37*var(--u));display:flex;align-items:baseline;gap:calc(14*var(--u))}.kx-tv .pt b{font-size:calc(29*var(--u));font-weight:700;letter-spacing:calc(-1*var(--u))}.kx-tv .pt small{font-size:calc(12*var(--u));color:#A49A94}.kx-tv .lchips{position:absolute;right:calc(37*var(--u));top:calc(85*var(--u));display:flex;gap:calc(7*var(--u))}.kx-tv .lc{height:calc(32*var(--u));display:flex;align-items:center;gap:calc(7*var(--u));padding:0 calc(13*var(--u));border-radius:calc(16*var(--u));background:rgba(255,255,255,.07);border:calc(1*var(--u)) solid rgba(255,255,255,.08);color:#CFC6C0;font-size:calc(12*var(--u));font-weight:500;white-space:nowrap}.kx-tv .lc.fo{border:calc(2*var(--u)) solid rgba(255,162,58,.9);background:rgba(255,162,58,.16);color:#fff}.kx-tv .lprev{position:absolute;left:calc(48*var(--u));top:calc(140*var(--u));width:calc(320*var(--u));height:calc(138*var(--u));border-radius:calc(10*var(--u));overflow:hidden;background:#111}.kx-tv .scene{position:absolute;inset:0;background:radial-gradient(40% 55% at 70% 40%,rgba(255,236,210,.9),transparent 70%),radial-gradient(35% 60% at 25% 65%,rgba(120,150,190,.8),transparent 70%),linear-gradient(160deg,#5b6a7c,#20262e 60%,#3b2a20)}.kx-tv .lmeta{position:absolute;left:calc(383*var(--u));top:calc(140*var(--u));right:calc(40*var(--u))}.kx-tv .lmeta small{display:block;font-size:calc(9.5*var(--u));letter-spacing:calc(1.2*var(--u));color:#e8c49c;font-weight:500}.kx-tv .lmeta sup{font-size:calc(6*var(--u))}.kx-tv .lmeta strong{display:block;font-size:calc(27*var(--u));font-weight:600;letter-spacing:calc(-.5*var(--u));margin-top:calc(8*var(--u))}.kx-tv .lmeta em{display:block;width:calc(12*var(--u));height:calc(1*var(--u));background:#8A827C;margin-top:calc(14*var(--u))}.kx-tv .ruler span{position:absolute;top:calc(291*var(--u));font-size:calc(9.5*var(--u));letter-spacing:calc(.8*var(--u));color:#8A827C;transform:translateX(-50%)}.kx-tv .en{position:absolute;left:calc(44*var(--u));width:calc(14*var(--u));height:calc(42*var(--u));display:flex;align-items:center;justify-content:center;font-size:calc(10*var(--u));color:#8A827C}.kx-tv .elogo{position:absolute;left:calc(67*var(--u));width:calc(32*var(--u));height:calc(22*var(--u));border-radius:calc(5*var(--u));background:#16161b;display:grid;place-items:center;font-size:calc(11*var(--u));font-weight:800;color:var(--c);box-shadow:inset 0 0 0 calc(1*var(--u)) rgba(255,255,255,.06)}.kx-tv .ename{position:absolute;left:calc(106*var(--u));width:calc(86*var(--u));height:calc(42*var(--u));display:flex;align-items:center;font-size:calc(12*var(--u));color:#CFC6C0;white-space:nowrap;overflow:hidden}.kx-tv .ehd{position:absolute;left:calc(194*var(--u));height:calc(12*var(--u));padding:0 calc(3*var(--u));border-radius:calc(3*var(--u));border:calc(1*var(--u)) solid rgba(255,255,255,.18);font-size:calc(6.5*var(--u));line-height:calc(10*var(--u));color:#A49A94}.kx-tv .eheart{position:absolute;left:calc(219*var(--u));color:#5F5952;font-size:calc(9*var(--u));display:flex}.kx-tv .ec{position:absolute;height:calc(42*var(--u));border-radius:calc(6*var(--u));background:rgba(255,255,255,.05);border:calc(1*var(--u)) solid rgba(255,255,255,.08);padding:calc(6*var(--u)) calc(10*var(--u));overflow:hidden;white-space:nowrap}.kx-tv .ec b{display:block;font-size:calc(11*var(--u));font-weight:500;color:#E6DED8;overflow:hidden;text-overflow:ellipsis}.kx-tv .ec small{display:block;font-size:calc(8.5*var(--u));color:#8A827C;margin-top:calc(2*var(--u))}.kx-tv .ec.none{display:flex;align-items:center;font-size:calc(11*var(--u));color:#8A827C;background:rgba(255,255,255,.03)}.kx-tv .ec.fo{background:rgba(255,162,58,.16);border:calc(1.5*var(--u)) solid rgba(255,162,58,.9)}.kx-tv .ec.fo b{color:#fff}.kx-tv .ec.fo small{color:#e8c49c}.kx-tv .plh{position:absolute;top:calc(313*var(--u));bottom:0;width:calc(1*var(--u));background:rgba(255,162,58,.75);z-index:2}.kx-tv .plh::before{content:"";position:absolute;left:calc(-5*var(--u));top:calc(-4*var(--u));width:calc(11*var(--u));height:calc(11*var(--u));border-radius:50%;background:#FFA23A;box-shadow:0 0 calc(12*var(--u)) calc(3*var(--u)) rgba(255,162,58,.5)}.kx-tv .k.tv-live::before{content:"";position:absolute;left:calc(220*var(--u));top:calc(-80*var(--u));width:calc(380*var(--u));height:calc(300*var(--u));background:radial-gradient(closest-side,rgba(255,162,58,.14),transparent);pointer-events:none}.kx-tv /* home */
.bd{position:absolute;right:0;top:0;width:calc(900*var(--u));height:calc(430*var(--u));background:
 radial-gradient(28% 40% at 70% 34%,rgba(214,176,120,.55),transparent 70%),radial-gradient(30% 55% at 86% 60%,rgba(70,96,110,.7),transparent 70%),
 radial-gradient(22% 30% at 40% 25%,rgba(255,220,160,.35),transparent 70%),linear-gradient(180deg,#27302f,#141816 70%,#050507)}.kx-tv .bdv{position:absolute;inset:0;background:linear-gradient(90deg,#050507 12%,rgba(5,5,7,.85) 38%,rgba(5,5,7,.2) 70%,rgba(5,5,7,.1)),linear-gradient(180deg,transparent 40%,#050507 60%)}.kx-tv .feat{position:absolute;left:calc(37*var(--u));top:calc(110*var(--u));width:calc(640*var(--u))}.kx-tv .feat>small{font-size:calc(9*var(--u));letter-spacing:calc(2.6*var(--u));font-weight:600;color:#e8c49c}.kx-tv .feat strong{display:block;font-size:calc(44*var(--u));font-weight:700;letter-spacing:calc(-2*var(--u));line-height:1.1;margin:calc(10*var(--u)) 0 calc(12*var(--u));white-space:nowrap}.kx-tv .mch{display:flex;gap:calc(7*var(--u))}.kx-tv .mch em{font-style:normal;height:calc(25*var(--u));display:flex;align-items:center;padding:0 calc(9*var(--u));border-radius:calc(5*var(--u));background:rgba(255,255,255,.08);font-size:calc(11*var(--u));color:#CFC6C0}.kx-tv .mch em.r{background:rgba(255,255,255,.12);border:calc(1*var(--u)) solid rgba(255,255,255,.18);color:#fff}.kx-tv .feat p{margin:calc(22*var(--u)) 0 0;font-size:calc(13*var(--u));line-height:calc(19*var(--u));color:#CFC6C0;max-width:calc(610*var(--u));letter-spacing:calc(.2*var(--u))}.kx-tv .fbt{display:flex;gap:calc(9*var(--u));margin-top:calc(26*var(--u))}.kx-tv .bw{height:calc(38*var(--u));display:flex;align-items:center;gap:calc(8*var(--u));padding:0 calc(20*var(--u)) 0 calc(22*var(--u));border-radius:calc(19*var(--u));background:#fff;color:#0A0A0D;font-size:calc(13*var(--u));font-weight:500;box-shadow:0 calc(6*var(--u)) calc(24*var(--u)) rgba(255,255,255,.12)}.kx-tv .bw .ki{font-size:calc(11*var(--u))}.kx-tv .brd{width:calc(38*var(--u));height:calc(38*var(--u));border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:calc(1*var(--u)) solid rgba(255,255,255,.18);font-size:calc(15*var(--u))}.kx-tv .bg{height:calc(38*var(--u));display:flex;align-items:center;padding:0 calc(18*var(--u));border-radius:calc(19*var(--u));background:rgba(255,255,255,.1);border:calc(1*var(--u)) solid rgba(255,255,255,.18);font-size:calc(12.5*var(--u));font-weight:500}.kx-tv .rowt{position:absolute;left:calc(37*var(--u));font-size:calc(15*var(--u));font-weight:600;letter-spacing:calc(-.2*var(--u))}.kx-tv .pc{position:absolute;top:calc(450*var(--u));width:calc(148*var(--u))}.kx-tv .pc small{display:block;margin-top:calc(9*var(--u));font-size:calc(10.5*var(--u));color:#CFC6C0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:calc(.2*var(--u))}.kx-tv .kp{position:relative;display:block;height:calc(208*var(--u));border-radius:calc(8*var(--u));overflow:hidden;box-shadow:inset 0 0 0 calc(1*var(--u)) rgba(255,255,255,.06)}.kx-tv .kp b{position:absolute;left:calc(8*var(--u));right:calc(8*var(--u));bottom:14%;text-align:center;font-weight:900;font-size:calc(20*var(--u));line-height:.95;letter-spacing:calc(-.5*var(--u));text-transform:none;text-shadow:0 calc(2*var(--u)) calc(12*var(--u)) rgba(0,0,0,.35)}.kx-tv .pc.fo{transform:scale(1.05);transform-origin:50% 40%}.kx-tv .pc.fo .kp{box-shadow:0 0 0 calc(2*var(--u)) rgba(255,162,58,.9),0 calc(10*var(--u)) calc(30*var(--u)) rgba(0,0,0,.6)}.kx-tv .pc.fo small{color:#fff}.kx-tv /* profile picker */
.glow{position:absolute;left:50%;top:48%;width:calc(760*var(--u));height:calc(560*var(--u));transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,162,58,.13),transparent)}.kx-tv .who{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.kx-tv .who strong{font-size:calc(37*var(--u));font-weight:700;letter-spacing:calc(-1.6*var(--u))}.kx-tv .pfs{display:flex;gap:calc(38*var(--u));margin:calc(44*var(--u)) 0 calc(48*var(--u))}.kx-tv .pf{display:flex;flex-direction:column;align-items:center;gap:calc(13*var(--u));width:calc(132*var(--u))}.kx-tv .pf i{width:calc(122*var(--u));height:calc(122*var(--u));border-radius:calc(22*var(--u));display:grid;place-items:center;font-style:normal;font-size:calc(46*var(--u));font-weight:300}.kx-tv .pf b{font-weight:500;font-size:calc(14.5*var(--u));color:#CFC6C0}.kx-tv .pf.fo i{box-shadow:0 0 0 calc(2*var(--u)) #050507,0 0 0 calc(4*var(--u)) rgba(255,162,58,.9);transform:scale(1.04)}.kx-tv .pf.fo b{color:#fff}.kx-tv .pf.add i{background:rgba(255,255,255,.05);border:calc(1.5*var(--u)) dashed rgba(255,255,255,.2);color:#8A827C;font-size:calc(30*var(--u))}.kx-tv .pf.add b{color:#8A827C;font-size:calc(13.5*var(--u))}.kx-tv .mng{height:calc(36*var(--u));display:flex;align-items:center;padding:0 calc(19*var(--u));border-radius:calc(9*var(--u));background:rgba(255,255,255,.1);border:calc(1*var(--u)) solid rgba(255,255,255,.12);font-size:calc(12.5*var(--u));font-weight:500}
.kx-ph .k{position:absolute;inset:0;--p:calc(100cqw/390);font-size:calc(13*var(--p));overflow:hidden;background:#050507}.kx-ph .pbd{position:absolute;left:0;right:0;top:0;height:calc(520*var(--p));background:
 radial-gradient(30% 25% at 62% 30%,rgba(214,176,120,.6),transparent 70%),radial-gradient(45% 35% at 85% 45%,rgba(70,96,110,.8),transparent 70%),linear-gradient(180deg,#2d3634,#161b19);}.kx-ph .pbd::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.45),rgba(5,5,7,.2) 34%,rgba(5,5,7,.85) 74%,#050507)}.kx-ph .psb{position:absolute;left:calc(28*var(--p));right:calc(28*var(--p));top:calc(16*var(--p));display:flex;justify-content:space-between;font-size:calc(14*var(--p));font-weight:600}.kx-ph .psb i{width:calc(22*var(--p));height:calc(11*var(--p));border-radius:calc(3*var(--p));border:calc(1.5*var(--p)) solid #fff}.kx-ph .phd{position:absolute;left:calc(20*var(--p));top:calc(56*var(--p));display:flex;align-items:center;gap:calc(5*var(--p));font-size:calc(21*var(--p));letter-spacing:calc(-.6*var(--p))}.kx-ph .phd img{width:calc(26*var(--p));height:calc(26*var(--p))}.kx-ph .pft{position:absolute;left:calc(20*var(--p));right:calc(20*var(--p));top:calc(300*var(--p))}.kx-ph .pft>small{font-size:calc(11*var(--p));letter-spacing:calc(2*var(--p));font-weight:600;color:#e8c49c}.kx-ph .pft strong{display:block;font-size:calc(31*var(--p));font-weight:700;letter-spacing:calc(-1.2*var(--p));margin:calc(8*var(--p)) 0 calc(11*var(--p))}.kx-ph .pft .mch{display:flex;gap:calc(6*var(--p))}.kx-ph .pft .mch em{font-style:normal;height:calc(24*var(--p));padding:0 calc(9*var(--p));display:flex;align-items:center;border-radius:calc(6*var(--p));background:rgba(255,255,255,.08);font-size:calc(12*var(--p));color:#CFC6C0}.kx-ph .pbt{display:flex;gap:calc(10*var(--p));margin-top:calc(16*var(--p))}.kx-ph .pbt .bw{height:calc(48*var(--p));border-radius:calc(24*var(--p));padding:0 calc(26*var(--p));font-size:calc(15*var(--p));font-weight:600;gap:calc(8*var(--p));display:flex;align-items:center;background:#fff;color:#0A0A0D}.kx-ph .pbt .bw .ki{font-size:calc(17*var(--p))}.kx-ph .pbt .brd{width:calc(48*var(--p));height:calc(48*var(--p));border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:calc(1*var(--p)) solid rgba(255,255,255,.18);font-size:calc(20*var(--p))}.kx-ph .ppl{position:absolute;left:calc(20*var(--p));top:calc(494*var(--p));display:flex;gap:calc(8*var(--p));white-space:nowrap}.kx-ph .ppl span{padding:calc(9*var(--p)) calc(18*var(--p));border-radius:calc(999*var(--p));background:rgba(255,255,255,.05);border:calc(1*var(--p)) solid rgba(255,255,255,.08);font-size:calc(13*var(--p));color:#A49A94}.kx-ph .ppl span.on{background:rgba(255,162,58,.16);border-color:rgba(255,162,58,.42);color:#e8c49c}.kx-ph .prh{position:absolute;left:calc(20*var(--p));right:calc(20*var(--p));top:calc(560*var(--p));display:flex;justify-content:space-between;align-items:baseline}.kx-ph .prh b{font-size:calc(18*var(--p));font-weight:600;letter-spacing:calc(-.3*var(--p))}.kx-ph .prh span{font-size:calc(13*var(--p));color:#FFA23A;font-weight:500}.kx-ph .prr{position:absolute;left:calc(20*var(--p));top:calc(596*var(--p));display:flex;gap:calc(13*var(--p))}.kx-ph .rc{width:calc(200*var(--p));border-radius:calc(12*var(--p));overflow:hidden;background:rgba(255,255,255,.05);border:calc(1*var(--p)) solid rgba(255,255,255,.08);position:relative}.kx-ph .rimg{display:block;height:calc(113*var(--p));position:relative;overflow:hidden}.kx-ph .rimg b{position:absolute;left:calc(10*var(--p));right:calc(10*var(--p));bottom:26%;text-align:center;font-weight:900;font-size:calc(17*var(--p));line-height:.95}.kx-ph .rbar{position:absolute;left:0;right:0;top:calc(110*var(--p));height:calc(3*var(--p));background:rgba(255,255,255,.25)}.kx-ph .rbar i{display:block;height:100%;background:#FFA23A}.kx-ph .rc small{display:block;padding:calc(9*var(--p)) calc(12*var(--p)) calc(11*var(--p));font-size:calc(12*var(--p));color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kx-ph .ptab{position:absolute;left:0;right:0;bottom:0;height:calc(84*var(--p));padding:calc(10*var(--p)) calc(12*var(--p)) 0;display:flex;background:rgba(10,8,8,.72);border-top:calc(1*var(--p)) solid rgba(255,255,255,.07);backdrop-filter:blur(calc(20*var(--p)))}.kx-ph .ptab span{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(5*var(--p));font-size:calc(11*var(--p));font-weight:500;color:#8A827C}.kx-ph .ptab .ki{font-size:calc(23*var(--p))}.kx-ph .ptab span.on{color:#FFA23A}

.kx{font-family:Inter,system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;line-height:1.25;text-align:left;letter-spacing:0}
.kx *{box-sizing:border-box}
.kx .ki{width:1em;height:1em;flex:none;display:block}
.kx-tv.tv-scr{padding:0;aspect-ratio:16/9;position:relative;container-type:inline-size;background:#050507;border-radius:10px;overflow:hidden}
.kx-ph.ph-scr{padding:0;aspect-ratio:390/844;position:relative;container-type:inline-size;background:#050507;border-radius:22px;overflow:hidden}
.kx .kp b,.kx .rimg b{font-family:"Big Shoulders Display",Inter,sans-serif}
.tv{padding:8px;border-radius:16px;background:#0b0b0d}
/* phone in hero: bigger than the a3 stick-figure */
.stage .phone{width:clamp(150px,18vw,208px);bottom:-56px;right:-18px}
.grp-in>*{min-width:0}.cw4 .rr{overflow:hidden}
/* Organiser: TV picker + mobile « Reprendre » */
.prof4{padding:var(--s5)}.prof4 .tv{box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.cw4{margin-top:var(--s5);border-radius:14px;background:#050507;padding:14px 0 14px 16px;overflow:hidden}
.cw4 .prh4{display:flex;justify-content:space-between;align-items:baseline;padding-right:16px}.cw4 .prh4 b{font:600 16px Inter,sans-serif;color:#fff;letter-spacing:-.3px}.cw4 .prh4 span{font:500 13px Inter,sans-serif;color:#FFA23A}
.cw4 .rr{display:flex;gap:12px;margin-top:10px}
.cw4 .rc4{flex:none;width:clamp(150px,30%,200px);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.cw4 .rc4 .kp{display:block;overflow:hidden;height:auto;aspect-ratio:200/113;border-radius:0;position:relative}.cw4 .rc4 .kp b{position:absolute;left:8px;right:8px;text-align:center;font-weight:900;line-height:.95;font-family:"Big Shoulders Display",sans-serif;font-size:clamp(14px,1.6vw,19px);bottom:22%}
.cw4 .bar{display:block;height:3px;background:rgba(255,255,255,.25)}.cw4 .bar i{display:block;height:100%;background:#FFA23A}
.cw4 small{display:block;padding:8px 12px 10px;font:500 12px Inter,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw4 .rc4 small em{font-style:normal;color:#A49A94}
/* Connecter: real TV QR panel + real portal /link page */
.fl-tv{display:none}
.qrp{background:#0d0d10;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:260px;margin-inline:auto;width:100%}
.qrp .qh{font-size:13px;color:#CFC6C0;font-weight:500}.qrp .qbox{background:#fff;border-radius:10px;padding:8px;width:150px}.qrp .qbox .qr{width:100%;display:block}
.qrp .qs{font-size:12px;color:#A49A94}.qrp strong{font:600 30px/1 Inter,sans-serif;letter-spacing:.14em;color:#FFA23A;font-variant-numeric:tabular-nums}.qrp small{font-size:10.5px;color:#8A827C}
.fl-ph{padding:0;background:none;border:0}
.plink{background:#F7F4EF;border-radius:18px;padding:16px 12px 12px;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:#1B1815;border:1px solid rgba(27,24,21,.08);max-width:300px;margin-inline:auto;width:100%}
.plogo{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:13px;margin-bottom:12px}.plogo img{width:20px;height:20px}
.pcard{background:#fff;border-radius:14px;padding:16px 14px;box-shadow:0 8px 24px -12px rgba(27,24,21,.2)}
.pt1{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.15}.pcard p{margin:6px 0 10px;font-size:11.5px;line-height:1.5;color:#5F574F}
.pcard label{display:block;font-size:11px;font-weight:700;margin:8px 0 4px}
.pin{display:flex;align-items:center;height:34px;border-radius:9px;border:1px solid #ddd6cc;padding:0 11px;font-size:12px;color:#6F675F;background:#fff}
.pin.code{justify-content:center;font:600 16px "JetBrains Mono",ui-monospace,monospace;color:#1B1815;background:#FBF9F5;border:2px solid #1B1815;letter-spacing:.06em}
.pbtn{display:grid;place-items:center;height:36px;border-radius:10px;background:#1B1815;color:#fff;font-weight:700;font-size:12.5px;margin-top:12px}
.pcard>small{display:block;text-align:center;font-size:10.5px;color:#6F675F;margin-top:10px;padding-top:10px;border-top:1px solid #ece6dd}
/* mini lists, app wording */
.mini li{align-items:flex-start}.mini li>div{min-width:0}.mini li b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini li small{display:block;color:var(--ink3);font-size:12px}
.mini .ic{color:var(--accent-text);margin-top:2px}.mini em.out{color:#e5484d;font-weight:600}

/* ============ portal integration ============ */
/* "Se connecter" stays reachable at every width; the nav download button
 * yields below 600px, where the hero's own button is one scroll away. */
.nav .btn.ghost{display:inline-flex}
.nav .nav-dl{display:none}
@media(min-width:600px){.nav .nav-dl{display:inline-flex}}
/* No JavaScript: the theme toggle would do nothing, so it isn't offered. */
.no-js [data-theme-toggle]{display:none}

/* ============ quieter pass ============
 * One loud element (the hero's live guide); everything after it is plain
 * type on the page. No glows, no frosted glass, no icon tiles. */
.btn,.btn:hover{box-shadow:none;transform:none}
.btn:hover{filter:brightness(1.06)}
.btn.ghost:hover{filter:none}
.nav.scrolled{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.stage::after,.vis-frame::before{display:none}
.vis-frame{background:var(--surface);box-shadow:none}
.veil{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 40%,color-mix(in srgb,var(--bg) 30%,transparent) 70%,transparent)}
.gc.hot,.ph{box-shadow:none}
.grp.alt{background:var(--bg2)}
/* feature lists: term + sentence, ruled, no icon squares */
.flist{gap:0;border-top:1px solid var(--line)}
.fi{display:block;margin:0;padding:var(--s4) 0;border-radius:0;border-bottom:1px solid var(--line)}
.fi:hover{background:none}
.fi h4{font-size:20px}
/* connect tiles: flatter, the QR tile carries the weight */
.tile{border-radius:var(--r2);padding:var(--s5)}
.tile h3{margin-top:0}
.b-help,.b-dev{background:transparent}
/* devices: a definition list, not a card row */
.devlist{margin:0;display:grid;gap:0 var(--s7);border-top:1px solid var(--line2)}
@media(min-width:820px){.devlist{grid-template-columns:1fr 1fr}}
.devlist>div{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.devlist dt{font:700 24px/1.1 var(--disp)}
.devlist dd{margin:var(--s2) 0 0;color:var(--ink2);max-width:46ch}
#appareils .sec-head{margin-bottom:var(--s6)}
/* steps: smaller numerals, left-ragged */
.steps .n{font-size:48px}
/* FAQ heading column sits slightly lower than the list */
@media(min-width:960px){.faq-in>div:first-child{padding-top:var(--s5)}}

/* ============ store badges ============
 * Official artwork, untouched (static/portal/img/badges/). Both badges
 * share one visible height, --bh (Apple's on-screen minimum is 40px).
 * Google's PNG carries transparent bands above and below the plate
 * (plate = 192/250 of the file), so the image is scaled up and the bands
 * absorbed by negative margins. Gap ≥ Google's clear space (¼ height).
 * Empty URL → `.soon`: dimmed, « Bientôt » tag, no link. */
.stores{--bh:44px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
.store{position:relative;display:inline-flex;align-items:center;gap:var(--s2);line-height:0;border-radius:8px;text-decoration:none}
.store img{display:block;width:auto}
.store-as{height:var(--bh)}
.store-gp{height:calc(var(--bh) * 250 / 192);margin:calc(var(--bh) * -29 / 192) 0}
.store.soon{cursor:default}
.store.soon img{opacity:.5;filter:grayscale(.3)}
.store-soon{font:600 12px/1 "Hanken Grotesk",sans-serif;font-style:normal;padding:4px 7px;border-radius:4px;background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
.cta .stores{margin-right:var(--s2)}
.foot-stores{--bh:40px;margin-top:var(--s5)}
.foot h4{font:700 18px var(--disp);letter-spacing:0;text-transform:none;color:var(--ink)}