/* AI Accuracy Lab — 2026-10-15 design system (handoff brief §2). Standalone: pages using this do not load styles.css. */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("../fonts/Inter-Medium.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url("../fonts/Inter-Bold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url("../fonts/Inter-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400 800;font-display:swap;src:url("../fonts/Newsreader-latin-var.woff2") format("woff2")}
:root{--ground:#F7F5F0;--surface:#FFFFFF;--ink:#1D1D1F;--ink-logo:#2A2A2E;--muted:#5E5E63;--hairline:#E6E2DA;--dark:#0B0B0C;--dark-card:#1C1C1E;--cta:#FFC21A;--cta-ink:#1D1D1F;--link:#C2410C;--success:#1E7A46;--serif:Newsreader,Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4;overflow-x:clip}
img{max-width:100%}
a{color:var(--ink)} a:hover{color:var(--link)}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Headline gradient (brand rule, Shane 23 Oct 2026): the red->orange->yellow brand gradient, left to right, ended at the
   0.42 stop (#F55328) for text so every part stays >= 3:1 (WCAG 2.2 AA large text) on white and cream; the ball keeps full yellow. */
.g{background:linear-gradient(90deg,#B8102D 0%,#D2192B 35.7%,#EF2E27 76.2%,#F55328 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl{background:linear-gradient(95deg,#FFC21A,#FFA31A);/* Shane t960u 24 Oct 2026: brighter newspaper highlights (was rgba(255,184,0,.5) to rgba(255,106,26,.4)); ink on #FFA31A is 8.4:1 */border-radius:4px;padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.band-white{background:var(--surface)} .band-dark{background:var(--dark);color:#F5F5F7}
.sec{padding-top:112px;padding-bottom:112px}
.eyebrow{margin:0;font-size:15px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.h-hero{margin:0;font-size:clamp(44px,7vw,88px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
/* Organisations hero rolling word (23 Oct 2026; js/site.js heroRot, same roll as js/hero-rotator.js). The slot's width is set by the
   script to the shown word's own width and glides to the next word's width over the roll (.42s), so the spacing is always one normal
   space. "<word> does." (.hrot-b) never breaks, so the line breaks stay the same for every word. .hrot-m is the hidden measurer.
   clip-path hides the roll: flush at the top (the outgoing word never shows over the line above), room below for descenders. */
.hrot-b{white-space:nowrap}
.hrot{display:inline-block;position:relative;white-space:nowrap;text-align:left;clip-path:inset(0 -.04em -.24em -.04em)}
.hrot.is-gliding{transition:width .42s cubic-bezier(.22,.8,.3,1)}
.hrot-w{display:inline-block;transition:opacity .42s ease,transform .42s cubic-bezier(.22,.8,.3,1)}
.hrot-w.is-out{opacity:0;transform:translateY(-100%)}
.hrot-w.is-pre{opacity:0;transform:translateY(100%);transition:none}
.hrot-m{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hrot-w,.hrot.is-gliding{transition:none}}
.h-page{margin:0;font-size:clamp(40px,5.6vw,72px);line-height:1.03;letter-spacing:-.035em;font-weight:800}
.h-sec{margin:0;font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.lead{font-size:19px;line-height:1.5;color:var(--muted)}
.center{text-align:center}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;box-shadow:none;text-align:center;line-height:1.2}
/* 24 Oct 2026 (QA must-fix 1, Coop approved): .btn-primary uses the cta.css gradient (was flat var(--cta) #FFC21A). */
.btn-primary{background:linear-gradient(95deg,#FFD60A 0%,#FFD60A 55%,#FF8A00 80%,#F2501E 100%);background-origin:border-box;color:#1D1D1F;border-color:transparent} .btn-primary:hover{background:linear-gradient(95deg,#FFD60A 0%,#FFD60A 55%,#FF8A00 80%,#F2501E 100%);background-origin:border-box;color:#1D1D1F;border-color:#1D1D1F;box-shadow:inset 0 0 0 1px #1D1D1F}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-secondary:hover{background:var(--ink);color:#fff}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-block{display:flex;width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed}
.tlink{color:var(--link);font-weight:600;text-decoration:none} .tlink:hover{text-decoration:underline}
.btns{display:flex;flex-wrap:wrap;gap:16px}
.terms{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* Preview bar + nav */
.pbar{background:var(--ink);color:#F5F5F7;font-size:13px;text-align:center;padding:8px 16px}
.hdr{border-bottom:1px solid var(--hairline);background:var(--ground)}
.nav{max-width:1200px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;flex:none} .logo img{height:32px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px}
.nav-links a,.nav-right a:not(.btn){text-decoration:none}
.nav-right{display:flex;align-items:center;gap:20px;font-size:15px}
.app-links{display:flex;gap:8px;font-size:15px}
.app-links a{text-decoration:none;padding:8px 14px;border-radius:999px}
.app-links a[aria-current="page"]{background:#fff;font-weight:600;box-shadow:0 0 0 1px var(--hairline)}
.nav-toggle{display:none;background:none;border:1.5px solid var(--ink);border-radius:999px;min-height:44px;padding:0 16px;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:900px){
  .nav{flex-wrap:wrap;padding:12px 20px}
  .nav-public .nav-toggle{display:inline-flex;align-items:center}
  .nav-public .nav-links,.nav-public .nav-right{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:4px}
  .nav-public.open .nav-links,.nav-public.open .nav-right{display:flex}
  .nav-public .nav-links a,.nav-public .nav-right a:not(.btn){display:flex;align-items:center;min-height:44px}
  .nav-public .nav-right .btn{margin-top:8px}
  .app-links{order:3;width:100%;justify-content:center}
  .logo img{height:28px}
}
/* Footer */
.ftr{border-top:1px solid var(--hairline)}
.ftr-in{max-width:1200px;margin:0 auto;padding:48px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;font-size:14px;color:var(--muted)}
.ftr-in .logo img{height:19px}
.ftr-col{display:flex;flex-direction:column;gap:10px}
.ftr-links{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.ftr-links a{color:var(--muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center} .ftr-links a:hover{color:var(--link)}
/* Cards & components */
.card{background:var(--surface);border-radius:24px;padding:36px}
.cards{display:flex;flex-wrap:wrap;gap:24px}
.cards>*{flex:1 1 300px}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.ticks li{display:flex;gap:10px;font-size:15.5px;line-height:1.4}
.ticks svg,.tick{flex:none;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--ground);border-radius:999px;padding:6px 18px 6px 8px;font-weight:600}
.chip img{width:30px;height:40px;object-fit:contain}
.clip{background:#fff;border-radius:8px;padding:20px 22px 24px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px rgba(60,50,30,.10);text-align:left}
.clip .src{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:1px;color:#6E6E73;text-transform:uppercase}
.clip .hd{margin:0;font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.14;letter-spacing:-.2px;color:var(--ink)}
.lock-ico{display:inline-block}
.lockcard{max-width:480px;background:#fff;border-radius:24px;padding:32px;text-align:center;box-shadow:0 24px 60px rgba(60,50,30,.16)}
.lockcard h2{margin:12px 0 0;font-size:26px;letter-spacing:-.6px;font-weight:800}
.lockcard p{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.lockcard .stack{margin-top:20px}
.stack{display:flex;flex-direction:column;gap:10px}
.blurwrap{position:relative;border-radius:24px;overflow:hidden;min-height:420px}
.blurwrap .ghost{filter:blur(7px);opacity:.55;pointer-events:none;display:flex;flex-direction:column;gap:14px}
.blurwrap .ghost div{background:#fff;border-radius:18px}
.blurwrap .over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
/* Home hero */
.hero{padding:96px 32px 40px;text-align:center;max-width:1200px;margin:0 auto}
.aud{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:6px 8px 6px 20px;box-shadow:0 0 0 1px var(--hairline)}
.aud label{font-size:15px;color:var(--muted)}
.aud .sel{position:relative;display:inline-flex;align-items:center}
.aud select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 40px 0 16px;border-radius:999px;border:0;background:var(--ground);font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.aud .sel svg{position:absolute;right:14px;pointer-events:none}
.hero h1{margin:28px auto 0;max-width:1000px}
.hero .sub{margin:28px auto 0;max-width:660px;font-size:21px;line-height:1.5;color:var(--muted)}
.mq{margin:44px 0 0;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:24px 0 36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;align-items:flex-start;animation:mq 80s linear infinite;will-change:transform}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:flex-start;padding-left:12px}
.mq .clip{flex:none;width:270px;margin:var(--dy,0) -12px 0;transform:rotate(var(--r,0deg));position:relative}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.mq{overflow-x:auto}}
.mq-cap{margin:4px 0 0;font-size:15px;color:var(--muted)}
.sources{max-width:760px;margin:12px auto 0;text-align:left;font-size:14px;color:var(--muted)}
.sources summary{cursor:pointer;text-align:center;font-weight:600;color:var(--link);min-height:32px;list-style:none}
.sources summary::-webkit-details-marker{display:none}
.sources ol{margin:12px 0 0;padding-left:20px;line-height:1.5;background:#fff;border-radius:16px;padding:16px 16px 16px 36px}
.sources li{margin:4px 0}
.hero .btns{margin-top:36px;justify-content:center}
.trust{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:22px;font-size:15px;font-weight:600;color:#3A3A3F}
.trust span{display:inline-flex;align-items:center;gap:8px}
[hidden]{display:none!important}
/* Benefits */
.ben{background:var(--ground);border-radius:24px;padding:36px}
.ben h3{margin:20px 0 0;font-size:26px;letter-spacing:-.6px;font-weight:700}
.ben p{margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--muted)}
/* Characters row */
.crow{margin-top:56px;display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.crow a{flex:1 0 150px;text-decoration:none;text-align:center;background:#fff;border-radius:22px;padding:18px 10px 22px;scroll-snap-align:start}
.crow img{width:120px;height:164px;object-fit:contain}
.crow .n{margin:10px 0 0;font-weight:700;font-size:17px} .crow .e{margin:4px 0 0;font-size:14px;color:var(--muted)}
/* How */
.steps{margin-top:64px;display:flex;flex-wrap:wrap;gap:24px}
.step{flex:1 1 320px;display:flex;flex-direction:column;gap:18px}
.step .k{margin:0;font-size:15px;font-weight:700;color:var(--link)}
.step h3{margin:0;font-size:28px;letter-spacing:-.6px;font-weight:700}
.step>p{margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.vis{margin-top:auto;background:var(--ground);border-radius:20px;padding:24px}
.row{display:flex;justify-content:space-between;gap:12px;background:#fff;border-radius:12px;padding:12px 14px}
.bar{height:8px;background:var(--hairline);border-radius:4px} .bar>i{display:block;height:100%;background:var(--ink);border-radius:4px}
/* LMS */
.lms{position:relative;overflow:hidden}
.lms .glow{position:absolute;right:-200px;top:-140px;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,26,.22) 0%,rgba(255,138,31,.10) 40%,rgba(247,245,240,0) 70%);pointer-events:none}
.lms-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.lms-copy{flex:1 1 420px} .lms-vis{flex:1 1 520px;display:flex;flex-direction:column;align-items:center;min-width:0}
.puzzle{position:relative;width:100%;max-width:720px;aspect-ratio:900/520}
.puzzle>img:first-child{width:100%;height:100%;display:block;overflow:visible}
.puzzle .pmark{position:absolute;left:77.78%;top:41.73%;width:6.67%;transform:rotate(9deg)}
/* Audience cards */
.acard{flex:1 1 240px;text-decoration:none;color:#F5F5F7;background:var(--dark-card);border-radius:22px;padding:32px 28px;display:block}
.acard:hover{color:#fff;outline:1px solid #3A3A3C}
.acard .k{margin:0;font-size:14px;font-weight:600;color:#FFB15C}
.acard h3{margin:12px 0 0;font-size:24px;letter-spacing:-.5px}
.acard p{margin:10px 0 0;font-size:16px;line-height:1.5;color:#C7C7CC}
.acard .more{margin:22px 0 0;font-weight:600;color:#F5F5F7}
/* Pricing */
.plans{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.plan{flex:1 1 300px;position:relative;background:#fff;border-radius:26px;padding:34px 30px 28px;display:flex;flex-direction:column;gap:18px}
.plan.pop{outline:2px solid var(--ink)}
.plan .badge{position:absolute;top:-13px;left:28px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:999px}
.plan h3{margin:0;font-size:22px}
.price{margin:0} .price b{font-size:46px;font-weight:800;letter-spacing:-1.6px} .price span{font-size:16px;color:var(--muted)}
.pnote{margin:2px 0 0;font-size:14px;color:var(--muted)}
.plan .foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.cmp-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--link);cursor:pointer}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{background:#fff;border-radius:26px;overflow:hidden;min-width:760px}
.cmp table{width:100%;border-collapse:collapse}
.cmp th{padding:22px 18px;text-align:center;vertical-align:top;width:23%}
.cmp th:first-child{text-align:left;font-size:15px;color:var(--muted);font-weight:600;width:auto}
.cmp td{padding:14px 18px;text-align:center;font-size:14px;font-weight:600}
.cmp td:first-child{text-align:left;font-size:15.5px;font-weight:400}
.cmp tr+tr,.cmp tbody tr{border-top:1px solid #EEEBE5}
.cmp .dash{color:#8E8E93}
.cmp .tp{margin:8px 0 0;font-size:34px;font-weight:800;letter-spacing:-1px} .cmp .ts{margin:2px 0 0;font-size:13px;font-weight:500;color:var(--muted)}
/* Closing */
.news{width:380px;max-width:100%;background:var(--ground);border-radius:10px;padding:28px;transform:rotate(-2deg);box-shadow:0 20px 44px rgba(60,50,30,.10)}
.news .mast{margin:0;font-family:var(--serif);font-weight:700;font-size:24px;text-align:center;border-bottom:2px solid var(--ink);padding-bottom:10px}
.news .slot{margin-top:22px;border:2.5px dashed #A1A1A6;border-radius:12px;height:150px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:30px;color:#6E6E73}
/* Learn / lessons */
.lcard{flex:1 1 340px;text-decoration:none;background:#fff;border-radius:24px;padding:24px;display:flex;align-items:center;gap:20px}
.lcard img{width:92px;height:126px;object-fit:contain;flex:none}
.lcard .m{margin:0;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.5px}
.lcard h3{margin:6px 0 0;font-size:22px;letter-spacing:-.4px}
.lcard .w{margin:6px 0 0;font-size:15px;color:var(--muted)}
.lcard .s{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.stepsrow{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px;font-weight:600}
.stepsrow li{background:#fff;border-radius:999px;padding:8px 16px;box-shadow:0 0 0 1px var(--hairline)}
.stepsrow .arr{background:none;box-shadow:none;padding:0;color:var(--muted)}
.darkpanel{background:var(--dark);color:#F5F5F7;border-radius:28px;padding:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.btn-light{background:#F5F5F7;color:#0B0B0C} .btn-light:hover{background:#fff;color:#0B0B0C}
/* Characters page */
.lineup{position:relative;background:#fff;border-radius:28px;padding:48px 24px 28px;overflow:hidden}
.lineup .hl1{position:absolute;left:0;right:0;height:1px;background:#EEEBE5}
.lineup .ppl{position:relative;display:flex;flex-wrap:wrap;justify-content:space-around;gap:12px}
.lineup a{text-decoration:none;text-align:center;flex:0 1 160px}
.lineup img{width:150px;height:205px;object-fit:contain}
.ccard{flex:1 1 520px;background:#fff;border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:22px;scroll-margin-top:24px}
.ccard .top{display:flex;align-items:center;gap:20px} .ccard .top img{width:84px;height:115px;object-fit:contain}
.lockrow{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--ground);border-radius:16px;padding:18px 20px}
/* Practice */
.paper{background:#fff;border-radius:10px;padding:56px 64px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 56px rgba(60,50,30,.10);font-family:var(--serif);font-size:19px;line-height:1.65}
/* Check */
.drop{background:#fff;border:2px dashed #C7C3BB;border-radius:28px;padding:56px 32px;text-align:center}
.warn{margin:18px auto 0;max-width:520px;background:#FFF4E5;border-radius:14px;padding:12px 16px;font-size:15px;font-weight:600;color:#7A3A00;display:flex;gap:10px;align-items:flex-start;text-align:left}
.flag{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--ground);border-radius:16px;padding:16px 18px}
.flag img{width:28px;height:38px;object-fit:contain}
/* Access */
.field{min-height:52px;padding:0 18px;border-radius:14px;border:1.5px solid #D9D5CD;background:var(--ground);font:inherit;font-size:17px;width:100%}
.opt{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;border:1.5px solid var(--hairline);border-radius:18px;padding:18px 20px;cursor:pointer;background:#fff;font:inherit;text-align:left;width:100%;color:var(--ink)}
.opt[aria-pressed="true"]{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--tog-grad) border-box}
.opt:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px}
  .sec{padding-top:72px;padding-bottom:72px}
  .hero{padding:48px 20px 24px}
  .hero .sub{font-size:18px}
  .aud{padding-left:14px}
  .mq .clip{width:230px}
  .mq .clip .hd{font-size:19px}
  .card,.ben,.ccard{padding:26px}
  .paper{padding:32px 24px}
  .darkpanel{padding:32px 24px}
  .btns .btn{width:100%}
  .lcard{padding:18px;gap:14px} .lcard img{width:70px;height:96px}
  .lineup img{width:96px;height:132px} .lineup a{flex-basis:100px}
  .blurwrap{min-height:0}.blurwrap .ghost{position:absolute;inset:0}.blurwrap .over{position:relative;padding:16px 0}.lockcard{padding:24px}
}

/* Basic card billing toggle (Option B, 20261015h4) */
/* 20 Oct 2026 (Shane): segmented controls are neutral so the gradient CTA stays the focal point. Was: track var(--ground), selected var(--cta).
   Contrast: selected text #1D1D1F on #FFF 16.8:1; selected 1px #1D1D1F ring vs #EFEFF1 track 14.7:1 (non-text, needs 3:1); unselected #5E5E63 on #EFEFF1 5.6:1. */
.bseg{display:inline-flex;background:#EFEFF1;border:1px solid var(--hairline);border-radius:999px;padding:3px;gap:2px}
/* Toggles (23 Oct 2026, Shane): the selected option gets the character picker's gradient border (css/picker.css .pk .ch), 2px.
   Every option carries a 2px transparent border (padding 2px smaller) so selecting one never shifts the layout.
   Border gradient --tog-grad = the picker stops #C8102E 0%, #EF2E27 30%, then the two oranges a touch darker (#E66726 -> #E55F1B,
   #D6731F -> #CF6F1E) and the yellow #FDCB29 end dropped, so every point of the edge keeps 3:1 against the grey track #EFEFF1
   (min 3.06:1), white (3.51:1) and cream (3.22:1). Exact picker stops would fall to 2.89:1 (oranges) and 1.33:1 (yellow). */
:root{--tog-grad:linear-gradient(100deg,#C8102E 0%,#EF2E27 30%,#E55F1B 70%,#CF6F1E 100%)}
.bseg button{font:600 13.5px/1 Inter,system-ui,sans-serif;color:#5E5E63;background:none;border:2px solid transparent;border-radius:999px;padding:6px 12px;cursor:pointer}
.bseg button[aria-pressed="true"]{background:linear-gradient(#fff,#fff) padding-box,var(--tog-grad) border-box;border:2px solid transparent;color:#1D1D1F;font-weight:700;box-shadow:0 1px 3px rgba(29,29,31,.14)}
.bseg button:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
@media (forced-colors:active){.bseg button[aria-pressed="true"]{outline:2px solid ButtonText}}
/* Home pricing audience toggle (Shane 20 Oct 2026, mockups/pricing-toggle-20261020): follows #segment; one card and one compare column */
.pseg-wrap{margin-top:44px;display:flex;justify-content:center}
.bseg.pseg{max-width:100%}
.bseg.pseg button{font-size:15px;padding:9px 16px;min-height:40px;white-space:nowrap}
@media (max-width:420px){.bseg.pseg button{font-size:14px;padding:8px 11px}}
@media (max-width:359px){.bseg.pseg button{font-size:13px;padding:8px 7px}}
.plans.single{justify-content:center}.plans.single>.plan{flex:0 1 460px;max-width:460px}
/* Gradient primary CTAs (Shane 20 Oct 2026, v3). Ink on #FFD60A 11.9:1, on #FF8A00 7.1:1, on #F2501E 4.76:1 (lowest). Toggles and badges stay neutral / #FFC21A. */
/* .btn-grad (primary CTA gradient, the "Get a quote" look) moved to css/cta.css on 23 Oct 2026 so every page, including the
   css/styles.css ones, shares one rule. */
#compare .cmp td .terms{font-weight:400}#compare .cmp[data-show] td .btn{white-space:nowrap;padding:0 18px}
#compare .cmp[data-show]{min-width:0;max-width:760px;margin:0 auto}
#compare .cmp[data-show] th:not(:first-child){width:42%}#compare .cmp[data-show="ind"] th:not(:first-child){width:30%}
/* 24 Oct 2026: Pro (coming soon) is column 3, Organisation column 4 */#compare .cmp[data-show="ind"] tr>:nth-child(4),#compare .cmp[data-show="org"] tr>:nth-child(2),#compare .cmp[data-show="org"] tr>:nth-child(3),#compare .cmp[data-show="org"] [data-pcmp="ind"]{display:none}
@media (max-width:640px){#compare .cmp[data-show] th,#compare .cmp[data-show] td{padding-left:14px;padding-right:14px}}
/* 24 Oct 2026: three columns (Basic + Pro coming soon) must fit at 390 */@media (max-width:640px){#compare .cmp[data-show="ind"] th,#compare .cmp[data-show="ind"] td{padding-left:8px;padding-right:8px}#compare .cmp[data-show="ind"] th:not(:first-child){width:auto}#compare .cmp[data-show="ind"] .tp{font-size:20px!important}#compare .cmp[data-show="ind"] td .btn{white-space:normal;padding:0 8px;font-size:15px}#compare .cmp[data-show="ind"] tbody th{font-size:14.5px!important;padding-left:10px!important;padding-right:6px!important}#compare .cmp[data-show="ind"] thead th:first-child{font-size:13px}#compare .cmp[data-show="ind"] table{table-layout:fixed;width:100%}#compare .cmp[data-show="ind"] thead th:first-child{width:30%}#compare .cmp[data-show="ind"] thead th:nth-child(2),#compare .cmp[data-show="ind"] thead th:nth-child(3){width:35%}#compare .cmp[data-show="ind"] thead .tp{font-size:18px!important}}/* 24 Oct 2026: Pro price in the compare header (8:27 PM) */
.bhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#basic-plan[data-mode="year"] [data-iv="month"],#basic-plan[data-mode="month"] [data-iv="year"]{display:none!important}
.bhead h3{line-height:1.2}.bhead{margin:-4px 0}
/* new wordmark 2026-10-16 (mockup) */
.logo img{height:32px;width:auto}
@media (max-width:720px){.logo img{height:24px}}
.ftr-in .logo img{height:19px} /* footer logo ~32% smaller (Shane, 23 Oct 2026): 28px -> 19px tall, ~212 -> ~144px wide */
/* 24 Oct 2026 (Coop 10:07 pm): the handwritten tagline under the logo is gone; .brand stays as the logo wrapper. */
.brand{position:relative;display:inline-flex;flex:none}
/* 23 Oct 2026 (brand copy rule): audience words. Enterprise/Law firm = employees, University = students. */
.aw-stu{display:none}html[data-aud="university"] .aw-emp{display:none}html[data-aud="university"] .aw-stu{display:inline}

/* Individual hero H1 rotation (Shane, 18 Oct 2026): balanced wrapping avoids one-word last lines; at desktop the
   "Everyone uses AI." lead sentence sits on its own line. Other audiences unchanged. */
html[data-aud="individual"] #hero-h1{text-wrap:balance}
.h1-lead{display:inline}
@media (min-width:721px){.h1-lead{display:block}}

/* Individual key features (Learn, Practice, Check) reuse the .ben cards; each card links to its page (site.js setBens). */
.ben{position:relative}
.ben-link h3 a{color:inherit;text-decoration:none}
.ben-link h3 a::after{content:"";position:absolute;inset:0;border-radius:24px}
.ben-link{transition:box-shadow .15s}
.ben-link:hover{box-shadow:0 0 0 2px var(--hairline)}
.ben-link:hover h3 a{color:var(--link)}
.ben-link h3 a:focus-visible{outline:none}
.ben-link:has(a:focus-visible){box-shadow:0 0 0 3px var(--link)}
.ben-arr{color:var(--link)}
.ben-soon{display:inline-block;vertical-align:middle;margin-left:6px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;padding:5px 11px;border-radius:999px;position:relative;top:-2px}

/* Brand rule (Shane, 18 Oct 2026): every headline has a short grey subheading directly underneath (#5E5E63 via --muted, regular, 19px .lead).
   On the dark audiences band #5E5E63 is only 3.05:1 on #0B0B0C, so it uses the existing on-dark muted grey #C7C7CC (11.7:1) pending Shane's call. */
.sec-sub{margin:16px auto 0;max-width:720px;font-weight:400;text-wrap:balance}
.sec-sub.on-dark{color:#C7C7CC}
#how .steps{margin-top:56px}

/* Redesign mockup 18 Oct 2026: closing "Tomorrow's News" card no longer clipped on mobile (rotated card wider than its column). */
.news-wrap{padding:12px 0}
@media (max-width:720px){.news{width:calc(100% - 24px);padding:22px}.news .slot{height:120px;font-size:26px}}

/* Footer legal line restored (Shane, 18 Oct 2026): small muted grey, full-width row under logo and links. */
.ftr-legal{flex:1 1 100%;margin:0;padding-top:20px;border-top:1px solid var(--hairline);font-size:13px;line-height:1.5;color:var(--muted);max-width:none}
@media (max-width:720px){.ftr-in{gap:24px}.ftr-legal{padding-top:16px}}
/* Pricing 23 Oct 2026: Monthly / Annual (the year/month [data-iv] rule is further up); lifetime + launch-offer rules removed. Pro hidden */
.was{font-size:26px;font-weight:600;color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;margin-right:6px;letter-spacing:-.5px}
.offer-badge{display:inline-block;background:var(--cta);color:var(--cta-ink);font-size:12.5px;font-weight:700;line-height:1.3;padding:6px 12px;border-radius:999px}
.plan .offer-badge{position:absolute;top:-14px;left:28px;max-width:calc(100% - 56px)}
.opt .was{font-size:15px;margin-right:4px}
.opt .offer-badge{font-size:12px;padding:4px 10px;margin-top:6px;white-space:normal}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-pro-hidden]{display:none!important} /* PRO-HIDDEN flag (18 Oct 2026) */

.ftr-stack{display:inline-flex;flex-direction:column;align-items:flex-start;margin-bottom:-24px}
@media (max-width:760px){.ftr-stack{margin-bottom:0}}

/* Support FAQ (mockup 19 Oct 2026): accessible <details>/<summary> accordion on white cards. */
.faq{display:flex;flex-direction:column;gap:20px;margin-top:44px}
.faq-h{margin:0;font-size:clamp(30px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800}
.faq-sub{margin:-8px 0 4px;max-width:620px;font-weight:400}
.faq-group{padding:32px 36px}
.faq-group h3{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.4px;font-weight:800}
.faq-gsub{margin:6px 0 0;font-size:17px;line-height:1.5;color:var(--muted)}
.faq-list{margin-top:14px;border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font-size:18px;line-height:1.4;font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover span{color:var(--link)}
.faq-item summary:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:8px}
.faq-chev{flex:0 0 auto;color:var(--muted);transition:transform .2s}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 0 20px;max-width:65ch}
.faq-a p,.faq-a ol{margin:0 0 10px;font-size:17px;line-height:1.6;color:var(--muted)}
.faq-a p:last-child{margin-bottom:0}
.faq-a ol{padding-left:22px}
.faq-a li{margin:2px 0}
@media (prefers-reduced-motion:reduce){.faq-chev{transition:none}}
@media (max-width:640px){.faq{margin-top:32px}.faq-group{padding:24px 20px}.faq-item summary{font-size:17px}}
/* Support page (19 Oct 2026): long email links wrap instead of overflowing at 390px (contact card email was 14px too wide). */
@media (max-width:480px){section[aria-labelledby="sup-contact"] a.tlink{font-size:17px}.card a[href^="mailto:"]{overflow-wrap:anywhere}}
/* Sign-in (19 Oct 2026): password row and 'or' divider; forgot-password mock confirmation; FAQ draft pill. */
.pw-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pw-row .tlink{font-size:15px;min-height:24px;display:inline-flex;align-items:center}
.or-div{display:flex;align-items:center;gap:14px;margin:4px 0;font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--hairline)}
.fp-done{background:var(--ground);border-radius:12px;padding:18px 20px;outline:none}
.draft-pill{display:inline-block;vertical-align:middle;margin-left:10px;position:relative;top:-4px;background:var(--cta);color:var(--cta-ink);font-size:14px;font-weight:700;letter-spacing:0;line-height:1.3;padding:6px 12px;border-radius:999px;white-space:nowrap}
@media (max-width:640px){.draft-pill{font-size:13px;margin-left:0;top:0;margin-top:8px}}

/* Headline end mark = gradient ball (brand rule, Shane 23 Oct 2026): see css/hball.css (linked on every page by handoff-build/headdot.py). */

/* 23 Oct 2026 (Shane): Enterprise headline gradient sits on the rotating word only (.hrot-w.g). Vertical padding keeps descenders
   (the "g" in regulator) inside the text-clipped background; the negative margin cancels it so the line box doesn't change. */
.hrot-w.g{padding-bottom:.16em;margin-bottom:-.16em}

/* 23 Oct 2026 (Shane): "Learn it. Practise it. Prove it." steps are text-only (screens removed). Org audiences get four steps
   (Learn, Assess, Record, Report): four columns on desktop, two on tablet, one on phones. */
.steps-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps-4 .step{gap:12px}
.steps-4 .step h3{font-size:24px;letter-spacing:-.4px}
.steps-4 .step>p{font-size:16.5px}
@media (max-width:1000px){.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.steps-4{grid-template-columns:1fr;gap:28px}}
/* 23 Oct 2026: keep a feature name such as Heat-map on one line (no break at the hyphen) */
.nw{white-space:nowrap}
/* 30 Oct 2026 site QA: footer logo link meets the 44px touch target on phones */
@media (max-width:720px){.ftr-col a.logo{display:inline-flex;align-items:center;min-height:44px}}
/* 30 Oct 2026 site QA: dashboard Continue/Start and report Email buttons meet 44px on phones (CSS only) */
@media (max-width:720px){.dg-act .btn,.btn.btn-xs{min-height:44px!important;display:inline-flex;align-items:center}}