/* =====================================================================
   info.css – shared by the Mental Maths and Spelling info pages.
   Every class is prefixed "ip-" so nothing clashes with Bootstrap, brainbuzz.css or mentalmaths.css.
   ===================================================================== */
.ip {
    --ip-primary:      #5867DD;
    --ip-primary-dark: #4455c7;
    --ip-primary-deep: #3a4fd4;
    --ip-mint:         #84DCC6;
    --ip-mint-soft:    #e6f8f3;
    --ip-mint-ink:     #1f6b58;
    --ip-bg:           #f5f6fb;
    --ip-tint:         #eceefc;
    --ip-ink:          #1f2340;
    --ip-muted:        #5d6385;
    --ip-line:         #e3e6f3;
    --ip-rgb:          88,103,221;   /* primary as r,g,b for shadows/tints */
    --ip-shadow-rgb:   48,58,140;

    font-family: inherit;
    color: var(--ip-ink);
    background: #fff;
}
.ip h1, .ip h2, .ip h3 { font-family: inherit; font-weight: 800; letter-spacing: -0.02em; color: inherit; margin: 0; }
.ip *, .ip *::before, .ip *::after { box-sizing: border-box; }
.ip p { margin: 0; }
.ip a { text-decoration: none; }
.ip img { display: block; max-width: 100%; }
.ip-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* Buttons */
.ip-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .9rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
    font-weight: 700; font-size: 1rem; line-height: 1.2; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ip-btn:hover { transform: translateY(-2px); }
.ip-btn-primary { background: var(--ip-primary); color: #fff; box-shadow: 0 8px 20px rgba(var(--ip-rgb),.3); }
.ip-btn-primary:hover { background: var(--ip-primary-dark); color: #fff; box-shadow: 0 12px 26px rgba(var(--ip-rgb),.4); }
.ip-btn-mint { background: var(--ip-mint); color: #12493c; box-shadow: 0 8px 20px rgba(132,220,198,.45); }
.ip-btn-mint:hover { background: #6fd1b8; color: #12493c; }
.ip-btn-ghost { background: #fff; color: var(--ip-primary); border-color: var(--ip-line); }
.ip-btn-ghost:hover { border-color: var(--ip-primary); color: var(--ip-primary); }
.ip-btn-white { background: #fff; color: var(--ip-primary); }
.ip-btn-white:hover { color: var(--ip-primary-dark); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.ip-btn-block { width: 100%; }
.ip-btn:focus-visible, .ip-seg button:focus-visible, .ip-pill:focus-visible, .ip-faq summary:focus-visible { outline: 3px solid var(--ip-mint); outline-offset: 3px; }

.ip-eyebrow {
    display: inline-block; margin-bottom: 1.25rem; padding: .4rem .9rem;
    background: #fff; border: 1px solid var(--ip-line); border-radius: 999px;
    color: var(--ip-primary); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.ip-head { margin-bottom: 2rem; }
.ip-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; }
.ip-head p { margin-top: .5rem; color: var(--ip-muted); font-size: 1.08rem; max-width: 38rem; }
.ip-head-center { text-align: center; }
.ip-head-center p { margin-left: auto; margin-right: auto; }

/* Screenshot frames (with graceful placeholder if a file is missing) */
.ip-shot {
    position: relative; overflow: hidden; background: var(--ip-bg);
    border: 1px solid var(--ip-line); border-radius: 1rem;
    box-shadow: 0 24px 50px rgba(var(--ip-shadow-rgb),.20);
}
.ip-shot img { width: 100%; height: auto; }
/* Placeholder shown until the screenshot exists: says which file to make and what to capture */
.ip-shot.ip-missing {
    aspect-ratio: var(--ip-ph, 16 / 10); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    padding: 1.25rem; text-align: center; background: #fff; border: 2px dashed var(--ip-primary); box-shadow: none;
}
.ip-shot.ip-missing img { display: none; }
.ip-shot.ip-missing::after { content: attr(data-label); color: var(--ip-ink); font-weight: 600; font-size: .95rem; line-height: 1.5; max-width: 26rem; border: 2px solid var(--ip-primary); border-radius: .5rem; padding: .75rem 1rem; background: #fff; }

/* ---------- Hero ---------- */
.ip-hero {
    padding: 4.5rem 0 5rem; overflow: hidden;
    background:
        radial-gradient(circle at 8% 15%, rgba(var(--ip-rgb),.14) 0%, transparent 42%),
        radial-gradient(circle at 92% 85%, rgba(132,220,198,.30) 0%, transparent 45%),
        var(--ip-bg);
}
.ip-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.ip-hero-grid.ip-hero-wide { grid-template-columns: 1.4fr 1fr; }
.ip-hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.06; font-weight: 700; margin-bottom: 1.6rem; }
.ip-hero h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--ip-primary) 0%, var(--ip-primary-deep) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ip .ip-lead { max-width: 30rem; color: var(--ip-muted); font-size: 1.2rem; line-height: 1.6; margin-bottom: 2.25rem; }
.ip-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.25rem; }
.ip-note { color: var(--ip-muted); font-size: .92rem; }
.ip-collage { position: relative; min-height: 440px; }
.ip-collage .ip-shot { position: absolute; }
.ip-collage .ip-c1 { width: 64%; top: 0; right: 0; transform: rotate(2deg); z-index: 1; }
.ip-collage .ip-c2 { width: 70%; bottom: 0; left: 0; transform: rotate(-2deg); z-index: 2; }
.ip-chip {
    position: absolute; z-index: 3; top: 6px; left: 4%;
    background: var(--ip-mint); color: #12493c; font-weight: 700; padding: .5rem 1rem; border-radius: 999px;
    box-shadow: 0 10px 22px rgba(0,0,0,.14); transform: rotate(-4deg);
}

/* ---------- How it works ---------- */
.ip-how { padding: 4.5rem 0 3rem; }
.ip-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: ipstep; }
.ip-step { position: relative; padding: 1.75rem 1.5rem; background: var(--ip-bg); border-radius: 1.25rem; }
.ip-step::before {
    counter-increment: ipstep; content: counter(ipstep);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 50%;
    background: var(--ip-primary); color: #fff; font-weight: 800;
}
.ip-step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }
.ip-step p { color: var(--ip-muted); line-height: 1.55; font-size: .96rem; }

/* ---------- Free tests ---------- */
.ip-free { padding: 1rem 0 4.5rem; }
.ip-free-box {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 2rem 2.25rem; background: var(--ip-mint-soft); border-radius: 1.75rem;
}
.ip-free-box h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: .35rem; }
.ip-free-box p { color: var(--ip-muted); max-width: 36rem; line-height: 1.55; }

/* ---------- Plans ---------- */
.ip-plans { padding: 4.5rem 0 5rem; background: var(--ip-bg); scroll-margin-top: 1rem; }
.ip-seg { display: inline-flex; padding: .3rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 999px; margin-bottom: 2.25rem; }
.ip-seg button {
    border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ip-muted);
    padding: .7rem 1.6rem; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.ip-seg button.active { background: var(--ip-primary); color: #fff; box-shadow: 0 6px 14px rgba(var(--ip-rgb),.3); }
.ip-seg-wrap { text-align: center; }
.ip-pane { display: none; }
.ip-pane.active { display: block; }

.ip-plan-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.5rem; align-items: start; }
.ip-plan-intro h3 { font-size: 2rem; font-weight: 700; margin-bottom: .75rem; }
.ip-plan-intro > p { color: var(--ip-muted); line-height: 1.65; font-size: 1.05rem; margin-bottom: 1.25rem; }
.ip-ticks { margin: 0 0 1.5rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ip-ticks li { display: flex; gap: .65rem; align-items: flex-start; font-weight: 600; font-size: .98rem; }
.ip-ticks li::before { content: '\2713'; flex: 0 0 22px; height: 22px; margin-top: 1px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ip-mint-soft); color: var(--ip-mint-ink); font-size: .8rem; font-weight: 800; }
.ip-plan-shot { margin-top: .5rem; }

.ip-billing { display: inline-flex; padding: .25rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 999px; margin-bottom: 1rem; }
.ip-billing button { border: 0; background: transparent; font: inherit; font-size: .9rem; font-weight: 700; color: var(--ip-muted); padding: .45rem 1.1rem; border-radius: 999px; cursor: pointer; }
.ip-billing button.active { background: var(--ip-ink); color: #fff; }
.ip-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ip-card {
    position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.25rem 1.25rem;
    background: #fff; border: 2px solid var(--ip-line); border-radius: 1.25rem; text-align: center;
}
.ip-card.ip-popular { border-color: var(--ip-primary); box-shadow: 0 16px 36px rgba(var(--ip-rgb),.18); }
.ip-pop {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--ip-primary); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .04em;
    padding: .25rem .75rem; border-radius: 999px; white-space: nowrap;
}
.ip-card h4 { margin: 0 0 .15rem; font-size: 1.1rem; font-weight: 700; }
.ip-card .ip-sub { color: var(--ip-muted); font-size: .85rem; margin-bottom: 1rem; }
.ip-price { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.ip-price small { font-size: .9rem; font-weight: 500; color: var(--ip-muted); }
.ip-save { min-height: 1.3em; margin: .25rem 0 1.1rem; color: var(--ip-mint-ink); font-weight: 700; font-size: .85rem; }
.ip-card .ip-btn { margin-top: auto; padding: .75rem 1rem; font-size: .95rem; }
.ip-reassure { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.1rem; color: var(--ip-muted); font-size: .88rem; font-weight: 600; }
.ip-reassure span::before { content: '\2713\00a0'; color: var(--ip-mint-ink); font-weight: 800; }

.ip-next { margin-top: 1.75rem; padding: 1.5rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.25rem; }
.ip-next h4 { margin: 0 0 .9rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ip-primary); font-weight: 700; }
.ip-next ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: ipn; }
.ip-next li { counter-increment: ipn; font-size: .92rem; color: var(--ip-muted); line-height: 1.45; }
.ip-next li b { display: block; color: var(--ip-ink); font-size: .98rem; margin-bottom: .15rem; }
.ip-next li b::before { content: counter(ipn) '. '; color: var(--ip-primary); }

.ip-school-card { padding: 2rem; background: #fff; border: 2px solid var(--ip-line); border-radius: 1.5rem; }
.ip-school-card .ip-label { color: var(--ip-primary); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; }
.ip-school-card .ip-price-note { color: var(--ip-muted); font-size: .92rem; margin: .2rem 0 1.4rem; }
.ip-school-actions { display: flex; flex-direction: column; gap: .7rem; }
.ip-textlink { display: inline-block; margin-top: 1rem; color: var(--ip-primary); font-weight: 700; font-size: .92rem; border-bottom: 2px solid var(--ip-mint); }

/* ---------- Why it matters ---------- */
.ip-why { padding: 5rem 0 3.5rem; }
.ip-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ip-why-item { padding: 1.5rem 1.5rem 1.4rem; border-top: 4px solid var(--ip-mint); background: var(--ip-bg); border-radius: 0 0 1rem 1rem; }
.ip-why-item h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.ip-why-item p { color: var(--ip-muted); line-height: 1.55; font-size: .96rem; }

/* ---------- Curriculum ---------- */
.ip-cur { padding: 2.5rem 0 4.5rem; }
.ip-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.ip-pill {
    padding: .5rem 1.2rem; border: 2px solid var(--ip-line); border-radius: 999px; background: #fff;
    font: inherit; font-size: .9rem; font-weight: 700; color: var(--ip-muted); cursor: pointer;
}
.ip-pill:hover { border-color: var(--ip-primary); color: var(--ip-primary); }
.ip-pill.active { background: var(--ip-primary); border-color: var(--ip-primary); color: #fff; }
.ip-cur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ip-strand h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; color: var(--ip-primary); margin-bottom: .6rem; }
.ip-strand h3::before { content: ''; width: 4px; height: 1.1em; border-radius: 2px; background: var(--ip-primary); }
.ip-strand ul { margin: 0; padding: 0; list-style: none; }
.ip-strand li { padding: .35rem 0; border-bottom: 1px solid var(--ip-line); color: #4b5563; font-size: .88rem; line-height: 1.5; }
.ip-strand li:last-child { border-bottom: 0; }

/* ---------- FAQ ---------- */
.ip-faq-sec { padding: 4.5rem 0; background: var(--ip-bg); }
.ip-faq { max-width: 46rem; margin: 0 auto; }
.ip-faq details { background: #fff; border: 1px solid var(--ip-line); border-radius: 1rem; margin-bottom: .75rem; }
.ip-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--ip-primary); font-weight: 600; }
.ip-faq details[open] summary::after { content: '\2212'; }
.ip-faq details p { padding: 0 1.4rem 1.2rem; color: var(--ip-muted); line-height: 1.65; }

/* ---------- Curriculum panels (DB driven) ---------- */
.ip-cur-panel { display: none; }
.ip-cur-panel.active { display: block; }
.ip-cur-ref { color: var(--ip-muted); font-size: .85em; }

/* ---------- Closing CTA ---------- */
.ip-cta { padding: 4.5rem 0; text-align: center; color: #fff; background: linear-gradient(135deg, var(--ip-primary) 0%, var(--ip-primary-dark) 100%); }
.ip-cta h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: .7rem; }
.ip-cta p { max-width: 34rem; margin: 0 auto 1.75rem; opacity: .92; font-size: 1.1rem; line-height: 1.6; }
.ip-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.ip-cta .ip-btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.ip-cta .ip-btn-line:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

/* ---------- Theme: Spelling (teal). Add class "ip-teal" next to "ip" ---------- */
.ip.ip-teal {
    --ip-primary:      #2f8d77;  /* text/link accent */
    --ip-primary-dark: #206a5a;
    --ip-primary-deep: #1a5a4c;
    --ip-mint:         #84DCC6;
    --ip-mint-soft:    #e6f8f3;
    --ip-mint-ink:     #1f6b58;
    --ip-bg:           #f3faf8;
    --ip-tint:         #e2f4ef;
    --ip-ink:          #1b2f2c;
    --ip-muted:        #587068;
    --ip-line:         #dcebe7;
    --ip-rgb:          104,188,168;
    --ip-shadow-rgb:   20,80,66;
}

/* ---------- Image + text split section ---------- */
.ip-split { padding: 4.5rem 0; }
.ip-split-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.ip-split-rev .ip-split-grid > :first-child { order: 2; }
.ip-split h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; margin-bottom: .8rem; }
.ip-split .ip-lead { color: var(--ip-muted); font-size: 1.08rem; line-height: 1.6; margin-bottom: 1.4rem; }
.ip-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ip-tags li { padding: .4rem .95rem; border-radius: 999px; background: var(--ip-mint-soft); color: var(--ip-mint-ink); font-weight: 700; font-size: .88rem; }

/* ---------- Free list cards (taken from the database) ---------- */
.ip-listcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; width: 100%; }
.ip-listcard { display: block; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1rem; color: inherit; transition: transform .2s ease, border-color .2s ease; }
.ip-listcard:hover { transform: translateY(-3px); border-color: var(--ip-primary); color: inherit; }
.ip-listcard b { display: block; font-size: 1.02rem; margin-bottom: .2rem; }
.ip-listcard span { color: var(--ip-muted); font-size: .86rem; }
.ip-listcard em { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; font-size: .88rem; color: var(--ip-primary); }
.ip-free-box.ip-free-stack { flex-direction: column; align-items: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .ip-hero { padding: 3rem 0 3.5rem; }
    .ip-hero-grid, .ip-hero-grid.ip-hero-wide { grid-template-columns: 1fr; gap: 2.5rem; }
    .ip-collage { min-height: 380px; }
    .ip-steps { grid-template-columns: repeat(2, 1fr); }
    .ip-plan-grid { grid-template-columns: 1fr; }
    .ip-why-grid, .ip-cur-grid { grid-template-columns: 1fr 1fr; }
    .ip-split-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ip-split-rev .ip-split-grid > :first-child { order: 0; }
}
@media (max-width: 640px) {
    .ip-actions .ip-btn { width: 100%; }
    .ip-collage { min-height: 300px; }
    .ip-steps, .ip-why-grid, .ip-cur-grid, .ip-listcards { grid-template-columns: 1fr; }
    .ip-cards { grid-template-columns: 1fr; gap: 1.5rem; }
    .ip-next ol { grid-template-columns: 1fr; }
    .ip-free-box { padding: 1.5rem; }
    .ip-free-box .ip-btn { width: 100%; }
    .ip-seg button { padding: .65rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .ip *, .ip *::before, .ip *::after { transition: none !important; } }

/* ---------- Free lists page ---------- */
.ip-crumb { padding-top: 1rem; padding-bottom: 0; font-size: .86rem; color: var(--ip-muted); }
.ip-crumb a { color: var(--ip-primary); font-weight: 600; }
.ip-crumb span { margin: 0 .4rem; opacity: .6; }

.ip-finder { padding: 1.5rem 0 3.25rem; background: radial-gradient(circle at 90% 10%, rgba(132,220,198,.30) 0%, transparent 45%), var(--ip-bg); }
.ip-finder h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.08; margin: .5rem 0 .7rem; }
.ip-finder .ip-lead { color: var(--ip-muted); font-size: 1.1rem; line-height: 1.6; max-width: 36rem; margin-bottom: 1.6rem; }
.ip-code { display: flex; gap: .6rem; max-width: 30rem; }
.ip-code input {
    flex: 1; min-width: 0; padding: .95rem 1.2rem; border: 2px solid var(--ip-line); border-radius: 999px; background: #fff;
    font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ip-ink);
}
.ip-code input::placeholder { letter-spacing: .02em; font-weight: 500; text-transform: none; color: #8aa39b; font-size: 1rem; }
.ip-code input:focus { outline: none; border-color: var(--ip-primary); box-shadow: 0 0 0 4px rgba(var(--ip-rgb), .15); }
.ip-code input.has-error { border-color: #dc3545; }
.ip-code-error { display: none; margin-top: .6rem; color: #b42318; font-weight: 600; font-size: .9rem; }
.ip-code-error.show { display: block; }
.ip-finder-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.1rem; font-size: .92rem; font-weight: 600; }
.ip-finder-links a { color: var(--ip-primary); border-bottom: 2px solid var(--ip-mint); }

.ip-lists { padding: 2.5rem 0 3rem; }
.ip-lists-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ip-lists-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.ip-lists-head p { color: var(--ip-muted); margin-top: .25rem; font-size: .95rem; max-width: 36rem; }
.ip-count { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: var(--ip-mint-soft); color: var(--ip-mint-ink); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.ip-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.ip-filters input[type=search], .ip-filters select {
    padding: .7rem 1rem; border: 2px solid var(--ip-line); border-radius: .75rem; background: #fff; font: inherit; font-size: .95rem; color: var(--ip-ink);
}
.ip-filters input[type=search] { flex: 1 1 14rem; min-width: 0; }
.ip-filters select { flex: 0 1 17rem; font-weight: 600; cursor: pointer; }
.ip-filters input:focus, .ip-filters select:focus { outline: none; border-color: var(--ip-primary); box-shadow: 0 0 0 4px rgba(var(--ip-rgb), .15); }

.ip-lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ip-lcard { display: flex; flex-direction: column; padding: 1.25rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.1rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ip-lcard:hover { transform: translateY(-3px); border-color: var(--ip-primary); box-shadow: 0 14px 30px rgba(var(--ip-rgb), .12); }
.ip-lcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; }
.ip-lcard h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.25; margin: 0; }
.ip-lcard-meta { color: var(--ip-muted); font-size: .88rem; line-height: 1.5; margin-bottom: .8rem; }
.ip-lcard-meta b { color: var(--ip-ink); }
.ip-share { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--ip-line); border-radius: 999px; background: #fff; color: var(--ip-primary); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ip-share:hover { border-color: var(--ip-primary); }
.ip-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: .15rem .6rem; max-height: 9.5rem; overflow-y: auto; margin-bottom: 1rem; padding: .6rem .75rem; background: var(--ip-bg); border-radius: .75rem; flex: 1; align-content: start; }
.ip-words span { font-size: .84rem; padding: .12rem 0; color: #31504a; }
.ip-lcard-actions { display: flex; gap: .5rem; }
.ip-lcard-actions .ip-btn { flex: 1; padding: .6rem .8rem; font-size: .9rem; box-shadow: none; }
.ip-lcard-actions .ip-btn:hover { transform: none; }
.ip-lcard.ip-current { border-color: var(--ip-primary); background: linear-gradient(180deg, var(--ip-mint-soft) 0%, #fff 55%); }
.ip-tag-current, .ip-tag-soon { display: inline-block; align-self: flex-start; margin-bottom: .6rem; padding: .22rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.ip-tag-current { background: var(--ip-primary); color: #fff; }
.ip-tag-soon { background: #eceff1; color: #546e7a; }
.ip-lcard.ip-soon { background: #f7f9f9; }
.ip-lcard.ip-soon h3, .ip-lcard.ip-soon .ip-words span { color: #8a9a97; }
.ip-lcard.ip-soon:hover { transform: none; box-shadow: none; border-color: var(--ip-line); }
.ip-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ip-empty { padding: 3rem 1rem; text-align: center; color: var(--ip-muted); }

.ip-teacher { padding: 0 0 4.5rem; }
.ip-teacher-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.75rem 2rem; background: var(--ip-mint-soft); border-radius: 1.5rem; }
.ip-teacher-box h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: .25rem; }
.ip-teacher-box p { color: var(--ip-muted); max-width: 34rem; line-height: 1.5; }

.ip-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; max-width: 22rem; padding: .9rem 1.2rem; border-radius: .9rem; background: var(--ip-ink); color: #fff; font-weight: 600; font-size: .9rem; box-shadow: 0 14px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.ip-toast.show { opacity: 1; transform: none; }

@media (max-width: 991px) { .ip-lgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .ip-lgrid { grid-template-columns: 1fr; }
    .ip-code { flex-direction: column; }
    .ip-code .ip-btn { width: 100%; }
    .ip-filters select { flex: 1 1 100%; }
    .ip-teacher-box { padding: 1.4rem; }
    .ip-teacher-box .ip-btn { width: 100%; }
}

/* ---------- Spelling theme: brand mint fills (dark text on mint, readable) ---------- */
.ip.ip-teal .ip-btn-primary { background: #84DCC6; color: #12493c; box-shadow: 0 8px 20px rgba(132,220,198,.45); }
.ip.ip-teal .ip-btn-primary:hover { background: #6fd1b8; color: #12493c; box-shadow: 0 12px 26px rgba(132,220,198,.55); }
.ip.ip-teal .ip-step::before,
.ip.ip-teal .ip-pill.active,
.ip.ip-teal .ip-seg button.active,
.ip.ip-teal .ip-tag-current { background: #84DCC6; color: #12493c; border-color: #84DCC6; }
.ip.ip-teal .ip-hero h1 em { background: linear-gradient(135deg, #3fa58d 0%, #68BCA8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ip.ip-teal .ip-cta { background: linear-gradient(135deg, #84DCC6 0%, #68BCA8 100%); color: #12493c; }
.ip.ip-teal .ip-cta .ip-btn-line { color: #12493c; border-color: rgba(18,73,60,.45); }
.ip.ip-teal .ip-cta .ip-btn-line:hover { color: #12493c; border-color: #12493c; background: rgba(255,255,255,.35); }
.ip.ip-teal .ip-cta .ip-btn-white { color: #1f6b58; }

/* Hero buttons on the free-lists page: same pill buttons as the other info pages, help button restyled to match */
.ip-finder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: 1.25rem; }
.ip .ip-help-slot > * {
    display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem;
    padding: .9rem 1.6rem !important; border-radius: 999px !important; border: 2px solid var(--ip-line) !important;
    background: #fff !important; color: var(--ip-primary) !important; font-weight: 700 !important; font-size: 1rem !important; line-height: 1.2;
    box-shadow: none !important; transform: none !important;
}
.ip .ip-help-slot > *:hover { border-color: var(--ip-primary) !important; }

/* Free-lists hero: the code box as a feature card on the right */
.ip-codecard { padding: 2rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.75rem; box-shadow: 0 24px 50px rgba(var(--ip-shadow-rgb), .16); }
.ip-codecard-label { display: inline-block; margin-bottom: .8rem; padding: .3rem .8rem; border-radius: 999px; background: var(--ip-mint); color: #12493c; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.ip-codecard h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; }
.ip-codecard p { color: var(--ip-muted); line-height: 1.55; margin-bottom: 1.4rem; }
.ip-codecard p b { color: var(--ip-ink); letter-spacing: .1em; }
.ip-codecard .ip-code { flex-direction: column; max-width: none; }
.ip-codecard .ip-code input { text-align: center; padding: 1.1rem 1.2rem; font-size: 1.3rem; border-radius: 1rem; background: var(--ip-bg); }
.ip-codecard .ip-code .ip-btn { width: 100%; padding: 1rem 1.6rem; font-size: 1.05rem; }
.ip-codecard .ip-code-error { text-align: center; }

/* ---------- List detail page ---------- */
.ip-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: -.75rem 0 2rem; color: var(--ip-muted); font-weight: 600; font-size: .95rem; }
.ip-meta b { color: var(--ip-ink); }
.ip-bigcode { display: block; margin: .2rem 0 .6rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: .22em; color: var(--ip-primary-dark); }
.ip-codecard .ip-btn-block { width: 100%; }

.ip-details { padding: 3.5rem 0 3rem; }
.ip-soonbar { margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: #eceff1; border-radius: 1rem; color: #455a64; font-weight: 600; text-align: center; }
.ip-wgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.ip-wcard { padding: 1.4rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.1rem; }
.ip-wtop { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.ip-wnum { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ip-mint); color: #12493c; font-weight: 800; font-size: .85rem; }
.ip-wtop h3 { flex: 1; font-size: 1.3rem; font-weight: 800; margin: 0; }
.ip-wpart { margin-top: .9rem; }
.ip-wlabel { margin-bottom: .25rem; color: var(--ip-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ip-wtext { line-height: 1.5; font-size: .98rem; }
.ip-wtext.ip-sentence { padding: .55rem .85rem; background: var(--ip-bg); border-left: 3px solid var(--ip-mint); border-radius: 0 .5rem .5rem 0; }
.ip-wcard audio { display: block; width: 100%; height: 2.25rem; margin-top: .45rem; }
.ip-wtop audio { width: 11rem; margin: 0; }
@media (max-width: 860px) { .ip-wgrid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ip-wtop { flex-wrap: wrap; } .ip-wtop audio { width: 100%; } }
.ip-cardbtns { display: flex; gap: .75rem; }
.ip-cardbtns .ip-btn { flex: 1; justify-content: center; text-align: center; }

/* =====================================================================
   School registration page (register.php)
   ===================================================================== */
.reg-outer { max-width:760px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.reg-main-card { background:#fff; border:1px solid var(--ip-line); border-radius:1.5rem; padding:2.5rem; box-shadow:0 18px 40px rgba(var(--ip-shadow-rgb),.12); }
.reg-progress { background:#e9ecef; border-radius:99px; height:6px; overflow:hidden; margin-bottom:.8rem; }
.reg-progress-bar { height:100%; background:var(--ip-mint); border-radius:99px; transition:width .4s ease; }
.reg-steps-labels { display:flex; margin-bottom:2rem; }
.reg-step-label { font-size:.75rem; color:#9ca3af; font-weight:600; flex:1; text-align:center; }
.reg-step-label.active { color:#12493c; font-weight:700; }
.reg-step-label.done { color:#2f8d77; }
.ip .reg-step-title { font-size:1.5rem; font-weight:800; margin:0 0 .6rem; }
.ip .reg-step-intro { color:var(--ip-muted); font-size:.95rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--ip-line); }
/* Space between each group of fields */
.reg-step .form-label { display:block; font-weight:700; margin-bottom:.55rem; }
.reg-step .form-hint { margin-top:.5rem; font-size:.82rem; color:var(--ip-muted); }
.reg-step .mb-3 { margin-bottom:1.75rem !important; }
.reg-step .mb-4 { margin-bottom:2rem !important; }
.ip .reg-note { font-size:.82rem; color:var(--ip-muted); margin-top:.5rem; }
.reg-notice { background:#fffbeb; border:1px solid #fcd34d; border-radius:.9rem; padding:.9rem 1.1rem; margin-bottom:2rem; font-size:.9rem; color:#374151; }

.reg-product-pills { display:flex; gap:.75rem; flex-wrap:wrap; }
.reg-product-pill { flex:1; min-width:160px; border:2px solid var(--ip-line); border-radius:1rem; padding:.9rem 1rem; cursor:pointer; display:flex; align-items:center; gap:.75rem; user-select:none; transition:border-color .2s, background .2s; }
.reg-product-pill:hover { border-color:var(--ip-mint); }
.reg-product-pill.selected-maths { border-color:#5867DD; background:rgba(88,103,221,.06); }
.reg-product-pill.selected-spelling { border-color:var(--ip-mint); background:rgba(132,220,198,.15); }
.reg-pill-icon { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.reg-pill-icon-maths { background:rgba(88,103,221,.12); color:#5867DD; }
.reg-pill-icon-spelling { background:rgba(132,220,198,.3); color:#12493c; }
.reg-pill-body { flex:1; }
.reg-pill-name { font-weight:700; font-size:.92rem; }
.reg-pill-price { font-size:.78rem; color:var(--ip-muted); margin-top:.1rem; }
.reg-pill-check { width:20px; height:20px; border-radius:50%; border:2px solid #d1d5db; flex-shrink:0; }
.reg-product-pill.selected-maths .reg-pill-check { background:#5867DD; border-color:#5867DD; }
.reg-product-pill.selected-spelling .reg-pill-check { background:var(--ip-mint); border-color:var(--ip-mint); }

.reg-match-warning { background:#fffbeb; border:1px solid #fcd34d; border-radius:.9rem; padding:1rem 1.1rem; margin-bottom:1.25rem; }
.reg-match-expired { background:#fff7ed; border:1px solid #f97316; border-radius:.9rem; padding:1rem 1.1rem; margin-bottom:1.25rem; }

.reg-seats-control { display:flex; align-items:center; gap:.5rem; width:fit-content; }
.reg-seats-btn { width:36px; height:36px; border:2px solid var(--ip-mint); border-radius:8px; background:#fff; color:#12493c; font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; line-height:1; }
.reg-seats-btn:hover { background:var(--ip-mint); }
.reg-seats-input { width:70px; text-align:center; font-weight:700; font-size:1.05rem; }

.reg-billing-options { display:flex; flex-direction:column; gap:.55rem; margin-bottom:.75rem; }
.reg-radio-option { display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.88rem; color:#374151; }
.reg-radio-option input[type="radio"] { display:none; }
.reg-radio-mark { width:20px; height:20px; border:2px solid #d1d5db; border-radius:50%; flex-shrink:0; }
.reg-radio-option input:checked ~ .reg-radio-mark { border-color:var(--ip-mint); border-width:6px; }

.reg-discount-row { display:flex; gap:.5rem; }
.reg-discount-input { max-width:180px; font-family:monospace; letter-spacing:.08em; text-transform:uppercase; }

.reg-summary-table { width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:.75rem; }
.reg-summary-table thead th { padding:.5rem .85rem; font-size:.88rem; color:#fff; }
.reg-summary-table thead th.th-maths { background:#5867DD; }
.reg-summary-table thead th.th-spelling { background:var(--ip-mint); color:#12493c; }
.reg-summary-table tbody td { padding:.4rem .85rem; color:#374151; border-bottom:1px solid #f3f4f6; }
.reg-summary-table tfoot td { padding:.6rem .85rem; font-weight:700; background:#f3f4f6; }

.reg-invoice-note { display:flex; gap:.7rem; background:rgba(132,220,198,.15); border-left:3px solid var(--ip-mint); border-radius:0 8px 8px 0; padding:.8rem 1rem; margin-bottom:1.25rem; font-size:.85rem; color:#374151; line-height:1.5; }
.reg-terms-label { display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; font-size:.86rem; color:#374151; line-height:1.5; }
.reg-terms-label input { margin-top:.15rem; accent-color:#2f8d77; }
.reg-terms-label a { color:#2f8d77; }

.reg-section { padding:0 0 1rem; }
.reg-section-heading { font-weight:700; font-size:.9rem; margin-bottom:.85rem; }
.reg-section-box { background:var(--ip-bg); border:1px solid var(--ip-line); border-radius:1rem; padding:1.1rem 1.25rem; height:100%; }
.reg-success { text-align:center; }
.reg-success-icon { font-size:3.5rem; color:#2f8d77; margin-bottom:1rem; }
.ip .reg-success h2 { font-size:1.4rem; font-weight:800; margin-bottom:.75rem; }
.ip .reg-success p { color:var(--ip-muted); margin-bottom:.5rem; }
.reg-nav { display:flex; justify-content:space-between; align-items:center; margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid var(--ip-line); gap:.75rem; }

/* =====================================================================
   School login page (login.php)
   ===================================================================== */
.ip-field { margin-bottom: 1.4rem; }
.ip .ip-codecard .form-label { display: block; font-weight: 700; margin-bottom: .5rem; }
.ip .ip-login-forgot { margin: 1.25rem 0 0; text-align: center; font-size: .9rem; }
.ip .ip-login-forgot a { color: var(--ip-primary); font-weight: 600; }

/* Pupil list gate page (spelling_setlist.php) */
.ip-schoollogo { display: block; max-height: 90px; width: auto; margin-bottom: 1.2rem; }

/* Home access sign-in (homeaccess/login.php) */
.ip .ip-pwtoggle { border: 1px solid var(--ip-line); border-left: 0; background: #fff; color: var(--ip-muted); font-weight: 600; font-size: .85rem; padding: 0 1rem; border-radius: 0 .5rem .5rem 0; cursor: pointer; }
.ip .ip-pwtoggle:hover { color: var(--ip-primary); }

/* =====================================================================
   Home subscribe + thank-you pages (homeaccess/subscribe.php, subscribe_success.php)
   ===================================================================== */
.ip-ticks, .ip-steps-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.ip-ticks li { display: block; position: relative; padding: .55rem 0 .55rem 1.9rem; color: var(--ip-muted); line-height: 1.5; font-size: .95rem; }
.ip-ticks li b { color: var(--ip-ink); }
.ip-ticks li::before { content: "\2713"; position: absolute; left: 0; top: .55rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--ip-tint); color: var(--ip-primary); font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ip-teal .ip-ticks li::before { background: var(--ip-mint-soft); }

.ip-sub .field-error { display: none; margin-top: .4rem; font-size: .82rem; font-weight: 600; color: #dc3545; }
.ip-sub .field-error.show { display: block; }
.ip-sub .form-control.has-error { border-color: #dc3545; }
.ip-sub .form-label { display: block; font-weight: 700; margin-bottom: .5rem; }
.ip-sub .plan-help { font-size: .85rem; color: var(--ip-muted); margin: 0 0 1rem; line-height: 1.5; }

.ip-sub .tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.75rem; }
.ip-sub .billing-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.ip-sub .tier-card, .ip-sub .billing-card { position: relative; display: block; width: 100%; text-align: center; border: 2px solid var(--ip-line); border-radius: 1rem; padding: 1rem .5rem; cursor: pointer; transition: border-color .15s, background .15s; }
.ip-sub .tier-card:hover, .ip-sub .billing-card:hover { border-color: var(--ip-primary); }
.ip-sub .tier-card.selected, .ip-sub .billing-card.selected { border-color: var(--ip-primary); background: rgba(var(--ip-rgb), .07); }
.ip-sub .tier-card input, .ip-sub .billing-card input { display: none; }
.ip-sub .tier-card-label { font-weight: 700; font-size: .9rem; }
.ip-sub .tier-card-tests { font-size: .78rem; color: var(--ip-muted); }
.ip-sub .tier-card-price, .ip-sub .billing-card-price { font-size: 1.25rem; font-weight: 800; color: var(--ip-primary); line-height: 1.2; margin-top: .35rem; }
.ip-sub .tier-card-price span, .ip-sub .billing-card-price span { font-size: .75rem; font-weight: 600; color: var(--ip-muted); }
.ip-sub .billing-card-label { font-size: .78rem; font-weight: 700; color: var(--ip-muted); text-transform: uppercase; letter-spacing: .05em; }
.ip-sub .billing-card-saving { font-size: .78rem; color: var(--ip-primary); font-weight: 600; min-height: 1em; }
.ip-sub .tier-popular, .ip-sub .billing-best { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--ip-primary); color: #fff; font-size: .68rem; font-weight: 700; padding: .15rem .6rem; border-radius: 1rem; white-space: nowrap; }
.ip-sub .selection-summary { display: flex; align-items: center; gap: .5rem; background: rgba(var(--ip-rgb), .07); border-radius: .8rem; padding: .75rem 1rem; font-size: .9rem; font-weight: 600; color: var(--ip-primary); margin-bottom: 2rem; }

.ip-sub .strength-bar-wrap { height: 5px; background: #e9ecef; border-radius: 9px; margin-top: .6rem; overflow: hidden; }
.ip-sub .strength-bar { height: 100%; width: 0; transition: width .2s, background .2s; }
.ip-sub .strength-label, .ip-sub .match-label { font-size: .8rem; margin-top: .35rem; min-height: 1em; }

.ip .ip-sub .secure-note { margin: .9rem 0 0; text-align: center; font-size: .82rem; color: var(--ip-muted); }
.ip-sub .next-steps { margin-top: 1.5rem; padding: 1.1rem 1.25rem; background: var(--ip-bg); border-radius: 1rem; }
.ip-sub .next-steps-title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ip-primary); margin-bottom: .5rem; }
.ip-sub .next-steps ol { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--ip-muted); line-height: 1.7; }
.ip-sub .next-steps li b { color: var(--ip-ink); }
.ip .ip-sub .terms-note { margin: 1.25rem 0 0; font-size: .82rem; color: var(--ip-muted); line-height: 1.5; }
.ip-sub .terms-note a { color: var(--ip-primary); font-weight: 600; }
@media (max-width: 575px) { .ip-sub .tier-row { grid-template-columns: 1fr; } }

/* =====================================================================
   Home tests page (homeaccess/tests.php)
   ===================================================================== */
.ip-home { padding-bottom: 4rem; }
.ip-block { padding: 1rem 0 3rem; scroll-margin-top: 110px; }
.ip .ip-sub-note { color: var(--ip-muted); margin-bottom: 1rem; }
.ip-meter { height: .6rem; background: #e9ecef; border-radius: 1rem; overflow: hidden; margin-bottom: .8rem; }
.ip-meter span { display: block; height: 100%; background: var(--ip-primary); border-radius: 1rem; }
.ip-meter span.high { background: #f59e0b; }
.ip-meter span.full { background: #dc3545; }
.ip .ip-codecard .ip-meter-note { font-size: .88rem; margin-bottom: 0; }
.ip .ip-codecard .ip-meter-note a { color: var(--ip-primary); font-weight: 700; }

.ip-testgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: stretch; }
.ip-testcard { display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.5rem; box-shadow: 0 14px 34px rgba(var(--ip-shadow-rgb), .08); }
.ip-testcard-empty { flex-direction: column; justify-content: center; text-align: center; color: var(--ip-muted); }
.ip-testform { flex-direction: column; align-items: stretch; gap: 0; }
.ip-testcard h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.ip-testinfo { flex: 1; min-width: 0; }
.ip .ip-testmeta { font-size: .9rem; color: var(--ip-muted); margin-bottom: .4rem; }
.ip-testform .ip-testmeta { margin-bottom: 1.25rem; }
.ip-testform .form-label { display: block; font-weight: 700; margin-bottom: .5rem; }
.ip-testlinks { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ip-btn-sm { padding: .55rem 1.1rem; font-size: .88rem; }
.ip-status { display: inline-block; padding: .2rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; margin-bottom: .6rem; }
.ip-status-ok { background: #d1fae5; color: #065f46; }
.ip-status-wait { background: #fef3c7; color: #92400e; }
.ip-play { flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; background: var(--ip-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; padding-left: 6px; box-shadow: 0 10px 26px rgba(var(--ip-rgb), .4); transition: transform .15s; }
.ip-play:hover { color: #fff; transform: scale(1.06); }
.ip-plans { flex-direction: column; align-items: stretch; gap: 0; }
.ip-planrow { display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--ip-line); }
.ip-planrow b { display: block; }
.ip-planrow small { color: var(--ip-muted); font-size: .82rem; }
.ip-planprice { font-size: 1.3rem; font-weight: 800; color: var(--ip-primary); text-align: right; }
.ip-plans .ip-btn { margin-top: 1.25rem; }
@media (max-width: 860px) { .ip-testgrid { grid-template-columns: 1fr; } .ip-testcard { flex-direction: column; text-align: center; } .ip-testlinks { justify-content: center; } }

/* Tabs, history and modals (moved from tests.php) */
        
            /* Leaves room for the fixed navbar when scrolled to */
            #free-tests { scroll-margin-top: 120px; }
            .bb-tabs { display: inline-flex; background: #eef0fb; border-radius: 12px; padding: 4px; margin-bottom: 1rem; gap: 4px; flex-wrap: wrap; }
            .bb-tab {
                border: none; background: transparent; color: #4b5563;
                font-weight: 700; font-size: .92rem;
                padding: .55rem 1.1rem; border-radius: 9px; cursor: pointer;
            }
            .bb-tab.active { background: #fff; color: #5867DD; box-shadow: 0 2px 8px rgba(88,103,221,.15); }
            .bb-tab__count {
                display: inline-block; margin-left: .35rem; min-width: 1.4rem;
                padding: 0 .4rem; border-radius: 1rem; font-size: .72rem;
                background: rgba(88,103,221,.12); color: #5867DD;
            }
            .badge-current {
                display: inline-block; margin-left: .4rem; padding: .15rem .55rem;
                border-radius: 1rem; font-size: .7rem; font-weight: 700;
                background: #d1fae5; color: #065f46; vertical-align: middle;
            }
            .btn-reinstate {
                background: rgba(88,103,221,.1); color: #5867DD; border: none;
                border-radius: .5rem; padding: .4rem .9rem; font-size: .82rem;
                font-weight: 600; cursor: pointer; white-space: nowrap;
            }
            .btn-reinstate:hover { background: rgba(88,103,221,.18); }
        
.gen-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.95);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
    padding: 2rem;
}
.gen-loading.active { display: flex; }
.gen-loading__spinner {
    width: 56px; height: 56px;
    border: 4px solid #e0e3f5;
    border-top-color: #5867DD;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gen-loading__title { font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.gen-loading__sub   { font-size: .85rem; color: #6b7280; max-width: 320px; }
.gen-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.55);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.gen-modal.active { display: flex; }
.gen-modal__box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    width: 100%;
    max-width: 440px;
    padding: 1.75rem;
}
.gen-modal__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(88,103,221,.1);
    color: #5867DD;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.gen-modal__title { font-size: 1.15rem; font-weight: 800; color: #1f2937; margin: 0 0 .35rem; }
.gen-modal__sub   { font-size: .9rem; color: #4b5563; margin: 0 0 1.1rem; }
.gen-modal__usage {
    background: #f5f6fb;
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .88rem;
    color: #374151;
    margin-bottom: .85rem;
    line-height: 1.6;
}
.gen-modal__warn {
    font-size: .82rem;
    color: #92400e;
    background: #fef3c7;
    border-radius: 8px;
    padding: .6rem .85rem;
    margin-bottom: 1.25rem;
}
.gen-modal__actions { display: flex; gap: .75rem; }
.gen-modal__btn {
    flex: 1;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
}
.gen-modal__btn--cancel  { background: #fff; border-color: #e5e7eb; color: #374151; }
.gen-modal__btn--cancel:hover { background: #f9fafb; }
.gen-modal__btn--confirm { background: #5867DD; color: #fff; }
.gen-modal__btn--confirm:hover { opacity: .92; }
.gen-modal__btn:disabled { opacity: .6; cursor: default; }
.ip-block .ip-head { margin-bottom: 1.25rem; }

/* ---------- Activities pages (maths.php / spelling.php) ---------- */
.ip-lcard[hidden] { display: none; }
.ip-aimg { aspect-ratio: 5/3; width: 100%; object-fit: cover; border-radius: .8rem; margin-bottom: 1.1rem; background: linear-gradient(135deg, var(--ip-tint), var(--ip-mint-soft)); display: flex; align-items: center; justify-content: center; color: var(--ip-primary); font-size: 2.5rem; }
.ip-acat { margin-bottom: .4rem; color: var(--ip-primary); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ip.ip-teal .ip-acat { color: #2f8d77; }
.ip-lcard h3 { margin-bottom: .6rem; }
.ip .ip-adesc { flex: 1; margin: 0 0 1.5rem; color: var(--ip-muted); font-size: .93rem; line-height: 1.6; }
.ip-lcard .ip-lcard-actions { margin-top: auto; }
.ip-noresults { display: none; padding: 3rem 1rem; text-align: center; color: var(--ip-muted); }
.ip-noresults.show { display: block; }
.ip-noresults h3 { margin-bottom: .4rem; color: var(--ip-ink); }
.ip-listcard h2 { font-size: 1.5rem; }
.ip-listcard .ip-schoollogo { max-height: 3.5rem; width: auto; margin-bottom: .8rem; }
.ip-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 1.2rem; }
.ip-crumbs span { padding: .25rem .65rem; border-radius: .5rem; background: var(--ip-mint-soft); color: #12493c; font-weight: 600; font-size: .88rem; }
.ip-listcard details { margin-bottom: 1.2rem; }
.ip-listcard details summary { margin-bottom: .6rem; cursor: pointer; color: var(--ip-primary); font-weight: 700; }
.ip.ip-teal .ip-listcard details summary { color: #2f8d77; }
.ip-listcard details .ip-crumbs { margin: 0; }

/* ---------- School tests page (mentalmaths/school) ---------- */
.ip-ttable { border: 1px solid var(--ip-line); border-radius: 1.25rem; overflow: hidden; background: #fff; }
.ip-trow { display: grid; grid-template-columns: minmax(0,1fr) 7rem 5.5rem 8rem; gap: 1rem; align-items: center; padding: 1.1rem 1.4rem; border-top: 1px solid var(--ip-line); }
.ip-trow[hidden] { display: none; }
.ip-thead { padding: .8rem 1.4rem; border-top: 0; background: var(--ip-bg); color: var(--ip-muted); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ip-tname { font-weight: 700; font-size: 1.02rem; }
.ip-tname .ip-status { margin: 0 0 0 .5rem; vertical-align: middle; }
.ip .ip-tsub { margin-top: .2rem; color: var(--ip-muted); font-size: .85rem; }
.ip-tyear span { display: inline-block; padding: .2rem .65rem; border-radius: 999px; background: var(--ip-tint); color: var(--ip-primary-dark); font-weight: 700; font-size: .8rem; }
.ip-tprint { display: flex; gap: .9rem; font-size: 1.15rem; }
.ip-tprint a { color: var(--ip-muted); }
.ip-tprint a:hover { color: var(--ip-primary); }
.ip-tact { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.ip-tact .ip-btn { padding: .55rem 1.3rem; font-size: .9rem; }
.ip-tdelete { border: 0; background: none; color: #dc3545; font-size: 1.1rem; padding: .2rem; }
.ip-btn-locked, .ip-btn-locked:hover { background: #eef0f4; color: #6b7280; border-color: #dfe3ea; box-shadow: none; transform: none; }
.ip-btn-danger { background: #dc3545; color: #fff; }
.ip-btn-danger:hover { background: #bb2d3b; color: #fff; }
.modal .ip-btn { --ip-primary: #5867DD; --ip-primary-dark: #4455c7; --ip-rgb: 88,103,221; --ip-line: #e3e6f3; }
.ip-tmeta { margin-bottom: .9rem; color: var(--ip-muted); font-size: .9rem; font-weight: 600; }
.ip-pager { display: flex; justify-content: center; gap: .4rem; margin-top: 1.5rem; }
.ip-pager button { min-width: 2.4rem; padding: .4rem .7rem; border: 1px solid var(--ip-line); border-radius: .6rem; background: #fff; color: var(--ip-ink); font-weight: 700; }
.ip-pager button.active { background: var(--ip-primary); border-color: var(--ip-primary); color: #fff; }
.ip-pager button:disabled { opacity: .45; }
.ip .ip-backrow { margin-top: 2rem; text-align: center; }
.ip-schoolcard-logo { max-height: 4.5rem; max-width: 12rem; width: auto; margin-bottom: 1rem; object-fit: contain; }
@media (max-width: 760px) {
    .ip-thead { display: none; }
    .ip-trow { grid-template-columns: 1fr auto; gap: .6rem 1rem; padding: 1rem; }
    .ip-tname-cell { grid-column: 1 / -1; }
    .ip-tact { grid-column: 2; grid-row: 2; }
}
@media (max-width: 480px) {
    .ip-codecard .ip-cardbtns { flex-direction: column; }
}

/* ---------- Class-mode test page: compact hero, follows the school's brand colour ---------- */
.ip.ip-brand { --ip-primary: var(--mm-primary, #5867DD); --ip-primary-dark: color-mix(in srgb, var(--mm-primary, #5867DD) 85%, #000); --ip-primary-deep: color-mix(in srgb, var(--mm-primary, #5867DD) 85%, #000); --ip-rgb: var(--mm-primary-rgb, 88,103,221); }
.ip-hero-compact { padding: 2.5rem 0 3rem; }
.ip-hero-compact h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.ip-hero-compact .ip-lead { max-width: 42rem; margin-bottom: 1.25rem; font-size: 1.05rem; }
.ip-hero-compact .ip-actions { margin-bottom: 0; }
.ip-hero-compact .ip-btn { padding: .65rem 1.3rem; font-size: .95rem; }
.ip-hero-slim { grid-template-columns: 1fr auto; }
.ip-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ip-facts li { padding: .3rem .85rem; border: 1px solid var(--ip-line); border-radius: 999px; background: #fff; color: var(--ip-ink); font-weight: 700; font-size: .85rem; }
.ip-logocard { display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.75rem; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.25rem; box-shadow: 0 14px 34px rgba(var(--ip-shadow-rgb), .1); }
.ip-logocard img { max-height: 7rem; max-width: 14rem; width: auto; object-fit: contain; }
@media (max-width: 960px) { .ip-hero-slim { grid-template-columns: 1fr; } .ip-logocard { justify-self: start; } }

/* ---------- Home access landing page ---------- */
.ip-why-home { padding: 3rem 0 2.5rem; scroll-margin-top: 1rem; }
.ip-helps { margin-top: 2rem; }
.ip-helps h3 { margin-bottom: .5rem; font-size: 1.3rem; font-weight: 700; }
.ip-helps .ip-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 2rem; }
.ip-showcase { padding: 0; scroll-margin-top: 1rem; }
.ip-showcase .ip-split, .ip-access .ip-split { padding: 0; }
.ip-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; margin-bottom: 2.75rem; }
.ip-split.ip-flip { grid-template-columns: 1.1fr 1fr; }
.ip-split.ip-flip > :first-child { order: 2; }
.ip-split.ip-split-flush { margin-bottom: 0; }
.ip-split h3 { margin-bottom: .75rem; font-size: 1.7rem; font-weight: 700; }
.ip .ip-split p { margin-bottom: 1.25rem; color: var(--ip-muted); font-size: 1.05rem; line-height: 1.65; }
.ip-split .ip-status { margin-bottom: .75rem; }
.ip-split .ip-ticks { margin-bottom: 1.5rem; }
.ip-browser { overflow: hidden; border: 1px solid var(--ip-line); border-radius: 1rem; background: #fff; box-shadow: 0 24px 50px rgba(var(--ip-shadow-rgb), .16); }
.ip-browser-bar { display: flex; align-items: center; padding: .6rem .9rem; background: var(--ip-bg); border-bottom: 1px solid var(--ip-line); }
.ip-browser-bar span { flex: 1; padding: .25rem .8rem; border-radius: 999px; background: #fff; color: var(--ip-muted); font-size: .78rem; }
.ip-browser img, .ip-shotph { display: block; width: 100%; }
.ip-shotph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/10; padding: 1rem; background: linear-gradient(135deg, var(--ip-tint), var(--ip-mint-soft)); color: var(--ip-muted); font-weight: 600; font-size: .9rem; text-align: center; }
.ip-phone { width: min(15rem, 100%); margin: 0 auto; overflow: hidden; border: .55rem solid var(--ip-ink); border-radius: 2.2rem; background: #fff; box-shadow: 0 24px 50px rgba(var(--ip-shadow-rgb), .22); }
.ip-phone img { display: block; width: 100%; }
.ip-phone .ip-shotph { aspect-ratio: 9/19; }
.ip-free-full { margin: 0; padding: 2.5rem 0; background: var(--ip-mint-soft); }
.ip-free-full .ip-free-box { padding: 0; background: none; border-radius: 0; }
.ip-access { padding: 3.5rem 0 4rem; background: var(--ip-bg); scroll-margin-top: 1rem; }
.ip-access .ip-head { margin-bottom: 1.5rem; }
.ip-access .ip-split { margin-bottom: 0; }
.ip-installcols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.ip-installcols h4 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; }
.ip-installcols .ip-installsteps { margin-bottom: 0; }
.ip-installsteps { display: flex; flex-direction: column; gap: .8rem; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: ins; }
.ip-installsteps li { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.5; font-weight: 600; counter-increment: ins; }
.ip-installsteps li::before { content: counter(ins); flex: 0 0 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ip-primary); color: #fff; font-size: .85rem; font-weight: 800; }
.ip-or { margin: 1.25rem 0 .75rem; color: var(--ip-muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.ip .ip-codecard .ip-card-p2 { margin-bottom: 1rem; }
.ip-cards-home { max-width: 62rem; margin: 0 auto; }
.ip-reassure-center { justify-content: center; margin-top: 1.5rem; }
.ip-notify { max-width: 36rem; margin: 2.5rem auto 0; }
.ip-notify .ip-code { max-width: none; }
.ip-code-email input { font-size: 1rem; font-weight: 500; letter-spacing: normal; text-transform: none; }
.ip-notify .cf-turnstile { margin-top: 1rem; }
.ip-code-error.ip-ok { color: #1f6b58; }
@media (max-width: 860px) {
    .ip-split, .ip-split.ip-flip { grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 2.25rem; }
    .ip-split.ip-flip > :first-child { order: 0; }
    .ip-helps .ip-ticks, .ip-installcols { grid-template-columns: 1fr; }
    .ip-access { padding: 2.5rem 0 3rem; }
    .ip-cards-home { grid-template-columns: 1fr; max-width: 24rem; }
}

/* ---------- School forgot-password account picker ---------- */
.ip-pick-intro { margin-bottom: .5rem; color: var(--ip-muted); font-size: .95rem; line-height: 1.5; text-align: left; }
.ip-pick-school { margin: 1rem 0 .25rem; font-weight: 800; font-size: .95rem; text-align: left; }
.ip-pick-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--ip-line); }
.ip-pick-row span { font-weight: 600; font-size: .92rem; text-align: left; }
.ip-pick-row small { margin-left: .4rem; color: var(--ip-muted); font-size: .8rem; font-weight: 600; }
.ip-pick-row .ip-btn { padding: .4rem 1.1rem; font-size: .85rem; }

/* ---------- Contact page ---------- */
.ip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.ip .ip-textarea { min-height: 11rem; resize: vertical; }
.ip-hero-grid.ip-hero-top { align-items: start; }
.ip-hero-top > :first-child { padding-top: .5rem; }
.ip-charcount { margin-top: .3rem; color: var(--ip-muted); font-size: .82rem; text-align: right; }
.ip-charcount.warning { color: #b7791f; }
.ip-charcount.danger { color: #c0392b; }
.ip-alert { margin-bottom: 1.25rem; padding: .9rem 1.1rem; border-radius: .9rem; font-weight: 600; font-size: .95rem; line-height: 1.5; }
.ip-alert-ok { background: var(--ip-mint-soft); color: var(--ip-mint-ink); }
.ip-alert-error { background: #fdecea; color: #8a1f17; }
.ip-ticks-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.5rem; margin-top: 1.5rem; }
.ip .ip-formnote { margin: 1rem 0 0; color: var(--ip-muted); font-size: .85rem; line-height: 1.5; text-align: center; }
.ip-formnote a { color: var(--ip-primary); font-weight: 700; }
@media (max-width: 860px) { .ip-ticks-2 { grid-template-columns: 1fr; } }

.ip-codecard-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.ip-codecard-top .ip-codecard-label { margin-bottom: 0; }
.ip-stepcount { color: var(--ip-muted); font-size: .85rem; font-weight: 700; }
.ip-formbtns { display: flex; gap: .75rem; }
.ip-formbtns .ip-btn-primary { flex: 1; }

/* ---------- Legal pages (privacy, terms, etc.) ---------- */
.ip-legal { padding: 2.5rem 0 4rem; }
.ip-legal-grid { display: grid; grid-template-columns: 15rem 1fr; gap: 3rem; align-items: start; }
.ip-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; padding: 1.25rem 1.1rem; background: var(--ip-bg); border-radius: 1.25rem; }
.ip-toc-title { margin-bottom: .6rem; color: var(--ip-muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ip-toc ol { margin: 0; padding: 0; list-style: none; }
.ip-toc a { display: block; padding: .3rem 0; color: var(--ip-ink); font-size: .88rem; font-weight: 600; line-height: 1.35; }
.ip-toc a:hover { color: var(--ip-primary); }
.ip-legal-body { min-width: 0; color: var(--ip-muted); font-size: 1rem; line-height: 1.7; }
.ip-legal-body h2 { margin: 2.75rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ip-line); color: var(--ip-ink); font-size: 1.55rem; font-weight: 800; scroll-margin-top: 1.5rem; }
.ip-legal-body h2:first-of-type { margin-top: 0; }
.ip-legal-body h3 { margin: 1.75rem 0 .6rem; color: var(--ip-ink); font-size: 1.15rem; font-weight: 700; scroll-margin-top: 1.5rem; }
.ip .ip-legal-body p { margin: 0 0 1rem; }
.ip-legal-body ul, .ip-legal-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.ip-legal-body li { margin-bottom: .4rem; }
.ip-legal-body strong { color: var(--ip-ink); font-weight: 700; }
.ip-legal-body a { color: var(--ip-primary); font-weight: 600; }
.ip-legal-notice { margin-bottom: 2.5rem; padding: 1.4rem 1.6rem; background: var(--ip-tint); border-radius: 1.25rem; }
.ip-legal-notice h3 { margin: 0 0 .4rem; }
.ip .ip-legal-notice p { margin: 0; }
.ip-legal-tablewrap { margin: 1.25rem 0 1.5rem; overflow-x: auto; border: 1px solid var(--ip-line); border-radius: 1rem; }
.ip-legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ip-legal-table th, .ip-legal-table td { padding: .75rem 1rem; border-top: 1px solid var(--ip-line); text-align: left; vertical-align: top; }
.ip-legal-table thead th { border-top: 0; background: var(--ip-bg); color: var(--ip-ink); font-weight: 700; }
.ip-legal-contact { margin: 1.25rem 0 1.5rem; padding: 1.5rem 1.75rem; background: var(--ip-bg); border-radius: 1.25rem; }
.ip-legal-contact h3 { margin-top: 0; }
.ip .ip-legal-contact p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .ip-legal-grid { grid-template-columns: 1fr; gap: 0; }
    .ip-toc { display: none; }
}

.ip-legal-body .ip-legal-list { list-style: none; padding: 0; }
.ip-legal-list li { position: relative; margin: 0; padding: .6rem 0 .6rem 2rem; border-bottom: 1px solid var(--ip-line); }
.ip-legal-list li:last-child { border-bottom: 0; }
.ip-legal-list li::before { position: absolute; left: 0; top: .6rem; width: 1.3rem; height: 1.3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .75rem; font-weight: 800; }
.ip-legal-list .ip-yes::before { content: "\2713"; background: var(--ip-mint-soft); color: var(--ip-mint-ink); }
.ip-legal-list .ip-no::before { content: "\2715"; background: #fdecea; color: #8a1f17; }
.ip-legal-warning { margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: #fff7e0; border-radius: 1.25rem; color: #6b4e0a; font-size: .97rem; }
.ip-legal-warning strong { color: #6b4e0a; }

.ip-legal-note { margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: var(--ip-mint-soft); border-radius: 1.25rem; color: var(--ip-mint-ink); font-size: .97rem; }
.ip-legal-note strong { color: var(--ip-mint-ink); }
.ip-legal-action { margin: 1.5rem 0; }

.ip-legal-card { margin: 1.25rem 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--ip-primary); border-radius: 0 1.25rem 1.25rem 0; background: var(--ip-tint); }
.ip-legal-card.ip-card-teachers { border-color: var(--ip-mint); background: var(--ip-mint-soft); }
.ip-legal-card.ip-card-parents { border-color: #f0b429; background: #fff7e0; }
.ip-legal-card.ip-card-pupils { border-color: #e0566b; background: #fdecea; }
.ip-legal-body .ip-legal-card h3 { margin: 0 0 .5rem; }
.ip-legal-body .ip-legal-card h3:not(:first-child) { margin-top: 1.25rem; }
.ip .ip-legal-card p:last-child, .ip-legal-card ul:last-child { margin-bottom: 0; }
.ip-legal-list.ip-allowed li::before { content: "\2713"; background: var(--ip-mint-soft); color: var(--ip-mint-ink); }
.ip-legal-list.ip-notallowed li::before { content: "\2715"; background: #fdecea; color: #8a1f17; }
.ip-legal-card .ip-legal-list li { border-bottom-color: rgba(0,0,0,.07); }
.ip-legal-body .ip-why-grid { margin: 1.25rem 0 1.5rem; }
.ip-legal-body .ip-why-item h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.ip .ip-legal-body .ip-why-item p { margin: 0; font-size: .95rem; }
@media (max-width: 1100px) { .ip-legal-body .ip-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ip-legal-body .ip-why-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Guide pages (help/guide.php): sections | articles | article
   ===================================================================== */
.ip-guide { padding: 2.5rem 0 4rem; background: var(--ip-bg); }
.ip-guide-grid { display: grid; grid-template-columns: 19rem 1fr; background: #fff; border: 1px solid var(--ip-line); border-radius: 1.25rem; overflow: hidden; min-height: 32rem; }
.ip-guide-col { border-right: 1px solid var(--ip-line); display: flex; flex-direction: column; }
.ip-guide-label { margin: 0; padding: 1rem 1.1rem .7rem; border-bottom: 1px solid var(--ip-line); color: var(--ip-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ip-guide-nav { flex: 1; padding: .4rem 0; }
.ip-guide-nav a { display: flex; align-items: center; gap: .65rem; padding: .7rem 1.1rem; border-left: 3px solid transparent; color: var(--ip-ink); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.ip-guide-nav a:hover { background: var(--ip-bg); color: var(--ip-primary); }
.ip-guide-nav a.active { background: rgba(var(--ip-rgb), .08); border-left-color: var(--ip-primary); color: var(--ip-primary); }
.ip-guide-nav a > i:first-child { flex-shrink: 0; width: 1rem; color: var(--ip-primary); text-align: center; }
.ip-guide-nav a > span { flex: 1; }

.ip-guide-sech { cursor: pointer; }
.ip-guide-sec.open > .ip-guide-sech { color: var(--ip-primary); }
.ip-guide-chev { flex-shrink: 0; font-size: .8rem; color: var(--ip-muted); transition: transform .3s ease; }
.ip-guide-sec.open > .ip-guide-sech .ip-guide-chev { transform: rotate(90deg); }
.ip-guide-arts { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ip-guide-sec.open > .ip-guide-arts { grid-template-rows: 1fr; }
.ip-guide-arts > div { overflow: hidden; min-height: 0; background: var(--ip-bg); }
.ip-guide-arts a { padding: .6rem 1.1rem .6rem 2.2rem; font-size: .88rem; font-weight: 600; }
.ip-guide-arts a:hover { background: var(--ip-tint); }
.ip-guide-main { padding: 2rem 2.5rem; min-width: 0; }
.ip-guide-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 2px solid var(--ip-line); }
.ip .ip-guide-head h2 { flex: 1; font-size: 1.5rem; font-weight: 800; }
.ip-guide-print { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--ip-line); border-radius: 50%; background: #fff; color: var(--ip-primary); }
.ip-guide-print:hover { border-color: var(--ip-primary); }

/* Article text. Headings come from the stored content, so they are sized here. */
.ip .ip-guide-body { color: #3d4060; font-size: 1rem; line-height: 1.7; }
.ip .ip-guide-body h1, .ip .ip-guide-body h2 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; font-weight: 800; color: var(--ip-ink); }
.ip .ip-guide-body h3 { margin: 1.4rem 0 .4rem; font-size: 1.08rem; font-weight: 700; color: var(--ip-ink); }
.ip .ip-guide-body h4 { margin: 1.2rem 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--ip-ink); }
.ip .ip-guide-body > :first-child { margin-top: 0; }
.ip .ip-guide-body p { margin: 0 0 .9rem; }
.ip .ip-guide-body ul, .ip .ip-guide-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.ip .ip-guide-body li { margin-bottom: .3rem; }
.ip .ip-guide-body a { color: var(--ip-primary); text-decoration: underline; }
.ip .ip-guide-body code { padding: .1em .4em; border-radius: .3rem; background: var(--ip-tint); color: var(--ip-primary-dark); font-size: .9em; }
.ip .ip-guide-block { margin-bottom: 1.5rem; }
.ip .ip-guide-media { margin-top: 1rem; }
.ip .ip-guide-media video { width: 100%; max-width: 640px; margin: 0 auto; border-radius: .9rem; }
/* Images keep their own size (never stretched) and are capped in height, so phone screenshots stay small */
.ip .ip-guide-media img, .ip .ip-guide-body img { width: auto; height: auto; max-width: 100%; max-height: 26rem; margin: 1rem auto; border-radius: .9rem; border: 1px solid var(--ip-line); box-shadow: 0 6px 18px rgba(var(--ip-shadow-rgb), .12); }
.ip .ip-guide-desc { margin-bottom: 1.25rem; color: var(--ip-muted); line-height: 1.7; }
.ip-guide-empty { padding: 3rem 1rem; text-align: center; color: var(--ip-muted); }
.ip-guide-empty i { display: block; margin-bottom: .75rem; font-size: 2rem; color: #c8cae0; }

.ip-guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ip-line); }
.ip-guide-pager a { display: flex; align-items: center; gap: .75rem; min-height: 4.5rem; padding: .8rem 1.1rem; border: 1px solid var(--ip-line); border-radius: 1rem; color: var(--ip-ink); }
.ip-guide-pager a:hover { border-color: var(--ip-primary); color: var(--ip-primary); }
.ip-guide-pager i { color: var(--ip-primary); }
.ip-guide-pager small { display: block; color: var(--ip-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ip-guide-pager span { font-size: .92rem; font-weight: 700; line-height: 1.3; }
.ip-guide-pager .ip-guide-next { grid-column: 2; justify-content: flex-end; text-align: right; }

@media (max-width: 960px) {
    .ip-guide-grid { grid-template-columns: 1fr; }
    .ip-guide-col { border-right: 0; border-bottom: 1px solid var(--ip-line); }
    .ip-guide-main { padding: 1.5rem 1.25rem; }
    .ip-guide-pager { grid-template-columns: 1fr; }
    .ip-guide-pager .ip-guide-next { grid-column: 1; }
}
@media print {
    .ip-guide-col, .ip-guide-pager, .ip-guide-print { display: none; }
}


/* Help centre search box (help/index.php hero) */
.ip-search { position: relative; max-width: 34rem; margin-top: 1.75rem; }
.ip-search i { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: var(--ip-muted); pointer-events: none; }
.ip .ip-search input { width: 100%; padding: .95rem 1.25rem .95rem 2.9rem; border: 2px solid var(--ip-line); border-radius: 999px; background: #fff; color: var(--ip-ink); font-size: 1rem; box-shadow: 0 8px 20px rgba(var(--ip-shadow-rgb), .08); outline: none; transition: border-color .2s, box-shadow .2s; }
.ip .ip-search input:focus { border-color: var(--ip-primary); box-shadow: 0 0 0 4px rgba(var(--ip-rgb), .14); }

/* =====================================================================
   Home account page (homeaccess/account.php)
   ===================================================================== */
.ip-btn-warn { background: #f59e0b; color: #fff; }
.ip-btn-warn:hover { background: #d98a06; color: #fff; }
.ip-btn-danger { background: #dc3545; color: #fff; }
.ip-btn-danger:hover { background: #bb2d3b; color: #fff; }
.ip-alert-warn { background: #fff7e0; color: #7a4d00; }
.ip-alert i { margin-right: .4rem; }

.ip-status-bad  { background: #fdecea; color: #8a1f17; }
.ip-acct .ip-status, .ip-acct-table .ip-status { margin-bottom: 0; }
.ip-status i { margin-right: .25rem; }

.ip-acct { padding-top: 2rem; padding-bottom: 4rem; }
.ip-acct-grid { display: grid; grid-template-columns: 240px 1fr; gap: 1.75rem; align-items: start; }
.ip-acct-side { position: sticky; top: 1.5rem; }
.ip-acct-profile { background: var(--ip-bg); border: 1px solid var(--ip-line); border-radius: 1.1rem; padding: 1.4rem 1.1rem; text-align: center; margin-bottom: .9rem; }
.ip-acct-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ip-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; margin: 0 auto .7rem; }
.ip .ip-acct-name { font-weight: 800; margin-bottom: .1rem; }
.ip .ip-acct-email { font-size: .8rem; color: var(--ip-muted); word-break: break-all; margin-bottom: .7rem; }
.ip-acct-nav { background: #fff; border: 1px solid var(--ip-line); border-radius: 1.1rem; overflow: hidden; }
.ip-acct-nav a { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; font-weight: 700; font-size: .92rem; color: var(--ip-ink); border-bottom: 1px solid var(--ip-line); }
.ip-acct-nav a:last-child { border-bottom: 0; }
.ip-acct-nav a:hover { background: var(--ip-bg); }
.ip-acct-nav a.active { background: var(--ip-tint); color: var(--ip-primary); }

.ip-acct-card { background: #fff; border: 1px solid var(--ip-line); border-radius: 1.1rem; padding: 1.75rem; box-shadow: 0 10px 30px rgba(var(--ip-shadow-rgb),.06); }
.ip-acct-card[hidden] { display: none; }
.ip .ip-acct-card h2 { font-size: 1.35rem; margin-bottom: 1.4rem; }
.ip .ip-acct-card h3 { font-size: 1.05rem; margin: 2rem 0 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--ip-line); }
.ip-acct .ip-field { margin-bottom: 1rem; }
.ip-acct .form-label, .ip-modal .form-label { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; }
.ip-acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ip-acct-top { gap: 1.5rem; margin-bottom: 1.5rem; align-items: start; }
.ip .ip-acct-intro { color: var(--ip-muted); margin-bottom: 1.25rem; }
.ip-acct-label { font-size: .75rem; font-weight: 800; color: var(--ip-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.ip-acct-label span { font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: .4rem; }

.ip-acct-list { margin: 0; }
.ip-acct-list > div { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--ip-line); font-size: .92rem; }
.ip-acct-list > div:last-child { border-bottom: 0; }
.ip-acct-list dt { font-weight: 500; color: var(--ip-muted); }
.ip-acct-list dd { margin: 0; font-weight: 700; text-align: right; }

.ip-acct-period { margin-bottom: 1.25rem; }
.ip-acct-tests { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ip-line); border-radius: .8rem; overflow: hidden; }
.ip-acct-tests li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--ip-line); font-size: .92rem; }
.ip-acct-tests li:last-child { border-bottom: 0; }
.ip-acct-tests small { color: var(--ip-muted); margin-left: .5rem; font-size: .8rem; }
.ip-acct-tests .ip-btn { flex-shrink: 0; box-shadow: none; padding: .35rem .85rem; font-size: .8rem; }
.ip-acct-tests .ip-btn:hover { transform: none; }
.ip-acct-card > .ip-btn { margin-top: .5rem; }

.ip-acct-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ip-acct-tier { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1.25rem 1rem; border: 2px solid var(--ip-line); border-radius: 1rem; background: #fff; }
.ip-acct-tier.is-current { border-color: var(--ip-primary); background: var(--ip-tint); }
.ip-acct-tier > i { font-size: 1.6rem; color: var(--ip-muted); }
.ip-acct-tier.is-current > i { color: var(--ip-primary); }
.ip-acct-tier > span { color: var(--ip-muted); font-size: .85rem; }
.ip-acct-tier > strong { font-size: 1.3rem; font-weight: 800; color: var(--ip-primary); margin-bottom: .6rem; }
.ip-acct-tier > strong small { font-size: .8rem; font-weight: 600; color: var(--ip-muted); }
.ip-acct-tier > .ip-status { margin-top: auto; }
.ip-acct-tier > .ip-btn { margin-top: auto; box-shadow: none; }
.ip-acct-tier > em { font-style: normal; font-size: .8rem; color: #7a4d00; }

.ip-acct-tablewrap { overflow-x: auto; }
.ip-acct-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ip-acct-table th { font-size: .75rem; font-weight: 800; color: var(--ip-muted); text-transform: uppercase; letter-spacing: .05em; padding: .5rem .6rem; border-bottom: 1px solid var(--ip-line); text-align: left; }
.ip-acct-table td { padding: .75rem .6rem; border-bottom: 1px solid var(--ip-line); }
.ip-acct-table .r { text-align: right; }
.ip-acct-table .c { text-align: center; }
.ip-acct-table .nw { white-space: nowrap; color: var(--ip-muted); }
.ip-acct-table a { color: var(--ip-primary); }

/* Account modals */
.ip-modal .modal-content { border: 0; border-radius: 1.1rem; box-shadow: 0 20px 60px rgba(0,0,0,.18); color: var(--ip-ink); }
.ip-modal .modal-dialog { max-width: 460px; }
.ip-modal .modal-body { padding: 1.75rem 1.75rem 1rem; }
.ip-modal .modal-footer { border: 0; padding: .25rem 1.75rem 1.75rem; gap: .75rem; justify-content: center; }
.ip-modal .modal-footer form { margin: 0; }
.ip-modal h5 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .75rem; }
.ip-modal .modal-body > p { color: var(--ip-muted); font-size: .92rem; margin: 0 0 1rem; }
.ip-modal .ip-alert { font-size: .85rem; font-weight: 500; }
.ip-opt { display: block; border: 2px solid var(--ip-line); border-radius: .9rem; padding: .9rem 1rem; margin-bottom: .75rem; cursor: pointer; }
.ip-opt b { display: block; margin-bottom: .15rem; }
.ip-opt b i { margin-right: .4rem; color: var(--ip-primary); }
.ip-opt span { color: var(--ip-muted); font-size: .85rem; }
.ip-opt.is-on { border-color: var(--ip-primary); background: var(--ip-tint); }
.ip-opt.is-del { border-color: #dc3545; background: #fff5f5; }
.ip-opt.is-del b i { color: #dc3545; }
.ip-acct-due { background: var(--ip-tint); border-radius: .9rem; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ip-acct-due > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-weight: 700; }
.ip-acct-due strong { font-size: 1.3rem; color: var(--ip-primary); }
.ip-acct-due small { color: var(--ip-muted); }
.ip-acct-fielderr { color: #8a1f17; font-size: .8rem; margin-top: .3rem; }
.ip-modal [hidden] { display: none; }

@media (max-width: 900px) {
    .ip-acct-grid { grid-template-columns: 1fr; }
    .ip-acct-side { position: static; }
    .ip-acct-nav { display: flex; overflow-x: auto; }
    .ip-acct-nav a { border-bottom: 0; border-right: 1px solid var(--ip-line); white-space: nowrap; }
}
@media (max-width: 640px) {
    .ip-acct-two, .ip-acct-tiers { grid-template-columns: 1fr; }
    .ip-acct-card { padding: 1.25rem; }
}
.ip-acct-grid > * { min-width: 0; }

/* Help centre article view (help/index.php) — same sizes as the guide pages */
.hc-main .hc-article-header h2 { font-size: 1.5rem; }
.hc-main .hc-article-content { font-size: 1rem; line-height: 1.7; }
.hc-main .hc-article-content h1, .hc-main .hc-article-content h2 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.hc-main .hc-article-content h3 { margin: 1.4rem 0 .4rem; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.hc-main .hc-article-content h4 { margin: 1.2rem 0 .3rem; font-size: 1rem; font-weight: 700; }
.hc-main .hc-article-content > :first-child { margin-top: 0; }
.hc-main .hc-article-content p { margin: 0 0 .9rem; }
.hc-main .hc-article-content img, .hc-main .hc-section-media img { width: auto; height: auto; max-width: 100%; max-height: 26rem; margin: 1rem auto; border-radius: .9rem; border: 1px solid var(--hc-border, #e3e6f3); box-shadow: 0 6px 18px rgba(48,58,140,.12); }
.hc-main .hc-section-media video { max-width: 640px; }