/* =============================================================================
   HisaBooks — Marketing Design System
   -----------------------------------------------------------------------------
   This file is the master design language for every HisaBooks marketing page.
   It carries tokens, typography, buttons, navigation, footer, mockup chrome,
   and the shared motion primitives. Page-specific section layouts live in their
   own stylesheet (e.g. marketing_home.css) and build on top of these tokens.

   Rules that keep this system coherent:
   - Colour is white, mist grey, and a single HisaBooks navy. There is no second
     brand colour: the gold accent went with the 2026-08-20 logo set. Amber
     appears only as status, never as brand.
   - Spacing, radius, and type come from the scales below. Never hand-pick.
   - No inline styles anywhere: the public pages ship a strict CSP that blocks
     both inline <style> blocks and style="" attributes. Stagger with nth-child.
   ============================================================================= */

@font-face {
    font-family: "Inter Variable";
    src: url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
    /* Brand — taken from assets/icons/logo.svg, which is the source of truth.
       The brand is a single navy. #003f9b measures 9.6:1 on white, so unlike
       the blue it replaced it carries text, links and buttons directly; the
       deeper shades are hover and pressed states, not a contrast workaround. */
    --hb-blue:        #003f9b;  /* brand: text, links, buttons, fills   9.6:1 */
    --hb-blue-deep:   #00306f;  /* hover                               12.7:1 */
    --hb-blue-dark:   #00265a;  /* hover on already-dark surfaces      14.7:1 */
    --hb-blue-ink:    #001c42;  /* emphasis over navy washes           16.9:1 */
    /* The one colour that is not on the brand. No shade of the navy is legible
       on the night surface, so on-dark accents use a lighter tint of the same
       hue. Dark backgrounds only; it is 2.4:1 on white. */
    --hb-blue-bright: #6fa8f5;  /* on dark surfaces          8.0:1 on --hb-night */
    --hb-blue-wash:   #e9f0fb;  /* tinted panel backgrounds                   */
    --hb-blue-mist:   #c6d9f5;  /* borders on navy washes                     */

    /* Gold was removed on 2026-08-20 with the new logo set, which is a single
       navy across all seven lockups. The old --hb-gold-* family is gone and its
       jobs moved to the navy above. Amber survives ONLY as status (see
       --hb-warning below and the semantic --warning classes across the app);
       it is never a brand colour. */
    --hb-warning:      #b8860b;  /* amber-family status text on white   4.6:1 */
    --hb-warning-wash: #fff8e6;
    --hb-warning-mist: #f5e0a8;

    /* Neutrals */
    --hb-ink:         #0a1224;
    --hb-ink-soft:    #33405c;
    --hb-muted:       #5f6b85;
    --hb-faint:       #8590a6;
    --hb-line:        #e6eaf2;
    --hb-line-soft:   #eff2f8;
    --hb-mist:        #f5f7fb;
    --hb-mist-deep:   #eef1f7;
    --hb-paper:       #ffffff;

    /* Status. Used for form validation, not decoration. Both clear AA on white
       and on their own wash. */
    --hb-danger:      #b3261e;
    --hb-danger-wash: #fdeee9;
    --hb-success:     #0f7a4c;
    --hb-success-wash:#e6f6ee;

    /* Dark surfaces */
    --hb-night:       #070c18;
    --hb-night-soft:  #0e1526;
    --hb-night-line:  rgba(255, 255, 255, .10);
    --hb-night-text:  rgba(255, 255, 255, .66);

    /* Type */
    --hb-font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hb-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

    /* Fluid type scale */
    --hb-t-display: clamp(2.75rem, 1.35rem + calc(4.6 * var(--hb-vw, 1vw)), 5.25rem);
    --hb-t-h1:      clamp(2.25rem, 1.25rem + calc(3.4 * var(--hb-vw, 1vw)), 4rem);
    --hb-t-h2:      clamp(1.95rem, 1.2rem + calc(2.5 * var(--hb-vw, 1vw)), 3.15rem);
    --hb-t-h3:      clamp(1.35rem, 1.05rem + calc(1 * var(--hb-vw, 1vw)), 1.85rem);
    --hb-t-h4:      clamp(1.05rem, .95rem + calc(.4 * var(--hb-vw, 1vw)), 1.25rem);
    --hb-t-lede:    clamp(1.02rem, .95rem + calc(.38 * var(--hb-vw, 1vw)), 1.22rem);
    --hb-t-body:    1rem;
    --hb-t-sm:      .9375rem;
    --hb-t-xs:      .8125rem;
    --hb-t-eyebrow: .75rem;

    /* Spacing scale */
    --hb-s1:  4px;
    --hb-s2:  8px;
    --hb-s3:  12px;
    --hb-s4:  16px;
    --hb-s5:  24px;
    --hb-s6:  32px;
    --hb-s7:  48px;
    --hb-s8:  64px;
    --hb-s9:  96px;
    --hb-s10: 128px;

    /* Section rhythm. The minimums are held above --hb-nav-h on purpose: section
       anchors land flush with the viewport top, so a section's top padding is
       what keeps its first line out from under the floating nav. */
    --hb-section:      clamp(88px, calc(8 * var(--hb-vw, 1vw)), 132px);
    --hb-section-tight: clamp(84px, calc(6 * var(--hb-vw, 1vw)), 96px);

    /* Radius */
    --hb-r-sm:   8px;
    --hb-r-md:   12px;
    --hb-r-lg:   18px;
    --hb-r-xl:   26px;
    --hb-r-2xl:  36px;
    --hb-r-pill: 999px;

    /* Elevation — HOUSE RULE: HisaBooks marketing is flat. Drop shadows are not
       part of the standard. Separation comes from hairline borders and a change
       of background tone, never from a blur under an element.
       These four tokens are kept as `none` so the many components that still
       reference them stay flat by default and cannot drift back. If a surface
       needs to read as lifted, give it a border, not a shadow. */
    --hb-lift-sm: none;
    --hb-lift-md: none;
    --hb-lift-lg: none;
    --hb-lift-xl: none;

    /* Motion */
    --hb-ease:      cubic-bezier(.22, .61, .36, 1);
    --hb-ease-out:  cubic-bezier(.16, 1, .3, 1);
    --hb-ease-soft: cubic-bezier(.4, 0, .2, 1);
    --hb-fast:  150ms;
    --hb-mid:   280ms;
    --hb-slow:  600ms;

    /* Layout */
    --hb-shell: 1200px;
    --hb-shell-wide: 1380px;
    --hb-nav-h: 76px;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
.hb {
    margin: 0;
    background: var(--hb-paper);
    color: var(--hb-ink);
    font-family: var(--hb-font);
    font-size: var(--hb-t-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-variant-numeric: tabular-nums;
}

.hb *,
.hb *::before,
.hb *::after { box-sizing: border-box; }

/* The reset is wrapped in :where() so it carries ZERO specificity.
   Written plainly as `.hb a` or `.hb h1`, each of these scores (0,1,1) and beats
   any single-class component rule such as `.hb-hero__title` (0,1,0). That
   silently killed every margin set on a heading or paragraph and every colour
   set on an anchor-based button. A reset must always lose to the components
   built on top of it, so keep these selectors inside :where(). */
:where(.hb) :where(a) { color: inherit; text-decoration: none; }
:where(.hb) :where(img, svg) { max-width: 100%; display: block; }

:where(.hb) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
    margin: 0;
    padding: 0;
}
:where(.hb) :where(ul, ol) { list-style: none; }

:where(.hb) :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

:where(.hb) :where(input, select) { font: inherit; color: inherit; }

/* Not part of the reset: this one has to win. */
.hb [hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Anchor targets.

   Inline targets (a paragraph, a marker div) sit mid-section, so they have to be
   pushed clear of the floating nav or they land underneath it.

   Whole sections are different: they land FLUSH with the top of the viewport.
   Offsetting them left a 100px strip of the previous section on screen above the
   one you asked for. Because every section carries at least the nav's height in
   top padding (see --hb-section and .hb-plan), the nav ends up floating over the
   section's own empty padding instead of over its content. */
.hb [id] { scroll-margin-top: calc(var(--hb-nav-h) + 24px); }
.hb main > section[id] { scroll-margin-top: 0; }

/* Accessible skip target + screen-reader text */
.hb-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hb-skip {
    position: absolute;
    top: -100px;
    left: var(--hb-s4);
    z-index: 200;
    padding: var(--hb-s3) var(--hb-s5);
    border-radius: var(--hb-r-md);
    background: var(--hb-ink);
    color: #fff;
    font-size: var(--hb-t-sm);
    font-weight: 560;
    transition: top var(--hb-mid) var(--hb-ease);
}
.hb-skip:focus { top: var(--hb-s4); }

.hb :focus-visible {
    outline: 2px solid var(--hb-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Layout primitives ─────────────────────────────────────────────────────── */
.hb-shell {
    width: min(var(--hb-shell), calc(100% - 2 * clamp(20px, calc(5 * var(--hb-vw, 1vw)), 64px)));
    margin-inline: auto;
}
.hb-shell--wide { width: min(var(--hb-shell-wide), calc(100% - 2 * clamp(20px, calc(4 * var(--hb-vw, 1vw)), 48px))); }
.hb-shell--narrow { width: min(820px, calc(100% - 2 * clamp(20px, calc(5 * var(--hb-vw, 1vw)), 64px))); }

.hb-section { padding-block: var(--hb-section); position: relative; }
.hb-section--tight { padding-block: var(--hb-section-tight); }
.hb-section--mist { background: var(--hb-mist); }
.hb-section--night { background: var(--hb-night); color: #fff; }

/* ── Typography ────────────────────────────────────────────────────────────── */
.hb-display {
    font-size: var(--hb-t-display);
    line-height: .96;
    letter-spacing: -.045em;
    font-weight: 680;
    text-wrap: balance;
}

.hb-h1 {
    font-size: var(--hb-t-h1);
    line-height: 1.03;
    letter-spacing: -.038em;
    font-weight: 660;
    text-wrap: balance;
}

.hb-h2 {
    font-size: var(--hb-t-h2);
    line-height: 1.08;
    letter-spacing: -.032em;
    font-weight: 640;
    text-wrap: balance;
}

.hb-h3 {
    font-size: var(--hb-t-h3);
    line-height: 1.22;
    letter-spacing: -.022em;
    font-weight: 600;
}

.hb-h4 {
    font-size: var(--hb-t-h4);
    line-height: 1.35;
    letter-spacing: -.014em;
    font-weight: 580;
}

.hb-lede {
    font-size: var(--hb-t-lede);
    line-height: 1.6;
    color: var(--hb-muted);
    max-width: 56ch;
    text-wrap: pretty;
}

.hb-body { color: var(--hb-muted); line-height: 1.7; text-wrap: pretty; }
.hb-small { font-size: var(--hb-t-sm); color: var(--hb-muted); line-height: 1.6; }
.hb-fine  { font-size: var(--hb-t-xs); color: var(--hb-faint); line-height: 1.55; }

/* Emphasised phrase inside a heading.
   Rendered as an inline chip that reuses the exact primary-button pairing:
   vivid gold lettering on HisaBooks blue. Tying the emphasis to the CTA makes
   the blue-and-gold combination read as deliberate brand language rather than
   decoration, and it avoids the underline treatment entirely.
   Headings are always well above 24px, where 3:1 is the passing bar, so the
   3.94:1 pairing is comfortably within spec at this size. */
.hb-mark {
    display: inline-block;
    /* An explicit line-height is required. Without one the chip inherits the
       heading's and its padded box grows taller than the line box, so the fill
       paints over the descenders of the line above. */
    line-height: 1.08;
    padding: .08em .26em;
    border-radius: .18em;
    background: var(--hb-blue);
    color: #fff;
    /* Keeps the phrase from breaking across lines mid-chip. */
    white-space: nowrap;
}
.hb-mark--platform { background: var(--hb-blue); color: #fff; }

/* A heading carrying a chip needs room for the chip's padding, or the fill
   collides with the line above. Scoped with :has() so headings without a chip
   keep their tighter display leading. */
.hb-display:has(.hb-mark),
.hb-h1:has(.hb-mark),
.hb-h2:has(.hb-mark) { line-height: 1.3; }

/* Binds trailing punctuation to the chip before it. A chip is a nowrap
   inline-block, so a comma after one becomes its own break opportunity and gets
   pushed to the head of the next line, reading as ", buy the counter". */
.hb-keep { white-space: nowrap; }

/* Eyebrow — used sparingly, only where a section genuinely needs a label */
/* HOUSE RULE: no decorative dash, rule, or bullet in front of a label or
   heading. The eyebrow is set by weight, size, tracking, and colour alone.
   Do not reintroduce a ::before line here or anywhere else in the system. */
.hb-eyebrow {
    display: inline-block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-muted);
}
.hb-eyebrow--night { color: rgba(255, 255, 255, .58); }

/* Section header block */
.hb-head { max-width: 46ch; }
.hb-head > * + * { margin-top: var(--hb-s4); }
.hb-head--center { max-width: 52ch; margin-inline: auto; text-align: center; }
.hb-head--center .hb-lede { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hb-s2);
    padding: 14px 26px;
    border-radius: var(--hb-r-pill);
    font-size: var(--hb-t-sm);
    font-weight: 580;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        transform var(--hb-fast) var(--hb-ease),
        background-color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease),
        color var(--hb-mid) var(--hb-ease),
        box-shadow var(--hb-mid) var(--hb-ease);
}
.hb-btn:active { transform: translateY(1px); }

/* White on the brand navy, 9.6:1. This used to be vivid gold on blue at 3.94:1,
   carried as a documented exception below the 4.5:1 AA threshold because no
   amber-leaning gold cleared it on the old blue. The 2026-08-20 logo set is a
   single navy with no gold, so the exception is gone rather than restated:
   the brand colour now passes on its own. Hover only goes darker, so contrast
   can improve from here but never regress. */
.hb-btn--primary {
    background: var(--hb-blue);
    color: #fff;
    font-weight: 600;
}
.hb-btn--primary:hover {
    background: var(--hb-blue-dark);
}

.hb-btn--ink { background: var(--hb-ink); color: #fff; }
.hb-btn--ink:hover { background: #16223c; }

.hb-btn--ghost {
    background: var(--hb-paper);
    color: var(--hb-ink);
    border-color: var(--hb-line);
}
.hb-btn--ghost:hover { border-color: #c9d3e4; background: var(--hb-mist); }

.hb-btn--quiet { background: transparent; color: var(--hb-ink); }
.hb-btn--quiet:hover { background: var(--hb-mist-deep); }

.hb-btn--on-night {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
}
.hb-btn--on-night:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }

.hb-btn--light { background: #fff; color: var(--hb-ink); }
.hb-btn--light:hover { background: var(--hb-blue-wash); }

.hb-btn--lg { padding: 17px 34px; font-size: var(--hb-t-body); }
.hb-btn--sm { padding: 10px 18px; font-size: var(--hb-t-xs); }

/* Text link with a travelling arrow */
.hb-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--hb-t-sm);
    font-weight: 560;
    color: var(--hb-blue);
    transition: gap var(--hb-mid) var(--hb-ease), color var(--hb-mid) var(--hb-ease);
}
.hb-link::after {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--hb-arrow) center / contain no-repeat;
    mask: var(--hb-arrow) center / contain no-repeat;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.hb-link:hover { gap: 11px; color: var(--hb-blue-dark); }
.hb-link--night { color: var(--hb-blue-bright); }
.hb-link--night:hover { color: #ffd97e; }

:root {
    --hb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

    /* Check marks used by list and plan components. These live in the design
       system rather than a page stylesheet because more than one page needs
       them, and a page that loaded only its own sheet would otherwise render
       the mark as nothing at all. */
    --hb-check:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f72ce' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
    --hb-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
    --hb-check-gold:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffce00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
}

.hb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hb-s3);
}

/* ── Chips / tags ──────────────────────────────────────────────────────────── */
.hb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-xs);
    font-weight: 520;
    color: var(--hb-ink-soft);
    white-space: nowrap;
}
.hb-chip--blue { background: var(--hb-blue-wash); border-color: var(--hb-blue-mist); color: var(--hb-blue); }
.hb-chip--night {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .82);
}

/* ── Icon tile ─────────────────────────────────────────────────────────────── */
.hb-tile {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--hb-blue-wash);
    color: var(--hb-blue);
    flex: none;
    transition: transform var(--hb-mid) var(--hb-ease), background-color var(--hb-mid) var(--hb-ease);
}
.hb-tile svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hb-tile--ink  { background: var(--hb-ink); color: #fff; }
.hb-tile--solid { background: var(--hb-blue); color: #fff; }
.hb-tile--night { background: rgba(255, 255, 255, .08); color: #fff; }
.hb-tile--lg { width: 56px; height: 56px; border-radius: 17px; }
.hb-tile--lg svg { width: 26px; height: 26px; }
.hb-faq__item {
    border-radius: var(--hb-r-lg);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    overflow: hidden;
    transition: border-color var(--hb-mid) var(--hb-ease);
}
.hb-faq__item[open] { border-color: var(--hb-blue-mist); }

.hb-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hb-s4);
    padding: var(--hb-s5);
    cursor: pointer;
    font-size: var(--hb-t-sm);
    font-weight: 580;
    letter-spacing: -.012em;
    color: var(--hb-ink);
    list-style: none;
}
.hb-faq__item summary::-webkit-details-marker { display: none; }
.hb-faq__item summary svg {
    flex: none;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--hb-blue);
    stroke-width: 2.2;
    stroke-linecap: round;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.hb-faq__item[open] summary svg { transform: rotate(45deg); }

.hb-faq__item p {
    padding: 0 var(--hb-s5) var(--hb-s5);
    font-size: var(--hb-t-sm);
    line-height: 1.7;
    color: var(--hb-muted);
}

/* ── Product mockup chrome ─────────────────────────────────────────────────
   Screenshots are hero elements, never thumbnails. Every screenshot sits in a
   real browser or device frame with proper depth.
   ------------------------------------------------------------------------ */
.hb-window {
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-lg);
    overflow: hidden;
    box-shadow: var(--hb-lift-lg);
}

.hb-window__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: linear-gradient(180deg, #fcfdff, #f4f7fc);
    border-bottom: 1px solid var(--hb-line-soft);
}
.hb-window__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dfe5ef;
    flex: none;
}
.hb-window__dot:nth-child(1) { background: #ffbdb2; }
.hb-window__dot:nth-child(2) { background: #ffe0a3; }
.hb-window__dot:nth-child(3) { background: #b9e6c4; }
.hb-window__url {
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line-soft);
    font-size: 11px;
    font-weight: 520;
    color: var(--hb-faint);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62%;
}
.hb-window__body { display: block; background: var(--hb-mist); }
.hb-window__body img { width: 100%; height: auto; display: block; }

/* Dark variant for night sections */
.hb-window--night {
    background: var(--hb-night-soft);
    border-color: var(--hb-night-line);
}
.hb-window--night .hb-window__bar {
    background: rgba(255, 255, 255, .04);
    border-bottom-color: var(--hb-night-line);
}
.hb-window--night .hb-window__url {
    background: rgba(255, 255, 255, .05);
    border-color: var(--hb-night-line);
    color: rgba(255, 255, 255, .5);
}

/* ── Motion primitives ─────────────────────────────────────────────────────
   Reveal is opt-in via [data-reveal]; marketing_home.js adds .is-visible.
   Stagger comes from nth-child so the strict CSP stays satisfied.
   ------------------------------------------------------------------------ */
.hb-js .hb [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 750ms var(--hb-ease-out),
        transform 750ms var(--hb-ease-out);
    will-change: opacity, transform;
}
.hb-js .hb [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.hb-js .hb [data-reveal="fade"] { transform: none; }
.hb-js .hb [data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
.hb-js .hb [data-reveal="right"] { transform: translate3d(32px, 0, 0); }

/* On a narrow screen the side-entering reveals read as the page sliding
   sideways, and they briefly extend past the viewport on any section that is
   not clipping. Below the point where those columns stack, they rise instead. */
@media (max-width: 700px) {
    .hb-js .hb [data-reveal="left"],
    .hb-js .hb [data-reveal="right"] { transform: translate3d(0, 26px, 0); }
}
.hb-js .hb [data-reveal="scale"] { transform: scale(.965); }

/* Children stagger inside a revealed group */
.hb-js .hb [data-reveal-group] > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 700ms var(--hb-ease-out),
        transform 700ms var(--hb-ease-out);
}
.hb-js .hb [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 420ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 490ms; }
.hb-js .hb [data-reveal-group].is-visible > *:nth-child(9) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
    .hb [data-reveal],
    .hb-js .hb [data-reveal-group] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hb-mark::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ── Navigation ────────────────────────────────────────────────────────────
   A floating pill that detaches from the page and tightens on scroll.
   ------------------------------------------------------------------------ */
.hb-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 18px 0;
    transition: padding var(--hb-mid) var(--hb-ease);
}
.hb-nav.is-stuck { padding: 10px 0; }

.hb-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--hb-s5);
    height: 58px;
    padding: 0 12px 0 22px;
    border-radius: var(--hb-r-pill);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--hb-line-soft);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
transition: background-color var(--hb-mid) var(--hb-ease), border-color var(--hb-mid) var(--hb-ease);
}
.hb-nav.is-stuck .hb-nav__inner {
    background: rgba(255, 255, 255, .93);
    box-shadow: var(--hb-lift-md);
}

.hb-nav__brand { display: flex; align-items: center; flex: none; }
.hb-nav__brand img { height: 26px; width: auto; }

.hb-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: auto;
}

.hb-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: var(--hb-r-pill);
    font-size: var(--hb-t-sm);
    font-weight: 520;
    color: var(--hb-ink-soft);
    transition: color var(--hb-fast) var(--hb-ease), background-color var(--hb-fast) var(--hb-ease);
}
.hb-nav__link:hover { color: var(--hb-ink); background: var(--hb-mist-deep); }
.hb-nav__link svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--hb-mid) var(--hb-ease);
    opacity: .55;
}

.hb-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--hb-s2);
    flex: none;
}

/* Mega dropdown — the one place the two product lines are set side by side */
.hb-nav__drop { position: relative; }
.hb-nav__drop:hover .hb-nav__link svg,
.hb-nav__drop:focus-within .hb-nav__link svg { transform: rotate(180deg); }

.hb-nav__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: min(660px, calc(calc(100 * var(--hb-vw, 1vw)) - 40px));
    padding: var(--hb-s2);
    border-radius: var(--hb-r-xl);
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px);
    transition:
        opacity var(--hb-mid) var(--hb-ease),
        transform var(--hb-mid) var(--hb-ease),
        visibility var(--hb-mid);
}
.hb-nav__drop:hover .hb-nav__panel,
.hb-nav__drop:focus-within .hb-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.hb-nav__panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hb-s2);
}

.hb-nav__product {
    padding: var(--hb-s5);
    border-radius: var(--hb-r-lg);
    background: var(--hb-mist);
    transition: background-color var(--hb-mid) var(--hb-ease);
}
.hb-nav__product:hover { background: var(--hb-blue-wash); }

.hb-nav__product-name {
    display: block;
    font-size: var(--hb-t-h4);
    font-weight: 620;
    letter-spacing: -.02em;
    color: var(--hb-ink);
    margin-bottom: 4px;
}
.hb-nav__product-desc {
    display: block;
    font-size: var(--hb-t-xs);
    color: var(--hb-muted);
    line-height: 1.55;
    margin-bottom: var(--hb-s4);
}
.hb-nav__product-list { display: grid; gap: 3px; }
.hb-nav__product-list a {
    display: block;
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: var(--hb-r-sm);
    font-size: var(--hb-t-xs);
    font-weight: 500;
    color: var(--hb-ink-soft);
    transition: background-color var(--hb-fast) var(--hb-ease), color var(--hb-fast) var(--hb-ease);
}
.hb-nav__product-list a:hover { background: rgba(255, 255, 255, .9); color: var(--hb-blue-deep); }

/* Burger + mobile drawer */
.hb-nav__burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    place-items: center;
    background: var(--hb-mist-deep);
}
.hb-nav__burger span {
    display: block;
    width: 17px;
    height: 1.8px;
    border-radius: 2px;
    background: var(--hb-ink);
    transition: transform var(--hb-mid) var(--hb-ease), opacity var(--hb-fast) var(--hb-ease);
}
.hb-nav__burger span + span { margin-top: 4.5px; }
.hb-nav.is-open .hb-nav__burger span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
.hb-nav.is-open .hb-nav__burger span:nth-child(2) { opacity: 0; }
.hb-nav.is-open .hb-nav__burger span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }

.hb-nav__drawer {
    position: absolute;
    top: calc(100% + 8px);
    left: clamp(20px, calc(5 * var(--hb-vw, 1vw)), 64px);
    right: clamp(20px, calc(5 * var(--hb-vw, 1vw)), 64px);
    padding: var(--hb-s5);
    border-radius: var(--hb-r-xl);
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    max-height: calc(calc(100 * var(--hb-vh, 1vh)) - 130px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
        opacity var(--hb-mid) var(--hb-ease),
        transform var(--hb-mid) var(--hb-ease),
        visibility var(--hb-mid);
}
.hb-nav.is-open .hb-nav__drawer { opacity: 1; visibility: visible; transform: none; }

.hb-nav__drawer-group + .hb-nav__drawer-group {
    margin-top: var(--hb-s5);
    padding-top: var(--hb-s5);
    border-top: 1px solid var(--hb-line-soft);
}
.hb-nav__drawer-title {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s3);
}
.hb-nav__drawer-group a {
    display: block;
    padding: 10px 0;
    font-size: var(--hb-t-body);
    font-weight: 520;
    color: var(--hb-ink);
}
.hb-nav__drawer-actions { display: grid; gap: var(--hb-s2); margin-top: var(--hb-s5); }
.hb-nav__drawer-actions .hb-btn { width: 100%; }

@media (max-width: 1080px) {
    .hb-nav__links,
    .hb-nav__actions .hb-nav__desktop-only { display: none; }
    .hb-nav__burger { display: grid; }
    .hb-nav__inner { justify-content: space-between; padding-right: 8px; }
    .hb-nav__actions { margin-left: auto; }
}
@media (min-width: 1081px) {
    .hb-nav__drawer { display: none; }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.hb-footer {
    background: var(--hb-night);
    color: rgba(255, 255, 255, .72);
    padding-block: var(--hb-s8) var(--hb-s6);
    position: relative;
    overflow: hidden;
    /* The section above the footer is also dark. Since the house style has no
       shadows, the seam is a hairline plus a one-step tone change. */
    border-top: 1px solid var(--hb-night-line);
}
.hb-footer > * { position: relative; }

.hb-footer__top {
    display: grid;
    /* The link columns get the larger share, so four content-sized columns fit
       without the last one being clipped. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    gap: clamp(36px, calc(5 * var(--hb-vw, 1vw)), 72px);
    padding-bottom: var(--hb-s8);
}

.hb-footer__brand img { height: 28px; width: auto; margin-bottom: var(--hb-s5); }
.hb-footer__headline {
    font-size: clamp(1.4rem, 1.1rem + calc(1.1 * var(--hb-vw, 1vw)), 1.9rem);
    line-height: 1.2;
    letter-spacing: -.028em;
    font-weight: 620;
    color: #fff;
    margin-bottom: var(--hb-s4);
    max-width: 20ch;
}
.hb-footer__tagline {
    font-size: var(--hb-t-sm);
    line-height: 1.65;
    color: var(--hb-night-text);
    max-width: 44ch;
    margin-bottom: var(--hb-s5);
}
.hb-footer__cta { display: flex; flex-wrap: wrap; gap: var(--hb-s2); }

/* Columns size to their own content rather than four equal quarters, so a long
   entry like "Responsible disclosure" stays on one line instead of wrapping
   inside a column that happens to be narrow. */
.hb-footer__nav {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: var(--hb-s6) var(--hb-s5);
}
.hb-footer__col strong {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-bottom: var(--hb-s4);
}
.hb-footer__col a,
.hb-footer__col span {
    white-space: nowrap;
    display: block;
    padding: 5px 0;
    font-size: var(--hb-t-sm);
    color: var(--hb-night-text);
    transition: color var(--hb-fast) var(--hb-ease);
}
.hb-footer__col a:hover { color: #fff; }

.hb-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hb-s4);
    padding-top: var(--hb-s6);
    border-top: 1px solid var(--hb-night-line);
}
.hb-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-s2) var(--hb-s4);
}
.hb-footer__legal a {
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .5);
    transition: color var(--hb-fast) var(--hb-ease);
}
.hb-footer__legal a:hover { color: #fff; }
.hb-footer__copy { font-size: var(--hb-t-xs); color: rgba(255, 255, 255, .4); }
.hb-footer__cookie-preferences {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    font: inherit;
    font-size: var(--hb-t-xs);
}
.hb-footer__cookie-preferences:hover,
.hb-footer__cookie-preferences:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Functional storage on public pages remains opt-in. The compact panel keeps
   the site usable while giving both choices equal visual weight. */
.hb-cookie-consent {
    position: fixed;
    z-index: 90;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(520px, calc(100vw - 36px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--hb-s5);
    align-items: center;
    padding: var(--hb-s5);
    border: 1px solid var(--hb-line);
    border-radius: 8px;
    background: #fff;
    color: var(--hb-ink);
}
.hb-cookie-consent[hidden] { display: none; }
.hb-cookie-consent__copy strong {
    display: block;
    font-size: var(--hb-t-body);
    font-weight: 620;
    margin-bottom: 5px;
}
.hb-cookie-consent__copy p {
    margin: 0 0 6px;
    color: var(--hb-muted);
    font-size: var(--hb-t-sm);
    line-height: 1.5;
}
.hb-cookie-consent__copy a {
    color: var(--hb-blue);
    font-size: var(--hb-t-xs);
    font-weight: 600;
}
.hb-cookie-consent__actions {
    display: grid;
    gap: var(--hb-s2);
    min-width: 176px;
}
.hb-cookie-consent__actions .hb-btn { justify-content: center; white-space: nowrap; }
@media (max-width: 600px) {
    .hb-cookie-consent {
        grid-template-columns: 1fr;
        gap: var(--hb-s4);
    }
    .hb-cookie-consent__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
    .hb-cookie-consent__actions .hb-btn { min-height: 42px; white-space: normal; }
}

/* Four content-sized columns need roughly 675px of nav width to hold the
   longest label on one line. Below this the last column would be clipped, so
   drop to two columns rather than letting labels wrap. */
@media (max-width: 1199px) {
    .hb-footer__nav {
        grid-template-columns: repeat(2, max-content);
        justify-content: start;
        column-gap: clamp(40px, calc(8 * var(--hb-vw, 1vw)), 110px);
    }
}
@media (max-width: 900px) {
    .hb-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hb-footer__nav { grid-template-columns: 1fr; }
}

/* The route to buy sits at the foot of each product column, separated from the
   list of things to read about so it does not read as one more page. */
.hb-nav__product-list .hb-nav__product-cta {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--hb-line);
    border-radius: 0;
    color: var(--hb-blue);
    font-weight: 600;
}
.hb-nav__product-list .hb-nav__product-cta:hover {
    background: none;
    color: var(--hb-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}