/*--------------------------------------------------------------
# Block contents
--------------------------------------------------------------*/
.lp-callout {
    display: flex;
    color: var(--text-secondary);
    padding-block: var(--margin-vertical-normal);
    padding-inline: 4vw;
    overflow: hidden;
}

.lp-callout .block-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--content-width-narrow);
    margin-inline: auto;
}

/* Copy, actions and stats
--------------------------------------------- */
.lp-callout__copy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.lp-callout__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.lp-callout__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.lp-callout__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
}

.lp-callout__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lp-callout__stat-value {
    font-family: var(--font-family-heading, inherit);
    font-size: var(--font-size-h3, clamp(25px, 3.17vw, 38px));
    font-weight: 700;
    line-height: 1;
    color: var(--text-accent, #615ff8);
}

.lp-callout__stat-label {
    font-size: var(--font-size-small, 16px);
    color: var(--text-secondary, #6b717e);
}

/* Split: text left, buttons and stats right, one band. */
.lp-callout--split .block-contents {
    max-width: var(--content-max-width, 1200px);
    display: grid;
    grid-template-columns: 1.2fr auto;
    align-items: center;
    gap: 2rem 3rem;
}

.lp-callout--split .lp-callout__copy {
    text-align: left;
}

.lp-callout--split .lp-callout__eyebrow,
.lp-callout--split .lp-callout__header,
.lp-callout--split .lp-callout__sub-header,
.lp-callout--split .lp-callout__content {
    text-align: left;
}

.lp-callout--split .lp-callout__aside {
    margin-top: 0;
    align-items: flex-end;
}

.lp-callout--split .lp-callout__actions,
.lp-callout--split .lp-callout__stats {
    justify-content: flex-end;
}

@media screen and (max-width: 765px) {
    .lp-callout--split .block-contents {
        grid-template-columns: 1fr;
    }

    .lp-callout--split .lp-callout__aside {
        align-items: flex-start;
    }

    .lp-callout--split .lp-callout__actions,
    .lp-callout--split .lp-callout__stats {
        justify-content: flex-start;
    }
}

/*--------------------------------------------------------------
# Banner (2026-10-20, Isaac, from the Wheel Equipment run)
--------------------------------------------------------------*/
/* The split arrangement as a box of its own colour (Banner color), the
header set as a bold lead, the band around it matching the section above
so the two read as one (option 1's "Not sure what part you need?"). The
box is .block-contents, with .is-dark or .is-light for its words. */
.lp-callout--banner .block-contents {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 2.5rem;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
    border-radius: var(--card-radius, 12px);
    background: var(--lp-banner-fill, var(--primary-300));
    color: var(--lp-banner-ink, var(--text-secondary));
}

.lp-callout__banner--brand { --lp-banner-fill: var(--primary-300); }
.lp-callout__banner--dark { --lp-banner-fill: var(--neutral-400); }
.lp-callout__banner--secondary { --lp-banner-fill: var(--secondary-300); }
.lp-callout__banner--accent {
    --lp-banner-fill: var(--lp-accent-fill, var(--accent-300));
    --lp-banner-ink: var(--lp-accent-ink, #fff);
}

.lp-callout--banner .lp-callout__copy {
    gap: 0.5rem;
}

.lp-callout.lp-callout--banner .lp-callout__header {
    font-size: var(--font-size-h5, clamp(20px, 2.17vw, 26px));
    line-height: 1.25;
}

.lp-callout--banner .lp-callout__content > :last-child {
    margin-bottom: 0;
}

/* Accent: every word in the accent's ink, the buttons inverted, as the accent band. */
.lp-callout__banner--accent :is(h2, h3, p, li, .lp-eyebrow, .lp-callout__content) {
    color: inherit;
}

.lp-callout__banner--accent a.btn-primary {
    background-color: var(--lp-accent-ink);
    color: var(--lp-accent-fill);
}

.lp-callout__banner--accent a.btn-secondary {
    color: inherit;
    border-color: currentColor;
    background-color: transparent;
}

/* The band around: after a section on the same band, no second band's
gap; the banner sits close under that section's content. Front end only,
as the stacking rule above it (the editor wraps each block). */
.lp-block--surface-default + .lp-callout--banner.lp-block--surface-default,
.lp-block--surface-subtle + .lp-callout--banner.lp-block--surface-subtle {
    padding-block-start: 0;
}

.lp-block.lp-block--surface-default:has(+ .lp-callout--banner.lp-block--surface-default),
.lp-block.lp-block--surface-subtle:has(+ .lp-callout--banner.lp-block--surface-subtle) {
    padding-block-end: clamp(24px, 3vw, 40px);
}

@media screen and (max-width: 765px) {
    .lp-callout--banner .block-contents {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*--------------------------------------------------------------
# Background image
--------------------------------------------------------------*/
.lp-callout.anchor {
    position: relative;
}

.lp-callout__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* This ensures that the cover image is not set to height: auto
which happens by default in the block editor. */
.editor-styles-wrapper .lp-callout__cover {
    height: 100%;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* Default Font Colors
--------------------------------------------- */

.lp-callout__eyebrow {
    text-align: center;
}

.lp-callout__header {
	font-size: var(--font-size-section-header, var(--font-size-h1, clamp(36px, 5vw, 60px)));
	font-weight: var(--font-weight-section-header, 700);
    color: var(--text-primary);
    text-align: center;
}

.lp-callout__sub-header {
	font-size: var(--font-size-section-sub-header, var(--font-size-h2, clamp(30px, 4vw, 48px)));
	font-weight: 400;
    color: var(--text-primary);
    text-align: center;
}

.lp-callout__content {
    color: var(--text-secondary);
    text-align: center;
}


/*--------------------------------------------------------------
# Card (2026-10-09, from ~/Desktop/Callout card review/)
--------------------------------------------------------------*/
/* Card beside: the copy and the buttons left, the card right; on a phone
   the copy, the card, then the buttons. Card below: the copy, the card
   under it, the buttons under the card. Built on the theme's tokens only,
   as the price card is, so the palette, fonts and card preset carry. */
.lp-callout--has-card.lp-callout--split .block-contents {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
    grid-template-areas: "copy card" "aside card";
    align-items: center;
    column-gap: clamp(32px, 6vw, 96px);
    row-gap: 28px;
}

.lp-callout--has-card.lp-callout--split .lp-callout__copy {
    grid-area: copy;
    align-self: end;
    max-width: 34em;
}

.lp-callout--has-card.lp-callout--split .lp-callout__card {
    grid-area: card;
}

.lp-callout--has-card.lp-callout--split .lp-callout__aside {
    grid-area: aside;
    align-self: start;
    align-items: flex-start;
}

.lp-callout--has-card.lp-callout--split .lp-callout__actions {
    justify-content: flex-start;
}

@media screen and (max-width: 765px) {
    .lp-callout--has-card.lp-callout--split .block-contents {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "copy" "card" "aside";
    }
}

.lp-callout--has-card.lp-callout--centered .lp-callout__card {
    width: 100%;
    max-width: 520px;
    margin: 2rem auto 0;
}

.lp-callout--has-card.lp-callout--centered .lp-callout__aside {
    margin-top: 1.75rem;
}

.lp-callout__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: clamp(24px, 2.6vw, 36px);
    background-color: var(--surface-card, #fff);
    border: var(--card-border, 1px solid var(--border-default));
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
    color: var(--text-primary);
    text-align: left;
}

.lp-callout__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.lp-callout__card-name {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-family-button);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.lp-callout__card-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cta-default);
    color: var(--cta-text, #fff);
    font-family: var(--font-family-button);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
}

.lp-callout__card > .lp-callout__card-badge {
    align-self: flex-start;
}

.lp-callout__card-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
}

.lp-callout__card-amount {
    color: var(--text-primary);
    font-family: var(--font-family-heading);
    font-size: clamp(44px, 4.8vw, 64px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.lp-callout__card-words {
    color: var(--text-secondary);
    font-size: 17px;
    font-weight: 600;
}

/* No figure: the label is the card's title. */
.lp-callout__card-title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--lp-card-title-size, 24px);
    font-weight: var(--lp-card-title-weight, 600);
    line-height: 1.25;
}

.lp-callout__card-body {
    display: grid;
    gap: 14px;
}

.lp-callout__card-body > * {
    margin: 0;
}

.lp-callout .lp-callout__card-body p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

/* Above the theme's list rule (.lp-block :is(ul, ol):not([class])). */
.lp-callout .lp-callout__card-body ul:not([class]) {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    list-style: none;
}

.lp-callout .lp-callout__card-body li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
}

.lp-callout__card-body li::before {
    content: "";
    position: absolute;
    top: 0.12em;
    left: 0;
    width: 18px;
    height: 18px;
    background-color: var(--cta-default);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* The lender's line; empty, the editor shows a reminder. */
.lp-callout .lp-callout__card-small {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.lp-callout .lp-callout__card-small--empty {
    padding: 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--text-primary) 28%, transparent);
    border-radius: 6px;
    font-style: italic;
}


/*--------------------------------------------------------------
# Coupon (2026-10-20, the layout variants review)
--------------------------------------------------------------*/
/* The copy left as Card beside has it, the card right as a coupon: a
   dashed line around it in the band's own ink, the label, the amount
   large in the accent with its unit under it, a dashed rule, the offer,
   the code in a box of its own and the end date, then the buttons inside
   the card. The template starts it on the brand band; on a dark or brand
   band the card stays light (is-light). Mobile first: the card under the
   copy, beside it from 766px as Card beside. The dash colour is resolved
   on the section, so it follows the band, not the light card. */
.lp-callout--coupon {
    --lp-coupon-dash: color-mix(in srgb, var(--text-primary) 55%, transparent);
}

.lp-callout--has-card.lp-callout--coupon .block-contents {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "card";
    row-gap: 36px;
}

.lp-callout--has-card.lp-callout--coupon .lp-callout__copy {
    align-self: center;
}

@media screen and (min-width: 766px) {
    .lp-callout--has-card.lp-callout--coupon .block-contents {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
        grid-template-areas: "copy card";
    }
}

/* The dashed line sits 9px outside the card; the margin keeps it inside
   the grid's cell, clear of the band's edge on a phone. */
.lp-callout .lp-callout__coupon {
    gap: 16px;
    margin: 11px;
    outline: 2px dashed var(--lp-coupon-dash);
    outline-offset: 9px;
}

.lp-callout__coupon-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px dashed color-mix(in srgb, var(--text-primary) 16%, transparent);
    text-align: center;
}

.lp-callout .lp-callout__coupon-label {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-family-button);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.lp-callout .lp-callout__coupon-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px 0 0;
    text-align: center;
}

.lp-callout__coupon-amount {
    color: var(--text-accent);
    font-family: var(--font-family-heading);
    font-size: clamp(60px, 6.4vw, 84px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-callout__coupon-words,
.lp-callout__coupon-unit {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.lp-callout__coupon-unit {
    margin-top: 6px;
}

.lp-callout .lp-callout__coupon-title {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--lp-card-title-size, 24px);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}

/* The code and the end date, each after a small mark in the accent; a
   long line wraps under its own words, not under the mark. */
.lp-callout .lp-callout__coupon-code,
.lp-callout .lp-callout__coupon-ends {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
}

.lp-callout .lp-callout__coupon-ends {
    font-size: 14px;
    font-weight: 700;
}

.lp-callout__coupon-code::before,
.lp-callout__coupon-ends::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 18px;
    height: 18px;
    background-color: var(--text-accent);
}

.lp-callout__coupon-code::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-callout__coupon-ends::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-callout__coupon-code-value {
    display: inline-block;
    margin-inline: 2px;
    padding: 0 9px;
    line-height: 1.6;
    border: 1.5px dashed color-mix(in srgb, var(--text-accent) 70%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-accent) 8%, transparent);
    color: var(--text-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* The buttons inside the card, side by side and as wide as it allows. */
.lp-callout .lp-callout__coupon-actions {
    justify-content: flex-start;
    margin-top: 6px;
}

.lp-callout__coupon-actions .btn {
    flex: 1 1 auto;
    text-align: center;
}


/*--------------------------------------------------------------
# Statement (2026-10-20, Isaac: the story layout)
--------------------------------------------------------------*/
/* A short manifesto, centered: the eyebrow as a small label, the header
   as the statement in large type at a reading weight, the content as the
   one line name under it, small, after a short rule in the accent. The
   template prints no sub header, buttons, card or stats here. Mobile
   first: 26px on a phone, rising to 40px at 1440 and up. */
.lp-callout--statement {
    padding-block: var(--margin-vertical-wide, 70px);
}

.lp-callout--statement .block-contents {
    max-width: 1040px;
}

.lp-callout--statement .lp-callout__copy {
    align-items: center;
}

.lp-callout.lp-callout--statement .lp-callout__header {
    margin: 0;
    font-size: clamp(26px, calc(1.34vw + 20.8px), 40px);
    font-weight: 500;
    letter-spacing: -0.016em;
    line-height: 1.3;
    text-wrap: pretty;
}

.lp-callout.lp-callout--statement .lp-callout__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 16px;
}

.lp-callout--statement .lp-callout__content::before {
    content: "";
    flex: none;
    width: 32px;
    height: 2px;
    background: var(--text-accent);
}

.lp-callout.lp-callout--statement .lp-callout__content > * {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.lp-callout--statement .lp-callout__content :is(strong, b) {
    color: var(--text-primary);
    font-weight: 700;
}

/*--------------------------------------------------------------
# Marquee (2026-10-21, Isaac)
--------------------------------------------------------------*/
/* The banner's box as a strip of short phrases scrolling sideways, a mark
between them; the whole strip is the Button's link. callout.js moves the
track at --lp-marquee-speed pixels per second on the front end; the editor
loops the duplicated set the template renders in preview with CSS. */
.lp-callout--marquee .block-contents {
    display: block;
    padding: 0;
    overflow: hidden;
}

.lp-callout__marquee {
    --lp-marquee-speed: 50;
    display: block;
    padding: clamp(14px, 1.8vw, 20px) 0;
    color: inherit;
    text-decoration: none;
}

a.lp-callout__marquee:hover {
    filter: brightness(1.08);
}

a.lp-callout__marquee:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -3px;
}

.lp-callout__marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}

.lp-callout__phrase {
    padding-inline: clamp(14px, 1.8vw, 26px);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h5, clamp(20px, 2.17vw, 26px));
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.lp-callout__mark {
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.55;
}

/* Editor preview: viewScript never runs in the canvas, so the strip loops
there over the duplicated set with CSS. Front end motion is callout.js. */
.editor-styles-wrapper .lp-callout__marquee-track {
    animation: lp-callout-marquee 40s linear infinite;
}

@keyframes lp-callout-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .editor-styles-wrapper .lp-callout__marquee-track {
        animation: none;
    }
}