/* Overtime Men's Health · Membership sign-up funnel (public flow).
   Layers on styles.css tokens. Mobile-first, designed 390px up.
   Shared by pricing / lead / checkout / welcome. No em or en dashes. */

.flow {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Top bar ---------- */
.flow-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px clamp(16px, 5vw, 44px);
    border-bottom: 1px solid var(--line-soft);
    /* Opaque so scrolled content never bleeds through the sticky header on mobile. */
    background: var(--paper, #fbf7ef);
    -webkit-backdrop-filter: saturate(1.1) blur(12px);
    backdrop-filter: saturate(1.1) blur(12px);
}
.flow-top .brand {
    gap: 0;
}
.flow-top .brand-logo {
    width: 118px;
}
.secure-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}
.secure-note svg {
    width: 13px;
    height: 13px;
    color: var(--deep);
    flex: none;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    text-decoration: none;
}
.back-link:hover {
    color: var(--ink);
}
.back-link svg {
    width: 13px;
    height: 13px;
    flex: none;
}

/* ---------- Progress rail ---------- */
.rail {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: clamp(22px, 4vw, 34px) auto 0;
}
.rail li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}
.rail .rn {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    font-size: 9px;
    flex: none;
}
.rail .cur {
    color: var(--ink);
}
.rail .cur .rn {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.rail .done {
    color: var(--deep);
}
.rail .done .rn {
    background: linear-gradient(135deg, #c7a24e, #7a5f22);
    border-color: transparent;
    color: #fbf7ef;
}
.rail .sep {
    width: 16px;
    height: 1px;
    background: var(--line-strong);
}
@media (max-width: 560px) {
    .rail li .rl {
        display: none;
    }
    .rail li.cur .rl {
        display: inline;
    }
    .rail .sep {
        width: 10px;
    }
}

/* ---------- Container + heads ---------- */
.wrap {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: clamp(26px, 5vw, 50px) clamp(16px, 5vw, 40px) 96px;
}
.flow-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.flow-head .lede {
    margin-left: auto;
    margin-right: auto;
}
.flow-head .page-title {
    margin-top: 12px;
}

/* trust strip shared */
.trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 28px;
}
.trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
}
.trust svg {
    width: 14px;
    height: 14px;
    color: var(--deep);
    flex: none;
}

/* ---------- Pricing tiers ---------- */
/* Three tiers since 08-03: Foundational, Premium (featured, deliberately the middle column so the
   eye lands on it), OT Black. Was 1fr 1fr when only two were sellable. Two breakpoints rather than
   one, because three cards at 800px are too narrow to read: 2-up first, then 1-up. */
.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: clamp(30px, 5vw, 44px);
    align-items: stretch;
}
@media (max-width: 1040px) {
    .tiers {
        grid-template-columns: 1fr 1fr;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Featured first when it can no longer be centred, so the recommended plan is still read first. */
    .tier.feat {
        order: -1;
    }
}
@media (max-width: 780px) {
    .tiers {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}
.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    /* Jacob 07-30, on ConciergeMD: "I don't need as hard of lines as they have." Their cards are
       boxed in hard. This is a hairline, roughly 60% of the --line token, so the cards read as
       separated rather than fenced. Do not put it back to a full-strength border.
       Written as rgba rather than color-mix to match every other tinted border in this file, and
       because --line differs per theme (od.css is dark-on-light, club.css light-on-dark) so mixing
       the token would give an unpredictable result on the funnel's own light ground. */
    border: 1px solid rgba(25, 23, 19, 0.06);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(24px, 4vw, 34px);
}
.tier.feat {
    border-color: rgba(184, 151, 63, 0.5);
    box-shadow:
        var(--shadow),
        0 0 0 1px rgba(184, 151, 63, 0.28),
        0 0 44px rgba(184, 151, 63, 0.12);
}
.tier.feat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-card);
    pointer-events: none;
    background: radial-gradient(
        420px 220px at 80% 0%,
        rgba(199, 162, 78, 0.1),
        transparent 70%
    );
}
.tier-badge {
    position: absolute;
    top: -12px;
    left: clamp(24px, 4vw, 34px);
    z-index: 2;
}
.tier-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.tier-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 23px;
    letter-spacing: -0.01em;
}
.tier-cad {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 6px;
}
/* .tier-price ruleset retired 2026-08-11: zero markup consumers anywhere (grep-proven), and the
   canonical --fs-price-* tokens now own every live price. */
.tier-bill {
    font-size: 13px;
    color: var(--mute);
    margin-top: 6px;
}

/* the primary selling point block (concierge) */
.tier-lead {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: var(--r-tile);
    border: 1px solid rgba(184, 151, 63, 0.28);
    background: linear-gradient(180deg, #f8f5f2 0%, #f4ede4 100%);
}
.tier.feat .tier-lead {
    background: linear-gradient(140deg, var(--dark-a) 0%, var(--dark-b) 100%);
    border-color: rgba(230, 211, 160, 0.22);
    color: var(--gold-light);
    box-shadow: 0 10px 30px rgba(32, 19, 8, 0.24);
}
.tier-lead .tl-eye {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--deep);
}
.tier.feat .tier-lead .tl-eye {
    color: rgba(230, 211, 160, 0.72);
}
.tier-lead .tl-eye svg {
    width: 13px;
    height: 13px;
}
.tier-lead .tl-head {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin-top: 10px;
    text-wrap: pretty;
}
.tier-lead .tl-sub {
    font-size: 13px;
    color: var(--mute);
    margin-top: 8px;
}
.tier.feat .tier-lead .tl-sub {
    color: rgba(230, 211, 160, 0.7);
}

/* included list with dollar-value anchor */
.incl {
    list-style: none;
    margin-top: 20px;
}
.incl li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--line-soft);
}
.incl li:first-child {
    border-top: 0;
}
.incl .ic-main {
    display: flex;
    align-items: baseline;
    gap: 11px;
    min-width: 0;
}
.incl .ic-check {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--deep);
    transform: translateY(2px);
}
.incl .ic-text {
    font-size: 13.5px;
    line-height: 1.45;
}
.incl .ic-text .ic-note {
    display: block;
    font-size: 12px;
    color: var(--mute);
    margin-top: 2px;
}
.incl .ic-val {
    text-align: right;
    flex: none;
    white-space: nowrap;
}
.incl .ic-was {
    display: block;
    font-size: 12px;
    color: var(--faint);
    text-decoration: line-through;
}
.incl .ic-now {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--deep);
    margin-top: 3px;
}
.tier .btn {
    margin-top: 24px;
    width: 100%;
    padding: 16px 22px;
    font-size: 14.5px;
}
.tier-fine {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: center;
    margin-top: 14px;
}

/* value callout above tiers */
.anchor-band {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px auto 0;
    max-width: 620px;
    text-align: center;
    padding: 14px 22px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
    color: var(--mute);
}
.anchor-band strong {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Split layout (lead + checkout) ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 352px;
    gap: 26px;
    align-items: start;
    margin-top: clamp(28px, 4vw, 40px);
}
@media (max-width: 880px) {
    .split {
        /* minmax(0, 1fr), NOT 1fr. A 1fr track carries an automatic MIN-CONTENT minimum, so a child
           that cannot shrink widens the track past its container. Measured at 320px on 08-14: the
           track computed to 310.2px inside a 288px box and pushed the document 6px sideways on
           /membership/join. The desktop rule above already used minmax(0,1fr); this single-column
           override reverted it. Same defect fixed twelve times in home-redesign.blade.php. */
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Mobile: lead with the payment form, not the summary + testimonials rail.
       (rail below keeps price + social proof as reinforcement, not a wall to
       scroll past before reaching the card entry.) */
    .split .rail-col {
        order: 1;
    }
}
.panel-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: clamp(24px, 4vw, 36px);
}

/* form fields */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}
.fg {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fg.wide {
    grid-column: 1 / -1;
}
@media (max-width: 460px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .fg.half-460 {
        grid-column: auto;
    }
}
.fg label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}
.fg label .req {
    color: var(--deep);
}
.f-select {
    font: inherit;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 11px 40px 11px 16px;
    background: #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a5f22' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 16px center;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.f-select:focus-visible,
.f-input:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 1px;
}
.f-input::placeholder {
    color: var(--faint);
    opacity: 0.45; /* Rick 07-23: placeholders read as pre-filled; fade them so they're clearly hints */
}

/* consent checkboxes */
.consents {
    margin-top: 26px;
    border-top: 1px solid var(--line-soft);
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.check {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    cursor: pointer;
}
.check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.check .box {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    border: 1.5px solid var(--line-strong);
    background: #ffffff;
    display: grid;
    place-items: center;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
    margin-top: 1px;
    position: relative;
}
/* Invisible hit-area expansion: the box is the only reliably tappable part of the
   consent row (the text is mostly links), so give thumbs a ~48px target. */
.check .box::after {
    content: "";
    position: absolute;
    inset: -11px;
}
.check.attn .box {
    outline: 2px solid #b3261e;
    outline-offset: 2px;
    animation: check-attn 0.5s ease 2;
}
@keyframes check-attn {
    50% {
        transform: scale(1.12);
    }
}
.check .box svg {
    width: 15px;
    height: 15px;
    color: #fbf7ef;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}
.check input:checked + .box {
    background: linear-gradient(135deg, #c7a24e 0%, #b8973f 48%, #7a5f22 100%);
    border-color: transparent;
}
.check input:checked + .box svg {
    opacity: 1;
    transform: scale(1);
}
.check input:focus-visible + .box {
    outline: 2px solid var(--champagne);
    outline-offset: 2px;
}
.check .ctext {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mute);
}
.check .ctext b {
    color: var(--ink);
    font-weight: 600;
}
.check .ctext a {
    color: var(--deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.check .req-tag {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--deep);
}
.check .opt-tag {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Sits under the consent boxes. States that care messages are NOT gated on the marketing
   box, which is true and is the thing a member most needs to know there. Body face, not
   mono: it is a sentence, and 8px mono at sentence length is unreadable. */
.consent-note {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--faint);
}
.form-cta {
    margin-top: 26px;
}
.form-cta .btn {
    width: 100%;
    padding: 16px 22px;
    font-size: 14.5px;
}
.form-cta .btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}
.form-note {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: center;
    margin-top: 14px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.form-note svg {
    width: 12px;
    height: 12px;
    color: var(--deep);
}

/* ---------- Plan summary rail ---------- */
.summary {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sum-card .sc-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.sc-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.01em;
}
.sc-price {
    text-align: right;
    white-space: nowrap;
}
.sc-price .price {
    font-size: var(--fs-price-summary);
}
.sc-price .per {
    display: block;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 2px;
}
.sc-list {
    list-style: none;
    margin-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.sc-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.sc-list li:last-child {
    border-bottom: 0;
}
.sc-list svg {
    width: 14px;
    height: 14px;
    color: var(--deep);
    flex: none;
    transform: translateY(2px);
}
.sc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-strong);
}
.sc-foot .sf-lab {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
}
.sc-foot .sf-num {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
}
.sc-switch {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 95, 34, 0.4);
    padding-bottom: 2px;
    align-self: flex-start;
}
.sc-switch:hover {
    color: var(--ink);
}

/* 12-month sticker (Jacob 08-06): red star chip with a plain-words tooltip on hover/focus. */
.billopt__star {
    position: relative;
    display: inline-block;
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: #b3261e;
    border-radius: 999px;
    padding: 3px 9px;
    cursor: help;
    white-space: nowrap;
}
.billopt__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 230px;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper, #fdfdfc);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 10px 26px rgba(32, 19, 8, 0.16);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
}
.billopt__star:hover .billopt__tip,
.billopt__star:focus-visible .billopt__tip,
.billopt__star:focus .billopt__tip {
    opacity: 1;
    visibility: visible;
}

/* discount code (checkout summary) */
.sc-promo {
    margin-top: 14px;
}
.sc-promo-toggle {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(122, 95, 34, 0.4);
    cursor: pointer;
}
.sc-promo-lab {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #565149;
  margin-bottom: 6px;
}
.sc-promo-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
/* display:flex would otherwise defeat the `hidden` attribute (the 07-31 notification-panel
   lesson) and leave the input row and an empty discount line painted while "hidden". */
.sc-promo-row[hidden],
.sc-promo-line[hidden],
.sc-promo-toggle[hidden] {
    display: none;
}
.sc-promo-row input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
}
.sc-promo-row input:focus {
    outline: none;
    border-color: var(--deep);
    box-shadow: 0 0 0 3px rgba(195, 105, 31, 0.12);
}
.sc-promo-row button {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    border: 0;
    border-radius: 10px;
    padding: 0 16px;
    cursor: pointer;
}
.sc-promo-row button:disabled {
    opacity: 0.5;
    cursor: default;
}
.sc-promo-msg {
    margin-top: 8px;
    font-size: 12px;
    color: #b3261e;
}
.sc-promo-msg.ok {
    color: var(--deep);
}
.sc-promo-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
}
.sc-promo-line .sc-promo-name {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
}
.sc-promo-line .sc-promo-name button {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 8px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deep);
    border-bottom: 1px solid rgba(122, 95, 34, 0.4);
    cursor: pointer;
}
.sc-promo-line .sc-promo-amt {
    font-weight: 600;
    color: var(--deep);
}

/* before/after proof placeholder */
.proof-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.proof-cell {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-tile);
    overflow: hidden;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(25, 23, 19, 0.02), rgba(25, 23, 19, 0.08)),
        var(--cream);
}
.proof-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    filter: saturate(0.8);
}
.proof-cell .pc-lab {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fbf7ef;
    background: rgba(25, 23, 19, 0.55);
    border-radius: 999px;
    padding: 4px 9px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.proof-note {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 12px;
    line-height: 1.7;
}

/* review cue */
.review {
    display: flex;
    align-items: center;
    gap: 14px;
}
.review .stars {
    display: inline-flex;
    gap: 2px;
    color: var(--champagne);
}
.review .stars svg {
    width: 15px;
    height: 15px;
}
.review .rv-num {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
}
.review .rv-meta {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px;
}

/* ---------- Stripe-style card entry (checkout) ---------- */
.pay-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.pay-eyebrow .cards {
    display: inline-flex;
    gap: 5px;
    margin-left: auto;
}
.pay-eyebrow .cards img,
.pay-eyebrow .cards svg {
    height: 20px;
    width: auto;
    opacity: 0.9;
}
.stripe {
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(25, 23, 19, 0.03);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.stripe.focus {
    border-color: var(--champagne);
    box-shadow:
        0 0 0 2px rgba(184, 151, 63, 0.22),
        inset 0 1px 2px rgba(25, 23, 19, 0.03);
}
.stripe-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
}
.stripe-row:last-child {
    border-bottom: 0;
}
.stripe-row .sr-ico {
    width: 18px;
    height: 18px;
    color: var(--faint);
    margin-left: 15px;
    flex: none;
}
.stripe input {
    font: inherit;
    font-size: 14.5px;
    color: var(--ink);
    border: 0;
    outline: 0;
    background: transparent;
    padding: 15px 16px;
    width: 100%;
}
.stripe input::placeholder {
    color: var(--faint);
}
/* Stripe Elements mount points. Stripe injects an iframe whose own height is driven by the
   font-size we pass in JS, so the padding lives here to match .stripe input exactly and the
   rows keep the same height whether the field is a real Element or the staging look-alike. */
.stripe .stripe-el {
    padding: 15px 16px;
    width: 100%;
    min-width: 0;
}
.stripe .stripe-el .__PrivateStripeElement {
    width: 100%;
}
/* Card errors and decline messages. Stripe's own wording is used verbatim, so this only needs
   to be legible and unmissable, not chatty. */
.pay-error {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #b3261e;
}
.pay-error[hidden] {
    display: none;
}
.stripe .brand-badge {
    margin-right: 14px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep);
    white-space: nowrap;
}
.stripe-split {
    display: flex;
}
.stripe-split .stripe-row {
    flex: 1;
    border-bottom: 0;
}
.stripe-split .stripe-row:first-child {
    border-right: 1px solid var(--line-soft);
}
.card-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
    display: block;
}
.pay-block + .pay-block {
    margin-top: 20px;
}
.pay-cta {
    margin-top: 24px;
}
.pay-cta .btn {
    width: 100%;
    padding: 17px 22px;
    font-size: 15px;
}
.pay-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 18px;
    justify-content: center;
}
/* Child selectors on purpose: the Google rating pill (partials/google-rating-pill) sits inside
   this row as an <a>, and the old descendant `.pay-trust span` reached into it, remaking its
   stars and count as tracked mono caps (stars collapsed to dots on checkout, seen 08-10). */
.pay-trust > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
}
.pay-trust > span svg {
    width: 13px;
    height: 13px;
    color: var(--deep);
    flex: none;
}
.stripe-powered {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: center;
    margin-top: 16px;
}
.stripe-powered b {
    color: var(--mute);
    font-weight: 500;
}

/* ---------- Welcome ---------- */
.welcome-wrap {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.seal {
    width: 74px;
    height: 74px;
    margin: 0 auto clamp(22px, 4vw, 30px);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fbf7ef;
    background: linear-gradient(135deg, #c7a24e 0%, #b8973f 48%, #7a5f22 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 244, 214, 0.5),
        0 12px 30px rgba(122, 95, 34, 0.28);
}
.seal svg {
    width: 34px;
    height: 34px;
}
.email-card {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    margin: clamp(28px, 5vw, 40px) auto 0;
    max-width: 480px;
}
.email-card .ec-ico {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--deep);
    background: rgba(184, 151, 63, 0.12);
}
.email-card .ec-ico svg {
    width: 22px;
    height: 22px;
}
.email-card .ec-title {
    font-size: 14.5px;
    font-weight: 600;
}
.email-card .ec-sub {
    font-size: 13px;
    color: var(--mute);
    margin-top: 3px;
}
.next {
    list-style: none;
    counter-reset: step;
    text-align: left;
    max-width: 560px;
    margin: clamp(34px, 6vw, 48px) auto 0;
}
.next li {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--line-soft);
}
.next li:first-child {
    border-top: 0;
}
.next .st-n {
    counter-increment: step;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 15px;
    color: var(--deep);
}
.next .st-n::before {
    content: counter(step);
}
.next .st-name {
    font-size: 15px;
    font-weight: 600;
}
.next .st-sub {
    font-size: 13.5px;
    color: var(--mute);
    margin-top: 4px;
    line-height: 1.5;
}
.next .st-when {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 8px;
}
.welcome-cta {
    margin-top: clamp(34px, 6vw, 46px);
}
.welcome-cta .btn {
    padding: 17px 40px;
    font-size: 15px;
}
.welcome-help {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 20px;
}
.welcome-help a {
    color: var(--deep);
    text-decoration: none;
}

/* entrance choreography */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
[data-rise] {
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    [data-rise] {
        animation: none;
    }
}

/* ---------- Member proof card (checkout rail) ---------- */
.mwins {
    padding: clamp(20px, 3vw, 26px);
}
.mwins-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.mwins-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: var(--ink);
}
.mwins-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--champagne);
}
.mwins-stars svg {
    width: 14px;
    height: 14px;
}
/* ---------- Google rating pill (partials/google-rating-pill.blade.php) ---------- */
/* Clickable, opens OT's real Google reviews. Replaces three hardcoded, unclickable star rows on
   join, checkout and pricing, and matches the homepage pill. 4.9 is substantiated; the count is a
   floor so it cannot go stale. */
.gpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition:
        box-shadow 0.2s,
        transform 0.2s;
}
.gpill:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.gpill:focus-visible {
    outline: 2px solid var(--deep);
    outline-offset: 2px;
}
.gpill__g {
    width: 15px;
    height: 15px;
    flex: none;
}
.gpill__stars {
    color: #fbbc04;
    letter-spacing: 0.5px;
    font-size: 11px;
}
.gpill__num {
    font-weight: 700;
}
.gpill__count {
    color: var(--mute);
}
/* Tight rails just get smaller type. The count always stays: the cramped container is the
   desktop order rail, not the phone, so hiding it by viewport width removed it exactly where
   there was room. Containers that cannot fit the pill wrap it onto its own line instead. */
.gpill--compact {
    padding: 6px 11px;
    font-size: 11.5px;
    gap: 5px;
}
.mwins-item {
    display: flex;
    gap: 13px;
    padding: 15px 0;
    border-top: 1px solid var(--line-soft);
}
.mwins-item:first-of-type {
    border-top: 0;
}
.mwins-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1px solid var(--line);
}
.mwins-body {
    min-width: 0;
}
.mwins-quote {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}
.mwins-by {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--deep);
    margin-top: 7px;
}
.mwins-by .v {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--mute);
}
.mwins-by .v svg {
    width: 10px;
    height: 10px;
    color: var(--champagne);
}

/* Billing-period picker (Premium 6/12-month prepay, priced 08-03). Radio semantics; the selected
   option takes the same champagne ring the card box takes on focus, and the free-months tag is
   Jacob's Concier7D-style banner, run as a small gold pill so it reads as a deal, not a sticker. */
.billopts {
    display: grid;
    gap: 10px;
}
.billopt {
    font: inherit;
    cursor: pointer;
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.billopt:hover {
    border-color: var(--champagne);
}
.billopt:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 2px;
}
.billopt.on {
    border-color: var(--champagne);
    box-shadow: 0 0 0 2px rgba(184, 151, 63, 0.22);
}
.billopt__radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    flex: none;
}
.billopt.on .billopt__radio {
    border-color: var(--champagne);
    background: radial-gradient(circle, var(--gold) 0 45%, transparent 52%);
}
.billopt__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.billopt__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}
.billopt__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--faint);
}
.billopt__meta s {
    color: var(--faint);
}
.billopt__tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1a130a;
    background: linear-gradient(135deg, #e7ce88 0%, #c7a24e 55%, #a9822f 100%);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}
.billopt__price {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.billopt__price small {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}