@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    color-scheme: light;

    --color-bg-app: #F8FAFC;
    --color-bg-surface: #FFFFFF;
    --color-border: #E2E8F0;

    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-tertiary: #94A3B8;

    --color-brand: #0D9488;
    --color-brand-accent: #0D9488;
    --color-brand-subtle-bg: #CCFBF1;
    --color-on-brand: #FFFFFF;
    --color-on-brand-muted: #CCFBF1;
    --color-text-on-brand: #FFFFFF;

    --color-shadow: #0F172A0D;

    /* Status colours: notices and subscription badges */
    --color-success-bg: #DCFCE7;
    --color-success-text: #166534;
    --color-warning-bg: #FEF3C7;
    --color-warning-text: #92400E;
    --color-danger-bg: #FEE2E2;
    --color-danger-text: #B91C1C;
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg-app: #0B1220;
    --color-bg-surface: #1E293B;
    --color-border: #334155;

    --color-text-primary: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-tertiary: #64748B;

    --color-brand: #0D9488;
    --color-brand-accent: #2DD4BF;
    --color-brand-subtle-bg: rgba(45, 212, 191, 0.16);
    --color-on-brand: #FFFFFF;
    --color-on-brand-muted: #CCFBF1;

    --color-shadow: rgba(0, 0, 0, 0.45);

    --color-success-bg: rgba(34, 197, 94, 0.16);
    --color-success-text: #86EFAC;
    --color-warning-bg: rgba(245, 158, 11, 0.16);
    --color-warning-text: #FCD34D;
    --color-danger-bg: rgba(239, 68, 68, 0.16);
    --color-danger-text: #FCA5A5;
}

a { color: inherit; text-decoration: none; }

html, body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    &::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    background-color: var(--color-bg-app);
    color: var(--color-text-primary);
    font-family: "Figtree", sans-serif;
}

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

/* Read out, not shown */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Nav bar */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 70px;
    background: rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

@media (min-width: 960px) {
    .nav {
        top: 16px;
        left: 100px;
        right: 100px;
        border-radius: 10px;
        max-width: 1500px;
    }
}
@media (min-width: 1700px) {
    .nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 1500px;
    }
}

.brand-and-breadcrumb {
    height: 40px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    mix-blend-mode: difference;
    color: #fff;
    border-radius: 10px;
}

.brand-and-breadcrumb h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .01em;
    color: inherit;
    font-family: "Figtree", sans-serif;
}

.nav__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 24px;
    gap: 32px;
}

/* Wide screens: the links right after the brand. Below 800px this is the menu that opens from the
   button, with the class-code box on top. */
.nav__menu {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nav__links {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.nav__links a {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .01em;
    color: #fff;
    font-family: "Figtree", sans-serif;
    text-underline-offset: 4px;
    border-radius: 6px;
}

.nav__links a:hover {
    text-decoration: underline;
}

/* The far right: the class-code box, then Log in (or Account) */
.nav__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    flex-shrink: 0;
}

/* The menu has its own class-code box; it only shows on small screens */
.nav__menu .code-box { display: none; }

.nav__login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    border-radius: 8px;
    color: #fff;
    font: 300 14px/1 "Figtree", sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
    text-underline-offset: 4px;
}

.nav__login:hover .nav__login-label { text-decoration: underline; }
.nav__login-icon { flex-shrink: 0; width: 21px; height: 21px; }

/* Every control in the bar shows where the keyboard is */
.nav a:focus-visible,
.nav button:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}

/* Class-code box: a pill to type the code in, joined to an arrow button (like a "student pin" box).
   The bar is light on most pages and the white text needs a darker glass behind it to stay legible,
   over the home page's waves too. */
.code-box {
    --code-box-height: 38px;
    position: relative;
    margin: 0;
}

.code-box__pill {
    display: flex;
    border-radius: 999px;
}

.code-box__field {
    width: 11.75rem;
    height: var(--code-box-height);
    margin: 0;
    padding: 0 8px 0 15px;
    border: none;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    /* Monospaced like codes in PhysicsGo, so every 12-character code fits */
    font: 600 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .2s ease;
}

.code-box__field::placeholder {
    color: var(--color-text-tertiary);
    font: 500 14px/1 "Figtree", sans-serif;
    letter-spacing: .01em;
    text-transform: none;
    opacity: 1;
}

/* The field has no border, so focus and a wrong code show as a ring inside it */
.code-box__field:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-brand);
}

.code-box__field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--color-danger-text); }

.code-box__go {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: var(--code-box-height);
    margin: 0;
    padding: 0 2px 0 0;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--color-brand);
    color: var(--color-on-brand);
    cursor: pointer;
    transition: background .2s ease;
}

.code-box__go:hover { background: color-mix(in srgb, var(--color-brand) 88%, black); }

/* A message under the box when the code isn't valid; gone as soon as the code is edited */
.code-box__error {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 2;
    width: max-content;
    max-width: min(18rem, calc(100vw - 32px));
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--color-text-primary) 30%, transparent);
    color: var(--color-danger-text);
    font: 500 13px/1.45 "Figtree", sans-serif;
}

/* Its pointer, up to the box */
.code-box__error::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.code-box__error[hidden] { display: none; }

/* Screens up to 1100px: a little less room between things, so everything fits in one line */
@media (max-width: 1099.98px) {
    .nav__inner { gap: 24px; }
    .nav__links { gap: 16px; }
    .nav__actions { gap: 14px; }
}

/* Menu button: two stripes that replace the nav links below 800px */
.nav__toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.nav__toggle:hover { background: rgba(255, 255, 255, .12); }

.nav__toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.nav__toggle span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

/* Whole-pixel tops 8px apart, so both stripes land on the pixel grid the same way and render equally thick */
.nav__toggle span:first-child { top: 15px; }
.nav__toggle span:last-child { top: 23px; }

/* The stripes cross into an X while the menu is open */
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 799.98px) {
    .nav__inner { gap: 12px; }
    .nav__toggle { display: block; }
    .nav__actions { gap: 4px; }

    /* Log in (or Account) stays in the bar as an icon button; its name is still read out */
    .nav__actions .code-box { display: none; }

    .nav__login {
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 10px;
        transition: background .2s ease;
    }

    .nav__login:hover { background: rgba(255, 255, 255, .12); }
    .nav__login-icon { width: 20px; height: 20px; }

    .nav__login-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* The links become a dropdown card, styled like the OS menu, growing from the button */
    .nav__menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 12px;
        width: min(20rem, calc(100% - 24px));
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 14px;
        box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--color-text-primary) 25%, transparent);
        transform-origin: top right;
        opacity: 0;
        transform: translateY(-4px) scale(.97);
        visibility: hidden;
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }

    .nav__menu.is-open {
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: opacity .18s ease, transform .18s ease, visibility 0s;
    }

    /* The class-code box on top of the menu, full width, in the card's light colours */
    .nav__menu .code-box {
        --code-box-height: 46px;
        display: block;
        margin: 6px 6px 8px;
    }

    .nav__menu .code-box__field {
        flex: 1;
        width: auto;
        min-width: 0;
        border: 2px solid var(--color-border);
        border-right: 0;
        box-shadow: none;
        background: var(--color-bg-app);
        color: var(--color-text-primary);
        font-size: 16px;
    }

    .nav__menu .code-box__field::placeholder { color: var(--color-text-secondary); font-size: 16px; }
    .nav__menu .code-box__field:hover { background: var(--color-bg-app); }

    .nav__menu .code-box__field:focus {
        background: var(--color-bg-surface);
        border-color: var(--color-brand);
        box-shadow: none;
    }

    .nav__menu .code-box__field[aria-invalid="true"] { border-color: var(--color-danger-text); box-shadow: none; }

    .nav__menu .code-box__error {
        position: static;
        width: auto;
        max-width: none;
        margin-top: 8px;
        padding: 8px 12px;
        border: 0;
        border-radius: 10px;
        background: var(--color-danger-bg);
        box-shadow: none;
    }

    .nav__menu .code-box__error::before { display: none; }

    .nav__links {
        flex-direction: column;
        gap: 2px;
    }

    .nav__links a {
        padding: 12px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text-primary);
    }

    .nav__links a:hover,
    .nav__links a:focus-visible {
        background: var(--color-brand-subtle-bg);
        text-decoration: none;
        outline: none;
    }
}

@media (max-width: 799.98px) and (prefers-reduced-motion: reduce) {
    .nav__menu,
    .nav__menu.is-open { transform: none; }
    .nav__toggle span { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .code-box__field, .code-box__go, .nav__login { transition: none; }
}

.nav__breadcrumb {
    margin: 0;
    font-size: 18px;
    font-weight: 350;
    letter-spacing: .01em;
    color: inherit;
    font-family: "Figtree", sans-serif;
}

.nav__logo {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    flex-shrink: 0;
    mix-blend-mode: difference;
}

.nav__logo img {
    width: 28px;
    height: 28px;
}

.nav__spacer {
    width: 1px;
    height: 16px;
    background-color: var(--color-border);
}

/* No divider when there is no breadcrumb after it */
.nav__spacer:has(+ .nav__breadcrumb:empty) {
    display: none;
}

/* The home page scrolls: the wave hero first, the product story below it */
html:has(.home-content),
html:has(.home-content) body {
    height: auto;
    overflow: visible;
}

/* Home hero: full-bleed WebGL wave background with a centered overlay */
.start-container {
    position: relative;
    height: 80vh;
    height: 80svh;
    min-height: 560px;
    overflow: hidden;
    color: var(--color-text-primary);
    font-family: "Figtree", sans-serif;
    background:
        radial-gradient(120% 70% at 50% 0%, var(--color-bg-surface) 0%, transparent 60%),
        radial-gradient(80% 60% at 15% 100%, color-mix(in srgb, var(--color-brand-subtle-bg) 70%, transparent) 0%, transparent 70%),
        radial-gradient(80% 60% at 90% 95%, var(--color-border) 0%, transparent 70%),
        linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-app) 60%, var(--color-border) 100%);
}

.start-container #scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Waves fade into the white product section below */
.start-container::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--color-bg-surface));
    pointer-events: none;
}

.start-container .overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.start-container .hero {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: 16px;
    /* Centres the buttons a little below the middle, just above the waves */
    padding-top: 7vh;
    gap: 22px;
}

.start-container .ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.start-container .btn {
    pointer-events: auto;
    cursor: pointer;
    font: 500 18px/1 "Figtree", sans-serif;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.start-container .btn.primary {
    background-color: transparent;
    color: var(--color-on-brand);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-brand) 70%, transparent);
    gap: 2px;
    display: flex;
    flex-direction: row;
}

.start-container .btn.primary.download, .start-container .btn.primary.version {
    background: var(--color-brand);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    padding: 0 22px;
}

.start-container .btn.primary.download:hover,
.start-container .btn.primary.version:hover {
    background: color-mix(in srgb, var(--color-brand) 88%, black);
}

.start-container .btn p { margin: 0; }

.start-container .btn.primary.download { gap: 10px; }
.start-container .btn.primary.download img { width: 22px; height: 22px; }

.start-container .btn.primary.download { border-radius: 999px 0 0 999px; }
.start-container .btn.primary.version { border-radius: 0 999px 999px 0; }

/* OS picker on the right half of the download button */
.start-container .btn.primary.download-split { position: relative; }

.start-container .btn.primary.version {
    border: 0;
    gap: 6px;
}

.start-container .btn.primary.version svg { transition: transform .2s ease; }
.start-container .btn.primary.version[aria-expanded="true"] svg { transform: rotate(180deg); }

.start-container .os-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    min-width: 168px;
    margin: 0;
    padding: 6px;
    list-style: none;
    display: grid;
    gap: 2px;
    pointer-events: auto;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--color-text-primary) 25%, transparent);
}

.start-container .os-menu[hidden] { display: none; }

.start-container .os-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-primary);
    font: 500 15px/1 "Figtree", sans-serif;
    text-align: left;
    cursor: pointer;
}

.start-container .os-menu button:hover,
.start-container .os-menu button:focus-visible {
    background: var(--color-brand-subtle-bg);
    outline: none;
}

.start-container .os-menu button[aria-checked="true"] { color: var(--color-brand); }
.start-container .os-menu button[aria-checked="true"]::after { content: "✓"; }

.start-container .btn.ghost {
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    padding: 0 30px;
    background: color-mix(in srgb, var(--color-bg-surface) 60%, transparent);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.start-container .btn.ghost:hover {
    background: color-mix(in srgb, var(--color-border) 60%, transparent);
}

/* Under the buttons: the browser works without installing, and is needed for USB and Bluetooth sensors */
.start-container .download-note {
    max-width: 30rem;
    margin: 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg-surface) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 400 15px/1.5 "Figtree", sans-serif;
    color: var(--color-text-secondary);
}

.start-container .download-note a {
    pointer-events: auto;
    color: var(--color-brand);
    font-weight: 600;
}

.start-container .btn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .start-container .btn,
    .start-container .btn.primary.version svg { transition: none; }
}

/* Product story: one idea and one large product shot per section */
.product-container {
    display: grid;
    gap: clamp(6rem, 14vw, 11rem);
    padding: clamp(3rem, 8vw, 6rem) 1rem clamp(6rem, 12vw, 10rem);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: "Figtree", sans-serif;
}

.product-intro,
.product-copy,
.schools-intro {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.product-intro, .schools-intro { gap: 1.25rem; }

.product-eyebrow, .schools-eyebrow, .documentation-eyebrow, .shop-eyebrow, .account-eyebrow {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brand);
}

/* Large type gets tight leading and negative tracking; body text stays near 0 */
.product-title {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.product-lede,.schools-lede, .documentation-lede {
    margin: 0 auto;
    max-width: 38rem;
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

.product {
    display: grid;
    justify-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.product-heading {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.03em;
    text-wrap: balance;
    font-family: "Figtree", sans-serif;
}

.product-text {
    margin: 0 auto;
    max-width: 36rem;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

.product-media {
    display: block;
    width: min(100%, 75rem);
    height: auto;
}

/* Pricing page: scrolls like the home page, on the same soft gradient */
html:has(.pricing-content),
html:has(.pricing-content) body,
html:has(.schools-content),
html:has(.schools-content) body,
html:has(.shop-content),
html:has(.shop-content) body,
html:has(.account-content),
html:has(.account-content) body
{
    height: auto;
    overflow: visible;
}

.pricing-content, .schools-content, .documentation-content, .shop-content, .account-content {
    min-height: 100vh;
    min-height: 100svh;
    padding: 140px 16px 96px;
    background: var(--color-bg-app);
}

.pricing-container, .schools-container, .documentation-container, .login-container {
    display: grid;
    justify-items: center;
    gap: 40px;
    max-width: 40rem;
    margin-inline: auto;
}

.pricing-intro, .schools-intro, .documentation-container {
    display: grid;
    gap: 1rem;
    text-align: center;
}

.pricing-title, .schools-title, .documentation-title, .shop-title, .account-title {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.pricing-lede, .shop-lede, .account-lede {
    margin: 0 auto;
    max-width: 34rem;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

/* Schools page: who it's for, then the six reasons in cards */
.schools-container, .documentation-container {
    max-width: 68rem;
    gap: clamp(3.5rem, 7vw, 5.5rem);
}

.audiences {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.audience {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 22px 24px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg-surface);
    transition: border-color .2s ease, transform .2s ease;
}

.audience:hover { border-color: var(--color-brand); }
.audience:active { transform: scale(.98); }

.audience:focus-visible,
.reason__link:focus-visible,
.schools-cta a:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}

.audience p { margin: 0; }
.audience__role { font-weight: 600; color: var(--color-brand); }
.audience__need { color: var(--color-text-secondary); line-height: 1.45; }

.reasons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.reason {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: clamp(28px, 4vw, 40px);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    background: var(--color-bg-surface);
    scroll-margin-top: 110px;
}

.reason--wide {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.reason__copy { display: grid; gap: 12px; }

.reason__heading {
    margin: 0;
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.reason__text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

.reason__text code {
    font-size: .9em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--color-bg-app);
    border: 1px solid var(--color-border);
}

.reason__link {
    justify-self: start;
    margin-top: 4px;
    font-weight: 600;
    color: var(--color-brand);
}

.reason__link::after { content: " →"; }
.reason__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.tier-table caption {
    caption-side: bottom;
    padding-top: 12px;
    text-align: left;
    font-size: .875rem;
    color: var(--color-text-tertiary);
}

.tier-table th,
.tier-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.tier-table thead th {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text-tertiary);
}

.tier-table tbody th { font-weight: 600; }
.tier-table td:last-child { text-align: right; font-weight: 600; }
.tier-table thead th:last-child { text-align: right; }

.schools-cta {
    display: grid;
    justify-items: center;
    gap: 24px;
    text-align: center;
}

.schools-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.schools-cta__primary,
.schools-cta__secondary {
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 500;
    transition: background .2s ease;
}

.schools-cta__primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-brand) 70%, transparent);
}

.schools-cta__primary:hover { background: color-mix(in srgb, var(--color-brand) 88%, black); }

.schools-cta__secondary {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.schools-cta__secondary:hover { background: var(--color-border); }

@media (max-width: 860px) {
    .audiences,
    .reasons,
    .reason--wide { grid-template-columns: minmax(0, 1fr); }
}

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

/* Size picker: a white pill slides to the chosen size */
.options {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 6px;
    background-color: var(--color-brand);
    border-radius: 999px;
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-brand) 70%, transparent);
}

.options__pill {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    border-radius: 999px;
    background: var(--color-bg-surface);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1);
}

.option {
    position: relative;
    min-width: 64px;
    height: 48px;
    padding: 0 16px;
    background: transparent;
    border-radius: 999px;
    border: 0;
    color: var(--color-on-brand);
    cursor: pointer;
    font: 600 17px/1 "Figtree", sans-serif;
    transition: color .25s ease, background .2s ease;
}

.option:hover { background: color-mix(in srgb, var(--color-bg-surface) 14%, transparent); }
.option:active { transform: scale(.97); }
.option[aria-checked="true"] { color: var(--color-brand); background: transparent; }

.option:focus-visible {
    outline: 2px solid var(--color-bg-surface);
    outline-offset: 2px;
}

/* Price card for the chosen size (the login card looks the same) */
.price-card, .login-card {
    width: 100%;
    max-width: 26rem;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 36px 28px 28px;
    text-align: center;
    background: color-mix(in srgb, var(--color-bg-surface) 80%, transparent);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--color-text-primary) 30%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.price-card p { margin: 0; }

.price-card__tier {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-brand);
}

.price-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.price-card__amount {
    font-size: clamp(3.5rem, 9vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.price-card__period {
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.price-card__users {
    margin-top: 12px !important;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-card__note {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.price-card__slider {
    width: 100%;
    display: grid;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.price-card__slider[hidden] { display: none; }

.price-card__slider input { width: 100%; accent-color: var(--color-brand); }

.price-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    width: fit-content;
    padding: 16px 24px;
    border-radius: 999px;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: 1.0625rem;
    font-weight: 500;
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-brand) 70%, transparent);
    transition: background .2s ease;
}

.price-card__cta:hover { background: color-mix(in srgb, var(--color-brand) 88%, black); }

/* "Get PhysicsGo" posts the chosen size to the cart */
.price-card__form { width: 100%; }

button.price-card__cta {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* The quieter choice next to it (Log out): the same button without the colour */
.price-card__cta.price-card__cta--secondary {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.price-card__cta.price-card__cta--secondary:hover { background: var(--color-bg-app); }

.price-card__cta:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}

/* Shown on the pricing page while an order is being put together */
.pricing-notice {
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: .9375rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pricing-notice a {
    gap: 6px;
    font-weight: 600;
    color: var(--color-brand);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}

.pricing-notice svg {
    transition: transform 0.3s;
}

.pricing-notice a:hover {
    text-decoration: underline; text-underline-offset: 4px;
    .pricing-notice svg {
        transform: translateX(4px);
    }
}

@media (max-width: 420px) {
    .option { min-width: 0; padding: 0 12px; height: 44px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .options__pill, .option { transition: none; }
}

/* Scroll-linked entrance where supported; everything simply shows elsewhere */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .product-copy {
            animation: product-rise linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 30%;
        }

        .product-media {
            animation: product-settle linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 35%;
        }
    }
}

@keyframes product-rise {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: none; }
}

@keyframes product-settle {
    from { opacity: 0; transform: translateY(4rem) scale(.94); }
    to { opacity: 1; transform: none; }
}

footer {
    border-top: 1px solid var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding-inline: 16px;
    height: 100px;
    font-size: 15px;
    margin: 0 1rem;
    background: transparent;
    color: var(--color-text-secondary);
}

html:has(.home-content) body { background-color: var(--color-bg-surface); }

.footer-link {
    padding: 8px 4px;
    transition: color .2s ease;
}

.footer-link:hover { color: var(--color-text-primary); }

.footer-link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Shop and account pages: cart, checkout, payment, login and the school account's portal.
   Same page frame as pricing (.shop-content / .account-content), with cards like the schools page. */
.shop-container, .account-container {
    display: grid;
    gap: 32px;
    max-width: 64rem;
    margin-inline: auto;
}

.shop-container--narrow, .account-container--narrow { max-width: 30rem; }
.account-container--medium { max-width: 46rem; }

.shop-intro, .account-intro {
    display: grid;
    gap: 1rem;
    text-align: center;
}

.shop-title, .account-title { font-size: clamp(2rem, 4.5vw, 3.25rem); }

/* The same surface as the price card: frosted white, a soft shadow; their own layout */
.shop-card, .account-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: clamp(22px, 4vw, 32px);
    background: color-mix(in srgb, var(--color-bg-surface) 80%, transparent);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--color-text-primary) 30%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.shop-card--compact { padding-block: 16px; }

/* Fieldsets used as cards: the legend sits inside like a heading */
fieldset.shop-card, fieldset.account-card { min-inline-size: 0; }
fieldset.shop-card > legend, fieldset.account-card > legend {
    float: left;
    width: 100%;
    padding: 0;
}
fieldset.shop-card > legend + *, fieldset.account-card > legend + * { clear: left; }

.shop-card__heading, .account-card__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.shop-card__text, .account-card__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.shop-card__text--small, .account-card__text--small { font-size: .875rem; }

.account-card--empty { justify-items: start; }

.shop-actions, .account-actions, .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.shop-actions, .account-actions { justify-content: center; }

.text-link {
    font-weight: 600;
    color: var(--color-brand);
}

.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 500 1rem/1.2 "Figtree", sans-serif;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.button--primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-brand) 70%, transparent);
}

.button--primary:hover { background: color-mix(in srgb, var(--color-brand) 88%, black); }

.button--secondary {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.button--secondary:hover { background: var(--color-border); }

.button--link {
    min-height: 0;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--color-brand);
    font-weight: 600;
}

.button--link:hover { text-decoration: underline; text-underline-offset: 4px; }

.button--small { min-height: 38px; padding: 0 16px; font-size: .9375rem; }
.button--block { width: 100%; }

.button:focus-visible,
.text-link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}

/* Messages */
.notices { display: grid; gap: 8px; }

.notice {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--color-brand-subtle-bg);
    color: var(--color-text-primary);
    font-size: .9375rem;
    line-height: 1.45;
}

.notice--success { background: var(--color-success-bg); color: var(--color-success-text); }
.notice--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.notice--error { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid__pair { display: grid; gap: 12px; }
.form-grid__pair--street { grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem); }
.form-grid__pair--city { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }

.field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field__label { font-size: .9375rem; font-weight: 600; }
.field__optional { font-weight: 400; color: var(--color-text-tertiary); }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 9px 13px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: 400 1rem/1.4 "Figtree", sans-serif;
    transition: border-color .2s ease;
}

/* Focus like the login fields: the border turns the brand colour */
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-brand);
}

.field--invalid input:not([type="checkbox"]):not([type="radio"]),
.field--invalid select { border-color: var(--color-danger-text); }

.field__hint {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.field__hint ul { margin: 0; padding-left: 1.1em; }

.field__error {
    margin: 0;
    font-size: .875rem;
    color: var(--color-danger-text);
}

/* Cart and order lines */
.cart-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
}

.cart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-item:first-child { padding-top: 0; }
.cart-item p { margin: 0; }
.cart-item__copy { display: grid; gap: 4px; }
.cart-item__title { font-weight: 600; }
.cart-item__detail { font-size: .9375rem; color: var(--color-text-secondary); }

.cart-item__price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cart-item__remove { grid-column: 1 / -1; }
.cart-list--compact .cart-item { padding: 12px 0; }

.order-totals { display: grid; gap: 8px; margin: 0; }

.order-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--color-text-secondary);
}

.order-totals__row dt, .order-totals__row dd { margin: 0; }
.order-totals__row dd { font-variant-numeric: tabular-nums; white-space: nowrap; }

.order-totals__row--total {
    padding-top: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.order-totals__note {
    display: block;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
}

/* Checkout: the forms, with the order beside them on wide screens */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
    gap: 24px;
}

.checkout__main { display: grid; gap: 20px; min-width: 0; }

.checkout__summary {
    position: sticky;
    top: 110px;
}

.checkout__summary .button--link { justify-self: center; }

/* Test payment: makes clear that nothing is charged */
.test-payment {
    display: grid;
    gap: 12px;
    padding: clamp(22px, 4vw, 32px);
    border: 2px dashed var(--color-warning-text);
    border-radius: 24px;
    background: var(--color-warning-bg);
}

.test-payment p, .test-payment h2 { margin: 0; }

.test-payment__badge {
    justify-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-warning-text);
    color: var(--color-bg-surface);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.test-payment__title { font-size: 1.25rem; font-weight: 700; }
.test-payment__text { color: var(--color-text-secondary); line-height: 1.5; }
.test-payment__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.next-steps {
    margin: 0;
    padding-left: 1.25em;
    display: grid;
    gap: 10px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Login: laid out like the pricing page, with two cards like the price card: "Log in with your
   code" for PhysicsGo and the school account (its form). Side by side when they fit.
   Each field is a pill with its name as the placeholder (the label is only read out). */
.login-container { max-width: 56rem; }

.login-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 26rem));
    justify-content: center;
    align-items: start;
    gap: 24px;
    width: 100%;
}

.login-card {
    justify-items: stretch;
    gap: 20px;
    padding: 32px 28px 28px;
}

.login-card__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login-card__text {
    margin: -8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

/* Student and Teacher: the same button twice, side by side */
.login-card__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.login-card__buttons .price-card__cta { width: 100%; }

.login-form, .login-fields, .login-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.login-form { gap: 24px; }
.login-fields { gap: 12px; }

/* One field per row, as tall as the button under it */
.login-row {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 16px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    cursor: text;
    transition: border-color .2s ease;
}

.login-row:focus-within { border-color: var(--color-brand); }
.login-row:has([aria-invalid="true"]) { border-color: var(--color-danger-text); }

/* 16px or more: phones don't zoom in on the field */
.login-row__input {
    flex: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--color-text-primary);
    font: 500 1.0625rem/1.4 "Figtree", sans-serif;
}

.login-row__input::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
}

.login-field-error {
    margin: -4px 0 0;
    padding-inline: 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-danger-text);
}

.login-actions { gap: 12px;}

/* The buttons are the pricing page's "Get PhysicsGo"; the gaps here do the spacing */
.login-card .price-card__cta { margin-top: 0; justify-self: center; }

.login-error {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.login-hint, .login-links {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-secondary);
}

/* Under a failed login: the way to PhysicsGo for a teacher or student at the wrong door */
.login-hint { font-size: 14px; color: var(--color-text-primary); }

.login-hint a, .login-links a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-hint a { font-weight: 600; color: var(--color-brand); }
.login-links a:hover { color: var(--color-text-primary); }

/* A school account that's already logged in */
.login-signed-in { display: grid; gap: 20px; font-size: 15px; text-align: center; }
.login-signed-in p { margin: 0; }
.login-signed-in__actions { display: grid; justify-items: center; gap: 10px; }
.login-signed-in__actions form { margin: 0; }

.login-hint a:focus-visible,
.login-links a:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* "Log in with your code" (account/_code_login.html, login.js): its steps share the card's grid */
.code-login [hidden] { display: none; }

/* A link that does something on the page, such as "Change" or "New here?" */
.login-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.login-link:hover { color: var(--color-text-primary); }
.login-link:disabled { cursor: default; opacity: .6; }

.login-link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Already logged in to PhysicsGo, a class to join afterwards, and what the first step said */
.login-session, .login-notice, .login-chosen {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.login-session a { font-weight: 600; color: var(--color-brand); }

.login-notice {
    padding: 12px 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-surface));
    color: var(--color-text-primary);
}

.login-chosen { color: var(--color-text-primary); }
.login-chosen .login-link { margin-left: 8px; font-size: 13px; }

/* How a new teacher is addressed: Mr., Ms. or Mx., side by side, as tall as a field */
.salutation-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.salutation-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    font: 600 1rem/1 "Figtree", sans-serif;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

/* The radio button covers its option, unseen, so clicks, the keyboard and screen readers still use it */
.salutation-option input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.salutation-option:has(input:checked) {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-surface));
    color: var(--color-text-primary);
}

.salutation-option:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* None chosen: the whole group is marked, not just the first choice */
.salutation-choice[aria-invalid="true"] .salutation-option { border-color: var(--color-danger-text); }

/* A new student's username, to write down before PhysicsGo opens */
.login-username { display: grid; gap: 8px; text-align: center; }
.login-username p { margin: 0; }

.login-username__value {
    font: 700 1.5rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .04em;
    color: var(--color-text-primary);
}

@media (max-width: 600px) {
    .login-card { padding: 24px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-row, .salutation-option { transition: none; }
}

/* Portal */
.account-section { display: grid; gap: 16px; }
.account-section--quiet { justify-items: center; }

.account-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-section__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.subscription { scroll-margin-top: 110px; }

.subscription__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.subscription__name {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.subscription__meta, .subscription__text { margin: 4px 0 0; color: var(--color-text-secondary); line-height: 1.5; }
.subscription__text { margin: 0; }

.subscription__small {
    display: block;
    font-size: .8125rem;
    color: var(--color-text-tertiary);
}

.subscription__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.subscription__facts dt, .details-list dt {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
}

.subscription__facts dd, .details-list dd {
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

.subscription__setup, .subscription__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.subscription__setup {
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--color-bg-app);
}

.subscription__actions { padding-top: 4px; }
.subscription form { margin: 0; }

.usage-meter {
    display: block;
    height: 6px;
    margin: 6px 0;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.usage-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand);
}

.badge {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-bg-app);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.badge--active { background: var(--color-success-bg); color: var(--color-success-text); border-color: transparent; }
.badge--ending_soon, .badge--grace { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: transparent; }
.badge--expired { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: transparent; }

.invite {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg-app);
}

.invite form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.invite__title { margin: 0; font-size: .9375rem; font-weight: 600; }

.invite__code {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--color-brand);
}

.invite__link { display: flex; gap: 8px; }

.invite__url {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font: 400 .875rem/1.4 "Figtree", sans-serif;
}

.invite__hint { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--color-text-secondary); }

/* One of the school's codes: for its teachers, its administrators, or its classes */
.code-block {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.code-block__title { margin: 0; font-size: .875rem; font-weight: 600; color: var(--color-text-primary); }

/* The classes table scrolls on its own on a phone rather than the page */
.table-scroll { overflow-x: auto; }
.class-codes { font-size: .875rem; }
.class-codes__code { font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--color-brand); }

.details-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.order-table th, .order-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.order-table thead th {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
}

.order-table tbody tr:last-child th, .order-table tbody tr:last-child td { border-bottom: 0; }
.order-table td:last-child, .order-table thead th:last-child { text-align: right; }

/* Order summary: printable */
.summary-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.order-summary__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 32px;
}

.order-summary__title { margin: 4px 0 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }

.order-summary__meta { display: grid; gap: 6px; margin: 0; font-size: .9375rem; }
.order-summary__meta div { display: flex; gap: 12px; }
.order-summary__meta dt { min-width: 7.5rem; color: var(--color-text-tertiary); }
.order-summary__meta dd { margin: 0; }

.order-summary__party p { margin: 0; line-height: 1.5; }

.order-summary__label {
    margin-bottom: 4px !important;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
}

.order-summary__note { margin: 0; font-size: .8125rem; color: var(--color-text-tertiary); }

@media (max-width: 860px) {
    .checkout { grid-template-columns: minmax(0, 1fr); }
    .checkout__summary { position: static; }
}

@media (max-width: 600px) {
    .form-grid,
    .subscription__facts,
    .details-list { grid-template-columns: minmax(0, 1fr); }
    .subscription__head { flex-direction: column; }
    .shop-actions .button, .account-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .button, .field input, .field select { transition: none; }
}

@media print {
    html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
    .nav, footer, .no-print { display: none !important; }
    .account-content { min-height: 0; padding: 0; background: #fff; }
    .order-summary { border: 0; padding: 0; }
}