/* Kernlux Development Labs — shared design system (kernlux.com)
   Dark, Glass, violet + cyan. Self-hosted fonts, no external requests, no JS needed to read anything. */
@font-face{font-family:"Geist";src:url(fonts/geist-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#070B16; --bg-2:#0C1226; --surface:rgba(255,255,255,.045); --surface-hi:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09); --line-hi:rgba(110,168,255,.45);
  --text:#E6F0FF; --muted:#A9BEDC; --faint:#7D93B8;
  --violet:#2F6BFF; --violet-hi:#6EA8FF; --violet-lo:#1F4FD8; --cyan:#22D3EE; --cyan-lo:#06B6D4;
  --ok:#4ADE80; --warn:#FBBF24;
  --accent-1:#5B93FF; --accent-2:#2F6BFF;   /* the helper bubble and the accessibility button share these */
  --radius:16px; --radius-sm:10px; --maxw:1160px;
  --font-display:"Geist",system-ui,sans-serif; --font-body:"Geist",system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--font-body);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 520px at 85% -8%,rgba(47,107,255,.22),transparent 60%),radial-gradient(700px 480px at 5% 8%,rgba(34,211,238,.09),transparent 60%)}
img,svg{max-width:100%;display:block} img{height:auto} a{color:var(--violet-hi);text-decoration:none} a:hover{color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--violet);color:#fff;padding:8px 14px;border-radius:8px;z-index:100} .skip:focus{left:8px}
/* .vh: a heading that exists for the outline but is not drawn. Used where a section has
   no visible title, so heading levels never skip (h1 -> h2 -> h3). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,11,22,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;margin-right:auto} .brand img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{color:var(--muted);font-size:15px;font-weight:500;padding:8px 12px;border-radius:9px;transition:color .15s,background .15s}
.nav a:hover,.nav a[aria-current=page]{color:#fff;background:var(--surface)}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 12px;font:600 14px var(--font-body);cursor:pointer}

/* ---- buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--font-body);padding:14px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap}
.btn.primary{background:linear-gradient(180deg,var(--accent-1),var(--accent-2));color:#fff;box-shadow:0 8px 28px -8px rgba(31,79,216,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(31,79,216,.95),inset 0 1px 0 rgba(255,255,255,.35);color:#fff}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--text)} .btn.ghost:hover{border-color:var(--line-hi);background:var(--surface-hi);color:#fff}
.btn.small{padding:10px 16px;font-size:14px;border-radius:10px}

/* ---- type */
h1,h2,h3{font-family:var(--font-display);color:#fff;line-height:1.08;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(40px,6.2vw,82px);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.8vw,48px);font-weight:700} h3{font-size:21px;font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1em} .lead{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:812px}
.eyebrow{font:600 12.5px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.grad{background:linear-gradient(95deg,#BFDBFF 0%,#4C86FF 45%,#22D3EE 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
code,kbd,.mono{font-family:var(--font-mono);font-size:.9em} code{background:var(--surface);border:1px solid var(--line);padding:2px 7px;border-radius:7px}

/* ---- hero */
.hero{position:relative;padding:60px 0 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{margin:22px 0 24px} .hero .lead{margin-bottom:34px} .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero.center .wrap{grid-template-columns:1fr;text-align:center;justify-items:center} .hero.center .lead{margin-inline:auto}
.hero.center .cta-row{justify-content:center}
.hero-art{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
.hero-art .halo{position:absolute;inset:-14%;background:radial-gradient(closest-side,rgba(47,107,255,.45),rgba(34,211,238,.14) 55%,transparent 72%);filter:blur(10px)}
.hero-art .star{position:absolute;inset:6%;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.2deg)}}
.chip-float{position:absolute;background:rgba(16,17,27,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font:500 13px var(--font-body);color:var(--muted);box-shadow:0 18px 40px -18px #000}
.chip-float b{color:#fff;font-weight:600;display:block;font-size:14px}
.cf1{left:-4%;top:14%} .cf2{right:-2%;top:46%} .cf3{left:6%;bottom:6%}

/* ---- sections */
section{position:relative} .sec{padding:38px 0} .sec.tight{padding:26px 0}
.sec-head{max-width:720px;margin-bottom:32px} .sec-head h2{margin:12px 0 12px} .sec-head p{color:var(--muted);margin:0}
.sec-head.with-action{max-width:none;display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.sec-head.with-action>div{max-width:720px} .sec-head.with-action .btn{flex:none;margin-bottom:2px}
.band{background:linear-gradient(180deg,transparent,rgba(47,107,255,.07),transparent);border-block:1px solid var(--line)}

/* ---- cards + grids */
.grid{display:grid;gap:20px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.022));border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;transition:transform .2s,border-color .2s,background .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
a.card{display:block;color:inherit} a.card:hover{transform:translateY(-4px);border-color:var(--line-hi);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
.card h3{margin:0 0 8px} .card p{color:var(--muted);margin:0;font-size:16px}
.card .num{font:600 13px var(--font-mono);color:var(--cyan);letter-spacing:.14em;margin-bottom:18px;display:block}
.app{display:flex;flex-direction:column;gap:14px} .app p{margin-top:2px} .app-foot{margin-top:auto}
.app-top{display:flex;align-items:center;gap:16px} .app-top .status{margin-left:auto;align-self:flex-start}
.hero-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .app-ico{width:60px;height:60px;border-radius:23%;flex:none;box-shadow:0 10px 24px -10px #000}
.app-ico.ph{display:grid;place-items:center;border:1px solid var(--line)} .app-ico.ph img{width:34px}
.app h3{margin:0;font-size:20px} .app .tag{font-size:13px;color:var(--faint);margin-top:2px}
.status{display:inline-block;font:600 11.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.status.live{color:var(--ok);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.status.test{color:var(--warn);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.07)}
.status.soon{color:var(--violet-hi);border-color:rgba(110,168,255,.35);background:rgba(110,168,255,.08)}

/* ---- feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.logo-stage{display:grid;place-items:center;aspect-ratio:16/10;border-radius:22px;border:1px solid var(--line);background:radial-gradient(70% 90% at 50% 0%,rgba(47,107,255,.25),rgba(7,11,22,.4) 70%),var(--bg-2);padding:8%;position:relative;overflow:hidden}
.logo-stage::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);pointer-events:none}
.logo-stage img{position:relative;z-index:1;max-width:86%}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px} .ticks li{display:flex;gap:12px;color:var(--muted)} .ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:5px;background:linear-gradient(135deg,var(--violet),var(--cyan));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- steps (verification) */
.steps{counter-reset:s;display:grid;gap:16px;max-width:820px}
.step{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.step::before{content:counter(s,decimal-leading-zero);font:700 22px var(--font-mono);color:var(--cyan);padding-top:2px} .step h3{margin:0 0 6px;font-size:19px} .step p{margin:0;color:var(--muted);font-size:16px}

/* ---- prose pages */
.page-hero{padding:50px 0 24px} .page-hero h1{font-size:clamp(36px,5vw,64px);margin:18px 0 20px}
.prose{max-width:760px} .prose h2{font-size:28px;margin:34px 0 12px} .prose h3{margin:24px 0 8px} .prose p,.prose li{color:#C7D6EE} .prose ul{padding-left:1.2em} .prose li{margin:6px 0}
.note{border:1px solid var(--line);border-left:3px solid var(--cyan,#4CC2FF);background:rgba(76,194,255,.055);color:var(--muted,#C7D3E6);border-radius:12px;padding:14px 18px;font-size:15px;margin:20px 0}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sw{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2)} .sw i{display:block;height:84px} .sw div{padding:10px 12px;font:500 12.5px var(--font-mono);color:var(--muted)} .sw b{display:block;color:#fff;font-family:var(--font-body);font-size:14px}
.dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.specimen{font-family:var(--font-display);font-size:clamp(40px,7vw,92px);font-weight:700;letter-spacing:-.03em;line-height:1}

/* ---- footer */
.site-footer{margin-top:0;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(47,107,255,.05))}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding:32px 0 24px} .foot img.fl{height:40px;width:auto;margin-bottom:16px}
.foot .foot-h{margin:0 0 14px;font:600 12.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .foot a{color:var(--muted);font-size:15px} .foot a:hover{color:#fff} .foot p{color:var(--faint);font-size:14.5px;max-width:360px}
.legal{border-top:1px solid var(--line);padding:22px 0 26px;color:var(--faint);font-size:13.5px;line-height:1.6;display:grid;gap:8px}

/* ---- responsive */
@media (max-width:980px){
  .hero .wrap,.split{grid-template-columns:1fr} .hero{padding:56px 0 40px} .hero-art{max-width:260px;order:-1;margin:0 auto -8px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)} .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hero-art{max-width:112px;margin:0 auto -22px} .hero{padding-top:36px} .hero h1{font-size:clamp(34px,10.2vw,48px);letter-spacing:-.03em;margin:18px 0 18px} .hero .lead{font-size:17px;margin-bottom:26px}
  .cta-row .btn{flex:1 1 100%;justify-content:center} .page-hero{padding:52px 0 28px} .eyebrow{letter-spacing:.14em;font-size:11.5px} h2{font-size:clamp(27px,8vw,36px)}
  .logo-stage{aspect-ratio:auto;padding:28px 18px} .card{padding:22px} .foot{gap:28px} .brand img{height:38px}
  body{font-size:16px} .sec{padding:26px 0}
  .nav-toggle{display:block} .nav{position:absolute;left:0;right:0;top:68px;background:rgba(7,11,22,.97);border-bottom:1px solid var(--line);padding:12px 24px 20px;flex-direction:column;align-items:stretch;display:none}
  .nav.open{display:flex} .nav a{padding:13px 12px;font-size:17px}
  .g2,.g3,.g4{grid-template-columns:1fr} .foot{grid-template-columns:1fr} .chip-float{display:none}
  .step{grid-template-columns:44px 1fr;padding:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important} html{scroll-behavior:auto}}

/* ---- FAQ */
.faq-group{margin:0 0 44px} .faq-group h2{font-size:15px;font:600 12.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 0 10px;transition:border-color .2s,background .2s}
.faq details[open]{border-color:var(--line-hi);background:var(--surface-hi)}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font:600 17.5px/1.4 var(--font-display);color:#fff;position:relative;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--violet-hi);border-bottom:2px solid var(--violet-hi);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 22px 20px;color:#C7D6EE;font-size:16.5px;line-height:1.7} .faq .ans p{margin:0}
.faq-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(47,107,255,.2),rgba(34,211,238,.08));border:1px solid var(--line-hi);border-radius:18px;padding:26px 30px;margin-top:34px}
.faq-cta h3{margin:0 0 4px} .faq-cta p{margin:0;color:var(--muted)}

/* ---- contact form */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:start}
.cform{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:20px;padding:30px;display:grid;gap:18px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:grid;gap:7px;font:600 13.5px var(--font-body);color:#C7D6EE}
.cform input,.cform select,.cform textarea{font:400 16px var(--font-body);color:#fff;background:rgba(5,8,18,.7);border:1px solid var(--line);border-radius:11px;padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.cform textarea{min-height:150px;resize:vertical} .cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8FA8CF 50%),linear-gradient(135deg,#8FA8CF 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--violet-hi);box-shadow:0 0 0 3px rgba(47,107,255,.25)}
.cform .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.cform small{color:var(--faint);font-size:13px;line-height:1.5}
.msg{border-radius:12px;padding:14px 18px;font-size:15px} .msg.ok{background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.35);color:#B9F3CE} .msg.bad{background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.4);color:#FECACA}
.side-card{display:grid;gap:18px}

/* ---- chat assistant */
.kc-fab{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:9px;background:linear-gradient(180deg,var(--accent-1),var(--accent-2));color:#fff;border:0;border-radius:999px;padding:12px 17px 12px 14px;font:600 15px var(--font-body);cursor:pointer;box-shadow:0 14px 36px -10px rgba(31,79,216,.9),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s}
.kc-fab:hover{transform:translateY(-2px)} .kc-fab.on{display:none}
.kc-box{position:fixed;right:22px;bottom:22px;z-index:95;width:392px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100vh - 44px);display:flex;flex-direction:column;background:rgba(9,14,30,.97);border:1px solid var(--line-hi);border-radius:20px;box-shadow:0 30px 80px -20px #000,0 0 0 1px rgba(255,255,255,.03);overflow:hidden;animation:kcin .22s ease-out}
.kc-box[hidden]{display:none} @keyframes kcin{from{opacity:0;transform:translateY(14px) scale(.98)}}
.kc-head{display:flex;align-items:center;padding:16px 18px;background:linear-gradient(135deg,rgba(47,107,255,.35),rgba(34,211,238,.12));border-bottom:1px solid var(--line)}
.kc-title{display:grid;margin-right:auto} .kc-title b{font:600 16px var(--font-display);color:#fff} .kc-title small{color:#9FB6DA;font-size:12.5px}
.kc-x{background:none;border:0;color:#cfe0ff;font-size:28px;line-height:1;cursor:pointer;padding:0 4px;border-radius:8px}
.kc-log{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.kc-m{max-width:88%;padding:11px 14px;border-radius:15px;font-size:15px;line-height:1.55;animation:kcm .2s ease-out} @keyframes kcm{from{opacity:0;transform:translateY(6px)}}
.kc-m.bot{align-self:flex-start;background:rgba(255,255,255,.07);color:#E6F0FF;border-bottom-left-radius:5px} .kc-m.me{align-self:flex-end;background:linear-gradient(180deg,#4C86FF,#2F6BFF);color:#fff;border-bottom-right-radius:5px}
.kc-m a{color:#8CC4FF;text-decoration:underline} .kc-typing{display:flex;gap:5px;padding:14px}
.kc-typing i{width:7px;height:7px;border-radius:50%;background:#8FA8CF;animation:kcb 1s infinite} .kc-typing i:nth-child(2){animation-delay:.15s} .kc-typing i:nth-child(3){animation-delay:.3s} @keyframes kcb{50%{transform:translateY(-4px);opacity:.5}}
.kc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px;max-height:168px;overflow:auto} .kc-chips:empty{display:none}
.kc-chip{background:transparent;border:1px solid var(--line-hi);color:#BFDBFF;border-radius:999px;padding:7px 12px;font:500 13px var(--font-body);cursor:pointer;text-align:left} .kc-chip:hover{background:rgba(47,107,255,.2);color:#fff}
.kc-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)} .kc-form input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:#fff;font:400 15px var(--font-body)} .kc-form input:focus{outline:none;border-color:var(--violet-hi)}
.kc-form button{background:var(--violet);color:#fff;border:0;border-radius:11px;padding:0 16px;font:600 14px var(--font-body);cursor:pointer}
.kc-foot{padding:9px 16px 13px;font-size:12.5px;color:var(--faint);text-align:center} .kc-foot a{color:#8CC4FF}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:720px){.cform .row{grid-template-columns:1fr} .cform{padding:22px} .kc-box{right:8px;bottom:8px;height:calc(100vh - 16px);max-height:none;width:calc(100vw - 16px)} .kc-fab span{display:none} .kc-fab{padding:15px}}

/* ---- OTT os leads the homepage (marketing inversion) */
.hero-lead{padding:68px 0 44px}
.hero-lockup{position:relative;border-radius:28px;border:1px solid rgba(110,168,255,.20);display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 130% at 70% 14%,rgba(47,107,255,.30),rgba(10,16,34,.55) 58%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:clamp(24px,4.4vw,52px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px rgba(47,107,255,.75)}
.hero-lockup::before{content:"";position:absolute;inset:-40% -20% auto;height:150%;z-index:0;background:radial-gradient(38% 46% at 58% 42%,rgba(76,194,255,.32),transparent 72%)}
.hero-lockup .ott-mark{position:relative;z-index:1;width:100%;max-width:520px;height:auto}
.proof-band{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0))}
.proof{list-style:none;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:30px 0}
.proof li{font-size:15px;line-height:1.5;color:var(--muted);position:relative;padding-left:28px}
.proof li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 0 4px rgba(47,107,255,.13)}
.proof li::after{content:"";position:absolute;left:4px;top:8px;width:8px;height:4px;border-left:2px solid #06121F;border-bottom:2px solid #06121F;transform:rotate(-45deg)}
.proof b{display:block;color:#fff;font-weight:600;margin-bottom:4px;font-size:16px;letter-spacing:-.01em}
.apps-minor .card{padding:20px} .apps-minor .app-ico{width:48px;height:48px;border-radius:14px}
.apps-minor .app-top{gap:14px} .apps-minor .card h3{font-size:18px} .apps-minor .card p{font-size:15px}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}.hero-copy>*:nth-child(3){animation-delay:.12s}.hero-copy>*:nth-child(4){animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (max-width:980px){
  .hero-lead{padding:56px 0 32px} .hero-lockup{padding:clamp(20px,5vw,36px);max-width:520px;margin:0 auto}
  .proof{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:720px){
  .hero-lead{padding:28px 0 22px} .hero-lead .wrap{row-gap:16px}
  .hero-lockup{order:-1;margin:0 auto 4px;border-radius:22px;padding:16px 14px;width:100%;max-width:300px}
  .hero-lead .hero-lockup .ott-mark{max-width:230px}
  .proof{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .foot ul{gap:0} .foot a{display:inline-flex;align-items:center;min-height:40px;min-width:44px}
  .brand img{height:40px} .nav-toggle{padding:11px 13px;min-height:40px}
}

/* ---- redesign pass: rhythm, promise strip, prose measure */
.sec{padding:38px 0} .sec.tight{padding:26px 0} .sec-head{margin-bottom:26px}
/* a trailing paragraph or list inside a section must not add its own margin on top of the padding */
.sec>.wrap>:last-child{margin-bottom:0} .sec>.wrap>:last-child>:last-child{margin-bottom:0}
/* measures are px, not ch: ch resolves to a whole px in Blink and a fraction in Gecko, which
   moved every line break by a character or two between engines (see BUILD-LOG 2026-10-23). */
.lead{max-width:812px} .prose{max-width:748px}
.promises{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.promise{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
.promise .num{font:600 12.5px var(--font-mono);color:var(--cyan);letter-spacing:.16em}
.promise h3{margin:0;font-size:19.5px} .promise p{grid-column:2;margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:720px){ .sec{padding:28px 0} .sec.tight{padding:20px 0} .sec-head{margin-bottom:20px}
  .sec-head.with-action{flex-direction:column;align-items:flex-start;gap:16px} .sec-head.with-action .btn{margin-bottom:0}
  .promises{grid-template-columns:1fr;border-radius:16px} .promise{padding:22px 20px} }

/* ---- OTT os page: mixed feature layout */
.hero-meta{margin:18px 0 0;font:500 14px var(--font-mono);color:var(--faint);letter-spacing:.02em}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.feat .num{font:600 12.5px var(--font-mono);color:var(--cyan);letter-spacing:.16em;display:block;margin-bottom:16px}
.feat h3{margin:0 0 8px;font-size:19.5px} .feat p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.feat.large{grid-column:span 2;grid-row:span 2;padding:34px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 130% at 12% 0%,rgba(47,107,255,.26),rgba(255,255,255,.02) 62%),var(--bg-2);border-color:rgba(110,168,255,.22)}
.feat.large h3{font-size:26px} .feat.large p{font-size:16.5px;max-width:506px}
.feat.large .ticks{margin-top:20px}
.feat-watermark{display:none}  /* the owner's wordmark is the only OTT mark; no redrawn watermark */
.feat-watermark svg{width:100%;height:auto}
@media (max-width:980px){ .feature-grid{grid-template-columns:repeat(2,1fr)} .feat.large{grid-column:span 2;grid-row:auto} }
@media (max-width:720px){ .feature-grid{grid-template-columns:1fr} .feat.large{grid-column:span 1;padding:26px} .feat.large h3{font-size:22px} .feat-watermark{width:170px;opacity:.08} }

/* ---- app pages: icon stage, points list */
.hero-app{padding:64px 0 44px} .hero-app .wrap{gap:48px}
.app-stage{position:relative;display:grid;place-items:center;border-radius:26px;border:1px solid var(--line);overflow:hidden;isolation:isolate;
  padding:clamp(30px,6vw,64px);background:radial-gradient(120% 120% at 50% 0%,rgba(47,107,255,.24),rgba(10,16,34,.55) 62%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 90px -60px rgba(47,107,255,.8)}
.app-stage .app-ico{width:168px;height:168px;border-radius:38px;position:relative;z-index:1;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.app-stage .ott-mark{width:100%;max-width:380px;position:relative;z-index:1}
.points{grid-template-columns:repeat(2,1fr);gap:14px 30px}
@media (max-width:980px){ .hero-app{padding:44px 0 32px} }
@media (max-width:720px){
  .hero-app .app-stage{order:-1;margin:0 auto 20px;max-width:300px;padding:24px;border-radius:20px}
  .app-stage .app-ico{width:120px;height:120px;border-radius:28px} .app-stage .ott-mark{max-width:230px}
  .points{grid-template-columns:1fr}
}

/* ---- rest of the site: page frame + FAQ chips */
.page-hero{padding:72px 0 36px;border-bottom:1px solid var(--line);margin-bottom:8px}
.page-hero h1{max-width:968px} .page-hero .lead{margin-bottom:0}
.faq-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.faq-chips a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);font:500 14px var(--font-body);transition:color .15s,border-color .15s,background .15s}
.faq-chips a:hover{color:#fff;border-color:var(--line-hi);background:var(--surface-hi)}
.faq-group{scroll-margin-top:90px}
@media (max-width:720px){ .page-hero{padding:40px 0 26px} .faq-chips{gap:8px;margin-top:22px} .faq-chips a{font-size:13.5px;padding:7px 13px} }

/* ---- FAQ: sticky section index, accordion on the right */
.index-list{display:grid;border-top:1px solid var(--line);margin:22px 0 26px}
.index-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:13px 2px;
  border-bottom:1px solid var(--line);color:var(--muted);font:500 16px var(--font-body);transition:color .15s,padding .2s}
.index-list a::after{content:"";flex:none;width:18px;height:1px;background:var(--faint);transition:width .2s,background .2s}
.index-list a:hover{color:#fff;padding-left:6px}
.index-list a:hover::after{width:26px;background:var(--cyan)}
.rail-cta{border:1px solid rgba(110,168,255,.22);border-radius:18px;padding:24px;
  background:radial-gradient(120% 130% at 0% 0%,rgba(47,107,255,.22),rgba(255,255,255,.02) 66%),var(--bg-2)}
.rail-cta h3{margin:0 0 6px;font-size:18px} .rail-cta p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.55}
.rail-cta .cta-row{display:grid;gap:10px} .rail-cta .btn{justify-content:center;width:100%}
.rail-faq .faq-group:last-of-type{margin-bottom:0}
@media (max-width:980px){ .rail-faq{gap:26px} .rail-faq .rail-side{display:grid} .index-list{grid-template-columns:repeat(2,1fr);gap:0 24px;margin-bottom:18px} }
@media (max-width:720px){ .index-list{grid-template-columns:1fr} .index-list a{min-height:52px}
  .rail-faq .rail-cta{display:none} }  /* the chat bubble and the nav already carry these on phones */

/* ---- legal pages: index on the left, the document in a panel */
.doc{border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,44px);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.doc .doc-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line);
  font:600 12px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.doc .prose{max-width:704px} .doc .prose h2{margin-top:34px} .doc .prose p:last-child{margin-bottom:0}
.doc .note{margin:30px 0 0}

/* ---- 404 */
.nf{display:grid;place-items:center;text-align:center;gap:0;padding:clamp(36px,7vw,84px) clamp(22px,4vw,56px);
  border:1px solid rgba(110,168,255,.2);border-radius:26px;
  background:radial-gradient(110% 140% at 50% 0%,rgba(47,107,255,.22),rgba(255,255,255,.015) 68%),var(--bg-2)}
.nf .code{font:700 clamp(56px,13vw,120px)/1 var(--font-mono);letter-spacing:.06em;color:transparent;
  background:linear-gradient(180deg,#DCEBFF,#6EA8FF);-webkit-background-clip:text;background-clip:text}
.nf h1{font-size:clamp(28px,4.4vw,46px);margin:14px 0 12px} .nf p{color:var(--muted);max-width:506px;margin:0 auto 26px}
.nf .cta-row{justify-content:center}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);width:100%}
.nf-links a{color:var(--muted);font-size:15px;min-height:40px;min-width:40px;justify-content:center;display:inline-flex;align-items:center}
.nf-links a:hover{color:#fff}
@media (max-width:720px){ .nf .cta-row .btn{flex:1 1 100%} }

/* ---- trust pages: rail + ledger (breaks the card grid) */
.rail{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:56px;align-items:start}
.rail-side{position:sticky;top:96px}
.rail-side h2{font-size:clamp(25px,2.7vw,33px);margin:18px 0 14px;letter-spacing:-.02em;max-width:414px}
.rail-side p{color:var(--muted);font-size:16px;margin:0;max-width:374px}
.rail-side .btn{margin-top:22px}
.ledger{border-top:1px solid var(--line)}
.ledger .row{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.ledger .n{font:600 12.5px var(--font-mono);color:var(--cyan);letter-spacing:.16em;padding-top:6px}
.ledger h3{margin:0 0 7px;font-size:19px;letter-spacing:-.01em} .ledger p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:640px}
.ledger .row.big{padding-left:24px;border-left:2px solid rgba(76,194,255,.55);background:linear-gradient(90deg,rgba(47,107,255,.10),transparent 72%)}
.ledger .row.big h3{font-size:21px}
.rule-panel{border:1px solid rgba(110,168,255,.22);border-radius:24px;padding:clamp(28px,4vw,46px);
  background:radial-gradient(110% 140% at 0% 0%,rgba(47,107,255,.24),rgba(255,255,255,.02) 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -60px rgba(47,107,255,.9)}
.rule-panel .mega{margin:20px 0 0;font:600 clamp(21px,2.5vw,28px)/1.4 var(--font-display);letter-spacing:-.018em;color:#fff;max-width:760px}
.lic{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.mail{display:inline-flex;align-items:center;min-height:44px;font:600 clamp(17px,2.2vw,21px) var(--font-mono);color:#fff;border-bottom:1px solid var(--line-hi);padding-bottom:4px}
.mail:hover{color:var(--cyan);border-color:var(--cyan)}
@media (max-width:980px){
  .rail{grid-template-columns:1fr;gap:30px} .rail-side{position:static}
  .rail-side p{max-width:616px} .rail-side h2{max-width:408px}
}
@media (max-width:720px){
  .ledger .row{grid-template-columns:40px 1fr;gap:14px;padding:22px 0}
  .ledger .row.big{padding-left:16px} .ledger h3{font-size:17.5px} .ledger .row.big h3{font-size:18.5px}
}

/* ---- apps index: OTT os promo panel + denser app grid */
.otto-promo.feat{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(16px,2.2vw,30px);padding:24px 26px;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.otto-promo .promo-copy{flex:1 1 auto;min-width:0}
.promo-mark{flex:0 0 26%;max-width:270px;pointer-events:none}
.otto-promo:hover{transform:translateY(-2px);border-color:var(--line-hi);color:inherit}
.otto-promo h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em} .otto-promo p{max-width:620px}
.promo-go{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font:600 15px var(--font-body);color:var(--violet-hi)}
.promo-go::after{content:"";width:18px;height:2px;background:currentColor;transition:width .2s}
.otto-promo:hover .promo-go::after{width:26px}
@media (max-width:980px){ .promo-mark{flex-basis:30%;max-width:240px} }
@media (max-width:720px){ .otto-promo{padding:26px} .otto-promo h3{font-size:22px} .otto-promo .promo-mark{display:none} }

/* ---- tap targets: small buttons reach 40 px on phones */
@media (max-width:720px){ .btn.small{min-height:40px;padding-block:11px} }
@media (max-width:720px){ .legal a{display:inline-flex;align-items:center;min-height:40px;padding-inline:6px;margin-right:4px} .legal{gap:0} }

/* keep the floating chat button off the content */
body{padding-bottom:110px}
@media(max-width:640px){body{padding-bottom:130px}}

main{padding-bottom:0}

/* phone: the ask button becomes a small round bubble so it cannot sit on a card */
@media(max-width:640px){.kc-fab{padding:0;width:54px;height:54px;justify-content:center;border-radius:50%}.kc-fab span{display:none}}

/* ---- OTT os wordscript: the owner's artwork, with the boot cursor blink ---- */
.ott-lockup{position:relative;display:inline-block;line-height:0;max-width:100%}
.ott-lockup img{width:100%;height:auto;display:block;aspect-ratio:2487/648}
.ott-cursor{position:absolute;left:86.85%;top:40.74%;width:12.39%;height:8.95%;
  background:#4CC2FF;border-radius:2px;animation:ottblink 1.06s steps(1,end) infinite}
@keyframes ottblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ott-cursor{animation:none;opacity:1}}

/* ---- legal rail: the mail link has to fit the narrow column */
.rail-legal .rail-cta .mail{font-size:clamp(15px,1.35vw,18px);letter-spacing:-.01em}
.rail-legal .doc-meta span:first-child{color:var(--cyan)}
@media (max-width:720px){ .rail-legal .rail-cta{display:none} }  /* a legal page on a phone starts with the document */
.logo-stage .ott-lockup{position:relative;z-index:1;width:100%}


/* ---- Omarchy Store: the band on the home page and the apps index, and its page */
.store-band{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;padding:26px 28px;
  border:1px solid rgba(110,168,255,.22);border-radius:24px;
  background:radial-gradient(120% 140% at 6% 0%,rgba(47,107,255,.22),rgba(255,255,255,.02) 62%),var(--bg-2)}
.store-band h2{margin:12px 0 12px} .store-band .lead{font-size:16.5px;color:#C7D6EE}
.store-band .hero-meta{margin-top:16px}
.store-copy .hero-top{margin-bottom:2px}
.store-art{position:relative;isolation:isolate;display:grid;place-items:center;gap:20px;justify-items:center}
.store-art::before{content:"";position:absolute;inset:-6% 4% auto;height:140%;z-index:0;background:radial-gradient(40% 46% at 50% 48%,rgba(76,194,255,.34),transparent 66%)}
.store-art img{position:relative;z-index:1}
.store-art .store-ico{width:176px;height:176px;border-radius:40px;box-shadow:0 26px 50px -26px rgba(0,0,0,.9),0 0 0 1px rgba(110,168,255,.22)}
.store-art .store-wordmark{width:100%;max-width:470px;height:auto}
.store-hero-ico{position:relative;z-index:1;width:min(78%,300px);height:auto;border-radius:60px;box-shadow:0 38px 70px -34px #000,0 0 0 1px rgba(110,168,255,.22)}
.status.launch{color:var(--cyan);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.08)}
@media (max-width:720px){ .store-band{grid-template-columns:1fr;gap:24px;padding:22px} .store-art{order:-1}
  .store-art .store-ico{width:104px;height:104px;border-radius:24px} .store-art .store-wordmark{max-width:260px}
  .store-hero-ico{width:min(58%,170px);border-radius:38px} }

.feat.large .store-mark{position:absolute;right:-6px;bottom:-10px;width:210px;height:210px;border-radius:48px;opacity:.12;pointer-events:none;z-index:0}
.feat.large>*{position:relative;z-index:1}
@media (max-width:720px){ .feat.large .store-mark{width:150px;height:150px;right:-14px;bottom:-18px;opacity:.12} }

/* the store's own lockup: official art, never redrawn or retyped */
.store-wordmark{width:100%;max-width:430px;height:auto;position:relative;z-index:1}
.hero-lockup-store{padding:clamp(24px,4vw,56px);min-height:230px}
.store-wordmark-hero{position:relative;z-index:1;width:100%;max-width:620px;min-width:0;height:auto}
.ext{margin-left:6px;font-size:.95em;opacity:.8;line-height:1}
@media (max-width:1024px){ .store-wordmark-hero{max-width:480px} }
@media (max-width:720px){ .store-wordmark{max-width:260px} .hero-lockup-store{padding:20px;min-height:0} .store-wordmark-hero{max-width:330px} }

.promises.trust .promise{align-content:start;align-items:start}

/* ---------- OTT os: the Omarchy statement, the three promises ---------- */
.omarchy-line{margin:20px 0 30px;padding:16px 20px;border:1px solid rgba(110,168,255,.22);border-radius:14px;
  background:linear-gradient(135deg,rgba(47,107,255,.14),rgba(255,255,255,.02));color:#C7D6EE;font-size:16px;line-height:1.65;max-width:820px}
.omarchy-line b{color:#fff}
.promises-row{margin-top:4px}
.promise-card .num{font:600 12.5px var(--font-mono);color:var(--cyan);letter-spacing:.16em;display:block;margin-bottom:12px}
.promise-card h3{margin:0 0 8px;font-size:20px} .promise-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:720px){ .promises-row{grid-template-columns:1fr} .omarchy-line{font-size:15px;padding:14px 16px} }

.feat.wide{grid-column:span 3}
@media (max-width:720px){ .feat.wide{grid-column:span 1} }

/* the store lockup is the point of this hero: give its column the room it needs */
.store-hero-page .wrap{grid-template-columns:1fr 1.15fr}
.store-hero-page .hero-lockup{padding:20px}
@media (max-width:900px){ .store-hero-page .wrap{grid-template-columns:1fr} }

/* ---------- 4 Nov: less scrolling. Owner: too much air between sections ---------- */
.sec{padding:20px 0} .sec.tight{padding:14px 0}
.sec-head{margin-bottom:20px} .sec-head h2{margin:10px 0 8px}
.hero{padding:32px 0 20px} .hero-lead{padding:32px 0 20px}
.page-hero{padding:34px 0 18px}
.foot{padding:26px 0 18px} .legal{padding:14px 0 16px}
.prose h2{margin:26px 0 10px}
.hero-side{display:grid;gap:14px;align-content:start}
.hero-side .hero-lockup{max-width:none}
.hero-side .omarchy-line{margin:0;max-width:none;font-size:15px}
.feature-grid{grid-auto-rows:1fr}
.feat{display:flex;flex-direction:column} .feat p{margin:0}
.card.app{padding:22px}
@media (max-width:720px){ .sec{padding:22px 0} .sec.tight{padding:16px 0} .hero{padding:26px 0 20px} .hero-lead{padding:26px 0 20px}
  .foot{padding:22px 0 14px} .legal{padding:12px 0 14px} }

/* ---------- accessibility widget: self-hosted, localStorage only ---------- */
/* round, same blue as the helper bubble on the right (see .kc-fab) */
.kx-a11y-fab{position:fixed;left:18px;bottom:18px;z-index:95;display:grid;place-items:center;
  width:56px;height:56px;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-1),var(--accent-2));
  box-shadow:0 14px 36px -10px rgba(31,79,216,.9),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .15s}
.kx-a11y-fab:hover{transform:translateY(-1px)}
.kx-a11y-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.kx-a11y-panel[hidden]{display:none}
.kx-a11y-panel{position:fixed;left:18px;bottom:88px;z-index:96;width:min(336px,calc(100vw - 28px));
  background:var(--bg-2);border:1px solid var(--line-hi);border-radius:16px;padding:14px;display:grid;gap:8px;
  box-shadow:0 24px 60px -24px #000}
.kx-a11y-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;font-size:14.5px}
.kx-a11y-x{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:8px 10px;margin:-8px -10px -8px 0;border-radius:8px}
.kx-a11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:14px}
.kx-a11y-group{display:flex;align-items:center;gap:6px}
.kx-a11y-panel button[data-a11y-step],.kx-a11y-tog,.kx-a11y-reset{font:600 13.5px var(--font-body);color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;text-align:left}
.kx-a11y-panel button:hover{border-color:var(--line-hi)}
.kx-a11y-tog[aria-pressed="true"]{background:rgba(47,107,255,.22);border-color:rgba(110,168,255,.55)}
.kx-a11y-val{min-width:52px;text-align:center;color:#fff;font:600 13.5px var(--font-mono)}
@media (max-width:720px){ .kx-a11y-fab{width:52px;height:52px;left:14px;bottom:14px} }

/* the effects, all driven by attributes on <html> */
html[data-a11y-contrast="1"]{--bg:#000;--bg-2:#000;--surface:#0b0b0b;--surface-hi:#141414;--line:#4a4a4a;--line-hi:#7a7a7a;--muted:#e8e8e8;--faint:#cfcfcf;--text:#fff}
html[data-a11y-contrast="1"] .grad{-webkit-text-fill-color:#fff!important;background:none!important;color:#fff!important}
html[data-a11y-contrast="1"] a{text-decoration:underline}
html[data-a11y-readable="1"] body,html[data-a11y-readable="1"] h1,html[data-a11y-readable="1"] h2,html[data-a11y-readable="1"] h3,
html[data-a11y-readable="1"] .eyebrow,html[data-a11y-readable="1"] .status{font-family:Verdana,"DejaVu Sans",system-ui,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important}
html[data-a11y-readable="1"] .eyebrow,html[data-a11y-readable="1"] .status{font-size:13px}
html[data-a11y-motion="1"] *,html[data-a11y-motion="1"] *::before,html[data-a11y-motion="1"] *::after{animation:none!important;transition:none!important}
html[data-a11y-links="1"] a{text-decoration:underline!important;text-underline-offset:2px}
html[data-a11y-cursor="1"],html[data-a11y-cursor="1"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 9-6 1.5L15 20l-3 1.4-3-7.6L4 18z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 4 2,auto!important}
/* keyboard focus is always visible */
:focus-visible{outline:3px solid var(--cyan)!important;outline-offset:2px!important}

/* ---------- no one-word last lines ---------- */
h1,h2,h3,.hero h1,.page-hero h1{text-wrap:balance}
p,li,.lead,.hero-meta,.omarchy-line,.feat p,.card p,.promise p{text-wrap:pretty}
.hero-copy .lead,.sec-head p{max-width:68ch}

/* tighter rows and narrower page gutters where the cards live */
.grid{gap:16px} .feature-grid{gap:16px}
@media (min-width:1100px){ .wrap{max-width:1160px} }

/* ---------- language switcher (header + footer) ---------- */
.i18n-slot{display:inline-flex;align-items:center}
.legal .i18n-slot{margin-right:4px}
@media (max-width:720px){ .i18n-slot[data-i18n-slot="header"]{order:3;margin-left:auto} }

/* the accessibility button follows the theme, like the helper; if the accent is too pale
   against the page the script swaps in this readable variant */
.kx-a11y-fab.is-fallback{background:#fff;color:#0A0E1A;box-shadow:0 14px 36px -10px rgba(0,0,0,.55)}
.kx-a11y-fab.is-fallback:hover{background:#EDF2FF}
.kx-a11y-panel{border-color:var(--line-hi)}
.kx-a11y-tog[aria-pressed="true"]{background:color-mix(in srgb, var(--accent-2) 30%, transparent);border-color:var(--accent-1)}
.kx-a11y-panel button:focus-visible,.kx-a11y-fab:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.kx-a11y-panel button[data-a11y-step]:hover,.kx-a11y-tog:hover,.kx-a11y-reset:hover{border-color:var(--accent-1)}

/* the two floating buttons share one centre line: same bottom, same height */
.kc-fab{min-height:58px;bottom:24px}
@media (max-width:768px){ .kc-fab{min-height:42px;bottom:16px} }
@media (max-width:768px){ .kc-fab{height:42px!important;min-height:42px!important;bottom:16px!important} }

/* status pill on the title's line, as on the small cards (no pill row of its own) */
.title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px}
.title-row h2,.title-row h3{margin:0;min-width:0}
.title-row .status{margin-top:4px}
@media (max-width:520px){ .title-row{gap:8px} .title-row .status{margin-top:2px;transform:scale(.94);transform-origin:right top} }
.store-copy .hero-top{margin-bottom:8px}

/* status pill: one component, one place - the card's top-right corner, identical everywhere */
.card, .feat, .store-band{position:relative}
.pill-corner, .feat.large > .pill-corner, .card > .pill-corner, .store-band > .pill-corner{position:absolute !important;top:20px !important;right:20px !important;margin:0 !important;z-index:2}
@media (max-width:640px){ .pill-corner, .feat.large > .pill-corner, .card > .pill-corner, .store-band > .pill-corner{top:14px !important;right:14px !important} }
/* give the card's own content room so a long title never runs under the pill */
.card .app-top h3, .card .app-top .tag{padding-right:78px}


/* on phones the big cards' artwork starts at the top edge: give the corner pill its own space */
@media (max-width:640px){
  .otto-promo, .store-band{padding-top:48px !important}
}

/* ---------- Kernlux Helper: compact chips, panel sitting on the same baseline as the buttons ---------- */
.kc-chip{
  font: 500 12px/1.1 var(--font-body) !important;
  padding: 5px 10px !important;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 999px !important;
}
.kc-chips{ gap: 6px !important; padding: 0 14px 10px !important; max-height: none !important; }
.kc-box{ bottom: calc(24px + 58px + 12px) !important; right: 24px !important; height: 520px !important; }
@media (max-width: 768px){
  .kc-box{ bottom: calc(16px + 42px + 14px) !important; right: 12px !important; left: 12px !important;
           width: auto !important; height: auto !important; max-height: calc(100vh - 96px) !important; }
}
.kc-fab{ white-space: nowrap; }
@media (max-width: 640px){ .kc-fab span{ display: none !important; } }

/* card on the contact page that opens the helper */
.helper-card .btn{ margin-top: 4px; }

/* ---------- Sienna Accessibility Widget 2.1.0: vendor layout, only what our rules require ----------
   No size, position or spacing overrides: the panel is Sienna's own full-height side panel.
   What stays ours: the theme colour (same variable as the helper) and hiding it when printing.
   The launcher's bottom-left place and 58/42 px size are set in assets/asw-labels.js. */
.asw-widget, .asw-menu, .asw-menu-btn, .asw-container{
  --asw-primary: var(--accent-2);
  --asw-primary-dark: color-mix(in srgb, var(--accent-2) 70%, #000);
}
@media print{
  .asw-container, .asw-menu, .asw-menu-btn{ display: none !important; }
}

/* store band eyebrow: keep the whole line on one row on desktop, so the heading and the
   copy move up a line. On phones it may wrap, but balanced, so 'LABS' is never alone. */
.store-band .store-copy .eyebrow{
  font-size: 11px;
  letter-spacing: .03em;
  text-wrap: balance;
  max-width: 100%;
  display: block;
}
@media (max-width: 640px){
  .store-band .store-copy .eyebrow{ font-size: 10.5px; letter-spacing: .02em; }
}

/* the two hero buttons sit under the logo card and the caption, side by side.
   The card and the caption keep their original sizes - only the spacing is trimmed. */
/* two rows: the eyebrow row, then everything else. Both columns start on the second row's
   top edge and end on its bottom edge, so the card's top matches the headline's top and the
   last row on each side matches the other, without magic margins. */
.hero .wrap{ grid-template-rows: auto 1fr; align-items: start; }
.hero .hero-top{ grid-column: 1; grid-row: 1; }
.hero .hero-copy{ grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.hero .hero-copy > h1{ margin-top: 0; }
.store-hero-page .hero-side > .hero-lockup{ height: 100%; }
.hero .hero-copy .hero-meta{ margin-top: 16px; }
.hero-side{
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; min-width: 0; height: 100%; align-self: stretch;
}
.hero-side .cta-row.hero-cta{ margin-top: 0; }
@media (max-width: 720px){
  .hero .wrap{ grid-template-rows: auto; }
  .hero .hero-top, .hero .hero-copy, .hero-side{ grid-column: 1; grid-row: auto; }
  .hero-side{ width: 100%; height: auto; }
  .hero .hero-copy .hero-meta{ margin-top: 0; }
}
@media (max-width: 720px){
  .hero-side{ width: 100%; }
}
/* shorter page by trimming the empty bands, not by shrinking anything */
.hero-lead{ padding: 26px 0 12px; }
.hero-lead + .sec, .hero-lead + section.sec{ padding-top: 20px; }
@media (max-width: 720px){
  .hero-lead{ padding: 22px 0 10px; }
}

/* the caption card's own top/bottom margins add nothing inside the aligned column */
.hero-side .omarchy-line{ margin: 0; }

/* machine-translation note on the legal pages */
.mt-note{margin:26px 0 6px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:10px;font-size:13.5px;color:var(--muted);background:rgba(34,211,238,.05)}

/* ---------- language switcher: same colour, size, weight and hover as the nav links ----------
   The values come from the same custom properties the nav links use, so the two cannot drift.
   The popup is our own listbox: a native <select> popup cannot be themed. ------------------- */
.kx-lang{position:relative;display:inline-flex}
.kx-lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;cursor:pointer;
  color:var(--muted);
  font:500 15px/1.2 var(--font-body);
  padding:8px 12px;border-radius:9px;
  transition:color .15s,background .15s;
}
.kx-lang-btn:hover,.kx-lang-btn[aria-expanded="true"]{color:#fff;background:var(--surface)}
.kx-lang-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.kx-lang-chev{opacity:.8}
.kx-lang-list{
  position:absolute;z-index:120;top:calc(100% + 8px);right:0;
  min-width:100%;width:max-content;max-width:min(300px, calc(100vw - 32px));
  max-height:min(70vh, 480px);overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:6px;list-style:none;
  background:rgba(8,13,26,.98);
  border:1px solid var(--line-hi);border-radius:14px;
  box-shadow:0 24px 60px -18px #000,0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
}
.kx-lang-list[hidden]{display:none}
.kx-lang-item{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  min-height:44px;padding:0 12px;border-radius:10px;
  color:var(--muted);font:500 15px/1.2 var(--font-body);
  cursor:pointer;white-space:nowrap;
}
.kx-lang-item:hover,.kx-lang-item.is-active{color:#fff;background:var(--surface)}
.kx-lang-item[aria-selected="true"]{color:#fff}
.kx-lang-tick{opacity:0;color:var(--cyan);font-weight:700}
.kx-lang-item[aria-selected="true"] .kx-lang-tick{opacity:1}
@media (max-width:640px){
  .kx-lang-btn{font-size:17px;padding:13px 12px}
  /* the trigger sits mid-screen on a phone: grow the list leftwards and cap its height, so it
     can never run off the right edge or below the viewport */
  .kx-lang-list{
    left:auto;right:0;
    min-width:min(240px, calc(100vw - 32px));
    max-height:min(60vh, 420px);overflow-y:auto;overscroll-behavior:contain;
  }
  .kx-lang-item{font-size:17px;min-height:48px}
}

/* opened upwards when there is no room below (the footer switcher, the mobile menu) */
.kx-lang-list.up{top:auto;bottom:calc(100% + 8px);}

/* ---------- mobile menu: solid panel, switcher on the same line language as the links ---------- */
@media (max-width: 640px){
  .nav, .nav.open{
    background: #070b16 !important;            /* no page text bleeding through */
    box-shadow: 0 24px 60px -20px #000;
    border-bottom: 1px solid var(--line-hi);
  }
  .nav .i18n-slot{ display: block; width: 100%; margin: 6px 0 2px; }
  .nav .kx-lang{ display: block; width: 100%; }
  .nav .kx-lang-btn{
    width: 100%; min-height: 44px; justify-content: space-between;
    text-align: left; padding: 13px 12px; border-radius: 9px;
  }
  .nav .kx-lang-list{ left: 0; right: auto; width: 100%; min-width: 0; }
}