:root{--bg:var(--paper);--cyan:var(--brand-primary);--warn:var(--brand-primary-hover)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 0,var(--surface-2) 0,transparent 34rem),var(--bg);color:var(--text);font:16px/1.65 ui-sans-serif,system-ui,-apple-system,sans-serif}a{color:var(--cyan)}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem;z-index:3}.site-header,footer{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:var(--max);margin:auto;padding:1.2rem 1.5rem;border-bottom:1px solid var(--line)}.brand{text-decoration:none;letter-spacing:.11em;color:var(--text);font-size:1.05rem}.brand b{color:var(--cyan)}nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}nav a{text-decoration:none;color:var(--muted)}nav a:hover,nav a[aria-current=page]{color:var(--text)}.platform-link{border-left:1px solid var(--line);padding-left:1.4rem}.hero{max-width:var(--max);margin:auto;padding:8rem 1.5rem 6rem}.hero.compact{padding-bottom:3rem}.eyebrow,.tag{color:var(--cyan);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.hero h1,.prose h1{font-size:clamp(2.7rem,7vw,6rem);line-height:1;max-width:15ch;margin:.3rem 0 1.5rem}.hero h1 span,.prose h1 span{color:var(--cyan)}.lede{max-width:760px;font-size:1.25rem;color:var(--muted)}.actions,.next{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--cyan);color:var(--night);padding:.8rem 1.1rem;border-radius:var(--radius);text-decoration:none;font-weight:800}.button.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}.product-grid,.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:var(--max);margin:0 auto;padding:0 1.5rem 6rem}.product-grid article,.feature-grid article,.notice,.card-list section,.callout,.toc{background:linear-gradient(145deg,#102429,#0a171a);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}.product-grid h2,.feature-grid h2,.card-list h2{font-size:1.6rem;margin:.2rem 0}.status{color:var(--muted);font-size:.92rem}.platform-band{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:2rem;background:var(--panel);border-block:1px solid var(--line);padding:4rem max(1.5rem,calc((100% - var(--max))/2))}.platform-band h2{margin:.2rem 0}.platform-band p{color:var(--muted)}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:3rem}.notice{max-width:var(--max);margin:0 auto 6rem;color:var(--muted)}.prose{max-width:850px;margin:auto;padding:7rem 1.5rem}.prose.wide{max-width:var(--max)}.prose h2{margin-top:3.2rem;line-height:1.2}.prose h3{margin-top:2rem}.prose p,.prose li,.prose dd{color:var(--muted)}.prose li{margin:.7rem 0}.prose dt{font-weight:800;margin-top:1rem}.prose dd{margin:.2rem 0 1rem}.card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0}.card-list section p{color:var(--muted)}.callout{margin:2rem 0;border-left:4px solid var(--cyan)}.callout.warning{border-left-color:var(--warn)}.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.5rem;margin:2.5rem 0}.toc b{grid-column:1/-1}.toc a{text-decoration:none}.steps{counter-reset:steps;list-style:none;padding:0}.steps>li{position:relative;border-top:1px solid var(--line);padding:1.4rem 0 1.4rem 3.5rem}.steps>li:before{counter-increment:steps;content:counter(steps);position:absolute;left:0;top:1.4rem;width:2.3rem;height:2.3rem;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-weight:800}.steps h2{margin:0 0 .4rem;font-size:1.35rem}.steps p{margin:0}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);flex-wrap:wrap}footer a{text-decoration:none}@media(max-width:680px){.site-header{align-items:flex-start;flex-direction:column}.platform-link{border-left:0;padding-left:0}.hero{padding-top:4rem}.product-grid,.feature-grid,.platform-band,.card-list,.toc{grid-template-columns:1fr}.platform-band{padding:3rem 1.5rem}.prose{padding-top:4rem}.steps>li{padding-left:3rem}}


/* shared-layout-overrides */
.site-footer>div{display:grid;gap:.2rem}.site-footer>div span{font-size:.82rem}.site-footer nav{gap:1rem}.site-footer{max-width:var(--max)}
@media(max-width:980px) and (min-width:681px){.site-header,.site-footer{gap:1rem}.site-header nav,.site-footer nav{gap:.8rem}}
@media(min-width:1280px){.hero{padding-inline:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Round two: one-line desktop navigation and CSS-only, keyboard-usable mobile menu. */
.site-header{position:relative;z-index:10;flex-direction:row;align-items:center;min-height:76px;padding-inline:max(4vw,24px)}
.site-header nav{flex-wrap:nowrap;margin-left:auto}
.site-header nav a{white-space:nowrap}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:850;white-space:nowrap;font-size:.89rem}
.nav-toggle,.nav-burger{display:none}
.brand-mark {
  width: 38px;
  height: 26px;
  display: block;
  position: relative;
  flex: 0 0 auto;
  background: var(--signal);
  clip-path: polygon(0 12%, 100% 0, 72% 32%, 100% 42%, 58% 55%, 88% 68%, 38% 75%, 64% 100%, 0 72%, 22% 48%);
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 5px 8px 6px 10px;
  background: var(--night);
  clip-path: polygon(0 8%, 100% 0, 52% 40%, 100% 52%, 28% 72%, 47% 100%, 0 70%, 20% 44%);
}
.brand-mark::after {
  content: none;
}

@media (max-width: 1280px) {
  .site-header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 6px 0 16px;
    background: var(--night);
    border-bottom: 1px solid #183039;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .nav-toggle:checked ~ nav { display: flex; }
  .site-header nav a { padding: 13px max(4vw, 24px); font-size: .95rem; }
  .site-header nav a.button { margin: 10px max(4vw, 24px) 0; justify-content: center; }
  .site-header > .button { margin-left: auto; }
  .nav-burger { display: block; position: relative; width: 44px; height: 44px; flex: none; }
  .nav-burger span {
    position: absolute;
    top: 21px;
    left: 11px;
    width: 22px;
    height: 2px;
    background: var(--white);
    transition: background .2s ease;
  }
  .nav-burger span::before, .nav-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--white);
    transition: transform .2s ease;
  }
  .nav-burger span::before { top: -7px; }
  .nav-burger span::after { top: 7px; }
  .nav-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: max(4vw, 24px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--radius); }
  .nav-toggle:checked ~ .nav-burger span { background: transparent; }
  .nav-toggle:checked ~ .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }
}


.hero{width:min(calc(100% - 48px),var(--max));padding-inline:0}
.home-hero{text-align:center}
.home-hero h1{max-width:19ch;margin-inline:auto}
.home-hero .lede{margin-inline:auto}
.home-hero .actions{justify-content:center}
.product-grid article,.feature-grid article,.notice,.card-list section,.callout,.toc{background:var(--surface-2)}
.notice{width:min(calc(100% - 48px),var(--max))}
.next a{padding:.6rem;min-height:44px}
.prose h1{font-size:clamp(2.5rem,6vw,4.6rem);max-width:19ch}
@media(max-width:680px){.site-header{padding:1rem;flex-direction:row;align-items:center}.nav-toggle{right:16px}.brand-mark{width:30px;height:22px}.site-header nav a{padding:13px 16px}.hero,.notice{width:calc(100% - 32px)}.hero{padding-top:4rem}.site-footer{gap:1.5rem}}

/* App-led design v1: semantic roles, native-style geometry and readable type. */
body{font:1rem/1.6 var(--font-ui);background:var(--background);color:var(--ink)}
.site-header{background:var(--background);padding-inline:24px}
.app-mark{width:48px;height:48px;border-radius:var(--radius-control);flex:none}
.brand{gap:12px;letter-spacing:.06em}
.hero{padding-block:5rem 3rem}
.hero h1,.prose h1{font-size:clamp(2.25rem,4.8vw,4rem);line-height:1.12;letter-spacing:-.035em}
.lede{max-width:var(--reading-max);font-size:1.125rem}
.prose{max-width:calc(68ch + 3rem);padding-block:4rem}
.product-grid,.feature-grid{gap:24px;padding-bottom:3rem}
.product-grid article,.feature-grid article,.notice,.card-list section,.callout,.toc{background:var(--surface);border-radius:var(--radius-card);padding:24px}
.product-grid p,.feature-grid p{color:var(--muted)}
.product-grid .tag,.eyebrow{color:var(--action);font-size:.875rem;letter-spacing:.06em;font-weight:700}
.product-grid h2{display:flex;align-items:center;gap:12px}
.ui-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--action)}
.button{min-height:var(--control-height);border:1px solid transparent;border-radius:var(--radius-control);font-weight:650;line-height:1.4;color:var(--action-text);background:var(--action)}
.button:hover{background:var(--action-hover)}
.button.secondary{border-color:var(--border);background:transparent;color:var(--ink)}
.button.secondary:hover{border-color:var(--action);background:var(--surface)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.skip:focus{z-index:100;background:var(--action);color:var(--action-text);padding:12px 16px;border-radius:var(--radius-control)}
.site-footer{padding:32px 24px;align-items:flex-start;gap:24px}
.site-footer>div{flex:1 1 260px}.site-footer nav{flex:2 1 460px;gap:8px 24px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:680px){.site-header{padding:16px}.hero{padding-top:3rem}.product-grid,.feature-grid{padding-inline:16px}.site-footer{padding-inline:16px}.actions .button{flex:1 1 230px}.prose{padding:3rem 16px}.app-mark{width:44px;height:44px}}