/* ==========================================================================
   LinkTwin bio landing page (linktwin.bio)

   ADDITIVE layer on top of the25-home5.css, which is loaded first and owns the
   shell: .h4-page, .h4-container, .h4-hero, .h4-kicker, .h4-display,
   .h4-section-head, .h4-platforms, .h4-faq-*, .h4-final. Nothing here
   redefines those — everything is prefixed .hb- and scoped under .hb-page so
   the two pages can never drift into each other.

   Bio is a mobile surface, so the phone mocks are drawn at real bio widths
   (~320px of content) and the whole file is written mobile-first.
   ========================================================================== */

.hb-page {
    --hb-ink: var(--h4-ink);
    --hb-body: var(--h4-body);
    --hb-line: var(--h4-line);
    --hb-blue: var(--h4-blue);
    --hb-radius: 14px;
}

/* --------------------------------------------------------------------------
   Claim-your-handle form
   Deliberately shaped like .h4-link-form's input group so the two landing
   pages read as one product, but it is its own markup: this is a GET to
   another host, not the shortener POST.
   -------------------------------------------------------------------------- */

.hb-claim-wrap {
    margin-top: 28px;
}

.hb-claim-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-height: 64px;
    padding-left: 16px;
    border: 1px solid var(--h4-line-strong);
    border-radius: var(--h4-radius);
    background: var(--h4-paper);
    box-shadow: 0 8px 22px rgba(24, 39, 65, 0.08);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hb-claim-field:hover {
    border-color: #9eacbd;
}

.hb-claim-field:focus-within {
    border-color: var(--hb-blue);
    box-shadow: 0 0 0 4px rgba(9, 103, 242, 0.12);
}

.hb-claim-prefix {
    flex: none;
    color: var(--h4-muted);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    user-select: none;
}

.hb-page input.hb-claim-input {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 62px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    color: var(--hb-ink);
    font-family: "Inter H4", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
}

.hb-page input.hb-claim-input:focus {
    outline: none;
}

.hb-page input.hb-claim-input::placeholder {
    color: #9aa4b4;
    font-weight: 400;
}

.hb-page .hb-claim-submit {
    flex: none;
    min-height: 52px;
    margin: 5px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--hb-blue);
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.hb-page .hb-claim-submit:hover {
    transform: translateY(-1px);
    background: var(--h4-blue-dark);
}

/* Under ~380px the prefix + input + button will not sit on one line without
   the input collapsing to nothing. Let the button take its own row instead of
   shrinking the field people actually type in. */
@media (max-width: 400px) {
    .hb-claim-field {
        padding: 12px 12px 12px 14px;
    }

    .hb-page input.hb-claim-input {
        min-height: 40px;
    }

    .hb-page .hb-claim-submit {
        flex: 1 0 100%;
        margin: 8px 0 0;
    }
}

.hb-login-note {
    margin-top: 10px;
    color: var(--h4-muted);
    font-size: 0.85rem;
}

.h4-final .hb-login-note {
    color: rgba(255, 255, 255, 0.72);
}

.h4-final .hb-login-note a {
    color: #fff;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero stage
   -------------------------------------------------------------------------- */

.hb-hero-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 8px;
}

/* Sits UNDER the phone rather than floating over it: the demo is a full page
   of stacked blocks, so any overlay lands on top of one of them. */
.hb-tap-note {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--hb-line);
    border-radius: 999px;
    background: var(--h4-paper);
    box-shadow: 0 10px 26px rgba(22, 34, 54, 0.14);
    color: var(--hb-ink);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.hb-tap-note i {
    color: var(--hb-blue);
}

/* The way out of the iframe, so the demo on screen can be opened at full size.
   It rides in the phone's top-right corner — where an expand control is already
   expected — rather than as another row under the chips, which pushed the hero
   taller for a secondary action. Small and semi-transparent until hovered so it
   reads as chrome on the frame, not as content in the bio. */
.hb-phone-open {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 4px 14px rgba(22, 34, 54, 0.22);
    color: var(--hb-ink);
    font-size: 0.72rem;
    text-decoration: none;
    opacity: 0.72;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.hb-phone-open:hover,
.hb-phone-open:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    color: var(--hb-blue);
}

/* --------------------------------------------------------------------------
   Phone frame

   The frame is the only thing this file draws. What is inside it is a real
   published bio page in an iframe, styled by the25-bio-public.css inside its
   own document — so nothing here may style the bio itself.
   -------------------------------------------------------------------------- */

.hb-phone {
    position: relative;   /* anchor for .hb-phone-open */
    width: 100%;
    max-width: 344px;
    padding: 9px;
    border: 1px solid #e2e7ee;
    border-radius: 34px;
    background: linear-gradient(180deg, #f7f9fc, #eef2f7);
    box-shadow: var(--h4-shadow-phone);
}

.hb-phone-screen {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: var(--h4-soft-neutral);
}

/* Fixed heights, not aspect-ratio: a bio page is as tall as its owner made it,
   so the frame decides how much of it shows. Scrolling is off — this is a
   picture of a page, not a second page to get lost in. */
.hb-phone-frame {
    display: block;
    width: 100%;
    height: 780px;
    border: 0;
}

/* The gallery stacks its four frames in one screen and cross-fades between
   them. Absolute rather than display:none so the fade has something to fade,
   and so switching does not reflow the hero. */
.hb-gallery .hb-phone-screen {
    height: 780px;
}

.hb-gallery .hb-phone-frame {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease;
}

.hb-gallery .hb-phone-frame.is-active {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .hb-gallery .hb-phone-frame { transition: none; }
}

.hb-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hb-gallery-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}

.hb-page .hb-chip {
    padding: 7px 14px;
    border: 1px solid var(--hb-line);
    border-radius: 999px;
    background: var(--h4-paper);
    color: var(--h4-muted);
    font-family: "Nunito Sans", sans-serif;
    font-size: 0.79rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.hb-page .hb-chip:hover {
    border-color: #9eacbd;
    color: var(--hb-ink);
}

.hb-page .hb-chip.is-active {
    border-color: var(--hb-blue);
    background: var(--h4-soft);
    color: var(--h4-blue-dark);
}

.hb-phone--theme-a .hb-phone-frame,
.hb-phone--theme-b .hb-phone-frame,
.hb-phone--theme-c .hb-phone-frame {
    height: 420px;
}

/* The iframe swallows the tap, and a bio page inside a marketing page is not
   a navigation target. The overlay keeps the whole phone inert, and fades the
   cut edge so a page that continues past the frame reads as deliberate rather
   than as a block sliced in half. */
.hb-phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 82%, rgba(255, 255, 255, 0.85));
}


/* --------------------------------------------------------------------------
   Theme row — three palette samples
   -------------------------------------------------------------------------- */

.hb-theme-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.hb-phone--theme-a,
.hb-phone--theme-b,
.hb-phone--theme-c {
    max-width: 224px;
}

/* --------------------------------------------------------------------------
   Generic card grid (routing + design notes)
   -------------------------------------------------------------------------- */

.hb-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.hb-card {
    padding: 22px 20px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    background: var(--h4-paper);
}

.hb-card--flat {
    padding: 18px;
    background: var(--h4-soft-neutral);
}

.hb-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
}

.hb-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

.hb-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: var(--h4-soft);
    color: var(--hb-blue);
    font-size: 17px;
}

.hb-card-icon--pink   { background: #fdeef6; color: #c1358b; }
.hb-card-icon--amber  { background: #fff3e0; color: #b26a00; }
.hb-card-icon--green  { background: var(--h4-green-soft); color: var(--h4-green); }

@media (min-width: 640px) {
    .hb-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
    .hb-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.hb-card-grid--tight { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Block catalogue
   One shelf per editor palette group; every card is a sketch of the block, its
   name and one line. See partials/bio_block_catalogue.php.
   -------------------------------------------------------------------------- */

.hb-blocks {
    background: var(--h4-paper);
}

/* The centred heads on this page break a line short of their last word
   ("…Learn what / worked."). Balancing the lines costs nothing where it is
   unsupported. */
.hb-page .h4-section-head h2 {
    text-wrap: balance;
}

.hb-block-heading {
    margin: 34px 0 12px;
    color: var(--h4-muted);
    font-family: "Nunito Sans", sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* How many blocks the group holds — on a phone most of them are off-screen. */
.hb-block-heading span {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--h4-soft);
    color: var(--hb-blue);
    letter-spacing: 0;
}

/* On a phone a shelf scrolls sideways and bleeds to the screen edge, so the
   cut-off card says "there is more" without an arrow; four stacked grids would
   add ~2,000px to a page that is already long. The 16px undoes .h4-container's
   gutter, which is 16px below 768px and 24px above it. From 768px up a mouse
   is likely and the scrollbar is hidden, so the shelf wraps into a grid. */
.hb-block-shelf {
    display: flex;
    gap: 14px;
    margin-inline: -16px;
    padding: 2px 16px 14px;
    overflow-x: auto;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.hb-block-shelf::-webkit-scrollbar { display: none; }

/* A scrolling shelf is a keyboard stop (home-bio.php adds the tabindex only
   while it scrolls), so it needs to show where focus is. */
.hb-block-shelf:focus-visible {
    outline: 2px solid var(--hb-blue);
    outline-offset: 2px;
    border-radius: var(--hb-radius);
}

.hb-block-card {
    display: flex;
    flex: 0 0 204px;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    background: var(--h4-paper);
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .hb-block-shelf {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }
}

/* Six columns: shorter groups keep the same card width and simply end early,
   so the shelves line up down the page. Basics holds seven blocks since
   Gallery; its last card would sit alone on a second row, so that shelf takes
   seven places instead (cards a seventh narrower, no orphan). */
@media (min-width: 1200px) {
    .hb-block-shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hb-block-shelf--seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.hb-block-copy {
    padding: 13px 14px 15px;
}

.hb-block-copy h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    color: var(--hb-ink);
    font-family: "Nunito Sans", sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
}

.hb-block-copy p {
    margin: 0;
    color: var(--h4-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.hb-pro-tag {
    padding: 2px 6px;
    border-radius: 5px;
    background: #efe9ff;
    color: #6d4bd8;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* The stage every sketch sits in. Fixed height so a one-button block and a
   three-field form still make one even row. */
.hb-block-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 138px;
    padding: 14px;
    overflow: hidden;
    border-bottom: 1px solid var(--hb-line);
    background: var(--h4-soft-neutral);
    color: var(--hb-ink);
    font-size: 10px;
    line-height: 1.3;
}

.hb-block-stage b { font-weight: 800; }
.hb-block-stage small { display: block; color: var(--h4-muted); font-size: 9px; }
.hb-block-stage img { display: block; object-fit: cover; }

.hb-m-yt { color: #ff0000; }
.hb-m-sp { color: #1db954; }
.hb-m-ig { color: #e1306c; }
.hb-m-wa { color: #25d366; }
.hb-m-fb { color: #1877f2; }
.hb-m-az { color: #ff9900; }
.hb-m-ap { color: #9933cc; }

.hb-m-btn {
    display: flex;
    flex: none;
    align-items: center;
    gap: 7px;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--hb-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 34, 54, .05);
}

.hb-m-btn > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-m-btn > .fa-chevron-right { margin-left: auto; color: var(--h4-line-strong); font-size: 7px; }
.hb-m-btn--center { justify-content: center; }
.hb-m-btn--tall { height: 38px; font-size: 11px; }
.hb-block-stage--phone .hb-m-btn > i { color: var(--hb-blue); }
.hb-m-btn--accent { justify-content: center; height: 26px; border-color: transparent; background: var(--hb-blue); color: #fff; }

/* Divider: the blocks around it are faint on purpose — the rule is the subject. */
.hb-m-ghost { display: block; flex: none; height: 24px; border-radius: 9px; background: #e9eef5; }
.hb-m-rule { position: relative; display: block; flex: none; height: 2px; margin: 9px 4px; border-radius: 2px; background: var(--hb-ink); }
.hb-m-rule > i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid var(--h4-soft-neutral);
    border-radius: 2px;
    background: var(--hb-ink);
    box-sizing: content-box;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hb-m-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hb-m-tiles > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 4px 7px;
    border: 1px solid var(--hb-line);
    border-radius: 9px;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
}
.hb-m-tiles i { font-size: 15px; }

.hb-m-copy { display: block; color: var(--hb-body); font-size: 10px; line-height: 1.5; }
.hb-m-copy b { display: block; margin-bottom: 2px; color: var(--hb-ink); font-size: 11px; }
.hb-m-copy b > i { margin-right: 3px; color: var(--hb-blue); }

.hb-m-photo { width: 100%; height: 100%; border-radius: 9px; }

.hb-m-dots { display: flex; justify-content: center; gap: 7px; }
.hb-m-dots i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--hb-line);
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
}

.hb-m-video { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; border-radius: 9px; background: #0b172a; }
.hb-m-video img { width: 100%; height: 100%; }
.hb-m-video > .fa-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 21px;
    border-radius: 6px;
    background: #ff0000;
    color: #fff;
    font-size: 8px;
    transform: translate(-50%, -50%);
}
.hb-m-video > b {
    position: absolute;
    inset: auto 0 0;
    padding: 14px 8px 6px;
    overflow: hidden;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    color: #fff;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hb-m-video > em {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}
.hb-m-video > em i { color: #ff0000; }

/* A row that is wider than the stage: the second thumb is cut off on purpose,
   the way the real block shows there is more to swipe. */
.hb-m-strip { display: flex; gap: 6px; height: 74px; margin-right: -46px; }
.hb-m-strip .hb-m-video { flex: 0 0 96px; }
.hb-m-strip .hb-m-video > .fa-play { width: 22px; height: 16px; font-size: 6px; }

.hb-m-card {
    display: block;
    flex: none;
    padding: 7px;
    border: 1px solid var(--hb-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 34, 54, .05);
}
.hb-m-card--row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hb-m-card--row > img { flex: none; width: 46px; height: 46px; border-radius: 7px; }
.hb-m-card--row > span { display: block; flex: 1; min-width: 0; }
.hb-m-card--row > span > b { display: block; font-size: 10px; line-height: 1.25; }
.hb-m-card--row > i { flex: none; margin-right: 3px; font-size: 13px; }
.hb-m-price { margin-top: 2px; color: var(--hb-ink) !important; font-size: 10px !important; font-weight: 800; }
.hb-m-price s { margin-left: 3px; color: var(--h4-muted); font-weight: 600; }

.hb-m-card--course { padding: 6px; }
.hb-m-card--course > img { width: 54px; height: 58px; }
.hb-m-card--course em {
    display: inline-block;
    margin-bottom: 3px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--h4-green-soft);
    color: var(--h4-green);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.hb-m-card--date { padding: 6px 8px 6px 6px; }
.hb-m-card--date > i { color: var(--h4-line-strong); }
.hb-m-date {
    display: grid !important;
    flex: none !important;
    place-items: center;
    width: 34px;
    padding: 4px 0;
    border-radius: 7px;
    background: var(--h4-soft);
    color: var(--hb-blue);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .06em;
}
.hb-m-date b { font-size: 13px !important; letter-spacing: 0; line-height: 1 !important; }

.hb-m-input {
    display: flex;
    flex: none;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--h4-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--h4-muted);
    font-size: 9px;
}
.hb-m-input--area { align-items: flex-start; height: 40px; padding-top: 6px; }

.hb-m-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.hb-m-days i {
    display: grid;
    place-items: center;
    height: 22px;
    border-radius: 50%;
    color: var(--h4-muted);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}
.hb-m-days i.is-open { background: var(--h4-soft); color: var(--hb-blue); }

.hb-m-slots { display: flex; gap: 5px; }
.hb-m-slots i {
    flex: 1;
    padding: 5px 0;
    border: 1px solid #b9d3fb;
    border-radius: 7px;
    background: #fff;
    color: var(--hb-blue);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}
.hb-m-slots i.is-picked { border-color: var(--hb-blue); background: var(--hb-blue); color: #fff; }

/* A map drawn from gradients: two roads and a park, no tile request. */
.hb-m-map {
    position: relative;
    display: block;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--hb-line);
    border-radius: 9px;
    background:
        linear-gradient(115deg, transparent 46%, #fff 46%, #fff 52%, transparent 52%),
        linear-gradient(8deg, transparent 58%, #fff 58%, #fff 65%, transparent 65%),
        radial-gradient(circle at 18% 78%, #cfe9d2 0 26%, transparent 27%),
        #eef1ea;
}
.hb-m-map > i {
    position: absolute;
    top: 44%;
    left: 52%;
    color: #ea4335;
    font-size: 20px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
    transform: translate(-50%, -50%);
}

/* The sketches added after the first twenty carry no icon font: shapes are
   CSS, icons are our own line icons printed by the catalogue ($hbIco). */
.hb-m-ico { flex: none; width: 12px; height: 12px; }

/* Gallery: six small tiles of the demo pages' artwork. */
.hb-m-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.hb-m-gallery img { width: 100%; height: 52px; border-radius: 7px; }

/* Reviews: one testimonial card with its stars, the quote and who said it. */
.hb-m-review { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; }
.hb-m-stars { display: block; width: 54px; height: 10px; fill: #f2a20c; }
.hb-m-quote { display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hb-m-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* The initials disc the block shows for a customer without a photo. */
.hb-m-who > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--h4-soft);
    color: var(--hb-blue);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}
.hb-m-who > span { display: block; min-width: 0; }
.hb-m-who b, .hb-m-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Discount code: a coupon. The offer on top, a perforated edge with a notch at
   each end (a circle in the stage's colour, cut to the half inside the card),
   then the code and its Copy button. */
.hb-m-coupon { padding: 0; }
.hb-m-coupon-offer { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px dashed var(--h4-line-strong); }
.hb-m-coupon-offer .hb-m-ico { color: var(--hb-blue); }
.hb-m-coupon-offer b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-m-coupon-offer::before,
.hb-m-coupon-offer::after {
    position: absolute;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border: 1px solid var(--hb-line);
    border-radius: 50%;
    background: var(--h4-soft-neutral);
    content: "";
}
.hb-m-coupon-offer::before { left: -6px; clip-path: inset(0 0 0 50%); }
.hb-m-coupon-offer::after { right: -6px; clip-path: inset(0 50% 0 0); }
.hb-m-coupon-stub { display: flex; gap: 5px; padding: 9px 10px; }
.hb-m-coupon-code,
.hb-m-coupon-btn { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 7px; font-weight: 800; }
.hb-m-coupon-code {
    flex: 1;
    min-width: 0;
    border: 1px dashed #b9d3fb;
    background: var(--h4-soft);
    color: var(--hb-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .08em;
}
.hb-m-coupon-btn { flex: none; gap: 4px; padding: 0 8px; background: var(--hb-blue); color: #fff; font-size: 9px; }
.hb-m-coupon-btn .hb-m-ico { width: 10px; height: 10px; }

/* FAQ: three questions in one card, the first one open. Its answer is two
   plain lines (the <i> elements); the open question's chevron points up. */
.hb-m-faq { padding: 0; }
.hb-m-faq > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; padding: 7px 10px; }
.hb-m-faq > span + span { border-top: 1px solid var(--hb-line); }
.hb-m-faq b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-m-faq .hb-m-ico { color: var(--h4-muted); }
.hb-m-faq .is-open .hb-m-ico { color: var(--hb-blue); transform: rotate(180deg); }
.hb-m-faq i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #e9eef5; }
.hb-m-faq i + i { width: 62%; margin-bottom: 2px; }

/* The page's only call to action between the hero and the footer, and the one
   place that says in a sentence what PRO means. */
.hb-blocks-cta {
    display: grid;
    justify-items: center;
    gap: 18px;
    margin-top: 44px;
    text-align: center;
}

.hb-blocks-cta p {
    max-width: 560px;
    margin: 0;
    color: var(--h4-muted);
    font-size: 0.92rem;
}

.hb-blocks-cta > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;
}

/* .h4-text-link brings a 20px top margin for its usual spot under a paragraph;
   beside a button it just drops the link below the button's baseline. */
.hb-blocks-cta .h4-text-link { margin-top: 0; }

.hb-page .hb-blocks-cta-main {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    background: var(--hb-blue);
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 800;
    text-decoration: none;
    transition: background 160ms ease;
}

.hb-page .hb-blocks-cta-main:hover {
    background: var(--h4-blue-dark);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Analytics
   -------------------------------------------------------------------------- */

.hb-analytics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

@media (min-width: 980px) {
    .hb-analytics-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.hb-tick-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.hb-tick-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
}

.hb-tick-list i {
    margin-top: 4px;
    color: var(--h4-green);
    font-size: 0.78rem;
}

.hb-stats-card {
    padding: 20px;
    border: 1px solid var(--hb-line);
    border-radius: 16px;
    background: var(--h4-paper);
    box-shadow: 0 16px 38px rgba(22, 34, 54, 0.09);
}

.hb-stats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.hb-stats-head strong {
    color: var(--hb-ink);
    font-family: "Nunito Sans", sans-serif;
    font-size: 0.95rem;
}

.hb-stats-head span {
    color: var(--h4-muted);
    font-size: 0.76rem;
}

.hb-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 108px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hb-line);
}

.hb-bars span {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--hb-blue), #6ba6ff);
}

.hb-stat-rows {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.hb-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34% auto;
    align-items: center;
    gap: 10px;
}

.hb-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--hb-ink);
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hb-stat-label i { color: var(--h4-muted); }

.hb-stat-bar {
    height: 7px;
    border-radius: 999px;
    background: var(--h4-soft);
}

.hb-stat-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--hb-blue);
}

.hb-stat-value {
    color: var(--h4-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Two columns of stat rows would each be too narrow to read on a phone; the
   grid above already stacks, this just keeps the label from squeezing out. */
@media (max-width: 380px) {
    .hb-stat-row { grid-template-columns: minmax(0, 1fr) auto; }
    .hb-stat-bar { display: none; }
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.hb-pricing { background: var(--h4-soft-neutral); }

.hb-price-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 700px)  { .hb-price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hb-price-grid { grid-template-columns: repeat(4, 1fr); } }

.hb-price-card {
    position: relative;
    padding: 24px 20px;
    border: 1px solid var(--hb-line);
    border-radius: 16px;
    background: var(--h4-paper);
}

.hb-price-card--popular {
    border-color: var(--hb-blue);
    box-shadow: 0 18px 40px rgba(9, 103, 242, 0.14);
}

.hb-price-tag {
    position: absolute;
    top: -11px;
    left: 20px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--hb-blue);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.hb-price-card h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.hb-price-desc {
    margin: 3px 0 14px;
    color: var(--h4-muted);
    font-size: 0.82rem;
}

.hb-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.hb-price {
    color: var(--hb-ink);
    font-family: "Nunito Sans", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hb-price-period { color: var(--h4-muted); font-size: 0.88rem; }

.hb-price-billing {
    margin: 4px 0 16px;
    color: var(--h4-muted);
    font-size: 0.74rem;
}

.hb-page .hb-price-cta {
    display: block;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--hb-blue);
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.hb-page .hb-price-cta:hover { background: var(--h4-blue-dark); color: #fff; }

.hb-page .hb-price-cta--ghost {
    border-color: var(--h4-line-strong);
    background: transparent;
    color: var(--hb-ink);
}

.hb-page .hb-price-cta--ghost:hover {
    border-color: var(--hb-blue);
    background: var(--h4-soft);
    color: var(--h4-blue-dark);
}

.hb-price-features {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.hb-price-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.83rem;
    line-height: 1.4;
}

.hb-price-features i {
    margin-top: 4px;
    color: var(--h4-green);
    font-size: 0.72rem;
}

.hb-price-note {
    margin: 24px 0 0;
    color: var(--h4-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Hero grid — the stage column is narrower than home-5's demo column, which
   holds two phones side by side; this one holds a single tall page.
   -------------------------------------------------------------------------- */

@media (min-width: 1040px) {
    .hb-page .h4-hero {
        padding-top: clamp(20px, 2vw, 32px);
    }

    .hb-hero-grid {
        /* Narrower than the page container on purpose: the two columns belong
           next to each other, not pinned to opposite edges of a 1320px grid. */
        width: min(100% - 48px, 1140px);
        grid-template-columns: minmax(0, 1fr) 344px;
        gap: clamp(40px, 4vw, 72px);
        align-items: start;
    }
}

/* Keep the complete gallery visible on laptop-height desktop screens. Scaling
   the gallery (rather than shortening its iframe) preserves the phone and the
   published bio inside it at the same proportions. */
@media (min-width: 1040px) and (max-height: 1050px) {
    .hb-gallery { zoom: 0.92; }
}

@media (min-width: 1040px) and (max-height: 900px) {
    .hb-gallery { zoom: 0.84; }
}

@media (min-width: 1040px) and (max-height: 800px) {
    .hb-gallery { zoom: 0.74; }
}

/* ==========================================================================
   Outcome-led page body

   The hero above is intentionally independent. The sections below tell one
   story: LinkTwin routing first, then the three jobs a bio page needs to do.
   ========================================================================== */

/* App Links / routing engine */
.hb-engine {
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 9vw, 124px) 0;
    background:
        radial-gradient(circle at 13% 18%, rgba(41, 121, 255, 0.28), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(38, 199, 134, 0.14), transparent 30%),
        #081a34;
    color: #fff;
}

.hb-engine::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    pointer-events: none;
}

.hb-engine .h4-container { position: relative; }

.hb-engine-head {
    max-width: 800px;
    margin: 0 auto 44px;
    text-align: center;
}

.hb-engine .h4-kicker { color: #73a9ff; }

.hb-engine-head h2 {
    margin: 10px 0 16px;
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-size: clamp(2.35rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.hb-engine-head p {
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.72;
}

.hb-route-compare {
    display: grid;
    gap: 12px;
    max-width: 1060px;
    margin: 0 auto;
}

.hb-route-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
}

.hb-route-row > strong {
    flex: 0 0 142px;
    padding-left: 6px;
    color: rgba(255,255,255,.58);
    font-family: "Nunito Sans", sans-serif;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hb-route-row--ordinary { opacity: .67; }

.hb-route-row--smart {
    border-color: rgba(88, 151, 255, .56);
    background: linear-gradient(90deg, rgba(22,91,198,.28), rgba(255,255,255,.075));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.hb-route-row--smart > strong { color: #86b5ff; }

.hb-route-stop,
.hb-route-core {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 70px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    text-align: center;
}

.hb-route-stop i,
.hb-route-core > i { margin-right: 9px; font-size: 1.1rem; }

.hb-route-stop small,
.hb-route-core small {
    display: block;
    margin-left: 8px;
    color: rgba(255,255,255,.56);
    font-size: .68rem;
    font-weight: 600;
}

.hb-route-core {
    border-color: #3480ef;
    background: #0967f2;
    box-shadow: 0 12px 28px rgba(9,103,242,.3);
}

.hb-route-stop--destination {
    border-color: rgba(38,199,134,.38);
    background: rgba(38,199,134,.12);
}

.hb-route-stop--destination > i { color: #ff3434; }
.hb-route-arrow { flex: none; color: rgba(255,255,255,.38); font-size: .78rem; }

.hb-engine-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 28px;
    color: rgba(255,255,255,.68);
    font-size: .83rem;
    font-weight: 700;
}

.hb-engine-facts span { display: inline-flex; align-items: center; gap: 8px; }
.hb-engine-facts i { color: #69dda9; }

/* Publish, Earn and Connect story chapters */
.hb-story { overflow: hidden; }
.hb-story--earn { background: var(--h4-soft-neutral); }

.hb-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.hb-story-copy { max-width: 650px; }

.hb-story-copy h2 {
    margin: 10px 0 18px;
    color: var(--hb-ink);
    font-family: "Nunito Sans", sans-serif;
    font-size: clamp(2.2rem, 4.6vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.hb-story-lead {
    margin: 0;
    color: var(--hb-body);
    font-size: clamp(1rem, 1.6vw, 1.13rem);
    line-height: 1.7;
}

.hb-feature-list {
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.hb-feature-item {
    display: flex;
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid var(--hb-line);
    border-radius: 14px;
    background: var(--h4-paper);
}

.hb-feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--h4-soft);
    color: var(--hb-blue);
    font-size: .92rem;
}

.hb-feature-icon--youtube { background: #fff0f0; color: #f00; }
.hb-feature-icon--spotify { background: #e9faef; color: #168a42; }
.hb-feature-icon--amazon { background: #fff4df; color: #9b5b00; }

.hb-feature-item h3 {
    margin: 0 0 3px;
    color: var(--hb-ink);
    font-size: .96rem;
    font-weight: 800;
}

.hb-feature-item p {
    margin: 0;
    color: var(--h4-muted);
    font-size: .84rem;
    line-height: 1.48;
}

.hb-story-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    padding: 0 24px;
}

.hb-story-phone { max-width: 310px; }
.hb-story-phone .hb-phone-frame { height: 660px; }

/* A caption under the phone, in normal flow. The demo pages are dense below
   the fold, so any badge floated over the screen hides something; the caption
   keeps the whole preview visible and needs no offsets tied to demo content. */
.hb-visual-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 310px;
    padding: 8px 12px;
    border: 1px solid #c9d1dc;
    border-radius: 999px;
    background: #fff;
    color: var(--hb-ink);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.hb-visual-note--youtube i { color: #f00; }
.hb-visual-note--amazon i { color: #d27b00; }

@media (min-width: 920px) {
    .hb-story-grid {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
        gap: clamp(56px, 9vw, 124px);
    }

    .hb-story-grid--reverse { grid-template-columns: minmax(310px, 390px) minmax(0, 1fr); }
    .hb-story-grid--reverse .hb-story-copy { order: 2; }
    .hb-story-grid--reverse .hb-story-visual { order: 1; }
}

/* Focused social proof */
.hb-proof { background: #f2f6ff; }

/* Left-aligned, not centred: the intro has to share its left edge with the
   quote cards under it. */
.hb-proof-intro {
    display: grid;
    gap: 14px 48px;
    max-width: 1050px;
    margin: 0 0 44px;
}

.hb-proof-intro h2 {
    margin: 8px 0 0;
    color: var(--hb-ink);
    font-family: "Nunito Sans", sans-serif;
    font-size: clamp(2.15rem, 4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.04;
}

.hb-proof-intro p {
    margin: 0;
    color: var(--hb-body);
    line-height: 1.7;
}

.hb-proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* align-items is pinned because the card is an <a>: below 768px
   the25-public.css centres the children of every link for its touch targets,
   which here drags the author row into the middle under a left-aligned quote. */
.hb-quote {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    min-height: 220px;
    padding: 24px;
    border: 1px solid #dfe7f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21,43,77,.055);
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.hb-quote:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(21,43,77,.1);
    color: inherit;
    text-decoration: none;
}

.hb-quote > p {
    margin: 0 0 24px;
    color: var(--hb-ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.55;
}

.hb-quote > span { display: flex; align-items: center; gap: 11px; }
.hb-quote img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.hb-quote > span > span { display: grid; }
.hb-quote strong { color: var(--hb-ink); font-size: .84rem; }
.hb-quote small { color: var(--h4-muted); font-size: .74rem; }

@media (min-width: 720px) {
    .hb-proof-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Stacked, the cards have no neighbours to match: the 220px floor is only
   dead space under a three-line quote. */
@media (max-width: 719.98px) {
    .hb-quote { min-height: 0; }
}

@media (min-width: 900px) {
    .hb-proof-intro { grid-template-columns: 1.15fr .85fr; align-items: end; }
    .hb-proof-intro .h4-kicker { grid-column: 1 / -1; }
}

/* On-page actions */
.hb-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
}

.hb-action-grid > span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--hb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--hb-ink);
    font-size: .84rem;
    font-weight: 800;
}

.hb-action-grid i { width: 18px; color: var(--hb-blue); text-align: center; }

.hb-action-item--detail > span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 1px;
}

.hb-action-item--detail strong {
    font: inherit;
}

.hb-action-item--detail small {
    color: var(--h4-muted);
    font-size: .67rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Five tiles in two columns would strand the last one; the tile that carries a
   second line takes the full row instead. */
@media (min-width: 540px) {
    .hb-action-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-action-item--detail { grid-column: 1 / -1; }
}

/* Design and analytics reassurance */
.hb-assurance { background: var(--h4-soft-neutral); }

/* .h4-section-head carries no bottom margin of its own (home-5 spaces each
   follower instead), so without this the intro sits on the cards' top edge. */
.hb-assurance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 44px;
}

.hb-assurance-card {
    display: grid;
    gap: 28px;
    min-width: 0;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--hb-line);
    border-radius: 20px;
    background: #fff;
}

.hb-assurance-copy h3 {
    margin: 14px 0 8px;
    color: var(--hb-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.hb-assurance-copy p {
    margin: 0;
    color: var(--h4-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.hb-assurance-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--h4-soft);
    color: var(--hb-blue);
}

.hb-brand-sample,
.hb-mini-chart {
    padding: 20px;
    border: 1px solid var(--hb-line);
    border-radius: 15px;
    background: var(--h4-soft-neutral);
}

.hb-brand-swatches { display: flex; gap: 9px; }
.hb-brand-swatches i { width: 30px; height: 30px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--hb-line); }
.hb-brand-swatches i:nth-child(1) { background: #0967f2; }
.hb-brand-swatches i:nth-child(2) { background: #0b172a; }
.hb-brand-swatches i:nth-child(3) { background: #f2a94b; }
.hb-brand-swatches i:nth-child(4) { background: #e8efe2; }

.hb-brand-type { display: flex; align-items: baseline; gap: 13px; margin: 24px 0; color: var(--hb-ink); }
.hb-brand-type strong { font-family: Georgia, serif; font-size: 2.4rem; line-height: 1; }
.hb-brand-type span { font-size: .84rem; font-weight: 800; }
.hb-brand-controls { display: grid; gap: 9px; }
.hb-brand-controls span { position: relative; display: block; height: 6px; border-radius: 99px; background: #dce4ef; }
.hb-brand-controls span::after { content: ""; position: absolute; top: -4px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--hb-blue); box-shadow: 0 0 0 1px #b9c5d6; }
.hb-brand-controls span:nth-child(1)::after { left: 28%; }
.hb-brand-controls span:nth-child(2)::after { left: 62%; }
.hb-brand-controls span:nth-child(3)::after { left: 44%; }

.hb-mini-chart-head,
.hb-mini-result { display: flex; align-items: center; justify-content: space-between; }
.hb-mini-chart-head strong { color: var(--hb-ink); font-size: .86rem; }
.hb-mini-chart-head span { color: var(--h4-muted); font-size: .7rem; }
.hb-mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 105px; margin: 18px 0; border-bottom: 1px solid var(--hb-line); }
.hb-mini-bars i { flex: 1; min-width: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--hb-blue), #74adff); }
.hb-mini-result { color: var(--hb-ink); font-size: .79rem; }
.hb-mini-result span { display: flex; align-items: center; gap: 7px; }
.hb-mini-result i { color: #f00; }

@media (min-width: 820px) {
    .hb-assurance-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Route diagram collapses into an honest vertical journey on phones. */
@media (max-width: 760px) {
    .hb-route-row { flex-direction: column; padding: 18px; }
    .hb-route-row > strong { flex: none; width: 100%; padding: 0; text-align: center; }
    .hb-route-stop, .hb-route-core { flex: none; width: 100%; }
    .hb-route-arrow { transform: rotate(90deg); }
    .hb-engine-facts { align-items: center; flex-direction: column; }
}

@media (max-width: 480px) {
    .hb-story-visual { padding-inline: 6px; }
    .hb-story-phone { max-width: 290px; }
    .hb-assurance-card { padding: 22px 18px; }
}