/* =====================================================================
   ATT ENGLISH ACADEMY: shared stylesheet  ·  att.css  ·  v1.0 (29 Sep 2026)
   ---------------------------------------------------------------------
   One file for every ATT page: sign-up pages, lessons, landing pages,
   privacy. It is built from the ATT English Academy design system; if a
   standard changes, change it there first, then here.

   HOW TO USE (in every page's <head>, in this order):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital,wght@0,600;1,500;1,600&family=Archivo:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/att.css">
     <style> …only what is truly unique to this page… </style>

   RULES FOR PAGE STYLES
   - Delete the page's own :root { --green… } block: colours live here.
   - Never type a hex value in a page; use var(--green), var(--ink-soft) …
   - Text on any colour fill is ink. White text only on ink.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Palette: green, yellow, orange, ink, white */
  --green:#3CAE33;          /* brand green (the logo's). Text on it: ink */
  --green-dark:#2C8226;     /* links and ticks on white (4.8:1) */
  --green-text:#22671D;     /* small green text: eyebrows, links (6.8:1) */
  --yellow:#F6D716;         /* stamps, secondary button, feedback, hover */
  --orange:#F2782F;         /* primary button, progress, focus ring. Text on it: ink */
  --orange-text:#B4470C;    /* small orange text: labels, step numbers (5.4:1) */
  --ink:#141414;            /* text, borders, shadows, header/footer */
  --white:#FFFDF7;          /* warm off-white page and cards */
  --cream:var(--white);     /* retired tint: kept as an alias so old pages don't break */

  /* Supporting */
  --ink-soft:#4D493D;       /* secondary text on white (8.8:1) */
  --line:#D4D4CE;           /* decorative hairlines between list rows */
  --on-ink-soft:#CFCBBB;    /* secondary text on ink (11.3:1) */
  --footer-text:#BBBBBB;    /* footer copy on ink (9.6:1) */
  --error:#B3261E;          /* form errors on white (6.4:1) */
  --pink:#E97AA8;           /* reserve only: not a focus colour */

  /* Type */
  --font-display:'Anton', Impact, sans-serif;
  --font-sans:'Archivo', sans-serif;
  --font-serif:'Playfair Display', serif;

  /* Radii */
  --radius-xs:4px;          /* checkboxes, inline tags */
  --radius-sm:6px;          /* buttons, inputs, options */
  --radius-feedback:8px;    /* feedback panels, ladder rungs */
  --radius-card-sm:10px;    /* small cards, text areas */
  --radius-md:12px;         /* cards */
  --radius-pill:999px;      /* chips */

  /* Borders */
  --border-hair:2px;        /* buttons, tables, bars, checkboxes */
  --border-control:2.5px;   /* inputs, options, chips, lesson cards */
  --border-card:3px;        /* cards, panels */
  --border-header:4px;      /* green rule under header */
  --border-band:6px;        /* ink rule between bands; green rule over footer */
  --border-accent:10px;     /* green left edge on tips panel */

  /* Hard shadows: never blurred */
  --shadow-stamp:3px 3px 0 var(--ink);
  --shadow-button:4px 4px 0 var(--ink);
  --shadow-button-pressed:2px 2px 0 var(--ink);
  --shadow-card-sm:4px 4px 0 var(--yellow);
  --shadow-panel:6px 6px 0 var(--ink);
  --shadow-card-green:6px 6px 0 var(--green);
  --shadow-card-yellow:6px 6px 0 var(--yellow);
  --shadow-card-orange:6px 6px 0 var(--orange);
  --shadow-card:8px 8px 0 var(--ink);
  --shadow-feature:10px 10px 0 var(--yellow);
  --shadow-cover:10px 10px 0 var(--ink);

  /* Stamp tilts */
  --tilt-1:-1.4deg; --tilt-2:1deg; --tilt-3:-0.6deg; --tilt-4:1.6deg;
  --tilt-tag:-1deg; --tilt-cover:2deg;

  /* Layout */
  --page-max:1120px;
  --page-narrow:820px;
  --gutter:32px;

  /* Compatibility: names the lesson template used. They point at the
     standard colours so lesson pages work before they are tidied. */
  --bg:var(--white); --bg-card:var(--white);
  --teal:var(--green-dark); --teal-deep:var(--ink);
  --amber:var(--orange); --amber-soft:var(--yellow);
  --coral:var(--orange); --coral-soft:var(--yellow);
  --radius:var(--radius-md);
}
@media (max-width:900px){ :root{ --gutter:20px; } }


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
h1,h2,h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.08; margin:0; color:inherit;
}
h1{font-size:clamp(2.3rem,5vw,3.8rem);}
h2{font-size:clamp(1.7rem,3.6vw,2.3rem);}
h3{font-size:1.3rem; line-height:1.15;}
h1 .em,h2 .em{font-family:var(--font-serif); font-style:italic; font-weight:600; text-transform:none; letter-spacing:0;}
p{margin:0 0 14px;}
a{color:var(--green-dark);}
strong{font-weight:700;}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important; animation:none !important;}
}


/* ---------------------------------------------------------------------
   3. LAYOUT: wrap, bands, header, footer
   --------------------------------------------------------------------- */
.wrap{max-width:var(--page-max); margin:0 auto; padding:0 var(--gutter);}
.wrap.narrow{max-width:var(--page-narrow);}
.measure{max-width:62ch;}

/* Full-width bands. Each sits above a 6px ink rule. */
.band{padding:88px 0; border-bottom:var(--border-band) solid var(--ink);}
.band.hero{padding:64px 0 72px;}
.band.green{background:var(--green); color:var(--ink);}
.band.yellow{background:var(--yellow); color:var(--ink);}
.band.ink{background:var(--ink); color:var(--white);}
.band.white{background:var(--white);}
.band.flush{border-bottom:0;}
.band.ink .intro,.band.ink p.soft{color:var(--on-ink-soft);}
@media (max-width:900px){ .band{padding:64px 0;} .band.hero{padding:44px 0 56px;} }

/* Header: ink bar, real logo, green rule */
.site-header{background:var(--ink); padding:20px 0; border-bottom:var(--border-header) solid var(--green);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; color:var(--white); font-family:var(--font-display); font-size:20px; letter-spacing:.5px; text-transform:uppercase; text-decoration:none;}
.brand .logo-mark,.logo-mark{height:2em; width:auto; margin-right:10px; display:inline-block; vertical-align:middle;}
.brandmark{display:flex; align-items:center; gap:6px; color:var(--white); font-family:var(--font-sans); font-weight:800; font-size:1.05rem; letter-spacing:.01em; text-decoration:none;}
.brandmark img{height:30px; width:auto;}
.site-header .back,.site-link{color:var(--yellow); font-weight:700; font-size:15px;}
.nav-cta{
  font-family:var(--font-sans); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none; background:var(--yellow); color:var(--ink); padding:11px 20px;
  border:var(--border-hair) solid var(--ink); box-shadow:3px 3px 0 var(--white);
}
.nav-cta:hover{background:var(--white);}

/* Footer: ink, green rule above */
.site-footer{background:var(--ink); color:var(--footer-text); padding:32px 0; text-align:center; font-size:13px; border-top:var(--border-band) solid var(--green);}
.site-footer p{margin:0 auto; max-width:none;}
.site-footer a{color:var(--yellow);}

/* Grids */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start;}
@media (max-width:900px){ .grid-2,.grid-3,.hero-grid{grid-template-columns:1fr; gap:36px;} }


/* ---------------------------------------------------------------------
   4. TYPE HELPERS
   --------------------------------------------------------------------- */
.hero-headline{font-size:clamp(2.4rem,5vw,3.9rem); margin:22px 0 16px;}
.section-title{font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:14px;}
.subline,.hero-sub{font-family:var(--font-serif); font-style:italic; font-size:22px; line-height:1.4; color:var(--green-dark); max-width:34ch; margin-bottom:26px;}
.band.green .subline,.band.green .hero-sub{color:var(--ink);}
.byline{font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:1.15rem;}
.band.ink .byline{color:var(--yellow);}
.intro{font-size:18px;}
.note{font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--ink-soft);}
.soft{color:var(--ink-soft);}
.small{font-size:13px;}

/* Tick list */
.facts,.ticks{list-style:none; padding:0; margin:0; font-weight:600;}
.facts li,.ticks li{padding:5px 0 5px 28px; position:relative;}
.facts li::before,.ticks li::before{content:"\2713"; position:absolute; left:0; color:var(--green-dark); font-weight:800;}
.band.green .facts li::before,.band.green .ticks li::before{color:var(--ink);}


/* ---------------------------------------------------------------------
   5. STAMPS AND TAGS
   --------------------------------------------------------------------- */
.stamp-row{display:flex; flex-wrap:wrap; gap:6px 8px;}
.stamp{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  display:inline-block; padding:4px 14px 8px; line-height:1.05; box-shadow:var(--shadow-stamp);
}
.stamp.on-black{background:var(--ink); color:var(--white); box-shadow:3px 3px 0 rgba(0,0,0,.25);}
.stamp.on-white{background:var(--white); color:var(--ink); border:var(--border-hair) solid var(--ink);}
.stamp.on-yellow{background:var(--yellow); color:var(--ink);}
.stamp.on-orange{background:var(--orange); color:var(--ink);}
.stamp.on-green{background:var(--green); color:var(--ink);}
.stamp.r1{transform:rotate(var(--tilt-1));}
.stamp.r2{transform:rotate(var(--tilt-2));}
.stamp.r3{transform:rotate(var(--tilt-3));}
.stamp.r4{transform:rotate(var(--tilt-4));}
.stamp.r0{transform:none;}

.score-line{display:inline-block; font-family:var(--font-display); text-transform:uppercase; font-size:16px; background:var(--yellow); color:var(--ink); padding:4px 14px 7px; box-shadow:var(--shadow-stamp); transform:rotate(var(--tilt-tag));}

.eyebrow{
  display:inline-block; background:var(--yellow); color:var(--ink);
  font-family:var(--font-sans); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; box-shadow:var(--shadow-stamp); transform:rotate(var(--tilt-tag)); margin-bottom:10px;
}
.eyebrow.green{background:var(--green);}
.eyebrow.orange{background:var(--orange);}
.eyebrow-box{display:inline-block; background:var(--white); color:var(--ink); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding:7px 14px; border:var(--border-hair) dashed var(--ink);}
.mark-tag{display:inline-block; background:var(--ink); color:var(--white); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px;}

.includes,.chips{display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; padding:0; margin:0;}
.includes li,.chip{font-weight:800; font-size:15px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-pill); padding:6px 16px; background:var(--white);}


/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase; text-decoration:none; text-align:center;
  background:var(--orange); color:var(--ink); padding:15px 30px; border-radius:var(--radius-sm);
  border:var(--border-hair) solid var(--ink); box-shadow:var(--shadow-button);
  font-size:17px; letter-spacing:.5px; cursor:pointer; transition:transform .1s, box-shadow .1s;
}
.btn:hover{transform:translate(2px,2px); box-shadow:var(--shadow-button-pressed);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:var(--shadow-button);}
.btn.yellow{background:var(--yellow);}
.btn.secondary,.btn.white{background:var(--white);}
.btn.large{padding:22px 52px; font-size:22px; border-width:var(--border-card); box-shadow:6px 6px 0 var(--ink);}
.btn.large:hover{box-shadow:4px 4px 0 var(--ink);}
.btn.full{display:block; width:100%;}
.linklike{background:none; border:0; padding:0; font:700 15px var(--font-sans); color:var(--ink); text-decoration:underline; cursor:pointer;}
.linklike[hidden]{display:none;}
.actions,.cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
@media (max-width:720px){ .btn.large{padding:20px 32px; font-size:19px;} }

/* Inline email button (lead-magnet forms only) */
.btn-primary{
  background:var(--yellow); color:var(--ink); border:var(--border-control) solid var(--ink); padding:15px 24px;
  font:800 .95rem var(--font-sans); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; cursor:pointer;
  box-shadow:var(--shadow-button); transition:transform .1s, box-shadow .1s;
}
.btn-primary:hover{transform:translate(2px,2px); box-shadow:var(--shadow-button-pressed);}


/* ---------------------------------------------------------------------
   7. FORMS
   --------------------------------------------------------------------- */
.field{margin-bottom:16px;}
.field label{display:block; font-weight:700; font-size:14px; margin-bottom:5px;}
.field input,.field select,.field textarea{
  width:100%; font:500 17px var(--font-sans); padding:12px 14px; color:var(--ink); background:var(--white);
  border:var(--border-control) solid var(--ink); border-radius:var(--radius-sm);
}
.name-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){ .name-row{grid-template-columns:1fr; gap:0;} }
.hp{position:absolute; left:-9999px; height:0; overflow:hidden;}
.consent{font-size:13px; color:var(--ink-soft); margin-top:14px;}
.consent a{font-weight:700;}
.form-error{color:var(--error); font-weight:700; font-size:14px; margin-top:12px;}
.band.green .consent,.band.green .form-note{color:var(--ink);}

/* One-line email form */
.signup-form{display:flex; gap:10px; max-width:460px; margin-bottom:14px;}
.signup-form input[type=email]{flex:1; padding:15px 16px; font:600 .98rem var(--font-sans); color:var(--ink); background:var(--white); border:var(--border-control) solid var(--ink);}
.signup-form input::placeholder{color:var(--ink-soft);}
.signup-form.hide{display:none;}
.form-note{font-size:.82rem;}
.form-success{display:none; background:var(--white); color:var(--ink); border:var(--border-control) solid var(--ink); padding:16px 18px; max-width:460px; font-size:.95rem; font-weight:700; box-shadow:var(--shadow-button);}
.form-success.show{display:block;}
@media (max-width:860px){ .signup-form{flex-direction:column;} }


/* ---------------------------------------------------------------------
   8. CARDS AND PANELS
   --------------------------------------------------------------------- */
/* Main card (sign-up, quiz). On green: ink shadow. On white: add .on-white */
.qcard,.card{background:var(--white); color:var(--ink); border:var(--border-card) solid var(--ink); border-radius:var(--radius-md); padding:32px; box-shadow:var(--shadow-card);}
.qcard.on-white,.card.on-white{box-shadow:8px 8px 0 var(--green);}
.qcard h2,.card h2{font-size:30px; margin-bottom:10px;}
@media (max-width:900px){ .qcard,.card{padding:22px 20px; box-shadow:6px 6px 0 var(--ink);} }

/* Small card (why join, lesson type cards) */
.card-sm,.type-card{background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-card-sm); padding:20px; box-shadow:var(--shadow-card-sm);}
.card-sm h3,.type-card h3{font-size:1.25rem; margin-bottom:8px;}
.card-sm p,.type-card p{font-size:14px; color:var(--ink-soft); margin:0;}

/* Tips panel */
.tips{background:var(--white); border:var(--border-card) solid var(--ink); border-left:var(--border-accent) solid var(--green); padding:24px 26px; box-shadow:var(--shadow-panel);}
.tips h3{font-size:22px; margin-bottom:12px;}
.tips ol,.tips ul{padding-left:20px; margin:0;}
.tips li{margin-bottom:10px;}

/* Summary box (top of long pages) */
.summary{background:var(--yellow); border:var(--border-card) solid var(--ink); box-shadow:var(--shadow-panel); padding:24px 26px;}
.summary h2{font-size:24px; margin-bottom:10px;}
.summary ul{padding-left:20px; margin:0;}
.summary li{margin-bottom:6px;}

/* Feedback / result panel */
.feedback{background:var(--yellow); color:var(--ink); border:var(--border-hair) solid var(--ink); border-radius:var(--radius-feedback); padding:14px 16px; font-weight:500;}

/* Offers on the ink band */
.paths-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:32px; margin-top:36px; align-items:stretch;}
.path{padding:36px; display:flex; flex-direction:column;}
.path h3{font-size:28px; margin-bottom:12px;}
.path .btn{margin-top:auto; align-self:flex-start;}
.path.one{background:var(--white); color:var(--ink); border:var(--border-card) solid var(--white);}
.path.main{background:var(--green); color:var(--ink); border:var(--border-card) solid var(--white); box-shadow:var(--shadow-feature);}
.path.main .stamp{align-self:flex-start; margin-bottom:16px;}
.path ul{list-style:none; padding:0; margin:0 0 26px;}
.path li{padding:6px 0 6px 28px; position:relative; font-weight:600;}
.path li::before{content:"\2713"; position:absolute; left:0; font-weight:800;}
.price{font-family:var(--font-display); font-size:26px; text-transform:uppercase; margin-bottom:12px;}
@media (max-width:900px){ .paths-grid{grid-template-columns:1fr;} .path{padding:26px 22px;} .path.main{box-shadow:6px 6px 0 var(--yellow);} }

/* Lesson-part card (chapter list) */
.parts{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start;}
.part{background:var(--white); border:var(--border-card) solid var(--ink); border-radius:var(--radius-md); padding:26px 24px;}
.part.green{box-shadow:8px 8px 0 var(--green);}
.part.yellow{box-shadow:8px 8px 0 var(--yellow);}
.part.orange{box-shadow:8px 8px 0 var(--orange);}
.part h3{font-size:26px; margin:16px 0 14px;}
.part ol{list-style:none; padding:0; margin:0;}
.part li{display:flex; gap:12px; padding:11px 0; border-top:var(--border-hair) solid var(--line);}
.part li:first-child{border-top:0;}
.part .num{font-family:var(--font-display); font-size:18px; color:var(--green-dark); min-width:26px;}
.ch strong{display:block; font-weight:800; line-height:1.3;}
.ch em{display:block; font-family:var(--font-serif); font-size:15px; color:var(--ink-soft); margin-top:2px;}
@media (max-width:900px){ .parts{grid-template-columns:1fr; gap:32px;} }

/* Feature grid (shared ink rules) */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--border-card) solid var(--ink); border-left:var(--border-card) solid var(--ink);}
.problem-card{background:var(--white); border-right:var(--border-card) solid var(--ink); border-bottom:var(--border-card) solid var(--ink); padding:32px 28px;}
.problem-card .mark{display:inline-block; background:var(--ink); color:var(--white); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; margin-bottom:16px;}
.problem-card h3{font-family:var(--font-sans); font-weight:800; font-size:1.12rem; text-transform:none; letter-spacing:0; line-height:1.3; margin-bottom:10px;}
.problem-card p{color:var(--ink-soft); font-size:.95rem;}
@media (max-width:860px){ .problem-grid{grid-template-columns:1fr;} }

/* Numbered lists and step discs */
.idiom-list,.numbered{list-style:none; padding:0; margin:0;}
.idiom-list li,.numbered li{display:flex; gap:18px; padding:20px 0; border-bottom:var(--border-card) solid var(--ink);}
.idiom-list li:first-child,.numbered li:first-child{padding-top:0;}
.idiom-list li:last-child,.numbered li:last-child{border-bottom:none;}
.idiom-num,.num-tile{font-family:var(--font-display); color:var(--ink); background:var(--green); width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.95rem; border:var(--border-hair) solid var(--ink);}
.idiom-list h4,.numbered h4{font-family:var(--font-sans); font-weight:800; font-size:1.06rem; margin:0 0 4px;}
.idiom-list p,.numbered p{color:var(--ink-soft); font-size:.92rem; margin:0;}
.step-disc{font-family:var(--font-display); font-size:34px; color:var(--ink); background:var(--green); width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:var(--border-card) solid var(--ink); margin:0 auto 14px;}

/* About band */
.about-grid{display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:center;}
.avatar{width:210px; height:210px; object-fit:cover; border:4px solid var(--white); box-shadow:8px 8px 0 var(--green);}
.stat-row{display:flex; gap:36px; margin-top:22px; flex-wrap:wrap;}
.stat .num{font-family:var(--font-display); font-size:1.7rem; color:var(--yellow); display:block;}
.stat .label{font-size:.78rem; color:var(--on-ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr; text-align:center; justify-items:center;} .stat-row{justify-content:center;} }

/* Book */
.book-inner{display:grid; grid-template-columns:320px 1fr; gap:64px; align-items:center;}
.book-cover{width:100%; max-width:320px; height:auto; border:4px solid var(--ink); box-shadow:var(--shadow-cover); transform:rotate(var(--tilt-cover)); background:var(--green);}
@media (max-width:900px){ .book-inner{grid-template-columns:1fr; gap:48px;} .book-cover{max-width:260px; margin:0 auto;} }

/* Table */
.scroll{overflow-x:auto;}
table.att-table,.prose table{width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:15.5px;}
.att-table th,.att-table td,.prose th,.prose td{border:var(--border-hair) solid var(--ink); padding:10px 12px; text-align:left; vertical-align:top;}
.att-table th,.prose th{background:var(--ink); color:var(--white); font-weight:700;}
mark.todo{background:var(--yellow); color:var(--ink); padding:1px 5px; font-weight:700;}


/* ---------------------------------------------------------------------
   9. QUIZ AND OPTIONS
   --------------------------------------------------------------------- */
.progress-text{font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.progress-bar{height:12px; background:var(--white); border:var(--border-hair) solid var(--ink); margin-bottom:22px;}
.progress-bar > span,.progress-fill{display:block; height:100%; width:0; background:var(--orange); transition:width .25s ease;}
/* Thin reading-progress bar at the top of lessons */
.reading-progress{position:sticky; top:0; z-index:10; height:6px; background:var(--white); border-bottom:var(--border-hair) solid var(--ink);}
.reading-progress > span,.reading-progress .progress-fill{display:block; height:100%; width:0; background:var(--orange);}

fieldset{border:0; padding:0; margin:0; min-width:0;}
legend{font-family:var(--font-sans); font-weight:800; font-size:21px; line-height:1.3; padding:0; margin-bottom:16px;}
.answer{display:block; position:relative; margin-bottom:9px;}
.answer input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;}
.answer span{display:block; padding:12px 16px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-sm); background:var(--white); font-weight:700; transition:background .12s,color .12s;}
.answer input:hover + span{background:var(--yellow);}
.answer input:checked + span{background:var(--ink); color:var(--white);}
.answer input:focus-visible + span{outline:3px solid var(--orange); outline-offset:3px;}

/* Generic option buttons (lesson activities) */
.option{font:700 15px var(--font-sans); color:var(--ink); background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer;}
.option:hover{background:var(--yellow);}
.option.sel,.option[aria-pressed="true"]{background:var(--ink); color:var(--white);}


/* ---------------------------------------------------------------------
   10. LESSON PIECES
   --------------------------------------------------------------------- */
.story{background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-md); box-shadow:var(--shadow-card-orange); padding:30px;}
.story p:last-child{margin-bottom:0;}
.story .who{font-size:12px; font-weight:700; color:var(--orange-text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;}

.activity,.tech-block{background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-card-green);}
.activity.alt{box-shadow:var(--shadow-card-yellow);}
.band.green .activity,.band.green .tech-block{box-shadow:var(--shadow-card);}
.steps{margin:14px 0 0; padding:0; list-style:none;}
.steps li{display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:15px;}
.steps li:first-child{border-top:none;}
.steps .num{font-weight:700; color:var(--orange-text); flex-shrink:0;}

.type-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:680px){ .type-grid{grid-template-columns:1fr;} }

.ground-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.ground-cell{background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-card-sm); padding:12px 8px; text-align:center; box-shadow:3px 3px 0 var(--yellow);}
.ground-cell .n{font-family:var(--font-display); font-size:22px; display:block;}
.ground-cell .s{font-size:10px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.ground-cell.done{background:var(--green); box-shadow:var(--shadow-stamp);}
.ground-cell.done .s{color:var(--ink);}
.ground-input{width:100%; margin-top:6px; border:none; background:transparent; font:12px var(--font-sans); text-align:center; color:var(--ink);}

.q{margin-bottom:20px;}
.q label{display:block; font-size:15px; font-weight:700; margin-bottom:8px;}
.q textarea{width:100%; min-height:64px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-card-sm); padding:12px 14px; font:14px var(--font-sans); color:var(--ink); background:var(--white); resize:vertical;}
.q textarea:focus{outline:3px solid var(--orange); outline-offset:1px;}

.checklist{list-style:none; margin:0; background:var(--green); border:var(--border-control) solid var(--ink); border-radius:var(--radius-md); padding:6px 22px; box-shadow:var(--shadow-panel);}
.checklist li{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:2px solid rgba(20,20,20,.25);}
.checklist li:first-child{border-top:none;}
.checklist input[type=checkbox]{appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0; margin:2px 0 0; border:var(--border-hair) solid var(--ink); border-radius:var(--radius-xs); background:var(--white); position:relative; cursor:pointer;}
.checklist input[type=checkbox]:checked{background:var(--ink);}
.checklist input[type=checkbox]:checked::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(40deg);}
.checklist label{font-size:14.5px; font-weight:600;}

.chapter-nav{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:28px 0; border-top:var(--border-card) solid var(--ink); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em;}
.chapter-nav a{color:var(--ink); text-decoration:none; border-bottom:3px solid var(--yellow);}
.chapter-nav a:hover{background:var(--yellow);}
.chapter-nav .index-link{color:var(--ink-soft);}

/* Breathing ring */
.ring-stage{display:flex; flex-direction:column; align-items:center; gap:14px;}
.ring-wrap{position:relative; width:220px; height:220px;}
.ring-wrap svg{width:100%; height:100%;}
.ring-line{fill:none; stroke:var(--ink); stroke-width:2px; stroke-dasharray:3 7;}
.ring-fill{fill:var(--yellow); stroke:var(--ink); stroke-width:3px; transform-origin:110px 110px; transform:scale(.55); transition:transform 4s cubic-bezier(.37,0,.63,1);}
.ring-wrap.exhale .ring-fill{transition-duration:6s;}
.ring-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 50px; text-align:center; font-family:var(--font-serif); font-weight:600; font-size:15px; color:var(--ink);}
.ring-label .count{font-family:var(--font-sans); font-weight:700; font-size:12px; margin-top:4px;}


/* ---------------------------------------------------------------------
   11. PRINT
   --------------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.back,.nav-cta{display:none;}
  .band{border-bottom:2px solid #000;}
  mark.todo{background:none; border:1px solid #000;}
  .btn,.stamp,.card,.qcard{box-shadow:none;}
}