/* ============================================================
   The AI-Native Requirements Detective
   css/styles.css
   ------------------------------------------------------------
   1. Tokens          7. Lesson sections
   2. Reset + base    8. Videos + files
   3. Utilities       9. Quiz modal
   4. Topbar / nav   10. Closer + footer
   5. Hero           11. Responsive
   6. Detector strip 12. Progress + certificate
   ============================================================ */

/* ── 1. Tokens ───────────────────────────────────────────── */
:root{
  --ink:        #05090f;   /* page background            */
  --ink-2:      #08101d;   /* alternating band           */
  --panel:      #0c1626;   /* card surface               */
  --panel-2:    #101d31;   /* raised surface             */
  --line:       #1b2c47;   /* hairline border            */

  --blue:       #3fa9ff;   /* signal blue (from sigils)  */
  --blue-deep:  #1668b0;
  --brass:      #f2b735;   /* gold (from sigils)         */

  --white:      #eaf2ff;
  --text:       #b9c8de;
  --dim:        #7183a0;

  --display: "Chakra Petch", "Segoe UI", sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1180px;
  --r: 4px;

  --shadow: 0 24px 60px -28px rgba(0,0,0,.9);
}

/* ── 2. Reset + base ─────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(63,169,255,.10), transparent 70%),
    radial-gradient(760px 460px at 92% 4%, rgba(242,183,53,.07), transparent 70%);
  background-repeat:no-repeat;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  color:var(--white);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}

p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--blue); color:#04080e; }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

/* ── 3. Utilities ────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 48px);
}

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--brass); color:#0a0d12;
  padding:10px 18px; font-family:var(--mono); font-size:13px;
  text-decoration:none; border-radius:var(--r);
}
.skip:focus{ left:16px; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:22px;
}

/* scan bar (scroll progress) */
.scan{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:rgba(27,44,71,.6);
  pointer-events:none;
}
.scan span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--blue-deep), var(--blue) 60%, var(--brass));
  box-shadow:0 0 12px rgba(63,169,255,.7);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  color:var(--white);
  padding:15px 26px;
  border:1px solid var(--line);
  background:rgba(12,22,38,.7);
  border-radius:var(--r);
  transition:border-color .2s, background .2s, transform .2s, color .2s;
}
.btn:hover{ border-color:var(--blue); background:rgba(63,169,255,.10); transform:translateY(-2px); }

.btn--primary{
  color:#04080e;
  background:linear-gradient(180deg, #57b6ff, var(--blue));
  border-color:transparent;
  font-weight:500;
  box-shadow:0 10px 30px -12px rgba(63,169,255,.75);
}
.btn--primary:hover{ background:linear-gradient(180deg, #7ac6ff, #49b0ff); color:#04080e; }

/* ── 4. Topbar / nav ─────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
.topbar.is-stuck{
  background:rgba(5,9,15,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:72px;
}

.mark{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.mark__glyph{
  font-family:var(--display); font-weight:700; font-size:17px;
  color:var(--blue);
  border:1px solid var(--line);
  background:rgba(63,169,255,.08);
  padding:5px 9px; border-radius:var(--r);
  line-height:1;
}
.mark__text{ display:flex; flex-direction:column; line-height:1.1; }
.mark__small{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
}
.mark__big{
  font-family:var(--display); font-weight:700; font-size:17px;
  letter-spacing:.01em; color:var(--white);
}

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; text-decoration:none; color:var(--dim);
  padding:9px 12px; border-radius:var(--r);
  border:1px solid transparent;
  transition:color .2s, border-color .2s, background .2s;
  white-space:nowrap;
}
.nav a b{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--blue-deep); }
.nav a:hover{ color:var(--white); background:rgba(63,169,255,.07); }
.nav a.is-active{ color:var(--white); border-color:var(--line); background:rgba(63,169,255,.09); }
.nav a.is-active b{ color:var(--brass); }

.menu-btn{
  display:none;
  width:42px; height:38px;
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.menu-btn span[aria-hidden]{ display:block; width:17px; height:1.5px; background:var(--white); transition:transform .25s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ── 5. Hero ─────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(64px, 11vw, 132px) 0 clamp(56px, 8vw, 96px); overflow:hidden; }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(63,169,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,169,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 30% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 30% 30%, #000 20%, transparent 78%);
  pointer-events:none;
}
.hero__inner{ position:relative; }

.hero__title{
  font-size:clamp(46px, 9.2vw, 104px);
  letter-spacing:-.025em;
  margin-bottom:22px;
  text-wrap:balance;
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(100deg, #d5ecff 0%, #7cc6ff 26%, var(--blue) 55%, #2f96e6 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* gold chevron rule — the lockup device from the sigils */
.chev{
  display:flex; align-items:center; gap:14px;
  max-width:560px; margin:0 0 30px;
  color:var(--brass); font-family:var(--mono); font-size:12px; letter-spacing:.3em;
}
.chev::before,.chev::after{
  content:""; flex:1; height:2px;
  background:linear-gradient(90deg, transparent, var(--brass));
}
.chev::after{ background:linear-gradient(270deg, transparent, var(--brass)); }

.hero__lead{
  max-width:58ch; font-size:clamp(17px, 2vw, 19.5px);
  color:var(--text); margin-bottom:38px;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.specs{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  max-width:860px;
}
.specs > div{ background:var(--ink); padding:20px 22px; }
.specs dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin-bottom:7px;
}
.specs dd{ margin:0; color:var(--white); font-size:15.5px; }

/* ── 6. Detector strip ───────────────────────────────────── */
.detector{
  padding:clamp(40px,6vw,64px) 0;
  border-block:1px solid var(--line);
  background:var(--ink-2);
}
.detector__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim); margin-bottom:26px;
}

.sigils{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.sigils a{
  display:block; position:relative;
  text-decoration:none;
  padding:16px 16px 20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(16,29,49,.65), rgba(8,16,29,.4));
  transition:border-color .25s, transform .25s, background .25s;
  height:100%;
}
.sigils a:hover{ border-color:rgba(63,169,255,.55); transform:translateY(-4px); }
.sigils img{
  width:100%; height:auto; margin-bottom:12px;
  aspect-ratio:16/10; object-fit:contain;
  filter:saturate(1.05) drop-shadow(0 8px 22px rgba(0,0,0,.55));
  transition:filter .25s;
}
.sigils a:hover img{ filter:saturate(1.2) drop-shadow(0 10px 26px rgba(63,169,255,.35)); }
.sigils__n{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--brass); margin-bottom:4px;
}
.sigils__name{
  display:block; font-family:var(--display); font-weight:600;
  font-size:16px; color:var(--white); line-height:1.15; margin-bottom:6px;
}
.sigils__tell{ display:block; font-size:13px; line-height:1.45; color:var(--dim); }

/* ── 7. Lesson sections ──────────────────────────────────── */
.lesson{ padding:clamp(56px, 9vw, 104px) 0; }
.lesson:nth-of-type(even){ background:var(--ink-2); }

.lesson__inner{ position:relative; }

/* reticle corners — the detector motif */
.c{
  position:absolute; width:22px; height:22px;
  border:2px solid rgba(63,169,255,.5);
  opacity:0; transition:opacity .5s ease, transform .5s ease;
}
.c--tl{ top:-14px; left:clamp(8px,3vw,36px); border-right:0; border-bottom:0; transform:translate(-8px,-8px); }
.c--tr{ top:-14px; right:clamp(8px,3vw,36px); border-left:0;  border-bottom:0; transform:translate(8px,-8px); }
.c--bl{ bottom:-14px; left:clamp(8px,3vw,36px); border-right:0; border-top:0; transform:translate(-8px,8px); }
.c--br{ bottom:-14px; right:clamp(8px,3vw,36px); border-left:0; border-top:0; transform:translate(8px,8px); }
.is-seen .c{ opacity:1; transform:translate(0,0); }

.lesson__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px, 5vw, 60px);
  align-items:center;
  margin-bottom:clamp(34px, 5vw, 54px);
}
.lesson--flip .lesson__head .lesson__art{ order:2; }

.lesson__art img{
  width:100%;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.7));
}

.lesson__n{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-bottom:12px;
}
.lesson__n span{ color:var(--dim); }

.lesson__intro h2{
  font-size:clamp(34px, 5.4vw, 58px);
  margin-bottom:18px;
  letter-spacing:-.02em;
}

.lesson__tell{
  font-family:var(--mono);
  font-size:14px; line-height:1.6;
  color:var(--white);
  border-left:2px solid var(--brass);
  padding:8px 0 8px 16px;
  margin-bottom:20px;
}
.lesson__tell span{
  display:block; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:3px;
}

.lesson__desc{ color:var(--text); max-width:60ch; }

/* ── 8. Videos + files ───────────────────────────────────── */
.videos{
  display:grid; grid-template-columns:repeat(2, 1fr);
  align-items:start;
  gap:clamp(16px, 2.4vw, 26px);
  margin-bottom:clamp(26px, 3.4vw, 38px);
}

.vid{
  position:relative; display:block; width:100%; padding:0;
  aspect-ratio:16/9;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
  overflow:hidden; cursor:pointer;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.vid:hover{ border-color:rgba(63,169,255,.6); transform:translateY(-3px); box-shadow:var(--shadow); }

.vid__thumb{
  position:absolute; inset:0;
  background:var(--panel);
  width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:opacity .25s, transform .5s;
}
.vid:hover .vid__thumb{ opacity:.92; transform:scale(1.03); }

.vid::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,9,15,.15) 0%, rgba(5,9,15,.5) 55%, rgba(5,9,15,.94) 100%);
  pointer-events:none;
}

.vid__play{
  position:absolute; top:50%; left:50%; z-index:2;
  width:66px; height:66px; margin:-33px 0 0 -33px;
  border:1px solid rgba(63,169,255,.65);
  border-radius:50%;
  background:rgba(8,16,29,.62);
  backdrop-filter:blur(3px);
  transition:background .25s, border-color .25s, transform .25s;
}
.vid__play::before{
  content:""; position:absolute; top:50%; left:53%;
  width:0; height:0; transform:translate(-50%,-50%);
  border-left:17px solid var(--white);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.vid:hover .vid__play{ background:var(--blue); border-color:var(--blue); transform:scale(1.08); }
.vid:hover .vid__play::before{ border-left-color:#04080e; }

.vid__bar{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px;
}
.vid__bar b{
  font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--white); letter-spacing:.01em;
}
.vid__bar i{
  font-style:normal; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue);
}

.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* fallback link — always works, even if the embed is blocked */
.video{ display:flex; flex-direction:column; gap:9px; }
.video .vid{ flex:0 0 auto; }
.vid__link{
  align-self:flex-start;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); text-decoration:none;
  transition:color .2s;
}
.vid__link span[aria-hidden]{ margin-left:4px; }
.vid__link:hover{ color:var(--blue); }

/* files row */
.files{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 1.8vw, 18px); }

.file{
  display:flex; flex-direction:column; gap:5px;
  height:100%; text-decoration:none;
  padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
  transition:border-color .25s, background .25s, transform .25s;
}
.file:hover{ border-color:rgba(63,169,255,.6); background:var(--panel-2); transform:translateY(-3px); }

.file__kind{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue);
}
.file__name{
  font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--white); line-height:1.25;
}
.file__meta{ font-family:var(--mono); font-size:11.5px; color:var(--dim); }

.file:hover .file__kind{ color:var(--brass); }

/* the quiz card is a button, not a link */
.file--quiz{
  width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
}

/* ── 9. Quiz modal ───────────────────────────────────────── */
body.is-locked{ overflow:hidden; }

.quiz{
  width:min(680px, calc(100vw - 32px));
  max-height:min(86vh, 780px);
  padding:0; border:1px solid var(--line); border-radius:6px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  overflow:hidden;
}
.quiz::backdrop{ background:rgba(3,6,12,.82); backdrop-filter:blur(5px); }

.quiz__inner{ display:flex; flex-direction:column; max-height:inherit; }

.quiz__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 26px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(63,169,255,.09), transparent);
}
.quiz__lesson{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-bottom:6px;
}
.quiz__title{ font-size:clamp(24px, 4vw, 32px); letter-spacing:-.015em; }

.quiz__close{
  flex:0 0 auto; width:36px; height:36px; padding:0; line-height:1;
  font-size:24px; color:var(--dim); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  transition:color .2s, border-color .2s;
}
.quiz__close:hover{ color:var(--white); border-color:var(--blue); }

.quiz__dots{ display:flex; gap:6px; padding:14px 26px 0; }
.dot{
  flex:1; height:3px; border-radius:2px;
  background:var(--line); transition:background .3s;
}
.dot.is-now{ background:var(--blue); }
.dot.is-right{ background:#3ecf8e; }
.dot.is-wrong{ background:#e2604f; }

.quiz__body{ padding:22px 26px 26px; overflow-y:auto; flex:1 1 auto; }

.quiz__loading,.quiz__error{ color:var(--dim); font-size:15px; }
.quiz__error code{ font-family:var(--mono); font-size:13px; color:var(--white); }

.quiz__intro{ font-size:16.5px; color:var(--white); margin-bottom:18px; }
.quiz__remember{
  font-size:14.5px; line-height:1.6; color:var(--text);
  border-left:2px solid var(--brass); padding:10px 0 10px 16px; margin-bottom:18px;
}
.quiz__remember span{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:4px;
}
.quiz__facts{ font-family:var(--mono); font-size:12px; color:var(--dim); }

.quiz__count{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim); margin-bottom:12px;
}
.quiz__set{ border:0; padding:0; margin:0; }
.quiz__q{
  font-family:var(--display); font-weight:600;
  font-size:clamp(18px, 2.6vw, 21px); line-height:1.35;
  color:var(--white); padding:0; margin-bottom:18px;
}
.quiz__opts{ display:grid; gap:10px; }

.opt{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:14px 16px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(8,16,29,.55);
  transition:border-color .18s, background .18s;
}
.opt:hover{ border-color:rgba(63,169,255,.5); background:rgba(63,169,255,.06); }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt__letter{
  font-family:var(--mono); font-size:12px; font-weight:500;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--dim);
  transition:border-color .18s, color .18s, background .18s;
}
.opt__text{ font-size:15.5px; line-height:1.5; }

.opt:has(input:checked){ border-color:var(--blue); background:rgba(63,169,255,.10); }
.opt:has(input:checked) .opt__letter{ border-color:var(--blue); color:#04080e; background:var(--blue); }
.opt:has(input:focus-visible){ outline:2px solid var(--brass); outline-offset:2px; }
.opt:has(input:disabled){ cursor:default; }
.opt:has(input:disabled):hover{ border-color:var(--line); background:rgba(8,16,29,.55); }

/* graded states. The .quiz__opts prefix is deliberate: :has(input:checked)
   above scores higher than a bare .opt.is-wrong, so these need the extra
   class to win and colour the answer the reader actually picked. */
.quiz__opts .opt.is-right,
.quiz__opts .opt.is-right:hover{ border-color:#3ecf8e; background:rgba(62,207,142,.10); }
.quiz__opts .opt.is-right .opt__letter{ border-color:#3ecf8e; color:#04140d; background:#3ecf8e; }
.quiz__opts .opt.is-wrong,
.quiz__opts .opt.is-wrong:hover{ border-color:#e2604f; background:rgba(226,96,79,.10); }
.quiz__opts .opt.is-wrong .opt__letter{ border-color:#e2604f; color:#180605; background:#e2604f; }

.quiz__feedback{ display:none; }
.quiz__feedback.is-shown{
  display:block; margin-top:18px;
  font-size:14.5px; line-height:1.6;
  padding:14px 16px; border-radius:var(--r);
  border-left:2px solid var(--line);
  background:rgba(8,16,29,.6);
}
.quiz__feedback.is-right{ border-left-color:#3ecf8e; }
.quiz__feedback.is-wrong{ border-left-color:#e2604f; }
.quiz__feedback b{ color:var(--white); }

.quiz__score{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--display); color:var(--white); margin-bottom:2px;
}
.quiz__score b{ font-size:56px; line-height:1; font-weight:700; }
.quiz__score span{ font-family:var(--mono); font-size:15px; color:var(--dim); }
.quiz__verdict{ font-size:16px; color:var(--text); margin-bottom:22px; }

.review{ display:grid; gap:12px; }
.review__item{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  padding:14px 16px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(8,16,29,.5);
}
.review__mark{ font-size:15px; line-height:1.5; }
.review__item.is-right .review__mark{ color:#3ecf8e; }
.review__item.is-wrong .review__mark{ color:#e2604f; }
.review__q{ font-size:14.5px; color:var(--text); margin-bottom:6px; }
.review__a{ font-size:14.5px; color:var(--white); font-weight:500; }
.review__why{ font-size:13.5px; color:var(--dim); margin-top:6px; }

.quiz__foot{
  display:flex; gap:12px; justify-content:flex-end;
  padding:18px 26px 22px;
  border-top:1px solid var(--line);
  background:var(--ink-2);
}
.qbtn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer;
  padding:13px 22px; border-radius:var(--r);
  border:1px solid var(--line); background:transparent; color:var(--white);
  transition:border-color .2s, background .2s, opacity .2s;
}
.qbtn:hover{ border-color:var(--blue); background:rgba(63,169,255,.10); }
.qbtn--primary{
  color:#04080e; border-color:transparent;
  background:linear-gradient(180deg, #57b6ff, var(--blue));
}
.qbtn--primary:hover{ background:linear-gradient(180deg, #7ac6ff, #49b0ff); }
.qbtn:disabled{ opacity:.4; cursor:not-allowed; }
.qbtn:disabled:hover{ border-color:var(--line); background:transparent; }

@media (max-width: 560px){
  .quiz{ width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; border:0; }
  .quiz__head,.quiz__body,.quiz__foot,.quiz__dots{ padding-left:18px; padding-right:18px; }
  .quiz__foot .qbtn{ flex:1; text-align:center; }
}

/* ── 10. Closer + footer ─────────────────────────────────── */
.closer{
  padding:clamp(64px, 9vw, 112px) 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(63,169,255,.10), transparent 70%),
    var(--ink);
}
.closer__inner{ max-width:840px; }
.closer__title{ font-size:clamp(28px, 4.4vw, 44px); margin-bottom:32px; }

.questions{ display:grid; gap:14px; margin-bottom:28px; }
.questions li{
  display:flex; gap:16px; align-items:baseline;
  font-family:var(--display); font-weight:600;
  font-size:clamp(17px, 2.4vw, 22px);
  color:var(--white);
  padding:16px 20px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
}
.questions b{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--brass); letter-spacing:.14em; }

.closer__note{ color:var(--dim); max-width:62ch; }

.foot{
  border-top:1px solid var(--line);
  background:var(--ink-2);
  padding:44px 0 40px;
}
.foot__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px 32px;
}
.foot__brand{ display:flex; align-items:center; gap:12px; }
.foot__name{ font-family:var(--display); font-weight:700; color:var(--white); font-size:16px; line-height:1.2; }
.foot__domain{ font-family:var(--mono); font-size:12px; color:var(--dim); }

.foot__nav{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.foot__nav a{ font-size:13.5px; color:var(--dim); text-decoration:none; transition:color .2s; }
.foot__nav a:hover{ color:var(--blue); }

.foot__legal{
  width:100%;
  border-top:1px solid var(--line);
  padding-top:22px;
  font-family:var(--mono); font-size:12px; color:var(--dim);
}

/* ── 11. Responsive ──────────────────────────────────────── */
@media (max-width: 1080px){
  .sigils{ grid-template-columns:repeat(3, 1fr); }
  .sigils li:nth-child(4), .sigils li:nth-child(5){ grid-column:span 1; }
}

@media (max-width: 900px){
  .menu-btn{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px clamp(20px,5vw,48px) 20px;
    background:rgba(5,9,15,.97);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 12px; font-size:15px; }

  .lesson__head{ grid-template-columns:1fr; }
  .lesson--flip .lesson__head .lesson__art{ order:0; }
  .lesson__art{ max-width:520px; }

  .videos{ grid-template-columns:1fr; }
  .files{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  body{ font-size:16px; }
  .sigils{ grid-template-columns:repeat(2, 1fr); }
  .sigils li:last-child{ grid-column:span 2; }
  .sigils li:last-child a{ display:grid; grid-template-columns:120px 1fr; gap:0 16px; align-items:center; }
  .sigils li:last-child img{ grid-row:span 3; margin-bottom:0; }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }
  .foot__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 460px){
  .mark__big{ font-size:15px; }
  .vid__play{ width:54px; height:54px; margin:-27px 0 0 -27px; }
}

/* ── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .c{ opacity:1; transform:none; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print{
  .topbar,.scan,.videos,.hero__grid{ display:none !important; }
  body{ background:#fff; color:#000; }
  h1,h2,h3,.lesson__tell,.file__name{ color:#000; }
}

/* ============================================================
   12. Progress tracking, panel, certificate
   ============================================================ */

/* — resume line in the hero — */
.resume{
  font-family:var(--mono); font-size:13px; color:var(--dim);
  margin:-18px 0 30px;
}
.resume a{ color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(63,169,255,.35); }
.resume a:hover{ color:var(--white); border-bottom-color:var(--white); }

/* — per-lesson strip — */
.track{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  margin-top:clamp(18px, 2.4vw, 24px);
  padding-top:18px;
  border-top:1px solid var(--line);
}
.track__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
.track__count{ color:var(--white); font-weight:500; margin-left:6px; }
.track.is-done .track__count{ color:#3ecf8e; }
.track__pills{ display:flex; flex-wrap:wrap; gap:8px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer;
  padding:8px 14px; border-radius:100px;
  border:1px solid var(--line); background:transparent; color:var(--dim);
  transition:border-color .2s, color .2s, background .2s;
}
.pill:hover{ border-color:var(--blue); color:var(--white); }
.pill__tick{
  width:15px; height:15px; border-radius:50%;
  display:grid; place-items:center; font-size:9px; line-height:1;
  border:1px solid var(--line); color:transparent;
  transition:border-color .2s, background .2s, color .2s;
}
.pill.is-on{ border-color:rgba(62,207,142,.5); color:var(--white); background:rgba(62,207,142,.08); }
.pill.is-on .pill__tick{ background:#3ecf8e; border-color:#3ecf8e; color:#04140d; }

/* — progress panel — */
.prog{
  padding:clamp(56px, 8vw, 96px) 0;
  border-top:1px solid var(--line);
  background:var(--ink-2);
}
.prog.is-complete{
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(242,183,53,.10), transparent 70%),
    var(--ink-2);
}
.prog__top{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:22px 32px; margin-bottom:26px;
}
.prog__title{ font-size:clamp(28px, 4.4vw, 42px); margin-bottom:8px; }
.prog__sub{ color:var(--text); }
.prog__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn--quiet{ padding:15px 20px; color:var(--dim); }
.btn--quiet:hover{ color:var(--white); }

.meter{
  height:6px; border-radius:100px; overflow:hidden;
  background:var(--line); margin-bottom:28px;
}
.meter span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--blue-deep), var(--blue) 65%, var(--brass));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

.ledger{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.ledger__row{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:auto 1fr auto auto;
  padding:15px 20px; background:var(--ink-2);
}
.ledger__row.is-done{ background:rgba(62,207,142,.06); }
.ledger__n{ font-family:var(--mono); font-size:11px; color:var(--brass); letter-spacing:.14em; }
.ledger__name{
  font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--white); text-decoration:none;
}
.ledger__name:hover{ color:var(--blue); }
.ledger__steps{ display:flex; gap:6px; }
.tick{
  width:10px; height:10px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
}
.tick.is-on{ background:#3ecf8e; border-color:#3ecf8e; }
.ledger__score{ font-family:var(--mono); font-size:12px; color:var(--dim); min-width:34px; text-align:right; }

.prog__note{ font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-top:18px; }

/* — modal extras — */
.m--wide{ width:min(820px, calc(100vw - 32px)); }
.m__lead{ font-size:16px; color:var(--text); margin-bottom:20px; }
.m__fine{ font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-top:14px; }
.m__fine.is-bad{ color:#e2604f; }

.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px;
}
.field > span i{ font-style:normal; text-transform:none; letter-spacing:.05em; opacity:.7; }
.field input{
  width:100%; font-family:var(--body); font-size:16px; color:var(--white);
  padding:13px 15px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(5,9,15,.6);
}
.field input:focus{ outline:2px solid var(--brass); outline-offset:1px; border-color:transparent; }

/* — the certificate — */
.cert{ background:#f7f4ec; padding:clamp(14px, 2.4vw, 22px); border-radius:var(--r); }
.cert__frame{
  border:2px solid #10233f; outline:1px solid #c9a227; outline-offset:5px;
  padding:clamp(26px, 5vw, 46px) clamp(20px, 5vw, 44px);
  text-align:center; color:#10233f;
}
.cert__eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:#8a6d1f; margin-bottom:22px;
}
.cert__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px, 6vw, 46px); line-height:1.1; color:#10233f;
  margin-bottom:14px;
}
.cert__for{ font-size:15px; color:#4c5b70; margin-bottom:8px; }
.cert__course{
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px, 3.4vw, 26px); color:#10233f; margin-bottom:16px;
}
.cert__chev{
  font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  color:#c9a227; margin-bottom:22px;
}
.cert__scores{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(122px, 1fr));
  gap:10px; margin-bottom:26px; text-align:left;
}
.cert__scores li{
  border-top:1px solid #d6cdb8; padding-top:9px;
  display:flex; flex-direction:column; gap:2px;
}
.cert__scores b{ font-family:var(--display); font-size:12.5px; font-weight:600; color:#10233f; }
.cert__scores span{ font-family:var(--mono); font-size:11px; color:#7a6a4d; }
.cert__foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px;
  border-top:1px solid #d6cdb8; padding-top:18px;
}
.cert__foot dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#8a7a5c; margin-bottom:3px;
}
.cert__foot dd{ margin:0; font-family:var(--mono); font-size:12px; color:#10233f; }

#certPrint{ display:none; }

@media print{
  body.is-printing > *{ display:none !important; }
  body.is-printing #certPrint{ display:block !important; }
  body.is-printing{ background:#fff; }
  #certPrint .cert{ padding:7mm; }
  #certPrint .cert__frame{
    padding:14mm 12mm; min-height:150mm;
    display:flex; flex-direction:column; justify-content:center;
  }
  #certPrint .cert__scores{ margin-bottom:14mm; }
  @page{ size:landscape; margin:14mm; }
}

@media (max-width: 720px){
  .ledger__row{ grid-template-columns:auto 1fr auto; row-gap:8px; }
  .ledger__steps{ grid-column:2 / -1; }
  .prog__actions{ width:100%; }
  .prog__actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* — the email nudge — */
.nudge{
  position:fixed; z-index:90; right:24px; bottom:24px;
  width:min(340px, calc(100vw - 32px));
  padding:20px 22px 18px;
  border:1px solid var(--line); border-left:2px solid var(--blue);
  border-radius:var(--r); background:var(--panel);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.95);
  opacity:0; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease;
}
.nudge.is-in{ opacity:1; transform:translateY(0); }
.nudge__title{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-bottom:8px;
}
.nudge__body{ font-size:14.5px; line-height:1.55; color:var(--text); margin-bottom:16px; }
.nudge__row{ display:flex; gap:8px; }
.nudge__row .qbtn{ flex:1; padding:11px 12px; font-size:11.5px; }

.m__hint{ font-size:14px; color:var(--dim); margin-top:18px; text-align:center; }
.linky{
  font:inherit; color:var(--blue); background:none; border:0; padding:0;
  cursor:pointer; border-bottom:1px solid rgba(63,169,255,.4);
}
.linky:hover{ color:var(--white); border-bottom-color:var(--white); }

@media (max-width: 560px){
  .nudge{ right:12px; left:12px; bottom:12px; width:auto; }
}