/* Brittify — website stylesheet.
   Tokens are the locked brand system (01_Brand/04-BRAND-SYSTEM.md). Do not introduce new colours
   or fonts here: if something needs a colour that is not below, the brand system decides first. */

:root{
  --navy:#1B2A4A; --navy-deep:#121D34; --ink:#22283A;
  --red:#D9483B; --red-pale:#FBEAE7;
  /* Accessible siblings of ember red. The brand red is a display colour: white on it is 4.25:1,
     which fails AA for button text, and red on cream is 3.95:1, which fails for links. These two
     are the same hue and saturation, darkened only as far as WCAG AA needs. Use --red for large
     display type and decoration, --red-ink behind white text, --red-text for small red text. */
  --red-ink:#D73C2E; --red-text:#C93427;
  --cream:#FAF6EF; --paper:#FFFFFF; --sand:#F3EFE6;
  --sage:#2E7D5B; --sage-pale:#E8F1EC;
  --gold:#E8B84B; --gold-ink:#86671E;
  --grey:#666D7A; --line:#E2DCD0; --line-strong:#CFC7B7;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px; --radius:14px;
  --shadow:0 1px 2px rgba(27,42,74,.04), 0 8px 24px rgba(27,42,74,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.62;color:var(--ink);
  background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red-text)}
/* The focus ring has to be visible on cream, on white and on the navy bands. Gold alone was
   1.7:1 on cream. Navy carries the ring, gold haloes it, so one of the two always shows. */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px;
  box-shadow:0 0 0 6px rgba(232,184,75,.55)}
.band-navy :focus-visible,footer.site :focus-visible{outline-color:var(--gold);
  box-shadow:0 0 0 6px rgba(250,246,239,.35)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:600;letter-spacing:-.015em;
  line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.04}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:20px;line-height:1.25}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:740px}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 14px}
.lede{font-size:19px;line-height:1.6;color:#46506A}
.muted{color:var(--grey);font-size:15px}
.tight{margin-bottom:.35em}
.center{text-align:center}
section{padding:72px 0}
@media(max-width:640px){section{padding:52px 0} body{font-size:16px}}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--cream);
  padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(250,246,239,.92);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--wrap);margin:0 auto;padding:12px 22px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand .mark{width:34px;height:34px;flex:none}
.brand .name{font-family:var(--sans);font-weight:800;font-size:20px;color:var(--navy);
  letter-spacing:-.02em}
.brand .name i{font-style:normal;color:var(--red)}
nav.main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav.main a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:8px 12px;border-radius:8px;opacity:.82}
nav.main a:hover{opacity:1;background:var(--sand);color:var(--navy)}
nav.main a[aria-current="page"]{opacity:1;color:var(--navy);font-weight:600;background:var(--sand)}
@media(max-width:860px){
  .bar{flex-wrap:wrap;padding:10px 16px;gap:8px}
  nav.main{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  nav.main a{padding:7px 10px;font-size:14px;white-space:nowrap}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red-ink);color:#fff}
.btn-primary:hover{background:var(--red-text);color:#fff;box-shadow:0 10px 22px rgba(217,72,59,.26)}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:var(--cream)}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-navy:hover{background:var(--navy-deep);color:#fff}
.btn-sm{padding:11px 18px;font-size:14.5px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- hero ---------- */
.hero{padding:64px 0 44px}
.hero h1 em{font-style:italic;color:var(--red)}
.hero .lede{max-width:600px;margin-top:18px}
.hero .btns{margin-top:30px}
.hero-note{margin-top:16px;font-size:14px;color:var(--grey)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}

/* facts strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:52px}
.strip div{padding:20px 18px 20px 0}
.strip b{display:block;font-family:var(--serif);font-size:28px;color:var(--navy);font-weight:600}
.strip span{font-size:13px;color:var(--grey)}
@media(max-width:760px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- cards ---------- */
.cards{display:grid;gap:18px;margin-top:34px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cols-3,.cols-2{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card .icon{width:48px;height:48px;margin-bottom:14px}
.card.link{text-decoration:none;color:inherit;display:block;transition:transform .18s,box-shadow .18s}
.card.link:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(27,42,74,.08),0 18px 40px rgba(27,42,74,.10)}
.card.navy{background:var(--navy);border-color:var(--navy);color:#DCE3F0}
.card.navy h3,.card.navy h2{color:#fff}
.card.navy a{color:var(--gold)}

/* ---------- panels ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.panel-sand{background:var(--sand);border-color:var(--line)}
.band-paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-navy{background:var(--navy);color:#DCE3F0}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .lede{color:#B9C4DA}
.band-navy .eyebrow{color:var(--gold)}

/* ---------- the handbook contrast block ---------- */
.dense{font-family:var(--serif);font-size:14.5px;line-height:2.05;color:#8A8578;text-align:justify;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  position:relative;max-height:260px;overflow:hidden}
.dense::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;
  background:linear-gradient(to bottom,rgba(243,239,230,0),var(--sand))}

/* ---------- pricing ---------- */
.price{font-family:var(--serif);font-size:34px;color:var(--navy);font-weight:600}
.price s{color:var(--grey);font-size:19px;font-weight:400;margin-left:8px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--sage-pale);color:var(--sage);margin-bottom:12px}
.tag.gold{background:#FBF1DA;color:var(--gold-ink)}
.tag.red{background:var(--red-pale);color:#A6362C}
ul.ticks{list-style:none;padding:0;margin:18px 0}
ul.ticks li{position:relative;padding:0 0 9px 28px;font-size:15.5px;line-height:1.5}
ul.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:13px;height:8px;
  border-left:2.5px solid var(--sage);border-bottom:2.5px solid var(--sage);transform:rotate(-45deg)}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:14px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:6px}
.field .hint{font-weight:400;color:var(--grey);font-size:13px}
input[type=text],input[type=email],input[type=date],textarea,select{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-strong);border-radius:10px;padding:13px 14px}
input:focus,textarea:focus,select:focus{border-color:var(--navy);outline:3px solid var(--gold);outline-offset:1px}
textarea{min-height:120px;resize:vertical}
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.form-row input{flex:1 1 240px}
.form-msg{margin-top:12px;font-size:15px;padding:12px 14px;border-radius:10px;display:none}
.form-msg.ok{display:block;background:var(--sage-pale);color:#1E5C41;border:1px solid #BFDBCC}
.form-msg.err{display:block;background:var(--red-pale);color:#A6362C;border:1px solid #EFC5BE}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- quiz ---------- */
.quiz-shell{max-width:760px;margin:0 auto}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:16px;position:sticky;top:58px;z-index:20;box-shadow:var(--shadow)}
.quiz-top .count{font-weight:700;color:var(--navy);font-size:15px}
.timer{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.timer.low{color:var(--red-text)}
.progress{height:5px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--sage);width:0;transition:width .3s ease}

.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)}
.qmeta{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:12px}
.qtext{font-family:var(--serif);font-size:23px;line-height:1.3;color:var(--navy);margin:0 0 22px;font-weight:600}
.opts{display:grid;gap:10px;margin:0 0 4px;padding:0;list-style:none}
.opt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;
  background:var(--paper);border:1.5px solid var(--line-strong);border-radius:11px;
  padding:15px 17px;font-family:var(--sans);font-size:16.5px;line-height:1.45;color:var(--ink);
  cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--navy);background:#FCFAF6}
.opt .key{flex:none;width:26px;height:26px;border-radius:7px;background:var(--sand);
  color:var(--navy);font-weight:700;font-size:13.5px;display:grid;place-items:center;margin-top:-1px}
.opt[aria-pressed="true"]{border-color:var(--navy);background:#F5F3ED}
.opt[aria-pressed="true"] .key{background:var(--navy);color:#fff}
.opt.right{border-color:var(--sage);background:var(--sage-pale)}
.opt.right .key{background:var(--sage);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--red-pale)}
.opt.wrong .key{background:var(--red-ink);color:#fff}
.opt[disabled]{cursor:default}

.teach{margin-top:18px;border-left:3px solid var(--gold);background:var(--sand);
  border-radius:0 11px 11px 0;padding:18px 20px}
.teach .verdict{font-weight:700;font-size:15px;margin-bottom:8px}
.teach .verdict.right{color:var(--sage)}
.teach .verdict.gap{color:var(--red-text)}
.teach p{font-size:15.5px;line-height:1.55;margin:0 0 10px}
.teach p:last-child{margin-bottom:0}
.teach .why{color:#3A5A8C;font-size:14.5px}
.teach .hook{font-family:var(--serif);font-style:italic;color:var(--gold-ink);font-size:15px}
.teach .trap{background:var(--red-pale);border-radius:8px;padding:11px 13px;color:#8A2E22;font-size:14.5px}
.teach .ref{font-size:13px;color:var(--grey)}

.quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.flagbtn{background:none;border:1.5px solid var(--line-strong);border-radius:999px;
  padding:10px 16px;font-family:var(--sans);font-size:14px;color:var(--grey);cursor:pointer}
.flagbtn[aria-pressed="true"]{border-color:var(--gold);background:#FBF1DA;color:var(--gold-ink);font-weight:600}

.grid-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.grid-nav button{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line-strong);
  background:var(--paper);font-family:var(--sans);font-weight:600;font-size:14px;color:var(--grey);cursor:pointer}
.grid-nav button.done{background:var(--navy);border-color:var(--navy);color:#fff}
.grid-nav button.flagged{border-color:var(--gold);background:#FBF1DA;color:var(--gold-ink)}
.grid-nav button[aria-current="true"]{outline:3px solid var(--gold);outline-offset:1px}

/* result */
.score{font-family:var(--serif);font-size:76px;line-height:1;color:var(--navy);font-weight:600}
.score small{font-size:26px;color:var(--grey)}
.verdict-big{font-family:var(--serif);font-size:28px;margin:10px 0 4px}
.verdict-big.pass{color:var(--sage)}
.verdict-big.notyet{color:var(--red)}
.bars{margin-top:26px}
/* NB: named .chbar, not .bar — the header's layout row is .bar and would otherwise impose
   display:flex on these, collapsing the track to nothing. */
.chbar{margin-bottom:14px}
.chbar .lab{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:5px}
.chbar .lab b{font-weight:600;color:var(--navy)}
.chbar .track{height:9px;background:var(--line);border-radius:999px;overflow:hidden}
.chbar .track i{display:block;height:100%;border-radius:999px;background:var(--sage);min-width:3px}
.chbar.weak .track i{background:var(--red)}

/* ---------- topic list ---------- */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:22px}
.topic{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
  font-size:15px;text-decoration:none;color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--sans);width:100%}
.topic:hover{border-color:var(--navy);color:var(--navy)}
.topic span{color:var(--grey);font-size:13px;flex:none}
.locked{opacity:.55}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#AFBBD2;padding:52px 0 34px;margin-top:60px;font-size:15px}
footer.site h4{color:#fff;font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 14px;font-weight:700}
footer.site a{color:#D7DEEC;text-decoration:none}
footer.site a:hover{color:var(--gold);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:34px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px}
.foot-legal{border-top:1px solid #2C3E63;margin-top:38px;padding-top:22px;font-size:13.5px;color:#8E9BB5}
.foot-legal p{margin:0 0 8px}

/* ---------- misc ---------- */
.notice{background:var(--sand);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 11px 11px 0;padding:18px 20px;font-size:15.5px}
.notice strong{color:var(--navy)}
.hide{display:none!important}
.stack>*+*{margin-top:14px}
.faq{border-top:1px solid var(--line);padding:20px 0}
.faq h3{font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:6px}
.faq p{margin:0;font-size:15.5px;color:#46506A}

/* ============================================================================
   v2 — 11 September 2026. Changes driven by the UX laws in
   05_Product/Website/UX-LAWS-APPLIED.md. Each rule below names the law it serves.
   ========================================================================= */

/* Fitts's law + minimise target distance: every tappable thing is at least 48px
   in its smallest dimension, and buttons go full width on a phone so the target
   is the width of the screen rather than a word. */
.btn{min-height:52px}
.btn-sm{min-height:44px}
@media(max-width:560px){
  .btns .btn{width:100%}
  .btns{gap:10px}
}
nav.main a{min-height:44px;display:inline-flex;align-items:center}

/* Von Restorff: one ember-red element per view carries the primary action, so it
   is the thing the eye lands on. The code link is deliberately the odd one out in
   the header, because the people who need it are looking for exactly that. */
.navcode{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--navy);
  text-decoration:none;border:1.5px solid var(--line-strong);border-radius:999px;
  padding:9px 15px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.navcode:hover{border-color:var(--navy);background:var(--paper);color:var(--navy)}
@media(max-width:860px){.navcode{margin-left:0}}

/* Uniform connectedness: a shared enclosure says "these belong together" more
   strongly than proximity alone, so grouped content sits inside one panel. */
.group{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)}
.group + .group{margin-top:16px}

/* Zeigarnik effect: an unfinished thing pulls people back, so progress is always
   visible and never rounds up to "done". */
.progress-note{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--grey)}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:block}
.dots i.on{background:var(--sage)}

/* Serial position: the first and last steps of a sequence get the visual weight. */
.steps{counter-reset:step;margin:26px 0 0;padding:0;list-style:none}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 52px}
.steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--serif);
  font-size:16px;display:grid;place-items:center}
.steps li:last-child{padding-bottom:0}
.steps li::after{content:"";position:absolute;left:17px;top:36px;bottom:8px;width:1.5px;
  background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{font-family:var(--sans);font-size:17px;margin-bottom:4px}
.steps p{font-size:15.5px;color:#46506A;margin:0}

/* Law of similarity: anything marked "soon" looks identical wherever it appears,
   so the reader learns the pattern once. */
.soon{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);
  background:#FBF1DA;border-radius:999px;padding:6px 13px}
.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* The watchlist offer. Law of proximity: the form sits tight under what it gives you. */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:860px){.offer{grid-template-columns:1fr;gap:24px}}
.offer-cover{border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(27,42,74,.12);
  max-width:300px;margin:0 auto}

/* Doherty threshold: anything that waits says so within 400ms rather than
   appearing frozen. */
.loading{display:inline-flex;align-items:center;gap:9px;color:var(--grey);font-size:15px}
.loading::before{content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--navy);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loading::before{animation:none}}

/* Peak-end rule: the end of a result screen is a next step, never a bare score. */
.nextstep{background:var(--sage-pale);border:1px solid #BFDBCC;border-radius:var(--radius);
  padding:24px;margin-top:26px;text-align:left}
.nextstep h3{font-size:19px;margin-bottom:6px}
.nextstep p{margin-bottom:0;font-size:15.5px}

/* A form that has done its job stops asking. Peak-end again: what is left on screen is the
   thing they came for, not an empty box with a red bubble over it. */
form.done .field,
form.done button[type=submit]{display:none}
form.done .form-msg{margin-top:0}

/* Hick's law only pays off if all four choices are visible at once. On a narrow phone the nav
   was wrapping "The course" onto an orphan second line, which reads as an afterthought rather
   than as one of the four things you can do here. Tighten it so the four sit in one row, and
   keep the 44px touch target. */
@media(max-width:560px){
  nav.main{flex-wrap:nowrap;gap:0;justify-content:space-between;width:100%;overflow:visible}
  nav.main a{padding:8px 6px;font-size:13.5px}
}