/* CU-TEP Grammar Sprint — started from the Structure Sprint sheet; exam identity recoloured to CU-TEP navy #1B2A6B + Chula pink #C81E55 (owner decision 13 Sep 2026).
   Structure Sprint — only what app.css does not already provide.
   Tokens, buttons, cards, pills, .slist/.srow, .kpi and the glass layer come from app.css.
   Palette stays the lane's navy #1B2A6B + gold (--pink/--orange). No CU-TEP pink. */

/* ---------- shell ----------
   โลโก้ แถบบน เมนูข้าง และเมนูล่าง ใช้คลาสเดียวกับ shell.html ของคอร์ส (.sb .logo /
   .topbar .mlogo / .mnav a + svg) เพื่อให้ผู้เรียนเห็นว่านี่คือสินค้าของ EngPeak ตัวหนึ่ง
   ไม่ใช่เว็บแยกที่เอาโลโก้มาแปะ — app.css จัดรูปให้หมดแล้ว ที่นี่เหลือแค่ของเฉพาะ Sprint */
.sprint-shell .sb .sbsec{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);padding:2px 12px 8px}
.sprint-shell .sb .nv.on{background:var(--soft);color:var(--navy);font-weight:700}
/* app.css ดัน .chip ทุกตัวไปขวาด้วย margin-left:auto — ที่นี่มีสองชิป ตัวแรกจึงต้องอยู่ซ้าย */
.sprint-shell .topbar .chip{margin-left:0}
.sprint-shell .topbar .chip.days{margin-left:auto}
.sprint-shell .topbar .who{margin-left:8px}
@media(max-width:900px){.sprint-shell .topbar .chip.days{margin-left:0}}
/* ⛔ ที่ 390px แถวบนมีโลโก้ + สองชิป + วงกลมบัญชี รวมแล้วกว้างเกินจอ 20px ทำให้หน้าเลื่อนซ้ายขวาได้
   ชิปบอกวันคงเหลือเป็นข้อมูลรอง และ KPI บนหน้าฝึกต่อบอกไว้อยู่แล้ว จึงซ่อนเฉพาะจอแคบ */
@media(max-width:430px){
  .sprint-shell .topbar .chip.days{display:none}
  .sprint-shell .topbar .who{margin-left:auto}
}
.panel.next{border-left:4px solid var(--pink)}
.panel.next h2{margin:.2rem 0 .4rem}
/* การ์ดตัวเลขของหน้านี้วางป้ายกับค่าคนละบรรทัดเสมอ (app.css ตั้งไว้เป็น inline) */
.sprint .kpis.three{grid-template-columns:repeat(3,1fr)}
.sprint .kpi .lb,.sprint .kpi .v,.sprint .kpi .hint{display:block}
.sprint .kpi .v small{display:inline}

/* ---------- session list ---------- */
.slist.sessions .srow.is-done .si{background:var(--goodsoft);color:var(--good)}
.srow .chev{margin-left:auto;font-weight:600;color:var(--navy2);text-decoration:none;white-space:nowrap}
.srow .si{flex:0 0 auto;min-width:2rem;text-align:center}

/* ---------- runner ---------- */
/* .btn ตั้ง display ไว้ จึงชนะ [hidden] ของเบราว์เซอร์ — ปุ่มที่สั่งซ่อนจะยังโผล่ถ้าไม่บังคับ */
[hidden]{display:none!important}
.runwrap{max-width:760px;padding-bottom:120px}
.runbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.runbar .rt{font-weight:700}
.runbar .rp{color:var(--ink2);font-size:.9rem}
.runbar .timer{margin-left:auto;font-size:1.25rem;font-weight:700;color:var(--navy)}
.runbar .timer.low{color:var(--crit)}
.runbar .rx{color:var(--ink2);text-decoration:none;font-size:.9rem}
.save{min-height:1.2em;font-size:.85rem;color:var(--ink2)}
.save.bad{color:var(--crit)}
.qcard{padding:18px 0}
.qtop{color:var(--ink2);font-size:.85rem;margin:0 0 10px}
.qtop .topic{font-family:var(--disp)}
.stem{font-size:1.12rem;line-height:1.85;margin:0 0 14px}
.hint{font-size:.9rem;margin:-8px 0 12px}
.opts{display:grid;gap:var(--s2)}
.opt{display:flex;gap:var(--s2);align-items:flex-start;padding:12px 14px;border:1px solid var(--line2);
     border-radius:var(--rc);background:var(--paper);cursor:pointer}
.opt .k{font-family:var(--mono);font-weight:600;min-width:1.4em}
.opt .mark{margin-left:auto;font-weight:600;white-space:nowrap}
.opt.sel{border-color:var(--accent);background:var(--soft)}
.opt.sel .k::after{content:" ✓"}
.opt.right{background:var(--goodsoft);border-color:var(--good)}
.opt.wrong{background:var(--critsoft);border-color:var(--crit)}
/* app.css ตั้ง :focus-visible ไว้เฉพาะ .opt / .seg / .opts.qz li — ปุ่มและลิงก์ที่เหลือจึงตกไปใช้
   เส้นขอบมาตรฐานของเบราว์เซอร์ ซึ่งแทบมองไม่เห็นบนพื้นกระจก (WCAG 2.4.7)
   ⛔ กำหนดใต้ .sprint เท่านั้น ไม่แตะสินค้าตัวอื่นของ EngPeak ที่ใช้ app.css ร่วมกัน */
.sprint a:focus-visible,.sprint button:focus-visible,.sprint summary:focus-visible,
.sprint input:focus-visible,.sprint [tabindex]:focus-visible,
.opt:focus-visible,.seg:focus-visible{outline:3px solid var(--navy2);outline-offset:2px;border-radius:6px}
/* ช่วงขีดเส้นใต้ต้องอ่านออกแม้ตกบรรทัดบนมือถือ — box-decoration-break ทำให้เส้นใต้และพื้นหลัง
   ต่อเนื่องทุกบรรทัดของช่วงเดียวกัน ไม่ใช่ขาดหายไปครึ่งทาง · ตัวอักษรกำกับเป็น <sup> เสมอ
   จึงไม่ได้บอกสถานะด้วยสีอย่างเดียว (WCAG 1.4.1) */
.seg{border-bottom:2px solid var(--ink2);cursor:pointer;padding:1px 2px;
     -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px}
.seg sup{font-family:var(--mono);font-size:.72em;font-weight:700;margin-left:2px;color:var(--navy)}
.seg.sel{background:var(--soft);border-bottom-color:var(--accent)}
.seg.right{background:var(--goodsoft);border-bottom-color:var(--good)}
.runfoot{position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));
         display:flex;gap:var(--s2);justify-content:center;background:var(--glass2,rgba(255,255,255,.9));
         border:1px solid var(--gline,var(--line));border-radius:999px;padding:8px;backdrop-filter:blur(18px)}
.runfoot .btn{flex:0 1 200px}

/* ---------- explanation ---------- */
.expl{margin-top:14px;background:var(--bg);border-radius:var(--rc);padding:12px 16px}
.expl p{margin:.45rem 0}
.expl ul{margin:.3rem 0 .6rem 1.1rem;padding:0}
.expl li{margin:.25rem 0}
.expl .verdict{font-weight:700}
.expl .verdict.ok{color:var(--good)}
.expl .verdict.no{color:var(--crit)}
.expl .struct{background:var(--paper);border:1px dashed var(--line2);border-radius:var(--rc);padding:6px 10px;font-size:.9rem}
.expl .take{border-left:3px solid var(--pink);padding-left:10px}
/* ลำดับการอ่าน: คำตอบที่ถูก (เด่นสุด) → เหตุผลหลัก → กฎ → โครงสร้าง → ตัวลวง (พับ) → จำไปใช้ */
.expl .ekey{font-size:1.02rem}
.expl .ekey .mono{color:var(--good);font-weight:700}
.expl .erule{color:var(--ink2);font-size:.95rem}
.expl .estruct{background:var(--paper);border:1px solid var(--line);border-radius:var(--rc);
  padding:8px 12px;margin:.6rem 0}
.expl .estruct .elab{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:0 0 .2rem}
.expl .estruct p{margin:.25rem 0}
.expl .ewrong{margin:.5rem 0}
.expl .ewrong>summary{cursor:pointer;font-weight:700;padding:6px 0;color:var(--navy)}
.expl .ewrong>summary:focus-visible{outline:3px solid var(--navy2);outline-offset:2px;border-radius:6px}

/* ---------- result ---------- */
.trow{display:flex;align-items:center;gap:var(--s2);margin:8px 0}
.trow .tl{flex:1 1 40%;min-width:0}
.trow .bar-h{flex:1 1 40%}
.trow .tn{flex:0 0 auto}
.review .q{border-top:1px solid var(--line);padding:12px 0}
.review .q summary{cursor:pointer;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.review .q .topic{color:var(--ink2);font-size:.88rem}
.mistake summary{cursor:pointer;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
/* ⛔ เดิมจาง ๆ ทั้งแถว (opacity:.72) ซึ่งลากป้าย "แก้แล้ว" ลงมาเหลือ 3.45:1 — ตกเกณฑ์ AA
   ทั้งที่คู่สีของป้ายเองผ่าน (7.13:1) ความจางจึงต้องลงเฉพาะข้อความรอง ไม่ใช่ทั้งกล่อง */
.mistake.is-cleared summary>*:not(.pill){opacity:.72}
.mistake.is-cleared .retest,.mistake.is-cleared .stem{opacity:.72}
.mistake .retest{font-size:.85rem}
.mistake summary .more{margin-left:auto;color:var(--navy2);font-size:.9rem;white-space:nowrap}
.mistake[open] summary .more{visibility:hidden}

@media (max-width:760px){
  /* แถบบนของหน้าทำโจทย์ต้องอยู่บรรทัดเดียว — ความคืบหน้าซ้ำอยู่ในการ์ดโจทย์อยู่แล้ว */
  .runbar .rp{display:none}
  .runbar .rt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .runwrap{padding-left:14px;padding-right:14px}
  .stem{font-size:1.05rem}
  .runfoot .btn{flex:1 1 auto}
  .trow{flex-wrap:wrap}
  .trow .tl{flex:1 1 100%}
}

/* ---------- หน้าขาย: หน้าจอแรก ----------
   ชื่อสินค้า · สี่ขั้น · ราคา · อายุสิทธิ์ ต้องเห็นครบก่อนเลื่อน ใช้โทเคนและปุ่มของ app.css ทั้งหมด */
.hero2 .pname{font-family:var(--disp);font-weight:800;font-size:1.15rem;color:var(--navy);margin:.2rem 0 .5rem}
.hero2 .steps4{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:.2rem 0 .8rem;padding:0}
.hero2 .steps4 span{background:var(--pinksoft);color:var(--pink);font-weight:700;font-size:.9rem;
  padding:4px 12px;border-radius:999px}
.hero2 .steps4 span+span::before{content:"→";color:var(--ink2);font-weight:400;margin-right:12px;margin-left:-6px}
.hero2 .heroprice{display:flex;align-items:baseline;gap:var(--s2);margin:.6rem 0 .2rem}
.hero2 .heroprice .pr{font-family:var(--disp);font-size:2.1rem;font-weight:800;color:var(--navy)}

.sprint-shell .topbar .chip{white-space:nowrap}

/* ==================================================================
   iOS27 ของ EngPeak — จังหวะช่องไฟและลำดับตัวอักษร (บุ๋ยตีกลับ 13 ก.ย. 2026)
   เดิมหน้าแน่นเกินไป กล่องซ้อนกล่อง และข้อความหมายเหตุตัวโตเท่าเนื้อหาหลัก
   ⛔ ทุกกฎอยู่ใต้ .sprint — ไม่แตะสินค้าตัวอื่นที่ใช้ app.css ร่วมกัน
   ================================================================== */
.sprint{
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px; --s6:52px;
}

/* ---------- จังหวะของหน้า ----------
   ระยะระหว่างบล็อกมาจากสเกลเดียว ไม่ใช่ margin เฉพาะกิจของแต่ละหน้า */
.sprint .page{padding:var(--s5) var(--s4) 96px}
.sprint .page>*+*{margin-top:var(--s4)}
.sprint .page>h1{margin:0 0 var(--s1)}
.sprint .page>h1+.sub{margin-top:0;margin-bottom:var(--s5)}
.sprint .page>h2{margin:var(--s6) 0 var(--s3)}
.sprint .page>.sec{margin-top:var(--s6)}

/* ---------- ลำดับตัวอักษร ----------
   ระดับความสำคัญมาจากคลาส ไม่ใช่จากแท็กที่บังเอิญหยิบมาใช้ */
.sprint h1{font-size:2rem;line-height:1.35;letter-spacing:0}
.sprint .sub{font-size:1.05rem;color:var(--ink2);max-width:62ch;line-height:1.6}
.sprint .t-section{font-family:var(--disp);font-weight:800;font-size:1.15rem;color:var(--ink);
  letter-spacing:0;line-height:1.35;margin:0 0 var(--s3)}
.sprint .t-label{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink2);font-weight:600}
/* ⛔ หมายเหตุ/คำอธิบายประกอบ/ข้อความตามกฎหมาย ต้องเบากว่าเนื้อหาหลักอย่างเห็นได้ชัด
   แต่ยังต้องอ่านออก — --ink2 บนพื้นสว่างวัดได้ 5.92:1 ผ่าน AA */
.sprint .t-help{font-size:.9rem;line-height:1.6;color:var(--ink2);max-width:60ch}
.sprint .t-note{font-size:.88rem;line-height:1.6;color:var(--ink2);max-width:62ch;
  padding-left:var(--s2);border-left:2px solid var(--line2)}
.sprint .t-legal{font-size:.8rem;line-height:1.55;color:var(--ink2);max-width:70ch}
.sprint .muted{color:var(--ink2)}

/* ---------- ปุ่มต้องมีที่หายใจ ----------
   ปุ่มสองปุ่มติดกันบนมือถือเคยดูเหมือนปุ่มเดียว */
.sprint .row{gap:var(--s3)}
.sprint .row.tight{gap:var(--s2)}
.sprint .actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}

/* ---------- เลิกซ้อนกล่องในกล่อง ----------
   หน้าเดิมเป็น page → card → card → row-card → pill  ตอนนี้เหลือ
   surface → section → เนื้อหา โดยใช้ช่องไฟกับเส้นคั่นแทนขอบกล่อง */
.sprint .sec{background:none;border:0;box-shadow:none;padding:0}
.sprint .sec>.t-section{margin-bottom:var(--s3)}
.sprint .panel .panel,.sprint .card .card{background:none;border:0;box-shadow:none;
  padding:0;margin:0;backdrop-filter:none}
.sprint .slist{background:var(--glass,rgba(255,255,255,.62));border:1px solid var(--gline,var(--line));
  border-radius:var(--rl);overflow:hidden;box-shadow:var(--gshadow,var(--shadow))}
.sprint .slist .srow{border:0;border-radius:0;background:none;box-shadow:none;
  padding:var(--s3) var(--s4);margin:0;border-bottom:1px solid var(--line)}
.sprint .slist .srow:last-child{border-bottom:0}

/* ---------- แถบตัวเลข: พื้นผิวเดียว ไม่ใช่การ์ดลอยสามใบ ---------- */
.sprint .kpis.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--glass,rgba(255,255,255,.62));border:1px solid var(--gline,var(--line));
  border-radius:var(--rl);box-shadow:var(--gshadow,var(--shadow));overflow:hidden}
.sprint .kpis.three .kpi{background:none;border:0;box-shadow:none;border-radius:0;
  padding:var(--s4);border-right:1px solid var(--line);backdrop-filter:none}
.sprint .kpis.three .kpi:last-child{border-right:0}
.sprint .kpi .lb{font-size:.82rem;color:var(--ink2)}
.sprint .kpi .v{font-family:var(--disp);font-size:1.9rem;font-weight:800;color:var(--navy);
  line-height:1.2;margin:var(--s1) 0 2px}
.sprint .kpi .hint{font-size:.8rem;color:var(--ink2)}

/* ---------- การ์ด "ทำอันนี้ต่อ" ---------- */
.sprint .nextcard{padding:var(--s5) var(--s4)}
.sprint .nextcard .lb{letter-spacing:.08em}
.sprint .nextcard b{font-size:1.5rem;margin:var(--s2) 0 var(--s1)}
.sprint .nextcard p{margin:0 0 var(--s4);opacity:.92;max-width:60ch}
.sprint .nextcard .row{margin:0;gap:var(--s3)}

/* ---------- เมนูข้าง: จังหวะเดียวกับคอร์ส ---------- */
.sprint-shell .sb{padding:var(--s4) var(--s2)}
.sprint-shell .sb .sbsec{padding:var(--s3) 12px var(--s2)}
.sprint-shell .sb .nv{padding:11px 12px;margin-bottom:2px}

@media(max-width:760px){
  .sprint .page{padding:var(--s4) var(--s3) 104px}
  .sprint .page>h1{font-size:1.6rem}
  .sprint .page>h1+.sub{margin-bottom:var(--s4)}
  .sprint .page>*+*{margin-top:var(--s4)}
  .sprint .page>h2,.sprint .page>.sec{margin-top:var(--s5)}
  /* แถบตัวเลขบนมือถือเรียงสองแถว เส้นคั่นจึงต้องเปลี่ยนทิศ ไม่งั้นเส้นค้างกลางอากาศ */
  .sprint .kpis.three{grid-template-columns:1fr 1fr}
  .sprint .kpis.three .kpi{padding:var(--s3);border-bottom:1px solid var(--line)}
  .sprint .kpis.three .kpi:nth-child(2n){border-right:0}
  .sprint .kpis.three .kpi:last-child{grid-column:1/-1;border-bottom:0}
  .sprint .kpi .v{font-size:1.6rem}
  .sprint .slist .srow{padding:var(--s3)}
  .sprint .nextcard{padding:var(--s4) var(--s3)}
  .sprint .nextcard .row .btn{flex:1 1 100%}
}

/* ---------- ส่วนประกอบที่ใช้แทนกล่องซ้อน ---------- */
.sprint .backlink{color:var(--ink2);text-decoration:none;font-size:.92rem}
.sprint .backlink:hover{color:var(--navy)}
/* แบบวัดพื้นฐาน: สองส่วน สองคอลัมน์ ไม่มีกรอบ */
.sprint .parts2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0 0}
.sprint .parts2>div{border-top:2px solid var(--line);padding-top:var(--s3)}
.sprint .parts2 dt{font-family:var(--disp);font-weight:700;font-size:1.05rem;color:var(--ink)}
.sprint .parts2 dd{margin:2px 0 var(--s1);color:var(--ink2)}
.sprint .parts2 dd b{font-family:var(--disp);font-size:1.6rem;color:var(--navy);margin-right:4px}
/* สมุดข้อผิด: รายการเดียวบนพื้นผิวเดียว */
.sprint .mlist{margin-top:var(--s4)}
.sprint .mlist .mistake{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.sprint .mlist .mistake:last-child{border-bottom:0}
.sprint .mlist .mistake summary{gap:var(--s2)}
.sprint .mlist .mistake[open]{padding-bottom:var(--s4)}
.sprint .mlist .mistake .stem{margin-top:var(--s3)}

/* ---------- หน้าชำระเงิน ---------- */
.sprint-checkout{max-width:640px}
.sprint-checkout>h1{margin:var(--s1) 0 var(--s2)}
.sprint-checkout .heroprice{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s2)}
.sprint-checkout .heroprice .pr{font-family:var(--disp);font-size:2.2rem;font-weight:800;color:var(--navy)}
.sprint-checkout .sec{margin-top:var(--s5)}
.sprint .included{list-style:none;margin:0;padding:0}
.sprint .included li{padding:var(--s2) 0 var(--s2) 26px;position:relative;line-height:1.6;
  border-bottom:1px solid var(--line)}
.sprint .included li:last-child{border-bottom:0}
.sprint .included li::before{content:"✓";position:absolute;left:0;top:var(--s2);color:var(--good);font-weight:700}
.sprint .checkout{margin-top:var(--s5);padding:var(--s4);background:var(--glass,rgba(255,255,255,.62));
  border:1px solid var(--gline,var(--line));border-radius:var(--rl);box-shadow:var(--gshadow,var(--shadow))}
.sprint .checkout .field label{margin-bottom:var(--s1)}
.sprint .checkout .field .t-help{margin:var(--s1) 0 0}
/* ⛔ ช่องยอมรับเงื่อนไขเคยเบียดติดปุ่มชำระเงิน — แยกด้วยช่องไฟระดับเดียวกับระหว่างส่วน */
.sprint .checkout .consent{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s4) 0;
  font-weight:400;line-height:1.6}
.sprint .checkout .consent input{width:22px;height:22px;margin-top:2px;flex:none}
.sprint .checkout .consent a{margin:0 4px}
.sprint .checkout .btn{width:100%;justify-content:center}
.sprint .checkout .t-legal{margin:var(--s3) 0 0}

@media(max-width:760px){
  .sprint .parts2{grid-template-columns:1fr;gap:var(--s3)}
  .sprint .checkout{padding:var(--s3)}
  .sprint-checkout .heroprice .pr{font-size:1.9rem}
}

/* ---------- หน้าขาย: เล่าเป็นลำดับเดียว แยกส่วนด้วยช่องไฟ ไม่ใช่กล่อง ---------- */
.sprint-sales{max-width:880px}
.sprint-sales .hero2{padding-bottom:var(--s5)}
.sprint-sales .story{padding:var(--s6) 0 0;margin:0}
.sprint-sales .story+.story{border-top:1px solid var(--line);margin-top:var(--s6)}
.sprint-sales .story h2{font-family:var(--disp);font-size:1.55rem;font-weight:800;line-height:1.35;
  letter-spacing:0;margin:var(--s1) 0 var(--s3)}
.sprint-sales .lede{font-size:1.05rem;line-height:1.75;color:var(--ink);max-width:62ch;margin:0 0 var(--s3)}
.sprint-sales .steps{list-style:none;counter-reset:st;margin:var(--s4) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
.sprint-sales .steps li{counter-increment:st;position:relative;padding-left:44px}
.sprint-sales .steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:50%;background:var(--pinksoft);color:var(--pink);font-family:var(--mono);font-weight:700;
  display:grid;place-items:center}
.sprint-sales .steps b{display:block;font-family:var(--disp);font-size:1.05rem;margin-bottom:2px}
.sprint-sales .steps span{color:var(--ink2);line-height:1.65}
.sprint-sales .topics{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.sprint-sales .topics li{padding:6px 14px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);font-size:.92rem;color:var(--ink)}
.sprint-sales .compare3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.sprint-sales .compare3>div{padding-top:var(--s3);border-top:2px solid var(--line)}
.sprint-sales .compare3>div.hi{border-top-color:var(--pink)}
.sprint-sales .compare3 h3{font-family:var(--disp);font-size:1.05rem;margin:0 0 var(--s1)}
.sprint-sales .compare3 p{color:var(--ink2);line-height:1.65;margin:0 0 var(--s2)}
.sprint-sales .compare3 .price{color:var(--navy);font-weight:700;font-size:1.1rem}
.sprint-sales .pricing .row{margin-top:var(--s4)}
.sprint-sales .notes{padding-bottom:var(--s5)}

@media(max-width:760px){
  .sprint-sales .story{padding-top:var(--s5)}
  .sprint-sales .story+.story{margin-top:var(--s5)}
  .sprint-sales .story h2{font-size:1.3rem}
  .sprint-sales .steps{grid-template-columns:1fr;gap:var(--s4)}
  .sprint-sales .compare3{grid-template-columns:1fr;gap:var(--s3)}
  .sprint-sales .hero2 .row .btn{flex:1 1 100%;justify-content:center}
}

/* ⛔ ตัวอักษรไทยห้ามยืดช่องไฟและห้ามตัวพิมพ์ใหญ่ (กฎฟอนต์ไทยของ EngPeak) — letter-spacing
   ทำให้วรรณยุกต์ลอยแยกจากพยัญชนะ และ uppercase เปลี่ยนคำอังกฤษในป้ายไทยให้กลายเป็นตัวใหญ่หมด
   ป้ายไทยจึงบอกลำดับชั้นด้วยขนาด น้ำหนัก และสีแทน */
.sprint .t-label{letter-spacing:0;text-transform:none;font-size:.86rem;font-weight:600}
.sprint .nextcard .lb{letter-spacing:0;text-transform:none;font-family:inherit;font-size:.88rem;opacity:.8}
.sprint .expl .estruct .elab{letter-spacing:0;text-transform:none;font-size:.82rem;font-weight:600}
.sprint .kpi .lb{letter-spacing:0}

/* สี่ขั้นบนหน้าขาย: ลูกศรอยู่ระหว่างป้าย ไม่ใช่ติดอยู่ข้างในพื้นหลังของป้าย */
.sprint-sales .hero2 .steps4{gap:0;margin:var(--s2) 0 var(--s4)}
.sprint-sales .hero2 .steps4 span{background:none;padding:0;border-radius:0;color:var(--pink);
  font-weight:700;font-size:1rem}
.sprint-sales .hero2 .steps4 span+span::before{content:"→";color:var(--line2);font-weight:400;
  margin:0 var(--s2)}
.sprint-sales .hero2 .sub{margin-bottom:var(--s4)}
.sprint-sales .hero2 .heroprice{margin:0 0 var(--s3)}

/* ปุ่มรองในการ์ดหลักต้องเบากว่าปุ่มหลัก — บนมือถือไม่ยืดเต็มความกว้าง */
@media(max-width:760px){
  .sprint .nextcard .row .btn.ghost{flex:0 0 auto}
}

/* ⛔ <ol>/<ul> ของรายการเซสชันยังมี padding-left ของเบราว์เซอร์ ทำให้บนมือถือเลขลำดับไปเริ่มที่
   ~115px และเส้นคั่นไม่ชนขอบ — เสียพื้นที่หนึ่งในสามของจอ */
.sprint .slist{padding:0;list-style:none}
/* "เริ่ม" / "ทำซ้ำ" เป็นการกระทำรอง ต้องไม่ตัวโตเท่าชื่อเซสชัน */
.sprint .srow .chev{font-size:.92rem;font-weight:600;padding:6px 0 6px var(--s2)}
.sprint .srow .st small{font-size:.85rem}

/* ---------- เฉลย: เลิกกล่องซ้อนสามชั้น ----------
   เดิม .expl (พื้น) > .estruct (กรอบขาว) > .struct (กรอบประ) — เหลือพื้นเดียว + สูตรโครงสร้างกรอบประ */
.sprint .expl{padding:var(--s3) var(--s3);margin-top:var(--s3)}
.sprint .expl p{margin:0 0 var(--s2)}
.sprint .expl .estruct{background:none;border:0;padding:0;margin:var(--s3) 0}
.sprint .expl .estruct .elab{margin:0 0 2px}
.sprint .expl .struct{margin-top:var(--s1)}
.sprint .expl .ewrong{margin:var(--s3) 0}
.sprint .expl .take{margin:var(--s3) 0 0}

/* ---------- สมุดข้อผิด: หัวแถวสองบรรทัดที่อ่านง่าย ----------
   บรรทัดแรก ป้าย + หัวข้อ · บรรทัดสอง รายละเอียด (ซ้าย) + ลิงก์เปิดดู (ขวา) */
.sprint .mlist .mistake summary{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s2);
  row-gap:4px;align-items:center;list-style:none}
.sprint .mlist .mistake summary::-webkit-details-marker{display:none}
.sprint .mlist .mistake summary>b{font-size:1rem;line-height:1.45}
.sprint .mlist .mistake summary>small{grid-column:1/-1;font-size:.86rem;line-height:1.5}
.sprint .mlist .mistake summary>.more{grid-column:1/-1;justify-self:start;margin:2px 0 0;
  font-size:.88rem}

/* ---------- ผลเซสชัน: รายการเฉลยบนพื้นเดียว ไม่ใช่การ์ดในการ์ด ---------- */
.sprint .trows{background:var(--glass,rgba(255,255,255,.62));border:1px solid var(--gline,var(--line));
  border-radius:var(--rl);padding:var(--s2) var(--s4);box-shadow:var(--gshadow,var(--shadow))}
.sprint .trows .trow{margin:0;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.sprint .trows .trow:last-child{border-bottom:0}
.sprint .review .q{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:var(--s3) 0;margin:0}
.sprint .review .q:first-of-type{margin-top:var(--s3)}
.sprint .review .q summary{gap:var(--s2);padding:2px 0}
.sprint .review .q[open]{padding-bottom:var(--s4)}
.sprint .review .q .stem{margin:var(--s3) 0}
.sprint .opts,.sprint .review .q{--gap:var(--s2)}
.sprint .review .q .opt+.opt{margin-top:var(--s2)}

/* ⛔ ชุดจับเวลา: "ส่งคำตอบ" เคยหน้าตาเหมือน "ถัดไป" ทุกประการ วางชิดกัน = กดพลาดส่งทั้งชุดได้ง่าย
   ส่งคำตอบคือการกระทำสุดท้ายที่ย้อนไม่ได้ ต้องดูต่างจากปุ่มเดินหน้าอย่างชัดเจน */
.runfoot #btnSubmit{background:var(--paper);color:var(--crit)!important;
  border:1.5px solid var(--crit);box-shadow:none}
.runfoot #btnSubmit:hover{background:var(--critsoft)}
.runfoot{gap:var(--s2)}
.runbar .rx{padding:6px 2px}

@media(max-width:760px){
  .sprint .trows{padding:var(--s1) var(--s3)}
}

/* ⛔ app.css วาง .hero2 เป็นสองคอลัมน์ที่จอกว้าง (เพื่อรูปห้องสอบของหน้าคอร์ส) หน้าขายนี้ไม่มีรูป
   เนื้อหาจึงถูกสลับซ้าย-ขวาเป็นฟันปลา ป้าย/ราคาอยู่คนละฝั่งกับหัวเรื่อง — บังคับคอลัมน์เดียว */
.sprint-sales .hero2{grid-template-columns:1fr;gap:0;max-width:720px}
/* app.css จำกัด .slist ไว้ 640px — บนหน้า Home รายการจึงแคบกว่าการ์ดหลักและแถบตัวเลขข้างบน */
.sprint .sec .slist{max-width:none}

/* ==================================================================
   ด่านสุดท้าย WCAG AA + iOS27 (13 ก.ย. 2026) — วัดจากหน้าจอจริงด้วย tests/wcag_manual_sprint.py
   ================================================================== */

/* ---------- สีที่ต้องผ่าน AA บนพื้นไล่สีจริง ----------
   ตัวหนังสือรอง #55606D ผ่าน 5.9:1 บนพื้นขาว แต่พื้นของ EngPeak ไล่สีน้ำเงิน/ทองที่มุมบน
   จุดที่เข้มสุดวัดได้เหลือ 4.10:1 · ทองตัวหนังสือ #C81E55 เหลือ 3.62:1 · ขอบช่องกรอก 1.98:1
   ปรับเฉพาะใต้ .sprint ให้ผ่านแม้ในจุดที่เข้มที่สุด (ค่าที่วัดได้เขียนกำกับไว้) — ปุ่มทองคงสีเดิม */
.sprint{
  --ink2:#4B5563;          /* ≥4.84:1 บนพื้นเข้มสุด */
  --pink:#B01A4B;          /* ทองตัวหนังสือ ≥4.82:1 */
  --orange:#B3380A;        /* "Peak" บนแถบกระจก ≥5.58:1 */
  --ctl-line:#66707F;      /* ขอบช่องกรอก ≥3.21:1 (WCAG 1.4.11) */
  /* ชั้นมุมโค้ง: ปุ่ม/ป้าย = เม็ดยา · ตัวควบคุมและกล่องเฉลย = --rc · พื้นผิว = --r · พื้นผิวใหญ่ = --rl */
  --rc:12px;
  --ctl-h:48px;            /* ความสูงปุ่มและช่องกรอกเท่ากันทุกหน้า (เป้ากดนิ้วโป้ง) */
}
/* body.sprint (ไม่ใช่ .sprint) ให้เจาะจงเท่า body.hub .btn.pink ใน app.css — คนที่มาจาก engpeak.net ปุ่มยังเป็นชมพู CU-TEP ไม่กลายเป็นส้ม */
body.sprint .btn.pink{background:#C81E55;box-shadow:0 8px 18px rgba(200,30,85,.25)}
body.sprint .btn.pink:hover{background:#A3174A}
.sprint .btn{min-height:var(--ctl-h);display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--s4);line-height:1.3}
.sprint .btn.big{min-height:52px;padding:0 var(--s5)}
/* ปุ่มในแถบบนของหน้าขายเป็นปุ่มนำทาง ไม่ใช่ปุ่มหลักของหน้า — เตี้ยกว่า */
.sprint .top nav .btn,.sprint .btn.sm{min-height:40px;padding:0 var(--s3)}
/* ที่ 320px แถวบน (โลโก้ + เข้าเรียน + ปุ่ม) กว้างเกินจอ 14px ทำให้หน้าเลื่อนซ้ายขวาได้ (WCAG 1.4.10) */
/* ที่ 320px วงกลมบัญชีถูกบีบจนเป็นวงรีชิดขอบจอ — วงกลมห้ามหด ชิปชื่อสินค้าย่อลงแทน */
.sprint-shell .topbar .who{flex:none}
@media(max-width:360px){
  .sprint-shell .topbar{gap:var(--s1)}
  .sprint-shell .topbar .chip{font-size:.66rem;padding:4px 8px}
}
/* (app.css ใช้ body.mk .top nav a.btn — ต้องเจาะจงเท่ากันถึงจะชนะ) */
@media(max-width:360px){
  body.sprint .top{padding-left:var(--s2);padding-right:var(--s2)}
  body.sprint .top .brand{font-size:1rem;gap:var(--s1)}
  body.sprint .top nav{gap:var(--s1)}
  body.sprint .top nav a.btn{padding:6px 10px;font-size:.85rem;white-space:nowrap;min-height:40px}
}
.sprint input[type=email],.sprint input[type=text]{min-height:var(--ctl-h);border-color:var(--ctl-line);
  border-radius:var(--rc)}
.sprint .opt,.sprint .expl,.sprint .expl .struct{border-radius:var(--rc)}
.sprint .opt{border-color:var(--ctl-line)}
.sprint .opt.right{border-color:var(--good)}
.sprint .opt.wrong{border-color:var(--crit)}

/* ---------- ข้อความรองของรายการที่แก้แล้ว ----------
   เดิมจางด้วย opacity จนเหลือ 2.65:1 — ความจางทำให้ตกเกณฑ์เสมอ ใช้สีรองแทน */
.sprint .mistake.is-cleared summary>*:not(.pill),.sprint .mistake.is-cleared .retest,
.sprint .mistake.is-cleared .stem{opacity:1;color:var(--ink2)}
.sprint .mistake summary .more{color:var(--navy2)}

/* ---------- โฟกัส ----------
   วงโฟกัสน้ำเงินบนการ์ดน้ำเงินวัดได้ 1.22:1 = มองไม่เห็น · บนพื้นเข้มใช้วงสีขาว */
.sprint .nextcard a:focus-visible,.sprint .nextcard button:focus-visible{outline-color:#fff}
/* แถบบนติดหัวจอและเมนูล่างบนมือถือเคยบังปุ่มที่ถูกโฟกัสด้วย Tab (เลื่อนไปแล้วยังอยู่ใต้แถบ) */
html:has(body.sprint){scroll-padding-top:88px;scroll-padding-bottom:96px}
html:has(body.sprint.run){scroll-padding-bottom:110px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- เมนูล่าง: มีสามปลายทาง ไม่ใช่ห้าช่องที่ว่างสองช่อง ----------
   หน้าปัจจุบันบอกด้วยน้ำหนักตัวอักษรและขีดบน ไม่ใช่สีอย่างเดียว (WCAG 1.4.1) */
@media(max-width:900px){
  .sprint-shell ~ .mnav,.sprint .mnav{grid-template-columns:repeat(3,1fr)}
  .sprint .mnav a{position:relative;font-size:.74rem;min-height:44px;justify-content:center}
  .sprint .mnav a.on{font-weight:700}
  .sprint .mnav a.on::before{content:"";position:absolute;top:-6px;left:30%;right:30%;height:3px;
    border-radius:0 0 3px 3px;background:currentColor}
}

/* ---------- Written Expression: ช่วงที่เลือกต้องบอกด้วยรูป ไม่ใช่สีพื้นอย่างเดียว ---------- */
.sprint .seg{border-bottom-color:var(--ink2)}
.sprint .seg.sel{border-bottom-width:3px}
.sprint .seg.sel sup::after{content:"✓";margin-left:1px}
.sprint .seg.right sup::after{content:"✓ เฉลย";margin-left:3px;font-family:inherit}

/* ---------- ทำโจทย์: โจทย์ต้องเด่นที่สุดบนจอ ---------- */
.sprint .qcard .stem{font-size:1.24rem;line-height:1.8;color:var(--ink);font-weight:500}
.sprint .qtop{font-size:.84rem}
.sprint .runbar .rt{font-size:.95rem;font-weight:600;color:var(--ink2)}
@media(max-width:760px){.sprint .qcard .stem{font-size:1.12rem}}

/* ---------- Home: สิ่งที่ควรทำต่อเด่นกว่าตัวเลข ----------
   ตัวเลขสามช่องเคยตัวโต 1.9rem ใกล้เคียงชื่อเซสชันในการ์ดหลัก ดึงสายตาแข่งกัน */
.sprint .kpis.three .kpi{padding:var(--s3) var(--s4)}
.sprint .kpi .v{font-size:1.3rem;margin:2px 0 0}
@media(max-width:760px){.sprint .kpi .v{font-size:1.2rem}.sprint .kpis.three .kpi{padding:var(--s2) var(--s3)}}
/* ตัวเลขเล็กลงแล้ว บนมือถือจึงวางสามช่องแถวเดียวได้ ไม่ต้องกินสองแถวใต้การ์ดหลัก */
@media(max-width:760px){
  .sprint .kpis.three{grid-template-columns:repeat(3,1fr)}
  .sprint .kpis.three .kpi{border-bottom:0;border-right:1px solid var(--line)}
  .sprint .kpis.three .kpi:nth-child(2n){border-right:1px solid var(--line)}
  .sprint .kpis.three .kpi:last-child{grid-column:auto;border-right:0}
  .sprint .kpi .lb{font-size:.76rem;line-height:1.4}
  .sprint .kpi .hint{display:none}
}
.sprint .actions .backlink{align-self:center}

/* เครื่องหมาย ✓ ของตัวเลือกที่เลือกไว้เคยตกไปอยู่บรรทัดใหม่ใต้ตัวอักษร A–D */
.sprint .opt .k{white-space:nowrap;min-width:2.2em}
/* ที่ 320px ปุ่มสามปุ่มของชุดจับเวลาเคยหักคำเป็นสองบรรทัด ("ก่อน / หน้า") */
@media(max-width:360px){
  .sprint .runfoot{gap:var(--s1);padding:6px}
  .sprint .runfoot .btn{padding:0 10px;font-size:.92rem;white-space:nowrap;min-width:0}
}

/* ⛔ พบบน production 13 ก.ย. 2026 (ตัวอย่างบนเครื่องไม่มีแบนเนอร์คุกกี้ เพราะไม่ได้ตั้ง pixel)
   แบนเนอร์คุกกี้ของเลน (fixed bottom, z-index 39) อยู่ใต้เมนูล่าง (z-index 40) บนมือถือ — ปุ่ม
   "ยอมรับ / เฉพาะจำเป็น" ถูกบังจนกดไม่ได้ · และบนหน้าทำโจทย์ แบนเนอร์ทับปุ่มก่อนหน้า/ถัดไป/ส่งคำตอบ
   แก้ใต้ .sprint เท่านั้น: ยกแบนเนอร์ขึ้นเหนือเมนูล่าง และไม่แสดงบนหน้าทำโจทย์ (เหมือนห้องสอบ body.exam)
   ไม่เลือก = ไม่มีคุกกี้โฆษณา จึงไม่กระทบ PDPA — ผู้เรียนเลือกได้ในหน้าอื่นของ Sprint */
@media(max-width:900px){
  body.sprint:not(.run) #consent{bottom:calc(58px + env(safe-area-inset-bottom))!important;z-index:41!important}
}
body.sprint.run #consent{display:none!important}

/* ==================================================================
   Composition v3 (13 ก.ย. 2026) — บุ๋ย: หน้าขาย/ชำระเงินบนเดสก์ท็อปโล่งเหมือนบทความ
   ไม่กลับไปใช้การ์ดซ้อน · ใช้พื้นผิวเฉพาะของที่มีความหมาย (ตัวอย่างหน้าฝึก · เส้นทาง · สรุปคำสั่งซื้อ)
   ================================================================== */

/* ---------- แถบบนของหน้าสาธารณะ: หน้าตาเดียวกับ engpeak.net ---------- */
.sprint .sp-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(27,42,107,.08);padding:0}
.sprint .sp-top .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:var(--s4);
  min-height:64px;padding:0 var(--s4)}
.sprint .sp-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.sprint .sp-logo img{width:38px;height:38px;border-radius:50%}
.sprint .sp-logo .t{line-height:1.1}
.sprint .sp-logo .t b{display:block;font-family:var(--disp);font-size:1.18rem;font-weight:800;color:var(--navy)}
.sprint .sp-logo .t b i{font-style:normal;color:var(--orange)}
.sprint .sp-logo .t small{display:block;font-size:.72rem;color:var(--ink2);font-weight:600}
.sprint .sp-top nav{display:flex;gap:2px;font-size:.92rem;font-weight:600}
.sprint .sp-top nav a{text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:999px}
.sprint .sp-top nav a:hover{background:var(--soft)}
.sprint .sp-top nav a[aria-current]{color:var(--pink);box-shadow:inset 0 -2px 0 var(--pink);border-radius:0}
.sprint .sp-top .acts{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.sprint .sp-top .btn{min-height:40px;padding:0 var(--s3);font-size:.9rem;box-shadow:none}
.sprint .btn.line{background:#fff;color:var(--navy)!important;border:1.5px solid var(--navy)}
.sprint .btn.line:hover{background:var(--soft)}

/* ---------- หน้าขาย ---------- */
.sprint-sales.sp{max-width:1180px;padding:0 var(--s4) var(--s5)}
.sprint .sp-sec{padding:72px 0 0}
.sprint .sp-sec>.t-label{margin:0 0 var(--s1)}
.sprint .sp-sec h2{font-family:var(--disp);font-size:1.75rem;font-weight:800;line-height:1.35;letter-spacing:0;
  color:var(--ink);margin:0 0 var(--s3);max-width:24ch}
.sprint .sp-lede{font-size:1.06rem;line-height:1.75;color:var(--ink);max-width:56ch;margin:0 0 var(--s3)}

/* HERO: เรื่องของสินค้า (ซ้าย) + ตัวอย่างหน้าฝึกจริง (ขวา) */
.sprint .sp-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center;
  padding:56px 0 8px}
.sprint .sp-hero h1{font-family:var(--disp);font-size:2.9rem;line-height:1.3;font-weight:800;color:var(--navy);
  letter-spacing:0;margin:var(--s2) 0 var(--s3)}
.sprint .sp-hero .pname{font-family:var(--disp);font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 var(--s3)}
.sprint .sp-mech{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0 0 var(--s3);padding:0;list-style:none}
.sprint .sp-mech li{font-weight:700;color:var(--pink);font-size:1.02rem}
.sprint .sp-mech li+li::before{content:"→";color:var(--ink2);font-weight:400;margin:0 var(--s2)}
.sprint .sp-hero .sp-lede{color:var(--ink2);max-width:46ch}
.sprint .sp-price{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s4) 0 var(--s3)}
.sprint .sp-price b{font-family:var(--disp);font-size:2.4rem;font-weight:800;color:var(--navy);line-height:1}
.sprint .sp-price span{color:var(--ink2);font-size:.98rem}
.sprint .sp-hero .btn.big{min-width:220px}

/* พื้นผิวเดียวที่ "เป็นของจริง": หน้าตาเหมือนหน้าฝึกของ Sprint ไม่ใช่กราฟิกประดับ */
.sprint .sp-surface{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.8);
  border-radius:var(--rl);box-shadow:0 24px 60px rgba(27,42,107,.12),0 1px 0 rgba(255,255,255,.9) inset;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sprint .sp-preview{margin:0;padding:var(--s4)}
.sprint .sp-preview figcaption{display:flex;justify-content:space-between;gap:var(--s2);font-size:.8rem;
  color:var(--ink2);margin:0 0 var(--s3)}
.sprint .sp-preview figcaption .mono{font-size:.78rem}
.sprint .sp-preview .stem{font-size:1.08rem;line-height:1.7;margin:0 0 var(--s3);font-weight:500;color:var(--ink)}
.sprint .sp-preview .opts{gap:8px}
.sprint .sp-preview .opt{cursor:default;padding:9px 12px}
.sprint .sp-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none;padding:0;
  margin:var(--s3) 0 var(--s2);font-size:.8rem;font-weight:600;color:var(--navy)}
.sprint .sp-flow li{background:var(--soft);border-radius:999px;padding:3px 10px}
.sprint .sp-flow li+li::before{content:"→";color:var(--ink2);margin:0 6px 0 -2px;font-weight:400}
.sprint .sp-struct{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sprint .sp-struct li{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:var(--rc);
  background:#fff;border:1px solid var(--line)}
.sprint .sp-struct li b{font-weight:600;font-size:.95rem;color:var(--ink)}
.sprint .sp-struct li small{font-size:.74rem;color:var(--ink2)}
.sprint .sp-struct li.v{border-color:var(--good);background:var(--goodsoft)}
.sprint .sp-struct li.v small{color:var(--good)}

/* WHY: ข้อความ + ตัวอย่างเหตุผลของตัวลวง (ตัวอย่างเดียวกับด้านบน) */
.sprint .sp-why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.sprint .sp-why .sp-reasons{margin:0;padding:var(--s4)}
.sprint .sp-reasons h3{font-size:.95rem;margin:0 0 var(--s2);color:var(--navy)}
.sprint .sp-reasons ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.sprint .sp-reasons li{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);font-size:.95rem;line-height:1.6}
.sprint .sp-reasons li .k{font-family:var(--mono);font-weight:700;color:var(--crit)}
.sprint .sp-reasons li.ok .k{color:var(--good)}

/* HOW: สี่ขั้นแนวนอนบนเดสก์ท็อป เชื่อมด้วยเส้นเดียว ไม่มีกล่องต่อขั้น */
.sprint .sp-how{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s4);position:relative;counter-reset:hw}
.sprint .sp-how::before{content:"";position:absolute;left:18px;right:18px;top:17px;height:2px;background:var(--line)}
.sprint .sp-how li{position:relative;counter-increment:hw;padding-top:52px}
.sprint .sp-how li::before{content:counter(hw);position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:#fff;font-family:var(--mono);font-weight:700;
  box-shadow:0 0 0 6px #EDF1F7}
.sprint .sp-how b{display:block;font-family:var(--disp);font-size:1.12rem;color:var(--ink);margin:0 0 4px}
.sprint .sp-how span{display:block;color:var(--ink2);line-height:1.65;font-size:.95rem;max-width:30ch}

/* JOURNEY: เส้นทาง 14 เซสชันบนพื้นผิวเดียว แบ่งสามช่วง */
.sprint .sp-path{margin-top:var(--s4);padding:var(--s4);display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr) minmax(0,1.2fr);gap:var(--s4)}
.sprint .sp-stage{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.sprint .sp-stage .bar{height:6px;border-radius:999px;background:var(--navy2)}
.sprint .sp-stage.practice .bar{background:var(--pink)}
.sprint .sp-stage.test .bar{background:var(--navy)}
.sprint .sp-stage h3{font-size:1rem;margin:0;color:var(--ink)}
.sprint .sp-stage h3 .mono{color:var(--ink2);font-weight:500;font-size:.82rem;margin-right:6px}
.sprint .sp-stage p{margin:0;color:var(--ink2);font-size:.9rem;line-height:1.6}
.sprint .sp-stage ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sprint .sp-stage li{font-size:.84rem;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.sprint .sp-stage ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sprint .sp-stage ol li{border-radius:var(--rc);background:none;border:0;padding:0;font-size:.92rem}
.sprint .sp-stage ol li .mono{color:var(--ink2);margin-right:6px}

/* FIT: สามทางเลือก เน้น Sprint ด้วยพื้นผิวบาง ๆ ไม่ใช่การ์ดโปรโมชันใหญ่ */
.sprint .sp-fit{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4);align-items:stretch}
.sprint .sp-fit>div{padding:var(--s4);border-top:2px solid var(--line)}
.sprint .sp-fit>div.hi{border-top:0;border-radius:var(--rl);background:rgba(255,255,255,.72);
  box-shadow:0 12px 32px rgba(27,42,107,.08);outline:1.5px solid rgba(200,30,85,.35)}
.sprint .sp-fit h3{font-family:var(--disp);font-size:1.08rem;margin:0 0 var(--s1);color:var(--ink)}
.sprint .sp-fit p{margin:0 0 var(--s2);color:var(--ink2);line-height:1.65}
.sprint .sp-fit .price{font-family:var(--disp);font-weight:800;color:var(--navy);font-size:1.15rem;margin:0}
.sprint .sp-fit .price small{font-weight:500;color:var(--ink2);font-size:.85rem}

/* FINAL CTA */
.sprint .sp-final{margin-top:72px;padding:var(--s5) var(--s5);display:grid;grid-template-columns:minmax(0,1.2fr) auto;
  gap:var(--s4);align-items:center}
.sprint .sp-final h2{margin:0 0 var(--s2)}
.sprint .sp-final .sp-price{margin:0}
.sprint .sp-final .t-help{margin:var(--s2) 0 0}
.sprint .sp-notes{padding:var(--s4) 0 0;max-width:72ch}

@media(max-width:980px){
  .sprint .sp-hero{grid-template-columns:1fr;gap:var(--s5);padding-top:var(--s5)}
  .sprint .sp-hero h1{font-size:2.3rem}
  .sprint .sp-why{grid-template-columns:1fr;gap:var(--s4)}
  .sprint .sp-path{grid-template-columns:1fr 1fr}
  .sprint .sp-path .practice{grid-column:1/-1;order:2}
  .sprint .sp-path .test{order:3}
  .sprint .sp-final{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sprint .sp-top .in{padding:0 var(--s3);gap:var(--s2)}
  .sprint .sp-top nav{display:none}
  .sprint-sales.sp{padding:0 var(--s3) var(--s5)}
  .sprint .sp-sec{padding-top:52px}
  .sprint .sp-sec h2{font-size:1.4rem}
  .sprint .sp-hero{padding-top:var(--s4)}
  .sprint .sp-hero h1{font-size:1.9rem}
  .sprint .sp-price b{font-size:2rem}
  .sprint .sp-hero .btn.big{width:100%}
  .sprint .sp-preview{padding:var(--s3)}
  .sprint .sp-how{grid-template-columns:1fr;gap:var(--s4)}
  .sprint .sp-how::before{left:17px;right:auto;top:18px;bottom:18px;width:2px;height:auto}
  .sprint .sp-how li{padding:0 0 0 56px;min-height:36px}
  .sprint .sp-path{grid-template-columns:1fr;padding:var(--s3)}
  .sprint .sp-path .practice{order:0}
  .sprint .sp-fit{grid-template-columns:1fr}
  .sprint .sp-final{padding:var(--s4) var(--s3);margin-top:52px}
  .sprint .sp-final .btn{width:100%}
}
@media(max-width:360px){
  .sprint .sp-logo .t small{display:none}
  .sprint .sp-top .btn{padding:0 var(--s2);font-size:.85rem}
  .sprint .sp-hero h1{font-size:1.7rem}
}

/* ---------- หน้าชำระเงิน: ฟอร์ม (ซ้าย) + สรุปคำสั่งซื้อติดจอ (ขวา) ---------- */
.sprint-checkout.ck{max-width:1080px;padding:var(--s5) var(--s4) var(--s6)}
.sprint .ck-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:56px;align-items:start}
.sprint .ck-main{grid-column:1;grid-row:1;max-width:560px}
.sprint .ck-sum{grid-column:2;grid-row:1;position:sticky;top:96px;padding:var(--s4)}
.sprint .ck-main h1{font-size:2.1rem;margin:var(--s1) 0 var(--s2)}
.sprint .ck-main .sub{margin:0 0 var(--s4)}
.sprint .ck-main .checkout{margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.sprint .ck-sum h2{font-family:var(--disp);font-size:1.1rem;margin:0 0 var(--s2);color:var(--ink)}
.sprint .ck-sum .sp-price{margin:0 0 2px}
.sprint .ck-sum .sp-price b{font-size:2.2rem}
.sprint .ck-sum .was{font-size:.9rem;color:var(--ink2);margin:0}
.sprint .ck-sum .was s{color:var(--ink2)}
.sprint .ck-sum .included{margin:var(--s3) 0 0;border-top:1px solid var(--line);padding-top:var(--s2)}
.sprint .ck-sum .included li{border-bottom:0;padding:6px 0 6px 26px}
.sprint .ck-sum .included li::before{top:6px}
.sprint .ck-sum .t-help{margin:var(--s3) 0 0}
@media(max-width:900px){
  .sprint .ck-grid{grid-template-columns:1fr;gap:var(--s4)}
  .sprint .ck-sum{grid-column:1;grid-row:1;position:static;padding:var(--s3)}
  .sprint .ck-main{grid-row:2;max-width:none}
  .sprint .ck-sum .included{display:flex;flex-wrap:wrap;gap:4px 14px}
  .sprint .ck-sum .included li{padding:2px 0 2px 20px;font-size:.9rem}
  .sprint .ck-sum .included li::before{top:2px}
}
@media(max-width:760px){
  .sprint-checkout.ck{padding:var(--s4) var(--s3) var(--s5)}
  .sprint .ck-main h1{font-size:1.6rem}
  .sprint .ck-sum .sp-price b{font-size:1.9rem}
}

/* ---------- หน้าขาย: คำถามที่พบบ่อย (details) ---------- */
.sprint .sp-faq details{border-top:1px solid var(--line);padding:0}
.sprint .sp-faq details:last-child{border-bottom:1px solid var(--line)}
.sprint .sp-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:var(--s2);
  font-weight:700;color:var(--ink);list-style:none;padding:var(--s2) 0}
.sprint .sp-faq summary::-webkit-details-marker{display:none}
.sprint .sp-faq summary::after{content:"+";margin-left:auto;font-weight:400;color:var(--ink2);font-size:1.2rem}
.sprint .sp-faq details[open] summary::after{content:"−"}
.sprint .sp-faq details p{margin:0 0 var(--s3);max-width:72ch;color:var(--ink2);line-height:1.7}
.sprint .sp-final{margin-top:72px}
.sprint .sp-story .t-help{margin:calc(-1 * var(--s2)) 0 var(--s3)}

/* ช่องยอมรับเงื่อนไขอยู่บนพื้นหน้าเว็บแล้ว (ไม่ใช่บนการ์ดขาว) — ขอบสีเทามาตรฐานของเบราว์เซอร์เหลือ 2.91:1
   วาดช่องเองด้วยขอบ --ctl-line (≥3.21:1) และเครื่องหมายถูกเป็นรูป ไม่ใช่สีอย่างเดียว (WCAG 1.4.11) */
.sprint .checkout .consent input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  margin:2px 0 0;border:2px solid var(--ctl-line);border-radius:6px;background:#fff center/14px no-repeat;
  cursor:pointer;accent-color:var(--navy2)}
.sprint .checkout .consent input[type=checkbox]:checked{border-color:var(--navy2);background-color:var(--navy2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ==================================================================
   CU-TEP Grammar Sprint — additions on top of the Structure Sprint sheet (13 Sep 2026, dev)
   Everything below is scoped to .gsprint so the TOEFL sheet this file started from is unchanged.
   ================================================================== */
.gs-dev{margin:0;padding:6px 16px;background:#FFF3E0;color:#7A3E00;font-size:.82rem;text-align:center;
  border-bottom:1px solid #F3D3A8}
.gsprint .seg.wrong{background:var(--critsoft);border-bottom-color:var(--crit)}
.gsprint .seg.wrong sup::after{content:"✗";margin-left:2px}
.gsprint .srow.is-locked .st b{color:var(--ink2)}
.gsprint .srow .pill.w{margin-left:auto;white-space:nowrap}
.gsprint .expl .ekey s{color:var(--crit);text-decoration-thickness:2px}
.gsprint .expl .ewrong li b span{font-weight:600}
.gsprint .sp-fit4{grid-template-columns:1fr 1fr}
@media(max-width:640px){.gsprint .sp-fit4{grid-template-columns:1fr}}
.gsprint .stem .seg{white-space:normal}
/* after answering, the underline marks carry the verdict — no stacked "✓ ✓ เฉลย" and no ✓ beside a wrong choice */
.gsprint .seg.right sup::after{content:" จุดผิด";font-family:inherit;font-weight:700;margin-left:2px}
.gsprint .seg.sel.right sup::after{content:" จุดผิด"}
.gsprint .seg.sel.wrong sup::after{content:"✗"}
.gsprint .opt.right .k::after,.gsprint .opt.wrong .k::after{content:""}
.gsprint .kpis.three .kpi .v{line-height:1.3;margin:2px 0 4px}
@media(min-width:761px){.gsprint .kpis.three .kpi .hint{display:block;line-height:1.4}}

/* sub-label (owner decision 13 Sep 2026): Writing · Error Identification Practice */
.gsprint .gs-sub{margin:-2px 0 var(--s2);color:var(--ink2);font-weight:600;font-size:.95rem}
.gsprint .sb .sbsub{display:block;font-size:.74rem;color:var(--ink2);padding:0 12px var(--s2);line-height:1.4}
/* WCAG 1.4.3 (full build check 14 Sep 2026): the four-step pink labels measured 4.24:1 on the
   darkest gradient stop of the sales hero — darker Chula pink for text only (buttons keep #C81E55) */
.gsprint .sp-mech li{color:#A3174A}

/* Owner acceptance staging (14 Sep 2026) — the banner sits outside the product copy; navy on white text 12:1 */
.gs-stage{margin:0;padding:6px 16px;background:#1B2A6B;color:#fff;font-size:.82rem;text-align:center;line-height:1.5}
.gs-stage a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.gs-stage a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gsprint .gs-expired{margin:var(--s2) 0;padding:10px 14px;border-radius:14px;background:#FFF3E0;color:#7A3E00;
  border:1px solid #F3D3A8;font-size:.95rem;line-height:1.5}
.gsprint .ot-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.gsprint .ot-card{padding:16px}
.gsprint .ot-card h3{margin:0 0 6px}
.gsprint .ot-card .mono{overflow-wrap:anywhere}
.gsprint .ot-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gsprint .ot-acts form{margin:0}
.gsprint .ot-steps{padding-left:1.4em;line-height:1.6}
.gsprint .ot-steps li{margin:4px 0}

/* ==================================================================
   Owner Proxy HOLD fixes (14 Sep 2026)
   ================================================================== */
/* no code-style type anywhere a learner reads: numbers keep aligned figures in the product's own face */
.gsprint .mono,.gsprint .opt .k,.gsprint .seg sup,.gsprint .topbar .chip,.gsprint .sp-reasons li .k,
.gsprint .sp-how li::before,.gsprint .expl .key{font-family:inherit;font-variant-numeric:tabular-nums}
.gsprint .expl .key{color:var(--good);font-weight:700}
/* Thai label: no uppercase / tracking */
.gsprint .expl .estruct .elab{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:600}
/* sentence structure: short Thai label above each English phrase, one wrapping row — no boxes */
.gsprint .sx{list-style:none;margin:.4rem 0 .2rem;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:flex-end}
.gsprint .sx li{display:flex;flex-direction:column;min-width:0}
.gsprint .sx small{font-size:.76rem;color:var(--ink2);line-height:1.35}
.gsprint .sx li>span{font-weight:600;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.gsprint .sx li.sx-join>span{font-weight:400;color:var(--ink2)}
/* the "จุดผิด" word stays with its letter instead of wrapping onto its own line */
.gsprint .seg sup{white-space:nowrap}
/* runner top bar on wide screens: title left · counter, clock and exit grouped right with room between */
@media(min-width:761px){
  .gsprint .runbar{gap:var(--s4)}
  .gsprint .runbar .rp{margin-left:auto}
  .gsprint .runbar .timer{margin-left:0}
  .gsprint .runbar .rx{padding:6px 12px;border:1px solid var(--line);border-radius:999px}
}
/* Grammar Sprint footer + order/error pages */
.gsprint .gs-foot{max-width:1180px;margin:56px auto 0}
.gsprint .gs-msg{max-width:560px;padding:var(--s5) 0}
.gsprint .gs-msg h1{font-size:1.5rem;margin:var(--s1) 0 var(--s3)}
.gsprint .gs-qr{text-align:center;margin:8px 0}
.gsprint .gs-qr img{width:240px;height:240px;border:1px solid var(--line);border-radius:12px;background:#fff}
.gsprint .gs-slip{margin-top:var(--s3)}
.gsprint .gs-slip label{display:block;font-weight:600;margin:0 0 6px}
.gsprint .ck-main .t-legal{margin-top:var(--s4)}
/* sales: the 12 sessions sit behind one disclosure under "how it works" */
.gsprint .sp-sessions{margin:var(--s4) 0 0;max-width:72ch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gsprint .sp-sessions summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--navy);list-style:none}
.gsprint .sp-sessions summary::-webkit-details-marker{display:none}
.gsprint .sp-sessions summary::after{content:"+";margin-left:auto;font-weight:400;color:var(--ink2);font-size:1.2rem}
.gsprint .sp-sessions[open] summary::after{content:"−"}
.gsprint .sp-sessions ol{margin:0 0 var(--s3);padding-left:1.6em;line-height:1.8;color:var(--ink)}
/* comparison: three jobs, one subordinate note */
.gsprint .sp-fit .job{display:block;font-size:.8rem;font-weight:700;color:var(--ink2);margin:0 0 4px}
.gsprint .sp-fit-note{margin:var(--s3) 0 0;color:var(--ink2);font-size:.92rem;line-height:1.65;max-width:72ch}
/* results: scan first, detail second */
.gsprint .res-compare{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;margin:var(--s2) 0}
.gsprint .res-compare b{font-family:var(--disp);font-size:1.25rem;color:var(--navy)}
.gsprint .trow .tag{flex:0 0 auto;font-size:.8rem;font-weight:600;color:var(--crit);white-space:nowrap}
.gsprint .review-all>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--navy)}
.gsprint .review-all>summary:focus-visible{outline:3px solid var(--navy2);outline-offset:2px;border-radius:6px}
/* re-review 14 Sep: the disclosure needs a visible open/close marker (app.css hides the native one) */
.gsprint .review-all>summary{list-style:none;gap:var(--s2)}
.gsprint .review-all>summary::-webkit-details-marker{display:none}
.gsprint .review-all>summary::after{content:"+";margin-left:auto;font-weight:400;color:var(--ink2);font-size:1.3rem}
.gsprint .review-all[open]>summary::after{content:"−"}
/* the price never splits from its ฿ sign; the note under it wraps instead */
.gsprint .sp-price{flex-wrap:wrap;row-gap:4px}
.gsprint .sp-price b{white-space:nowrap}
/* sample "why the others are fine": correct parts in navy, the error part keeps green — red only means wrong */
.gsprint .sp-reasons li .k{color:var(--navy)}
.gsprint .sp-reasons li.ok .k{color:var(--good)}