/* ── Page frame ───────────────────────────────────────────────────────────── */
.hb-checkout {
    padding-top: calc(var(--hb-nav-h) + clamp(28px, calc(4 * var(--hb-vw, 1vw)), 48px));
    padding-bottom: clamp(56px, calc(6 * var(--hb-vw, 1vw)), 88px);
    background: var(--hb-mist);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.purchase-alert {
    padding: var(--hb-s4) var(--hb-s5);
    margin-bottom: var(--hb-s5);
    border-radius: var(--hb-r-md);
    background: var(--hb-blue-wash);
    border: 1px solid var(--hb-blue-mist);
    font-size: var(--hb-t-sm);
    line-height: 1.65;
    color: var(--hb-ink-soft);
}
.purchase-alert--error {
    background: #fdeee9;
    border-color: #f5cfc0;
    color: #8a2f14;
}

.purchase-hero { padding: 0; background: none; }

.purchase-heading { max-width: 62ch; margin: 0 auto clamp(28px, calc(3.5 * var(--hb-vw, 1vw)), 44px); text-align: center; }
.purchase-heading .section-tag {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-muted);
    margin-bottom: var(--hb-s3);
}
.purchase-heading h1 {
    font-size: clamp(1.8rem, 1.3rem + calc(1.9 * var(--hb-vw, 1vw)), 2.5rem);
    line-height: 1.12;
    letter-spacing: -.032em;
    font-weight: 660;
    color: var(--hb-ink);
    margin-bottom: var(--hb-s3);
    text-wrap: balance;
}
.purchase-heading p {
    font-size: var(--hb-t-sm);
    line-height: 1.7;
    color: var(--hb-muted);
    margin-inline: auto;
    max-width: 60ch;
}

/* Board: configuration beside the running total */
.purchase-board {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .95fr);
    gap: var(--hb-s5);
    align-items: start;
}
.purchase-config { display: grid; gap: var(--hb-s4); }
.purchase-form,
.purchase-form--notice { display: block; }

/* Control groups */
.purchase-control {
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-xl);
    background: var(--hb-paper);
    padding: clamp(20px, calc(2.4 * var(--hb-vw, 1vw)), 28px);
    margin: 0;
    min-width: 0;
}
.purchase-control > legend {
    padding: 0;
    margin-bottom: var(--hb-s4);
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-faint);
}
.purchase-control-stack { display: grid; gap: var(--hb-s4); }
.purchase-control-stack--details { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Fields */
.purchase-fields { display: grid; gap: var(--hb-s4); }
.purchase-fields label,
.purchase-volume label { display: block; }
.purchase-fields label > span,
.purchase-volume label > span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--hb-t-xs);
    font-weight: 560;
    color: var(--hb-ink-soft);
    margin-bottom: 6px;
}
.purchase-fields input,
.purchase-fields select,
.purchase-volume input {
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--hb-r-sm);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    color: var(--hb-ink);
    font-size: var(--hb-t-sm);
    transition: border-color var(--hb-fast) var(--hb-ease);
}
.purchase-fields input:focus,
.purchase-fields select:focus,
.purchase-volume input:focus { outline: none; border-color: var(--hb-blue); }
.purchase-fields small,
.purchase-volume small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--hb-faint);
}
.purchase-volume { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hb-s4); }

/* Country choice */
.purchase-country { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--hb-s2); }
.purchase-country__opt {
    position: relative;
    display: block;
    padding: var(--hb-s4);
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    font-size: var(--hb-t-sm);
    font-weight: 540;
    color: var(--hb-ink);
    cursor: pointer;
    transition: border-color var(--hb-mid) var(--hb-ease), background-color var(--hb-mid) var(--hb-ease);
}
.purchase-country__opt:hover { border-color: #c6d3e8; }
.purchase-country__opt.is-selected { border-color: var(--hb-blue); background: var(--hb-blue-wash); }
.purchase-country__opt input { position: absolute; opacity: 0; pointer-events: none; }

/* Package cards */
/* Four cards, fixed at two columns. `auto-fit` leaves a lone card stranded on
   its own row at the widths where three fit, which reads as a mistake. Two by
   two is even at every size the left column actually takes. */
.purchase-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hb-s3); }
@media (max-width: 560px) {
    .purchase-package-grid { grid-template-columns: 1fr; }
}
.purchase-package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 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), outline-color var(--hb-mid) var(--hb-ease);
}
.purchase-package-card:hover { border-color: #c6d3e8; }
/* Selection ring drawn as an outline, not a shadow: it keeps the card its
   exact size and stays inside the flat house standard. */
.purchase-package-card.is-selected {
    border-color: var(--hb-blue);
    outline: 3px solid var(--hb-blue-wash);
    outline-offset: -1px;
}
.purchase-package-card input { position: absolute; opacity: 0; pointer-events: none; }
.purchase-package-card--free { background: linear-gradient(165deg, var(--hb-blue-wash), #fff); border-color: var(--hb-blue-mist); }
.purchase-package-card__sum { display: block; font-size: var(--hb-t-xs); line-height: 1.55; color: var(--hb-muted); margin-top: var(--hb-s2); }

/* Workspace and policy checks */
.purchase-workspace-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--hb-s2); }
.purchase-workspace-check {
    position: relative;
    display: block;
    padding: var(--hb-s4) var(--hb-s4) var(--hb-s4) 44px;
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    cursor: pointer;
    font-size: var(--hb-t-sm);
    color: var(--hb-ink);
    transition: border-color var(--hb-mid) var(--hb-ease), background-color var(--hb-mid) var(--hb-ease);
}
.purchase-workspace-check:hover { border-color: #c6d3e8; }

/* The checked state drives the look directly. It used to depend on a class
   that only the server ever set, so choosing a plan updated the real
   checkboxes and the price while these tiles carried on showing the state the
   page loaded with. `.is-selected` is kept in step by the script as well, for
   engines without :has(). */
.purchase-workspace-check.is-selected,
.purchase-workspace-check:has(input:checked) { border-color: var(--hb-blue); background: var(--hb-blue-wash); }
.purchase-workspace-check input { position: absolute; opacity: 0; pointer-events: none; }
.purchase-workspace-check::before {
    content: "";
    position: absolute;
    left: var(--hb-s4);
    top: 50%;
    transform: translateY(-50%);
    width: 19px; height: 19px;
    border-radius: 6px;
    border: 1.5px solid var(--hb-line);
    background: var(--hb-paper);
}
.purchase-workspace-check.is-selected::before,
.purchase-workspace-check:has(input:checked)::before {
    background: var(--hb-blue-deep) var(--hb-check-white) center / 12px no-repeat;
    border-color: var(--hb-blue-deep);
}
.purchase-workspace-check small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--hb-muted); }

.purchase-policy-check {
    display: flex;
    align-items: flex-start;
    gap: var(--hb-s3);
    padding: var(--hb-s4);
    border-radius: var(--hb-r-md);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-xs);
    line-height: 1.65;
    color: var(--hb-ink-soft);
}
.purchase-policy-check input[type="checkbox"] { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.purchase-policy-check a { color: var(--hb-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

.purchase-note,
.purchase-help { font-size: var(--hb-t-xs); line-height: 1.6; color: var(--hb-faint); margin-top: var(--hb-s3); }
.purchase-help a { color: var(--hb-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Summary rail: the running total, always in view */
.purchase-summary {
    position: sticky;
    top: calc(var(--hb-nav-h) + 20px);
    padding: clamp(22px, calc(2.6 * var(--hb-vw, 1vw)), 30px);
    border-radius: var(--hb-r-xl);
    background: var(--hb-ink);
    color: #fff;
    box-shadow: none;
}
.purchase-summary .mk-pricing-summary__eyebrow,
.purchase-summary .mk-pricing-summary__includes-title,
.purchase-summary__group > legend {
    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);
    padding: 0;
}
.purchase-summary h2, .purchase-summary h3 {
    font-size: var(--hb-t-h4);
    font-weight: 580;
    color: #fff;
    margin-bottom: var(--hb-s4);
}
.purchase-summary .mk-pricing-summary__price {
    font-size: clamp(1.9rem, 1.5rem + calc(1.4 * var(--hb-vw, 1vw)), 2.6rem);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 680;
    color: #fff;
    margin-bottom: 6px;
}
.purchase-summary p { font-size: var(--hb-t-xs); line-height: 1.65; color: rgba(255, 255, 255, .58); }
.purchase-summary__wslist { font-size: var(--hb-t-xs); line-height: 1.6; color: rgba(255, 255, 255, .72); }
.purchase-summary__group { border: 0; padding: 0; margin: var(--hb-s5) 0 0; min-width: 0; }

.purchase-summary .mk-pricing-summary__list { display: grid; margin-top: var(--hb-s4); }
.purchase-summary .mk-pricing-summary__list 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, .08);
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .6);
}
.purchase-summary .mk-pricing-summary__list li:last-child { border-bottom: 0; }
.purchase-summary .mk-pricing-summary__list b { color: #fff; font-weight: 580; }
.purchase-summary .mk-pricing-summary__actions { margin-top: var(--hb-s6); display: grid; gap: var(--hb-s3); }
.purchase-summary .marketing-btn,
.purchase-summary button[type="submit"] { width: 100%; }
.purchase-summary .mk-pricing-summary__trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
}
.purchase-summary .marketing-link { color: rgba(255, 255, 255, .78); font-size: var(--hb-t-xs); }

/* Inputs inside the dark rail invert */
.purchase-summary input,
.purchase-summary select {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .13);
    color: #fff;
}
.purchase-summary label > span { color: rgba(255, 255, 255, .58); }
.purchase-summary small { color: rgba(255, 255, 255, .4); }

/* Billing cycle segments reuse the planner treatment */
.purchase-summary .mk-pricing-segments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--hb-r-pill);
    background: rgba(255, 255, 255, .07);
}
.purchase-summary .mk-pricing-segments label { display: grid; cursor: pointer; position: relative; }
.purchase-summary .mk-pricing-segments input { position: absolute; opacity: 0; pointer-events: none; }
.purchase-summary .mk-pricing-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);
}
.purchase-summary .mk-pricing-segments input:checked + span { background: #fff; color: var(--hb-ink); }

.mk-info {
    display: inline-grid;
    place-items: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(10, 18, 36, .12);
    font-size: 9.5px;
    font-weight: 640;
    font-style: normal;
    color: var(--hb-ink-soft);
    cursor: help;
}
.purchase-summary .mk-info { background: rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .78); }

@media (max-width: 960px) {
    .purchase-board { grid-template-columns: 1fr; }
    /* What you are paying reads before what you are filling in. */
    .purchase-summary { position: static; order: -1; }
}

/* =============================================================================
   PURCHASE — two step flow
   -----------------------------------------------------------------------------
   Step 1 is the whole commercial decision: plan, cycle, team size, workspaces.
   Step 2 is the paperwork that creates the workspace. Splitting them means a
   visitor is never asked for a phone number while still deciding on a price.

   Both panes are plain blocks by default. The wizard only engages once JS adds
   `is-wizard`, so with no script the page stays a single long form that submits
   exactly as it always did.
   ============================================================================= */

/* ── Progress ─────────────────────────────────────────────────────────────── */
.purchase-steps {
    display: grid;
    grid-template-columns: repeat(var(--purchase-step-count, 2), minmax(0, 1fr));
    gap: var(--hb-s3);
    margin-bottom: var(--hb-s5);
    padding: 0;
    list-style: none;
}
.purchase-steps__item {
    display: flex;
    align-items: center;
    gap: var(--hb-s3);
    padding-top: var(--hb-s3);
    border-top: 2px solid var(--hb-line);
    transition: border-color var(--hb-mid) var(--hb-ease);
}
.purchase-steps__item.is-current,
.purchase-steps__item.is-done { border-top-color: var(--hb-blue-deep); }

.purchase-steps__num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    color: var(--hb-muted);
    font-size: 11.5px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    transition:
        background-color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease),
        color var(--hb-mid) var(--hb-ease);
}
.purchase-steps__item.is-current .purchase-steps__num,
.purchase-steps__item.is-done .purchase-steps__num {
    background: var(--hb-blue-deep);
    border-color: var(--hb-blue-deep);
    color: #fff;
}
.purchase-steps__label {
    font-size: var(--hb-t-xs);
    font-weight: 560;
    color: var(--hb-muted);
    transition: color var(--hb-mid) var(--hb-ease);
}
.purchase-steps__item.is-current .purchase-steps__label { color: var(--hb-ink); font-weight: 620; }

/* ── Panes ────────────────────────────────────────────────────────────────── */
.purchase-pane { display: grid; gap: var(--hb-s4); }

/* The panes slide in from 26px off-axis. Without clipping, that briefly widens
   the page and flashes a horizontal scrollbar on a phone. `clip` rather than
   `hidden` so the axis stays independent and the tooltip above the employees
   field is still free to escape upwards. */
.purchase-config {
    overflow-x: clip;
    overflow-y: visible;
}

/* Only once the script takes over does one pane hide. */
.purchase-form.is-wizard .purchase-pane { display: none; }
.purchase-form.is-wizard .purchase-pane.is-active { display: grid; }

.purchase-form.is-wizard .purchase-pane.is-active.is-forward { animation: purchase-in-fwd 420ms var(--hb-ease-out) both; }
.purchase-form.is-wizard .purchase-pane.is-active.is-back    { animation: purchase-in-back 420ms var(--hb-ease-out) both; }

@keyframes purchase-in-fwd {
    from { opacity: 0; transform: translate3d(26px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes purchase-in-back {
    from { opacity: 0; transform: translate3d(-26px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

.purchase-pane__foot { display: grid; gap: var(--hb-s3); }
.purchase-pane__foot .hb-btn { width: 100%; }
.purchase-pane__foot .hb-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.purchase-pane__foot .hb-btn:hover svg { transform: translateX(3px); }

/* Account confirmation is deliberately lightweight: a verified Google identity
   belongs to the buyer, while Stripe stays the payment authority. */
.purchase-account-choice { display: grid; gap: var(--hb-s3); }
.purchase-account-choice__note {
    margin: calc(var(--hb-s2) * -1) 0 0;
    font-size: var(--hb-t-xs);
    line-height: 1.55;
    color: var(--hb-faint);
}
.purchase-account-choice__divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hb-s3);
    color: var(--hb-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.purchase-account-choice__divider::before,
.purchase-account-choice__divider::after {
    content: "";
    height: 1px;
    background: var(--hb-line-soft);
}
.purchase-google-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid #cdd8e8;
    border-radius: var(--hb-r-md);
    background: var(--hb-paper);
    color: var(--hb-ink);
    font: inherit;
    font-size: var(--hb-t-sm);
    font-weight: 560;
    cursor: pointer;
    transition: border-color var(--hb-fast) var(--hb-ease), background-color var(--hb-fast) var(--hb-ease), transform var(--hb-fast) var(--hb-ease);
}
.purchase-google-button:hover { border-color: var(--hb-blue); background: var(--hb-blue-wash); transform: translateY(-1px); }
.purchase-google-button:focus-visible { outline: 2px solid var(--hb-blue); outline-offset: 2px; }
.purchase-google-button__mark,
.purchase-account-proof__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d7dfeb;
    color: #4285f4;
    font-size: 13px;
    font-weight: 720;
    line-height: 1;
}
.purchase-account-proof {
    display: flex;
    align-items: center;
    gap: var(--hb-s3);
    padding: 12px 14px;
    border: 1px solid #bcd8ff;
    border-radius: var(--hb-r-md);
    background: var(--hb-blue-wash);
    color: var(--hb-ink);
}
.purchase-account-proof > span:last-child { display: grid; gap: 2px; min-width: 0; }
.purchase-account-proof strong { font-size: var(--hb-t-sm); font-weight: 600; }
.purchase-account-proof small { overflow: hidden; color: var(--hb-ink-soft); font-size: var(--hb-t-xs); text-overflow: ellipsis; white-space: nowrap; }

/* ── Back control ─────────────────────────────────────────────────────────── */
.purchase-back {
    display: flex;
    align-items: center;
    gap: var(--hb-s2);
    padding: 9px 14px 9px 10px;
    justify-self: start;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-pill);
    background: var(--hb-paper);
    font-size: var(--hb-t-xs);
    color: var(--hb-muted);
    cursor: pointer;
    transition: border-color var(--hb-mid) var(--hb-ease), background-color var(--hb-mid) var(--hb-ease);
}
.purchase-back:hover { border-color: #c6d3e8; background: var(--hb-mist); }
.purchase-back svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.purchase-back:hover svg { transform: translateX(-3px); }
.purchase-back strong { color: var(--hb-ink); font-weight: 620; }

/* ── Plan cards ───────────────────────────────────────────────────────────── */
.purchase-plan { position: relative; }
.purchase-plan__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    border-radius: var(--hb-r-lg) var(--hb-r-lg) 0 0;
    background: var(--hb-blue-deep);
    color: #fff;
    font-size: 10.5px;
    font-weight: 640;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}
.purchase-plan--featured { padding-top: calc(clamp(20px, calc(2.4 * var(--hb-vw, 1vw)), 28px) + 20px); }

.purchase-plan__title {
    display: block;
    font-size: var(--hb-t-xs);
    font-weight: 620;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: var(--hb-s2);
}
.purchase-plan__price {
    display: block;
    font-size: clamp(1.5rem, 1.2rem + calc(1 * var(--hb-vw, 1vw)), 1.95rem);
    line-height: 1.05;
    letter-spacing: -.036em;
    font-weight: 680;
    color: var(--hb-ink);
    margin-bottom: var(--hb-s3);
}
.purchase-plan__price small {
    font-size: .5em;
    font-weight: 560;
    letter-spacing: -.01em;
    color: var(--hb-muted);
}
.purchase-plan__summary {
    display: block;
    font-size: var(--hb-t-xs);
    line-height: 1.6;
    color: var(--hb-muted);
    margin-bottom: var(--hb-s4);
}
.purchase-plan__features {
    display: grid;
    gap: 7px;
    margin: 0 0 var(--hb-s4);
    padding: 0;
    list-style: none;
}
.purchase-plan__features li {
    position: relative;
    padding-left: 21px;
    font-size: var(--hb-t-xs);
    line-height: 1.55;
    color: var(--hb-ink-soft);
}
.purchase-plan__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background: var(--hb-check) center / contain no-repeat;
}
.purchase-plan__action {
    display: block;
    margin-top: auto;
    padding: 10px 16px;
    border-radius: var(--hb-r-pill);
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    color: var(--hb-ink);
    font-size: var(--hb-t-xs);
    font-weight: 580;
    text-align: center;
    transition:
        background-color var(--hb-mid) var(--hb-ease),
        color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease);
}
.purchase-package-card:hover .purchase-plan__action { border-color: #c6d3e8; background: var(--hb-mist); }
.purchase-package-card.is-selected .purchase-plan__action {
    background: var(--hb-blue-dark);
    border-color: var(--hb-blue-dark);
    color: #fff;
}

/* ── Billing cycle segments ───────────────────────────────────────────────── */
.purchase-segments {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line);
    justify-self: start;
}
.purchase-segments label { position: relative; display: block; cursor: pointer; }
.purchase-segments input { position: absolute; opacity: 0; pointer-events: none; }
.purchase-segments span {
    display: block;
    padding: 9px 18px;
    border-radius: var(--hb-r-pill);
    font-size: var(--hb-t-xs);
    font-weight: 560;
    color: var(--hb-muted);
    white-space: nowrap;
    transition: background-color var(--hb-mid) var(--hb-ease), color var(--hb-mid) var(--hb-ease);
}
.purchase-segments span small {
    font-size: 10.5px;
    font-weight: 560;
    color: var(--hb-success);
    margin-left: 5px;
}
.purchase-segments input:checked + span { background: var(--hb-paper); color: var(--hb-ink); font-weight: 620; }
.purchase-segments input:focus-visible + span { outline: 2px solid var(--hb-blue); outline-offset: 2px; }

/* ── Fields and the locked billing country ────────────────────────────────── */
.form-block { display: block; min-width: 0; }
.form-block--full { grid-column: 1 / -1; }
.form-block__label,
.purchase-fields .form-block > label {
    display: block;
    font-size: var(--hb-t-xs);
    font-weight: 560;
    color: var(--hb-ink-soft);
    margin-bottom: 6px;
}
.purchase-locked {
    display: flex;
    align-items: center;
    gap: var(--hb-s3);
    padding: 11px 13px;
    border-radius: var(--hb-r-sm);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line);
    font-size: var(--hb-t-sm);
    color: var(--hb-ink);
}
.purchase-locked__flag {
    display: grid;
    place-items: center;
    min-width: 30px;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--hb-blue-deep);
    color: #fff;
    font-size: 10.5px;
    font-weight: 660;
    letter-spacing: .05em;
}

/* ── Employees tooltip ────────────────────────────────────────────────────── */
.purchase-info {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--hb-mist-deep);
    color: var(--hb-muted);
    font-size: 10px;
    font-weight: 680;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    cursor: help;
}
.purchase-info::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--hb-night);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hb-fast) var(--hb-ease), transform var(--hb-fast) var(--hb-ease);
    z-index: 5;
}
.purchase-info:hover::after,
.purchase-info:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Summary: a receipt that follows you down ─────────────────────────────── */
.purchase-summary {
    position: sticky;
    top: calc(var(--hb-nav-h) + 16px);
    padding: clamp(22px, calc(2.6 * var(--hb-vw, 1vw)), 30px);
    border-radius: var(--hb-r-2xl);
    background: var(--hb-night);
    color: #fff;
}
.purchase-summary__head { margin-bottom: var(--hb-s4); }
.purchase-summary__eyebrow {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: var(--hb-s2);
}
.purchase-summary__head h3 {
    font-size: var(--hb-t-body);
    font-weight: 620;
    letter-spacing: -.018em;
    color: #fff;
}
.purchase-summary__price {
    font-size: clamp(1.75rem, 1.4rem + calc(1.4 * var(--hb-vw, 1vw)), 2.3rem);
    line-height: 1.05;
    letter-spacing: -.038em;
    font-weight: 680;
    color: #fff;
    margin-bottom: var(--hb-s3);
}
.purchase-summary p {
    font-size: var(--hb-t-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}
.purchase-summary__includes {
    margin-top: var(--hb-s5);
    padding-top: var(--hb-s4);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.purchase-summary__includes-title {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: var(--hb-s3);
}
.purchase-summary__list { display: grid; gap: 9px; margin: 0 0 var(--hb-s3); padding: 0; list-style: none; }
.purchase-summary__list li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hb-s2);
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .78);
}
.purchase-summary__list li i {
    width: 15px;
    height: 15px;
    background: var(--hb-check-gold) center / contain no-repeat;
}
.purchase-summary__list li b { color: #fff; font-weight: 620; }

.purchase-summary__wslist {
    font-size: var(--hb-t-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
}

.purchase-summary__lines {
    display: grid;
    gap: 10px;
    margin: var(--hb-s5) 0 0;
    padding-top: var(--hb-s4);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.purchase-summary__lines > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hb-s3);
}
.purchase-summary__lines dt { font-size: var(--hb-t-xs); color: rgba(255, 255, 255, .6); }
.purchase-summary__lines dd {
    margin: 0;
    font-size: var(--hb-t-xs);
    font-weight: 620;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.purchase-trust {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: var(--hb-s4);
    font-size: 11px;
    line-height: 1.5;
    color: var(--hb-faint);
}
.purchase-summary .purchase-trust { color: rgba(255, 255, 255, .5); }

/* ── Consent ──────────────────────────────────────────────────────────────── */
.purchase-policy-check {
    display: flex;
    align-items: flex-start;
    gap: var(--hb-s3);
    padding: var(--hb-s4);
    border-radius: var(--hb-r-md);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line-soft);
    font-size: var(--hb-t-xs);
    line-height: 1.65;
    color: var(--hb-ink-soft);
}
.purchase-policy-check input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.purchase-policy-check a { color: var(--hb-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

.purchase-control__intro {
    margin: -4px 0 var(--hb-s4);
    font-size: var(--hb-t-xs);
    line-height: 1.6;
    color: var(--hb-muted);
}

@media (prefers-reduced-motion: reduce) {
    .purchase-form.is-wizard .purchase-pane.is-active.is-forward,
.purchase-form.is-wizard .purchase-pane.is-active.is-back { animation: none; }
.purchase-pane__foot .hb-btn:hover svg,
.purchase-back:hover svg,
.purchase-google-button:hover { transform: none; }
}

@media (max-width: 980px) {
    .purchase-summary { position: static; }
}

/* =============================================================================
   PURCHASE — density and alignment pass
   -----------------------------------------------------------------------------
   The first cut was set like a marketing page: display weights, big prices, and
   marketing-sized padding. A checkout is a working screen. Someone here has
   decided to buy and wants to see the whole decision without scrolling, so the
   type comes down to interface weights and the padding comes in.

   The plan cards use subgrid so every card in a row shares the same tracks.
   That is what puts the buttons on one line: the title, price, blurb, button,
   and feature list of two neighbouring cards are laid on the same rails rather
   than each card sizing itself.
   ============================================================================= */

/* ── Page frame ───────────────────────────────────────────────────────────── */
.hb-checkout.purchase-page {
    padding-top: calc(var(--hb-nav-h) + clamp(16px, calc(2 * var(--hb-vw, 1vw)), 26px));
    padding-bottom: clamp(32px, calc(4 * var(--hb-vw, 1vw)), 56px);
}
.purchase-heading { margin-bottom: clamp(18px, calc(2.2 * var(--hb-vw, 1vw)), 26px); }
.purchase-heading h1 {
    font-size: clamp(1.32rem, 1.1rem + calc(.9 * var(--hb-vw, 1vw)), 1.6rem);
    font-weight: 620;
    letter-spacing: -.024em;
    margin-bottom: 6px;
}
.purchase-heading p { font-size: var(--hb-t-xs); line-height: 1.55; }
.purchase-heading .section-tag { margin-bottom: 8px; }

/* The left column carries four plan cards; the summary only has to hold a
   price and two small controls, so the width goes to the side doing the work. */
.purchase-board {
    gap: clamp(16px, calc(1.8 * var(--hb-vw, 1vw)), 24px);
    grid-template-columns: minmax(0, 1.82fr) minmax(0, .74fr);
}
.purchase-config { gap: var(--hb-s3); }
.purchase-pane { gap: var(--hb-s3); }

/* ── Control groups ───────────────────────────────────────────────────────── */
.purchase-control { padding: clamp(14px, calc(1.5 * var(--hb-vw, 1vw)), 18px); border-radius: var(--hb-r-lg); }
/* A legend sits on the fieldset border, so its own margin stacks on top of the
   fieldset's padding-top. Carrying both left a 30px hole under every heading. */
.purchase-control > legend {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: .09em;
}
.purchase-control__intro { margin: -2px 0 var(--hb-s3); font-size: 11.5px; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
.purchase-steps { margin-bottom: var(--hb-s3); gap: var(--hb-s2); }
.purchase-steps__item { padding-top: 8px; gap: 8px; }
.purchase-steps__num { width: 20px; height: 20px; font-size: 10.5px; }
.purchase-steps__label { font-size: 11.5px; }

/* ── Plan cards: shared tracks so neighbours line up ──────────────────────── */
.purchase-package-grid { gap: var(--hb-s2); }

/* Once there is room, all four go on one line. Two rows of two costs about
   275px of height, which is most of the reason the page scrolled at all.
   Subgrid keeps them aligned at either count. */
@media (min-width: 1120px) {
    .purchase-package-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.purchase-package-card {
    padding: 15px 15px 16px;
    border-radius: var(--hb-r-lg);
    gap: 0;
}

/* Two cards sit side by side; each spans the same five tracks, so their
   buttons and feature lists start at the same y no matter how long the blurb
   above happens to run. */
@supports (grid-template-rows: subgrid) {
    .purchase-package-grid > .purchase-package-card {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
    }
}

.purchase-plan__title {
    font-size: 10px;
    letter-spacing: .09em;
    font-weight: 620;
    margin-bottom: 4px;
}
.purchase-plan__price {
    font-size: 1.45rem;
    font-weight: 620;
    letter-spacing: -.028em;
    line-height: 1.1;
    margin-bottom: 6px;
}
.purchase-plan__price small { font-size: .46em; font-weight: 540; }
.purchase-plan__summary {
    font-size: 11.5px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.purchase-plan__action {
    padding: 8px 14px;
    font-size: 11.5px;
    font-weight: 560;
    margin: 0 0 10px;
}
.purchase-plan__features { gap: 5px; margin: 0; }
.purchase-plan__features li {
    padding-left: 18px;
    font-size: 11.5px;
    line-height: 1.45;
}
.purchase-plan__features li::before { width: 12px; height: 12px; top: 1px; }

/* The badge sits in the corner rather than as a full width bar. A bar needs
   its own row of padding, which would push this card's content down and break
   the alignment with the card beside it. */
.purchase-plan__ribbon {
    top: 8px;
    left: auto;
    right: 8px;
    padding: 3px 8px;
    border-radius: var(--hb-r-pill);
    font-size: 9px;
    letter-spacing: .07em;
}
.purchase-plan--featured { padding-top: 15px; }

/* The plan cards are already cards. Wrapping them in a bordered panel is a box
   inside a box, and it costs a legend plus two lots of padding for nothing. */
.purchase-control--packages {
    border: 0;
    background: none;
    padding: 0;
}

/* ── Workspace picker ─────────────────────────────────────────────────────── */
.purchase-workspace-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px;
}
/* The left padding is not decoration: it is the gap the drawn checkbox sits
   in. Setting a plain shorthand here wiped it and the box landed on top of the
   first few letters of every label. */
.purchase-workspace-check {
    padding: 8px 10px 8px 31px;
    font-size: 11.5px;
    line-height: 1.35;
    border-radius: var(--hb-r-sm);
}
.purchase-workspace-check::before {
    left: 9px;
    width: 15px;
    height: 15px;
    border-radius: 5px;
}
.purchase-workspace-check.is-selected::before,
.purchase-workspace-check:has(input:checked)::before { background-size: 10px; }

.purchase-note { font-size: 10.5px; margin-top: 8px; }

/* ── Step foot ────────────────────────────────────────────────────────────── */
.purchase-pane__foot { gap: var(--hb-s3); }
.purchase-pane__foot .hb-btn { padding: 11px 20px; font-size: var(--hb-t-xs); }
.purchase-policy-check { padding: 11px 13px; font-size: 11.5px; line-height: 1.55; }
.purchase-back { padding: 7px 12px 7px 9px; font-size: 11.5px; }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.purchase-fields { gap: var(--hb-s3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.purchase-fields .form-block > label,
.form-block__label { font-size: 11.5px; margin-bottom: 4px; }
.purchase-fields input,
.purchase-fields select { padding: 9px 11px; font-size: 12.5px; }
.purchase-help { font-size: 10.5px; line-height: 1.45; margin-top: 4px; }

/* ── Billing country: one compact line, not a full width field ────────────── */
.purchase-locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    /* A grid item stretches to its track whatever its display is, so the chip
       has to opt out or it spans the full field row. */
    justify-self: start;
    padding: 6px 12px 6px 6px;
    border-radius: var(--hb-r-pill);
    background: var(--hb-mist);
    border: 1px solid var(--hb-line);
    font-size: 11.5px;
    color: var(--hb-muted);
}
.purchase-locked strong { color: var(--hb-ink); font-weight: 620; }
.purchase-locked__flag {
    min-width: 0;
    padding: 3px 6px;
    border-radius: var(--hb-r-pill);
    font-size: 9.5px;
    letter-spacing: .04em;
}
/* --hb-faint on the mist chip lands at 3:1, so this takes the muted tone. */
.purchase-locked__note { color: var(--hb-muted); }

/* ── Summary: now holds the controls that move the price ──────────────────── */
.purchase-summary { padding: clamp(16px, calc(1.8 * var(--hb-vw, 1vw)), 20px); border-radius: var(--hb-r-xl); }
.purchase-summary__head { margin-bottom: var(--hb-s3); }
.purchase-summary__eyebrow { font-size: 10px; margin-bottom: 4px; }
.purchase-summary__head h3 { font-size: var(--hb-t-sm); font-weight: 600; }
.purchase-summary__price {
    font-size: 1.7rem;
    font-weight: 620;
    letter-spacing: -.03em;
    margin-bottom: 6px;
}
.purchase-summary p { font-size: 10.5px; line-height: 1.5; }
/* The trial and first charge read before anything else under the price. */
.purchase-summary .purchase-summary__trial {
    font-size: 12.5px;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 6px;
}
.purchase-summary__trial strong { font-weight: 650; }
.purchase-summary__includes { margin-top: var(--hb-s4); padding-top: var(--hb-s3); }
.purchase-summary__includes-title { font-size: 10px; margin-bottom: 8px; }
.purchase-summary__list { gap: 6px; margin-bottom: 8px; }
.purchase-summary__list li { font-size: 11.5px; }
.purchase-summary__wslist { font-size: 10.5px; }

.purchase-summary__group {
    margin: var(--hb-s4) 0 0;
    padding: var(--hb-s3) 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    min-width: 0;
}
.purchase-summary__group > legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 620;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* Segments and number fields read on the night panel. */
.purchase-summary .purchase-segments {
    display: grid;
    grid-auto-flow: column;
    width: 100%;
    padding: 3px;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
}
.purchase-summary .purchase-segments span {
    padding: 7px 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .66);
    text-align: center;
}
.purchase-summary .purchase-segments span small { font-size: 9.5px; color: #6fe0a8; }
.purchase-summary .purchase-segments input:checked + span {
    background: #fff;
    color: var(--hb-night);
    font-weight: 620;
}
.purchase-summary .purchase-segments input:checked + span small { color: #0b6b42; }

.purchase-summary .purchase-volume { gap: var(--hb-s3); grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.purchase-summary .purchase-volume label > span {
    font-size: 11px;
    color: rgba(255, 255, 255, .66);
    margin-bottom: 4px;
}
.purchase-summary .purchase-volume input {
    padding: 8px 10px;
    font-size: 12.5px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
}
.purchase-summary .purchase-volume input:focus { border-color: var(--hb-blue-bright); }
.purchase-summary .purchase-volume small { font-size: 10px; color: rgba(255, 255, 255, .48); }
.purchase-summary .purchase-info {
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .82);
}
.purchase-summary .purchase-info::after { background: #fff; color: var(--hb-night); }

.purchase-trust { margin-top: var(--hb-s3); font-size: 10px; }

@media (max-width: 560px) {
    .purchase-locked { width: 100%; }
}

/* =============================================================================
   PURCHASE — plan head, steppers, and the selected state
   ============================================================================= */

/* ── Plan head: name on the left, flag on the right ───────────────────────────
   The flag used to be a pill floating over the top corner, which landed on the
   plan name. Sitting it in the same row removes the collision and costs no
   extra height, since the name was already occupying that track alone.
   -------------------------------------------------------------------------- */
.purchase-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    min-height: 17px;
}
.purchase-plan__title { margin-bottom: 0; }

.purchase-plan__flag {
    flex: none;
    font-size: 9px;
    font-weight: 660;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* blue-deep lands at 4.4:1 against the top of this card's tint, which is
       under AA for lettering this small. The darker blue clears it. */
    color: var(--hb-blue-dark);
    white-space: nowrap;
}

/* The recommended card is marked by its edge rather than by a badge sitting on
   top of it. Quieter, and it survives at any card width. */
.purchase-package-card.purchase-plan--featured {
    border-color: var(--hb-blue);
    background: linear-gradient(180deg, var(--hb-blue-wash), var(--hb-paper) 42%);
}
.purchase-plan--featured { padding-top: 15px; }

/* ── Selected plan: colour plus the word ──────────────────────────────────────
   Colour alone asks somebody to infer the state from a palette they have not
   been taught. The label says it outright, and the tick reads without colour
   at all.
   -------------------------------------------------------------------------- */
.purchase-plan__action-live,
.purchase-plan__action-idle { display: inline-flex; align-items: center; gap: 5px; justify-content: center; }
.purchase-plan__action-live { display: none; }
.purchase-plan__action-live svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.purchase-package-card.is-selected .purchase-plan__action-idle { display: none; }
.purchase-package-card.is-selected .purchase-plan__action-live { display: inline-flex; }

/* The selected card is also outlined, so the state reads from across the row
   and not only from the button. */
.purchase-package-card.is-selected {
    border-color: var(--hb-blue-deep);
    outline: 1px solid var(--hb-blue-deep);
    outline-offset: -2px;
}

/* ── Steppers ─────────────────────────────────────────────────────────────────
   Native number spinners are two three-pixel arrows stacked in a corner. These
   are real targets, and they move by the field's own step, which for employee
   records is blocks of five.
   -------------------------------------------------------------------------- */
.purchase-count { display: block; min-width: 0; }
.purchase-count > label {
    display: block;
    font-size: 11px;
    font-weight: 560;
    color: rgba(255, 255, 255, .66);
    margin-bottom: 5px;
}

.purchase-stepper {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: stretch;
    border-radius: var(--hb-r-sm);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    overflow: hidden;
}
.purchase-stepper__btn {
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--hb-fast) var(--hb-ease), color var(--hb-fast) var(--hb-ease);
}
.purchase-stepper__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.purchase-stepper__btn:disabled { opacity: .3; cursor: not-allowed; background: none; }
.purchase-stepper__btn:focus-visible { outline: 2px solid var(--hb-blue-bright); outline-offset: -2px; }

.purchase-summary .purchase-stepper input,
.purchase-stepper input {
    width: 100%;
    padding: 8px 2px;
    border: 0;
    border-inline: 1px solid rgba(255, 255, 255, .12);
    background: none;
    color: #fff;
    font-size: 13px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* The arrows are replaced, so the native ones go. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.purchase-stepper input::-webkit-outer-spin-button,
.purchase-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.purchase-stepper input:focus { outline: none; background: rgba(255, 255, 255, .06); }

/* Two lines are reserved because "95 employees, 20 extra" wraps in this column
   while "3 users" does not, and the difference was resizing the whole panel
   whenever a plan with people workspaces was chosen. */
.purchase-count > small {
    display: block;
    margin-top: 5px;
    min-height: 2.4em;
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, .48);
}

/* The summary column is narrower now, so the two counts stack rather than
   squeezing a stepper into half of it. */
.purchase-summary .purchase-volume { grid-template-columns: minmax(0, 1fr); gap: var(--hb-s3); }

/* =============================================================================
   PURCHASE — summary pinning and step bar placement
   ============================================================================= */

/* The step bar takes its own row in the left column, so the summary begins
   level with the top of the plan cards instead of level with the progress
   line. Placement is conditional because the custom offer route has no steps
   and must keep its two plain columns. */
.purchase-board > .purchase-steps { grid-column: 1; grid-row: 1; }
.purchase-board:has(> .purchase-steps) > .purchase-config { grid-column: 1; grid-row: 2; }
.purchase-board:has(> .purchase-steps) > .purchase-summary { grid-column: 2; grid-row: 2; }

/* Pinned, and the same size whatever is selected.
   `sticky` is what holds it in place: the panel stays put under the nav while
   the left side scrolls. Real `position: fixed` would take it out of the grid
   and need its width and offsets hardcoded at every breakpoint.

   The height is reserved because the included-workspaces line grows from one
   row to three as workspaces are added, and the panel was resizing under the
   pointer while somebody was still choosing. */
.purchase-summary {
    position: sticky;
    top: calc(var(--hb-nav-h) + 16px);
    min-height: 462px;
    align-self: start;
}
/* Reserved for the longest case, which is all five workspaces across three
   lines. Without this the panel grew as workspaces were ticked and the price
   above it shifted under the pointer. */
.purchase-summary__wslist {
    display: block;
    min-height: 4.8em;
}

/* The two counts stay side by side at every width so that hiding the employees
   field, which happens on any plan without people workspaces, does not change
   the height of the panel either. */
.purchase-summary .purchase-volume { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 980px) {
    /* Stacked, so there is nothing to pin against and nothing to reserve. */
    .purchase-summary { position: static; min-height: 0; }
    .purchase-summary__wslist { min-height: 0; }
    /* Two steppers side by side leave about 30px for the value on a phone.
       Nothing is pinned here, so the height changing costs nothing. */
    .purchase-summary .purchase-volume { grid-template-columns: minmax(0, 1fr); }
    .purchase-count > small { min-height: 0; }
    .purchase-board:has(> .purchase-steps) > .purchase-config,
    .purchase-board:has(> .purchase-steps) > .purchase-summary,
    .purchase-board > .purchase-steps { grid-column: 1; grid-row: auto; }
}

/* The unit belongs in the label, where it is always readable. It replaced a
   hover-only icon that never showed on touch and wrapped onto its own line in
   the narrow column. */
/* `.purchase-volume label > span` from the earlier markup still matches
   anything inside these labels and makes it `display: block`, which pushed the
   unit onto a line of its own and made the employees column taller than the
   users column. That was also why the old tooltip icon appeared as a blob
   above the field rather than beside the word. */
.purchase-count > label .purchase-count__unit {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: 500;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
}
/* The line box is pinned so the 14px hint button cannot make the employees
   label a pixel taller than the users label, which was enough to change the
   height of the whole pinned panel. */
.purchase-count > label {
    white-space: nowrap;
    line-height: 18px;
    min-height: 18px;
}

/* The step bar immediately above already reads "Choose your plan", so this
   legend was saying it twice. It stays in the markup because a fieldset needs
   an accessible name, but it no longer takes a line, which is also what puts
   the top of the cards level with the top of the summary. */
.purchase-control--packages > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── The employees hint ───────────────────────────────────────────────────────
   A real button, so it is reachable by keyboard and opens on tap rather than
   only on hover. The display is declared at this specificity because
   `.purchase-volume label > span` from the previous markup still matches
   anything inside these labels and would otherwise make it a block, which is
   what put it on a line of its own the last time.
   -------------------------------------------------------------------------- */
.purchase-count > label .purchase-info,
.purchase-summary .purchase-info {
    /* Not positioned, deliberately. An earlier rule made this relative, which
       turned the 14px button into the containing block for the bubble below,
       so `max-width: 100%` clipped the message to 14px and showed one letter.
       The anchor has to be the field. */
    position: static;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0 0 0 3px;
    vertical-align: middle;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .88);
    font-size: 9.5px;
    font-weight: 680;
    font-style: normal;
    font-family: inherit;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.purchase-count > label .purchase-info:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.purchase-count > label .purchase-info:focus-visible {
    outline: 2px solid var(--hb-blue-bright);
    outline-offset: 2px;
}

/* The bubble is anchored to the field, not the icon, so a 14px circle in a
   narrow column cannot drag it off the edge of the panel. */
.purchase-count { position: relative; }
.purchase-count > label .purchase-info::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 6px;
    background: #fff;
    color: var(--hb-night);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity var(--hb-fast) var(--hb-ease), transform var(--hb-fast) var(--hb-ease);
    z-index: 6;
}
.purchase-count > label .purchase-info:hover::after,
.purchase-count > label .purchase-info:focus-visible::after,
.purchase-count > label .purchase-info:focus::after {
    opacity: 1;
    transform: translateY(0);
}

/* Segments built from links rather than radios, styled to match. */

/* ── Pack cards ───────────────────────────────────────────────────────────── */

/* One says what it does, the other says where you are. Colour alone would ask
   somebody to infer the difference. */

/* ── Trial terms ──────────────────────────────────────────────────────────── */

/* Summary blocks carried over from the retired stylesheet's naming. */
.purchase-summary__save {
    margin-top: var(--hb-s4);
    padding: 10px 12px;
    border-radius: var(--hb-r-sm);
    background: rgba(111, 224, 168, .12);
    border: 1px solid rgba(111, 224, 168, .28);
    font-size: 11px;
    line-height: 1.5;
    color: #9df0c4;
}
.purchase-summary__actions {
    display: grid;
    gap: var(--hb-s3);
    margin-top: var(--hb-s4);
    padding-top: var(--hb-s4);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.purchase-summary__actions .hb-btn { width: 100%; }
.purchase-summary__actions .purchase-account-choice__divider {
    color: rgba(255, 255, 255, .48);
}
.purchase-summary__actions .purchase-account-choice__divider::before,
.purchase-summary__actions .purchase-account-choice__divider::after {
    background: rgba(255, 255, 255, .16);
}
.purchase-summary__trust {
    font-size: 10.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .55);
}

.purchase-summary__link {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 560;
    color: #a8cdf5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.purchase-summary__link:hover { color: #fff; }

/* One state shows at a time, and the selected one says the word. */

/* ── The one sentence that matters before paying ──────────────────────────── */

/* ── Company details grid ─────────────────────────────────────────────────────
   Two even columns. `auto-fit` gave three uneven ones at this width and left
   the phone field sitting lower than the two beside it.
   -------------------------------------------------------------------------- */

/* The chip sits on a full width row, so it has no reason to wrap. */

/* --hb-faint measures 3.21:1 on paper, under AA. Both of these carry real
   information, so they take the muted tone. */

/* The trade cards share the plan-card shape from purchase.php. */

/* Add-ons are independent selections, not alternative base packs. */

/* The summary is shorter than the column beside it, which is what gives the
   pinning something to travel over. */

/* One card in an auto-fit track list still gets a quarter of the row. The base
   pack owns its container, so the container is one column. */

/* Shorter than the column beside it, so there is something for the pinned
   panel to travel over. */