/**
 * BRITE-102 - Pricing page (resources/views/web-front-view/pricing.blade.php).
 *
 * Scoped entirely under .brp (on the page's <main>), the same containment home.css uses
 * under .brh and instructions.css uses under .bri. Nothing here can reach another screen.
 *
 * Palette and type are the BRITE-74 / BRITE-130 homepage's, reused rather than reinvented:
 *   #1A4137 deep green   #44534D body text   #FBFBF9 page ground
 *   #DDE4E1 rules        #EAF0ED tint        #1C2421 near-black
 *   Barlow / Barlow Condensed / Barlow Semi Condensed
 *
 * NOTE: this page also loads page-reset.css and carries class="br-page". That is what stops
 * style.min.css's `a { display: inline-block }` turning the in-sentence links (the setup
 * guide link, the closing sign-up link) into unbreakable boxes. Do not remove either.
 */

.brp {
    background: #FBFBF9;
    color: #44534D;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    padding: 72px 0 96px;
}

.brp-wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────────── */

/* .br-page neutralises style.min.css's `header { background:white; box-shadow }`, which
   would otherwise paint a white slab behind this block. */
.brp-hero {
    text-align: center;
    margin-bottom: 44px;
}

.brp-eyebrow {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1A4137;
    margin: 0 0 12px;
}

.brp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 6vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #1A4137;
    margin: 0 0 18px;
}

.brp-lede {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 34rem;
}

/* ── Plan cards ───────────────────────────────────────────────────────────────── */

/* BRITE-149: two plans, Annual then Monthly. Side by side from 700px, stacked below it with
   Annual on top (source order, so the stack needs no reordering). Annual is the primary card:
   a heavier border and the filled CTA. Nothing here, or in the markup, claims a saving. */
.brp-plans {
    margin-bottom: 64px;
}

.brp-plans-title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: #1A4137;
    margin: 0 0 18px;
}

.brp-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.brp-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #DDE4E1;
    padding: 36px 24px;
    text-align: center;
}

.brp-card--primary {
    border: 2px solid #1A4137;
}

.brp-plan {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #44534D;
    margin: 0 0 18px;
}

/* The currency is set at a readable size rather than as a superscript flourish: this price
   must never be mistakeable for USD, which is also why the markup never writes a bare
   dollar figure. */
.brp-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    color: #1A4137;
}

/* Footnote marker tied to the AUD figure. Sized in em so it tracks the amount as that clamps. */
.brp-star {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.32em;
    line-height: 1;
    vertical-align: super;
    margin-left: 2px;
}

/* The dagger on the client's monthly line points to the second line of .brp-conditions. */
.brp-dagger {
    font-size: 0.8em;
    vertical-align: super;
    line-height: 1;
    margin-left: 1px;
}

/* The client's own monthly framing, quoted. It sits directly beneath the AUD figure, and that
   adjacency is what stops "$9.95" reading as USD - see the note in pricing.blade.php. */
.brp-monthly {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: clamp(17px, 2.4vw, 20px);
    color: #44534D;
    margin: 0 0 26px;
}

.brp-currency {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 3vw, 26px);
    letter-spacing: 0.04em;
}

.brp-amount {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(50px, 6.4vw, 64px);
    line-height: 1;
    letter-spacing: 0.01em;
}

.brp-period {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: clamp(17px, 2.4vw, 20px);
    color: #44534D;
}

.brp-terms {
    list-style: none;
    margin: 0 auto 30px;
    padding: 0;
    max-width: 30rem;
    text-align: left;
}

.brp-terms li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    line-height: 1.55;
}

.brp-terms li:last-child { margin-bottom: 0; }

.brp-terms li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: #1A4137;
}

.brp-terms strong { color: #1C2421; }

.brp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;
    background: #1A4137;
    color: #FBFBF9;
    border: 1px solid #1A4137;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

/* page-reset.css sets `.br-page a { display: inline }`, which is right for prose links but
   would collapse this button's padding box. Restore it for this one element only. */
.br-page .brp-cta { display: inline-flex; }

/* Pinned to the foot of each card so the two buttons line up whatever the card above holds.
   The CTA sits in its own row rather than directly in the card's flex column: a flex item's
   display is blockified, so the link would compute to `flex` and the inline-flex above
   would never apply. */
.brp-cta-row {
    margin-top: auto;
}

/* Monthly's CTA: same box, outlined rather than filled, so Annual reads as the primary card. */
.brp-cta--secondary {
    background: #FFFFFF;
    color: #1A4137;
}

.brp-cta:hover,
.brp-cta:focus-visible {
    background: #2C5248;
    border-color: #2C5248;
    color: #FFFFFF;
}

/* ── Sections ─────────────────────────────────────────────────────────────────── */

.brp-section {
    margin-bottom: 56px;
}

.brp-h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 32px);
    line-height: 1.2;
    color: #1A4137;
    margin: 0 0 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid #DDE4E1;
}

.brp-section p {
    margin: 0 0 15px;
}

.brp-section p:last-child { margin-bottom: 0; }

.brp-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brp-features > li {
    position: relative;
    padding: 0 0 0 30px;
    margin-bottom: 13px;
    line-height: 1.55;
}

.brp-features > li:last-child { margin-bottom: 0; }

/* The tick is DRAWN, from the two borders of an empty box, rather than written as a character in
   the markup. The client supplied these items with a tick on each one; a literal tick would be
   announced by a screen reader on every line, and `content: "<glyph>"` is exposed in the
   accessibility tree too. An empty ::before is not. Same idiom as .brp-terms li::before above. */
.brp-features > li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.34em;
    width: 6px;
    height: 12px;
    border: solid #1A4137;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Outcomes ─────────────────────────────────────────────────────────────────── */

.brp-outcomes {
    background: #EAF0ED;
    border: 1px solid #DDE4E1;
    padding: 32px;
}

.brp-outcomes .brp-h2 {
    border-bottom-color: #C3CFCA;
}

.brp-question {
    font-size: clamp(19px, 2.6vw, 22px);
    line-height: 1.5;
    color: #1C2421;
    max-width: 36rem;
}

/* Income > Expenses > Surplus > Debt Reduction > Investment/Super. The arrows are drawn from
   borders on an empty ::before for the same reason the feature ticks are - nothing to announce.
   It wraps rather than scrolls; at 375px this runs to three rows. */
.brp-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 2.2vw, 18px);
    letter-spacing: 0.01em;
    color: #1A4137;
    row-gap: 10px;
}

.brp-flow li {
    display: flex;
    align-items: center;
}

/* ::after on the PRECEDING step, not ::before on the following one. The list wraps at narrow
   widths, and a leading separator would start the second row with a dangling arrow. Trailing it
   instead makes a wrapped row read as continuation. */
.brp-flow li:not(:last-child)::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 11px;
    border: solid #8FA79D;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}

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

.brp-trial p {
    max-width: 36rem;
}


.brp-structure {
    background: #EAF0ED;
    border: 1px solid #DDE4E1;
    padding: 32px;
}

.brp-structure .brp-h2 {
    border-bottom-color: #C3CFCA;
}

.brp-foot {
    margin: 0 0 40px;
    padding-top: 26px;
    border-top: 1px solid #DDE4E1;
    text-align: center;
}

/* ── Conditions (small print) ─────────────────────────────────────────────────── */

/* BRITE-149. Replaces the single "*GST included" footnote. Subordinate to the body copy, but
   kept at 14px (13px on a phone) so it stays legible at 375. */
.brp-conditions {
    font-size: 14px;
    line-height: 1.55;
    color: #6B7A74;
}

/* line-height on the p itself: style.min.css and responsive.css set a bare `p { line-height }`
   that beats anything inherited from .brp-conditions. */
.brp-conditions p {
    margin: 0 0 8px;
    line-height: 1.55;
}

.brp-conditions p:last-child { margin-bottom: 0; }

/* In-sentence links. These are the ones page-reset.css keeps breakable. */
.brp-section a,
.brp-foot a {
    color: #1A4137;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: #AEC2BA;
}

.brp-section a:hover,
.brp-section a:focus-visible,
.brp-foot a:hover,
.brp-foot a:focus-visible {
    color: #2C5248;
    text-decoration-color: #1A4137;
}

/* ── Narrow widths ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .brp {
        padding: 48px 0 64px;
        font-size: 16px;
    }

    .brp-wrap { padding: 0 16px; }

    .brp-plans { margin-bottom: 48px; }

    .brp-card { padding: 30px 20px; }

    .brp-conditions { font-size: 13px; }

    .brp-structure { padding: 24px 20px; }

    .brp-outcomes { padding: 24px 20px; }

    .brp-section { margin-bottom: 44px; }

    .brp-lede { font-size: 17px; }

    .brp-cta {
        width: 100%;
        padding: 15px 20px;
    }
}

@media (max-width: 699px) {
    .brp-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 360px) {
    /* At 320 the price line is the widest thing on the page; let it wrap rather than
       push the card out past the gutter. */
    .brp-terms li { padding-left: 22px; }
    .brp-terms li::before { left: 2px; }
}