/* ═══════════════════════════════════════════════════════════════
   CoverMyClass — Design System v2.2
   
   Architecture: Mobile-first, NO !important on display props.
   Mobile panel: visibility/opacity (not display:none) so CSS
   transitions actually animate.
   
   Breakpoints:
     640px  — 2-col grids
     768px  — tablet layouts, footer 2-col
     900px  — desktop nav, 3-col grids, pricing 3-col
     1024px — max comfort
   ═══════════════════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,400&family=DM+Serif+Display&display=swap');

   /* ─────────────────────────────────────────────────────────────
      DESIGN TOKENS
      ───────────────────────────────────────────────────────────── */
   :root {
     /* Navy palette */
     --navy-950: #06101f;
     --navy-900: #0b1c33;
     --navy-800: #0f2847;
     --navy-700: #153660;
     --navy-600: #1b4d8a;
     --navy-500: #2563a8;
     --navy-400: #3b82c4;
     --navy-300: #6da8db;
     --navy-200: #a3cdef;
     --navy-100: #d6eaf8;
     --navy-50:  #edf5fc;
   
     /* Amber palette */
     --amber-600: #d97706;
     --amber-500: #f59e0b;
     --amber-400: #fbbf24;
     --amber-300: #fcd34d;
     --amber-200: #fde68a;
     --amber-100: #fef3c7;
     --amber-50:  #fffbeb;
   
     /* Green */
     --green-600: #16a34a;
     --green-500: #22c55e;
     --green-100: #dcfce7;
   
     /* Surfaces */
     --bg:      #f7f9fc;
     --bg-warm: #eef3fa;
     --surface: #ffffff;
     --surface-glass:       rgba(255,255,255,0.72);
     --surface-glass-heavy: rgba(255,255,255,0.88);
   
     /* Ink */
     --ink:             #0b1c33;
     --ink-secondary:   #4a5d75;
     --ink-muted:       #6b7f96;
     --ink-faint:       #94a3b8;
     --ink-on-dark:       #f1f5f9;
     --ink-on-dark-muted: rgba(255,255,255,0.7);
   
     /* Brand */
     --brand:       #1b4d8a;
     --brand-light: #2563a8;
     --brand-dark:  #0f2847;
     --accent:      #f59e0b;
     --accent-dark: #d97706;
   
     /* Borders */
     --border:        rgba(15,40,71,0.08);
     --border-strong: rgba(15,40,71,0.14);
     --border-brand:  rgba(27,77,138,0.2);
     --border-accent: rgba(245,158,11,0.25);
   
     /* Shadows */
     --shadow-xs:  0 1px 2px rgba(15,40,71,0.04);
     --shadow-sm:  0 1px 3px rgba(15,40,71,0.06), 0 1px 2px rgba(15,40,71,0.04);
     --shadow-md:  0 4px 12px rgba(15,40,71,0.07), 0 1px 3px rgba(15,40,71,0.05);
     --shadow-lg:  0 12px 32px rgba(15,40,71,0.09), 0 4px 8px rgba(15,40,71,0.04);
     --shadow-xl:  0 20px 48px rgba(15,40,71,0.12), 0 8px 16px rgba(15,40,71,0.06);
     --shadow-brand:    0 8px 24px rgba(27,77,138,0.18);
     --shadow-brand-lg: 0 16px 40px rgba(27,77,138,0.22);
     --shadow-glow:     0 0 0 4px rgba(27,77,138,0.1);
   
     /* Radii */
     --r-sm:   8px;
     --r-md:   12px;
     --r-lg:   16px;
     --r-xl:   20px;
     --r-2xl:  24px;
     --r-full: 9999px;
   
     /* Layout */
     --max-w:        1120px;
     --max-w-narrow: 720px;
     --gutter:       20px;
     --header-h:     64px;
   
     /* Motion */
     --ease-out:   cubic-bezier(0.16,1,0.3,1);
     --dur-fast:   150ms;
     --dur-normal: 250ms;
     --dur-slow:   400ms;
   
     /* Type scale */
     --text-xs:   0.75rem;
     --text-sm:   0.875rem;
     --text-base: 1rem;
     --text-lg:   1.125rem;
     --text-xl:   1.25rem;
     --text-2xl:  1.5rem;
     --text-3xl:  clamp(1.75rem, 4vw, 2.25rem);
     --text-4xl:  clamp(2rem, 5vw, 3rem);
     --text-5xl:  clamp(2.5rem, 6vw, 3.75rem);
   
     /* Logo sizing */
     --logo-size: 32px;
   }
   
   @media (min-width: 768px) {
     :root { --logo-size: 36px; }
   }
   
   @media (min-width: 1024px) {
     :root { --logo-size: 38px; }
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      RESET
      CRITICAL: svg is NOT in this reset. That was the icon bug.
      ───────────────────────────────────────────────────────────── */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     -webkit-text-size-adjust: 100%;
     scroll-behavior: smooth;
     scroll-padding-top: calc(var(--header-h) + 24px);
   }
   
   body {
     font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
     font-size: var(--text-base);
     line-height: 1.6;
     color: var(--ink);
     background: var(--bg);
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   /* Atmospheric background — smooth layered gradients */
   body::before {
     content: '';
     position: fixed;
     inset: 0;
     z-index: -1;
     background:
       radial-gradient(ellipse 100% 60% at 15% -5%,  rgba(27,77,138,0.10) 0%, transparent 55%),
       radial-gradient(ellipse 70%  50% at 90%  5%,   rgba(37,99,168,0.07) 0%, transparent 50%),
       radial-gradient(ellipse 50%  40% at 50% 100%,  rgba(245,158,11,0.04) 0%, transparent 50%),
       linear-gradient(175deg, var(--bg-warm) 0%, var(--bg) 35%, #fafcff 70%, #fff 100%);
     pointer-events: none;
   }
   
   /* Only img and video get the size reset — NOT svg */
   img,
   video {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   svg      { overflow: visible; }
   a        { color: inherit; text-decoration: none; }
   button   { font: inherit; cursor: pointer; border: none; background: none; }
   ul, ol   { list-style: none; }
   
   :focus-visible {
     outline: 3px solid rgba(27,77,138,0.35);
     outline-offset: 3px;
     border-radius: var(--r-sm);
   }
   
   .sr-only {
     position: absolute !important;
     width: 1px; height: 1px;
     padding: 0; margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     white-space: nowrap; border: 0;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      CONTAINER
      ───────────────────────────────────────────────────────────── */
   .container {
     width: 100%;
     max-width: var(--max-w);
     margin-inline: auto;
     padding-inline: var(--gutter);
   }
   
   .container--narrow {
     max-width: var(--max-w-narrow);
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      TYPOGRAPHY
      ───────────────────────────────────────────────────────────── */
   h1, h2, h3, h4 {
     font-family: 'DM Serif Display', 'Georgia', serif;
     letter-spacing: -0.02em;
     line-height: 1.15;
     color: var(--ink);
   }
   
   h1 { font-size: var(--text-5xl); line-height: 1.08; }
   h2 { font-size: var(--text-4xl); }
   h3 { font-size: var(--text-2xl); }
   h4 { font-size: var(--text-xl); font-family: 'DM Sans', sans-serif; font-weight: 700; }
   
   p     { color: var(--ink-secondary); line-height: 1.65; }
   p + p { margin-top: 1em; }
   
   .kicker {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: 'DM Sans', sans-serif;
     font-size: var(--text-xs);
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--brand);
   }
   
   .kicker::before {
     content: '';
     width: 20px;
     height: 2px;
     background: var(--accent);
     border-radius: 2px;
   }
   
   .lead {
     font-size: var(--text-lg);
     color: var(--ink-secondary);
     max-width: 58ch;
     line-height: 1.7;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      SECTIONS — vertical rhythm
      ───────────────────────────────────────────────────────────── */
   .section      { padding: 56px 0; }
   .section--lg  { padding: 72px 0; }
   .section--hero { padding: 40px 0 56px; }
   
   @media (min-width: 768px) {
     .section      { padding: 80px 0; }
     .section--lg  { padding: 104px 0; }
     .section--hero { padding: 56px 0 80px; }
   }
   
   .section-header       { margin-bottom: 40px; }
   .section-header .lead { margin-top: 14px; }
   
   @media (min-width: 768px) {
     .section-header { margin-bottom: 56px; }
   }
   
   .section--dark     { background: var(--navy-900); color: var(--ink-on-dark); }
   .section--dark h1,
   .section--dark h2,
   .section--dark h3  { color: #fff; }
   .section--dark p   { color: var(--ink-on-dark-muted); }
   .section--dark .kicker { color: var(--amber-400); }
   .section--dark .kicker::before { background: var(--amber-400); }
   
   
   /* ─────────────────────────────────────────────────────────────
      BUTTONS
      ───────────────────────────────────────────────────────────── */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 24px;
     font-family: 'DM Sans', sans-serif;
     font-size: var(--text-sm);
     font-weight: 700;
     line-height: 1.3;
     border-radius: var(--r-full);
     border: 1px solid var(--border-strong);
     background: var(--surface);
     color: var(--ink);
     box-shadow: var(--shadow-sm);
     cursor: pointer;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     transition:
       transform var(--dur-fast) var(--ease-out),
       box-shadow var(--dur-normal) var(--ease-out),
       background var(--dur-normal) ease;
     white-space: nowrap;
   }
   
   .btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
   .btn:active { transform: translateY(0);    box-shadow: var(--shadow-xs); }
   
   .btn--primary {
     background: linear-gradient(180deg, var(--brand-light), var(--brand));
     border: 1px solid transparent;
     color: #fff;
     box-shadow: var(--shadow-brand);
   }
   
   .btn--primary:hover { box-shadow: var(--shadow-brand-lg); }
   
   .btn--accent {
     background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
     border: 1px solid transparent;
     color: var(--navy-950);
     box-shadow: 0 8px 24px rgba(245,158,11,0.2);
   }
   
   .btn--accent:hover { box-shadow: 0 12px 32px rgba(245,158,11,0.28); }
   
   .btn--ghost {
     background: var(--surface-glass);
     backdrop-filter: blur(8px);
     border: 1px solid var(--border);
   }
   
   .btn--sm    { padding: 9px 16px; font-size: var(--text-xs); }
   .btn--lg    { padding: 16px 32px; font-size: var(--text-base); }
   .btn--block { width: 100%; }
   
   .btn-group     { display: flex; gap: 12px; flex-wrap: wrap; }
   .btn-group .btn { flex: 1 1 auto; min-width: 160px; }
   
   @media (min-width: 480px) {
     .btn-group .btn { flex: 0 1 auto; }
   }
   
   
   /* ═════════════════════════════════════════════════════════════
      HEADER
      
      Architecture: pure mobile-first, ZERO !important.
      
      MOBILE  (<900px) : .nav-cta-mobile ✓  .menu-btn ✓
                          .nav-links ✗      .nav-cta-desktop ✗
      
      DESKTOP (≥900px) : .nav-links ✓      .nav-cta-desktop ✓
                          .nav-cta-mobile ✗  .menu-btn ✗
      ═════════════════════════════════════════════════════════════ */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 1000;
     background: rgba(247,249,252,0.82);
     backdrop-filter: blur(16px) saturate(180%);
     -webkit-backdrop-filter: blur(16px) saturate(180%);
     border-bottom: 1px solid var(--border);
     transition: box-shadow var(--dur-normal) ease;
   }
   
   .site-header.is-scrolled {
     box-shadow: var(--shadow-md);
   }
   
   .navbar {
     height: var(--header-h);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
   }
   
   /* ── Brand ────────────────────────────── */
   .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     flex-shrink: 0;
   }
   
   .brand:hover { text-decoration: none; }
   
   .brand__logo {
     width: var(--logo-size);
     height: var(--logo-size);
     border-radius: var(--r-sm);
     object-fit: contain;
     flex-shrink: 0;
   }
   
   .brand__logo[data-failed] { display: none; }
   
   .brand__text {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
   }
   
   .brand__name {
     font-weight: 800;
     font-size: 15px;
     color: var(--ink);
     letter-spacing: -0.01em;
     white-space: nowrap;
   }
   
   .brand__tagline {
     font-size: 11px;
     color: var(--ink-muted);
     white-space: nowrap;
     display: none;
   }
   
   @media (min-width: 768px) {
     .brand__tagline { display: block; }
   }
   
   /* ── Desktop nav links — HIDDEN on mobile ── */
   .nav-links {
     display: none;
     align-items: center;
     gap: 4px;
   }
   
   .nav-links a {
     padding: 8px 14px;
     border-radius: var(--r-full);
     font-weight: 600;
     font-size: var(--text-sm);
     color: var(--ink-secondary);
     transition: all var(--dur-fast) ease;
   }
   
   .nav-links a:hover {
     background: rgba(27,77,138,0.06);
     color: var(--ink);
     text-decoration: none;
   }
   
   .nav-links a[aria-current="page"] {
     background: rgba(27,77,138,0.08);
     color: var(--brand);
     font-weight: 700;
   }
   
   /* ── Nav action row ── */
   .nav-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
   }
   
   /* DESKTOP CTA: hidden on mobile (default) */
   .nav-cta-desktop {
     display: none;
   }
   
   /* MOBILE CTA: shown on mobile (default) */
   .nav-cta-mobile {
     display: inline-flex;
   }
   
   /* Hide mobile CTA on homepage — hero has its own */
   body.is-home .nav-cta-mobile {
     display: none;
   }
   
   /* ── Menu button — shown on mobile ── */
   .menu-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 9px 14px;
     border-radius: var(--r-full);
     background: var(--surface-glass);
     border: 1px solid var(--border-strong);
     box-shadow: var(--shadow-xs);
     font-weight: 700;
     font-size: var(--text-xs);
     color: var(--ink);
     transition: all var(--dur-fast) ease;
   }
   
   .menu-btn:hover {
     background: var(--surface);
     box-shadow: var(--shadow-sm);
   }
   
   .menu-btn__icon {
     font-size: 16px;
     line-height: 1;
     display: inline-flex;
     align-items: center;
   }
   
   /* ── Tiny screens: collapse menu label ── */
   @media (max-width: 360px) {
     .menu-btn__label { display: none; }
     .menu-btn { padding: 9px 10px; }
   }
   
   /* ═══════════════════════════════════════
      DESKTOP BREAKPOINT — The single swap
      All 4 rules in one clean block.
      No !important anywhere.
      ═══════════════════════════════════════ */
   @media (min-width: 900px) {
     /* Show desktop nav + CTA */
     .nav-links       { display: flex; }
     .nav-cta-desktop { display: inline-flex; }
   
     /* Hide mobile CTA + menu */
     .nav-cta-mobile  { display: none; }
     .menu-btn        { display: none; }
   }
   
   
   /* ═════════════════════════════════════════════════════════════
      MOBILE PANEL — Bottom sheet
      
      Uses visibility + opacity instead of display:none so the
      sheet's transform transition actually animates.
      ═════════════════════════════════════════════════════════════ */
   .mobile-panel {
     position: fixed;
     inset: 0;
     z-index: 1100;
     background: rgba(6,16,31,0);
     visibility: hidden;
     opacity: 0;
     pointer-events: none;
     transition:
       background var(--dur-slow) ease,
       opacity    var(--dur-slow) ease,
       visibility 0s linear var(--dur-slow);  /* delay hide until after fade */
   }
   
   .mobile-panel.is-open {
     background: rgba(6,16,31,0.35);
     visibility: visible;
     opacity: 1;
     pointer-events: auto;
     transition:
       background var(--dur-slow) ease,
       opacity    var(--dur-slow) ease,
       visibility 0s linear 0s;              /* show immediately */
   }
   
   .mobile-panel__sheet {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: var(--surface);
     border-radius: var(--r-2xl) var(--r-2xl) 0 0;
     padding: 20px var(--gutter) 32px;
     padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
     box-shadow: var(--shadow-xl);
     max-height: 85vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     transform: translateY(100%);
     transition: transform var(--dur-slow) var(--ease-out);
   }
   
   .mobile-panel.is-open .mobile-panel__sheet {
     transform: translateY(0);
   }
   
   .mobile-panel__handle {
     width: 36px;
     height: 4px;
     background: var(--border-strong);
     border-radius: var(--r-full);
     margin: 0 auto 16px;
   }
   
   .mobile-panel__top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
   }
   
   .mobile-links {
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   
   .mobile-links a {
     display: flex;
     align-items: center;
     padding: 16px 20px;
     min-height: 48px;
     border-radius: var(--r-lg);
     font-weight: 700;
     font-size: var(--text-lg);
     color: var(--ink);
     transition: background var(--dur-fast) ease;
     -webkit-tap-highlight-color: rgba(27,77,138,0.08);
   }
   
   .mobile-links a:hover {
     background: var(--navy-50);
     text-decoration: none;
   }
   
   .mobile-links a:active {
     background: rgba(27,77,138,0.12);
   }
   
   .mobile-panel__cta {
     margin-top: 16px;
     padding-top: 16px;
     border-top: 1px solid var(--border);
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      PILLS & BADGES
      ───────────────────────────────────────────────────────────── */
   .pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 14px;
     border-radius: var(--r-full);
     font-family: 'DM Sans', sans-serif;
     font-size: var(--text-xs);
     font-weight: 700;
     background: rgba(27,77,138,0.06);
     border: 1px solid rgba(27,77,138,0.12);
     color: var(--brand);
   }
   
   .pill--amber  { background: var(--amber-50);  border-color: var(--border-accent); color: var(--amber-600); }
   .pill--green  { background: var(--green-100); border-color: rgba(22,163,74,0.2); color: var(--green-600); }
   .pill--dark   { background: var(--navy-800);  border-color: rgba(255,255,255,0.1); color: var(--amber-300); }
   
   
   /* ─────────────────────────────────────────────────────────────
      CARDS
      ───────────────────────────────────────────────────────────── */
   .card {
     background: var(--surface-glass-heavy);
     border: 1px solid var(--border);
     border-radius: var(--r-xl);
     padding: 28px;
     box-shadow: var(--shadow-md);
     transition:
       transform var(--dur-normal) var(--ease-out),
       box-shadow var(--dur-normal) var(--ease-out);
   }
   
   .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
   
   .card--flat       { box-shadow: none; }
   .card--flat:hover { transform: none; box-shadow: none; }
   
   .card--brand {
     background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
     border-color: rgba(255,255,255,0.08);
     color: var(--ink-on-dark);
   }
   
   .card--brand h2,
   .card--brand h3,
   .card--brand h4 { color: #fff; }
   .card--brand p  { color: var(--ink-on-dark-muted); }
   
   .card--highlight {
     border-color: var(--border-brand);
     box-shadow: var(--shadow-brand), 0 0 0 1px rgba(27,77,138,0.06);
   }
   
   .card__inner {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .card__title {
     font-family: 'DM Sans', sans-serif;
     font-size: var(--text-lg);
     font-weight: 800;
     color: var(--ink);
     letter-spacing: -0.01em;
   }
   
   .card__text {
     font-size: var(--text-sm);
     color: var(--ink-secondary);
     line-height: 1.65;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      GRIDS
      ───────────────────────────────────────────────────────────── */
   .grid     { display: grid; gap: 20px; }
   .grid--2  { grid-template-columns: 1fr; }
   .grid--3  { grid-template-columns: 1fr; }
   
   @media (min-width: 640px) {
     .grid--2 { grid-template-columns: repeat(2, 1fr); }
     .grid--3 { grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (min-width: 900px) {
     .grid--3 { grid-template-columns: repeat(3, 1fr); }
     .grid    { gap: 24px; }
   }
   
   
   /* ═════════════════════════════════════════════════════════════
      INLINE SVG ICONS — Bulletproof sizing
      
      Explicit pixel dimensions with !important to override
      any inherited sizing. Combined with width/height attrs
      in the HTML for double protection.
      ═════════════════════════════════════════════════════════════ */
   
   /* Hero feature icons: 24px circle, 14px SVG */
   .hero-features__icon {
     width: 24px;
     height: 24px;
     min-width: 24px;
     max-width: 24px;
     border-radius: 50%;
     background: var(--navy-50);
     border: 1px solid rgba(27,77,138,0.1);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: var(--brand);
     overflow: hidden;
   }
   
   .hero-features__icon svg {
     width: 14px  !important;
     height: 14px !important;
     max-width: 14px;
     display: inline-block !important;
     flex-shrink: 0;
   }
   
   /* Checklist tick icons: 22px circle, 13px SVG */
   .check-icon {
     width: 22px;
     height: 22px;
     min-width: 22px;
     max-width: 22px;
     border-radius: 50%;
     background: var(--green-100);
     border: 1px solid rgba(22,163,74,0.2);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: var(--green-600);
     overflow: hidden;
   }
   
   .check-icon svg {
     width: 13px  !important;
     height: 13px !important;
     max-width: 13px;
     display: inline-block !important;
     flex-shrink: 0;
   }
   
   /* Trust strip icons: 16px inline */
   .trust-strip__icon {
     width: 16px  !important;
     height: 16px !important;
     max-width: 16px;
     display: inline-block !important;
     flex-shrink: 0;
     color: var(--green-600);
   }
   
   /* GDPR badge icon */
   .gdpr-badge svg {
     width: 14px  !important;
     height: 14px !important;
     max-width: 14px;
     display: inline-block !important;
     flex-shrink: 0;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      HERO
      ───────────────────────────────────────────────────────────── */
   .hero__layout {
     display: grid;
     gap: 36px;
     align-items: start;
   }
   
   @media (min-width: 900px) {
     .hero__layout {
       grid-template-columns: 1.15fr 0.85fr;
       gap: 56px;
     }
   }
   
   .hero__title    { margin-top: 16px; }
   .hero__subtitle { margin-top: 16px; }
   .hero__actions  { margin-top: 32px; }
   
   .hero__aside {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .hero__aside .card { padding: 24px; }
   
   .hero-features {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: 12px;
   }
   
   .hero-features li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: var(--text-sm);
     color: var(--ink-secondary);
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      STEP NUMBERS & ROLE CARD ICONS
      ───────────────────────────────────────────────────────────── */
   .step__number {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--brand-light), var(--brand));
     color: #fff;
     font-weight: 800;
     font-size: var(--text-sm);
     box-shadow: var(--shadow-brand);
     margin-bottom: 12px;
     flex-shrink: 0;
   }
   
   .role-card__icon {
     width: 48px;
     height: 48px;
     border-radius: var(--r-lg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 8px;
     font-size: 24px;
     flex-shrink: 0;
   }
   
   .role-card__icon--teacher     { background: var(--navy-50); }
   .role-card__icon--cover       { background: var(--amber-50); }
   .role-card__icon--coordinator { background: var(--green-100); }
   .role-card__icon--deputy      { background: rgba(139,92,246,0.08); }
   .role-card__icon--mat         { background: rgba(236,72,153,0.06); }
   
   
   /* ─────────────────────────────────────────────────────────────
      CHECKLISTS
      ───────────────────────────────────────────────────────────── */
   .checklist {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .checklist li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: var(--text-sm);
     line-height: 1.5;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      PRICING TIERS
      ───────────────────────────────────────────────────────────── */
   .pricing-grid {
     display: grid;
     gap: 20px;
   }
   
   @media (min-width: 900px) {
     .pricing-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
     }
   }
   
   .tier {
     padding: 32px 28px;
     border-radius: var(--r-2xl);
     background: var(--surface-glass-heavy);
     border: 1px solid var(--border);
     box-shadow: var(--shadow-md);
     display: flex;
     flex-direction: column;
   }
   
   .tier--popular {
     border-color: var(--border-brand);
     box-shadow: var(--shadow-brand), 0 0 0 1px rgba(27,77,138,0.06);
     position: relative;
   }
   
   .tier--popular::before {
     content: 'Most popular';
     position: absolute;
     top: -12px;
     left: 24px;
     padding: 4px 14px;
     border-radius: var(--r-full);
     background: linear-gradient(135deg, var(--brand-light), var(--brand));
     color: #fff;
     font-size: var(--text-xs);
     font-weight: 700;
   }
   
   .tier__name {
     font-family: 'DM Sans', sans-serif;
     font-size: var(--text-xl);
     font-weight: 900;
   }
   
   .tier__desc {
     color: var(--ink-secondary);
     font-size: var(--text-sm);
     margin-top: 6px;
   }
   
   .tier__features {
     margin-top: 24px;
     flex: 1;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      FAQ
      ───────────────────────────────────────────────────────────── */
   .faq-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .faq {
     border-radius: var(--r-lg);
     background: var(--surface-glass-heavy);
     border: 1px solid var(--border);
     overflow: hidden;
     box-shadow: var(--shadow-xs);
   }
   
   .faq[open] { box-shadow: var(--shadow-sm); }
   
   .faq summary {
     cursor: pointer;
     padding: 16px 20px;
     font-weight: 700;
     font-size: var(--text-base);
     color: var(--ink);
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     transition: background var(--dur-fast) ease;
   }
   
   .faq summary::-webkit-details-marker { display: none; }
   
   .faq summary::after {
     content: '';
     width: 20px;
     height: 20px;
     min-width: 20px;
     max-width: 20px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a5d75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-size: contain;
     background-repeat: no-repeat;
     flex-shrink: 0;
     transition: transform var(--dur-normal) var(--ease-out);
   }
   
   .faq[open] summary::after { transform: rotate(180deg); }
   .faq summary:hover { background: var(--navy-50); }
   
   .faq__answer {
     padding: 0 20px 16px;
     color: var(--ink-secondary);
     font-size: var(--text-sm);
     line-height: 1.7;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      FORMS
      ───────────────────────────────────────────────────────────── */
   .form-layout {
     display: grid;
     gap: 28px;
   }
   
   @media (min-width: 768px) {
     .form-layout {
       grid-template-columns: 1.1fr 0.9fr;
       gap: 36px;
     }
   }
   
   .field {
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   
   .field + .field { margin-top: 6px; }
   
   .field__label {
     font-weight: 700;
     font-size: var(--text-sm);
     color: var(--ink);
   }
   
   .field__input,
   .field__textarea,
   .field__select {
     width: 100%;
     padding: 12px 16px;
     border-radius: var(--r-md);
     border: 1px solid var(--border-strong);
     background: var(--surface);
     color: var(--ink);
     font-size: var(--text-base);
     font-family: inherit;
     transition:
       border-color var(--dur-fast) ease,
       box-shadow var(--dur-fast) ease;
   }
   
   .field__input::placeholder,
   .field__textarea::placeholder {
     color: var(--ink-faint);
   }
   
   .field__input:focus,
   .field__textarea:focus,
   .field__select:focus {
     outline: none;
     border-color: var(--brand);
     box-shadow: var(--shadow-glow);
   }
   
   .field__textarea { min-height: 120px; resize: vertical; }
   .field__hint     { font-size: var(--text-xs); color: var(--ink-muted); }
   
   .hr {
     border: 0;
     border-top: 1px solid var(--border);
     margin: 24px 0;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      STATS
      ───────────────────────────────────────────────────────────── */
   .stats-row {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }
   
   @media (min-width: 768px) {
     .stats-row { grid-template-columns: repeat(4, 1fr); }
   }
   
   .stat { text-align: center; padding: 24px 12px; }
   
   .stat__number {
     font-family: 'DM Serif Display', serif;
     font-size: var(--text-3xl);
     color: var(--brand);
     line-height: 1.1;
   }
   
   .stat__label {
     font-size: var(--text-xs);
     color: var(--ink-muted);
     margin-top: 6px;
     font-weight: 600;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      CTA BANNER
      ───────────────────────────────────────────────────────────── */
   .cta-banner {
     border-radius: var(--r-2xl);
     padding: 40px 32px;
     background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
     border: 1px solid rgba(255,255,255,0.06);
     box-shadow: var(--shadow-xl);
     position: relative;
     overflow: hidden;
   }
   
   .cta-banner::before {
     content: '';
     position: absolute;
     top: -40%;
     right: -20%;
     width: 60%;
     height: 120%;
     background: radial-gradient(ellipse, rgba(245,158,11,0.08) 0%, transparent 60%);
     pointer-events: none;
   }
   
   .cta-banner h2        { color: #fff; position: relative; }
   .cta-banner p          { color: var(--ink-on-dark-muted); position: relative; }
   .cta-banner .btn-group { position: relative; }
   
   .cta-banner__inner {
     display: flex;
     flex-direction: column;
     gap: 24px;
   }
   
   @media (min-width: 768px) {
     .cta-banner__inner {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
     }
     .cta-banner__inner > div:first-child {
       max-width: 60ch;
     }
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      TRUST STRIP
      ───────────────────────────────────────────────────────────── */
   .trust-strip {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 24px;
     flex-wrap: wrap;
     padding: 16px 0;
     font-size: var(--text-xs);
     color: var(--ink-muted);
     font-weight: 600;
   }
   
   .trust-strip__item {
     display: inline-flex;
     align-items: center;
     gap: 6px;
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      FOOTER
      ───────────────────────────────────────────────────────────── */
   .site-footer {
     background: var(--navy-950);
     color: var(--ink-on-dark);
   }
   
   .footer__inner {
     padding: 56px 0 28px;
     display: grid;
     gap: 40px;
   }
   
   @media (min-width: 768px) {
     .footer__inner {
       grid-template-columns: 1.3fr 0.7fr;
       align-items: start;
     }
   }
   
   .footer__brand {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .footer__logo-row {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .footer__logo {
     width: 32px;
     height: 32px;
     border-radius: var(--r-sm);
     object-fit: contain;
   }
   
   .footer__name {
     font-weight: 800;
     font-size: var(--text-base);
     color: #fff;
   }
   
   .footer__tagline-text {
     font-size: var(--text-xs);
     color: var(--ink-on-dark-muted);
   }
   
   .footer__desc {
     font-size: var(--text-sm);
     color: var(--ink-on-dark-muted);
     max-width: 48ch;
     line-height: 1.6;
   }
   
   .footer__nav {
     display: flex;
     flex-wrap: wrap;
     gap: 12px 20px;
     font-weight: 700;
     font-size: var(--text-sm);
   }
   
   .footer__nav a {
     color: rgba(255,255,255,0.75);
     transition: color var(--dur-fast) ease;
   }
   
   .footer__nav a:hover {
     color: #fff;
     text-decoration: underline;
   }
   
   .footer__bottom {
     border-top: 1px solid rgba(255,255,255,0.08);
     padding: 24px 0;
     display: flex;
     flex-wrap: wrap;
     gap: 8px 20px;
     justify-content: space-between;
     align-items: center;
     font-size: var(--text-xs);
     color: rgba(255,255,255,0.5);
   }
   
   .footer__bottom a       { color: rgba(255,255,255,0.55); }
   .footer__bottom a:hover { color: rgba(255,255,255,0.8); text-decoration: underline; }
   .footer__legal-links    { display: flex; gap: 16px; }
   
   
   /* ─────────────────────────────────────────────────────────────
      GDPR BADGE
      ───────────────────────────────────────────────────────────── */
   .gdpr-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     border-radius: var(--r-full);
     background: rgba(22,163,74,0.06);
     border: 1px solid rgba(22,163,74,0.15);
     font-size: var(--text-xs);
     font-weight: 700;
     color: var(--green-600);
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      LEGAL CONTENT
      ───────────────────────────────────────────────────────────── */
   .legal-content h2 { font-size: var(--text-2xl); margin-top: 36px; }
   .legal-content h3 { font-size: var(--text-xl); margin-top: 28px; }
   .legal-content p  { margin-top: 14px; }
   
   .legal-content ul {
     margin-top: 14px;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .legal-content li {
     padding-left: 20px;
     position: relative;
     color: var(--ink-secondary);
     font-size: var(--text-sm);
   }
   
   .legal-content li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 8px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--border-strong);
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      UTILITIES
      ───────────────────────────────────────────────────────────── */
   .m0    { margin: 0 !important; }
   .mt-8  { margin-top: 8px !important; }
   .mt-12 { margin-top: 12px !important; }
   .mt-16 { margin-top: 16px !important; }
   .mt-20 { margin-top: 20px !important; }
   .mt-24 { margin-top: 24px !important; }
   .mt-32 { margin-top: 32px !important; }
   .mb-0  { margin-bottom: 0 !important; }
   .text-center { text-align: center; }
   .max-w-prose { max-width: 65ch; }
   
   
   /* ─────────────────────────────────────────────────────────────
      REVEAL ANIMATIONS
      ───────────────────────────────────────────────────────────── */
   .reveal {
     opacity: 1;
     transform: none;
   }
   
   @media (prefers-reduced-motion: no-preference) {
     .reveal {
       opacity: 0;
       transform: translateY(12px);
       transition:
         opacity 0.6s var(--ease-out),
         transform 0.6s var(--ease-out);
     }
   
     .reveal.is-visible { opacity: 1; transform: none; }
     .reveal--delay-1   { transition-delay: 80ms; }
     .reveal--delay-2   { transition-delay: 160ms; }
     .reveal--delay-3   { transition-delay: 240ms; }
   }
   
   
   /* ─────────────────────────────────────────────────────────────
      PAGE STRUCTURE
      ───────────────────────────────────────────────────────────── */
   .page      { min-height: 100vh; display: flex; flex-direction: column; }
   .page main { flex: 1; }
   
   
   /* ─────────────────────────────────────────────────────────────
      PRINT
      ───────────────────────────────────────────────────────────── */
   @media print {
     .site-header, .site-footer, .mobile-panel, .cta-banner { display: none; }
     body { background: #fff; }
     .card { box-shadow: none; border: 1px solid #ddd; }
   }
   
   
   /* ═════════════════════════════════════════════════════════════
      DESKTOP REFINEMENT — Added for premium feel on ≥1024px
      These rules add breathing room and polish that make the
      desktop version feel as refined as mobile.
      ═════════════════════════════════════════════════════════════ */
   
   /* Gutter scales up for wider viewports */
   @media (min-width: 768px) {
     :root { --gutter: 24px; }
   }
   
   @media (min-width: 1024px) {
     :root { --gutter: 32px; }
   }
   
   /* Desktop section spacing — more generous rhythm */
   @media (min-width: 1024px) {
     .section       { padding: 96px 0; }
     .section--lg   { padding: 120px 0; }
     .section--hero { padding: 64px 0 96px; }
     .section-header { margin-bottom: 64px; }
   }
   
   /* Cards breathe on desktop */
   @media (min-width: 900px) {
     .card {
       padding: 36px;
     }
     .hero__aside .card {
       padding: 28px;
     }
   }
   
   /* Pricing tiers breathe on desktop */
   @media (min-width: 900px) {
     .tier {
       padding: 40px 32px;
     }
   }
   
   /* CTA banner scales up */
   @media (min-width: 900px) {
     .cta-banner {
       padding: 56px 48px;
     }
   }
   
   /* Hero layout gets more room on large screens */
   @media (min-width: 1024px) {
     .hero__layout {
       gap: 72px;
     }
   }
   
   /* Stats row gets more breathing room */
   @media (min-width: 900px) {
     .stat {
       padding: 32px 16px;
     }
   }
   
   /* Footer inner gets more padding */
   @media (min-width: 900px) {
     .footer__inner {
       padding: 72px 0 36px;
     }
   }
   
   /* FAQ items get roomier on desktop */
   @media (min-width: 900px) {
     .faq summary {
       padding: 20px 24px;
       font-size: var(--text-lg);
     }
     .faq__answer {
       padding: 0 24px 20px;
       font-size: var(--text-base);
     }
   }
   
   /* Form layout gets wider gap */
   @media (min-width: 900px) {
     .form-layout {
       gap: 48px;
     }
   }
   
   /* Grid gap increase at desktop */
   @media (min-width: 1024px) {
     .grid { gap: 28px; }
   }
   
   /* Legal content breathes more */
   @media (min-width: 768px) {
     .legal-content h2 { margin-top: 48px; }
     .legal-content h3 { margin-top: 36px; }
   }
   
   /* Trust strip centered on desktop */
   @media (min-width: 900px) {
     .trust-strip {
       gap: 32px;
     }
   }
   
   /* Button group minimum widths increase */
   @media (min-width: 900px) {
     .btn-group .btn {
       min-width: 180px;
     }
     .btn--lg {
       padding: 18px 40px;
       font-size: var(--text-lg);
     }
   }