@import url("tokens.css");

/* ==========================================================================
   Pocket Tutor marketing site (mobile first)
   Same brand as the chat app: colours only from tokens.css, chunky buttons,
   content on --surface cards or --night panels, never text on --bg unless --ink.
   Breakpoints: base = phones (320px+), 560px = wide / sideways phones (two across), 768px = tablet,
   900px = sideways tablets and small laptops (hero side by side, three across), 1100px = desktop (full nav).
   Sideways phones, (max-height: 500px) and (orientation: landscape), come last so they win: less padding,
   a compact menu that scrolls inside itself, and the hero side by side from 760px wide.
   ========================================================================== */

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background-color: var(--bg);
    /* Faint dots, a nod to the denim pocket in the logo */
    background-image: radial-gradient(var(--bg-edge) 1px, transparent 1.6px);
    background-size: 22px 22px;
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.55;
    overflow-x: hidden;
    overflow-x: clip; /* clip keeps the sticky header working where supported */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--heading);
    font-weight: 700;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-family: var(--font);
    font-weight: 900;
    line-height: 1.15;
    color: var(--heading);
    margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); }
h3 { font-size: var(--fs-h3); }

p {
    margin: 0 0 var(--space-4);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: calc(-1 * var(--tap) * 2);
    z-index: 2000;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-sm);
    font-weight: 800;
    box-shadow: var(--shadow-pop);
}

    .skip-link:focus {
        top: calc(var(--space-3) + env(safe-area-inset-top));
    }

/* ---------- Layout helpers ---------- */

.lp-wrap {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.lp-narrow {
    max-width: 820px;
}

.lp-section {
    padding: var(--space-7) 0;
}

/* Less space above and below (the trailer, which sits between two other sections) */
.lp-section.lp-section--tight {
    padding: var(--space-3) 0;
}

/* Carries straight on from the section above (Say hi, under Build your tutor), so no gap on top */
.lp-section.lp-section--follow {
    padding-top: 0;
}

.lp-card {
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}

.lp-section__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-6);
}

    .lp-section__head p:last-child {
        margin-bottom: 0;
        color: var(--ink-soft);
        font-weight: 600;
    }

.lp-kicker {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--night);
    color: var(--accent-yellow);
    font-size: var(--fs-small);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .lp-section__head .lp-kicker {
        color: var(--accent-yellow);
    }

.lp-kicker--night {
    background: var(--accent-yellow);
    color: var(--on-orange);
}

/* Night panels: stitched like the pocket in the logo */
.lp-night {
    background: var(--night);
    color: var(--on-night);
    outline: 2px dashed var(--yellow-edge);
    outline-offset: -10px;
}

    .lp-night h2,
    .lp-night h3 {
        color: var(--accent-yellow);
    }

.lp-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius);
    background: var(--bot);
    color: var(--on-orange);
    font-size: 1.5rem;
    box-shadow: 0 var(--press-depth) 0 var(--bot-edge);
}

/* ---------- Chunky buttons (same as the app's site.css) ---------- */

.btn-chunky {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: var(--space-2) var(--space-5);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--on-orange);
    background: var(--bot);
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 var(--press-depth) 0 var(--bot-edge);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s var(--ease-bounce), box-shadow 0.12s ease, filter 0.15s ease;
}

    .btn-chunky:hover {
        color: var(--on-orange);
        filter: brightness(1.05);
        transform: translateY(-2px);
        box-shadow: 0 calc(var(--press-depth) + 2px) 0 var(--bot-edge);
    }

    .btn-chunky:active {
        transform: translateY(var(--press-depth));
        box-shadow: none;
    }

.btn-chunky--secondary,
.btn-chunky--secondary:hover {
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 var(--press-depth) 0 var(--bg-edge), inset 0 0 0 2px var(--bg-edge);
}

    .btn-chunky--secondary:hover {
        box-shadow: 0 calc(var(--press-depth) + 2px) 0 var(--bg-edge), inset 0 0 0 2px var(--bg-edge);
    }

    .btn-chunky--secondary:active {
        box-shadow: inset 0 0 0 2px var(--bg-edge);
    }

.btn-chunky--yellow,
.btn-chunky--yellow:hover {
    color: var(--on-orange);
    background: var(--accent-yellow);
    box-shadow: 0 var(--press-depth) 0 var(--yellow-edge);
}

    .btn-chunky--yellow:hover {
        box-shadow: 0 calc(var(--press-depth) + 2px) 0 var(--yellow-edge);
    }

    .btn-chunky--yellow:active {
        box-shadow: none;
    }

.btn-chunky--sm {
    padding: var(--space-2) var(--space-4);
    font-size: 0.9375rem;
}

.btn-chunky--lg {
    min-height: 56px;
    padding: var(--space-3) var(--space-6);
    font-size: 1.125rem;
}

.btn-chunky--block {
    display: flex;
    width: 100%;
}

.lp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

    .lp-cta-row .btn-chunky {
        flex: 1 1 220px;
    }

.lp-cta-row--center {
    justify-content: center;
}

    .lp-cta-row--center .btn-chunky {
        flex: 0 1 260px;
    }

/* ---------- Header ---------- */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: env(safe-area-inset-top);
    background: var(--surface);
    box-shadow: 0 4px 0 var(--bg-edge);
}

.lp-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-2) max(var(--space-4), env(safe-area-inset-right)) var(--space-2) max(var(--space-4), env(safe-area-inset-left));
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    color: var(--ink);
    text-decoration: none;
}

    .lp-brand img {
        border-radius: 50%;
        box-shadow: 0 3px 0 var(--bg-edge);
    }

.lp-brand__name {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.lp-menu-btn {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--bg-edge);
}

.lp-nav {
    flex-basis: 100%;
    padding-bottom: var(--space-3);
}

/* With JS, the phone menu starts closed */
.js .lp-nav {
    display: none;
}

    .js .lp-nav.is-open {
        display: block;
    }

.lp-nav ul {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.lp-nav a:not(.btn-chunky) {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

    .lp-nav a:not(.btn-chunky):hover {
        background: var(--surface-2);
    }

.lp-nav__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ---------- Hero ---------- */

.lp-hero {
    padding: var(--space-6) 0 var(--space-5);
}

.lp-hero__grid {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    font-size: var(--fs-small);
    box-shadow: 0 3px 0 var(--bg-edge);
}

    .lp-eyebrow i {
        color: var(--heading);
    }

/* Sits on --bg, so it must be --ink */
.lp-hero__title {
    color: var(--ink);
    margin-top: var(--space-4);
}

.lp-strike {
    position: relative;
    white-space: nowrap;
}

    .lp-strike::after {
        content: "";
        position: absolute;
        left: -4%;
        right: -4%;
        top: 52%;
        height: 0.14em;
        border-radius: var(--radius-pill);
        background: var(--bot-edge);
        transform: rotate(-4deg);
    }

.lp-hero__hello {
    display: block;
    margin-top: var(--space-2);
}

.lp-pill {
    display: inline-block;
    padding: 0 0.3em 0.05em;
    border-radius: 0.3em;
    background: var(--bot);
    color: var(--on-orange);
    box-shadow: 0 6px 0 var(--bot-edge);
    transform: rotate(-2deg);
}

.lp-hero__lead {
    max-width: 38rem;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 600;
    box-shadow: var(--shadow-card);
}

.lp-hero__ticks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

    .lp-hero__ticks li {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-pill);
        background: var(--surface);
        color: var(--ink);
        font-size: var(--fs-small);
        font-weight: 800;
    }

        .lp-hero__ticks i {
            color: var(--success);
        }

/* Phone mock-up */
.lp-hero__visual {
    position: relative;
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

.lp-phone {
    border-radius: 36px;
    background: var(--night);
    padding: 12px;
    box-shadow: 0 10px 0 var(--night-edge), var(--shadow-pop);
    transform: rotate(2deg);
}

.lp-phone__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 26px 26px 0 0;
    background: var(--surface);
    color: var(--ink);
}

    .lp-phone__top img {
        border-radius: 50%;
        box-shadow: 0 0 0 3px var(--vivid);
    }

    .lp-phone__top strong {
        display: block;
        line-height: 1.1;
    }

    .lp-phone__top span {
        font-size: var(--fs-small);
        color: var(--ink-soft);
        font-weight: 700;
    }

.lp-coin-chip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--accent-yellow);
    box-shadow: 0 3px 0 var(--yellow-edge);
}

    .lp-phone__top .lp-coin-chip {
        color: var(--on-orange);
        font-weight: 900;
        font-size: 0.9375rem;
    }

.lp-phone__chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    background: var(--bg);
}

.lp-bubble {
    max-width: 86%;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--on-orange);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.lp-bubble--bot {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: var(--bubble-bot);
    box-shadow: inset 0 0 0 2px var(--bubble-bot-edge), 0 3px 0 var(--bubble-bot-edge);
}

.lp-bubble--human {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--bubble-human);
    box-shadow: inset 0 0 0 2px var(--bubble-human-edge), 0 3px 0 var(--bubble-human-edge);
}

.lp-phone__dock {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: 0 0 26px 26px;
    background: var(--surface);
}

.lp-phone__input {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 2px var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-small);
    font-weight: 600;
}

.lp-phone__mic {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bot);
    color: var(--on-orange);
    box-shadow: 0 3px 0 var(--bot-edge);
}

.lp-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-weight: 900;
    animation: lp-bob 3.2s ease-in-out infinite;
}

.lp-float--coins {
    top: 22%;
    left: -2px;
    background: var(--accent-yellow);
    color: var(--on-orange);
    box-shadow: 0 4px 0 var(--yellow-edge);
    transform: rotate(-8deg);
}

.lp-float--streak {
    bottom: 14%;
    right: -2px;
    background: var(--night);
    color: var(--accent-yellow);
    box-shadow: 0 4px 0 var(--night-edge);
    animation-delay: -1.6s;
}

@keyframes lp-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* Stats strip */
.lp-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
}

    .lp-stats li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-4) var(--space-3);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--ink);
        text-align: center;
        box-shadow: var(--shadow-card);
    }

    .lp-stats strong {
        color: var(--heading);
        font-size: 1.5rem;
        font-weight: 900;
        line-height: 1.15;
    }

    .lp-stats span {
        color: var(--ink-soft);
        font-weight: 700;
        font-size: var(--fs-small);
    }

/* ---------- Tutors ---------- */

.lp-tutors {
    display: grid;
    gap: var(--space-5);
}

.lp-tutor {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.lp-tutor__pic {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--bg);
    cursor: pointer;
    aspect-ratio: 1;
    overflow: hidden;
}

    .lp-tutor__pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s var(--ease-bounce);
    }

    .lp-tutor__pic:hover img {
        transform: scale(1.04) rotate(-1deg);
    }

    .lp-tutor__pic:focus-visible {
        outline-offset: -4px;
    }

.lp-tutor__tickle {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 var(--press-depth) 0 var(--bg-edge);
}

.lp-tutor__pic[aria-pressed="true"] .lp-tutor__tickle {
    background: var(--accent-yellow);
    color: var(--on-orange);
    box-shadow: 0 var(--press-depth) 0 var(--yellow-edge);
}

.lp-tutor__pic[aria-pressed="true"] img {
    animation: lp-giggle 0.5s ease-in-out 2;
}

@keyframes lp-giggle {
    0%, 100% { rotate: 0deg; }
    25% { rotate: -3deg; }
    75% { rotate: 3deg; }
}

.lp-tutor__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

    .lp-tutor__body h3 {
        margin-bottom: var(--space-1);
        font-size: 1.5rem;
    }

    .lp-tutor__body blockquote {
        position: relative;
        margin: 0;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius);
        border-bottom-left-radius: 4px;
        background: var(--bubble-bot);
        color: var(--on-orange);
        font-weight: 800;
        box-shadow: inset 0 0 0 2px var(--bubble-bot-edge), 0 3px 0 var(--bubble-bot-edge);
    }

.lp-tutor__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--night);
    color: var(--accent-yellow);
    font-weight: 900;
    font-size: var(--fs-small);
}

.lp-tutor--tune {
    background: var(--night);
    color: var(--on-night);
    outline: 2px dashed var(--yellow-edge);
    outline-offset: -10px;
}

.lp-tune {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: var(--space-6) var(--space-5);
}

    .lp-tune h3 {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--accent-yellow);
        font-size: 1.5rem;
    }

.lp-sliders {
    display: grid;
    gap: var(--space-3);
}

    .lp-sliders li {
        display: grid;
        gap: var(--space-1);
        font-weight: 800;
        font-size: var(--fs-small);
    }

.lp-slider {
    position: relative;
    display: block;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--night-edge);
    box-shadow: inset 0 0 0 1px var(--line);
}

    .lp-slider::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--val);
        border-radius: inherit;
        background: var(--vivid);
    }

    .lp-slider::after {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--val);
        width: 24px;
        height: 24px;
        translate: -50% -50%;
        border-radius: 50%;
        background: var(--paper);
        box-shadow: 0 0 0 3px var(--vivid-edge);
    }

/* ---------- Steps ---------- */

.lp-steps {
    display: grid;
    gap: var(--space-6);
    counter-reset: step;
}

    .lp-steps li {
        position: relative;
        /* Clear the number circle (52px, raised by --space-4) with a gap before the heading */
        padding-top: calc(52px - var(--space-4) + var(--space-5));
    }

        .lp-steps li p {
            margin-bottom: 0;
            color: var(--ink-soft);
            font-weight: 600;
        }

.lp-step__num {
    position: absolute;
    top: calc(-1 * var(--space-4));
    left: var(--space-5);
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: var(--on-orange);
    font-size: 1.5rem;
    font-weight: 900;
    box-shadow: 0 var(--press-depth) 0 var(--yellow-edge);
}

/* ---------- Features ---------- */

.lp-features {
    display: grid;
    gap: var(--space-4);
}

    .lp-features li {
        transition: transform 0.2s var(--ease-bounce);
    }

        .lp-features li:hover {
            transform: translateY(-4px) rotate(-0.5deg);
        }

        .lp-features li:nth-child(even) .lp-icon {
            background: var(--human);
            box-shadow: 0 var(--press-depth) 0 var(--human-edge);
        }

        .lp-features li p {
            margin-bottom: 0;
            color: var(--ink-soft);
            font-weight: 600;
        }

/* ---------- Arcade ---------- */

#arcade {
    margin: var(--space-6) 0;
    padding: var(--space-7) var(--space-2);
}

.lp-arcade__intro {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

    .lp-arcade__intro p {
        font-size: 1.0625rem;
        font-weight: 600;
    }

.lp-arcade__coins {
    display: block;
    width: min(260px, 70%);
    height: auto;
    margin: 0 auto;
    overflow: visible;
    animation: lp-bob 4s ease-in-out infinite;
}

/* The app's coin (Chatbot.css .coin-*): same shapes and tokens */
.lp-coin__edge,
.lp-coin__star {
    fill: var(--yellow-edge);
}

.lp-coin__face {
    fill: var(--accent-yellow);
}

.lp-coin__ring {
    fill: none;
    stroke: var(--yellow-edge);
    stroke-width: 2;
    stroke-dasharray: 2 2.5;
}

.lp-coin__gloss {
    fill: none;
    stroke: var(--paper);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.7;
}

.lp-coin__shine {
    fill: var(--paper);
    opacity: 0.55;
    transform: skewX(-20deg) translateX(0);
    animation: lp-coin-shine 5s ease-in-out 1s infinite;
}

@keyframes lp-coin-shine {
    0%, 70% {
        transform: skewX(-20deg) translateX(0);
    }

    100% {
        transform: skewX(-20deg) translateX(80px);
    }
}

.lp-loop {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

    .lp-loop li {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--space-4);
        align-items: center;
        padding: var(--space-4);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 var(--press-depth) 0 var(--night-edge);
    }

        .lp-loop li strong {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--heading);
        }

        .lp-loop li > span:last-child {
            grid-column: 2;
            color: var(--ink-soft);
            font-weight: 700;
        }

.lp-loop__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: var(--on-orange);
    font-size: 1.375rem;
    box-shadow: 0 3px 0 var(--yellow-edge);
}

.lp-arcade__grid {
    display: grid;
    gap: var(--space-5);
}

/* Quiz mock-up */
.lp-quiz {
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 var(--press-depth) 0 var(--night-edge);
}

.lp-quiz__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    color: var(--ink-soft);
    font-size: var(--fs-small);
    font-weight: 800;
}

.lp-quiz__q {
    color: var(--heading);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.3;
}

.lp-quiz__answers {
    display: grid;
    gap: var(--space-3);
}

    .lp-quiz__answers li {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: var(--tap);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        background: var(--human);
        color: var(--on-orange);
        font-weight: 800;
        box-shadow: 0 var(--press-depth) 0 var(--human-edge);
    }

        .lp-quiz__answers li.is-correct {
            background: var(--success-bg);
            color: var(--success);
            box-shadow: inset 0 0 0 3px var(--success), 0 var(--press-depth) 0 var(--success);
        }

            .lp-quiz__answers li.is-correct i {
                margin-left: auto;
                font-size: 1.25rem;
            }

.lp-quiz__letter {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--on-orange);
    font-weight: 900;
}

/* Games */
.lp-games {
    display: grid;
    gap: var(--space-4);
}

.lp-game {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 var(--press-depth) 0 var(--night-edge);
}

    .lp-game h3,
    .lp-game h4 {
        margin-bottom: var(--space-1);
        color: var(--heading);
        font-size: 1.25rem;
        font-weight: 900;
    }

/* Brain games / Just for fun: a yellow heading on the night panel, then the game cards */
.lp-gamegroup__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: 1.5rem;
}

.lp-gamegroup__lead {
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.lp-gamegroup--fun {
    margin-top: var(--space-6);
}

    .lp-game p {
        margin-bottom: var(--space-2);
        color: var(--ink-soft);
        font-weight: 600;
    }

.lp-game__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: var(--night);
    color: var(--accent-yellow);
    font-size: 1.5rem;
}

.lp-game--soon {
    background: var(--surface-2);
}

.lp-levels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

    .lp-levels li {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-pill);
        background: var(--bot);
        color: var(--on-orange);
        font-size: var(--fs-small);
        font-weight: 800;
    }

.lp-badge {
    display: inline-block;
    margin-right: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--night);
    color: var(--accent-yellow);
    font-size: var(--fs-small);
    font-weight: 900;
}

/* ---------- Build your tutor (Vimeo videos) ---------- */

.lp-videos {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-video {
    padding: var(--space-3);
    text-align: center;
}

    .lp-video h3 {
        margin: var(--space-3) 0 0;
        font-size: 1.5rem;
    }

/* 16:9 box the iframe fills, so it never sticks out on a phone */
.lp-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--night);
    box-shadow: 0 var(--press-depth) 0 var(--bg-edge);
}

    .lp-video__frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* ---------- Trailer ---------- */

.lp-trailer {
    text-align: center;
}

    /* Never taller than the screen below the header (sideways phones, short laptop windows) */
    .lp-trailer video {
        width: min(100%, calc((100dvh - 9rem) * 16 / 9));
        margin-left: auto;
        margin-right: auto;
        margin-top: var(--space-3);
        border-radius: var(--radius);
        background: var(--night);
        box-shadow: 0 var(--press-depth) 0 var(--bg-edge);
    }

/* ---------- Parents ---------- */

.lp-parents {
    display: grid;
    gap: var(--space-5);
}

.lp-parents__copy > p {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.lp-checks {
    display: grid;
    gap: var(--space-4);
}

    .lp-checks li {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
    }

        .lp-checks li > i {
            display: grid;
            place-items: center;
            flex: none;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-sm);
            background: var(--bubble-bot);
            color: var(--on-orange);
            box-shadow: inset 0 0 0 2px var(--bubble-bot-edge);
        }

.lp-parents__aside {
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.lp-quote {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
}

    .lp-quote img {
        width: 96px;
        border-radius: 50%;
        box-shadow: 0 0 0 4px var(--bubble-human-edge);
    }

    .lp-quote p {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
    }

.lp-subjects ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.lp-subjects li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-weight: 800;
    font-size: 0.9375rem;
}

    .lp-subjects li i {
        color: var(--heading);
        width: 1.25em;
        text-align: center;
    }

/* ---------- Pricing ---------- */

.lp-plans {
    display: grid;
    gap: var(--space-6);
    max-width: 820px;
    margin: 0 auto;
}

.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--space-6) var(--space-5) var(--space-5);
}

    .lp-plan p {
        color: var(--ink-soft);
        font-weight: 600;
    }

    .lp-plan .btn-chunky {
        margin-top: auto;
    }

.lp-plan__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2);
}

    .lp-plan__price strong {
        color: var(--ink);
        font-size: 3rem;
        font-weight: 900;
        line-height: 1;
    }

.lp-plan--best {
    box-shadow: inset 0 0 0 4px var(--bot), 0 6px 0 var(--bot-edge), var(--shadow-card);
}

.lp-plan__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -50%;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--night);
    white-space: nowrap;
}

    .lp-plan .lp-plan__ribbon {
        color: var(--accent-yellow);
        font-weight: 900;
    }

/* ---------- FAQ ---------- */

.lp-faq {
    display: grid;
    gap: var(--space-3);
}

    .lp-faq details {
        padding: 0;
    }

    .lp-faq summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        min-height: var(--tap);
        padding: var(--space-4) var(--space-5);
        font-size: 1.0625rem;
        font-weight: 900;
        cursor: pointer;
        list-style: none;
    }

        .lp-faq summary::-webkit-details-marker {
            display: none;
        }

        .lp-faq summary::after {
            content: "+";
            display: grid;
            place-items: center;
            flex: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bot);
            color: var(--on-orange);
            font-size: 1.375rem;
            line-height: 1;
            box-shadow: 0 3px 0 var(--bot-edge);
        }

    .lp-faq details[open] summary::after {
        content: "\2212";
    }

    .lp-faq details p {
        margin: 0;
        padding: 0 var(--space-5) var(--space-5);
        color: var(--ink-soft);
        font-weight: 600;
    }

/* ---------- Final CTA + contact ---------- */

.lp-final {
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius);
    text-align: center;
    box-shadow: 0 6px 0 var(--night-edge);
}

    .lp-final h2 {
        font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
    }

    .lp-final p {
        font-size: 1.125rem;
        font-weight: 700;
    }

.lp-final__faces {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

    .lp-final__faces img {
        width: 64px;
        height: 64px;
        margin: 0 -8px;
        border-radius: 50%;
        box-shadow: 0 0 0 4px var(--night), 0 0 0 6px var(--accent-yellow);
        transition: transform 0.2s var(--ease-bounce);
    }

        .lp-final__faces img:nth-child(odd) {
            transform: translateY(-6px);
        }

/* Contact form (same look as the app's feedback modal: night header, white body) */
.lp-contact {
    max-width: 760px;
    margin: var(--space-7) auto 0;
    padding: 0;
    overflow: hidden;
}

.lp-contact__head {
    padding: var(--space-5) var(--space-5) var(--space-4);
    outline-offset: -8px;
}

    .lp-contact__head h2 {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--fs-h2);
    }

    .lp-contact__head p {
        margin: 0;
        font-weight: 700;
    }

.lp-form {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.lp-form__row {
    display: grid;
    gap: var(--space-4);
}

.lp-field {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

    .lp-field label,
    .lp-field legend {
        font-weight: 800;
    }

    .lp-field input[type="text"],
    .lp-field input[type="email"],
    .lp-field textarea {
        width: 100%;
        min-height: var(--tap);
        padding: var(--space-3) var(--space-4);
        border: 2px solid var(--line);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--ink);
        font-family: var(--font);
        font-size: 1rem; /* 16px: no iOS zoom */
        font-weight: 600;
    }

    .lp-field textarea {
        resize: vertical;
        min-height: 140px;
    }

        .lp-field input::placeholder,
        .lp-field textarea::placeholder {
            color: var(--ink-soft);
        }

    /* As the app (site.css .form-control:focus): one thicker focus border (2px border + 1px inset ring)
       instead of the border plus the page's separate focus outline */
    .lp-field input[type="text"]:focus,
    .lp-field input[type="email"]:focus,
    .lp-field textarea:focus {
        border-color: var(--focus);
        outline: none;
        box-shadow: inset 0 0 0 1px var(--focus);
    }

    .lp-field [aria-invalid="true"] {
        border-color: var(--danger);
    }

.lp-field__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--danger);
    font-weight: 700;
    font-size: var(--fs-small);
}

    .lp-field__error::before {
        content: "\f06a"; /* Font Awesome circle-exclamation, so errors aren't shown by colour alone */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
    }

    .lp-field__error[hidden] {
        display: none;
    }

/* "I am a..." choice chips */
.lp-roles {
    margin: 0;
    padding: 0;
    border: 0;
}

    .lp-roles legend {
        margin-bottom: var(--space-2);
        padding: 0;
    }

.lp-roles__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

    .lp-roles__options label {
        position: relative;
        display: block;
        cursor: pointer;
    }

    .lp-roles__options input {
        position: absolute;
        opacity: 0;
        inset: 0;
        margin: 0;
        cursor: pointer;
    }

    .lp-roles__options span {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        height: 100%;
        min-height: var(--tap);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--ink);
        font-weight: 800;
        font-size: 0.9375rem;
        box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--bg-edge);
    }

    .lp-roles__options input:checked + span {
        background: var(--human);
        color: var(--on-orange);
        box-shadow: inset 0 0 0 3px var(--human-edge), 0 3px 0 var(--human-edge);
    }

        .lp-roles__options input:checked + span::after {
            content: "\f00c"; /* tick, so the choice isn't shown by colour alone */
            margin-left: auto;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }

    .lp-roles__options input:focus-visible + span {
        outline: 3px solid var(--focus);
        outline-offset: 2px;
    }

.lp-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-form__status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: 800;
}

    .lp-form__status[hidden] {
        display: none;
    }

    .lp-form__status.is-success {
        background: var(--success-bg);
        color: var(--success);
    }

    .lp-form__status.is-error {
        background: var(--danger-bg);
        color: var(--danger);
    }

#btnSendContact {
    justify-self: start;
}

    #btnSendContact[aria-disabled="true"] {
        opacity: 0.6;
        cursor: wait;
        transform: none;
    }

/* ---------- Footer ---------- */

.lp-footer {
    padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom));
    background: var(--night);
    color: var(--on-night);
}

.lp-footer__inner {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
}

.lp-footer .lp-brand {
    color: var(--on-night);
}

.lp-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
}

    .lp-footer__links a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap);
        padding: 0 var(--space-2);
        color: var(--accent-yellow);
    }

.lp-footer__copy {
    margin: 0;
    font-size: var(--fs-small);
}

/* ---------- Wide phones (sideways) and small tablets ---------- */

@media (min-width: 560px) {
    /* Two across, so a sideways phone isn't shown one screen-tall picture or video at a time */
    .lp-tutors,
    .lp-features,
    .lp-plans,
    .lp-gamegroup--fun .lp-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Video cards: two (then three) across, and a short last row sits in the middle */
    .lp-videos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .lp-videos > .lp-video {
            flex: 0 0 calc((100% - var(--space-5)) / 2);
        }
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) {
    .lp-section {
        padding: calc(var(--space-7) * 1.5) 0;
    }

    .lp-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lp-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #arcade {
        margin: var(--space-6) var(--space-4);
        border-radius: calc(var(--radius) * 2);
    }

    .lp-arcade__intro {
        grid-template-columns: 1.6fr 1fr;
    }

    .lp-loop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-subjects ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-final__faces img {
        width: 84px;
        height: 84px;
    }

    .lp-form__row {
        grid-template-columns: 1fr 1fr;
    }

    .lp-roles__options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lp-footer__inner {
        grid-template-columns: auto 1fr auto;
        justify-items: start;
        align-items: center;
        text-align: left;
    }
}

/* ---------- Large tablets (sideways) and small laptops ---------- */

@media (min-width: 900px) {
    /* Words beside the phone, as on desktop (the phone is a little smaller) */
    .lp-hero__grid {
        grid-template-columns: 1.25fr 1fr;
    }

    .lp-tutors {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-videos > .lp-video {
        flex-basis: calc((100% - 2 * var(--space-5)) / 3);
    }

    .lp-parents {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

/* ---------- Desktop ---------- */

@media (min-width: 1100px) {
    .lp-menu-btn {
        display: none;
    }

    .lp-nav,
    .js .lp-nav {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex-basis: auto;
        padding: 0;
    }

        .lp-nav ul {
            display: flex;
            gap: var(--space-1);
            margin: 0;
        }

    .lp-nav__actions {
        display: flex;
    }

    .lp-hero {
        padding-top: var(--space-7);
    }

    .lp-features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #arcade {
        max-width: calc(var(--content-max) + 4rem);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .lp-arcade__grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    /* Four across: the icon sits above the words so the narrower cards still read well */
    .lp-gamegroup--fun .lp-games {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

        .lp-gamegroup--fun .lp-game {
            flex-direction: column;
        }
}

/* ---------- Sideways phones (short screens) ----------
   Only ~320-420px tall: less padding, the hero side by side, three tutors across, and the open menu
   in a compact grid that scrolls inside itself (the header is sticky, so it can't run off the screen).
   After the width blocks so these win. */

@media (max-height: 500px) and (orientation: landscape) {
    .lp-section {
        padding: var(--space-6) 0;
    }

    .lp-nav.is-open {
        max-height: calc(100dvh - 64px - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .lp-nav ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-hero {
        padding-top: var(--space-5);
    }

    .lp-hero__visual {
        max-width: 320px;
    }

    .lp-arcade__coins {
        width: min(200px, 70%);
    }
}

@media (max-height: 500px) and (orientation: landscape) and (min-width: 760px) {
    /* Narrower than this, the phone mock-up gets squeezed into a very tall column */
    .lp-hero__grid {
        grid-template-columns: 1.25fr 1fr;
    }

    .lp-tutors {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-videos > .lp-video {
        flex-basis: calc((100% - 2 * var(--space-5)) / 3);
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .btn-chunky:hover,
    .btn-chunky:active,
    .lp-features li:hover,
    .lp-tutor__pic:hover img {
        transform: none;
    }

    .lp-phone,
    .lp-pill,
    .lp-float--coins {
        transform: none;
    }
}