/* 00-base.css */
/* hp base — the homepage variants' design system on the hellojade kit (marketing ADR-001).
   Every color, radius, motion and font comes from /static/kit/tokens.css (--hj-*). Local aliases below only
   NAME kit values for this page; never introduce a new hex here — if a value is missing, it belongs in the kit.
   Dark is the default (data-theme="dark" on <html>); light is the kit's light surface, toggled by hp.js. */

:root {
  --hp-bg: var(--hj-semantic-bg-page, #081310);
  --hp-surface: var(--hj-semantic-bg-surface, #0b1f17);
  --hp-surface-2: color-mix(in oklab, var(--hp-surface) 82%, var(--hj-primitive-ink, #e8fff6) 6%);
  --hp-ink: var(--hj-semantic-text-primary, #e8fff6);
  --hp-ink-2: color-mix(in oklab, var(--hp-ink) 72%, var(--hp-bg));
  --hp-ink-3: color-mix(in oklab, var(--hp-ink) 50%, var(--hp-bg));
  --hp-line: color-mix(in oklab, var(--hp-ink) 12%, transparent);
  --hp-line-2: color-mix(in oklab, var(--hp-ink) 20%, transparent);
  --hp-jade: var(--hj-semantic-brand-primary, #0f8c68);
  --hp-jade-bright: var(--hj-semantic-brand-bright, #23c592);
  --hp-mint: var(--hj-semantic-brand-accent, #2fd6a3);
  --hp-jade-deep: var(--hj-primitive-jade-deep, #0a5f47);
  --hp-amber: var(--hj-semantic-caution, #b97e26);
  --hp-danger: var(--hj-semantic-danger, #ff2a5c);
  --hp-glow: color-mix(in oklab, var(--hp-mint) 35%, transparent);

  --hp-font: "Inter", var(--hj-font-family-sans, system-ui, sans-serif);
  --hp-display: "Space Grotesk", "Inter", var(--hj-font-family-sans, system-ui, sans-serif);
  --hp-mono: "JetBrains Mono", var(--hj-font-family-mono, ui-monospace, monospace);

  --hp-r-sm: var(--hj-radius-sm, 8px);
  --hp-r-md: var(--hj-radius-md, 10px);
  --hp-r-lg: var(--hj-radius-lg, 12px);
  --hp-r-xl: var(--hj-radius-xl, 16px);
  --hp-r-pill: var(--hj-radius-pill, 999px);
  --hp-ease: var(--hj-easing-ease-out-cubic, cubic-bezier(.215,.61,.355,1));
  --hp-ease-back: var(--hj-easing-ease-out-back, cubic-bezier(.34,1.56,.64,1));
  --hp-rise: var(--hj-duration-risefade, 900ms);

  --hp-wrap: 1200px;
  --hp-gutter: clamp(16px, 4vw, 40px);
  --hp-sec-pad: clamp(64px, 10vw, 128px);
  --hp-nav-h: 68px;
  --hp-sticky-h: 64px;
  --hp-shadow: 0 1px 0 color-mix(in oklab, var(--hp-ink) 6%, transparent) inset, 0 24px 60px -24px rgb(0 0 0 / .55);

  /* stacking scale (ADR-033: named layers, no ad-hoc z-index) */
  --hp-z-base: 0; --hp-z-raise: 10; --hp-z-sticky: 50; --hp-z-nav: 60; --hp-z-modal: 90; --hp-z-skip: 100;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --hp-bg: #f4faf7;
  --hp-surface: #ffffff;
  --hp-surface-2: #eaf5f0;
  --hp-ink: #0b1f17;
  --hp-ink-2: color-mix(in oklab, #0b1f17 72%, #f4faf7);
  --hp-ink-3: color-mix(in oklab, #0b1f17 52%, #f4faf7);
  --hp-line: color-mix(in oklab, #0b1f17 12%, transparent);
  --hp-line-2: color-mix(in oklab, #0b1f17 20%, transparent);
  --hp-mint: var(--hj-semantic-brand-primary, #0f8c68);
  --hp-glow: color-mix(in oklab, #0f8c68 22%, transparent);
  --hp-shadow: 0 1px 0 #fff inset, 0 24px 60px -28px rgb(11 31 23 / .28);
  color-scheme: light;
}


/* 00e-elements.css */
/* hp elements — the document base and the components only the homepage variants use (split out of 00-base.css,
   prodfix4-1009). 00-base.css holds the tokens; 00s-shell.css the chrome every hp-shell page shares. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hp-nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--hp-bg); color: var(--hp-ink);
  font: 400 17px/1.6 var(--hp-font); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body:has(.hp-sticky:not([hidden])) { padding-bottom: calc(var(--hp-sticky-h) + 16px + env(safe-area-inset-bottom)); }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--hp-mint); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--hp-display); color: var(--hp-ink); margin: 0; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 84px); font-weight: 700; }
h2 { font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.015em; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--hp-mint); }
p { margin: 0; text-wrap: pretty; }

/* ---- sections ---- */
.hp-sec { position: relative; padding: var(--hp-sec-pad) 0; }
.hp-sec-alt { background: var(--hp-surface); border-block: 1px solid var(--hp-line); }
.hp-sec-deep { background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--hp-jade-deep) 55%, var(--hp-bg)) 0%, var(--hp-bg) 70%); }
.hp-sec-head { max-width: 780px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.hp-sec-head.left { margin-left: 0; text-align: left; }
.hp-eyebrow { font: 600 13px/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--hp-mint); margin-bottom: 18px; }
.hp-lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--hp-ink-2); margin-top: 18px; }

/* reveal on scroll (hp.js adds .in); content is visible without JS */
[data-hp-reveal] .hp-wrap > * { transition: opacity var(--hp-rise) var(--hp-ease), transform var(--hp-rise) var(--hp-ease); }
.hp-js [data-hp-reveal]:not(.in) .hp-wrap > * { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { .hp-js [data-hp-reveal]:not(.in) .hp-wrap > * { opacity: 1; transform: none; } }
/* print shows every section whole: a section never scrolled into view has not revealed, and printed blank (board #21) */
@media print { [data-hp-reveal] .hp-wrap > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- the website field ---- */
.hp-site {
  display: flex; align-items: center; gap: 6px; width: 100%; max-width: 560px;
  padding: 6px 6px 6px 18px; border-radius: var(--hp-r-pill);
  background: color-mix(in oklab, var(--hp-surface) 85%, transparent); border: 1px solid var(--hp-line-2);
  box-shadow: var(--hp-shadow); backdrop-filter: blur(10px);
}
.hp-site:focus-within { border-color: var(--hp-mint); box-shadow: 0 0 0 4px var(--hp-glow), var(--hp-shadow); }
.hp-site-pre { font: 500 16px/1 var(--hp-mono); color: var(--hp-ink-3); }
.hp-site input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: var(--hp-ink);
  font: 500 17px/1 var(--hp-font); /* >=16px: no iOS zoom on focus */
}
.hp-site input::placeholder { color: var(--hp-ink-3); }
.hp-site .hp-btn { flex: none; }
@media (max-width: 480px) {
  .hp-site { flex-wrap: wrap; padding: 8px; border-radius: var(--hp-r-xl); }
  .hp-site-pre { padding-left: 10px; }
  .hp-site .hp-btn { width: 100%; }
}


/* ---- icons ---- */
/* the 3D icon sets (/hp/icons/{a,b,c}, see hpIcon3D): full-color art with its own shading and contact
   shadow, so no filter and no recolor here; set B carries a keyline that holds on the light theme */
.hp-ico { flex: none; vertical-align: middle; }


/* ---- the app frame (portal chrome around demo media) ---- */
.hp-frame {
  margin: 0; border-radius: var(--hp-r-xl); overflow: hidden; background: var(--hp-surface);
  border: 1px solid var(--hp-line-2); box-shadow: 0 40px 100px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .03) inset;
}
.hp-frame-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 60%, var(--hp-surface)); }
.hp-frame-dots { display: flex; gap: 6px; }
.hp-frame-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hp-line-2); }
.hp-frame-title { font: 500 13px/1 var(--hp-mono); color: var(--hp-ink-3); }
.hp-frame-body { display: grid; grid-template-columns: 52px 1fr; }
.hp-frame-rail { contain: size; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; border-right: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 45%, var(--hp-surface)); }
.hp-frame-rail span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; opacity: .55; }
.hp-frame-rail span.on { opacity: 1; background: color-mix(in oklab, var(--hp-mint) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--hp-mint) 40%, transparent) inset; }
.hp-frame-view { position: relative; min-width: 0; aspect-ratio: 16 / 9; background: #050c09; }
.hp-frame-view > video, .hp-frame-view > img, .hp-frame-view > canvas { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .hp-frame-body { grid-template-columns: 1fr; } .hp-frame-rail { display: none; } }

.hp-video { width: 100%; height: auto; background: #050c09; border-radius: inherit; }

/* ---- cards & grids shared by elements ---- */
.hp-card {
  position: relative; background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-r-xl);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--hp-shadow);
}
.hp-sec-alt .hp-card { background: var(--hp-bg); }
.hp-grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.hp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .hp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hp-grid-2, .hp-grid-3, .hp-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.hp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hp-split.rev { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.hp-split.rev > :first-child { order: 2; }
@media (max-width: 900px) { .hp-split, .hp-split.rev { grid-template-columns: minmax(0, 1fr); } .hp-split.rev > :first-child { order: 0; } }
.hp-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.hp-ticks li { position: relative; padding-left: 30px; color: var(--hp-ink-2); }
.hp-ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in oklab, var(--hp-mint) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%232fd6a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--hp-r-pill); font: 600 12px/1 var(--hp-mono); letter-spacing: .04em; color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 12%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.hp-stat { font: 700 clamp(34px, 4.4vw, 52px)/1 var(--hp-display); letter-spacing: -0.04em; color: var(--hp-ink); }
.hp-stat small { font-size: .45em; color: var(--hp-ink-3); font-weight: 600; letter-spacing: 0; }
.hp-muted { color: var(--hp-ink-3); font-size: 14px; }

/* ---- DIY / done-for-you voices (element 5 sets html[data-path]; default = both shown, DIY voice) ---- */
[data-voice="pro"] { display: none; }
:root[data-path="pro"] [data-voice="diy"] { display: none; }
:root[data-path="pro"] [data-voice="pro"] { display: revert; }
:root[data-path="diy"] [data-path-block="pro"], :root[data-path="pro"] [data-path-block="diy"] { display: none; }



/* lightbox (js/05-lightbox.js) */
.hp-lb-btn { position: absolute; right: 12px; bottom: 12px; z-index: var(--hp-z-raise); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--hp-r-pill);
  background: color-mix(in oklab, var(--hp-bg) 78%, transparent); color: var(--hp-ink); border: 1px solid var(--hp-line-2); font: 600 14px/1 var(--hp-font); cursor: pointer; backdrop-filter: blur(8px); }
.hp-lb-btn:hover { border-color: var(--hp-mint); }
.hp-frame-view, .hp-live { position: relative; }
.hp-lb { width: min(1600px, 96vw); max-width: none; padding: 0; border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-xl); background: var(--hp-surface); color: var(--hp-ink); box-shadow: 0 40px 120px rgb(0 0 0 / .6); }
.hp-lb::backdrop { background: rgb(4 10 8 / .82); backdrop-filter: blur(4px); }
.hp-lb-bar { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--hp-line); }
.hp-lb-cap { flex: 1; font: 500 14px/1.3 var(--hp-font); color: var(--hp-ink-2); }
.hp-lb-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--hp-ink); font-size: 28px; cursor: pointer; }
.hp-lb-x:hover { background: color-mix(in oklab, var(--hp-ink) 8%, transparent); }
.hp-lb-v { display: block; width: 100%; max-height: calc(100svh - 120px); background: #050c09; border-radius: 0 0 var(--hp-r-xl) var(--hp-r-xl); }
html.hp-lb-open { overflow: hidden; }

/* 00s-shell.css */
/* hp shell — the header, menu, footer, buttons and sticky bar (split out of 00-base.css, prodfix4-1009).
   Served twice: inside /hp/hp.css (the homepage and its variants) and inside /hp/page.css (the kept v1 pages:
   /contact /terms /privacy /subscriptions, which wear this chrome over their own body). Selectors here are
   hp-* classes only — no element rules — so they never restyle a v1 body. */

.hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-skip { position: absolute; left: 12px; top: -60px; z-index: var(--hp-z-skip); background: var(--hp-mint); color: var(--hp-bg); padding: 10px 14px; border-radius: var(--hp-r-sm); font-weight: 600; }
.hp-skip:focus { top: 12px; }

.hp-wrap { width: 100%; max-width: var(--hp-wrap); margin: 0 auto; padding: 0 max(var(--hp-gutter), env(safe-area-inset-left)) 0 max(var(--hp-gutter), env(safe-area-inset-right)); }

/* ---- buttons ---- */
.hp-btn {
  --b-bg: transparent; --b-ink: var(--hp-ink); --b-line: var(--hp-line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px; border-radius: var(--hp-r-pill);
  background: var(--b-bg); color: var(--b-ink); border: 1px solid var(--b-line);
  font: 600 16px/1.1 var(--hp-font); white-space: nowrap; cursor: pointer; text-decoration: none !important;
  transition: transform .18s var(--hp-ease), box-shadow .18s var(--hp-ease), background .18s;
  -webkit-tap-highlight-color: transparent;
}
.hp-btn:hover { transform: translateY(-1px); }
.hp-btn:active { transform: translateY(0) scale(.98); }
.hp-btn-primary {
  --b-bg: linear-gradient(180deg, var(--hp-jade-bright), var(--hp-jade)); --b-ink: #04140e; --b-line: color-mix(in oklab, var(--hp-mint) 60%, transparent);
  box-shadow: 0 10px 30px -10px var(--hp-glow), 0 1px 0 rgb(255 255 255 / .35) inset;
}
.hp-btn-primary:hover { box-shadow: 0 14px 40px -10px var(--hp-glow), 0 1px 0 rgb(255 255 255 / .35) inset; }
.hp-btn-sub { font-weight: 500; font-size: 13px; opacity: .78; padding-left: 10px; border-left: 1px solid rgb(4 20 14 / .25); }
.hp-btn-lg { min-height: 58px; padding: 14px 28px; font-size: 18px; }
.hp-btn-sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.hp-btn-sm .hp-btn-sub { display: none; }
.hp-btn-ghost:hover { background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }


.hp-appicon { flex: none; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .45)); }

/* ---- nav ---- */
.hp-nav {
  position: sticky; top: 0; z-index: var(--hp-z-nav); height: var(--hp-nav-h);
  background: color-mix(in oklab, var(--hp-bg) 72%, transparent); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
  padding-top: env(safe-area-inset-top);
}
.hp-nav.scrolled { border-bottom-color: var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 88%, transparent); }
.hp-nav-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.hp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--hp-ink); text-decoration: none !important; min-height: 44px; }
.hp-word { font: 700 22px/1 var(--hp-display); letter-spacing: -0.04em; }
.hp-word b { font-weight: 700; color: var(--hj-semantic-wordmark-hello, var(--hp-ink)); }
.hp-word i { font-style: normal; color: var(--hj-semantic-wordmark-jade, var(--hp-jade-bright)); }
:root[data-theme="light"] .hp-word b { color: var(--hp-ink); }
.hp-nav-links { display: flex; gap: 4px; margin-left: 8px; }
.hp-nav-links a { color: var(--hp-ink-2); font-weight: 500; font-size: 15px; padding: 12px 12px; border-radius: var(--hp-r-sm); }
.hp-nav-links a:hover { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); text-decoration: none; }
.hp-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hp-nav-signin { color: var(--hp-ink-2); font-weight: 500; padding: 12px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 980px) { .hp-nav-links { display: none; } }
@media (max-width: 420px) { .hp-nav-signin { display: none; } .hp-word { font-size: 20px; } }
/* the phone/tablet menu (hpNav, board #21): a <details> disclosure shown where .hp-nav-links is hidden */
.hp-menu { display: none; }
.hp-menu-btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--hp-r-md); color: var(--hp-ink); border: 1px solid var(--hp-line-2);
}
.hp-menu-btn::-webkit-details-marker { display: none; }
.hp-menu-btn:focus-visible { outline: 2px solid var(--hp-jade-bright); outline-offset: 2px; }
.hp-menu .hp-menu-close, .hp-menu[open] .hp-menu-open { display: none; }
.hp-menu[open] .hp-menu-close { display: inline; }
.hp-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 2px;
  padding: 8px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  background: var(--hp-bg); border-bottom: 1px solid var(--hp-line); box-shadow: 0 18px 30px rgb(0 0 0 / .35);
  max-height: calc(100dvh - var(--hp-nav-h)); overflow-y: auto;
}
.hp-menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--hp-r-sm); color: var(--hp-ink); font-weight: 500; font-size: 17px; }
.hp-menu-panel a:hover { background: color-mix(in oklab, var(--hp-ink) 6%, transparent); text-decoration: none; }
.hp-menu-panel .hp-menu-signin { margin-top: 6px; border: 1px solid var(--hp-line-2); justify-content: center; }
@media (max-width: 980px) { .hp-menu { display: block; } }
@media (max-width: 420px) { .hp-nav-in { gap: 10px; } .hp-nav-cta { gap: 6px; } }

/* ---- footer ---- */
.hp-foot { border-top: 1px solid var(--hp-line); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--hp-bg); }
.hp-foot-in { display: grid; gap: 24px; grid-template-columns: 1fr auto; align-items: center; }
.hp-foot-brand { display: flex; align-items: center; gap: 14px; color: var(--hp-ink-2); }
.hp-foot nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hp-foot nav a { color: var(--hp-ink-2); padding: 12px 10px; display: inline-flex; min-height: 44px; align-items: center; }
.hp-foot-variants { grid-column: 1 / -1; color: var(--hp-ink-3); font-size: 14px; }
.hp-foot-variants a { display: inline-block; padding: 12px 6px; }
@media (max-width: 720px) { .hp-foot-in { grid-template-columns: 1fr; } }

/* ---- sticky CTA ---- */
.hp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hp-z-sticky);
  display: flex; align-items: center; justify-content: center; gap: 16px; min-height: var(--hp-sticky-h);
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in oklab, var(--hp-bg) 86%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--hp-line);
  transform: translateY(0); transition: transform .3s var(--hp-ease);
}
.hp-sticky[hidden] { display: flex; transform: translateY(110%); visibility: hidden; }
.hp-sticky-txt { color: var(--hp-ink-2); font-weight: 500; }
@media (max-width: 560px) { .hp-sticky-txt { display: none; } .hp-sticky .hp-btn { width: 100%; } .hp-sticky .hp-btn-sub { display: inline; } }


/* 01-hero.css */
/* element 1 — hero */
.hp-hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); overflow: clip; }
.hp-hero-glow { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(50% 45% at 72% 38%, color-mix(in oklab, var(--hp-jade) 40%, transparent), transparent 70%),
              radial-gradient(40% 40% at 10% 0%, color-mix(in oklab, var(--hp-jade-deep) 55%, transparent), transparent 70%); opacity: .9; }
.hp-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hp-hero-b .hp-hero-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
.hp-hero-sub { font-size: clamp(18px, 1.8vw, 21px); color: var(--hp-ink-2); margin: 22px 0 30px; max-width: 34em; }
.hp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hp-hero-alt { margin-top: 14px; color: var(--hp-ink-3); font-size: 15px; }
.hp-hero-alt a { display: inline-block; padding: 12px 2px; }
/* the "·" between the two links is drawn left of the second link and clipped when that link starts a line, so a
   wrapped row never ends or starts on a bare separator (polish-1010, QA27 bp-home/360) */
.hp-hero-alt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1em; overflow: hidden; padding: 2px; margin: 12px -2px -2px; }
.hp-hero-alt > span { margin-right: -.65em; }
.hp-hero-alt .hp-sep { position: relative; }
.hp-hero-alt .hp-sep::before { content: "·"; position: absolute; left: -.75em; width: .5em; text-align: center; color: var(--hp-ink-3); pointer-events: none; }
.hp-hero-proof { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--hp-ink-2); font-size: 15px; }
.hp-hero-proof li { display: flex; align-items: center; gap: 8px; }
.hp-hero-proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hp-mint); box-shadow: 0 0 12px var(--hp-mint); }
@media (max-width: 900px) {
  .hp-hero-in, .hp-hero-b .hp-hero-in { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-media { order: -1; }
  .hp-hero-c .hp-hero-media, .hp-hero-a .hp-hero-media { order: 0; }
}

/* the orbit: 3D app icon with the module icons circling it */
.hp-orbit { container-type: inline-size; --r: 40cqi; position: relative; width: min(520px, 100%); aspect-ratio: 1; margin: 0 auto; perspective: 900px; }
.hp-orbit-core { position: absolute; inset: 0; display: grid; place-items: center; }
.hp-orbit-icon { width: clamp(120px, 34%, 184px); height: auto; animation: hp-float 6s var(--hp-ease) infinite alternate; }
.hp-orbit-core::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--hp-glow), transparent 70%); filter: blur(8px); }
.hp-orbit-ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform: rotateX(58deg); transform-style: preserve-3d; animation: hp-spin 60s linear infinite; }
.hp-orbit-ring::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--hp-mint) 35%, transparent); }
.hp-orbit-ring li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(var(--r) * -1)) rotate(calc(-360deg / var(--n) * var(--i))); }
.hp-orbit-chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotateX(-58deg); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: var(--hp-r-pill); background: color-mix(in oklab, var(--hp-surface) 90%, transparent); border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow); white-space: nowrap; animation: hp-counter 60s linear infinite; }
.hp-orbit-chip b { font: 600 13px/1 var(--hp-font); color: var(--hp-ink); }
@keyframes hp-spin { to { transform: rotateX(58deg) rotateZ(360deg); } }
@keyframes hp-counter { from { transform: translate(-50%, -50%) rotateZ(0deg) rotateX(-58deg); } to { transform: translate(-50%, -50%) rotateZ(-360deg) rotateX(-58deg); } }
@keyframes hp-float { from { transform: translateY(-6px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }
@media (max-width: 560px) { .hp-orbit-chip b { display: none; } .hp-orbit-chip { padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .hp-orbit-ring, .hp-orbit-chip, .hp-orbit-icon { animation: none; } }
@container (max-width: 440px) { .hp-orbit-chip b { display: none; } .hp-orbit-chip { padding: 6px; } }

/* 10-a.css */
/* lane A — element 2 (tab chaos), 3 (tool calculator), 4 (live app frame), 6 (constellation).
   Static layouts are the default (no JS, no WebGL2, reduced motion); js/10-a.js adds .live to upgrade. */

/* ================= element 2: tab chaos ================= */
.hp-chaos { --hp-chaos-h: max(400px, min(calc(100svh - var(--hp-nav-h) - var(--hp-sticky-h) - 40px), 620px)); position: relative; }
.hp-chaos-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: clamp(20px, 3vw, 36px); border-radius: var(--hp-r-xl); border: 1px solid var(--hp-line);
  background: color-mix(in oklab, var(--hp-bg) 70%, transparent); box-shadow: var(--hp-shadow);
}
.hp-chaos-gl { display: none; }
.hp-chaos-tag { font: 600 12px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); margin-bottom: 14px; text-align: center; }
.hp-chaos-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 8px; justify-content: center; }
.hp-chaos-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 8px; max-width: 100%;
  border-radius: 10px 10px 4px 4px; background: var(--hp-surface); border: 1px solid var(--hp-line-2);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / .6); color: var(--hp-ink); font: 500 14px/1 var(--hp-font); white-space: nowrap;
}
.hp-chaos-tab:nth-child(3n) { transform: rotate(-3deg); }
.hp-chaos-tab:nth-child(3n+1) { transform: rotate(2.5deg) translateY(4px); }
.hp-chaos-tab:nth-child(4n) { transform: rotate(-1.5deg) translateY(-3px); }
.hp-chaos-fav { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in oklab, var(--hp-ink) 7%, transparent); flex: none; }
.hp-chaos-fav .hp-ico { width: 18px; height: 18px; }
.hp-chaos-name { overflow: hidden; text-overflow: ellipsis; }
.hp-chaos-x { color: var(--hp-ink-3); font-size: 15px; margin-left: 2px; }
.hp-chaos-arrow { color: var(--hp-mint); display: grid; place-items: center; }
.hp-chaos-after { display: grid; justify-items: center; }
.hp-chaos-app { display: grid; justify-items: center; gap: 12px; text-align: center; }
.hp-chaos-icon { width: clamp(96px, 12vw, 132px); height: auto; }
.hp-chaos-app-name b { display: block; font: 700 22px/1.1 var(--hp-display); letter-spacing: -.03em; color: var(--hp-ink); }
.hp-chaos-app-name span { display: block; margin-top: 6px; font-size: 14px; color: var(--hp-ink-2); }
.hp-chaos-cap { grid-column: 1 / -1; display: grid; gap: 6px; text-align: center; font: 600 clamp(17px, 1.8vw, 21px)/1.35 var(--hp-display); letter-spacing: -.01em; }
.hp-chaos-cap-a { color: color-mix(in oklab, var(--hp-danger) 70%, var(--hp-ink)); }
.hp-chaos-cap-b { color: var(--hp-mint); }
.hp-chaos-hint { display: none; }
@media (max-width: 760px) {
  .hp-chaos-stage { grid-template-columns: minmax(0, 1fr); }
  .hp-chaos-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 420px) { .hp-chaos-tab { font-size: 13px; height: 36px; } }

/* live: a tall scroll track with a sticky stage; positions come from js */
.hp-chaos.live { height: calc(var(--hp-chaos-h) + 150vh); }
.hp-chaos.live .hp-chaos-stage {
  display: block; position: sticky; top: calc(var(--hp-nav-h) + max(16px, (100svh - var(--hp-nav-h) - var(--hp-sticky-h) - var(--hp-chaos-h)) / 2)); height: var(--hp-chaos-h); overflow: hidden; padding: 0;
  background: radial-gradient(90% 70% at 50% 45%, color-mix(in oklab, var(--hp-jade-deep) 30%, var(--hp-bg)), var(--hp-bg) 75%);
}
.hp-chaos.live .hp-chaos-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-chaos.live .hp-chaos-before, .hp-chaos.live .hp-chaos-tabs { position: static; display: block; }
.hp-chaos.live .hp-chaos-tag, .hp-chaos.live .hp-chaos-arrow { display: none; }
.hp-chaos.live .hp-chaos-tab { position: absolute; left: 0; top: 0; transform: none; will-change: transform, opacity; }
.hp-chaos.live .hp-chaos-after { position: absolute; inset: 0; display: block; pointer-events: none; }
.hp-chaos.live .hp-chaos-app { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.hp-chaos.live .hp-chaos-cap { position: absolute; left: 16px; right: 16px; bottom: 20px; display: grid; }
.hp-chaos.live .hp-chaos-cap > span { grid-area: 1 / 1; transition: opacity .25s; }
.hp-chaos.live .hp-chaos-cap-a { opacity: calc(1 - var(--cap, 0)); }
.hp-chaos.live .hp-chaos-cap-b { opacity: var(--cap, 0); }
.hp-chaos.live .hp-chaos-hint {
  display: block; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); opacity: var(--hint, 1);
  font: 600 11px/1 var(--hp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hp-ink-3);
}
@media (max-width: 640px) { .hp-chaos.live { height: calc(var(--hp-chaos-h) + 120vh); } }

/* ================= element 3: the tool calculator ================= */
.hp-calc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
@media (max-width: 1023px) { .hp-calc { grid-template-columns: minmax(0, 1fr); } }
.hp-calc-pick { min-width: 0; }

/* the one input: number of employees */
.hp-calc-emp {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 22px;
  padding: 14px 16px; border-radius: var(--hp-r-lg); background: var(--hp-surface); border: 1px solid var(--hp-line-2);
}
.hp-calc-emp label { font: 600 16px/1.25 var(--hp-font); color: var(--hp-ink); }
.hp-calc-step { display: inline-flex; align-items: stretch; border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-md); overflow: hidden; background: var(--hp-bg); }
.hp-calc-step input {
  width: 6ch; min-width: 0; min-height: 44px; padding: 0 6px; border: 0; margin: 0; background: transparent; color: var(--hp-ink);
  font: 700 18px/1 var(--hp-display); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.hp-calc-step input::-webkit-inner-spin-button, .hp-calc-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hp-calc-step input:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: -2px; }
.hp-calc-stepbtn {
  display: none; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; margin: 0; cursor: pointer;
  background: var(--hp-surface-2); color: var(--hp-ink); font: 600 22px/1 var(--hp-font); -webkit-tap-highlight-color: transparent;
}
.hp-js .hp-calc-stepbtn { display: grid; }
.hp-calc-stepbtn:hover { background: color-mix(in oklab, var(--hp-mint) 16%, var(--hp-surface-2)); }
.hp-calc-stepbtn:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: -2px; }
.hp-calc-stepbtn:disabled { opacity: .4; cursor: default; }
.hp-calc-hint { flex: 1 0 100%; font: 500 12px/1.35 var(--hp-mono); color: var(--hp-ink-3); }

.hp-calc-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.hp-calc-set legend { padding: 0; margin-bottom: 14px; font: 600 12px/1 var(--hp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hp-ink-3); }
/* equal-width columns; every card spans three shared row tracks (subgrid), so in any row the cards share
   their top edge, their height, and the line their price and basis start on — however the titles wrap */
.hp-calc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 214px), 1fr)); gap: 10px; align-items: stretch; }
.hp-calc-chip {
  position: relative; min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px;
  grid-template-columns: 28px minmax(0, 1fr) 22px; column-gap: 10px; align-content: start;
  padding: 12px 12px 12px 14px; border-radius: var(--hp-r-lg); background: var(--hp-surface); border: 1px solid var(--hp-line-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .18s, background .18s, transform .18s var(--hp-ease);
}
.hp-calc-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: var(--hp-z-raise); }
.hp-calc-ico { grid-column: 1; grid-row: 1; align-self: start; width: 28px; height: 28px; }
.hp-calc-ico .hp-ico { display: block; width: 28px; height: 28px; }
.hp-calc-name { grid-column: 2; grid-row: 1; align-self: start; padding-top: 4px; font: 600 15px/1.25 var(--hp-font); color: var(--hp-ink); overflow-wrap: anywhere; }
.hp-calc-check { grid-column: 3; grid-row: 1; align-self: start; margin-top: 3px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--hp-line-2); transition: background .18s, border-color .18s; }
.hp-calc-range { grid-column: 2 / 4; grid-row: 2; align-self: start; font: 700 15px/1.25 var(--hp-display); letter-spacing: -.01em; color: var(--hp-ink-2); font-variant-numeric: tabular-nums; }
.hp-calc-basis { grid-column: 2 / 4; grid-row: 3; align-self: start; font: 500 12px/1.35 var(--hp-mono); color: var(--hp-ink-3); }
.hp-calc-chip:hover { border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-calc-chip:has(input:checked) { border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 9%, var(--hp-surface)); }
.hp-calc-chip input:checked ~ .hp-calc-range { color: var(--hp-ink); }
.hp-calc-chip input:checked ~ .hp-calc-check {
  border-color: var(--hp-mint);
  background: var(--hp-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2304140e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.hp-calc-chip:has(input:focus-visible) { outline: 2px solid var(--hp-mint); outline-offset: 3px; }
.hp-calc-chip:has(input:active) { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .hp-calc-chip { transition: none; } .hp-calc-chip:has(input:active) { transform: none; } }

.hp-calc-out { position: sticky; top: calc(var(--hp-nav-h) + 20px); min-width: 0; }
@media (max-width: 1023px) { .hp-calc-out { position: static; } }
.hp-calc-panel { background: var(--hp-surface); border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-xl); padding: clamp(16px, 2.2vw, 26px); box-shadow: var(--hp-shadow); }
.hp-calc-panel h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 20px; margin-bottom: 14px; }
.hp-calc-who { font: 600 12px/1 var(--hp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-ink-3); }
.hp-calc-strip { height: 36px; padding: 6px 6px 0; border-radius: 10px 10px 0 0; background: color-mix(in oklab, var(--hp-bg) 70%, var(--hp-surface)); border: 1px solid var(--hp-line); border-bottom: 0; overflow: hidden; }
.hp-calc-tabs { display: flex; gap: 2px; height: 100%; }
.hp-calc-tabs i {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 118px; border-radius: 7px 7px 0 0;
  background: var(--hp-surface-2); border: 1px solid var(--hp-line); border-bottom: 0;
}
.hp-calc-tabs i::before { content: ""; position: absolute; left: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 3px; background: color-mix(in oklab, var(--hp-ink) 28%, transparent); }
.hp-calc-tabs i::after { content: ""; position: absolute; left: 20px; right: 8px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: color-mix(in oklab, var(--hp-ink) 14%, transparent); }
.hp-calc-tabs i.new { animation: hp-calc-tab .35s var(--hp-ease-back); }
@keyframes hp-calc-tab { from { transform: translateY(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hp-calc-tabs i.new { animation: none; } }
.hp-calc-stats { margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hp-line); border: 1px solid var(--hp-line); border-radius: 0 0 var(--hp-r-lg) var(--hp-r-lg); overflow: hidden; }
.hp-calc-stats > div { background: var(--hp-surface); padding: 14px 16px; min-width: 0; }
.hp-calc-stats > .wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.hp-calc-stats dt { font: 500 14px/1.3 var(--hp-font); color: var(--hp-ink-2); }
.hp-calc-stats dt span { display: block; font: 500 11px/1.3 var(--hp-mono); color: var(--hp-ink-3); letter-spacing: .02em; margin-top: 2px; }
.hp-calc-stats dd { margin: 4px 0 0; font: 700 clamp(28px, 3.4vw, 38px)/1 var(--hp-display); letter-spacing: -.03em; color: var(--hp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-calc-stats > .wide dd { margin: 0 0 0 auto; font-size: clamp(20px, 2.2vw, 26px); white-space: normal; text-align: right; }
.hp-calc-stats > .big dd { font-size: clamp(22px, 2.6vw, 30px); color: var(--hp-mint); }
.hp-calc-stats > .warn dd { color: color-mix(in oklab, var(--hp-danger) 75%, var(--hp-ink)); }
@media (max-width: 420px) { .hp-calc-stats > .wide { flex-direction: column; align-items: flex-start; } .hp-calc-stats > .wide dd { margin: 0; text-align: left; } }
.hp-calc.none .hp-calc-stats dd { color: var(--hp-ink-3); }
.hp-calc-ad { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--hp-ink-2); }
.hp-calc-ad b { color: var(--hp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-calc-note { margin: 0 0 16px; font: 500 12px/1.4 var(--hp-mono); color: var(--hp-ink-3); }
.hp-js .hp-calc-nojs { display: none; }
.hp-calc-nojs { margin: -8px 0 14px; font-size: 13px; }
.hp-calc-vs { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-mint) 10%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.hp-calc-vs p { color: var(--hp-ink-2); font-size: 15px; line-height: 1.45; }
.hp-calc-vs b { color: var(--hp-ink); }
.hp-calc-one { flex: none; display: grid; }
.hp-calc-one img { width: 36px; height: 36px; }
.hp-calc-cta { margin-top: 18px; }
.hp-calc-cta .hp-btn { width: 100%; }
@media (max-width: 380px) { .hp-calc-cta .hp-btn-lg { padding: 12px 16px; font-size: 17px; } }

/* ================= element 4: the live app frame ================= */
.hp-live { width: 100%; min-width: 0; }
.hp-live-frame .hp-frame-rail { gap: 2px; padding: 8px 0; contain: size; overflow: hidden; }
.hp-live-btn {
  position: relative; flex: 0 1 40px; min-height: 26px; width: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer; opacity: .55; transition: opacity .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.hp-live-btn .hp-ico { width: 20px; height: 20px; }
.hp-live-btn:hover, .hp-live-btn:focus-visible { opacity: .9; background: color-mix(in oklab, var(--hp-ink) 7%, transparent); }
.hp-live-btn.on { opacity: 1; background: color-mix(in oklab, var(--hp-mint) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--hp-mint) 40%, transparent) inset; }
.hp-live-prog { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--hp-mint); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; }
.hp-live-btn.on .hp-live-prog { opacity: .9; }
.hp-live-view { overflow: hidden; }
.hp-live-view > .hp-live-poster, .hp-live-view > .hp-live-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--hp-ease); }
.hp-live-vid { opacity: 0; }
.hp-live-vid.on { opacity: 1; }
.hp-live-poster.off { opacity: 0; }
.hp-live-cap { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.hp-live-cap p { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--hp-ink-2); font-size: 15px; line-height: 1.3; text-align: left; }
.hp-live-cap .hp-chip { flex: none; }
.hp-live-step {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--hp-ink-2); border: 1px solid var(--hp-line-2); font: 500 22px/1 var(--hp-font);
}
.hp-live-step:hover { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }
@media (max-width: 420px) { .hp-live-cap p { flex-direction: column; gap: 6px; text-align: center; font-size: 14px; } }

/* ================= element 6: the module constellation ================= */
.hp-conn { position: relative; }
.hp-conn-stage {
  position: relative; display: none; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: var(--hp-r-xl); border: 1px solid var(--hp-line);
  background: radial-gradient(70% 70% at 50% 50%, color-mix(in oklab, var(--hp-jade-deep) 28%, var(--hp-bg)), var(--hp-bg) 80%);
  box-shadow: var(--hp-shadow);
}
.hp-conn.live .hp-conn-stage { display: block; }
.hp-conn-gl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.hp-conn-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; min-height: 64px; padding: 6px 4px;
  border: 0; border-radius: 14px; background: transparent; color: var(--hp-ink); cursor: pointer;
  font: 600 13px/1.1 var(--hp-font); white-space: nowrap; transition: opacity .25s; -webkit-tap-highlight-color: transparent;
}
/* the node IS a set-A jade plate icon; the tile only carries the lit/selected ring */
.hp-conn-tile {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px;
  border: 1px solid transparent;
  transition: transform .3s var(--hp-ease-back), box-shadow .3s, border-color .3s;
}
.hp-conn-tile .hp-ico { width: 56px; height: 56px; }
.hp-conn-lbl { padding: 3px 7px; border-radius: var(--hp-r-pill); background: color-mix(in oklab, var(--hp-bg) 70%, transparent); }
.hp-conn-node.lit .hp-conn-tile, .hp-conn-node.sel .hp-conn-tile { transform: scale(1.1); border-color: color-mix(in oklab, var(--hp-mint) 65%, transparent); box-shadow: 0 0 0 4px var(--hp-glow); }
.hp-conn-node.sel .hp-conn-lbl { background: color-mix(in oklab, var(--hp-mint) 22%, var(--hp-bg)); color: var(--hp-ink); }
.hp-conn-node.dim { opacity: .38; }
.hp-conn-node.dim .hp-conn-tile { transform: none; border-color: transparent; box-shadow: none; }
.hp-conn-node:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hp-conn-tile { transition: none; } }
@media (max-width: 640px) {
  .hp-conn-stage { aspect-ratio: 2 / 3; }
  .hp-conn-node { left: var(--mx); top: var(--my); font-size: 12px; min-width: 56px; }
  .hp-conn-tile { width: 46px; height: 46px; border-radius: 14px; }
  .hp-conn-tile .hp-ico { width: 46px; height: 46px; }
}

.hp-conn-cap { display: none; max-width: 760px; margin: 22px auto 0; min-height: 8.5em; padding: 18px 20px; border-radius: var(--hp-r-lg); border: 1px solid var(--hp-line); background: var(--hp-bg); }
.hp-conn.live .hp-conn-cap { display: block; }
.hp-conn-cap-h { font: 600 18px/1.2 var(--hp-display); color: var(--hp-mint); margin-bottom: 8px; }
.hp-conn-cap-t { color: var(--hp-ink-2); }
.hp-conn-cap-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--hp-ink-2); font-size: 15px; line-height: 1.4; }
.hp-conn-cap-l b { color: var(--hp-ink); font-weight: 600; margin-right: 4px; }

/* the accessible flow: a visible numbered list without WebGL2, screen-reader text with it */
.hp-conn-steps { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; counter-reset: hpstep; display: grid; gap: 10px; }
.hp-conn-steps li { counter-increment: hpstep; position: relative; padding: 14px 16px 14px 56px; border-radius: var(--hp-r-lg); background: var(--hp-bg); border: 1px solid var(--hp-line); color: var(--hp-ink-2); }
.hp-conn-steps li::before { content: counter(hpstep); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--hp-mono); color: var(--hp-bg); background: var(--hp-mint); }
.hp-conn-steps b { color: var(--hp-ink); }
.hp-conn.live .hp-conn-steps { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }


/* element 4 on phones and touch screens: the rail becomes a row of 44px buttons under the clip */
@media (max-width: 560px), (pointer: coarse) {
  .hp-live-frame .hp-frame-body { grid-template-columns: minmax(0, 1fr); }
  .hp-live-frame .hp-frame-rail.hp-live-rail {
    display: flex; flex-direction: row; grid-row: 2; contain: none; gap: 2px; padding: 4px 6px; justify-content: space-between;
    border-right: 0; border-top: 1px solid var(--hp-line); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .hp-live-frame .hp-live-rail::-webkit-scrollbar { display: none; }
  .hp-live-btn { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }
  .hp-live-frame .hp-frame-rail.hp-live-rail { gap: 0; padding: 4px; }
}

/* 15-mocks.css */
/* hp mocks — the interactive module mock-ups (js/15-mocks.js, Go mkPlayer in site/hp_el_b1.go).
   Real DOM text in the kit style, so it is crisp at any size. The stage is a size container: type scales with
   its width (cqi) inside a readable clamp, and narrow stages drop secondary columns instead of shrinking text.
   Server HTML = the END state. .mk-live (added by JS when a replay starts) hides [data-in] steps until .on.
   Colors only through --hp-*. */

/* ---- player + stage --------------------------------------------------------------------------------- */
.mk-player { position: relative; min-width: 0; container: mkp / inline-size; }
.mk-player .hp-frame-view { aspect-ratio: 16 / 10; background: var(--hp-bg); }
@container mkp (max-width: 600px) { .mk-player .hp-frame-view { aspect-ratio: auto; height: 400px; } }
@container mkp (max-width: 420px) { .mk-player .hp-frame-view { height: 430px; } }
.mk-stage { position: absolute; inset: 0; overflow: hidden; container: mks / inline-size; }
.mk-bare { position: absolute; inset: 0; }
.mk-bare > .mk-ctl { position: absolute; right: 10px; bottom: 10px; z-index: 3; margin: 0; }
.mk-bare .mk-chips { display: none; }

.mk {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: .7em; padding: .9em 1em;
  font: 400 clamp(13px, calc(8px + .8cqi), 16px)/1.35 var(--hp-font); color: var(--hp-ink);
  background: color-mix(in oklab, var(--hp-surface) 72%, var(--hp-bg)); text-align: left;
}
.mk p { margin: 0; }
.mk b { font-weight: 600; }
.mk-x { display: none !important; }
.mk-live [data-in] { opacity: 0; transform: translateY(.5em); transition: opacity .45s var(--hp-ease), transform .45s var(--hp-ease); }
.mk-live [data-in].on { opacity: 1; transform: none; }
.mk-live svg [data-in] { transform: none; }
.mk-seek, .mk-seek * { transition: none !important; animation: none !important; }
.mk-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: var(--hp-mint); animation: mk-blink 1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }

/* shared pieces */
.mk-top { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; min-height: 2em; }
.mk-h { font: 700 1.15em/1.1 var(--hp-display); letter-spacing: -.01em; margin-right: auto; }
.mk-pill { display: inline-block; padding: .2em .6em; border-radius: 2em; font: 600 .78em/1.3 var(--hp-font); color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 13%, transparent); white-space: nowrap; }
.mk-pill.dim { color: var(--hp-ink-3); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }
.mk-pill.note { color: var(--hp-amber); background: color-mix(in oklab, var(--hp-amber) 14%, transparent); }
.mk-sh { font: 600 .74em/1.2 var(--hp-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--hp-ink-3); margin-bottom: .2em !important; }
.mk-btn { display: inline-block; padding: .35em .85em; border-radius: 2em; font-weight: 600; font-size: .85em; color: #04140e; background: linear-gradient(180deg, var(--hp-jade-bright), var(--hp-jade)); white-space: nowrap; }
.mk-btn.ghost { color: var(--hp-ink-2); background: none; border: 1px solid var(--hp-line-2); }
.mk-stat { padding: .25em .7em; border-radius: 2em; font: 600 .78em/1.3 var(--hp-mono); color: var(--hp-amber); background: color-mix(in oklab, var(--hp-amber) 14%, transparent); }
.mk-stat.live { color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-field { padding: .35em .6em; border-radius: .45em; border: 1px solid var(--hp-line-2); background: var(--hp-bg); font-size: .9em; min-height: 2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-okline { color: var(--hp-mint); font-weight: 600; font-size: .88em; }
.mk-okline::before, .mk-ci.done i::before, .mk-step.done i::before { content: "✓"; }
.mk-okline::before { margin-right: .35em; }
.mk-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--hp-mint); box-shadow: 0 0 0 .25em var(--hp-glow); flex: none; }
.mk-crew { display: flex; align-items: center; gap: .2em; font-size: .78em; color: var(--hp-ink-2); }
.mk-crew b { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; font-size: .85em; color: #04140e; background: var(--hp-mint); }
.mk-crew b + b { background: var(--hp-amber); margin-left: -.5em; }
.mk-crew span { margin-left: .35em; }
.mk-lrow { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .4em .6em; border-radius: .5em; background: color-mix(in oklab, var(--hp-ink) 4%, transparent); font-size: .9em; }
.mk-lrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-lrow b { font-size: .88em; white-space: nowrap; color: var(--hp-ink-3); }
.mk-lrow b.ok { color: var(--hp-mint); }
.mk-lrow b.warn { color: var(--hp-amber); }
.mk-lrow b.bad { color: var(--hp-danger); }
.mk-toast {
  position: absolute; left: 1em; bottom: 1em; z-index: 1; display: grid; gap: .1em; max-width: min(80%, 22em); padding: .6em .9em;
  border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 94%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 45%, transparent);
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6); font-size: .9em;
}
.mk-toast span { color: var(--hp-ink-2); font-size: .9em; }
.mk-toast.warn { border-color: color-mix(in oklab, var(--hp-amber) 60%, transparent); }
.mk-toast.warn b { color: var(--hp-amber); }
.mk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.mk-kpis p { padding: .5em .7em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); min-width: 0; }
.mk-kpis b { display: block; font: 700 1.35em/1.05 var(--hp-display); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-kpis p > span { font-size: .76em; color: var(--hp-ink-3); }
.mk-b { max-width: 88%; padding: .5em .8em; border-radius: 1em; background: color-mix(in oklab, var(--hp-ink) 6%, var(--hp-surface)); }
.mk-b > b { display: block; font-size: .76em; color: var(--hp-ink-3); margin-bottom: .1em; word-spacing: .12em; }
.mk-b.me { align-self: flex-end; background: color-mix(in oklab, var(--hp-mint) 18%, var(--hp-surface)); }
.mk-b.note { align-self: center; max-width: 94%; background: color-mix(in oklab, var(--hp-amber) 11%, var(--hp-surface)); border: 1px dashed color-mix(in oklab, var(--hp-amber) 50%, transparent); }
.mk-b.note > span { display: block; margin-top: .2em; font-size: .74em; color: var(--hp-amber); font-weight: 600; }
.mk-b.mail { border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.mk-b.agent { max-width: 100%; background: color-mix(in oklab, var(--hp-mint) 9%, var(--hp-surface)); border: 1px solid color-mix(in oklab, var(--hp-mint) 32%, transparent); }
.mk-att { display: inline-block; margin-top: .3em; padding: .15em .5em; border-radius: .4em; font: 500 .78em/1.4 var(--hp-mono); color: var(--hp-ink-2); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }

/* callout + tap ring */
.mk-note {
  position: absolute; z-index: 4; max-width: min(19em, 80%); padding: .55em .8em; border-radius: var(--hp-r-md);
  font: 600 clamp(12px, calc(8px + .6cqi), 15px)/1.35 var(--hp-font); color: #04140e;
  background: var(--hp-mint); box-shadow: 0 12px 28px -10px rgb(0 0 0 / .65); pointer-events: none;
}
.mk-note::before { content: ""; position: absolute; left: var(--ax, 50%); width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); }
.mk-note[data-side="below"]::before { top: -5px; }
.mk-note[data-side="above"]::before { bottom: -5px; }
.mk-note p { margin: 0; position: relative; }
.mk-tap { position: absolute; z-index: 3; width: 2.6em; height: 2.6em; border-radius: 50%; border: 3px solid var(--hp-mint); pointer-events: none; transform: translate(-50%, -50%); }

/* controls under the frame: pause/play + chapter chips */
.mk-ctl { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.mk-ctl[hidden] { display: none; }
.mk-pp {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--hp-line-2); background: var(--hp-surface); color: var(--hp-ink); -webkit-tap-highlight-color: transparent;
}
.mk-pp:hover { border-color: var(--hp-mint); }
.mk-pp span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.mk-pp[data-state="paused"] span { width: 0; height: 0; border: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mk-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: var(--hp-r-pill); cursor: pointer;
  font: 600 14px/1.15 var(--hp-font); color: var(--hp-ink-2); background: transparent; border: 1px solid var(--hp-line-2); text-align: left;
  -webkit-tap-highlight-color: transparent; transition: background .18s, color .18s, border-color .18s;
}
.mk-chip:hover { color: var(--hp-ink); border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.mk-chip-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 600 12px/1 var(--hp-mono); background: color-mix(in oklab, var(--hp-ink) 7%, transparent); }
.mk-chip.done .mk-chip-n { background: color-mix(in oklab, var(--hp-mint) 30%, transparent); color: var(--hp-ink); }
.mk-chip[aria-current] { color: var(--hp-ink); border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-chip[aria-current] .mk-chip-n { background: var(--hp-mint); color: #04140e; }
@media (max-width: 420px) { .mk-chip { font-size: 13px; padding-right: 10px; } }

/* before hellojade (toolbox panels) */
.mk-before {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 1em; padding: 1.2em 1.4em;
  font: 400 clamp(13px, calc(8px + .8cqi), 17px)/1.4 var(--hp-font); color: var(--hp-ink);
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--hp-ink) 3%, var(--hp-surface)) 0 14px, var(--hp-surface) 14px 28px);
}
.mk-before[hidden] { display: none; }
.mk-before .mk-sh { color: var(--hp-amber); }
.mk-pile { display: flex; flex-wrap: wrap; gap: .5em; }
.mk-pile span {
  padding: .45em .8em; border-radius: .5em .5em 0 0; border: 1px solid var(--hp-line-2); border-bottom-width: 3px; background: var(--hp-bg);
  font-weight: 600; font-size: .9em; transform: rotate(calc((var(--i) - 1.5) * 1.6deg)); color: var(--hp-ink-2);
}
.mk-before ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45em; }
.mk-before li { display: flex; gap: .55em; align-items: baseline; }
.mk-before li::before { content: "✕"; color: var(--hp-danger); font-weight: 700; flex: none; }

/* ---- intake ---- */
.mk-tabs { display: flex; gap: .3em; }
.mk-tab { padding: .25em .7em; border-radius: 2em; font-size: .85em; color: var(--hp-ink-3); border: 1px solid var(--hp-line); }
.mk-tab.on { color: var(--hp-ink); border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.mk-tab i { font-style: normal; font-weight: 700; margin-left: .2em; font-variant-numeric: tabular-nums; }
.mk-livedot { font: 600 .74em/1 var(--hp-mono); color: var(--hp-mint); }
.mk-intake .mk-kpis p.w b { font-size: 1em; }
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; align-content: start; flex: 1; min-height: 0; }
.mk-card { display: grid; gap: .3em; align-content: start; padding: .65em .75em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); min-width: 0; }
.mk-card.hot { border-color: color-mix(in oklab, var(--hp-mint) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-card.dim { opacity: .62; }
.mk-card.spam { border-style: dashed; }
.mk-card.spam.flag { border-color: var(--hp-danger); }
.mk-flag { display: none; font: 600 .76em/1.2 var(--hp-mono); color: var(--hp-danger); }
.mk-card.spam.flag .mk-flag { display: block; }
.mk-ct { display: flex; justify-content: space-between; gap: .4em; align-items: baseline; }
.mk-ct b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ct span:not(.mk-pill) { font-size: .76em; color: var(--hp-ink-3); white-space: nowrap; }
.mk-cs { font-size: .84em; color: var(--hp-ink-2); }
.mk-cm { font-size: .84em; color: var(--hp-ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-cf { display: flex; align-items: center; gap: .35em; flex-wrap: wrap; margin-top: .2em !important; }
.mk-st { padding: .15em .55em; border-radius: 2em; font-size: .76em; font-weight: 600; color: var(--hp-amber); background: color-mix(in oklab, var(--hp-amber) 14%, transparent); }
.mk-st.ok { color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-who { display: inline-flex; align-items: center; gap: .3em; font-size: .78em; color: var(--hp-ink-2); }
.mk-who i { font-style: normal; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; font-size: .85em; font-weight: 700; color: #04140e; background: var(--hp-amber); }
.mk-call { margin-left: auto; padding: .2em .7em; border-radius: 2em; font-size: .8em; font-weight: 600; color: var(--hp-mint); border: 1px solid color-mix(in oklab, var(--hp-mint) 50%, transparent); }
.mk-bar { display: flex; align-items: center; gap: .6em; padding: .55em .8em; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-mint) 14%, var(--hp-surface)); border: 1px solid color-mix(in oklab, var(--hp-mint) 40%, transparent); }
.mk-bar span { color: var(--hp-ink-2); font-size: .86em; }
@container mks (max-width: 620px) {
  .mk-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-card.w { display: none; }
  .mk-intake .mk-kpis p.w { display: none; }
  .mk-intake .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container mks (max-width: 440px) {
  .mk-cards { grid-template-columns: minmax(0, 1fr); }
  .mk-card.dim { display: none; }
  .mk-livedot { display: none; }
}

/* ---- messages ---- */
.mk-messages { flex-direction: row; gap: 0; padding: 0; }
.mk-side { flex: 0 0 30%; display: flex; flex-direction: column; gap: .2em; padding: .9em .7em; border-right: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 50%, var(--hp-surface)); min-width: 0; }
.mk-side .mk-sh { margin-top: .5em !important; }
.mk-row { padding: .35em .5em; border-radius: .5em; font-size: .88em; color: var(--hp-ink-2); min-width: 0; }
.mk-row b { display: block; color: var(--hp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row span { display: block; font-size: .84em; color: var(--hp-ink-3); }
.mk-row.on { background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-thread { flex: 1; display: flex; flex-direction: column; gap: .5em; padding: .8em .9em; min-width: 0; }
.mk-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; min-height: 0; overflow: hidden; }
.mk-msgs .mk-b.cust, .mk-msgs .mk-b.mail { align-self: flex-start; }
.mk-typing { align-self: flex-start; display: flex; gap: .25em; padding: .6em .8em; border-radius: 1em; background: color-mix(in oklab, var(--hp-ink) 6%, var(--hp-surface)); }
.mk-typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--hp-ink-3); animation: mk-dots 1s infinite; }
.mk-typing i:nth-child(2) { animation-delay: .15s; } .mk-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mk-dots { 50% { opacity: .3; transform: translateY(-2px); } }
.mk-comp { display: flex; align-items: center; gap: .5em; padding: .35em .4em .35em .5em; border-radius: 1.4em; border: 1px solid var(--hp-line-2); background: var(--hp-bg); }
.mk-mode { font: 600 .74em/1 var(--hp-mono); padding: .35em .55em; border-radius: 1em; color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 13%, transparent); white-space: nowrap; }
.mk-input { flex: 1; min-width: 0; min-height: 1.3em; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-input:empty::before { content: "Write a message"; color: var(--hp-ink-3); }
.mk-send { padding: .3em .8em; border-radius: 1.2em; font-size: .82em; font-weight: 600; color: #04140e; background: var(--hp-mint); }
@container mks (max-width: 560px) { .mk-side { display: none; } }

/* ---- work ---- */
.mk-wbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 13em; gap: .8em; min-height: 0; }
.mk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; align-items: start; }
.mk-col { display: flex; flex-direction: column; gap: .45em; padding: .5em; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-ink) 4%, transparent); min-width: 0; min-height: 9em; }
.mk-colh { font-size: .8em; font-weight: 600; color: var(--hp-ink-2); }
.mk-slot { display: flex; flex-direction: column; min-height: 0; }
.mk-ghost { padding: .45em .55em; border-radius: .5em; font-size: .76em; color: var(--hp-ink-3); background: var(--hp-surface); border: 1px solid var(--hp-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-job { display: grid; gap: .3em; padding: .55em .6em; border-radius: .55em; background: var(--hp-surface); border: 1px solid color-mix(in oklab, var(--hp-mint) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hp-mint) 14%, transparent); min-width: 0; }
.mk-job.done { border-color: color-mix(in oklab, var(--hp-mint) 35%, transparent); }
.mk-jt { font-weight: 600; font-size: .86em; }
.mk-js { font-size: .76em; color: var(--hp-ink-2); }
.mk-prog { display: flex; align-items: center; gap: .4em; font-size: .74em; color: var(--hp-ink-2); }
.mk-prog i { flex: 1; height: .45em; border-radius: 1em; background: linear-gradient(90deg, var(--hp-mint) calc(var(--w, 0) * 100%), var(--hp-line-2) 0); transition: background .4s; }
.mk-checklist { display: flex; flex-direction: column; gap: .35em; padding: .6em .7em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); align-self: start; }
.mk-ci { display: flex; align-items: center; gap: .5em; font-size: .86em; color: var(--hp-ink-2); }
.mk-ci i { width: 1.15em; height: 1.15em; flex: none; display: grid; place-items: center; border-radius: .3em; border: 1.5px solid var(--hp-line-2); font-style: normal; font-size: .8em; color: #04140e; }
.mk-ci.done { color: var(--hp-ink); }
.mk-ci.done i { background: var(--hp-mint); border-color: var(--hp-mint); }
.mk-ci:not(.done) i::before { content: ""; }
.mk-rep { margin-top: .3em !important; font: 500 .74em/1.3 var(--hp-mono); color: var(--hp-mint); }
@container mks (max-width: 680px) {
  .mk-wbody { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .mk-checklist { flex-direction: row; flex-wrap: wrap; gap: .35em 1em; align-items: center; align-self: stretch; }
  .mk-checklist .mk-sh { flex-basis: 100%; }
}
@container mks (max-width: 470px) {
  .mk-board { grid-template-columns: minmax(0, 1fr); gap: .35em; }
  .mk-col { flex-direction: row; align-items: center; min-height: 3.6em; }
  .mk-colh { flex: 0 0 5.6em; }
  .mk-slot { flex: 1; }
  .mk-ghost { display: none; }
  .mk-work .mk-toast { left: auto; right: .8em; }
  .mk-checklist { display: none; }
}

/* ---- team ---- */
.mk-list { display: grid; gap: .4em; }
.mk-person { display: flex; align-items: center; gap: .6em; padding: .45em .6em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); }
.mk-person > i { width: 2.1em; height: 2.1em; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 700; font-size: .8em; color: #04140e; background: var(--hp-mint); }
.mk-person > i.b { background: var(--hp-amber); } .mk-person > i.c { background: var(--hp-jade-bright); } .mk-person > i.d { background: color-mix(in oklab, var(--hp-mint) 50%, var(--hp-amber)); }
.mk-person > b { flex: 1; min-width: 0; font-size: .92em; }
.mk-person > b span { display: block; font-weight: 400; font-size: .84em; color: var(--hp-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-person em { font-style: normal; font-size: .8em; color: var(--hp-ink-2); white-space: nowrap; }
.mk-person em.ok { color: var(--hp-mint); font-weight: 600; }
.mk-person.new { border-color: color-mix(in oklab, var(--hp-mint) 50%, transparent); }
.mk-dlg {
  position: absolute; z-index: 2; right: 1em; top: 3.2em; width: min(20em, calc(100% - 2em)); display: grid; gap: .5em; padding: .9em;
  border-radius: var(--hp-r-lg); background: var(--hp-surface); border: 1px solid var(--hp-line-2); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .7);
}
.mk-roles { display: flex; gap: .35em; }
.mk-roles span { flex: 1; text-align: center; padding: .3em; border-radius: .5em; font-size: .84em; border: 1px solid var(--hp-line-2); color: var(--hp-ink-2); }
.mk-roles span.sel { color: var(--hp-ink); border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-office { font-size: .84em; color: var(--hp-ink-2); }
.mk-dlg .mk-btn { justify-self: end; }

/* ---- offices ---- */
.mk-offs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; align-items: start; }
.mk-off { display: grid; gap: .45em; padding: .8em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); min-width: 0; }
.mk-off.new { border-color: color-mix(in oklab, var(--hp-mint) 50%, transparent); }
.mk-hours { font-size: .84em; color: var(--hp-ink-2); }
.mk-g { font-size: .82em; font-weight: 600; color: var(--hp-ink-3); }
.mk-g.ok { color: var(--hp-mint); }
.mk-g.ok::before { content: "● "; }
@container mks (max-width: 520px) { .mk-offs { grid-template-columns: minmax(0, 1fr); } .mk-off:not(.new) .mk-hours, .mk-off:not(.new) .mk-cs { display: none; } }

/* ---- org chart ---- */
.mk-tree { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; position: relative; }
.mk-tier { display: flex; gap: .8em; justify-content: center; flex-wrap: wrap; position: relative; }
.mk-tier::before { content: ""; position: absolute; left: 16%; right: 16%; top: -.6em; height: 1px; background: var(--hp-line-2); }
.mk-tier.sub::before { left: 50%; right: auto; width: 1px; height: .6em; }
.mk-node { display: grid; gap: .1em; padding: .55em .8em; min-width: 8em; border-radius: var(--hp-r-md); text-align: center; background: var(--hp-surface); border: 1px solid var(--hp-line-2); }
.mk-node span { font-size: .78em; color: var(--hp-ink-3); }
.mk-node.top { border-color: color-mix(in oklab, var(--hp-mint) 55%, transparent); }
.mk-node.open { border-style: dashed; border-color: var(--hp-amber); }
.mk-node.open span { color: var(--hp-amber); }
.mk-node.sel { box-shadow: 0 0 0 3px var(--hp-glow); border-color: var(--hp-mint); }
.mk-access { display: flex; align-items: center; flex-wrap: wrap; gap: .4em; padding: .45em .7em; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-mint) 10%, var(--hp-surface)); font-size: .86em; }
.mk-access span { padding: .1em .55em; border-radius: 2em; background: var(--hp-bg); border: 1px solid var(--hp-line-2); font-size: .9em; }
@container mks (max-width: 460px) { .mk-node { min-width: 0; padding: .45em .55em; } .mk-tier { gap: .45em; } }

/* ---- website ---- */
.mk-website { padding: 0; }
.mk-wsplit { flex: 1; display: grid; grid-template-columns: 34% minmax(0, 1fr); min-height: 0; }
.mk-chat { display: flex; flex-direction: column; gap: .5em; padding: .9em; border-right: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 50%, var(--hp-surface)); min-width: 0; }
.mk-chat .mk-b { max-width: 100%; }
.mk-step { display: flex; align-items: center; gap: .5em; font-size: .86em; color: var(--hp-ink-2); }
.mk-step i { width: 1.2em; height: 1.2em; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: .75em; color: #04140e; background: var(--hp-mint); }
.mk-prev { display: flex; flex-direction: column; gap: .5em; padding: .8em .9em; min-width: 0; }
.mk-pbar { display: flex; align-items: center; gap: .35em; flex-wrap: wrap; }
.mk-wchip { padding: .2em .6em; border-radius: 2em; font-size: .78em; border: 1px solid var(--hp-line-2); color: var(--hp-ink-3); }
.mk-wchip.sel { color: var(--hp-ink); border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-url { margin-left: auto; font: 500 .74em/1 var(--hp-mono); color: var(--hp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk-pwrap { flex: 1; display: flex; justify-content: center; min-height: 0; padding: .4em; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-ink) 4%, transparent); }
.mk-page { width: 100%; display: flex; flex-direction: column; gap: .45em; padding: .7em; border-radius: .5em; background: var(--hp-bg); border: 1px solid var(--hp-line-2); overflow: hidden; transition: width .6s var(--hp-ease); }
.mk-page.pw-p { width: 36%; } .mk-page.pw-t { width: 64%; } .mk-page.pw-d { width: 100%; }
.mk-pnav { display: flex; align-items: center; gap: .4em; font-size: .8em; }
.mk-pnav b { margin-right: auto; font-family: var(--hp-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pnav i { width: 2em; height: .4em; border-radius: 1em; background: var(--hp-line-2); }
.mk-ph { font: 700 1.2em/1.12 var(--hp-display); letter-spacing: -.01em; }
.mk-page.fresh .mk-ph { color: var(--hp-mint); }
.mk-pcta { align-self: flex-start; padding: .3em .7em; border-radius: 2em; font-size: .78em; font-weight: 600; color: #04140e; background: var(--hp-mint); }
.mk-ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3em; }
.mk-ptiles i { height: 2.2em; border-radius: .3em; background: linear-gradient(135deg, var(--hp-jade-deep), var(--hp-jade)); opacity: .7; }
.mk-page.pw-p .mk-ptiles { grid-template-columns: minmax(0, 1fr); }
.mk-page.pw-p .mk-ptiles i + i { display: none; }
.mk-page.pw-p .mk-pnav i { display: none; }
.mk-page.pw-p .mk-ph { font-size: .95em; }
.mk-approve { display: flex; align-items: center; justify-content: space-between; gap: .5em; flex-wrap: wrap; }
@container mks (max-width: 560px) {
  .mk-wsplit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mk-chat { border-right: 0; border-bottom: 1px solid var(--hp-line); padding: .7em .8em; }
  .mk-chat .mk-sh, .mk-step:not(.on):not(:last-child) { display: none; }
  .mk-url { display: none; }
}

/* ---- online presence ---- */
.mk-idbody { flex: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1em; align-items: center; min-height: 0; }
.mk-grade { position: relative; display: grid; place-items: center; }
.mk-grade svg { width: min(100%, 11em); height: auto; transform: rotate(-90deg); }
.mk-grade circle { fill: none; stroke-width: 10; }
.mk-grade .bg { stroke: var(--hp-line-2); }
.mk-grade .fg { stroke: var(--hp-mint); stroke-linecap: round; stroke-dasharray: calc(var(--w, 0) * 314.16) 314.16; transition: stroke-dasharray 1.4s var(--hp-ease); }
.mk-grade p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mk-grade b { font: 700 2.4em/1 var(--hp-display); font-variant-numeric: tabular-nums; }
.mk-grade span { font-size: .76em; color: var(--hp-ink-3); }
.mk-facts { display: grid; gap: .35em; min-width: 0; }
.mk-factline { margin-top: .3em !important; font-size: .78em; color: var(--hp-ink-3); }
@container mks (max-width: 520px) {
  .mk-idbody { grid-template-columns: minmax(0, 1fr); align-items: start; gap: .6em; }
  .mk-grade { display: flex; align-items: center; justify-content: flex-start; gap: .9em; }
  .mk-grade svg { width: 4.6em; flex: none; }
  .mk-grade p { position: static; text-align: left; place-content: start; }
  .mk-grade b { font-size: 2em; }
  .mk-factline { display: none; }
}

/* ---- reviews ---- */
.mk-rate { font-size: .86em; color: var(--hp-ink-2); }
.mk-rate b { color: var(--hp-amber); font-family: var(--hp-display); font-size: 1.15em; }
.mk-rbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8em; min-height: 0; }
.mk-rlist { display: flex; flex-direction: column; gap: .45em; min-width: 0; }
.mk-rv { display: grid; gap: .2em; padding: .55em .7em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); }
.mk-rv.sel { border-color: var(--hp-mint); }
.mk-stars { color: var(--hp-amber); letter-spacing: .08em; font-size: .86em; }
.mk-reply { display: flex; flex-direction: column; gap: .5em; padding: .7em .8em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line-2); min-width: 0; align-self: start; }
.mk-draft { min-height: 4.2em; padding: .5em .6em; border-radius: .5em; background: color-mix(in oklab, var(--hp-mint) 8%, var(--hp-bg)); border: 1px solid color-mix(in oklab, var(--hp-mint) 28%, transparent); font-size: .9em; }
.mk-acts { display: flex; gap: .4em; flex-wrap: wrap; align-items: center; }
@container mks (max-width: 560px) {
  .mk-rbody { grid-template-columns: minmax(0, 1fr); }
  .mk-rv:not(.sel) .mk-cm { display: none; }
  .mk-rv { padding: .4em .6em; }
}

/* ---- map ---- */
.mk-map { padding: 0; background: var(--hp-bg); }
.mk-mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-mapsvg .land { fill: color-mix(in oklab, var(--hp-surface) 75%, var(--hp-bg)); }
.mk-mapsvg .st { stroke: var(--hp-line); stroke-width: 1; }
.mk-mapsvg .river { fill: none; stroke: color-mix(in oklab, var(--hp-jade-deep) 70%, var(--hp-bg)); stroke-width: 7; stroke-linecap: round; }
.mk-mapsvg .tr { stroke-width: 1.4; stroke-linejoin: round; }
.mk-mapsvg .t1 { fill: color-mix(in oklab, var(--hp-mint) 16%, transparent); stroke: color-mix(in oklab, var(--hp-mint) 70%, transparent); }
.mk-mapsvg .t2 { fill: color-mix(in oklab, var(--hp-jade) 22%, transparent); stroke: color-mix(in oklab, var(--hp-jade-bright) 70%, transparent); }
.mk-mapsvg .t3 { fill: color-mix(in oklab, var(--hp-jade-deep) 35%, transparent); stroke: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.mk-mapsvg .area { fill: none; stroke: var(--hp-ink-2); stroke-width: 1.4; stroke-dasharray: 6 5; }
.mk-mapsvg .sw0 { stop-color: var(--hp-amber); stop-opacity: .12; }
.mk-mapsvg .sw1 { stop-color: var(--hp-amber); stop-opacity: .62; }
.mk-mapsvg .core { fill: none; stroke: var(--hp-danger); stroke-width: 2; stroke-dasharray: 4 5; opacity: .85; }
.mk-mapsvg .hq { fill: var(--hp-mint); stroke: var(--hp-bg); stroke-width: 2; }
.mk-live .mk-mapsvg .swath { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--hp-ease); }
.mk-live .mk-mapsvg .swath.on { clip-path: inset(0 0 0 0); }
.mk-mlab { position: absolute; z-index: 1; padding: .25em .6em; border-radius: 2em; font-size: .8em; white-space: nowrap; color: var(--hp-ink-2); background: color-mix(in oklab, var(--hp-surface) 90%, transparent); border: 1px solid var(--hp-line-2); }
.mk-mlab b { color: var(--hp-ink); font-family: var(--hp-display); }
.mk-mlab.l1 { left: 18%; top: 20%; } .mk-mlab.l2 { right: 6%; top: 18%; } .mk-mlab.l3 { left: 20%; top: 62%; }
.mk-map .mk-toast { left: auto; right: 1em; top: 1em; bottom: auto; }
.mk-chipc { position: absolute; z-index: 1; right: 1em; bottom: 1em; padding: .4em .8em; border-radius: 2em; font-size: .95em; color: var(--hp-ink); background: color-mix(in oklab, var(--hp-surface) 94%, transparent); border: 1px solid color-mix(in oklab, var(--hp-amber) 55%, transparent); }
.mk-chipc b { color: var(--hp-amber); font-family: var(--hp-display); font-variant-numeric: tabular-nums; }
@container mks (max-width: 520px) { .mk-mlab.l2 { display: none; } .mk-map .mk-toast { left: 1em; right: 1em; max-width: none; } .mk-mlab.l1 { top: 34%; } .mk-mlab.l3 { top: 70%; } }

/* ---- roof ---- */
.mk-roof .mk-top .mk-field { flex: 1 1 14em; max-width: 22em; }
.mk-roofbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; align-items: center; min-height: 0; }
.mk-roofbody svg { width: 100%; max-height: 100%; height: auto; }
.mk-roofbody polygon { stroke: var(--hp-mint); stroke-width: 1.2; stroke-linejoin: round; }
.mk-roofbody .f1 { fill: color-mix(in oklab, var(--hp-jade) 55%, transparent); }
.mk-roofbody .f2 { fill: color-mix(in oklab, var(--hp-jade) 35%, transparent); }
.mk-roofbody .f3, .mk-roofbody .f4 { fill: color-mix(in oklab, var(--hp-jade-deep) 60%, transparent); }
.mk-roofbody .rg { stroke: var(--hp-amber); stroke-width: 2.6; stroke-linecap: round; }
.mk-roofbody .ev { fill: none; stroke: var(--hp-ink); stroke-width: 1.6; stroke-dasharray: 3 3; }
.mk-read { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.mk-read li { display: flex; align-items: baseline; gap: .45em; color: var(--hp-ink-2); font-size: .92em; }
.mk-read li b { font: 700 1.35em/1 var(--hp-display); color: var(--hp-ink); font-variant-numeric: tabular-nums; }
.mk-read li.ok { color: var(--hp-mint); font-weight: 600; }
.mk-read li.ok::before { content: "✓"; }
@container mks (max-width: 480px) { .mk-roofbody { grid-template-columns: minmax(0, 1fr); align-content: start; } .mk-roofbody svg { max-width: 15em; justify-self: center; } .mk-read { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- reports ---- */
.mk-funnel { display: grid; gap: .45em; align-content: center; flex: 1; min-height: 0; }
.mk-funnel p { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 2em; gap: .6em; align-items: center; font-size: .86em; }
.mk-funnel span { color: var(--hp-ink-2); white-space: nowrap; }
.mk-funnel i { display: block; height: .95em; border-radius: .3em; width: calc(var(--w, 0) * 100%); background: linear-gradient(90deg, var(--hp-jade), var(--hp-mint)); transition: width .9s var(--hp-ease); }
.mk-funnel b { text-align: right; font-variant-numeric: tabular-nums; }
.mk-trace { font-size: .84em; color: var(--hp-ink-2); padding: .45em .7em; border-radius: var(--hp-r-md); border: 1px dashed color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.mk-trace span { font-weight: 600; color: var(--hp-ink); margin-right: .3em; }
.mk-trace em { font-style: normal; font-weight: 600; color: var(--hp-mint); }
.mk-reports .mk-toast { left: auto; right: 1em; top: 3.4em; bottom: auto; }
@container mks (max-width: 440px) { .mk-funnel p { grid-template-columns: 6em minmax(0, 1fr) 1.8em; } }

/* ---- agents ---- */
.mk-agents .mk-top .mk-stat { color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.mk-abody { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .9em; align-items: start; min-height: 0; }
.mk-afeed { display: flex; flex-direction: column; gap: .55em; min-width: 0; }
.mk-evt { display: flex; align-items: center; gap: .55em; font-size: .88em; color: var(--hp-ink-2); }
.mk-wait { font: 600 .8em/1.2 var(--hp-mono); color: var(--hp-amber); }
.mk-wait.ok { color: var(--hp-mint); }
.mk-rules { display: grid; gap: .35em; padding: .7em .8em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); }
.mk-rule { display: flex; gap: .5em; font-size: .86em; }
.mk-rule.ok::before { content: "✓"; color: var(--hp-mint); font-weight: 700; }
.mk-rule.no::before { content: "✕"; color: var(--hp-danger); font-weight: 700; }
@container mks (max-width: 560px) { .mk-abody { grid-template-columns: minmax(0, 1fr); } }

/* ---- email ---- */
.mk-ebody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9em; align-items: start; min-height: 0; }
.mk-recs, .mk-boxes { display: grid; gap: .35em; min-width: 0; }
.mk-lrow.new { border: 1px solid color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.mk-mail { display: grid; gap: .1em; margin-top: .3em; padding: .55em .7em; border-radius: var(--hp-r-md); background: var(--hp-surface); border-left: 3px solid var(--hp-mint); }
.mk-mail span { font-size: .84em; color: var(--hp-ink-2); }
@container mks (max-width: 520px) { .mk-ebody { grid-template-columns: minmax(0, 1fr); gap: .6em; } }

/* ---- files ---- */
.mk-crumb { font-size: .82em; color: var(--hp-ink-3); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.mk-file { position: relative; display: grid; gap: .3em; padding: .45em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); min-width: 0; font-size: .8em; margin: 0; }
.mk-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hp-ink-2); }
.mk-thumb { display: block; aspect-ratio: 4 / 3; border-radius: .35em; background: linear-gradient(160deg, color-mix(in oklab, var(--hp-amber) 45%, var(--hp-bg)), var(--hp-jade-deep)); }
.mk-file.p2 .mk-thumb { background: linear-gradient(200deg, color-mix(in oklab, var(--hp-ink) 30%, var(--hp-bg)), var(--hp-jade)); }
.mk-file.p3 .mk-thumb { background: linear-gradient(120deg, var(--hp-jade-bright), var(--hp-jade-deep)); }
.mk-file.doc .mk-thumb { background: repeating-linear-gradient(180deg, var(--hp-line-2) 0 2px, transparent 2px 8px), var(--hp-bg); }
.mk-up { display: block; height: .35em; border-radius: 1em; background: linear-gradient(90deg, var(--hp-mint) calc(var(--w, 0) * 100%), var(--hp-line-2) 0); }
.mk-share { display: grid; gap: .35em; }
.mk-tog { display: inline-flex; align-items: center; gap: .4em; color: var(--hp-ink-3) !important; }
.mk-tog::before { content: ""; width: 1.9em; height: 1.05em; border-radius: 1em; background: var(--hp-line-2); box-shadow: inset 0 0 0 .15em var(--hp-surface); transition: background .3s; }
.mk-tog.on { color: var(--hp-mint) !important; }
.mk-tog.on::before { background: var(--hp-mint); }
@container mks (max-width: 520px) { .mk-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-file.doc { display: none; } .mk-file.p3 { display: none; } .mk-crumb { display: none; } .mk-fgrid .mk-thumb { aspect-ratio: 16 / 9; } }

/* ---- #hp-found tabset ---- */
.mk-tablist { display: none; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.hp-js .mk-tablist { display: flex; }
.mk-tablist button {
  min-height: 44px; padding: 10px 18px; border-radius: var(--hp-r-pill); cursor: pointer; font: 600 15px/1 var(--hp-font);
  color: var(--hp-ink-2); background: transparent; border: 1px solid var(--hp-line-2); -webkit-tap-highlight-color: transparent;
}
.mk-tablist button[aria-selected="true"] { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-mint) 16%, transparent); border-color: color-mix(in oklab, var(--hp-mint) 55%, transparent); }
.mk-tabpanel + .mk-tabpanel { margin-top: 24px; }
.hp-js .mk-tabpanel + .mk-tabpanel { margin-top: 0; }
.mk-tabpanel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-live [data-in], .mk-page, .mk-funnel i, .mk-grade .fg, .mk-prog i, .mk-live .mk-mapsvg .swath { transition: none !important; }
  .mk-typing i, .mk-caret::after { animation: none !important; }
}

/* lists that grow as the timeline adds items: hidden steps take no room, new ones pop in */
.mk-live .mk-msgs > [data-in]:not(.on), .mk-live .mk-rlist > [data-in]:not(.on) { display: none; }
.mk-live .mk-msgs > [data-in].on, .mk-live .mk-rlist > [data-in].on { animation: mk-pop .4s var(--hp-ease) both; }
@keyframes mk-pop { from { opacity: 0; transform: translateY(.6em) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .mk-live .mk-msgs > [data-in].on, .mk-live .mk-rlist > [data-in].on { animation: none; } }
.mk-plines { display: grid; gap: .35em; margin-top: .2em !important; }
.mk-plines i { display: block; height: .45em; border-radius: 1em; background: var(--hp-line-2); }
.mk-plines i.s { width: 60%; }
.mk-ptrust { font-size: .74em; color: var(--hp-ink-2); }
.mk-ptrust b { color: var(--hp-amber); letter-spacing: .05em; }
.mk-page.pw-p .mk-ptrust { display: none; }

/* 20-b1.css */
/* lane B1 — elements 7–12: one-lead journey, toolbox grid, the four panels, and the HTML/CSS app mocks.
   Colors only through --hp-* (kit aliases in 00-base.css). Class prefixes: hp-j (journey), hp-tb (toolbox),
   hp-pn (panels), hp-b1m (mocks), hp-find (map figure). */

/* ================= mocks (shared) ================= */
.hp-b1m { position: relative; font: 400 14px/1.35 var(--hp-font); color: var(--hp-ink); background: var(--hp-surface); overflow: hidden; }
.hp-b1m p { margin: 0; }
.hp-b1m b { font-weight: 600; }
/* mocks that fill an app frame or a toolbox media box scale with that box */
.hp-j .hp-frame-view, .hp-tb .hp-frame-view, .hp-tb-mock { container-type: inline-size; }
.hp-frame-view > .hp-b1m, .hp-j-layer > .hp-b1m, .hp-tb-mock > .hp-b1m { position: absolute; inset: 0; font-size: clamp(8.5px, 2.15cqi, 14px); }
.hp-j-layer { position: absolute; inset: 0; }
.hp-j-layer > video { width: 100%; height: 100%; object-fit: contain; }

/* toast over a deck clip */
.hp-b1m-toast {
  position: absolute; left: 4%; bottom: 7%; z-index: 1; display: flex; align-items: center; gap: .7em; max-width: min(78%, 34em);
  padding: .65em .9em .65em .65em; border-radius: var(--hp-r-lg); font: 400 clamp(9px, 2.1cqi, 14px)/1.3 var(--hp-font); color: var(--hp-ink);
  background: color-mix(in oklab, var(--hp-surface) 92%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 40%, transparent);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / .6); backdrop-filter: blur(8px);
}
.hp-b1m-toast .hp-ico { width: 2.2em !important; height: 2.2em !important; }
.hp-b1m-toast p { margin: 0; min-width: 0; }
.hp-b1m-toast b { display: block; font-weight: 600; }
.hp-b1m-toast span { display: block; color: var(--hp-ink-2); font-size: .88em; }
.hp-b1m-toast em { font-style: normal; color: var(--hp-mint); font-weight: 600; }

/* website contact form */
.hp-b1m-site { display: flex; flex-direction: column; background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); }
.hp-b1m-sitebar { display: flex; align-items: center; gap: .8em; padding: .7em 1.2em; border-bottom: 1px solid var(--hp-line); }
.hp-b1m-sitebar b { font: 700 1.05em/1 var(--hp-display); margin-right: auto; }
.hp-b1m-sitebar span { width: 3.2em; height: .5em; border-radius: 1em; background: var(--hp-line-2); }
.hp-b1m-sitebody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4em; padding: 1.2em; align-items: center; }
.hp-b1m-sitehero { display: grid; gap: .6em; }
.hp-b1m-h { font: 700 1.55em/1.1 var(--hp-display); letter-spacing: -.02em; margin-bottom: .3em !important; }
.hp-b1m-sitehero i, .hp-b1m-ghost i, .hp-b1m-pg i { display: block; height: .55em; border-radius: 1em; background: var(--hp-line-2); }
.hp-b1m-sitehero i.s, .hp-b1m-ghost i.s, .hp-b1m-pg i.s { width: 60%; }
.hp-b1m-form { padding: 1em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow); }
.hp-b1m-k { font-size: .76em; color: var(--hp-ink-3); margin-top: .5em !important; }
.hp-b1m-k:first-child { margin-top: 0 !important; }
.hp-b1m-v { padding: .35em .6em; border-radius: .4em; border: 1px solid var(--hp-line-2); background: var(--hp-bg); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-b1m-msgv { white-space: normal; }
.hp-b1m-btn { margin-top: .8em !important; padding: .5em; text-align: center; border-radius: 2em; font-weight: 600; color: #04140e; background: linear-gradient(180deg, var(--hp-jade-bright), var(--hp-jade)); }
.hp-j-layer.on .hp-b1m-btn { animation: hp-b1-press 2.4s var(--hp-ease) infinite; }
@keyframes hp-b1-press { 0%, 60%, 100% { transform: none; box-shadow: none; } 70% { transform: scale(.95); box-shadow: 0 0 0 .4em var(--hp-glow); } }

/* work board */
.hp-b1m-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; padding: 1em; align-items: start; background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); }
.hp-b1m-col { display: grid; gap: .55em; padding: .6em; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-ink) 4%, transparent); min-width: 0; }
.hp-b1m-colh { font-size: .82em; font-weight: 600; color: var(--hp-ink-2); }
.hp-b1m-colh span { color: var(--hp-ink-3); font-weight: 500; }
.hp-b1m-ghost { display: grid; gap: .45em; padding: .6em; border-radius: .5em; background: var(--hp-surface); border: 1px solid var(--hp-line); }
.hp-b1m-job { display: grid; gap: .35em; padding: .6em; border-radius: .5em; background: var(--hp-surface); border: 1px solid color-mix(in oklab, var(--hp-mint) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hp-mint) 14%, transparent); min-width: 0; }
.hp-b1m-jobt { font-weight: 600; font-size: .92em; }
.hp-b1m-jobs { font-size: .78em; color: var(--hp-ink-2); }
.hp-b1m-check { display: grid; gap: .25em; font-size: .74em; color: var(--hp-ink-2); }
.hp-b1m-check i { display: block; height: .45em; border-radius: 1em; background: linear-gradient(90deg, var(--hp-mint) calc(var(--p) * 100%), var(--hp-line-2) 0); }
.hp-b1m-crew { display: flex; align-items: center; gap: .25em; font-size: .74em; color: var(--hp-ink-2); flex-wrap: wrap; }
.hp-b1m-crew b { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; font-size: .85em; color: #04140e; background: var(--hp-mint); }
.hp-b1m-crew b + b { background: var(--hp-amber); margin-left: -.5em; }
.hp-b1m-crew span { margin-left: .3em; }

/* reports */
.hp-b1m-rep { display: grid; grid-template-rows: auto 1fr auto; gap: .8em; padding: 1.1em 1.3em; background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); }
.hp-b1m-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.hp-b1m-kpis p { padding: .55em .7em; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); }
.hp-b1m-kpis b { display: block; font: 700 1.5em/1.05 var(--hp-display); letter-spacing: -.02em; }
.hp-b1m-kpis span { font-size: .76em; color: var(--hp-ink-3); }
.hp-b1m-funnel { display: grid; gap: .45em; align-content: center; }
.hp-b1m-funnel p { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 2em; gap: .6em; align-items: center; font-size: .85em; }
.hp-b1m-funnel span { color: var(--hp-ink-2); white-space: nowrap; }
.hp-b1m-funnel i { display: block; height: .95em; border-radius: .3em; width: calc(var(--w) * 100%); background: linear-gradient(90deg, var(--hp-jade), var(--hp-mint)); transform-origin: left; }
.hp-j-layer.on .hp-b1m-funnel i, .hp-tb-mock .hp-b1m-funnel i { animation: hp-b1-grow 1s var(--hp-ease) both; }
.hp-b1m-funnel p:nth-child(2) i { animation-delay: .08s; } .hp-b1m-funnel p:nth-child(3) i { animation-delay: .16s; }
.hp-b1m-funnel p:nth-child(4) i { animation-delay: .24s; } .hp-b1m-funnel p:nth-child(5) i { animation-delay: .32s; }
@keyframes hp-b1-grow { from { transform: scaleX(0); } }
.hp-b1m-funnel b { text-align: right; }
.hp-b1m-trace { font-size: .82em; color: var(--hp-ink-2); padding: .5em .7em; border-radius: var(--hp-r-md); border: 1px dashed color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-b1m-trace span { font-weight: 600; color: var(--hp-ink); margin-right: .3em; }
.hp-b1m-trace em { font-style: normal; font-weight: 600; color: var(--hp-mint); }
.hp-b1m-rep.mini { grid-template-rows: auto 1fr; }

/* website: today → new draft */
.hp-b1m-web { display: grid; gap: .8em; padding: 1.1em; align-content: center; background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); }
.hp-b1m-pgs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8em; align-items: center; }
.hp-b1m-pg { display: grid; gap: .5em; align-content: start; padding: .8em; min-height: 9em; border-radius: var(--hp-r-md); border: 1px solid var(--hp-line); background: var(--hp-surface); }
.hp-b1m-pgh { font-size: .78em; font-weight: 600; color: var(--hp-ink-3); text-transform: uppercase; letter-spacing: .08em; }
.hp-b1m-pg.old { filter: saturate(.2); opacity: .75; }
.hp-b1m-pg.old i.blk { height: 2.4em; border-radius: .3em; background: repeating-linear-gradient(45deg, var(--hp-line), var(--hp-line) 4px, transparent 4px, transparent 8px); }
.hp-b1m-pg.new { border-color: color-mix(in oklab, var(--hp-mint) 50%, transparent); }
.hp-b1m-pg.new i.hero { height: 2.6em; border-radius: .35em; background: linear-gradient(135deg, var(--hp-jade-deep), var(--hp-jade)); }
.hp-b1m-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35em; }
.hp-b1m-row i { height: 1.6em !important; border-radius: .3em !important; }
.hp-b1m-cta { justify-self: start; padding: .3em .7em; border-radius: 2em; font-size: .78em; font-weight: 600; color: #04140e; background: var(--hp-mint); }
.hp-b1m-arrow { color: var(--hp-mint); font-weight: 700; font-size: 1.3em; }
.hp-b1m-badge { justify-self: center; padding: .35em .8em; border-radius: 2em; font: 600 .8em/1.2 var(--hp-mono); color: var(--hp-amber); background: color-mix(in oklab, var(--hp-amber) 14%, transparent); border: 1px solid color-mix(in oklab, var(--hp-amber) 40%, transparent); }

/* roof readout */
.hp-b1m-roof { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1em; padding: 1.2em; align-items: center; background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); }
.hp-b1m-roof svg { width: 100%; height: auto; }
.hp-b1m-roof polygon { stroke: var(--hp-mint); stroke-width: 1.2; stroke-linejoin: round; }
.hp-b1m-roof .f1 { fill: color-mix(in oklab, var(--hp-jade) 55%, transparent); }
.hp-b1m-roof .f2 { fill: color-mix(in oklab, var(--hp-jade) 35%, transparent); }
.hp-b1m-roof .f3, .hp-b1m-roof .f4 { fill: color-mix(in oklab, var(--hp-jade-deep) 60%, transparent); }
.hp-b1m-roof .rg { stroke: var(--hp-amber); stroke-width: 2.4; stroke-linecap: round; }
.hp-b1m-roof ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.hp-b1m-roof li { display: flex; align-items: baseline; gap: .4em; color: var(--hp-ink-2); font-size: .9em; }
.hp-b1m-roof li b { font: 700 1.3em/1 var(--hp-display); color: var(--hp-ink); }
.hp-b1m-roof li.ok { color: var(--hp-mint); font-weight: 600; }

/* map (svg used by the toolbox tile and element 12) */
.hp-b1map { display: block; width: 100%; height: 100%; }
.hp-b1map .land { fill: color-mix(in oklab, var(--hp-surface) 75%, var(--hp-bg)); }
.hp-b1map .st { stroke: var(--hp-line); stroke-width: 1; }
.hp-b1map .river { fill: none; stroke: color-mix(in oklab, var(--hp-jade-deep) 70%, var(--hp-bg)); stroke-width: 7; stroke-linecap: round; }
.hp-b1map .tr { stroke-width: 1.4; stroke-linejoin: round; }
.hp-b1map .t1 { fill: color-mix(in oklab, var(--hp-mint) 16%, transparent); stroke: color-mix(in oklab, var(--hp-mint) 70%, transparent); }
.hp-b1map .t2 { fill: color-mix(in oklab, var(--hp-jade) 22%, transparent); stroke: color-mix(in oklab, var(--hp-jade-bright) 70%, transparent); }
.hp-b1map .t3 { fill: color-mix(in oklab, var(--hp-jade-deep) 35%, transparent); stroke: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-b1map .area { fill: none; stroke: var(--hp-ink-2); stroke-width: 1.4; stroke-dasharray: 6 5; }
.hp-b1map .sw0 { stop-color: var(--hp-amber); stop-opacity: .12; }
.hp-b1map .sw1 { stop-color: var(--hp-amber); stop-opacity: .62; }
.hp-b1map .core { fill: none; stroke: var(--hp-danger); stroke-width: 2; stroke-dasharray: 4 5; opacity: .85; }
.hp-b1map .swath { transition: clip-path 2.4s var(--hp-ease); clip-path: inset(0 0 0 0); }
.hp-js [data-b1-find]:not(.go) .swath { clip-path: inset(0 100% 0 0); }
.hp-b1map .hq { fill: var(--hp-mint); stroke: var(--hp-bg); stroke-width: 2; }
.hp-b1map .hq-ring { fill: none; stroke: var(--hp-mint); stroke-width: 1.5; opacity: .6; transform-box: fill-box; transform-origin: center; animation: hp-b1-ping 2.4s var(--hp-ease) infinite; }
@keyframes hp-b1-ping { from { transform: scale(.6); opacity: .8; } to { transform: scale(2); opacity: 0; } }
.hp-b1m-map { background: var(--hp-bg); }
.hp-b1m-map .hp-b1map { position: absolute; inset: 0; }
.hp-b1m-mapchip { position: absolute; right: 4%; bottom: 7%; padding: .45em .8em; border-radius: 2em; font-size: .95em; color: var(--hp-ink); background: color-mix(in oklab, var(--hp-surface) 92%, transparent); border: 1px solid color-mix(in oklab, var(--hp-amber) 55%, transparent); }
.hp-b1m-mapchip b { color: var(--hp-amber); font-family: var(--hp-display); }

/* ================= element 7 — the journey =================
   Base (phones, and every width without JS): stacked steps, each a full-width frame with its text below.
   ≥768px wide and ≥680px tall, with JS: the steps become an invisible scroll track and one large frame is pinned, centered, in the
   viewport; a caption card and the 7-dot rail sit under it and follow the step in view. */
.hp-j { display: grid; grid-template-columns: minmax(0, 1fr); --j-ownw: min(1100px, max(320px, calc((100svh - var(--hp-nav-h) - var(--hp-sticky-h) - 64px) * 16 / 9 + 52px))); }
.hp-j-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 8vw, 80px); }
.hp-j-step { display: grid; gap: 18px; scroll-margin-top: calc(var(--hp-nav-h) + 24px); }
.hp-j-step:focus { outline: none; }
.hp-j-own { width: 100%; max-width: var(--j-ownw); margin-inline: auto; }
.hp-j-copy { width: 100%; max-width: var(--j-ownw); margin-inline: auto; }
.hp-j-copy h3 { margin: 10px 0 10px; }
.hp-j-copy > p:last-child { color: var(--hp-ink-2); max-width: 40em; }
.hp-j-num { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 13px/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--hp-mint); }
.hp-j-num span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--hp-mint) 50%, transparent); letter-spacing: 0; font-size: 14px; color: var(--hp-ink); }
.hp-j-num .hp-ico { width: 24px; height: 24px; }
.hp-j .hp-frame-view > video { object-fit: contain; }
/* the journey frame grows to ~1100px, so its HTML mocks scale further than the toolbox ones */
.hp-j .hp-frame-view > .hp-b1m, .hp-j-layer > .hp-b1m { font-size: clamp(8.5px, 2.05cqi, 21px); }
.hp-j-side { display: none; }
.hp-j-end { margin-top: clamp(40px, 6vw, 64px); display: flex; justify-content: center; }
@media (max-width: 560px) {
  .hp-j-own .hp-frame-view:has(> .hp-b1m) { aspect-ratio: 4 / 3; }
  /* phones: the step frame bleeds to the screen edges so the clip is as big as it can be */
  .hp-j-own { width: auto; margin-inline: calc(-1 * var(--hp-gutter)); }
  .hp-j-own .hp-frame { border-radius: 0; border-left: 0; border-right: 0; }
  .hp-j-end .hp-btn { width: 100%; }
}
@media (min-width: 768px) and (min-height: 680px) {
  /* steps and stage share one grid cell: the steps give the scroll distance, the stage sticks over them */
  .hp-js .hp-j { grid-template-areas: "j"; }
  .hp-js .hp-j-steps, .hp-js .hp-j-side { grid-area: j; }
  .hp-js .hp-j-steps { gap: 0; }
  .hp-js .hp-j-step { display: block; position: relative; min-height: 78svh; }
  .hp-js .hp-j-step:last-child { min-height: 100svh; }
  .hp-js .hp-j-own { display: none; }
  .hp-js .hp-j-copy { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hp-js .hp-j-side { display: block; align-self: start; position: sticky; z-index: 1; top: calc(var(--hp-nav-h) + 8px); pointer-events: none; }
  .hp-j-sticky {
    /* frame width = the 16:9 view that fits the height left after the nav, frame bar, caption row and rail (+ the 52px app rail) */
    --j-reserve: 196px;
    pointer-events: auto; width: min(100%, 1100px, calc((100svh - var(--hp-nav-h) - var(--hp-sticky-h) - 38px - var(--j-reserve) - 30px) * 16 / 9 + 52px));
    min-height: calc(100svh - var(--hp-nav-h) - var(--hp-sticky-h) - 16px); margin-inline: auto;
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
  }
  .hp-j-stage .hp-frame { box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7); }
  .hp-j-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hp-j-caps { display: grid; }
  .hp-j-cap {
    grid-area: 1 / 1; padding: 12px 16px; border-radius: var(--hp-r-lg); background: var(--hp-surface); border: 1px solid var(--hp-line);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--hp-ease), visibility 0s linear .4s;
  }
  .hp-j-cap.on { opacity: 1; visibility: visible; transition: opacity .4s var(--hp-ease), visibility 0s; }
  .hp-j-cap .hp-j-num { font-size: 12px; }
  .hp-j-cap-t { margin: 8px 0 4px; font: 600 clamp(17px, 1.5vw, 21px)/1.25 var(--hp-display, var(--hp-font)); color: var(--hp-ink); }
  .hp-j-cap-b { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hp-ink-2); }
  .hp-j-stage .hp-j-layer { opacity: 0; visibility: hidden; transition: opacity .45s var(--hp-ease), visibility 0s linear .45s; }
  .hp-j-stage .hp-j-layer.on { opacity: 1; visibility: visible; transition: opacity .45s var(--hp-ease), visibility 0s; }
  .hp-j-stage .hp-b1m-toast { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--hp-ease) .6s, transform .5s var(--hp-ease) .6s; }
  .hp-j-stage .hp-j-layer.on .hp-b1m-toast { opacity: 1; transform: none; }
}
/* tablet: frame takes the wrap's width (height-bounded), caption stacked above the rail */
@media (min-width: 768px) and (max-width: 1024px) and (min-height: 680px) {
  .hp-j-sticky { --j-reserve: 236px; }
}
/* desktop: caption card left, rail right, both under the frame */
@media (min-width: 1025px) and (min-height: 680px) {
  .hp-j-sticky { --j-reserve: 172px; }
  .hp-j-foot { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: center; }
  .hp-j-foot .hp-j-rail a b { overflow-wrap: normal; white-space: nowrap; }
  .hp-j-foot .hp-j-rail { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-j-stage .hp-j-layer, .hp-j-stage .hp-b1m-toast, .hp-j-cap { transition: none !important; }
  .hp-b1m-btn, .hp-b1m-funnel i, .hp-b1map .hq-ring { animation: none !important; }
  .hp-b1map .swath { transition: none; }
}
/* progress rail */
.hp-j-rail { margin-top: 4px; }
.hp-j-rail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.hp-j-rail ol::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 21px; height: 2px; background: var(--hp-line-2); }
.hp-j-rail ol::after { content: ""; position: absolute; left: calc(100% / 14); top: 21px; height: 2px; width: calc((100% - 100% / 7) * var(--prog, 0)); background: var(--hp-mint); transition: width .4s var(--hp-ease); }
.hp-j-rail a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 14px 2px 4px; color: var(--hp-ink-3); text-decoration: none !important; border-radius: var(--hp-r-sm); }
.hp-j-rail a i { width: 14px; height: 14px; border-radius: 50%; background: var(--hp-surface); border: 2px solid var(--hp-line-2); transition: background .3s, border-color .3s, box-shadow .3s; }
.hp-j-rail a.done i { background: var(--hp-mint); border-color: var(--hp-mint); }
.hp-j-rail a[aria-current] { color: var(--hp-ink); }
.hp-j-rail a[aria-current] i { background: var(--hp-mint); border-color: var(--hp-mint); box-shadow: 0 0 0 5px var(--hp-glow); }
.hp-j-rail a b { font: 600 12px/1.1 var(--hp-font); text-align: center; overflow-wrap: anywhere; }
.hp-j-rail a:hover { color: var(--hp-ink); }

/* ================= element 8 — the toolbox ================= */
.hp-tb-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.hp-tb-chip {
  min-height: 44px; padding: 10px 18px; border-radius: var(--hp-r-pill); cursor: pointer;
  font: 600 15px/1 var(--hp-font); color: var(--hp-ink-2); background: transparent; border: 1px solid var(--hp-line-2);
  transition: background .18s, color .18s, border-color .18s; -webkit-tap-highlight-color: transparent;
}
.hp-tb-chip:hover { color: var(--hp-ink); border-color: color-mix(in oklab, var(--hp-mint) 40%, transparent); }
.hp-tb-chip[aria-pressed="true"] { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-mint) 16%, transparent); border-color: color-mix(in oklab, var(--hp-mint) 55%, transparent); }
.hp-tb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
@media (max-width: 1100px) { .hp-tb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hp-tb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-tb-tile[hidden], .hp-tb-slot[hidden], .hp-tb-panel[hidden] { display: none; }
.hp-tb-btn {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: clamp(14px, 1.6vw, 20px); padding-right: 40px; text-align: left; cursor: pointer; font: inherit; color: var(--hp-ink);
  background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: var(--hp-r-xl);
  transition: transform .18s var(--hp-ease), border-color .18s, background .18s; -webkit-tap-highlight-color: transparent;
}
.hp-tb-btn:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--hp-mint) 40%, transparent); }
.hp-tb-btn[aria-expanded="true"] { border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 9%, var(--hp-bg)); }
.hp-tb-btn .hp-ico { width: 48px; height: 48px; }
.hp-tb-name { font: 600 17px/1.2 var(--hp-display); letter-spacing: -.01em; }
.hp-tb-out { font-size: 14px; line-height: 1.4; color: var(--hp-ink-2); }
.hp-tb-more { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hp-line-2); transition: transform .25s var(--hp-ease), background .2s; }
.hp-tb-more::before, .hp-tb-more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--hp-ink-2); }
.hp-tb-more::after { transform: rotate(90deg); }
.hp-tb-btn[aria-expanded="true"] .hp-tb-more { transform: rotate(45deg); background: var(--hp-mint); border-color: var(--hp-mint); }
.hp-tb-btn[aria-expanded="true"] .hp-tb-more::before, .hp-tb-btn[aria-expanded="true"] .hp-tb-more::after { background: var(--hp-bg); }
@media (max-width: 420px) { .hp-tb-name { font-size: 16px; } .hp-tb-out { font-size: 13px; } .hp-tb-btn .hp-ico { width: 40px !important; height: 40px !important; } }
.hp-tb-slot { grid-column: 1 / -1; }
.hp-tb-panel {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start;
  padding: clamp(16px, 2.4vw, 28px); border-radius: var(--hp-r-xl); background: var(--hp-bg);
  border: 1px solid color-mix(in oklab, var(--hp-mint) 35%, transparent); box-shadow: var(--hp-shadow);
  animation: hp-b1-in .35s var(--hp-ease);
}
@keyframes hp-b1-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hp-tb-panel { animation: none; } .hp-tb-btn, .hp-tb-more { transition: none; } }
.hp-tb-panel h3:focus { outline: none; }
.hp-tb-panel h3:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: 4px; }
.hp-tb-txt > p { color: var(--hp-ink-2); margin-top: 8px; }
.hp-tb-close { margin-top: 20px; }
.hp-tb-mock { position: relative; aspect-ratio: 16 / 9; border-radius: var(--hp-r-lg); overflow: hidden; border: 1px solid var(--hp-line-2); }
@media (max-width: 900px) { .hp-tb-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .hp-tb-mock { aspect-ratio: 4 / 3; } .hp-tb-close { width: 100%; } }

/* ================= elements 9–12 — panels ================= */
.hp-pn-copy h2 { font-size: clamp(30px, 4.2vw, 48px); }
.hp-pn-copy .hp-eyebrow { margin-bottom: 14px; }
.hp-pn-voice { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--hp-mint); font-weight: 600; color: var(--hp-ink); }
.hp-pn-media { min-width: 0; container-type: inline-size; }

/* standalone mock cards */
.hp-b1m-thread, .hp-b1m-lead, .hp-b1m-presence, .hp-pn-pair .hp-b1m-web {
  border-radius: var(--hp-r-xl); border: 1px solid var(--hp-line-2); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6);
}
/* 9 — run the office: thread over a Work frame */
.hp-pn-office { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hp-b1m-thread { grid-column: 1 / 9; grid-row: 2; z-index: 1; margin-top: -96px; display: grid; gap: 10px; padding: 16px; }
.hp-pn-float { grid-column: 4 / 13; grid-row: 1; }
.hp-b1m-th { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--hp-line); }
.hp-b1m-th b { margin-right: auto; font-family: var(--hp-display); }
.hp-b1m-th .pill { font: 600 11px/1 var(--hp-mono); padding: 5px 8px; border-radius: 2em; color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 12%, transparent); }
.hp-b1m-th .pill.note { color: var(--hp-amber); background: color-mix(in oklab, var(--hp-amber) 14%, transparent); }
.hp-b1m-msg { max-width: 86%; padding: 8px 12px; border-radius: 14px; background: color-mix(in oklab, var(--hp-ink) 6%, var(--hp-surface)); }
.hp-b1m-msg b { display: block; font-size: 12px; color: var(--hp-ink-3); margin-bottom: 2px; }
.hp-b1m-msg.note { justify-self: center; max-width: 92%; background: color-mix(in oklab, var(--hp-amber) 12%, var(--hp-surface)); border: 1px dashed color-mix(in oklab, var(--hp-amber) 50%, transparent); }
.hp-b1m-msg.note span { display: block; margin-top: 4px; font-size: 11px; color: var(--hp-amber); font-weight: 600; }
.hp-b1m-msg.me { justify-self: end; background: color-mix(in oklab, var(--hp-mint) 18%, var(--hp-surface)); }
@media (max-width: 900px) {
  .hp-b1m-thread { grid-column: 1 / -1; margin-top: 16px; }
  .hp-pn-float { grid-column: 1 / -1; }
}

/* 10 — win the work: Agents frame + animated lead card */
.hp-pn-win { display: grid; }
.hp-b1m-lead { position: relative; z-index: 1; justify-self: end; width: min(400px, 88%); margin-top: -64px; margin-right: 4%; display: grid; gap: 10px; padding: 16px; }
.hp-b1m-leadh { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hp-b1m-leadh span:last-child { margin-left: auto; color: var(--hp-ink-3); }
.hp-b1m-leadh .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hp-mint); box-shadow: 0 0 0 4px var(--hp-glow); }
.hp-b1m-leadn { font: 600 18px/1.2 var(--hp-display); }
.hp-b1m-leadn span { display: block; font: 400 13px/1.4 var(--hp-font); color: var(--hp-ink-2); }
.hp-b1m-draft { padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--hp-mint) 9%, var(--hp-surface)); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.hp-b1m-draft b { display: block; font: 600 11px/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--hp-mint); margin-bottom: 6px; }
.hp-b1m-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-b1m-acts span { padding: 7px 12px; border-radius: 2em; font-size: 13px; font-weight: 600; border: 1px solid var(--hp-line-2); color: var(--hp-ink-2); }
.hp-b1m-acts .ok { color: #04140e; border-color: transparent; background: linear-gradient(180deg, var(--hp-jade-bright), var(--hp-jade)); }
.hp-b1m-acts .call { margin-left: auto; color: var(--hp-mint); border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-b1m-sent { font-size: 13px; font-weight: 600; color: var(--hp-mint); }
.hp-b1m-lead .hp-b1m-leadn, .hp-b1m-lead .hp-b1m-draft, .hp-b1m-lead .hp-b1m-acts, .hp-b1m-lead .hp-b1m-sent { transition: opacity .45s var(--hp-ease), transform .45s var(--hp-ease); }
.hp-b1m-lead[data-state="0"] .hp-b1m-leadn,
.hp-b1m-lead[data-state="0"] .hp-b1m-draft, .hp-b1m-lead[data-state="1"] .hp-b1m-draft,
.hp-b1m-lead[data-state="0"] .hp-b1m-acts, .hp-b1m-lead[data-state="1"] .hp-b1m-acts,
.hp-b1m-lead:not([data-state="3"]) .hp-b1m-sent { opacity: 0; transform: translateY(8px); }
.hp-b1m-lead[data-state="3"] .hp-b1m-acts .ok { box-shadow: 0 0 0 4px var(--hp-glow); }
@media (prefers-reduced-motion: reduce) { .hp-b1m-lead * { transition: none !important; } }
@media (max-width: 900px) { .hp-b1m-lead { width: 100%; margin: 16px 0 0; justify-self: stretch; } }

/* 11 — get found */
.hp-pn-found { display: grid; gap: 16px; }
.hp-pn-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.hp-pn-pair .hp-b1m-web { font-size: 12px; }
.hp-b1m-presence { display: grid; gap: 8px; align-content: center; padding: 16px; border-radius: var(--hp-r-xl); border: 1px solid var(--hp-line-2); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6); }
.hp-b1m-presence .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--hp-ink) 4%, transparent); font-size: 14px; }
.hp-b1m-presence .row b { font-size: 13px; }
.hp-b1m-presence .ok b { color: var(--hp-mint); }
.hp-b1m-presence .warn b { color: var(--hp-amber); }
@media (max-width: 560px) { .hp-pn-pair { grid-template-columns: minmax(0, 1fr); } }

/* 12 — find customers */
.hp-find { position: relative; margin: 0; border-radius: var(--hp-r-xl); overflow: hidden; border: 1px solid var(--hp-line-2); background: var(--hp-bg); box-shadow: 0 40px 100px -40px rgb(0 0 0 / .7); }
.hp-find-map { position: relative; aspect-ratio: 400 / 260; }
.hp-find-map .hp-b1map { position: absolute; inset: 0; }
.hp-find-t { position: absolute; padding: 5px 10px; border-radius: 2em; font-size: 12px; white-space: nowrap; color: var(--hp-ink-2); background: color-mix(in oklab, var(--hp-surface) 88%, transparent); border: 1px solid var(--hp-line-2); }
.hp-find-t b { color: var(--hp-ink); font-family: var(--hp-display); }
.hp-find-t.t1 { left: 18%; top: 22%; }
.hp-find-t.t2 { left: 56%; top: 20%; }
.hp-find-t.t3 { left: 22%; top: 66%; }
.hp-find-alert {
  position: absolute; right: 3%; bottom: 5%; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
  border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 94%, transparent); border: 1px solid color-mix(in oklab, var(--hp-amber) 50%, transparent);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / .7);
}
.hp-find-alert p { margin: 0; font-size: 14px; line-height: 1.3; }
.hp-find-alert p > b { display: block; }
.hp-find-alert span { color: var(--hp-ink-2); }
.hp-find-alert span b { font: 700 18px/1 var(--hp-display); color: var(--hp-amber); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .hp-find-t { font-size: 11px; padding: 4px 8px; }
  .hp-find-t.t2 { left: auto; right: 4%; }
  .hp-find-alert { position: static; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
}

/* frames in this lane: the rail never makes the frame taller than its 16:9 view */
.hp-j .hp-frame-rail, .hp-tb .hp-frame-rail, .hp-pn-media .hp-frame-rail { contain: size; overflow: hidden; }

/* ================= toolbox panel: interactive mocks (ADR-002 items 2+3) ================= */
.hp-tb-media { min-width: 0; }
.hp-tb-ba { display: inline-flex; padding: 3px; margin-bottom: 12px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); background: var(--hp-surface); }
.hp-tb-ba button {
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--hp-r-pill); cursor: pointer; background: transparent;
  font: 600 14px/1 var(--hp-font); color: var(--hp-ink-2); -webkit-tap-highlight-color: transparent;
}
.hp-tb-ba button[aria-pressed="true"] { color: #04140e; background: var(--hp-mint); }
.hp-tb-ba button[data-ba="before"][aria-pressed="true"] { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-amber) 30%, var(--hp-surface)); }
@media (max-width: 420px) { .hp-tb-ba { display: flex; } .hp-tb-ba button { flex: 1; min-height: 44px; padding: 8px 10px; } }
.hp-tb-panel .mk-stage { touch-action: pan-y; }
.hp-tb-proof { display: flex; gap: 10px; align-items: baseline; margin: 14px 0 6px !important; padding: 10px 14px; border-radius: var(--hp-r-lg); color: var(--hp-ink) !important; font-weight: 600;
  background: color-mix(in oklab, var(--hp-mint) 9%, var(--hp-surface)); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.hp-tb-proof span { flex: none; font: 600 11px/1.6 var(--hp-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--hp-mint); }
.hp-tb-clip { position: relative; margin: 16px 0 0; max-width: 260px; border-radius: var(--hp-r-lg); overflow: hidden; border: 1px solid var(--hp-line-2); }
.hp-tb-clip video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .75; }
.hp-tb-clip figcaption { padding: 6px 10px; font-size: 13px; color: var(--hp-ink-2); background: var(--hp-surface); }
.hp-tb-clip .hp-lb-btn { right: 8px; top: 8px; bottom: auto; min-height: 44px; font-size: 13px; padding: 6px 12px; }
.hp-tb-nav { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.hp-tb-nav .hp-btn { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; font-size: 14px; padding: 8px 12px; }
.hp-tb-nav .hp-btn[hidden] { display: none; }
.hp-tb-nav [data-tb-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-tb-close { margin-top: 10px; }
@media (max-width: 560px) { .hp-tb-nav .hp-btn { flex-basis: 100%; } .hp-tb-clip { max-width: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* journey: the stage layers hold bare players; the phone steps hold framed players */
.hp-j-layer > .mk-player { position: absolute; inset: 0; }
.hp-j-own > .mk-player .mk-ctl { margin-top: 8px; }
@media (max-width: 560px) { .hp-j-own > .mk-player .mk-ctl { padding-inline: var(--hp-gutter); } }

/* 30-b2.css */
/* lane B2 — elements 13–18: roof measurement, storm night, site rebuild, presence grade, reviews, reports.
   Colors only through --hp-* (00-base.css) and --hj-* kit tokens; pure black/white alpha where noted. */

/* ===== 13 roof measurement ================================================================== */
.hp-roof {
  --e-ridge: var(--hp-ink);
  --e-hip: var(--hp-mint);
  --e-valley: var(--hp-amber);
  --e-eave: color-mix(in oklab, var(--hp-ink) 52%, var(--hp-bg));
  --e-rake: color-mix(in oklab, var(--hp-danger) 62%, var(--hp-ink));
  --roof-facet: var(--hp-jade);
  --roof-facet-alt: var(--hp-jade-deep);
  --roof-facet-on: var(--hp-mint);
  --roof-wall: color-mix(in oklab, var(--hp-ink) 22%, var(--hp-surface));
  --roof-ground: color-mix(in oklab, var(--hp-bg) 70%, black);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}
:root[data-theme="light"] .hp-roof {
  --e-valley: color-mix(in oklab, var(--hp-amber) 85%, black);
  --e-eave: color-mix(in oklab, var(--hp-ink) 45%, var(--hp-bg));
  --e-rake: color-mix(in oklab, var(--hp-danger) 80%, black);
  --roof-wall: color-mix(in oklab, var(--hp-ink) 10%, var(--hp-surface));
  --roof-ground: color-mix(in oklab, var(--hp-ink) 40%, var(--hp-bg));
}
@media (max-width: 900px) { .hp-roof { grid-template-columns: minmax(0, 1fr); } }

.hp-roof-stage {
  position: relative; min-width: 0; overflow: hidden; border-radius: var(--hp-r-xl); aspect-ratio: 5 / 4; min-height: 300px;
  background: radial-gradient(90% 80% at 50% 30%, color-mix(in oklab, var(--hp-jade-deep) 40%, var(--hp-surface)), var(--hp-surface) 75%);
  border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow);
}
@media (min-width: 901px) { .hp-roof { align-items: stretch; } .hp-roof-stage { aspect-ratio: auto; min-height: 520px; } }
:root[data-theme="light"] .hp-roof-stage { background: radial-gradient(90% 80% at 50% 30%, var(--hp-surface), var(--hp-surface-2) 80%); }
.hp-roof-top .hp-chip { white-space: nowrap; }
.hp-roof-top { position: absolute; z-index: var(--hp-z-raise); left: 14px; right: 14px; top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.hp-roof-hint { font: 500 12px/1.3 var(--hp-mono); color: var(--hp-ink-3); text-align: right; display: none; }
.hp-roof-stage.gl .hp-roof-hint { display: block; }
@media (max-width: 480px) { .hp-roof-stage.gl .hp-roof-hint { display: none; } }
.hp-roof-gl { display: none; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline: none; }
.hp-roof-gl:active { cursor: grabbing; }
.hp-roof-gl:focus-visible { box-shadow: 0 0 0 2px var(--hp-mint) inset; }
.hp-roof-stage.gl .hp-roof-gl { display: block; }
.hp-roof-stage.gl .hp-roof-svg { display: none; }
.hp-roof-svg { position: absolute; inset: 52px 14px 54px; width: calc(100% - 28px); height: calc(100% - 106px); }
.hp-roof-svg .f { stroke: none; cursor: pointer; transition: fill .2s; }
.hp-roof-svg .f-back, .hp-roof-svg .f-front, .hp-roof-svg .f-wingr { fill: color-mix(in oklab, var(--roof-facet) 70%, var(--hp-surface)); }
.hp-roof-svg .f-left, .hp-roof-svg .f-right, .hp-roof-svg .f-wingl { fill: color-mix(in oklab, var(--roof-facet-alt) 80%, var(--hp-surface)); }
.hp-roof-svg .f.on { fill: color-mix(in oklab, var(--roof-facet-on) 75%, var(--hp-surface)); }
.hp-roof-svg .e { stroke-width: .7; stroke-linecap: round; }
.hp-roof-svg .e-ridge { stroke: var(--e-ridge); } .hp-roof-svg .e-hip { stroke: var(--e-hip); }
.hp-roof-svg .e-valley { stroke: var(--e-valley); } .hp-roof-svg .e-eave { stroke: var(--e-eave); } .hp-roof-svg .e-rake { stroke: var(--e-rake); }
.hp-roof-svg text { font: 600 1.9px/1 var(--hp-font); text-anchor: middle; paint-order: stroke; stroke: var(--hp-surface); stroke-width: .7px; stroke-linejoin: round; pointer-events: none; }
.hp-roof-svg .p { fill: var(--hp-ink); font: 700 2.1px/1 var(--hp-mono); }
.hp-roof-svg .l-ridge { fill: var(--e-ridge); } .hp-roof-svg .l-hip { fill: var(--e-hip); } .hp-roof-svg .l-valley { fill: var(--e-valley); }
.hp-roof-svg .l-eave { fill: var(--e-eave); } .hp-roof-svg .l-rake { fill: var(--e-rake); }

.hp-roof-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hp-roof-labels span {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; opacity: 0; transition: opacity .35s;
  font: 600 12px/1 var(--hp-font); color: var(--hp-ink); padding: 5px 8px 5px 7px; border-radius: var(--hp-r-pill);
  background: color-mix(in oklab, var(--hp-bg) 82%, transparent); border: 1px solid var(--hp-line-2); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: 6px;
}
.hp-roof-labels span em { font-style: normal; }
.hp-roof-labels span i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.hp-roof-labels span.show { opacity: 1; }
.hp-roof-labels span.k-ridge i { color: var(--e-ridge); } .hp-roof-labels span.k-hip i { color: var(--e-hip); }
.hp-roof-labels span.k-valley i { color: var(--e-valley); } .hp-roof-labels span.k-eave i { color: var(--e-eave); }
.hp-roof-labels span.k-rake i { color: var(--e-rake); }
.hp-roof-labels span.pitch { font: 700 11px/1 var(--hp-mono); padding: 4px 7px; color: var(--hp-mint); }
.hp-roof-labels span.pitch.on { background: var(--hp-bg); color: var(--hp-mint); border-color: var(--hp-mint); }

.hp-roof-tip {
  position: absolute; z-index: var(--hp-z-raise); left: 14px; bottom: 12px; right: 96px; min-height: 30px;
  font: 500 13px/1.35 var(--hp-font); color: var(--hp-ink-2); display: flex; align-items: center;
}
.hp-roof-tip b { color: var(--hp-ink); margin-right: 6px; }
.hp-roof-replay {
  position: absolute; z-index: var(--hp-z-raise); right: 10px; bottom: 6px; min-height: 44px; min-width: 44px; padding: 8px 14px;
  border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); background: color-mix(in oklab, var(--hp-bg) 70%, transparent);
  color: var(--hp-ink); font: 600 13px/1 var(--hp-font); cursor: pointer;
}
.hp-roof-replay:hover { background: color-mix(in oklab, var(--hp-ink) 8%, var(--hp-bg)); }
.hp-roof-probe { position: absolute; width: 0; height: 0; overflow: hidden; }

.hp-roof-read { display: grid; gap: 16px; min-width: 0; }
.hp-roof-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hp-roof-kpis > div { padding: 14px 14px 12px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 85%, transparent); border: 1px solid var(--hp-line); display: grid; gap: 4px; min-width: 0; }
.hp-roof-kpis .hp-stat { font-size: clamp(26px, 3vw, 36px); }
.hp-roof-k { font-weight: 600; color: var(--hp-ink); font-size: 14px; }
.hp-roof-kpis .hp-muted { font-size: 12.5px; line-height: 1.3; }
.hp-roof-h { font: 600 13px/1.2 var(--hp-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--hp-ink-3); margin: 4px 0 -6px; }
.hp-roof-h .hp-muted { text-transform: none; letter-spacing: 0; font-family: var(--hp-font); font-weight: 400; margin-left: 6px; }
.hp-roof-edges { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hp-roof-edges li { display: grid; grid-template-columns: 14px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--hp-line); }
.hp-roof-edges li:last-child { border-bottom: 0; }
.hp-roof-edges i { width: 14px; height: 4px; border-radius: 2px; background: var(--c); }
.hp-roof-edges b { font-weight: 600; }
.hp-roof-edges span { color: var(--hp-ink-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-roof-edges em { font: 600 15px/1 var(--hp-mono); font-style: normal; color: var(--hp-ink); }
.hp-roof-edges .e-ridge { --c: var(--e-ridge); } .hp-roof-edges .e-hip { --c: var(--e-hip); } .hp-roof-edges .e-valley { --c: var(--e-valley); }
.hp-roof-edges .e-eave { --c: var(--e-eave); } .hp-roof-edges .e-rake { --c: var(--e-rake); }
.hp-roof-facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hp-roof-facets button {
  display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 8px 12px; border-radius: var(--hp-r-md); cursor: pointer;
  background: transparent; border: 1px solid var(--hp-line-2); color: var(--hp-ink); font: inherit; -webkit-tap-highlight-color: transparent;
}
.hp-roof-facets button b { font-size: 14px; font-weight: 600; }
.hp-roof-facets button span { font: 500 12.5px/1.2 var(--hp-mono); color: var(--hp-ink-3); }
.hp-roof-facets button:hover { background: color-mix(in oklab, var(--hp-ink) 5%, transparent); }
.hp-roof-facets button[aria-pressed="true"] { border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.hp-roof-facets button[aria-pressed="true"] span { color: var(--hp-mint); }

.hp-roof-mat { grid-column: 1 / -1; display: grid; gap: 14px; }
.hp-roof-mat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.hp-roof-mat li { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 85%, transparent); border: 1px solid var(--hp-line); min-width: 0; }
.hp-roof-mat li span { font-size: 14px; color: var(--hp-ink-2); }
.hp-roof-mat li b { font: 700 20px/1.1 var(--hp-display); letter-spacing: -0.02em; }
.hp-roof-mat li small { font-size: 12.5px; color: var(--hp-ink-3); line-height: 1.35; }
@media (max-width: 1100px) { .hp-roof-mat ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hp-roof-mat ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-roof-kpis { gap: 8px; } .hp-roof-kpis > div { padding: 12px 10px; } }
@media (max-width: 420px) { .hp-roof-stage { aspect-ratio: 4 / 5; } .hp-roof-facets { grid-template-columns: minmax(0, 1fr); } .hp-roof-edges span { display: none; } .hp-roof-edges li { grid-template-columns: 14px minmax(0, 1fr) auto; } }

/* ===== 14 storm night → booked week ========================================================= */
.hp-storm { align-items: start; }
.hp-storm-tl { display: grid; gap: 18px; min-width: 0; }
.hp-storm-map { margin: 0; border-radius: var(--hp-r-xl); overflow: hidden; background: var(--hp-bg); border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow); }
.hp-storm-map svg { width: 100%; height: auto; }
.hp-storm-map .area { fill: color-mix(in oklab, var(--hp-jade-deep) 35%, var(--hp-surface)); stroke: color-mix(in oklab, var(--hp-mint) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hp-storm-map .road { fill: none; stroke: color-mix(in oklab, var(--hp-ink) 16%, transparent); stroke-width: 3; stroke-linecap: round; }
.hp-storm-map .road.thin { stroke-width: 1.6; }
.hp-storm-map .swath { fill: color-mix(in oklab, var(--hp-amber) 30%, transparent); stroke: color-mix(in oklab, var(--hp-amber) 70%, transparent); stroke-width: 1; }
.hp-storm-map .swath-core { fill: color-mix(in oklab, var(--hp-danger) 18%, transparent); }
.hp-storm-map .home { fill: color-mix(in oklab, var(--hp-ink) 45%, transparent); transition: fill .3s, r .3s; }
.hp-storm-map .home.hit { fill: var(--hp-amber); r: 3.2px; }
.hp-storm-map .office circle { fill: color-mix(in oklab, var(--hp-mint) 25%, transparent); stroke: var(--hp-mint); stroke-width: 1.5; }
.hp-storm-map .office .dot { fill: var(--hp-mint); stroke: none; }
.hp-storm-map .lbl { font: 600 11px/1 var(--hp-font); fill: var(--hp-ink-2); }
.hp-storm-map figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--hp-line); background: var(--hp-surface); }
.hp-storm-count { color: var(--hp-ink-2); font-size: 15px; }
.hp-storm-count b { font: 700 22px/1 var(--hp-display); color: var(--hp-ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.hp-storm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.hp-storm-steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 12px 0; position: relative; transition: opacity .5s var(--hp-ease); }
.hp-storm-steps li::before { content: ""; position: absolute; left: 62px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--hp-line-2); transition: background .4s, box-shadow .4s; }
.hp-storm-steps li::after { content: ""; position: absolute; left: 66px; top: 32px; bottom: -14px; width: 1px; background: var(--hp-line); }
.hp-storm-steps li:last-child::after { display: none; }
.hp-storm-steps li.on::before { background: var(--hp-mint); box-shadow: 0 0 10px var(--hp-mint); }
.hp-storm-steps li:not(.on) { opacity: .4; }
.hp-storm-steps time { font: 600 13px/1.6 var(--hp-mono); color: var(--hp-mint); }
.hp-storm-steps h3 { font-size: 18px; margin-bottom: 4px; }
.hp-storm-steps p { color: var(--hp-ink-2); font-size: 15px; }
.hp-storm-steps p b { color: var(--hp-ink); font-variant-numeric: tabular-nums; }
.hp-storm-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; max-width: 340px; }
.hp-storm-week span { display: grid; gap: 4px; align-content: start; }
.hp-storm-week em { font: 600 11px/1 var(--hp-mono); font-style: normal; color: var(--hp-ink-3); }
.hp-storm-week i { height: 12px; border-radius: 3px; background: color-mix(in oklab, var(--hp-mint) 55%, transparent); transition: opacity .3s calc(var(--k) * 60ms), transform .3s calc(var(--k) * 60ms) var(--hp-ease-back); transform-origin: left; }
.hp-storm-steps li:not(.on) .hp-storm-week i { opacity: 0; transform: scaleX(.2); }
.hp-storm-replay { justify-self: start; }
.hp-storm-video { display: grid; gap: 10px; min-width: 0; }
@media (max-width: 420px) { .hp-storm-steps li { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; } .hp-storm-steps li::before { left: 50px; } .hp-storm-steps li::after { left: 54px; } }
@media (prefers-reduced-motion: reduce) { .hp-storm-steps li, .hp-storm-week i, .hp-storm-map .home { transition: none; } }

/* ===== 15 site rebuild ====================================================================== */
.hp-rb { --pos: 50%; max-width: 1040px; margin: 0 auto; display: grid; gap: 14px; }
.hp-rb-view {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--hp-r-xl); overflow: hidden; container-type: inline-size;
  border: 1px solid var(--hp-line-2); box-shadow: 0 40px 100px -40px rgb(0 0 0 / .7);
}
.hp-rb-old, .hp-rb-new { position: absolute; inset: 0; overflow: hidden; }
.hp-rb-new { clip-path: inset(0 0 0 var(--pos)); }
.hp-rb-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
.hp-rb-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--hp-mint); box-shadow: 0 0 18px var(--hp-mint); }
.hp-rb-handle span { position: absolute; top: 50%; left: 0; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--hp-mint); box-shadow: 0 6px 20px rgb(0 0 0 / .4); }
.hp-rb-handle span::before, .hp-rb-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; transform: translateY(-50%); }
.hp-rb-handle span::before { left: 6px; border-right-color: var(--hp-bg); }
.hp-rb-handle span::after { right: 6px; border-left-color: var(--hp-bg); }
.hp-rb-tag { position: absolute; bottom: 10px; font: 700 11px/1 var(--hp-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--hp-r-pill); background: rgb(0 0 0 / .6); color: #fff; }
.hp-rb-tag.t-old { left: 10px; } .hp-rb-tag.t-new { right: 10px; background: var(--hp-mint); color: var(--hp-bg); }

/* the dated site: system serif, white, link-blue underlines, bevels — deliberately tired */
.hp-rb-old { background: #fff; color: rgb(0 0 0 / .85); font-family: "Times New Roman", Times, serif; font-size: 2.1cqw; line-height: 1.3; display: flex; flex-direction: column; }
.hp-rb-old .o-top { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 1.6cqw 2.4cqw; background: linear-gradient(180deg, var(--hp-jade-deep), color-mix(in oklab, var(--hp-jade-deep) 60%, black)); color: #fff; border-bottom: .5cqw ridge rgb(0 0 0 / .3); }
.hp-rb-old .o-top b { font-size: 2.6cqw; letter-spacing: .05em; }
.hp-rb-old .o-top span { color: var(--hp-amber); font-weight: 700; font-size: 2.2cqw; font-family: "Comic Sans MS", "Comic Sans", cursive; }
.hp-rb-old .o-nav { padding: .8cqw 2.4cqw; background: rgb(0 0 0 / .08); border-bottom: 1px solid rgb(0 0 0 / .25); font-size: 1.9cqw; }
.hp-rb-old .o-nav u { color: var(--hj-semantic-link); filter: hue-rotate(95deg) saturate(1.6); }
.hp-rb-old .o-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2cqw; padding: 2.2cqw 2.4cqw; flex: 1; }
.hp-rb-old .o-wel { font-size: 3.4cqw; font-weight: 700; color: var(--hp-danger); font-style: italic; margin-bottom: 1.2cqw; }
.hp-rb-old .o-main p { margin-bottom: 1.2cqw; }
.hp-rb-old .o-main ul { margin: 0 0 1.4cqw; padding-left: 3cqw; list-style: square; }
.hp-rb-old .o-click { color: var(--hj-semantic-link); filter: hue-rotate(95deg) saturate(1.6); text-decoration: underline; font-weight: 700; }
.hp-rb-old .o-side { display: grid; gap: 1.4cqw; align-content: start; }
.hp-rb-old .o-img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: rgb(0 0 0 / .12); border: .4cqw outset rgb(0 0 0 / .18); font-size: 1.6cqw; color: rgb(0 0 0 / .5); }
.hp-rb-old .o-foot { padding: 1cqw 2.4cqw; font-size: 1.5cqw; color: rgb(0 0 0 / .55); border-top: 1px solid rgb(0 0 0 / .2); text-align: center; }

/* the new site: the kit */
.hp-rb-new { background: radial-gradient(70% 90% at 80% 10%, color-mix(in oklab, var(--hp-jade) 30%, var(--hp-bg)), var(--hp-bg) 70%); color: var(--hp-ink); font-family: var(--hp-font); display: flex; flex-direction: column; }
.hp-rb-new .n-top { display: flex; align-items: center; gap: 2.2cqw; padding: 2cqw 3cqw; border-bottom: 1px solid var(--hp-line); }
.hp-rb-new .n-top b { display: inline-flex; align-items: center; gap: 1cqw; font: 700 2.3cqw/1 var(--hp-display); letter-spacing: -0.02em; }
.hp-rb-new .n-top b i { width: 2.6cqw; height: 2.6cqw; border-radius: .7cqw; background: linear-gradient(135deg, var(--hp-jade-bright), var(--hp-jade-deep)); }
.hp-rb-new .n-nav { display: flex; gap: 2cqw; margin-left: auto; font-size: 1.7cqw; color: var(--hp-ink-2); }
.hp-rb-new .n-cta { font-size: 1.6cqw; font-weight: 600; padding: 1cqw 1.8cqw; border-radius: 99px; border: 1px solid var(--hp-line-2); }
.hp-rb-new .n-hero { padding: 5cqw 3cqw 3cqw; flex: 1; }
.hp-rb-new .n-kick { font: 600 1.5cqw/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--hp-mint); margin-bottom: 1.8cqw; }
.hp-rb-new .n-h { font: 700 5.4cqw/1.04 var(--hp-display); letter-spacing: -0.035em; }
.hp-rb-new .n-h em { font-style: normal; color: var(--hp-mint); }
.hp-rb-new .n-row { display: flex; align-items: center; gap: 2.4cqw; margin-top: 3cqw; }
.hp-rb-new .n-btn { font-size: 1.9cqw; font-weight: 700; padding: 1.5cqw 2.6cqw; border-radius: 99px; color: var(--hp-bg); background: linear-gradient(180deg, var(--hp-jade-bright), var(--hp-jade)); box-shadow: 0 1.4cqw 3cqw -1.4cqw var(--hp-glow); }
.hp-rb-new .n-stars { font-size: 1.7cqw; color: var(--hp-ink-2); }
.hp-rb-new .n-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; padding: 0 3cqw 3cqw; }
.hp-rb-new .n-cards span { display: flex; align-items: center; gap: 1.2cqw; padding: 1.8cqw; border-radius: 1.4cqw; background: var(--hp-surface); border: 1px solid var(--hp-line); font-size: 1.7cqw; font-weight: 600; }
.hp-rb-new .n-cards i { width: 2.6cqw; height: 2.6cqw; border-radius: .8cqw; background: color-mix(in oklab, var(--hp-mint) 28%, transparent); flex: none; }
@container (max-width: 520px) { .hp-rb-new .n-nav { display: none; } }

.hp-rb-ctl { display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--hp-mono); color: var(--hp-ink-3); text-transform: uppercase; letter-spacing: .08em; }
.hp-rb-ctl input { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.hp-rb-ctl input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--hp-line-2), var(--hp-mint)); }
.hp-rb-ctl input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--hp-mint); border: 3px solid var(--hp-bg); box-shadow: 0 2px 10px rgb(0 0 0 / .4); }
.hp-rb-ctl input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--hp-line-2), var(--hp-mint)); }
.hp-rb-ctl input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--hp-mint); border: 3px solid var(--hp-bg); }
.hp-rb-ctl input:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: 2px; }
.hp-rb-chips { list-style: none; padding: 0; margin: clamp(22px, 3vw, 36px) auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hp-rb-chips li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--hp-r-lg); border: 1px solid var(--hp-line); background: var(--hp-surface); }
.hp-rb-chips span { color: var(--hp-ink-3); font-size: 14px; line-height: 1.45; }
.hp-rb-chips b { display: block; color: var(--hp-ink); font-size: 16px; margin-bottom: 2px; }
@media (max-width: 760px) { .hp-rb-chips { grid-template-columns: minmax(0, 1fr); } .hp-rb-view { aspect-ratio: 4 / 3; } }

/* ===== 16 presence grade ==================================================================== */
.hp-grade { align-items: center; }
.hp-grade-card { margin: 0; display: grid; justify-items: center; gap: 8px; }
.hp-grade-g { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.hp-grade-g .band { fill: none; stroke-width: 18; stroke-linecap: butt; }
.hp-grade-g .b-f { stroke: var(--hp-danger); }
.hp-grade-g .b-d { stroke: color-mix(in oklab, var(--hp-danger) 50%, var(--hp-amber)); }
.hp-grade-g .b-c { stroke: var(--hp-amber); }
.hp-grade-g .b-b { stroke: color-mix(in oklab, var(--hp-amber) 30%, var(--hp-jade-bright)); }
.hp-grade-g .b-a { stroke: var(--hp-mint); }
.hp-grade-g .bl { font: 700 13px/1 var(--hp-display); fill: var(--hp-ink-2); text-anchor: middle; }
.hp-grade-g .needle { transform-box: view-box; transform-origin: 120px 122px; transition: transform 1s var(--hp-ease-back); }
.hp-grade-g .needle line { stroke: var(--hp-ink); stroke-width: 4; stroke-linecap: round; }
.hp-grade-g .needle circle { fill: var(--hp-ink); }
.hp-grade-read { display: flex; align-items: center; gap: 16px; margin-top: -6px; }
.hp-grade-letter { font: 700 clamp(54px, 7vw, 76px)/1 var(--hp-display); letter-spacing: -0.04em; color: var(--hp-mint); min-width: 1.6em; text-align: center; transition: color .4s; }
.hp-grade-letter.mid { color: var(--hp-amber); }
.hp-grade-num { display: grid; gap: 4px; color: var(--hp-ink-3); font-size: 15px; }
.hp-grade-num b { font: 700 32px/1 var(--hp-display); color: var(--hp-ink); font-variant-numeric: tabular-nums; }
.hp-grade-num small { font-size: 13px; }
.hp-grade-who { margin-top: 4px; }
.hp-grade-fixes { display: grid; gap: 16px; min-width: 0; }
.hp-grade-fixes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hp-grade-fixes li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px; border-radius: var(--hp-r-lg); background: var(--hp-surface); border: 1px solid var(--hp-line); transition: border-color .4s, background .4s; }
.hp-grade-fixes li h3 { font-size: 17px; margin-bottom: 4px; }
.hp-grade-fixes li p { font-size: 14.5px; color: var(--hp-ink-2); }
.hp-grade-fixes li em { font: 700 15px/1.4 var(--hp-mono); font-style: normal; color: var(--hp-ink-3); }
.hp-grade-fixes .st { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hp-amber); position: relative; transition: background .3s, border-color .3s; }
.hp-grade-fixes .st::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 14px/1 var(--hp-font); color: var(--hp-amber); }
.hp-grade-fixes li.on { border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-grade-fixes li.on .st { border-color: var(--hp-mint); background: var(--hp-mint); }
.hp-grade-fixes li.on .st::after { content: ""; inset: 7px 6px 9px 7px; border: solid var(--hp-bg); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.hp-grade-fixes li.on em { color: var(--hp-mint); }
.hp-grade-note { display: flex; align-items: center; gap: 12px; color: var(--hp-ink-2); font-size: 15px; }
.hp-grade-fixes .hp-btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .hp-grade-g .needle, .hp-grade-fixes li, .hp-grade-fixes .st { transition: none; } }

/* ===== 17 reviews =========================================================================== */
.hp-rev { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.1fr); gap: 0; align-items: center; }
.hp-rev-lane { position: relative; height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.hp-rev-track { animation: hp-rev-up 36s linear infinite; }
.hp-rev-lane:hover .hp-rev-track, .hp-rev-lane:focus-within .hp-rev-track { animation-play-state: paused; }
.hp-js .hp-rev-track.paused { animation-play-state: paused; }
@keyframes hp-rev-up { to { transform: translateY(-50%); } }
.hp-rev-list { list-style: none; margin: 0; padding: 0; }
.hp-rev-card { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--hp-r-lg); background: var(--hp-bg); border: 1px solid var(--hp-line); transition: border-color .3s, box-shadow .3s; }
.hp-rev-card.on { border-color: var(--hp-mint); box-shadow: 0 0 0 3px var(--hp-glow); }
.hp-rev-card .h, .hp-rev-q .h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hp-rev-card time { margin-left: auto; font: 500 12px/1 var(--hp-mono); color: var(--hp-ink-3); }
.hp-rev-card p { font-size: 15px; color: var(--hp-ink); line-height: 1.45; }
.hp-rev .who { display: block; margin-top: 6px; font-size: 13px; color: var(--hp-ink-3); }
.hp-rev .pf { font: 700 11px/1 var(--hp-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--hp-r-sm); background: color-mix(in oklab, var(--hp-ink) 10%, transparent); color: var(--hp-ink-2); }
.hp-rev-stars { color: var(--hp-amber); letter-spacing: 1px; font-size: 14px; }
.hp-rev-stars s { text-decoration: none; color: var(--hp-line-2); }
.hp-rev-flow { display: grid; gap: 10px; justify-items: center; }
.hp-rev-flow i { width: 10px; height: 10px; border-top: 3px solid var(--hp-mint); border-right: 3px solid var(--hp-mint); transform: rotate(45deg); opacity: .3; animation: hp-rev-flow 1.6s var(--hp-ease) infinite; }
.hp-rev-flow i:nth-child(2) { animation-delay: .2s; } .hp-rev-flow i:nth-child(3) { animation-delay: .4s; }
@keyframes hp-rev-flow { 50% { opacity: 1; } }
.hp-rev-box { padding: clamp(18px, 2.2vw, 26px); border-radius: var(--hp-r-xl); background: var(--hp-bg); border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow); display: grid; gap: 16px; min-width: 0; }
.hp-rev-box-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-rev-box-h b { font: 600 18px/1 var(--hp-display); margin-right: auto; }
.hp-rev-q { padding: 14px 16px; border-radius: var(--hp-r-lg); background: var(--hp-surface); border: 1px solid var(--hp-line); transition: opacity .3s; }
.hp-rev-q p { font-size: 16px; }
.hp-rev-draft { position: relative; padding: 14px 16px; border-radius: var(--hp-r-lg); border: 1px solid color-mix(in oklab, var(--hp-mint) 50%, transparent); background: color-mix(in oklab, var(--hp-mint) 6%, transparent); transition: opacity .3s; }
.hp-rev-draft .lbl { display: block; font: 600 11px/1 var(--hp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hp-mint); margin-bottom: 8px; }
.hp-rev-draft p { font-size: 15.5px; color: var(--hp-ink); }
.hp-rev-box.swap .hp-rev-q, .hp-rev-box.swap .hp-rev-draft { opacity: 0; }
.hp-rev-act { display: flex; gap: 10px; flex-wrap: wrap; }
.hp-rev-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); font-weight: 600; font-size: 15px; color: var(--hp-ink-2); }
.hp-rev-btn.on { background: linear-gradient(180deg, var(--hp-jade-bright), var(--hp-jade)); color: #04140e; border-color: transparent; }
.hp-rev-req { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: clamp(24px, 3vw, 40px); padding: 18px 20px; border-radius: var(--hp-r-xl); border: 1px solid var(--hp-line); background: var(--hp-bg); }
.hp-rev-req > div:nth-child(2) { display: grid; gap: 4px; }
.hp-rev-job { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; }
.hp-rev-job .j { color: var(--hp-ink-2); }
.hp-rev-job .arr { color: var(--hp-mint); font-weight: 700; }
.hp-rev-job .sent { font-weight: 600; color: var(--hp-ink); }
@media (max-width: 900px) {
  .hp-rev { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hp-rev-lane { height: 300px; }
  .hp-rev-flow { grid-auto-flow: column; padding: 4px 0; }
  .hp-rev-flow i { transform: rotate(135deg); }
  .hp-rev-req { grid-template-columns: auto minmax(0, 1fr); }
  .hp-rev-job { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .hp-rev-track, .hp-rev-flow i { animation: none; } .hp-rev-flow i { opacity: .8; } }

/* ===== 18 reports =========================================================================== */
.hp-rep { display: grid; gap: clamp(16px, 2vw, 24px); }
.hp-rep-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-rep-top b { font: 600 18px/1 var(--hp-display); margin-right: 4px; }
.hp-rep-top .hp-muted { margin-left: auto; }
.hp-rep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hp-rep-kpis > div { display: grid; gap: 4px; padding: 16px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-ink) 3%, transparent); border: 1px solid var(--hp-line); min-width: 0; }
.hp-rep-kpis .hp-stat { font-size: clamp(30px, 3.4vw, 42px); font-variant-numeric: tabular-nums; }
.hp-rep-kpis b { font-weight: 600; font-size: 15px; }
.hp-rep-kpis .hp-muted { font-size: 13px; }
.hp-rep-charts { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.hp-rep-charts figure { margin: 0; padding: 16px; border-radius: var(--hp-r-lg); border: 1px solid var(--hp-line); min-width: 0; display: grid; gap: 10px; align-content: start; }
.hp-rep-charts figcaption { display: grid; gap: 2px; }
.hp-rep-charts figcaption b { font-weight: 600; }
.hp-rep-speed svg { width: 100%; height: auto; overflow: visible; }
.hp-rep-speed .grid { stroke: var(--hp-line); stroke-width: 1; }
.hp-rep-speed .ax { font: 500 10px/1 var(--hp-mono); fill: var(--hp-ink-3); text-anchor: end; }
.hp-rep-speed .ax.wk { text-anchor: middle; }
.hp-rep-speed .area { fill: color-mix(in oklab, var(--hp-mint) 14%, transparent); transition: opacity .8s .9s; }
.hp-rep-speed .line { fill: none; stroke: var(--hp-mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--hp-ease) .2s; }
.hp-rep-speed .pt { fill: var(--hp-bg); stroke: var(--hp-mint); stroke-width: 2; transition: opacity .3s calc(.25s + var(--i) * .18s); }
.hp-rep-speed .pt.end { fill: var(--hp-mint); }
.hp-rep-speed .val { font: 700 12px/1 var(--hp-font); fill: var(--hp-ink); transition: opacity .4s 1.6s; }
.hp-rep-speed .val.end { text-anchor: middle; fill: var(--hp-mint); }
.hp-js #hp-reports:not(.in) .hp-rep-speed .line { stroke-dashoffset: 1; }
.hp-js #hp-reports:not(.in) .hp-rep-speed .area, .hp-js #hp-reports:not(.in) .hp-rep-speed .pt, .hp-js #hp-reports:not(.in) .hp-rep-speed .val { opacity: 0; }
.hp-rep-funnel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hp-rep-funnel li { display: grid; grid-template-columns: 82px minmax(0, 1fr) 36px 40px; gap: 10px; align-items: center; font-size: 14px; }
.hp-rep-funnel .lb { color: var(--hp-ink-2); }
.hp-rep-funnel .bar { height: 26px; border-radius: 6px; background: color-mix(in oklab, var(--hp-ink) 5%, transparent); overflow: hidden; }
.hp-rep-funnel .bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--hp-jade), var(--hp-mint)); transform-origin: left; transition: transform .9s var(--hp-ease) calc(.3s + var(--i) * .15s); }
.hp-js #hp-reports:not(.in) .hp-rep-funnel .bar i { transform: scaleX(0); }
.hp-rep-funnel li > b { font: 700 15px/1 var(--hp-mono); text-align: right; font-variant-numeric: tabular-nums; }
.hp-rep-funnel li > em { font: 500 12px/1 var(--hp-mono); font-style: normal; color: var(--hp-ink-3); text-align: right; }
.hp-rep-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--hp-r-lg); border: 1px dashed var(--hp-line-2); }
.hp-rep-share .url { font: 600 14px/1.2 var(--hp-mono); color: var(--hp-ink); overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 980px) { .hp-rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-rep-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .hp-rep-funnel li { grid-template-columns: 72px minmax(0, 1fr) 32px 34px; gap: 8px; } .hp-rep-kpis > div { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .hp-rep-speed .line, .hp-rep-speed .area, .hp-rep-speed .pt, .hp-rep-speed .val, .hp-rep-funnel .bar i { transition: none; } }
@media (min-width: 901px) { .hp-storm-video { position: sticky; top: calc(var(--hp-nav-h) + 24px); } }

.hp-rep-src { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; }
.hp-rep-src span:not(.hp-muted) { padding: 5px 10px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); color: var(--hp-ink-2); }
.hp-rep-src .hp-muted { width: 100%; font-size: 13px; }
@media (max-width: 480px) {
  .hp-storm-steps li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: 22px; }
  .hp-storm-steps li::before { left: 0; top: 18px; }
  .hp-storm-steps li::after { left: 4px; top: 32px; }
  .hp-rep-speed .ax { font-size: 14px; }
  .hp-rep-speed .val { font-size: 15px; }
}

/* 40-c.css */
/* lane C — elements 5, 19–25, 27–30 (paths, conversion, trust). Colors only via --hp-* / --hj-*. */

/* ---- 5 · the fork ---- */
.hp-paths-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.hp-path-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; cursor: pointer; min-width: 0;
  padding: clamp(22px, 3vw, 34px); border-radius: var(--hp-r-xl);
  background: color-mix(in oklab, var(--hp-surface) 88%, transparent); border: 1px solid var(--hp-line-2);
  box-shadow: var(--hp-shadow); transition: border-color .2s, box-shadow .25s var(--hp-ease), transform .25s var(--hp-ease);
  -webkit-tap-highlight-color: transparent;
}
.hp-path-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-path-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.hp-path-card:has(.hp-path-radio:focus-visible) { outline: 2px solid var(--hp-mint); outline-offset: 3px; }
.hp-path-card:has(.hp-path-radio:checked) {
  border-color: var(--hp-mint);
  background: linear-gradient(160deg, color-mix(in oklab, var(--hp-mint) 14%, var(--hp-surface)), var(--hp-surface) 70%);
  box-shadow: 0 0 0 1px var(--hp-mint) inset, 0 30px 70px -30px var(--hp-glow), var(--hp-shadow);
}
.hp-path-top { display: flex; align-items: flex-start; justify-content: space-between; }
.hp-path-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hp-line-2); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.hp-path-card:has(.hp-path-radio:checked) .hp-path-check { border-color: var(--hp-mint); background: var(--hp-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2304140e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.hp-path-title { font: 700 clamp(24px, 2.6vw, 32px)/1.1 var(--hp-display); letter-spacing: -0.02em; color: var(--hp-ink); }
.hp-path-sub { color: var(--hp-ink-2); font-size: 18px; }
.hp-path-ticks { display: grid; gap: 8px; margin: 6px 0 4px; }
.hp-path-ticks span { position: relative; padding-left: 22px; color: var(--hp-ink-2); font-size: 15px; }
.hp-path-ticks span::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--hp-mint); }
.hp-path-note { margin: 4px 0 6px; padding: 10px 12px; border-left: 3px solid var(--hp-mint); border-radius: 0 var(--hp-r-sm) var(--hp-r-sm) 0; background: color-mix(in oklab, var(--hp-mint) 8%, transparent); color: var(--hp-ink); font-size: 14.5px; line-height: 1.5; }
.hp-path-keep { align-self: flex-start; margin-top: auto; }
.hp-paths-note { text-align: center; margin-top: 22px; color: var(--hp-ink-3); font-size: 15px; }
@media (max-width: 720px) { .hp-paths-pick { grid-template-columns: minmax(0, 1fr); } }


/* ---- 19 · comparison ---- */
.hp-cmp { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--hp-line); border-radius: var(--hp-r-xl); overflow: hidden; background: var(--hp-bg); box-shadow: var(--hp-shadow); }
.hp-cmp-head, .hp-cmp-row { display: contents; }
.hp-cmp-head > * { padding: 18px 20px; background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); border-bottom: 1px solid var(--hp-line-2); }
.hp-cmp-col { display: flex; align-items: center; gap: 10px; font: 600 18px/1.2 var(--hp-display); color: var(--hp-ink); }
.hp-cmp-head .hp-cmp-task { font: 600 12px/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--hp-ink-3); display: flex; align-items: center; }
.hp-cmp-row > * { padding: 18px 20px; border-bottom: 1px solid var(--hp-line); }
.hp-cmp-row:last-child > * { border-bottom: 0; }
.hp-cmp-task { display: flex; align-items: center; gap: 12px; }
.hp-cmp-task b { font-weight: 600; color: var(--hp-ink); }
.hp-cmp-cell { color: var(--hp-ink-2); font-size: 15px; line-height: 1.5; }
.hp-cmp-cell[data-cmp="pro"], .hp-cmp-col[data-cmp="pro"] { background: color-mix(in oklab, var(--hp-mint) 5%, transparent); }
.hp-cmp-tag { display: none; font: 600 11px/1 var(--hp-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: var(--hp-mint); margin-bottom: 6px; }
:root[data-path="diy"] .hp-cmp [data-cmp="diy"], :root[data-path="pro"] .hp-cmp [data-cmp="pro"] { background: color-mix(in oklab, var(--hp-mint) 12%, transparent); }
:root[data-path="diy"] .hp-cmp [data-cmp="pro"], :root[data-path="pro"] .hp-cmp [data-cmp="diy"] { opacity: .72; }
.hp-cmp-both { margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 20px 32px; align-items: center; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--hp-r-xl); border: 1px solid color-mix(in oklab, var(--hp-mint) 35%, transparent); background: linear-gradient(120deg, color-mix(in oklab, var(--hp-mint) 10%, var(--hp-bg)), var(--hp-bg)); }
.hp-cmp-both-h h3 { margin: 12px 0 8px; }
.hp-cmp-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-cmp-mods li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--hp-r-pill); background: var(--hp-surface); border: 1px solid var(--hp-line); font-size: 14px; font-weight: 500; color: var(--hp-ink); }
@media (max-width: 860px) {
  .hp-cmp { display: block; border: 0; background: none; box-shadow: none; overflow: visible; }
  .hp-cmp-head { display: none; }
  .hp-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 12px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); overflow: hidden; background: var(--hp-bg); }
  .hp-cmp-row > * { border-bottom: 0; padding: 14px 16px; }
  .hp-cmp-row .hp-cmp-task { grid-column: 1 / -1; border-bottom: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-bg)); }
  .hp-cmp-row .hp-cmp-cell[data-cmp="diy"] { border-right: 1px solid var(--hp-line); }
  .hp-cmp-tag { display: block; }
  .hp-cmp-both { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .hp-cmp-row { grid-template-columns: minmax(0, 1fr); }
  .hp-cmp-row .hp-cmp-cell[data-cmp="diy"] { border-right: 0; border-bottom: 1px solid var(--hp-line); }
}

/* ---- 20 · hire a pro ---- */
.hp-pro-copy h2 { margin-bottom: 0; }
.hp-pro-crew { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-mint) 8%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 25%, transparent); color: var(--hp-ink); font-weight: 500; }
.hp-pro-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hp-appr { margin: 0; border-radius: var(--hp-r-xl); background: var(--hp-surface); border: 1px solid var(--hp-line-2); box-shadow: 0 40px 100px -40px rgb(0 0 0 / .7); overflow: hidden; }
.hp-appr-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 55%, var(--hp-surface)); }
.hp-appr-bar b { font: 600 16px/1 var(--hp-display); color: var(--hp-ink); }
.hp-appr-n { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--hp-r-pill); display: grid; place-items: center; background: var(--hp-mint); color: var(--hp-bg); font: 700 13px/1 var(--hp-font); }
.hp-appr-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; }
.hp-appr-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 14px; border-radius: var(--hp-r-lg); background: var(--hp-bg); border: 1px solid var(--hp-line); }
.hp-appr-t { display: grid; gap: 3px; min-width: 0; }
.hp-appr-t i { font: 600 11px/1 var(--hp-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: var(--hp-mint); }
.hp-appr-t b { color: var(--hp-ink); font-weight: 600; font-size: 15px; line-height: 1.35; }
.hp-appr-t small { color: var(--hp-ink-3); font-size: 13px; }
.hp-appr-act { grid-column: 2; display: flex; gap: 8px; }
.hp-appr-act span { padding: 7px 14px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); font-size: 13px; font-weight: 600; color: var(--hp-ink-2); }
.hp-appr-act .ok { background: var(--hp-jade); border-color: var(--hp-jade); color: #fff; }
.hp-appr figcaption { padding: 12px 18px 16px; }
.hp-js .hp-appr-list li { transition: opacity .5s var(--hp-ease), transform .5s var(--hp-ease); transition-delay: calc(var(--d) * 140ms + 200ms); }
.hp-js [data-hp-reveal]:not(.in) .hp-appr-list li { opacity: 0; transform: translateX(18px); }
.hp-appr-list li.is-approved { border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hp-appr-list li.is-approved .ok { background: transparent; color: var(--hp-mint); border-color: var(--hp-mint); }

/* ---- 21 · switch anytime ---- */
.hp-swt { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); counter-reset: swt; }
.hp-swt::before { content: ""; position: absolute; top: 40px; left: 16.6%; right: 16.6%; height: 2px; background: linear-gradient(90deg, var(--hp-jade), var(--hp-mint), var(--hp-jade)); opacity: .55; }
.hp-swt::after { content: ""; position: absolute; top: 35px; left: 16.6%; width: 12px; height: 12px; border-radius: 50%; background: var(--hp-mint); box-shadow: 0 0 16px var(--hp-mint); animation: hp-swt-run 6s var(--hp-ease) infinite; }
@keyframes hp-swt-run { 0%, 8% { left: 16.6%; } 42%, 50% { left: calc(50% - 6px); } 84%, 100% { left: calc(83.4% - 12px); } }
.hp-swt li { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hp-swt-node { width: 80px; height: 80px; border-radius: 24px; display: grid; place-items: center; background: var(--hp-bg); border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow); position: relative; z-index: 1; }
.hp-swt h3 { margin-top: 6px; }
.hp-swt p { color: var(--hp-ink-2); max-width: 22em; }
.hp-swt-same { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hp-swt-same li { padding: 10px 16px; border-radius: var(--hp-r-pill); border: 1px dashed color-mix(in oklab, var(--hp-mint) 40%, transparent); color: var(--hp-ink); font-weight: 500; font-size: 15px; }
@media (max-width: 720px) {
  .hp-swt { grid-template-columns: minmax(0, 1fr); }
  .hp-swt::before { top: 40px; bottom: 40px; left: 39px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--hp-jade), var(--hp-mint), var(--hp-jade)); }
  .hp-swt::after { display: none; }
  .hp-swt li { display: grid; grid-template-columns: 80px minmax(0, 1fr); text-align: left; align-items: center; gap: 4px 16px; }
  .hp-swt-node { grid-row: span 2; }
  .hp-swt h3 { margin: 0; align-self: end; }
  .hp-swt p { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .hp-swt::after { animation: none; left: calc(50% - 6px); } }

/* ---- 22 · setup walkthrough ---- */
.hp-setup-chaps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: ch; }
.hp-setup-chaps li { counter-increment: ch; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--hp-r-pill); font-size: 13px; color: var(--hp-ink-2); background: color-mix(in oklab, var(--hp-ink) 4%, transparent); border: 1px solid var(--hp-line); transition: background .3s, color .3s, border-color .3s; }
.hp-setup-chaps li::before { content: counter(ch); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--hp-mono); background: var(--hp-line); color: var(--hp-ink-2); }
.hp-setup-chaps li.done { color: var(--hp-ink); border-color: color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.hp-setup-chaps li.done::before { background: color-mix(in oklab, var(--hp-mint) 30%, transparent); color: var(--hp-ink); }
.hp-setup-chaps li.cur { color: var(--hp-bg); background: var(--hp-mint); border-color: var(--hp-mint); }
.hp-setup-chaps li.cur::before { background: rgb(0 0 0 / .15); color: var(--hp-bg); }
.hp-setup-field { margin-top: 26px; }
.hp-setup-field .hp-muted { margin-top: 10px; }

.hp-swk { margin: 0; border-radius: var(--hp-r-xl); background: var(--hp-surface); border: 1px solid var(--hp-line-2); box-shadow: 0 40px 100px -40px rgb(0 0 0 / .7); overflow: hidden; }
.hp-swk-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--hp-line); background: color-mix(in oklab, var(--hp-bg) 60%, var(--hp-surface)); }
.hp-swk-url { font: 500 13px/1 var(--hp-mono); color: var(--hp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-swk-prog { height: 3px; background: var(--hp-line); }
.hp-swk-prog-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--hp-jade), var(--hp-mint)); transition: width .6s var(--hp-ease); }
.hp-swk-chap { padding: 14px 20px 0; font: 500 12px/1.4 var(--hp-mono); color: var(--hp-ink-3); }
.hp-swk-chap b { color: var(--hp-mint); }
.hp-swk-body { padding: 12px 20px 20px; display: grid; gap: 12px; }
.hp-swk-lbl { display: block; font-size: 13px; color: var(--hp-ink-3); margin-bottom: 6px; }
.hp-swk-input { display: flex; align-items: center; gap: 2px; min-height: 46px; padding: 0 14px; border-radius: var(--hp-r-md); border: 1px solid var(--hp-mint); background: var(--hp-bg); box-shadow: 0 0 0 3px var(--hp-glow); font: 500 16px/1 var(--hp-font); min-width: 0; overflow: hidden; }
.hp-swk-pre { color: var(--hp-ink-3); font-family: var(--hp-mono); font-size: 14px; }
.hp-swk-input b { font-weight: 500; color: var(--hp-ink); white-space: nowrap; }
.hp-swk-caret { width: 2px; height: 20px; background: var(--hp-mint); animation: hp-blink 1s steps(1) infinite; }
@keyframes hp-blink { 50% { opacity: 0; } }
.hp-swk-found { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hp-ink); font-size: 15px; margin-bottom: 8px; }
.hp-swk-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hp-swk-chips li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--hp-r-md); background: var(--hp-bg); border: 1px solid color-mix(in oklab, var(--hp-mint) 28%, transparent); min-width: 0; transition: opacity .4s var(--hp-ease), transform .4s var(--hp-ease); }
.hp-swk-chips .k { font: 600 11px/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--hp-mint); }
.hp-swk-chips .v { color: var(--hp-ink); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.hp-swk-chips small { color: var(--hp-ink-3); font-size: 12px; }
.hp-swk-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; }
.hp-swk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-swk-rows li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--hp-r-md); background: var(--hp-bg); border: 1px solid var(--hp-line); }
.hp-swk-rows .k { color: var(--hp-ink); font-weight: 600; font-size: 14px; }
.hp-swk-rows .v { color: var(--hp-ink-2); font-size: 13px; text-align: right; }
.hp-swk-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--hp-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2304140e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.hp-swk-done { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--hp-r-lg); background: linear-gradient(120deg, color-mix(in oklab, var(--hp-mint) 18%, var(--hp-bg)), var(--hp-bg)); border: 1px solid color-mix(in oklab, var(--hp-mint) 40%, transparent); color: var(--hp-ink-2); }
.hp-swk-done b { color: var(--hp-ink); }
.hp-swk-step { transition: opacity .45s var(--hp-ease), transform .45s var(--hp-ease); }
/* timeline states set by 40-c.js (no JS = everything shown) */
.hp-swk.is-playing .hp-swk-step:not(.on) { opacity: .18; transform: translateY(4px); }
.hp-swk.is-playing .hp-swk-step:not(.on) .hp-swk-ok { opacity: 0; }
.hp-swk.is-playing .hp-swk-chips li { opacity: 0; transform: scale(.94); }
.hp-swk.is-playing .hp-swk-chips li.on { opacity: 1; transform: none; }
.hp-swk.is-playing .hp-swk-step.cur { opacity: 1; }
@media (max-width: 420px) {
  .hp-swk-chips { grid-template-columns: minmax(0, 1fr); }
  .hp-swk-body { padding: 10px 14px 16px; }
  .hp-swk-rows li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hp-swk-rows .v { grid-column: 2; grid-row: 2; text-align: left; }
  .hp-swk-rows .hp-swk-ok { grid-column: 3; grid-row: 1 / span 2; }
  .hp-swk-rows .hp-ico { grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .hp-swk-caret { animation: none; } }

/* ---- 23 · zero to booked ---- */
.hp-zero-line { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 26px; }
.hp-zero-line::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, var(--hp-mint), color-mix(in oklab, var(--hp-mint) 15%, transparent)); }
.hp-zero-line li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.hp-zero-dot { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--hp-surface); border: 1px solid color-mix(in oklab, var(--hp-mint) 40%, transparent); box-shadow: 0 0 0 6px var(--hp-bg), 0 0 24px -6px var(--hp-glow); }
.hp-zero-when { display: inline-block; font: 700 12px/1 var(--hp-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--hp-mint); margin-bottom: 8px; }
.hp-zero-line h3 { margin-bottom: 6px; }
.hp-zero-line p { color: var(--hp-ink-2); }
.hp-js .hp-zero-line li { transition: opacity .6s var(--hp-ease), transform .6s var(--hp-ease); transition-delay: calc(var(--i) * 180ms + 150ms); }
.hp-js [data-hp-reveal]:not(.in) .hp-zero-line li { opacity: 0; transform: translateY(14px); }
.hp-zero-cap { margin-top: 10px; }
.hp-zero-more { margin-top: 16px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 70%, transparent); }
.hp-zero-more summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 600; color: var(--hp-ink); list-style: none; }
.hp-zero-more summary::-webkit-details-marker { display: none; }
.hp-zero-more summary::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--hp-mint); border-block: 6px solid transparent; transition: transform .2s; }
.hp-zero-more[open] summary::before { transform: rotate(90deg); }
.hp-zero-more .hp-frame { margin: 0 12px 12px; }

/* ---- 24 · trial ticket ---- */
.hp-trial { display: grid; grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr); border-radius: calc(var(--hp-r-xl) + 4px); overflow: hidden; border: 1px solid color-mix(in oklab, var(--hp-mint) 35%, transparent); background: var(--hp-surface); box-shadow: 0 40px 100px -50px var(--hp-glow), var(--hp-shadow); }
.hp-trial-stub { position: relative; padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--hp-mint) 30%, var(--hp-jade-deep)), var(--hp-jade-deep)); border-right: 2px dashed color-mix(in oklab, var(--hp-bg) 55%, transparent); }
.hp-trial-stub .hp-eyebrow { color: color-mix(in oklab, var(--hp-ink) 80%, var(--hp-mint)); margin-bottom: 8px; }
:root[data-theme="light"] .hp-trial-stub .hp-eyebrow, :root[data-theme="light"] .hp-trial-big, :root[data-theme="light"] .hp-trial-free { color: #fff; }
.hp-trial-big { font: 700 clamp(84px, 11vw, 132px)/.9 var(--hp-display); letter-spacing: -0.06em; color: var(--hp-ink); display: flex; align-items: baseline; gap: 8px; }
.hp-trial-big small { font-size: .26em; letter-spacing: 0; font-weight: 600; }
.hp-trial-free { color: color-mix(in oklab, var(--hp-ink) 85%, transparent); font-weight: 500; margin-top: 8px; }
.hp-trial-main { padding: clamp(24px, 3.4vw, 44px); }
.hp-trial-terms { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.hp-trial-terms li { display: flex; gap: 14px; align-items: flex-start; }
.hp-trial-terms span { display: grid; gap: 2px; color: var(--hp-ink-2); font-size: 15px; }
.hp-trial-terms b { color: var(--hp-ink); font-size: 17px; }
.hp-trial-cta { margin-top: 28px; }
@media (max-width: 860px) { .hp-trial { grid-template-columns: minmax(0, 1fr); } .hp-trial-stub { border-right: 0; border-bottom: 2px dashed color-mix(in oklab, var(--hp-bg) 55%, transparent); } }
@media (max-width: 600px) { .hp-trial-terms { grid-template-columns: minmax(0, 1fr); } .hp-trial-cta .hp-btn { width: 100%; white-space: normal; } }

/* ---- 25 · pricing teaser ---- */
.hp-price-lane { display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.hp-price-h { display: flex; gap: 16px; align-items: center; }
.hp-price-h h3 { margin-bottom: 4px; }
.hp-price-lane[data-cmp="pro"] { border-color: color-mix(in oklab, var(--hp-mint) 30%, transparent); background: linear-gradient(160deg, color-mix(in oklab, var(--hp-mint) 9%, var(--hp-bg)), var(--hp-bg) 60%); }
:root[data-path="diy"] .hp-price-lane[data-cmp="diy"], :root[data-path="pro"] .hp-price-lane[data-cmp="pro"] { border-color: var(--hp-mint); box-shadow: 0 0 0 1px var(--hp-mint) inset, var(--hp-shadow); }
.hp-price-more { text-align: center; margin-top: 28px; }
.hp-price-note { text-align: center; margin: 12px auto 0; max-width: 46ch; font-size: 14.5px; }

/* ---- 27 · trades strip ---- */
.hp-trades { padding: clamp(40px, 6vw, 72px) 0; overflow: hidden; }
.hp-tr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hp-tr-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.hp-tr-pause { flex: none; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); background: transparent; color: var(--hp-ink-2); font: 500 14px/1 var(--hp-font); cursor: pointer; }
.hp-tr-pause:hover { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }
.hp-tr { position: relative; max-width: var(--hp-wrap); margin: 0 auto; padding: 0 max(var(--hp-gutter), env(safe-area-inset-left)); }
.hp-tr-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hp-tr-row li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--hp-r-pill); background: var(--hp-surface); border: 1px solid var(--hp-line); font-weight: 600; font-size: 15px; color: var(--hp-ink); white-space: nowrap; }
.hp-tr-mono { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 700 14px/1 var(--hp-display); color: var(--hp-bg); background: linear-gradient(160deg, var(--hp-jade-bright), var(--hp-jade)); box-shadow: 0 4px 8px -2px rgb(0 0 0 / .3), 0 1px 0 rgb(255 255 255 / .35) inset; }
.hp-tr-dup { display: none; }
/* marquee: desktop, motion allowed, JS on (40-c.js adds .is-marquee) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hp-tr.is-marquee { max-width: none; padding: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .hp-tr.is-marquee .hp-tr-track { display: flex; width: max-content; animation: hp-tr-scroll 48s linear infinite; }
  .hp-tr.is-marquee .hp-tr-row { flex-wrap: nowrap; padding-right: 10px; }
  .hp-tr.is-marquee .hp-tr-dup { display: flex; }
  .hp-tr.is-marquee:hover .hp-tr-track, .hp-tr.is-marquee:focus-within .hp-tr-track, .hp-tr.is-paused .hp-tr-track { animation-play-state: paused; }
}
@keyframes hp-tr-scroll { to { transform: translateX(-50%); } }

/* ---- 28 · tour ---- */
.hp-tour { max-width: 1040px; margin: 0 auto; }
/* the native control bar overlays a video's bottom edge, where the tour's burned-in captions sit; the video box is
   one control bar taller than the picture so the controls draw on their own band (polish-1010, QA27) */
.hp-tour .hp-frame-view { aspect-ratio: auto; container-type: inline-size; }
.hp-tour .hp-frame-view > video { display: block; height: calc(100cqi * 9 / 16 + 52px); object-fit: contain; object-position: 50% 0; }
.hp-frame-view:has(> video[controls]) > .hp-lb-btn { top: 12px; bottom: auto; }
.hp-tour .hp-frame { box-shadow: 0 60px 140px -50px var(--hp-glow), 0 40px 100px -40px rgb(0 0 0 / .7); }
.hp-tour.is-cued .hp-frame { outline: 2px solid var(--hp-mint); outline-offset: 4px; }
.hp-tour-tx { margin-top: 18px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 70%, transparent); }
.hp-tour-tx summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 600; color: var(--hp-ink); list-style: none; }
.hp-tour-tx summary::-webkit-details-marker { display: none; }
.hp-tour-tx summary::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--hp-mint); border-block: 6px solid transparent; transition: transform .2s; }
.hp-tour-tx[open] summary::before { transform: rotate(90deg); }
.hp-tour-tx ol { margin: 0; padding: 4px 20px 8px 40px; display: grid; gap: 8px; color: var(--hp-ink-2); }
.hp-tour-tx ol b { color: var(--hp-ink); }
.hp-tour-tx p { padding: 0 20px 16px; }

/* ---- 29 · trust band ---- */
.hp-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.hp-trust li { display: flex; flex-direction: column; gap: 10px; }
.hp-trust h3 { font-size: 20px; margin-top: 4px; }
.hp-trust p { color: var(--hp-ink-2); font-size: 15px; }
@media (max-width: 980px) { .hp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hp-trust { grid-template-columns: minmax(0, 1fr); } .hp-trust li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; } .hp-trust .hp-ico { grid-row: span 2; } .hp-trust h3 { margin: 0; } }

/* ---- 30 · FAQ + final CTA ---- */
.hp-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.hp-faq-q { border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); background: var(--hp-surface); transition: border-color .2s; }
.hp-faq-q[open] { border-color: color-mix(in oklab, var(--hp-mint) 40%, transparent); }
.hp-faq-q summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; }
.hp-faq-q summary::-webkit-details-marker { display: none; }
.hp-faq-q summary h3 { font: 600 clamp(17px, 1.6vw, 19px)/1.35 var(--hp-font); letter-spacing: -0.01em; }
.hp-faq-x { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.hp-faq-x::before, .hp-faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--hp-mint); border-radius: 2px; transition: transform .25s var(--hp-ease); }
.hp-faq-x::after { transform: rotate(90deg); }
.hp-faq-q[open] .hp-faq-x::after { transform: rotate(0deg); }
.hp-faq-q p { padding: 0 20px 18px; color: var(--hp-ink-2); max-width: 46em; }
.hp-final { margin: clamp(64px, 9vw, 112px) auto 0; max-width: 820px; text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(32px, 5vw, 64px) clamp(18px, 4vw, 48px); border-radius: calc(var(--hp-r-xl) + 8px); background: radial-gradient(90% 80% at 50% 0%, color-mix(in oklab, var(--hp-jade) 45%, var(--hp-bg)), var(--hp-bg) 75%); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); box-shadow: 0 60px 140px -60px var(--hp-glow); }
.hp-final-icon { margin-bottom: 18px; }
.hp-final-field { width: 100%; display: flex; justify-content: center; margin-top: 28px; }
.hp-final-sub { margin-top: 14px; color: var(--hp-ink-2); font-weight: 500; }

/* AI web designer callout (QA JQ-BP7AT9G9, owner 2026-10-07) */
.hp-cmp-ai { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin: clamp(20px, 3vw, 32px) 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--hp-r-xl);
  background: linear-gradient(135deg, color-mix(in oklab, var(--hp-jade-deep) 55%, var(--hp-surface)), var(--hp-surface)); border: 1px solid color-mix(in oklab, var(--hp-mint) 35%, transparent); box-shadow: var(--hp-shadow); }
.hp-cmp-ai h3 { margin: 10px 0 8px; }
.hp-cmp-ai p { color: var(--hp-ink-2); max-width: 62ch; }
.hp-cmp-ai-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
.hp-cmp-ai-steps li { counter-increment: s; padding: 12px 14px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-bg) 55%, transparent); border: 1px solid var(--hp-line); color: var(--hp-ink-3); font-size: 14px; }
.hp-cmp-ai-steps li b { display: block; color: var(--hp-ink); font: 600 16px/1.2 var(--hp-display); }
.hp-cmp-ai-steps li b::before { content: counter(s) " · "; color: var(--hp-mint); font-family: var(--hp-mono); font-size: 13px; }
@media (max-width: 760px) { .hp-cmp-ai { grid-template-columns: 1fr; } .hp-cmp-ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* hero C ("/" since 2026-10-08): the longer "Run your whole business on one platform." headline sets smaller */
.hp-hero-c h1 { font-size: clamp(36px, 5vw, 64px); }

/* 50-map.css */
/* element 12 "Find customers" — the real Naperville map (marketing ADR-002 item 4; site/hp_el_map.go, js/50-map.js).
   Colors only through --hp-* (kit aliases in 00-base.css); the WebGL layer reads the same variables at runtime.
   Class prefix: hpm. Dark default; :root[data-theme="light"] reads through the same variables. */

.hpm {
  position: relative; border-radius: var(--hp-r-xl); background: var(--hp-surface);
  border: 1px solid var(--hp-line); box-shadow: var(--hp-shadow); overflow: clip; min-width: 0;
}

/* ── top bar: zoom breadcrumb ─────────────────────────────────────────────── */
.hpm-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--hp-line); }
.hpm-crumbs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hpm-crumbs::-webkit-scrollbar { display: none; }
.hpm-crumbs ol { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.hpm-crumbs li { display: flex; align-items: center; }
.hpm-crumbs li + li::before { content: "›"; color: var(--hp-ink-3); padding: 0 2px; }
.hpm-crumb {
  min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--hp-r-pill); background: transparent;
  color: var(--hp-ink-2); font: 600 13px/1 var(--hp-font); cursor: pointer;
}
.hpm-crumb:hover { color: var(--hp-ink); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }
.hpm-crumb[aria-current="true"] { color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 12%, transparent); }

/* ── the stage ────────────────────────────────────────────────────────────── */
.hpm-stage {
  position: relative; height: clamp(440px, 58vw, 640px); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in oklab, var(--hp-jade-deep) 30%, var(--hp-bg)) 0%, var(--hp-bg) 80%);
}
.hpm-canvas, .hpm-snap { position: absolute; inset: 0; width: 100%; height: 100%; }
.hpm-snap { object-fit: cover; }
.hpm-canvas { display: none; touch-action: pan-y; cursor: grab; outline-offset: -3px; }
.hpm-canvas:active { cursor: grabbing; }
.hpm.is-gl .hpm-canvas { display: block; }
.hpm.is-gl .hpm-snap { visibility: hidden; }
.hpm-loading {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 8px 14px; border-radius: var(--hp-r-pill);
  background: color-mix(in oklab, var(--hp-bg) 80%, transparent); color: var(--hp-ink-2); font: 600 13px/1 var(--hp-mono); display: none;
}
.hpm.is-loading .hpm-loading { display: block; }

.hpm-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hpm-lab {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font: 700 12px/1.1 var(--hp-font); color: var(--hp-ink); text-shadow: 0 1px 3px var(--hp-bg), 0 0 8px var(--hp-bg);
}
.hpm-lab.zip { font: 600 11px/1 var(--hp-mono); color: var(--hp-ink-2); }
.hpm-lab.big { font: 700 15px/1 var(--hp-display); letter-spacing: -.01em; }
.hpm-lab.terr {
  padding: 5px 9px; border-radius: var(--hp-r-pill); background: color-mix(in oklab, var(--hp-bg) 78%, transparent);
  border: 1px solid var(--hp-line-2); text-shadow: none; font-weight: 600;
}
.hpm-lab.terr b { color: var(--hp-mint); }
.hpm-lab.pin { translate: -50% -100%; padding: 4px 8px; border-radius: var(--hp-r-sm); background: var(--hp-mint); color: var(--hp-bg); text-shadow: none; font-size: 11px; }
.hpm-lab.pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--hp-mint); }
.hpm-lab.pin.home { background: var(--hp-amber); color: var(--hp-bg); }
.hpm-lab.pin.home::after { border-top-color: var(--hp-amber); }

/* zoom buttons */
.hpm-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; z-index: var(--hp-z-raise); }
.hpm-zoom button, .hpm-x {
  width: 44px; height: 44px; border-radius: var(--hp-r-md); border: 1px solid var(--hp-line-2); cursor: pointer;
  background: color-mix(in oklab, var(--hp-surface) 88%, transparent); color: var(--hp-ink); font: 600 22px/1 var(--hp-font);
  backdrop-filter: blur(6px);
}
.hpm-zoom button:hover { border-color: var(--hp-mint); color: var(--hp-mint); }
.hpm:not(.is-gl) .hpm-zoom { display: none; }

/* storm alert toast */
.hpm-toast {
  position: absolute; left: 10px; top: 10px; right: 64px; max-width: 440px; z-index: var(--hp-z-raise);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; padding: 10px 10px 10px 12px;
  border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-surface) 92%, transparent); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--hp-amber) 55%, transparent); box-shadow: var(--hp-shadow);
  animation: hpm-in .45s var(--hp-ease) both;
}
.hpm-toast[hidden] { display: none; }
.hpm-toast .hp-ico { width: 28px; height: 28px; margin-top: 2px; }
.hpm-toast p { margin: 0; font-size: 14px; line-height: 1.35; min-width: 0; }
.hpm-toast p b { display: block; color: var(--hp-amber); font-size: 14px; }
.hpm-toast p span { color: var(--hp-ink-2); }
.hpm-toast-go {
  grid-column: 2; justify-self: start; min-height: 44px; padding: 0 16px; border-radius: var(--hp-r-pill); cursor: pointer;
  border: 0; background: var(--hp-amber); color: var(--hp-bg); font: 700 14px/1 var(--hp-font);
}
.hpm-toast .hpm-x { position: absolute; right: -54px; top: 0; }
@keyframes hpm-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

/* homes-in-swath chip */
.hpm-homes {
  position: absolute; left: 10px; bottom: 10px; margin: 0; z-index: var(--hp-z-raise); padding: 9px 14px; border-radius: var(--hp-r-pill);
  background: color-mix(in oklab, var(--hp-danger) 18%, var(--hp-surface)); border: 1px solid color-mix(in oklab, var(--hp-danger) 50%, transparent);
  color: var(--hp-ink); font: 600 13px/1.2 var(--hp-font);
}
.hpm-homes b { font: 700 16px/1 var(--hp-mono); color: var(--hp-ink); }
.hpm-homes[hidden] { display: none; }

/* legend */
.hpm-legend {
  position: absolute; right: 10px; bottom: 10px; z-index: var(--hp-z-raise); max-width: min(260px, calc(100% - 20px));
  display: grid; gap: 8px; pointer-events: none;
}
.hpm-legend:empty { display: none; }
.hpm-leg {
  padding: 8px 10px; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-surface) 90%, transparent);
  border: 1px solid var(--hp-line); backdrop-filter: blur(6px); font: 500 11px/1.3 var(--hp-font); color: var(--hp-ink-2);
}
.hpm-leg h4 { margin: 0 0 6px; font: 700 12px/1.2 var(--hp-font); color: var(--hp-ink); letter-spacing: 0; }
.hpm-leg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.hpm-leg li { display: flex; align-items: center; gap: 6px; }
.hpm-sw { flex: none; width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--hp-line); }
.hpm-sw.ln { height: 0; border: 0; border-top: 2px solid; border-radius: 0; }
.hpm-leg .note { margin-top: 5px; color: var(--hp-ink-3); font-size: 10.5px; }

/* fact card (hover / tap) */
.hpm-card {
  position: absolute; left: 10px; top: 10px; z-index: calc(var(--hp-z-raise) + 1); width: min(300px, calc(100% - 74px));
  max-height: calc(100% - 20px); overflow: auto; padding: 12px 14px; border-radius: var(--hp-r-lg);
  background: color-mix(in oklab, var(--hp-surface) 94%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--hp-line-2); box-shadow: var(--hp-shadow); font-size: 13px; line-height: 1.35;
}
.hpm-card[hidden] { display: none; }
.hpm-card h3 { margin: 0 34px 2px 0; font: 700 15px/1.2 var(--hp-display); }
.hpm-card .sub { margin: 0 0 8px; color: var(--hp-ink-3); font-size: 12px; }
.hpm-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; }
.hpm-card dt { color: var(--hp-ink-2); }
.hpm-card dd { margin: 0; text-align: right; font: 600 13px/1.35 var(--hp-mono); color: var(--hp-ink); }
.hpm-card dd small { display: block; font: 500 10.5px/1.2 var(--hp-font); color: var(--hp-ink-3); }
.hpm-card .hl { color: var(--hp-amber); }
.hpm-card .est { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: var(--hp-r-pill); font: 600 10px/1.3 var(--hp-mono); color: var(--hp-amber); border: 1px solid color-mix(in oklab, var(--hp-amber) 50%, transparent); }
.hpm-card .sq { margin-top: 10px; padding: 8px 10px; border-radius: var(--hp-r-md); background: color-mix(in oklab, var(--hp-mint) 10%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent); }
.hpm-card .sq b { font: 700 20px/1 var(--hp-mono); color: var(--hp-mint); }
.hpm-card .src { margin: 8px 0 0; color: var(--hp-ink-3); font-size: 11px; }
.hpm-card .hpm-x { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; font-size: 20px; }
.hpm-card .go { margin-top: 10px; min-height: 44px; width: 100%; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-mint); background: transparent; color: var(--hp-mint); font: 600 13px/1 var(--hp-font); cursor: pointer; }

/* ── layer panel ──────────────────────────────────────────────────────────── */
.hpm-panel { padding: 12px 12px 4px; border-top: 1px solid var(--hp-line); }
.hpm-groups { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.hpm-groups::-webkit-scrollbar { display: none; }
.hpm-groups [role="tab"] {
  flex: none; min-height: 44px; padding: 0 14px; border-radius: var(--hp-r-pill); border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--hp-ink-2); font: 600 14px/1 var(--hp-font);
}
.hpm-groups [role="tab"][aria-selected="true"] { color: var(--hp-ink); border-color: var(--hp-line-2); background: color-mix(in oklab, var(--hp-ink) 6%, transparent); }
.hpm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hpm-chips[hidden] { display: none; }
.hpm-chip {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--hp-r-pill); cursor: pointer;
  border: 1px solid var(--hp-line-2); background: transparent; color: var(--hp-ink-2); font: 600 13px/1.1 var(--hp-font); text-align: left;
}
.hpm-chip:hover { color: var(--hp-ink); border-color: color-mix(in oklab, var(--hp-mint) 50%, transparent); }
.hpm-chip-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.hpm-chip[aria-pressed="true"] { color: var(--hp-ink); border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent); }
.hpm-chip[aria-pressed="true"] .hpm-chip-dot { background: var(--hp-mint); border-color: var(--hp-mint); }
.hpm-run { border-style: dashed; color: var(--hp-mint); }
.hpm-run .hpm-chip-dot { display: none; }

.hpm-season { flex: 1 1 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--hp-line); }
.hpm-season label { grid-column: 1; font: 600 13px/1.2 var(--hp-font); color: var(--hp-ink-2); }
.hpm-season label span { color: var(--hp-ink); font-family: var(--hp-mono); }
.hpm-season-row { grid-column: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hpm-season input[type="range"] { flex: 1; min-width: 0; height: 44px; accent-color: var(--hp-amber); }
.hpm-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hp-line-2); background: transparent; color: var(--hp-amber); font-size: 16px; cursor: pointer; }
.hpm-spark { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: center; }
.hpm-spark svg { display: block; overflow: visible; }
.hpm-spark rect { fill: var(--hp-amber); opacity: .9; }
.hpm-spark text { fill: var(--hp-ink-3); font: 600 9px var(--hp-mono); text-anchor: middle; }
.hpm-spark figcaption { font: 500 11px/1.2 var(--hp-font); color: var(--hp-ink-3); margin-top: 2px; }

.hpm-badge { margin: 10px 2px 6px; min-height: 1.3em; font: 500 12px/1.4 var(--hp-font); color: var(--hp-ink-3); }
.hpm-badge b { color: var(--hp-ink-2); font-weight: 600; }
.hpm-badge .thru { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--hp-r-pill); font: 600 11px/1.5 var(--hp-mono); color: var(--hp-mint); border: 1px solid color-mix(in oklab, var(--hp-mint) 35%, transparent); }
.hpm-attr { margin: 0; padding: 8px 14px 12px; font: 500 11px/1.45 var(--hp-font); color: var(--hp-ink-3); border-top: 1px solid var(--hp-line); }

/* without JS (or WebGL2) the layer panel cannot do anything: show the facts instead */
html:not(.hp-js) .hpm-panel, .hpm.no-gl .hpm-panel { display: none; }

/* ── facts table (fallback + screen readers) ──────────────────────────────── */
.hpm-facts { border-top: 1px solid var(--hp-line); }
.hpm-facts summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font: 600 14px/1.2 var(--hp-font); color: var(--hp-ink-2); }
.hpm-facts summary:hover { color: var(--hp-ink); }
html:not(.hp-js) .hpm-facts, .hpm.no-gl .hpm-facts { border-top-color: var(--hp-line-2); }
.hpm-facts-body { padding: 0 14px 14px; overflow-x: auto; }
.hpm-facts table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hpm-facts caption { text-align: left; color: var(--hp-ink-3); font-size: 12px; padding-bottom: 6px; }
.hpm-facts th, .hpm-facts td { text-align: left; vertical-align: top; padding: 7px 8px 7px 0; border-top: 1px solid var(--hp-line); }
.hpm-facts th { font-weight: 500; color: var(--hp-ink-2); }
.hpm-facts td { font-family: var(--hp-mono); color: var(--hp-ink); }
.hpm-facts td.hpm-src { font: 400 12px/1.35 var(--hp-font); color: var(--hp-ink-3); }

@media (max-width: 760px) {
  .hpm-stage { height: 480px; }
  .hpm-card { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 64%; }
  .hpm-toast { right: 60px; left: 8px; max-width: none; padding-right: 44px; }
  .hpm-toast .hpm-x { right: 2px; top: 2px; width: 40px; height: 40px; }
  .hpm-zoom { top: 8px; right: 8px; }
  .hpm-legend { max-width: calc(100% - 16px); }
  .hpm-homes:not([hidden]) ~ .hpm-legend { bottom: 52px; }
  .hpm-legend { right: 8px; bottom: 8px; max-width: 58%; }
  .hpm-homes { left: 8px; bottom: 8px; max-width: 40%; font-size: 12px; }
  .hpm-season { grid-template-columns: 1fr; }
  .hpm-spark { grid-column: 1; grid-row: auto; justify-self: start; display: flex; align-items: center; gap: 10px; }
  .hpm-facts tr { display: grid; grid-template-columns: 1fr; padding: 6px 0; border-top: 1px solid var(--hp-line); }
  .hpm-facts th, .hpm-facts td { border: 0; padding: 1px 0; }
}
@media (max-width: 420px) {
  .hpm-leg { padding: 6px 8px; }
  .hpm-leg ul { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .hpm-toast { animation: none; }
}
.hpm-lab.pin.home { pointer-events: auto; cursor: pointer; }

/* 60-cost.css */
/* hp — the operations-first cost calculator (site/hp_el_cost.go, js/60-cost.js; jadeqa JQ-9S3F924M).
   Class prefix hpx. Every color reads through the --hp-* aliases, so the light theme (#27) follows the kit. */

.hpx { --hpx-gap: clamp(20px, 3vw, 44px); --hpx-bad: color-mix(in oklab, var(--hp-danger) 72%, var(--hp-ink)); }
.hpx-k { display: block; font: 600 12px/1.2 var(--hp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hp-ink-3); }
.hpx-hint { margin: 6px 0 0; font: 500 12px/1.4 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-fine { margin: 8px 0 0; font: 500 11.5px/1.4 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-link { padding: 0; border: 0; background: none; color: var(--hp-mint); font: 600 14px/1.4 var(--hp-font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.hpx-link:hover { color: var(--hp-ink); }

/* ---- controls ---- */
.hpx-ctl {
  display: grid; gap: 16px 24px; margin-bottom: var(--hpx-gap); padding: clamp(14px, 2vw, 22px);
  border-radius: var(--hp-r-xl); background: var(--hp-surface); border: 1px solid var(--hp-line-2);
}
.hpx-trade-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hpx-trade, .hpx-seg button {
  min-height: 44px; padding: 8px 14px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); background: var(--hp-bg);
  color: var(--hp-ink-2); font: 600 14px/1.2 var(--hp-font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s, border-color .18s, color .18s;
}
.hpx-trade:hover, .hpx-seg button:hover { border-color: color-mix(in oklab, var(--hp-mint) 50%, transparent); color: var(--hp-ink); }
.hpx-trade[aria-pressed="true"], .hpx-seg button[aria-pressed="true"] { background: color-mix(in oklab, var(--hp-mint) 16%, var(--hp-surface)); border-color: var(--hp-mint); color: var(--hp-ink); }
.hpx-nums { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; }
.hpx-num { min-width: 0; flex: 1 1 200px; max-width: 320px; }
.hpx-step { display: inline-flex; align-items: stretch; margin-top: 8px; border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-md); overflow: hidden; background: var(--hp-bg); }
.hpx-step input {
  width: 6ch; min-width: 0; min-height: 44px; padding: 0 6px; border: 0; margin: 0; background: transparent; color: var(--hp-ink);
  font: 700 18px/1 var(--hp-display); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.hpx-step input::-webkit-inner-spin-button, .hpx-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hpx-step input:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: -2px; }
.hpx-stepbtn {
  display: none; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; margin: 0; cursor: pointer;
  background: var(--hp-surface-2); color: var(--hp-ink); font: 600 22px/1 var(--hp-font); -webkit-tap-highlight-color: transparent;
}
.hp-js .hpx-stepbtn { display: grid; }
.hpx-stepbtn:hover { background: color-mix(in oklab, var(--hp-mint) 16%, var(--hp-surface-2)); }
.hpx-stepbtn:focus-visible { outline: 2px solid var(--hp-mint); outline-offset: -2px; }
.hpx-stepbtn:disabled { opacity: .4; cursor: default; }
.hpx-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hpx-size { margin: -6px 0 0; }
.hpx-period { flex: 0 1 auto; }
html:not(.hp-js) .hpx-trades, html:not(.hp-js) .hpx-period, html:not(.hp-js) .hpx-size, html:not(.hp-js) .hpx-mode,
html:not(.hp-js) .hpx-acts, html:not(.hp-js) .hpx-custom, html:not(.hp-js) .hpx-viz, html:not(.hp-js) .hpx-swap,
html:not(.hp-js) .hpx-stack-btn { display: none; }

/* ---- the two columns ---- */
.hpx-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--hpx-gap); align-items: start; }
@media (max-width: 1023px) { .hpx-grid { grid-template-columns: minmax(0, 1fr); } }
.hpx-pick { min-width: 0; display: grid; gap: 22px; }

.hpx-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.hpx-group legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0; margin-bottom: 12px; width: 100%; }
.hpx-gh { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1.2 var(--hp-display); letter-spacing: -.02em; color: var(--hp-ink); }
.hpx-gh .hp-ico { width: 24px; height: 24px; }
.hpx-gs { font: 500 13px/1.35 var(--hp-font); color: var(--hp-ink-3); }
.hpx-mode { margin: 0 0 12px; }
.hpx-mode-note {
  margin: 0 0 12px; padding: 12px 14px; border-radius: var(--hp-r-lg); font-size: 14px; line-height: 1.5; color: var(--hp-ink-2);
  background: color-mix(in oklab, var(--hp-mint) 9%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 30%, transparent);
}
.hpx[data-mode="pro"] [data-cost-mktcards] { display: none; }

/* cards: equal columns, every card spans four subgrid rows so prices and bases line up across a row */
.hpx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 10px; align-items: stretch; }
.hpx-card {
  position: relative; min-width: 0; display: grid; grid-template-rows: 1fr auto; border-radius: var(--hp-r-lg);
  background: var(--hp-surface); border: 1px solid var(--hp-line-2); transition: border-color .18s, background .18s;
}
.hpx-card-main {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 22px; column-gap: 10px; row-gap: 5px; align-content: start;
  padding: 12px 12px 6px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hpx-card-main input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: var(--hp-z-raise); }
.hpx-ico { grid-column: 1; grid-row: 1; width: 28px; height: 28px; }
.hpx-ico .hp-ico { width: 28px; height: 28px; }
.hpx-name { grid-column: 2; grid-row: 1; padding-top: 4px; font: 600 15px/1.25 var(--hp-font); color: var(--hp-ink); overflow-wrap: anywhere; }
.hpx-check { grid-column: 3; grid-row: 1; margin-top: 3px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--hp-line-2); transition: background .18s, border-color .18s; }
.hpx-range { grid-column: 2 / 4; font: 700 15px/1.25 var(--hp-display); color: var(--hp-ink-2); font-variant-numeric: tabular-nums; }
.hpx-basis { grid-column: 2 / 4; font: 500 12px/1.35 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-src { grid-column: 2 / 4; font: 500 10.5px/1.3 var(--hp-mono); letter-spacing: .04em; color: color-mix(in oklab, var(--hp-ink-3) 80%, transparent); }
.hpx-card[data-who="pro"] .hpx-name::after, .hpx-card[data-who="diy"] .hpx-name::after {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--hp-r-pill); vertical-align: 2px;
  font: 600 10px/1.5 var(--hp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-ink-3); border: 1px solid var(--hp-line-2);
}
.hpx-card[data-who="pro"] .hpx-name::after { content: "pro fee"; }
.hpx-card[data-who="diy"] .hpx-name::after { content: "diy tool"; }
.hpx-card:hover { border-color: color-mix(in oklab, var(--hp-mint) 45%, transparent); }
.hpx-card:has(input:checked) { border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 9%, var(--hp-surface)); }
.hpx-card input:checked ~ .hpx-range { color: var(--hp-ink); }
.hpx-card input:checked ~ .hpx-check, .hpx-chip:has(input:checked)::after {
  border-color: var(--hp-mint);
  background: var(--hp-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2304140e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.hpx-card:has(input:focus-visible) { outline: 2px solid var(--hp-mint); outline-offset: 3px; }
/* #8 what replaces it: shown on hover (pointer devices) or pinned with the button (touch, keyboard) */
.hpx-swap {
  position: relative; z-index: var(--hp-z-raise); justify-self: start; margin: 0 8px 8px 46px; min-height: 32px; padding: 4px 10px;
  border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2); background: transparent; color: var(--hp-ink-2);
  font: 600 12px/1.2 var(--hp-font); cursor: pointer; text-align: left;
}
.hpx-swap::after { content: ""; position: absolute; inset: -6px -4px; }
.hpx-swap:hover, .hpx-card.open .hpx-swap { color: var(--hp-ink); border-color: var(--hp-mint); }
/* an overlay, never inline: a hover that grew the card would shift the grid under the pointer */
.hpx-repl {
  display: none; position: absolute; left: 8px; right: 8px; top: calc(100% - 6px); z-index: var(--hp-z-raise); margin: 0; padding: 10px 12px;
  border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-mint); box-shadow: var(--hp-shadow);
  font-size: 13px; line-height: 1.45; color: var(--hp-ink-2);
}
.hpx-card:hover, .hpx-card.open, .hpx-card:focus-within { z-index: calc(var(--hp-z-raise) + 1); }
.hpx-repl a { font-weight: 600; white-space: nowrap; }
.hpx-card.open .hpx-repl { display: block; }
@media (hover: hover) { .hpx-card:hover .hpx-repl { display: block; } }
html:not(.hp-js) .hpx-repl { display: block; position: static; margin: 0 12px 12px; border: 0; box-shadow: none; padding: 0; background: none; }

.hpx-free legend { margin-bottom: 10px; }
.hpx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hpx-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 38px 6px 10px; border-radius: var(--hp-r-pill);
  background: var(--hp-surface); border: 1px solid var(--hp-line-2); font: 600 14px/1.2 var(--hp-font); color: var(--hp-ink-2); cursor: pointer;
}
.hpx-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hpx-chip .hp-ico { width: 20px; height: 20px; }
.hpx-chip::after { content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 6px; border: 1.5px solid var(--hp-line-2); }
.hpx-chip:has(input:checked) { border-color: var(--hp-mint); color: var(--hp-ink); }
.hpx-chip:has(input:focus-visible) { outline: 2px solid var(--hp-mint); outline-offset: 3px; }

.hpx-custom { padding: 14px; border-radius: var(--hp-r-lg); border: 1px dashed var(--hp-line-2); }
.hpx-cu-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hpx-cu-row input {
  min-height: 44px; min-width: 0; padding: 0 12px; border-radius: var(--hp-r-md); border: 1px solid var(--hp-line-2); background: var(--hp-bg);
  color: var(--hp-ink); font: 500 16px/1 var(--hp-font);
}
#hpx-cu-name { flex: 2 1 180px; }
.hpx-cu-cost { flex: 1 1 120px; display: inline-flex; align-items: center; gap: 6px; color: var(--hp-ink-3); }
.hpx-cu-cost input { width: 100%; -moz-appearance: textfield; appearance: textfield; }
.hpx-cu-row .hp-btn { min-height: 44px; }
.hpx-cu-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hpx-cu-list li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); min-width: 0; }
.hpx-cu-list b { min-width: 0; overflow-wrap: anywhere; }
.hpx-cu-list span { margin-left: auto; font: 500 12px/1.3 var(--hp-mono); color: var(--hp-ink-3); text-align: right; }
.hpx-cu-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--hp-r-md); background: transparent; color: var(--hp-ink-2); font-size: 22px; cursor: pointer; }
.hpx-cu-x:hover { background: var(--hp-surface-2); color: var(--hp-ink); }

/* ---- the sticky read-out ---- */
.hpx-out { position: sticky; top: calc(var(--hp-nav-h) + 16px); min-width: 0; }
@media (max-width: 1023px) { .hpx-out { position: static; } }
.hpx-panel { background: var(--hp-surface); border: 1px solid var(--hp-line-2); border-radius: var(--hp-r-xl); padding: clamp(16px, 2vw, 24px); box-shadow: var(--hp-shadow); }
.hpx-panel h3 { font-size: clamp(19px, 1.8vw, 22px); }
.hpx-vs { font: 600 13px/1 var(--hp-mono); color: var(--hp-ink-3); text-transform: uppercase; letter-spacing: .08em; }
.hpx-who { margin: 6px 0 12px; font: 600 12px/1.3 var(--hp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-ink-3); }

/* #6 the stack */
.hpx-stack {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin-bottom: 14px;
  padding: 12px; border-radius: var(--hp-r-lg); background: color-mix(in oklab, var(--hp-bg) 70%, var(--hp-surface)); border: 1px solid var(--hp-line);
}
.hpx-stack-pile { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; min-width: 0; }
.hpx-tile {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--hp-surface-2); border: 1px solid var(--hp-line);
  transition: transform .7s var(--hp-ease), opacity .6s var(--hp-ease); transition-delay: calc(var(--i, 0) * 40ms);
}
.hpx-tile .hp-ico { width: 22px; height: 22px; }
.hpx-stack.collapsed .hpx-tile[data-r="rep"] { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.2); opacity: 0; }
.hpx-stack.collapsed .hpx-tile[data-r="keep"] { border-color: color-mix(in oklab, var(--hp-amber) 55%, transparent); }
.hpx-stack-app { grid-column: 2; grid-row: 1; display: grid; transition: transform .5s var(--hp-ease-back); }
.hpx-stack-app img { width: 52px; height: 52px; }
.hpx-stack.collapsed .hpx-stack-app { transform: scale(1.12); }
.hpx-stack-btn {
  grid-column: 1 / -1; justify-self: start; min-height: 40px; padding: 6px 12px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-line-2);
  background: transparent; color: var(--hp-ink); font: 600 13px/1.2 var(--hp-font); cursor: pointer;
}
.hpx-stack-btn:hover { border-color: var(--hp-mint); }
@media (prefers-reduced-motion: reduce) { .hpx-tile, .hpx-stack-app { transition: none; } }

.hpx-cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hpx-cmp th, .hpx-cmp td { padding: 9px 8px; border-bottom: 1px solid var(--hp-line); text-align: right; vertical-align: baseline; }
.hpx-cmp thead th { font: 600 11.5px/1.2 var(--hp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hp-ink-3); }
.hpx-cmp tbody th { text-align: left; font: 500 14px/1.3 var(--hp-font); color: var(--hp-ink-2); }
.hpx-cmp tbody th small { display: block; font: 500 11px/1.2 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-cmp td { font: 700 18px/1.1 var(--hp-display); color: var(--hp-ink); white-space: nowrap; }
.hpx-cmp td + td { color: var(--hp-mint); }
.hpx-cmp tr.warn td:first-of-type { color: var(--hpx-bad); }
.hpx-cmp td:first-of-type { padding-left: 4px; }

.hpx-spend { margin-top: 16px; }
.hpx-spend-k { margin: 0; font: 500 14px/1.3 var(--hp-font); color: var(--hp-ink-2); }
.hpx-spend-v { margin: 4px 0 10px; font: 700 clamp(26px, 3vw, 36px)/1.05 var(--hp-display); letter-spacing: -.03em; color: var(--hp-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hpx-bar { position: relative; height: 12px; border-radius: 6px; background: color-mix(in oklab, var(--hp-ink) 8%, transparent); overflow: hidden; }
.hpx-bar-fill, .hpx-bar-rep { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 100%); width: calc((var(--hi) - var(--lo)) * 100%); transition: left .4s var(--hp-ease), width .4s var(--hp-ease); }
.hpx-bar-fill { border-radius: 6px; background: linear-gradient(90deg, color-mix(in oklab, var(--hp-amber) 70%, transparent), var(--hpx-bad)); }
.hpx-bar-rep { top: 3px; bottom: 3px; border-radius: 4px; background: var(--hp-mint); }
@media (prefers-reduced-motion: reduce) { .hpx-bar-fill, .hpx-bar-rep { transition: none; } }
.hpx-bar-k { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font: 500 11.5px/1.3 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; vertical-align: 0; }
.hpx-dot.today { background: var(--hpx-bad); }
.hpx-dot.rep { background: var(--hp-mint); }
.hpx-rep { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--hp-ink-2); }
.hpx-rep b, .hpx-line b { color: var(--hp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hpx-line { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--hp-ink-2); }
.hpx-note { margin: 12px 0 0; font: 500 11.5px/1.45 var(--hp-mono); color: var(--hp-ink-3); }

.hpx-drawer { margin-top: 14px; border-top: 1px solid var(--hp-line); }
.hpx-drawer summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 600 14px/1.2 var(--hp-font); color: var(--hp-ink); }
.hpx-drawer summary::marker { color: var(--hp-mint); }
.hpx-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.hpx-items th, .hpx-items td { padding: 7px 4px; border-bottom: 1px solid var(--hp-line); text-align: left; vertical-align: top; }
.hpx-items thead th { font: 600 11px/1.2 var(--hp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-ink-3); }
.hpx-items tbody th { font-weight: 600; color: var(--hp-ink); }
.hpx-items tbody th small { display: block; font: 500 11px/1.35 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-items td { color: var(--hp-ink-2); font-variant-numeric: tabular-nums; }
.hpx-items td:nth-child(2) { white-space: nowrap; }

.hpx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hpx-act {
  min-height: 44px; padding: 8px 12px; border-radius: var(--hp-r-md); border: 1px solid var(--hp-line-2); background: transparent;
  color: var(--hp-ink); font: 600 13px/1.2 var(--hp-font); cursor: pointer;
}
.hpx-act:hover { border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 8%, transparent); }
.hpx-share-msg { margin: 6px 0 0; min-height: 1em; font: 500 12px/1.4 var(--hp-mono); color: var(--hp-ink-3); overflow-wrap: anywhere; }
.hpx-cta { margin-top: 14px; }
.hpx-cta .hp-btn { width: 100%; }
.hpx.empty .hpx-cmp td, .hpx.empty .hpx-spend-v { color: var(--hp-ink-3); }

/* ---- #7 hand-offs and #20 the crew's phone ---- */
.hpx-viz { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--hpx-gap); margin-top: var(--hpx-gap); }
@media (max-width: 860px) { .hpx-viz { grid-template-columns: minmax(0, 1fr); } }
.hpx-leak, .hpx-phone { margin: 0; min-width: 0; padding: clamp(14px, 2vw, 22px); border-radius: var(--hp-r-xl); background: var(--hp-surface); border: 1px solid var(--hp-line-2); }
.hpx-leak figcaption, .hpx-phone figcaption { display: grid; gap: 4px; }
.hpx-leak figcaption b, .hpx-phone figcaption b { font: 700 18px/1.2 var(--hp-display); color: var(--hp-ink); }
.hpx-leak figcaption span, .hpx-phone figcaption span { font-size: 14px; color: var(--hp-ink-2); }
.hpx-leak-svg { width: 100%; height: auto; max-height: 320px; margin-top: 8px; }
.hpx-leak-svg .lk-gap { stroke: var(--hpx-bad); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .75; }
.hpx-leak-svg .lk-node { fill: var(--hp-surface-2); stroke: var(--hp-line-2); }
.hpx-leak-svg .lk-hub { fill: color-mix(in oklab, var(--hp-mint) 18%, var(--hp-surface)); stroke: var(--hp-mint); stroke-width: 2; }
.hpx-leak-svg .lk-lbl { fill: var(--hp-ink-2); font: 600 13px var(--hp-font); }
.hpx-leak-n { margin: 4px 0 0; color: var(--hp-ink-2); font-size: 14px; }
.hpx-leak-n b { font: 700 28px/1 var(--hp-display); color: var(--hpx-bad); margin-right: 4px; vertical-align: -3px; }

.hpx-ph { display: grid; place-items: center; margin-top: 14px; }
.hpx-ph-screen {
  position: relative; width: min(100%, 230px); aspect-ratio: 9 / 15; padding: 34px 14px 16px; border-radius: 30px;
  background: linear-gradient(170deg, color-mix(in oklab, var(--hp-jade-deep) 70%, #000), #04110c); border: 6px solid color-mix(in oklab, var(--hp-ink) 22%, #111);
  box-shadow: var(--hp-shadow); overflow: hidden;
}
.hpx-ph-notch { position: absolute; top: 8px; left: 50%; width: 64px; height: 16px; margin-left: -32px; border-radius: 10px; background: #000; }
.hpx-ph-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; align-content: start; }
.hpx-ph-apps li { display: grid; justify-items: center; gap: 4px; min-width: 0; animation: hpx-pop .35s var(--hp-ease-back) both; }
.hpx-ph-apps li img { width: 40px; height: 40px; padding: 4px; border-radius: 11px; background: rgb(255 255 255 / .09); }
.hpx-ph-apps li .hp-appicon { padding: 0; background: none; }
.hpx-ph-apps li span { max-width: 100%; font: 500 10px/1.2 var(--hp-font); color: #e8fff6; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpx-ph-apps li.none { grid-column: 1 / -1; color: #e8fff6; font-size: 12px; }
@keyframes hpx-pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hpx-ph-apps li { animation: none; } }

/* ---- #14 the summary bar on phones and tablets (replaces the page's sticky CTA while it shows) ---- */
.hpx-mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hp-z-sticky); display: flex; align-items: center; gap: 12px;
  min-height: var(--hp-sticky-h); padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in oklab, var(--hp-surface) 94%, transparent); border-top: 1px solid var(--hp-line-2); backdrop-filter: blur(10px);
  transition: transform .25s var(--hp-ease);
}
.hpx-mbar[hidden] { display: flex; transform: translateY(110%); visibility: hidden; }
.hpx-mbar-t { display: grid; min-width: 0; }
.hpx-mbar-t b { font: 700 17px/1.1 var(--hp-display); color: var(--hp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpx-mbar-t small { font: 500 11px/1.2 var(--hp-mono); color: var(--hp-ink-3); }
.hpx-mbar-n { font-size: 13px; color: var(--hp-ink-2); white-space: nowrap; }
.hpx-mbar-n b { color: var(--hp-ink); }
.hpx-mbar-go { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--hp-r-pill); border: 1px solid var(--hp-mint); font-weight: 600; white-space: nowrap; }
html.hpx-bar-on .hp-sticky { transform: translateY(110%); visibility: hidden; }
@media (min-width: 1024px) { .hpx-mbar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hpx-mbar { transition: none; } }

/* ---- #30 mini FAQ ---- */
.hpx-faq { margin-top: var(--hpx-gap); max-width: 820px; }
.hpx-faq h3 { font-size: 20px; margin-bottom: 8px; }
.hpx-q { border-bottom: 1px solid var(--hp-line); }
.hpx-q summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font: 600 16px/1.3 var(--hp-font); color: var(--hp-ink); }
.hpx-q summary::marker { color: var(--hp-mint); }
.hpx-q p { margin: 0 0 14px; color: var(--hp-ink-2); font-size: 15px; line-height: 1.55; }

/* ---- #28 the compact variant: phones up to ~400px ---- */
@media (max-width: 420px) {
  .hpx-ctl { padding: 12px; }
  .hpx-trade, .hpx-seg button { padding: 8px 11px; font-size: 13px; }
  .hpx-num { flex-basis: 100%; }
  .hpx-cards { gap: 8px; }
  .hpx-card-main { grid-template-columns: 24px minmax(0, 1fr) 20px; padding: 10px 10px 4px 12px; }
  .hpx-ico, .hpx-ico .hp-ico { width: 24px; height: 24px; }
  .hpx-name { font-size: 14px; padding-top: 2px; }
  .hpx-basis, .hpx-src { display: none; }
  .hpx-swap { margin-left: 46px; }
  .hpx-cmp th, .hpx-cmp td { padding: 8px 4px; }
  .hpx-cmp tbody th { font-size: 13px; }
  .hpx-cmp td { font-size: 16px; }
  .hpx-mbar-n { display: none; }
  .hpx-items td:nth-child(2) { white-space: normal; }
}

/* ---- #12 print / save as PDF: the calculator alone, its line items open ---- */
@media print {
  html.hpx-printing body > *:not(main), html.hpx-printing main > *:not(#hp-cost), html.hpx-printing .hpx-mbar { display: none !important; }
  html.hpx-printing .hpx-ctl .hpx-trades, html.hpx-printing .hpx-size, html.hpx-printing .hpx-stepbtn, html.hpx-printing .hpx-period,
  html.hpx-printing .hpx-mode, html.hpx-printing .hpx-custom .hpx-cu-row, html.hpx-printing .hpx-acts, html.hpx-printing .hpx-cta,
  html.hpx-printing .hpx-viz, html.hpx-printing .hpx-stack, html.hpx-printing .hpx-swap, html.hpx-printing .hpx-repl,
  html.hpx-printing .hpx-faq, html.hpx-printing .hpx-card:not(:has(input:checked)), html.hpx-printing .hpx-chip:not(:has(input:checked)) { display: none !important; }
  html.hpx-printing .hpx-free:not(:has(input:checked)), html.hpx-printing .hpx-custom:not(:has(li)), html.hpx-printing .hpx-custom .hpx-hint { display: none !important; }
  html.hpx-printing { background: #fff; color: #000; }
  /* print the end state: the switch to the light theme starts color transitions, and a print snapshot taken mid-
     transition shows light text on paper (page.printToPDF captured three blank pages that way) */
  html.hpx-printing *, html.hpx-printing *::before, html.hpx-printing *::after { transition: none !important; animation: none !important; }
  html.hpx-printing #hp-cost { padding: 0; }
  html.hpx-printing .hpx-grid { grid-template-columns: 1fr; }
  html.hpx-printing .hpx-out { position: static; }
  html.hpx-printing .hpx-panel, html.hpx-printing .hpx-card, html.hpx-printing .hpx-ctl { box-shadow: none; break-inside: avoid; }
  /* the read-out panel is taller than what is left of page 2, so "avoid" pushed all of it to page 3 and left page 2
     nearly blank (board #21, prod verify 2026-10-08): let the panel itself break, keep its rows and tables whole */
  html.hpx-printing .hpx-out, html.hpx-printing .hpx-out .hpx-panel { break-inside: auto; }
  html.hpx-printing .hpx-out tr, html.hpx-printing .hpx-cmp, html.hpx-printing .hpx-out h3 { break-inside: avoid; }
  html.hpx-printing #hp-cost .hp-sec-head::after { content: "hellojade.ai — typical market ranges, not quotes and not hellojade’s price"; display: block; margin-top: 8px; font: 500 11px var(--hp-mono); }
}