/* 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;
}


/* 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; } }


/* 10-bridge.css */
/* hp page bridge — the kept v1 pages (/contact /subscriptions… /terms… /privacy…) inside the hp shell
   (site/hp_page.go, prodfix4-1009). Loaded after /site.css as the tail of /hp/page.css, behind 00-base.css (the hp
   tokens) and 00s-shell.css (the header, menu and footer).

   The v1 body keeps its own layout and components. What changes is the look: the v1 design tokens are pointed at
   the hellojade kit ones the homepage uses, so every v1 component that reads var(--ground), var(--ink),
   var(--jade) or the v1 font stacks takes the homepage's colors and type with no per-component override.
   No new hex values here — the kit and 00-base.css own every color. */

:root.hp-page {
  --ground: var(--hp-bg);
  --surface: var(--hp-surface);
  --surface-2: var(--hp-surface-2);
  --surface-3: color-mix(in oklab, var(--hp-surface) 70%, var(--hp-ink) 10%);
  --line: var(--hp-line-2);
  --line-2: color-mix(in oklab, var(--hp-ink) 32%, transparent);
  --ink: var(--hp-ink);
  --ink-soft: var(--hp-ink-2);
  --ink-faint: var(--hp-ink-3);
  --jade: var(--hp-mint);
  --jade-bright: var(--hp-jade-bright);
  --jade-deep: var(--hp-jade);
  --ff-sans: var(--hp-font);
  --ff-serif: var(--hp-display);
  --ff-mono: var(--hp-mono);
  --nav-h: var(--hp-nav-h);
}

.hp-page body { font-family: var(--hp-font); background: var(--hp-bg); color: var(--hp-ink); letter-spacing: -0.005em; }

/* v1 headings were a serif display face; the homepage sets every heading in the display sans */
.hp-page main :is(h1, h2, h3, h4) { font-family: var(--hp-display); letter-spacing: -0.025em; }

/* the hp header is sticky (in flow), not the v1 fixed bar: nothing in the v1 body reserves space for it */
.hp-page .hp-nav { position: sticky; }

/* the cookie-preferences button in the footer row (only when the marketing site runs analytics) */
.hp-foot-btn { color: var(--hp-ink-2); padding: 12px 10px; min-height: 44px; display: inline-flex; align-items: center;
  background: none; border: 0; font: inherit; cursor: pointer; }
.hp-foot-btn:hover { color: var(--hp-ink); text-decoration: underline; text-underline-offset: 3px; }

/* 20-contact.css */
/* /contact — the callback request (site/contact_form.go, marketing #31). Part of /hp/page.css, after the bridge.
   Every color comes from the hp tokens in 00-base.css (which name kit values); no new hex here.
   Mobile first: one column; the copy and the form sit side by side from 1024px. */

.hpc { padding: clamp(28px, 6vw, 72px) 0 clamp(56px, 8vw, 104px); }
.hpc-wrap { max-width: var(--hp-wrap); margin: 0 auto; padding: 0 var(--hp-gutter); display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) {
  .hpc-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .hpc-copy { position: sticky; top: calc(var(--hp-nav-h) + 24px); }
}

.hpc-eyebrow { margin: 0 0 12px; font: 600 13px/1.2 var(--hp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--hp-mint); }
.hpc-h1 { margin: 0 0 16px; font: 700 clamp(2rem, 5vw, 3.1rem)/1.06 var(--hp-display); letter-spacing: -0.03em; color: var(--hp-ink); }
.hpc-lede { margin: 0 0 24px; font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--hp-ink-2); max-width: 36rem; }
.hpc-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.hpc-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--hp-ink-2); line-height: 1.5; }
.hpc-steps strong { color: var(--hp-ink); font-weight: 600; }
.hpc-step-n { width: 32px; height: 32px; border-radius: var(--hp-r-pill); display: grid; place-items: center;
  font: 700 14px/1 var(--hp-display); color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--hp-mint) 40%, transparent); }
.hpc-alt { margin: 0; color: var(--hp-ink-3); line-height: 1.6; }
.hpc-alt a, .hpc-fine a { color: var(--hp-mint); text-underline-offset: 3px; }
.hpc-alt-links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.hpc-alt-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hp-mint); text-underline-offset: 3px; }

.hpc-card { scroll-margin-top: calc(var(--hp-nav-h) + 16px); background: var(--hp-surface); border: 1px solid var(--hp-line-2);
  border-radius: var(--hp-r-xl); padding: clamp(20px, 4vw, 36px); box-shadow: var(--hp-shadow); min-width: 0; }
.hpc-h2 { margin: 0 0 6px; font: 700 clamp(1.35rem, 2.6vw, 1.7rem)/1.2 var(--hp-display); letter-spacing: -0.02em; color: var(--hp-ink); }
.hpc-note { margin: 0 0 20px; color: var(--hp-ink-3); font-size: 14px; }

.hpc-form { display: grid; gap: 18px; margin: 0; }
.hpc-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .hpc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* align-content: start keeps the label + box at the top of a field whose row partner shows an error line (polish2-1010):
   without it the shorter field's implicit grid rows stretch and its box grows/drops ~13px out of line. */
.hpc-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.hpc-field label, .hpc-mods legend { font: 600 15px/1.3 var(--hp-font); color: var(--hp-ink); }
.hpc-field label em { font-style: normal; font-weight: 400; color: var(--hp-ink-3); }
.hpc-form input:not([type="checkbox"]), .hpc-form textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border-radius: var(--hp-r-md);
  font: 400 16px/1.4 var(--hp-font); color: var(--hp-ink); background: var(--hp-bg);
  border: 1px solid var(--hp-line-2); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.hpc-form textarea { min-height: 112px; resize: vertical; }
.hpc-form input::placeholder, .hpc-form textarea::placeholder { color: var(--hp-ink-3); opacity: 1; }
.hpc-form input:not([type="checkbox"]):focus-visible, .hpc-form textarea:focus-visible {
  outline: none; border-color: var(--hp-mint); box-shadow: 0 0 0 3px var(--hp-glow); }
.hpc-form [aria-invalid="true"]:not(fieldset) { border-color: var(--hp-danger); }
.hpc-err { margin: 0; font-size: 14px; line-height: 1.4; color: var(--hp-danger); }
.hpc-err::before { content: "! "; font-weight: 700; }

.hpc-summary { border: 1px solid color-mix(in oklab, var(--hp-danger) 55%, transparent); background: color-mix(in oklab, var(--hp-danger) 10%, transparent);
  border-radius: var(--hp-r-md); padding: 14px 16px; color: var(--hp-ink); }
.hpc-summary:focus { outline: 2px solid var(--hp-danger); outline-offset: 2px; }
.hpc-summary p { margin: 0 0 6px; font-weight: 600; }
.hpc-summary ul { margin: 0; padding: 0; list-style: none; }
.hpc-summary li { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.hpc-summary li::before { content: "•"; flex: none; }
.hpc-summary a { color: var(--hp-ink); text-underline-offset: 3px; display: inline-block; vertical-align: top; min-height: 44px; padding: 10px 0; box-sizing: border-box; }

/* the module grid: native checkboxes, visually hidden but focusable; the label is the tile */
.hpc-mods { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.hpc-mods legend { padding: 0; margin: 0 0 4px; float: left; width: 100%; }
.hpc-mods legend + * { clear: both; }
.hpc-hint { margin: 0; color: var(--hp-ink-3); font-size: 14px; }
.hpc-count { color: var(--hp-mint); font-weight: 600; }
.hpc-grid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .hpc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hpc-grid li { position: relative; min-width: 0; }
.hpc-tile-in { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.hpc-tile { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 10px; align-items: center;
  min-height: 64px; padding: 10px 12px; border-radius: var(--hp-r-lg); cursor: pointer; user-select: none;
  background: var(--hp-bg); border: 1px solid var(--hp-line-2); transition: border-color .15s, background-color .15s, transform .15s; }
.hpc-tile:hover { border-color: color-mix(in oklab, var(--hp-mint) 55%, transparent); }
.hpc-tile .hp-ico { display: block; width: 40px; height: 40px; }
.hpc-tile-txt { display: grid; gap: 2px; min-width: 0; }
.hpc-tile-name { font: 600 15px/1.25 var(--hp-font); color: var(--hp-ink); }
.hpc-tile-out { font-size: 13px; line-height: 1.35; color: var(--hp-ink-3); }
.hpc-tile-check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--hp-line-2); display: grid; place-items: center; }
.hpc-tile-in:checked + .hpc-tile { border-color: var(--hp-mint); background: color-mix(in oklab, var(--hp-mint) 12%, var(--hp-bg)); }
.hpc-tile-in:checked + .hpc-tile .hpc-tile-check { background: var(--hp-mint); border-color: var(--hp-mint); }
.hpc-tile-in:checked + .hpc-tile .hpc-tile-check::after { content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid var(--hp-bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.hpc-tile-in:focus-visible + .hpc-tile { outline: 2px solid var(--hp-mint); outline-offset: 2px; }
.hpc-mods[aria-invalid="true"] .hpc-tile { border-color: color-mix(in oklab, var(--hp-danger) 55%, var(--hp-line-2)); }

.hpc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hpc-actions { display: grid; gap: 10px; justify-items: start; }
.hpc-actions .hp-btn { width: 100%; justify-content: center; }
@media (min-width: 600px) { .hpc-actions .hp-btn { width: auto; } }
.hpc-actions .hp-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.hpc-status { margin: 0; min-height: 1.4em; color: var(--hp-ink-2); font-size: 14px; }
.hpc-fine { margin: 0; color: var(--hp-ink-3); font-size: 13px; line-height: 1.5; }

.hpc-done { display: grid; gap: 12px; justify-items: start; }
.hpc-done[hidden] { display: none; }
.hpc-done:focus { outline: none; }
.hpc-done p { margin: 0; color: var(--hp-ink-2); line-height: 1.6; }
.hpc-done strong { color: var(--hp-ink); word-break: break-word; }
.hpc-done-mark { width: 52px; height: 52px; border-radius: var(--hp-r-pill); display: grid; place-items: center;
  font: 700 26px/1 var(--hp-font); color: var(--hp-bg); background: var(--hp-mint); }
.hpc-done-sub { margin-top: 6px !important; font-weight: 600; color: var(--hp-ink) !important; }
.hpc-done-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hpc-done-list li { padding: 6px 12px; border-radius: var(--hp-r-pill); font-size: 14px; color: var(--hp-ink);
  background: color-mix(in oklab, var(--hp-mint) 14%, transparent); border: 1px solid color-mix(in oklab, var(--hp-mint) 40%, transparent); }
.hpc-done-cta { margin-top: 8px !important; }

@media (prefers-reduced-motion: reduce) { .hpc-tile, .hpc-form input, .hpc-form textarea { transition: none; } }