/* ==========================================================================
   future_lp.css — "Unicus Is Future" Meta-ads landing page (route: /future)
   Self-contained theme, aligned with the main site: white/off-white surfaces,
   dark text, sun-yellow #ffd223 primary + teal #26a69a secondary accents,
   dark #131111 footer. Baloo 2 display + Roboto body. Scoped to .lpf / .lpf-*;
   not loaded anywhere else on the site.
   ========================================================================== */

:root {
    --bg:        #ffffff;   /* site background */
    --bg-alt:    #fbfbfb;   /* alternating section */
    --surface:   #ffffff;   /* cards */
    --line:      #ececec;
    --sun:       #ffd223;   /* primary brand accent (site buttons) */
    --sun-deep:  #f5a800;
    --teal:      #26a69a;   /* site secondary accent */
    --teal-deep: #1d8378;
    --footer:    #131111;   /* site footer */
    --ink:       #1c1a17;   /* primary text */
    --muted:     #5f5a52;   /* secondary text */
    --coral:     #e05a4a;   /* error/alert only */
    --radius:    18px;
    --maxw:      1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.lpf {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.lpf h1, .lpf h2, .lpf h3, .lpf h4 {
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 .4em;
    color: var(--ink);
}

.lpf a { color: var(--teal-deep); text-decoration: none; }
.lpf a:hover { text-decoration: underline; }

.lpf-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.lpf-wrap--narrow { max-width: 620px; }
.lpf-center { text-align: center; }

/* ---- Highlighted "mark" word — yellow highlighter chip (legible on light) ---- */
.lpf-mark {
    color: #1a1407;
    background: var(--sun);
    padding: 0 .18em;
    border-radius: 5px;
    white-space: nowrap;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.lpf-mark--teal { color: #fff; background: var(--teal); }

/* ---- Inline SVG icon system (replaces emojis; uniform line set) ---- */
.lpf-ico {
    width: 1em; height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
.lpf-card--ai .lpf-card__icon { color: var(--teal-deep); }
.lpf-card--gx .lpf-card__icon { color: var(--sun-deep); }
.lpf-subject__icon { color: var(--teal-deep); }
.lpf-subject.is-featured .lpf-subject__icon { color: var(--sun-deep); }
.lpf-feature span { color: var(--teal-deep); }
.lpf-awards li span { color: var(--sun-deep); }
.lpf-careercard__icon { color: var(--sun-deep); }
.lpf-grow .lpf-ico { width: .95em; height: .95em; vertical-align: -.12em; margin-right: 4px; }
.lpf-allnote .lpf-ico { color: var(--teal-deep); width: 1.2em; height: 1.2em; vertical-align: -.22em; margin-right: 6px; }

/* ---- Buttons ---- */
.lpf-btn {
    display: inline-block;
    background: var(--sun);
    color: #1a1407;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .2px;
    padding: 13px 26px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(255, 210, 35, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lpf-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
    background: #ffdb45;
    box-shadow: 0 12px 28px rgba(245, 168, 0, .42);
}
.lpf-btn--sm { padding: 9px 18px; font-size: .9rem; }
.lpf-btn--lg { padding: 16px 34px; font-size: 1.12rem; }
.lpf-btn--block { width: 100%; margin-top: 6px; }

/* ---- Sticky top bar ---- */
.lpf-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.lpf-brand img { display: block; height: 48px; width: auto; }
.lpf-footer__logo {
    display: block;
    height: 44px;
    width: auto;
    background: #fff;
    padding: 6px 10px;
    border-radius: 10px;
}

/* ---- Hero ---- */
.lpf-hero {
    position: relative;
    padding: 64px 0 56px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(900px 380px at 50% -8%, rgba(255, 210, 35, .28), transparent 70%),
        var(--bg);
}
.lpf-hero > .lpf-wrap { position: relative; z-index: 1; }
.lpf-hero__glow {
    position: absolute;
    top: -140px; left: 50%;
    width: 520px; height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 210, 35, .35), transparent 65%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
    animation: lpfDrift 14s ease-in-out infinite alternate;
}
/* Faint tech dot-grid behind the hero */
.lpf-hero::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(38, 166, 154, .14) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 50% 28%, #000, transparent 72%);
    mask-image: radial-gradient(circle at 50% 28%, #000, transparent 72%);
}
/* Drifting teal aurora blob */
.lpf-hero::after {
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    width: 360px; height: 360px; right: -60px; top: 30px;
    background: radial-gradient(circle, rgba(38, 166, 154, .20), transparent 65%);
    filter: blur(22px);
    animation: lpfDrift2 16s ease-in-out infinite alternate;
}
@keyframes lpfDrift {
    from { transform: translateX(-50%) translateY(0) scale(1); }
    to   { transform: translateX(-50%) translateY(22px) scale(1.12); }
}
@keyframes lpfDrift2 {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(30px) scale(1.16); }
}
/* Gentle glow pulse on the primary hero CTA */
.lpf-hero .lpf-btn--lg:not(.lpf-btn--ghost) { animation: lpfPulse 2.8s ease-in-out infinite; }
@keyframes lpfPulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(255, 210, 35, .35); }
    50%      { box-shadow: 0 10px 36px rgba(245, 168, 0, .60); }
}
.lpf-kicker {
    display: inline-block;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: .8rem;
    color: var(--teal-deep);
    background: rgba(38, 166, 154, .1);
    border: 1px solid rgba(38, 166, 154, .35);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.lpf-hero__title {
    font-size: clamp(2.4rem, 6.4vw, 4.4rem);
    margin-bottom: 18px;
}
.lpf-hero__sub {
    max-width: 680px;
    margin: 0 auto 30px;
    color: var(--muted);
    font-size: 1.12rem;
}
.lpf-hero__sub strong { color: var(--ink); }
.lpf-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lpf-hero__note { color: var(--muted); font-size: .9rem; }
/* Attribution line under a quote-as-headline (e.g. the UAIO hero). */
.lpf-hero__cite { margin: -8px 0 24px; color: var(--muted); font-size: 1rem; font-weight: 500; }
.lpf-hero__cite strong { color: var(--ink); }

.lpf-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    padding: 0;
    margin: 34px 0 0;
    color: var(--ink);
    font-weight: 500;
    font-size: .95rem;
}
.lpf-chips li { color: var(--teal-deep); }

/* ---- Two-column hero with product mockup ---- */
.lpf-hero__grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 46px;
    align-items: center;
    text-align: left;
}
.lpf-hero__grid .lpf-hero__title { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.lpf-hero__grid .lpf-hero__sub { margin-left: 0; margin-right: 0; }
.lpf-hero__grid .lpf-hero__cta { align-items: flex-start; }
/* Stack the two hero CTAs at equal width so they align cleanly. */
.lpf-hero__grid .lpf-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.lpf-hero__grid .lpf-cta-row .lpf-btn { width: 100%; max-width: 340px; text-align: center; }
.lpf-hero__grid .lpf-chips { justify-content: flex-start; }
.lpf-mock {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .16);
    transform: rotate(.6deg);
    transition: transform .3s ease, box-shadow .3s ease;
}
.lpf-mock:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 36px 70px rgba(0, 0, 0, .2); }
.lpf-mock__bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: #f4f2ef; border-bottom: 1px solid var(--line); }
.lpf-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7d2c9; }
.lpf-mock__shot { background: #fbfbfb; min-height: 200px; }
.lpf-mock__shot img { display: block; width: 100%; height: auto; }
.lpf-mock__cap { display: block; text-align: center; margin-top: 14px; color: var(--muted); font-size: .9rem; }
.lpf-mock__cap strong { color: var(--teal-deep); }

/* ---- Generic sections ---- */
.lpf-section { padding: 62px 0; }
.lpf-section--alt { background: var(--bg-alt); }
.lpf-h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); text-align: center; padding-bottom: 16px; }
.lpf-h2::after {
    content: "";
    display: block;
    width: 60px; height: 4px;
    border-radius: 2px;
    background: var(--teal);
    margin: 14px auto 0;
}
.lpf-lead {
    text-align: center;
    color: var(--muted);
    max-width: 640px;
    margin: 0 auto 38px;
    font-size: 1.06rem;
}

/* ---- Product cards ---- */
.lpf-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 14px;
}
.lpf-cards--3 { grid-template-columns: repeat(3, 1fr); }
.lpf-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px 26px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lpf-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .1); }
.lpf-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
}
.lpf-card--ai::before { background: linear-gradient(90deg, var(--teal), var(--teal-deep)); }
.lpf-card--gx::before { background: linear-gradient(90deg, var(--sun), var(--sun-deep)); }
.lpf-card--core::before { background: linear-gradient(90deg, var(--teal), var(--teal-deep)); }
.lpf-card--ai:hover { border-color: var(--teal); }
.lpf-card--gx:hover { border-color: var(--sun-deep); }
.lpf-card--core:hover { border-color: var(--teal); }
.lpf-card--core .lpf-card__icon { color: var(--teal-deep); }
.lpf-card__icon { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.lpf-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a1407;
    background: var(--sun);
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.lpf-card h3 { font-size: 1.3rem; }
.lpf-card h3 em { font-style: normal; color: var(--muted); font-weight: 500; }
.lpf-card p { color: var(--muted); margin: 0 0 14px; }
.lpf-card ul { margin: 0 0 18px; padding-left: 20px; color: var(--ink); }
.lpf-card ul li { margin-bottom: 6px; }
.lpf-link { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--teal-deep); }

/* ---- The full Unicus family (subject chips) ---- */
.lpf-family {
    margin-top: 46px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}
.lpf-family__intro {
    text-align: center;
    color: var(--muted);
    max-width: 680px;
    margin: 0 auto 26px;
}
.lpf-family__intro strong { color: var(--teal-deep); }
.lpf-family__head {
    text-align: center;
    font-size: .82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin: 8px 0 26px; /* bottom clears the featured badge (top:-10px) */
}
/* The first group heading sits right under the intro line — no extra top gap. */
.lpf-family__intro + .lpf-family__head { margin-top: 0; }
/* Second+ group headings: small, even gap above the heading. */
.lpf-subjects + .lpf-family__head { margin-top: 16px; }
.lpf-subjects {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.lpf-subject {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lpf-subject:hover {
    transform: translateY(-3px);
    border-color: var(--teal);
    box-shadow: 0 10px 24px rgba(38, 166, 154, .14);
}
.lpf-subject.is-featured {
    border-color: var(--teal);
    background: linear-gradient(180deg, rgba(38, 166, 154, .08), var(--surface));
    box-shadow: 0 8px 22px rgba(38, 166, 154, .16);
}
.lpf-subject__star {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--teal);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.lpf-subject__icon { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: 8px; }
.lpf-subject__name { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); }
.lpf-subject__code { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.lpf-allnote {
    margin-top: 30px;
    text-align: center;
    background: rgba(38, 166, 154, .1);
    border: 1px solid rgba(38, 166, 154, .3);
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 1.02rem;
}
.lpf-allnote strong { color: var(--teal-deep); }

/* ---- Why future skills (4-up) ---- */
.lpf-grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 10px;
}
.lpf-feature {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-feature span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    font-size: 1.7rem;
    border-radius: 50%;
    background: rgba(38, 166, 154, .12);
}
.lpf-feature h4 { margin: 14px 0 6px; font-size: 1.05rem; }
.lpf-feature p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ---- Steps ---- */
.lpf-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
.lpf-step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(38, 166, 154, .35);
}
.lpf-step h4 { margin: 0 0 6px; }
.lpf-step p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---- Trust band ---- */
.lpf-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 10px;
}
.lpf-trust__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sun);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-trust__item strong {
    display: block;
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.15rem;
    color: var(--teal-deep);
    margin-bottom: 4px;
}
.lpf-trust__item span { color: var(--muted); font-size: .92rem; }

/* ---- Form ---- */
.lpf-formwrap {
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(255, 210, 35, .22), transparent 70%),
        var(--bg-alt);
}
.lpf-formcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px 28px;
    margin-top: 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.lpf-form label {
    display: block;
    font-weight: 700;
    font-size: .88rem;
    margin: 14px 0 6px;
    color: var(--ink);
}
.lpf-form input,
.lpf-form select {
    width: 100%;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #d8d4cc;
    border-radius: 12px;
    color: var(--ink);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lpf-form input::placeholder { color: #a8a298; }
.lpf-form input:focus,
.lpf-form select:focus {
    outline: none;
    border-color: var(--sun-deep);
    box-shadow: 0 0 0 3px rgba(255, 210, 35, .28);
}
.lpf-form select option { color: #111; }
.lpf-turnstile { margin: 18px 0 6px; }
.lpf-fineprint { color: var(--muted); font-size: .82rem; text-align: center; margin: 14px 0 0; }
.lpf-alert {
    background: #fcecea;
    border: 1px solid var(--coral);
    color: #9a2c1f;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 22px 0 0;
    text-align: center;
}

/* ---- Inline client-side validation ---- */
.lpf-form .is-invalid {
    border-color: var(--coral) !important;
    box-shadow: 0 0 0 3px rgba(224, 90, 74, .16) !important;
}
.lpf-fielderr { display: block; color: var(--coral); font-size: .8rem; margin: 4px 0 2px; }

/* ---- Footer (dark, matches site footer) ---- */
.lpf-footer {
    position: relative;
    background: var(--footer);
    padding: 40px 0;
    text-align: center;
    color: #d8d2c8;
}
/* Wave divider: the dark footer rises into the light section above it. */
.lpf-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -37px;
    height: 38px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,22 Q300,0 600,18 T1200,15 L1200,40 Z' fill='%23131111'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.lpf-footer__logo { margin: 0 auto 16px; }
.lpf-footer__cta { font-size: 1.1rem; font-family: 'Baloo 2', sans-serif; font-weight: 600; margin: 0 0 14px; color: #fff; }
.lpf-footer__cta a { color: var(--sun); }
.lpf-footer__links { color: #b7b0a5; font-size: .9rem; margin: 0 0 10px; }
.lpf-footer__links a { color: #b7b0a5; }
.lpf-footer__copy { color: #7d766b; font-size: .82rem; margin: 0; }

/* ---- Ghost button (secondary CTA: Register) + CTA rows ---- */
.lpf-btn--ghost {
    background: transparent;
    color: var(--teal-deep);
    border: 2px solid var(--teal);
    box-shadow: none;
}
.lpf-btn--ghost:hover {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 10px 24px rgba(38, 166, 154, .32);
}
.lpf-bar__cta { display: flex; align-items: center; gap: 10px; }
.lpf-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

/* ---- Global-reach stat strip ---- */
.lpf-stats {
    padding: 30px 0 26px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.lpf-statbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 52px; }
.lpf-stat { text-align: center; }
.lpf-stat strong {
    display: block;
    font-family: 'Baloo 2', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--teal-deep);
}
.lpf-stat span { color: var(--muted); font-size: .9rem; }
.lpf-flags { text-align: center; margin-top: 20px; line-height: 1.9; }
.lpf-flags .fi {
    font-size: 1.5rem;          /* flag-icons sizes off font-size (1em tall) */
    margin: 4px 5px;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.lpf-flags em { display: block; margin-top: 12px; font-size: .85rem; color: var(--muted); font-style: normal; }

/* ---- Exam integrity + awards ---- */
.lpf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 14px; }
.lpf-half {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-subhead { font-size: 1.2rem; margin-bottom: 16px; }
.lpf-ticks, .lpf-awards { list-style: none; padding: 0; margin: 0; }
.lpf-ticks li { position: relative; padding-left: 32px; margin-bottom: 13px; color: var(--ink); }
.lpf-ticks li::before {
    content: "✓";
    position: absolute; left: 0; top: 1px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--teal); color: #fff;
    border-radius: 50%; font-size: .72rem; font-weight: 700;
}
.lpf-ticks li em { font-style: normal; color: var(--teal-deep); font-weight: 700; }
.lpf-awards li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; color: var(--ink); }
.lpf-awards li span { font-size: 1.4rem; line-height: 1.2; }

/* ---- Testimonials ---- */
.lpf-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 14px;
}
.lpf-quote {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    margin: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-quote__stars { color: var(--sun-deep); letter-spacing: 2px; margin-bottom: 10px; }
.lpf-quote blockquote { margin: 0 0 14px; padding: 0; border: 0; font-size: 1rem; color: var(--ink); line-height: 1.55; }
.lpf-quote figcaption { color: var(--muted); font-size: .9rem; font-weight: 700; }

/* ---- Careers of 2030 ---- */
.lpf-careercard {
    max-width: 760px;
    margin: 6px auto 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.lpf-careercard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.lpf-careercard__icon { font-size: 2.4rem; line-height: 1; }
.lpf-careercard__head h3 { margin: 0; font-size: 1.5rem; }
.lpf-careercard__head p { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.lpf-careertable { width: 100%; border-collapse: collapse; }
.lpf-careertable th {
    text-align: left;
    font-family: 'Baloo 2', sans-serif;
    font-size: .76rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 2px solid var(--line);
}
.lpf-careertable th:last-child { text-align: right; }
.lpf-careertable td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.lpf-careertable td:last-child { text-align: right; }
.lpf-careertable tr:last-child td { border-bottom: 0; }
.lpf-careertable tbody tr:hover { background: rgba(38, 166, 154, .05); }
.lpf-grow {
    display: inline-block;
    font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .8rem;
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.lpf-grow--hot { background: var(--sun); color: #1a1407; }
.lpf-grow--vhigh { background: rgba(38, 166, 154, .16); color: var(--teal-deep); }
.lpf-grow--high { background: rgba(38, 166, 154, .10); color: var(--teal-deep); }
.lpf-careercard__note { color: var(--muted); font-size: .92rem; margin: 18px 0 22px; text-align: center; }
.lpf-careercard__note strong { color: var(--teal-deep); }

/* ---- Back-to-top button ---- */
.lpf-totop {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 60;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: var(--teal); color: #fff;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    box-shadow: 0 8px 22px rgba(38, 166, 154, .4);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.lpf-totop:hover { background: var(--teal-deep); }
.lpf-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- Scroll-reveal (added by JS; absent => content stays visible) ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- Future quotes band ---- */
.lpf-quoteband {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    text-align: center;
    background: linear-gradient(120deg, rgba(255, 210, 35, .12), rgba(38, 166, 154, .14));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.lpf-fquote__mark {
    display: block;
    font-family: 'Baloo 2', sans-serif;
    font-size: 4.5rem; line-height: .5;
    color: var(--sun-deep);
    opacity: .55;
    margin-bottom: 4px;
}
.lpf-fquote { position: relative; display: grid; }
.lpf-fquote__item {
    grid-area: 1 / 1;
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
}
.lpf-fquote__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lpf-fquote__item blockquote {
    margin: 0; padding: 0; border: 0;
    font-family: 'Baloo 2', sans-serif; font-weight: 600;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.4;
    color: var(--ink);
}
.lpf-fquote__item figcaption { margin-top: 14px; color: var(--teal-deep); font-weight: 700; letter-spacing: .4px; }
/* Testimonials are longer than the pithy quotes — smaller, lighter, body font. */
.lpf-quoteband--t .lpf-fquote__item blockquote {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.6;
}
.lpf-fquote__dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.lpf-fquote__dots span {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(38, 166, 154, .3);
    transition: background .3s ease, transform .3s ease;
}
.lpf-fquote__dots span.is-active { background: var(--teal); transform: scale(1.3); }

/* ---- UGXO LP: grade picker + round meta (used by landing/ugxo.php) ---- */
.lpf-gradegrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 14px;
}
.lpf-gradechip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.lpf-gradechip:hover,
.lpf-gradechip:focus-visible {
    transform: translateY(-3px);
    border-color: var(--sun-deep);
    background: rgba(255, 210, 35, .12);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .1);
}
.lpf-round-meta {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    color: var(--teal-deep) !important;
    font-weight: 500;
    font-size: .88rem !important;
}

/* ---- Evidence band: cited third-party facts + pull-quotes (UGXO/UAIO LPs).
   auto-fit so 2 or 3 cards both balance. ---- */
.lpf-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 16px;
}
.lpf-evidence__stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-evidence__num {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    line-height: 1.05;
    color: var(--teal-deep);
}
.lpf-evidence__stat p { margin: 10px 0 14px; color: var(--ink); }
.lpf-evidence__src {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}
.lpf-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 22px;
}
.lpf-pullquote {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sun-deep);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.lpf-pullquote blockquote {
    margin: 0 0 12px;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
}
.lpf-pullquote cite { font-style: normal; color: var(--muted); font-size: .9rem; }
.lpf-pullquote cite strong { color: var(--ink); }

/* ---- Respect reduced-motion: kill all motion, keep everything visible ---- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .lpf-hero__glow, .lpf-hero::after,
    .lpf-hero .lpf-btn--lg:not(.lpf-btn--ghost) { animation: none !important; }
    .lpf-fquote__item { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .lpf-hero__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .lpf-hero__grid .lpf-hero__sub { margin-left: auto; margin-right: auto; }
    .lpf-hero__grid .lpf-hero__cta { align-items: center; }
    .lpf-hero__grid .lpf-cta-row { align-items: center; }
    .lpf-hero__grid .lpf-chips { justify-content: center; }
    .lpf-hero__media { max-width: 600px; margin: 8px auto 0; }
}
@media (max-width: 860px) {
    .lpf-grid4, .lpf-trust { grid-template-columns: repeat(2, 1fr); }
    .lpf-subjects { grid-template-columns: repeat(3, 1fr); }
    .lpf-cards--3 { grid-template-columns: repeat(2, 1fr); }
    .lpf-split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    body.lpf { font-size: 16px; }
    .lpf-cards, .lpf-steps { grid-template-columns: 1fr; }
    .lpf-hero { padding: 46px 0 40px; }
    .lpf-section { padding: 46px 0; }
    .lpf-statbar { gap: 14px 30px; }
    .lpf-stat strong { font-size: 1.7rem; }
    .lpf-flags { line-height: 1.7; }
    .lpf-flags .fi { font-size: 1.25rem; margin: 3px 4px; }
    .lpf-careercard { padding: 22px 16px; }
    .lpf-careercard__head h3 { font-size: 1.3rem; }
    .lpf-careertable { font-size: .92rem; }
    .lpf-careertable th, .lpf-careertable td { padding: 11px 8px; }
    .lpf-grow { font-size: .72rem; padding: 3px 9px; }
    .lpf-totop { bottom: 16px; right: 16px; }
}
@media (max-width: 420px) {
    .lpf-grid4, .lpf-trust, .lpf-subjects { grid-template-columns: repeat(2, 1fr); }
    .lpf-statbar { gap: 12px 22px; }
    .lpf-stat strong { font-size: 1.5rem; }
    .lpf-flags .fi { font-size: 1.08rem; margin: 3px; }
}

/* ==========================================================================
   Per-subject ad landing pages (/future-maths, /future-science, /future-english)
   Shared view: landing/future_subject.php. Each subject keeps the proven yellow
   --sun primary CTA (conversion-safe brand button) and re-themes only the
   SECONDARY accent (--teal / --teal-deep) so the page reads clearly as Maths,
   Science or English without touching /future, /future-ai or /future-extempore.
   The paid "Register" CTA uses .lpf-btn--accent (the subject accent) to sit
   distinct from the yellow "Free Trial" button.
   ========================================================================== */
/* Accents are drawn from the Unicus brand palette (the homepage feature-card
   colours): steel-blue, green and coral — NOT arbitrary hues. Each --teal value
   is dark enough to carry WHITE button/heading text (WCAG AA large ≥3:1); the
   paired --teal-deep is a darker shade used for small text/links on white
   (≥4.5:1). The yellow --sun primary CTA is unchanged, so every page stays
   yellow-primary + a brand secondary accent. */
.lpf--maths   { --teal: #437ba3; --teal-deep: #2f5c7d; }   /* Unicus blue  */
.lpf--science { --teal: #0b9d54; --teal-deep: #077038; }   /* Unicus green */
.lpf--english { --teal: #e0503f; --teal-deep: #b23524; }   /* Unicus coral */

/* Solid "Register" CTA in the subject accent — stands apart from the yellow
   (.lpf-btn) free-trial CTA. Uses the Unicus yellow-on-colour combo.
   NOTE: these CTAs are <a> elements, and `.lpf a` (class+element) outranks a
   single `.lpf-btn--accent` class, so we raise specificity with
   `a.lpf-btn--accent` — otherwise the label falls back to the dark --teal-deep
   link colour (was showing as unreadable dark text on the coloured button).
   Background uses the DEEP accent shade so the yellow label stays legible
   (yellow on the deep shades is 4–4.9:1; on the mid shades only ~2.4:1). */
.lpf a.lpf-btn--accent,
.lpf-btn--accent {
    background: var(--teal-deep);
    color: #ffd223;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.lpf a.lpf-btn--accent:hover,
.lpf-btn--accent:hover {
    background: var(--teal-deep);
    color: #ffe25a;
    filter: brightness(1.07);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

/* "Meet our rank holders" strip — social-proof gallery before the final CTA.
   Square photos (supply ~480x480) in an accent-ringed frame; 4 across on desktop,
   2 on tablet/mobile. Renders only when $subject['rankers'] is populated. */
.lpf-rankgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 12px; }
.lpf-ranker { margin: 0; text-align: center; }
.lpf-ranker__photo {
    width: 100%; max-width: 240px; margin: 0 auto; aspect-ratio: 1 / 1;
    border-radius: 16px; overflow: hidden; background: var(--bg-alt);
    border: 3px solid var(--teal); box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}
.lpf-ranker__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpf-ranker__ph { width: 58%; height: 58%; margin: 21% auto 0; display: block; fill: none; stroke: var(--teal); stroke-width: 1.3; opacity: .5; }
.lpf-ranker figcaption { margin-top: 12px; }
.lpf-ranker figcaption strong { display: block; font-family: 'Baloo 2', sans-serif; font-size: 1.05rem; color: var(--ink); }
.lpf-ranker figcaption span { color: var(--teal-deep); font-weight: 700; font-size: .9rem; }
@media (max-width: 860px) { .lpf-rankgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .lpf-rankgrid { gap: 16px; } }

/* "Two ways to start" band — pairs the paid Register path with the free trial. */
.lpf-startband { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lpf-startgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.lpf-startcard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; text-align: center;
}
.lpf-startcard h3 { font-size: 1.3rem; margin-bottom: 6px; }
.lpf-startcard p { color: var(--muted); margin: 0 0 16px; }
.lpf-startcard--paid { border-color: var(--teal); }
@media (max-width: 680px) { .lpf-startgrid { grid-template-columns: 1fr; } }