/* =============================================================================
   HisaBooks — Landing Page
   -----------------------------------------------------------------------------
   Section layouts for index.php. Depends on css/hisabooks.css for tokens,
   typography, buttons, navigation, footer, and motion primitives.

   The page tells one story, and every section owns a different visual rhythm:
     1. Hero .............. layered product windows floating over an aurora field
     2. Ticker ............ an endless motion band
     3. Scatter ........... disconnected tools drifting, then resolving into one
     4. Core .............. a rotating orbit diagram around the shared company layer
     5. Split ............. the two product lines set against each other
     6. Suite ............. a tab rail driving one large browser showcase
     7. Who ............... an asymmetric persona grid
     8. Path .............. a scroll-driven timeline on a night surface
     9. Plan .............. the pricing planner
    10. Close ............. a final statement over stacked screenshots
   ============================================================================= */

/* =============================================================================
   1. HERO
   ========================================================================== */
.hb-hero {
    position: relative;
    padding-top: calc(var(--hb-nav-h) + clamp(48px, calc(6 * var(--hb-vw, 1vw)), 92px));
    padding-bottom: clamp(64px, calc(8 * var(--hb-vw, 1vw)), 118px);
    overflow: hidden;
    isolation: isolate;
}

/* Aurora field — slow, low-contrast colour drift behind the whole hero */
.hb-hero__aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    z-index: -2;
    pointer-events: none;
}
.hb-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    animation: hb-drift 22s var(--hb-ease-soft) infinite alternate;
}
.hb-hero__blob:nth-child(1) {
    width: calc(46 * var(--hb-vw, 1vw)); height: calc(46 * var(--hb-vw, 1vw));
    top: -8%; left: 3%;
    background: radial-gradient(circle, rgba(0, 63, 155, .38), transparent 68%);
}
.hb-hero__blob:nth-child(2) {
    width: calc(38 * var(--hb-vw, 1vw)); height: calc(38 * var(--hb-vw, 1vw));
    top: 4%; right: 1%;
    background: radial-gradient(circle, rgba(255, 206, 0, .30), transparent 68%);
    animation-duration: 27s;
    animation-delay: -6s;
}
.hb-hero__blob:nth-child(3) {
    width: calc(34 * var(--hb-vw, 1vw)); height: calc(34 * var(--hb-vw, 1vw));
    bottom: 2%; left: 33%;
    background: radial-gradient(circle, rgba(0, 63, 155, .26), transparent 70%);
    animation-duration: 32s;
    animation-delay: -13s;
}

@keyframes hb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, -4%, 0) scale(1.09); }
    100% { transform: translate3d(-4%, 3%, 0) scale(.95); }
}

/* Fine grid, masked so it fades before it reaches the copy */
.hb-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(10, 18, 36, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 18, 36, .05) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 30%, #000 18%, transparent 76%);
    mask-image: radial-gradient(ellipse 80% 62% at 50% 30%, #000 18%, transparent 76%);
    pointer-events: none;
}

.hb-hero__copy {
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
}

.hb-hero__flag {
    display: inline-flex;
    align-items: center;
    gap: var(--hb-s2);
    padding: 6px 14px 6px 6px;
    margin-bottom: clamp(26px, calc(3 * var(--hb-vw, 1vw)), 40px);
    border-radius: var(--hb-r-pill);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: var(--hb-t-xs);
    font-weight: 520;
    color: var(--hb-ink-soft);
    transition: border-color var(--hb-mid) var(--hb-ease), transform var(--hb-mid) var(--hb-ease);
}
.hb-hero__flag:hover { border-color: var(--hb-blue-mist); transform: translateY(-1px); }
.hb-hero__flag b {
    padding: 4px 11px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.hb-hero__flag i {
    width: 14px; height: 14px;
    background: currentColor;
    -webkit-mask: var(--hb-arrow) center / contain no-repeat;
    mask: var(--hb-arrow) center / contain no-repeat;
    opacity: .45;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.hb-hero__flag:hover i { transform: translateX(3px); }

/* The two headline lines are set slightly looser than the global display
   leading; at 80px the .96 default read as cramped. */
.hb-hero__title {
    line-height: 1.02;
    margin-bottom: clamp(20px, calc(2.2 * var(--hb-vw, 1vw)), 30px);
}
.hb-hero__title em {
    display: block;
    font-style: normal;
    color: var(--hb-blue-deep);
}

/* Sits under the brand headline and explains it. Sized clearly above the lede
   so the hero reads as three descending steps: brand line, plain-English
   promise, then the detail. */
.hb-hero__strap {
    position: relative;
    z-index: 0;
    font-size: clamp(1.3rem, 1.05rem + calc(1.05 * var(--hb-vw, 1vw)), 2.05rem);
    line-height: 1.3;
    letter-spacing: -.032em;
    font-weight: 560;
    color: var(--hb-ink);
    margin-bottom: clamp(22px, calc(2.4 * var(--hb-vw, 1vw)), 34px);
    text-wrap: balance;
}

/* The closing phrase carries the brand blue. No underline and no marker sweep:
   the headline above already supplies the colour accent, so this line only
   needs a weight and hue shift to lift it off the lede. */
.hb-hero__strap span {
    color: var(--hb-blue-deep);
    white-space: nowrap;
}

.hb-hero__lede {
    margin-inline: auto;
    margin-bottom: clamp(38px, calc(4.2 * var(--hb-vw, 1vw)), 60px);
    /* Narrower than the default lede and balanced, so the three lines break
       evenly instead of leaving a two-word orphan on the last line. */
    max-width: 56ch;
    text-wrap: balance;
}

.hb-hero__actions { justify-content: center; margin-bottom: clamp(22px, calc(2.4 * var(--hb-vw, 1vw)), 32px); }

.hb-hero__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hb-s2);
    font-size: var(--hb-t-xs);
    color: var(--hb-faint);
}
.hb-hero__note svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}

/* ── Hero stage: the product is the hero element ─────────────────────────── */
.hb-hero__stage {
    position: relative;
    margin-top: clamp(44px, calc(5.5 * var(--hb-vw, 1vw)), 80px);
    perspective: 2200px;
}

.hb-hero__frame {
    position: relative;
    max-width: 1060px;
    margin-inline: auto;
    border-radius: var(--hb-r-xl);
    transform: rotateX(9deg) translateY(var(--hb-hero-shift, 0px));
    transform-origin: 50% 0;
    will-change: transform;
}
.hb-hero__frame .hb-window { border-radius: var(--hb-r-xl); }

/* Satellite cards — real interface moments, not decoration */
.hb-hero__card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--hb-s3);
    padding: 13px 17px;
    border-radius: var(--hb-r-md);
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: hb-bob 7s var(--hb-ease-soft) infinite alternate;
}
.hb-hero__card strong {
    display: block;
    font-size: var(--hb-t-xs);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--hb-ink);
    white-space: nowrap;
}
.hb-hero__card span {
    display: block;
    font-size: 11px;
    color: var(--hb-faint);
    white-space: nowrap;
}
.hb-hero__card i {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    flex: none;
}
.hb-hero__card i svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}

.hb-hero__card--1 { top: 11%; left: -3%; animation-delay: -1s; }
.hb-hero__card--1 i { background: #e4f7ec; color: #0f7a4c; }

.hb-hero__card--2 { top: 41%; right: -4%; animation-delay: -3.5s; animation-duration: 8.5s; }
.hb-hero__card--2 i { background: var(--hb-blue-wash); color: var(--hb-blue-deep); }

.hb-hero__card--3 { bottom: 5%; left: 3%; animation-delay: -5.5s; animation-duration: 9.5s; }
.hb-hero__card--3 i { background: var(--hb-gold-wash); color: var(--hb-gold-deep); }

@keyframes hb-bob {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -13px, 0); }
}

@media (max-width: 900px) {
    .hb-hero__frame { transform: none; }
    .hb-hero__card--1 { top: 3%; left: -8px; }
    .hb-hero__card--2 { top: auto; bottom: 20%; right: -8px; }
    .hb-hero__card--3 { display: none; }
    .hb-hero__card { padding: 10px 13px; }
}
@media (max-width: 560px) {
    .hb-hero__card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-hero__blob,
    .hb-hero__card { animation: none; }
    .hb-hero__frame { transform: none; }
}

/* =============================================================================
   2. TICKER — an endless band that separates the hero from the argument
   ========================================================================== */
.hb-ticker {
    /* One pass moves the rail by half its width (the second set is an identical
       copy, which is what makes the loop seamless). That is ~15,300px of travel
       for ~66 labels, so 220s lands near 70px/s and a label takes about three
       seconds to cross the eye. It was 46s, which read as a blur at 330px/s. */
    --hb-ticker-duration: 220s;
    background: var(--hb-night);
    color: #fff;
    padding-block: var(--hb-s5);
    overflow: hidden;
    position: relative;
}
.hb-ticker::before,
.hb-ticker::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: clamp(60px, calc(12 * var(--hb-vw, 1vw)), 180px);
    z-index: 2;
    pointer-events: none;
}
.hb-ticker::before { left: 0;  background: linear-gradient(90deg, var(--hb-night), transparent); }
.hb-ticker::after  { right: 0; background: linear-gradient(270deg, var(--hb-night), transparent); }

.hb-ticker__rail {
    display: flex;
    width: max-content;
    animation: hb-slide var(--hb-ticker-duration) linear infinite;
}
.hb-ticker:hover .hb-ticker__rail { animation-play-state: paused; }

.hb-ticker__set { display: flex; align-items: center; flex: none; }
.hb-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: var(--hb-s3);
    padding-inline: clamp(20px, calc(2.4 * var(--hb-vw, 1vw)), 34px);
    font-size: clamp(.95rem, .85rem + calc(.35 * var(--hb-vw, 1vw)), 1.15rem);
    font-weight: 540;
    letter-spacing: -.018em;
    color: rgba(255, 255, 255, .76);
    white-space: nowrap;
}
.hb-ticker__item::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--hb-gold);
    flex: none;
}

@keyframes hb-slide {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hb-ticker__rail { animation: none; }
}

/* =============================================================================
   3. SCATTER — the problem, told as drifting disconnected tools
   ========================================================================== */
.hb-scatter { background: var(--hb-mist); overflow: hidden; }

.hb-scatter__head { text-align: center; max-width: 46ch; margin-inline: auto; }
.hb-scatter__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.hb-scatter__head .hb-lede { margin-inline: auto; margin-top: var(--hb-s4); }

.hb-scatter__field {
    position: relative;
    margin-top: clamp(44px, calc(5.5 * var(--hb-vw, 1vw)), 72px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hb-s4);
    max-width: 940px;
    margin-inline: auto;
}

.hb-scatter__tool {
    display: flex;
    align-items: center;
    gap: var(--hb-s3);
    padding: 14px 19px;
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-sm);
    font-size: var(--hb-t-sm);
    font-weight: 540;
    color: var(--hb-ink-soft);
    animation: hb-tilt 9s var(--hb-ease-soft) infinite alternate;
}
.hb-scatter__tool small {
    display: block;
    font-size: 11px;
    font-weight: 460;
    color: var(--hb-faint);
}
.hb-scatter__tool i {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--hb-mist-deep);
    color: var(--hb-faint);
    flex: none;
}
.hb-scatter__tool i svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.hb-scatter__tool:nth-child(1) { --r:  -2.4deg; animation-delay: -0.5s; }
.hb-scatter__tool:nth-child(2) { --r:   1.8deg; animation-delay: -2.1s; }
.hb-scatter__tool:nth-child(3) { --r:  -1.2deg; animation-delay: -3.6s; }
.hb-scatter__tool:nth-child(4) { --r:   2.6deg; animation-delay: -1.4s; }
.hb-scatter__tool:nth-child(5) { --r:  -2.8deg; animation-delay: -4.4s; }
.hb-scatter__tool:nth-child(6) { --r:   1.4deg; animation-delay: -2.8s; }
.hb-scatter__tool:nth-child(7) { --r:  -1.7deg; animation-delay: -5.2s; }

@keyframes hb-tilt {
    0%   { transform: rotate(var(--r, 0deg)) translateY(0); }
    100% { transform: rotate(calc(var(--r, 0deg) * -.5)) translateY(-8px); }
}

/* The pivot: a rule that draws itself, then the resolution */
.hb-scatter__pivot {
    position: relative;
    height: clamp(52px, calc(6.5 * var(--hb-vw, 1vw)), 88px);
    margin-top: var(--hb-s6);
}
.hb-scatter__pivot::before {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--hb-blue));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 900ms var(--hb-ease-out);
}
.hb-scatter__pivot.is-visible::before { transform: scaleY(1); }

.hb-scatter__answer {
    max-width: 780px;
    margin-inline: auto;
    padding: clamp(28px, calc(4 * var(--hb-vw, 1vw)), 46px);
    border-radius: var(--hb-r-xl);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hb-scatter__answer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hb-blue), var(--hb-gold));
}
.hb-scatter__answer .hb-h3 { margin-bottom: var(--hb-s3); }
.hb-scatter__answer .hb-body { max-width: 54ch; margin-inline: auto; }

.hb-scatter__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hb-s4);
    margin-top: var(--hb-s7);
    padding-top: var(--hb-s6);
    border-top: 1px solid var(--hb-line-soft);
}
.hb-scatter__stat b {
    display: block;
    font-size: clamp(1.7rem, 1.2rem + calc(1.9 * var(--hb-vw, 1vw)), 2.6rem);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 660;
    color: var(--hb-ink);
    margin-bottom: 6px;
}
.hb-scatter__stat span {
    font-size: var(--hb-t-xs);
    color: var(--hb-muted);
    line-height: 1.45;
    display: block;
}

@media (max-width: 620px) {
    .hb-scatter__stats { grid-template-columns: 1fr; gap: var(--hb-s5); }
    .hb-scatter__tool { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-scatter__tool { animation: none; transform: none; }
    .hb-scatter__pivot::before { transform: scaleY(1); }
}

/* =============================================================================
   4. CORE — the shared company layer, drawn as a live orbit
   ========================================================================== */
.hb-core { overflow: hidden; }

.hb-core__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(48px, calc(6 * var(--hb-vw, 1vw)), 96px);
    align-items: center;
}

.hb-core__copy .hb-eyebrow { margin-bottom: var(--hb-s4); }
.hb-core__copy .hb-lede { margin-top: var(--hb-s4); }

.hb-core__list { display: grid; gap: var(--hb-s2); margin-top: var(--hb-s6); }
.hb-core__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--hb-s3);
    padding: var(--hb-s3) 0;
    border-bottom: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-sm);
    color: var(--hb-ink-soft);
    line-height: 1.55;
}
.hb-core__list li::before {
    content: "";
    flex: none;
    width: 18px; height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--hb-blue-wash) var(--hb-check) center / 11px no-repeat;
}

/* Orbit stage. The radius and duration live here as custom properties so the
   breakpoints only have to restate one value instead of every label position. */
.hb-core__orbit {
    --hb-orbit-radius: 236px;
    --hb-orbit-duration: 44s;
    position: relative;
    aspect-ratio: 1;
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
    display: grid;
    place-items: center;
}

.hb-core__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed var(--hb-line);
    animation: hb-spin 44s linear infinite;
}
.hb-core__ring--1 { inset: 22%; animation-duration: 34s; }
.hb-core__ring--2 { inset: 8%;  animation-duration: 52s; animation-direction: reverse; }
.hb-core__ring--3 {
    inset: -6%;
    border-style: solid;
    border-color: var(--hb-line-soft);
    animation-duration: 70s;
}

@keyframes hb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Orbiting labels ──────────────────────────────────────────────────────
   Two elements, not one. A single element cannot both travel around a circle
   and stay upright, because its only available pivot is its own centre, so
   spinning it to face forward also spins the text upside down.

   So `.hb-core__node` is a zero-size arm pinned to the centre of the orbit: it
   rotates a full turn and holds the pill out at the radius. `.hb-core__node-pill`
   then rotates the opposite way by the same amount, which cancels the arm's
   rotation exactly and leaves the text level through all 360 degrees.

   Both animations share a duration and a negative delay, so they stay locked
   together and the delay doubles as each label's starting angle
   (44s / 5 labels = 8.8s per 72 degree step).
   ---------------------------------------------------------------------- */
.hb-core__node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    animation: hb-orbit var(--hb-orbit-duration) linear infinite;
}

.hb-core__node-pill {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: var(--hb-s2);
    padding: 9px 15px 9px 9px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-md);
    font-size: var(--hb-t-xs);
    font-weight: 560;
    color: var(--hb-ink);
    white-space: nowrap;
    animation: hb-orbit-upright var(--hb-orbit-duration) linear infinite;
}

.hb-core__node i {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--hb-blue-wash);
    color: var(--hb-blue-deep);
    flex: none;
}
.hb-core__node i svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hb-core__node--5 i { background: var(--hb-gold-wash); color: var(--hb-gold-deep); }

/* Start angles. The arm and its pill must always carry the same delay. */
.hb-core__node--1, .hb-core__node--1 .hb-core__node-pill { animation-delay: 0s; }
.hb-core__node--2, .hb-core__node--2 .hb-core__node-pill { animation-delay: -8.8s; }
.hb-core__node--3, .hb-core__node--3 .hb-core__node-pill { animation-delay: -17.6s; }
.hb-core__node--4, .hb-core__node--4 .hb-core__node-pill { animation-delay: -26.4s; }
.hb-core__node--5, .hb-core__node--5 .hb-core__node-pill { animation-delay: -35.2s; }

@keyframes hb-orbit {
    from { transform: rotate(0deg)   translateY(calc(var(--hb-orbit-radius) * -1)); }
    to   { transform: rotate(360deg) translateY(calc(var(--hb-orbit-radius) * -1)); }
}

/* translate(-50%, -50%) sits the pill's centre on the arm's tip; the rotation
   is what undoes the orbit. */
@keyframes hb-orbit-upright {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* The nucleus */
.hb-core__hub {
    position: relative;
    z-index: 4;
    width: 44%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--hb-s4);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffffff, #eff6fe);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-lg), inset 0 1px 0 #fff;
}
.hb-core__hub::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 63, 155, .18), transparent 66%);
    z-index: -1;
    animation: hb-pulse 4.5s var(--hb-ease-soft) infinite;
}
.hb-core__hub strong {
    display: block;
    font-size: var(--hb-t-h4);
    font-weight: 620;
    letter-spacing: -.024em;
    line-height: 1.2;
    color: var(--hb-ink);
}
.hb-core__hub span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--hb-faint);
    line-height: 1.45;
}

@keyframes hb-pulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.07); }
}

@media (max-width: 980px) {
    .hb-core__grid { grid-template-columns: 1fr; gap: var(--hb-s8); }
    .hb-core__orbit { max-width: 460px; --hb-orbit-radius: 194px; }
}
@media (max-width: 560px) {
    .hb-core__orbit { max-width: 330px; --hb-orbit-radius: 140px; }
    .hb-core__node-pill { padding: 6px 11px 6px 6px; font-size: 11px; }
    .hb-core__node i { width: 21px; height: 21px; border-radius: 7px; }
    .hb-core__node i svg { width: 12px; height: 12px; }
}

/* With the animations off the arms have no transform of their own, so the
   labels would pile up in the middle. Pin them to their starting angles and
   give each pill the matching correction so the text still sits level. */
@media (prefers-reduced-motion: reduce) {
    .hb-core__ring,
    .hb-core__node,
    .hb-core__node-pill,
    .hb-core__hub::after { animation: none; }

    .hb-core__node--1 { transform: rotate(0deg)   translateY(calc(var(--hb-orbit-radius) * -1)); }
    .hb-core__node--2 { transform: rotate(72deg)  translateY(calc(var(--hb-orbit-radius) * -1)); }
    .hb-core__node--3 { transform: rotate(144deg) translateY(calc(var(--hb-orbit-radius) * -1)); }
    .hb-core__node--4 { transform: rotate(216deg) translateY(calc(var(--hb-orbit-radius) * -1)); }
    .hb-core__node--5 { transform: rotate(288deg) translateY(calc(var(--hb-orbit-radius) * -1)); }

    .hb-core__node--1 .hb-core__node-pill { transform: translate(-50%, -50%) rotate(0deg); }
    .hb-core__node--2 .hb-core__node-pill { transform: translate(-50%, -50%) rotate(-72deg); }
    .hb-core__node--3 .hb-core__node-pill { transform: translate(-50%, -50%) rotate(-144deg); }
    .hb-core__node--4 .hb-core__node-pill { transform: translate(-50%, -50%) rotate(-216deg); }
    .hb-core__node--5 .hb-core__node-pill { transform: translate(-50%, -50%) rotate(-288deg); }
}
.hb-split { background: var(--hb-mist); }

.hb-split__head { text-align: center; max-width: 50ch; margin-inline: auto; }
.hb-split__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.hb-split__head .hb-lede { margin-inline: auto; margin-top: var(--hb-s4); }

.hb-split__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hb-s5);
    margin-top: clamp(44px, calc(5 * var(--hb-vw, 1vw)), 72px);
}

.hb-split__side {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(30px, calc(3.4 * var(--hb-vw, 1vw)), 48px);
    border-radius: var(--hb-r-2xl);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--hb-slow) var(--hb-ease-out);
}
.hb-split__side:hover { transform: translateY(-5px); }

/* Left — the business platform, in daylight */
.hb-split__side--core {
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    box-shadow: var(--hb-lift-md);
}
.hb-split__side--core::before {
    content: "";
    position: absolute;
    inset: auto -20% -40% -20%;
    height: 260px;
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 63, 155, .16), transparent 68%);
    z-index: -1;
}

/* The product name leads and the role sits under it as plain sentence-case
   text. The previous uppercase pill above the name read as a generic template
   label and inverted the hierarchy, putting a category above the product. */
.hb-split__name {
    font-size: clamp(1.6rem, 1.2rem + calc(1.5 * var(--hb-vw, 1vw)), 2.3rem);
    line-height: 1.08;
    letter-spacing: -.034em;
    font-weight: 640;
    margin-bottom: 6px;
}

.hb-split__role {
    font-size: var(--hb-t-body);
    font-weight: 540;
    letter-spacing: -.014em;
    color: var(--hb-blue-deep);
    margin-bottom: var(--hb-s4);
}

.hb-split__desc { font-size: var(--hb-t-sm); line-height: 1.65; color: var(--hb-muted); margin-bottom: var(--hb-s6); }

.hb-split__points { display: grid; gap: var(--hb-s3); margin-bottom: var(--hb-s6); }
.hb-split__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--hb-s3);
    font-size: var(--hb-t-sm);
    line-height: 1.5;
    color: var(--hb-ink-soft);
}
.hb-split__points li i {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    flex: none;
    margin-top: 1px;
    background: var(--hb-blue-wash);
    color: var(--hb-blue-deep);
}
.hb-split__points li i svg {
    width: 12px; height: 12px;
    fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.hb-split__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--hb-s6); }

.hb-split__foot { margin-top: auto; }
.hb-split__price { display: block; font-size: var(--hb-t-xs); color: var(--hb-faint); margin-bottom: var(--hb-s4); }

/* The seam between the two products */
.hb-split__seam {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hb-s4);
    margin-top: var(--hb-s7);
    text-align: center;
}
/* No flanking rules here either, for the same reason as the eyebrow: the line
   is centred and spaced, not framed by decorative dashes. */
.hb-split__seam span { font-size: var(--hb-t-sm); color: var(--hb-muted); max-width: 66ch; }

@media (max-width: 880px) {
    .hb-split__pair { grid-template-columns: 1fr; }
}

/* =============================================================================
   6. SUITE — one large showcase driven by a tab rail
   ========================================================================== */
.hb-suite { overflow: hidden; }

.hb-suite__head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(24px, calc(4 * var(--hb-vw, 1vw)), 72px);
    align-items: end;
    margin-bottom: clamp(36px, calc(4 * var(--hb-vw, 1vw)), 56px);
}
.hb-suite__head .hb-eyebrow { margin-bottom: var(--hb-s4); }

.hb-suite__rail {
    display: flex;
    gap: var(--hb-s2);
    overflow-x: auto;
    padding-bottom: var(--hb-s3);
    margin-bottom: var(--hb-s6);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hb-suite__rail::-webkit-scrollbar { display: none; }

.hb-suite__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--hb-s2);
    flex: none;
    padding: 11px 18px;
    border-radius: var(--hb-r-pill);
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    font-size: var(--hb-t-sm);
    font-weight: 540;
    color: var(--hb-muted);
    white-space: nowrap;
    transition:
        background-color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease),
        color var(--hb-mid) var(--hb-ease);
}
.hb-suite__tab svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    opacity: .7;
}
.hb-suite__tab:hover { color: var(--hb-ink); border-color: #ccd6e6; }
.hb-suite__tab.is-active { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; }
.hb-suite__tab.is-active svg { opacity: 1; }

.hb-suite__stage {
    position: relative;
    border-radius: var(--hb-r-2xl);
    background: linear-gradient(165deg, #f6fafe, #eef3f9);
    border: 1px solid var(--hb-line-soft);
    padding: clamp(22px, calc(3 * var(--hb-vw, 1vw)), 44px);
    overflow: hidden;
}
.hb-suite__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10, 18, 36, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 18, 36, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000, transparent 75%);
    pointer-events: none;
}

.hb-suite__panel {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(28px, calc(3.6 * var(--hb-vw, 1vw)), 56px);
    align-items: center;
    position: relative;
}
.hb-suite__panel[hidden] { display: none; }

.hb-suite__panel-copy .hb-h3 { margin-bottom: var(--hb-s4); }
.hb-suite__panel-copy > .hb-body { margin-bottom: var(--hb-s6); }

.hb-suite__metrics {
    display: grid;
    gap: var(--hb-s3);
    margin-bottom: var(--hb-s6);
    padding-bottom: var(--hb-s6);
    border-bottom: 1px solid var(--hb-line);
}
.hb-suite__metrics div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hb-s4);
}
.hb-suite__metrics span { font-size: var(--hb-t-xs); color: var(--hb-faint); }
.hb-suite__metrics b {
    font-size: var(--hb-t-sm);
    font-weight: 580;
    color: var(--hb-ink);
    text-align: right;
    letter-spacing: -.014em;
}

.hb-suite__items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--hb-s6); }
.hb-suite__items li {
    padding: 5px 11px;
    border-radius: var(--hb-r-pill);
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--hb-line-soft);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--hb-ink-soft);
}

/* Screenshot pair — the primary window with a smaller one overlapping */
.hb-suite__shots { position: relative; }
.hb-suite__shots .hb-window--lead { position: relative; z-index: 1; }
.hb-suite__shots .hb-window--trail {
    position: absolute;
    right: -4%;
    bottom: -12%;
    width: 52%;
    z-index: 2;
    box-shadow: var(--hb-lift-xl);
    animation: hb-bob 8s var(--hb-ease-soft) infinite alternate;
}

.hb-suite__panel.is-active .hb-window--lead { animation: hb-panel-in 620ms var(--hb-ease-out) both; }
.hb-suite__panel.is-active .hb-suite__panel-copy > * { animation: hb-panel-up 560ms var(--hb-ease-out) both; }
.hb-suite__panel.is-active .hb-suite__panel-copy > *:nth-child(1) { animation-delay: 40ms; }
.hb-suite__panel.is-active .hb-suite__panel-copy > *:nth-child(2) { animation-delay: 90ms; }
.hb-suite__panel.is-active .hb-suite__panel-copy > *:nth-child(3) { animation-delay: 140ms; }
.hb-suite__panel.is-active .hb-suite__panel-copy > *:nth-child(4) { animation-delay: 190ms; }
.hb-suite__panel.is-active .hb-suite__panel-copy > *:nth-child(5) { animation-delay: 240ms; }

@keyframes hb-panel-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes hb-panel-up {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
    .hb-suite__head { grid-template-columns: 1fr; align-items: start; }
    .hb-suite__panel { grid-template-columns: 1fr; }
    .hb-suite__shots { order: -1; margin-bottom: var(--hb-s5); }
    .hb-suite__shots .hb-window--trail { width: 44%; bottom: -8%; }
}
@media (max-width: 560px) {
    .hb-suite__shots .hb-window--trail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-suite__shots .hb-window--trail,
    .hb-suite__panel.is-active .hb-window--lead,
    .hb-suite__panel.is-active .hb-suite__panel-copy > * { animation: none; }
}

/* =============================================================================
   7. WHO — an asymmetric persona grid
   ========================================================================== */
.hb-who { background: var(--hb-mist); }

.hb-who__head { max-width: 48ch; margin-bottom: clamp(40px, calc(5 * var(--hb-vw, 1vw)), 64px); }
.hb-who__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.hb-who__head .hb-lede { margin-top: var(--hb-s4); }

/* Six equal cards on a 3 x 2 grid. An earlier version gave two cards a wider
   span, which left the sixth stranded on a row of its own. */
.hb-who__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hb-s4);
}

.hb-who__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--hb-r-xl);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    overflow: hidden;
    transition: border-color var(--hb-mid) var(--hb-ease);
}
.hb-who__card:hover { border-color: var(--art-edge, var(--hb-blue-mist)); }

/* Artwork sits on its own tinted stage at the top of the card. */
.hb-who__stage {
    display: grid;
    place-items: center;
    padding: var(--hb-s5) var(--hb-s5) 0;
    background: var(--art-wash, var(--hb-blue-wash));
    border-bottom: 1px solid var(--hb-line-soft);
}
.hb-who__art {
    width: 100%;
    height: auto;
    max-width: 230px;
    display: block;
}
.hb-who__art .a-1 { fill: var(--art-1, var(--hb-blue-deep)); }
.hb-who__art .a-2 { fill: var(--art-2, #c8d4e6); }
.hb-who__art .a-3 { fill: var(--hb-gold); }
.hb-who__art .a-paper { fill: #fff; }
.hb-who__art .a-line { stroke: var(--art-edge, #c8d4e6); stroke-width: 2; }
.hb-who__art .a-3-stroke {
    fill: none;
    stroke: var(--hb-gold);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hb-who__art .a-check {
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hb-who__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(20px, calc(2.2 * var(--hb-vw, 1vw)), 28px);
}
.hb-who__card h3 {
    font-size: var(--hb-t-h4);
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: var(--hb-s2);
}
.hb-who__card p {
    font-size: var(--hb-t-sm);
    line-height: 1.6;
    color: var(--hb-muted);
    margin-bottom: var(--hb-s5);
}
.hb-who__use {
    margin-top: auto;
    padding-top: var(--hb-s4);
    border-top: 1px solid var(--hb-line-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.hb-who__use span {
    font-size: 11px;
    font-weight: 520;
    color: var(--hb-muted);
    padding: 4px 9px;
    border-radius: var(--hb-r-sm);
    background: var(--hb-mist);
}

/* Each card tints its own artwork. Set by position so no inline styles are
   needed under the strict CSP. */
.hb-who__card:nth-child(1) { --art-wash: #e9f0fb; --art-1: var(--hb-blue-deep); --art-edge: #bcdcfb; }
.hb-who__card:nth-child(2) { --art-wash: #fff8dc; --art-1: #b07d10;             --art-edge: #f0dda6; }
.hb-who__card:nth-child(3) { --art-wash: #e9f7f0; --art-1: #0f7a4c;             --art-edge: #b9e2cf; }
.hb-who__card:nth-child(4) { --art-wash: #f1eefe; --art-1: #5b41cc;             --art-edge: #d3c9f7; }
.hb-who__card:nth-child(5) { --art-wash: #fdefe9; --art-1: #c25232;             --art-edge: #f5cfc0; }
.hb-who__card:nth-child(6) { --art-wash: #e9f0fb; --art-1: var(--hb-blue-deep); --art-edge: #bcdcfb; }

@media (max-width: 1000px) {
    .hb-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .hb-who__grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   8. PATH — a scroll-driven timeline on a night surface
   ========================================================================== */
.hb-path {
    background: var(--hb-night);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hb-path::before {
    content: "";
    position: absolute;
    inset: -10% -20% auto 30%;
    height: 620px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 63, 155, .22), transparent 62%);
    pointer-events: none;
}
.hb-path > * { position: relative; }

.hb-path__head { max-width: 48ch; margin-bottom: clamp(48px, calc(6 * var(--hb-vw, 1vw)), 80px); }
.hb-path__head .hb-h2 { color: #fff; }
.hb-path__head .hb-lede { color: var(--hb-night-text); margin-top: var(--hb-s4); }

.hb-path__track { position: relative; padding-left: clamp(34px, calc(5 * var(--hb-vw, 1vw)), 58px); }

/* The rail runs from the first dot to the LAST dot, not to the bottom of the
   track. The track's own height includes the final step's heading and
   paragraph, so anchoring to `bottom` left a stub of rail hanging below the
   last number with nothing to connect to.

   --hb-path-length is the measured first-dot-to-last-dot distance, written by
   marketing_home.js on load and resize. The calc() is only a pre-script
   fallback. */
.hb-path__track::before,
.hb-path__track::after {
    content: "";
    position: absolute;
    left: clamp(11px, calc(1.6 * var(--hb-vw, 1vw)), 19px);
    top: var(--hb-path-start, 15px);
    width: 2px;
    height: var(--hb-path-length, calc(100% - 60px));
    border-radius: 2px;
    /* ::after paints after the track's children, so without this the progress
       fill was drawn on top of the numbered dots instead of behind them. */
    z-index: 0;
}
.hb-path__track::before { background: rgba(255, 255, 255, .10); }

/* Scaled rather than sized: a percentage height inside a multiplied calc() does
   not resolve against an auto-height containing block, and scaleY keeps the fill
   on the compositor instead of triggering layout on every scroll frame. */
.hb-path__track::after {
    background: linear-gradient(180deg, var(--hb-blue), var(--hb-gold));
    transform: scaleY(var(--hb-path-progress, 0));
    transform-origin: top center;
    transition: transform 240ms linear;
    will-change: transform;
}

.hb-path__step { position: relative; padding-bottom: clamp(36px, calc(4.4 * var(--hb-vw, 1vw)), 60px); }
.hb-path__step:last-child { padding-bottom: 0; }

.hb-path__dot {
    position: absolute;
    /* Sits above the rail so the line runs behind the numbers. */
    z-index: 2;
    left: calc(clamp(34px, calc(5 * var(--hb-vw, 1vw)), 58px) * -1 + clamp(4px, calc(.7 * var(--hb-vw, 1vw)), 8px));
    top: 3px;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hb-night);
    border: 2px solid rgba(255, 255, 255, .16);
    font-size: 10.5px;
    font-weight: 640;
    color: rgba(255, 255, 255, .5);
    transition:
        border-color var(--hb-slow) var(--hb-ease),
        color var(--hb-slow) var(--hb-ease),
        background-color var(--hb-slow) var(--hb-ease);
}
.hb-path__step.is-visible .hb-path__dot {
    border-color: var(--hb-blue);
    background: var(--hb-blue-deep);
    color: #fff;
}

.hb-path__step h3 {
    font-size: var(--hb-t-h3);
    font-weight: 600;
    letter-spacing: -.024em;
    line-height: 1.25;
    color: #fff;
    margin-bottom: var(--hb-s3);
}
.hb-path__step p {
    font-size: var(--hb-t-sm);
    line-height: 1.68;
    color: var(--hb-night-text);
    max-width: 64ch;
}

.hb-path__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hb-s4);
    margin-top: clamp(48px, calc(5 * var(--hb-vw, 1vw)), 72px);
    padding-top: var(--hb-s6);
    border-top: 1px solid var(--hb-night-line);
}

/* =============================================================================
   9. PLAN — the pricing planner, restyled
   marketing_pricing.js now finds every element it needs through data-*
   attributes rather than class names, so this section can be restyled freely.
   Do not rename the data-* hooks in index.php without updating that script:
   they are the contract between the markup and the calculator.
   ========================================================================== */
/* The planner carries a lot of controls, so it uses the tighter section rhythm
   rather than the full one. Its top padding is pinned to the nav height because
   #pricing is an anchor target that lands flush with the viewport top. */
.hb-plan {
    position: relative;
    padding-top: max(calc(var(--hb-nav-h) + var(--hb-s5)), var(--hb-section-tight));
    padding-bottom: var(--hb-section-tight);
}

.hb-plan__head { text-align: center; max-width: 52ch; margin-inline: auto; margin-bottom: clamp(30px, calc(3.4 * var(--hb-vw, 1vw)), 44px); }
.hb-plan__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.hb-plan__head .hb-lede { margin-inline: auto; margin-top: var(--hb-s4); }

.hb-plan__builder {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
    gap: var(--hb-s5);
    align-items: start;
}

.hb-plan__controls { display: grid; gap: var(--hb-s4); }

.hb-plan__field { border: 0; padding: 0; margin: 0; min-width: 0; }
.hb-plan__field legend {
    padding: 0;
    margin-bottom: var(--hb-s3);
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-faint);
}

/* Plan cards: an explicit 2 x 2. With auto-fit these four laid out three across
   and left the fourth stranded on its own row. */
.hb-plan__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hb-s3);
}
@media (max-width: 520px) {
    .hb-plan__plans { grid-template-columns: 1fr; }
}

.hb-plan__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--hb-s4) var(--hb-s5);
    border-radius: var(--hb-r-lg);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    cursor: pointer;
    transition:
        border-color var(--hb-mid) var(--hb-ease),
        box-shadow var(--hb-mid) var(--hb-ease);
}
.hb-plan__card:hover { border-color: #c6d3e8; box-shadow: var(--hb-lift-sm); }
.hb-plan__card input { position: absolute; opacity: 0; pointer-events: none; }
.hb-plan__card.is-selected {
    border-color: var(--hb-blue);
    box-shadow: 0 0 0 3px var(--hb-blue-wash), var(--hb-lift-sm);
}

.hb-plan__card-title {
    font-size: var(--hb-t-sm);
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--hb-ink);
    margin-bottom: 6px;
}
.hb-plan__card-price {
    display: block;
    font-size: clamp(1.3rem, 1.1rem + calc(.6 * var(--hb-vw, 1vw)), 1.6rem);
    line-height: 1.05;
    letter-spacing: -.036em;
    font-weight: 660;
    color: var(--hb-ink);
    margin-bottom: 10px;
}
.hb-plan__card-summary {
    display: block;
    font-size: var(--hb-t-xs);
    line-height: 1.5;
    color: var(--hb-muted);
    margin-bottom: var(--hb-s3);
}
.hb-plan__card-features { display: grid; gap: 5px; margin-top: auto; }
.hb-plan__card-features li {
    position: relative;
    padding-left: 20px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--hb-ink-soft);
}
.hb-plan__card-features li::before {
    content: "";
    position: absolute;
    left: 0; top: 3px;
    width: 13px; height: 13px;
    background: var(--hb-check) center / contain no-repeat;
    opacity: .85;
}
.hb-plan__card-action {
    display: block;
    margin-top: var(--hb-s4);
    padding-top: 10px;
    border-top: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-xs);
    font-weight: 580;
    color: var(--hb-blue-deep);
}

.hb-plan__ribbon {
    position: absolute;
    top: -9px; right: var(--hb-s5);
    padding: 3px 10px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-gold);
    color: #3d2f00;
    font-size: 10px;
    font-weight: 640;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Free Starter reads as a distinct route, not a cheaper tier */
.hb-plan__card--free {
    background: linear-gradient(165deg, var(--hb-blue-wash), #fff);
    border-color: var(--hb-blue-mist);
}
.hb-plan__card--free .hb-plan__card-price { color: var(--hb-blue-deep); }

/* Workspace pickers */
.hb-plan__workspaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: var(--hb-s2);
}
/* Two columns: the tick sits on the same line as the workspace name, with the
   description beneath it. Centring the tick against the whole card left it
   floating beside the description instead of its own label. */
.hb-plan__ws {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 2px var(--hb-s3);
    align-content: start;
    padding: var(--hb-s3) var(--hb-s4);
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    cursor: pointer;
    transition: border-color var(--hb-mid) var(--hb-ease), background-color var(--hb-mid) var(--hb-ease);
}
.hb-plan__ws:hover { border-color: #c6d3e8; }
.hb-plan__ws input { position: absolute; opacity: 0; pointer-events: none; }

.hb-plan__ws::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    margin-top: 1px;
    width: 19px; height: 19px;
    border-radius: 6px;
    border: 1.5px solid var(--hb-line);
    background: var(--hb-paper);
    transition: background-color var(--hb-fast) var(--hb-ease), border-color var(--hb-fast) var(--hb-ease);
}

.hb-plan__ws span {
    grid-column: 2;
    grid-row: 1;
    /* Reserve two lines so the descriptions line up across the row even when
       one workspace name wraps and its neighbours do not. */
    min-height: 2.6em;
    font-size: var(--hb-t-sm);
    font-weight: 560;
    line-height: 1.3;
    color: var(--hb-ink);
}
.hb-plan__ws small {
    grid-column: 2;
    grid-row: 2;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--hb-muted);
}

.hb-plan__ws.is-selected { border-color: var(--hb-blue); background: var(--hb-blue-wash); }
.hb-plan__ws.is-selected::before {
    background: var(--hb-blue-deep) var(--hb-check-white) center / 12px no-repeat;
    border-color: var(--hb-blue-deep);
}

/* Disabled means two different things here, and they must not look alike.
   Blocked by a dependency (not selected) is genuinely unavailable, so it fades.
   Locked on because the plan already includes every workspace is good news, so
   it keeps the full selected treatment and only loses the pointer. */
.hb-plan__ws.is-disabled:not(.is-selected) { opacity: .45; cursor: not-allowed; }
.hb-plan__ws.is-selected.is-disabled { cursor: default; }

.hb-plan__note { margin-top: var(--hb-s3); font-size: var(--hb-t-xs); color: var(--hb-faint); }

/* Summary rail */
.hb-plan__summary {
    position: sticky;
    top: calc(var(--hb-nav-h) + 20px);
    padding: clamp(24px, calc(2.6 * var(--hb-vw, 1vw)), 32px);
    border-radius: var(--hb-r-xl);
    background: var(--hb-ink);
    color: #fff;
    box-shadow: var(--hb-lift-lg);
    overflow: hidden;
    isolation: isolate;
}
.hb-plan__summary::before {
    content: "";
    position: absolute;
    inset: -40% -30% auto -30%;
    height: 260px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 63, 155, .40), transparent 66%);
    z-index: -1;
}

.hb-plan__summary-eyebrow {
    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-s2);
}
.hb-plan__summary h3 {
    font-size: var(--hb-t-h4);
    font-weight: 580;
    letter-spacing: -.018em;
    color: #fff;
    margin-bottom: var(--hb-s5);
}
.hb-plan__summary-price {
    font-size: clamp(2.1rem, 1.6rem + calc(1.8 * var(--hb-vw, 1vw)), 3rem);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 680;
    color: #fff;
}
.hb-plan__summary-detail {
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .5);
    margin-top: 7px;
}

.hb-plan__summary fieldset { border: 0; padding: 0; margin: var(--hb-s6) 0 0; min-width: 0; }
.hb-plan__summary legend {
    padding: 0;
    margin-bottom: var(--hb-s3);
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* Both segments are forced to the same height. "Yearly" carries a second line
   and "Monthly" does not, so previously the two pills were different heights
   and the selected one never filled its half of the track. */
.hb-plan__segments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    border-radius: var(--hb-r-pill);
    background: rgba(255, 255, 255, .07);
}
.hb-plan__segments label { display: grid; cursor: pointer; }
.hb-plan__segments input { position: absolute; opacity: 0; pointer-events: none; }
.hb-plan__segments span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px 12px;
    border-radius: var(--hb-r-pill);
    text-align: center;
    line-height: 1.2;
    font-size: var(--hb-t-xs);
    font-weight: 560;
    color: rgba(255, 255, 255, .62);
    transition: background-color var(--hb-mid) var(--hb-ease), color var(--hb-mid) var(--hb-ease);
}
.hb-plan__segments span small {
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    opacity: .7;
    margin-top: 2px;
}
.hb-plan__segments input:checked + span { background: #fff; color: var(--hb-ink); }

.hb-plan__includes { margin-top: var(--hb-s6); }
.hb-plan__includes-title {
    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-s3);
}
.hb-plan__includes ul { display: grid; gap: 1px; }
.hb-plan__includes li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hb-s4);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: var(--hb-t-xs);
}
.hb-plan__includes li span { color: rgba(255, 255, 255, .58); }
.hb-plan__includes li b { font-weight: 580; color: #fff; }

/* The Employees row and field only apply to plans that include employee
   records, and the calculator toggles them with the hidden attribute. Hiding
   them outright made the estimate panel change height every time the visitor
   switched plan, so they keep their space and only lose their contents.
   visibility:hidden also keeps them out of the accessibility tree. */
.hb-plan__includes li[hidden],
.hb-plan__volume .hb-plan__count[hidden] {
    visibility: hidden;
}
.hb-plan__includes li[hidden] { display: flex !important; }
.hb-plan__volume .hb-plan__count[hidden] { display: block !important; }

.hb-plan__volume { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hb-s3); }
.hb-plan__count > label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .58);
    margin-bottom: 6px;
    cursor: pointer;
}
.hb-plan__volume small {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .4);
}

/* ── Stepper ──────────────────────────────────────────────────────────────
   Replaces the native number spinner, whose two stacked arrows are tiny,
   inconsistent between browsers, and unstyleable. The buttons are real
   <button>s so they are keyboard reachable, and the input keeps working for
   typing and for the arrow keys.
   ---------------------------------------------------------------------- */
.hb-stepper {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: stretch;
    border-radius: var(--hb-r-sm);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    overflow: hidden;
    transition: border-color var(--hb-fast) var(--hb-ease), background-color var(--hb-fast) var(--hb-ease);
}
.hb-stepper:focus-within {
    border-color: var(--hb-blue);
    background: rgba(255, 255, 255, .11);
}

.hb-stepper input {
    width: 100%;
    min-width: 0;
    padding: 10px 2px;
    background: none;
    border: 0;
    text-align: center;
    color: #fff;
    font-size: var(--hb-t-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* Suppress the native spinner in every engine. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.hb-stepper input::-webkit-outer-spin-button,
.hb-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hb-stepper input:focus { outline: none; }

.hb-stepper__btn {
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .72);
    transition:
        background-color var(--hb-fast) var(--hb-ease),
        color var(--hb-fast) var(--hb-ease),
        opacity var(--hb-fast) var(--hb-ease);
}
.hb-stepper__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: #fff; }
.hb-stepper__btn:active:not(:disabled) { background: rgba(255, 255, 255, .24); }
.hb-stepper__btn:disabled { opacity: .28; cursor: not-allowed; }
.hb-stepper__btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}
.hb-stepper__btn:focus-visible {
    outline: 2px solid var(--hb-blue);
    outline-offset: -2px;
    border-radius: 0;
}

/* The hint marker previously carried only an aria-label, so pointer users got
   no feedback at all. The bubble is drawn from data-tip and appears on hover
   and on keyboard focus. */
.hb-plan__info {
    position: relative;
    display: grid;
    place-items: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    font-size: 9.5px;
    font-weight: 640;
    font-style: normal;
    color: rgba(255, 255, 255, .78);
    cursor: help;
}
.hb-plan__info::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 5;
    width: max-content;
    max-width: 180px;
    padding: 7px 10px;
    border-radius: var(--hb-r-sm);
    background: #fff;
    color: var(--hb-ink);
    font-size: 11px;
    font-weight: 520;
    font-style: normal;
    line-height: 1.4;
    text-align: left;
    letter-spacing: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition:
        opacity var(--hb-fast) var(--hb-ease),
        transform var(--hb-fast) var(--hb-ease),
        visibility var(--hb-fast);
}
.hb-plan__info:hover::after,
.hb-plan__info:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.hb-plan__save {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hb-s4);
    margin-top: var(--hb-s5);
    padding: var(--hb-s3) var(--hb-s4);
    border-radius: var(--hb-r-md);
    background: rgba(255, 206, 0, .12);
    border: 1px solid rgba(255, 206, 0, .24);
    font-size: var(--hb-t-xs);
    color: var(--hb-gold);
}
.hb-plan__save b { font-weight: 620; }

.hb-plan__actions { margin-top: var(--hb-s6); display: grid; gap: var(--hb-s3); justify-items: center; }
.hb-plan__actions .hb-btn { width: 100%; }
/* No outline needed here: --hb-blue-deep reaches 3.84:1 against the near-black
   summary panel, which clears the 3:1 WCAG 1.4.11 control-boundary threshold on
   its own. Restore an outline if this button's background is ever darkened. */
.hb-plan__trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}
.hb-plan__trust svg {
    width: 12px; height: 12px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hb-plan__actions .hb-link { color: rgba(255, 255, 255, .75); }
.hb-plan__actions .hb-link:hover { color: #fff; }

@media (max-width: 940px) {
    .hb-plan__builder { grid-template-columns: 1fr; }
    .hb-plan__summary { position: static; }
}

/* =============================================================================
   10. CLOSE — the final statement over stacked product windows
   ========================================================================== */
/* One step lighter than the footer. With shadows gone the two dark bands ran
   together, so the seam is carried by a tone change plus the footer's hairline
   border rather than a glow. */
.hb-close {
    position: relative;
    background: var(--hb-night-soft);
    color: #fff;
    overflow: hidden;
    padding-block: clamp(72px, calc(7.5 * var(--hb-vw, 1vw)), 112px);
}
.hb-close::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 72%);
    pointer-events: none;
}
.hb-close > * { position: relative; z-index: 1; }

/* The copy column is the wider of the two now. It was previously capped at 24ch,
   which forced the closing headline onto four short lines and stretched the
   whole section vertically. */
.hb-close__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(36px, calc(4 * var(--hb-vw, 1vw)), 64px);
    align-items: center;
}
.hb-close__copy { max-width: 34ch; }
.hb-close__copy .hb-h2 { color: #fff; margin-bottom: var(--hb-s4); }
.hb-close__copy .hb-lede { color: var(--hb-night-text); max-width: 46ch; margin-bottom: var(--hb-s7); }
.hb-close__reassure {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-s2) var(--hb-s5);
    margin-top: var(--hb-s6);
}
.hb-close__reassure li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .58);
}
.hb-close__reassure li::before {
    content: "";
    width: 15px; height: 15px;
    flex: none;
    background: var(--hb-check-gold) center / contain no-repeat;
}

/* ── Closing artwork ──────────────────────────────────────────────────────
   Three documents rather than a fourth browser window. The hero and the
   workspace showcase already carry screenshots, and the dashboard shot here was
   a straight repeat of the hero, so this closes on the tangible output instead.
   ---------------------------------------------------------------------- */
.hb-close__stack { position: relative; }

.hb-close__art {
    width: 100%;
    height: auto;
    max-width: 540px;
    margin-inline: auto;
    display: block;
    overflow: visible;
}

/* Paper and structure */
.hb-close__art .d-paper { fill: #fff; }
.hb-close__art .d-edge  { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.hb-close__art .d-accent-blue { fill: var(--hb-blue-deep); }
.hb-close__art .d-accent-ink  { fill: var(--hb-ink); }

/* Content marks. Rules stand in for text so the art needs no translation. */
.hb-close__art .d-line { fill: #b9c7dc; }
.hb-close__art .d-soft { fill: #dfe6f1; }
.hb-close__art .d-rule { fill: #e4eaf3; }
.hb-close__art .d-avatar { fill: var(--hb-blue-mist); }
.hb-close__art .d-code { fill: #eef2f8; }
.hb-close__art .d-total-band { fill: var(--hb-blue-wash); }
.hb-close__art .d-chip-gold { fill: var(--hb-gold); }
.hb-close__art .d-badge { fill: rgba(255, 255, 255, .28); }

.hb-close__art .d-title {
    fill: #fff;
    font-family: var(--hb-font);
    font-size: 20px;
    font-weight: 680;
    letter-spacing: .04em;
}

/* The stamp is the one moment of gold, and the reason the composition reads as
   "done" rather than "in progress". */
.hb-close__art .d-stamp { fill: var(--hb-gold); }
.hb-close__art .d-stamp-ring { fill: none; stroke: rgba(10, 18, 36, .28); stroke-width: 1.5; }
.hb-close__art .d-stamp-text {
    fill: var(--hb-ink);
    font-family: var(--hb-font);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
    text-anchor: middle;
}

/* The fan. The invoice leads; the other two tilt away behind it. */
.hb-close__art .doc { transform-box: fill-box; transform-origin: center; }
.hb-close__art .doc--receipt { transform: rotate(-8deg) translateY(6px); }
.hb-close__art .doc--payslip { transform: rotate(8deg) translateY(4px); }
.hb-close__art .stamp { transform-box: fill-box; transform-origin: center; transform: rotate(-13deg); }

/* A slow drift, staggered so the three do not move as one block. */
.hb-close__stack.is-visible .hb-close__art .doc {
    animation: hb-doc-float 9s var(--hb-ease-soft) infinite alternate;
}
.hb-close__stack.is-visible .hb-close__art .doc--receipt { animation-delay: -1.2s; animation-duration: 10.5s; }
.hb-close__stack.is-visible .hb-close__art .doc--payslip { animation-delay: -3.4s; animation-duration: 11.5s; }

@keyframes hb-doc-float {
    from { translate: 0 0; }
    to   { translate: 0 -12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-close__stack.is-visible .hb-close__art .doc { animation: none; }
}

/* The artwork stays on small screens. It was hidden when this slot held a stack
   of screenshots, which were unreadable at that size; vector documents are not. */
@media (max-width: 900px) {
    .hb-close__grid { grid-template-columns: 1fr; }
    .hb-close__copy { max-width: none; }
    .hb-close__art { max-width: 420px; }
}

/* Selected plan says so, rather than leaving somebody to infer it from colour.
   The card outline already marks it; this adds the word and a tick, so the
   state also reads for anyone who does not separate the two blues. */
.hb-plan__card-action-idle,
.hb-plan__card-action-live { display: inline-flex; align-items: center; gap: 5px; }
.hb-plan__card-action-live { display: none; }
.hb-plan__card-action-live svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hb-plan__card.is-selected .hb-plan__card-action-idle { display: none; }
.hb-plan__card.is-selected .hb-plan__card-action-live { display: inline-flex; }
.hb-plan__card.is-selected .hb-plan__card-action { font-weight: 620; }