/* ===== CSS Variables (matching GrammarIndex.Web) ===== */
:root {
    --primary: #1B5E9E;
    --primary-dark: #14486F;
    --primary-light: #2980C4;
    --bg: #F5F6FA;
    --bg-card: #FFFFFF;
    --text: #2C3E50;
    --text-muted: #6C7A89;
    --border: #E0E4EB;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --radius: 8px;
    --radius-lg: 16px;
    --radius-pill: 50px;
    --success: #27AE60;
    --danger: #E74C3C;
    --warning: #F39C12;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content { flex: 1; }

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

.content-narrow { max-width: 800px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 8px;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

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

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-white {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}
.btn-white:hover { background: var(--bg); border-color: var(--bg); }

.btn-lg { padding: 16px 36px; font-size: 17px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===== Header / Navigation ===== */
.site-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.logo-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    object-fit: contain;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s;
    text-decoration: none;
}
.nav-link:hover { color: var(--primary); background: var(--bg); text-decoration: none; }

.nav-link-cta {
    background: var(--primary);
    color: #fff !important;
    margin-left: 8px;
}
.nav-link-cta:hover { background: var(--primary-dark); }

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}

.mobile-nav {
    display: none;
    flex-direction: column;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.mobile-nav .nav-link { padding: 12px 0; }

/* ===== Hero ===== */
.hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 80px 0 100px;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    text-wrap: balance;
}

/* App.razor's <FocusOnNavigate Selector="main h1"> programmatically focuses the
   page's content heading on load (accessibility: moves focus on SPA navigation
   for screen-reader users). That otherwise leaves a visible focus ring around
   the heading until the user moves focus. Headings are not keyboard tab-stops,
   so suppressing this outline does not affect keyboard users — interactive
   controls keep their focus rings. */
h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

.hero-subtitle {
    font-size: 20px;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 16px; }

/* App Showcase */
.hero-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 380px;
}

/* Defensive — every screenshot inside the hero showcase is bounded by
   its wrapper, so a high-resolution PNG dropped in by mistake can't
   blow up the layout if its specific class style fails to load. */
.hero-showcase img { max-width: 100%; height: auto; display: block; }

.showcase-web {
    background: #fff;
    border-radius: 12px;
    padding: 8px 8px 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 520px;
    width: 100%;
}
.showcase-web img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}

.showcase-mobile {
    position: absolute;
    right: -20px;
    bottom: -24px;
    width: 150px;
    background: #fff;
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.showcase-mobile img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.showcase-desktop {
    position: absolute;
    left: -20px;
    bottom: -16px;
    width: 240px;
    background: #fff;
    border-radius: 8px;
    padding: 6px 6px 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.showcase-desktop img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px 4px 0 0;
}

/* Store badges row — spans both hero grid columns so it sits below the
   device-mockup cluster (whose phone/desktop are absolutely positioned).
   margin-top clears the mockups that overflow the showcase's bottom edge. */
.hero-stores-row {
    grid-column: 1 / -1;
    margin-top: 56px;
    text-align: center;
}
.hero-stores-row-label {
    margin: 0 0 14px;
    font-weight: 600;
    opacity: 0.9;
}
.hero-stores-row .store-badges { justify-content: center; }

/* Scroll cue — a bouncing down-chevron spanning both hero columns, telling the
   buyer there's more content below the fold. Anchors to #features. */
.hero-scroll-cue {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 32px;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover { opacity: 1; }

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* Respect users who prefer reduced motion — keep the cue, drop the bounce. */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue { animation: none; }
}

/* Pricing scroll cue — sits below the first row of cards to tell buyers there
   are more tiers (institutions, gifts) further down; they were stopping early.
   Reuses the hero-scroll-bounce animation above. */
.pricing-scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 28px auto 8px;
    color: var(--primary);
    font-weight: 600;
    text-align: center;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.pricing-scroll-cue:hover { opacity: 1; text-decoration: none; }
.pricing-scroll-cue svg { animation: hero-scroll-bounce 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .pricing-scroll-cue svg { animation: none; }
}

/* ===== Page Hero (sub-pages) ===== */
.page-hero {
    background: var(--primary);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.page-hero h1 { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.page-hero .hero-subtitle { font-size: 18px; opacity: 0.9; }

/* ===== Sections ===== */
.section-title {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
}
.section-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 48px;
}

.content-section { padding: 80px 0; }

/* ===== Features ===== */
.features { padding: 80px 0; background: var(--bg-card); }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

.feature-card {
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: box-shadow 0.3s, transform 0.3s;
}
.feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.feature-icon { font-size: 36px; margin-bottom: 16px; }
/* An edition card on the home page shows its app icon instead of an emoji. */
.feature-icon img { display: block; width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.feature-card h3 { font-size: 20px; margin-bottom: 12px; }
.feature-card p { color: var(--text-muted); font-size: 15px; line-height: 1.7; }

/* ===== Audience ===== */
.audience { padding: 80px 0; }

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.audience-card {
    background: var(--bg-card);
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.audience-card h3 {
    color: var(--primary);
    font-size: 20px;
    margin-bottom: 12px;
}
.audience-card p { color: var(--text-muted); line-height: 1.7; }

/* ===== Shop announcement ===== */
.shop-announce { padding: 80px 0; background: var(--bg-card); }
.shop-announce-inner {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 40px;
    align-items: center;
}
.shop-announce-art {
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-announce-logo { width: 100%; max-width: 180px; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25)); }
.shop-announce-copy .section-title { text-align: left; margin-bottom: 16px; }
.shop-announce-copy p { color: var(--text); line-height: 1.7; margin-bottom: 8px; }
.shop-announce-note { color: var(--text-muted); font-size: 15px; }
.shop-announce-actions { margin-top: 20px; }
@media (max-width: 640px) {
    .shop-announce-inner { grid-template-columns: 1fr; gap: 28px; }
    .shop-announce-art { max-width: 200px; margin: 0 auto; }
    .shop-announce-copy .section-title { text-align: center; }
    .shop-announce-actions { text-align: center; }
}

/* ===== CTA ===== */
.cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}
.cta h2 { font-size: 36px; font-weight: 800; margin-bottom: 16px; }
.cta p { font-size: 18px; opacity: 0.9; margin-bottom: 32px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; }

/* ===== Pricing ===== */
.pricing-hero { padding: 60px 0; text-align: center; }
.pricing-tiers { padding: 0 0 80px; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.pricing-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.pricing-section-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin: 24px 0 8px;
}
.pricing-section-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.pricing-callout {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    text-align: center;
    margin: 24px 0 32px;
    color: var(--text);
}
.pricing-callout strong { color: var(--primary); }

.pricing-notes {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-top: 16px;
}
.pricing-notes h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.pricing-notes ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
.pricing-notes li { padding: 4px 0; font-size: 14px; }

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.3s, transform 0.3s;
}
.pricing-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.pricing-card-featured {
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-hover);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 4px 20px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
}

.pricing-header { text-align: center; margin-bottom: 24px; }
.pricing-header h3 { font-size: 24px; font-weight: 700; margin-bottom: 16px; }

.pricing-price { margin-bottom: 8px; }
.price-amount { font-size: 48px; font-weight: 800; color: var(--text); }
.price-period { font-size: 15px; color: var(--text-muted); }

.pricing-desc { color: var(--text-muted); font-size: 14px; }

.pricing-features {
    list-style: none;
    margin: 0 0 32px;
    flex: 1;
}
.pricing-features li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before { content: "✓ "; color: var(--success); font-weight: bold; }

/* How a seat-based purchase is delivered: one shared key, or a single-device
   key per person. A two-button segmented control above the Buy button. */
.delivery-choice { margin: -12px 0 18px; }
.delivery-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.delivery-option {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    padding: 9px 6px;
    border: 0;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.delivery-option + .delivery-option { border-left: 1px solid var(--border); }
.delivery-option:hover { color: var(--primary); }
.delivery-option:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }
.delivery-option.is-selected { background: var(--primary); color: #fff; }
.delivery-note {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
    min-height: 3.6em; /* room for the longer of the two notes, so the Buy button does not jump */
}

/* Institution */
.institution-section { margin-top: 24px; }

.pricing-card-wide {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.institution-config { margin: 32px 0; text-align: left; }

.slider-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.slider-row label { font-weight: 600; min-width: 140px; }

.slider-control { display: flex; align-items: center; gap: 16px; flex: 1; }

.seat-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 3px;
    outline: none;
}
.seat-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}
.seat-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
}

.seat-count {
    font-weight: 700;
    font-size: 18px;
    min-width: 90px;
    text-align: right;
}

.institution-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: var(--radius);
}
.summary-label { color: var(--text-muted); }
.summary-value { font-weight: 700; }

.summary-total {
    grid-column: 1 / -1;
    background: var(--primary);
    color: #fff;
}
.summary-total .summary-label { color: rgba(255,255,255,0.9); }
.summary-total .summary-value { font-size: 24px; }

.pricing-features-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: center;
    margin-bottom: 24px;
}
.pricing-features-horizontal li { border-bottom: none; padding: 4px 0; }

/* ===== Login ===== */
.login-section { padding: 80px 0; }

.login-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 48px 40px;
    box-shadow: var(--shadow);
}
.login-card h1 { font-size: 28px; text-align: center; margin-bottom: 8px; }
.login-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 32px; }

.login-form .form-group { margin-bottom: 20px; }
.login-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }

.login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}
.login-footer p { margin-bottom: 8px; }

/* ===== Checkout Success ===== */
.checkout-success { padding: 80px 0; }

.success-card, .error-card, .loading-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 48px 40px;
    text-align: center;
    box-shadow: var(--shadow);
}

.success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 32px;
    margin-bottom: 24px;
}

.license-keys { margin: 32px 0; text-align: left; }
.license-keys h3 { margin-bottom: 8px; }
.license-instructions { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }

.license-key-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}
.license-key-display code {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary);
}

/* A single-device purchase: one key per seat, laid out four to a row like the
   email's table. The card is widened so a whole key fits a column. */
.success-card-wide { max-width: 880px; }
.license-keys-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.license-key-grid {
    list-style: none;
    counter-reset: license-key;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
}
.license-key-grid li {
    counter-increment: license-key;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.license-key-grid li::before {
    content: counter(license-key);
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.license-key-grid code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary);
    white-space: nowrap;
}
@media (max-width: 820px) {
    .license-key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below this two columns leave less than a whole key's width in each. */
@media (max-width: 480px) {
    .license-key-grid { grid-template-columns: minmax(0, 1fr); }
}

.next-steps { text-align: left; margin: 32px 0; }
.next-steps h3 { margin-bottom: 12px; }
.next-steps ol { padding-left: 24px; }
.next-steps li { margin-bottom: 8px; line-height: 1.6; }

.success-actions { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }

/* ===== Contact ===== */
.contact-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 40px;
    box-shadow: var(--shadow);
}

.contact-form .form-group { margin-bottom: 20px; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }

.contact-info {
    margin-top: 40px;
    text-align: center;
    color: var(--text-muted);
}
.contact-info h3 { color: var(--text); margin-bottom: 8px; }

.success-message { text-align: center; padding: 40px 0; }

/* ===== FAQ ===== */
.faq-list { margin-bottom: 48px; }

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    background: var(--bg-card);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}
.faq-question:hover { color: var(--primary); }

.faq-toggle {
    font-size: 24px;
    font-weight: 300;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-answer {
    padding: 0 24px 20px;
    color: var(--text-muted);
    line-height: 1.7;
}

.faq-cta {
    text-align: center;
    padding: 40px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.faq-cta h3 { margin-bottom: 8px; }
.faq-cta p { color: var(--text-muted); margin-bottom: 20px; }

/* ===== Legal Content ===== */
.legal-content h2 { font-size: 22px; margin: 32px 0 12px; }
.legal-content h3 { font-size: 18px; margin: 24px 0 8px; }
.legal-content p { margin-bottom: 16px; line-height: 1.8; color: var(--text-muted); }
.legal-content ul { margin: 0 0 16px 24px; }
.legal-content li { margin-bottom: 8px; line-height: 1.7; color: var(--text-muted); }

/* ===== Alerts ===== */
.alert {
    padding: 12px 20px;
    border-radius: var(--radius);
    margin: 16px 0;
    font-size: 14px;
}
.alert-error {
    background: #FEF2F2;
    color: var(--danger);
    border: 1px solid #FECACA;
}

/* ===== Forms ===== */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.w-100 { width: 100%; }

/* ===== Footer ===== */
.site-footer {
    background: var(--text);
    color: rgba(255, 255, 255, 0.8);
    padding: 60px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .site-logo { margin-bottom: 16px; }
.footer-brand .logo-text { color: #fff; }
.footer-tagline { font-size: 14px; opacity: 0.7; }

/* ---- Footer social icons ----
   Sits in the brand column under the store badges. Neutral translucent
   circles by default so four brand colours don't shout over the footer;
   each brand colour arrives on hover/focus. Uses its own <h4> rule rather
   than .footer-links h4 because this block is a <nav>, not a link column. */
.footer-social { margin-top: 28px; }

.footer-social-title {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-link:hover,
.social-link:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.social-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.social-youtube:hover,
.social-youtube:focus-visible { background: #FF0000; }

/* Instagram's mark is a gradient in its own guidelines; a single warm
   magenta reads correctly at 20px and keeps one hover rule per brand. */
.social-instagram:hover,
.social-instagram:focus-visible { background: #E1306C; }

.social-reddit:hover,
.social-reddit:focus-visible { background: #FF4500; }

.social-x:hover,
.social-x:focus-visible { background: #000; }

/* Honour a reduced-motion preference — the lift is decorative. */
@media (prefers-reduced-motion: reduce) {
    .social-link { transition: none; }
    .social-link:hover,
    .social-link:focus-visible { transform: none; }
}

.footer-links h4 {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.footer-links a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding: 4px 0;
    text-decoration: none;
}
.footer-links a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

/* ===== Blazor Error UI ===== */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 12px;
    background: var(--danger);
    color: #fff;
    text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-showcase { margin-top: 40px; }
    .showcase-web { max-width: 420px; }
    .showcase-mobile { width: 120px; right: -10px; bottom: -16px; }
    .showcase-desktop { width: 200px; left: -10px; bottom: -10px; }
    .hero-title { font-size: 36px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 48px; }
    .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .institution-summary { grid-template-columns: 1fr; }
    .slider-row { flex-direction: column; align-items: stretch; }
    .slider-row label { min-width: auto; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: flex; }
    .mobile-nav { display: flex; }
    .pricing-grid-4 { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 48px; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero { padding: 60px 0; }
    .hero-title { font-size: 28px; }
    .showcase-web { max-width: 340px; }
    .showcase-mobile { width: 100px; right: -6px; bottom: -12px; border-radius: 14px; padding: 4px; }
    .showcase-mobile img { border-radius: 12px; }
    .showcase-desktop { width: 160px; left: -6px; bottom: -8px; border-radius: 6px; padding: 4px 4px 0; }
    .section-title { font-size: 28px; }
    .features, .audience, .shop-announce, .cta, .content-section { padding: 60px 0; }
    .login-card, .success-card, .contact-card { padding: 32px 24px; }
}

/* ── My Devices page ────────────────────────────────────────────────
   Self-service device management — multi-step form (identity → code →
   list). Plain reusable cards, no DevExpress controls. */

.md-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.md-card h2 { margin: 0 0 8px 0; font-size: 20px; color: var(--text); }

.md-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.md-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.md-form input {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: var(--bg-card);
    color: var(--text);
}
.md-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(27, 94, 158, .15);
}
.md-code-input {
    font-size: 24px !important;
    letter-spacing: 12px;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

.md-form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.md-error {
    background: #FEE2E2;
    color: #991B1B;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    border-left: 4px solid #DC2626;
}

.md-success-banner {
    background: #DCFCE7;
    color: #15803D;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin: 16px 0;
    border-left: 4px solid #16A34A;
}

.md-notice {
    background: #FEF3C7;
    color: #78350F;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px 0;
    border-left: 4px solid #F59E0B;
}
.md-notice strong { color: #78350F; }

.md-help {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.md-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.md-summary h2 { margin: 0 0 4px 0; font-size: 22px; }

.md-seat-pill {
    background: var(--primary-light);
    color: #fff;
    padding: 12px 18px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 110px;
}
.md-seat-pill.seat-full { background: #DC2626; }
.md-seat-pill-num { font-size: 18px; font-weight: 700; }
.md-seat-pill-label { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .5px; }

.md-device-list { display: flex; flex-direction: column; gap: 12px; }

.md-device-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.md-device-info { flex: 1 1 auto; min-width: 200px; }

.md-device-platform {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 6px;
}
.md-platform-icon { font-size: 20px; }

.md-device-meta { font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.md-device-meta code {
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.md-device-actions { flex: 0 0 auto; }

.md-empty { text-align: center; padding: 48px 32px; }

.md-footnote {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.md-footnote h3 { font-size: 16px; margin: 0 0 8px 0; color: var(--text); }

.btn-danger {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    border: 0;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    background: #DC2626;
    color: #fff;
}
.btn-danger:hover { background: #B91C1C; color: #fff; text-decoration: none; }
.btn-danger:disabled { opacity: .55; cursor: default; }

.btn-secondary {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
}
.btn-secondary:hover { background: var(--border); color: var(--text); text-decoration: none; }
.btn-secondary:disabled { opacity: .55; cursor: default; }

.muted { color: var(--text-muted); }
.small { font-size: 12px; }

/* ---- /account licence cards ---- */
.account-licence-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.account-licence-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.account-licence-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.65rem;
}
.account-licence-tier {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
}
.account-licence-key code {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.5px;
}
.account-licence-seats {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: #ECFDF5;
    color: #065F46;
    min-width: 70px;
}
.account-licence-seats-full {
    background: #FEF3C7;
    color: #92400E;
}
.account-licence-seats-num {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
}
.account-licence-seats-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.85;
}
.account-licence-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}
.account-licence-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── Licence registration: organisation / school picker ──────────────────
   Used by /register and /register-gift. Kept alongside the other .md-*
   form pieces above so the registration form reads as one thing rather
   than a stock form with a bolted-on search. */
.md-fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.md-fieldset legend {
    padding: 0 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
}
.md-fieldset .md-help { margin: 0; }

.md-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* A postcode search can return a long tail; cap it so the submit button
       never scrolls off the bottom of a phone. */
    max-height: 320px;
    overflow-y: auto;
}
.md-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.md-result:hover { border-color: var(--primary); background: var(--bg); }
.md-result:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(27, 94, 158, .15);
}
.md-result .muted { font-size: 13px; font-weight: 400; }

/* A button that reads as a link — for the "Not a UK school?" escape hatch,
   which must not compete with the search button beside it. */
.btn-link {
    background: none;
    border: none;
    padding: 10px 4px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}
.btn-link:hover { color: var(--primary-dark); }

/* ===========================================================================
   Blog
   ---------------------------------------------------------------------------
   Two audiences in one stylesheet: the public listing and article (.blog-*),
   and the private studio at /blog/admin (.studio-*).
   =========================================================================== */

.blog-section { padding: 56px 0 80px; }

/* ----- filter bar ----- */
.blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 32px;
}
.blog-toolbar-search { flex: 1 1 320px; min-width: 240px; }
.blog-toolbar-filter { flex: 0 1 240px; min-width: 200px; }
.blog-search, .blog-filter { width: 100%; }

.blog-result-count {
    color: var(--text-muted);
    font-size: 14px;
    margin: -16px 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ----- card grid ----- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}
.blog-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* A fixed 16:9 well, filled by the image or by the placeholder glyph. Holding
   the shape whether or not a post has artwork is what stops the row from
   re-flowing as images arrive. */
.blog-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    overflow: hidden;
}
.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.blog-card:hover .blog-card-media img { transform: scale(1.03); }
.blog-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: rgba(255, 255, 255, 0.65);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px 24px;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.blog-chip {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: rgba(27, 94, 158, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
a.blog-chip:hover { background: rgba(27, 94, 158, 0.16); text-decoration: none; }

.blog-card-title { font-size: 20px; line-height: 1.35; margin: 0; }
.blog-card-title a { color: var(--text); }
.blog-card-title a:hover { color: var(--primary); text-decoration: none; }

.blog-card-summary {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* Pushes the action to the bottom so every card in a row ends level, whatever
   the summary length. */
.blog-card-actions { margin-top: auto; padding-top: 4px; }

.blog-pager { display: flex; justify-content: center; margin-top: 40px; }

.blog-pager-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
}
/* One link on its own sits on the side it belongs to: "Older posts" stays right
   on page one, "Newer posts" stays left on the last page. */
.blog-pager-links a:only-child:last-child { margin-left: auto; }

.blog-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.blog-empty h2 { font-size: 22px; margin-bottom: 8px; }
.blog-empty .btn { margin-top: 16px; }

.blog-feeds {
    display: flex; gap: 24px; align-items: flex-start;
    margin-top: 48px; padding: 24px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
}
.blog-feeds-image { flex: 0 0 120px; width: 120px; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.blog-feeds-body { flex: 1 1 auto; min-width: 0; }
.blog-feeds-body h2 { margin: 0 0 4px; font-size: 18px; }
.blog-feeds-body p { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); }
.blog-feeds-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 8px; }
.blog-feeds-row label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.blog-feeds-row input {
    width: 100%; min-width: 0; box-sizing: border-box;
    font: inherit; font-size: 14px; color: var(--text);
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
}
.blog-feeds-row input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.blog-feeds-row a { font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; }
.blog-feeds-row a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .blog-feeds { flex-direction: column; }
    .blog-feeds-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ----- article ----- */
.blog-article { padding: 48px 0 24px; }

.blog-breadcrumb {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.blog-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.blog-article-header h1 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 16px;
}

.blog-article-standfirst {
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.blog-article-hero {
    margin: 32px 0 8px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.blog-article-hero img { width: 100%; height: auto; display: block; }

/* Typography for author-written HTML. The markup carries no classes of its own,
   it is pasted from elsewhere, so everything here is an element selector. */
.blog-body {
    font-size: 17px;
    line-height: 1.8;
    padding: 32px 0 8px;
    /* Pasted articles carry long URLs and unbroken strings; without this one of
       them widens the whole page on a phone. */
    overflow-wrap: anywhere;
}
.blog-body > *:first-child { margin-top: 0; }
.blog-body p { margin: 0 0 20px; }
.blog-body h2 { font-size: 26px; font-weight: 700; margin: 40px 0 14px; line-height: 1.3; }
.blog-body h3 { font-size: 21px; font-weight: 700; margin: 32px 0 12px; }
.blog-body h4 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.blog-body ul, .blog-body ol { margin: 0 0 20px 26px; }
.blog-body li { margin-bottom: 10px; }
.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 24px 0;
}
.blog-body figure { margin: 24px 0; }
.blog-body figcaption { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
.blog-body blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    border-left: 4px solid var(--primary);
    color: var(--text-muted);
    font-size: 19px;
    font-style: italic;
}
.blog-body code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 15px;
}
.blog-body pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0 0 20px;
}
.blog-body pre code { background: none; border: none; padding: 0; }
/* A pasted table scrolls inside itself rather than widening the article. There
   is no wrapper element to hang the scroller on — the markup comes from
   elsewhere — so the table becomes its own scroll container. */
.blog-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15px;
}
.blog-body th, .blog-body td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.blog-body th { background: var(--bg); font-weight: 700; }
.blog-body hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }

.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.blog-tag {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}
.blog-tag:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

.blog-article-footer { margin: 40px 0 8px; }

.blog-more { background: var(--bg-card); }
.blog-more-title { font-size: 24px; font-weight: 700; margin-bottom: 28px; }

@media (max-width: 640px) {
    .blog-article-header h1 { font-size: 28px; }
    .blog-article-standfirst { font-size: 17px; }
    .blog-body { font-size: 16px; }
    .blog-toolbar-filter { flex: 1 1 100%; }
}

/* ===========================================================================
   Blog studio (/blog/admin)
   =========================================================================== */

.studio { padding: 40px 0 80px; }

.studio-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}
.studio-bar h1 { font-size: 30px; font-weight: 800; margin: 0; }
.studio-subtitle { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; }
.studio-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.studio-signout { margin: 0; }

.studio-password {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 15px;
}
.studio-password:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(27, 94, 158, .15);
}

.alert-success { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.alert-warn { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

.studio-confirm {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.studio-confirm-actions { display: flex; gap: 8px; }

.studio-tabs { margin-top: 8px; }
.studio-tab-body { padding: 24px 0 8px; }

.studio-grid { background: var(--bg-card); }
.studio-row-actions { display: flex; gap: 6px; align-items: center; }

.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
}
.status-live { background: #F0FDF4; color: #15803D; }
.status-scheduled { background: #EFF6FF; color: var(--primary); }
.status-draft { background: var(--bg); color: var(--text-muted); }

.studio-placeholder {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.studio-placeholder p { color: var(--text-muted); margin-bottom: 16px; }

.studio-editor { display: flex; flex-direction: column; gap: 24px; }

.studio-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.studio-field { display: flex; flex-direction: column; gap: 6px; }
.studio-field > span { font-weight: 600; font-size: 14px; }
.studio-field > span em { font-weight: 400; color: var(--text-muted); font-style: normal; }
.studio-field-wide { grid-column: 1 / -1; }
.studio-field-check { justify-content: flex-end; gap: 8px; }
.studio-hint { font-size: 13px; color: var(--text-muted); font-style: normal; }
.studio-inline-add { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.studio-inline-add > :first-child { flex: 1; }

.studio-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 20px 24px 24px;
    margin: 0;
}
.studio-block-title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 16px;
    color: var(--text);
}

.studio-image-row { display: flex; flex-wrap: wrap; gap: 24px; }
.studio-image-preview {
    flex: 0 0 280px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.studio-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.studio-image-empty { color: var(--text-muted); font-size: 14px; }
.studio-image-controls {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.studio-body-tabs { margin-top: 8px; }
.studio-source textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.studio-source-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* The real file input is hidden behind a styled label: the browser's own
   control cannot be restyled and looks out of place beside DevExpress buttons. */
.studio-file-button { position: relative; overflow: hidden; cursor: pointer; }
.studio-file-button input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.studio-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}
.studio-slug {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===========================================================================
   Bringing DevExpress into the brand
   ---------------------------------------------------------------------------
   The office-white theme's accent is orange (#fe7109). Every other control on
   this site is Grammar Index blue, so a DevExpress button, tab or drop-down
   next to one reads as a different product.

   Sitewide, not scoped to the blog. Two reasons: DevExpress editors already
   appear on /login and /contact, and a drop-down's popup is rendered at the end
   of <body>, outside whatever section opened it — a scoped rule would recolour
   the closed editor and miss the list that drops out of it.

   Wherever the theme routes a colour through a --dxbl-* custom property, the
   property is re-pointed and hover, active, focus and disabled all stay
   coherent. Where it hard-codes the accent on a long descendant selector there
   is no property to reach, and only those rules carry !important.
   =========================================================================== */

/* --- buttons -------------------------------------------------------------- */
/* Two selectors, both two classes deep, because the theme colours a standalone
   button and a button inside another component through separate rules of that
   same weight — a single-class selector here loses to both. */
.dxbl-btn.dxbl-btn-primary,
.dxbl-btn-standalone.dxbl-btn-primary {
    --dxbl-btn-bg: var(--primary);
    --dxbl-btn-border-color: var(--primary);
    --dxbl-btn-hover-bg: var(--primary-light);
    --dxbl-btn-hover-border-color: var(--primary-light);
    --dxbl-btn-active-bg: var(--primary-dark);
    --dxbl-btn-active-border-color: var(--primary-dark);
    --dxbl-btn-focus-bg: var(--primary);
    --dxbl-btn-focus-border-bg: var(--primary);
    --dxbl-btn-focus-outline-color: var(--primary-light);
    --dxbl-btn-disabled-bg: #A9C3DA;
    --dxbl-btn-disabled-border-color: #A9C3DA;
}

.dxbl-btn.dxbl-btn-link,
.dxbl-btn-standalone.dxbl-btn-link {
    --dxbl-btn-hover-color: var(--primary-dark);
    --dxbl-btn-link-hover-color: var(--primary-dark);
    --dxbl-btn-focus-outline-color: var(--primary-light);
    --dxbl-btn-focus-shadow-color: rgba(27, 94, 158, 0.4);
}

/* Delete is the one destructive control in the studio, and a link-styled button
   gives no other signal that it is. Red on the way to the click, and the
   confirmation bar after it. */
.studio-row-actions .dxbl-btn-link {
    --dxbl-btn-color: var(--danger);
    --dxbl-btn-hover-color: #C0392B;
    --dxbl-btn-link-hover-color: #C0392B;
    --dxbl-btn-active-color: #C0392B;
    --dxbl-btn-focus-color: var(--danger);
    --dxbl-btn-focus-outline-color: var(--danger);
    --dxbl-btn-focus-shadow-color: rgba(231, 76, 60, 0.4);
}

/* --- editors: text boxes, memos, combo boxes, tag boxes, date pickers ------ */
.dxbl-text-edit {
    --dxbl-text-edit-focus-border-color: var(--primary);
    --dxbl-text-edit-focus-shadow-color: rgba(27, 94, 158, 0.25);
}

/* --- tabs ----------------------------------------------------------------- */
.dxbl-tabs {
    --dxbl-tabs-tab-selected-color: var(--primary);
    --dxbl-tabs-tab-hover-color: var(--primary);
    --dxbl-tabs-tab-focus-outline-color: var(--primary-light);
    --dxbl-tabs-scroll-btn-hover-color: var(--primary);
}
.dxbl-tabs-item.dxbl-active::after {
    background-color: var(--primary) !important;
}

/* --- pager (the blog listing) --------------------------------------------- */
.dxbl-pager {
    --dxbl-pager-active-page-btn-bg: var(--primary);
    --dxbl-pager-active-page-btn-border-color: var(--primary);
}
.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn,
.dxbl-pager > .dxbl-btn.dxbl-pager-page-btn {
    --dxbl-pager-page-btn-hover-bg: var(--primary-light);
    --dxbl-btn-focus-outline-color: var(--primary-light);
    --dxbl-btn-focus-shadow-color: rgba(27, 94, 158, 0.4);
}

/* --- drop-down lists ------------------------------------------------------ */
/* The selected row is painted by a ::before overlay carrying a literal colour.
   Both spellings are listed on purpose: a drop-down's list uses
   "dxbl-list-box-item-selected" and a standalone DxListBox uses
   "dxbl-listbox-item-selected". They differ by two hyphens and nothing else. */
.dxbl-list-box-item-selected::before,
.dxbl-list-box-item-selected > td::before,
.dxbl-listbox-item-selected::before,
.dxbl-listbox-item-selected > td::before {
    background-color: var(--primary) !important;
}

/* --- calendar (the publish-date picker) ----------------------------------- */
.dxbl-calendar {
    --dxbl-calendar-today-border-color: var(--primary);
    --dxbl-calendar-item-focus-outline-color: var(--primary-light);
}
.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-item::before,
.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-range::before {
    background-color: var(--primary) !important;
}

/* DevExpress buttons sit on a taller baseline than the site's own .btn.
   Nudging the plain ones down keeps a "View blog" anchor level with the
   DxButton beside it in the studio toolbar. */
.studio-bar-actions .btn { padding-top: 8px; padding-bottom: 8px; }

/* ===== Editions (/editions) =====
   Four edition cards, then the comparison chart. Each edition has an accent
   colour that runs from its card head to its column header, so the eye can
   carry an edition from the cards into the table. The Grade 3 to 8 accent is
   the navy of its US brand mark. */
:root {
    /* Each edition's colour is the field of its app icon (the mobile apps'
       Resources/AppIcon/appicon.png), so the card border, the column header
       and the icon beside them agree. The amber and green fields are too
       light for text on white, so each edition also has an "ink": the same
       hue, dark enough to read, used for the tagline, the "For" and the
       column-header text. Purple and navy are their own ink. */
    --edition-english: #3C3489;
    --edition-english-ink: #3C3489;
    --edition-international: #F4B414;
    --edition-international-ink: #8A5F00;
    --edition-keystage: #8BC34A;
    --edition-keystage-ink: #3F6E14;
    --edition-grade3to8: #0A3161;
    --edition-grade3to8-ink: #0A3161;
}

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

.editions-intro { padding: 64px 0 40px; background: var(--bg-card); }

.editions-grid {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr: a bare 1fr is minmax(auto, 1fr), so a
       column holding an unbreakable "keystage.grammarindex.com" button grows
       to fit it and the last column takes what is left. Equal columns, and
       the button text wraps instead (below). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.edition-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 5px solid var(--edition-accent, var(--primary));
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: box-shadow 0.3s, transform 0.3s;
    /* Lets the address button below size its text from the card's width. */
    container-type: inline-size;
}
.edition-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.edition-english       { --edition-accent: var(--edition-english);       --edition-ink: var(--edition-english-ink); }
.edition-international { --edition-accent: var(--edition-international); --edition-ink: var(--edition-international-ink); }
.edition-keystage      { --edition-accent: var(--edition-keystage);      --edition-ink: var(--edition-keystage-ink); }
.edition-grade3to8     { --edition-accent: var(--edition-grade3to8);     --edition-ink: var(--edition-grade3to8-ink); }

.edition-card-head h2 { font-size: 22px; font-weight: 800; margin: 6px 0 4px; }
/* The edition's app icon, rounded the way a home screen rounds it. */
.edition-icon {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.edition-tagline { color: var(--edition-ink, var(--primary)); font-weight: 600; font-size: 14px; margin: 0; }
.edition-for { margin: 0; color: var(--text); line-height: 1.6; }
.edition-for strong { color: var(--edition-ink, var(--primary)); }

.edition-points {
    list-style: none;
    margin: 0;
    padding: 0;
}
.edition-points li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.edition-points li:last-child { border-bottom: none; }
.edition-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--edition-ink, var(--success));
    font-weight: 700;
}

/* The bottom of every card lines up: the secondary button (the free trial)
   sits directly under the list, then whatever space the card has to spare,
   then the address button with the three store badges stacked beneath it.
   margin-top: auto is what pushes that block to the bottom so the blue
   buttons of all four cards share a row. */
/* The one inbound link each landing page has from this chart. */
.edition-more { display: block; font-weight: 600; color: var(--edition-ink, var(--primary)); }
.edition-secondary .btn { width: 100%; }
.edition-links {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* The address must stay on one line. At the four-column width the card's
   inner width is about 218px and the longest address ("grade3and8..." at
   27 characters) needs about 190px at 13px, so the size follows the card:
   5.6% of its inline width, never below 11px or above the normal 15px.
   Browsers without container-query units keep the 13px fallback. */
.edition-links .btn {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-size: clamp(11px, 5.6cqw, 15px);
}
/* A link whose address is not published yet: same shape as the button above
   it, dimmed, not clickable, with the explanation in its title. */
.edition-links .btn-pending { opacity: 0.55; cursor: default; pointer-events: none; }
.edition-card .store-badges { flex-direction: column; align-items: flex-start; gap: 8px; }

/* The chart. The wrapper scrolls sideways on a narrow screen so the page
   body never does; the feature column stays put while the rest slides. */
.editions-compare { padding: 64px 0 56px; }

.cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.cmp-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}
.cmp-table th, .cmp-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}
.cmp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
    font-size: 16px;
    font-weight: 800;
    padding-top: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border);
}
.cmp-feature-head { color: var(--text-muted); font-weight: 600 !important; }
.cmp-col { border-top: 5px solid var(--edition-accent, var(--primary)); white-space: nowrap; }
.cmp-col-english       { --edition-accent: var(--edition-english);       color: var(--edition-english-ink); }
.cmp-col-international { --edition-accent: var(--edition-international); color: var(--edition-international-ink); }
.cmp-col-keystage      { --edition-accent: var(--edition-keystage);      color: var(--edition-keystage-ink); }
.cmp-col-grade3to8     { --edition-accent: var(--edition-grade3to8);     color: var(--edition-grade3to8-ink); }
/* The small icon in each column header, so a reader can match a column to
   a card (and to the app on their phone) without reading the heading. */
.cmp-col-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    vertical-align: middle;
    margin: -4px 6px 0 0;
}

.cmp-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
    font-weight: 600;
    color: var(--text);
    width: 24%;
    min-width: 200px;
    border-right: 1px solid var(--border);
}
.cmp-table tbody td { color: var(--text); width: 19%; }
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: none; }

.cmp-group th {
    position: sticky;
    left: 0;
    background: var(--bg) !important;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 14px;
    padding-bottom: 10px;
    border-right: none !important;
    width: auto !important;
}

.cmp-yes { color: var(--success); font-weight: 800; font-size: 18px; }
.cmp-no  { color: var(--text-muted); opacity: 0.6; }
.cmp-span { color: var(--text); }
.cmp-rollout { color: var(--warning); font-weight: 700; margin-left: 2px; cursor: help; }

.cmp-footnote {
    margin: 14px 4px 0;
    font-size: 14px;
    color: var(--text-muted);
}
.cmp-footnote sup { color: var(--warning); font-weight: 700; }

.editions-guide { padding: 24px 0 80px; }

/* The brand line above the home page's descriptive heading. */
.hero-kicker {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Breadcrumb trail on the edition landing pages: a visible path back to the
   comparison page, and the same trail as BreadcrumbList data for crawlers. */
.breadcrumb { margin: 0 0 22px; font-size: 14px; color: var(--text-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ===== Edition landing pages (/core, /multi-language, /key-stage-2-3, /grade-3-8) =====
   One page per edition, reachable by address only (no menu entry): campaign
   landing pages and search targets. Same icons and accents as /editions; the
   .edition-{key} class on each section supplies --edition-accent and
   --edition-ink. Rendered by Shared/EditionLanding.razor. */
.edition-hero-inner { display: flex; align-items: center; gap: 28px; text-align: left; }
.edition-hero-icon {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.edition-hero-kicker {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}
.edition-hero .hero-subtitle { margin: 8px 0 0; }

.edition-landing { padding: 56px 0 72px; }
.edition-landing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
}
.edition-landing-main h2 { font-size: 24px; font-weight: 800; margin: 36px 0 12px; }
.edition-landing-main h2:first-child { margin-top: 0; }
.edition-landing-main p { line-height: 1.7; color: var(--text); }

.edition-list { list-style: none; margin: 0 0 8px; padding: 0; }
.edition-list li {
    position: relative;
    padding: 9px 0 9px 26px;
    line-height: 1.6;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.edition-list li:last-child { border-bottom: none; }
.edition-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--edition-ink, var(--success));
}

.edition-aside-card {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 5px solid var(--edition-accent, var(--primary));
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    box-shadow: var(--shadow);
}
.edition-aside-card h2 { margin: 0; font-size: 20px; font-weight: 800; }
.edition-aside-card .btn {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edition-aside-card .btn-pending { opacity: 0.55; cursor: default; pointer-events: none; }
.edition-aside-card .store-badges { flex-direction: column; align-items: flex-start; gap: 8px; }
.edition-aside-note { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.edition-aside-link { font-weight: 600; }

/* The Grades 3 to 8 curriculum hub: a pill for each grade, then one list per
   grade with the concept, its section and its Language-standard code. */
.curriculum-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.curriculum-pill {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--edition-accent, var(--primary));
    border-radius: 999px;
    color: var(--edition-ink, var(--primary));
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.curriculum-pill:hover { background: var(--edition-accent, var(--primary)); color: #fff; }
.curriculum-pill-muted { border-color: var(--border); color: var(--text-muted); }
.curriculum-count { color: var(--text-muted); font-size: 15px; margin-top: -4px; }
.curriculum-list { list-style: none; margin: 0 0 8px; padding: 0; }
.curriculum-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}
.curriculum-list li:last-child { border-bottom: none; }
.curriculum-topic { font-weight: 600; color: var(--text); flex: 1 1 260px; }
.curriculum-chip {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--edition-ink, var(--primary));
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}
.curriculum-standard { font-size: 13px; color: var(--text-muted); flex: 1 1 100%; }
.curriculum h2[id] { scroll-margin-top: 90px; }

@media (max-width: 900px) {
    .edition-landing-grid { grid-template-columns: 1fr; }
    .edition-aside-card { position: static; }
    .edition-hero-inner { flex-direction: column; text-align: center; }
}

/* Pricing: the one line that says a licence is not tied to an edition. */
.pricing-editions-note {
    text-align: center;
    color: var(--text-muted);
    max-width: 720px;
    margin: 16px auto 0;
    line-height: 1.6;
}

@media (max-width: 1240px) {
    .editions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .editions-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .editions-intro { padding: 48px 0 32px; }
    .editions-compare { padding: 48px 0 40px; }
    .cmp-table tbody th[scope="row"] { min-width: 170px; }
}