/* ── Landing Page – the app's own playful DNA, turned up ───
   Nunito everywhere (like the app), cream paper, vivid blue,
   amber and green. Chunky tactile buttons, a live generator
   demo, a rolling subject ticker, cards that never sit still. */

#landing-view {
    --lp-paper: #f5efe7;
    --lp-card: #fffdf8;
    --lp-ink: #1e1b2e;
    --lp-ink-soft: #6b6580;
    --lp-line: rgba(30, 27, 46, 0.12);
    --lp-blue: #3660ff;
    --lp-blue-dark: #2448d8;
    --lp-navy: #1a1a2e;
    --lp-amber: #f4b447;
    --lp-green: #00c78d;
    --lp-green-deep: #0d8a66;
    --lp-purple: #8657d1;
    --lp-red: #b14637;
    --lp-sky: #0ea5e9;        /* BlueAcorn Education brand blue */
    --lp-sky-dark: #0284c7;

    position: relative;
    min-height: 100vh;
    background: var(--lp-paper);
    color: var(--lp-ink);
    font-family: "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Paper grain */
#landing-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
#landing-view > * { position: relative; z-index: 1; }

.lp-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Headings ────────────────────────────────────────── */
.lp-h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}
.lp-h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 0;
}

/* Amber swash under a key word */
.lp-swash {
    background-image: linear-gradient(100deg,
        rgba(244, 180, 71, 0) 2%,
        rgba(244, 180, 71, 0.7) 10%,
        rgba(244, 180, 71, 0.7) 90%,
        rgba(244, 180, 71, 0) 98%);
    background-repeat: no-repeat;
    background-size: 100% 38%;
    background-position: 0 88%;
    padding: 0 0.1em;
}

/* ── Chunky tactile buttons ──────────────────────────── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 12px 26px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 4px 0 var(--lp-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--lp-ink);
}
.lp-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--lp-ink);
}
/* Tapped before app.js had arrived to answer it (see the inline script above
   #landing-view): pressed down and waiting, so the tap visibly registered. */
.lp-btn.is-waiting {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--lp-ink);
    cursor: progress;
}
.lp-btn-lg { padding: 15px 32px; font-size: 1.05rem; }
.lp-btn-sm { padding: 8px 18px; font-size: 0.85rem; box-shadow: 0 3px 0 var(--lp-ink); }

.lp-btn-blue  { background: var(--lp-blue);  color: #fff; }
.lp-btn-blue:hover { background: var(--lp-blue-dark); }
.lp-btn-purple { background: var(--lp-purple); color: #fff; }
.lp-btn-purple:hover { background: #7343c2; }
.lp-btn-amber { background: var(--lp-amber); color: var(--lp-ink); }
.lp-btn-amber:hover { background: #ffc95e; }
.lp-btn-ghost { background: var(--lp-card); color: var(--lp-ink); }

/* ── Nav ─────────────────────────────────────────────── */
.lp-nav { padding: 18px 0; z-index: 10 !important; }
.lp-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.22rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.lp-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--lp-blue);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 5px 14px rgba(54, 96, 255, 0.4);
    transform: rotate(-4deg);
    transition: transform 0.2s ease;
}
.lp-logo:hover .lp-logo-mark { transform: rotate(4deg) scale(1.06); }
.lp-nav-actions { display: flex; gap: 12px; align-items: center; }

/* BlueAcorn link – quiet, landing-styled */
.lp-nav-ba {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; margin-right: 4px;
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--lp-muted, #6b6257); text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.lp-nav-ba svg { flex-shrink: 0; }
.lp-nav-ba svg:last-child { opacity: 0.55; }
.lp-nav-ba:hover { background: rgba(0,0,0,0.05); color: var(--lp-text, #2b2620); }

/* ── Hero ────────────────────────────────────────────── */
.lp-hero { padding: 56px 0 72px; }
.lp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.lp-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-blue);
    background: rgba(54, 96, 255, 0.1);
    border: 1.5px solid rgba(54, 96, 255, 0.25);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}

/* rotating word: all words share one grid cell */
.lp-flip {
    display: inline-grid;
    vertical-align: baseline;
    perspective: 500px;
}
.lp-flip-word {
    grid-area: 1 / 1;
    display: inline-block;
    padding: 0.02em 0.32em 0.08em;
    border-radius: 0.3em;
    transform: rotate(-2deg) rotateX(90deg);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
    width: max-content;
}
.lp-flip-word.is-in {
    transform: rotate(-2deg) rotateX(0deg);
    opacity: 1;
}
.lp-flip-word.is-blue   { background: var(--lp-blue);   color: #fff; }
.lp-flip-word.is-green  { background: var(--lp-green);  color: var(--lp-ink); }
.lp-flip-word.is-amber  { background: var(--lp-amber);  color: var(--lp-ink); }
.lp-flip-word.is-purple { background: var(--lp-purple); color: #fff; }

.lp-sub {
    margin: 22px 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--lp-ink-soft);
    max-width: 460px;
}
.lp-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.lp-hero-note {
    margin: 18px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}

/* ── Oxford University Incubator backing ─────────────── */
.lp-backed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 30px;
}
.lp-backed-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
    white-space: nowrap;
}
.lp-backed-logo {
    height: 42px;
    width: auto;
    display: block;
}

/* ── Generator demo ──────────────────────────────────── */
.lp-demo { position: relative; }

.lp-sticker {
    position: absolute;
    top: -16px;
    right: 10px;
    z-index: 2;
    background: var(--lp-amber);
    color: var(--lp-ink);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 3px 0 var(--lp-ink);
    transform: rotate(4deg);
}

.lp-demo-window {
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 20px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    overflow: hidden;
    transform: rotate(1.2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-demo:hover .lp-demo-window {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 10px 12px 0 rgba(30, 27, 46, 0.9);
}

.lp-demo-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--lp-ink);
    background: var(--lp-paper);
}
.lp-demo-bar span {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-ink);
}
.lp-demo-bar span:nth-child(1) { background: var(--lp-red); }
.lp-demo-bar span:nth-child(2) { background: var(--lp-amber); }
.lp-demo-bar span:nth-child(3) { background: var(--lp-green); }
.lp-demo-bar em {
    margin-left: 8px;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
}

.lp-demo-body { padding: 20px; }
.lp-demo-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
    margin-bottom: 7px;
}
.lp-demo-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid rgba(30, 27, 46, 0.18);
    border-radius: 12px;
    padding: 11px 14px;
    font-weight: 800;
    font-size: 0.98rem;
    min-height: 46px;
}
.lp-caret {
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    background: var(--lp-blue);
    animation: lpBlink 0.9s steps(2) infinite;
}
@keyframes lpBlink { 50% { opacity: 0; } }

.lp-demo-meta {
    display: flex;
    gap: 8px;
    margin: 12px 0 14px;
    flex-wrap: wrap;
}
.lp-chip {
    font-size: 0.74rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
}
.lp-chip-blue  { background: rgba(54, 96, 255, 0.12);  color: var(--lp-blue-dark); }
.lp-chip-green { background: rgba(0, 199, 141, 0.16);  color: var(--lp-green-deep); }
.lp-chip-amber { background: rgba(244, 180, 71, 0.25); color: #8a6210; }

.lp-demo-btn {
    display: inline-flex;
    align-items: center;
    background: var(--lp-blue);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 9px 22px;
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--lp-blue-dark);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lp-demo-btn.is-pressed {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--lp-blue-dark);
}

.lp-demo-slides {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.lp-mini {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--lp-navy) 0%, #2a3a8f 60%, var(--lp-blue) 100%);
    padding: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transform: scale(0.6) rotate(-4deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.lp-mini.is-in {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.lp-mini b {
    font-size: 0.5rem;
    font-weight: 900;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lp-mini u {
    display: block;
    text-decoration: none;
    height: 6px;
    width: 62%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    margin-bottom: 2px;
}
.lp-mini span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
}

/* ── Ticker ──────────────────────────────────────────── */
.lp-ticker {
    background: var(--lp-blue);
    padding: 13px 0;
    margin: 8px -2% 0;
    width: 104%;
    transform: rotate(-1.2deg);
    border-top: 2px solid var(--lp-ink);
    border-bottom: 2px solid var(--lp-ink);
    overflow: hidden;
}
.lp-ticker-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: lpScroll 30s linear infinite;
}
.lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
.lp-ticker-track span {
    flex-shrink: 0;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 5px 15px;
    border-radius: 999px;
}
@keyframes lpScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--lp-ticker-shift, -50%)); }   /* one copy, set by landing.js */
}

/* ── Steps ───────────────────────────────────────────── */
.lp-steps { padding: 84px 0 30px; }
.lp-steps-row {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.lp-step { flex: 1; text-align: center; }
.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 900;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 4px 0 var(--lp-ink);
    margin-bottom: 16px;
    transform: rotate(-4deg);
    transition: transform 0.2s ease;
}
.lp-step:hover .lp-step-num { transform: rotate(4deg) scale(1.08); }
.n-blue  { background: var(--lp-blue);  color: #fff; }
.n-green { background: var(--lp-green); color: var(--lp-ink); }
.n-amber { background: var(--lp-amber); color: var(--lp-ink); }

.lp-step h3 {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0 0 8px;
}
.lp-step p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.lp-step-arrow {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--lp-ink);
    opacity: 0.35;
    padding-top: 12px;
}

/* ── Feature cards ───────────────────────────────────── */
/* ── Marketplace showcase ────────────────────────────── */
.lp-market { padding: 72px 0 40px; }
.lp-market[hidden] { display: none; }
.lp-market .lp-h2 { text-align: center; }
.lp-market-sub {
    max-width: 56ch;
    margin: 12px auto 0;
    text-align: center;
    color: var(--lp-ink-soft);
    font-size: 1.02rem;
}

/* Full-bleed so the strip runs off both edges – that overflow is what makes it
   read as a shelf that continues, rather than a row that ended. */
.lp-market-rail {
    margin-top: 34px;
    overflow: hidden;
    /* Fades the cut edges instead of slicing a card in half. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.lp-market-track {
    display: flex;
    gap: 18px;
    width: max-content;
    /* Vertical only. Horizontal padding would be counted in the track width
       but not in the shift, which is what made the loop seam drift. */
    padding: 4px 0;
}
/* Shifts by exactly one copy's pitch, measured in landing.js – see the note
   there. A percentage cannot express that, because the track is a whole number
   of copies rather than exactly two halves. */
.lp-market-track.is-looping {
    animation: lpMarquee linear infinite;
    animation-duration: 40s;   /* replaced inline once the pitch is known */
    will-change: transform;
}
@keyframes lpMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--marquee-shift, 100%)), 0, 0); }
}
/* Deliberately no pause on hover – it keeps moving under the cursor. Focus is
   different: a keyboard user tabbing onto a card would otherwise have it slide
   out from under them. */
.lp-market-track.is-looping:focus-within { animation-play-state: paused; }

.lp-market-card {
    flex-shrink: 0;
    width: 250px;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--lp-line);
    border-radius: 16px;
    background: var(--lp-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp-market-card:hover {
    transform: translateY(-4px);
    border-color: var(--lp-ink);
    box-shadow: 0 6px 0 var(--lp-ink);
}
.lp-market-card:focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 3px; }

.lp-market-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--lp-paper);
    border-bottom: 2px solid var(--lp-line);
}
/* Authored at 960x540 and scaled to fit by landing.js.
   The default scale is the card's own width over 960 (250px card less its 2px
   borders = 246). JS overwrites it with the measured value, but this way a
   slide is never briefly rendered at 1:1 – which showed a zoomed corner of the
   first slide if the strip was built before the page had a layout. */
.lp-market-slide {
    position: absolute;
    top: 0; left: 0;
    width: 960px;
    height: 540px;
    transform: scale(0.2563);
    transform-origin: top left;
    pointer-events: none;
    user-select: none;
}
.lp-market-count {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(30, 27, 46, 0.78);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
}

.lp-market-body { padding: 12px 13px 13px; }
.lp-market-body h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.32;
    /* Two lines, so cards in the row stay the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp-market-meta,
.lp-market-uses {
    margin: 4px 0 0;
    font-size: 0.76rem;
    color: var(--lp-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-market-uses { font-weight: 800; color: var(--lp-blue); }

.lp-market-foot { margin-top: 30px; text-align: center; }

/* No animation: the rail becomes a normal scrollable row, which keyboard and
   touch users can move at their own pace. */
@media (prefers-reduced-motion: reduce) {
    .lp-market-track.is-looping { animation: none; }
    .lp-market-rail { overflow-x: auto; }
    .lp-market-card { transition: none; }
    .lp-market-card:hover { transform: none; }
}

.lp-features { padding: 80px 0 40px; }
.lp-features .lp-h2 { text-align: center; margin-bottom: 48px; }
/* Four across needs more room than the standard container gives, so this
   row alone runs wider – otherwise each card is squeezed to a column. */
.lp-features .lp-container { max-width: 1240px; }

/* Four abreast while the room is there, then 2×2, then stacked. */
.lp-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1000px) {
    .lp-cards { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
    .lp-cards { grid-template-columns: 1fr; }
}
.lp-card {
    /* Column so the tag can be pinned to the bottom: the blurbs differ in
       length, and left to flow the pills landed at four different heights. */
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border: 2px solid var(--lp-ink);
    padding: 20px 20px 24px;
    box-shadow: 6px 6px 0 rgba(30, 27, 46, 0.9);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 8px 12px 0 rgba(30, 27, 46, 0.9);
}
.lp-card-blue   { background: #e6ecff; }
.lp-card-green  { background: #ddf6ec; }
.lp-card-amber  { background: #fdeecd; }
.lp-card-purple { background: #efe4fb; }

.lp-card h3 {
    font-size: 1.3rem;
    font-weight: 900;
    margin: 0 0 10px;
}
.lp-card p {
    margin: 0 0 16px;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.65;
    color: #4a4560;
}
.lp-card-tag {
    display: inline-block;
    align-self: flex-start;   /* hug the text rather than stretching */
    margin-top: auto;         /* all four pills line up along the bottom */
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(30, 27, 46, 0.2);
    padding: 5px 12px;
    border-radius: 999px;
}

/* vignettes – always in motion */
.lp-vig {
    height: 150px;
    flex-shrink: 0;   /* keep its full height as a flex child of the card */
    border-radius: 16px;
    background: var(--lp-card);
    border: 2px solid rgba(30, 27, 46, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    overflow: hidden;
}

/* slides vignette */
.lp-vig-slide {
    width: 84%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--lp-navy) 0%, #2a3a8f 60%, var(--lp-blue) 100%);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}
.lp-vig-slide b {
    height: 12px;
    width: 55%;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    animation: lpBarGrow 3.2s ease-in-out infinite;
}
.lp-vig-slide span {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    animation: lpBarGrow 3.2s ease-in-out infinite;
}
.lp-vig-slide span:nth-child(2) { width: 80%; animation-delay: 0.3s; }
.lp-vig-slide span:nth-child(3) { width: 58%; animation-delay: 0.6s; }
@keyframes lpBarGrow {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50%      { transform: scaleX(0.55); opacity: 0.7; }
}
.lp-vig-slide b, .lp-vig-slide span { transform-origin: left center; }

/* checklist vignette */
.lp-vig-check {
    width: 74%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.lp-vrow { display: flex; align-items: center; gap: 12px; }
.lp-vbox {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border: 2.5px solid var(--lp-green-deep);
    border-radius: 7px;
    position: relative;
}
.lp-vbox::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--lp-green-deep);
    opacity: 0;
    animation: lpTick 5.4s ease infinite;
}
.lp-vrow:nth-child(1) .lp-vbox::after { animation-delay: 0s; }
.lp-vrow:nth-child(2) .lp-vbox::after { animation-delay: 1.8s; }
.lp-vrow:nth-child(3) .lp-vbox::after { animation-delay: 3.6s; }
@keyframes lpTick {
    0%, 6%   { opacity: 0; transform: scale(0.4); }
    12%, 72% { opacity: 1; transform: scale(1); }
    82%, 100%{ opacity: 0; transform: scale(0.4); }
}
.lp-vrow u {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: rgba(30, 27, 46, 0.14);
    text-decoration: none;
}

/* quiz bars vignette */
.lp-vig-quiz {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 96px;
}
.lp-qbar {
    width: 28px;
    border-radius: 7px 7px 3px 3px;
    transform-origin: bottom center;
    animation: lpQBar 2.8s ease-in-out infinite;
}
.lp-qbar.q1 { height: 58%; background: var(--lp-blue); }
.lp-qbar.q2 { height: 92%; background: var(--lp-green); animation-delay: 0.35s; }
.lp-qbar.q3 { height: 40%; background: var(--lp-amber); animation-delay: 0.7s; }
.lp-qbar.q4 { height: 74%; background: var(--lp-red);   animation-delay: 1.05s; }
@keyframes lpQBar {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.45); }
}

/* marking vignette: a written answer that picks up margin ticks where it
   earns credit, then gets stamped with a mark out of ten. Prose lines, not
   a checklist – this marks essays, not multiple choice. */
.lp-vig-mark {
    position: relative;
    width: 80%;
    padding: 12px 12px 14px;
    border-radius: 9px;
    background: #fff;
    border: 2px solid rgba(30, 27, 46, 0.14);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-vmline {
    display: flex;
    align-items: center;
    gap: 5px;
}
.lp-vmline u {
    display: block;
    height: 6px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(30, 27, 46, 0.16);
    text-decoration: none;
}

/* Highlighter passes over the phrases that earned, missed or lost credit –
   the same green / amber / red the marker uses on a real answer. */
.lp-hl { position: relative; }
.lp-hl::after {
    content: '';
    position: absolute;
    inset: -3px -3px -4px;
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    animation-duration: 5.4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
/* Colour says what the marker found; landing.js picks it to match the mark. */
.hl-credit::after { background: rgba(0, 199, 141, 0.5);  border-bottom: 2px solid var(--lp-green); }
.hl-gap::after    { background: rgba(244, 180, 71, 0.55); border-bottom: 2px solid var(--lp-amber); }
.hl-off::after    { background: rgba(177, 70, 55, 0.32);  border-bottom: 2px solid var(--lp-red); }

/* Order is separate from colour so the sweep always reads down the page,
   whichever colours happen to land on which lines. Each position keeps its
   own keyframes rather than sharing one set with a delay: a delay would push
   the last highlight's fade past the loop, so it would still be clearing as
   the next pass started drawing. */
.hl-1::after { animation-name: lpMarkHlA; }
.hl-2::after { animation-name: lpMarkHlB; }
.hl-3::after { animation-name: lpMarkHlC; }
@keyframes lpMarkHlA {
    0%, 4%    { transform: scaleX(0); opacity: 1; }
    12%, 84%  { transform: scaleX(1); opacity: 1; }
    92%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes lpMarkHlB {
    0%, 13%   { transform: scaleX(0); opacity: 1; }
    21%, 84%  { transform: scaleX(1); opacity: 1; }
    92%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes lpMarkHlC {
    0%, 22%   { transform: scaleX(0); opacity: 1; }
    30%, 84%  { transform: scaleX(1); opacity: 1; }
    92%, 100% { transform: scaleX(1); opacity: 0; }
}

.lp-vmstamp {
    position: absolute;
    right: -14px;
    bottom: -17px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--lp-purple);
    color: #fff;
    /* grid so the score + "/10" group centres as one unit, while still
       sharing a baseline – flex baseline alignment sat it off-centre. */
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    align-items: baseline;
    gap: 1px;
    line-height: 1;
    font-size: 1.02rem;
    font-weight: 900;
    box-shadow: 0 3px 0 rgba(30, 27, 46, 0.16);
    opacity: 0;
    animation: lpMarkStamp 5.4s ease infinite;
}
.lp-vmof { font-size: 0.56rem; opacity: 0.85; }
@keyframes lpMarkStamp {
    0%, 32%   { opacity: 0; transform: rotate(-18deg) scale(1.75); }
    44%, 84%  { opacity: 1; transform: rotate(-9deg) scale(1); }
    92%, 100% { opacity: 0; transform: rotate(-9deg) scale(0.85); }
}

/* ── SEND and accessibility band ───────────────────────
   Same construction as the BlueAcorn panel below (bordered slab, hard shadow,
   two columns) so it reads as a peer section, in a warmer neutral rather than
   the sky blue that belongs to the platform tie-in. */
/* ── SEND and accessibility band ───────────────────────
   Built like the BlueAcorn panel below – bordered slab, hard offset shadow,
   two columns – because that is this page's established shape for a big
   feature band, and this is one. Mint rather than sky blue, which belongs to
   the platform tie-in.

   The demo is a diagram, not a control: one worksheet at the top, three
   sheets coming out of it, each set in the layout it names. Seeing the three
   at once IS the argument – an earlier pass put them behind tabs, which hid
   two thirds of the point behind a click nobody has a reason to make. */
.lp-sen-wrap { padding: 70px 0 0; }
.lp-sen {
    background: linear-gradient(150deg, #eafaf1 0%, #d3f2e2 100%);
    border-radius: 32px;
    border: 2px solid var(--lp-ink);
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    color: var(--lp-ink);
}
.lp-sen .lp-h2 { margin-bottom: 16px; }
/* The highlighter mark the hero and the feature heading already use, so the
   emphasis here is in the page's own voice rather than a new device. */
.lp-sen .lp-h2 em { font-style: normal; }

.lp-sen-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-green-deep);
    background: #fff;
    border: 1.5px solid rgba(13, 138, 102, 0.4);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.lp-sen-sub {
    margin: 0 0 20px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}

.lp-sen-kicker {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
}

/* The generation options as a checklist, ticked in the same red pen that
   marks up the rest of the page – four short noun phrases read at a glance,
   and a tick says "yours for the asking" better than a pill does. */
.lp-sen-checks {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 10px 22px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.lp-sen-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--lp-ink);
}
.lp-sen-box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--lp-ink);
    border-radius: 6px;
    box-shadow: 2px 2px 0 var(--lp-ink);
}
.lp-sen-box .lp-pen-ink {
    left: 2px;
    top: -3px;
    width: 18px;
    height: 18px;
    stroke-width: 2.8;
}
.lp-sen-checks li:nth-child(2) .lp-pen-ink path { transition-delay: 0.45s; }
.lp-sen-checks li:nth-child(3) .lp-pen-ink path { transition-delay: 0.65s; }
.lp-sen-checks li:nth-child(4) .lp-pen-ink path { transition-delay: 0.85s; }

.lp-sen-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--lp-ink);
    text-decoration: none;
    border-bottom: 2.5px solid var(--lp-ink);
    padding-bottom: 3px;
    transition: gap var(--duration-quick, 0.12s) var(--ease-smooth-out, ease),
                color var(--duration-quick, 0.12s) var(--ease-smooth-out, ease);
}
.lp-sen-link:hover { gap: 12px; color: var(--lp-green-deep); }
.lp-sen-link:focus-visible { outline: 3px solid var(--lp-green-deep); outline-offset: 4px; }

/* ── The hand of sheets ──────────────────────────────── */
/* Four A4 sheets, the same question on each, set four ways. They start
   stacked as one sheet and fan out like a hand of cards as the band arrives
   (.is-fanned, from landing-flair.js), then take turns being picked up
   (.is-up). The fan is the argument: one sheet, every reader. */
.lp-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lp-hand-fan {
    position: relative;
    width: 100%;
    height: 360px;
}
.lp-sheet {
    --x: 0px; --r: 0deg; --y: 0px; --lift: 0px;
    --sh-font: Georgia, "Times New Roman", serif;
    --sh-size: 0.66rem;
    --sh-lh: 1.45;
    --sh-track: normal;
    --sh-paper: #fff;

    position: absolute;
    left: 50%;
    bottom: 44px;
    width: 176px;
    height: 250px;
    margin-left: -88px;
    padding: 30px 14px 14px;
    overflow: hidden;
    background: var(--sh-paper);
    border: 2px solid var(--lp-ink);
    border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(30, 27, 46, 0.85);
    font-family: var(--sh-font);
    font-size: var(--sh-size);
    line-height: var(--sh-lh);
    letter-spacing: var(--sh-track);
    color: var(--lp-ink);
    transform-origin: 50% 135%;
    transform: translate(var(--x), calc(var(--y) + var(--lift))) rotate(var(--r));
    transition: transform 0.7s cubic-bezier(0.34, 1.35, 0.64, 1), box-shadow 0.3s ease;
}
.lp-hand-fan.is-fanned .lp-sheet:nth-child(1) { --x: -114px; --r: -10deg; --y: 12px; }
.lp-hand-fan.is-fanned .lp-sheet:nth-child(2) { --x: -38px;  --r: -3.5deg; --y: 2px; transition-delay: 0.06s; }
.lp-hand-fan.is-fanned .lp-sheet:nth-child(3) { --x: 38px;   --r: 3.5deg; --y: 2px; transition-delay: 0.12s; }
.lp-hand-fan.is-fanned .lp-sheet:nth-child(4) { --x: 114px;  --r: 10deg;  --y: 12px; transition-delay: 0.18s; }
/* Picked up: slid straight up out of the hand, keeping its place in the
   stack – bringing it to the front made it jump over its neighbours. Which
   sheet is up is chosen by landing-flair.js from the pointer's position
   across the hand, not by :hover, which flickered between two sheets as the
   lifted one moved out from under the pointer. */
.lp-hand-fan.is-fanned .lp-sheet.is-up {
    --lift: -34px;
    transition-delay: 0s;
}

.lp-sheet-tab {
    position: absolute;
    top: 8px;
    left: 10px;
    font-family: "Nunito", sans-serif;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--lp-ink);
    background: var(--lp-amber);
    border: 1.5px solid var(--lp-ink);
    border-radius: 999px;
    padding: 3px 7px;
    white-space: nowrap;
}
.lp-sheet-head {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-bottom: 10px;
    font-family: "Nunito", sans-serif;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
    letter-spacing: 0;
}
.lp-sheet-head u {
    flex: 1;
    height: 0;
    border-bottom: 1.5px solid rgba(30, 27, 46, 0.3);
    margin-bottom: 2px;
}
.lp-sheet-q { margin: 0 0 8px; }
.lp-sheet-q b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    margin-right: 5px;
    border: 1.5px solid var(--lp-blue);
    border-radius: 50%;
    font-family: "Nunito", sans-serif;
    font-size: 0.85em;
    color: var(--lp-blue);
    vertical-align: 0.05em;
}
.lp-sheet-opts {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.lp-sheet-opts li { display: flex; align-items: center; gap: 6px; }
.lp-sheet-opts i {
    flex: none;
    width: 0.8em;
    height: 0.8em;
    border: 1.5px solid rgba(30, 27, 46, 0.55);
    border-radius: 50%;
}
.lp-sheet-rule {
    height: 0;
    margin-top: 14px;
    border-bottom: 1.5px solid rgba(30, 27, 46, 0.18);
}

/* Matching what worksheet-print.css actually prints. */
.lp-sheet[data-layout="dyslexia"] {
    --sh-font: "OpenDyslexic", Verdana, Arial, sans-serif;
    --sh-size: 0.6rem;
    --sh-lh: 1.85;
    --sh-track: 0.03em;
    --sh-paper: #fdf8ea;
}
.lp-sheet[data-layout="dyslexia"] .lp-sheet-tab { background: var(--lp-green); }
.lp-sheet[data-layout="large-print"] {
    --sh-font: Verdana, Arial, sans-serif;
    --sh-size: 0.86rem;
    --sh-lh: 1.45;
    --sh-paper: #fdf6e3;
}
.lp-sheet[data-layout="large-print"] .lp-sheet-tab { background: var(--lp-card); }
.lp-sheet[data-layout="coloured"] { --sh-paper: #dcebff; }
.lp-sheet[data-layout="coloured"] .lp-sheet-tab { background: #fff; }

.lp-hand-note {
    margin: 0;
    transform: rotate(-2deg);
}
.lp-hand-note .lp-pen-note { font-size: 1.45rem; }

@media (max-width: 900px) {
    .lp-sen { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
}
@media (max-width: 560px) {
    .lp-sen { padding: 32px 20px; }
    .lp-sen-checks { grid-template-columns: 1fr; }
    /* The same hand, held closer together. */
    .lp-hand-fan { height: 280px; }
    .lp-hand-fan.is-fanned .lp-sheet:nth-child(1) { --x: -52px; --r: -6deg; --y: 8px; }
    .lp-hand-fan.is-fanned .lp-sheet:nth-child(2) { --x: -17px; --r: -2deg; }
    .lp-hand-fan.is-fanned .lp-sheet:nth-child(3) { --x: 17px;  --r: 2deg; }
    .lp-hand-fan.is-fanned .lp-sheet:nth-child(4) { --x: 52px;  --r: 6deg; --y: 8px; }
    .lp-sheet {
        width: 132px; height: 190px; margin-left: -66px;
        padding: 28px 10px 10px;
        --sh-size: 0.58rem;
        transform-origin: 50% 200%;
    }
    .lp-sheet[data-layout="dyslexia"] { --sh-size: 0.54rem; }
    .lp-sheet[data-layout="large-print"] { --sh-size: 0.76rem; }
    .lp-sheet-tab { font-size: 0.48rem; letter-spacing: 0.05em; padding: 3px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-sheet { transition: none; }
}

/* ── BlueAcorn panel (sky blue, matching the platform) ── */
.lp-ba-wrap { padding: 70px 0 20px; }
.lp-ba {
    background: linear-gradient(150deg, #eaf7ff 0%, #d2edfc 100%);
    border-radius: 32px;
    border: 2px solid var(--lp-ink);
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    color: var(--lp-ink);
}
.lp-ba .lp-h2 { margin-bottom: 16px; }
.lp-ba-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-sky-dark);
    background: #fff;
    border: 1.5px solid rgba(14, 165, 233, 0.45);
    padding: 5px 14px 5px 6px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.lp-ba-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 7px;
    background: var(--lp-sky);
    color: #fff;
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0;
    margin-right: 9px;
}
.lp-ba-sub {
    margin: 0 0 22px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}
.lp-ba-sub b { color: var(--lp-sky-dark); }

/* "Send to BlueAcorn" mock row */
.lp-ba-send {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    background: #fff;
    border: 2px solid rgba(30, 27, 46, 0.14);
    border-radius: 14px;
    padding: 11px 16px 11px 12px;
    margin-bottom: 28px;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.18);
}
.lp-ba-send-thumb {
    width: 42px;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(145deg, var(--lp-navy) 0%, #2a3a8f 60%, var(--lp-blue) 100%);
}
.lp-ba-send-txt { line-height: 1.25; }
.lp-ba-send-txt b {
    display: block;
    font-size: 0.85rem;
    font-weight: 900;
}
.lp-ba-send-txt span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}
.lp-ba-send-arrow {
    font-weight: 900;
    color: var(--lp-sky);
    animation: lpNudge 1.6s ease-in-out infinite;
}
@keyframes lpNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}
.lp-ba-send-class {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--lp-sky-dark);
    background: rgba(14, 165, 233, 0.12);
    border: 1.5px solid rgba(14, 165, 233, 0.35);
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.lp-ba-send-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lp-green);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    animation: lpPop 3.2s ease infinite;
}
@keyframes lpPop {
    0%, 12%  { transform: scale(0); opacity: 0; }
    20%, 85% { transform: scale(1); opacity: 1; }
    95%, 100%{ transform: scale(0); opacity: 0; }
}

.lp-btn-sky { background: var(--lp-sky); color: #fff; }
.lp-btn-sky:hover { background: var(--lp-sky-dark); }

.lp-ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.lp-ba-cell {
    background: rgba(255, 255, 255, 0.72);
    border: 1.5px solid rgba(14, 165, 233, 0.3);
    border-radius: 16px;
    padding: 20px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.lp-ba-cell:hover {
    transform: translateY(-4px) rotate(-1deg);
    background: #fff;
    border-color: var(--lp-sky);
}
.lp-ba-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--lp-sky);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    margin-bottom: 12px;
}
.lp-ba-cell h4 {
    margin: 0 0 6px;
    font-size: 0.98rem;
    font-weight: 900;
}
.lp-ba-cell p {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--lp-ink-soft);
}

/* ── Closing CTA ─────────────────────────────────────── */
.lp-cta { padding: 70px 0 90px; }
.lp-cta-panel {
    position: relative;
    background: var(--lp-amber);
    border: 2px solid var(--lp-ink);
    border-radius: 32px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    padding: 72px 40px;
    text-align: center;
}
.lp-cta-panel .lp-h2 { margin-bottom: 32px; }
.lp-sticker-cta {
    top: -18px;
    right: 48px;
    background: var(--lp-card);
    transform: rotate(-4deg);
}

/* ── Critters (landing-critters.js) ──────────────────── */
/* Hangs 40px past the hero's foot so the critters can stand on the tilted
   ticker; the ticker paints over whatever is below the ground line. */
.lp-critters {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    height: 170px;
    pointer-events: none;
    z-index: 2;
}
/* Sits on the CTA panel's top border, clear of the sticker on the right. */
.lp-critters-nap {
    position: absolute;
    left: 40px;
    bottom: calc(100% - 4px);
    width: 120px;
    height: 130px;
    pointer-events: none;
}

/* A single critter standing on an edge (landing-critters.js). Each page
   positions its own; this is only the box. */
.lp-critters-perch {
    position: absolute;
    width: 110px;
    height: 150px;
    pointer-events: none;
    z-index: 3;
}

/* ── Bands ───────────────────────────────────────────────
   A full-width section on its own colour, with wobbly top and bottom edges
   (two .lp-wave SVGs, the first and last children). --band is the colour;
   the waves are filled with it so they read as the band's own edge. */
.lp-band {
    --band: var(--lp-card);
    position: relative;
    margin: 40px 0;
    background-color: var(--band);
}
.lp-band-blue {
    --band: #e6ecff;
    background-image: radial-gradient(rgba(54, 96, 255, 0.16) 1.5px, transparent 1.6px);
    background-size: 24px 24px;
}
.lp-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    fill: var(--band);
    pointer-events: none;
}
.lp-wave-top { top: -39px; }
.lp-wave-bottom { bottom: -39px; }

/* On the landing page: the feature cards in cream, pricing in blue. */
.lp-features.lp-band { padding-bottom: 80px; }
.lp-pricing.lp-band { margin-bottom: 20px; }

/* ── Footer ──────────────────────────────────────────── */
.lp-footer {
    border-top: 2px solid var(--lp-line);
    padding: 26px 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}
.lp-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.lp-footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-footer-links a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.lp-footer-links a:hover {
    color: var(--lp-ink);
    border-bottom-color: var(--lp-amber);
}
.lp-footer-social { display: flex; align-items: center; gap: 14px; }
.lp-social {
    display: inline-flex;
    color: inherit;
    transition: color .15s ease;
}
.lp-social:hover { color: var(--lp-ink); }
.lp-social svg { display: block; }

/* ── Scroll reveals ──────────────────────────────────── */
/* Rest + entrance are owned by the t-stagger recipe; the per-child
   delays are written inline by landing.js from --stagger-stagger. */

@media (prefers-reduced-motion: reduce) {
    #landing-view * {
        animation: none !important;
        transition: none !important;
    }
    .lp-reveal { opacity: 1; transform: none; filter: none; }
    .lp-flip-word { opacity: 0; }
    .lp-flip-word.is-in { opacity: 1; transform: rotate(-2deg); }
    /* animations carry these in; without them they must start visible */
    .lp-hl::after { transform: none; }
    .lp-vmstamp { opacity: 1; transform: rotate(-9deg); }
}

/* ── Auth Modal ──────────────────────────────────────── */
#auth-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 46, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#auth-modal #auth-view {
    position: relative;
    z-index: 1;
    display: block;
    min-height: unset;
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Landing-flavoured card: chunky border, offset shadow */
#auth-modal .auth-card {
    background: #fffdf8;
    border: 2px solid #1e1b2e;
    border-radius: 24px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    padding: 34px 32px 30px;
}

.auth-modal-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: #3660ff;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 5px 14px rgba(54, 96, 255, 0.4);
    transform: rotate(-4deg);
    margin-bottom: 14px;
}

#auth-modal .auth-card h2 {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

/* Segmented pill tabs */
#auth-modal .auth-tabs {
    display: flex;
    gap: 4px;
    background: rgba(30, 27, 46, 0.07);
    border: none;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 24px;
}
#auth-modal .auth-tab {
    flex: 1;
    padding: 9px 10px;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.88rem;
    white-space: nowrap;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
/* The sliding pill is the white capsule now – the active tab only takes
   the ink colour, so the capsule travels instead of blinking across. */
#auth-modal .auth-tab.active {
    color: #1e1b2e;
}
#auth-modal .auth-tabs .t-tabs-pill {
    top: 4px;
    bottom: 4px;
    height: auto;
    background: #fff;
    border: 2px solid #1e1b2e;
    border-radius: 999px;
    box-shadow: 0 2px 0 #1e1b2e;
}

/* Inputs */
#auth-modal .form-group label {
    font-weight: 800;
    font-size: 0.82rem;
}
#auth-modal input[type="email"],
#auth-modal input[type="password"] {
    border: 2px solid rgba(30, 27, 46, 0.18);
    border-radius: 12px;
    box-shadow: none;
    font-weight: 700;
}
#auth-modal input[type="email"]:focus,
#auth-modal input[type="password"]:focus {
    border-color: #3660ff;
    box-shadow: 0 0 0 3px rgba(54, 96, 255, 0.18);
}

/* Chunky submit */
#auth-modal .btn-primary {
    border: 2px solid #1e1b2e;
    border-radius: 999px;
    box-shadow: 0 4px 0 #1e1b2e;
    font-weight: 800;
    font-size: 1rem;
    padding: 12px 26px;
    margin-top: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#auth-modal .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1e1b2e;
}
#auth-modal .btn-primary:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #1e1b2e;
}

/* "or / BA Education" divider */
#auth-modal .auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 16px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
#auth-modal .auth-divider::before,
#auth-modal .auth-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: rgba(30, 27, 46, 0.12);
}

/* Chunky secondary button, same family as the tab pills / primary submit */
#auth-modal .btn-baedu-login {
    border: 2px solid #1e1b2e;
    border-radius: 999px;
    box-shadow: 0 3px 0 #1e1b2e;
    background: #fff;
    color: #1e1b2e;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 11px 22px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#auth-modal .btn-baedu-login:hover {
    background: #f1fbf5;
    color: #1e1b2e;
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #1e1b2e;
}
#auth-modal .btn-baedu-login:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #1e1b2e;
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: none;
    border: 2px solid rgba(30, 27, 46, 0.2);
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    font-family: inherit;
    padding: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.auth-modal-close:hover {
    color: #1e1b2e;
    border-color: #1e1b2e;
    background: rgba(30, 27, 46, 0.05);
    transform: rotate(90deg);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 920px) {
    .lp-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .lp-hero { padding: 40px 0 64px; }
    .lp-sub { max-width: none; }
    .lp-demo { max-width: 520px; }

    .lp-ba {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 28px;
    }
}

@media (max-width: 720px) {
    .lp-steps-row {
        flex-direction: column;
        align-items: stretch;
        gap: 34px;
    }
    .lp-step { text-align: left; }
    .lp-step-arrow { display: none; }
    .lp-cta-panel { padding: 56px 24px; }
    .lp-sticker-cta { right: 24px; }
}

@media (max-width: 480px) {
    .lp-nav-actions .lp-btn-ghost { display: none; }
    /* The BlueAcorn badge is already down to an icon and an arrow here, and the
       row now has to hold the pupils' way in as well as Get started. The link is
       in the footer and on every page below; a child looking for their homework
       is not. */
    .lp-nav-ba { display: none; }
    /* Three things now share a 390px row that was built for two, so the nav's
       own buttons give up the padding they can spare. Measured, not guessed:
       at 18px each side the pair ran 25px past the edge and Get started was
       simply off the screen with no sign it existed. */
    .lp-nav-actions { gap: 8px; }
    .lp-nav-actions .lp-btn-sm { padding: 8px 12px; font-size: 0.8rem; }
    .lp-nav-inner .lp-logo { font-size: 1.05rem; gap: 8px; }
    .lp-ba-send {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 12px;
        width: 100%;
    }
    .lp-demo-slides { grid-template-columns: repeat(2, 1fr); }
    .lp-ba-grid { grid-template-columns: 1fr; }
    .lp-hero-actions .lp-btn { width: 100%; }
    .lp-footer-inner { flex-direction: column; text-align: center; }
    .lp-footer-links, .lp-footer-social { justify-content: center; }
}

/* ── Specification coverage ───────────────────────
   One card, fixed height whichever way it is used: board tiles when empty,
   matching subjects once someone types. The list version of this ran to
   fifty rows and pushed the rest of the page off the screen. */
.lp-cov { padding: 5rem 0 4rem; }
.lp-cov-head { text-align: center; max-width: 620px; margin: 0 auto 2rem; }
.lp-cov-sub {
    color: var(--lp-ink-soft);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0.75rem auto 0;
    max-width: 520px;
}

.lp-cov-box {
    max-width: 960px;
    margin: 0 auto;
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 26px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    padding: 1.6rem 1.6rem 1.2rem;
}

/* The search is the point of the section, so it is built like the page's
   buttons – chunky, inked, with a hard shadow – rather than a form field. */
.lp-cov-search {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #fff;
    border: 2px solid var(--lp-ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--lp-ink);
    padding: 0.8rem 1.3rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.lp-cov-search:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--lp-ink), 0 0 0 5px rgba(54, 96, 255, 0.18);
}
.lp-cov-search-ico {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    transition: stroke 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.lp-cov-search:focus-within .lp-cov-search-ico { stroke: var(--lp-blue); transform: rotate(-12deg) scale(1.1); }
.lp-cov-search input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--lp-ink);
    background: none;
    border: 0;
    outline: none;
    padding: 0.1rem 0;
}
.lp-cov-search input::placeholder { color: var(--lp-ink-soft); font-weight: 700; }
/* Safari draws its own clear button inside the pill and it sits badly. */
.lp-cov-search input::-webkit-search-decoration,
.lp-cov-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Fixed enough that the page doesn't jump between an empty box, six matches
   and a "not yet" – the search is meant to feel instant, and reflow reads as
   the page thinking. */
.lp-cov-results { min-height: 13.5rem; padding-top: 1.2rem; }
/* Expanded: the rest of the matches scroll inside the card instead of pushing
   the page down by forty rows. */
.lp-cov-results.is-scrolling {
    max-height: 22rem;
    overflow-y: auto;
    scrollbar-width: thin;
    /* The list fades out at the bottom edge so a cut-off row reads as "more
       below" rather than as the end of the list. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
}

/* Board colours: one per board, the same on its tile and its chips. */
.cc-blue   { --cc: var(--lp-blue);   --cc-ink: #fff;          --cc-soft: rgba(54, 96, 255, 0.12); }
.cc-green  { --cc: var(--lp-green);  --cc-ink: var(--lp-ink); --cc-soft: rgba(0, 199, 141, 0.16); }
.cc-amber  { --cc: var(--lp-amber);  --cc-ink: var(--lp-ink); --cc-soft: rgba(244, 180, 71, 0.22); }
.cc-purple { --cc: var(--lp-purple); --cc-ink: #fff;          --cc-soft: rgba(134, 87, 209, 0.14); }
.cc-sky    { --cc: var(--lp-sky);    --cc-ink: #fff;          --cc-soft: rgba(14, 165, 233, 0.14); }
.cc-red    { --cc: #e0685a;          --cc-ink: #fff;          --cc-soft: rgba(224, 104, 90, 0.14); }
.cc-none   { --cc: var(--lp-ink-soft); --cc-ink: #fff;        --cc-soft: rgba(30, 27, 46, 0.07); }

.lp-cov-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}
.lp-cov-tile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-align: left;
    font-family: inherit;
    color: var(--lp-ink);
    background: #fff;
    border: 2px solid var(--lp-ink);
    border-radius: 16px;
    box-shadow: 3px 3px 0 var(--lp-ink);
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.6, 0.64, 1), box-shadow 0.2s ease;
}
.lp-cov-tile:hover {
    transform: translate(-2px, -3px) rotate(-1deg);
    box-shadow: 5px 6px 0 var(--lp-ink);
}
.lp-cov-tile:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--lp-ink); }
.lp-cov-tile:focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 3px; }

/* The monogram: a round badge in the board's colour. */
.lp-cov-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--cc);
    color: var(--cc-ink);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    transform: rotate(-6deg);
    transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.lp-cov-tile:hover .lp-cov-badge { transform: rotate(8deg) scale(1.1); }
.lp-cov-tile-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lp-cov-tile b { font-size: 1.02rem; font-weight: 900; letter-spacing: -0.01em; }
.lp-cov-tile small { font-size: 0.7rem; font-weight: 700; color: var(--lp-ink-soft); }
.lp-cov-count {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.lp-cov-count em {
    font-style: normal;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.lp-cov-count small { margin-top: 2px; }

/* Primary spans the bottom of the wall rather than sitting as a seventh
   sibling: it is a different customer from the exam boards, not a smaller one,
   and it was previously only findable as a clause in the footnote. */
.lp-cov-tile-nc {
    --cc: var(--lp-green-deep); --cc-ink: #fff;
    grid-column: 1 / -1;
    background: #effbf5;
}

.lp-cov-rows { display: flex; flex-direction: column; }
.lp-cov-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px dashed var(--lp-line);
}
.lp-cov-row:last-child { border-bottom: 0; }
.lp-cov-row-subject { font-size: 0.95rem; font-weight: 800; white-space: nowrap; }
.lp-cov-row-levels { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 0.75rem; }
.lp-cov-lvl { display: inline-flex; align-items: center; gap: 0.25rem; }
.lp-cov-lvl b {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}
.lp-cov-lvl i {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--lp-ink);
    background: var(--cc-soft, rgba(30, 27, 46, 0.07));
    border: 1.5px solid var(--cc, rgba(30, 27, 46, 0.2));
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
}

.lp-cov-none {
    margin: 2.5rem 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.lp-cov-none b { display: block; font-size: 1.05rem; color: var(--lp-ink); margin-bottom: 0.25rem; }
.lp-cov-none a { color: var(--lp-blue); font-weight: 800; }

.lp-cov-foot {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lp-ink-soft);
}
.lp-cov-foot b { color: var(--lp-ink); font-variant-numeric: tabular-nums; }

.lp-cov-more {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--lp-blue);
    background: none;
    border: 0;
    border-bottom: 2px solid rgba(54, 96, 255, 0.35);
    padding: 0 0 2px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.lp-cov-more:hover { border-bottom-color: var(--lp-blue); }

@media (max-width: 600px) {
    .lp-cov { padding: 3.5rem 0; }
    .lp-cov-wall { grid-template-columns: 1fr; }
    .lp-cov-box { padding: 1.1rem 1rem 1rem; }
    .lp-cov-search input { font-size: 1rem; }
    .lp-cov-results { min-height: 15rem; }
    .lp-cov-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .lp-cov-row-levels { justify-content: flex-start; }
}

/* ── Pricing ─────────────────────────────────────── */
.lp-pricing { padding: 5.5rem 0; }
.lp-pricing-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
}
.lp-pricing-sub {
    color: var(--lp-ink-soft);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0.75rem auto 0;
    max-width: 480px;
}
.lp-bill-toggle {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 1.5rem;
    padding: 0.3rem;
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--lp-ink);
}
.lp-bill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lp-bill-btn:hover { color: var(--lp-ink); }
.lp-bill-btn.is-active {
    background: var(--lp-blue);
    color: #fff;
}
.lp-bill-save {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 199, 141, 0.16);
    color: var(--lp-green-deep);
    white-space: nowrap;
}
.lp-bill-btn.is-active .lp-bill-save {
    background: #fff;
    color: var(--lp-blue);
}

/* Prices default to the yearly view; data-plan flips them between
   month and year. */
.lp-pricing .lp-when-month { display: none; }
.lp-pricing[data-plan="month"] .lp-when-month { display: inline; }
.lp-pricing[data-plan="month"] .lp-when-year { display: none; }

.lp-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1060px;
    margin: 0 auto;
    align-items: stretch;
}
.lp-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 18px;
    box-shadow: 0 5px 0 var(--lp-ink);
    padding: 2.25rem 2rem 2rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 0 var(--lp-ink);
}
.lp-price-head { margin-bottom: 1.25rem; }
.lp-price-card h3 {
    font-size: 1rem;
    margin: 0 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lp-price-tagline {
    margin: 0;
    color: var(--lp-ink-soft);
    font-size: 0.9rem;
}
.lp-price-card-pro {
    border-color: var(--lp-blue);
    box-shadow: 0 5px 0 var(--lp-blue);
    background:
        linear-gradient(180deg, rgba(54, 96, 255, 0.06), rgba(54, 96, 255, 0) 45%),
        var(--lp-card);
}
.lp-price-card-pro:hover { box-shadow: 0 9px 0 var(--lp-blue); }
.lp-price-card-pro h3 { color: var(--lp-blue); }

/* The third card has no number on it – what a school pays depends on the size
   of the pool it buys. Purple rather than the Pro card's blue: a different
   rail (invoiced, not a checkout), and it sits beside Pro as a peer instead of
   under it. Ink read as a downgrade, amber as a warning – purple is the one
   colour in the palette that is neither. */
.lp-price-card-inst {
    border-color: var(--lp-purple);
    box-shadow: 0 5px 0 var(--lp-purple);
    background:
        linear-gradient(180deg, rgba(134, 87, 209, 0.09), rgba(134, 87, 209, 0) 48%),
        var(--lp-card);
}
.lp-price-card-inst:hover { box-shadow: 0 9px 0 var(--lp-purple); }
.lp-price-card-inst h3 { color: var(--lp-purple); }
/* "Custom" is a word, not a figure: at the 3rem the prices use it swamps the
   two cards that actually quote one. */
.lp-price-card-inst .lp-price b { font-size: 2.1rem; }
.lp-price-card-inst .lp-price-list li::before { color: var(--lp-purple); background: rgba(134, 87, 209, 0.14); }
/* Same shape as the Pro card's badge – the two cards are both "this one, if
   it's you", and only the colour says which you. */
.lp-price-card-inst .lp-price-badge-inst {
    background: var(--lp-purple);
    color: #fff;
    transform: translateX(-50%) rotate(2deg);
}
/* Above the button, not below it. Below, it pushed the button up off the
   baseline the other two cards' buttons share – the list absorbs the slack
   when it sits here, so all three line up. */
.lp-price-inst-mail {
    margin: 0 0 0.8rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.lp-price-inst-mail a {
    color: var(--lp-ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.lp-price-inst-mail a:hover { color: var(--lp-ink); border-bottom-color: var(--lp-purple); }


/* .lp-btn is written for <button>; as an <a> it picks the browser's underline
   and text baseline back up. */
a.lp-btn { text-decoration: none; }
.lp-price-badge {
    position: absolute;
    top: -0.95rem;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: var(--lp-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 2px 0 var(--lp-ink);
    white-space: nowrap;
}
.lp-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.lp-price b {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.03em;
}
.lp-price > span { color: var(--lp-ink-soft); font-size: 0.95rem; }
.lp-price-alt {
    color: var(--lp-ink-soft);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    min-height: 1.2em;            /* keeps both cards' lists aligned */
}
.lp-price-alt em {
    font-style: normal;
    font-weight: 700;
    color: var(--lp-green-deep);
}
.lp-price-list {
    list-style: none;
    padding: 1.25rem 0 0;
    margin: 1.25rem 0 2rem;
    border-top: 1px dashed var(--lp-line);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;                      /* pushes buttons to a common baseline */
}
.lp-price-list li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.95rem;
}
.lp-price-list li b { font-variant-numeric: tabular-nums; }
/* A tick that is also the way to the evidence for it. Underlined on the
   baseline so it reads as a link without breaking the column of ticks. */
.lp-price-list li a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(134, 87, 209, 0.45);
}
.lp-price-list li a:hover { color: var(--lp-ink); border-bottom-color: var(--lp-purple); }
.lp-price-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--lp-green-deep);
    background: rgba(0, 199, 141, 0.14);
    border-radius: 50%;
}
.lp-price-card-pro .lp-price-list li::before {
    color: #fff;
    background: var(--lp-blue);
}
.lp-price-card .lp-btn { width: 100%; justify-content: center; }
.lp-price-note {
    text-align: center;
    color: var(--lp-ink-soft);
    font-size: 0.85rem;
    margin: 1.75rem auto 0;
}

/* Three cards need the full container; below it they drop to two with the
   institution card across the bottom, where its wider list reads better in one
   row of text than in a third of the width. */
@media (max-width: 980px) {
    /* Once cards sit above one another the badge, which hangs ~17px over the
       card top, lands on the previous card's bottom edge (itself 5px of drop
       shadow). Row gap only – the column gap is fine as it is. */
    .lp-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; gap: 2.5rem 1.25rem; }
    .lp-price-card-inst { grid-column: 1 / -1; }
    .lp-price-card-inst .lp-price-list { flex-direction: row; flex-wrap: wrap; gap: 0.7rem 1.75rem; }
    .lp-price-card-inst .lp-price-list li { flex: 1 1 15rem; }
}

@media (max-width: 640px) {
    .lp-price-grid { grid-template-columns: 1fr; max-width: 400px; }
    .lp-pricing { padding: 3.5rem 0; }
    .lp-price-card-pro { order: -1; }  /* lead with Pro on mobile */
    /* Back to one column: the 980px row layout's flex-basis would otherwise
       become each item's HEIGHT here and space the ticks apart. */
    .lp-price-card-inst .lp-price-list { flex-direction: column; gap: 0.7rem; }
    .lp-price-card-inst .lp-price-list li { flex: 0 0 auto; }
}

/* ── Legal pages (terms, privacy) ─────────────────────
   Long-form reading, so a narrower measure than the rest
   of the landing page and a plainer, quieter type scale.

   NOTE: /accessibility deliberately does NOT use these. It reads as a legal
   document when it does, and it is a product page – see the a11y-* block at
   the bottom of this file. */
.lp-legal {
    max-width: 760px;
    padding-top: 48px;
    padding-bottom: 96px;
}
.lp-legal .lp-h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.lp-legal-updated {
    margin: 14px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}
.lp-legal-intro {
    margin: 24px 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
}
.lp-legal h2 {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 48px 0 14px;
    padding-top: 26px;
    border-top: 2px solid var(--lp-line);
    scroll-margin-top: 24px;
}
.lp-legal h3 {
    font-size: 1.02rem;
    font-weight: 800;
    margin: 26px 0 8px;
}
.lp-legal p,
.lp-legal li {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--lp-ink-soft);
}
.lp-legal p { margin: 0 0 14px; }
.lp-legal ul { margin: 0 0 14px; padding-left: 22px; }
.lp-legal li { margin-bottom: 8px; }
.lp-legal strong { color: var(--lp-ink); font-weight: 800; }
.lp-legal a { color: var(--lp-blue); font-weight: 700; }

/* Table of contents */
.lp-legal-toc {
    margin: 40px 0 8px;
    padding: 22px 26px;
    background: var(--lp-card);
    border: 2px solid var(--lp-line);
    border-radius: 14px;
}
.lp-legal-toc h2 {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}
.lp-legal-toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 32px;
}
.lp-legal-toc li { font-size: 0.92rem; margin-bottom: 6px; break-inside: avoid; }

/* Callout for the things that really matter (AI accuracy, student data) */
.lp-legal-callout {
    margin: 20px 0;
    padding: 18px 22px;
    background: rgba(244, 180, 71, 0.14);
    border-left: 5px solid var(--lp-amber);
    border-radius: 0 12px 12px 0;
}
.lp-legal-callout p:last-child { margin-bottom: 0; }

/* Sub-processor / data tables */
.lp-legal-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.lp-legal table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.lp-legal th,
.lp-legal td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--lp-line);
    color: var(--lp-ink-soft);
    line-height: 1.55;
}
.lp-legal th {
    color: var(--lp-ink);
    font-weight: 800;
    border-bottom-width: 2px;
}

@media (max-width: 640px) {
    .lp-legal-toc ol { columns: 1; }
    .lp-legal { padding-bottom: 64px; }
}

/* ── /accessibility ────────────────────────────────────────
   A product page, not a policy. It used to reuse .lp-legal – numbered
   headings, a numbered contents box, wall-to-wall prose – and read like terms
   and conditions, which is the wrong register for the one page a SENCo lands
   on to decide whether this is usable by their pupils.

   The organising idea: wherever the page describes how something is set, it
   is set that way. The layout cards below are each rendered in the layout
   they name, and the paper swatches are the real printed colours. A sample
   argues better than an adjective, and it cannot drift out of date the way a
   description can. */

.a11y-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 18px;
    background: var(--lp-ink);
    color: #fff;
    border-radius: 0 0 10px 10px;
    font-weight: 800;
    text-decoration: none;
    transition: top 0.15s;
}
.a11y-skip:focus { top: 0; }
#main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .a11y-skip { transition: none; }
}

/* ── Hero ─────────────────────────────────────────────── */
.a11y-hero {
    padding: 64px 0 56px;
    background:
        radial-gradient(90% 120% at 82% 0%, rgba(54, 96, 255, 0.10) 0%, transparent 60%),
        radial-gradient(70% 100% at 5% 100%, rgba(244, 180, 71, 0.14) 0%, transparent 60%);
    border-bottom: 2px solid var(--lp-line);
}
.a11y-eyebrow {
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a5a12;
    background: rgba(244, 180, 71, 0.18);
    border: 1.5px solid rgba(244, 180, 71, 0.5);
    padding: 6px 15px;
    border-radius: 999px;
    margin-bottom: 22px;
}

/* The hero sits in a plain .lp-container – it has no wrapper class of its own.
   It had one twice and both were wrong: first a 760px max-width, which
   re-centred the hero inside the container so its left edge lined up with
   nothing below it; then `max-width: none`, which (later in this file at equal
   specificity) beat .lp-container's own 1100px and let the hero run the full
   width of the viewport. The measure belongs on the text, as here. */
.a11y-h1 {
    margin: 0 0 20px;
    max-width: 18ch;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.a11y-lede {
    margin: 0 0 16px;
    max-width: 60ch;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}
.a11y-lede-note {
    margin: 0 0 22px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}

/* Two columns so the hero has something to look at. It was four stacked
   blocks of prose and the only section on the page with no visual, which on
   an accessibility page is an unfortunate thing to be. */
.a11y-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

/* Wayfinding. The page opened with a numbered contents box, which is a device
   from the legal template and part of why it read like one. */
.a11y-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.a11y-jump a {
    padding: 7px 14px;
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--lp-ink);
    text-decoration: none;
    box-shadow: 2px 2px 0 rgba(30, 27, 46, 0.85);
    transition: transform var(--duration-quick, 0.12s) var(--ease-smooth-out, ease),
                box-shadow var(--duration-quick, 0.12s) var(--ease-smooth-out, ease);
}
.a11y-jump a:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(30, 27, 46, 0.85);
}
.a11y-jump a:focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 3px; }
/* The honest one is worth finding, so it is the one that is not quiet.
   Qualified with the `a` because `.a11y-jump a` above is one component more
   specific than a bare class and would otherwise win both declarations. */
.a11y-jump a.a11y-jump-limits {
    background: rgba(177, 70, 55, 0.14);
    color: var(--lp-red);
}

@media (prefers-reduced-motion: reduce) {
    .a11y-jump a { transition: none; }
}

/* ── Type specimen ────────────────────────────────────────
   One word, set four ways. The whole argument of the page at a glance, and
   unlike the cards further down it asks only to be looked at – no reading
   required to see that the four are different.

   "Photosynthesis" rather than lorem: long enough to show letterforms and
   ascenders, and it is the sort of word these sheets are actually full of. */
.a11y-spec {
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 20px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    overflow: hidden;
}

.a11y-spec-row {
    --spec-font: Georgia, "Times New Roman", serif;
    --spec-size: 1.28rem;
    --spec-track: normal;
    --spec-paper: transparent;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: var(--spec-paper);
}
.a11y-spec-row + .a11y-spec-row { border-top: 2px solid var(--lp-line); }

.a11y-spec-word {
    font-family: var(--spec-font);
    font-size: var(--spec-size);
    letter-spacing: var(--spec-track);
    line-height: 1.3;
    color: var(--lp-ink);
    /* The long word is the point; let it shrink before the label does. */
    min-width: 0;
}
.a11y-spec-label {
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}

.a11y-spec-row[data-a11y="dyslexia"] {
    --spec-font: "OpenDyslexic", Verdana, Arial, sans-serif;
    --spec-size: 1.05rem;
    --spec-track: 0.03em;
}
.a11y-spec-row[data-a11y="high-legibility"] {
    --spec-font: Verdana, "Liberation Sans", "DejaVu Sans", Arial, sans-serif;
    --spec-size: 1.1rem;
    --spec-track: 0.02em;
}
.a11y-spec-row[data-a11y="large-print"] {
    --spec-size: 1.72rem;
    --spec-paper: #fdf6e3;
}

@media (max-width: 900px) {
    .a11y-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 420px) {
    .a11y-spec-row { padding: 13px 15px; }
    .a11y-spec-row[data-a11y="large-print"] { --spec-size: 1.45rem; }
}

/* ── Sections ─────────────────────────────────────────── */
.a11y-section { padding: 64px 0; }
.a11y-section-alt {
    background: rgba(255, 253, 248, 0.7);
    border-top: 2px solid var(--lp-line);
    border-bottom: 2px solid var(--lp-line);
}

/* An eyebrow instead of a section number: it says what the section is about
   rather than where it sits in a list, which is the difference between a
   product page and a contract. */
.a11y-kicker {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-blue);
}
.a11y-h2 {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.a11y-section-sub {
    margin: 0 0 32px;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}
.a11y-section-sub strong { color: var(--lp-ink); font-weight: 800; }

.a11y-aside {
    margin: 28px 0 0;
    max-width: 62ch;
    padding-left: 16px;
    border-left: 3px solid var(--lp-line);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}
.a11y-aside strong { color: var(--lp-ink); font-weight: 800; }
.a11y-aside em { font-style: normal; font-weight: 800; color: var(--lp-ink); }

/* ── Layout cards, each set in its own layout ─────────── */
/* Two columns, explicitly – not auto-fit. With auto-fit this lands on three
   columns at desktop width, which leaves the fourth card stranded beside a
   hole before the full-width fifth. Two columns gives 2×2 and then the wide
   one, which is the shape the content actually is. */
.a11y-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 720px) {
    .a11y-cards { grid-template-columns: 1fr 1fr; }
}
.a11y-card {
    --card-font: Georgia, "Times New Roman", serif;
    --card-scale: 1;
    --card-lh: 1.45;
    --card-track: normal;
    --card-paper: var(--lp-card);

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    background: var(--card-paper);
    border: 2px solid var(--lp-ink);
    border-radius: 18px;
    box-shadow: 5px 5px 0 rgba(30, 27, 46, 0.85);
}
.a11y-card-wide { grid-column: 1 / -1; }

.a11y-card-tag {
    align-self: flex-start;
    font-family: "Nunito", sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--lp-blue);
}

/* The sample is the whole point of the card: it is the only text on the page
   set in the layout being described. */
.a11y-card-sample {
    margin: 0;
    font-family: var(--card-font);
    font-size: calc(1.02rem * var(--card-scale));
    line-height: var(--card-lh);
    letter-spacing: var(--card-track);
    color: var(--lp-ink);
}

/* Pushed to the bottom of the card so the notes align across a row even when
   the samples above them are different heights – which they always are, since
   that is the entire point of the samples. */
.a11y-card-note {
    margin: auto 0 0;
    font-family: "Nunito", sans-serif;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}

/* Mirrors worksheet-print.css. Kept in the same order and with the same
   numbers so a change there is easy to mirror here. */
.a11y-card[data-a11y="dyslexia"] {
    --card-font: "OpenDyslexic", Verdana, Arial, sans-serif;
    --card-lh: 1.8;
    --card-track: 0.03em;
}
.a11y-card[data-a11y="high-legibility"] {
    --card-font: Verdana, "Liberation Sans", "DejaVu Sans", Arial, sans-serif;
    --card-lh: 1.7;
    --card-track: 0.02em;
    --card-scale: 1.08;
}
.a11y-card[data-a11y="large-print"] {
    --card-scale: 1.35;
    --card-lh: 1.6;
    --card-paper: #fdf6e3;
}
.a11y-card[data-a11y="low-density"] {
    --card-scale: 1.15;
    --card-lh: 1.9;
}

/* ── Paper swatches ───────────────────────────────────── */
.a11y-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.a11y-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
}
/* Real ink on real paper, at a size where the contrast is judgeable rather
   than asserted. */
.a11y-swatch-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--sw);
    border: 2px solid var(--lp-ink);
    border-radius: 12px;
    box-shadow: 4px 4px 0 rgba(30, 27, 46, 0.8);
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #1a1d26;
}

/* ── Generation supports ──────────────────────────────── */
.a11y-supports {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 32px;
}
.a11y-support {
    padding-top: 16px;
    border-top: 3px solid var(--lp-ink);
}
.a11y-support h3 {
    margin: 0 0 7px;
    font-size: 1rem;
    font-weight: 900;
}
.a11y-support p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}

.a11y-callout {
    margin-top: 34px;
    padding: 22px 26px;
    background: rgba(244, 180, 71, 0.15);
    border: 2px solid rgba(244, 180, 71, 0.55);
    border-radius: 16px;
}
.a11y-callout p {
    margin: 0;
    max-width: 72ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lp-ink);
}

/* ── Tick / cross lists ───────────────────────────────── */
.a11y-ticks, .a11y-crosses {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 74ch;
}
.a11y-ticks li, .a11y-crosses li {
    position: relative;
    padding-left: 34px;
    font-size: 0.95rem;
    line-height: 1.65;
}
.a11y-ticks li { color: var(--lp-ink-soft); }
.a11y-ticks li::before,
.a11y-crosses li::before {
    position: absolute;
    left: 0;
    top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 900;
}
.a11y-ticks li::before {
    content: "\2713";
    background: rgba(0, 199, 141, 0.18);
    color: var(--lp-green-deep);
}

/* ── Limits ─────────────────────────────────────────────
   This is the section most worth reading and the one a page like this usually
   buries, so it gets the page's loudest treatment – a bordered slab with the
   hard offset shadow, in the clay the app already uses for anything negative.
   Loud, but still made of paper and ink like everything around it. */
.a11y-limits { padding-top: 8px; }
.a11y-limits-inner {
    padding: 44px;
    background: linear-gradient(150deg, #fbeeea 0%, #f6e0da 100%);
    border: 2px solid var(--lp-ink);
    border-radius: 32px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
}
.a11y-kicker-clay { color: var(--lp-red); }
.a11y-crosses li strong { color: var(--lp-ink); font-weight: 800; }
.a11y-crosses li { color: var(--lp-ink-soft); }
.a11y-crosses li::before {
    content: "\00d7";
    background: rgba(177, 70, 55, 0.16);
    color: var(--lp-red);
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .a11y-limits-inner { padding: 30px 22px; border-radius: 22px; }
}

/* ── Three-up ─────────────────────────────────────────── */
.a11y-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}
.a11y-trio-item h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 900;
}
.a11y-trio-item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}
.a11y-trio-item strong { color: var(--lp-ink); font-weight: 800; }

/* ── Contact ──────────────────────────────────────────── */
.a11y-contact { text-align: center; padding-bottom: 84px; }
.a11y-contact .a11y-section-sub { margin-left: auto; margin-right: auto; }
.a11y-contact .lp-btn { text-decoration: none; }

@media (max-width: 640px) {
    .a11y-section { padding: 48px 0; }
    .a11y-hero { padding: 44px 0 40px; }
}

/* ═══════════════════════════════════════════════════════
   TRUST & SECURITY  (/trust)

   Reference page, not a pitch. Someone arrives mid-assessment looking for one
   specific document or one specific fact, so the job is labelling and scanning
   rather than persuasion: plain noun headings, documents as an obviously
   clickable list with dates and a type, and the questionnaire answers as a
   definition grid near the top.

   Deliberately quieter than the rest of the landing page – no kickers, no
   slabs, no offset shadows. The furniture that sells elsewhere gets in the way
   here.
   ═══════════════════════════════════════════════════════ */

.trust-hero {
    padding: 56px 0 40px;
    border-bottom: 2px solid var(--lp-ink);
}
.trust-h1 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
}
.trust-lede {
    margin: 0 0 10px;
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}
.trust-lede strong { color: var(--lp-ink); font-weight: 800; }
.trust-updated {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}

/* Plain links, not chips: chips read as buttons, and nothing here is an
   action - they are just the contents of the page. */
.trust-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 20px 0 0;
    font-size: 0.88rem;
    font-weight: 700;
}
.trust-jump a {
    color: var(--lp-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.trust-jump a:hover { color: var(--lp-blue-dark); }

.trust-section { padding: 52px 0; }
.trust-section-alt {
    background: rgba(255, 253, 248, 0.75);
    border-top: 2px solid var(--lp-line);
    border-bottom: 2px solid var(--lp-line);
}
.trust-h2 {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.trust-sub {
    margin: 0 0 28px;
    max-width: 68ch;
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--lp-ink-soft);
}
.trust-sub strong { color: var(--lp-ink); font-weight: 800; }
.trust-sub a, .trust-where-what a, .trust-requests dd a {
    color: var(--lp-blue);
    font-weight: 700;
}

/* ── Documents ───────────────────────────────────────────
   The reason most people open this page, so it comes first and the titles are
   unmistakably links: blue, underlined, large. Type and date sit under the
   title because "which version am I reading" is the next question after
   "where is it". */
.trust-doclist {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--lp-line);
}
.trust-doclist li {
    padding: 20px 0;
    border-bottom: 2px solid var(--lp-line);
}
.trust-doc-link {
    display: inline-block;
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--lp-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
.trust-doc-link:hover { color: var(--lp-blue-dark); }
.trust-doc-meta {
    display: block;
    margin: 5px 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--lp-ink-soft);
}
.trust-doc-desc {
    margin: 9px 0 0;
    max-width: 76ch;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}

/* ── Questionnaire answers ───────────────────────────────
   A grid of term/value pairs rather than prose: this is the part people copy
   into their own form, so it should be liftable line by line. */
.trust-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--lp-line);
    border: 2px solid var(--lp-ink);
    border-radius: 14px;
    overflow: hidden;
}
.trust-fact { padding: 16px 18px; background: var(--lp-card); }
.trust-fact dt {
    margin: 0 0 5px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--lp-ink-soft);
}
.trust-fact dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--lp-ink);
}
.trust-fact dd a { color: var(--lp-blue); }

/* ── Locations ───────────────────────────────────────────── */
.trust-where { display: grid; border-top: 2px solid var(--lp-line); }
.trust-where-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 18px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 2px solid var(--lp-line);
}
.trust-where-place {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.trust-where-what {
    grid-column: 1 / -1;
    margin: 0;
    max-width: 76ch;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}
.trust-tag {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.trust-tag-rest { background: rgba(0, 199, 141, 0.16); color: var(--lp-green-deep); }
.trust-tag-transit { background: rgba(244, 180, 71, 0.24); color: #8a5d05; }
.trust-tag-none { background: rgba(30, 27, 46, 0.09); color: var(--lp-ink); }

/* ── Lists ───────────────────────────────────────────────── */
.trust-crosses, .trust-ticks {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 76ch;
}
.trust-crosses li, .trust-ticks li {
    position: relative;
    padding-left: 32px;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.trust-crosses li strong, .trust-ticks li strong { color: var(--lp-ink); font-weight: 800; }
.trust-crosses li::before, .trust-ticks li::before {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 900;
}
.trust-ticks li::before {
    content: "\2713";
    background: rgba(0, 199, 141, 0.18);
    color: var(--lp-green-deep);
}
/* A cross here means "this never happens", which is the reassuring answer, so
   it is drawn in ink rather than the clay used elsewhere for real problems. */
.trust-crosses li::before {
    content: "\00d7";
    background: rgba(30, 27, 46, 0.10);
    color: var(--lp-ink);
    font-size: 0.9rem;
}
.trust-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 11px 40px;
}
.trust-two .trust-ticks { max-width: none; }

/* ── Requests ────────────────────────────────────────────── */
.trust-requests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px 40px;
    margin: 0;
}
.trust-requests dt {
    margin: 0 0 6px;
    font-size: 0.97rem;
    font-weight: 900;
    color: var(--lp-ink);
}
.trust-requests dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}

@media (max-width: 640px) {
    .trust-section { padding: 40px 0; }
    .trust-hero { padding: 36px 0 30px; }
    .trust-facts { border-radius: 12px; }
}

/* ── Registration / backing badges above the footer ──────── */
.trust-badges {
    border-top: 2px solid var(--lp-line);
    padding: 28px 0;
}
.trust-badges-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 48px;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 14px;
}
.trust-badge-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
    white-space: nowrap;
}
.trust-badge-logo {
    height: 42px;
    width: auto;
    display: block;
}

/* The Wonde artwork is a tight bounding box with no padding of its own, so it
   reads a size larger than the OUI logo at the same height. */
.trust-badge-logo.is-wonde { height: 32px; }

/* The one badge in the row that is words rather than a logo, so it is set as
   the row's own labels are - a pilled version competed with the two marks it
   stands beside. It links, because a compliance claim with nothing behind it
   is worth less than no claim at all: the pack is what makes it checkable. */
.trust-badge-mark {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.trust-badge-mark:hover {
    color: var(--lp-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.trust-badge-mark:focus-visible {
    outline: 3px solid var(--lp-blue);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .trust-badges-inner { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════
   SCHOOL PILOT  –  the landing band and the modal it opens

   There was a whole /pilot page here. It argued for five sections before it
   let anyone type, and no amount of trimming fixed the fact that applying is a
   form, not a destination. The band below carries the argument; the modal
   carries the form; nothing navigates away from the page you were reading.

   Styled as the landing page's own furniture – cream card, 2px ink border, the
   offset slab – so it reads as the same product rather than a bolted-on
   marketing widget.
   ═══════════════════════════════════════════════════════ */

#pilot-modal {
    /* The palette lives on #landing-view, and this dialog is deliberately
       outside it so it can open over the signed-in app as well. Without its
       own copy every .lp-btn inside resolves var(--lp-blue) to nothing and the
       submit button renders as invisible text on the card. */
    --lp-paper: #f5efe7;
    --lp-card: #fffdf8;
    --lp-ink: #1e1b2e;
    --lp-ink-soft: #6b6580;
    --lp-line: rgba(30, 27, 46, 0.12);
    --lp-blue: #3660ff;
    --lp-blue-dark: #2448d8;
    --lp-amber: #f4b447;
    --lp-green: #00c78d;
    --lp-green-deep: #0d8a66;
    --lp-red: #b14637;

    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9000;
}
#pilot-modal[hidden] { display: none; }

.pilot-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 46, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pilot-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 580px;
    /* Tall enough for the form on a laptop, and scrolls rather than growing
       past the viewport on a short one. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 32px 34px 28px;
    background: #fffdf8;
    border: 2px solid #1e1b2e;
    border-radius: 22px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
    font-family: "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1e1b2e;
}

.pilot-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #6b6580;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.pilot-modal-close:hover { background: rgba(30, 27, 46, 0.07); color: #1e1b2e; }

.pilot-modal-pill {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #f4b447;
    font-size: 0.76rem;
    font-weight: 800;
}
.pilot-modal-card h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.pilot-modal-sub {
    margin: 0 0 22px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.6;
    color: #6b6580;
}

/* ── The form ─────────────────────────────────────────── */
.pilot-form { display: grid; gap: 13px; }
.pilot-form[hidden] { display: none; }
.pilot-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 13px;
}
.pilot-field { display: grid; gap: 5px; }
.pilot-label { font-size: 0.84rem; font-weight: 800; }
/* Required is marked and optional is marked, so nothing has to be inferred
   from the absence of the other. */
.pilot-label em { font-style: normal; color: #b14637; }
.pilot-optional { font-weight: 700; color: #6b6580; }
.pilot-form input,
.pilot-form select,
.pilot-form textarea {
    width: 100%;
    padding: 10px 13px;
    background: #fff;
    border: 1.5px solid rgba(30, 27, 46, 0.22);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e1b2e;
}
.pilot-form textarea { resize: vertical; line-height: 1.5; }
.pilot-form input::placeholder,
.pilot-form textarea::placeholder { color: rgba(107, 101, 128, 0.65); font-weight: 600; }
.pilot-form input:focus-visible,
.pilot-form select:focus-visible,
.pilot-form textarea:focus-visible {
    outline: 3px solid #3660ff;
    outline-offset: 1px;
    border-color: #3660ff;
}
/* Off-screen rather than display:none – a script that reads the computed style
   to decide which fields are real skips a hidden one. */
.pilot-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.pilot-submit { width: 100%; margin-top: 4px; }

.pilot-msg {
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
}
.pilot-msg-error {
    background: rgba(177, 70, 55, 0.12);
    border: 1.5px solid #b14637;
    color: #b14637;
}
.pilot-msg[hidden] { display: none; }

.pilot-modal-foot {
    margin: 2px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: #6b6580;
}
.pilot-modal-foot a { color: #3660ff; font-weight: 800; text-underline-offset: 3px; }

/* A <button> that has to read as one of the links around it. The Cal embed
   binds to a click on the element, so these cannot be anchors with an href. */
.pilot-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #3660ff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pilot-linkbtn:hover { color: #2448d8; }
.pilot-linkbtn:focus-visible {
    outline: 3px solid #3660ff;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── After it sends ───────────────────────────────────── */
.pilot-done { text-align: center; padding: 14px 0 6px; }
.pilot-done[hidden] { display: none; }
.pilot-done:focus { outline: none; }
.pilot-done-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #00c78d;
    color: #1e1b2e;
    font-size: 1.3rem;
    font-weight: 900;
}
.pilot-done p {
    margin: 0 auto 10px;
    max-width: 42ch;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.6;
    color: #6b6580;
}
.pilot-done-close { margin-top: 8px; }

@media (max-width: 560px) {
    #pilot-modal { padding: 12px; align-items: flex-start; }
    .pilot-modal-card {
        padding: 26px 20px 22px;
        border-radius: 18px;
        max-height: calc(100vh - 24px);
    }
    .pilot-modal-card h2 { font-size: 1.3rem; }
}

/* ── The band on the landing page ────────────────────── */
/* Sits above pricing on purpose: a school buyer who reads the price cards
   first has already decided this is a personal subscription, and the pilot is
   what stops that happening.

   It is the loudest thing on the landing page after the hero, and it has to
   be: it is the one place a whole free term is offered. The amber ground, the
   tilted sticker and the £0 are all the landing page's existing furniture,
   turned up rather than replaced. */
.lp-pilot { padding: 64px 0 24px; }

/* Built like the accessibility band above it – bordered slab, hard offset
   shadow, two columns, the same badge – in the page's pastel blue where that
   one is mint. What makes it
   stop the eye is the right-hand side: the pilot happening rather than
   described, with the £0 as a price burst pinned to its corner. */
.lp-pilot-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 56px;
    padding: 56px;
    color: var(--lp-ink);
    background: linear-gradient(150deg, #eef2ff 0%, #d9e2ff 100%);
    border: 2px solid var(--lp-ink);
    border-radius: 32px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
}

/* The accessibility band's badge, in blue. */
.lp-pilot-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 20px;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-blue-dark);
    background: #fff;
    border: 1.5px solid rgba(54, 96, 255, 0.4);
    padding: 5px 14px;
    border-radius: 999px;
}
.lp-pilot-panel h2 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.lp-pilot-copy {
    margin: 0 0 20px;
    max-width: 44ch;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.lp-pilot-points {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 9px 26px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}
.lp-pilot-points li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.92rem;
    font-weight: 800;
}
.lp-pilot-points li::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-ink);
    background: var(--lp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231e1b2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.lp-pilot-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.lp-pilot-ctas .lp-btn { text-decoration: none; }
.lp-pilot-ctas .lp-btn-ghost { background: var(--lp-card); }
.lp-pilot-ctas-note {
    margin: 14px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}

/* ── The staff list, becoming accounts ── */
.lp-pilot-demo {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 370px;
    color: var(--lp-ink);
}
.lp-staff {
    position: relative;
    background: var(--lp-card);
    border: 2px solid var(--lp-ink);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--lp-ink);
    transform: rotate(1.5deg);
}
.lp-staff-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 2px solid var(--lp-ink);
    background: #f1eadf;
    border-radius: 16px 16px 0 0;
}
.lp-staff-bar > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-ink);
}
.lp-staff-bar > span:nth-child(1) { background: #e0685a; }
.lp-staff-bar > span:nth-child(2) { background: var(--lp-amber); }
.lp-staff-bar > span:nth-child(3) { background: var(--lp-green); }
.lp-staff-bar em {
    margin-left: 6px;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
}
.lp-staff-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--lp-green-deep);
    background: rgba(0, 199, 141, 0.14);
    border-radius: 999px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
}
.lp-staff-count i { font-style: normal; }
.lp-staff-list {
    margin: 0;
    padding: 6px 14px;
    list-style: none;
}
.lp-staff-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--lp-line);
    transition: opacity 0.3s ease;
}
.lp-staff-list li:last-child { border-bottom: 0; }
.lp-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
}
.av-blue   { background: var(--lp-blue); }
.av-green  { background: var(--lp-green); color: var(--lp-ink); }
.av-amber  { background: var(--lp-amber); color: var(--lp-ink); }
.av-purple { background: var(--lp-purple); }
.av-sky    { background: var(--lp-sky); }
.av-red    { background: #e0685a; }
.lp-staff-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lp-staff-who b { font-size: 0.86rem; font-weight: 900; }
.lp-staff-who small { font-size: 0.7rem; font-weight: 700; color: var(--lp-ink-soft); }

/* Waiting → sending (an envelope flies off) → ready (a green pill). */
.lp-staff-state {
    position: relative;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.lp-staff-state em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 900;
    color: rgba(30, 27, 46, 0.35);
    border-radius: 999px;
    padding: 3px 9px;
    transition: color 0.2s ease, background 0.2s ease;
}
.lp-staff-list li.is-sending em { color: #b07a12; background: rgba(244, 180, 71, 0.2); }
.lp-staff-list li.is-ready em {
    color: var(--lp-ink);
    background: var(--lp-green);
    animation: lpReady 0.45s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.lp-staff-list li.is-ready em::before { content: '\2713\00a0'; }
@keyframes lpReady {
    0%   { transform: scale(0.6); }
    100% { transform: scale(1); }
}
.lp-staff-mail {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 20px;
    height: 14px;
    margin-top: -7px;
    fill: #fff;
    stroke: var(--lp-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    opacity: 0;
    pointer-events: none;
}
.lp-staff-list li.is-sending .lp-staff-mail { animation: lpMail 0.7s cubic-bezier(0.3, 0.6, 0.4, 1) forwards; }
@keyframes lpMail {
    0%   { opacity: 0; transform: translate(-20px, 0) rotate(0deg) scale(0.7); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(46px, -34px) rotate(18deg) scale(1); }
}
.lp-staff-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 12px;
    border-top: 2px solid var(--lp-ink);
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
}
.lp-staff-foot svg {
    width: 18px;
    height: 20px;
    fill: var(--lp-blue);
    stroke: var(--lp-ink);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.lp-staff-foot svg path + path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.lp-pilot-sticker { top: auto; bottom: -16px; right: 22px; left: auto; transform: rotate(-4deg); }

/* The £0, as a price burst pinned to the window's corner. */
.lp-burst {
    position: absolute;
    left: -92px;
    top: -74px;
    width: 124px;
    height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-10deg);
    animation: lpBurst 6s ease-in-out infinite;
    z-index: 2;
}
.lp-burst svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: var(--lp-amber);
    stroke: var(--lp-ink);
    stroke-width: 2.4;
    stroke-linejoin: round;
    filter: drop-shadow(4px 4px 0 var(--lp-ink));
}
.lp-burst b, .lp-burst span { position: relative; }
.lp-burst b {
    font-size: 2.9rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.9;
}
.lp-burst span {
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}
@keyframes lpBurst {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50%      { transform: rotate(-4deg) scale(1.05); }
}

@media (max-width: 900px) {
    .lp-pilot-panel {
        grid-template-columns: 1fr;
        gap: 64px;
        padding: 44px 28px 40px;
    }
    .lp-pilot-demo { justify-self: center; margin-top: 44px; }
    .lp-burst { left: auto; right: -18px; top: -92px; width: 104px; height: 104px; }
    .lp-burst b { font-size: 2.4rem; }
}
@media (max-width: 560px) {
    .lp-pilot-panel { padding: 36px 20px 36px; }
    .lp-pilot-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-burst { animation: none; }
}

/* ══ The standalone pilot page (/pilot) ══════════════════
   Where the promotion lands. It reuses the landing page's paper, ink and
   buttons, and the modal's form styles above, so the only thing new here is
   the page's own furniture: the prose sections and the card the form sits in.
   The hero, the feature cards and the SEND band are the landing page's own,
   markup and all.

   Prefixed .pp- rather than .lp-: these are one page's layout, not the
   landing page's vocabulary, and nothing else should reach for them. */

/* The landing page's h1 is sized around a short line and a flipping word;
   this page's headline is one long sentence with a break in it, and needs a
   step down to keep "Your whole school," on one line. */
.pp-h1-fit { font-size: clamp(2.3rem, 4.3vw, 3.4rem); }

/* ── Prose sections ──────────────────────────────────── */
.pp-section { padding: 56px 0; }
.pp-section-alt {
    background: var(--lp-card);
    border-top: 2px solid var(--lp-line);
    border-bottom: 2px solid var(--lp-line);
}
.pp-h2 { margin: 0 0 14px; }
.pp-sub {
    margin: 0;
    max-width: 66ch;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}
.pp-sub a { color: var(--lp-blue); font-weight: 800; text-underline-offset: 3px; }

/* The pilot's own questions, marked as the questions they are. */
.pp-findout {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    max-width: 78ch;
}
.pp-findout li {
    position: relative;
    padding-left: 40px;
    min-height: 26px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}
.pp-findout li::before {
    content: '?';
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lp-amber);
    border: 2px solid var(--lp-ink);
    color: var(--lp-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

/* ── Who it is open to, and what we ask ──────────────── */
/* The one condition attached to a free term, so it is set apart from the
   counts above rather than left to read as more of the same prose. */
.pp-ask {
    margin-top: 34px;
    padding: 24px 28px 22px;
    border-left: 5px solid var(--lp-amber);
    background: var(--lp-card);
    border-radius: 0 16px 16px 0;
}
.pp-ask h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.pp-ask p {
    margin: 0;
    max-width: 78ch;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}

/* ── What a term looks like ──────────────────────────── */
/* One bar, divided the way the term actually divides: three narrow segments
   for the week everything is asked of you, then the long amber stretch where
   nothing is, then the end. The widths are the argument, so they are set on
   the grid and nothing in the copy has to claim them.

   Built as a single capsule with ink dividers rather than ticks on a hairline:
   at hairline weight the whole diagram floated off the paper, and the one
   amber element looked like it came from a different drawing. */
.pp-term {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 0.78fr)) minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows: 26px auto;
    gap: 0;
    margin: 30px 0 0;
    padding: 0;
}
.pp-term-step {
    /* Two rows, shared by every segment, so the bar is continuous and the
       labels all start at the same line. */
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--lp-ink-soft);
}
.pp-term-step::before {
    content: '';
    grid-row: 1;
    background: var(--lp-card);
    border: 3px solid var(--lp-ink);
    border-left-width: 0;
    border-right-width: 0;
    /* The drop every card on the site has. Per segment rather than under the
       whole bar: the segments touch, so the shadows join into one strip. */
    box-shadow: 0 5px 0 var(--lp-ink);
}
/* The ends of the term close the capsule. */
.pp-term-step:first-child::before {
    border-left-width: 3px;
    border-radius: 999px 0 0 999px;
}
.pp-term-step:last-child::before {
    border-right-width: 3px;
    border-radius: 0 999px 999px 0;
}
/* Divisions between one stage and the next. */
.pp-term-step + .pp-term-step::before { border-left: 3px solid var(--lp-ink); }

/* The stretch where nothing is asked of the school – the only filled segment,
   because it is the only one that lasts. */
.pp-term-run::before { background: var(--lp-amber); }

.pp-term-step b {
    display: block;
    margin-top: 14px;
    padding-right: 22px;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.45;
    color: var(--lp-ink);
}

/* The spans underneath, measuring what the bar above shows. */
.pp-term-scale {
    /* The bar's own columns, so each span ends exactly where its segment does
       rather than at a fraction that only looks close. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 0.78fr)) minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 0;
    margin: 20px 0 0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}
.pp-term-scale span {
    position: relative;
    padding-top: 12px;
    border-top: 2px solid var(--lp-line);
}
/* End marks, so each label reads as measuring the span above it. */
.pp-term-scale span::before,
.pp-term-scale span::after {
    content: '';
    position: absolute;
    top: -6px;
    width: 2px;
    height: 10px;
    background: var(--lp-line);
}
.pp-term-scale span::before { left: 0; }
.pp-term-scale span::after { right: 0; }
.pp-term-scale span:first-child { grid-column: 1 / 4; margin-right: 9px; }
.pp-term-scale span:last-child { grid-column: 4 / 6; margin-left: 9px; }

@media (max-width: 860px) {
    /* Turned on its side. Five segments across a phone are too narrow to read
       as proportions, so the bar becomes a column and the run keeps its
       weight by staying the tall one. */
    .pp-term {
        grid-template-columns: 26px 1fr;
        /* The desktop row template is what the segments span; sideways each
           pair claims a row of its own, so it has to be cleared. */
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 0 18px;
        margin-top: 24px;
    }
    .pp-term-step {
        display: contents;
    }
    .pp-term-step::before { grid-column: 1; grid-row: auto; }
    .pp-term-step b { grid-column: 2; grid-row: auto; }
    .pp-term-scale { display: none; }
    .pp-term-step::before {
        grid-column: 1;
        min-height: 46px;
        border: 3px solid var(--lp-ink);
        border-top-width: 0;
        border-bottom-width: 0;
    }
    .pp-term-step:first-child::before {
        border-top-width: 3px;
        border-radius: 999px 999px 0 0;
    }
    .pp-term-step:last-child::before {
        border-bottom-width: 3px;
        border-radius: 0 0 999px 999px;
    }
    .pp-term-step + .pp-term-step::before {
        border-left-width: 3px;
        border-top: 3px solid var(--lp-ink);
    }
    .pp-term-run::before { min-height: 74px; }
    /* Sideways, the drop would fall across the labels. */
    .pp-term-step::before { box-shadow: 5px 0 0 var(--lp-ink); }
    /* Label and detail share the second column, opposite their segment. */
    .pp-term-step b { grid-column: 2; margin: 0; padding: 0 0 18px; }
}

/* ── The trust band ──────────────────────────────────── */
/* A rule above the form rather than a card: it is a hand-off on the way past,
   not another thing to read. */
.pp-trust {
    padding: 26px 0;
    border-top: 2px solid var(--lp-line);
}
.pp-trust-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.pp-trust-h {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.pp-trust-inner p {
    margin: 0;
    max-width: 72ch;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.pp-trust-inner .lp-btn { flex: none; }

@media (max-width: 720px) {
    .pp-trust-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── The application ─────────────────────────────────── */
.pp-apply {
    padding: 60px 0 66px;
    /* The same warm amber wash the landing band uses, for the same reason:
       this is the one place on the page that asks for something, and it should
       read as a lift out of the paper rather than as a different site. */
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(244, 180, 71, 0.30) 0%, rgba(244, 180, 71, 0.10) 55%, rgba(244, 180, 71, 0.05) 100%),
        var(--lp-paper);
    border-top: 2px solid var(--lp-line);
    scroll-margin-top: 16px;
}
.pp-apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 44px;
    align-items: start;
}
.pp-apply-foot {
    margin: 22px 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.pp-apply-foot a { color: var(--lp-blue); font-weight: 800; text-underline-offset: 3px; }

.pp-form-card {
    padding: 28px 28px 24px;
    background: var(--lp-card);
    color: var(--lp-ink);
    border: 3px solid var(--lp-ink);
    border-radius: 22px;
    box-shadow: 0 8px 0 var(--lp-ink);
}
.pp-form-title {
    margin: 12px 0 8px;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.pp-form-sub {
    margin: 0 0 18px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}

@media (max-width: 980px) {
    .pp-apply-grid { grid-template-columns: 1fr; gap: 30px; }
    .pp-section { padding: 44px 0; }
}

@media (max-width: 560px) {
    /* Two things in the bar on a phone: who this is, and how to apply. */
    .pp-nav-trust { display: none; }
    .pp-form-card { padding: 24px 20px 20px; border-radius: 18px; }
}

/* ══ The teacher ambassador page (/ambassadors) ══════════
   Same construction as the pilot page above, and it borrows that page's
   .pp- furniture wholesale – the prose sections, the .pp-ask aside and the
   .pp-trust band are exactly the same shapes. Only the pieces that page has
   no equivalent for are new here. */

/* ── The hero ────────────────────────────────────────── */
.amb-h1-fit { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }

/* ── The three things you get back ───────────────────── */
/* The hero's centre of gravity. Everyone reading has already recommended the
   product for nothing, so what they are owed is stated in full colour and
   above the buttons, rather than being left to a section further down. */
.amb-perks-label {
    display: block;
    margin: 28px 0 12px;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}
.amb-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 640px;
}
.amb-perk {
    padding: 16px 16px 15px;
    border: 3px solid var(--lp-ink);
    border-radius: 16px;
    box-shadow: 0 5px 0 var(--lp-ink);
}
.amb-perk b {
    display: block;
    margin-bottom: 4px;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.amb-perk span {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.45;
}
.amb-perk-blue  { background: var(--lp-blue);  color: #fff; }
.amb-perk-blue span { color: rgba(255, 255, 255, 0.88); }
.amb-perk-amber { background: var(--lp-amber); color: var(--lp-ink); }
.amb-perk-green { background: var(--lp-green); color: var(--lp-ink); }
.amb-perk-amber span,
.amb-perk-green span { color: rgba(30, 27, 46, 0.75); }

/* Two long labels where the pilot page has two short ones: a little less
   air inside each button keeps them on one row at desktop widths. */
.amb-hero-actions { gap: 12px; margin-top: 28px; }
.amb-hero-actions .lp-btn-lg { padding-left: 24px; padding-right: 24px; }

/* ── What an ambassador does ─────────────────────────── */
.amb-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.amb-item {
    position: relative;
    padding: 26px 24px 22px;
    background: var(--lp-card);
    border: 3px solid var(--lp-ink);
    border-radius: 20px;
    box-shadow: 0 6px 0 var(--lp-ink);
}
.amb-item-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--lp-amber);
    border: 2px solid var(--lp-ink);
    font-size: 1.05rem;
    font-weight: 900;
}
.amb-item h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.amb-item p {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}

/* ── What you get ────────────────────────────────────── */
/* The promise is the bold lead; the sentence after it is the small print on
   that promise, so the two sit in one block rather than in separate rows. */
.amb-gets {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 22px;
    max-width: 1000px;
}
.amb-gets li {
    position: relative;
    padding: 2px 0 2px 40px;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}
.amb-gets li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lp-green);
    border: 2px solid var(--lp-ink);
    color: var(--lp-ink);
    font-size: 0.85rem;
    font-weight: 900;
}
.amb-gets li b {
    display: block;
    margin-bottom: 3px;
    color: var(--lp-ink);
    font-weight: 900;
}

/* ── Who this suits ──────────────────────────────────── */
/* Two columns that disagree with each other: what the programme asks for,
   and the much longer list of things people assume it asks for. The second
   is drawn lighter and dashed on purpose - it is the column of things that
   are not there. */
.amb-fit {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
}
.amb-fit-col h3 {
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.amb-fit-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.amb-fit-col li {
    position: relative;
    padding-left: 36px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.6;
}
.amb-fit-col li::before {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    font-size: 0.8rem;
    font-weight: 900;
}

.amb-fit-yes {
    padding: 24px 26px 26px;
    background: var(--lp-card);
    border: 3px solid var(--lp-ink);
    border-radius: 20px;
    box-shadow: 0 6px 0 var(--lp-ink);
}
.amb-fit-yes li { color: var(--lp-ink); }
.amb-fit-yes li::before {
    content: '\2713';
    background: var(--lp-green);
    color: var(--lp-ink);
}

.amb-fit-no {
    padding: 24px 26px 26px;
    border: 3px dashed rgba(30, 27, 46, 0.3);
    border-radius: 20px;
}
.amb-fit-no h3 { color: var(--lp-ink-soft); }
.amb-fit-no li { color: var(--lp-ink-soft); }
.amb-fit-no li::before {
    content: '\00d7';
    background: transparent;
    border-color: rgba(30, 27, 46, 0.3);
    color: var(--lp-ink-soft);
    font-size: 0.95rem;
}

.amb-fit-foot {
    margin: 26px 0 0;
    max-width: 78ch;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}

/* ── How to join ─────────────────────────────────────── */
.amb-steps {
    counter-reset: amb-step;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.amb-steps li {
    counter-increment: amb-step;
    padding-top: 16px;
    border-top: 3px solid var(--lp-ink);
}
.amb-steps li::before {
    content: 'Step ' counter(amb-step);
    display: block;
    margin-bottom: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-blue);
}
.amb-steps li b {
    display: block;
    margin-bottom: 5px;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.amb-steps li span {
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-ink-soft);
}

/* ── The closing ask ─────────────────────────────────── */
.amb-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: none;
}
.amb-cta-actions .lp-btn { flex: none; }
.amb-cta .pp-trust-inner p a {
    color: var(--lp-blue);
    font-weight: 800;
    text-underline-offset: 3px;
}

@media (max-width: 980px) {
    .amb-grid,
    .amb-steps { grid-template-columns: 1fr; }
    .amb-gets { grid-template-columns: 1fr; }
    .amb-fit { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    /* Three colour blocks side by side turn into three slivers on a phone;
       stacked, each one still reads as a thing you are being given. */
    .amb-perks { grid-template-columns: 1fr; gap: 10px; }
    .amb-perk { display: flex; align-items: baseline; gap: 10px; }
    .amb-perk b { margin-bottom: 0; white-space: nowrap; }
}

@media (max-width: 620px) {
    /* The bar keeps the ask, not the whole sentence: at this width the full
       label crowds the logo out of the row. */
    .amb-nav-long { display: none; }
}

/* The pupils' way in, in the teachers' nav.
 *
 * Deliberately the quietest thing in the bar: every other control here is
 * addressed to the teacher who decides whether to pay, and a child arriving is
 * following an address they were given rather than shopping. On a narrow screen
 * it survives where "BlueAcorn Education" does not - a pupil on a phone is
 * exactly who needs it.
 */
/* Specific enough, and late enough, to survive the 480px rule that hides every
   other ghost button in this bar. That rule is right about "Sign in" - the hero
   below carries one - and wrong about this: a pupil on a phone in a corridor is
   precisely the person who came here for it. */
.lp-nav-actions .lp-nav-pupils {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ── Flair (landing-flair.js) ────────────────────────────
   The page marked up in a teacher's red pen, highlighter that
   sweeps on, loopy hand-drawn arrows, pencil doodles in the
   hero, and feature cards that lean toward the cursor. */

#landing-view { --lp-pen: #e0412f; }

/* Highlighter: sweeps across its word as the heading arrives,
   rather than being there already. */
.t-stagger .lp-swash {
    background-size: 0% 38%;
    transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}
.t-stagger.is-shown .lp-swash { background-size: 100% 38%; }

/* Red pen. Each mark is an SVG path drawn by its dash offset, then
   any handwriting is "written" left to right with a clip. */
.lp-pen { position: relative; white-space: nowrap; }
.lp-pen-ink {
    position: absolute;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: var(--lp-pen);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-pen-ink path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0, 0.2, 1) 0.25s;
}
.lp-pen-ink path + path { transition-delay: 0.8s; transition-duration: 0.25s; }
.lp-pen.is-inked .lp-pen-ink path { stroke-dashoffset: 0; }

.lp-pen-note {
    font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    font-weight: 700;
    color: var(--lp-pen);
    letter-spacing: 0;
    line-height: 0.95;
    white-space: nowrap;
    clip-path: inset(-10% 100% -10% 0);
    transition: clip-path 0.55s steps(12, end) 0.7s;
}
.lp-pen.is-inked .lp-pen-note { clip-path: inset(-10% -10% -10% 0); }

/* A ring round a phrase. Loose, and a little bigger than the words. */
.lp-pen-circle > .lp-pen-ink { left: -0.6em; top: -0.42em; width: calc(100% + 1.2em); height: calc(100% + 0.84em); }
.lp-price b.lp-pen-circle { margin-right: 0.35em; }
.lp-price b.lp-pen-circle > .lp-pen-ink { left: -0.3em; top: -0.18em; width: calc(100% + 0.6em); height: calc(100% + 0.36em); }
.lp-sub .lp-pen-circle { color: var(--lp-ink); }

/* A double underline, the second stroke shorter. */
.lp-pen-under > .lp-pen-ink { left: -0.1em; right: -0.1em; bottom: -0.32em; width: calc(100% + 0.2em); height: 0.42em; }

/* The grade on "Four things it makes brilliantly". */
.lp-swash-graded { position: relative; }
.lp-pen-grade {
    position: absolute;
    right: -2.05em;
    top: -0.55em;
    width: 1.9em;
    height: 1.5em;
    transform: rotate(-10deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-pen-grade .lp-pen-note { font-size: 1.05em; }
.lp-pen-grade .lp-pen-ink { inset: 0; width: 100%; height: 100%; }
.lp-pen-grade .lp-pen-ink path { transition-delay: 1.1s; }

/* "yes, really!" in the space left of the price burst, arrowed across at it. */
.lp-pen-really {
    position: absolute;
    left: -256px;
    top: -58px;
    width: 180px;
    height: 70px;
    transform: rotate(-4deg);
    z-index: 3;
}
.lp-pen-really .lp-pen-note { position: absolute; left: 0; top: 0; font-size: 1.6rem; }
/* Measured, not eyeballed: the note is ~89px wide, so the tail starts just
   after the "!" at the words' mid-height and the tip lands on the burst's
   edge (~172px across). */
.lp-pen-really .lp-pen-ink { left: 94px; top: 3px; width: 80px; height: 30px; }
.lp-pen-really .lp-pen-ink path { transition-delay: 1.2s; }
.lp-pen-really .lp-pen-ink path + path { transition-delay: 1.75s; }
.lp-pen-really .lp-pen-note { transition-delay: 0.3s; }

/* "less than a coffee!" beside the Pro price. */
.lp-price-card-pro .lp-price { position: relative; }
.lp-pen-coffee {
    position: absolute;
    right: -6px;
    top: -20px;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    transform: rotate(-6deg);
}
.lp-pen-coffee .lp-pen-note { font-size: 1.3rem; text-align: left; }
.lp-pen-coffee .lp-pen-ink { position: relative; width: 34px; height: 26px; margin-top: 14px; }
.lp-pen-coffee .lp-pen-ink path { transition-delay: 1.1s; }
.lp-pen-coffee .lp-pen-ink path + path { transition-delay: 1.5s; }
.lp-pen-coffee .lp-pen-note { transition-delay: 0.6s; }

@media (max-width: 900px) {
    /* No margin left to write in once the band stacks. */
    .lp-pen-really { display: none; }
}
@media (max-width: 720px) {
    /* The heading wraps here, so a grade raised above "brilliantly" would
       land on the line before it. */
    .lp-pen-grade { top: -0.1em; }
}
@media (max-width: 380px) {
    .lp-pen-coffee { display: none; }
}

/* Loopy hand-drawn arrows between the steps, drawn as the row arrives. */
.lp-step-arrow {
    flex: 0 0 96px;
    padding-top: 6px;
    opacity: 0.6;
}
.lp-step-arrow svg {
    display: block;
    width: 96px;
    height: 44px;
    overflow: visible;
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-step-arrow path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0, 0.2, 1) 0.4s;
}
.lp-step-arrow path + path { transition-duration: 0.2s; transition-delay: 1.05s; }
.lp-step-arrow + .lp-step + .lp-step-arrow path { transition-delay: 0.9s; }
.lp-step-arrow + .lp-step + .lp-step-arrow path + path { transition-delay: 1.55s; }
.lp-steps-row.is-shown .lp-step-arrow path { stroke-dashoffset: 0; }

/* Step numbers land with a bounce as their step rises in. */
.lp-steps-row .lp-step-num { transform: rotate(-4deg) scale(0.4); }
.lp-steps-row.is-shown .lp-step-num {
    transform: rotate(-4deg) scale(1);
    transition: transform 0.55s cubic-bezier(0.34, 1.8, 0.64, 1) 0.15s;
}
.lp-steps-row.is-shown .lp-step:hover .lp-step-num {
    transform: rotate(6deg) scale(1.1);
    transition-delay: 0s;
}

/* Doodle layer, behind the hero copy. */
.lp-doodles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.lp-hero > .lp-container { position: relative; z-index: 1; }

/* Feature cards: tilted by JS toward the pointer, with a soft glare
   that follows it. */
.lp-card { position: relative; }
.lp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lp-card.is-tilting::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .lp-swash { background-size: 100% 38% !important; }
    .lp-pen-ink path, .lp-step-arrow path { stroke-dashoffset: 0 !important; }
    .lp-pen-note { clip-path: none !important; }
    .lp-steps-row .lp-step-num { transform: rotate(-4deg) !important; }
}


/* ══ The tutoring agencies page (/tutoring-agencies) ══════
   The landing page's paper, ink, buttons, cards, ticker and closing panel,
   for an agency owner rather than a teacher. What is new here is the hero's
   journey demo and the page's own furniture: the six-stage grid, the "only
   here" teaching panel, the denser list of everything else, and three short
   reasons to believe.

   Prefixed .ta- like the pilot page's .pp-: one page's layout, not the
   landing page's vocabulary. */

#landing-view {
    --ta-orange: #ff7a45;
    --ta-pink: #ff5c9d;
}

/* One long headline with a swash on its second half; a step down from the
   landing page's size keeps "Run your whole agency" on one line. */
.ta-h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }

.ta-section { padding: 72px 0; }
.ta-wide { max-width: 1240px; }
.ta-center { text-align: center; }
.ta-lede {
    margin: 14px auto 0;
    max-width: 62ch;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--lp-ink-soft);
}

/* ── Hero: one family's journey ──────────────────────── */
.ta-steps {
    list-style: none;
    margin: 0;
    padding: 18px 18px 20px;
    display: grid;
    gap: 10px;
}
.ta-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 2px solid transparent;
    opacity: 0.38;
    transition: opacity 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ta-step b { font-size: 1.02rem; font-weight: 900; }
.ta-step span {
    grid-column: 2;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}
.ta-step b, .ta-step span { min-width: 0; }
.ta-dot {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--lp-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease;
}
.ta-dot svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Done: stays lit, quietly. Now: the one happening, lifted and outlined. */
.ta-step.is-done { opacity: 0.75; }
.ta-step.is-done .ta-dot,
.ta-step.is-now .ta-dot { background: var(--c); }
.ta-step.is-now {
    opacity: 1;
    background: var(--lp-paper);
    border-color: var(--lp-ink);
    box-shadow: 0 3px 0 var(--lp-ink);
    transform: translateX(-4px) rotate(-0.6deg);
}
/* Static and fully lit when there is no motion to show the order. */
.ta-demo.is-static .ta-step { opacity: 1; }
.ta-demo.is-static .ta-dot { background: var(--c); }

/* ── The journey: six cards, three abreast ───────────── */
.ta-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 1000px) { .ta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ta-grid { grid-template-columns: 1fr; } }
.ta-card-orange { background: #ffe6da; }
.ta-card-pink   { background: #ffe1ed; }
.ta-num {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-card);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

/* ── Built around teaching ───────────────────────────── */
.ta-teach { padding: 24px 0 72px; }
.ta-teach-panel {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 44px;
    align-items: start;
    padding: 48px 44px;
    background: var(--lp-blue);
    color: #fff;
    border: 2px solid var(--lp-ink);
    border-radius: 32px;
    box-shadow: 8px 8px 0 rgba(30, 27, 46, 0.9);
}
/* "it keeps going." in amber over a white wavy line. Drawn as an SVG rather
   than a wavy text-decoration, which stopped mid-wave at each end and hung
   outside the heading's box; this one inks itself in like the red pen. */
.ta-keep { color: var(--lp-amber); }
.ta-keep > .ta-wavy {
    height: 0.24em;
    bottom: -0.16em;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3;
}
.ta-keep > .ta-wavy path { vector-effect: non-scaling-stroke; }
.ta-teach-panel .ta-lede { margin: 16px 0 0; color: rgba(255, 255, 255, 0.85); }
.ta-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-amber);
    color: var(--lp-ink);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-3deg);
}
.ta-only {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.ta-only li {
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: var(--lp-card);
    color: var(--lp-ink);
    border: 2px solid var(--lp-ink);
}
.ta-only b {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.02rem;
    font-weight: 900;
}
.ta-only b::before {
    content: '\2713';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lp-green);
    border: 2px solid var(--lp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.ta-only span {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.55;
    color: #4a4560;
}
@media (max-width: 920px) {
    .ta-teach-panel { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; }
}
@media (max-width: 560px) {
    .ta-only { grid-template-columns: 1fr; }
}

/* ── Where the money goes ─────────────────────────────── */
.ta-trust {
    margin: 40px 0 0;
    padding-top: 28px;
    border-top: 2px solid var(--lp-line);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
}
.ta-trust a { color: var(--lp-blue); font-weight: 800; text-underline-offset: 3px; }

/* ── Closing panel ───────────────────────────────────── */
.ta-cta .lp-h2 { margin-bottom: 14px; }
.ta-cta-sub {
    margin: 0 auto 30px;
    max-width: 52ch;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.6;
}
.ta-cta-foot { margin: 20px 0 0; font-size: 0.9rem; font-weight: 700; }
.ta-cta-foot a { color: var(--lp-ink); text-underline-offset: 3px; }

@media (max-width: 480px) {
    .ta-section { padding: 56px 0; }
    .ta-demo .lp-demo-bar em { visibility: hidden; }   /* the sticker sits over it */
    .ta-step { grid-template-columns: 38px 1fr; column-gap: 10px; }
    .ta-dot { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .ta-step { transition: none; }
}

.ta-teach-panel { align-items: center; }

/* ── Tutoring page flair ─────────────────────────────────
   Every little scene below loops by itself while it is on the page. Each one's
   resting style is its finished state, so under reduced motion (where the
   landing page switches every animation off) it simply shows the end. */

/* Hero: a progress bar under the title bar, filled by tutoring-landing.js. */
.ta-progress { height: 6px; background: var(--lp-line); }
.ta-progress i {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--ta-orange), var(--lp-purple), var(--lp-blue), var(--lp-green), var(--lp-amber));
    transform-origin: left;
    transform: scaleX(var(--ta-p, 1));
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Pop-outs beside the window. */
.ta-pop {
    position: absolute;
    z-index: 3;
    padding: 10px 14px;
    border: 2px solid var(--lp-ink);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--lp-ink);
    font-size: 0.86rem;
    font-weight: 800;
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
    transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.7, 0.64, 1);
    pointer-events: none;
}
.ta-pop.is-in,
.ta-demo.is-static .ta-pop { opacity: 1; }
.ta-pop-msg {
    right: -58px;
    top: 49%;
    max-width: 170px;
    background: var(--lp-card);
    border-bottom-right-radius: 4px;
    line-height: 1.35;
}
.ta-pop-msg b {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-purple);
}
.ta-pop-msg.is-in, .ta-demo.is-static .ta-pop-msg { transform: rotate(4deg); }
.ta-pop-paid {
    right: -34px;
    bottom: -26px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--lp-green);
    font-size: 1.15rem;
    font-weight: 900;
    border-radius: 999px;
    padding: 8px 16px 8px 8px;
}
.ta-pop-paid.is-in, .ta-demo.is-static .ta-pop-paid { transform: rotate(6deg); }
.ta-coin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--lp-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.ta-pop-paid.is-in .ta-coin { animation: taCoin 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) 0.1s; }
@keyframes taCoin { from { transform: rotateY(0) } to { transform: rotateY(720deg) } }

/* A little burst of lines as the money lands. */
.ta-burst { position: absolute; inset: 0; pointer-events: none; }
.ta-burst s {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 12px;
    margin: -6px 0 0 -2px;
    border-radius: 2px;
    background: var(--lp-ink);
    opacity: 0;
}
.ta-pop-paid.is-in .ta-burst s { animation: taBurst 0.6s ease-out 0.15s; }
.ta-burst s:nth-child(1) { --a: 0deg; }
.ta-burst s:nth-child(2) { --a: 60deg; }
.ta-burst s:nth-child(3) { --a: 120deg; }
.ta-burst s:nth-child(4) { --a: 180deg; }
.ta-burst s:nth-child(5) { --a: 240deg; }
.ta-burst s:nth-child(6) { --a: 300deg; }
@keyframes taBurst {
    0%   { opacity: 1; transform: rotate(var(--a)) translateY(-30px) scaleY(1); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-62px) scaleY(0.3); }
}

@media (max-width: 560px)  { .ta-pop-msg { display: none; } }
@media (max-width: 900px) {
    .ta-pop-msg { right: -10px; top: 30%; }
    .ta-pop-paid { right: -6px; bottom: -30px; }
}

/* ── Journey cards: a moving vignette on each ─────────── */
.ta-grid .ta-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.ta-grid .ta-card:nth-child(even) { transform: rotate(0.7deg); }
.ta-vig {
    position: relative;
    height: 74px;
    margin: 0 0 16px;
    padding: 12px;
    border-radius: 14px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 01: an enquiry stepping through the pipeline. */
.ta-vig-pipe span {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    border-radius: 999px;
    border: 1.5px solid var(--lp-line);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
    animation: taPipe 6s steps(1) infinite;
}
.ta-vig-pipe span:nth-child(2) { animation-delay: -4.5s; }
.ta-vig-pipe span:nth-child(3) { animation-delay: -3s; }
.ta-vig-pipe span:nth-child(4) { animation-delay: -1.5s; background: var(--ta-orange); color: var(--lp-ink); border-color: var(--lp-ink); }
@keyframes taPipe {
    0%, 25%  { background: var(--ta-orange); color: var(--lp-ink); border-color: var(--lp-ink); }
    25.01%, 100% { background: transparent; color: var(--lp-ink-soft); border-color: var(--lp-line); }
}

/* 02: three tutors, ranked. */
.ta-vig-match { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 8px 12px; }
.ta-vig-match div { display: flex; align-items: center; gap: 8px; }
.ta-vig-match em {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lp-purple);
    color: #fff;
    font-style: normal;
    font-size: 0.55rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ta-vig-match div + div em { background: #c8b3ec; color: var(--lp-ink); }
.ta-vig-match i {
    height: 8px;
    width: var(--w);
    border-radius: 999px;
    background: var(--lp-purple);
    transform-origin: left;
    animation: taGrow 4s cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
.ta-vig-match div + div i { background: #c8b3ec; animation-delay: 0.15s; }
.ta-vig-match div + div + div i { animation-delay: 0.3s; }
@keyframes taGrow {
    0%       { transform: scaleX(0); }
    25%, 85% { transform: scaleX(1); }
    100%     { transform: scaleX(0); }
}

/* 03: a week, with Tuesday lighting up again and again. */
.ta-vig-week { justify-content: space-between; }
.ta-vig-week span {
    flex: 1;
    aspect-ratio: 1;
    max-width: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--lp-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--lp-ink-soft);
}
.ta-vig-week .is-on {
    background: var(--lp-blue);
    border: 2px solid var(--lp-ink);
    color: #fff;
    animation: taBounce 1.6s cubic-bezier(0.34, 1.6, 0.64, 1) infinite;
}
@keyframes taBounce {
    0%, 60%, 100% { transform: translateY(0) rotate(0); }
    30%           { transform: translateY(-7px) rotate(-6deg); }
}

/* 04 and the teaching panel: a voice note's waveform. */
.ta-vig-wave { gap: 4px; }
.ta-vig-wave b,
.ta-voice-note b {
    flex: none;
    width: 34px;
    height: 34px;
    margin-right: 6px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--lp-green);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: taPulse 1.6s ease-out infinite;
}
.ta-vig-wave b svg,
.ta-voice-note b svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2.2;
    stroke-linecap: round;
}
@keyframes taPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 199, 141, 0.55); }
    100% { box-shadow: 0 0 0 12px rgba(0, 199, 141, 0); }
}
.ta-vig-wave s,
.ta-voice-bars s {
    flex: 1;
    height: 60%;
    max-width: 8px;
    border-radius: 999px;
    background: var(--lp-ink);
    animation: taWave 1.1s ease-in-out infinite;
}
.ta-vig-wave s:nth-of-type(3n+1), .ta-voice-bars s:nth-of-type(3n+1) { animation-delay: -0.3s; height: 40%; }
.ta-vig-wave s:nth-of-type(3n+2), .ta-voice-bars s:nth-of-type(3n+2) { animation-delay: -0.7s; height: 75%; }
.ta-vig-wave s:nth-of-type(4n),   .ta-voice-bars s:nth-of-type(4n)   { animation-delay: -0.5s; height: 30%; }
@keyframes taWave {
    0%, 100% { transform: scaleY(0.35); }
    50%      { transform: scaleY(1); }
}

/* 05: an invoice, stamped paid. */
.ta-vig-inv { justify-content: center; }
.ta-vig-inv div {
    width: 62%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ta-vig-inv i { height: 6px; border-radius: 3px; background: var(--lp-line); }
.ta-vig-inv i:nth-child(2) { width: 70%; }
.ta-vig-inv i:nth-child(3) { width: 45%; }
.ta-vig-inv strong { align-self: flex-end; font-size: 0.8rem; font-weight: 900; margin-top: -2px; }
.ta-vig-inv span {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 2px 12px;
    border: 3px solid var(--lp-pen);
    border-radius: 8px;
    color: var(--lp-pen);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 253, 248, 0.8);
    transform: translate(-50%, -50%) rotate(-12deg);
    animation: taStamp 4s cubic-bezier(0.5, 0, 0.3, 1.4) infinite;
}
@keyframes taStamp {
    0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); }
    42%, 90% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

/* 06: coins dropping into the pay run. */
.ta-vig-pay { justify-content: center; gap: 12px; }
.ta-vig-pay span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--lp-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 900;
    animation: taDrop 2.4s cubic-bezier(0.5, 0, 0.3, 1.5) infinite;
}
.ta-vig-pay span:nth-child(2) { animation-delay: 0.2s; }
.ta-vig-pay span:nth-child(3) { animation-delay: 0.4s; }
.ta-vig-pay b {
    padding: 5px 12px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    background: var(--ta-pink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@keyframes taDrop {
    0%       { opacity: 0; transform: translateY(-40px) rotate(-40deg); }
    30%, 80% { opacity: 1; transform: translateY(0) rotate(0); }
    100%     { opacity: 0; transform: translateY(10px); }
}

/* ── Teaching panel: dotted paper, and a voice note turning into a report ── */
.ta-teach-panel {
    position: relative;
    background-color: var(--lp-blue);
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px);
    background-size: 22px 22px;
}
.ta-voice {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    max-width: 360px;
}
.ta-voice-note,
.ta-voice-report {
    border: 2px solid var(--lp-ink);
    border-radius: 18px;
    background: var(--lp-card);
    color: var(--lp-ink);
    box-shadow: 0 4px 0 var(--lp-ink);
}
.ta-voice-note {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    height: 58px;
    border-bottom-left-radius: 4px;
    transform: rotate(-2deg);
}
.ta-voice-bars { flex: 1; display: flex; align-items: center; gap: 4px; height: 100%; }
.ta-voice-note em { font-style: normal; font-size: 0.8rem; font-weight: 900; margin-left: 8px; color: var(--lp-ink-soft); }
.ta-voice-arrow {
    width: 54px;
    height: 36px;
    margin-left: 40px;
    fill: none;
    stroke: var(--lp-amber);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ta-voice-report {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transform: rotate(1.5deg);
    margin-left: 24px;
}
.ta-voice-report strong { font-size: 0.9rem; font-weight: 900; }
.ta-voice-report i {
    height: 7px;
    border-radius: 4px;
    background: var(--lp-line);
    transform-origin: left;
    animation: taType 5s steps(8, end) infinite;
}
.ta-voice-report i:nth-of-type(2) { width: 85%; animation-delay: 0.4s; }
.ta-voice-report i:nth-of-type(3) { width: 60%; animation-delay: 0.8s; }
.ta-voice-report span {
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--lp-ink);
    background: var(--lp-green);
    font-size: 0.72rem;
    font-weight: 900;
    animation: taTag 5s cubic-bezier(0.34, 1.7, 0.64, 1) infinite;
}
@keyframes taType {
    0%, 10% { transform: scaleX(0); }
    40%, 92% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}
@keyframes taTag {
    0%, 45% { opacity: 0; transform: scale(0.4) rotate(-10deg); }
    55%, 92% { opacity: 1; transform: scale(1) rotate(-3deg); }
    100% { opacity: 0; transform: scale(1) rotate(-3deg); }
}

/* The six "only here" cards tip slightly, in turn, and straighten on hover. */
.ta-only li { transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.3s ease; box-shadow: 0 4px 0 var(--lp-ink); }
.ta-only li:nth-child(4n+1) { transform: rotate(-1deg); }
.ta-only li:nth-child(4n+2) { transform: rotate(1.2deg); }
.ta-only li:nth-child(4n+3) { transform: rotate(0.8deg); }
.ta-only li:nth-child(4n)   { transform: rotate(-1.3deg); }
.ta-only li:hover { transform: rotate(0) translateY(-4px) scale(1.02); box-shadow: 0 8px 0 var(--lp-ink); }


/* The journey card that points down to the studio. */
.ta-card-link { color: var(--lp-ink); text-decoration: none; background: var(--lp-card); border-color: var(--lp-ink); }
.ta-card-link:hover { background: var(--lp-green); }

/* ── Resource studio ─────────────────────────────────────
   A blue band (.lp-band-blue) with one big app window in it: the session and its four
   resources down the side, the chosen one on the canvas. Panels share one
   grid cell and cross-fade, each opening on a brief "making" overlay. */
.ta-studio { padding: 84px 0 92px; }
.ta-studio-head { text-align: center; }
.ta-studio-head .lp-h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); max-width: 16ch; margin: 0 auto; }
.ta-studio-head .ta-lede { margin-top: 18px; font-size: 1.1rem; }

/* The window. */
.ta-app {
    margin-top: 52px;
    border: 2px solid var(--lp-ink);
    border-radius: 24px;
    background: var(--lp-card);
    box-shadow: 12px 12px 0 var(--lp-ink);
    overflow: hidden;
}
.ta-app-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    border-bottom: 2px solid var(--lp-ink);
    background: var(--lp-paper);
}
.ta-app-bar span { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--lp-ink); }
.ta-app-bar span:nth-child(1) { background: var(--lp-red); }
.ta-app-bar span:nth-child(2) { background: var(--lp-amber); }
.ta-app-bar span:nth-child(3) { background: var(--lp-green); }
.ta-app-bar em { margin-left: 10px; font-style: normal; font-size: 0.85rem; font-weight: 800; color: var(--lp-ink-soft); }
.ta-app-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); }

.ta-app-side {
    padding: 22px 18px;
    border-right: 2px solid var(--lp-ink);
    background: var(--lp-card);
}
.ta-session {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 2px solid var(--lp-ink);
    border-radius: 16px;
    background: #fdeecd;
}
.ta-session > b { font-size: 1.3rem; font-weight: 900; }
.ta-session-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ta-session-meta i {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--lp-ink);
}
.ta-session-next { display: grid; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-ink-soft); }
.ta-session-next strong { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--lp-ink); }
.ta-app-label {
    display: block;
    margin: 22px 4px 10px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}

/* The four tabs, as a list down the side. */
.ta-tabs { display: grid; gap: 8px; }
.ta-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px 9px 9px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--lp-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.ta-tab > span { display: grid; font-size: 1.02rem; font-weight: 900; }
.ta-tab small { font-size: 0.75rem; font-weight: 700; color: var(--lp-ink-soft); }
.ta-tab i {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.ta-tab svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ta-tab:hover { background: var(--lp-paper); }
.ta-tab.is-active {
    background: var(--lp-paper);
    border-color: var(--lp-ink);
    box-shadow: 0 3px 0 var(--lp-ink);
    transform: translateX(4px);
}
.ta-tab.is-active i { background: var(--c); transform: rotate(-8deg) scale(1.08); }
.ta-tab:focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 2px; }

/* The canvas. Its colour follows the chosen resource. */
.ta-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 480px;
    padding: 40px;
    background-color: var(--lp-paper);
    background-image: radial-gradient(rgba(30, 27, 46, 0.12) 1.5px, transparent 1.6px);
    background-size: 20px 20px;
    transition: background-color 0.4s ease;
}
.ta-stage:has(.ta-res-sheet.is-active) { background-color: #d9f5ea; }
.ta-stage:has(.ta-res-quiz.is-active)  { background-color: #fdeccb; }
.ta-stage:has(.ta-res-book.is-active)  { background-color: #ece2fb; }
.ta-res {
    position: relative;
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.ta-res.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.ta-res > :not(.ta-making) { transform: translateY(18px) scale(0.94); opacity: 0; }
.ta-res.is-active > :not(.ta-making) {
    transform: none;
    opacity: 1;
    transition: transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) 0.9s, opacity 0.3s ease 0.9s;
}

/* "Making slides for Mia…", shown for a moment as each resource opens.
   At rest it is hidden, so without animation the resource is simply there. */
.ta-making {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    font-size: 1rem;
    font-weight: 900;
}
.ta-making i {
    position: relative;
    width: 200px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    background: #fff;
    overflow: hidden;
}
.ta-making i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lp-ink);
    transform-origin: left;
    transform: scaleX(0);
}
.ta-res.is-active .ta-making { animation: taMaking 1s ease forwards; }
.ta-res.is-active .ta-making i::after { animation: taMakingBar 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes taMaking {
    0%, 80% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; }
}
@keyframes taMakingBar { to { transform: scaleX(1); } }

/* Three short facts under the window. */
.ta-studio-facts {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.ta-studio-facts b {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 900;
}
.ta-studio-facts b::before {
    content: '\2713';
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--lp-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.ta-studio-facts span {
    display: block;
    margin: 8px 0 0 36px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--lp-ink-soft);
}
@media (max-width: 900px) {
    .ta-app-body { grid-template-columns: 1fr; }
    .ta-app-side { border-right: 0; border-bottom: 2px solid var(--lp-ink); }
    .ta-tabs { grid-template-columns: 1fr 1fr; }
    .ta-studio-facts { grid-template-columns: 1fr; gap: 20px; }
}

/* Slides */
.ta-slide {
    width: min(100%, 540px);
    aspect-ratio: 16 / 9;
    padding: 22px 26px;
    border: 2px solid var(--lp-ink);
    border-radius: 14px;
    background: var(--lp-card);
    box-shadow: 0 6px 0 var(--lp-ink);
    display: flex;
    flex-direction: column;
}
.ta-slide-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-blue); }
.ta-slide-title { margin-top: 4px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 900; letter-spacing: -0.02em; }
.ta-slide-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.ta-slide-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ta-slide-body li { display: flex; align-items: center; gap: 8px; }
.ta-slide-body li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-blue); }
.ta-slide-body u { display: block; height: 8px; border-radius: 4px; background: var(--lp-line); }
/* Two ions a gap apart, the electron hopping from one to the other. */
.ta-ions { --gap: 70px; position: relative; display: flex; align-items: center; justify-content: center; gap: var(--gap); height: 100%; }
.ta-ion {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 900;
}
.ta-ion sup { font-size: 0.7em; }
.ta-ion-na { background: var(--lp-amber); }
.ta-ion-cl { background: var(--lp-green); }
.ta-electron {
    position: absolute;
    left: calc(50% - var(--gap) / 2 - 6px);
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--lp-pen);
    border: 2px solid var(--lp-ink);
    animation: taElectron 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes taElectron {
    0%, 15%   { transform: translateX(0); }
    55%, 100% { transform: translateX(var(--gap)); }
}
.ta-thumbs { margin-top: 18px; display: flex; gap: 8px; }
.ta-thumbs span {
    width: 52px;
    height: 30px;
    border-radius: 6px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-card);
}
.ta-thumbs .is-on { background: var(--lp-blue); }

/* Worksheet */
.ta-paper {
    width: min(100%, 380px);
    padding: 22px 26px 26px;
    border: 2px solid var(--lp-ink);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 0 var(--lp-ink);
    transform: rotate(-2deg);
}
.ta-paper-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--lp-ink); }
.ta-paper-head b { font-size: 1.15rem; font-weight: 900; }
.ta-paper-head span { display: flex; align-items: baseline; gap: 6px; font-size: 0.75rem; font-weight: 800; color: var(--lp-ink-soft); }
.ta-paper-head u { display: inline-block; width: 70px; border-bottom: 1.5px solid var(--lp-ink-soft); }
.ta-paper ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 14px; font-weight: 900; font-size: 0.85rem; }
.ta-paper li i { display: inline-block; vertical-align: middle; height: 8px; border-radius: 4px; background: rgba(30, 27, 46, 0.2); margin: 0 0 10px; }
.ta-paper li em { display: block; height: 14px; border-bottom: 1.5px dashed rgba(30, 27, 46, 0.3); }
.ta-paper-box { display: flex; gap: 10px; }
.ta-paper-box s { flex: 1; height: 40px; border: 1.5px dashed rgba(30, 27, 46, 0.35); border-radius: 8px; }

/* Quiz */
.ta-quiz {
    width: min(100%, 400px);
    padding: 22px;
    border: 2px solid var(--lp-ink);
    border-radius: 22px;
    background: var(--lp-card);
    box-shadow: 0 6px 0 var(--lp-ink);
}
.ta-quiz-count { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-ink-soft); }
.ta-quiz > b { display: block; margin: 6px 0 16px; font-size: 1.2rem; font-weight: 900; line-height: 1.3; }
.ta-quiz ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ta-quiz li {
    padding: 12px;
    border: 2px solid var(--lp-ink);
    border-radius: 14px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 900;
    background: #fff;
}
.ta-quiz li.is-right { background: var(--lp-green); }
.ta-res-quiz.is-active li.is-right { animation: taRight 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) 0.8s backwards; }
@keyframes taRight {
    from { background: #fff; transform: scale(1); }
    50%  { transform: scale(1.1) rotate(-3deg); }
    to   { background: var(--lp-green); transform: none; }
}
.ta-quiz-bar { margin-top: 18px; height: 10px; border-radius: 999px; border: 2px solid var(--lp-ink); overflow: hidden; background: var(--lp-paper); }
.ta-quiz-bar i { display: block; width: 37.5%; height: 100%; background: var(--lp-amber); }

/* Booklet */
.ta-book { position: relative; width: 250px; height: 330px; }
.ta-book-page {
    position: absolute;
    inset: 0;
    border: 2px solid var(--lp-ink);
    border-radius: 8px;
    background: #fff;
    transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.2s;
}
.ta-book-p3 { transform: rotate(9deg) translateX(40px); }
.ta-book-p2 { transform: rotate(4deg) translateX(20px); padding: 60px 22px; display: grid; align-content: start; gap: 12px; }
.ta-book-p2 i { height: 8px; border-radius: 4px; background: var(--lp-line); }
.ta-book-p2 i:nth-child(2n) { width: 70%; }
.ta-book-cover {
    background: var(--lp-purple);
    color: #fff;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    box-shadow: 0 6px 0 var(--lp-ink);
    transform: rotate(-3deg);
}
.ta-book-cover span { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.ta-book-cover b { font-size: 1.9rem; font-weight: 900; line-height: 1.05; }
.ta-book-cover em { font-style: normal; font-size: 0.85rem; font-weight: 800; opacity: 0.85; }
.ta-res-book:not(.is-active) .ta-book-page { transform: none; }

@media (max-width: 560px) {
    .ta-stage { padding: 28px 14px; min-height: 340px; }
    .ta-tabs { grid-template-columns: 1fr; }
    .ta-slide { padding: 14px 16px; }
    .ta-ion { width: 44px; height: 44px; font-size: 0.85rem; }
    .ta-ions { --gap: 36px; }
    .ta-book { width: 200px; height: 264px; }
    .ta-thumbs { width: 100%; justify-content: center; }
    .ta-thumbs span { flex: 1; max-width: 52px; height: 26px; }
}

/* ── Everything else: a wall of all sixteen ──────────────
   Colour-coded by who each is for (the legend above says which). Four
   double-width cards carry a moving picture; the rest are compact. */
.g-blue { --g: var(--lp-blue);   --g-soft: #e6ecff; --g-tile: #9fb4ff; }
.g-purple { --g: var(--lp-purple); --g-soft: #efe4fb; --g-tile: #c8b3ec; }
.g-amber { --g: var(--lp-amber);  --g-soft: #fdeecd; --g-tile: var(--lp-amber); }
.g-green { --g: var(--lp-green);  --g-soft: #ddf6ec; --g-tile: var(--lp-green); }
.ta-legend {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.ta-legend li { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 800; color: var(--lp-ink-soft); }
.ta-legend li::before { content: ''; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--lp-ink); background: var(--g-tile); }

.ta-wall {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ta-f {
    padding: 18px;
    border: 2px solid var(--lp-ink);
    border-radius: 20px;
    background: var(--lp-card);
    box-shadow: 0 4px 0 var(--lp-ink);
    transition: transform 0.25s cubic-bezier(0.34, 1.6, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
}
.ta-f:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 8px 0 var(--lp-ink); background: var(--g-soft); }
.ta-f > b, .ta-f-text > b { display: block; font-size: 1.02rem; font-weight: 900; }
.ta-f > span, .ta-f-text > span { display: block; margin-top: 5px; font-size: 0.86rem; font-weight: 600; line-height: 1.5; color: var(--lp-ink-soft); }
.ta-ico {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 12px;
    border: 2px solid var(--lp-ink);
    background: var(--g-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-4deg);
    transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.ta-f:hover .ta-ico { transform: rotate(8deg) scale(1.12); }
.ta-ico svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The double-width cards: picture on the left, words on the right. */
.ta-f-wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 18px;
    align-items: center;
    background: var(--g-soft);
}
.ta-f-wide:hover { background: var(--g-soft); }
.ta-f-wide .ta-f-text > b { font-size: 1.15rem; }
.ta-f-art {
    position: relative;
    height: 180px;
    border: 2px solid var(--lp-ink);
    border-radius: 14px;
    background: var(--lp-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1000px) { .ta-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
    .ta-wall { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ta-f { padding: 14px; }
    .ta-f > span, .ta-f-text > span { font-size: 0.8rem; }
    .ta-f-wide { grid-template-columns: 1fr; }
}

/* Families: the parent portal, with coverage of the spec filling and the
   rows landing one after another, like the webhook log beside it. */
.ta-portal, .ta-vet { width: 88%; display: grid; gap: 7px; }
.ta-portal-head { display: flex; align-items: baseline; gap: 8px; }
.ta-portal-head b { font-size: 0.9rem; font-weight: 900; }
.ta-portal-head span { font-size: 0.68rem; font-weight: 800; color: var(--lp-ink-soft); }
.ta-portal-spec {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--lp-ink-soft);
}
.ta-portal-spec em { font-style: normal; font-weight: 900; color: var(--lp-ink); }
.ta-portal-spec i {
    grid-column: 1 / -1;
    height: 9px;
    border-radius: 999px;
    border: 1.5px solid var(--lp-ink);
    background: #fff;
    overflow: hidden;
}
.ta-portal-spec s {
    display: block;
    width: 62%;
    height: 100%;
    background: var(--lp-blue);
    transform-origin: left;
    animation: taFill 4.5s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
}
@keyframes taFill {
    0%, 5%   { transform: scaleX(0); }
    30%, 90% { transform: scaleX(1); }
    100%     { transform: scaleX(0); }
}
.ta-portal ul, .ta-vet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ta-portal li, .ta-vet li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 7px;
    background: var(--lp-paper);
    font-size: 0.7rem;
    animation: taHook 4.5s ease infinite;
}
.ta-portal li:nth-child(2), .ta-vet li:nth-child(2) { animation-delay: 0.4s; }
.ta-portal li:nth-child(3), .ta-vet li:nth-child(3) { animation-delay: 0.8s; }
.ta-vet li:nth-child(4) { animation-delay: 1.2s; }
.ta-portal li b { flex: 1; font-weight: 800; }
.ta-portal li span { font-weight: 800; color: var(--lp-ink-soft); }
.ta-portal li span.is-new,
.ta-vet li i {
    padding: 0 6px;
    border-radius: 4px;
    border: 1.5px solid var(--lp-ink);
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 900;
    color: var(--lp-ink);
}
.ta-portal li span.is-new { background: var(--lp-amber); }
.ta-portal li span.is-ok { color: var(--lp-green-deep); }

/* Tutors: the checks register, with one due for renewal. */
.ta-vet-head {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--lp-purple);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ta-vet li b { width: 62px; flex: none; font-weight: 900; }
.ta-vet li span { flex: 1; font-weight: 700; color: var(--lp-ink-soft); }
.ta-vet li i.is-ok { background: var(--lp-green); }
.ta-vet li i.is-due { background: var(--lp-amber); animation: taDue 1.6s ease-in-out infinite; }
@keyframes taDue { 50% { transform: scale(1.08) rotate(-2deg); } }

/* Office: a bar chart growing. */
.ta-chart { display: flex; align-items: flex-end; gap: 12px; height: 100px; width: 70%; border-bottom: 2px solid var(--lp-ink); }
.ta-chart span {
    flex: 1;
    height: var(--h);
    border: 2px solid var(--lp-ink);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--lp-amber);
    transform-origin: bottom;
    animation: taBar 5s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
.ta-chart span:nth-child(2) { animation-delay: 0.1s; }
.ta-chart span:nth-child(3) { animation-delay: 0.2s; }
.ta-chart span:nth-child(4) { animation-delay: 0.3s; }
.ta-chart span:nth-child(5) { animation-delay: 0.4s; }
.ta-chart span:nth-child(6) { animation-delay: 0.5s; background: var(--lp-green); }
@keyframes taBar {
    0%        { transform: scaleY(0); }
    20%, 88%  { transform: scaleY(1); }
    100%      { transform: scaleY(0); }
}

/* Systems: an API call, and webhook deliveries landing one after another. */
.ta-hooks {
    width: 86%;
    display: grid;
    gap: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ta-hooks-call {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 2px solid var(--lp-ink);
    border-radius: 8px;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.ta-hooks-call em {
    font-style: normal;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--lp-blue);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
}
.ta-hooks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ta-hooks li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 7px;
    background: var(--lp-paper);
    font-size: 0.7rem;
    animation: taHook 4.5s ease infinite;
}
.ta-hooks li b { font-weight: 700; }
.ta-hooks li i {
    font-style: normal;
    font-weight: 800;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--lp-green);
    border: 1.5px solid var(--lp-ink);
    font-size: 0.64rem;
}
.ta-hooks li:nth-child(2) { animation-delay: 0.5s; }
.ta-hooks li:nth-child(3) { animation-delay: 1s; }
@keyframes taHook {
    0%, 5%   { opacity: 0; transform: translateY(-6px); }
    15%, 88% { opacity: 1; transform: none; }
    100%     { opacity: 0; }
}

/* ── Your brand ──────────────────────────────────────────
   The same public page and email in a made-up agency's colours; --b is set
   by tutoring-landing.js, and everything branded follows it. */
.ta-brand {
    --b: #c2552d;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
}
.ta-brand-copy .ta-lede { margin: 16px 0 0; }
.ta-brand-where {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 10px 28px;
}
.ta-brand-where li { display: flex; align-items: center; gap: 9px; font-size: 0.95rem; font-weight: 800; }
.ta-brand-where li::before {
    content: '\2713';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    transition: background 0.5s ease;
}
.ta-swatches { margin-top: 30px; display: flex; align-items: center; gap: 10px; }
.ta-swatches > span { margin-right: 4px; font-size: 0.8rem; font-weight: 800; color: var(--lp-ink-soft); }
.ta-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--s);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.6, 0.64, 1), box-shadow 0.2s ease;
}
.ta-swatch:hover { transform: scale(1.15); }
.ta-swatch.is-on { box-shadow: 0 0 0 3px var(--lp-card), 0 0 0 5px var(--lp-ink); }
.ta-swatch:focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 5px; }

.ta-brand-art { position: relative; padding: 0 40px 70px 0; }
.ta-brand-art [data-b] { transition: opacity 0.2s ease; }
.ta-brand.is-swapping .ta-brand-art [data-b] { opacity: 0; }
.ta-site {
    border: 2px solid var(--lp-ink);
    border-radius: 18px;
    background: #fff;
    box-shadow: 10px 10px 0 rgba(30, 27, 46, 0.9);
    overflow: hidden;
    transform: rotate(-1deg);
}
.ta-site-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 2px solid var(--lp-ink);
    background: var(--lp-paper);
}
.ta-site-bar > span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--lp-ink); background: #fff; }
.ta-url {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(30, 27, 46, 0.25);
    background: #fff;
    font-style: normal;
    font-size: 0.78rem;
}
.ta-url b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-url svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--lp-green-deep); stroke-width: 2.4; stroke-linecap: round; }
.ta-site-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--b);
    color: #fff;
    transition: background 0.5s ease;
}
.ta-site-head b { font-size: 1.05rem; font-weight: 900; }
.ta-logo {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    color: var(--b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 900;
    transform: rotate(-5deg);
    transition: color 0.5s ease, opacity 0.2s ease;
}
.ta-site-body { padding: 20px 20px 24px; }
.ta-site-h { display: block; font-size: 1.3rem; font-weight: 900; color: var(--b); transition: color 0.5s ease; }
.ta-site-tutors { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ta-site-tutors > div {
    display: grid;
    justify-items: start;
    gap: 3px;
    padding: 12px;
    border: 1.5px solid rgba(30, 27, 46, 0.18);
    border-radius: 14px;
}
.ta-site-av {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--b) 22%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    transition: background 0.5s ease;
}
.ta-site-tutors b { font-size: 0.92rem; font-weight: 900; }
.ta-site-tutors small { font-size: 0.74rem; font-weight: 700; color: var(--lp-ink-soft); }
.ta-site-tutors i {
    margin-top: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--b);
    color: #fff;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 900;
    transition: background 0.5s ease;
}
.ta-mail {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    border: 2px solid var(--lp-ink);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 0 var(--lp-ink);
    overflow: hidden;
    transform: rotate(3deg);
}
.ta-mail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--b);
    color: #fff;
    transition: background 0.5s ease;
}
.ta-mail-head .ta-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 0.64rem; }
.ta-mail-head b { font-size: 0.85rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-mail-body { display: grid; gap: 7px; padding: 14px; }
.ta-mail-body b { font-size: 0.95rem; font-weight: 900; }
.ta-mail-body i { height: 7px; border-radius: 4px; background: var(--lp-line); }
.ta-mail-body i:nth-of-type(2) { width: 80%; }
.ta-mail-body i:nth-of-type(3) { width: 55%; }

@media (max-width: 900px) {
    .ta-brand { grid-template-columns: 1fr; gap: 36px; }
    .ta-brand-art { padding-right: 16px; }
}
@media (max-width: 480px) {
    .ta-site-tutors { grid-template-columns: 1fr; }
    .ta-site-tutors > div:nth-child(2) { display: none; }
    .ta-mail { width: 78%; }
}

/* ── Mascots ─────────────────────────────────────────────
   Perched on the studio window, the teaching panel and the brand's page,
   each standing on its top border. */
.ta-app-wrap { position: relative; }
.ta-app-wrap { margin-top: 52px; }
.ta-app-wrap .ta-app { margin-top: 0; }
.ta-perch-studio { right: 70px; bottom: calc(100% - 5px); }
.ta-perch-teach { right: 60px; bottom: calc(100% - 5px); }
.ta-perch-brand { left: 36px; bottom: calc(100% - 5px); }
.ta-brand-art .ta-site { position: relative; overflow: visible; }
.ta-brand-art .ta-site-bar { border-radius: 16px 16px 0 0; }
@media (max-width: 560px) {
    .ta-perch-studio { right: 24px; }
    .ta-perch-teach { right: 20px; }
}

/* ══ Landing page: steps, wall and mascots ═══════════════
   The main page borrows the tutoring page's wall (.ta-wall …); what is here
   is only what differs for teachers. */

/* ── Steps: a small scene above each ─────────────────────
   Each step is locked to a third of the row (min-width: 0), so nothing
   animating inside a scene can change the row's layout. */
.lp-steps-row .lp-step { min-width: 0; }
.lp-step-scene {
    position: relative;
    height: 132px;
    margin-bottom: 20px;
    border: 2px solid var(--lp-ink);
    border-radius: 20px;
    background-color: var(--ss-bg);
    background-image: radial-gradient(rgba(30, 27, 46, 0.1) 1.5px, transparent 1.6px);
    background-size: 18px 18px;
    box-shadow: 0 5px 0 var(--lp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: left;
}
.lp-ss-type { --ss-bg: #e6ecff; }
.lp-ss-pick { --ss-bg: #ddf6ec; }
.lp-ss-edit { --ss-bg: #fdeecd; }
.lp-step-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.lp-step-head .lp-step-num {
    flex: none;
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 0.95rem;
    box-shadow: 0 3px 0 var(--lp-ink);
}
.lp-step-head h3 { margin: 0; }
.lp-steps-row .lp-step-arrow { padding-top: 46px; }

/* 1: the topic typing itself into a search box. */
.lp-ss-input {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 92%;
    height: 46px;
    padding: 0 10px;
    border: 2px solid var(--lp-ink);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 0 var(--lp-ink);
}
.lp-ss-input svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--lp-ink-soft);
    stroke-width: 2.4;
    stroke-linecap: round;
}
/* The words are revealed over their own width with a clip, and the caret
   rides along at the same steps, so the typing always finishes on the last
   letter whatever room the box has. At rest (reduced motion) the whole
   topic shows, caret at the end. */
.lp-ss-typed {
    position: relative;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 800;
}
.lp-ss-typed b {
    font-weight: inherit;
    animation: lpSsType 6s steps(21, end) infinite;
}
.lp-ss-typed::after {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 100%;
    width: 2px;
    margin-left: 1px;
    background: var(--lp-blue);
    animation: lpSsCaret 6s steps(21, end) infinite, lpSsBlink 0.8s step-end infinite;
}
@keyframes lpSsType {
    0%       { clip-path: inset(-4px 100% -4px 0); }
    45%, 90% { clip-path: inset(-4px 0 -4px 0); }
    100%     { clip-path: inset(-4px 100% -4px 0); }
}
@keyframes lpSsCaret {
    0%       { left: 0; }
    45%, 90% { left: 100%; }
    100%     { left: 0; }
}
@keyframes lpSsBlink { 50% { opacity: 0; } }

/* 2: a board and a level rolling through their options. */
.lp-ss-pick { gap: 12px; }
.lp-ss-select {
    width: 38%;
    padding: 8px 12px 10px;
    border: 2px solid var(--lp-ink);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 0 var(--lp-ink);
}
.lp-ss-select small {
    display: block;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-ink-soft);
}
.lp-ss-roll {
    display: block;
    height: 24px;
    margin-top: 2px;
    overflow: hidden;
}
.lp-ss-roll i {
    display: block;
    height: 24px;
    line-height: 24px;
    font-style: normal;
    font-size: 1rem;
    font-weight: 900;
}
.lp-ss-roll-4 i { animation: lpSsRoll4 8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.lp-ss-roll-3 i { animation: lpSsRoll3 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes lpSsRoll4 {
    0%, 20%  { transform: translateY(0); }
    25%, 45% { transform: translateY(-24px); }
    50%, 70% { transform: translateY(-48px); }
    75%, 95% { transform: translateY(-72px); }
    100%     { transform: translateY(-96px); }
}
@keyframes lpSsRoll3 {
    0%, 28%  { transform: translateY(0); }
    33%, 61% { transform: translateY(-24px); }
    66%, 94% { transform: translateY(-48px); }
    100%     { transform: translateY(-72px); }
}

/* 3: a line on a slide rewritten when asked. */
.lp-ss-slide {
    width: 58%;
    height: 76%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 12px 14px;
    border: 2px solid var(--lp-ink);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 0 var(--lp-ink);
    transform: translateX(-14%);
}
.lp-ss-slide b { width: 62%; height: 9px; border-radius: 5px; background: var(--lp-ink); margin-bottom: 3px; }
.lp-ss-slide i { height: 6px; border-radius: 3px; background: var(--lp-line); }
.lp-ss-slide i:last-child { width: 70%; }
.lp-ss-slide .lp-ss-redo {
    width: 88%;
    transform-origin: left;
    animation: lpSsRedo 5s ease-in-out infinite;
}
@keyframes lpSsRedo {
    0%, 30%  { transform: scaleX(1); background: var(--lp-line); }
    38%      { transform: scaleX(1); background: var(--lp-amber); }
    48%      { transform: scaleX(0); background: var(--lp-amber); }
    62%, 90% { transform: scaleX(0.66); background: var(--lp-green); }
    100%     { transform: scaleX(1); background: var(--lp-line); }
}
.lp-ss-ask {
    position: absolute;
    right: 8%;
    bottom: 18px;
    padding: 7px 12px;
    border: 2px solid var(--lp-ink);
    border-radius: 14px 14px 4px 14px;
    background: var(--lp-blue);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--lp-ink);
    animation: lpSsAsk 5s ease infinite;
}
@keyframes lpSsAsk {
    0%, 6%   { opacity: 0; transform: translateY(8px) scale(0.85); }
    14%, 88% { opacity: 1; transform: none; }
    100%     { opacity: 0; }
}

/* Stacked, and left-aligned, once three abreast would squeeze the scenes
   (below this the typed topic no longer fits its box). */
@media (max-width: 1000px) {
    .lp-steps-row { flex-direction: column; align-items: stretch; gap: 34px; }
    .lp-steps-row .lp-step { text-align: left; }
    .lp-steps-row .lp-step-arrow { display: none; }
    .lp-step-scene { max-width: 460px; }
    .lp-step-head { justify-content: flex-start; }
}

/* ── Everything else it does ─────────────────────────── */
.lp-more { padding: 72px 0 40px; }
.lp-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--lp-pen);
    vertical-align: 1px;
    animation: taDue 1.2s ease-in-out infinite;
}
.lp-art-live li { gap: 8px; }
.lp-art-live li b { flex: none; width: 46px; }
.lp-art-bar {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--lp-ink);
    overflow: hidden;
}
.lp-art-bar s {
    display: block;
    height: 100%;
    width: var(--w);
    background: var(--lp-blue);
    transform-origin: left;
    animation: taFill 4.5s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
}
.lp-art-live li span:last-child { width: 38px; text-align: right; }

.lp-art-langs { width: 84%; display: grid; gap: 8px; }
.lp-art-kw {
    justify-self: start;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--lp-green);
    border: 1.5px solid var(--lp-ink);
    font-size: 0.8rem;
    font-weight: 900;
}
.lp-art-langs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-art-langs li {
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--lp-paper);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lp-ink-soft);
    animation: taHook 4.5s ease infinite;
}
.lp-art-langs li:nth-child(2) { animation-delay: 0.4s; }
.lp-art-langs li:nth-child(3) { animation-delay: 0.8s; }

.lp-art-market { position: relative; width: 80%; }
.lp-art-listing {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 2px solid var(--lp-ink);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 0 var(--lp-ink);
}
.lp-art-listing b { font-size: 0.95rem; font-weight: 900; }
.lp-art-listing span { font-size: 0.7rem; font-weight: 700; color: var(--lp-ink-soft); }
.lp-art-listing em { margin-top: 4px; font-style: normal; font-size: 0.78rem; font-weight: 800; }
.lp-art-credit {
    position: absolute;
    right: -10px;
    top: -14px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-amber);
    font-size: 0.78rem;
    font-weight: 900;
    transform: rotate(8deg);
    animation: taDue 1.8s ease-in-out infinite;
}
.lp-art-spec { width: 94%; }
.lp-art-spec li b { width: 52px; }
.lp-art-spec li span { white-space: nowrap; }

/* ── Mascots perched on the page ──────────────────────── */
.lp-sen { position: relative; }
.lp-perch-sen { right: 70px; bottom: calc(100% - 5px); }
.lp-perch-pilot { left: 60px; bottom: calc(100% - 5px); }
.lp-perch-price { right: 24px; bottom: calc(100% - 5px); }
@media (max-width: 560px) {
    .lp-perch-sen { right: 20px; }
    .lp-perch-pilot { left: 20px; }
}

/* The hero's label in the red pen, written in as the page opens, with an
   arrow curling down to the headline (landing-flair.js inks .lp-pen). */
.lp-kicker-pen {
    display: inline-block;
    margin-bottom: 18px;
    rotate: -2deg;
    transform-origin: left center;
}
.lp-kicker-pen .lp-pen-note { font-size: 1.75rem; }
.lp-kicker-pen .lp-pen-ink {
    right: -58px;
    top: 12px;
    width: 50px;
    height: 38px;
}
.lp-kicker-pen .lp-pen-ink path { transition-delay: 1.2s; }
.lp-kicker-pen .lp-pen-ink path + path { transition-delay: 1.75s; }
@media (max-width: 480px) {
    .lp-kicker-pen .lp-pen-note { font-size: 1.45rem; }
    .lp-kicker-pen .lp-pen-ink { display: none; }
}