/* legitcourse.com
   Paper and ink with a single oxblood accent. Spectral carries the voice,
   IBM Plex Sans carries the reading, and Plex Mono appears only where the
   content is genuinely data (locale tags, figures), never as decoration. */
:root{
  --paper:#fafaf8; --paper-2:#f2f2ee; --ink:#15171b; --ink-2:#4b525b;
  --ink-3:#747c86; --rule:#e2e2dc; --accent:#8c1d2f; --accent-soft:#f4e9eb;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;overflow-wrap:break-word;
}
a{color:inherit}
h1,h2,h3{font-family:Spectral,Georgia,serif;font-weight:600;line-height:1.14;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  max-width:var(--max);margin:0 auto;padding:26px 28px 0;flex-wrap:wrap}
.mark{font-family:Spectral,serif;font-weight:700;font-size:1.25rem;text-decoration:none;
  letter-spacing:.01em}
.top nav{display:flex;gap:22px;align-items:baseline;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--ink-2);font-size:.93rem}
.top nav a:hover{color:var(--ink)}
.nav-cta{color:var(--accent)!important;font-weight:500}
.nav-short{display:none}

/* hero: the locale matrix is the one loud element on the page */
.hero{max-width:var(--max);margin:0 auto;padding:66px 28px 10px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.35rem);letter-spacing:-.012em}
.lede{margin-top:22px;font-size:1.16rem;color:var(--ink-2);max-width:46ch}
.sub{margin-top:14px;color:var(--ink-3);max-width:46ch;font-size:1rem}
.btn{display:inline-block;margin-top:28px;background:var(--accent);color:var(--paper);
  text-decoration:none;font-weight:500;font-size:1rem;padding:13px 24px;border-radius:2px}
.btn:hover{background:#741726}
.hero-matrix{display:flex;flex-wrap:wrap;gap:4px 5px;align-content:flex-start;padding-top:8px}
.hero-matrix span{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-3);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;
  padding:2px 5px;white-space:nowrap;
}
/* a handful pulled forward so the block reads as a live estate, not wallpaper */
.hero-matrix span:nth-child(7n+1){color:var(--accent);background:var(--accent-soft);
  border-color:#e6d2d6}
.hero-right{display:flex;flex-direction:column}
.matrix-note{margin-top:16px;font-size:.85rem;color:var(--ink-3);max-width:42ch}
@media(max-width:900px){
  /* the hard break is a desktop line balance; on a narrow column it
     strands a word, so let the headline wrap on its own */
  .hero h1 br{display:none}
  .hero{grid-template-columns:1fr;gap:34px;padding-top:44px}
  /* the matrix is decorative past the first rows, so it fades out rather
     than being cut mid row, which looked like a rendering fault */
  .hero-matrix{max-height:188px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 64%,transparent 100%)}
  .matrix-note{margin-top:12px}
}

/* evidence band */
.evidence{max-width:var(--max);margin:52px auto 0;padding:26px 28px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.evidence b{display:block;font-family:Spectral,serif;font-size:2.15rem;font-weight:700;
  line-height:1;letter-spacing:-.02em}
.evidence span{display:block;margin-top:7px;color:var(--ink-3);font-size:.92rem;max-width:22ch}
@media(max-width:700px){.evidence{grid-template-columns:1fr;gap:20px}}

/* courses */
.course{max-width:var(--max);margin:0 auto;padding:76px 28px 0}
.course-head{max-width:66ch}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--accent);
  margin-bottom:12px}
.course h2{font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.01em}
.for{margin-top:16px;color:var(--ink-2);font-size:1.05rem;max-width:58ch}

/* stage list: a genuine sequence, so it is numbered */
.stages{list-style:none;counter-reset:s;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.stages li{counter-increment:s;padding:20px 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:2.1rem 1fr;gap:0 14px;align-items:start;
  /* the two columns of stages equalise their heights, and without this the
     spare height is shared out between the title row and the body row, so
     paragraphs in adjacent stages start on different lines */
  align-content:start}
/* the number sits in its own column beside the whole entry, so the title and
   the body both belong to column two. Without the explicit placement the
   paragraph wraps onto a second row and is laid out inside the 2.1rem
   number column, one word per line. */
.stages li::before{content:counter(s);grid-column:1;grid-row:1;
  font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;color:var(--ink-3);padding-top:.32rem}
.stages h3,.stages li p{grid-column:2}
.stages h3{font-size:1.12rem;font-weight:600}
.stages p{margin-top:7px;color:var(--ink-2);font-size:.95rem;line-height:1.55}
@media(max-width:820px){.stages{grid-template-columns:1fr;gap:0}}
.capstone{margin-top:26px;padding:16px 20px;background:var(--paper-2);
  border-left:3px solid var(--accent);color:var(--ink-2);font-size:.96rem;max-width:74ch}
.capstone b{color:var(--ink);font-weight:600}

/* affiliate: structurally different, because the content branches */
.branch .foundation{margin-top:36px;padding:24px 26px;border:1px solid var(--rule);
  border-radius:3px;background:#fff}
.branch .foundation h3{font-size:1.15rem}
.branch .foundation ul{margin:14px 0 0;padding-left:19px;color:var(--ink-2)}
.branch .foundation li{margin-bottom:7px;font-size:.97rem}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px;position:relative}
/* the fork: a stem down from the shared foundation, then a bar whose ends
   drop into each track. The shape is the information. */
.tracks::before{content:"";position:absolute;top:-52px;left:50%;width:1px;height:27px;
  background:var(--rule)}
.tracks::after{content:"";position:absolute;top:-26px;left:25%;right:25%;height:26px;
  border:1px solid var(--rule);border-bottom:0;border-radius:3px 3px 0 0}
.track{padding:26px;border:1px solid var(--rule);border-radius:3px;background:#fff}
.track.lead{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.track h3{font-size:1.3rem}
.track-for{margin-top:6px;color:var(--accent);font-size:.9rem;font-weight:500}
.track dl{margin:18px 0 0}
.track dt{font-weight:600;font-size:.99rem;margin-top:14px}
.track dd{margin:4px 0 0;color:var(--ink-2);font-size:.94rem;line-height:1.5}
.track .capstone{margin-top:22px;background:var(--paper-2)}
@media(max-width:820px){.tracks{grid-template-columns:1fr;margin-top:26px}
  .tracks::before,.tracks::after{display:none}}

/* how it works */
.how{max-width:var(--max);margin:80px auto 0;padding:46px 28px;
  background:var(--ink);color:#d6d8dc}
.how h2{color:var(--paper);font-size:clamp(1.7rem,2.8vw,2.2rem)}
.how-lede{margin-top:14px;color:#a9aeb6;max-width:56ch}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px}
.flow h3{color:var(--paper);font-size:1.18rem}
.flow p{margin-top:8px;font-size:.94rem;line-height:1.55;color:#a9aeb6}
.how-foot{margin-top:32px;padding-top:22px;border-top:1px solid #2b2e34;
  color:#a9aeb6;font-size:.94rem;max-width:70ch}
@media(max-width:760px){.flow{grid-template-columns:1fr;gap:22px}}

/* waitlist */
.signup{max-width:var(--max);margin:0 auto;padding:70px 28px 0}
.signup h2{font-size:clamp(1.7rem,2.8vw,2.2rem)}
.signup > p{margin-top:14px;color:var(--ink-2);max-width:56ch}
#wl{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;align-items:stretch}
#wl input,#wl select{font:inherit;font-size:.98rem;padding:12px 14px;border:1px solid #cfd0ca;
  border-radius:2px;background:#fff;color:var(--ink);min-width:0}
#wl input{flex:1 1 260px}
#wl select{flex:0 1 210px}
#wl button{font:inherit;font-weight:500;font-size:.98rem;padding:12px 26px;border:0;
  border-radius:2px;background:var(--accent);color:var(--paper);cursor:pointer}
#wl button:hover{background:#741726}
#wl button:disabled{opacity:.6;cursor:default}
.reply{margin-top:12px;font-size:.95rem;min-height:1.2em}
.reply.good{color:#1d6b3f}
.reply.bad{color:var(--accent)}
.fine{margin-top:10px;color:var(--ink-3);font-size:.85rem}

footer{max-width:var(--max);margin:74px auto 0;padding:26px 28px 48px;
  border-top:1px solid var(--rule);color:var(--ink-3);font-size:.9rem}
footer a{color:var(--accent)}


/* ---- narrow screens ------------------------------------------------------
   Above this width the page is a reading column inside a wider page. Below it
   the column is the whole screen, so the gutters come in, the display type
   comes down a step, the header drops to the wordmark and one call to action,
   and the form stops pretending to be a row. Tap targets are kept at 44px. */
@media(max-width:640px){
  .top{padding:18px 20px 0;gap:14px;flex-wrap:nowrap;align-items:center}
  /* the same three destinations are a thumb flick below the fold, so the
     header keeps only the thing you cannot get to by scrolling */
  .top nav a:not(.nav-cta){display:none}
  .top nav{gap:0}
  .nav-cta{border:1px solid var(--accent);border-radius:2px;padding:9px 13px;
    font-size:.85rem;white-space:nowrap;line-height:1}
  .nav-long{display:none}
  .nav-short{display:inline}

  .hero{padding:34px 20px 4px;gap:26px}
  .hero h1{font-size:1.92rem;letter-spacing:-.004em;line-height:1.16}
  .lede{margin-top:16px;font-size:1.05rem}
  .sub{margin-top:12px;font-size:.95rem}
  .btn{display:block;width:100%;text-align:center;margin-top:22px;padding:15px 20px}
  .hero-matrix{max-height:132px;gap:4px}
  .hero-matrix span{font-size:.66rem;padding:2px 4px}
  .matrix-note{font-size:.82rem}

  .evidence{margin-top:36px;padding:22px 20px;gap:18px}
  .evidence b{font-size:1.85rem}
  .evidence span{max-width:34ch;margin-top:4px}

  .course{padding:52px 20px 0}
  .course h2{font-size:1.72rem}
  .for{margin-top:14px;font-size:1rem}
  .stages{margin-top:24px}
  .stages li{padding:16px 0;grid-template-columns:1.6rem 1fr;gap:0 10px}
  .stages h3{font-size:1.06rem}
  .capstone{margin-top:22px;padding:14px 16px;font-size:.93rem}
  .branch .foundation{margin-top:28px;padding:20px}
  .branch .foundation li{font-size:.94rem}
  .tracks{gap:18px}
  .track{padding:20px}
  .track h3{font-size:1.18rem}

  .how{margin-top:56px;padding:38px 20px}
  .how h2{font-size:1.6rem}
  .how-lede{margin-top:12px;font-size:.98rem}
  .flow{margin-top:26px;gap:20px}
  .how-foot{margin-top:26px;padding-top:18px}

  .signup{padding:52px 20px 0}
  .signup h2{font-size:1.6rem}
  /* stacked, because a three item row at this width leaves a select and a
     button fighting over 180px */
  #wl{flex-direction:column;gap:10px;margin-top:22px}
  #wl input,#wl select,#wl button{flex:0 0 auto;width:100%;padding:14px}
  #wl button{padding:15px 20px}

  footer{margin-top:56px;padding:22px 20px 40px}
  footer p + p{margin-top:6px}
}
@media(max-width:360px){
  .hero h1{font-size:1.76rem}
  .nav-cta{font-size:.8rem;padding:8px 10px}
}

/* ==========================================================================
   Pages beyond the homepage: the sales pages, the account, the review queue.
   The homepage is a single wide composition; everything here is a reading
   column with the same paper, ink and one accent, so the two do not read as
   two different sites.
   ========================================================================== */
.page{max-width:var(--max);margin:0 auto;padding:0 28px}
.page.narrow{max-width:640px}
.plain-link{color:var(--accent);text-decoration:none;border-bottom:1px solid #e3ccd1}
.plain-link:hover{border-bottom-color:var(--accent)}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.88em}
.muted{color:var(--ink-3)}
.sep{color:var(--rule)}

.sales-head{padding:56px 0 0;max-width:720px}
.sales-head h1{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.012em;margin-top:6px}
.sales-head .lede{margin-top:18px;font-size:1.14rem;color:var(--ink-2);max-width:52ch}

.block{padding:46px 0 0;max-width:820px}
.block h2{font-size:clamp(1.45rem,2.4vw,1.9rem)}
.block-lede{margin-top:12px;color:var(--ink-2);max-width:62ch}
.summary{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.more{margin-top:22px}
.more a{color:var(--accent);text-decoration:none;font-weight:500;border-bottom:1px solid #e3ccd1}
.more a:hover{border-bottom-color:var(--accent)}

/* the buy box. Price first, because hiding it is a tell */
.buy{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.price{font-family:Spectral,serif;font-size:1.9rem;font-weight:700;line-height:1}
.price span{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:.85rem;
  font-weight:400;color:var(--ink-3);margin-top:6px}
.price.muted{font-size:1.15rem;color:var(--ink-3);font-weight:600}
.owned{font-weight:500;color:#1d6b3f}
.facts{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:18px;color:var(--ink-3);font-size:.92rem}
.facts b{font-family:Spectral,serif;font-size:1.25rem;color:var(--ink);margin-right:5px}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:920px}
.ticks,.crosses,.outcomes{list-style:none;margin:16px 0 0;padding:0;color:var(--ink-2)}
.ticks li,.crosses li,.outcomes li{position:relative;padding-left:26px;margin-bottom:10px;
  font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:4px;top:.45em;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}
.crosses li::before{content:"";position:absolute;left:3px;top:.5em;width:11px;height:1px;
  background:var(--ink-3)}
.outcomes li::before{content:"";position:absolute;left:2px;top:.6em;width:12px;height:1px;
  background:var(--accent)}

.stages.one-col{grid-template-columns:1fr;gap:0;margin-top:22px}

/* what you submit: a numbered contract, not a feature list */
.checkpoints{list-style:none;counter-reset:cp;margin:22px 0 0;padding:0}
.checkpoints li{counter-increment:cp;display:grid;grid-template-columns:2rem 1fr;gap:0 14px;
  padding:14px 0;border-top:1px solid var(--rule)}
.checkpoints li::before{content:counter(cp);font-family:"IBM Plex Mono",monospace;
  font-size:.8rem;color:var(--ink-3);padding-top:.3rem}
.checkpoints b{font-size:1rem}
.checkpoints span{display:block;margin-top:5px;color:var(--ink-2);font-size:.94rem;line-height:1.55}

.faq{margin-top:18px}
.faq dt{font-family:Spectral,serif;font-size:1.1rem;font-weight:600;margin-top:20px}
.faq dd{margin:6px 0 0;color:var(--ink-2);font-size:.97rem;max-width:64ch}

/* course index cards */
.course-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.course-card{padding:24px;border:1px solid var(--rule);border-radius:3px;background:#fff;
  display:flex;flex-direction:column}
.course-card.owned{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.course-card h2{font-size:1.3rem;margin-top:4px}
.course-card h2 a{text-decoration:none}
.course-card .card-line{margin-top:10px;color:var(--ink-2);font-size:.95rem;flex:1 1 auto}
.course-card .facts{gap:16px;font-size:.85rem;margin-top:18px}
.course-card .facts b{font-size:1.05rem}
.card-foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.card-foot .price{font-size:1.3rem}

/* forms */
.stack{display:flex;flex-direction:column;gap:16px;margin-top:22px;max-width:440px}
.stack label{display:block;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.stack input,.stack textarea,.stack select{display:block;width:100%;margin-top:7px;font:inherit;
  font-size:1rem;padding:12px 14px;border:1px solid #cfd0ca;border-radius:2px;background:#fff;
  color:var(--ink)}
.stack textarea{resize:vertical;line-height:1.5}
.stack .btn{border:0;cursor:pointer;align-self:flex-start}
.hint{color:var(--ink-3);font-size:.85rem;margin-top:-6px;max-width:52ch}
.form-links{margin-top:22px;font-size:.93rem;display:flex;gap:10px;flex-wrap:wrap}
.notice{margin-top:4px;padding:13px 16px;border-left:3px solid var(--rule);background:var(--paper-2);
  color:var(--ink-2);font-size:.95rem;max-width:64ch}
.notice.good{border-left-color:#1d6b3f}
.notice.bad{border-left-color:var(--accent)}
.cta-row{margin-top:24px}

/* account */
.enrol-card{margin-top:24px;padding:24px;border:1px solid var(--rule);border-radius:3px;
  background:#fff}
.enrol-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap}
.enrol-head h3{font-size:1.25rem}
.enrol-head h3 a{text-decoration:none}
.progress-line{color:var(--ink-3);font-size:.9rem;font-family:"IBM Plex Mono",monospace}
.bar{height:4px;background:var(--paper-2);border-radius:2px;margin-top:14px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent)}
.cp-list{list-style:none;counter-reset:k;margin:18px 0 0;padding:0}
.cp{counter-increment:k;display:flex;gap:18px;justify-content:space-between;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.cp-main{flex:1 1 320px}
.cp-main b{font-size:.99rem}
.cp-brief{display:block;margin-top:4px;color:var(--ink-3);font-size:.9rem;line-height:1.5}
.cp-feedback{display:block;margin-top:9px;padding:10px 13px;background:var(--paper-2);
  border-left:3px solid var(--accent);color:var(--ink-2);font-size:.92rem}
.cp-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cp.passed .cp-main b{color:#1d6b3f}
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  padding:3px 8px;border-radius:2px;background:var(--paper-2);color:var(--ink-3);
  border:1px solid var(--rule);white-space:nowrap}
.badge.good{background:#e9f2ec;color:#1d6b3f;border-color:#cfe3d6}
.badge.warn{background:#fdf3e3;color:#8a5a12;border-color:#f0e0c4}
.badge.bad{background:var(--accent-soft);color:var(--accent);border-color:#e6d2d6}

/* admin */
.stat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:10px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0}
.stat-row b{display:block;font-family:Spectral,serif;font-size:1.7rem;font-weight:700;line-height:1}
.stat-row span{display:block;margin-top:6px;color:var(--ink-3);font-size:.85rem}
.review-card{margin-top:20px;padding:20px;border:1px solid var(--rule);border-radius:3px;
  background:#fff}
.review-meta{font-size:.92rem;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;
  align-items:baseline}
.review-meta b{color:var(--ink);font-size:1rem}
.review-link{margin-top:8px;font-size:.92rem;word-break:break-all}
.review-notes{margin-top:10px;padding:12px 14px;background:var(--paper-2);color:var(--ink-2);
  font-size:.93rem;white-space:pre-wrap}
.review-form{margin-top:14px}
.review-form textarea{width:100%;font:inherit;font-size:.95rem;padding:11px 13px;
  border:1px solid #cfd0ca;border-radius:2px;resize:vertical}
.review-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.review-actions .btn{border:0;cursor:pointer;font-size:.95rem;padding:11px 20px;margin-top:0}
.review-actions .btn.ghost{border:1px solid var(--accent)}
table.grid{width:100%;border-collapse:collapse;margin-top:16px;font-size:.92rem}
table.grid th{text-align:left;font-weight:600;color:var(--ink-3);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;padding:8px 12px 8px 0;
  border-bottom:1px solid var(--rule)}
table.grid td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;
  color:var(--ink-2)}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form select,.inline-form button{font:inherit;font-size:.85rem;padding:6px 10px;
  border:1px solid #cfd0ca;border-radius:2px;background:#fff}
.inline-form button{background:var(--accent);color:var(--paper);border:0;cursor:pointer}
.table-wrap{overflow-x:auto}

/* certificate */
.certificate{margin-top:56px;padding:44px 40px;border:1px solid var(--rule);border-radius:3px;
  background:#fff;border-top:4px solid var(--accent)}
.certificate.revoked{border-top-color:var(--ink-3);background:var(--paper-2)}
.certificate h1{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:8px}
.cert-course{margin-top:10px;font-size:1.1rem;color:var(--ink-2)}
.cert-facts{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:28px 0 0;
  padding-top:22px;border-top:1px solid var(--rule);font-size:.95rem}
.cert-facts dt{color:var(--ink-3)}
.cert-facts dd{margin:0;color:var(--ink-2)}
.cert-note{margin-top:24px;color:var(--ink-3);font-size:.88rem;max-width:60ch}

@media(max-width:900px){
  .course-cards{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .two-up{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  .page{padding:0 20px}
  .sales-head{padding-top:36px}
  .sales-head h1{font-size:1.85rem}
  .sales-head .lede{font-size:1.05rem;margin-top:14px}
  .block{padding-top:36px}
  .block h2{font-size:1.4rem}
  .buy{gap:14px}
  .buy .btn,.stack .btn{width:100%;text-align:center}
  .facts{gap:14px 20px;font-size:.88rem}
  .checkpoints li{grid-template-columns:1.6rem 1fr;gap:0 10px}
  .enrol-card,.course-card,.review-card{padding:18px}
  .certificate{padding:28px 20px;margin-top:36px}
  .cert-facts{grid-template-columns:1fr;gap:2px}
  .cert-facts dd{margin-bottom:10px}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:14px}
  .cp{gap:10px}
  .cp-side{width:100%;justify-content:space-between}
  /* a table at this width is a scroller, not a stack, because the columns
     only mean anything next to each other */
  table.grid{display:block;overflow-x:auto;white-space:nowrap}
  .review-actions .btn{flex:1 1 auto;text-align:center}
}
.inline-form button.danger{background:transparent;color:var(--accent);
  border:1px solid #e0c8cd}
.inline-form button.danger:hover{background:var(--accent-soft)}

/* ==========================================================================
   The reader. A lesson is the one place on this site that is purely for
   reading, so the column is narrow, the measure is about 68 characters, and
   nothing competes with the prose.
   ========================================================================== */
.stage-list{list-style:none;counter-reset:st;margin:8px 0 0;padding:0}
.stage-row{counter-increment:st;display:flex;gap:20px;justify-content:space-between;
  align-items:flex-start;padding:22px 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.stage-main{flex:1 1 340px}
.stage-row h2{font-size:1.2rem}
.stage-row h2::before{content:counter(st) ". ";font-family:"IBM Plex Mono",monospace;
  font-size:.8rem;color:var(--ink-3)}
.stage-row h2 a{text-decoration:none}
.stage-summary{margin-top:8px;color:var(--ink-2);font-size:.95rem;max-width:62ch}
.stage-meta{margin-top:8px;color:var(--ink-3);font-size:.86rem;
  font-family:"IBM Plex Mono",monospace}
.stage-row.locked .stage-main{opacity:.55}
.stage-side{flex:0 0 auto}

.lesson-list{list-style:none;counter-reset:ls;margin:16px 0 0;padding:0}
.lesson-list li{counter-increment:ls;display:flex;justify-content:space-between;gap:14px;
  align-items:baseline;padding:13px 0;border-top:1px solid var(--rule)}
.lesson-list li::before{content:counter(ls);font-family:"IBM Plex Mono",monospace;
  font-size:.8rem;color:var(--ink-3);margin-right:12px}
.lesson-list a{text-decoration:none;font-weight:500;flex:1 1 auto}
.lesson-list a:hover{color:var(--accent)}
.lesson-list .lesson-meta{color:var(--ink-3);font-size:.85rem;white-space:nowrap}
.lesson-list li.read a{color:var(--ink-2)}

/* lesson prose */
.lesson .sales-head h1{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.prose{font-size:1.06rem;line-height:1.72;color:#23262b;max-width:68ch}
.prose h2{font-family:Spectral,Georgia,serif;font-size:1.35rem;margin:38px 0 0;
  padding-top:22px;border-top:1px solid var(--rule)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.1rem;margin:26px 0 0}
.prose p{margin-top:16px}
.prose ul,.prose ol{margin:16px 0 0;padding-left:22px}
.prose li{margin-bottom:9px}
.prose strong{font-weight:600;color:var(--ink)}
.prose code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--paper-2);
  padding:2px 5px;border-radius:2px;border:1px solid var(--rule)}
.prose pre{margin-top:18px;padding:15px 17px;background:var(--ink);border-radius:3px;
  overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;color:#d6d8dc;font-size:.85rem;
  white-space:pre}
.prose table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule)}

.stuck{padding:18px 22px;background:var(--paper-2);border-left:3px solid var(--accent);
  max-width:68ch}
.stuck b{font-family:Spectral,serif;font-size:1.02rem}
.stuck p{margin-top:7px;color:var(--ink-2);font-size:.96rem;line-height:1.6}
.lesson-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lesson-foot .btn{border:0;cursor:pointer;margin-top:0}

/* quiz */
.quiz{margin-top:8px}
.question{border:0;border-top:1px solid var(--rule);margin:0;padding:26px 0 0}
.question legend{padding:0;font-family:Spectral,Georgia,serif;font-size:1.12rem;
  font-weight:600;line-height:1.35;margin-bottom:14px}
.qnum{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--ink-3);
  margin-right:6px}
.option{display:block;padding:13px 16px;border:1px solid var(--rule);border-radius:3px;
  background:#fff;margin-bottom:9px;cursor:pointer}
.option:hover{border-color:var(--ink-3)}
.option input{margin-right:10px}
.option-text{font-size:.98rem}
.option-explain{display:block;margin-top:9px;padding-left:24px;color:var(--ink-2);
  font-size:.92rem;line-height:1.55}
/* after submission the whole set is marked up, because the explanations on the
   answers you did not pick are half the teaching */
.option.right{border-color:#1d6b3f;background:#f2f8f4}
.option.right .option-text{font-weight:600;color:#1d6b3f}
.option.wrong{border-color:var(--accent);background:var(--accent-soft)}
.option.wrong .option-text{font-weight:600;color:var(--accent)}
.quiz .btn{border:0;cursor:pointer;margin-top:26px}

@media(max-width:640px){
  .prose{font-size:1.02rem;line-height:1.68}
  /* a long URL in an example is more useful wrapped than behind a sideways
     scroll nobody notices on a phone */
  .prose pre{padding:13px 14px}
  .prose pre code{white-space:pre-wrap;overflow-wrap:anywhere}
  .prose h2{font-size:1.22rem;margin-top:30px;padding-top:18px}
  .stuck{padding:16px 18px}
  .stage-row{gap:12px;padding:18px 0}
  .stage-side{width:100%}
  .question{padding-top:22px}
  .question legend{font-size:1.05rem}
  .option{padding:12px 14px}
  .lesson-foot .btn{width:100%;text-align:center}
}

/* case pack: a document list. Close to the stage list, but each row carries
   provenance and a hash, which are data and therefore set in mono. */
.docs{list-style:none;counter-reset:dc;margin:8px 0 0;padding:0}
.docs li{counter-increment:dc;display:flex;gap:28px;justify-content:space-between;
  align-items:flex-start;padding:26px 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.doc-main{flex:1 1 380px}
.docs h2{font-size:1.25rem}
.docs h2::before{content:counter(dc,decimal-leading-zero) ". ";
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--ink-3)}
.doc-meta{margin-top:8px;color:var(--ink-3);font-size:.84rem;
  font-family:"IBM Plex Mono",monospace}
.doc-what{margin-top:12px;color:var(--ink-2);font-size:.96rem;max-width:66ch}
.doc-teaches{margin-top:10px;font-size:.94rem;color:var(--ink-2);max-width:66ch}
.doc-teaches b{color:var(--ink)}
.doc-hash{margin-top:12px;font-size:.72rem;color:var(--ink-3);overflow-wrap:anywhere}
.doc-hash code{font-family:"IBM Plex Mono",monospace}
.doc-side{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
.doc-facts{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--ink-3)}
.doc-side .btn{margin-top:0;padding:9px 18px;font-size:.92rem}
.docs li.locked .doc-main{opacity:.62}

/* the pack on a sales page: the same documents, listed rather than expanded */
.pack-list{list-style:none;margin:18px 0 0;padding:0}
.pack-list li{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--rule);font-size:.95rem}
.pack-list .pack-name{flex:1 1 auto}
.pack-list a{font-weight:500}
.pack-list .pack-state{font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  color:var(--ink-3);white-space:nowrap}

@media(max-width:640px){
  .docs li{gap:14px;padding:20px 0}
  .doc-side{width:100%;text-align:left;align-items:stretch;flex-direction:row;
    justify-content:space-between;align-items:center;flex-wrap:wrap}
  .doc-side .btn{width:auto}
  .doc-hash{font-size:.68rem}
  .pack-list li{flex-wrap:wrap;gap:4px 12px}
}

/* ===== course finder hub (2026-10) ===================================== */
.hub-hero,.hub-block,.page-head,.crumbs,.guide,.ad-slot{max-width:var(--max);margin-left:auto;margin-right:auto;
  padding-left:28px;padding-right:28px}
.hub-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-top:64px;padding-bottom:30px;align-items:center}
.hub-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.012em}
.hub-search{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:26px;
  box-shadow:0 1px 0 var(--rule),0 18px 40px -28px rgba(21,23,27,.35)}
.hub-search-note{margin-top:14px;font-size:.85rem;color:var(--ink-3)}
.finder{display:grid;gap:14px}
.finder-field{display:grid;gap:6px}
.finder label{font-size:.82rem;font-weight:600;color:var(--ink-2);letter-spacing:.02em;text-transform:uppercase}
.finder select{font:inherit;font-size:16px;padding:12px 40px 12px 12px;border:1px solid #cfcfc7;border-radius:3px;
  background:#fff 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' fill='none' stroke='%234b525b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance:none;appearance:none;color:var(--ink);min-height:48px;width:100%}
.finder select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.finder-go{font:inherit;font-weight:600;font-size:1.05rem;background:var(--accent);color:var(--paper);border:0;
  border-radius:3px;padding:14px;min-height:50px;cursor:pointer}
.finder-go:hover{background:#741726}.finder-go:disabled{opacity:.6;cursor:wait}
.finder-err{min-height:1.2em;font-size:.88rem;color:var(--accent)}
.hub-block .finder{grid-template-columns:1fr 1fr auto;align-items:end}
.hub-block .finder-err{grid-column:1/-1}

/* the optimizing overlay: one ring fills over exactly 7s while a dot orbits */
.optimizing{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:rgba(250,250,248,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px}
.optimizing[hidden]{display:none}
body.opt-lock{overflow:hidden}
.opt-card{text-align:center;max-width:420px;position:relative}
.opt-ring{width:170px;height:170px;display:block;margin:0 auto}
.opt-track{fill:none;stroke:var(--rule);stroke-width:7}
.opt-fill{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  transform:rotate(-90deg);transform-origin:60px 60px}
.opt-orbit{fill:var(--accent);transform-origin:60px 60px}
.optimizing.run .opt-fill{animation:opt-fill 7s linear forwards}
.optimizing.run .opt-orbit{animation:opt-spin 1.1s linear infinite}
@keyframes opt-fill{to{stroke-dashoffset:0}}
@keyframes opt-spin{to{transform:rotate(360deg)}}
.opt-pct{position:absolute;top:62px;left:0;right:0;font-family:"IBM Plex Mono",monospace;font-size:1.3rem;font-weight:500}
.opt-title{margin-top:22px;font-size:1.6rem}
.opt-line{margin-top:8px;color:var(--ink-2);min-height:1.6em}
/* the house reduced-motion rule kills all animation; keep the progress honest
   with the numeric counter, which is driven by script, not CSS */

.hub-block{padding-top:46px;padding-bottom:10px}
.hub-head{max-width:66ch;margin-bottom:22px}
.hub-head h2,.hub-how h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.hub-head p{margin-top:8px;color:var(--ink-2)}
.hub-how .flow{margin-top:22px}.hub-how .fine{margin-top:18px}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.type-grid.three{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.type-card{display:block;border:1px solid var(--rule);border-radius:4px;padding:18px 18px 20px;background:#fff;
  text-decoration:none;position:relative}
.type-card h3{font-size:1.15rem;margin-top:10px}
.type-card p{margin-top:8px;font-size:.92rem;color:var(--ink-2)}
.type-card.live:hover{border-color:var(--accent);box-shadow:0 10px 26px -20px rgba(140,29,47,.55)}
.type-card.soon{background:var(--paper-2);color:var(--ink-3)}
.type-card.soon h3{color:var(--ink-2)}
.type-tag{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.soon .type-tag{color:var(--ink-3)}
.mini-facts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-size:.85rem}
.mini-facts li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);padding-top:6px}
.mini-facts span{color:var(--ink-3)}.mini-facts b{text-align:right;font-weight:600}
.state-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.state-grid a,.state-grid span{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border:1px solid var(--rule);
  border-radius:3px;text-decoration:none;background:#fff;font-size:.95rem}
.state-grid a:hover{border-color:var(--accent)}
.state-grid b{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--accent);min-width:1.8em}
.state-grid .pending{color:var(--ink-3);background:var(--paper-2)}
.state-table{width:100%;border-collapse:collapse;font-size:.95rem}
.state-table th,.state-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule)}
.state-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.muted,.pending{color:var(--ink-3)}
.crumbs{padding-top:26px;font-size:.85rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.page-head{padding-top:24px;max-width:var(--max)}
.page-head h1{font-size:clamp(1.9rem,3.8vw,2.9rem);max-width:24ch;letter-spacing:-.01em;margin-top:6px}
.page-head .lede{max-width:66ch}
.guide .page-head{padding-left:0;padding-right:0}
.verified{margin-top:12px;font-size:.85rem;color:var(--ink-3)}
.status-badge{display:inline-block;margin-top:14px;font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent)}
.s-optional,.s-insurance_only,.s-limited{background:var(--paper-2);color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:28px 0 0;border-radius:4px;overflow:hidden}
.facts div{background:#fff;padding:14px 16px}
.facts dt{font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.facts dd{margin:4px 0 0;font-weight:600;font-size:1.02rem}
.steps-box{margin-top:40px}
.steps-box h2,.guide-body h2,.faq h2,.sources h2{font-size:1.55rem}
.steps{list-style:none;counter-reset:st;padding:0;margin:16px 0 0;display:grid;gap:14px}
.steps li{counter-increment:st;display:grid;grid-template-columns:2.4rem 1fr;gap:4px 12px}
.steps li::before{content:counter(st);grid-row:1/3;width:2rem;height:2rem;border-radius:50%;background:var(--accent);
  color:var(--paper);display:grid;place-items:center;font-weight:600;font-size:.9rem}
.steps h3{font-family:"IBM Plex Sans",sans-serif;font-size:1.02rem;grid-column:2}
.steps p{grid-column:2;color:var(--ink-2)}
.guide-body{max-width:72ch}
.guide-body section{margin-top:38px}
.guide-body p{margin-top:14px}
.guide-body ul{margin:14px 0 0;padding-left:1.2em}
.guide-body li{margin-top:6px}
.faq{margin-top:46px;max-width:72ch}
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style-position:outside}
.faq details p{margin-top:10px;color:var(--ink-2)}
.sources{margin-top:40px;max-width:72ch;font-size:.92rem}
.sources ul{padding-left:1.2em;margin:12px 0}
.sources .fine{margin-top:10px}
.related{padding-bottom:30px}
.small-h{font-size:1.2rem;margin:26px 0 12px}
.pill-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.pill-list a,.pill-list span{display:inline-block;padding:6px 12px;border:1px solid var(--rule);border-radius:20px;
  text-decoration:none;font-size:.9rem;background:#fff}
.pill-list a:hover{border-color:var(--accent)}
.ad-slot{display:block;min-height:250px;margin-top:32px;margin-bottom:8px}
.guide .ad-slot{padding-left:0;padding-right:0}
.ad-preview{display:grid;place-items:center;border:1px dashed #cfcfc7;color:var(--ink-3);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.08em;background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 8px,var(--paper-2) 8px,var(--paper-2) 16px)}
.partners{margin-top:32px;border:1px solid var(--accent);border-radius:4px;padding:20px;background:#fff}
.partners h2{font-size:1.25rem}
.partner{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:14px;flex-wrap:wrap}
.partner p{color:var(--ink-2);font-size:.92rem}
.partner .btn{margin-top:0}
.partners .fine{margin-top:12px}
@media(max-width:900px){.hub-hero{grid-template-columns:1fr;gap:28px;padding-top:40px}}
@media(max-width:640px){
  .hub-hero,.hub-block,.page-head,.crumbs,.guide,.ad-slot{padding-left:16px;padding-right:16px}
  .guide .page-head,.guide .ad-slot{padding-left:0;padding-right:0}
  .hub-search{padding:18px}
  .hub-block .finder{grid-template-columns:1fr}
  .state-table td:nth-child(n+3),.state-table th:nth-child(n+3){display:none}
  .opt-ring{width:140px;height:140px}.opt-pct{top:50px}
}
.hub-how .flow h3{color:var(--ink)}.hub-how .flow p{color:var(--ink-2)}
.soon-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.soon-groups>div{background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;padding:14px 18px}
.soon-groups h3{font-size:1rem;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.soon-groups ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.soon-groups li{font-size:.85rem;color:var(--ink-2);background:#fff;border:1px solid var(--rule);border-radius:20px;padding:3px 10px}
@media(max-width:820px){.soon-groups{grid-template-columns:1fr}}
/* empty trailing cells must not show the gap colour as a grey block */
.facts{background:#fff;gap:0}
.facts div{box-shadow:1px 0 0 var(--rule),0 1px 0 var(--rule)}
.facts dd{color:var(--ink)}

/* ===== guide layout v2: DMV.org module order, modernised ================ */
.guide-wrap{max-width:var(--max);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px}
.guide-wrap .guide{padding:0;max-width:none;margin:0}
.rail-inner{position:sticky;top:20px;display:grid;gap:16px;padding-top:30px}
.rail-box{border:1px solid var(--rule);border-radius:4px;background:#fff;padding:14px 16px}
.rail-box h2{font-size:1rem}
.rail-box ul{list-style:none;padding:0;margin:8px 0 0;font-size:.9rem}
.rail-box li{border-top:1px solid var(--rule);padding:7px 0}
.rail-box li:first-child{border-top:0}
.rail-box a{text-decoration:none}.rail-box a:hover{color:var(--accent)}
.rail-box .here>a{color:var(--accent);font-weight:600}
.rail .ad-slot{min-height:600px;margin:0}
.rail-offer{display:grid;gap:4px;background:var(--accent);color:var(--paper);border-radius:4px;padding:16px;text-decoration:none}
.rail-offer span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.rail-offer b{font-family:Spectral,serif;font-size:1.15rem;line-height:1.2}
.rail-offer em{font-style:normal;font-weight:600;margin-top:6px}
.stamp{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#1d6b3a;background:#e9f5ee;border:1px solid #cfe7d8;
  border-radius:20px;padding:3px 10px 3px 8px;margin-bottom:12px}
.stamp svg{width:14px;height:14px}.stamp a{color:inherit}
.hero-offer{margin-top:28px;display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center;
  background:linear-gradient(135deg,#fff 0%,var(--accent-soft) 100%);border:1px solid #e6d2d6;border-radius:6px;padding:24px 26px}
.ho-tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hero-offer h2{font-size:1.55rem;margin-top:6px}
.ho-copy>p{margin-top:6px;color:var(--ink-2)}
.ho-copy ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.ho-copy li{padding-left:24px;position:relative;font-size:.95rem}
.ho-copy li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.ho-act{display:grid;gap:8px;justify-items:center;max-width:220px}
.ho-cta{display:block;background:#f2b705;color:var(--ink);font-weight:700;text-decoration:none;padding:15px 24px;border-radius:4px;
  text-align:center;box-shadow:0 2px 0 #c99500;white-space:nowrap}
.ho-cta:hover{background:#ffc61a}
.ho-act .fine{text-align:center;font-size:.75rem;margin:0}
.overview{margin-top:28px;border-left:3px solid var(--accent);background:#fff;padding:14px 18px;border-radius:0 4px 4px 0}
.overview h2{font-size:1rem}
.overview ol{margin:8px 0 0;padding-left:1.2em;columns:2;column-gap:28px;font-size:.9rem}
.overview li{margin:3px 0;break-inside:avoid}
.overview a{text-decoration:none;color:var(--ink-2)}.overview a:hover{color:var(--accent)}
.guide-body section,.faq,.steps-box,.facts{scroll-margin-top:16px}
.chooser{margin-top:44px}
.chooser h2,.related-products h2,.feedback h2{font-size:1.3rem}
.state-chips{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.state-chips a,.state-chips span{display:block;text-align:center;padding:7px 0;border:1px solid var(--rule);border-radius:3px;background:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;text-decoration:none}
.state-chips a:hover{border-color:var(--accent);color:var(--accent)}
.state-chips span{color:var(--ink-3);background:var(--paper-2)}
.related-products{margin-top:30px}.related-products .type-grid{margin-top:12px}
.feedback{margin-top:36px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--rule);border-radius:4px;padding:14px 18px;background:#fff}
.feedback form{display:flex;gap:8px}
.feedback button{font:inherit;border:1px solid var(--rule);background:var(--paper);border-radius:3px;padding:8px 18px;cursor:pointer;min-height:40px}
.feedback button:hover{border-color:var(--accent)}
.feedback .fine{margin:0}
.ad-zone1{min-height:250px}.ad-zone2,.ad-zone2b,.ad-zone3{min-height:250px}
.ad-leaderboard{min-height:90px;max-width:var(--max)}
@media(max-width:980px){.guide-wrap{grid-template-columns:1fr;gap:0}.rail{display:none}}
@media(max-width:640px){
  .guide-wrap{padding:0 16px}
  .hero-offer{grid-template-columns:1fr;padding:18px}
  .ho-act{max-width:none;justify-items:stretch}
  .overview ol{columns:1}
}
.subnav{margin-top:28px}.subnav h2{font-size:1.2rem;margin-bottom:12px}
.rail-sub{margin:6px 0 0 10px!important;font-size:.85rem}
.rail-sub li{border-top:0!important;padding:3px 0!important}
.rail-sub a{color:var(--ink-2)}
.tilemap{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;max-width:760px;margin:0 auto 26px}
.tilemap a{aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid var(--rule);border-radius:4px;
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:500;text-decoration:none;color:var(--ink-2);
  transition:background .15s,color .15s,transform .15s}
.tilemap a:hover,.tilemap a:focus-visible{background:var(--accent);color:var(--paper);border-color:var(--accent);transform:translateY(-1px)}
.tilemap a.pending{background:var(--paper-2);color:var(--ink-3)}
@media(max-width:640px){
  .tilemap{gap:3px}.tilemap a{font-size:.62rem;border-radius:3px}
  .top nav a.nav-keep{display:inline;margin-right:14px}
}
.tilemap{max-width:580px}
@media(max-width:640px){#states .state-grid{display:none}}

/* "The law behind this page" on licensing guides: statute and rule cites
   with what each one covers, then the bodies that set and enforce them. */
.law-box{margin-top:40px;padding:22px 24px;border:1px solid var(--rule);border-left:4px solid var(--accent);
  background:#fff;max-width:72ch}
.law-box h2{font-size:1.4rem;margin:0 0 12px}
.law-box h3{font-size:1.05rem;margin:20px 0 8px}
.law-box ul{list-style:none;padding:0;margin:0}
.law-box li{padding:8px 0;border-top:1px solid var(--rule)}
.law-box li:first-child{border-top:0}
.law-box li a{font-weight:600}
.law-box li span{display:block;font-size:.9rem;color:var(--muted,#555);margin-top:2px}

/* seal logo */
html{scroll-padding-top:96px}
.top{position:sticky;top:0;z-index:50;align-items:center;padding:12px 28px;
  background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax -1px)}
.top::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:1px;
  transform:translateX(-50%);background:var(--rule)}
.mark{display:inline-flex;align-items:center;gap:13px;color:var(--ink)}
.mark .seal-top{width:52px;height:52px;flex:none}
.mark-text{display:flex;flex-direction:column;gap:5px;line-height:1}
.mark-name{font-family:Spectral,serif;font-weight:700;font-size:1.45rem;letter-spacing:.005em}
.mark-tag{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
footer .seal-foot{display:block;width:132px;height:132px;margin:8px 0 18px}
@media (max-width:640px){.top{padding:10px 20px}.mark{gap:10px}.mark .seal-top{width:42px;height:42px}
  .mark-name{font-size:1.2rem}.mark-tag{font-size:.52rem;letter-spacing:.12em}
  footer .seal-foot{width:104px;height:104px}}
/* seal mobile */
@media (max-width:640px){.mark-tag{display:none}.top nav{flex-wrap:nowrap;align-items:center}.top nav a{white-space:nowrap}}
/* seal narrow */
.mark-name{white-space:nowrap}
@media (max-width:400px){.top{padding:10px 16px;gap:10px}.mark{gap:9px}.mark .seal-top{width:36px;height:36px}
  .mark-name{font-size:1.08rem}.top nav a.nav-keep{margin-right:10px}}

/* us.driverseducation.co.uk: same structure, its own colour and mark so the
   two sites do not read as copies of each other. */
body.site-driverseducation{--accent:#1f5f8b;--accent-soft:#e6eff5}
body.site-driverseducation .mark-name{font-family:'IBM Plex Sans',sans-serif;font-weight:600;letter-spacing:-.01em}
body.site-driverseducation .mark-tag{color:#1f5f8b}