.auth-form-width {
    width: 100%;
    max-width: 30rem;
}

.offcanvas-checkout.offcanvas-end {
    width: 100vw !important;
    max-width: 500px !important;
}

@media (min-width: 500px) {
    .offcanvas-checkout.offcanvas-end {
        width: 500px !important;
    }
}



.accordion-faq .accordion-button {
    background-color: var(--paper-deep);
    color: var(--ink);
}

    .accordion-faq .accordion-button:not(.collapsed) {
        background-color: var(--gray-darkest);
        color: var(--white);
    }

    /* Remove or Change Focus Glow */
    .accordion-faq .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem var(--primary-color);
    }

    /* Hover State for Better UX */
    .accordion-faq .accordion-button:hover {
        background-color: var(--gray-dark);
        color: #fff;
    }

.cookie-settings {
    color: var(--ink);
    padding: 0.25rem 0.5rem;
}

.consent-surface {
    position: fixed;
    z-index: 1090;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(85vh, 42rem);
    overflow-y: auto;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-light);
    background: var(--paper);
    box-shadow: 0 -0.125rem 0.75rem rgba(42, 39, 35, 0.1);
}

.consent-banner-actions,
.consent-preferences-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.consent-primary-choice {
    min-width: 8.25rem;
    flex: 0 0 auto;
}

.consent-manage-choice {
    flex: 0 0 auto;
}

.consent-preferences-actions {
    margin-top: 0.75rem;
}

.consent-preferences .container-md {
    max-width: 48rem;
}

.consent-category-row {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-light);
}

.consent-category-label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.consent-category-description {
    margin: 0;
    color: var(--gray-darkest);
}

.consent-category-row .form-check-input {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex-shrink: 0;
}

.consent-always-on {
    color: var(--gray-darkest);
    white-space: nowrap;
    font-size: var(--text-small);
}

.consent-error {
    margin: 0;
    color: #b02a37;
    font-weight: 600;
}

.consent-root :focus-visible,
.cookie-settings:focus-visible {
    outline: 0.2rem solid var(--primary-color);
    outline-offset: 0.2rem;
}

.consent-error:not(:empty) {
    margin-top: 0.75rem;
}


.jumbo-wrap {
    background-size: cover;
    background-color: var(--header-color);
    color: var(--secondary-color);
    width: 100%;
    display: flex; /* Flexbox for vertical alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

.jumbo-home {
    background-color: var(--header-color);
}


/* ==========================================================================
   Landing page — Refactor 02
   ========================================================================== */

/* Dot separators between every fact, so the convention never depends on the copy. */
.fact-list {
    gap: 0.5rem 0.4rem;
}

/* The dot trails its item rather than leading the next one, so a wrap never
   starts a line with an orphaned separator. */
.fact-list > li:not(:last-child)::after {
    content: "·";
    margin-left: 0.4rem;
    color: var(--gray-medium);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 0;
    vertical-align: -0.08em;
}

/* Wider container for card grids; prose keeps .reading-content */
.section-content {
    max-width: 68rem;
    margin-inline: auto;
}

.section-intro {
    max-width: 46ch;
    font-size: var(--text-reading);
    line-height: var(--line-height-reading);
}

/* --- Benefit cards --------------------------------------------------- */

.benefit-card {
    height: 100%;
    padding: var(--space-md);
    border: 1px solid var(--gray-light);
    border-radius: 0.75rem;
    background: var(--white);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-sm);
    border-radius: 0.625rem;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--primary-color);
    font-size: 1.375rem;
    line-height: 1;
}

.benefit-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.benefit-card p {
    margin-bottom: 0;
    color: var(--gray-darkest);
}

/* --- Lesson cards ---------------------------------------------------- */

.lesson-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--gray-light);
    border-radius: 0.75rem;
    background: var(--white);
    overflow: hidden;
}

.lesson-card-body {
    flex: 1 1 auto;
    padding: var(--space-md);
}

/* One micro-label treatment, used in the hero and on the lesson cards. */
.eyebrow {
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.lesson-card h3 {
    font-size: 1.5rem;
    margin: 0.25rem 0 0.5rem;
}

.lesson-card-promise {
    font-weight: 600;
    color: var(--secondary-color);
}

.lesson-points {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
}

.lesson-points > li {
    position: relative;
    padding-left: 1.875rem;
    margin-bottom: var(--space-sm);
}

.lesson-points > li:last-child {
    margin-bottom: 0;
}

.lesson-points > li > .bi {
    position: absolute;
    top: 0.15rem;
    left: 0;
    color: var(--primary-color);
    font-size: 1.125rem;
    line-height: 1;
}

.lesson-card-foot {
    padding: 0.75rem var(--space-md);
    border-top: 1px solid var(--gray-light);
    background: var(--gray-lightest);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--gray-darkest);
}

/* --- Inline proof quote ---------------------------------------------- */

.quote-inline {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-top: var(--space-md);
    padding-left: var(--space-sm);
    border-left: 3px solid var(--primary-color);
}

.quote-inline img {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.quote-inline blockquote {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.55;
}

.quote-inline p {
    margin-bottom: 0.35rem;
    font-style: italic;
}

.quote-inline cite {
    font-style: normal;
    font-weight: 600;
    color: var(--gray-darkest);
}

/* --- Guide (Scott's story) -------------------------------------------- */

.guide-block {
    max-width: 42rem;
    margin-inline: auto;
    padding-left: var(--space-md);
    border-left: 4px solid var(--primary-color);
    font-size: var(--text-reading);
    line-height: var(--line-height-reading);
}

.guide-attribution {
    font-weight: 600;
    color: var(--gray-darkest);
}

/* --- Numbered step row ------------------------------------------------ */

.step-row {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-sm);
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}

.step-row h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.step-row p {
    margin-bottom: 0;
    color: var(--gray-darkest);
}

/* --- Offer panel ------------------------------------------------------ */

/* Single-column content, so it takes the prose measure like the FAQ below it.
   At the grid measure the inclusions ran past 100 characters a line and the
   block read like a contract rather than a place where a purchase happens. */
.offer-panel {
    max-width: var(--width-prose);
    margin-inline: auto;
    padding: var(--space-lg);
    border: 1px solid var(--gray-light);
    border-top: 4px solid var(--primary-color);
    border-radius: 0.75rem;
    background: var(--gray-lightest);
}

.offer-heading {
    margin: 0;
    font-size: clamp(1.625rem, 4vw, 2rem);
    line-height: 1.15;
    text-wrap: balance;
}

.offer-intro {
    margin: 0.75rem 0 1.5rem;
}

.offer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.offer-list > li {
    position: relative;
    padding-left: 1.875rem;
    margin-bottom: 1rem;
}

.offer-list > li > .bi {
    position: absolute;
    top: 0.1rem;
    left: 0;
    color: var(--primary-color);
    font-size: 1.125rem;
    line-height: 1.4;
}

.offer-guarantee {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    background: var(--paper);
    color: var(--gray-darkest);
}

.offer-guarantee > .bi {
    color: var(--primary-color);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.offer-guarantee h4 {
    margin: 0 0 0.5rem;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
}

.offer-guarantee p { margin: 0; }

/* Same icon-and-text shape as the guarantee, but tinted and quiet so it reads
   as a side note to both offers rather than a third option or feature. */
.offer-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    max-width: var(--width-prose);
    margin-inline: auto;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--paper-deep);
    color: var(--gray-darkest);
}

.offer-note > .bi {
    color: var(--slate);
    font-size: 1.25rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.offer-note p { margin: 0; }

.offer-price {
    margin: 0 0 1.25rem;
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.offer-price > .offer-currency {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
}

.offer-price > .offer-terms {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--gray-darkest);
}

.coaching-price-context {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.offer-buy { width: 100%; }

/* --- Featured quote --------------------------------------------------- */

.quote-feature {
    padding: var(--space-md);
    border-radius: 0.75rem;
    background: var(--white);
    border: 1px solid var(--gray-light);
}

.quote-feature img {
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-sm);
    border-radius: 50%;
    object-fit: cover;
}

.quote-feature blockquote {
    margin: 0;
    font-size: var(--text-reading);
    line-height: var(--line-height-reading);
}

.quote-feature p {
    margin-bottom: 0.75rem;
    font-style: italic;
}

.quote-feature cite {
    font-style: normal;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--gray-darkest);
}

/* Columns rather than a grid so each card keeps its own height instead of
   stretching to match its row neighbor. The left rule echoes the inline
   lesson quotes and keeps these cards distinct from the offer panels. */
.quote-wall {
    column-gap: 1.5rem;
}

@media (min-width: 768px) {
    .quote-wall {
        column-count: 2;
    }
}

.quote-wall .quote-feature {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--primary-color);
    border-radius: 0;
}

.quote-wall blockquote {
    font-size: var(--text-body);
    line-height: var(--line-height-body);
}

.quote-wall .quote-feature:last-child {
    margin-bottom: 0;
}

/* --- FAQ -------------------------------------------------------------- */

.faq-block {
    max-width: 46rem;
    margin-inline: auto;
}

/* A section heading, so it outranks the offer card's label, but deliberately
   quieter than the page's other section headings. This is junk-drawer material
   sitting between the price and the close; it should not shout louder than
   either of them. */
.faq-heading {
    font-size: 1.75rem;
    line-height: 1.2;
}

/* --- Closing band ----------------------------------------------------- */

.closing-band {
    background: var(--secondary-color);
    color: var(--white);
}

/* Keep the shared editorial heading's existing pretty wrapping after promotion;
   the closing lead continues to balance independently. */
:where(.closing-band) .section-heading,
.closing-lead {
    text-wrap: balance;
}

.closing-lead {
    font-size: var(--text-lead);
}

.closing-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(250, 247, 242, 0.28);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    text-align: left;
    text-wrap: pretty;
}

.closing-guarantee > .bi {
    flex-shrink: 0;
    font-size: 1.5rem;
}

.closing-guarantee h3 {
    margin: 0 0 0.5rem;
    color: inherit;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
}

.closing-guarantee p { margin: 0; }

.closing-guarantee a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.closing-guarantee a:hover { text-decoration-thickness: 2px; }

.closing-guarantee a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.closing-terms strong { color: var(--paper); }

.closing-terms {
    font-size: var(--text-small);
    color: var(--gray-light);
}

/* --- Public navbar actions ------------------------------------------- */

/* Keep the brand and the actions on one row at every width. */
.custom-navbar > .container-sm {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.custom-navbar .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0;
}

.custom-navbar .navbar-actions .btn {
    white-space: nowrap;
}

@media (max-width: 400px) {
    .custom-navbar .navbar-actions .btn {
        padding-inline: 0.625rem;
        font-size: var(--text-small);
    }
}

/* --- Public footer links ---------------------------------------------- */

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: center;
}

.footer-links a,
.footer-links .cookie-settings {
    color: var(--secondary-color);
    text-decoration: none;
    padding: 0.25rem 0;
    font-size: var(--text-small);
}

.footer-links a:hover,
.footer-links .cookie-settings:hover {
    color: var(--primary-color);
    text-decoration: underline;
}


/* ==========================================================================
   Public site — warm paper editorial
   --------------------------------------------------------------------------
   Scoped to .public-site (set on the body in _LayoutPublic) so the customer
   and employee portals keep the existing cool-grey system untouched.

   The approach is token overrides rather than component rewrites: every
   component above already draws its surfaces and rules from these variables,
   so re-pointing the tokens warms the whole page at once.
   ========================================================================== */

/* --- Editorial type --------------------------------------------------- */

.public-site .offer-price {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Labels, steps and buttons retain the body stack so headings and prices keep
   the distinct Asap display voice. */
.public-site .eyebrow,
.public-site .step-number {
    font-family: var(--font-body);
    letter-spacing: normal;
}

.public-site .eyebrow {
    letter-spacing: 0.08em;
}

/* --- Surfaces --------------------------------------------------------- */

/* Cards sit white on paper so they read as raised rather than outlined. */
.public-site .benefit-card,
.public-site .lesson-card,
.public-site .quote-feature {
    background: #FFFFFF;
}

.public-site .offer-panel {
    background: #FFFFFF;
    border-color: var(--gray-light);
    border-top-color: var(--primary-color);
}

.public-site .lesson-card-foot {
    background: var(--paper);
}

/* --- Navbar ----------------------------------------------------------- */
/* Sits flush on the paper at the top of the page, then earns a hairline
   once content scrolls beneath it. */

.public-site.nav-at-top .custom-navbar {
    border-bottom-color: transparent;
}

/* --- Guide ------------------------------------------------------------ */

.guide-layout {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
    max-width: 52rem;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .guide-layout {
        grid-template-columns: 13rem 1fr;
        gap: var(--space-lg) 2.5rem;
    }
}

.guide-portrait {
    float: right;
    /* Scales with the copy column so it narrows gradually on smaller screens
       instead of jumping at a breakpoint, while staying floated in the text. */
    width: clamp(10rem, 40%, 11rem);
    height: auto;
    margin: 0.35rem 0 var(--space-sm) var(--space-md);
    border-radius: 0.5rem;
}

.guide-block {
    max-width: none;
    padding-left: 0;
    border-left: 0;
}

.guide-attribution {
    font-size: var(--text-small);
    letter-spacing: 0.02em;
    color: var(--gray-darkest);
}

/* --- Closing band ------------------------------------------------------ */

.public-site .closing-band {
    background: var(--secondary-color);
    color: var(--paper);
}

.public-site .closing-band .section-content {
    max-width: var(--width-prose);
}

.public-site .closing-terms {
    color: rgba(250, 247, 242, 0.7);
}

/* FAQ surfaces stay public-owned; the shared footer treatment is in components. */

.public-site .accordion-faq .accordion-button {
    background-color: #FFFFFF;
    color: var(--secondary-color);
}

.public-site .accordion-faq .accordion-item {
    border-color: var(--gray-light);
}

.public-site .accordion-faq .accordion-body {
    background-color: #FFFFFF;
}

/* Hero rhythm, set here rather than with utility classes so the relationships
   stay deliberate. The eyebrow is a label and sits tight to the headline; the
   real break comes between the headline and the lead. */

.public-site .hero .eyebrow,
.public-site .hero-heading,
.public-site .hero .lead,
.public-site .hero .fact-list {
    margin-bottom: 1rem;
}

/* The shared heading centers itself within its measure, which leaves it
   inset from the left-aligned copy around it once the hero column is wider
   than that measure. Keep the measure but pin it to the left edge. */
.public-site .hero-heading {
    margin-inline: 0;
}

/* The panel behind the photo is offset down and right to lift it off the page
   without a blurred shadow. */
.hero-portrait {
    position: relative;
    display: inline-block;
    max-width: 24rem;
}

.hero-portrait::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: -0.75rem;
    width: 100%;
    height: 100%;
    border-radius: 1.125rem;
    background: var(--gray-light);
}

.hero-portrait img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    filter: saturate(0.9) contrast(0.9);
}

/* --- The two measures -------------------------------------------------- */

.public-site .section-content {
    max-width: var(--width-grid);
}

/* Intros take the width of whichever container they sit in, prose or grid,
   rather than introducing a measure of their own. */
.public-site .section-intro {
    max-width: none;
}

/* The guide and the FAQ each had a bespoke max-width. Snap them to the two
   measures: the guide is multi-column so it takes the grid, with its text
   column capped at the prose measure; the FAQ is single-column so it takes
   prose outright. */

.public-site .guide-layout {
    max-width: var(--width-grid);
    justify-content: center;
}

@media (min-width: 768px) {
    .public-site .guide-layout {
        grid-template-columns: 13rem minmax(0, var(--width-prose));
    }
}

.public-site .faq-block {
    max-width: var(--width-prose);
}

/* Terri's quote sits under the offer panel rather than beside it, so the buy
   decision has a single column and the proof reads as a closing note. */
.public-site .quote-feature-wide {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    max-width: var(--width-prose);
    margin-inline: auto;
    margin-top: var(--section-space);
    padding: 0;
    border: 0;
    background: transparent;
}

.public-site .quote-feature-wide img {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Bullet label sits on its own line above its explanation. */
.public-site .lesson-points > li > strong {
    display: block;
}

/* Guide is a single prose column now, with the portrait floated inside it. */
.public-site .guide-layout {
    display: block;
    max-width: var(--width-prose);
}

/* Below lg the container is only a little wider than the prose measure, so
   centering at that measure reads as a stray indent rather than a column.
   Let the home page's problem and guide prose take the container instead. */
@media (max-width: 991.98px) {
    .public-site .container-lg > .reading-content,
    .public-site .guide-layout {
        max-width: none;
    }
}

.public-site .guide-block::after {
    content: "";
    display: block;
    clear: both;
}

/* Signature closes the guide section. The name is carried by the image's alt
   text, so the line beneath it gives the role only rather than repeating it. */
.guide-signature {
    display: block;
    width: 11rem;
    height: auto;
    margin: var(--space-md) 0 0.5rem;
}

/* --- Agreement plan --------------------------------------------------- */
/* Miller's second kind of plan: assurance against a real fear. Kept to one
   quiet line so it supports the steps instead of competing with them. */


.public-content {
    max-width: var(--content-reading-width);
    overflow-wrap: anywhere;
}

.public-content h2 { margin-top: 2rem; }
.public-content .form-control { max-width: 100%; }
.purchase-success-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.purchase-next-step {
    background: var(--paper-deep);
    border: 1px solid var(--gray-light);
}

.contact-honeypot { display: none; }

.public-site .offer-comparison > div {
    min-width: 0;
}

.public-site .offer-comparison .offer-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.public-site .offer-comparison .offer-panel .btn {
    margin-top: auto;
}

.coaching-inquiry-drawer.offcanvas-end {
    width: min(100%, 34rem);
}

.coaching-inquiry-drawer .offcanvas-header,
.coaching-inquiry-drawer .offcanvas-body {
    padding: 1.5rem;
}

.coaching-inquiry-drawer .offcanvas-body {
    white-space: normal;
    overflow-wrap: anywhere;
}

.coaching-details {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .coaching-inquiry-drawer .offcanvas-header,
    .coaching-inquiry-drawer .offcanvas-body {
        padding: 1rem;
    }
}

@media (max-width: 360px) {
    .public-site .offcanvas-end {
        width: 100%;
    }

    .public-site .navbar-actions {
        gap: 0.375rem !important;
    }

    .public-site .navbar-actions .btn {
        padding-inline: 0.625rem;
    }
}