/* Layout: white-first Apple-style bands (white / soft grey). Black only for "devices" (the production desk, the brief receipt). Two-row header with centered logo. 1080px column, 1280px for wide diagrams. */
:root{
  color-scheme:light;
  --bg:#ffffff; --bg-alt:#f5f5f7; --fg:#1d1d1f; --fg-2:#6e6e73; --fg-3:#8e8e93; --line:#d2d2d7; --line-soft:#e8e8ed;
  --accent:#0071e3; --accent-ink:#0066cc; --on-accent:#ffffff; --accent-tint:#e8f2fd;
  --stage:#000000; --stage-2:#161617; --stage-3:#232326; --stage-fg:#f5f5f7; --stage-mute:#86868b; --stage-line:#2c2c2e;
  --rec:#ff3b30; --ok:#30d158; --ok-ink:#1a8a3c; --warn:#ffd60a; --err:#d70015;
  --nav-bg:rgba(255,255,255,.82);
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Geist Mono",Menlo,Consolas,monospace;
  --w:1080px; --w-wide:1280px; --r-lg:28px; --r-md:18px; --r-sm:12px;
  --gut-l:max(20px,env(safe-area-inset-left,0px)); --gut-r:max(20px,env(safe-area-inset-right,0px));
  --head:140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.035em}
p{margin:0}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.svg{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:var(--head)}

/* Bands */
.band{background:var(--bg)}
.band.alt{background:var(--bg-alt)}
.band.stage{background:var(--stage);color:var(--stage-fg)}
.wrap{max-width:calc(var(--w) + 40px);margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r);padding-block:120px}
.wrap.wide{max-width:calc(var(--w-wide) + 40px)}
.wrap.tight{padding-block:72px}
.center{text-align:center}

/* Type scale */
.eyebrow{font-family:var(--display);font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--fg-2)}
.eyebrow.blue{color:var(--accent-ink)}
.stage .eyebrow{color:var(--stage-mute)}
.h-hero{font-size:clamp(48px,9.2vw,124px);font-weight:800;line-height:1;letter-spacing:-.052em}
.h-xl{font-size:clamp(40px,6.8vw,92px);font-weight:800;line-height:1.02;letter-spacing:-.048em}
.h-l{font-size:clamp(32px,4.6vw,60px);font-weight:700;line-height:1.06;letter-spacing:-.04em}
.h-m{font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.12;letter-spacing:-.03em}
.h-s{font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.mute{color:var(--fg-3)}
.stage .mute{color:var(--stage-mute)}
.lead{font-size:clamp(19px,1.9vw,24px);line-height:1.38;font-weight:500;letter-spacing:-.02em;color:var(--fg-2);max-width:40ch}
.center .lead{margin-inline:auto}
.stage .lead{color:var(--stage-mute)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.stack{display:flex;flex-direction:column;gap:20px}
.center.stack{align-items:center}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);border:0;border-radius:980px;padding:13px 24px;font-size:17px;font-weight:500;cursor:pointer;transition:filter .2s,transform .2s}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn.lg{font-size:19px;padding:16px 30px}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.link{display:inline-flex;align-items:center;gap:4px;font-size:19px;font-weight:500}
.link .svg{width:.8em;height:.8em;stroke-width:2.6;transition:transform .2s}
.link:hover .svg{transform:translateX(3px)}

/* Header: row 1 = clocks | centered logo | CTA, row 2 = centered menu */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
.nav-row{max-width:calc(var(--w-wide) + 40px);margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.nav-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:88px;transition:height .35s}
.nav.scrolled .nav-top{height:66px}
.clocks{display:flex;gap:16px;font-size:12px;color:var(--fg-2);white-space:nowrap;overflow:hidden}
.clocks b{color:var(--fg);font-weight:600}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.04em;white-space:nowrap;transition:font-size .35s}
.nav.scrolled .brand{font-size:23px}
.brand:hover{text-decoration:none}
.brand .mark{width:42px;height:32px;color:var(--fg);overflow:visible;transition:width .35s,height .35s}
.nav.scrolled .brand .mark{width:36px;height:27px}
.brand .tld{font-weight:500;color:var(--fg-3)}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:10px 18px;font-size:15px}
.nav-cta .ph{font-size:13px;color:var(--fg-2)}
.nav-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 44px;height:54px;align-items:center;border-top:1px solid var(--line-soft);font-size:15px}
.nav-links a{position:relative;color:var(--fg);opacity:.8;padding:6px 0;font-weight:500}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--fg);transform:scaleX(0);transition:transform .3s}
.nav-links a:hover,.nav-links a.on{opacity:1;text-decoration:none}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
/* Eight links: tighten the gaps before they wrap, and let the row grow (not overflow) if they still do. */
@media (max-width:1000px){.nav-links{gap:4px 24px}}
@media (max-width:860px){.nav-links{gap:4px 14px;font-size:14px;height:auto;min-height:54px}}
@media (max-width:900px){.clocks{visibility:hidden}.nav-cta .ph{display:none}}
@media (max-width:640px){
  .nav-top{grid-template-columns:minmax(0,1fr);height:68px}
  .clocks,.nav-cta{display:none}
  .brand{justify-self:center;font-size:21px}.brand .mark{width:34px;height:26px}
  .nav-links{gap:4px 18px;font-size:14px;height:auto;padding-block:10px}
}

/* Load + scroll motion (content is readable at rest) */
@keyframes rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.18s}.rise.d3{animation-delay:.3s}.rise.d4{animation-delay:.45s}
@supports (animation-timeline:view()){
  @keyframes inview{from{opacity:.25;translate:0 56px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
  .reveal{animation:inview linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Buttons are square; header top row is full width so its CTA sits at the far right */
.nav-row.nav-top{max-width:none}
.btn{border-radius:0}