/* ═══════════════════════════════════════════════════════════════════════════
   site.css — the BookerAI marketing design system ("hm")

   WHAT THIS IS. `.hm` was born on the home page (templates/home.html) during
   the FREE-TIER-01 rebuild, 2026-09-01 — a dark-title-card-then-warm-paper
   design language: hairline sections, Plus Jakarta Sans 800 display type,
   IBM Plex Mono for figures and index labels, real photography, restrained
   CSS+IntersectionObserver motion, no cards-with-borders on light, no
   gradient text, no glow. It has since become the HOUSE marketing system —
   every public marketing page (pricing, compare pages, articles, legal,
   support, /about, …) extends `templates/_site_base.html` and uses these
   `.hm-*` primitives. Do not rename `.hm` and do not fork a second system.

   WHERE THIS LOADS. `_site_base.html` is the ONLY template that links this
   file. It is never concatenated into `static/css/_bundle.css` (the bundle
   scripts/build_css_bundle.sh assembles for the authenticated app) — a
   marketing page pays for exactly one extra stylesheet, and the app pays for
   none of this. If a class here ever needs to reach an app page, that is a
   sign it should move to booker-v3.css instead, not a reason to add this
   file to the bundle.

   TWO BUNDLE LANDMINES THIS FILE HAS TO DODGE (both proven live, not
   theoretical — see the git history on the home-page rebuild):

   1. HEADING !important. `_bundle.css` carries
        h1..h6{ font-family/weight/line-height/letter-spacing/color/
                margin-top: … !important }
        @media(max-width:600px){ h1{ font-size:1.75rem !important } }
      and an !important declaration outranks any selector specificity. Every
      heading-shaped class in this file (.hm-display, .hm-h2, .hm-h3, and
      .hm-article's internal h2/h3) has to restate font-family/weight/size/
      line-height/letter-spacing/color with !important too, or it renders at
      the bundle's size, the bundle's tracking, and often near-black-on-
      near-black in the dark theme.

   2. THE *grid* SUBSTRING RULE. `_bundle.css` also carries
        @media(max-width:768px){ [class*="grid"]{
          grid-template-columns:1fr !important } }
      which is a SUBSTRING match, not a class-name match. Nothing in this
      file — no selector added here, ever — may be named `*-grid` or it gets
      silently flattened to one column on every phone.

   Both landmines are why this file restates tokens rather than trusting the
   cascade, and why `.site-main-v2`/`.site-header-v2` overrides below exist:
   this stylesheet has to reach INTO the shared app chrome from the outside.
   ═══════════════════════════════════════════════════════════════════════════*/

  /* ══ BookerAI homepage ════════════════════════════════════════════════════
     ONE DARK GROUND. The previous pass alternated white / tint / dark bands,
     which read as a stack of separate boxes rather than one page — and it broke
     outright in dark mode, because layout.html ships a theme toggle and the
     body honours it while this page hard-coded light panels and near-black ink.
     Committing to a single dark treatment fixes the flow and removes the
     failure mode: the page is identical under either theme, on purpose.

     Sections are divided by a hairline and nothing else. No cards, no tints,
     no shadows except on the two objects that are meant to sit ON the page
     (the dashboard and the receipts).

     !important on headings is not decoration. _bundle.css carries
       :7953  h1..h6{ font-family/weight/line-height/letter-spacing/color/
              margin-top: … !important }
       @media(max-width:600px){ h1{ font-size:1.75rem !important } }
     and an !important declaration outranks any selector specificity, so every
     heading here has to restate those or it renders at the wrong size, the
     wrong tracking, and near-black on near-black.

     One more bundle landmine: @media(max-width:768px){ [class*="grid"]{
     grid-template-columns:1fr !important } } is a SUBSTRING match. Nothing on
     this page may be named *-grid.
     ═════════════════════════════════════════════════════════════════════════*/

  /* ── Theme ──────────────────────────────────────────────────────────────
     layout.html always writes data-theme="light" or "dark" onto <html> and
     defaults to light, so LIGHT is the base here and dark is the override.
     Every component reads tokens, so both themes come from one set of rules.

     TWO SECTIONS STAY DARK IN BOTH THEMES, on purpose: the hero is a title
     card built around a dark film, and the arithmetic is the one moment the
     page raises its voice. Everything else follows the toggle. That is two
     deliberate dark moments, not the alternating banding this page had. */
  .hm{
    --gut: clamp(1rem, 4vw, 2rem);
    --sec: clamp(2.75rem, 6vw, 5.5rem);

    --ground:#ffffff;
    --raise:#f8fafc;
    --line:#e8edf4;
    --line-2:#d5dfec;
    --fg:#0f172a;
    --fg-2:#475569;
    --fg-3:#64748b;
    --sky:#0369a1;
    --teal:#0d9488;
    --warm:#9a6b28;   /* --b-gold, finally used — the only warm note in a very cool palette */
    --shadow:0 24px 60px rgba(15,23,42,.10);
    --rc-them-bg:#e6ebf3;  --rc-them-fg:#5b6b85;  --rc-them-total:#0f172a;
    --rc-us-bg:#ffffff;    --rc-us-fg:#334155;    --rc-us-shadow:0 24px 60px rgba(15,23,42,.16);
    --slot-bg:#eff6ff;     --slot-fg:#0c4a6e;
    --dock-bg:rgba(255,255,255,.94);

    --grad: linear-gradient(135deg,#0ea5e9,#14b8a6);
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --disp: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ease: cubic-bezier(.16,1,.3,1);

    background: var(--ground);
    color: var(--fg-2);
    font-family: 'Inter', system-ui, sans-serif;
  }
  [data-theme="dark"] .hm,
  .hm-hero, .hm-math{
    --ground:#070b16;
    --raise:#0e1526;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.16);
    --fg:#ffffff;
    --fg-2:#a9bad4;
    --fg-3:#8195b0;
    --sky:#38bdf8;
    --teal:#2dd4bf;
    --warm:#D9A257;
    --shadow:0 30px 70px rgba(0,0,0,.5);
    --rc-them-bg:#1b2434;  --rc-them-fg:#8fa2bf;  --rc-them-total:#e8eefb;
    --rc-us-bg:#f4f7fb;    --rc-us-fg:#334155;    --rc-us-shadow:0 24px 60px rgba(0,0,0,.45);
    --slot-bg:rgba(56,189,248,.10); --slot-fg:#cfe6f6;
    --dock-bg:rgba(7,11,22,.94);
  }
  /* The two always-dark sections paint their own ground so they read as bands
     against a light page without needing a wrapper. */
  .hm-hero, .hm-math{ background:var(--ground); color:var(--fg-2); }

  .hm *, .hm *::before, .hm *::after{ box-sizing:border-box; }
  .hm [hidden]{ display:none !important; }
  .hm a{ color:var(--sky); }
  .hm a:hover{ color:var(--fg); }   /* #bae6fd was invisible on the light ground */

  /* ── Two things outside .hm that this page has to reach ─────────────────
     This <style> block only ships on `/`, so a bare selector here is scoped to
     the homepage by virtue of where it lives — no global stylesheet is touched.

     1. main.site-main-v2 carries 18.75px of side padding. Stacked on top of
        this page's own gutter that was 35px of a 375px screen given over to
        holding nothing, and it stopped the dark ground reaching the edges, so
        every dark band sat in a pale frame. The page supplies its own gutter.
     2. The shared header is rgba(255,255,255,.75) — and stays white even under
        the site's own dark theme, which is a separate bug worth fixing at the
        source. On a page that is one dark field it has to be dark too. */
  .site-main-v2{ padding-left:0 !important; padding-right:0 !important; }
  .site-header-v2{ background:rgba(7,11,22,.78) !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
    -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; }
  .site-header-v2 .nav-link-v2, .site-header-v2 .logo-v2{ color:#e8eefb !important; }
  .site-header-v2 .nav-link-v2:hover{ color:#fff !important; }

  .hm-wrap{ position:relative; z-index:2; max-width:1180px; margin:0 auto;
    padding-left:var(--gut); padding-right:var(--gut); }
  .hm-sec{ position:relative; padding:var(--sec) 0; border-top:1px solid var(--line); }

  /* ══ LIGHT THEME ═════════════════════════════════════════════════════════
     Not the dark theme with the values flipped. The two read through
     different devices entirely:

       DARK  — a black field. Depth comes from hairlines, glow and grain.
               Surfaces are barely lighter than the ground. The film runs.
       LIGHT — paper. Depth comes from shadow and stacked white cards on a
               warm ground. Hairlines mostly disappear, borders come off the
               cards, the grain and rule-grid come off (they are texture for a
               dark field and read as dirt on paper), and the hero drops the
               film for ink and air.

     The ground is warm (#f5f2ee), not white. It sits with the gold accent and
     the warm photography, and it stops the page looking like a spec sheet —
     which is what pure #fff plus cool slate was doing.
     ═════════════════════════════════════════════════════════════════════════*/
  [data-theme="light"] .hm{
    --ground:#f5f2ee;          /* paper, not white */
    --raise:#ffffff;           /* cards sit ON the paper */
    --line:#e7e0d6;
    --line-2:#d8cfc2;
    --fg:#191512;              /* warm ink, not slate */
    --fg-2:#4c433b;
    --fg-3:#7c7168;
    --sky:#075985;             /* deeper: bright sky is a dark-field accent */
    --teal:#0f766e;
    --warm:#8a5d20;
    --shadow:0 1px 2px rgba(64,48,30,.05), 0 14px 34px rgba(64,48,30,.11);
    --rc-them-bg:#e9e3da;  --rc-them-fg:#6b6157;  --rc-them-total:#191512;
    --rc-us-bg:#ffffff;    --rc-us-fg:#3d352e;    --rc-us-shadow:0 2px 6px rgba(64,48,30,.06), 0 22px 50px rgba(64,48,30,.16);
    --slot-bg:#eaf4f8;     --slot-fg:#0b4a63;
    --dock-bg:rgba(255,255,255,.95);
  }
  /* The hero and the arithmetic are dark bands in the dark theme. On paper
     they are paper too — a black slab dropped into a light page is exactly
     the banding this design got rid of. */
  [data-theme="light"] .hm-hero,
  [data-theme="light"] .hm-math{
    --ground:#f5f2ee; --raise:#ffffff;
    --line:#e7e0d6; --line-2:#d8cfc2;
    --fg:#191512; --fg-2:#4c433b; --fg-3:#7c7168;
    --sky:#075985; --teal:#0f766e; --warm:#8a5d20;
    --shadow:0 1px 2px rgba(64,48,30,.05), 0 14px 34px rgba(64,48,30,.11);
    --slot-bg:#eaf4f8; --slot-fg:#0b4a63;
    background:var(--ground); color:var(--fg-2);
  }
  /* Texture is a dark-field device. On paper it reads as dirt. */
  [data-theme="light"] .hm-hero .hm-film-wrap,
  [data-theme="light"] .hm-rule-overlay{ display:none; }
  [data-theme="light"] .hm-hero::after,
  [data-theme="light"] .hm-math::after{ display:none; }

  /* Structure: dark separates with a rule, light separates with surface.
     Alternate paper and white instead of drawing lines. */
  [data-theme="light"] .hm-sec{ border-top:none; }
  [data-theme="light"] .hm-sec:nth-of-type(even){ background:#ffffff; }
  [data-theme="light"] .hm-band{ border-top:none; }

  /* Cards lose their borders and gain real shadow — that is how a light UI
     builds depth. In the dark theme the border IS the depth. */
  [data-theme="light"] .hm-app,
  [data-theme="light"] .hm-screen,
  [data-theme="light"] .hm-ttp-media,
  [data-theme="light"] .hm-portrait{ border:none; box-shadow:var(--shadow); }
  [data-theme="light"] .hm-app{ background:#fff; }
  [data-theme="light"] .hm-app-bar{ background:#fbf9f6; }
  [data-theme="light"] .hm-screen{ background:#fff; }
  [data-theme="light"] .hm-screen-bar{ background:#fbf9f6; color:var(--fg-3); }
  [data-theme="light"] .hm-screen-bar .hm-idx{ color:var(--fg-3); }
  [data-theme="light"] .hm-stats{ background:var(--line); border-color:var(--line); }
  [data-theme="light"] .hm-stats > div{ background:#fff; }
  [data-theme="light"] .hm-approved{ background:#0f766e; }
  [data-theme="light"] .hm-approved .hm-idx{ color:#a7f3d0; }
  [data-theme="light"] .hm-approved p{ color:#fff; }
  [data-theme="light"] .hm-spec{ border-top:1px solid var(--line); }
  [data-theme="light"] .hm-spec-row > div{ border-left-color:var(--line); }
  [data-theme="light"] .hm-dial-top .hm-idx{ color:var(--fg-3) !important; }
  [data-theme="light"] .hm input[type=range]::-webkit-slider-runnable-track,
  [data-theme="light"] .hm input[type=range]::-moz-range-track{ background:var(--line-2); }
  [data-theme="light"] .hm-bar{ background:#e7e0d6; }
  [data-theme="light"] .hm-bar-fill--them{
    background:repeating-linear-gradient(115deg,#cfc6b9 0 8px,#dad2c6 8px 16px); }
  [data-theme="light"] .hm-table thead .hm-th-us{ color:var(--sky); }
  [data-theme="light"] .hm-table tbody .hm-td-us{ background:rgba(7,89,133,.06); }
  [data-theme="light"] .hm-btn{ box-shadow:0 10px 26px rgba(7,89,133,.22); }
  [data-theme="light"] .site-header-v2.hm-stuck{
    background:rgba(245,242,238,.88) !important;
    border-bottom-color:var(--line) !important; }
  [data-theme="light"] .site-header-v2 .nav-link-v2,
  [data-theme="light"] .site-header-v2 .logo-v2{ color:#191512 !important; }
  [data-theme="light"] .site-header-v2 .b-theme-toggle,
  [data-theme="light"] .site-header-v2 .hamburger-v2{ color:#191512 !important; }

  /* ── Voice ──────────────────────────────────────────────────────────────*/
  .hm-fig{ font-family:var(--mono); font-variant-numeric:tabular-nums;
    font-weight:500; letter-spacing:-.02em; }
  .hm-idx{ font-family:var(--mono); font-size:.6875rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; margin:0; }
  .hm-mute{ color:var(--fg-3); }
  .hm-sky{ color:var(--sky); }
  .hm-teal{ color:var(--teal); }
  .hm-green{ color:var(--teal); }

  .hm-display{ font-family:var(--disp) !important; font-weight:800 !important;
    font-size:clamp(2.5rem,7vw,5rem) !important; line-height:.94 !important;
    letter-spacing:-.05em !important; color:var(--fg) !important;
    margin:0 0 1.25rem !important; max-width:14ch; }
  /* Long H1s (17+ characters on a line) in a two-column hero cannot hold two lines at the
     5rem display size — the copy column is ~600px at 1440. One step down keeps the
     authored <br> break instead of orphaning the last word. Used by pricing, online
     booking, switch, the product tour and vs Square. */
  .hm-display--long{ font-size:clamp(2.25rem,4.6vw,4rem) !important; max-width:none; }
  .hm-h2{ font-family:var(--disp) !important; font-weight:800 !important;
    font-size:clamp(1.875rem,4.4vw,3.25rem) !important; line-height:1.02 !important;
    letter-spacing:-.045em !important; color:var(--fg) !important;
    margin:0 0 var(--sec-gap,1.75rem) !important; }
  .hm-lead{ font-size:clamp(1rem,1.5vw,1.1875rem); line-height:1.6; color:var(--fg-2);
    margin:-.75rem 0 2rem; max-width:44ch; }
  .hm-fine{ margin:2rem 0 0; font-size:.8125rem; line-height:1.6; color:var(--fg-3);
    max-width:80ch; }

  .hm a.hm-btn, .hm a.hm-dock-btn{ color:#fff; }
  .hm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    min-height:52px; padding:0 1.75rem; border-radius:10px; background:var(--grad);
    color:#fff; font-family:var(--disp); font-weight:700; font-size:1rem;
    text-decoration:none; transition:transform .25s var(--ease); }
  .hm-btn:hover{ transform:translateY(-2px); color:#fff; }
  .hm-link{ display:inline-flex; align-items:center; min-height:52px;
    font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; color:var(--sky); text-decoration:underline;
    text-decoration-thickness:1px; text-underline-offset:.5em;
    text-decoration-color:rgba(56,189,248,.35); }
  .hm-link:hover{ text-decoration-color:var(--sky); }
  .hm-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.75rem; }

  /* ── Hero ───────────────────────────────────────────────────────────────*/
  .hm-hero{ position:relative; overflow:hidden; border-top:none; }
  .hm-film-wrap{ position:absolute; inset:0; z-index:0; }
  .hm-film{ width:100%; height:100%; object-fit:cover; display:block; opacity:.2; }
  /* The poster is the film's LAST frame — right for reduced motion, wrong as a
     first frame, because autoplay would pop from a bright settled surface to a
     near-black frame 0. Hide it until the film is genuinely rolling. */
  .hm-hero.is-filming .hm-film{ opacity:0; }
  .hm-hero.is-filming.is-rolling .hm-film{ opacity:.2; transition:opacity .5s ease; }
  .hm-scrim{ position:absolute; inset:0; display:block; pointer-events:none;
    background:linear-gradient(100deg, var(--ground) 34%, rgba(7,11,22,.86) 62%, rgba(7,11,22,.6) 100%); }
  .hm-hero-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px);
    gap:clamp(2rem,4vw,4rem); align-items:center;
    padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(2.5rem,5vw,4.5rem); }
  .hm-hero-line{ font-family:var(--disp); font-weight:700;
    font-size:clamp(1.1875rem,2.1vw,1.625rem); line-height:1.3; letter-spacing:-.025em;
    color:var(--fg-2); margin:0 0 2rem; }
  .hm-hero-line em{ font-style:normal; color:var(--fg); }

  .hm-app{ background:var(--raise); border:1px solid var(--line-2); border-radius:14px;
    overflow:hidden; box-shadow:var(--shadow); }
  .hm-app-bar{ display:flex; justify-content:space-between; padding:.875rem 1.125rem;
    border-bottom:1px solid var(--line); color:var(--fg-3); }
  .hm-app-body{ padding:.5rem 1.125rem 1.125rem; }
  .hm-appt{ display:grid; grid-template-columns:52px 1fr auto; gap:.875rem;
    align-items:center; padding:.8125rem 0; border-bottom:1px solid var(--line); }
  .hm-appt > .hm-fig:first-child{ font-size:.75rem; color:var(--fg-3); }
  .hm-appt span b{ display:block; font-size:.875rem; font-weight:600; color:var(--fg); }
  .hm-appt span{ font-size:.75rem; color:var(--fg-3); }
  .hm-appt > .hm-fig:last-child{ font-size:.9375rem; color:var(--fg); }
  .hm-app-total{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
    padding-top:1.125rem; }
  .hm-app-total .hm-fig{ font-size:1.5rem; font-weight:600; color:var(--fg);
    margin-left:auto; }
  .hm-app-total .hm-green{ flex-basis:100%; text-align:right; }

  .hm-spec{ border-top:1px solid var(--line); position:relative; z-index:2; }
  .hm-spec-row{ display:grid; grid-template-columns:repeat(4,1fr); }
  /* Four short mono figures fit a phone four-up on purpose; minmax(0,1fr) is the
     overflow guard (and the collapse rule the overflow linter looks for). */
  @media (max-width:480px){ .hm-spec-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
  .hm-spec-row > div{ padding:clamp(1rem,2.4vw,1.75rem) 0 clamp(1.125rem,2.4vw,1.875rem);
    padding-left:clamp(.625rem,1.6vw,1.5rem); border-left:1px solid var(--line); }
  .hm-spec-row > div:first-child{ border-left:none; padding-left:0; }
  .hm-spec-row b{ display:block; font-size:clamp(1.375rem,3vw,2.5rem); font-weight:500;
    line-height:1; color:var(--fg); }
  .hm-spec-row .hm-idx{ display:block; margin-top:.5rem; color:var(--fg-3);
    font-size:.5625rem; letter-spacing:.13em; }

  /* ── Receipts ───────────────────────────────────────────────────────────*/
  .hm-receipts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2.5rem);
    align-items:start; }
  .hm-rc--them{ transform:rotate(-.7deg); }
  .hm-rc--us{ transform:rotate(.5deg); }
  .hm-rc-body{ padding:clamp(1.25rem,2.4vw,1.875rem) clamp(1.25rem,2.4vw,1.875rem) 1.5rem; }
  .hm-rc--them .hm-rc-body{ background:var(--rc-them-bg); color:var(--rc-them-fg); }
  .hm-rc--us .hm-rc-body{ background:var(--rc-us-bg); color:var(--rc-us-fg);
    box-shadow:var(--rc-us-shadow); }
  .hm-rc-top{ text-align:center; padding-bottom:1rem; margin:0 0 .875rem;
    border-bottom:1px dashed currentColor; opacity:.75; }
  .hm-rc--us .hm-rc-top{ color:#0369a1; opacity:1; }
  .hm-rc-line{ display:flex; align-items:baseline; gap:.5rem; padding:.5rem 0;
    font-size:.8125rem; }
  .hm-rc-line i{ flex:1; border-bottom:1px dotted currentColor; opacity:.4;
    transform:translateY(-4px); }
  .hm-rc-line .hm-fig{ font-size:.875rem; }
  .hm-rc--us .hm-rc-line .hm-fig{ color:#0f172a; }
  .hm-rc--us .hm-rc-line .hm-teal{ color:#0d9488; }
  .hm-rc-total{ display:flex; align-items:baseline; justify-content:space-between;
    margin-top:.875rem; padding-top:1rem; border-top:1px dashed currentColor; }
  .hm-rc-total .hm-fig{ font-size:clamp(1.375rem,2.6vw,1.875rem); font-weight:600; }
  .hm-rc--us .hm-rc-total .hm-fig{ color:#0d9488; }
  .hm-rc--them .hm-rc-total .hm-fig{ color:var(--rc-them-total); }
  .hm-rc-foot{ text-align:center; margin:1rem 0 0; opacity:.6; }
  .hm-perf{ height:12px; background-repeat:repeat-x; background-size:14px 12px; }
  .hm-perf--w{ background-image:radial-gradient(circle at 7px 0, transparent 5.5px, var(--rc-us-bg) 6px); }
  .hm-perf--g{ background-image:radial-gradient(circle at 7px 0, transparent 5.5px, var(--rc-them-bg) 6px); }

  /* ── Arithmetic ─────────────────────────────────────────────────────────*/
  .hm-calc{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:clamp(2rem,5vw,4.5rem); align-items:start; }
  .hm-dial{ padding:0 0 1.5rem; }
  .hm-dial-top{ display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:.5rem; }
  /* !important because a bundle rule paints <label> with --b-text-2 (#334155)
     and outweighs this selector — which put dark-on-dark text on the
     always-dark calculator in BOTH themes. */
  .hm-dial-top .hm-idx{ color:var(--fg-3) !important; }
  .hm-dial-top output{ font-size:1.625rem; color:var(--fg); }
  .hm input[type=range]{ -webkit-appearance:none; appearance:none; width:100%;
    height:44px; background:transparent; outline:none; cursor:ew-resize; margin:0;
    display:block; }
  .hm input[type=range]:focus-visible{ outline:2px solid var(--sky); outline-offset:4px; }
  .hm input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--line-2); }
  .hm input[type=range]::-moz-range-track{ height:2px; background:var(--line-2); }
  .hm input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
    width:16px; height:16px; margin-top:-7px; border-radius:0; rotate:45deg;
    background:var(--sky); box-shadow:0 0 0 4px rgba(56,189,248,.18); }
  .hm input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:0;
    background:var(--sky); border:none; }

  .hm-bignum{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500;
    font-size:clamp(3.75rem,13vw,9rem); line-height:.86; letter-spacing:-.055em;
    color:var(--fg); margin:0; }
  .hm-out-cap{ font-size:clamp(1rem,1.5vw,1.1875rem); line-height:1.55; color:var(--fg-2);
    margin:1.25rem 0 0; max-width:34ch; }
  .hm-out-cap span{ display:block; color:var(--fg-3); font-size:.9375rem; margin-top:.5rem; }
  .hm-out-us{ font-size:1rem; line-height:1.6; color:var(--fg-2); max-width:34ch;
    margin:1.75rem 0 1.75rem; padding-top:1.5rem; border-top:1px solid var(--line); }
  .hm-out-us b{ color:var(--teal); font-weight:500; }

  /* ── Product ────────────────────────────────────────────────────────────*/
  .hm-tabs{ display:flex; gap:.25rem; border-bottom:1px solid var(--line);
    margin-bottom:2rem; overflow-x:auto; scrollbar-width:none; }
  .hm-tabs::-webkit-scrollbar{ display:none; }
  .hm-tab{ font-family:var(--mono); font-size:.6875rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; min-height:44px; padding:0 1rem;
    border:none; border-bottom:2px solid transparent; background:none; color:var(--fg-3);
    cursor:pointer; white-space:nowrap; transition:color .18s, border-color .18s; }
  .hm-tab:hover{ color:var(--fg-2); }
  .hm-tab.is-on{ color:var(--fg); border-bottom-color:var(--sky); }
  .hm-tab:focus-visible{ outline:2px solid var(--sky); outline-offset:-2px; }
  .hm-panel:focus{ outline:none; }
  .hm-screen{ background:var(--raise); border:1px solid var(--line); border-radius:12px;
    overflow:hidden; }
  .hm-screen-bar{ display:flex; justify-content:space-between; padding:.875rem 1.125rem;
    border-bottom:1px solid var(--line); color:var(--fg-3); }
  .hm-day{ padding:.875rem 1.125rem; }
  .hm-day-row{ display:grid; grid-template-columns:54px 1fr; gap:.875rem;
    align-items:center; padding:.25rem 0; }
  .hm-day-row .hm-fig{ font-size:.6875rem; color:var(--fg-3); text-align:right; }
  .hm-slot{ min-height:46px; display:flex; align-items:center; padding:0 .875rem;
    font-size:.875rem; font-weight:600; color:var(--slot-fg);
    background:var(--slot-bg); border-left:2px solid var(--sky); }
  .hm-slot b{ margin-left:auto; font-weight:500; font-size:.8125rem; }
  .hm-slot--open{ background:rgba(255,255,255,.03); border-left-color:var(--line-2);
    color:var(--fg-3); }
  .hm-cap{ font-size:.9375rem; line-height:1.6; color:var(--fg-2); margin:1.25rem 0 0;
    max-width:62ch; }
  .hm-cap b{ color:var(--fg); font-weight:600; }
  .hm-screen--pay{ display:grid; grid-template-columns:1fr 1fr; }
  .hm-charge{ padding:1.5rem; border-right:1px solid var(--line); }
  .hm-charge-n{ font-family:var(--mono); font-variant-numeric:tabular-nums;
    font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.045em; line-height:1;
    color:var(--fg); margin:1rem 0 1.25rem; }
  .hm-charge-svc{ margin:0 0 1.25rem; padding-top:1rem; border-top:1px solid var(--line); }
  .hm-charge-svc b{ display:block; font-size:.9375rem; color:var(--fg); }
  .hm-charge-svc .hm-idx{ display:block; margin-top:.375rem; }
  .hm-charge-btn{ display:block; padding:.875rem; border-radius:8px; text-align:center;
    background:var(--grad); color:#fff; font-family:var(--disp); font-weight:700;
    font-size:.9375rem; }
  .hm-approved{ padding:1.5rem; display:flex; flex-direction:column; justify-content:center; }
  .hm-approved p{ font-family:var(--mono); font-variant-numeric:tabular-nums;
    font-size:clamp(1.75rem,3.4vw,2.5rem); font-weight:500; color:var(--fg);
    line-height:1; margin:.875rem 0; }
  .hm-profile-cover{ height:110px; overflow:hidden; }
  .hm-profile-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hm-profile{ padding:1.25rem; }
  .hm-profile-id{ margin:0 0 1rem; }
  .hm-profile-id b{ display:block; font-family:var(--disp); font-weight:800;
    font-size:1.25rem; letter-spacing:-.028em; color:var(--fg); }
  .hm-profile-id .hm-idx{ display:block; margin-top:.25rem; }
  .hm-slots{ display:flex; flex-wrap:wrap; gap:.375rem; margin-bottom:1.25rem; }
  .hm-slots span{ font-family:var(--mono); font-size:.75rem; padding:.5rem .75rem;
    border:1px solid var(--line-2); color:var(--fg-2); }
  .hm-svc{ display:flex; justify-content:space-between; align-items:baseline;
    padding:.75rem 0; border-top:1px solid var(--line); font-size:.875rem; color:var(--fg); }
  .hm-svc i{ font-style:normal; margin-left:.625rem; }
  .hm-screen--money{ padding:1.25rem; }
  .hm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-bottom:1.25rem; }
  @media (max-width:640px){ .hm-stats{ grid-template-columns:repeat(2,1fr); } }

  .hm-stats > div{ background:var(--raise); padding:1rem; }
  .hm-stats .hm-idx{ display:block; }
  .hm-stats b{ display:block; font-size:clamp(1.125rem,2.2vw,1.625rem); font-weight:500;
    color:var(--fg); margin-top:.5rem; }
  .hm-bars8{ display:flex; align-items:flex-end; gap:.5rem; height:96px; }
  .hm-bars8 > div{ flex:1; display:flex; align-items:flex-end; height:100%; }
  .hm-bars8 span{ width:100%; background:var(--grad); }

  /* ── The list ───────────────────────────────────────────────────────────*/
  .hm-list{ list-style:none; margin:0; padding:0; display:grid;
    grid-template-columns:1fr 1fr; gap:0 clamp(2rem,5vw,4rem); }
  .hm-list li{ display:flex; align-items:baseline; gap:1rem; padding:.9375rem 0;
    border-top:1px solid var(--line); font-size:clamp(.9375rem,1.3vw,1.0625rem);
    color:var(--fg); }
  .hm-tag{ flex-shrink:0; width:2.75rem; font-family:var(--mono); font-size:.625rem;
    font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); }
  .hm-tag--free{ color:var(--teal); }
  .hm-links{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; margin:2rem 0 0; }
  .hm-links a{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:underline; text-underline-offset:.45em;
    text-decoration-color:rgba(56,189,248,.3); }

  /* ── The catch ──────────────────────────────────────────────────────────*/
  .hm-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); }
  .hm-two > div{ padding-top:1.25rem; border-top:1px solid var(--line-2); }
  .hm-two .hm-idx{ margin-bottom:.75rem; }
  .hm-two p:last-child{ font-size:.9375rem; line-height:1.65; color:var(--fg-2); margin:0; }
  .hm-big-line{ font-family:var(--disp); font-weight:700;
    font-size:clamp(1.1875rem,2.2vw,1.75rem); line-height:1.32; letter-spacing:-.028em;
    color:var(--fg); margin:clamp(2rem,4vw,3rem) 0 0; max-width:30ch; }

  /* ── Table ──────────────────────────────────────────────────────────────*/
  .hm-table-wrap{ overflow-x:auto; }
  .hm-table{ width:100%; min-width:560px; border-collapse:collapse; }
  .hm-table th, .hm-table td{ padding:1rem .875rem; text-align:center; }
  .hm-table thead th{ font-family:var(--mono); font-size:.625rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
    border-bottom:1px solid var(--line-2); }
  .hm-table thead .hm-th-us{ color:var(--sky); }
  .hm-table tbody th{ text-align:left; padding-left:0; font-size:.875rem; font-weight:600;
    color:var(--fg); }
  .hm-table tbody td{ font-family:var(--mono); font-size:.8125rem; color:var(--fg-3); }
  .hm-table tbody .hm-td-us{ color:var(--fg); background:rgba(56,189,248,.07); }
  .hm-table tbody tr{ border-bottom:1px solid var(--line); }

  /* ── FAQ ────────────────────────────────────────────────────────────────*/
  .hm-faq{ max-width:56rem; }
  .hm-faq details{ border-top:1px solid var(--line); }
  .hm-faq summary{ display:flex; align-items:center; gap:1rem; padding:1.125rem 0;
    min-height:44px; cursor:pointer; list-style:none; font-family:var(--disp);
    font-weight:700; font-size:clamp(1rem,1.6vw,1.1875rem); letter-spacing:-.024em;
    color:var(--fg); }
  .hm-faq summary::-webkit-details-marker{ display:none; }
  .hm-faq summary:hover{ color:var(--sky); }
  .hm-faq summary:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
  .hm-faq summary i{ margin-left:auto; flex-shrink:0; width:12px; height:12px;
    position:relative; transition:transform .25s var(--ease); }
  .hm-faq summary i::before, .hm-faq summary i::after{ content:""; position:absolute;
    background:var(--fg-3); }
  .hm-faq summary i::before{ left:0; right:0; top:5px; height:2px; }
  .hm-faq summary i::after{ top:0; bottom:0; left:5px; width:2px; }
  .hm-faq details[open] summary i{ transform:rotate(45deg); }
  .hm-faq p{ font-size:.9375rem; line-height:1.7; color:var(--fg-2);
    margin:0 0 1.25rem; max-width:64ch; }

  /* ── Final ──────────────────────────────────────────────────────────────*/
  .hm-final-h{ font-size:clamp(2.25rem,5.5vw,4.25rem) !important; }
  .hm-final-alt{ margin-top:2rem; color:var(--fg-3); }

  /* ── Dock ───────────────────────────────────────────────────────────────*/
  .hm-dock{ display:none; }

  /* ── Photography ────────────────────────────────────────────────────────
     Full bleed and tall. A photograph is the only thing on this page allowed
     to take a whole screen, because openness is exactly what it is for. */
  .hm-band{ position:relative; margin:0; overflow:hidden; border-top:1px solid var(--line);
    background:#0a0f1e; }
  .hm-band img{ display:block; width:100%; height:clamp(22rem,52vh,34rem);
    object-fit:cover; object-position:center 32%;
    transform:scale(1.06); transition:transform 1.6s var(--ease); }
  .hm-band.is-in img{ transform:scale(1); }
  .hm-band figcaption{ position:absolute; inset:auto 0 0 0;
    padding:clamp(1.5rem,5vw,3.5rem) var(--gut);
    background:linear-gradient(to top, rgba(7,11,22,.88), rgba(7,11,22,.35) 55%, transparent); }
  .hm-band-line{ max-width:1180px; margin:0 auto; color:#fff; font-family:var(--disp);
    font-weight:800; font-size:clamp(1.375rem,3.4vw,2.5rem); line-height:1.14;
    letter-spacing:-.035em; }
  .hm-band-line em{ font-style:normal; color:#2dd4bf; }

  /* ── Promises ───────────────────────────────────────────────────────────
     Commitments in our own voice rather than borrowed credibility. There are
     stock faces carrying invented five-star quotes on /browse; that pattern is
     deliberately not repeated here. A barber who has been burned by a
     marketplace can smell a fabricated testimonial, and this page is asking
     them to trust us with their money. */
  .hm-warm{ color:var(--warm); }
  .hm-promise{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
    gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
    margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.75rem,3.5vw,2.5rem);
    border-top:1px solid var(--line); }
  .hm-vows{ list-style:none; margin:1.25rem 0 0; padding:0; }
  .hm-vows li{ position:relative; padding:.75rem 0 .75rem 1.75rem;
    font-family:var(--disp); font-weight:700;
    font-size:clamp(1rem,1.7vw,1.25rem); line-height:1.4; letter-spacing:-.022em;
    color:var(--fg); border-bottom:1px solid var(--line); }
  .hm-vows li::before{ content:""; position:absolute; left:0; top:1.4em;
    width:10px; height:1px; background:var(--warm); }
  .hm-vows li:last-child{ border-bottom:none; }
  .hm-vows-sign{ margin:1.25rem 0 0; color:var(--fg-3); }
  .hm-portrait{ margin:0; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
  .hm-portrait img{ display:block; width:100%; height:clamp(16rem,34vw,24rem);
    object-fit:cover; object-position:center 28%; }

  /* ── Tap to Pay ─────────────────────────────────────────────────────────*/
  .hm-ttp-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46%);
    gap:clamp(1.75rem,4vw,4rem); align-items:center; }
  .hm-ttp-kicker{ margin-bottom:1rem; }
  .hm-ttp-figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
    margin:0 0 1.75rem; padding-top:1.5rem; border-top:1px solid var(--line); }
  .hm-ttp-figs b{ display:block; font-size:clamp(1.5rem,3vw,2.125rem); font-weight:500;
    line-height:1; }
  .hm-ttp-figs .hm-idx{ display:block; margin-top:.5rem; color:var(--fg-3);
    font-size:.5625rem; letter-spacing:.13em; }
  .hm-ttp-media{ border-radius:14px; overflow:hidden; background:#070b16;
    box-shadow:var(--shadow); aspect-ratio:4/3; }
  .hm-ttp-film{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ── Motion ─────────────────────────────────────────────────────────────
     Everything below defaults to its FINAL state. The .hm-anim hook is added
     by the page script, so if that script never runs nothing is left hidden —
     the failure direction is "no animation", never "no content". The hero is
     animated by CSS alone and never by the observer: this page takes paid
     traffic and its headline must not depend on JS. */
  @media (prefers-reduced-motion: no-preference){
    @keyframes hmRise{ from{ opacity:0; transform:translateY(20px); }
                       to{ opacity:1; transform:none; } }
    .hm-hero-copy > *{ animation:hmRise .8s var(--ease) both; }
    .hm-hero-copy > *:nth-child(2){ animation-delay:.09s; }
    .hm-hero-copy > *:nth-child(3){ animation-delay:.18s; }
    .hm-hero-shot{ animation:hmRise 1s var(--ease) .16s both; }
    .hm-spec-row > div{ animation:hmRise .7s var(--ease) both; }
    .hm-spec-row > div:nth-child(2){ animation-delay:.06s; }
    .hm-spec-row > div:nth-child(3){ animation-delay:.12s; }
    .hm-spec-row > div:nth-child(4){ animation-delay:.18s; }

    /* Section reveal, driven by IntersectionObserver — no scroll handler and
       no rAF ticker, so nothing is throttled in a background tab. */
    .hm-anim .hm-sec > .hm-wrap > *{ opacity:0; transform:translateY(16px);
      transition:opacity .7s var(--ease), transform .7s var(--ease); }
    .hm-anim .hm-sec.is-in > .hm-wrap > *{ opacity:1; transform:none; }
    .hm-anim .hm-sec.is-in > .hm-wrap > *:nth-child(2){ transition-delay:.08s; }
    .hm-anim .hm-sec.is-in > .hm-wrap > *:nth-child(3){ transition-delay:.16s; }
    .hm-anim .hm-sec.is-in > .hm-wrap > *:nth-child(4){ transition-delay:.24s; }

    /* Never `transition: all` here. It animates COLOUR, so on a theme switch
       these elements crossfaded over 250ms while everything without a
       transition snapped instantly — for a quarter second the page was half
       light and half dark. That was the "doesn't match" bug. Name the
       properties; the rest already declare their own. */
    .hm-list li{ transition:padding-left .25s var(--ease); }
    .hm-list li:hover{ padding-left:.5rem; }
  }

  /* A theme flip should land everywhere on the same frame. This class is
     applied for ~60ms around the switch so nothing eases between palettes. */
  .hm-theme-shift, .hm-theme-shift *, .hm-theme-shift *::before, .hm-theme-shift *::after{
    transition:none !important; }

  /* ── Header ─────────────────────────────────────────────────────────────
     Transparent over the hero, then it earns a ground once you scroll. The
     .hm-stuck class is set by the page script. */
  .site-header-v2{ background:transparent !important;
    border-bottom:1px solid transparent !important;
    transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
  .site-header-v2.hm-stuck{ background:rgba(7,11,22,.8) !important;
    border-bottom-color:rgba(255,255,255,.1) !important;
    -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; }

  /* Desktop-only / phone-only. Which side of the line a thing falls on is
     decided by one question: does it help someone decide to sign up, or does
     it only look good? Anything that is only decoration at 375px is cut. */
  .hm-m-only{ display:none; }
  /* Mobile annotations. The phone build is cut down, so what survives has to
     say what it is — these answer "what am I looking at" without adding a
     section. */
  .hm-note{ font-family:var(--mono); font-size:.6875rem; line-height:1.65;
    letter-spacing:.02em; color:var(--fg-3); margin:1.25rem 0 0;
    padding-left:.875rem; border-left:2px solid var(--warm); }
  .hm-vs-short{ font-size:1.0625rem; line-height:1.6; color:var(--fg-2);
    margin:0; max-width:40ch; }
  .hm-vs-short b{ color:var(--fg); font-weight:600; }

  /* ══ Phone ═══════════════════════════════════════════════════════════════
     Text keeps a 1rem gutter. Objects do not — a margin either side of a card
     on a 375px screen throws away width to hold nothing. ═══════════════════*/
  @media (max-width:900px){
    .hm-hero-cols{ grid-template-columns:1fr; }
    .hm-calc{ grid-template-columns:1fr; gap:2.25rem; }
    .hm-receipts{ grid-template-columns:1fr; gap:0; }
    .hm-rc--them{ transform:rotate(-1deg) scale(.96); transform-origin:top center; }
    .hm-rc--us{ transform:rotate(.6deg); margin-top:-1rem; position:relative; z-index:2; }
    .hm-two{ grid-template-columns:1fr; gap:1.5rem; }
    .hm-list{ grid-template-columns:1fr; }
    .hm-screen--pay{ grid-template-columns:1fr; }
    .hm-ttp-cols{ grid-template-columns:1fr; }
    .hm-promise{ grid-template-columns:1fr; }
    .hm-charge{ border-right:none; border-bottom:1px solid var(--line); }
  }

  @media (max-width:640px){
    /* THIRD bundle sledgehammer: @media(max-width:768px){ main, main *,
       .container * … { max-width:100% } } — every descendant of <main>. It
       capped these at the container width, so the negative margins moved them
       left without letting them grow and they bled off one edge only. This is
       the only !important on a non-heading property in this file, and it is
       here to beat that rule. */
    /* The authored line break is for the wide layout; on a phone it produced
       a four-line block fighting a busy photograph. Let it flow, drop the
       type a step, and give the image more room above the scrim. */
    .hm-m-hide{ display:none !important; }
    .hm-m-only{ display:block; }

    /* ── Header ────────────────────────────────────────────────────────────
       A 375px bar was carrying 216px of controls — logo, "Start free", theme
       toggle and hamburger — and its "Start free" duplicated the dock's, so
       once you scrolled there were two of them competing. One CTA on screen
       at a time: the hero owns it at the top, the dock owns it after. The
       bar also slides away as you read down and comes back the moment you
       scroll up. */
    .site-header-v2 .nav-cta-v2{ display:none !important; }
    .site-header-v2 .b-theme-toggle, .site-header-v2 .hamburger-v2{
      background:transparent !important; border-color:transparent !important;
      box-shadow:none !important; color:#e8eefb !important; }
    .site-header-v2{ transition:transform .32s var(--ease), background .3s ease,
      border-color .3s ease !important; }
    .site-header-v2.hm-away{ transform:translateY(-101%); }

    .hm-band img{ height:clamp(19rem,58vh,26rem); }
    .hm-band-line{ font-size:1.1875rem; line-height:1.24; }
    .hm-band-line br{ display:none; }
    .hm-band figcaption{ background:linear-gradient(to top,
      rgba(7,11,22,.92), rgba(7,11,22,.55) 48%, transparent); }
    .hm-ttp-media, .hm-portrait{ border-radius:0; }
    .hm-portrait{ margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut));
      max-width:none !important; width:auto !important; }
    .hm-app, .hm-screen, .hm-receipts, .hm-ttp-media{
      margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut));
      max-width:none !important; width:auto !important; }
    .hm-app, .hm-screen{ border-radius:0; border-left:none; border-right:none; }
    .hm-hero-cols{ padding-top:2rem; padding-bottom:1.75rem; gap:1.5rem; }
    .hm-hero-line{ margin-bottom:1.5rem; }
    .hm-btn{ width:100%; }
    .hm-actions{ gap:.25rem; }
    .hm-spec-row > div{ padding-left:.625rem; }
    .hm-stats{ grid-template-columns:repeat(2,1fr); }
    .hm-list li{ padding:.8125rem 0; gap:.75rem; }
    .hm-out-us{ margin:1.25rem 0; padding-top:1.25rem; }
    .hm-table{ min-width:480px; }
    .hm-table th, .hm-table td{ padding:.75rem .5rem; }
    .hm-table tbody th{ font-size:.8125rem; }
    .hm-table tbody td{ font-size:.75rem; }

    .hm-dock{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
      align-items:center; gap:.875rem;
      padding:.625rem var(--gut) calc(.625rem + env(safe-area-inset-bottom,0px));
      background:var(--dock-bg); border-top:1px solid var(--line-2);
      -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
      transform:translateY(110%); transition:transform .3s var(--ease); }
    .hm-dock.is-up{ transform:none; }
    .hm-dock-facts{ display:flex; align-items:baseline; gap:.375rem; flex:1; min-width:0;
      flex-wrap:wrap; }
    .hm-dock-facts b{ font-size:1rem; color:var(--fg); }
    .hm-dock-facts .hm-idx{ color:var(--fg-3); font-size:.5625rem; margin-right:.25rem; }
    .hm-dock-btn{ flex-shrink:0; display:inline-flex; align-items:center;
      justify-content:center; min-height:44px; padding:0 1.25rem; border-radius:9px;
      background:var(--grad); color:#fff; font-family:var(--disp); font-weight:700;
      font-size:.9375rem; text-decoration:none; }
    .hm-final{ padding-bottom:5.5rem; }
  }

  @media (prefers-reduced-motion: reduce){
    .hm *, .hm *::before, .hm *::after{ transition:none !important; animation:none !important; }
    .hm-btn:hover{ transform:none; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     NEW PRIMITIVES — 2026-09-08 site revamp.

     Everything above this line is the home page's original system, moved
     here verbatim. Everything below is new surface added so seven other
     pages (articles, legal, support, /about, …) can extend `_site_base.html`
     without re-deriving the voice. Same tokens, same !important discipline
     on headings, same phone/dark rules as above.
     ═══════════════════════════════════════════════════════════════════════*/

  /* ── h3 ─────────────────────────────────────────────────────────────────
     .hm-display and .hm-h2 both restate the bundle's heading !important —
     .hm-h3 needs the same treatment or a plain <h3> inside a marketing page
     renders at the bundle's size/tracking/colour instead of this system's. */
  .hm-h3{ font-family:var(--disp) !important; font-weight:700 !important;
    font-size:clamp(1.125rem,1.9vw,1.5rem) !important; line-height:1.28 !important;
    letter-spacing:-.03em !important; color:var(--fg) !important;
    margin:0 0 1rem !important; }

  /* ── Compact hero ───────────────────────────────────────────────────────
     For articles, legal, support — anywhere the full-bleed film hero is too
     heavy. Same dark-card treatment (`.hm-hero` already forces dark in both
     themes; light theme's own override still applies since the selector is
     still `.hm-hero`), just shorter and with no video layer. */
  .hm-hero.hm-hero--compact{
    padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(2rem,4vw,3rem); }
  .hm-hero--compact .hm-film-wrap,
  .hm-hero--compact .hm-scrim{ display:none; }
  .hm-hero--compact .hm-display{
    font-size:clamp(2.25rem,5vw,3.75rem) !important; max-width:20ch; }
  .hm-hero-meta{ display:flex; flex-wrap:wrap; align-items:center;
    gap:.5rem 1.25rem; margin:.5rem 0 0; }
  .hm-hero-meta .hm-idx{ margin:0; }

  /* ── Steps ──────────────────────────────────────────────────────────────
     Numbered editorial rows — the CSS counter is the index, not a Jinja
     loop variable, so the markup can just be a plain <ol><li> list. */
  .hm-steps{ list-style:none; margin:0; padding:0; counter-reset:hm-step; }
  .hm-steps > li{ counter-increment:hm-step; position:relative;
    padding:1.75rem 0 1.75rem 3.25rem; border-top:1px solid var(--line); }
  .hm-steps > li:first-child{ border-top:none; padding-top:0; }
  .hm-steps > li::before{ content:counter(hm-step,decimal-leading-zero);
    position:absolute; left:0; top:0; font-family:var(--mono); font-size:.75rem;
    font-weight:600; letter-spacing:.08em; color:var(--warm); }
  .hm-steps > li:first-child::before{ top:0; }
  .hm-steps > li b{ display:block; font-family:var(--disp); font-weight:700;
    font-size:clamp(1.0625rem,1.8vw,1.3125rem); letter-spacing:-.024em;
    color:var(--fg); margin:0 0 .5rem; }
  .hm-steps > li p{ margin:0; font-size:.9375rem; line-height:1.65;
    color:var(--fg-2); max-width:56ch; }
  .hm-steps--two{ display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,4vw,4rem); }

  /* ── Article ────────────────────────────────────────────────────────────
     Long-form module. h2/h3 here restate the SAME !important properties as
     .hm-h2/.hm-h3 above at a smaller scale — the bundle's h1..h6 !important
     rule does not care that these are nested inside a prose block. Verified
     by rendering, not assumed: see the verification checklist. */
  .hm-article{ max-width:68ch; }
  .hm-article p{ margin:0 0 1.5rem; font-size:1.0625rem; line-height:1.7;
    color:var(--fg-2); }
  .hm-article h2{ font-family:var(--disp) !important; font-weight:800 !important;
    font-size:clamp(1.5rem,3vw,2.25rem) !important; line-height:1.16 !important;
    letter-spacing:-.03em !important; color:var(--fg) !important;
    margin:2.5rem 0 1.25rem !important; }
  .hm-article h3{ font-family:var(--disp) !important; font-weight:700 !important;
    font-size:clamp(1.125rem,1.9vw,1.5rem) !important; line-height:1.3 !important;
    letter-spacing:-.03em !important; color:var(--fg) !important;
    margin:2rem 0 1rem !important; }
  .hm-article ul, .hm-article ol{ margin:0 0 1.5rem; padding-left:1.25rem;
    color:var(--fg-2); }
  .hm-article li{ margin:0 0 .625rem; line-height:1.65; }
  .hm-article li:last-child{ margin-bottom:0; }
  /* The one allowed left rule in this system (the ban is on cards using a
     colored left border as a decoration; this is a quotation mark, the
     classical use of a rule, not a UI card). */
  .hm-article blockquote{ margin:2rem 0; padding:.125rem 0 .125rem 1.5rem;
    border-left:2px solid var(--warm); font-family:var(--disp); font-weight:700;
    font-size:clamp(1.0625rem,1.8vw,1.3125rem); line-height:1.45;
    letter-spacing:-.02em; color:var(--fg); }
  .hm-article table{ width:100%; border-collapse:collapse; margin:0 0 1.5rem; }
  .hm-article th, .hm-article td{ padding:1rem .875rem; text-align:left;
    font-size:.875rem; }
  .hm-article thead th{ font-family:var(--mono); font-size:.625rem;
    font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:var(--fg-3); border-bottom:1px solid var(--line-2); }
  .hm-article tbody td{ color:var(--fg-2); border-bottom:1px solid var(--line); }
  .hm-article a{ color:var(--sky); text-decoration:underline;
    text-underline-offset:.25em; }
  .hm-article a:hover{ color:var(--fg); }
  .hm-article hr{ border:none; border-top:1px solid var(--line); margin:2.5rem 0; }
  .hm-article-toc{ list-style:none; margin:0 0 2.5rem; padding:.75rem 0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    counter-reset:hm-toc; }
  /* min-height:44px on the <a> itself, not just padding on the <li> — see the
     min-height note on .hm-footer-link below: redesign-fixes.js measures the
     ANCHOR's own box and force-centers anything it finds under 44px tall. */
  .hm-article-toc a{ display:flex; gap:.75rem; align-items:baseline;
    min-height:44px; padding:.4375rem 0;
    font-family:var(--mono); font-size:.8125rem; color:var(--fg-2);
    text-decoration:none; }
  .hm-article-toc a:hover{ color:var(--sky); }
  .hm-article-toc a::before{ content:counter(hm-toc,decimal-leading-zero);
    counter-increment:hm-toc; color:var(--warm); font-weight:600; }

  /* ── Kicker row ─────────────────────────────────────────────────────────*/
  .hm-kicker-row{ display:flex; align-items:center; flex-wrap:wrap;
    gap:.5rem 1rem; margin:0 0 1rem; }
  .hm-kicker-row .hm-idx{ margin:0; }

  /* ── Footer ─────────────────────────────────────────────────────────────
     `_site_base.html`'s {% block site_footer %} renders OUTSIDE <main> (same
     as layout.html's own footer block it replaces) — so `.hm-footer` is a
     sibling of the `.hm` page wrapper, never a descendant of it. It cannot
     read `.hm`'s custom properties through inheritance, so it declares its
     own copy of the token set, exactly the way `.hm-hero`/`.hm-math` above
     already do for the same reason (an element outside the normal `.hm`
     nesting that still needs the theme tokens). Keep this block's values in
     sync with `.hm`'s three token blocks above if the palette ever changes.

     THIRD bundle landmine, found rendering this: base.css carries a bare-tag
     "Footer Centering" reset — `footer, .footer{ display:flex; flex-direction:
     column; align-items:center; text-align:center; width:100% }` — that
     targets every literal <footer> element site-wide for the OLD footer's
     centered-brand look. `.hm-footer` IS a <footer>, and since this rule
     never declares `display`/`text-align` itself elsewhere, that bare-tag
     rule silently wins those two properties by being the only rule setting
     them — collapsing the 5-column layout into a centered flex column. The
     `display:block; text-align:left` below is not decorative, it is the fix. */
  .hm-footer{
    --gut: clamp(1rem, 4vw, 2rem);
    --ground:#ffffff; --raise:#f8fafc; --line:#e8edf4; --line-2:#d5dfec;
    --fg:#0f172a; --fg-2:#475569; --fg-3:#64748b;
    --sky:#0369a1; --teal:#0d9488; --warm:#9a6b28;
    --disp:'Plus Jakarta Sans', system-ui, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    display:block; width:auto; text-align:left;
    box-sizing:border-box; background:var(--ground); color:var(--fg-2);
    border-top:1px solid var(--line);
    padding:clamp(3rem,6vw,5rem) 0 clamp(1.5rem,3vw,2rem); }
  .hm-footer *, .hm-footer *::before, .hm-footer *::after{ box-sizing:border-box; }
  [data-theme="dark"] .hm-footer{
    --ground:#070b16; --raise:#0e1526; --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.16); --fg:#ffffff; --fg-2:#a9bad4; --fg-3:#8195b0;
    --sky:#38bdf8; --teal:#2dd4bf; --warm:#D9A257; }
  [data-theme="light"] .hm-footer{
    --ground:#f5f2ee; --raise:#ffffff; --line:#e7e0d6; --line-2:#d8cfc2;
    --fg:#191512; --fg-2:#4c433b; --fg-3:#7c7168;
    --sky:#075985; --teal:#0f766e; --warm:#8a5d20; }

  .hm-footer-brand{ margin-bottom:clamp(2rem,4vw,3rem); }
  /* min-height:44px on both of these is NOT decoration — it is the fix for a
     FOURTH bundle/JS landmine found rendering this footer: static/js/
     redesign-fixes.js measures every non-inline <a>'s own getBoundingClientRect
     and, if either dimension is under 44px, force-sets (via INLINE style,
     which beats any external rule that isn't itself !important) display:flex
     + justify-content:center. A logo/link that was `inline-flex`/`block`
     inside a plain block container then becomes a normal-flow flex BLOCK,
     which stretches to fill its container's width like any block box — so a
     28px-tall logo or a 24px-tall link silently turns into a full-width,
     centered box. Keeping the element's own rendered height at 44px+ up
     front means the script's `rect.height < 44` check is simply never true. */
  .hm-footer-logo{ display:inline-flex; align-items:center; gap:.625rem;
    min-height:44px; font-family:var(--disp); font-weight:800; font-size:1.0625rem;
    letter-spacing:-.02em; color:var(--fg); text-decoration:none; }
  .hm-footer-logo img{ width:28px; height:28px; border-radius:7px; display:block; }
  .hm-footer-logo:hover{ color:var(--fg); }
  .hm-footer-tag{ margin:.75rem 0 0; font-size:.875rem; color:var(--fg-3);
    max-width:32ch; }
  /* Five groups: Product, Compare, Company, For clients, Legal — never named
     *-grid (bundle substring rule), so `.hm-footer-cols`. */
  .hm-footer-cols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(1.5rem,3vw,2.5rem); padding-top:clamp(2rem,4vw,3rem);
    border-top:1px solid var(--line); }
  .hm-footer-heading{ margin:0 0 1rem; color:var(--fg-3); }
  .hm-footer-link{ display:flex; align-items:center; min-height:44px;
    padding:.125rem 0; font-size:.875rem; color:var(--fg-2); text-decoration:none; }
  .hm-footer-link:hover{ color:var(--sky); }
  .hm-footer-bottom{ display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:.75rem 1.5rem;
    margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem;
    border-top:1px solid var(--line); }
  .hm-footer-bottom .hm-idx{ margin:0; }
  .hm-footer-bottom a{ color:var(--fg-3); text-decoration:underline;
    text-underline-offset:.3em; }
  .hm-footer-bottom a:hover{ color:var(--sky); }

  /* ── New-primitive phone/tablet rules ──────────────────────────────────*/
  @media (max-width:900px){
    .hm-steps--two{ grid-template-columns:1fr; }
    .hm-footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width:640px){
    .hm-hero--compact{ padding-top:clamp(2.5rem,10vw,3.5rem); }
    .hm-steps > li{ padding-left:2.5rem; }
    .hm-article blockquote{ padding-left:1.125rem; }
    .hm-footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1.75rem 1.25rem; }
    .hm-footer-bottom{ flex-direction:column; align-items:flex-start; }
  }
  @media (prefers-reduced-motion: reduce){
    .hm-footer-link, .hm-footer-bottom a, .hm-article a{ transition:none !important; }
  }