/* Public site: pieces shared by the home, Exam Prep, Skills and Home
   Schooling pages, on top of landing.css. App components shown on these
   pages come from the design system through islands, not from here. */

/* ---------------------------------------------------------------- header */
/* Six links need more room than a tablet has: the menu takes over below 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .landing-nav__links, .landing-nav__login { display: none; }
    .landing-nav__toggle { display: flex; }
}
@media (min-width: 1024px) {
    .landing-nav__links { gap: 1.6rem; }
}

.site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer__promise { color: var(--landing-text-primary); font-weight: 600; }
.site-footer__values { color: var(--landing-text-tertiary); font-size: .85rem; }

/* ---------------------------------------------------------------- social */
.site-social { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.site-social a {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem;
    border: 1px solid var(--landing-border, rgba(255,255,255,.1)); border-radius: 999px;
    color: var(--landing-text-secondary); font-size: .9rem; font-weight: 500; text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
}
.site-social a:hover, .site-social a:focus-visible { color: var(--landing-text-primary); border-color: rgba(165,163,255,.45); background: rgba(99,102,241,.08); }
.site-social svg { width: 18px; height: 18px; flex: none; }
.site-social--icons { margin-top: 1.25rem; }
.site-social--icons a { width: 40px; height: 40px; padding: 0; justify-content: center; }
.site-social--icons span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: 2.5rem; text-align: center; }
.landing-page .site-follow p { margin: 0; color: var(--landing-text-secondary); }

/* ----------------------------------------------------------------- chips */
.site-soon, .site-free, .site-price {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    padding: 3px 10px; border: 1px solid; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.site-soon { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .12); color: #fbbf24; }
.site-soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-free { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .12); color: #6ee7b7; }
.site-price { border-color: rgba(129, 124, 248, .4); background: rgba(129, 124, 248, .14); color: #c7c4ff; }

/* ------------------------------------------------------------------ hero */
/* Home: "Master your" and one giant word rolling exams, skills, future. */
.site-roll { background: var(--landing-bg-primary); }
.site-roll__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 70%);
}
.site-roll__glow {
    position: absolute; left: 50%; top: 48%; width: min(700px, 90vw); height: 360px;
    border-radius: 50%; filter: blur(90px); opacity: .45; pointer-events: none;
    background: #6366F1; transform: translate(-50%, -50%);
    animation: site-roll-glow 9s steps(1) infinite;
}
/* Faint emblems wandering the whole hero through 3D space.
   Each holds a sharp copy and a pre-blurred copy: as it moves away the blurred
   one fades in. Only transform and opacity animate, so the blur is drawn once
   and the compositor does the rest. */
.site-roll__items { position: absolute; inset: 0; pointer-events: none; }
.site-roll__item { position: absolute; perspective: 420px; }
.site-roll__drift {
    position: relative; display: block; will-change: transform;
    animation: site-roll-drift var(--float, 20s) ease-in-out var(--delay, 0s) infinite var(--dir, normal);
}
.site-roll__item svg { display: block; width: var(--size, 56px); height: var(--size, 56px); stroke-width: 1.3; }
.site-roll__drift > svg {
    opacity: .18; will-change: opacity;
    animation: site-roll-sharp var(--float, 20s) ease-in-out var(--delay, 0s) infinite var(--dir, normal);
}
.site-roll__soft {
    position: absolute; inset: 0; filter: blur(6px); opacity: 0; will-change: opacity;
    animation: site-roll-soft var(--float, 20s) ease-in-out var(--delay, 0s) infinite var(--dir, normal);
}
.site-roll__soft svg { opacity: .32; }
/* The waypoints come from each emblem's --x1..--y3. Near at 25%, far at 50%:
   the sharp copy and the blurred copy follow the depth. */
@keyframes site-roll-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(-4deg); }
    25% { transform: translate3d(var(--x1), var(--y1), 70px) rotateX(22deg) rotateY(-28deg) rotateZ(6deg); }
    50% { transform: translate3d(var(--x2), var(--y2), -160px) rotateX(-16deg) rotateY(34deg) rotateZ(-8deg); }
    75% { transform: translate3d(var(--x3), var(--y3), -50px) rotateX(12deg) rotateY(-14deg) rotateZ(4deg); }
}
@keyframes site-roll-sharp { 0%, 100% { opacity: .16; } 25% { opacity: .24; } 50% { opacity: 0; } 75% { opacity: .1; } }
@keyframes site-roll-soft { 0%, 100% { opacity: .35; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: .6; } }
.site-roll .landing-hero__content { max-width: none; }
.landing-page .site-roll__title { margin: 0; font-weight: 800; letter-spacing: -.055em; line-height: .9; }
.site-roll__top { display: block; font-size: clamp(2.6rem, 6.5vw, 5.4rem); }
.site-roll__word { display: block; height: 1em; overflow: hidden; font-size: clamp(5rem, 13.5vw, 11rem); }
.site-roll__reel { display: block; animation: site-roll-reel 9s cubic-bezier(.7, 0, .2, 1) infinite; }
.site-roll__reel span { display: block; height: 1em; line-height: .95; }
.site-roll__reel span:nth-child(1), .site-roll__reel span:nth-child(4) { color: #a5a3ff; }
.site-roll__reel span:nth-child(2) { color: #2dd4bf; }
.site-roll__reel span:nth-child(3) { color: #fbbf24; }
.landing-page .site-roll__line { margin: 2rem 0 0; color: var(--landing-text-secondary); font-size: clamp(1rem, 2vw, 1.15rem); }
/* Both actions in one split pill. */
.site-roll__actions {
    display: inline-flex; align-items: stretch; margin-top: 2rem; padding: 4px;
    border: 1px solid #343a4f; border-radius: 999px; background: rgba(15, 17, 23, .7);
}
.site-roll__start, .site-roll__more {
    display: inline-flex; align-items: center; padding: .7rem 1.35rem; border-radius: 999px;
    font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
}
.site-roll__start { background: var(--landing-accent-primary); color: #fff; }
.site-roll__start:hover { background: var(--landing-accent-primary-hover); color: #fff; }
.site-roll__more { color: #d1d5db; }
.site-roll__more:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.site-roll__start:focus-visible, .site-roll__more:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 2px; }
@keyframes site-roll-reel {
    0%, 28% { transform: translateY(0); }
    33%, 61% { transform: translateY(-1em); }
    66%, 94% { transform: translateY(-2em); }
    99.9%, 100% { transform: translateY(-3em); }
}
@keyframes site-roll-glow { 0% { background: #6366F1; } 33% { background: #14b8a6; } 66% { background: #f59e0b; } }
@media (max-width: 899.98px) {
    /* Fewer and smaller on narrow screens. */
    .site-roll__item:nth-child(n + 9) { display: none; }
    .site-roll__item svg { width: calc(var(--size) * .65); height: calc(var(--size) * .65); }
}
@media (max-width: 599.98px) {
    /* Long labels stay in one row: the pill fills the width and each label may wrap. */
    .site-roll__actions--fit { display: flex; width: min(100%, 24rem); }
    .site-roll__actions--fit .site-roll__start, .site-roll__actions--fit .site-roll__more {
        flex: 1 1 0; min-width: 0; justify-content: center; padding: .6rem .75rem;
        font-size: .82rem; line-height: 1.25; text-align: center; white-space: normal;
    }
    .site-roll__glow { width: 340px; height: 240px; }
    .site-roll__actions { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .site-roll__reel, .site-roll__glow, .site-roll__drift, .site-roll__drift > svg, .site-roll__soft { animation: none; }
}

.site-page-hero { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.site-page-hero .landing-page-hero__content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.site-page-hero .landing-page-hero__subtitle { margin-bottom: 0; }

/* Exam Prep: "Real papers. Real answers." over a faint answer sheet. */
.exam-hero { padding: 10rem 0 7rem; overflow: hidden; background: var(--landing-bg-primary); }
.exam-hero__sheet {
    position: absolute; inset: 5.5rem 0 0; padding: 0 0 0 2rem; pointer-events: none;
    display: flex; gap: 2.5rem; overflow: hidden;
    font: 15px/2.2 'Times New Roman', Times, serif; color: rgba(255, 255, 255, .08); white-space: nowrap;
    -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 48%, transparent 28%, #000 78%);
    mask-image: radial-gradient(ellipse 60% 62% at 50% 48%, transparent 28%, #000 78%);
}
/* Every lane scrolls up without end; the marks fade in and out out of step. */
.exam-hero__lane {
    flex: none; align-self: flex-start;
    animation: exam-hero-scroll 80s linear infinite, site-hero-fade 1.2s ease calc(.2s + var(--i, 0) * 90ms) backwards;
}
@keyframes exam-hero-scroll { to { transform: translateY(-50%); } }
.exam-hero__sheet span { display: block; }
.exam-hero__sheet b { display: inline-block; width: 2.2em; font-weight: 400; color: rgba(255, 255, 255, .06); }
.exam-hero__sheet s { position: relative; text-decoration: none; color: rgba(255, 255, 255, .22); }
.exam-hero__sheet s::after {
    content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px;
    background: #a5a3ff; opacity: .55; transform-origin: left;
    animation: exam-hero-mark .5s cubic-bezier(.6, 0, .3, 1) calc(.3s + var(--d) * 25ms) backwards,
        exam-hero-fade 7s ease-in-out calc(var(--d) * -110ms) infinite;
}
@keyframes exam-hero-mark { from { transform: scaleX(0); } }
@keyframes exam-hero-fade { 50% { opacity: .15; } }
/* A soft violet light behind the sheet, with a hint of teal, drifting slowly. */
.exam-hero::before {
    content: ''; position: absolute; inset: -25%; pointer-events: none; will-change: transform;
    background:
        radial-gradient(38% 34% at 50% 42%, rgba(99, 102, 241, .24), transparent 70%),
        radial-gradient(28% 30% at 24% 68%, rgba(20, 184, 166, .11), transparent 70%),
        radial-gradient(28% 26% at 78% 28%, rgba(165, 163, 255, .12), transparent 70%);
    animation: exam-hero-aura 28s ease-in-out infinite alternate;
}
@keyframes exam-hero-aura { to { transform: translate3d(3%, -2%, 0) rotate(10deg) scale(1.06); } }
.exam-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; pointer-events: none;
    background: linear-gradient(transparent, var(--landing-bg-primary));
}
.exam-hero .landing-page-hero__content { display: flex; flex-direction: column; align-items: center; }
.landing-page .exam-hero__title {
    margin: 0; font-size: clamp(3rem, 8.5vw, 6.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .92;
}
.landing-page .exam-hero__lead {
    max-width: 34rem; margin: 1.75rem auto 0; color: var(--landing-text-secondary);
    font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65;
}
@media (max-width: 599.98px) {
    .exam-hero { padding: 8rem 0 5rem; }
    .exam-hero__sheet {
        padding: 0 0 0 1rem; gap: 1.25rem; font-size: 13px;
        -webkit-mask-image: linear-gradient(#000 0, #000 12%, transparent 30%, transparent 78%, #000 96%);
        mask-image: linear-gradient(#000 0, #000 12%, transparent 30%, transparent 78%, #000 96%);
    }
    .exam-hero .site-roll__actions { margin-top: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .exam-hero__lane, .exam-hero__sheet s::after, .exam-hero::before { animation: none; }
}

/* Skills: a faint wall of skill meters, each filling at its own pace and levelling up,
   over the same drifting light as Exam Prep. */
.skills-hero__bg, .school-hero__bg { overflow: hidden; }
.skills-hero__bg::before, .school-hero__bg::before {
    content: ''; position: absolute; inset: -25%; pointer-events: none; will-change: transform;
    background:
        radial-gradient(38% 34% at 50% 46%, rgba(99, 102, 241, .22), transparent 70%),
        radial-gradient(28% 30% at 24% 70%, rgba(20, 184, 166, .10), transparent 70%),
        radial-gradient(28% 26% at 78% 26%, rgba(165, 163, 255, .11), transparent 70%);
    animation: exam-hero-aura 28s ease-in-out infinite alternate;
}
.skills-hero__bg::after, .school-hero__bg::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; pointer-events: none;
    background: linear-gradient(transparent, var(--landing-bg-primary));
}
.skills-hero__wall {
    position: absolute; inset: 6rem 3.5rem 2.5rem; display: grid; grid-template-columns: repeat(5, 1fr);
    align-content: space-evenly; column-gap: 3rem; row-gap: 1.25rem;
    font: 500 12px/1.2 "JetBrains Mono", ui-monospace, monospace; color: rgba(255, 255, 255, .11);
    -webkit-mask-image: radial-gradient(46% 44% at 50% 50%, rgba(0, 0, 0, .12) 35%, #000 100%);
    mask-image: radial-gradient(46% 44% at 50% 50%, rgba(0, 0, 0, .12) 35%, #000 100%);
}
.skills-hero__skill {
    --c: #a5a3ff;
    display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; white-space: nowrap;
    animation: site-hero-fade 1.2s ease calc(.9s + var(--i, 0) * 120ms) backwards;
}
.skills-hero__skill--teal { --c: #5eead4; }
.skills-hero__lv { height: 1.2em; overflow: hidden; color: rgba(165, 163, 255, .3); }
.skills-hero__lv > span { display: block; animation: skills-hero-lv calc(var(--t) * 4) steps(4) infinite var(--o); }
.skills-hero__meter {
    grid-column: 1 / -1; position: relative; height: 5px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
}
.skills-hero__meter > i { position: absolute; inset: 0; }
/* The fill steps on one segment at a time; when it is full, the meter glows and the level ticks up. */
.skills-hero__meter > i:first-child {
    background: repeating-linear-gradient(90deg, var(--c) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
    opacity: .3; animation: skills-hero-fill var(--t) steps(11, jump-none) infinite var(--o);
}
.skills-hero__meter > i:last-child {
    background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0;
    animation: skills-hero-flash var(--t) linear infinite var(--o);
}
@keyframes skills-hero-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes skills-hero-flash { 0%, 91% { opacity: 0; } 95% { opacity: .22; } 100% { opacity: 0; } }
@keyframes skills-hero-lv { to { transform: translateY(-4.8em); } }
/* Entrance: the first line unmasks, then the gradient words fill in left to right like a meter. */
.landing-hero__title .skills-hero__plain {
    display: inline-block; background: none; -webkit-text-fill-color: currentColor; color: inherit;
    animation: site-hero-mask .9s cubic-bezier(.7, 0, .2, 1) .1s backwards;
}
.skills-hero__fill { display: inline-block; animation: skills-hero-wipe 1.1s cubic-bezier(.65, 0, .25, 1) .5s backwards; }
@keyframes skills-hero-wipe {
    from { clip-path: inset(-.2em 100% -.2em 0); filter: blur(8px); }
    to { clip-path: inset(-.2em -.2em -.2em 0); filter: blur(0); }
}
@media (max-width: 1023.98px) {
    .skills-hero__wall { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
    .skills-hero__skill:nth-child(n + 33) { display: none; }
}
@media (max-width: 599.98px) {
    .skills-hero__wall {
        inset: 5rem 1.25rem 2rem; grid-template-columns: 1fr 1fr; column-gap: 1.5rem;
        -webkit-mask-image: radial-gradient(75% 32% at 50% 52%, rgba(0, 0, 0, .06) 40%, #000 100%);
        mask-image: radial-gradient(75% 32% at 50% 52%, rgba(0, 0, 0, .06) 40%, #000 100%);
    }
    .skills-hero__skill:nth-child(n + 17) { display: none; }
}

/* Home Schooling: a tree grows in the corner, every branch sways in the breeze and
   leaves drift down across the hero. site.js draws it; it fades behind the text. */
.school-hero__tree {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(52% 46% at 50% 48%, rgba(0, 0, 0, .12) 45%, #000 100%);
    mask-image: radial-gradient(52% 46% at 50% 48%, rgba(0, 0, 0, .12) 45%, #000 100%);
}
.school-hero__tree svg { position: absolute; right: -3%; bottom: 0; height: 90%; width: auto; overflow: visible; }
.school-tree__branch { animation: school-tree-sway var(--t) ease-in-out infinite alternate var(--d); }
.school-hero__tree.is-resting * { animation-play-state: paused; }
@keyframes school-tree-sway { from { transform: rotate(calc(var(--sw) * -1)); } to { transform: rotate(var(--sw)); } }
.school-tree__wood {
    fill: none; stroke: rgba(214, 211, 255, .15); stroke-linecap: round; stroke-dasharray: 1 1;
    animation: school-tree-grow 1.1s cubic-bezier(.3, .6, .3, 1) var(--gd) backwards;
}
@keyframes school-tree-grow { from { stroke-dashoffset: 1; } }
.school-tree__leaf { transform-box: fill-box; transform-origin: center; animation: school-tree-pop .7s cubic-bezier(.3, 1.7, .5, 1) var(--gd) backwards; }
@keyframes school-tree-pop { from { transform: scale(0); } }
.school-tree__fall { position: absolute; animation: school-tree-fall var(--t) linear infinite var(--d); }
.school-tree__fall i {
    display: block; width: 12px; height: 6px; border-radius: 100% 0; background: var(--c);
    animation: school-tree-flutter var(--f) ease-in-out infinite alternate;
}
@keyframes school-tree-fall {
    0% { transform: translate(0, 0); opacity: 0; }
    8%, 85% { opacity: var(--a); }
    50% { transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .5)); }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@keyframes school-tree-flutter {
    from { transform: rotate(-40deg) rotateX(0) translateX(-10px); }
    to { transform: rotate(50deg) rotateX(70deg) translateX(10px); }
}
@media (max-width: 1023.98px) {
    .school-hero__tree svg { height: 78%; }
}
@media (max-width: 599.98px) {
    .school-hero__tree {
        -webkit-mask-image: radial-gradient(70% 34% at 50% 52%, rgba(0, 0, 0, .1) 40%, #000 100%);
        mask-image: radial-gradient(70% 34% at 50% 52%, rgba(0, 0, 0, .1) 40%, #000 100%);
    }
    .school-hero__tree svg { right: 0; height: 92%; }
}
@media (prefers-reduced-motion: reduce) {
    .school-hero__bg::before, .school-tree__branch, .school-tree__wood, .school-tree__leaf { animation: none; }
    .school-tree__fall { display: none; }
}

/* Home Schooling, how it works: four stops on one line. When the list scrolls into
   view (site.js arms it), the line fills left to right and each outlined number
   fills with colour as the line reaches it. Phones run the line down the left. */
.site-journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.site-journey::before, .site-journey::after {
    content: ''; position: absolute; left: 0; right: 0; top: 1.7rem; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08);
}
.site-journey::after {
    background: linear-gradient(90deg, #6366F1, #8B5CF6 60%, #14B8A6); transform-origin: left;
    transition: transform 1.8s cubic-bezier(.65, 0, .35, 1) .2s;
}
.site-journey--armed:not(.site-journey--in)::after { transform: scaleX(0); }
.site-journey__step { position: relative; z-index: 1; }
.site-journey__num {
    display: block; width: max-content; padding-right: .9rem; background: var(--landing-bg-primary);
    font-size: 3.5rem; font-weight: 800; letter-spacing: -.055em; line-height: 1; color: #a5a3ff;
    -webkit-text-stroke: 1.5px transparent;
    transition: color .5s ease, -webkit-text-stroke-color .5s ease; transition-delay: calc(.35s + var(--i, 0) * .45s);
}
.site-journey--armed:not(.site-journey--in) .site-journey__num { color: var(--landing-bg-primary); -webkit-text-stroke-color: rgba(255, 255, 255, .18); }
.landing-page .site-journey__title { margin: 1.4rem 0 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: var(--landing-text-primary); }
.landing-page .site-journey__text { margin: .6rem 0 0; font-size: .95rem; line-height: 1.65; color: var(--landing-text-secondary); }
@media (max-width: 1023.98px) {
    .site-journey { grid-template-columns: 1fr; gap: 2.25rem; padding-left: 3.4rem; }
    .site-journey::before, .site-journey::after { left: 1.05rem; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; }
    .site-journey::after { transform-origin: top; }
    .site-journey--armed:not(.site-journey--in)::after { transform: scaleY(0); }
    .site-journey__num { position: absolute; left: -3.4rem; top: -.3rem; width: 2.2rem; padding: .3rem 0; text-align: center; font-size: 1.9rem; }
    .landing-page .site-journey__title { margin-top: 0; }
}

.landing-page .exam-hero__title { font-size: clamp(2.3rem, 6.4vw, 5rem); line-height: .98; }

/* Testimonials: quiet quote cards. */
.site-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.site-quote {
    display: flex; flex-direction: column; margin: 0; padding: 1.6rem 1.6rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(255, 255, 255, .025);
}
.site-quote::before { content: '\201C'; display: block; height: 2.3rem; font-size: 4.5rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: #a5a3ff; }
.site-quote__text { flex: 1; margin: 0; }
.landing-page .site-quote__text p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: #e5e7eb; }
.site-quote__who { display: flex; flex-direction: column; gap: .2rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-quote__who b { font-weight: 700; color: var(--landing-text-primary); }
.site-quote__who span { font-size: .875rem; color: var(--landing-text-secondary); }
@media (max-width: 899.98px) { .site-quotes { grid-template-columns: 1fr; } }

/* What do you want to achieve: three cards, each led by a small line drawing. */
.site-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.site-scene {
    display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
    background: #12141c; color: inherit; text-decoration: none; transition: border-color .3s ease, transform .3s ease;
}
.site-scene:hover { border-color: rgba(165, 163, 255, .35); transform: translateY(-3px); }
.site-scene:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 3px; }
.site-scene__art {
    position: relative; display: block; height: 10.5rem; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
}
.site-scene__art svg {
    position: absolute; left: 50%; bottom: 0; width: 220px; height: 150px; transform: translateX(-50%);
    fill: none; stroke: rgba(214, 211, 255, .5); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.site-scene__accent { stroke: var(--c); }
.site-scene__tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease .1s; }
.site-scene:hover .site-scene__tick, .site-scene:focus-visible .site-scene__tick { stroke-dashoffset: 0; }
.site-scene__cursor { animation: site-scene-blink 1s steps(1) infinite; }
@keyframes site-scene-blink { 50% { opacity: 0; } }
.site-scene__window { fill: #fbbf24; stroke: none; opacity: .25; transition: opacity .4s ease; }
.site-scene:hover .site-scene__window, .site-scene:focus-visible .site-scene__window { opacity: .8; }
.site-scene__body { display: flex; flex: 1; flex-direction: column; padding: 1.4rem 1.5rem 1.5rem; }
.site-scene__body b { font-size: 1.15rem; font-weight: 700; color: var(--landing-text-primary); }
.site-scene__text { flex: 1; margin-top: .5rem; font-size: .95rem; line-height: 1.6; color: var(--landing-text-secondary); }
.site-scene__soon { display: inline-flex; align-items: center; gap: .4rem; margin-top: .65rem; font-size: .8rem; font-weight: 600; color: #fbbf24; }
.site-scene__soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-scene__go { margin-top: 1.1rem; font-size: .92rem; font-weight: 600; color: #c7c5ff; }
@media (max-width: 899.98px) {
    .site-scenes { grid-template-columns: 1fr; gap: 1rem; }
    .site-scene__art { height: 8.75rem; }
    .site-scene__art svg { height: 126px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-scene, .site-scene__tick, .site-scene__window { transition: none; }
    .site-scene__cursor { animation: none; }
}

/* About, what is SUKUD: one platform with three branches. site.js arms the block;
   in view, the lines draw down from SUKUD and the services rise in after them. */
.site-branches__root { display: flex; justify-content: center; }
.site-branches__root span {
    padding: .6rem 1.4rem; border: 1px solid #343a4f; border-radius: 999px; background: #12141c;
    font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: var(--landing-text-primary);
}
.site-branches__wires { display: block; width: 100%; height: 4.4rem; overflow: visible; }
.site-branches__wires path { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.site-branches__wires .site-branches__lit {
    stroke: url(#branch-glow); stroke-dasharray: 1 1; transition: stroke-dashoffset 1.4s cubic-bezier(.6, 0, .3, 1) .2s;
}
.site-branches--armed:not(.site-branches--in) .site-branches__lit { stroke-dashoffset: 1; }
/* No grid gap, so the column centres sit at exactly 1/6, 1/2 and 5/6, where the lines end. */
.site-branches__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.site-branch {
    position: relative; display: flex; flex-direction: column; margin: 0 .875rem; padding: 1.4rem 1.4rem 1.5rem; text-align: center;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; color: inherit; text-decoration: none;
    transition: border-color .3s ease, opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: 0s, calc(.9s + var(--i, 0) * .15s), calc(.9s + var(--i, 0) * .15s);
}
.site-branches--armed:not(.site-branches--in) .site-branch { opacity: 0; transform: translateY(10px); }
.site-branch:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.site-branch:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 3px; }
.site-branch::before {
    content: ''; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c);
}
.site-branch b { font-size: 1.08rem; font-weight: 700; color: var(--landing-text-primary); }
.site-branch__text { flex: 1; margin-top: .5rem; font-size: .92rem; line-height: 1.6; color: var(--landing-text-secondary); }
.site-branch__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: 1rem; }
.site-branch__go { font-size: .9rem; font-weight: 600; color: #c7c5ff; }
.site-branch__soon { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #fbbf24; }
.site-branch__soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (max-width: 899.98px) {
    .site-branches__wires { display: none; }
    .site-branches__root { justify-content: flex-start; }
    .site-branches__list {
        grid-template-columns: 1fr; gap: 1rem; margin-left: 1.5rem; padding-top: 1.4rem;
        border-left: 1.5px solid rgba(255, 255, 255, .14);
    }
    .site-branch { margin: 0 0 0 1.4rem; text-align: left; }
    .site-branch::before { left: -28px; top: 1.6rem; margin-left: 0; }
    .site-branch__foot { justify-content: flex-start; }
}

/* ------------------------------------------------------------- reveals */
/* site.js tags section blocks; each style starts hidden and settles. */
/* A block waiting to slide or tilt in must never widen the page on phones. */
.landing-page main { overflow-x: clip; }
.site-rv {
    transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .8s ease, clip-path .9s cubic-bezier(.6, 0, .2, 1);
    transition-delay: calc(var(--rv-i, 0) * 90ms);
}
.site-rv--rise:not(.site-rv--in) { opacity: 0; transform: translateY(2rem); }
.site-rv--tilt { transform-origin: 50% 0; }
.site-rv--tilt:not(.site-rv--in) { opacity: 0; transform: perspective(900px) rotateX(18deg) translateY(2.5rem); }
.site-rv--zoom:not(.site-rv--in) { opacity: 0; transform: scale(.92); filter: blur(8px); }
/* A wipe can't start clipped away: the scroll observer would see nothing to
   reveal. It starts transparent and plays the clip once revealed. */
.site-rv--wipe { transition: none; }
.site-rv--wipe:not(.site-rv--in) { opacity: 0; }
.site-rv--wipe.site-rv--in { animation: site-rv-wipe .9s cubic-bezier(.6, 0, .2, 1) calc(var(--rv-i, 0) * 90ms) backwards; }
@keyframes site-rv-wipe { from { clip-path: inset(0 0 100% 0); transform: translateY(1.5rem); } to { clip-path: inset(-20%); transform: none; } }
.site-rv--slide:not(.site-rv--in) { opacity: 0; transform: translateX(calc(var(--rv-x, 1) * 3rem)); }
/* Unfold: a pair swings in from opposite sides and meets in the middle. */
.site-rv--unfold:not(.site-rv--in) { opacity: 0; transform: perspective(1000px) translateX(calc(var(--rv-x, 1) * 3rem)) rotateY(calc(var(--rv-x, 1) * 16deg)); }
/* Flip: each card turns open from its left edge, like a page. */
.site-rv--flip { transform-origin: 0 50%; }
.site-rv--flip:not(.site-rv--in) { opacity: 0; transform: perspective(900px) rotateY(-72deg); }
/* Stamp: pressed into place, a touch past and back. */
.site-rv--stamp { transition-timing-function: ease, cubic-bezier(.3, 1.45, .5, 1), ease, ease; }
.site-rv--stamp:not(.site-rv--in) { opacity: 0; transform: scale(1.16); filter: blur(6px); }
/* Curtain: opens out from the centre. Never fully shut, so the observer still sees it. */
.site-rv--curtain { clip-path: inset(0 0 0 0); }
.site-rv--curtain:not(.site-rv--in) { opacity: 0; clip-path: inset(0 42% 0 42%); }

/* -------------------------------------------------------- hero entrances */
@keyframes site-hero-mask { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(-25% -5% -25% -5%); transform: none; } }
@keyframes site-hero-focus { from { opacity: 0; filter: blur(18px); transform: scale(1.15); } }
@keyframes site-hero-rise { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes site-hero-fade { from { opacity: 0; } }
@keyframes site-hero-pop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
/* Home: the top line unmasks, the big word comes into focus, the emblems pop in. */
.site-roll__top { animation: site-hero-mask .9s cubic-bezier(.7, 0, .2, 1) .1s backwards; }
.site-roll__word { animation: site-hero-focus 1.2s cubic-bezier(.2, .7, .2, 1) .4s backwards; }
.landing-page .site-roll__line { animation: site-hero-rise .8s cubic-bezier(.2, .7, .2, 1) .95s backwards; }
.site-roll__actions { animation: site-hero-rise .8s cubic-bezier(.2, .7, .2, 1) 1.1s backwards; }
.site-roll__grid { animation: site-hero-fade 1.8s ease .2s backwards; }
.site-roll__glow { animation: site-roll-glow 9s steps(1) infinite, site-hero-fade 2s ease .3s backwards; }
.site-roll__item { animation: site-hero-pop .9s cubic-bezier(.2, .9, .3, 1.3) calc(1.1s + var(--pop, 0) * 60ms) backwards; }
/* Exam Prep: each line unmasks, and the answer sheet spreads out from the middle. */
.exam-hero__line { display: block; animation: site-hero-mask .9s cubic-bezier(.7, 0, .2, 1) calc(.1s + var(--line, 0) * .18s) backwards; }
.exam-hero__line + .exam-hero__line { --line: 1; color: #a5a3ff; }
.landing-page .exam-hero__lead { animation: site-hero-rise .8s cubic-bezier(.2, .7, .2, 1) .6s backwards; }
.exam-hero .site-roll__actions { animation-delay: .75s; }
/* Other pages: the title unmasks, then the rest rises in turn. */
.landing-page-hero:not(.exam-hero) .landing-page-hero__content > *,
.landing-hero--short .landing-hero__content > * { animation: site-hero-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.landing-page-hero:not(.exam-hero) .landing-page-hero__content > :nth-child(2),
.landing-hero--short .landing-hero__content > :nth-child(2) { animation-delay: .35s; }
.landing-page-hero:not(.exam-hero) .landing-page-hero__content > :nth-child(3),
.landing-hero--short .landing-hero__content > :nth-child(3) { animation-delay: .5s; }
.landing-page-hero:not(.exam-hero) .landing-page-hero__content > :nth-child(n + 4),
.landing-hero--short .landing-hero__content > :nth-child(n + 4) { animation-delay: .65s; }
.landing-page .landing-page-hero .landing-page-hero__content > .landing-page-hero__title,
.landing-page .landing-hero--short .landing-hero__content > .landing-hero__title {
    animation: site-hero-mask 1s cubic-bezier(.7, 0, .2, 1) .1s backwards;
}
@media (prefers-reduced-motion: reduce) {
    .site-roll__top, .site-roll__word, .landing-page .site-roll__line, .site-roll__actions, .site-roll__grid, .site-roll__item,
    .exam-hero__line, .landing-page .exam-hero__lead, .exam-hero .site-roll__actions,
    .landing-page-hero:not(.exam-hero) .landing-page-hero__content > *, .landing-hero--short .landing-hero__content > *,
    .landing-page .landing-page-hero .landing-page-hero__content > .landing-page-hero__title,
    .landing-page .landing-hero--short .landing-hero__content > .landing-hero__title { animation: none; }
    .site-roll__glow { animation: none; }
}
/* Skills: the title halves run their own entrance, so the subtitle and actions wait for the fill. */
.landing-page .skills-hero .landing-hero__content > .landing-hero__title { animation: none; }
.skills-hero .landing-hero__content > :nth-child(2) { animation-delay: .95s; }
.skills-hero .landing-hero__content > :nth-child(3) { animation-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) {
    .skills-hero__bg::before, .skills-hero__skill, .skills-hero__lv > span, .skills-hero__meter > i,
    .landing-hero__title .skills-hero__plain, .skills-hero__fill { animation: none; }
    .skills-hero__meter > i:first-child { clip-path: inset(0 50% 0 0); }
}

/* ----------------------------------------------------- cards and grids */
.site-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.site-cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.site-card {
    position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem;
    border: 1px solid var(--landing-glass-border); border-radius: var(--landing-radius-xl);
    background: var(--landing-glass-bg); color: var(--landing-text-primary); text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease;
}
a.site-card:hover, .site-card--link:hover { transform: translateY(-4px); border-color: rgba(129, 124, 248, .5); }
a.site-card:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 3px; }
.site-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(99, 102, 241, .15); color: #c1bdff; }
.site-card__icon--teal { background: rgba(20, 184, 166, .15); color: #5eead4; }
.site-card__icon--amber { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.site-card__icon--green { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
.site-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.site-card__eyebrow { margin: 0; color: var(--landing-text-tertiary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-card__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.site-card__text { margin: 0; color: var(--landing-text-secondary); line-height: 1.65; }
.site-card__note { margin: 0; color: var(--landing-text-tertiary); font-size: .85rem; font-weight: 600; }
.site-card__cta { margin-top: auto; padding-top: .5rem; color: #c1bdff; font-weight: 600; }
a.site-card:hover .site-card__cta { color: #fff; }
.site-card--muted { background: rgba(26, 29, 41, .45); }

/* Feature cards (Exam Prep, Home Schooling): compact cards, icon beside the title, link and status in
   a footer. Features not built yet are hollow with a dashed edge. The reveal
   uses animate-stagger's observer but its own keyframes, so hover is not
   held back by the stagger delays. */
.site-feats { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .site-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .site-feats { grid-template-columns: 1fr; gap: .9rem; } }
.site-feat {
    display: flex; flex-direction: column; padding: 1.5rem 1.6rem;
    border: 1px solid var(--landing-glass-border); border-radius: 16px;
    background: var(--landing-glass-bg); color: var(--landing-text-primary); text-decoration: none;
}
.site-feats.animate-stagger > .site-feat { transition: border-color 200ms ease, transform 200ms ease; transition-delay: 0s; }
.site-feats.animate-visible > .site-feat { animation: site-feat-in .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.site-feats.animate-visible > .site-feat:nth-child(2) { animation-delay: 80ms; }
.site-feats.animate-visible > .site-feat:nth-child(3) { animation-delay: 160ms; }
.site-feats.animate-visible > .site-feat:nth-child(4) { animation-delay: 240ms; }
.site-feats.animate-visible > .site-feat:nth-child(5) { animation-delay: 320ms; }
.site-feats.animate-visible > .site-feat:nth-child(6) { animation-delay: 400ms; }
@keyframes site-feat-in { from { opacity: 0; transform: translateY(16px); } }
/* Skills tracks: a peek at each track's work rises from the card's bottom edge. */
.site-feat.site-track { position: relative; overflow: hidden; min-height: 15rem; padding-bottom: 7rem; }
.site-track__peek {
    position: absolute; left: 1.6rem; right: 1.6rem; bottom: -1rem; height: 6rem; padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0; border-radius: 10px 10px 0 0;
    background: #0b0d13; color: #8b949e; font: 500 .8rem/1.7 ui-monospace, 'SFMono-Regular', Consolas, monospace;
    white-space: nowrap; overflow: hidden; transition: transform 250ms ease;
}
.site-track__peek::before {
    content: ''; display: block; width: 34px; height: 6px; margin-bottom: .5rem;
    background: radial-gradient(circle, #3a3f52 2.5px, transparent 3px) 0 0 / 12px 6px repeat-x;
}
.site-track:hover .site-track__peek { transform: translateY(-.5rem); }
.site-track__peek b { color: var(--c); font-weight: 500; }
.site-track__peek em { color: #e6e7ee; font-style: normal; }
.site-track__wave { display: flex; align-items: center; gap: 4px; height: 2.2rem; }
.site-track__wave i { width: 4px; height: var(--h); border-radius: 2px; background: var(--c); animation: site-track-wave 1.2s ease-in-out var(--d) infinite alternate; }
@keyframes site-track-wave { to { height: 6px; } }
.landing-page .site-soon-line { display: inline-flex; align-items: center; gap: .55rem; margin: 1rem 0 0; color: #fbbf24; font-size: .9rem; font-weight: 600; }
.site-soon-line::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(251, 191, 36, .15); }
@media (prefers-reduced-motion: reduce) {
    .site-track__wave i { animation: none; }
    .site-track__peek { transition: none; }
}
a.site-feat:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--landing-glass-border)); transform: translateY(-2px); }
a.site-feat:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 3px; }
.site-feat__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.site-feat__icon { display: flex; flex: none; color: var(--c); }
.site-feat__icon svg { stroke-width: 1.75; }
.landing-page .site-feat__title { margin: 0; color: #fff; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; }
.landing-page .site-feat__text { margin: 0 0 1.25rem; color: var(--landing-text-secondary); line-height: 1.6; }
.landing-page .site-feat__text:last-child { margin-bottom: 0; }
.site-feat__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: auto; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .06);
}
.site-feat__cta { color: var(--c); font-weight: 600; }
.site-feat__cta span { display: inline-block; transition: transform 200ms ease; }
a.site-feat:hover .site-feat__cta span { transform: translateX(4px); }
.site-feat__status { color: var(--c); font-size: .85rem; font-weight: 600; }
.site-feat--soon { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .1); }
.site-feat--soon .site-feat__icon { color: #4b4f63; }
.landing-page .site-feat--soon .site-feat__title { color: var(--landing-text-secondary); }
.landing-page .site-feat--soon .site-feat__text { color: var(--landing-text-tertiary); }
.site-feat--soon .site-feat__foot { border-top-style: dashed; }
.site-feat--soon .site-feat__status { font-weight: 500; }

/* Home programmes: soft cards with a glimpse peeking from the bottom edge. */
.landing-page #paths .landing-section__title { font-size: clamp(1.75rem, 3.4vw, 2.4rem); letter-spacing: -.025em; }
.site-glimpses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.site-glimpse {
    position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 1.75rem 1.75rem 9.5rem; overflow: hidden;
    border: 1px solid #252a39; border-radius: 20px; background: #141720; color: var(--landing-text-primary); text-decoration: none;
    transition: border-color 250ms ease, background-color 250ms ease;
}
.site-glimpse:hover, .site-glimpse:focus-visible { border-color: #353b50; background: #171a24; }
.site-glimpse:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 3px; }
.landing-page .site-glimpse h3 { position: relative; z-index: 1; margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.landing-page .site-glimpse p { position: relative; z-index: 1; max-width: 19rem; margin: .75rem 0 0; color: var(--landing-text-secondary); line-height: 1.6; }
.site-glimpse__status { position: relative; z-index: 1; margin-top: .9rem; color: var(--c); font-size: .88rem; font-weight: 600; }
.site-glimpse__peek { position: absolute; right: 1.4rem; bottom: -2.5rem; transition: transform 350ms cubic-bezier(.2, .7, .2, 1); }
.site-glimpse:hover .site-glimpse__peek, .site-glimpse:focus-visible .site-glimpse__peek { transform: translateY(-10px); }
.site-glimpse__paper { top: 11rem; bottom: auto; width: 210px; height: auto; border-radius: 3px; opacity: .92; transform: rotate(-4deg); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.site-glimpse:hover .site-glimpse__paper, .site-glimpse:focus-visible .site-glimpse__paper { transform: rotate(-4deg) translateY(-10px); }
.site-glimpse__code {
    width: 250px; padding: .9rem 1rem 3.1rem; border: 1px solid #22403c; border-radius: 12px; background: #0d1514;
    color: #8b949e; font: 500 .8rem/1.8 ui-monospace, 'SFMono-Regular', Consolas, monospace; white-space: nowrap;
}
.site-glimpse__code b { color: #5eead4; font-weight: 500; }
.site-glimpse__code i { color: #f9a8d4; font-style: normal; }
.site-glimpse__code s { color: #fcd34d; text-decoration: none; }
.site-glimpse__week { display: grid; grid-template-columns: repeat(5, 30px); gap: 6px; padding: .9rem .9rem 3.4rem; border: 1px solid #3d331f; border-radius: 12px; background: #17140e; }
.site-glimpse__week em { grid-column: 1 / -1; margin-bottom: 2px; color: #a8a29e; font-size: .7rem; font-style: normal; font-weight: 600; }
.site-glimpse__week span { height: 20px; border-radius: 5px; background: rgba(255, 255, 255, .06); }
.site-glimpse__week .on { background: rgba(252, 211, 77, .65); }
.site-glimpse__week .half { background: rgba(252, 211, 77, .28); }
@media (max-width: 899.98px) {
    .site-glimpses { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .site-glimpse { min-height: 0; padding: 1.4rem 1.4rem 8.5rem; }
    .site-glimpse__paper { top: 10.25rem; width: 170px; }
    .site-glimpse__code { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-glimpse, .site-glimpse__peek { transition: none; }
}

.site-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.site-actions--left { justify-content: flex-start; }
/* Two buttons kept on one row at the same height; on phones they share the width. */
.site-actions--pair { flex-wrap: nowrap; align-items: stretch; }
.site-link { color: #c1bdff; font-weight: 600; text-decoration: none; }
.site-link:hover { color: #fff; text-decoration: underline; }

.site-statement { max-width: 820px; margin: 2.5rem auto 0; font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; line-height: 1.2; text-align: center; }
.site-statement span { background: var(--landing-gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* What is free, what is paid. */
.site-access { display: grid; gap: .6rem; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.site-access a {
    display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; color: inherit; text-decoration: none;
    border: 1px solid var(--landing-border); border-radius: 14px; background: rgba(26, 29, 41, .6);
    transition: border-color 200ms ease, background 200ms ease;
}
.site-access a:hover { border-color: rgba(129, 124, 248, .45); background: rgba(31, 34, 50, .75); }
.site-access a:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 3px; }
.site-access a > span:first-child { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.site-access__go { display: flex; flex: none; color: var(--landing-text-tertiary); transition: transform 200ms ease, color 200ms ease; }
.site-access a:hover .site-access__go { color: #fff; transform: translateX(3px); }
.site-access small { color: var(--landing-text-tertiary); font-size: .82rem; }

/* Qualitative points in place of counters. */
/* Home "Why SUKUD": the reasons drift across the page in two lanes going
   opposite ways. Each lane holds two identical sets, so moving it by half
   its width loops without a seam. Hover pauses it; reduced motion stops it
   and lets the reasons wrap. */
.site-why { overflow-x: clip; }
.site-marquee {
    display: grid; gap: .9rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.site-marquee__lane { display: flex; width: max-content; animation: site-marquee 45s linear infinite; }
.site-marquee__lane--rev { animation-direction: reverse; }
.site-marquee:hover .site-marquee__lane { animation-play-state: paused; }
@keyframes site-marquee { to { transform: translateX(-50%); } }
.site-marquee__set { display: flex; gap: .9rem; margin: 0; padding: 0 .9rem 0 0; list-style: none; }
.site-marquee__set li {
    display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.6rem; white-space: nowrap;
    border: 1px solid var(--landing-glass-border); border-radius: 18px; background: var(--landing-glass-bg);
}
.site-marquee__set .site-marquee__icon { display: flex; flex: none; color: var(--c); }
.site-marquee__icon svg { stroke-width: 1.75; }
.site-marquee__set b { color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.site-marquee__set span { color: var(--landing-text-tertiary); font-size: .95rem; }
@media (max-width: 640px) {
    .site-marquee { gap: .65rem; }
    .site-marquee__set { gap: .65rem; padding-right: .65rem; }
    .site-marquee__set li { padding: .8rem 1.1rem; border-radius: 14px; }
    .site-marquee__set b { font-size: 1.05rem; }
    .site-marquee__set span:not(.site-marquee__icon) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-marquee { -webkit-mask-image: none; mask-image: none; }
    .site-marquee__lane { width: auto; justify-content: center; padding: 0 1rem; animation: none; }
    .site-marquee__set { flex-wrap: wrap; justify-content: center; padding: 0; }
    .site-marquee__set[aria-hidden] { display: none; }
}

.site-notice { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 1.5rem auto 0; text-align: center; }
.site-notice b { font-size: 1.05rem; }
.site-notice span { color: var(--landing-text-secondary); font-size: .92rem; }

/* ------------------------------------------------------------ FAQ tabs */
.site-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 2rem; }
.site-tabs button {
    padding: .6rem 1.1rem; border: 1px solid var(--landing-border); border-radius: 999px;
    background: transparent; color: var(--landing-text-secondary); font: inherit; font-weight: 600; cursor: pointer;
}
.site-tabs button:hover { color: var(--landing-text-primary); }
.site-tabs button[aria-selected="true"] { border-color: rgba(129, 124, 248, .6); background: rgba(99, 102, 241, .18); color: #fff; }
.site-tabs button:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 2px; }
.site-tab-panel[hidden] { display: none; }

/* ------------------------------------------- Exam Prep: one exam a section */
.exam-spot { overflow-x: clip; }
.exam-spot__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.exam-spot--flip .exam-spot__copy { order: 2; }
.landing-page .exam-spot__where { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 1rem; color: var(--landing-text-tertiary); font-size: .92rem; }
.exam-spot__status { color: #fbbf24; font-weight: 700; }
.exam-spot__status--live { color: #6ee7b7; }
.exam-spot__title { margin: 0 0 1.25rem; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -.03em; }
.exam-spot__title span { display: block; color: #a9adbd; font-size: .62em; font-weight: 600; letter-spacing: -.01em; }
.exam-spot__lead { max-width: 34rem; margin: 0; font-size: 1.1rem; line-height: 1.7; }
.landing-page .exam-spot__next { max-width: 34rem; margin: 1rem 0 0; color: var(--landing-text-tertiary); line-height: 1.65; }

/* GCE: the subjects that have papers, as plain links. */
.exam-spot__subjects { display: grid; gap: 1rem; margin: 1.75rem 0 0; }
.exam-spot__subjects dt { margin-bottom: .35rem; color: var(--landing-text-tertiary); font-size: .85rem; font-weight: 600; }
.exam-spot__subjects dd { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; }
.exam-spot__subjects a { color: #c1bdff; font-weight: 600; text-decoration: none; }
.exam-spot__subjects a:hover { color: #fff; text-decoration: underline; }

/* GCE: the real paper scans, fanned. */
.exam-spot__papers { position: relative; display: block; height: 460px; }
.exam-spot__scan {
    position: absolute; top: 30px; left: 50%; width: 255px; height: auto; margin-left: -128px;
    border-radius: 3px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
    transition: transform 400ms cubic-bezier(.2, .7, .2, 1);
}
.exam-spot__scan--back { transform: translateX(-110px) rotate(-11deg); filter: brightness(.7); }
.exam-spot__scan--mid { transform: translateX(110px) rotate(9deg); filter: brightness(.8); }
.exam-spot__scan--front { top: 0; }
.exam-spot__papers:hover .exam-spot__scan--back { transform: translateX(-140px) rotate(-14deg); }
.exam-spot__papers:hover .exam-spot__scan--mid { transform: translateX(140px) rotate(12deg); }
.exam-spot__papers:hover .exam-spot__scan--front { transform: translateY(-8px); }
.exam-spot__papers:focus-visible { outline: 2px solid #a7a2ff; outline-offset: 8px; border-radius: 12px; }

/* Upcoming systems: the paper cover, drawn, with a rubber stamp. */
.exam-spot__cover { position: relative; display: grid; place-items: center; min-height: 460px; }
.exam-spot__cover::before {
    content: ''; position: absolute; width: 290px; aspect-ratio: 210 / 297;
    border-radius: 3px; background: #e6e1d6; transform: translate(26px, 10px) rotate(6deg); opacity: .18;
}
.exam-cover {
    position: relative; display: flex; flex-direction: column; width: 290px; aspect-ratio: 210 / 297; padding: 30px 26px;
    border-radius: 3px; background: #f3efe6; color: #1d1d1f; box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
    font-family: Georgia, 'Times New Roman', serif; text-align: center; transform: rotate(-3deg);
}
.exam-spot--flip .exam-cover { transform: rotate(3deg); }
.exam-cover__board { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.exam-cover__exam { margin-top: .5rem; font-size: .72rem; font-style: italic; line-height: 1.4; }
.exam-cover__rule { height: 1px; margin: 1rem 0 1.4rem; background: #1d1d1f; }
.exam-cover__subject { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.exam-cover__paper { margin-top: .4rem; font-size: .8rem; }
.exam-cover__time { margin-top: .2rem; font-size: .75rem; font-style: italic; }
.exam-cover__boxes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; margin-top: 1.4rem; font-size: .58rem; }
.exam-cover__boxes span { width: 100%; margin-bottom: 3px; letter-spacing: .06em; text-transform: uppercase; }
.exam-cover__boxes i { width: 14px; height: 16px; border: 1px solid #1d1d1f; }
.exam-cover__boxes .exam-cover__wide { width: 82%; }
.exam-cover__lines { display: grid; gap: 7px; margin-top: auto; }
.exam-cover__lines i { height: 5px; border-radius: 2px; background: #1d1d1f; opacity: .13; }
.exam-cover__lines i:nth-child(2n) { width: 86%; }
.exam-cover__lines i:last-child { width: 58%; }
.exam-cover__stamp {
    position: absolute; right: 18px; bottom: 9%; padding: .3rem .9rem;
    border: 3px solid #c2410c; border-radius: 6px; color: #c2410c;
    font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    transform: rotate(-16deg); opacity: .82; mix-blend-mode: multiply;
}
.exam-cover--cambridge { background: #eef0f2; text-align: left; }
.exam-cover--cambridge .exam-cover__board { font-family: 'Inter', sans-serif; font-size: .95rem; letter-spacing: 0; text-transform: none; }
.exam-cover--cambridge .exam-cover__subject { text-transform: none; letter-spacing: 0; font-size: 1.45rem; }
.exam-cover--cambridge .exam-cover__boxes { justify-content: flex-start; }

/* More systems: a board of what is coming. */
.exam-board { max-width: 880px; margin: 0 auto; border: 1px solid var(--landing-border); border-radius: 20px; background: var(--landing-bg-primary); overflow: hidden; }
.exam-board__head, .exam-board__rows li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .95rem 1.5rem; }
.exam-board__head { border-bottom: 1px solid var(--landing-border); color: var(--landing-text-tertiary); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.exam-board__rows { margin: 0; padding: 0; list-style: none; }
.exam-board__rows li + li { border-top: 1px solid rgba(255, 255, 255, .05); }
.exam-board__rows li:hover { background: rgba(255, 255, 255, .025); }
.exam-board__rows b { color: var(--landing-text-primary); font-weight: 600; }
.exam-board__rows span { color: var(--landing-text-secondary); }
.exam-board__rows em { color: #fbbf24; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .78rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 899.98px) {
    .exam-spot__grid { grid-template-columns: minmax(0, 1fr); }
    .exam-spot--flip .exam-spot__copy { order: 0; }
    .exam-spot__papers, .exam-spot__cover { height: auto; min-height: 400px; }
    .exam-spot__papers { height: 400px; }
}
@media (max-width: 599.98px) {
    .exam-spot__papers { height: 330px; }
    .exam-spot__scan { width: 200px; margin-left: -100px; }
    .exam-spot__scan--back { transform: translateX(-70px) rotate(-10deg); }
    .exam-spot__scan--mid { transform: translateX(70px) rotate(8deg); }
    .exam-spot__cover { min-height: 380px; }
    .exam-spot__cover::before, .exam-cover { width: 250px; }
    .exam-cover { padding: 24px 20px; }
    .exam-board__head { display: none; }
    /* Centred on phones: status line, subject lists and actions. */
    .landing-page .exam-spot__where, .exam-spot__subjects dd, .exam-spot .site-actions--left { justify-content: center; }
    .exam-spot__subjects { text-align: center; }
    .exam-spot__title, .exam-spot__lead, .landing-page .exam-spot__next { text-align: center; margin-left: auto; margin-right: auto; }
    .site-actions--pair { gap: .6rem; }
    .site-actions--pair .landing-btn { flex: 1 1 0; min-width: 0; padding: .8rem .5rem; font-size: .85rem; white-space: normal; text-align: center; }
    .exam-board__rows li { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .9rem 1.1rem; }
    .exam-board__rows span { grid-row: 2; font-size: .9rem; }
    .exam-board__rows em { grid-row: 1 / span 2; grid-column: 2; }
}

.site-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--landing-text-tertiary); font-size: .85rem; }
.site-crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--landing-border); }
.site-crumbs a { color: var(--landing-text-secondary); text-decoration: none; }
.site-crumbs a:hover { color: #fff; }

.site-soon-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.site-soon-row > span:first-child { color: var(--landing-text-secondary); font-size: .9rem; }

/* ------------------------------------------------------------ forms */
.site-form { max-width: 760px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .site-card, .exam-spot__scan { transition: none; }
    a.site-card:hover { transform: none; }
    .site-feats.animate-visible > .site-feat { animation: none; }
    a.site-feat:hover, a.site-feat:hover .site-feat__cta span { transform: none; }
}