/*
 * subscribe.css -- styles for templates/subscribe.php only.
 *
 * A separate stylesheet rather than an appended block in theme.css, matching
 * home-v2.css: nothing else uses these rules, and llb_theme_assets() enqueues
 * this file only when that template is active, so no other page pays for it.
 *
 * Namespaced .llb-sub-* and reusing the tokens declared at the top of theme.css
 * (--ll-accent, --ll-ink, --ll-muted, --ll-line, --ll-radius-*, --ll-serif)
 * rather than introducing a parallel palette. Navy and teal are the same values
 * home-v2.css uses, so the two pages read as one site.
 */

.llb-sub {
    --sub-navy: #11263a;
    --sub-teal: #2f7f7a;
    --sub-rust: var(--ll-accent);
    --sub-rust-dark: var(--ll-accent-dark);
    --sub-inset: clamp(1rem, 4vw, 3.5rem);
    font-family: var(--ll-ui-font);
}

/* The theme's .main caps width at 1240px; this page runs full-bleed so each
   band can span the viewport, with .llb-sub__inner restoring the content width.
   Mirrors how .main--home-v2 opts out. */
.llb-subscribe-page .main--subscribe {
    max-width: none;
    padding: 0;
}

.llb-sub__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: var(--sub-inset);
    padding-right: var(--sub-inset);
}

/* ---------- Band 1: hero ---------- */

.llb-sub__hero {
    background: #fff;
}

/* Copy left, price card top-right -- the same shape as the home page hero and
   its montage. Both columns start at the top of the band. */
.llb-sub__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    padding-top: clamp(1.25rem, 2.6vw, 2.1rem);
    padding-bottom: clamp(1.25rem, 2.8vw, 2.4rem);
}

.llb-sub__eyebrow {
    margin: 0 0 1.1rem;
    color: var(--sub-rust);
    font: 800 .8rem/1.1 var(--ll-ui-font);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.llb-sub__title {
    margin: 0 0 1.2rem;
    color: var(--sub-navy);
    font-family: var(--ll-serif);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.015em;
}

.llb-sub__lede {
    margin: 0 0 1rem;
    max-width: 52ch;
    color: var(--ll-muted);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.6;
}

.llb-sub__free-note {
    margin: 0;
    max-width: 52ch;
    color: var(--sub-navy);
    font: 700 1rem/1.5 var(--ll-ui-font);
}

/* ---------- Price card ---------- */

.llb-sub__plan {
    background: #fff;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    overflow: hidden;
    box-shadow: var(--ll-shadow);
    max-width: 26rem;
    width: 100%;
    justify-self: end;
}

.llb-sub__plan-head {
    background: var(--sub-navy);
    color: #fff;
    text-align: center;
    padding: 1.5rem 1.25rem 1.6rem;
}

.llb-sub__plan-name {
    margin: 0 0 .6rem;
    color: #fff;
    font: 400 1.08rem/1.2 var(--ll-ui-font);
}

/* The symbol and the cents are set smaller and raised, so the dollars carry the
   size. Positioned rather than using <sup>, which would inherit a browser's own
   font-size reduction on top of ours and shift the baseline unpredictably. */
.llb-sub__price {
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

/* The 6px is deliberate and absolute, not folded into the rem value: it is an
   optical nudge against the dollars' cap height, which does not scale with the
   root font size the way a rem offset would. */
.llb-sub__price-sym,
.llb-sub__price-cents {
    display: inline-block;
    font: 700 1.4rem/1 var(--ll-serif);
    vertical-align: top;
    position: relative;
    top: calc(.5rem + 6px);
}

.llb-sub__price-whole {
    font: 700 clamp(2.9rem, 5vw, 3.6rem)/1 var(--ll-serif);
    letter-spacing: -.02em;
}

/* Sits on the amount's own baseline, not raised with the symbol and cents --
   it is part of the sentence "A$24.95 / month", not part of the number. */
.llb-sub__price-per {
    font: 400 1.15rem/1 var(--ll-serif);
    margin-left: .15rem;
    opacity: .9;
}

.llb-sub__price-tax {
    margin: .55rem 0 0;
    font: 400 .84rem/1.2 var(--ll-ui-font);
    opacity: .72;
}

.llb-sub__price-unavailable {
    margin: .5rem 0 0;
    font: 400 1rem/1.35 var(--ll-ui-font);
    opacity: .85;
}

.llb-sub__plan-body {
    padding: 1.25rem;
}

.llb-sub__trial {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ll-line);
}

.llb-sub__trial-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #e6f1ef;
    color: var(--sub-teal);
}

.llb-sub__trial-icon svg { width: 1.25rem; height: 1.25rem; }

.llb-sub__trial-title {
    margin: .15rem 0 .25rem;
    color: var(--ll-ink);
    font: 700 1.02rem/1.25 var(--ll-ui-font);
}

.llb-sub__trial-note {
    margin: 0;
    color: var(--ll-muted);
    font: 400 .88rem/1.45 var(--ll-ui-font);
}

.llb-sub__action {
    padding-top: 1.1rem;
    text-align: center;
}

.llb-sub__have-access {
    margin: 0 0 .9rem;
    color: var(--ll-muted);
    font: 400 .92rem/1.45 var(--ll-ui-font);
}

/* Styled by role, not by element: for a signed-in eligible visitor this is a
   <button> inside the feature plugin's nonce-carrying form, and for everyone
   else it is an <a>. Both must look identical. */
.llb-sub__cta,
.llb-sub__action .action-link,
.llb-sub__action button[type=submit] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    border: 0;
    border-radius: var(--ll-radius-pill);
    background: var(--sub-rust);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font: 700 1.02rem/1 var(--ll-button-font);
    padding: 0 1rem;
}

.llb-sub__cta:hover, .llb-sub__cta:focus-visible,
.llb-sub__action .action-link:hover, .llb-sub__action .action-link:focus-visible,
.llb-sub__action button[type=submit]:hover,
.llb-sub__action button[type=submit]:focus-visible {
    background: var(--sub-rust-dark);
    color: #fff;
}

.llb-sub__action button[type=submit][disabled] { opacity: .55; cursor: not-allowed; }
.llb-sub__action form { margin: 0; }

.llb-sub__signin {
    margin: .8rem 0 0;
    color: var(--ll-muted);
    font: 400 .9rem/1.35 var(--ll-ui-font);
}

.llb-sub__signin a { color: var(--sub-rust); font-weight: 700; text-decoration: none; }
.llb-sub__signin a:hover, .llb-sub__signin a:focus-visible { text-decoration: underline; }

/* ---------- Band 2: the three tools ---------- */

.llb-sub__tools {
    background: #f7f2e9;
    padding: clamp(2rem, 4.5vw, 3.5rem) 0;
}

.llb-sub__section-title {
    margin: 0 0 1.5rem;
    color: var(--sub-navy);
    font: 700 clamp(1.4rem, 2.3vw, 1.85rem)/1.15 var(--ll-serif);
    letter-spacing: -.01em;
}

.llb-sub__tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.llb-sub__tool {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    padding: 1.15rem;
}

.llb-sub__tool-art { width: 100%; margin-bottom: .35rem; }
.llb-sub__tool-art svg { display: block; width: 100%; height: auto; border-radius: var(--ll-radius-md); }

.llb-sub__tool-title {
    margin: 0;
    color: var(--sub-navy);
    font: 700 1.32rem/1.15 var(--ll-serif);
}

.llb-sub__tool-blurb {
    margin: 0;
    color: var(--ll-muted);
    font: 400 .92rem/1.4 var(--ll-ui-font);
}

/* Abstract interface hints. Purely decorative, hidden from assistive tech at
   the markup level. Pushed to the bottom so the cards' text baselines line up
   regardless of how tall each preview is. */
.llb-sub__tool-preview {
    display: grid;
    gap: .5rem;
    margin-top: auto;
    padding-top: .75rem;
    min-width: 0;
}

.llb-sub__bar { display: block; height: 7px; border-radius: 4px; background: #e8e4dc; }
.llb-sub__row { display: flex; align-items: center; gap: .6rem; }
.llb-sub__row .llb-sub__bar { flex: 1 1 auto; }
.llb-sub__row--end { gap: .5rem; }
.llb-sub__row-icon { color: var(--ll-muted); opacity: .65; flex: 0 0 auto; }
.llb-sub__row-icon svg { display: block; width: 1rem; height: 1rem; }
.llb-sub__tick { flex: 0 0 auto; }
.llb-sub__tick svg { display: block; width: 1.05rem; height: 1.05rem; }

.llb-sub__steps { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }

.llb-sub__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1.5px solid #d9d3c8;
    color: var(--ll-muted);
    font: 700 .72rem/1 var(--ll-ui-font);
    flex: 0 0 auto;
}

.llb-sub__step--current { background: var(--sub-teal); border-color: var(--sub-teal); color: #fff; }
.llb-sub__step-line { flex: 1 1 auto; height: 2px; border-radius: 2px; background: #e8e4dc; }
.llb-sub__step-line--done { background: var(--sub-teal); }

/* ---------- Band 3: assurances ---------- */

.llb-sub__assurances {
    background: #fffdfa;
    border-top: 1px solid var(--ll-line);
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}

.llb-sub__assurance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* Icon above rather than beside the text. Alongside, it took enough of a
   quarter-width card that every title broke across two lines ("The Library
   remains / free"); stacking gives each title the full card width and they all
   set on one line. */
.llb-sub__assurance {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    background: #fff;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-md);
    padding: 1.05rem;
}

.llb-sub__assurance-icon { color: var(--sub-navy); }
.llb-sub__assurance-icon svg { display: block; width: 1.7rem; height: 1.7rem; }

.llb-sub__assurance-title {
    margin: 0;
    color: var(--sub-navy);
    font: 700 1.02rem/1.25 var(--ll-serif);
}

.llb-sub__assurance-body {
    margin: 0;
    color: var(--ll-muted);
    font: 400 .83rem/1.45 var(--ll-ui-font);
    text-wrap: pretty;
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
    .llb-sub__assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    /* Copy first, then the price: the headline is the page's h1 and pushing it
       below a price card reads as an advert rather than a page. */
    .llb-sub__hero-inner { grid-template-columns: 1fr; }
    .llb-sub__plan { justify-self: stretch; max-width: none; }
    .llb-sub__lede,
    .llb-sub__free-note { max-width: 60ch; }
    .llb-sub__tool-grid { grid-template-columns: 1fr; }
    .llb-sub__tool { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .3rem 1rem; align-items: center; }
    .llb-sub__tool-art { grid-row: span 3; margin-bottom: 0; }
    .llb-sub__tool-preview { display: none; }
}

@media (max-width: 599px) {
    .llb-sub__assurance-grid { grid-template-columns: 1fr; }
    .llb-sub__tool { grid-template-columns: 1fr; }
    .llb-sub__tool-art { grid-row: auto; max-width: 12rem; }
}

/* ---------- Band 4: institutions ---------- */

/* Navy, matching the home page's own dark band, so the page closes on the same
   note the rest of the site does. A different audience from everything above,
   so it is set apart rather than mixed into the student pitch. */
.llb-sub__institutions {
    background: var(--sub-navy);
    color: #fff;
    padding: clamp(2rem, 4.5vw, 3.25rem) 0;
}

/* One column, CTA under the copy. A right-hand button left a wide void between
   the two: the paragraph caps at a readable measure, so it cannot stretch to
   meet a button pinned to the far edge of a 1240px band. */
.llb-sub__institutions-inner {
    display: block;
}

.llb-sub__institutions-eyebrow {
    margin: 0 0 .6rem;
    color: #9fb6c9;
    font: 800 .78rem/1.1 var(--ll-ui-font);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.llb-sub__institutions-title {
    margin: 0 0 .7rem;
    color: #fff;
    font: 700 clamp(1.35rem, 2.2vw, 1.75rem)/1.2 var(--ll-serif);
    letter-spacing: -.01em;
}

/* CSS columns rather than a two-cell grid: a grid fills across, so paragraph
   two would sit to the RIGHT of paragraph one and the argument would read in
   the wrong order. Columns flow down the first and then into the second, which
   is how prose is meant to be read. break-inside keeps a paragraph whole rather
   than letting the balancer cut one across the gutter. */
.llb-sub__institutions-cols {
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    color: #d7e0e8;
    font: 400 .96rem/1.6 var(--ll-ui-font);
}

.llb-sub__institutions-cols p {
    margin: 0 0 1rem;
    break-inside: avoid;
}

.llb-sub__institutions-cols p:last-child { margin-bottom: 0; }

.llb-sub__institutions-cta {
    margin-top: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1.4rem;
    border-radius: var(--ll-radius-pill);
    background: var(--sub-rust);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font: 700 1rem/1 var(--ll-button-font);
}

.llb-sub__institutions-cta:hover,
.llb-sub__institutions-cta:focus-visible { background: var(--sub-rust-dark); color: #fff; }

@media (max-width: 920px) {
    .llb-sub__institutions-cols { columns: 1; }
}