/* / — marketing page. Self-contained (does not need app.css). Tokens only. */
.navlink { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; padding: 6px 4px; }
.navlink:hover { color: var(--accent); }
.aa-slot { display: inline-flex; }
.site main { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* hero: headline, lede, then the two buttons directly under it (left-aligned); the map full width under all three */
.hero { padding: 40px 0 32px; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(calc(var(--fs) * 2.125), 3.65vw, calc(var(--fs) * 3.25)); line-height: 1.06;
  font-weight: 650; letter-spacing: -.035em; text-wrap: balance;
}
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--ink-2); }
.lede { margin-top: 18px; font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.cta .btn { height: 48px; padding: 0 22px; font-size: var(--fs-md); }

/* hero map: a link into the same sample in the app */
.hero-map { margin: 24px 0 0; }
.hm-link { position: relative; display: block; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; color: inherit; text-decoration: none; }
.hm-link:hover { border-color: var(--line-strong); }
.hm-link:focus-visible { outline-offset: 4px; border-radius: 16px; }
.hm { display: block; width: 100%; height: auto; }
.hm-compact { display: none; }
.hm-chip {
  position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 18px; background: var(--surface); color: var(--accent); border: 1px solid var(--line-strong);
  font-size: var(--fs-sm); font-weight: 600; pointer-events: none; box-shadow: var(--shadow);
}
.hm-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-link:hover .hm-chip, .hm-link:focus-visible .hm-chip { border-color: var(--accent); }

.hm .hm-band { fill: var(--band); }
.hm .hm-band:nth-child(even) { fill: var(--surface); }
.hm .hm-cap { fill: var(--ink-2); font: 650 14px var(--font); paint-order: stroke; stroke: var(--band); stroke-width: 4px; stroke-linejoin: round; }
.hm .hm-e { fill: none; stroke: var(--edge); stroke-width: var(--edge-w); }
.hm .hm-b { stroke: var(--surface); stroke-width: 2; }
.hm .sv-critical { fill: var(--sev-critical); } .hm .sv-high { fill: var(--sev-high); } .hm .sv-medium { fill: var(--sev-medium); }
.hm .sv-low, .hm .sv-unknown { fill: var(--sev-low); }
.hm .hm-clean { fill: var(--node-clean-fill); stroke: var(--node-clean-stroke); stroke-width: 1.5; }
.hm .hm-ring { fill: none; stroke-width: 3; }
.hm .hm-ring.sv-critical { stroke: var(--sev-critical); } .hm .hm-ring.sv-high { stroke: var(--sev-high); }
.hm .hm-ring.sv-medium { stroke: var(--sev-medium); } .hm .hm-ring.sv-low, .hm .hm-ring.sv-unknown { stroke: var(--sev-low); }
.hm .hm-let { fill: var(--sev-ink); font: 700 11px var(--font); text-anchor: middle; }
.hm .hm-l { fill: var(--ink); font: 500 14px var(--font); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.hm .hm-n .hm-l { stroke: var(--band); }
.hm .hm-alt .hm-l, .hm .hm-root .hm-l { stroke: var(--surface); }
.hm .hm-root .hm-b { fill: var(--ink); stroke: none; }
.hm .hm-app { fill: none; stroke: var(--surface); stroke-width: 1.6; stroke-linejoin: round; }
.hm .hm-lr { text-anchor: start; font-weight: 650; font-size: 15px; }
.hm .hm-two rect { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1; }
.hm .hm-two text { fill: var(--ink); font: 700 10.5px var(--font); text-anchor: middle; }
.hm .hm-pill { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.hm .hm-stack { fill: var(--surface); stroke: var(--muted); stroke-width: 1.3; stroke-linejoin: round; }
.hm .hm-pt { text-anchor: start; fill: var(--muted); font-weight: 600; stroke: none; }
.hm-compact .hm-l { font-size: 14px; }
.hm .hm-lt { text-anchor: start; }
.hm-compact .hm-two text { font-size: 11.5px; }
.hm-compact .hm-let { font-size: 11.5px; }   /* the phone drawing is scaled to ~0.99: keeps letters ≥ 11px */

.hero-map figcaption { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); }
.hm-key { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hm-key .k { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.hm-key svg { height: 20px; width: auto; flex: none; }   /* 20px: the letters inside stay ≥ 11px on screen */
.hm-key text { font: 700 11px var(--font); text-anchor: middle; fill: var(--sev-ink); }
.hm-key .k-c { fill: var(--sev-critical); }
.hm-key .k-ring { fill: none; stroke: var(--sev-critical); stroke-width: 2.5; }
.hm-key .k-clean { fill: var(--node-clean-fill); stroke: var(--node-clean-stroke); stroke-width: 1.3; }
.hm-key .k-two { fill: var(--surface); stroke: var(--ink-2); }
.hm-key .k-two + text { fill: var(--ink); font-size: 10px; }

/* how it works: three numbered steps; words left, a real screen from the app right (480px) */
.how { padding: 48px 0 56px; border-top: 1px solid var(--line); margin-top: 8px; }
.how-h { font-family: var(--font-display); font-size: calc(var(--fs) * 1.75); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.how-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 40px; }
.how-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 24px clamp(32px, 5vw, 80px); align-items: center; }
.how-txt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.how-n {
  grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); font: 650 var(--fs-md)/1 var(--font-display);
}
.how-txt h3 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.015em; line-height: 1.25; align-self: center; }
.how-txt p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; max-width: 44ch; }
.how-fig { margin: 0; justify-self: end; width: 100%; max-width: 480px; }
.how-img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.how-d { display: none; }
:root[data-theme="dark"] .how-l { display: none; }
:root[data-theme="dark"] .how-d { display: block; }
.how-src { margin-top: 28px; font-size: var(--fs-xs); color: var(--muted); }

.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 0 40px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }

/* safe areas (landscape notch, home bar): the landing page loads without app.js, so plain media queries here */
.site .bar { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.site main { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.foot { padding-bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
.brand { min-height: 44px; }
.brand span { white-space: nowrap; }
.navlink { display: inline-flex; align-items: center; min-height: var(--tap); }

/* below ~980px the wide drawing would shrink its labels under 12px: use the compact drawing at its own size instead,
   with the "Open this sample" chip on its own row above it so it never covers the root's name */
@media (max-width: 980px) {
  .hm-wide { display: none; }
  .hm-compact { display: block; width: min(100%, 440px); margin: 0 auto 8px; }
  .hm-link { display: flex; flex-direction: column; }
  .hm-chip { position: static; order: -1; align-self: flex-end; margin: 12px 12px 0; box-shadow: none; }
}
@media (max-width: 900px) {
  .how-step { grid-template-columns: minmax(0, 1fr); }
  .how-fig { justify-self: start; }
}
/* phone portrait: headline → lede → both buttons inside the first screen, then the map, then how it works */
@media (max-width: 640px) {
  .hero { padding-top: 20px; }
  .hero-map { margin-top: 28px; }
  .hero-map figcaption { display: grid; }
  .lede { font-size: var(--fs-md); margin-top: 14px; }
  .cta { width: 100%; margin-top: 20px; }
  .cta .btn { flex: 1 1 auto; }
  .navlink { display: none; }
  .how { padding-top: 36px; }
  .how-steps { gap: 32px; }
}
/* phone landscape (short screens): tighter top so the headline and both buttons sit in the first screen */
@media (max-height: 500px) and (max-width: 1023px) {
  .hero { padding-top: 16px; }
  .hero h1 { font-size: calc(var(--fs) * 2); }
  .lede { margin-top: 10px; font-size: var(--fs-md); }
  .cta { margin-top: 16px; }
}