/* Shared chrome for the site's inner pages (manual, app demo).
   The landing page keeps its own inline styles; the nav, buttons and footer
   here mirror them so the inner pages read as the same site. Tokens come from
   styles.css. */
:root{
  --r-card:4px;
  --maxw-page:1180px;
  --nav-h:74px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scrollbar-gutter:stable; scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:var(--font-ui); background:var(--bg-base); color:var(--text-primary);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased; overflow-x:clip;
}
::selection{background:var(--ice-300); color:var(--ink-on-ice)}
img{max-width:100%}
a{color:var(--text-link)}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:3px}
.wrap{max-width:var(--maxw-page); margin:0 auto; padding:0 var(--gutter)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.eyebrow{font-family:var(--font-mono); font-size:var(--t-eyebrow); font-weight:var(--w-medium);
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:14px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent)}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{font-family:var(--font-ui); font-weight:var(--w-semi); font-size:.95rem; text-decoration:none; cursor:pointer;
  border-radius:var(--r-xs); padding:13px 24px; display:inline-flex; align-items:center; gap:9px;
  transition:transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background .25s, border-color .25s, color .25s;
  border:1px solid transparent; white-space:nowrap}
.btn-primary{background:var(--accent); color:var(--ink-on-ice)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-ice)}
.btn-primary .ar{transition:transform .25s var(--ease-out)}
.btn-primary:hover .ar{transform:translateX(4px)}
.btn-ghost{background:transparent; border-color:var(--border-strong); color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-ice-sm); transform:translateY(-2px)}

/* ── Nav ───────────────────────────────────────────────────── */
header.nav{position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  background:rgba(6,8,11,.86); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text-primary)}
.brand .brandmark{height:46px; width:auto; display:block}
.navlinks{display:flex; align-items:center; gap:36px}
.navlinks a{color:var(--text-muted); text-decoration:none; font-size:.92rem; transition:color .2s}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--text-primary)}
.navlinks .menu-cta{display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; color:var(--ice-300);
  padding:0; font-size:.92rem}
.navlinks .menu-cta:hover{transform:none; box-shadow:none; color:var(--ice-100); background:transparent}
.navlinks .menu-cta:hover .ar{transform:translateX(4px)}
.burger{display:none}

/* "More info" — a small menu that opens on hover, focus or tap. */
.navmore{position:relative}
.navmore__btn{font:inherit; font-size:.92rem; color:var(--text-muted); background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; padding:8px 0; transition:color .2s}
.navmore__btn::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--ease-out)}
.navmore:hover .navmore__btn, .navmore:focus-within .navmore__btn, .navmore.is-here .navmore__btn{color:var(--text-primary)}
.navmore__menu{position:absolute; top:100%; right:-18px; min-width:250px; padding:8px;
  background:rgba(10,14,19,.97); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card);
  display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ease-out), transform .22s var(--ease-out), visibility .22s}
.navmore:hover .navmore__menu, .navmore:focus-within .navmore__menu{opacity:1; visibility:visible; transform:none}
.navmore:hover .navmore__btn::after, .navmore:focus-within .navmore__btn::after{transform:translateY(1px) rotate(225deg)}
.navmore__menu a{display:block; padding:11px 14px; border-radius:2px; color:var(--text-primary); font-size:.92rem; line-height:1.3}
.navmore__menu a small{display:block; margin-top:3px; color:var(--text-muted); font-size:.78rem}
.navmore__menu a:hover, .navmore__menu a[aria-current="page"]{background:rgba(140,200,255,.09); color:var(--ice-100)}

/* ── Footer ────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); padding:52px 0 64px; color:var(--text-faint); background:var(--bg-base)}
footer .wrap{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap}
footer .flinks{display:flex; gap:28px; flex-wrap:wrap}
footer a{color:var(--text-muted); text-decoration:none; font-size:.9rem; transition:color .2s}
footer a:hover{color:var(--text-primary)}
footer .fine{font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); margin-top:18px; max-width:48ch; line-height:1.8; letter-spacing:.02em}

/* ── Inner page header ─────────────────────────────────────── */
.phead{padding:calc(var(--nav-h) + clamp(40px,7vh,84px)) 0 clamp(32px,5vh,56px); position:relative; overflow:hidden}
.phead::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 78% -10%, rgba(140,200,255,.13), transparent 62%)}
.phead .wrap{position:relative}
.phead h1{font-family:var(--font-display); font-weight:var(--w-black); font-size:clamp(2.5rem,6vw,4.6rem);
  line-height:.96; letter-spacing:var(--track-display); margin:18px 0 20px; text-wrap:balance}
.phead .lede{font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--text-secondary); max-width:58ch}
.phead .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

@media(max-width:640px){
  :root{--nav-h:66px}
  .brand .brandmark{height:38px}
  .navlinks{display:none; opacity:0; transform:translateY(-10px);
    transition:opacity .2s var(--ease-out), transform .26s var(--ease-out), display .26s allow-discrete}
  .navlinks.open{display:flex; opacity:1; transform:none;
    position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:18px; padding:24px;
    background:rgba(6,8,11,.97); border-bottom:1px solid var(--border)}
  @starting-style{ .navlinks.open{opacity:0; transform:translateY(-10px)} }
  .burger{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px}
  .burger i{width:22px; height:2px; background:var(--text-primary); border-radius:2px}
  /* Inside the open menu the submenu is simply listed. */
  .navmore{width:100%}
  .navmore__btn{pointer-events:none; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint)}
  .navmore__btn::after{display:none}
  .navmore__menu{position:static; opacity:1; visibility:visible; transform:none; background:none; border:none; box-shadow:none; padding:4px 0 0; min-width:0}
  .navmore__menu a{padding:9px 0}
  .btn{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}