/* Kmath sign-up path (get-started pages, 5 languages).
   Cream "paper and ink" system, same tokens as lib/brand.ts and the preview
   home page. Contrast (WCAG): ink on page 13.8, muted on page 5.3, muted on
   paper 5.8, navy on page 14.2, white on navy 16.0, error on paper 6.8,
   success on paper 6.4, placeholder #6B6F78 on white 5.0, input border
   #8C8574 on white 3.7 (non-text 3:1). Gold is only ever a border accent. */
:root{
  --page:#F4F1EA;--paper:#FFFDF8;--paper-deep:#F7F3EA;--line:#E3DCCD;--line-strong:#D6CDB9;
  --ink:#1F2430;--ink-soft:#3A3F4B;--muted:#5F6470;--navy:#0B1F4B;--navy-hover:#13306E;
  --gold:#E8A020;--gold-soft:#FBF1DC;--white:#FFFFFF;--field:#8C8574;
  --good:#1E6B45;--good-soft:#EAF4EC;--bad:#A3322A;--bad-soft:#FBEDEA;--sel:#EEF2FA;
  --read:'STIX Two Text',Georgia,'Times New Roman',serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.55 var(--ui);overflow-x:hidden}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.col{max-width:620px;margin:0 auto;padding:0 16px}

/* header, same as the preview home */
.top{border-bottom:1px solid var(--line);background:var(--page)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;flex-wrap:wrap}
.brand{font:700 21px/1 var(--ui);color:var(--navy);text-decoration:none;letter-spacing:-.01em;padding:12px 0;min-height:44px;display:inline-block}
.topr{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.langs{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.langs a{display:block;font:600 13px/1 var(--ui);color:var(--ink-soft);text-decoration:none;padding:15px 7px;min-width:34px;min-height:44px;text-align:center;border-radius:6px}
.langs a:hover{background:var(--paper-deep)}
.langs a[aria-current="page"]{background:var(--navy);color:var(--white)}
.signin{font:600 14px/1 var(--ui);color:var(--navy);text-decoration:none;padding:14px 10px;min-height:44px;display:inline-block;border-radius:6px}
.signin:hover{background:var(--paper-deep)}

/* step indicator */
.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:s}
.steps li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:500 13px/1.25 var(--ui);color:var(--muted);border-top:3px solid var(--line-strong);padding-top:8px}
.steps .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--field);font:600 13px/1 var(--ui);color:var(--muted);background:var(--paper)}
.steps li[aria-current="step"]{color:var(--navy);font-weight:600;border-top-color:var(--navy)}
.steps li[aria-current="step"] .n{background:var(--navy);border-color:var(--navy);color:var(--white)}
.steps li.done{color:var(--good);border-top-color:var(--good)}
.steps li.done .n{background:var(--good);border-color:var(--good);color:var(--white)}

/* intro */
.intro{padding:24px 0 8px}
.eyebrow{margin:0 0 8px;font:600 14px/1.35 var(--ui);color:var(--muted)}
h1{font:600 30px/1.15 var(--read);color:var(--navy);margin:0 0 10px;letter-spacing:-.01em}
.lead{margin:0 0 16px;font:400 17px/1.5 var(--ui);color:var(--ink-soft)}
.price{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin:0 0 8px;font:500 15px/1.5 var(--ui);color:var(--ink)}
.price strong{font-weight:700}
.codenote{display:none;background:var(--good-soft);border:1px solid #BFDCC7;border-radius:10px;padding:10px 14px;margin:8px 0 0;font:500 15px/1.45 var(--ui);color:var(--good)}
.codenote b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}

/* the card */
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 18px;margin:16px 0 0}
.card h2{font:600 22px/1.25 var(--read);color:var(--navy);margin:0 0 4px}
.card .hint{margin:0 0 18px;font:400 15px/1.5 var(--ui);color:var(--muted)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.f{margin:0 0 20px}
.f > label,.f legend{display:block;font:600 15px/1.35 var(--ui);color:var(--ink);margin:0 0 6px;padding:0}
.opt{font-weight:400;color:var(--muted)}
.help{display:block;margin:-2px 0 8px;font:400 14px/1.45 var(--ui);color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
input[type=text],input[type=email],input[type=tel],input[type=number]{width:100%;min-height:48px;padding:11px 14px;border-radius:10px;border:1.5px solid var(--field);background:var(--white);color:var(--ink);font:400 17px/1.3 var(--ui);-webkit-appearance:none;appearance:none}
input::placeholder{color:#6B6F78;opacity:1}
input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,75,.18)}
.f.err input[type=text],.f.err input[type=email],.f.err input[type=tel],.f.err input[type=number]{border-color:var(--bad)}
.e{display:none;margin:6px 0 0;font:500 14px/1.4 var(--ui);color:var(--bad)}
.f.err .e{display:block}

/* tap choices: real radios, drawn as pills */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pill span{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:52px;justify-content:center;padding:10px 16px;border-radius:10px;border:1.5px solid var(--field);background:var(--white);color:var(--ink);font:500 16px/1.2 var(--ui);cursor:pointer;user-select:none}
.pill input:checked + span{border:2px solid var(--navy);background:var(--sel);color:var(--navy);font-weight:700}
.pill input:focus-visible + span{outline:3px solid var(--navy);outline-offset:2px}
.pill input:disabled + span{cursor:not-allowed;background:var(--paper-deep);border-style:dashed;border-color:var(--line-strong);color:#6F6A5E}
.pill small{font:500 12px/1 var(--ui);color:#6F6A5E}
.f.err .pills .pill span{border-color:var(--bad)}
.f.err .pills .pill input:disabled + span{border-color:var(--line-strong)}

.cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cap .q{font:600 20px/1 var(--ui);color:var(--ink);min-width:72px}
.cap input{width:96px!important;text-align:center;font-weight:600}
.consent{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;cursor:pointer;font:400 15px/1.5 var(--ui);color:var(--ink-soft)}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--navy)}
.consent a{font-weight:600}
.f > label.consent{display:grid;font:400 15px/1.5 var(--ui);color:var(--ink-soft);margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:14px 24px;border:0;border-radius:10px;background:var(--navy);color:var(--white);font:600 17px/1.2 var(--ui);text-decoration:none;text-align:center;cursor:pointer}
.btn:hover{background:var(--navy-hover)}
.btn[disabled]{opacity:.7;cursor:wait}
.btn2{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 20px;border:1.5px solid var(--navy);border-radius:10px;background:transparent;color:var(--navy);font:600 16px/1.2 var(--ui);cursor:pointer;text-decoration:none}
.btn2:hover{background:var(--paper-deep)}
.under{margin:12px 0 0;text-align:center;font:400 14px/1.45 var(--ui);color:var(--muted)}
.formerr{display:none;margin:0 0 14px;background:var(--bad-soft);border:1px solid #E9C3BD;border-radius:10px;padding:10px 14px;font:500 15px/1.45 var(--ui);color:var(--bad)}

/* result panels */
.res{display:none}
.res .mark{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--good-soft);color:var(--good);margin:0 0 14px}
.res .mark svg{width:26px;height:26px}
.res .mark.warn{background:var(--gold-soft);color:#8A5A12}
.res .mark.bad{background:var(--bad-soft);color:var(--bad)}
.res p{margin:0 0 12px;font:400 16px/1.55 var(--ui);color:var(--ink-soft)}
.res p strong{color:var(--ink);word-break:break-all}
.res .box{background:var(--paper-deep);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0}
.res .box h3{margin:0 0 8px;font:600 15px/1.35 var(--ui);color:var(--ink)}
.res .note{background:var(--sel);border:1px solid #C9D3EA;border-radius:10px;padding:12px 14px;font:400 15px/1.5 var(--ui);color:var(--navy);margin:12px 0}
.res .actions{display:grid;gap:10px;margin-top:6px}
.res .ok{display:none;margin:8px 0 0;font:500 15px/1.4 var(--ui);color:var(--good)}

/* numbered list used for "what happens next" */
.nums{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:k}
.nums li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font:400 16px/1.5 var(--ui);color:var(--ink-soft);counter-increment:k}
.nums li::before{content:counter(k);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--white);font:600 14px/1 var(--ui)}
.nums li strong{color:var(--ink);font-weight:600}

/* lower sections */
.sec{padding:28px 0 0}
.sec h2{font:600 24px/1.2 var(--read);color:var(--navy);margin:0 0 14px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.plan .amt{font:600 30px/1 var(--read);color:var(--navy);margin:0 0 4px}
.plan .per{font:500 15px/1.4 var(--ui);color:var(--muted);margin:0 0 12px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:8px;font:400 15px/1.5 var(--ui);color:var(--ink-soft)}
.ticks li::before{content:"";width:16px;height:9px;border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);transform:rotate(-45deg);margin:6px 0 0 2px}
.small{font:400 14px/1.5 var(--ui);color:var(--muted);margin:12px 0 0}

footer{border-top:1px solid var(--line);margin-top:40px;padding:18px 0 28px;font:400 15px/1.5 var(--ui)}
footer ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:0 18px}
footer a{color:var(--ink-soft);display:inline-block;padding:10px 0;min-height:44px}
footer p{margin:0;color:var(--muted);font-size:14px}

.redir{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);color:var(--white);text-align:center;padding:14px 16px;font:600 16px/1.3 var(--ui)}

@media(min-width:640px){
  .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .card{padding:30px 32px}
  h1{font-size:38px}
  .intro{padding-top:32px}
  .res .actions{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .col{max-width:660px}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── v2 (Kelly 2026-10-01): photo band, form always open, short education ──
   Band: the home hero's crossfading photos and cream scrim, shorter. Text
   contrast over the photos is measured against the worst pixel under each
   line (see the verification notes in the commit). */
:root{--scrim:244,241,234}
.band{position:relative;overflow:hidden;background:var(--page);min-height:38vh;min-height:38svh;display:flex;align-items:flex-end}
.band-bg{position:absolute;inset:0}
.band-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--px,50%) 18%;opacity:0;transition:opacity 1.6s ease}
.band-bg img.on{opacity:1}
.band .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--scrim),.96) 0,rgba(var(--scrim),.94) calc(100% - 24svh),rgba(var(--scrim),.12) calc(100% - 4svh))}
.band-in{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:24svh 16px 18px}
.band .eyebrow{color:var(--ink)}
.band h1{margin-bottom:12px}
.pts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pts li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font:400 16px/1.45 var(--ui);color:var(--ink)}
.pts svg{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.pts strong{font-weight:600}
.fade-ctl{display:flex;align-items:center;gap:2px;position:absolute;z-index:2;top:10px;right:10px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:0 4px}
.fade-ctl button{color:var(--navy);background:transparent;border:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:999px}
.fade-ctl .dot{width:28px}
.fade-ctl svg{width:16px;height:16px}
.fade-ctl .fill{fill:currentColor}
.dot span{display:block;width:11px;height:11px;border-radius:50%;border:2px solid var(--muted)}
.dot[aria-current="true"] span{background:var(--navy);border-color:var(--navy)}

.lay{max-width:1200px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:minmax(0,1fr)}
.formcol{min-width:0;background:var(--sel);border:1px solid #C9D3E6;border-top:4px solid var(--gold);border-radius:14px;padding:20px 18px;margin-top:16px}  /* tinted so the form stands out from the cream page (Kelly 2026-10-02) */
.formcol > .card{background:none;border:0;border-radius:0;padding:0;margin:0}
.formcol .steps{margin:0 0 20px}
.formcol .codenote{margin:0 0 14px}
.edu{min-width:0}
.edu .sec{padding-top:32px}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.how li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px}
.how .ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--page);border:1px solid var(--line);margin:0 0 8px}
.how svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.how b{display:block;font:600 15px/1.3 var(--ui);color:var(--ink);margin:0 0 2px}
.how span{display:block;font:400 14px/1.4 var(--ui);color:var(--ink-soft)}
.shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.shots figcaption{font:500 14px/1.35 var(--ui);color:var(--muted);margin-top:6px}
.recal{margin:14px 0 0;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;font:600 15px/1.45 var(--ui);color:var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 0;font:600 16px/1.35 var(--ui);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--ui);color:var(--navy)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 14px;font:400 15px/1.55 var(--ui);color:var(--ink-soft)}

@media(min-width:1024px){
  .band{min-height:46vh;align-items:center}
  .band-bg img{left:var(--dx,22%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%);object-position:center 25%}
  .band .scrim{background:linear-gradient(90deg,rgba(var(--scrim),.96) 0%,rgba(var(--scrim),.93) 46%,rgba(var(--scrim),.15) 68%)}
  .band-in{padding:40px 16px 48px}
  .band-text{max-width:calc(100% - 560px)}
  .band h1{font-size:42px;line-height:1.1}
  .fade-ctl{top:14px;bottom:auto;left:auto;right:max(16px,calc((100vw - 1200px) / 2 + 12px))}
  .band-in{padding-bottom:72px}
  .lay{grid-template-columns:minmax(0,1fr) 500px;gap:0 56px;align-items:start}
  .formcol{grid-column:2;grid-row:1 / span 2;position:relative;z-index:3;margin-top:calc(-46vh + 28px);padding:26px 28px;box-shadow:0 12px 40px rgba(31,36,48,.14)}
  /* The form follows the reader down the page so the right column is never empty;
     a form taller than the window scrolls inside itself. */
  .formcol{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
  .edu{grid-column:1;grid-row:1}
  .how{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.band-bg img{transition:none}}

/* Shared site header (same as the home page, site_header.py). */
.km-head{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #E3DCCD}
.km-head .in{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:18px;min-height:62px}
.km-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#0B1F4B;flex-shrink:0}
.km-brand b{font-family:'STIX Two Text',Georgia,serif;font-size:23px;font-weight:700;letter-spacing:.01em}
.km-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.km-nav a{color:#1F2430;text-decoration:none;font:600 14.5px/1 Inter,system-ui,sans-serif;padding:10px 11px;border-radius:8px}
.km-nav a:hover{background:#FFFDF8}
.km-nav a.km-start{background:#0B1F4B;color:#FFFDF8;padding:11px 18px;margin-left:6px}
.km-nav a.km-start:hover{background:#13306E}
.km-lang{position:relative}
.km-lang select{appearance:none;-webkit-appearance:none;background:#FFFDF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231F2430' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid #D6CDB9;border-radius:8px;padding:9px 28px 9px 10px;font:600 13.5px Inter,system-ui,sans-serif;color:#1F2430;cursor:pointer;min-height:40px}
.km-burger{display:none;margin-left:auto;background:none;border:1px solid #D6CDB9;border-radius:8px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.km-burger span{display:block;width:20px;height:2px;background:#0B1F4B;margin:4px auto;border-radius:2px}
.km-drawer{position:fixed;inset:0;z-index:60;display:none}
.km-drawer.open{display:block}
.km-drawer .sh{position:absolute;inset:0;background:rgba(31,36,48,.45)}
.km-drawer .pn{position:absolute;top:0;right:0;height:100%;width:min(86vw,340px);background:#FFFDF8;padding:18px 18px 28px;display:flex;flex-direction:column;gap:4px;box-shadow:-8px 0 30px rgba(31,36,48,.18)}
.km-drawer .pn a{color:#1F2430;text-decoration:none;font:600 17px Inter,system-ui,sans-serif;padding:14px 8px;border-bottom:1px solid #EFE9DD}
.km-drawer .pn a.km-start{margin-top:14px;background:#0B1F4B;color:#FFFDF8;border:none;border-radius:10px;text-align:center}
.km-drawer .x{align-self:flex-end;background:none;border:none;font-size:28px;line-height:1;color:#1F2430;cursor:pointer;width:44px;height:44px}
.km-drawer .lg{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.km-drawer .lg a{border:1px solid #D6CDB9;border-radius:20px;padding:8px 12px;font-size:14px;border-bottom:1px solid #D6CDB9}
.km-drawer .lg a[aria-current]{background:#0B1F4B;color:#FFFDF8;border-color:#0B1F4B}
@media (max-width:1360px){.km-nav{display:none}.km-burger{display:flex;flex-direction:column}}@media (min-width:1361px){.km-head .in{max-width:1320px}.km-nav{gap:0}.km-nav a{padding:15px 6px;font-size:13px;white-space:nowrap}.km-nav a.km-start{padding:12px 16px;margin-left:4px}}@media (max-width:1400px){.km-nav a.km-sb-en{display:none}}@media (max-width:1560px){.km-nav a.km-sb-es{display:none}}@media (max-width:1680px){.km-nav a.km-sb-fr{display:none}}@media (max-width:1400px){.km-nav a.km-sb-ht{display:none}}@media (max-width:1480px){.km-nav a.km-sb-pt{display:none}}
.how span[data-price]{display:inline}
.formcol,#gs-form .f{scroll-margin-top:80px}
/* 44px tap targets on the shared header (suggested upstream in site_header.py too) */
.km-nav a{min-height:44px;display:inline-flex;align-items:center}.km-brand{min-height:44px}.km-lang select{min-height:44px}

/* ── v4 (Kelly 2026-10-01): two-step form, phone with country code,
   language, "learn more" education section, thank-you page ──────────── */
select.sel,.tel select,.cc-all select{width:100%;min-height:48px;padding:11px 36px 11px 12px;border-radius:10px;border:1.5px solid var(--field);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231F2430' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);font:400 16px/1.3 var(--ui);-webkit-appearance:none;appearance:none}
select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,75,.18)}
.tel{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:8px}
.cc-all{margin-top:10px}
.cc-all label{display:block;font:600 14px/1.35 var(--ui);color:var(--ink);margin:0 0 6px}
.f.err select{border-color:var(--bad)}
.stphd{margin:0 0 6px}
.stpn{margin:0 0 6px;font:600 13px/1.3 var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px}
.bars span{height:4px;border-radius:2px;background:var(--line-strong)}
.bars span.on{background:var(--navy)}
.stphd h2{outline:none}
.card .stp .hint{margin:0 0 16px}
.btn2.back{margin-top:10px}
.learn{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;min-height:48px;padding:12px 18px;border-radius:10px;border:1.5px solid var(--navy);background:var(--paper);color:var(--navy);font:600 16px/1.2 var(--ui);text-decoration:none}
.learn:hover{background:var(--white)}
.learn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.edu{outline:none}
.edu .sec{padding-top:40px}
.edu .sub{margin:-6px 0 16px;font:400 16px/1.5 var(--ui);color:var(--muted)}
.edu .lead{font-size:17px}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}
.ph{margin:0}
.ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--paper-deep)}
.ph figcaption{font:500 14px/1.4 var(--ui);color:var(--muted);margin-top:6px}
.who{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.who li{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:40px 1fr;gap:0 12px;align-items:center}
.who .ic{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--page);border:1px solid var(--line)}
.who svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.who b{font:600 16px/1.3 var(--ui);color:var(--ink)}
.who span{font:400 15px/1.4 var(--ui);color:var(--ink-soft)}
.how.six{grid-template-columns:minmax(0,1fr)}
.how .hn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--white);font:600 12px/1 var(--ui);margin-right:8px;vertical-align:1px}
.tofrm{margin-top:18px;width:auto;padding-left:22px;padding-right:22px}
.endcta{text-align:left}
.endcta p{font:400 16px/1.5 var(--ui);color:var(--ink-soft);margin:0 0 4px}
.more{display:flex;flex-wrap:wrap;gap:4px 20px;margin:14px 0 0}
.more a{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.3 var(--ui);color:var(--navy)}
#learn,.edu .sec{scroll-margin-top:80px}
@media(min-width:640px){
  .how.six{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}
}
@media(min-width:1024px){
  .edu .sec:first-child{padding-top:28px}
}
@media(max-width:380px){.tel{grid-template-columns:minmax(0,1fr)}}

/* thank-you page */
.ty{max-width:720px;margin:0 auto;padding:24px 16px 8px}
.tycard{margin:0}
.tycard h1{font-size:28px;outline:none}
.tycard p{margin:0 0 12px;font:400 16px/1.55 var(--ui);color:var(--ink-soft)}
.tycard p strong{color:var(--ink);overflow-wrap:anywhere}
.tycard .mark{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--good-soft);color:var(--good);margin:0 0 14px}
.tycard .mark svg{width:26px;height:26px}
.tycard .box{background:var(--paper-deep);border:1px solid var(--line);border-radius:10px;padding:16px;margin:16px 0}
.tycard .box h2{font:600 19px/1.3 var(--read);color:var(--navy);margin:0 0 12px}
.tycard .nums li strong{font-weight:700}
.tycard .plan-line{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;color:var(--ink)}
.tycard .note{background:var(--sel);border:1px solid #C9D3EA;border-radius:10px;padding:12px 14px;color:var(--navy)}
.tycard .actions{display:grid;gap:10px;margin-top:8px}
.tycard .ok{font:500 15px/1.4 var(--ui);color:var(--good);margin:10px 0 0}
.tycard .ok.err{color:var(--bad)}
.typh{margin:18px 0 0}
@media(min-width:640px){.tycard .actions{grid-template-columns:1fr 1fr}.tycard h1{font-size:34px}}

/* ── 2026-10-07 legibility pass ──
   Phone: the photo is a banner block at the top that fades into the page colour and ALL text sits on the
   solid page colour below it (before: headline, eyebrow and bullets were laid over the child's face).
   Price spans lose data-price after price-sync, so they are matched without the attribute. */
@media(max-width:1023px){
  .band{display:block;min-height:0}
  .band-bg{position:relative;inset:auto;height:clamp(210px,56vw,280px)}
  .band .scrim{inset:auto;left:0;right:0;top:0;height:clamp(210px,56vw,280px);background:linear-gradient(0deg,rgb(var(--scrim)) 0%,rgba(var(--scrim),.55) 10%,rgba(var(--scrim),0) 28%)}
  .band-in{padding:4px 16px 18px}
}
.band .eyebrow{font-weight:700;color:var(--ink-soft)}
@media(min-width:1024px){.band .scrim{background:linear-gradient(90deg,rgba(var(--scrim),.97) 0%,rgba(var(--scrim),.95) 47%,rgba(var(--scrim),.12) 68%)}}
.how b span:not(.hn){display:inline}
.ticks li{display:block;position:relative;padding-left:30px}
.ticks li::before{position:absolute;left:0;top:0}
.under{color:var(--ink-soft)}
.small.rl{margin-top:10px}
.small.rl a{display:inline-block;padding:8px 0;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.band-sub{margin:0 0 14px;font:400 18px/1.45 var(--ui);color:var(--ink)}
.learnmore{padding-top:8px}.learnmore h2{margin:0 0 6px}
.learnmore .faq details:first-of-type{border-top:1px solid var(--line)}
.learnmore summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* contrast (positioning pass 2026-10-07): helper text darker so every visible line passes 4.5:1 on real pixels */
.card .hint,.help,.small,.plan .per{color:var(--ink-soft)}
/* first screen v1 */
.pts li.pr{background:var(--white);border:2px solid var(--navy);border-left:8px solid var(--gold);border-radius:10px;padding:10px 12px;color:var(--navy)}
.pts li.pr strong{font-weight:700}
.eq-table .eq-tbl th{color:var(--ink-soft)} /* contrast: table header on cream, was 4.3:1 at 13px */
@media (max-width:1023px){.band-bg,.band .scrim{height:clamp(190px,50vw,250px);height:clamp(200px,31svh,260px)}.band .fade-ctl{top:6px;right:6px}.band-in{padding-bottom:14px}}
/* tagline v1 */
.km-lock{display:flex;flex-direction:column;justify-content:center;min-width:0}.km-lock b{line-height:1.05}.km-tag{display:block;margin-top:1px;font:500 11px/1.2 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:#3D4659;white-space:nowrap}@media (max-width:359px){.km-tag{display:none}}@media (min-width:1361px){.km-tag{white-space:normal;max-width:96px;font-size:10.5px;line-height:1.15}}@media (min-width:1361px){html[lang=fr] .km-tag{display:none}html[lang=en] .km-tag,html[lang=ht] .km-tag{max-width:124px}}footer .ftag{margin:0 0 8px;color:#0B1F4B;font:600 17px/1.3 'STIX Two Text',Georgia,serif}
/* floating card + back to the form v1 (apply_float.py) */
/* The form card looks lifted above the page (shadow, a small rise-in when motion is allowed). It scrolls away with the page on
   phones: it is never sticky or fixed below 1024 px. From 1024 px the column sticks (rules above). */
@media(max-width:1023px){.formcol{position:relative;z-index:2;box-shadow:0 20px 40px -20px rgba(31,36,48,.42),0 4px 12px rgba(31,36,48,.10)}}
@media(prefers-reduced-motion:no-preference){.formcol{animation:gsRise .5s ease-out backwards}@keyframes gsRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}}
.gs-back{position:fixed;z-index:30;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 13px;margin:0;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--navy);font:500 14px/1 var(--ui);white-space:nowrap;cursor:pointer;box-shadow:0 4px 14px -6px rgba(31,36,48,.45)}
.gs-back[hidden]{display:none}
.gs-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-back:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media(min-width:1024px){.gs-back{display:none!important}}
@media(prefers-reduced-motion:no-preference){.gs-back{animation:gsBackIn .2s ease-out}@keyframes gsBackIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}}
@media print{.gs-back{display:none!important}}
/* end floating card (apply_float.py) */

/* No flash of the old two-step form (Kelly 2026-10-15): the form stays invisible until the three-stage flow has replaced it
   (html.eq-on), or the flag says it is off (html.eq-off), or 2.5 s have passed, whatever happens. */
#form-card #gs-form{opacity:0;animation:gsFormShow 0s linear 2.5s forwards}
html.eq-on #form-card #gs-form,html.eq-off #form-card #gs-form{opacity:1;animation:none}
@keyframes gsFormShow{to{opacity:1}}

/* Grades that are not open yet (Kelly 2026-10-15): visible, but not pickable, and tagged "soon". */
.pill.pill-soon{opacity:.55;cursor:not-allowed}
.pill.pill-soon input{cursor:not-allowed}
.pill.pill-soon .soon{font-size:10px;line-height:1;font-weight:600;letter-spacing:.02em;color:#5F6470}

/* Phones (Kelly 2026-10-15): too much text before the form. Keep the small label, the headline and the price line, then the form.
   The photo is shorter and the long sentence, the extra bullets and the links are hidden below 768 px. */
@media (max-width:767px){
  .band-bg{height:clamp(120px,32vw,170px) !important}
  .band-sub,.band-links,.band .learn{display:none !important}
  .band .pts li:nth-child(n+2){display:none !important}
  .band-in{padding-bottom:6px !important}
}