/* Public Site stylesheet for the SERVER-RENDERED pages (blog, features).
   Not imported by the SPA: vite.config.js (publicSiteCss) inlines these
   @imports into /static/public-site.css, which Express links. The React
   pages import the same files directly, so both stay identical. */
/* ../home-v2/styles/base.css */
/* Tokens, resets and the shared building blocks of the redesigned home page.

   Sizing: the design is drawn on a 1920px canvas. `--u` is 1px at that width
   and shrinks proportionally below it, so `calc(var(--u) * N)` reproduces a
   design value N on a wide screen and scales it down on laptops and tablets.
   Text sizes wrap that in max() with a legibility floor, because pure
   proportional scaling would shrink 16px copy to ~4px on a phone. */
.hv2 {
  --u: min(1px, 100vw / 1920);

  /* Colors and fonts come from STYLE_GUIDE.md § 0 (public/static/tokens.css). */
  --red: var(--site-red);
  --red-hover: var(--site-red-hover);
  --red-bright: var(--site-red-bright);
  --red-soft: var(--site-red-soft);
  --ink: var(--site-ink);
  --ink-2: var(--site-ink-2);
  --ink-3: var(--site-ink-3);
  --line: var(--site-line);
  --line-soft: var(--site-line-soft);
  --surface: var(--site-surface);
  --plum: var(--site-plum);
  --purple: var(--site-purple);
  --coral: var(--site-coral);
  --brand-gradient: var(--site-gradient);

  --pad-x: max(16px, calc(var(--u) * 120));
  --pad-y: max(48px, calc(var(--u) * 88));

  --fs-118: max(40px, calc(var(--u) * 118));
  --fs-80: max(36px, calc(var(--u) * 80));
  --fs-64: max(30px, calc(var(--u) * 64));
  --fs-56: max(28px, calc(var(--u) * 56));
  --fs-48: max(20px, calc(var(--u) * 48));
  --fs-40: max(22px, calc(var(--u) * 40));
  --fs-32: max(18px, calc(var(--u) * 32));
  --fs-24: max(16px, calc(var(--u) * 24));
  --fs-20: max(15px, calc(var(--u) * 20));
  --fs-18: max(14px, calc(var(--u) * 18));
  --fs-16: max(13px, calc(var(--u) * 16));

  --font: var(--site-font);
  --font-ui: var(--site-font-ui);

  font-family: var(--font);
  color: var(--ink);
  background: #ffffff;
  line-height: 1.4;
  overflow-x: clip;
}

/* :where keeps the reset at class-level specificity so component rules below
   always win, while still beating the legacy element selectors. */
.hv2 :where(h1, h2, h3, h4, p, ul, ol, li, blockquote, hr) {
  margin: 0;
  padding: 0;
  font-family: inherit;
  letter-spacing: 0;
  color: inherit;
}
.hv2 :where(ul, ol) { list-style: none; }
.hv2 :where(img) { display: block; max-width: 100%; }
.hv2 :where(button) { font: inherit; cursor: pointer; }
.hv2 :where(a) { color: inherit; text-decoration: none; }

/* ── Section heading ─────────────────────────────────────────────────────── */
.hv2 .hv2-heading {
  display: flex;
  flex-direction: column;
  gap: max(8px, calc(var(--u) * 16));
}
.hv2 .hv2-eyebrow {
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink-2);
}
.hv2 .hv2-title {
  font-size: var(--fs-56);
  font-weight: 600;
  line-height: 1.143;
  color: var(--ink);
}
.hv2 .hv2-desc {
  font-size: var(--fs-18);
  line-height: 1.333;
  color: var(--ink-3);
}

/* ── Pill button ─────────────────────────────────────────────────────────── */
.hv2 .hv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(6px, calc(var(--u) * 8));
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hv2 .hv2-btn__icon { flex: none; }
.hv2 .hv2-btn--md {
  min-height: max(44px, calc(var(--u) * 56));
  padding: 0 max(14px, calc(var(--u) * 16));
  font-size: var(--fs-18);
  line-height: 1.333;
}
.hv2 .hv2-btn--md .hv2-btn__icon { width: max(18px, calc(var(--u) * 24)); height: max(18px, calc(var(--u) * 24)); }
.hv2 .hv2-btn--lg {
  min-height: max(52px, calc(var(--u) * 72));
  padding: 0 max(18px, calc(var(--u) * 24));
  font-size: var(--fs-20);
  line-height: 1.4;
}
.hv2 .hv2-btn--lg .hv2-btn__icon { width: max(20px, calc(var(--u) * 28)); height: max(20px, calc(var(--u) * 28)); }

.hv2 .hv2-btn--primary { background: var(--red); color: #ffffff; }
.hv2 .hv2-btn--primary:hover { background: var(--red-hover); color: #ffffff; }
.hv2 .hv2-btn--ghost-light { background: transparent; border-color: var(--line-soft); color: #ffffff; }
.hv2 .hv2-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.hv2 .hv2-btn--outline-dark { background: transparent; border-color: var(--ink); color: var(--ink); }
.hv2 .hv2-btn--outline-dark:hover { background: var(--ink); color: #ffffff; }
.hv2 .hv2-btn--outline-red { background: transparent; border-color: var(--red); color: var(--red); }
.hv2 .hv2-btn--outline-red:hover { background: var(--red); color: #ffffff; }
.hv2 .hv2-btn--white { background: #ffffff; color: var(--ink); }
.hv2 .hv2-btn--white:hover { background: var(--surface); color: var(--ink); }

/* ── Progress bars (vertical in the turn tracker, horizontal in testimonials) */
.hv2 .hv2-vbar,
.hv2 .hv2-hbar {
  position: relative;
  display: block;
  flex: none;
  background: var(--line);
  border-radius: 9999px;
  overflow: hidden;
}
.hv2 .hv2-vbar { width: max(3px, calc(var(--u) * 4)); align-self: stretch; }
.hv2 .hv2-vbar__fill { position: absolute; inset: 0 0 auto 0; height: 33.333%; background: var(--red); border-radius: inherit; }
.hv2 .hv2-hbar { height: max(3px, calc(var(--u) * 4)); flex: 1; }
.hv2 .hv2-hbar__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--red);
  border-radius: inherit;
  transition: left 0.35s ease;
}

/* ── Round arrow button ──────────────────────────────────────────────────── */
.hv2 .hv2-round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(48px, calc(var(--u) * 72));
  height: max(48px, calc(var(--u) * 72));
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  transition: background-color 0.2s ease;
}
.hv2 .hv2-round-btn:hover { background: #ffffff; }
.hv2 .hv2-round-btn svg { width: max(20px, calc(var(--u) * 28)); height: max(20px, calc(var(--u) * 28)); }

/* ── Checklist + icon list ───────────────────────────────────────────────── */
.hv2 .hv2-checks { display: flex; flex-direction: column; gap: max(12px, calc(var(--u) * 24)); }
.hv2 .hv2-checks__item {
  display: flex;
  align-items: center;
  gap: max(10px, calc(var(--u) * 16));
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1.333;
  color: var(--ink);
}
.hv2 .hv2-checks__icon {
  flex: none;
  width: max(22px, calc(var(--u) * 32));
  height: max(22px, calc(var(--u) * 32));
  color: var(--red);
}

.hv2 .hv2-benefits { display: flex; flex-direction: column; gap: max(10px, calc(var(--u) * 16)); }
.hv2 .hv2-benefits__item { display: flex; align-items: flex-start; gap: max(10px, calc(var(--u) * 16)); }
.hv2 .hv2-benefits__item > div { display: flex; flex-direction: column; gap: max(4px, calc(var(--u) * 16)); }
.hv2 .hv2-benefits__icon {
  flex: none;
  width: max(22px, calc(var(--u) * 32));
  height: max(22px, calc(var(--u) * 32));
  color: var(--red);
}
.hv2 .hv2-benefits__title { font-size: var(--fs-18); font-weight: 600; line-height: 1.333; color: var(--ink); }
.hv2 .hv2-benefits__body { font-size: var(--fs-18); font-weight: 500; line-height: 1.333; color: var(--ink-3); }

/* ── Inline text link with arrow ─────────────────────────────────────────── */
.hv2 .hv2-textlink {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: max(6px, calc(var(--u) * 8));
  min-height: max(44px, calc(var(--u) * 64));
  padding: 0 max(12px, calc(var(--u) * 20));
  border-radius: 999px;
  font-size: var(--fs-20);
  font-weight: 500;
  color: var(--red);
}
.hv2 .hv2-textlink:hover { color: var(--red-hover); background: rgba(221, 57, 60, 0.06); }
.hv2 .hv2-textlink__icon { width: max(20px, calc(var(--u) * 28)); height: max(20px, calc(var(--u) * 28)); }

/* Repeated "Book a Free Demo" row between sections (components/DemoCta). */
.hv2 .hv2-democta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(8px, calc(var(--u) * 14));
  padding: max(28px, calc(var(--u) * 56)) var(--pad-x);
  text-align: center;
}
.hv2 .hv2-democta--surface { background: var(--surface); }
.hv2 .hv2-democta__note { font-size: var(--fs-16); color: var(--ink-3); }

/* Public Site menu/footer around an app page (components/layout/
   PublicSiteChrome): the scope without a box, so the sticky menu sticks to
   the page. */
.hv2.hv2-chrome { display: contents; }

/* ../home-v2/styles/top.css */
/* Menu bar, hero and the benefit strip under it. */

.hv2 .hv2-top { position: relative; }

/* ── Menu ────────────────────────────────────────────────────────────────── */
/* `header` carries legacy sticky/white styles site-wide; reset them here. */
.hv2 .hv2-menu {
  /* Fixed, not absolute: the pill follows the page, and auto-hides once the
     reader scrolls (MenuBar.jsx: mouse at the top edge / scroll up brings it
     back). */
  position: fixed;
  top: max(16px, calc(var(--u) * 47));
  left: var(--pad-x);
  right: var(--pad-x);
  z-index: 20;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hv2 .hv2-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(12px, calc(var(--u) * 24));
  padding: max(8px, calc(var(--u) * 16));
  background: #ffffff;
  border-radius: 999px;
}
.hv2 .hv2-menu { transition: transform 280ms ease, opacity 200ms ease; }
/* Auto-hidden: slid up out of view; clicks pass through to the page. */
.hv2 .hv2-menu.is-hidden { transform: translateY(calc(-100% - 64px)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hv2 .hv2-menu { transition: none; } }
.hv2 .hv2-menu__bar { transition: box-shadow 200ms ease; }
.hv2 .hv2-menu.is-scrolled .hv2-menu__bar { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
/* The opened mobile menu can be taller than a small screen: let it scroll. */
.hv2 .hv2-menu.is-open { max-height: calc(100vh - 2 * max(16px, calc(var(--u) * 47))); overflow-y: auto; border-radius: 28px; }
/* #anchor jumps (Pricing, FAQ…) leave a little room at the top. */
.hv2 [id] { scroll-margin-top: calc(var(--hv2-menu-offset, 0px) + 16px); }
.hv2 .hv2-menu__left { display: flex; align-items: center; gap: calc(var(--u) * 48); min-width: 0; }
.hv2 .hv2-menu__logo {
  padding: max(6px, calc(var(--u) * 8)) max(10px, calc(var(--u) * 16));
  font-size: max(18px, calc(var(--u) * 24));
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink);
  white-space: nowrap;
}
.hv2 .hv2-menu__logo:hover { color: var(--ink); }
.hv2 .hv2-menu__tabs {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 16);
}
.hv2 .hv2-menu__tab {
  min-width: calc(var(--u) * 120);
  font-size: max(14px, calc(var(--u) * 16));
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
}
.hv2 .hv2-menu__tab:hover { color: var(--red); }
.hv2 .hv2-menu__actions { display: flex; align-items: center; gap: max(10px, calc(var(--u) * 24)); }
.hv2 .hv2-menu__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
}
.hv2 .hv2-menu__toggle svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
  .hv2 .hv2-menu__bar { flex-wrap: wrap; border-radius: 28px; padding: 8px 8px 8px 12px; }
  .hv2 .hv2-menu__left { display: contents; }
  .hv2 .hv2-menu__toggle { display: inline-flex; margin-left: auto; }
  .hv2 .hv2-menu__tabs,
  .hv2 .hv2-menu__actions { display: none; }
  .hv2 .hv2-menu.is-open .hv2-menu__tabs {
    display: flex;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 4px;
    border-top: 1px solid var(--line-soft);
  }
  .hv2 .hv2-menu.is-open .hv2-menu__tab { text-align: left; padding: 10px 8px; min-width: 0; }
  .hv2 .hv2-menu.is-open .hv2-menu__actions {
    display: flex;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 4px 8px;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hv2 .hv2-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 1080);
  padding: max(132px, calc(var(--u) * 348)) var(--pad-x) max(80px, calc(var(--u) * 292));
  background: #000000;
  overflow: hidden;
  isolation: isolate;
}
.hv2 .hv2-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
}
/* Video hero. The video and its poster share one "frame" sized like
   object-fit: cover (as wide as the hero, or as tall as it, whichever fills
   it), centred both ways where it is cropped. */
.hv2 .hv2-hero__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container: hero-cover / size;
  pointer-events: none;
}
.hv2 .hv2-hero__cover--video { z-index: -2; }
.hv2 .hv2-hero__frame {
  --frame-w: max(100cqw, calc(100cqh * 16 / 9));
  position: absolute;
  left: calc((100cqw - var(--frame-w)) * 0.5);
  top: calc((100cqh - var(--frame-w) * 9 / 16) * 0.5);
  width: var(--frame-w);
  aspect-ratio: 16 / 9;
}
.hv2 .hv2-hero__poster,
.hv2 .hv2-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hv2 .hv2-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    62deg,
    #333333 0%,
    rgba(51, 51, 51, 0.53) 37%,
    rgba(51, 51, 51, 0.1) 59%,
    rgba(51, 51, 51, 0) 100%
  );
}
.hv2 .hv2-hero__content {
  position: relative;
  z-index: 1; /* text and buttons stay above the pop-up cards */
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(var(--u) * 32));
  width: 100%;
  max-width: max(calc(var(--u) * 786), 540px);
}
.hv2 .hv2-hero__titles { display: flex; flex-direction: column; gap: max(8px, calc(var(--u) * 16)); }
.hv2 .hv2-hero__title {
  font-size: var(--fs-64);
  font-weight: 700;
  line-height: 1.125;
  color: #ffffff;
}
.hv2 .hv2-hero__subtitle {
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff;
}
.hv2 .hv2-hero__body,
.hv2 .hv2-hero__note {
  font-size: var(--fs-18);
  line-height: 1.333;
  color: #cccccc;
}
.hv2 .hv2-hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(12px, calc(var(--u) * 24));
}

@media (max-width: 768px) {
  .hv2 .hv2-hero__overlay {
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.8) 0%, rgba(51, 51, 51, 0.55) 100%);
  }
}
@media (max-width: 480px) {
  .hv2 .hv2-hero__actions { grid-template-columns: 1fr; }
}

/* ── Benefit strip ───────────────────────────────────────────────────────── */
.hv2 .hv2-strip {
  position: relative;
  z-index: 1;
  margin-top: min(-12px, calc(var(--u) * -20));
  padding: max(24px, calc(var(--u) * 48)) var(--pad-x);
  background: var(--surface);
  border-radius: max(16px, calc(var(--u) * 24)) max(16px, calc(var(--u) * 24)) 0 0;
}
.hv2 .hv2-strip__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(16px, calc(var(--u) * 92));
}
.hv2 .hv2-strip__item {
  display: flex;
  align-items: center;
  gap: max(10px, calc(var(--u) * 16));
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
}
.hv2 .hv2-strip__icon {
  flex: none;
  width: max(22px, calc(var(--u) * 32));
  height: max(22px, calc(var(--u) * 32));
  color: var(--red);
}

@media (max-width: 1024px) {
  .hv2 .hv2-strip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hv2 .hv2-strip__list { grid-template-columns: 1fr; gap: 14px; }
}

/* ../home-v2/styles/closing.css */
/* Closing headline and footer, both sitting on the dark-to-brand gradient. */

.hv2 .hv2-closing {
  position: relative;
  padding-bottom: max(24px, calc(var(--u) * 61));
  background: linear-gradient(180deg, #000000 0%, #000000 62%, var(--purple) 85.6%, var(--coral) 107%);
}

/* ── Final call-to-action ────────────────────────────────────────────────── */
.hv2 .hv2-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(28px, calc(var(--u) * 56));
  padding: var(--pad-y) var(--pad-x);
}
.hv2 .hv2-final__title {
  font-size: var(--fs-118);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: #ffffff;
}
.hv2 .hv2-final__lead {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hv2 .hv2-final__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(52px, calc(var(--u) * 84));
  padding: 0 max(28px, calc(var(--u) * 64));
  background: var(--red-bright);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  transition: background-color 0.2s ease;
}
.hv2 .hv2-final__cta:hover { background: var(--red); color: #ffffff; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* `footer` carries legacy dark styles site-wide; reset them here. */
.hv2 .hv2-footer {
  margin: 0 var(--pad-x);
  padding: 0;
  background: var(--ink);
  border-radius: max(16px, calc(var(--u) * 24));
  color: #ffffff;
}
.hv2 .hv2-footer a { color: inherit; }
.hv2 .hv2-footer a:hover { color: #ffffff; opacity: 0.8; }
.hv2 .hv2-footer__top {
  display: flex;
  justify-content: space-between;
  gap: max(24px, calc(var(--u) * 53));
  padding: max(28px, calc(var(--u) * 88));
}
.hv2 .hv2-footer__brand {
  display: flex;
  flex: 0 1 max(260px, calc(var(--u) * 405));
  flex-direction: column;
  gap: max(20px, calc(var(--u) * 56));
}
.hv2 .hv2-footer__logo { font-size: var(--fs-48); font-weight: 700; line-height: 0.833; color: #ffffff; }
.hv2 .hv2-footer__tagline { font-size: var(--fs-24); line-height: 1.667; color: #ffffff; }
.hv2 .hv2-footer__cta {
  align-self: stretch;
  min-height: max(48px, calc(var(--u) * 60));
  padding: max(10px, calc(var(--u) * 16)) max(20px, calc(var(--u) * 48));
  font-size: var(--fs-20);
}
.hv2 .hv2-footer a.hv2-footer__cta { color: var(--ink); opacity: 1; }
.hv2 .hv2-footer__col { display: flex; flex-direction: column; gap: max(16px, calc(var(--u) * 56)); }
.hv2 .hv2-footer__col-title { font-size: var(--fs-32); font-weight: 700; line-height: 1.25; color: #ffffff; }
.hv2 .hv2-footer__links { display: flex; flex-direction: column; gap: max(8px, calc(var(--u) * 32)); }
.hv2 .hv2-footer__link { font-size: var(--fs-24); line-height: 1.667; color: #ffffff; }
/* Guides: blog post titles are long — a narrower, smaller, clamped column. */
.hv2 .hv2-footer__col--guides { flex: 0 1 max(240px, calc(var(--u) * 420)); min-width: 0; }
.hv2 .hv2-footer__col--guides .hv2-footer__links { gap: max(8px, calc(var(--u) * 18)); }
.hv2 .hv2-footer__col--guides .hv2-footer__link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-18);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.hv2 .hv2-footer__col--guides .hv2-footer__link:hover { color: #ffffff; text-decoration: underline; }
.hv2 .hv2-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 max(20px, calc(var(--u) * 90));
  padding: max(24px, calc(var(--u) * 48)) 0;
  border-top: 1px solid #ffffff;
}
.hv2 .hv2-footer__contact { font-size: var(--fs-32); line-height: 1.25; color: #ffffff; }
.hv2 .hv2-footer__social { display: flex; gap: max(12px, calc(var(--u) * 24)); }
.hv2 .hv2-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(48px, calc(var(--u) * 74));
  height: max(48px, calc(var(--u) * 74));
  border: 1px solid #ffffff;
  border-radius: 16px;
  color: var(--surface);
}
.hv2 .hv2-footer__social-btn svg { width: max(24px, calc(var(--u) * 40)); height: max(24px, calc(var(--u) * 40)); }
.hv2 .hv2-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 0 max(20px, calc(var(--u) * 90));
  padding-bottom: max(20px, calc(var(--u) * 32));
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1024px) {
  .hv2 .hv2-footer__top { flex-wrap: wrap; }
  .hv2 .hv2-footer__brand { flex: 1 1 100%; }
  .hv2 .hv2-footer__cta { align-self: flex-start; }
}
@media (max-width: 560px) {
  .hv2 .hv2-footer__top { flex-direction: column; }
  .hv2 .hv2-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ../blog-v2/styles/chrome.css */
/* Page chrome: in-flow menu bar, topic bar + search, closing band, chips. */

.hv2.hv2-blog {
  --pink: var(--site-pink);
  --pink-soft: var(--site-pink-soft);
  --yellow-soft: var(--site-yellow-soft);
  --blue-soft: var(--site-blue-soft);
  --blue: var(--site-blue);
  --rule-pick: var(--site-rule-pick);
  --plum-ink: var(--site-plum-ink);
  --fs-14: max(12px, calc(var(--u) * 14));
  --fs-12: max(12px, calc(var(--u) * 12));
}

/* ── Menu as an in-flow bar ──────────────────────────────────────────────── */
.hv2 .hv2-menu--page {
  /* Sticks to the top, auto-hiding once the reader scrolls (MenuBar.jsx). */
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  padding: max(12px, calc(var(--u) * 32)) var(--pad-x);
  background: #ffffff;
  transition: box-shadow 200ms ease;
}
.hv2 .hv2-menu--page.is-scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 6px 20px rgba(0, 0, 0, 0.06); }
.hv2 .hv2-menu--page.is-scrolled .hv2-menu__bar { box-shadow: none; }
/* Room above the article's sticky table of contents (the menu bar is hidden
   while reading; --hv2-menu-offset is 0 unless something sets it). */
.hv2.hv2-blog .hv2-post__sticky {
  top: calc(var(--hv2-menu-offset, 0px) + 24px);
  max-height: calc(100vh - var(--hv2-menu-offset, 0px) - 48px);
}
.hv2 .hv2-menu--page .hv2-menu__bar { padding: 0; }
.hv2 .hv2-menu--page .hv2-menu__tab { color: var(--ink-3); }
.hv2 .hv2-menu--page .hv2-menu__tab:hover { color: var(--red); }
.hv2 .hv2-menu__tab.is-active {
  color: var(--red);
  font-size: max(15px, calc(var(--u) * 18));
  font-weight: 600;
}
@media (max-width: 1100px) {
  .hv2 .hv2-menu--page .hv2-menu__bar { padding: 0; border-radius: 0; }
}

/* ── Topic bar + search ──────────────────────────────────────────────────── */
.hv2 .hv2-topicnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(16px, calc(var(--u) * 48));
  padding: max(10px, calc(var(--u) * 16)) var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hv2 .hv2-topicnav__links {
  display: flex;
  align-items: center;
  gap: max(16px, calc(var(--u) * 32));
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hv2 .hv2-topicnav__links::-webkit-scrollbar { display: none; }
.hv2 .hv2-topicnav__link {
  flex: none;
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: nowrap;
}
.hv2 .hv2-topicnav__link:hover,
.hv2 .hv2-topicnav__link.is-active,
.hv2 .hv2-topicnav__link.is-accent { color: var(--red); }
.hv2 .hv2-topicnav__link.is-active { font-weight: 600; }

.hv2 .hv2-search {
  display: flex;
  flex: 0 1 calc(var(--u) * 609);
  min-width: 220px;
  align-items: center;
  gap: 4px;
  min-height: max(44px, calc(var(--u) * 80));
  padding: 0 max(14px, calc(var(--u) * 24));
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: #ffffff;
}
.hv2 .hv2-search:focus-within { border-color: var(--ink-3); }
.hv2 .hv2-search__icon { flex: none; width: max(18px, calc(var(--u) * 24)); height: max(18px, calc(var(--u) * 24)); color: var(--ink-2); }
.hv2 .hv2-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-18);
  color: var(--ink);
}
.hv2 .hv2-search__input::placeholder { color: var(--ink-3); }

@media (max-width: 768px) {
  .hv2 .hv2-topicnav { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .hv2 .hv2-search { flex-basis: auto; }
}

/* ── Closing band without the final call-to-action ───────────────────────── */
.hv2 .hv2-closing--plain { padding-top: max(24px, calc(var(--u) * 54)); }

/* ── Shared bits ─────────────────────────────────────────────────────────── */
.hv2 .hv2-bmain { display: block; }
.hv2 .hv2-bnotice {
  padding: var(--pad-y) var(--pad-x) 0;
  font-size: var(--fs-18);
  color: var(--ink-2);
}

.hv2 .hv2-chips { display: flex; flex-wrap: wrap; gap: max(8px, calc(var(--u) * 12)); }
.hv2 .hv2-chips--stack { flex-direction: column; align-items: flex-start; }
.hv2 .hv2-tag {
  display: inline-flex;
  align-items: center;
  min-height: max(28px, calc(var(--u) * 32));
  padding: 4px max(12px, calc(var(--u) * 16));
  border-radius: 999px;
  font-size: var(--fs-16);
  line-height: 1.5;
  white-space: nowrap;
}
.hv2 .hv2-tag--pink { background: var(--pink); color: var(--red); }
.hv2 .hv2-tag--yellow { background: var(--yellow-soft); color: var(--ink); }
.hv2 .hv2-tag--blue { background: var(--blue-soft); color: var(--blue); }
.hv2 .hv2-tag:hover { filter: brightness(0.96); }

.hv2 .hv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: max(36px, calc(var(--u) * 44));
  padding: 0 max(14px, calc(var(--u) * 20));
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: #ffffff;
  font-size: max(13px, calc(var(--u) * 13));
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hv2 .hv2-chip:hover { border-color: var(--red); color: var(--red); }
.hv2 .hv2-chip.is-selected {
  border-color: var(--red);
  background: var(--red);
  font-size: var(--fs-18);
  color: #ffffff;
}
.hv2 .hv2-chip__icon { width: max(18px, calc(var(--u) * 24)); height: max(18px, calc(var(--u) * 24)); }

/* Author line (initials avatar — posts carry no portrait). */
.hv2 .hv2-author { display: flex; align-items: center; gap: 10px; }
.hv2 .hv2-author__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: max(36px, calc(var(--u) * 48));
  height: max(36px, calc(var(--u) * 48));
  border-radius: 50%;
  background: var(--pink);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--red);
}
.hv2 .hv2-author__line { font-size: var(--fs-16); line-height: 1.5; color: var(--ink-3); }
.hv2 .hv2-author--lg .hv2-author__avatar { width: max(48px, calc(var(--u) * 68)); height: max(48px, calc(var(--u) * 68)); font-size: var(--fs-20); }
.hv2 .hv2-author__text { display: flex; flex-direction: column; gap: 8px; }
.hv2 .hv2-author__name { font-size: var(--fs-18); font-weight: 500; line-height: 1.333; color: var(--ink); }
.hv2 .hv2-author__role { font-size: var(--fs-16); line-height: 1.5; color: var(--ink-2); }

/* ../blog-v2/styles/cards.css */
/* Post cards, meta line and cover images. */

.hv2 .hv2-cover {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: var(--surface);
}
.hv2 .hv2-cover--empty { background: linear-gradient(135deg, #f3e4e6 0%, #ededed 100%); }

/* "Topic · date · 5 min read" */
.hv2 .hv2-bmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-14);
  line-height: 1.43;
  color: var(--ink-3);
}
.hv2 .hv2-bmeta > span + span::before { content: '·'; margin: 0 0.6em; color: var(--ink-3); }
.hv2 .hv2-bmeta__topic { color: var(--red); }

.hv2 .hv2-pcard { display: flex; color: inherit; }
.hv2 .hv2-pcard__body { display: flex; flex-direction: column; gap: max(4px, calc(var(--u) * 7)); min-width: 0; }
.hv2 .hv2-pcard__title {
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.2s ease;
}
.hv2 .hv2-pcard:hover .hv2-pcard__title { color: var(--red); }

/* grid + wide: photo on top */
.hv2 .hv2-pcard--grid,
.hv2 .hv2-pcard--wide { flex-direction: column; gap: max(10px, calc(var(--u) * 14)); }
.hv2 .hv2-pcard__img {
  aspect-ratio: 402 / 186;
  border-radius: max(12px, calc(var(--u) * 16));
}
.hv2 .hv2-pcard--wide .hv2-pcard__img { aspect-ratio: 544 / 240; }

/* pick: thumbnail beside the text */
.hv2 .hv2-pcard--pick {
  align-items: flex-start;
  gap: max(12px, calc(var(--u) * 14));
  padding-top: max(12px, calc(var(--u) * 18));
  border-top: 1px solid var(--rule-pick);
}
.hv2 .hv2-pcard__thumb {
  flex: none;
  width: max(84px, calc(var(--u) * 104));
  height: max(74px, calc(var(--u) * 92));
  border-radius: 12px;
}
.hv2 .hv2-pcard--pick .hv2-pcard__body { gap: max(4px, calc(var(--u) * 8)); }
.hv2 .hv2-pcard--pick .hv2-bmeta { font-size: var(--fs-16); }
.hv2 .hv2-pcard--pick .hv2-pcard__title { font-size: var(--fs-18); font-weight: 400; line-height: 1.333; color: var(--ink-2); }

/* rank: numbered row */
.hv2 .hv2-pcard--rank {
  align-items: flex-start;
  gap: max(14px, calc(var(--u) * 22));
  padding-top: max(12px, calc(var(--u) * 16));
  border-top: 1px solid var(--line-soft);
}
.hv2 .hv2-pcard__rank {
  flex: none;
  margin-top: max(4px, calc(var(--u) * 7));
  font-size: var(--fs-32);
  font-weight: 600;
  line-height: 1.25;
  color: var(--red);
}
.hv2 .hv2-pcard--rank .hv2-pcard__body { gap: max(4px, calc(var(--u) * 6)); }

/* Four-up grid (Latest, Keep reading, results) */
.hv2 .hv2-cardgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: max(24px, calc(var(--u) * 30)) max(16px, calc(var(--u) * 24));
}
@media (max-width: 1024px) { .hv2 .hv2-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hv2 .hv2-cardgrid { grid-template-columns: minmax(0, 1fr); } }

/* ../blog-v2/styles/sections.css */
/* Blog index sections: hero, card sections, role/resource cards, topic
   browser, most read, results and the newsletter band. */

.hv2 .hv2-bsection {
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(var(--u) * 30));
  padding: var(--pad-y) var(--pad-x);
}
.hv2 .hv2-bsection--surface { background: var(--surface); }
.hv2 .hv2-bsection__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hv2 .hv2-bsection__intro { display: flex; flex-direction: column; gap: max(6px, calc(var(--u) * 10)); }
.hv2 .hv2-bsection__title {
  font-size: var(--fs-56);
  font-weight: 500;
  line-height: 1.143;
  color: var(--ink);
}
.hv2 #latest .hv2-bsection__title,
.hv2 #keep-reading .hv2-bsection__title,
.hv2 .hv2-mostread .hv2-bsection__title { color: var(--plum-ink); }

/* ── Hero: intro, lead story, editor's picks ─────────────────────────────── */
.hv2 .hv2-bhero {
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(var(--u) * 32));
  padding: var(--pad-y) var(--pad-x);
}
.hv2 .hv2-bhero__intro { display: flex; flex-direction: column; gap: max(8px, calc(var(--u) * 16)); max-width: calc(var(--u) * 1000); }
.hv2 .hv2-bhero__title { font-size: var(--fs-56); font-weight: 500; line-height: 1.143; color: var(--ink); }
.hv2 .hv2-bhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 919fr) minmax(0, 681fr);
  gap: max(24px, calc(var(--u) * 80));
  align-items: start;
}
.hv2 .hv2-lead { display: flex; flex-direction: column; gap: max(10px, calc(var(--u) * 16)); }
.hv2 .hv2-lead__media { display: block; overflow: hidden; border-radius: max(12px, calc(var(--u) * 16)); }
.hv2 .hv2-lead__img { aspect-ratio: 919 / 416; transition: transform 0.4s ease; }
.hv2 .hv2-lead__media:hover .hv2-lead__img { transform: scale(1.02); }
.hv2 .hv2-lead__title { font-size: var(--fs-32); font-weight: 600; line-height: 1.25; color: var(--ink); }
.hv2 .hv2-lead__title a:hover { color: var(--red); }
.hv2 .hv2-lead__summary { font-size: var(--fs-18); line-height: 1.333; color: var(--ink-2); }
.hv2 .hv2-picks { display: flex; flex-direction: column; gap: max(12px, calc(var(--u) * 18)); }
.hv2 .hv2-picks__title { font-size: var(--fs-20); font-weight: 600; line-height: 1.4; color: var(--ink); }
.hv2 .hv2-picks__list { display: flex; flex-direction: column; gap: max(12px, calc(var(--u) * 18)); }
@media (max-width: 1024px) {
  .hv2 .hv2-bhero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Role + resource cards ───────────────────────────────────────────────── */
.hv2 .hv2-info { gap: max(20px, calc(var(--u) * 28)); }
.hv2 .hv2-info__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(16px, calc(var(--u) * 24));
}
.hv2 .hv2-info__card {
  display: flex;
  flex-direction: column;
  gap: max(12px, calc(var(--u) * 20));
  padding: max(20px, calc(var(--u) * 28));
  border-radius: 8px;
  background: #ffffff;
}
.hv2 .hv2-info--resource .hv2-info__card { gap: max(10px, calc(var(--u) * 14)); }
.hv2 .hv2-info__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hv2 .hv2-info__title { font-size: var(--fs-20); font-weight: 400; line-height: 1.21; color: var(--ink); }
.hv2 .hv2-info--resource .hv2-info__title { font-size: max(16px, calc(var(--u) * 21)); line-height: 1.25; }
.hv2 .hv2-info__type {
  font-size: max(11px, calc(var(--u) * 11));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}
.hv2 .hv2-info__icon { flex: none; width: max(20px, calc(var(--u) * 24)); height: max(20px, calc(var(--u) * 24)); stroke-width: 1.5; color: var(--ink); }
.hv2 .hv2-info--resource .hv2-info__icon { width: max(22px, calc(var(--u) * 26)); height: max(22px, calc(var(--u) * 26)); color: var(--red); }
.hv2 .hv2-info__desc { font-size: max(13px, calc(var(--u) * 12)); line-height: 1.25; color: var(--ink-3); }
.hv2 .hv2-info--resource .hv2-info__desc { color: var(--ink-2); }
.hv2 .hv2-info__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  font-size: max(13px, calc(var(--u) * 12));
  line-height: 1.25;
  color: var(--ink);
}
.hv2 .hv2-info--resource .hv2-info__link { color: var(--red); }
.hv2 .hv2-info__link:hover { text-decoration: underline; }
.hv2 .hv2-info__arrow { width: max(14px, calc(var(--u) * 18)); height: max(14px, calc(var(--u) * 18)); }
@media (max-width: 768px) {
  .hv2 .hv2-info__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Browse by topic ─────────────────────────────────────────────────────── */
.hv2 .hv2-topics { gap: max(20px, calc(var(--u) * 32)); }
.hv2 .hv2-topics__tabs { display: flex; flex-wrap: wrap; gap: max(8px, calc(var(--u) * 12)); }
.hv2 .hv2-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(16px, calc(var(--u) * 24));
  transition: opacity 0.2s ease;
}
.hv2 .hv2-topics__grid.is-loading { opacity: 0.5; }
.hv2 .hv2-topics__more { align-self: flex-start; }
@media (max-width: 768px) {
  .hv2 .hv2-topics__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Most read ───────────────────────────────────────────────────────────── */
.hv2 .hv2-mostread { gap: max(16px, calc(var(--u) * 26)); }
.hv2 .hv2-mostread__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(16px, calc(var(--u) * 26)) max(24px, calc(var(--u) * 48));
}
@media (max-width: 768px) {
  .hv2 .hv2-mostread__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Results (topic / search / all) ──────────────────────────────────────── */
.hv2 .hv2-results__count { font-size: var(--fs-18); color: var(--ink-3); }
.hv2 .hv2-results__back { font-size: var(--fs-18); font-weight: 500; color: var(--red); }
.hv2 .hv2-results__back:hover { text-decoration: underline; }
.hv2 .hv2-results__empty { font-size: var(--fs-18); color: var(--ink-2); }
.hv2 .hv2-pager { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hv2 .hv2-pager__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--red);
  border-radius: 999px;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--red);
}
.hv2 .hv2-pager__link:hover { background: var(--red); color: #ffffff; }
.hv2 .hv2-pager__link svg { width: 18px; height: 18px; }
.hv2 .hv2-pager__status { font-size: var(--fs-16); color: var(--ink-3); }

/* ── Newsletter band ─────────────────────────────────────────────────────── */
.hv2 .hv2-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(24px, calc(var(--u) * 72));
  padding: max(36px, calc(var(--u) * 52)) var(--pad-x);
  background: var(--red);
  color: #ffffff;
}
.hv2 .hv2-newsletter__intro { display: flex; flex-direction: column; gap: max(8px, calc(var(--u) * 12)); min-width: 0; }
.hv2 .hv2-newsletter__title { font-size: var(--fs-56); font-weight: 500; line-height: 1.143; color: #ffffff; }
.hv2 .hv2-newsletter__body { font-size: var(--fs-18); font-weight: 600; line-height: 1.333; color: #ffffff; }
.hv2 .hv2-newsletter__form { display: flex; flex: 0 0 min(100%, max(320px, calc(var(--u) * 540))); flex-direction: column; gap: 10px; }
.hv2 .hv2-newsletter__label { font-size: var(--fs-12); font-weight: 600; color: #ffffff; }
.hv2 .hv2-newsletter__field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: max(56px, calc(var(--u) * 80));
  padding: max(6px, calc(var(--u) * 12));
  padding-left: max(14px, calc(var(--u) * 12));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: #ffffff;
}
.hv2 .hv2-newsletter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-18);
  color: var(--ink);
}
.hv2 .hv2-newsletter__input::placeholder { color: var(--ink-3); }
.hv2 .hv2-newsletter__submit {
  flex: none;
  min-height: 44px;
  padding: 0 max(16px, calc(var(--u) * 24));
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  font-size: var(--fs-16);
  font-weight: 500;
  color: #ffffff;
}
.hv2 .hv2-newsletter__submit:hover { background: #000000; }
.hv2 .hv2-newsletter__submit:disabled { opacity: 0.6; cursor: progress; }
.hv2 .hv2-newsletter__note { font-size: max(11px, calc(var(--u) * 11)); color: #f0d5d6; }
.hv2 .hv2-newsletter__note.is-status { font-size: var(--fs-14); font-weight: 500; color: #ffffff; }
@media (max-width: 1024px) {
  .hv2 .hv2-newsletter { flex-direction: column; align-items: stretch; }
  .hv2 .hv2-newsletter__form { flex-basis: auto; }
}

/* ../blog-v2/styles/post.css */
/* Article page: two-column layout, header, sticky sidebar, FAQ, share row.
 *
 * The article column sits in the CENTRE of the page; the table of contents
 * sits to its left, a fixed gap away (so on very wide screens it stays next to
 * the article instead of drifting to the page edge). Three
 * tracks: [TOC + gap, ≥ its own width] [article, readable width] [mirror of the
 * first track]. The two outer tracks share the leftover space equally, which
 * is what centres the article; when the screen is too narrow for that, the
 * first track keeps its minimum (TOC + gap) and the article moves right rather
 * than ever touching the TOC. ≤1024px stacks to one column (see the end). */

.hv2 .hv2-post {
  --post-toc: max(200px, calc(var(--u) * 263));
  --post-gap: max(48px, calc(var(--u) * 120));
  --post-main: max(680px, calc(var(--u) * 900));
  display: grid;
  grid-template-columns:
    minmax(calc(var(--post-toc) + var(--post-gap)), 1fr)
    minmax(0, var(--post-main))
    minmax(0, 1fr);
  column-gap: 0;
  row-gap: max(28px, calc(var(--u) * 48));
  padding: max(12px, calc(var(--u) * 31)) var(--pad-x) var(--pad-y);
}
.hv2 .hv2-post__top { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: max(28px, calc(var(--u) * 48)); min-width: 0; }
.hv2 .hv2-post__side { grid-column: 1; grid-row: 1 / span 2; justify-self: end; width: var(--post-toc); margin-right: var(--post-gap); min-width: 0; }
.hv2 .hv2-post__body { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: max(20px, calc(var(--u) * 24)); min-width: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
/* It's a <header>, and the classic stylesheet (static/style.css) makes every
   header sticky, white and z-index 100 — which pinned this block over the
   menu bar while scrolling. Reset to a plain in-flow block. Layers: menu bar
   (z 20) › sticky table of contents › article. */
.hv2 .hv2-post__head {
  position: static;
  z-index: auto;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex; flex-direction: column; gap: max(16px, calc(var(--u) * 24));
}
.hv2 .hv2-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: max(8px, calc(var(--u) * 16)) 0;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--ink-3);
}
.hv2 .hv2-crumbs li { display: inline-flex; gap: 8px; }
/* The legacy stylesheet sizes every `nav a`; crumbs follow their list. */
.hv2 .hv2-crumbs a { font-size: inherit; font-weight: inherit; color: inherit; }
.hv2 .hv2-crumbs li + li::before { content: '/'; color: var(--ink-3); }
.hv2 .hv2-crumbs a:hover { color: var(--red); }
.hv2 .hv2-crumbs li[aria-current] { font-weight: 500; color: var(--ink); }
.hv2 .hv2-post__facts { display: flex; flex-wrap: wrap; gap: 8px max(16px, calc(var(--u) * 24)); }
.hv2 .hv2-post__fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--ink-2);
}
.hv2 .hv2-post__fact svg { width: max(18px, calc(var(--u) * 24)); height: max(18px, calc(var(--u) * 24)); }
.hv2 .hv2-post__fact.is-topic { color: var(--red); }
.hv2 .hv2-post__title { font-size: var(--fs-56); font-weight: 600; line-height: 1.143; color: var(--ink); }
.hv2 .hv2-post__excerpt { font-size: var(--fs-24); font-weight: 500; line-height: 1.333; color: var(--ink-2); }
.hv2 .hv2-post__cover { margin: 0; overflow: hidden; border-radius: max(12px, calc(var(--u) * 16)); }
.hv2 .hv2-post__cover-img { aspect-ratio: 1114 / 504; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.hv2 .hv2-post__sticky {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: max(28px, calc(var(--u) * 48));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  /* Still scrolls (wheel / trackpad) when taller than the screen; the bar is
     hidden so no grey track shows beside the contents list. */
  scrollbar-width: none;
}
.hv2 .hv2-post__sticky::-webkit-scrollbar { display: none; }
.hv2 .hv2-post__side-extra { display: flex; flex-direction: column; gap: max(28px, calc(var(--u) * 48)); }
.hv2 .hv2-toc { display: flex; flex-direction: column; gap: 16px; }
.hv2 .hv2-toc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.hv2 .hv2-toc__title { flex: 1 0 100%; font-size: var(--fs-24); font-weight: 600; line-height: 1.333; color: var(--ink); }
.hv2 .hv2-toc__top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--red);
}
.hv2 .hv2-toc__top:hover { background: rgba(221, 57, 60, 0.06); }
.hv2 .hv2-toc__top svg { width: 18px; height: 18px; }
.hv2 .hv2-toc__toggle { display: none; }
.hv2 .hv2-toc__list { display: flex; flex-direction: column; gap: 16px; }
.hv2 .hv2-toc__item a {
  display: block;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(51, 51, 51, 0.35);
}
.hv2 .hv2-toc__item--l3 a { padding-left: 14px; font-size: var(--fs-16); font-weight: 400; color: var(--ink-2); }
.hv2 .hv2-toc__item a:hover,
.hv2 .hv2-toc__item a.is-active { color: var(--red); text-decoration-color: currentColor; }

.hv2 .hv2-sidecta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: max(16px, calc(var(--u) * 24));
  background: var(--ink);
  color: #ffffff;
}
.hv2 .hv2-sidecta__title { font-size: var(--fs-20); font-weight: 600; line-height: 1.4; color: #ffffff; }
.hv2 .hv2-sidecta__body { font-size: var(--fs-14); line-height: 1.43; color: #ffffff; }
.hv2 .hv2-sidecta__btn { min-height: 48px; padding: 0 12px; font-size: var(--fs-16); }
.hv2 .hv2-sidecta__btn .hv2-btn__icon { width: 20px; height: 20px; }

.hv2 .hv2-sidegroup { display: flex; flex-direction: column; gap: 16px; }
.hv2 .hv2-sidegroup__title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1.333;
  color: var(--ink);
}
.hv2 .hv2-post__mobile-extra { display: none; }

/* ── FAQ, share row, author ──────────────────────────────────────────────── */
.hv2 .hv2-afaq,
.hv2 .hv2-arefs,
.hv2 .hv2-comp { display: flex; flex-direction: column; gap: max(16px, calc(var(--u) * 24)); margin-top: max(8px, calc(var(--u) * 16)); scroll-margin-top: 24px; }
.hv2 .hv2-afaq__title,
.hv2 .hv2-arefs__title,
.hv2 .hv2-comp__title { font-size: var(--fs-32); font-weight: 600; line-height: 1.25; color: var(--ink); }
.hv2 .hv2-afaq__item { border-bottom: 1px solid var(--ink-3); }
.hv2 .hv2-afaq__item.is-open { border-bottom-color: var(--red); }
.hv2 .hv2-afaq__q button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: max(16px, calc(var(--u) * 24));
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink-3);
}
.hv2 .hv2-afaq__item.is-open .hv2-afaq__q button { padding-bottom: 16px; color: var(--ink); }
.hv2 .hv2-afaq__q svg { flex: none; width: 24px; height: 24px; color: var(--ink); }
.hv2 .hv2-afaq__a { padding: 0 max(16px, calc(var(--u) * 24)) max(16px, calc(var(--u) * 24)); }
.hv2 .hv2-afaq__a p { font-size: var(--fs-18); line-height: 1.333; color: var(--ink-2); }

.hv2 .hv2-comp__yes { color: #1f9d55; font-weight: 700; }
.hv2 .hv2-comp__no { color: var(--red); font-weight: 700; }

.hv2 .hv2-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px max(16px, calc(var(--u) * 24));
  margin-top: max(8px, calc(var(--u) * 16));
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hv2 .hv2-share__label { font-size: var(--fs-18); font-weight: 500; color: var(--ink); }
.hv2 .hv2-share__buttons { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.hv2 .hv2-share__btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: #ffffff;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--ink);
}
.hv2 .hv2-share__btn:hover { border-color: var(--ink); color: var(--ink); }
.hv2 .hv2-post-missing { align-items: flex-start; }

/* ── Tablet / phone: one column, contents list collapses ─────────────────── */
@media (max-width: 1024px) {
  .hv2 .hv2-post { grid-template-columns: minmax(0, 1fr); }
  .hv2 .hv2-post__top,
  .hv2 .hv2-post__side,
  .hv2 .hv2-post__body { grid-column: 1; grid-row: auto; }
  .hv2 .hv2-post__side { width: auto; margin-right: 0; justify-self: stretch; }
  .hv2 .hv2-post__sticky { position: static; max-height: none; overflow: visible; }
  .hv2 .hv2-post__side-extra { display: none; }
  .hv2 .hv2-post__mobile-extra { display: flex; flex-direction: column; gap: 28px; margin-top: 16px; }
  .hv2 .hv2-toc { padding: 16px; border: 1px solid var(--line-soft); border-radius: 16px; }
  .hv2 .hv2-toc__head { flex-wrap: nowrap; padding-bottom: 0; border-bottom: 0; }
  .hv2 .hv2-toc__title { flex: 1 1 auto; font-size: 18px; }
  .hv2 .hv2-toc__top { display: none; }
  .hv2 .hv2-toc__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
  }
  .hv2 .hv2-toc__toggle svg { width: 20px; height: 20px; transition: transform 0.2s ease; }
  .hv2 .hv2-toc.is-open .hv2-toc__toggle svg { transform: rotate(180deg); }
  .hv2 .hv2-toc__list { display: none; }
  .hv2 .hv2-toc.is-open .hv2-toc__list { display: flex; padding-top: 8px; }
}

/* References (sources) under the FAQ */
.hv2 .hv2-arefs__list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-16); line-height: 1.6; color: var(--ink-2); }
.hv2 .hv2-arefs__list a { color: var(--ink-2); text-decoration: underline; overflow-wrap: anywhere; }
.hv2 .hv2-arefs__list a:hover { color: var(--red); }

/* ../blog-v2/styles/article.css */
/* Article body: the post's sanitized HTML. Plain elements first, then the
   editor's layout blocks (bl-callout, bl-checklist, bl-steps/bl-step,
   bl-cards/bl-card, bl-cta, bl-pull). */

/* Reading rhythm — every spacing, indent and heading size of the article body.
   Change a value here and every post follows. Sections come from
   articleToc.js (groupSections): section.hv2-sec = an h2 and its content,
   section.hv2-subsec = an h3 and its content inside it. */
.hv2 .hv2-article {
  --a-text: max(17px, calc(var(--u) * 19));   /* body text */
  --a-leading: 1.7;                            /* body line height */
  --a-gap: 1.15em;                             /* between paragraphs, lists, tables */
  --a-sec-gap: 2.75em;                         /* above each h2 section (half above the divider, half below) */
  --a-sub-gap: 2em;                            /* above each h3 subsection */
  --a-head-gap: 0.6em;                         /* heading → its first paragraph */
  --a-sec-indent: 24px;                        /* content under an h2 */
  --a-sub-indent: 20px;                        /* h3 subsection, inside its h2 section */
  --a-h2: max(26px, calc(var(--u) * 38));
  --a-h3: max(21px, calc(var(--u) * 27));
  --a-h4: max(18px, calc(var(--u) * 21));
  font-size: var(--a-text);
  line-height: var(--a-leading);
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.hv2 .hv2-article :is(.hv2-sec, .hv2-subsec) { display: block; }
.hv2 .hv2-article > * + *,
.hv2 .hv2-article :is(.hv2-sec, .hv2-subsec) > * + * { margin-top: var(--a-gap); }

/* Sections: a thin divider and generous space between h2 sections; the
   content under an h2 is indented, and each h3 subsection is indented again
   with a rule down its left side, so the outline reads at a glance. */
.hv2 .hv2-article > .hv2-sec { margin-top: var(--a-sec-gap); }
.hv2 .hv2-article > .hv2-sec + .hv2-sec {
  padding-top: var(--a-sec-gap);
  border-top: 1px solid var(--line-soft);
}
.hv2 .hv2-article .hv2-sec > :not(h2) { margin-left: var(--a-sec-indent); }
.hv2 .hv2-article .hv2-sec > .hv2-subsec {
  margin-top: var(--a-sub-gap);
  padding-left: var(--a-sub-indent);
  border-left: 3px solid var(--line-soft);
}
.hv2 .hv2-article :is(h2, h3, h4) + * { margin-top: var(--a-head-gap) !important; }

.hv2 .hv2-article :where(h2, h3, h4) { color: var(--ink); scroll-margin-top: 24px; }
.hv2 .hv2-article h1,
.hv2 .hv2-article h2 { font-size: var(--a-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.hv2 .hv2-article h3 { font-size: var(--a-h3); font-weight: 700; line-height: 1.3; }
.hv2 .hv2-article h4 { font-size: var(--a-h4); font-weight: 600; line-height: 1.35; }

@media (max-width: 768px) {
  .hv2 .hv2-article { --a-sec-indent: 0px; --a-sub-indent: 14px; --a-sec-gap: 2.25em; }
}
.hv2 .hv2-article p { font-size: inherit; line-height: inherit; color: inherit; }
.hv2 .hv2-article :where(strong, b) { font-weight: 600; color: var(--ink); }
.hv2 .hv2-article a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.hv2 .hv2-article a:hover { color: var(--red-hover); }
.hv2 .hv2-article hr { height: 0; border: 0; border-top: 1px solid var(--line-soft); }
.hv2 .hv2-article mark { padding: 0 2px; border-radius: 2px; background: rgba(221, 57, 60, 0.14); color: inherit; }

/* Lists: dotted bullets, numbered dark circles. */
.hv2 .hv2-article ul > li,
.hv2 .hv2-article ol > li { position: relative; }
.hv2 .hv2-article :where(ul, ol) > li + li { margin-top: 16px; }
.hv2 .hv2-article ul > li { padding-left: 24px; }
.hv2 .hv2-article ul > li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-2);
}
.hv2 .hv2-article ol { counter-reset: bl-ol; }
.hv2 .hv2-article ol > li {
  counter-increment: bl-ol;
  min-height: 36px;
  padding: 6px 0 0 52px;
  font-weight: 500;
}
.hv2 .hv2-article ol > li::before {
  content: counter(bl-ol);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.hv2 .hv2-article li > :where(ul, ol) { margin-top: 12px; }

.hv2 .hv2-article blockquote {
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--line);
  font-size: var(--fs-20);
  color: var(--ink);
}

/* Media */
.hv2 .hv2-article img { width: 100%; height: auto; border-radius: max(12px, calc(var(--u) * 16)); }
.hv2 .hv2-article figure { margin: 0; }
.hv2 .hv2-article figcaption { margin-top: 8px; font-size: var(--fs-14); color: var(--ink-3); text-align: center; }
.hv2 .hv2-article iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: max(12px, calc(var(--u) * 16)); }
/* "Watch on YouTube" link the API adds under each embed (views/blogPages.js decorateYoutube). */
.hv2 .hv2-article .blog-video-link { display: inline-block; margin-top: 8px; font-size: var(--fs-14); }
/* Long bare URLs wrap instead of widening the page on phones. */
.hv2 .hv2-article a { overflow-wrap: anywhere; }

/* Audio player (editor "Audio" block, blog-editor/mediaNodes.js). */
.hv2 .hv2-article figure.bl-audio {
  padding: max(14px, calc(var(--u) * 20));
  border: 1px solid var(--line-soft);
  border-radius: max(16px, calc(var(--u) * 24));
  background: #ffffff;
}
.hv2 .hv2-article figure.bl-audio audio { display: block; width: 100%; }
.hv2 .hv2-article figure.bl-audio figcaption { margin: 0 0 10px; font-weight: 600; color: var(--ink); text-align: left; }
.hv2 .hv2-article code { padding: 1px 6px; border-radius: 4px; background: #f3f3f3; font-size: 0.9em; color: var(--ink); }
.hv2 .hv2-article pre { padding: 16px; border-radius: 12px; background: #f7f7f7; overflow-x: auto; }
.hv2 .hv2-article pre code { padding: 0; background: transparent; }

/* Tables (also the comparison block) */
.hv2 .hv2-article table,
.hv2 .hv2-article__table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line-soft);
  border-radius: max(16px, calc(var(--u) * 24));
  overflow: hidden;
  font-size: var(--fs-18);
  line-height: 1.333;
}
.hv2 .hv2-article__table { overflow-x: auto; }
/* Wide enough that cells wrap between words, never inside one; narrower
   screens scroll the table sideways instead of squeezing it. */
.hv2 .hv2-article .hv2-article__table table { min-width: 560px; }
.hv2 :where(.hv2-article, .hv2-article__table) :where(th, td) { overflow-wrap: normal; hyphens: manual; }
.hv2 :where(.hv2-article, .hv2-article__table) :where(th, td) {
  padding: max(14px, calc(var(--u) * 24));
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.hv2 :where(.hv2-article, .hv2-article__table) th { background: rgba(0, 0, 0, 0.03); font-weight: 500; color: var(--ink); }
.hv2 :where(.hv2-article, .hv2-article__table) :where(td:first-child) { color: var(--ink); }
.hv2 :where(.hv2-article, .hv2-article__table) tr:last-child > td { border-bottom: 0; }
.hv2 .hv2-article__table .is-first { background: rgba(221, 57, 60, 0.06); font-weight: 500; }
.hv2 .hv2-article caption { padding-bottom: 8px; font-size: var(--fs-14); color: var(--ink-3); text-align: left; }
@media (max-width: 768px) {
  .hv2 .hv2-article table { display: block; overflow-x: auto; }
}

/* ── Editor layout blocks ────────────────────────────────────────────────── */
.hv2 .hv2-article :is(.bl-callout, .bl-step, .bl-card, .bl-cta) > * + * { margin-top: 12px; }
.hv2 .hv2-article :is(.bl-callout, .bl-step, .bl-card) > :is(h3, h4):first-child { font-size: var(--fs-18); font-weight: 500; line-height: 1.333; }

/* Info box (grey); --accent is the white, red-outlined promo variant whose
   button paragraph (p > a.bl-btn) sits on the right. */
.hv2 .hv2-article .bl-callout {
  padding: max(16px, calc(var(--u) * 24));
  border-radius: max(16px, calc(var(--u) * 24));
  background: rgba(0, 0, 0, 0.03);
}
.hv2 .hv2-article .bl-callout--accent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
  border: 1px solid var(--red);
  background: #ffffff;
}
.hv2 .hv2-article .bl-callout--accent > * { grid-column: 1; }
.hv2 .hv2-article .bl-callout--accent > p:has(> a.bl-btn) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* Checklist: empty square boxes. */
.hv2 .hv2-article ul.bl-checklist > li { padding-left: 40px; }
.hv2 .hv2-article ul.bl-checklist > li::before {
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-2);
  border-radius: 2px;
  background: transparent;
}

/* Step cards: red uppercase label, three across. */
.hv2 .hv2-article .bl-steps,
.hv2 .hv2-article .bl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hv2 .hv2-article :is(.bl-step, .bl-card) {
  padding: max(16px, calc(var(--u) * 24));
  border: 1px solid var(--line-soft);
  border-radius: max(16px, calc(var(--u) * 24));
  background: #ffffff;
}
.hv2 .hv2-article .bl-step > :first-child {
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
}

/* Cards: two across; --soft is the pink tint, columns fit the content. */
.hv2 .hv2-article .bl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hv2 .hv2-article .bl-cards--soft { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hv2 .hv2-article .bl-cards--soft > .bl-card { border-color: transparent; background: rgba(221, 57, 60, 0.1); }
.hv2 .hv2-article .bl-card > :first-child { color: var(--ink); }

/* Dark call-to-action box. */
.hv2 .hv2-article .bl-cta {
  padding: max(20px, calc(var(--u) * 24));
  border-radius: max(16px, calc(var(--u) * 24));
  background: var(--ink);
  color: #ffffff;
}
.hv2 .hv2-article .bl-cta :where(h2, h3, h4, p, strong, b) { color: #ffffff; }
.hv2 .hv2-article .bl-cta > :is(h2, h3, h4):first-child { font-size: var(--fs-24); font-weight: 600; line-height: 1.333; }

/* Button link (a.bl-btn) — used inside bl-cta and bl-callout--accent. */
.hv2 .hv2-article a.bl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: max(44px, calc(var(--u) * 56));
  padding: 0 max(16px, calc(var(--u) * 24));
  border-radius: 999px;
  background: var(--red);
  font-size: var(--fs-18);
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.hv2 .hv2-article a.bl-btn::after { content: '\2197'; font-size: 0.9em; }
.hv2 .hv2-article a.bl-btn:hover { background: var(--red-hover); color: #ffffff; }
.hv2 .hv2-article .bl-cta a.bl-btn { min-height: max(48px, calc(var(--u) * 64)); font-size: var(--fs-20); }

/* Pull quote: red text on a red rule. */
.hv2 .hv2-article blockquote.bl-pull {
  padding: max(12px, calc(var(--u) * 16)) max(20px, calc(var(--u) * 32));
  border-left: 2px solid var(--red);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1.333;
  color: var(--red);
}
.hv2 .hv2-article blockquote.bl-pull :where(p, strong) { color: inherit; }

@media (max-width: 768px) {
  .hv2 .hv2-article :is(.bl-steps, .bl-cards) { grid-template-columns: minmax(0, 1fr); }
  .hv2 .hv2-article .bl-callout--accent { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .hv2 .hv2-article .bl-callout--accent > p:has(> a.bl-btn) { grid-column: 1; grid-row: auto; }
}

/* blog-ssr.css */
/* SSR-only additions for the server-rendered blog (TOC, FAQ toggles, share
   buttons) — behaviour React handles in components. */

/* Browse-by-topic: every tab's cards are rendered up front; the unchosen
   panels carry [hidden], which the grid's display rule would override. */
.hv2 .hv2-topics__grid[hidden] { display: none; }

/* features.css */
/* Public Site design for the server-rendered feature pages (/features,
   /features/:slug and /vi twins) — views/publicSite/features.js.
   Built from the home page's pieces (base.css tokens, .hv2-heading,
   .hv2-btn, .hv2-checks, .hv2-democta) and the blog's post cards; only the
   feature-specific layout lives here. */

.hv2 .hv2-fmain { display: block; }

/* ── Hero: breadcrumb, eyebrow, the page's h1, subhead, CTA + note ───────── */
.hv2 .hv2-fhero {
  display: flex;
  flex-direction: column;
  gap: max(28px, calc(var(--u) * 56));
  padding: max(20px, calc(var(--u) * 40)) var(--pad-x) var(--pad-y);
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(255, 145, 145, 0.16) 0%, rgba(255, 255, 255, 0) 70%),
    #ffffff;
}
.hv2 .hv2-fcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--ink-3);
}
.hv2 .hv2-fcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.hv2 .hv2-fcrumbs a { color: var(--ink-2); }
.hv2 .hv2-fcrumbs a:hover { color: var(--red); }
.hv2 .hv2-fcrumbs__sep { width: 14px; height: 14px; color: var(--ink-3); }
.hv2 .hv2-fhero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(12px, calc(var(--u) * 24));
  max-width: max(calc(var(--u) * 1180), min(100%, 720px));
}
.hv2 .hv2-fhero__eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.hv2 .hv2-fhero__title {
  font-size: var(--fs-80);
  font-weight: 700;
  line-height: 1.125;
  color: var(--ink);
  text-wrap: balance;
}
.hv2 .hv2-fhero__sub {
  max-width: max(calc(var(--u) * 900), min(100%, 560px));
  font-size: var(--fs-24);
  line-height: 1.5;
  color: var(--ink-2);
}
.hv2 .hv2-fhero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: max(10px, calc(var(--u) * 16)) max(16px, calc(var(--u) * 24));
  margin-top: max(8px, calc(var(--u) * 16));
}
.hv2 .hv2-fhero__note { font-size: var(--fs-16); color: var(--ink-3); }
.hv2 .hv2-fhero--404 { padding-top: var(--pad-y); }

/* ── Animated product demo (views/*Anim.js) ──────────────────────────────────
   The demos keep their own device mockups; only their section bands and
   headings are restyled to the Public Site (Google Sans, charcoal, red
   eyebrow, grey band). Selectors carry .hv2 .hv2-fdemo so they win over the
   demo's own <style>, which loads after this sheet. */
.hv2 .hv2-fdemo :is(.feat-turn, .feat-bookanim, .featcal, .feat-pos, .feat-payroll, .feat-campaign, .feat-rewards, .feat-signage, .feat-eas-sec) {
  padding: var(--pad-y) 0;
  background: var(--surface);
}
.hv2 .hv2-fdemo > :is(section, div) + :is(section, div) { padding-top: 0; }
.hv2 .hv2-fdemo .container { max-width: none; padding: 0 var(--pad-x); }
.hv2 .hv2-fdemo :is(.feat-turn-head, .feat-bookanim-head, .featcal-head, .feat-pos-head, .feat-payroll-head, .feat-campaign-head, .feat-rewards-head, .feat-signage-head) {
  max-width: max(calc(var(--u) * 960), min(100%, 640px));
  margin: 0 auto max(24px, calc(var(--u) * 48));
}
.hv2 .hv2-fdemo :is(.feat-turn-head, .feat-bookanim-head, .featcal-head, .feat-pos-head, .feat-payroll-head, .feat-campaign-head, .feat-rewards-head, .feat-signage-head, .feat-eas-copy) .eas-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--red);
}
.hv2 .hv2-fdemo :is(.feat-turn-head, .feat-bookanim-head, .featcal-head, .feat-pos-head, .feat-payroll-head, .feat-campaign-head, .feat-rewards-head, .feat-signage-head, .feat-eas-copy) h2 {
  margin: max(8px, calc(var(--u) * 12)) auto max(8px, calc(var(--u) * 16));
  font-family: var(--font);
  font-size: var(--fs-56);
  font-weight: 600;
  line-height: 1.143;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.hv2 .hv2-fdemo .feat-eas-copy h2 { margin-left: 0; font-size: var(--fs-48); }
.hv2 .hv2-fdemo :is(.feat-turn-head, .feat-bookanim-head, .featcal-head, .feat-pos-head, .feat-payroll-head, .feat-campaign-head, .feat-rewards-head, .feat-signage-head, .feat-eas-copy) p {
  font-family: var(--font);
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--ink-2);
}
/* Employees app: five stacked screens alternate white and grey bands. */
.hv2 .hv2-fdemo .feat-eas-sec { padding: var(--pad-y) 0; }
.hv2 .hv2-fdemo .feat-eas-sec.rev { background: #ffffff; }

/* ── Problem statement ──────────────────────────────────────────────────── */
.hv2 .hv2-fproblem { padding: var(--pad-y) var(--pad-x) 0; }
.hv2 .hv2-fproblem__text {
  max-width: max(calc(var(--u) * 1280), min(100%, 760px));
  padding-left: max(16px, calc(var(--u) * 32));
  border-left: 4px solid transparent;
  border-image: var(--brand-gradient) 1;
  border-image-slice: 1;
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

/* ── Generic section + "How it works" steps ─────────────────────────────── */
.hv2 .hv2-fsection {
  display: flex;
  flex-direction: column;
  gap: max(24px, calc(var(--u) * 48));
  padding: var(--pad-y) var(--pad-x);
}
.hv2 .hv2-fsection--surface { background: var(--surface); }
.hv2 .hv2-fsteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(var(--u) * 320)), 1fr));
  gap: max(24px, calc(var(--u) * 56));
}
.hv2 .hv2-fstep {
  display: flex;
  flex-direction: column;
  gap: max(8px, calc(var(--u) * 12));
  padding-left: max(14px, calc(var(--u) * 24));
  border-left: 1px solid var(--red);
}
.hv2 .hv2-fstep__marker { font-size: var(--fs-16); line-height: 1.5; color: var(--ink-2); }
.hv2 .hv2-fstep__title { font-size: var(--fs-24); font-weight: 600; line-height: 1.333; color: var(--ink); }
.hv2 .hv2-fstep__body { font-size: var(--fs-18); line-height: 1.5; color: var(--plum); }

/* ── Benefits: heading beside the check list ────────────────────────────── */
.hv2 .hv2-fbenefits {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: max(24px, calc(var(--u) * 80));
  padding: var(--pad-y) var(--pad-x);
  background: var(--surface);
}
.hv2 .hv2-fbenefits__list {
  padding: max(24px, calc(var(--u) * 48));
  border-radius: max(16px, calc(var(--u) * 24));
  background: #ffffff;
}
.hv2 .hv2-fbenefits .hv2-checks__item { align-items: flex-start; font-size: var(--fs-20); line-height: 1.4; }
.hv2 .hv2-fbenefits .hv2-checks__icon { margin-top: 1px; }
@media (max-width: 900px) {
  .hv2 .hv2-fbenefits { grid-template-columns: minmax(0, 1fr); }
}

/* ── Feature cards (hub grid + "Explore more features") ──────────────────── */
.hv2 .hv2-fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(var(--u) * 340)), 1fr));
  gap: max(16px, calc(var(--u) * 24));
}
.hv2 .hv2-fgrid > li { display: flex; }
.hv2 .hv2-fcard {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: max(10px, calc(var(--u) * 16));
  padding: max(20px, calc(var(--u) * 32));
  border: 1px solid var(--line-soft);
  border-radius: max(16px, calc(var(--u) * 24));
  background: #ffffff;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.hv2 .hv2-fcard:hover {
  border-color: var(--red);
  box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.hv2 .hv2-fcard:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hv2 .hv2-fcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(44px, calc(var(--u) * 64));
  height: max(44px, calc(var(--u) * 64));
  border-radius: 999px;
  background: var(--site-pink-soft, #FCEBEB);
  color: var(--red);
}
.hv2 .hv2-fcard__icon svg { width: max(22px, calc(var(--u) * 30)); height: max(22px, calc(var(--u) * 30)); }
.hv2 .hv2-fcard__name { font-size: var(--fs-24); font-weight: 600; line-height: 1.333; color: var(--ink); }
.hv2 .hv2-fcard__desc { flex: 1; font-size: var(--fs-18); line-height: 1.45; color: var(--ink-2); }
.hv2 .hv2-fcard__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--red);
}
.hv2 .hv2-fcard__arrow { width: max(18px, calc(var(--u) * 22)); height: max(18px, calc(var(--u) * 22)); transition: transform 200ms ease; }
.hv2 .hv2-fcard:hover .hv2-fcard__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .hv2 .hv2-fcard, .hv2 .hv2-fcard__arrow { transition: none; }
  .hv2 .hv2-fcard:hover { transform: none; }
}

/* ── Guides: the blog's card grid at three columns (1–3 related posts), so
   cards keep the blog's card size however many there are. ──────────────── */
.hv2 .hv2-fguides .hv2-bsection__intro .hv2-desc { color: var(--ink-2); }
.hv2 .hv2-fguides :is(.hv2-cardgrid--3, .hv2-cardgrid--2, .hv2-cardgrid--1) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .hv2 .hv2-fguides :is(.hv2-cardgrid--3, .hv2-cardgrid--2, .hv2-cardgrid--1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hv2 .hv2-fguides :is(.hv2-cardgrid--3, .hv2-cardgrid--2, .hv2-cardgrid--1) { grid-template-columns: minmax(0, 1fr); }
}

/* ── FAQ accordion (same look as the home page's, sized for long questions) */
.hv2 .hv2-ffaq {
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(var(--u) * 48));
  padding: var(--pad-y) var(--pad-x);
}
.hv2 .hv2-ffaq .hv2-faq__title { font-size: var(--fs-56); font-weight: 700; line-height: 1.25; color: var(--ink); }
.hv2 .hv2-ffaq .hv2-faq__list { display: flex; flex-direction: column; gap: max(4px, calc(var(--u) * 12)); }
.hv2 .hv2-ffaq .hv2-faq__item {
  padding: max(18px, calc(var(--u) * 36)) 0;
  border-bottom: 1px solid var(--ink-3);
}
.hv2 .hv2-ffaq .hv2-faq__item.is-open {
  border-bottom: 4px solid transparent;
  border-image: var(--brand-gradient) 1;
}
.hv2 .hv2-ffaq .hv2-faq__q { font-size: inherit; line-height: inherit; }
.hv2 .hv2-ffaq .hv2-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(16px, calc(var(--u) * 48));
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--fs-32);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-2);
}
.hv2 .hv2-ffaq .hv2-faq__toggle:hover { color: var(--ink); }
.hv2 .hv2-ffaq .hv2-faq__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.hv2 .hv2-ffaq .hv2-faq__item.is-open .hv2-faq__toggle { color: var(--ink); }
.hv2 .hv2-ffaq .hv2-faq__icon {
  flex: none;
  width: max(24px, calc(var(--u) * 40));
  height: max(24px, calc(var(--u) * 40));
  color: var(--ink);
  stroke-width: 1.5;
}
.hv2 .hv2-ffaq .hv2-faq__icon--minus,
.hv2 .hv2-ffaq .hv2-faq__item.is-open .hv2-faq__icon--plus { display: none; }
.hv2 .hv2-ffaq .hv2-faq__item.is-open .hv2-faq__icon--minus { display: block; }
.hv2 .hv2-ffaq .hv2-faq__a { margin-top: max(10px, calc(var(--u) * 24)); }
.hv2 .hv2-ffaq .hv2-faq__a p { max-width: max(calc(var(--u) * 1280), min(100%, 760px)); font-size: var(--fs-20); line-height: 1.55; color: var(--ink-2); }

/* ── Closing headline: black, flowing into the footer's dark band ───────── */
.hv2 .hv2-ffinal { background: #000000; }
.hv2 .hv2-ffinal .hv2-final__title { font-size: var(--fs-80); text-wrap: balance; }
/* The first demo's eyebrow repeats the hero's (the feature name). */
.hv2 .hv2-fdemo > section:first-child :is(.feat-turn-head, .feat-bookanim-head, .feat-pos-head, .feat-payroll-head, .feat-campaign-head, .feat-rewards-head, .feat-signage-head) .eas-eyebrow { display: none; }

/* jobs.css */
/* SimpliNail Jobs — server-rendered pages (backend/src/jobboard/views.js).
   Reuses the feature pages' hero (.hv2-fhero*) and the home page tokens;
   only the job-board layout lives here. Phone first. */

.hv2 .hv2-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hv2 .hv2-jhero { padding-bottom: max(24px, calc(var(--u) * 48)); }
.hv2 .hv2-jsection { padding: 0 var(--pad-x) var(--pad-y); display: flex; flex-direction: column; gap: 20px; }
.hv2 .hv2-jh2 { font-size: var(--fs-32); font-weight: 700; color: var(--ink); margin: 8px 0 0; }

/* ── Filters ─────────────────────────────────────────────────────────────── */
.hv2 .hv2-jfilters {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 16px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface);
}
.hv2 .hv2-jfilters label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-16); color: var(--ink-2); }
.hv2 .hv2-jfilters select,
.hv2 .hv2-jfilters input,
.hv2 .hv2-junlock input,
.hv2 .hv2-jreport textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); min-width: 0;
}
.hv2 .hv2-jfilters button { justify-content: center; }
.hv2 .hv2-jcount { color: var(--ink-3); font-size: var(--fs-16); margin: 0; }
.hv2 .hv2-jempty { color: var(--ink-2); font-size: var(--fs-18); }

/* ── Job cards ───────────────────────────────────────────────────────────── */
.hv2 .hv2-jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.hv2 .hv2-jcard { border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.hv2 .hv2-jcard:hover { border-color: var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.hv2 .hv2-jcard.is-boosted { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.hv2 .hv2-jcard__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
.hv2 .hv2-jcard__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.hv2 .hv2-jcard__img--empty { display: grid; place-items: center; font-size: 40px; }
.hv2 .hv2-jcard__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.hv2 .hv2-jcard__tag {
  align-self: flex-start; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: 999px; padding: 3px 10px;
}
.hv2 .hv2-jcard__title { font-size: var(--fs-20); font-weight: 700; color: var(--ink); line-height: 1.3; }
.hv2 .hv2-jcard__meta { color: var(--ink-2); font-size: var(--fs-16); }
.hv2 .hv2-jcard__pay { color: var(--red); font-weight: 600; font-size: var(--fs-16); }
.hv2 .hv2-jcard__age { color: var(--ink-3); font-size: 13px; }
.hv2 .hv2-jpager { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-2); }
.hv2 .hv2-jpager a { color: var(--red); font-weight: 600; }

/* ── Job page ────────────────────────────────────────────────────────────── */
.hv2 .hv2-jpost { display: flex; flex-direction: column; gap: 16px; padding: max(20px, calc(var(--u) * 40)) var(--pad-x) var(--pad-y); max-width: 880px; }
.hv2 .hv2-jpost__title { font-size: var(--fs-56); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0; text-wrap: balance; }
.hv2 .hv2-jpost__shop { font-size: var(--fs-20); color: var(--ink-2); margin: 0; }
.hv2 .hv2-jclosed { padding: 12px 16px; border-radius: 12px; background: var(--red-soft); color: var(--ink); margin: 0; }
.hv2 .hv2-jfacts { display: grid; gap: 1px; margin: 0; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.hv2 .hv2-jfacts > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 12px; padding: 12px 16px; background: #fff; }
.hv2 .hv2-jfacts dt { color: var(--ink-3); font-size: var(--fs-16); }
.hv2 .hv2-jfacts dd { margin: 0; color: var(--ink); font-size: var(--fs-18); font-weight: 500; }
.hv2 .hv2-jlicense { margin: 0; color: var(--ink-2); }
.hv2 .hv2-jphotos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.hv2 .hv2-jphotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.hv2 .hv2-jdesc { font-size: var(--fs-18); line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.hv2 .hv2-jnote, .hv2 .hv2-jdates { color: var(--ink-3); font-size: 14px; margin: 0; }
.hv2 .hv2-jorig summary, .hv2 .hv2-jreport summary { cursor: pointer; color: var(--ink-2); }
.hv2 .hv2-jorig > *:not(summary) { margin-top: 8px; color: var(--ink-2); line-height: 1.6; }

/* Unlock box */
.hv2 .hv2-junlock { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); }
.hv2 .hv2-junlock [data-unlock-open] { align-self: flex-start; }
.hv2 .hv2-junlock__panel, .hv2 .hv2-junlock__result { display: flex; flex-direction: column; gap: 10px; }
.hv2 .hv2-junlock__panel[hidden], .hv2 .hv2-junlock__result[hidden], .hv2 .hv2-junlock form[hidden], .hv2 .hv2-junlock [hidden] { display: none; }
.hv2 .hv2-junlock__help { margin: 0; color: var(--ink-2); }
.hv2 .hv2-junlock__row { display: flex; flex-wrap: wrap; gap: 8px; }
.hv2 .hv2-junlock__row input { flex: 1 1 180px; }
.hv2 .hv2-junlock__msg { margin: 0; min-height: 1.4em; color: var(--ink-2); font-size: 14px; }
.hv2 .hv2-junlock__number { margin: 0; font-size: var(--fs-32); font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.hv2 .hv2-junlock__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Report */
.hv2 .hv2-jreport form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hv2 .hv2-jreport fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hv2 .hv2-jreport legend { margin-bottom: 6px; color: var(--ink); font-weight: 600; }
.hv2 .hv2-jreport label { display: flex; gap: 8px; align-items: center; color: var(--ink-2); flex-wrap: wrap; }
.hv2 .hv2-jreport textarea { width: 100%; }
.hv2 .hv2-jreport button { align-self: flex-start; }

/* ── Owners landing + rules ──────────────────────────────────────────────── */
.hv2 .hv2-jsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.hv2 .hv2-jsteps li { padding: 20px; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.hv2 .hv2-jsteps__n { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; }
.hv2 .hv2-jsteps h3 { margin: 0; font-size: var(--fs-20); color: var(--ink); }
.hv2 .hv2-jsteps p, .hv2 .hv2-jrules p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.hv2 .hv2-jrules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.hv2 .hv2-jrules li { padding-left: 16px; border-left: 3px solid var(--red); }
.hv2 .hv2-jrules h2 { margin: 0 0 4px; font-size: var(--fs-20); color: var(--ink); }

/* ── Phase 2: search, list/map, alerts ───────────────────────────────────── */
.hv2 .hv2-jfilters__near { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .hv2 .hv2-jfilters { grid-template-columns: 2fr repeat(3, 1fr) auto; }
  .hv2 .hv2-jfilters__near { grid-column: auto; }
}
.hv2 .hv2-jtabs { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 3px; background: #fff; }
.hv2 .hv2-jtabs button {
  font: inherit; font-size: var(--fs-16); font-weight: 600; border: 0; border-radius: 999px; padding: 8px 18px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.hv2 .hv2-jtabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.hv2 .hv2-jresults__map { min-height: 420px; height: 70vh; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface); }
.hv2 .hv2-jmap__loading { margin: 0; padding: 20px; color: var(--ink-3); }
.hv2 [data-view="list"] .hv2-jresults__map { display: none; }
.hv2 [data-view="map"] .hv2-jresults__list { display: none; }
@media (min-width: 960px) {
  .hv2 .hv2-jtabs { display: none; }
  .hv2 .hv2-jresults { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .hv2 .hv2-jresults .hv2-jresults__list, .hv2 .hv2-jresults .hv2-jresults__map { display: block; }
  /* Not sticky: the page wrapper clips overflow, which made sticky push the map 90px down. */
  .hv2 .hv2-jresults__map { height: min(80vh, 760px); }
  .hv2 .hv2-jresults .hv2-jlist { grid-template-columns: 1fr; }
}
/* Map popup (Google InfoWindow content) */
.hv2-jpop { font-family: var(--site-font, sans-serif); max-width: 260px; color: #333; }
.hv2-jpop img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 8px; }
.hv2-jpop__shop { margin: 0 0 6px; color: #666; font-size: 13px; }
.hv2-jpop__job { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid #EDEDED; color: #333; text-decoration: none; }
.hv2-jpop__job strong { font-size: 14px; }
.hv2-jpop__job span { color: #DD393C; font-weight: 600; font-size: 13px; }
.hv2-jpop__job em { font-style: normal; color: #DD393C; font-size: 13px; }
.hv2-jpop .hv2-jcard__tag { align-self: flex-start; font-size: 10px; padding: 2px 8px; color: #fff; background: #DD393C; border-radius: 999px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Unlock opt-in + alerts page */
.hv2 .hv2-junlock__optin { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-2); font-size: var(--fs-16); }
.hv2 .hv2-junlock__optin input[name="zip"] { width: 96px; flex: 0 0 auto; }
.hv2 .hv2-junlock__consent { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.hv2 .hv2-jalerts { max-width: 640px; }
.hv2 .hv2-jalerts__form { display: flex; flex-direction: column; gap: 14px; }
.hv2 .hv2-jalerts__form > label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.hv2 .hv2-jalerts__form input[name="zip"], .hv2 .hv2-jalerts__form input[type="email"] {
  font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; max-width: 320px;
}
.hv2 .hv2-jalerts__form fieldset { border: 0; margin: 0; padding: 0; }
.hv2 .hv2-jalerts__form legend { color: var(--ink-2); margin-bottom: 8px; }
.hv2 .hv2-jalerts__roles { display: flex; flex-wrap: wrap; gap: 8px; }
.hv2 .hv2-jalerts__roles label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; }
.hv2 .hv2-jalerts__check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; }
.hv2 .hv2-jalerts__check input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.hv2 .hv2-jalerts__check span { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.hv2 .hv2-jalerts__check small { color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.hv2 .hv2-jlinkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.hv2 .hv2-jalerts__form [hidden], .hv2 .hv2-jalerts [hidden] { display: none !important; }
.hv2 .hv2-junlock__row .hv2-junlock__optin input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; margin: 0; }
.hv2 .hv2-junlock__row .hv2-junlock__optin span { flex: 1 1 auto; min-width: 0; }

/* ── Phase 4: city / role link lists ─────────────────────────────────────── */
.hv2 .hv2-jlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hv2 .hv2-jlinks li { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; font-size: var(--fs-16); }
.hv2 .hv2-jlinks a { color: var(--ink); text-decoration: none; font-weight: 500; }
.hv2 .hv2-jlinks a:hover { color: var(--red); }
.hv2 .hv2-jlinks span { color: var(--ink-3); font-size: 13px; }

/* ── Search block (Oct 22): the search bar, the job list and the map are ONE
   block exactly the height of the screen, and the last thing on /jobs. Scroll
   down to it and it docks: the page stops, the bar and the map stay put, and
   only the list scrolls inside it (it can scroll only once docked — see
   APP/BAR script in backend/src/jobboard/views.js). */
.hv2:has(.hv2-jindex) .hv2-menu--page { position: relative; } /* the menu scrolls away */
.hv2:has(.hv2-jindex) .hv2-closing { display: none; }         /* nothing below the block */

.hv2 .hv2-japp {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: #fff; border-top: 1px solid var(--line-soft);
}
.hv2 .hv2-jbar {
  flex: 0 0 auto; background: #fff; border-bottom: 1px solid var(--line-soft);
  padding: 10px var(--pad-x); display: flex; flex-direction: column; gap: 8px;
}
.hv2 .hv2-jbar .hv2-jfilters { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.hv2 .hv2-jfilters__main { display: flex; gap: 8px; align-items: center; }
.hv2 .hv2-jfilters__near { flex: 1 1 auto; min-width: 0; display: block !important; }
.hv2 .hv2-jfilters__near input { width: 100%; box-sizing: border-box; }
.hv2 .hv2-jfilters__toggle {
  flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
.hv2 .hv2-jfilters__toggle[aria-expanded="true"] { border-color: var(--ink); }
.hv2 .hv2-jfilters__go { flex: 0 0 auto; }
.hv2 .hv2-jfilters__more { display: none; grid-template-columns: 1fr; gap: 8px; }
.hv2 .hv2-jfilters.is-open .hv2-jfilters__more { display: grid; }
.hv2 .hv2-jfilters__more label { display: block; }
.hv2 .hv2-jfilters__more select { width: 100%; }
.hv2 .hv2-jbar .hv2-jtabs { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.hv2 .hv2-jbar .hv2-jtabs button { padding: 7px 12px; }

.hv2 .hv2-japp .hv2-jresults { flex: 1 1 auto; min-height: 0; position: relative; display: block; }
.hv2 .hv2-japp .hv2-jresults__list {
  height: 100%; box-sizing: border-box; padding: 16px var(--pad-x) 32px;
  overflow-y: hidden; overscroll-behavior: auto;
}
.hv2 .hv2-japp.is-docked .hv2-jresults__list { overflow-y: auto; }
.hv2 .hv2-japp .hv2-jresults__map { height: 100%; min-height: 0; border-radius: 0; border: 0; }
.hv2 .hv2-japp [data-view="list"] .hv2-jresults__map { display: none; }
.hv2 .hv2-japp [data-view="map"] .hv2-jresults__list { display: none; }
.hv2 .hv2-jresults__list > .hv2-jcount, .hv2 .hv2-jresults__list > .hv2-jnote, .hv2 .hv2-jresults__list > .hv2-jclosed { margin: 0 0 12px; }
.hv2 .hv2-jresults__list > .hv2-jh2 { margin-top: 28px; }

@media (min-width: 960px) {
  .hv2 .hv2-jbar { flex-direction: row; align-items: center; }
  .hv2 .hv2-jbar .hv2-jfilters { display: grid; grid-template-columns: minmax(320px, 1.2fr) minmax(0, 2fr); align-items: center; gap: 8px; flex: 1 1 auto; }
  .hv2 .hv2-jfilters__toggle { display: none; }
  .hv2 .hv2-jfilters__more { display: grid !important; grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .hv2 .hv2-jbar .hv2-jtabs { display: none; }

  .hv2 .hv2-japp .hv2-jresults { display: grid; grid-template-columns: minmax(380px, 40%) 1fr; gap: 0; align-items: stretch; }
  .hv2 .hv2-japp .hv2-jresults--nomap { grid-template-columns: 1fr; }
  .hv2 .hv2-japp .hv2-jresults .hv2-jresults__list,
  .hv2 .hv2-japp .hv2-jresults .hv2-jresults__map { display: block; }
  .hv2 .hv2-japp .hv2-jresults__list { padding: 16px 24px 32px var(--pad-x); }
  .hv2 .hv2-japp .hv2-jresults__map { border-left: 1px solid var(--line-soft); position: static; top: auto; }
}

/* ── Calmer search block (Oct 22): compact cards, white space, inset map. ── */
.hv2 .hv2-jbar { padding: 14px var(--pad-x); }
.hv2 .hv2-japp .hv2-jresults__list { padding: 20px var(--pad-x) 32px; }
.hv2 .hv2-japp .hv2-jlist { grid-template-columns: 1fr; gap: 14px; }
.hv2 .hv2-japp .hv2-jcard { border-radius: 14px; }
.hv2 .hv2-japp .hv2-jcard__link { flex-direction: row; align-items: stretch; }
.hv2 .hv2-japp .hv2-jcard__img { width: 112px; min-width: 112px; height: auto; aspect-ratio: auto; min-height: 112px; }
.hv2 .hv2-japp .hv2-jcard__img--empty { font-size: 28px; }
.hv2 .hv2-japp .hv2-jcard__body { padding: 12px 14px; gap: 3px; min-width: 0; }
.hv2 .hv2-japp .hv2-jcard__title { font-size: 16px; line-height: 1.35; }
.hv2 .hv2-japp .hv2-jcard__meta, .hv2 .hv2-japp .hv2-jcard__pay { font-size: 14px; }
.hv2 .hv2-japp .hv2-jcard__age { font-size: 12.5px; }
.hv2 .hv2-japp .hv2-jcard__tag { font-size: 10.5px; padding: 2px 8px; }
.hv2 .hv2-japp .hv2-jcount { font-size: 14px; }
.hv2 .hv2-japp .hv2-jresults__map { margin: 12px var(--pad-x) 16px; height: calc(100% - 28px); border-radius: 16px; border: 1px solid var(--line-soft); }
@media (min-width: 960px) {
  .hv2 .hv2-japp .hv2-jresults { grid-template-columns: minmax(400px, 42%) 1fr; column-gap: 32px; padding: 0 var(--pad-x); }
  .hv2 .hv2-japp .hv2-jresults__list { padding: 20px 12px 32px 0; }
  .hv2 .hv2-japp .hv2-jresults__map { margin: 20px 0 24px; height: calc(100% - 44px); border-left: 1px solid var(--line-soft); }
  .hv2 .hv2-japp .hv2-jcard__img { width: 132px; min-width: 132px; min-height: 120px; }
}

/* ── Top picks (featured + hot) and numbered pages ─────────────────────────── */
.hv2 .hv2-jpicks { padding: 12px; margin: 0 0 8px; border-radius: 16px; background: #FFF6F6; border: 1px solid #F6DADA; }
.hv2 .hv2-jpicks .hv2-jlist { gap: 10px; }
.hv2 .hv2-jcard__tag--hot { background: #FFF1D6; color: #8A4B00; }
.hv2 .hv2-jcard.is-hot { border-color: #F2D29B; }
.hv2 .hv2-jrest { margin: 20px 0 12px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.hv2 .hv2-jpager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 24px 0 8px; }
.hv2 .hv2-jpager__nums { display: inline-flex; gap: 4px; }
.hv2 .hv2-jpager__num, .hv2 .hv2-jpager__step {
  min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
}
.hv2 a.hv2-jpager__num:hover, .hv2 a.hv2-jpager__step:hover { background: var(--surface); color: var(--red); }
.hv2 .hv2-jpager__num.is-current { background: var(--red); color: #fff; }
.hv2 .hv2-jpager__step { color: var(--red); }
.hv2 .hv2-jpager__step.is-off { color: var(--ink-3); }


/* Shell: the Classic style.css makes every svg display:block, which beats the
   `hidden` attribute — the mobile menu toggle must show one icon at a time. */
.hv2 .hv2-menu__toggle svg[hidden] { display: none; }