/* ============================================================================
 * /business - team licensing and volume pricing.
 *
 * Rebuilt in plan 036 onto the shared --tp-* tokens in b2b-tokens.css, so this
 * page, /team-trial and /why-us share one type scale, one palette and one page
 * rhythm. Both files arrive as <link>s from templates/policies/business.pt, the
 * tokens first. Nothing here may be @import'ed: /static/ is served with a
 * 369-day max-age and build_cache_id() cannot stamp a URL inside a stylesheet.
 *
 * The page opts into the light landing THEME by putting .landing-cms on the
 * content div, which is what gives it the white background, the footer
 * positioning and the inverted navbar that /team-trial gets for free. The cost
 * is that the theme's CMS prose defaults apply here too, so this file opens with
 * the same undo block team-trial.css carries. Several theme rules are !important
 * (tables in particular), so those beats are on specificity, and the comments say
 * which rule each one is fighting.
 *
 * ORDER IS LOAD-BEARING, NOT ONLY SPECIFICITY
 * Most of the undo block does not out-specify the theme, it TIES it: `.bz p` and
 * `.landing-cms p` are both (0,1,1), and `.bz strong:not(a):not(a *)` and the
 * theme's `.landing-cms strong:not(a):not(a *)` are both (0,1,3), because :not()
 * takes the specificity of its argument and `a` is an element. Those rules win
 * only because business.pt emits this file after the theme's. If that order is
 * ever changed, the page does not break loudly: prose picks the theme's 900px
 * measure back up and drifts inside the grid cells. Keep the <link> order in
 * templates/policies/business.pt as theme, then tokens, then this.
 *
 * Everything is scoped to .bz, which sits on each top-level <section>. This file
 * is only ever loaded on /business, but the scope keeps the intent readable and
 * stops a copy-paste into another template from leaking.
 *
 * WHAT THIS REPLACED, AND WHY
 * The old file opened with `body { font-weight: 600 !important }`, which reached
 * the navbar and the footer, made <strong> meaningless, and could not be undone
 * from anywhere. Nine sections then used a `width: 100vw; margin-left: calc(-50vw
 * + 50%)` full-bleed hack that overflows by the scrollbar width. Neither is
 * needed once the page container itself is the white surface.
 * ========================================================================= */

/* --------------------------------------- UNDO INHERITED CMS/BULMA DEFAULTS */

/* landing-cms-page-base-bulma.css caps every p/h/ul at 900px and auto-centres
   it, which silently misaligns anything built as a grid inside .landing-cms. */
.bz h1,
.bz h2,
.bz h3,
.bz p,
.bz ul,
.bz ol,
.bz dl {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.bz {
    color: var(--tp-ink);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body);
    line-height: var(--tp-lh-body);
}

.bz p {
    font-size: var(--tp-fs-body);
    line-height: var(--tp-lh-body);
    margin: 0 0 1rem;
}

/* Beats .landing-cms ul { padding-left: 2em } and .landing-cms li { margin-bottom
   .5em } - every list on this page is a laid-out block, not prose bullets. */
.bz ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bz li {
    margin: 0;
}

.bz h1,
.bz h2,
.bz h3 {
    font-family: var(--tp-font-serif);
    font-weight: 700;
    color: var(--tp-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* Defensive. site-bulma.css:397 sizes and side-margins Font Awesome icons, but it
   selects `.fa, .fab, .fa-solid, .fa-duotone` and this page uses fa-regular, so it
   does not match today. It would the moment an icon here is written any other way,
   and the failure is a check list whose rows no longer line up. */
.bz i[class*='fa-'] {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

/* Ties .landing-cms strong:not(a):not(a *) { color: black } at (0,1,3) and wins on
   load order, per the header note. Pure black on white is heavier than the ink
   used around it, so <strong> would jump off the line rather than emphasise
   within it. */
.bz strong:not(a):not(a *) {
    color: var(--tp-ink);
    font-weight: 600;
}

.bz a strong {
    color: inherit;
    font-weight: 600;
}

/* The theme paints code #f5f5f5 on #333 with !important, which is the only warm
   grey on an otherwise cool page, and its 0.4em side padding opens a visible gap
   before the full stop after the UEI. Matched at (0,2,0) vs the theme's (0,1,1),
   and this file loads later besides. */
.bz code {
    background: var(--tp-surface-2) !important;
    color: var(--tp-ink) !important;
    border: 0;
    padding: 0.1em 0.25em;
    font-size: 0.9em;
}

/* Prose links carry an underline, not just colour: #337ab7 against --tp-ink-2
   body copy is 1.78:1 and WCAG G183 wants 3:1 where colour is the only cue.
   Scoped to prose, so the buttons below keep their own treatment. */
.bz p a:not(.bz-btn),
.bz dd a,
.bz .bz-checks a,
.bz caption a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: hsl(207, 56%, 72%);
}

.bz p a:not(.bz-btn):hover,
.bz dd a:hover,
.bz .bz-checks a:hover,
.bz caption a:hover {
    text-decoration-color: currentColor;
}

/* #337ab7 is 4.56:1 on white, which passes AA with no headroom at all, and 4.36:1
   on --tp-surface, which fails. Every link that sits on a tinted surface gets the
   darker blue (6.34:1 there). At (0,4,1) this beats the theme's link rule without
   depending on load order. */
.landing-cms .bz.bz-section--tint a:not(.bz-btn),
.landing-cms .bz.bz-final a:not(.bz-btn),
.landing-cms .bz .bz-price-table a {
    color: var(--tp-blue-dark);
}

/* Only .bz-btn had a focus style, so every prose link on the page fell through to
   the browser default. /why-us defines this deliberately; so does this. */
.bz a:focus-visible {
    outline: var(--tp-focus-ring);
    outline-offset: var(--tp-focus-offset);
    border-radius: var(--tp-r-sm);
}

.bz .bz-nowrap {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ LAYOUT */

.bz.bz-section {
    padding: var(--tp-section-y) 0;
}

.bz.bz-section--tint {
    background: var(--tp-surface);
}

/* The closing block, on the page's other tint. A conversion moment that ends on
   plain white and butts into the black footer terminates weaker than the hero,
   which is backwards. /team-trial ends on a band too. */
.bz.bz-final {
    background: var(--tp-surface-2);
}

.bz .bz-wrap {
    max-width: var(--tp-wrap);
    margin: 0 auto;
    padding: 0 var(--tp-gutter);
}

.bz .bz-wrap--narrow {
    max-width: var(--tp-wrap-narrow);
}

.bz .bz-head {
    max-width: 640px;
    margin: 0 0 var(--tp-head-gap);
}

.bz .bz-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.bz .bz-h2 {
    font-size: var(--tp-fs-h2);
    line-height: var(--tp-lh-tight);
    margin: 0 0 0.75rem;
}

/* One oversized heading per page, on the section the reader actually came for. */
.bz .bz-h2--lead {
    font-size: var(--tp-fs-h2-lead);
}

/* A second-level heading inside a section that already has one, used for the
   procurement list. Sans, so it reads as a label for the block below rather than
   as a rival to the section head above it. */
.bz .bz-h3-band {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body-lg);
    font-weight: 600;
    letter-spacing: 0;
    margin: 3rem 0 1.25rem;
}

.bz .bz-lede {
    font-size: var(--tp-fs-body-lg);
    line-height: 1.6;
    color: var(--tp-ink-2);
    max-width: var(--tp-measure);
    margin: 0;
}

.bz .bz-head--center .bz-lede {
    margin-left: auto;
    margin-right: auto;
}

/* An id-only target for #pilot, which was a section heading on the old page and
   may still sit in quotes and email threads. */
.bz-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 5rem;
}

/* -------------------------------------------------------------------- HERO */
/* No photograph and no scrim. The old hero set 64px white type with a 15px-blur
   shadow over a stock photo, which means its contrast ratio could not be
   computed, let alone met, and it changed with the crop at every width. */

.bz.bz-hero {
    padding: 3rem 0 4rem;
    text-align: center;
}

/* 860, not /team-trial's 780: this hero carries a price range in the fact row
   rather than a single digit, and the row has to stay on one line. */
.bz .bz-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--tp-gutter);
}

.bz .bz-eyebrow {
    display: inline-block;
    background: var(--tp-yellow);
    color: #000;
    font-size: var(--tp-fs-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--tp-r-sm);
    margin-bottom: 1.25rem;
}

.bz.bz-hero h1 {
    font-size: var(--tp-fs-h1);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-align: center;
}

.bz .bz-hero-sub {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--tp-ink-2);
    max-width: var(--tp-measure);
    margin: 0 auto 2rem;
}

/* Fact row, matching /team-trial's. Equal-weight items in a row have no grouping
   cue other than a rule, which is the one place a border is the right tool. */
.bz .bz-facts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 2.5rem;
}

/* 1.25rem, not /team-trial's 1.75rem: at 1.75 the four items wrapped 3+1, which
   strands the last one under a dangling divider. */
.bz .bz-fact {
    padding: 0 1.25rem;
    text-align: center;
}

.bz .bz-fact + .bz-fact {
    border-left: 1px solid var(--tp-line);
}

.bz .bz-fact-n {
    display: block;
    font-family: var(--tp-font-serif);
    font-size: var(--tp-fs-h2);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tp-ink);
    white-space: nowrap;
}

.bz .bz-fact-l {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--tp-fs-micro);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tp-ink-3);
}

.bz .bz-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Bound tightly to the buttons, because it is a footnote ON them. text-align is
   set here rather than inherited: the hero centres its whole column, but the
   closing block centres only its .bz-head, so this would sit left there. */
.bz .bz-cta-note {
    margin: 0.75rem auto 0;
    max-width: var(--tp-measure);
    font-size: var(--tp-fs-fine);
    line-height: 1.5;
    text-align: center;
    color: var(--tp-ink-3);
}

/* A different reader from .bz-cta-note and a different destination, so
   deliberately not rendered the same: one step larger, one step darker, and
   further away, so it groups as its own row rather than as line three of the fine
   print. team-trial.css makes the same distinction and calls it .tt-hero-alt;
   this page needs it twice, in the hero and in the closing block, so it is not
   named for the hero. */
.bz .bz-alt {
    margin: 2.25rem auto 0;
    max-width: var(--tp-measure);
    font-size: var(--tp-fs-small);
    line-height: 1.55;
    text-align: center;
    color: var(--tp-ink-2);
}

.bz .bz-alt a {
    font-weight: 600;
}

/* ----------------------------------------------------------------- BUTTONS */
/* Deliberately not Bulma's .button, which drags in site-bulma's dark colours,
   its own height, and `.button i { margin-left: .5em !important }`. */

.bz .bz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-family: inherit;
    text-decoration: none;
    border-radius: var(--tp-r);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--tp-transition),
        border-color var(--tp-transition),
        box-shadow var(--tp-transition),
        transform var(--tp-transition),
        color var(--tp-transition);
}

.bz .bz-btn:focus-visible {
    outline: var(--tp-focus-ring);
    outline-offset: var(--tp-focus-offset);
}

.bz a.bz-btn-primary {
    background: var(--tp-blue-dark);
    /* !important beats .landing-cms a:not(.button):not(.btn) { color: #337ab7 }
       at (0,3,1) in the light theme. */
    color: #fff !important;
    border: 2px solid var(--tp-blue-dark);
    font-size: 19px;
    font-weight: 700;
    padding: 0 2rem;
    min-height: 60px;
    box-shadow: var(--tp-sh-cta);
}

.bz a.bz-btn-primary:hover {
    background: var(--tp-blue-darker);
    border-color: var(--tp-blue-darker);
    transform: translateY(-1px);
    box-shadow: var(--tp-sh-cta-h);
}

.bz a.bz-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--tp-sh-sm);
}

/* Text contrast stays at full strength on purpose: lightening a label is exactly
   how disabled controls are drawn. It loses on fill and elevation instead. */
.bz a.bz-btn-secondary {
    background: #fff;
    color: var(--tp-ink) !important; /* same override target as above */
    border: 2px solid var(--tp-border-ui);
    font-size: var(--tp-fs-body);
    font-weight: 600;
    padding: 0 1.5rem;
    min-height: 56px;
    box-shadow: none;
}

.bz a.bz-btn-secondary:hover {
    background: var(--tp-blue-tint);
    border-color: var(--tp-blue);
    color: var(--tp-blue-darker) !important;
}

/* ------------------------------------------------------- PRICING AND TIERS */

.bz .bz-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 3rem;
    align-items: start;
}

.bz .bz-price-copy p {
    max-width: var(--tp-measure);
    color: var(--tp-ink-2);
}

/* The one sentence a buyer re-reads before forwarding the page, so it is lifted
   out of the column rather than italicised inside it. Not a .pop: the old page
   used italic plus centred plus larger for one job, three times over, and twice
   on text that was not a quotation at all.

   --tp-blue-fill, not --tp-blue-tint: the tokens file says in as many words that
   tint (1.09:1) is for a 44px badge or a button hover and never for a large area,
   and this is a full-measure panel. */
.bz .bz-price-copy p.bz-example {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    max-width: none;
    background: var(--tp-blue-fill);
    border-left: 4px solid var(--tp-blue);
    border-radius: 0 var(--tp-r-sm) var(--tp-r-sm) 0;
    color: var(--tp-ink);
}

.bz .bz-example strong {
    font-weight: 700;
}

/* The tier table is what the reader came for, and in the first draft it was the
   quietest thing in its own section. A tinted panel rather than a card, so it
   stays distinct from the .bz-way cards further down. */
.bz .bz-price-table {
    background: var(--tp-surface);
    border-radius: var(--tp-r);
    padding: 1.5rem 1.5rem 1.25rem;
}

/* The light theme sets width: 65%, auto margins and border-collapse on every
   table with !important at (0,1,1), so these have to be !important too, at a
   higher specificity. Same trap /why-us hit. */
.bz .bz-tiers {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: transparent !important;
    font-size: var(--tp-fs-body);
    line-height: 1.4;
}

/* The theme stripes even rows and tints on hover at (0,2,3). Beaten on
   specificity rather than !important so individual cells can still paint. */
.landing-cms .bz .bz-tiers tr th,
.landing-cms .bz .bz-tiers tr td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tp-line);
    padding: 0.7rem 0.4rem;
    color: var(--tp-ink);
}

/* 2px, matching the head rule on /why-us's comparison table so the two B2B
   tables read as one component. */
.landing-cms .bz .bz-tiers thead th {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tp-ink-3);
    border-bottom: 2px solid var(--tp-line-strong);
    padding-bottom: 0.5rem;
    vertical-align: bottom;
}

.landing-cms .bz .bz-tiers tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.landing-cms .bz .bz-tiers td,
.landing-cms .bz .bz-tiers thead th:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Percent-of-list is the figure the checkout uses; what the reader wants is the
   discount, so that column carries the weight and this one recedes. */
.landing-cms .bz .bz-tiers tbody td {
    color: var(--tp-ink-2);
}

.landing-cms .bz .bz-tiers .bz-save {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tp-ink);
}

/* "None" is not a saving, and at 20px semibold it reads like one. */
.landing-cms .bz .bz-tiers .bz-save--zero {
    font-size: var(--tp-fs-body);
    font-weight: 400;
    color: var(--tp-ink-3);
}

.landing-cms .bz .bz-tiers tbody tr:last-child th,
.landing-cms .bz .bz-tiers tbody tr:last-child td {
    border-bottom: 0;
}

.bz .bz-tiers caption {
    caption-side: bottom;
    margin-top: 0.875rem;
    font-size: var(--tp-fs-fine);
    line-height: 1.5;
    color: var(--tp-ink-3);
    text-align: left;
}

/* ------------------------------------------------------------ WAYS TO BUY */

.bz .bz-ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Cards, unlike the rest of the page, because these are three parallel choices
   and the reader picks exactly one. A white fill and one shadow, no border: the
   first draft had all three, and --tp-line on --tp-surface measures 1.09:1, so
   the border was invisible while still counting as chrome. */
.bz .bz-way {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--tp-surface-0);
    border: 0;
    border-radius: var(--tp-r);
    box-shadow: var(--tp-sh-sm);
}

/* --tp-fs-body-lg, not --tp-fs-h3: nothing on /team-trial or /why-us uses an h3
   larger than this, and at 1.25rem "Government and public sector" wrapped while
   its two neighbours did not, so the three cards' body copy started at three
   different heights. Shortening the heading and dropping a size fixed that at
   the source; reserving a second line with min-height also fixed it, but left
   1.3em of dead space under every heading to do so. The card actions align
   regardless, via margin-top:auto on .bz-way-link. */
.bz .bz-way h3 {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0 0 0.625rem;
}

.bz .bz-way p {
    font-size: 16px;
    color: var(--tp-ink-2);
    margin: 0 0 1rem;
}

.bz .bz-way code {
    white-space: nowrap;
}

/* Pinned to the bottom so three cards of unequal prose still line their actions
   up. margin-top:auto is what the old page used six <br> tags for. The extra
   .bz-way selector takes this to (0,3,1) so it beats .bz .bz-way p without
   !important. The padding is hit area: this is the card's action, not a link in
   a sentence, so WCAG 2.5.8's inline exemption does not really apply. */
.bz .bz-way p.bz-way-link {
    margin: auto 0 0;
    padding-top: 0.5rem;
    font-weight: 600;
}

.bz .bz-way-link a {
    display: inline-block;
    padding: 0.375rem 0;
}

/* --------------------------------------------------------- PROCUREMENT DL */

.bz .bz-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 1.5rem;
    margin: 0;
}

.bz .bz-fact-row dt {
    font-size: var(--tp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-ink-3);
    margin-bottom: 0.25rem;
}

.bz .bz-fact-row dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tp-ink-2);
    max-width: var(--tp-measure);
}

/* ------------------------------------------------------------ CHECK LISTS */

.bz .bz-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 1rem;
}

.bz .bz-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: var(--tp-fs-body);
    line-height: 1.55;
    color: var(--tp-ink-2);
}

.bz .bz-checks li i {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    color: var(--tp-blue);
    font-size: var(--tp-fs-body);
    margin-top: 3px;
}

/* -------------------------------------------------------------- SCREENSHOT */
/* The page's one image, and the same treatment /team-trial gives it, so it reads
   as the same device rather than a third look. It is evidence, not decoration:
   the dashboard is the only artifact that shows the product exists. */

.bz .bz-figure {
    margin: 3rem 0 0;
}

.bz .bz-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--tp-r);
    border: 1px solid var(--tp-line-strong);
    box-shadow: var(--tp-sh-lg);
    background: var(--tp-surface-2);
}

.bz .bz-shot-cap {
    margin: 0.875rem 0 0;
    font-size: var(--tp-fs-fine);
    line-height: 1.5;
    color: var(--tp-ink-3);
}

/* ------------------------------------------------------------------ QUOTE */

.bz .bz-quote-figure {
    margin: 0;
}

/* Matched to /why-us's blockquote rather than invented: same size, leading and
   ink, so a reader moving between the two pages sees one treatment. */
.bz .bz-quote {
    margin: 0;
    padding: 0 0 0 1.25rem;
    border-left: 3px solid var(--tp-line-strong);
    background: transparent;
    font-family: var(--tp-font-serif);
    font-size: var(--tp-fs-body-lg);
    line-height: var(--tp-lh-relaxed);
    color: var(--tp-ink-2);
}

.bz .bz-quote p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

/* Sentence case, not uppercase with tracking: that is how a field label is drawn,
   and this is a person. */
.bz .bz-quote-figure figcaption {
    margin: 0.75rem 0 0 1.25rem;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-fine);
    font-weight: 500;
    color: var(--tp-ink-3);
}

/* ============================================================================
 * BREAKPOINTS
 * ========================================================================= */

@media screen and (max-width: 900px) {
    /* The tier table stops being a sidebar and becomes a block under the copy,
       which is also where it wants to be when read top to bottom. */
    .bz .bz-price {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .bz .bz-price-table {
        max-width: 460px;
    }

    .bz .bz-ways {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Stacked, so there is no row of actions left to align. */
    .bz .bz-way h3 {
        min-height: 0;
    }

    .bz .bz-way p.bz-way-link {
        margin-top: 0;
    }
}

@media screen and (max-width: 720px) {
    /* Section padding and gutters step down with the tokens themselves, so there
       is deliberately nothing about them here. */
    .bz.bz-hero {
        padding: 1.5rem 0 3rem;
    }

    .bz .bz-h2 {
        font-size: 1.5rem;
    }

    .bz .bz-h2--lead {
        font-size: 1.75rem;
    }

    .bz .bz-lede {
        font-size: 1.0625rem;
    }

    .bz .bz-checks,
    .bz .bz-facts-grid {
        grid-template-columns: 1fr;
    }

    /* Full-bleed on a phone: the screenshot is the point, and 20px of gutter each
       side is 10% of the width it has to work with. The negative margin is on the
       image alone, so the caption keeps its gutter. */
    .bz .bz-shot {
        margin-left: calc(-1 * var(--tp-gutter));
        width: calc(100% + 2 * var(--tp-gutter));
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media screen and (max-width: 560px) {
    .bz.bz-hero h1 {
        font-size: 2.125rem;
        line-height: 1.12;
    }

    .bz .bz-hero-sub {
        font-size: 1.0625rem;
        margin-bottom: 1.75rem;
    }

    .bz .bz-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 0;
        margin-bottom: 2rem;
    }

    .bz .bz-fact {
        padding: 0 0.5rem;
    }

    .bz .bz-fact + .bz-fact {
        border-left: none;
    }

    .bz .bz-fact:nth-child(even) {
        border-left: 1px solid var(--tp-line);
    }

    .bz .bz-fact-n {
        font-size: 1.5rem;
    }

    /* Stacked and full width, but the size delta survives the stack. */
    .bz .bz-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .bz .bz-btn {
        width: 100%;
    }

    .bz a.bz-btn-primary {
        min-height: 58px;
        font-size: 18px;
        padding: 0 1rem;
        white-space: normal;
    }

    .bz a.bz-btn-secondary {
        min-height: 50px;
        padding: 0 1rem;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz *,
    .bz *::before,
    .bz *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .bz .bz-btn:hover {
        transform: none;
    }
}