/* ==========================================================================
   tutorinmontreal.ca — the site stylesheet. ONE file, every page.

   Authoritative source of design choices: the home page (formerly
   optimized/index.html). Its compiled Tailwind, its webfaces and its WCAG AA
   contrast corrections are reproduced here verbatim; the brand tokens in :root
   were lifted from it and are what every other rule refers to.

   Order matters and is deliberate:
     1  webfonts            2  :root tokens        3  Tailwind (incl. preflight)
     4  home-page custom    5  worksheet resets    6  shared components
     7  worksheet blocks    8  contrast fixes (last, so they win)

   Generated by scratchpad/make_stylesheet.py. Do not hand-edit: change the home
   page or base.css and re-assemble, or the two will drift apart again.
   ========================================================================== */

/* --- 1. webfonts, inlined so no render-blocking Google Fonts request --- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/fonts/merriweather-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- 2. brand tokens (from the home page's compiled Tailwind) --- */
:root {
  --navy:      #0f172a;
  --navy-700:  #1e293b;
  --teal:      #14b8a6;   /* decorative only - 2.49:1 on white, never for text/CTA bg */
  --teal-600:  #0d9488;   /* 3.74:1 - large text only */
  --teal-700:  #0f766e;   /* 5.47:1 - CTA background, AA pass */
  --link:      #0f766e;   /* 5.47:1 - all body links */
  --muted:     #64748b;   /* 4.76:1 - small/secondary text (slate-400 is 2.56:1, borders only) */
  --teal-050:  #f0fdfa;
  --teal-100:  #ccfbf1;
  --cream:     #f8fafc;
  --slate:     #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --amber:     #b45309;
  --amber-050: #fffbeb;
  --green:     #22c55e;   /* decorative only - 2.28:1 on white */
  --green-700: #15803d;   /* 5.02:1 - WhatsApp CTA background, AA pass */
  --green-800: #14672f;

  --serif: Merriweather, Georgia, serif;
  --sans:  Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;

  --sh-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sh-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --sh-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}

/* --- 3. Tailwind v3.4.17, as compiled for the home page --- */
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-inset-4{inset:-1rem}.-top-3{top:-0.75rem}.bottom-6{bottom:1.5rem}.left-0{left:0px}.left-1\/2{left:50%}.right-0{right:0px}.right-3{right:0.75rem}.right-6{right:1.5rem}.top-0{top:0px}.top-1\/2{top:50%}.top-10{top:2.5rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.mt-1{margin-top:0.25rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-20{height:5rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-2{--tw-rotate:2deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.scroll-mt-28{scroll-margin-top:7rem}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-8{column-gap:2rem}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-200 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(226 232 240 / var(--tw-divide-opacity, 1))}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.rounded-bl-lg{border-bottom-left-radius:0.5rem}.rounded-tr-2xl{border-top-right-radius:1rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-brand-navy{--tw-border-opacity:1;border-color:rgb(15 23 42 / var(--tw-border-opacity, 1))}.border-brand-teal{--tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-50{--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-brand-cream{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-brand-navy{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-brand-teal{--tw-bg-opacity:1;background-color:rgb(20 184 166 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1))}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-white\/90{background-color:rgb(255 255 255 / 0.9)}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232 / var(--tw-bg-opacity, 1))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-brand-teal{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(20 184 166 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-20{padding-bottom:5rem}.pb-6{padding-bottom:1.5rem}.pt-12{padding-top:3rem}.pt-40{padding-top:10rem}.text-center{text-align:center}.text-right{text-align:right}.font-sans{font-family:Inter, sans-serif}.font-serif{font-family:Merriweather, serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.tracking-wider{letter-spacing:0.05em}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-brand-navy{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-brand-slate{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-brand-teal{--tw-text-opacity:1;color:rgb(20 184 166 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/80{color:rgb(255 255 255 / 0.8)}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7 / var(--tw-text-opacity, 1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-20{opacity:0.2}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-green-500\/30{--tw-shadow-color:rgb(34 197 94 / 0.3);--tw-shadow:var(--tw-shadow-colored)}.shadow-green-500\/40{--tw-shadow-color:rgb(34 197 94 / 0.4);--tw-shadow:var(--tw-shadow-colored)}.shadow-teal-500\/10{--tw-shadow-color:rgb(20 184 166 / 0.1);--tw-shadow:var(--tw-shadow-colored)}.shadow-teal-500\/30{--tw-shadow-color:rgb(20 184 166 / 0.3);--tw-shadow:var(--tw-shadow-colored)}.blur-3xl{--tw-blur:blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-0:hover{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-brand-navy:hover{--tw-border-opacity:1;border-color:rgb(15 23 42 / var(--tw-border-opacity, 1))}.hover\:border-brand-teal:hover{--tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.hover\:bg-brand-navy:hover{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}.hover\:text-brand-navy:hover{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\:text-brand-teal:hover{--tw-text-opacity:1;color:rgb(20 184 166 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:opacity-90:hover{opacity:0.9}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-brand-teal{--tw-bg-opacity:1;background-color:rgb(20 184 166 / var(--tw-bg-opacity, 1))}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(0px * var(--tw-divide-y-reverse))}.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}}@media (min-width: 768px){.md\:-mt-4{margin-top:-1rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:p-10{padding:2.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:pb-32{padding-bottom:8rem}.lg\:pt-56{padding-top:14rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}

/* --- 4. home-page components: announcement banner, icon sizing --- */
.banner-flash {
            background: linear-gradient(110deg, #0f172a, #0f766e, #b45309, #0f766e, #0f172a);
            background-size: 300% 100%;
            animation: bannerGradient 8s ease infinite;
        }
        @keyframes bannerGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .banner-shine {
            position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
            transform: skewX(-20deg);
            animation: bannerShine 4.5s ease-in-out infinite; pointer-events: none;
        }
        @keyframes bannerShine {
            0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; }
        }
        .banner-badge { animation: bannerPulse 1.6s ease-in-out infinite; }
        @keyframes bannerPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
            50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(255,255,255,0); }
        }
        .banner-arrow { animation: bannerNudge 1.2s ease-in-out infinite; }
        @keyframes bannerNudge {
            0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); }
        }
        @media (prefers-reduced-motion: reduce) {
            .banner-flash, .banner-shine, .banner-badge, .banner-arrow { animation: none; }
            .banner-flash { background-position: 50% 50%; }
        }

/* --- 5. worksheet element resets, scoped to <body class="ws"> --- */
html { scroll-behavior: smooth; }

.ws {
  margin: 0;
  font-family: var(--sans);
  color: var(--slate);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* The shared header is fixed: a 2.5rem announcement banner above a 5rem nav.
     Reserve it, or the breadcrumbs start underneath the navbar. The landing
     page is not <body class="ws"> and keeps its own hero padding. */
  padding-top: 7.5rem;
}
/* Dismissing the banner drops the nav to top:0, so the reservation shrinks
   with it. The header script sets this class. */
.ws.banner-dismissed { padding-top: 5rem; }

.ws main h1, .ws .crumbs h1, .ws main h2, .ws .crumbs h2, .ws main h3, .ws .crumbs h3, .ws main h4, .ws .crumbs h4 { font-family: var(--serif); line-height: 1.25; margin: 0; }
:where(.ws main, .ws .crumbs) :is(h1, h2, h3, h4) { color: var(--navy); }
.ws main p, .ws .crumbs p { margin: 0 0 1rem; }
.ws main a:not(:where(.btn)), .ws .crumbs a:not(:where(.btn)) { color: inherit; }
/* height:auto is load-bearing — the preview <img>s carry width/height attributes
   (850x1100) for layout stability, and without it they keep the 1100px height
   while the width shrinks, stretching every page preview vertically. */
.ws main img, .ws .crumbs img { display: block; max-width: 100%; height: auto; }
.ws main svg, .ws .crumbs svg, .ws main iframe, .ws .crumbs iframe { display: block; max-width: 100%; }
.ws main ul, .ws .crumbs ul, .ws main ol, .ws .crumbs ol { margin: 0 0 1rem; padding-left: 1.25rem; }

.wrap  { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.wrap-n { max-width: 48rem; margin-inline: auto; padding-inline: 1.5rem; }

/* --- 6. shared components: nav, buttons, breadcrumbs, chips --- */
/* ---------- nav (mirrors the live site) ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f3f4f6;
}
.nav > div {
  height: 4.5rem; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand .mark {
  background: var(--navy); color: #fff; width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-sm); display: grid; place-items: center; font-weight: 800;
  font-family: var(--serif); transition: background .15s;
}
.brand:hover .mark { background: var(--teal); }
.brand span { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--navy); letter-spacing: -.02em; }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links a { font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .15s; }
/* --teal (#14b8a6) is 2.49:1 on white and is documented above as decorative
   only. Using it for nav text failed AA on the current-page link, and on the
   Get Started button it repainted white label text teal ON a teal button —
   about 1.6:1. Both now use --link (#0f766e, 5.47:1), and the button opts out
   of the nav colour rules entirely. */
.nav-links a:not(.btn):hover { color: var(--link); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--link); font-weight: 600; }
.nav-links a.btn:hover, .nav-links a.btn:focus-visible { color: #fff; }
@media (min-width: 860px) { .nav-links { display: flex; } }

/* ---------- nav dropdown ---------- */
/* CSS-only: :focus-within opens it for keyboard users, so no JS and no trap. */
.navdrop { position: relative; }
.navdrop > a { display: inline-flex; align-items: center; gap: .3rem; }
.navdrop > a svg { opacity: .55; transition: transform .15s; }
.navdrop:hover > a svg, .navdrop:focus-within > a svg { transform: rotate(180deg); }
.navdrop-menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 100%; margin-top: .55rem; min-width: 15rem;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: .35rem; z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity .13s;
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.navdrop::after { content: ""; position: absolute; inset: 100% 0 auto; height: .6rem; }
.navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu { opacity: 1; visibility: visible; }
/* Was display:block. Flex so the set count can sit right-aligned in its own
   column instead of trailing the label as " -- 15 worksheets", which made every
   row a different length and the menu as wide as its longest sentence. Edited in
   place rather than overridden below it: `.navdrop > a` already has to be
   doubled as `.navdrop > a.nav-ws` to win at equal specificity (see the pill
   rules), and a second `.navdrop-menu a` block would be the same trap again. */
.navdrop-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .5rem .75rem; border-radius: .4rem;
  font-size: .85rem; color: var(--slate-600); text-decoration: none; white-space: nowrap;
}
.navdrop-menu a:hover, .navdrop-menu a:focus-visible { background: var(--cream); color: var(--navy); }

/* ---------- dropdown categories ---------- */
/* A <p>, not a heading element: this is chrome inside <nav>, and h3s here would
   inject "CEGEP Science" into the document outline of all 122 pages.
   --muted (4.76:1 on white) rather than --slate-400 (2.56:1): this is small
   uppercase text, which is exactly where a borders-only grey stops being
   legible. Colour is declared, not inherited. */
.navdrop-head {
  margin: .5rem 0 .15rem; padding: 0 .75rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.navdrop-head:first-child { margin-top: .15rem; }
/* The count. Tabular figures so the column does not jitter between 8 and 21. */
.navdrop-n {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.navdrop-menu a:hover .navdrop-n, .navdrop-menu a:focus-visible .navdrop-n { color: var(--slate-600); }
/* The rule above "All topics" -- a border on an empty <p> rather than an <hr>,
   which Tailwind preflight and base.css style differently and which would carry
   semantics this does not have. */
.navdrop-sep { margin: .4rem .75rem; border-top: 1px solid var(--slate-200); }

/* The mobile twin. The menu it lands in is a Tailwind flex column with
   space-y-4, so the vertical rhythm is set there -- this only needs to not
   fight it, hence the negative-free margins and the smaller top gap. */
.navdrop-head-m {
  margin: .35rem 0 -.35rem; padding: 0;
  font-size: .7rem; letter-spacing: .07em;
}
@media (prefers-reduced-motion: reduce) { .navdrop-menu, .navdrop > a svg { transition: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: .8rem 1.6rem; border: 1px solid transparent;
  transition: all .18s; font-family: var(--sans);
}
.btn-primary { background: var(--teal-700); color: #fff; box-shadow: 0 10px 15px -3px rgb(15 118 110 / .35); }
.btn-primary:hover { background: #0b5f59; transform: translateY(-1px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-ghost { border-color: var(--slate-200); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-wa { background: var(--green-700); color: #fff; box-shadow: 0 10px 15px -3px rgb(21 128 61 / .35); }
.btn-wa:hover { background: var(--green-800); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .8125rem; color: var(--slate-500); padding: 1.25rem 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.crumbs li::after { content: "›"; margin-left: .5rem; color: var(--slate-400); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--teal); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--navy); font-weight: 500; }

/* ---------- chips / pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.chip-teal  { background: var(--teal-050); color: var(--teal-600); }
.chip-navy  { background: var(--slate-100); color: var(--navy); }
.chip-amber { background: var(--amber-050); color: var(--amber); }
.chip-free  { background: #f0fdf4; color: #15803d; }

/* ---------- youtube facade ---------- */
.yt {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 55%, var(--teal-600) 100%);
  display: grid; place-items: center; text-align: center; color: #fff; padding: 1.5rem;
  border: 1px solid var(--slate-200);
}
.yt::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / .1) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5; pointer-events: none;
}
.yt-inner { position: relative; z-index: 1; max-width: 30rem; }
.yt-play {
  width: 4.5rem; height: 4.5rem; border-radius: 999px; margin: 0 auto .9rem;
  background: rgb(255 255 255 / .14); border: 2px solid rgb(255 255 255 / .5);
  display: grid; place-items: center;
}
.yt-play svg { width: 1.75rem; height: 1.75rem; fill: #fff; margin-left: .2rem; }
.yt h3 { color: #fff; font-size: 1.1rem; margin-bottom: .35rem; }
.yt p  { color: rgb(255 255 255 / .75); font-size: .875rem; margin: 0; }
.yt-badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .3);
  color: #fff; padding: .25rem .6rem; border-radius: 999px;
}

/* ---------- footer ---------- */
.foot { background: var(--navy); color: #fff; padding: 4rem 0 3rem; margin-top: 5rem; }
.foot h2, .foot h3 { color: #fff; font-size: 1.6rem; margin-bottom: .75rem; }
.foot p { color: var(--slate-400); font-size: .9rem; }
.foot .rule { border-top: 1px solid #334155; margin-top: 2.5rem; padding-top: 2rem; }
.foot a { color: var(--slate-400); }

/* ---------- misc ---------- */
.sheet-shadow { box-shadow: 0 12px 30px -8px rgb(15 23 42 / .28); }
.lead { font-size: 1.125rem; color: var(--slate-600); }
.muted { color: var(--slate-500); font-size: .875rem; }
.locked-art { position: relative; overflow: hidden; border-radius: var(--r-md); }
.locked-art img { filter: saturate(.55); }
.locked-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(248 250 252 / .1), rgb(15 23 42 / .55));
}
.lock-badge {
  position: absolute; z-index: 2; inset: auto 0 0 0; padding: .75rem;
  color: #fff; font-size: .8125rem; font-weight: 600; text-align: center;
}
.prototype-bar {
  background: var(--amber); color: #fff; font-size: .8125rem; font-weight: 600;
  padding: .5rem 1rem; text-align: center;
}
.prototype-bar a { color: #fff; }


/* ==========================================================================
   Accessibility baseline (added after adversarial review)
   ========================================================================== */

/* Visible keyboard focus. There was none before: every link, button and
   <summary> was keyboard-invisible. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 3px;
  border-radius: 4px;
}
.foot :where(a, button):focus-visible,
.d5-course :where(a, button):focus-visible { outline-color: #5eead4; }

/* Respect reduced-motion. smooth-scroll on a 7-item TOC is a vestibular
   trigger (WCAG 2.3.3) and was previously not opt-out-able. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader-only text */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ---------- worksheet hub listing ---------- */
/* The level chooser sits above both columns so Secondary 5 is reachable without
   scrolling past seventeen Secondary 4 links on a narrow screen. */
.lvlpick { display: grid; gap: .75rem; margin: 1.75rem 0 2.25rem; }
@media (min-width: 560px) { .lvlpick { grid-template-columns: 1fr 1fr; } }
.lvlpick a {
  display: block; padding: .95rem 1.1rem; text-decoration: none;
  border: 1px solid var(--slate-200); border-left: 3px solid var(--teal-700);
  border-radius: var(--r-sm); background: var(--cream); transition: all .15s;
}
.lvlpick a:hover { border-color: var(--teal-700); background: var(--teal-050); }
.lvlpick b { display: block; font-family: var(--serif); color: var(--navy); font-size: 1.05rem; }
.lvlpick span { font-size: .8rem; color: var(--slate-500); }

.hubcols { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .hubcols { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; } }
/* Clears the fixed header (7.5rem) so a jump to #secondary-5 does not land the
   heading behind the navbar. */
.hubcol { scroll-margin-top: 8.5rem; }
.hubcol > h2 { font-size: 1.3rem; margin: 0 0 .1rem; }
.hubcol-meta { font-size: .8rem; margin: 0 0 1rem; }
.hubcol-meta a { color: var(--link); font-weight: 600; text-decoration: none; }
.hubcol-meta a:hover { text-decoration: underline; }
.hubcol h3 {
  font-family: var(--sans); font-size: .7rem; font-weight: 700; color: var(--teal-700);
  text-transform: uppercase; letter-spacing: .08em; margin: 1.5rem 0 .3rem;
}
.hubcol ul { list-style: none; margin: 0; padding: 0; }
.hubcol li { border-bottom: 1px solid var(--slate-100); }
.hubcol li a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .5rem 0; text-decoration: none; color: var(--navy); font-size: .9rem;
}
.hubcol li a:hover { color: var(--link); }
.hubcol .ws-n { font-size: .74rem; color: var(--slate-500); white-space: nowrap;
  font-variant-numeric: tabular-nums; }


/* ---------- contact form (.cform) ---------- */
/* Hand-written, not Tailwind utilities, for the same reason .navdrop is:
   site.css is Tailwind AS COMPILED FOR THE ONE-PAGE SITE, so any utility the
   home page never used was never generated. The first cut of this form used
   thirteen such classes -- bg-white/10, sm:grid-cols-2, focus:ring-2,
   left-[-9999px] and others -- and shipped as unstyled browser inputs on the
   navy ground with the honeypot in plain sight. Utilities here must already
   exist in the compiled sheet; anything new belongs in this file.

   Sits on the navy contact section, so every colour is light-on-dark. */
.cform { display: grid; gap: 1rem; }
.cform-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cform-row { grid-template-columns: 1fr 1fr; } }

.cform label {
  display: block; font-size: .82rem; color: var(--slate-200);
  margin-bottom: .4rem; font-weight: 500;
}
.cform label .opt { color: var(--slate-400); font-weight: 400; }

.cform input, .cform select, .cform textarea {
  width: 100%; display: block;
  padding: .75rem 1rem;
  font: inherit; font-size: .95rem; line-height: 1.4;
  color: #fff;
  background: rgb(255 255 255 / .08);
  border: 1px solid var(--slate-600);
  border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.cform textarea { resize: vertical; min-height: 6.5rem; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--slate-400); }

.cform input:hover, .cform select:hover, .cform textarea:hover {
  background: rgb(255 255 255 / .12);
}
/* Visible keyboard focus: the utility version relied on focus:ring-2, which was
   never compiled, so the form had no focus indicator at all. */
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(20 184 166 / .35);
  background: rgb(255 255 255 / .12);
}
/* The dropdown list itself renders on the OS's own white surface, so its
   options need dark text -- inheriting the field's white would erase them. */
.cform select option { color: var(--navy); background: #fff; }
.cform select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  background-size: .65rem; padding-right: 2.5rem;
}

.cform button {
  width: 100%; padding: .9rem 2rem; margin-top: .25rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  color: #fff; background: var(--teal-700);
  border: 0; border-radius: 9999px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.cform button:hover { background: var(--teal-600); }
.cform button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.cform button:active { transform: translateY(1px); }

.cform-note { font-size: .75rem; color: var(--slate-400); text-align: center; margin: 0; }

/* The honeypot. Not display:none -- a bot that reads styles skips those; this
   stays in the layout and off the canvas. THIS is the rule whose absence put
   "Leave this field empty:" on the live page. */
.cform-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

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

/* ---------- 404 (design C: "solution not found") ---------- */
/* A full-bleed dark panel sitting between the light header and the already-dark
   footer, so the page reads as one deliberate object rather than a light page
   with a hole in it. Put .nf directly in <main> and .wrap INSIDE it -- .wrap
   constrains width, so a .nf nested in it could not bleed.
   The colour on .nf h1 beats base.css's heading reset because that reset's
   colour claim is deliberately :where()-wrapped at zero specificity. */
.nf { background: var(--navy); padding: clamp(3rem, 8vw, 6rem) 0; }
.nf .wrap { max-width: 46rem; }
.nf-eq { font-family: var(--serif); font-weight: 900; color: #5eead4;
         font-size: clamp(1.6rem, 5.5vw, 2.6rem); line-height: 1.1; margin: 0 0 .35rem; }
/* colour, not just size: site.css carries a bare `math { color: var(--navy) }`
   for worksheet prose, and a DECLARED rule beats an INHERITED value however
   specific the inheriting parent is. .nf-eq set teal on the <p>; the <math>
   inside took navy from that element rule and rendered navy-on-navy, invisible.
   Same failure family as the h1 and the footer link -- a value that was set,
   just not where the cascade actually reads it. */
.nf-eq math { font-size: 1em; color: #5eead4; }
.nf-disc { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: .85rem; color: #94a3b8; margin: 0 0 1.7rem; }
.nf h1 { color: #f8fafc; font-size: clamp(1.5rem, 4.2vw, 2.15rem);
         line-height: 1.2; margin: 0 0 .85rem; }
.nf p.nf-sub { color: #94a3b8; max-width: 46ch; margin: 0; }
.nf-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.nf .btn-ghost { background: transparent; color: #99f6e4; border: 1px solid #334155; }
.nf .btn-ghost:hover { border-color: #5eead4; color: #5eead4; }

/* ---------- footer legal line / privacy links ---------- */
/* `.underline` and `.mx-2` are NOT in the precompiled Tailwind bundle: only the
   utilities the home page already used were ever compiled, so a class invented
   later silently does nothing. The footer privacy link shipped looking exactly
   like the copyright text beside it. Styled here, where it cannot not-exist. */
.footer-legal a { color: #cbd5e1; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: #5eead4; }
.footer-legal .sep { margin: 0 .45rem; color: #64748b; }
/* The note under the contact form's submit button. This is the point of
   COLLECTION, which is where a privacy notice actually has to be. */
.cform-note a { color: #5eead4; text-decoration: underline; text-underline-offset: 2px; }
.cform-note a:hover { color: #99f6e4; }

/* ---------- top-bar emphasis: Free Worksheets (dark pill + count) ---------- */
/* The bar already had exactly one loud element, the teal Get Started pill. This
   is a second one differentiated by HUE rather than by volume, so the two read
   as different kinds of action rather than as a ranking. The count rides inside
   the pill because the number is the actual argument for clicking; it comes
   from the manifest via n_sets_total and cannot go stale.

   Written here rather than as Tailwind utilities: only the classes the home page
   already used were ever compiled into site.css, so a utility invented now does
   nothing at all. The selectors are doubled up on .navdrop > a because that rule
   sets display/align/gap at (0,1,1) and would otherwise win on gap. */
.navdrop > a.nav-ws, a.nav-ws {
  background: var(--navy); color: #fff; border-radius: 999px;
  padding: .6rem 1rem; font-weight: 600; gap: .45rem;
  display: inline-flex; align-items: center; transition: background-color .15s;
}
.navdrop > a.nav-ws:hover, .navdrop > a.nav-ws:focus-visible,
a.nav-ws:hover, a.nav-ws:focus-visible { background: #1e293b; color: #fff; }
/* Current-page state. The pill is already the loudest thing in the bar, so this
   is a ring rather than yet more weight. --teal is the decorative one and that
   is exactly what a non-text ring may use. */
a.nav-ws[aria-current="page"] { box-shadow: 0 0 0 2px var(--teal); }
/* #115e59 and not --link (#0f766e): at 11px the chip is small text and needs
   4.5:1. On #ccfbf1 the lighter teal lands at 4.6:1 -- passing, but with no
   margin for a future tint change. This one is 6.0:1. */
.nav-ws-chip {
  background: #ccfbf1; color: #115e59; border-radius: .3rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .1rem .4rem; line-height: 1.55;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The mobile twin. Most of this traffic is on a phone, so this is not the
   afterthought version -- the same object, laid out as a row. */
a.nav-ws-m {
  background: var(--navy); color: #fff; border-radius: 999px;
  padding: .75rem 1rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
a.nav-ws-m:hover, a.nav-ws-m:focus-visible { background: #1e293b; color: #fff; }

/* ---------- consent banner (Google Ads opt-in) ---------- */
/* Injected by partials/consent.html.j2 as the first child of <body>, so these
   rules must stand on their own: they land on the home page (Tailwind preflight)
   and on <body class="ws"> (base.css resets) alike, and neither owns them.
   Every colour is declared on the element that renders the text -- none is
   inherited -- because a banner that appears over two different page grounds is
   exactly where an inherited colour goes invisible.

   Refusing has to be as easy as accepting for the consent to be valid under
   Law 25, so the two buttons are one size, one weight and one row. The teal
   carries which one is the suggestion; it does not carry the only affordance. */
.tim-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; color: var(--slate);
  border-top: 3px solid var(--navy);
  box-shadow: 0 -10px 15px -3px rgb(0 0 0 / .1);
  font-family: var(--sans); font-size: .9rem; line-height: 1.55;
}
.tim-consent-in {
  max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.tim-consent-txt { margin: 0; flex: 1 1 22rem; color: var(--slate); }
.tim-consent-txt strong { color: var(--navy); font-weight: 700; }
/* --link, not --teal: this is small body text on white and needs 4.5:1. */
.tim-consent-txt a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.tim-consent-txt a:hover { color: var(--navy); }
.tim-consent-act { display: flex; gap: .75rem; flex: 0 0 auto; }
.tim-consent-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .6rem 1.35rem; border-radius: 999px;
  border: 2px solid var(--navy); background: #fff; color: var(--navy);
  transition: background-color .15s, color .15s;
}
.tim-consent-btn:hover { background: var(--slate-100); color: var(--navy); }
.tim-consent-yes { border-color: var(--teal-700); background: var(--teal-700); color: #fff; }
.tim-consent-yes:hover { background: #115e59; color: #fff; }
.tim-consent-btn:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; }
@media (max-width: 640px) {
  .tim-consent-in { padding: .9rem 1.1rem; gap: .85rem; }
  .tim-consent-act { width: 100%; }
  /* Equal width on a phone, or the wider button becomes the easier one. */
  .tim-consent-btn { flex: 1 1 0; padding: .7rem .5rem; }
}
/* These are printable worksheets and a print is a tracked engagement signal --
   a consent bar across the bottom of a student's printout would be the one bug
   every visitor sees. */
@media print { .tim-consent { display: none !important; } }

/* The withdrawal control in the footer. A <button>, because it opens the banner
   rather than navigating -- so `.footer-legal a` above does not reach it and the
   styling has to be restated. Same shape as that rule, deliberately: the two sit
   side by side and a mismatch reads as one of them being broken. */
.footer-legal button {
  font: inherit; padding: 0; border: 0; background: none; cursor: pointer;
  color: #cbd5e1; text-decoration: underline; text-underline-offset: 2px;
}
.footer-legal button:hover { color: #5eead4; }

/* ---------- the floating WhatsApp button ---------- */
/* The site's answer to a live-chat widget, and deliberately not one: a hosted
   widget (Tawk.to, Crisp) means third-party JS, a cookie, a Law 25 consent gate
   and ~200 KB on a site that self-hosts its fonts to save one DNS handshake.
   This is a plain <a> in the bottom-right corner -- the position people read as
   "chat" -- that opens the WhatsApp thread the tutor actually answers on. Zero
   JS, zero cookies, no availability promise the site cannot keep.

   Included from site-footer.html.j2, so it lands on the 122 pages that have a
   footer and on neither /contact/ document -- those two ARE the destination.

   Colour: --green-700, not --green. #22c55e is 2.28:1 on white; a pill with a
   visible label needs 4.5:1 and #15803d is 5.02:1. The token has carried that
   note since it was defined -- the Tailwind bg-green-500 CTAs elsewhere have
   not migrated to it yet.

   Every colour is declared here, none inherited: this element lands on the home
   page (Tailwind preflight) and on <body class="ws"> (the resets above) alike,
   and neither owns it. */
.wa-bubble {
  position: fixed; right: 1.5rem; bottom: 1.5rem;
  /* Below .tim-consent (60) so it can never sit over Accept/Decline -- a
     consent choice obscured by a CTA is not freely given -- and below .d5-bar
     (50), which it is moved clear of rather than layered against. */
  z-index: 45;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.25rem; border-radius: 999px;
  background: var(--green-700); color: #fff;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgb(21 128 61 / .35), 0 4px 6px -4px rgb(15 23 42 / .3);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.wa-bubble:hover {
  background: var(--green-800); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 20px -4px rgb(21 128 61 / .4), 0 6px 8px -4px rgb(15 23 42 / .3);
}
/* Navy, not the green: the ring is drawn on the page ground, not on the pill. */
.wa-bubble:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.wa-bubble-ico { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: currentColor; }

/* Phone: a circle. The label is the first thing to go -- at this width the
   thumb needs the corner more than the sentence does, and the logo is not
   ambiguous. 3.5rem clears the 44px minimum target either way. */
@media (max-width: 639px) {
  .wa-bubble { padding: 0; width: 3.5rem; height: 3.5rem; justify-content: center; gap: 0; }
  .wa-bubble-txt { display: none; }
  .wa-bubble-ico { width: 1.75rem; height: 1.75rem; }
}

/* Worksheet pages carry .d5-bar across the bottom below 1080px. It slides in on
   scroll, so the bubble is parked above its resting height unconditionally
   rather than moved in response -- a bubble that jumps when the bar arrives is
   worse than one sitting 2 rem high while it is away. */
@media (max-width: 1079px) {
  body.ws .wa-bubble { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* Same reason .tim-consent hides: these are printable worksheets and a print is
   a tracked engagement signal. A green pill baked into a student's homework is
   the one bug every visitor would see. */
@media print { .wa-bubble { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .wa-bubble, .wa-bubble:hover { transition: none; transform: none; }
}

/* --- 7. worksheet page blocks (already namespaced d5-/d6-) --- */
/* ==========================================================================
   Design 6 — Design 5's spine, rebuilt for 4 PDFs per set
   Value ladder: free questions on page → free PDF → free explanations → paid pack
   ========================================================================== */

/* ---------- series context strip ---------- */
.d5-series { background: var(--cream); border-bottom: 1px solid var(--slate-200); padding: .85rem 0 .8rem; }
.d5-series .inner { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.d5-series .label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); white-space: nowrap; }
.d5-series .label b { color: var(--teal-600); }
.d5-rail { display: flex; gap: .3rem; flex: 1; min-width: 12rem; }
.d5-rail a { position: relative; flex: 1; height: .3rem; border-radius: 999px; background: var(--slate-200); transition: background .15s; }
.d5-rail a::after { content: ""; position: absolute; inset: -11px 0; }   /* WCAG 2.5.8 target size */
.d5-rail a:hover { background: var(--slate-400); }
.d5-rail a[aria-current="step"] { background: var(--teal); }
.d5-series .allink { font-size: .8125rem; font-weight: 600; color: var(--link); text-decoration: none; white-space: nowrap; }
.d5-series .allink:hover { text-decoration: underline; }

/* ---------- layout ---------- */
.d5-grid { display: grid; gap: 3rem; padding-top: 1.75rem; }
.lead, .d5-sec > p, .d5-sec > h2, .d5-sec > h3, .d5-sec > h4,
.d5-sec > ul, .d5-sec > ol, .d5-callout, .d5-faq { max-width: 40rem; }
@media (min-width: 1080px) { .d5-grid { grid-template-columns: minmax(0,1fr) 18.5rem; gap: 4rem; align-items: start; } }

h1.d5-title { font-size: clamp(2rem, 4.4vw, 2.85rem); font-weight: 900; letter-spacing: -.022em; margin: .7rem 0 .75rem; }
.d5-byline { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; max-width: 40rem; }
.d5-byline a { color: var(--link); font-weight: 600; }
.d5-byline span { white-space: nowrap; }
.d5-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- free download, above the fold ---------- */
.d5-grab {
  display: grid; gap: 1.5rem; align-items: center;
  background: linear-gradient(135deg, #fff 0%, var(--teal-050) 100%);
  border: 1px solid var(--teal); box-shadow: 0 0 0 4px rgb(20 184 166 / .07);
  border-radius: var(--r-xl); padding: 1.5rem; margin: 2rem 0 3.25rem;
}
@media (min-width: 620px) { .d5-grab { grid-template-columns: 10rem minmax(0,1fr); } }
@media (max-width: 619px) { .d5-grab { grid-template-columns: 4.75rem minmax(0,1fr); gap: 1rem; align-items: start; } }
.d5-grab img { border-radius: var(--r-sm); border: 1px solid var(--slate-200); }
.d5-grab h2 { font-size: 1.2rem; margin-bottom: .3rem; }
.d5-grab .facts { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8125rem; color: var(--slate-500); margin-bottom: 1rem; }
.d5-grab .facts span { display: flex; align-items: center; gap: .35rem; }
.d5-grab .facts svg { width: .95rem; height: .95rem; color: var(--teal); flex: none; }
.d5-grab .row { display: flex; flex-wrap: wrap; gap: .75rem; }
.d5-nostrings { font-size: .75rem; color: var(--slate-500); margin: .85rem 0 0; }

/* ---------- article sections ---------- */
section.d5-sec { scroll-margin-top: 5.5rem; margin-bottom: 3.5rem; }
section.d5-sec > h2 { font-size: 1.65rem; margin-bottom: .9rem; letter-spacing: -.015em; }
section.d5-sec > h3 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
section.d5-sec > h4 { font-size: .95rem; margin: 1.35rem 0 .35rem; font-family: var(--sans); font-weight: 700; color: var(--navy); }
.d5-sec p, .d5-sec li { color: var(--slate-600); }
.d5-sec em { color: var(--navy); font-style: italic; }

/* ==========================================================================
   NEW IN DESIGN 6 — the questions themselves, as indexable HTML

   Production note: these blocks are generated, never re-typed. The source is
   worksheets/_fragments/<level>/<slug>.tex — the same file build.py stitches
   into all four PDFs. Take the \Q{...} bodies only (\Qq is the paid challenge
   set, \A is the paid key), run each through latexml --profile=fragment, and
   the $...$ / \[...\] segments come out as MathML. \sheet{} above each \Q is
   the concept label; \begin{parts} becomes <ol class="parts">; \ws{} is print
   spacing and is dropped. Nothing here needs a per-page author.

   Fractions and anything genuinely two-dimensional render as <math>; linear
   expressions use .expr, which is plain text a search engine reads as written.
   ========================================================================== */
.d6-qs { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0; max-width: 42rem; }
.d6-q { border-top: 1px solid var(--slate-200); padding: 1.35rem 0; display: grid; gap: .1rem; scroll-margin-top: 5.5rem; }
.d6-q:last-child { border-bottom: 1px solid var(--slate-200); }
.d6-q-hd { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .45rem; }
.d6-qn {
  flex: none; font-family: var(--sans); font-weight: 800; font-size: .78rem; color: var(--link);
  background: var(--teal-050); border-radius: .35rem; padding: .18rem .5rem; letter-spacing: .02em;
}
.d6-qc { font-family: var(--sans); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); }
.d6-q p.ask { margin: 0; color: var(--navy); font-size: .95rem; }
.d6-q p.does { margin: .5rem 0 0; font-size: .85rem; color: var(--slate-500); }
.d6-q ol.parts { margin: .5rem 0 0 1.1rem; padding: 0; font-size: .92rem; color: var(--navy); }
.d6-q ol.parts li { margin: .18rem 0; color: var(--navy); }
.d6-q.synth { background: var(--amber-050); padding-inline: 1.1rem; border-radius: var(--r-sm); }
.d6-q.synth .d6-qn { background: #fff; color: var(--amber); }

/* linear expressions: real text, styled to read as math */
.expr { font-family: "Cambria Math", Cambria, Georgia, serif; font-style: italic; font-size: 1.06em; color: var(--navy); white-space: nowrap; }
.expr sup { font-style: normal; }
math { font-size: 1.05em; color: var(--navy); }
/* Must be the two-value `block math`, not plain `block`: a bare display:block
   swaps MathML's internal layout for CSS block layout, which stacks the
   fractions and operators of a multi-term expression vertically. */
math[display="block"] { display: block math; margin: .55rem 0; }
.d6-mathwrap { overflow-x: auto; }

.d6-qnote { font-size: .8125rem; color: var(--slate-500); margin-top: 1.1rem; max-width: 42rem; }

/* ---------- the factoring decision tree — the page's signature block ---------- */
.d5-tree { border: 1px solid var(--slate-200); border-radius: var(--r-lg); overflow: hidden; margin: 1.5rem 0; }
.d5-tree > header { background: var(--navy); color: #fff; padding: .85rem 1.15rem; }
.d5-tree > header h3 { font-family: var(--serif); font-size: .95rem; color: #fff; margin: 0; }
.d5-tree > header p { margin: .15rem 0 0; font-size: .78rem; color: #cbd5e1; }
.d5-tree ol { list-style: none; margin: 0; padding: 0; }
.d5-tree li { display: flex; gap: .9rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--slate-100); }
.d5-tree li:last-child { border-bottom: 0; }
.d5-tree .step { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--teal-050); color: var(--link); font-size: .75rem; font-weight: 800; display: grid; place-items: center; margin-top: .1rem; }
.d5-tree li b { color: var(--navy); font-weight: 600; }
.d5-tree li p { margin: .15rem 0 0; font-size: .875rem; }
.d5-tree code { background: var(--slate-100); border-radius: .25rem; padding: .05rem .35rem; font-size: .85em; color: var(--navy); font-family: ui-monospace, Consolas, monospace; }

.d5-callout { border-left: 4px solid var(--teal); background: var(--teal-050); padding: 1.1rem 1.3rem; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 1.5rem 0; }
.d5-callout p:last-child { margin-bottom: 0; }
.d5-callout.warn { border-left-color: var(--amber); background: var(--amber-050); }
.d5-eq { display: block; background: var(--cream); border: 1px solid var(--slate-200); border-radius: .45rem; padding: .55rem .85rem; margin: .4rem 0; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: var(--navy); overflow-x: auto; }

/* ---------- worksheet preview: 6 pages ---------- */
.d5-pages { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-top: 1.25rem; max-width: 38rem; }
@media (max-width: 640px) { .d5-pages { grid-template-columns: repeat(3, 1fr); max-width: 21rem; gap: .75rem; } }
.d5-pages figure { margin: 0; }
.d5-pages img { width: 100%; height: auto; aspect-ratio: 850 / 1100; border-radius: .35rem; border: 1px solid var(--slate-200); transition: transform .2s, box-shadow .2s; }
.d5-pages a:hover img { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.d5-pages figcaption { font-size: .66rem; color: var(--slate-500); text-align: center; margin-top: .4rem; }

/* ---------- video ---------- */
.d5-video { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 720px) { .d5-video { grid-template-columns: 20rem minmax(0,1fr); } }
.d5-video .yt { aspect-ratio: 16/10; border-radius: var(--r-md); }
.d5-video .yt-play { width: 3rem; height: 3rem; margin-bottom: .6rem; }
.d5-video .yt-play svg { width: 1.15rem; height: 1.15rem; }
.d5-video .yt h3 { font-size: .95rem; }
.d5-video .yt p { font-size: .78rem; }

/* ---------- paid pack ---------- */
.d5-offer { border-top: 1px solid var(--slate-200); padding-top: 2.75rem; margin-top: 1rem; }
.d5-offer > p.intro { max-width: 42rem; }
.d5-pack {
  border: 1px solid var(--slate-200); border-radius: var(--r-xl); background: #fff;
  padding: 1.5rem; margin-top: 1.5rem; display: grid; gap: 1.5rem; align-items: center;
  transition: border-color .2s, box-shadow .2s;
}
.d5-pack:hover { border-color: var(--teal); box-shadow: var(--sh-lg); }
@media (min-width: 760px) { .d5-pack { grid-template-columns: 10.5rem minmax(0,1fr) auto; gap: 1.75rem; } }

/* THREE locked PDFs now, fanned — was two in design 5 */
.d5-pack-art { display: none; position: relative; height: 11rem; }
@media (min-width: 760px) { .d5-pack-art { display: block; } }
.d5-pack-art .locked-art { position: absolute; top: 0; display: block; width: 5.9rem; }
.d5-pack-art .locked-art img { width: 100%; height: auto; aspect-ratio: 850/1100; border: 1px solid var(--slate-200); border-radius: .3rem; }
.d5-pack-art .lock-badge {
  position: absolute; inset: auto 0 0 0; text-align: center;
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: #fff; padding: .3rem .1rem; text-shadow: 0 1px 3px rgb(15 23 42 / .95);
  background: linear-gradient(to top, rgb(15 23 42 / .78), transparent);
  border-radius: 0 0 .3rem .3rem;
}
.d5-pack-art .a1 { left: 0;      transform: rotate(-6deg); z-index: 3; box-shadow: var(--sh-md); }
.d5-pack-art .a2 { left: 1.9rem; top: .45rem; transform: rotate(1deg);  z-index: 2; box-shadow: var(--sh-md); }
.d5-pack-art .a3 { left: 3.8rem; top: .9rem;  transform: rotate(7deg);  z-index: 1; box-shadow: var(--sh-sm); }

.d5-pack-body h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.d5-pack-sub { font-size: .85rem; color: var(--slate-500); margin: 0 0 .9rem; }
.d5-pack-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.d5-pack-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; color: var(--slate-600); }
.d5-pack-list svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--teal); margin-top: .2rem; }
.d5-pack-list b { color: var(--navy); font-weight: 600; }

.d5-pack-buy { display: grid; gap: .7rem; justify-items: start; }
@media (min-width: 760px) { .d5-pack-buy { justify-items: center; text-align: center; border-left: 1px solid var(--slate-100); padding-left: 1.75rem; } }
/* No per-topic price any more — the card states where these three PDFs live
   and hands off to the one product on the page. */
.d5-pack-inbundle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--teal-050); color: var(--link); border: 1px solid var(--teal-100);
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 999px;
}
.d5-pack-inbundle svg { width: .95rem; height: .95rem; flex: none; }
.d5-pack-buy .btn { white-space: nowrap; }
.d5-pack-note { font-size: .75rem; color: var(--muted); }

/* ---------- the two proof samples (new) ---------- */
.d6-samples { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 860px) { .d6-samples { grid-template-columns: 1fr 1fr; } }
.d5-sample { border: 1px solid var(--slate-200); border-radius: var(--r-lg); overflow: hidden; background: var(--cream); display: flex; flex-direction: column; }
.d5-sample .hd { padding: .8rem 1.15rem; background: #fff; border-bottom: 1px solid var(--slate-200); font-size: .8125rem; font-weight: 700; color: var(--navy); display: flex; gap: .6rem; align-items: center; }
.d5-sample .hd .tag { font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 999px; background: var(--slate-100); color: var(--slate-500); flex: none; }
.d5-sample .hd .tag.ch { background: var(--amber-050); color: var(--amber); }
.d5-sample .bd { padding: 1.15rem; font-size: .875rem; }
.d5-sample .bd p { color: var(--slate-600); }
.d5-sample .bd p:last-child { margin-bottom: 0; }

/* ---------- bundle ---------- */
.d5-course {
  position: relative; margin-top: 1.5rem; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(125deg, var(--navy) 0%, #1e3a8a 62%, #155e75 100%);
  color: #fff; padding: 2rem 1.75rem 1.75rem; box-shadow: 0 22px 40px -16px rgb(15 23 42 / .45);
}
.d5-course::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 22px 22px; }
.d5-course > * { position: relative; z-index: 1; }
.d5-course-badge { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: var(--navy); font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px; margin-bottom: .9rem; }
.d5-course-badge svg { width: .85rem; height: .85rem; color: var(--teal-600); }
.d5-course h3 { color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: .4rem; letter-spacing: -.015em; }
.d5-course .lede { color: rgb(255 255 255 / .93); font-size: .95rem; margin-bottom: 1.5rem; max-width: 34rem; }
.d5-course-split { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 760px) { .d5-course-split { grid-template-columns: minmax(0,1fr) 15rem; gap: 2.25rem; } }
.d5-maths { display: grid; gap: .5rem; font-size: .875rem; }
.d5-maths .row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; color: rgb(255 255 255 / .9); }
.d5-maths .row b { font-weight: 600; color: rgb(255 255 255 / .95); font-variant-numeric: tabular-nums; }
.d5-maths .row.strike b { text-decoration: line-through; text-decoration-thickness: 2px; color: rgb(255 255 255 / .82); }
.d5-maths .row.total { border-top: 1px solid rgb(255 255 255 / .28); padding-top: .6rem; margin-top: .2rem; color: #fff; font-weight: 700; }
.d5-maths .row.total b { font-size: 1.05rem; color: #5eead4; }
.d5-course-list { list-style: none; padding: 0; margin: 1.35rem 0 0; display: grid; gap: .45rem; }
.d5-course-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .875rem; color: rgb(255 255 255 / .93); }
.d5-course-list svg { flex: none; width: 1rem; height: 1rem; color: #5eead4; margin-top: .2rem; }
.d5-course-buy { background: rgb(15 23 42 / .38); border: 1px solid rgb(255 255 255 / .28); border-radius: var(--r-lg); padding: 1.35rem; text-align: center; display: grid; gap: .75rem; justify-items: center; backdrop-filter: blur(6px); }
.d5-course-alt { font-size: .8rem; color: rgb(255 255 255 / .88); }
.d5-course-price { font-family: var(--sans); font-weight: 900; font-size: 2.6rem; line-height: 1; color: #fff; letter-spacing: -.03em; }
.d5-course-price small { display: block; font-size: .75rem; font-weight: 700; color: rgb(255 255 255 / .88); letter-spacing: .09em; text-transform: uppercase; margin-top: .35rem; }
.d5-course-buy .btn { width: 100%; background: #fff; color: var(--navy); box-shadow: 0 10px 20px -8px rgb(0 0 0 / .5); }
.d5-course-buy .btn:hover { background: #5eead4; color: var(--navy); }
.d5-course-per { font-size: .8rem; color: rgb(255 255 255 / .9); }
.d5-or { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.d5-or::before, .d5-or::after { content: ""; height: 1px; background: var(--slate-200); flex: 1; }

/* ---------- FAQ / prev-next / sidebar / mobile bar ---------- */
.d5-faq { border-top: 1px solid var(--slate-200); }
.d5-faq details { border-bottom: 1px solid var(--slate-200); padding: 1rem 0; }
.d5-faq summary { font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.d5-faq summary::-webkit-details-marker { display: none; }
.d5-faq summary::after { content: "+"; color: var(--teal); font-size: 1.3rem; line-height: 1; }
.d5-faq details[open] summary::after { content: "–"; }
.d5-faq p { margin: .7rem 0 0; }

.d5-pn { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .d5-pn { grid-template-columns: 1fr 1fr; } }
.d5-pn a, .d5-pn .dis { border: 1px solid var(--slate-200); border-radius: var(--r-lg); padding: 1rem 1.25rem; text-decoration: none; display: block; transition: all .15s; }
.d5-pn a:hover { border-color: var(--teal); background: var(--teal-050); }
.d5-pn small { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.d5-pn b { font-family: var(--serif); color: var(--navy); font-size: .95rem; }
.d5-pn .nx { text-align: right; }
.d5-pn .dis { background: var(--cream); color: var(--muted); }

.d5-inline { margin: 3rem 0; }
@media (min-width: 1080px) { .d5-inline { display: none; } }
.d5-inline-cta { background: var(--cream); border: 1px solid var(--slate-200); border-radius: var(--r-lg); padding: 1.35rem; display: grid; gap: 1rem; }
@media (min-width: 560px) { .d5-inline-cta { grid-template-columns: minmax(0,1fr) auto; align-items: center; } }
.d5-inline-cta p { margin: 0; }
.d5-inline-series ol { list-style: none; padding: 0; margin: .85rem 0 0; display: grid; gap: .4rem; }
@media (min-width: 560px) { .d5-inline-series ol { grid-template-columns: 1fr 1fr; } }
.d5-inline-series a { display: flex; gap: .6rem; padding: .55rem .8rem; border: 1px solid var(--slate-200); border-radius: .5rem; text-decoration: none; font-size: .85rem; color: var(--navy); }
.d5-inline-series a:hover { border-color: var(--teal-700); background: var(--teal-050); }
.d5-inline-series a[aria-current="page"] { background: var(--teal-050); border-color: var(--teal-700); font-weight: 700; }
.d5-inline-series .num { color: var(--muted); font-weight: 700; }

.d5-side { display: none; }
@media (min-width: 1080px) { .d5-side { display: block; position: sticky; top: 5.5rem; } }
.d5-sidehead { font-size: .72rem; margin: 0 0 .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); font-family: var(--sans); }
.d5-toc { list-style: none; padding: 0; margin: 0 0 2rem; border-left: 2px solid var(--slate-200); }
.d5-toc a { display: block; padding: .38rem 0 .38rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .85rem; color: var(--slate-600); text-decoration: none; }
.d5-toc a:hover, .d5-toc a.on { color: var(--link); border-left-color: var(--teal-700); }
.d5-sidelist { border: 1px solid var(--slate-200); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.25rem; }
.d5-sidelist header { background: var(--cream); padding: .8rem 1rem; border-bottom: 1px solid var(--slate-200); }
.d5-sidelist header h3 { font-family: var(--serif); color: var(--navy); font-size: .9rem; margin: 0; }
.d5-sidelist header p { margin: .1rem 0 0; font-size: .72rem; color: var(--slate-500); }
.d5-sidelist ol { list-style: none; margin: 0; padding: .35rem; max-height: 21rem; overflow-y: auto; }
.d5-sidelist a { display: flex; gap: .6rem; align-items: center; padding: .42rem .65rem; border-radius: .4rem; font-size: .8125rem; color: var(--slate-600); text-decoration: none; }
.d5-sidelist a .num { font-size: .75rem; font-weight: 700; color: var(--muted); flex: none; }
.d5-sidelist a:hover { background: var(--cream); color: var(--navy); }
.d5-sidelist a[aria-current="page"] { background: var(--teal-050); color: var(--link); font-weight: 700; }
.d5-sidelist a[aria-current="page"] .num { color: var(--teal-700); }
.d5-sidecta { background: var(--cream); border: 1px solid var(--slate-200); border-radius: var(--r-lg); padding: 1.15rem; }

.d5-bar {
  position: fixed; inset: auto 0 0 0; z-index: 50; background: rgb(255 255 255 / .97);
  border-top: 1px solid var(--slate-200); backdrop-filter: blur(12px);
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgb(15 23 42 / .08); display: flex; gap: .75rem; align-items: center;
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.d5-bar.show { transform: translateY(0); visibility: visible; }
@media (max-width: 1079px) { body { padding-bottom: 5rem; } }
.d5-bar .btn { flex: 1; padding: .7rem 1rem; font-size: .9rem; }
@media (min-width: 1080px) { .d5-bar { display: none; } }

/* ---------- CTA button pairs (contact + rates) ---------- */
.d6-ctabtns { display: grid; gap: .5rem; }
@media (min-width: 560px) { .d5-inline-cta .d6-ctabtns { grid-auto-flow: column; } }
.d6-ctabtns .btn { justify-content: center; white-space: nowrap; }

/* --- 8. WCAG AA contrast corrections. LAST: these override Tailwind. --- */
/* ---- injected: icon sizing ---- */
svg.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:currentColor;flex-shrink:0}
svg.hidden{display:none}
/* ---- injected: utilities added at runtime by banner-dismiss JS ---- */
.pt-32{padding-top:8rem}
@media (min-width:1024px){.lg\:pt-48{padding-top:12rem}}
/* ---- injected: WCAG AA contrast fixes ---- */
.text-brand-teal{color:#0f766e}
.hover\:text-brand-teal:hover{color:#0f766e}
.bg-brand-teal{background-color:#0f766e}
.hover\:bg-teal-600:hover{background-color:#115e59}
.border-brand-teal{border-color:#0f766e}
.hover\:border-brand-teal:hover{border-color:#0f766e}
.bg-green-500{background-color:#15803d}
.hover\:bg-green-600:hover{background-color:#166534}
.text-slate-400{color:#64748b}
.bg-brand-navy .text-slate-400{color:#94a3b8}