/* KernelCode — shared tokens, header, cursor, buttons and type (detail pages). */
:root{
  --bg:#000;--pad:22px;--nav-h:98px;
  --fs-hero:clamp(42px,7.05vw,112px);
  --fs-h2:clamp(38px,6.17vw,104px);
  --fs-h3:clamp(30px,4.2vw,72px);
  --fs-note:clamp(11.5px,1.04vw,18px);
  --fs-body:clamp(14px,1.12vw,19px);
  --fs-small:clamp(10px,.9vw,15px);
  --fs-nav:clamp(11.5px,1.05vw,17px);
  --fs-logo:clamp(19px,2.18vw,36px);
  --fs-btn:clamp(12px,1.13vw,19px);
  --ls-disp:-.038em;--btn-h:47px;--header-h:var(--nav-h);
  --ease:cubic-bezier(.16,1,.3,1);
  --hair:rgba(255,255,255,.17);
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' width='13' height='13'%3E%3Crect width='10' height='10' fill='%23fff'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#000;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{min-height:100vh;font-family:'Schibsted Grotesk',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;background:#000;overflow-x:hidden}
@media (any-pointer:fine){body,a,button,label{cursor:none}}
canvas{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cursor */
#cursor{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border:1.5px solid #fff;border-radius:50%;mix-blend-mode:difference;z-index:190;pointer-events:none;will-change:transform;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s linear}
#cursor.live{opacity:1}
#cursor::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease)}
#cursor.big{width:31px;height:31px;margin:-15.5px 0 0 -15.5px}
#cursor.big::after{width:16px;height:16px}
@media (any-pointer:coarse){#cursor{display:none}}

/* header */
header{position:fixed;left:0;right:0;top:0;z-index:120;height:calc(var(--nav-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));display:flex;align-items:center;touch-action:manipulation;transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease)}
header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.55) 70%,rgba(0,0,0,0));opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
header.scrolled::before{opacity:1}
.brand{font-size:var(--fs-logo);letter-spacing:-.045em;line-height:1;white-space:nowrap;color:#fff}
.brand span{color:rgba(255,255,255,.60)}
.navpill{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--nav-h)/2);transform:translate(-50%,-50%);height:42px;display:flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
.navpill::-webkit-scrollbar{display:none}
.navpill a{display:flex;align-items:center;height:100%;padding:0 16px;font-size:var(--fs-nav);letter-spacing:-.03em;color:rgba(255,255,255,.95);white-space:nowrap;transition:color .3s var(--ease),background-color .3s var(--ease)}
.navpill a+a{border-left:1px solid rgba(255,255,255,.15)}
.navpill a:hover{color:#fff}
.navpill a[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff}
.cta,.btnpair{display:flex;align-items:center}
.cta{margin-left:auto}
.btnpair{width:max-content}
.btn-arrow{position:relative;z-index:2;flex:none;width:var(--btn-h);height:var(--btn-h);border-radius:50%;background:#fff;color:#131313;display:grid;place-items:center}
.btn-arrow svg{width:13px;height:13px;transition:transform .45s var(--ease)}
.btn-pill{height:var(--btn-h);display:flex;align-items:center;padding:0 18px;margin-left:-7px;border-radius:999px;background:#fff;color:#141414;font-size:var(--fs-btn);letter-spacing:-.035em;white-space:nowrap}
.btnpair.ghost .btn-arrow,.btnpair.ghost .btn-pill{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.btnpair.ghost .btn-pill{margin-left:-1px}
@media (hover:hover) and (pointer:fine){
  .cta:hover .btn-arrow svg,.btnpair:hover .btn-arrow svg{transform:rotate(45deg)}
  .btnpair.ghost:hover .btn-arrow,.btnpair.ghost:hover .btn-pill{border-color:#fff}
}
.navtoggle{display:none;position:relative;flex:none;width:var(--btn-h);height:var(--btn-h);margin-left:10px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10)}
.navtoggle i{position:absolute;left:50%;top:50%;width:15px;height:1.5px;margin:-.75px 0 0 -7.5px;background:#fff;transition:transform .4s var(--ease),background-color .3s var(--ease)}
.navtoggle i:nth-child(1){transform:translateY(-5px)}
.navtoggle i:nth-child(3){transform:translateY(5px)}
.navtoggle.open i:nth-child(1){transform:rotate(45deg)}
.navtoggle.open i:nth-child(2){background:transparent}
.navtoggle.open i:nth-child(3){transform:rotate(-45deg)}

/* type + reveals */
.rv{display:block;white-space:nowrap}
.rv>span{display:inline-block;opacity:0;filter:blur(13px);transform:translateY(.12em);transition:opacity .85s var(--ease),filter .85s var(--ease),transform .85s var(--ease)}
.rv.in>span{opacity:1;filter:blur(0);transform:none}
.fade{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade.in{opacity:1;transform:none}
.dotfill{background-image:var(--dots);background-size:6.5px 6.5px;background-repeat:repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.4px rgba(255,255,255,.11)}
.st-n{font-size:var(--fs-small);font-weight:500;color:rgba(255,255,255,.36);letter-spacing:-.02em}
.st-n b{color:#fff;font-weight:500}
@media (prefers-reduced-motion:reduce){
  .rv>span,.fade{transition:none;filter:none;transform:none;opacity:1}
}

/* header breakpoints (mirror the landing page) */
@media (max-width:1040px){
  :root{--nav-h:108px;--pad:16px;--btn-h:40px;--fs-nav:13px}
  header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 38px;row-gap:8px;column-gap:10px;align-content:center;align-items:center}
  .brand{grid-column:1;grid-row:1;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .cta{grid-column:2;grid-row:1;margin-left:0}
  .navpill{position:static;transform:none;left:auto;top:auto;grid-column:1/-1;grid-row:2;height:38px;width:100%}
  .navpill a{padding:0 14px}
}
@media (max-width:720px){
  :root{--fs-hero:clamp(34px,10.4vw,56px);--fs-h2:clamp(26px,8.4vw,48px);--fs-h3:clamp(26px,7.6vw,40px);--fs-note:14px;--fs-body:15px;--fs-small:12px;--fs-logo:clamp(18px,5.4vw,28px);--fs-btn:13px}
}
@media (max-height:560px) and (min-width:1041px){
  :root{--nav-h:64px;--btn-h:36px}
  .navpill{height:34px}
}
@media (max-width:1040px) and (max-height:560px){
  :root{--nav-h:62px;--btn-h:36px}
  header{display:flex}
  .cta{margin-left:auto}
  .navtoggle{display:block}
  .navpill{display:none;position:fixed;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(var(--header-h) + 8px);width:auto;height:auto;flex-direction:column;align-items:stretch;border-radius:16px;max-height:calc(100dvh - var(--header-h) - 24px);overflow-x:hidden;overflow-y:auto;background:rgba(22,22,22,.82);touch-action:pan-y}
  .navpill.open{display:flex}
  .navpill a{min-height:44px;height:auto;padding:0 16px}
  .navpill a+a{border-left:0;border-top:1px solid rgba(255,255,255,.15)}
}
@media (max-width:380px){
  :root{--pad:12px;--fs-btn:12px;--btn-h:36px}
  .navpill a{padding:0 11px}
  .btn-arrow svg{width:12px;height:12px}
}
