/* Landing, free-practice and account layout. Loaded after course.css. */

/* Hero: on a phone the question comes straight after the headline. */
.hero.hero-try{grid-template-columns:1.06fr 1fr;grid-template-areas:"intro work" "cta work";grid-template-rows:auto 1fr;column-gap:60px;row-gap:0;align-items:start;padding-top:64px;padding-bottom:72px}
.hero-try .hero-intro{grid-area:intro;align-self:end}
.hero.hero-try .hero-workspace{grid-area:work;transform:none;animation:none;align-self:start}
.hero-try .hero-cta{grid-area:cta}
.hero-try .hero-description{max-width:460px}
.hero-try .question-sheet h2 i{font-family:Georgia,serif}
.hero-try .hero-feedback{font-size:14px;min-height:0}
.hero-try .hero-feedback strong{font-size:16px}
.hero-walkthrough{margin-top:16px}
.question-film{position:relative;border-radius:14px;overflow:hidden;background:#191c19;aspect-ratio:16/9;box-shadow:0 24px 50px -30px #000c}
.question-film video{display:block;width:100%;height:100%;object-fit:cover;background:#191c19}
.hero-next{margin-top:18px}
.buy-form{display:contents}
.hero-actions .buy-form .button,.final-actions .buy-form .button{cursor:pointer}
.final-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-top:32px}
.final-cta .final-actions .button{margin-top:0}
.section-heading h2{color:inherit}

.price-card .price-value{margin-top:6px}
.price-card .buy-form .button{width:100%}

/* A buy form takes the place its button had as a link. */
.buy-form{display:inline-block;max-width:100%;vertical-align:top}
.price-card .buy-form{display:block;width:100%}

@media(max-width:820px){
  .hero.hero-try{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "work" "cta";grid-template-rows:auto;padding-top:28px;padding-bottom:40px}
  .hero-try .hero-intro{align-self:start}
  .hero-try .hero-workspace{margin-top:22px;max-width:none;justify-self:stretch}
  .hero-try .hero-cta{margin-top:6px}
  .hero.hero-try h1{font-size:clamp(40px,10.5vw,60px);margin-top:14px}
  .hero-try .hero-description{font-size:16px;margin-top:14px}
  .hero-try .hero-equation{padding:16px 0 18px}
  .hero-try .hero-feedback{margin-top:16px;padding-top:14px}
  .hero-try .hero-actions{display:grid;gap:12px}
  .hero-try .hero-actions .button{width:100%}
  .question-film{aspect-ratio:4/5}
}
@media(max-width:540px){
  .hero-try .hero-workspace{padding:10px}
  .hero.hero-try .hero-workspace .question-sheet{padding:18px 16px}
  .hero-try .sheet-label{margin-bottom:8px}
  .hero-try .hero-note{font-size:11px;gap:14px}
  .hero-try .fit-note{font-size:12px}
}

/* Free practice: the first question is on the first screen. */
.practice-intro.practice-intro-compact{padding-top:36px;padding-bottom:22px}
.practice-intro-compact h1{font-size:clamp(32px,5vw,52px);margin-top:12px}
.practice-intro-compact>p{margin-top:12px;max-width:560px}
.practice-fit{margin-top:-60px;margin-bottom:70px}
.practice-fit .fit-note{max-width:640px;font-size:12px}
.answer-verdict{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:22px;padding:14px 16px;border-radius:10px;background:#f1f3eb;border:1px solid #dde2d5;scroll-margin-top:96px}
.answer-verdict strong{font-size:17px;font-weight:600}
.answer-verdict.is-correct strong{color:var(--green)}
.answer-verdict .text-button{margin-top:0;font-size:13px;color:var(--ink)}
.written-steps{margin-top:16px;border:1px solid var(--line);border-radius:10px;padding:0 18px;background:#f7f8f2}
.written-steps summary{font-size:15px;padding:16px 0}
.written-steps[open]{padding-bottom:20px}
.written-steps .solution-steps{margin-top:4px}
.written-steps .solution-steps p,.written-steps .choice-explanations p{font-size:15px;line-height:1.8;color:var(--ink);white-space:pre-line}
#sample-next.is-ready{box-shadow:0 0 0 4px #ed572a40}
.results-includes{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.results-includes li{font-size:15px;display:flex;gap:10px;color:var(--ink)}
.results-includes li:before{content:'✓';color:var(--green);font-weight:600}
.results-actions .buy-form .button{padding:16px 22px;font-size:15px}
@media(max-width:540px){
  .practice-intro.practice-intro-compact{padding-top:22px;padding-bottom:14px}
  .practice-intro-compact>p{font-size:14px}
  .practice-page .practice-layout{gap:14px}
  .practice-page .quiz-stage{padding:18px 14px}
  .results-actions{display:grid}
  .results-actions .button{width:100%}
}

/* Account. */
.account-points{list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:10px;max-width:430px}
.account-points li{font-size:14px;display:flex;gap:10px;color:var(--ink)}
.account-points li:before{content:'✓';color:var(--green);font-weight:600}
.access-card .small-copy+.small-copy{margin-top:8px}
.study-account{font-size:11px;color:var(--muted);padding-top:16px;margin-top:16px;border-top:1px solid #cdd3c2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.study-account strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.study-account form{margin-left:auto}
.study-account .text-button{margin-top:0;font-size:11px}
.purchase-welcome{margin:20px 24px 0;padding:18px 20px;border-radius:12px;background:#e7efe7;border:1px solid #b9cdb9}
.purchase-welcome strong{font-size:18px;color:var(--green)}
.purchase-welcome p{font-size:14px;line-height:1.65;margin-top:6px;color:var(--ink)}

/* ---- Bolder look ---- */
:root{--night:#141c17;--night-2:#1f2b23;--night-line:#34443a;--cream:#f4f1e9}
.button{border-radius:10px;font-weight:700}
.button.primary{box-shadow:0 14px 26px -14px #ed572a}
.site-header .nav-try{background:var(--ink);color:var(--white);border-radius:9px}
.site-header nav a.nav-try:hover{color:var(--white);background:#000}

/* Hero: dark band, blueprint grid, bright question card. */
.hero-band{position:relative;background:var(--night);background-image:radial-gradient(700px circle at 88% -10%,#ed572a40,transparent 60%),radial-gradient(520px circle at 0% 110%,#275d4090,transparent 65%),linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:auto,auto,34px 34px,34px 34px}
.hero-band .eyebrow{color:#c5ccbc}
.hero-band .hero h1{color:var(--white);font-weight:600;letter-spacing:-.05em}
.hero-band .highlight-ink{color:#ff7a4d;background:none;text-decoration:underline;text-decoration-color:#ff7a4d66;text-decoration-thickness:.09em;text-underline-offset:.12em}
.hero-band .hero-description{color:#cfd5c7}
.hero-band .hero-note{color:#cfd5c7;font-size:12px}
.hero-band .hero-note span:before{color:#ff7a4d}
.hero-band .fit-note{color:#aab3a2}
.hero-band .fit-note a{color:var(--white)}
.hero-band .button.secondary{background:transparent;border-color:#ffffff59;color:var(--white)}
.hero-band .button.secondary:hover{background:#ffffff14}
.hero-band .button.primary{font-size:16px;padding:20px 26px}
.hero-band .hero-workspace{background:var(--night-2);border-color:var(--night-line);box-shadow:0 40px 70px -40px #000,0 0 0 1px #ffffff0a;border-radius:18px}
.hero-band .workspace-top{color:#c5ccbc}
.hero-band .signal-dot{background:#ff7a4d;box-shadow:0 0 0 4px #ff7a4d33}
.workspace-hint{font-size:11px;font-weight:700;letter-spacing:.04em;color:#ff7a4d;animation:hint-bob 1.6s ease-in-out infinite}
.hero-band .question-sheet{border:0;border-radius:13px;box-shadow:0 18px 40px -24px #000}
.hero-band .question-sheet h2{font-weight:600}
.hero-band .hero-equation{font-size:clamp(34px,4.2vw,52px);padding:22px 0 26px}
.hero-band .hero-options{gap:12px}
.hero-band .hero-options button{min-height:64px;border:2px solid #dcdccf;border-radius:11px;font-size:22px;font-weight:600;gap:16px;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.hero-band .hero-options button span{font-size:11px;font-weight:700;background:var(--ink);color:var(--white);border:0;border-radius:5px;padding:4px 7px}
.hero-band .hero-options button:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 12px 20px -14px #ed572a}
.hero-band .hero-options button:active{transform:translateY(1px)}
.hero-band .hero-options button.correct{background:#dff0e2;border-color:var(--green)}
.hero-band .hero-options button.correct span{background:var(--green)}
.hero-band .hero-options button.incorrect{background:#fde6dc;border-color:var(--orange)}
.hero-band .hero-next{color:var(--ink)}
.hero-band .hero-intro>*,.hero-band .hero-cta{animation:pop-rise .7s cubic-bezier(.22,.8,.3,1) both}
.hero-band .hero-intro>:nth-child(2){animation-delay:.08s}.hero-band .hero-intro>:nth-child(3){animation-delay:.16s}
.hero-band .hero-workspace{animation:pop-rise .8s .2s cubic-bezier(.22,.8,.3,1) both}
.hero-band .hero-cta{animation-delay:.32s}
@keyframes pop-rise{from{transform:translateY(22px)}to{transform:none}}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* Facts: one loud orange band. */
.facts-bar{background:var(--orange);border:0}
.facts-inner{padding-block:26px}
.facts-inner>div{border-right-color:#191c1933}
.facts-inner strong{font-size:46px;font-weight:700;color:var(--ink)}
.facts-inner span{color:var(--ink);font-weight:500;font-size:13px}

/* How it works: light cards so the dark hero and price bands stand out. */
.method-section{background:var(--paper);color:var(--ink);padding-block:84px}
.method-section .section-label{color:var(--orange);font-weight:700}
.method-section .section-heading h2{font-weight:600}
.method-cards article{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 40px -32px #1b251b;transition:transform .2s,box-shadow .2s}
.method-cards article:hover{transform:translateY(-4px);box-shadow:0 30px 46px -30px #1b251b}
.method-cards .step-number{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--white);font-weight:700;font-size:12px}
.method-cards .method-graphic{border-bottom-color:var(--line)}
.method-cards h3{font-weight:600}
.method-cards p{color:var(--muted);font-size:15px}
.method-cards .graph-equation{color:var(--ink)}
.method-cards .graph-equation .equation-arrow{color:var(--orange);font-weight:600}
.method-cards .graph-clock{color:var(--ink)}
.method-cards .graph-clock span span{color:var(--orange)}
.method-cards .graph-clock small{color:var(--muted)}
.method-cards .graph-diagnostic i{background:#c9d6bd}
.method-cards .graph-diagnostic i:nth-child(3){background:var(--orange)}
.method-cards .graph-diagnostic i:nth-child(5){background:var(--green)}
.curriculum-section .section-label{color:var(--orange);font-weight:700}
.curriculum-section h2{font-weight:600}
.curriculum-number{color:var(--orange);font-weight:700}

/* Price: dark band, bright card. */
.pricing-section{background:var(--night);background-image:radial-gradient(640px circle at 100% 0%,#ed572a33,transparent 60%),linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:auto,34px 34px,34px 34px}
.pricing-section .section-label{color:#ff7a4d;font-weight:700}
.pricing-copy h2{color:var(--white);font-weight:600}
.pricing-copy .highlight-ink{color:#ff7a4d;background:none}
.price-card{border:0;border-radius:20px;box-shadow:0 40px 70px -40px #000;border-top:6px solid var(--orange)}
.price-card .price-value>span{font-weight:700}
.price-card .inclusions li{font-size:15px}
.price-card .inclusions li:before{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:11px}
.price-card .button.primary{font-size:17px;padding:22px 24px}
.checkout-note{font-size:12px}
.final-cta{border-top:0}
.final-cta h2{font-weight:600}

/* Free practice. */
.practice-page .quiz-stage{border:0;border-radius:18px;box-shadow:0 30px 60px -44px #1b251b,0 0 0 1px var(--line)}
.practice-page .progress-track{height:8px;border-radius:8px}
.practice-page .progress-track>div{background:var(--orange);border-radius:8px}
.practice-page .quiz-prompt{font-weight:600}
.practice-page .quiz-option{border-width:2px;border-radius:11px;font-size:16px;transition:transform .12s,border-color .12s}
.practice-page .quiz-option>span:first-child{background:var(--ink);color:var(--white);border:0;font-weight:700;border-radius:5px}
.practice-page .quiz-option:hover:not(:disabled){border-color:var(--orange);transform:translateY(-1px)}
.practice-page .quiz-option.selected{border-color:var(--ink);background:#f1efe6}
.practice-page .quiz-option.correct>span:first-child{background:var(--green)}
.practice-page .quiz-option.wrong>span:first-child{background:#b1432b}
.practice-page .quiz-controls .button{font-size:15px;padding:16px 22px}
.answer-verdict{border:0;background:#fde6dc}
.answer-verdict.is-correct{background:#dff0e2}
.answer-verdict strong{font-size:18px;font-weight:700}
.answer-verdict.is-retry strong{color:#b1432b}

@media(max-width:820px){
  .facts-inner strong{font-size:38px}
  .hero-band .hero-equation{font-size:36px;padding:14px 0 18px}
}
@media(max-width:540px){
  .hero-band .hero-options button{min-height:58px;font-size:20px}
  .facts-inner>div{flex-direction:column;align-items:flex-start;gap:2px}
  .facts-inner strong{font-size:34px;line-height:1}
  .method-section{padding-block:56px}
}

/* Written steps are always shown; the animation is one tap away. */
.hero-steps-written{margin-top:16px}
.hero-steps-written .solution-steps{margin-top:0}
.hero-steps-written .solution-steps p{font-size:15px;line-height:1.7;color:var(--ink)}
.practice-page .answer-feedback{margin-top:16px;background:#f7f8f2}
.practice-page .answer-feedback h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:4px}

/* Tap targets on a phone: header and footer links are at least 44 px high. */
@media(max-width:820px){
  .site-header nav>a:not(.nav-try):not(.nav-curriculum){display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;white-space:nowrap}
  .site-header nav .nav-try{display:inline-flex;align-items:center;min-height:40px}
  .footer-bottom>div{gap:0 20px}
  .footer-bottom a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
}

/* Hero after the answer: the film takes the question's place, the written steps fold, the buy button stays below. */
.hero-workspace.is-answered .sheet-label,.hero-workspace.is-answered .question-sheet>h2,.hero-workspace.is-answered .hero-equation,.hero-workspace.is-answered .hero-options,.hero-workspace.is-answered .workspace-hint{display:none}
.hero-workspace.is-answered .hero-feedback{margin-top:0;padding-top:0;border-top:0;min-height:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px}
.hero-workspace.is-answered .hero-feedback strong{font-size:19px;font-weight:700;letter-spacing:-.01em}
.hero-feedback strong.is-retry{color:#b1432b}
.hero-workspace.is-answered .hero-walkthrough{margin-top:12px}
.hero-workspace.is-answered .workspace-top{display:none}
@media(max-width:820px){.hero.hero-try .hero-workspace.is-answered .question-sheet{padding:14px 12px 12px}.hero-try .hero-workspace.is-answered{margin-top:10px}}
@media(min-width:821px){.hero.hero-try .hero-workspace.is-answered .question-sheet{padding:20px 24px 16px}.hero-workspace.is-answered .walkthrough-inline .walkthrough-canvas{width:min(100%,318px,calc((100dvh - 440px) * 854 / 1190))}}
.walkthrough-panel.walkthrough-inline{position:relative;inset:auto;z-index:auto;overflow:hidden;display:block;border-left:0;border-radius:14px;scroll-margin-bottom:12px}
.walkthrough-panel.walkthrough-inline[hidden]{display:none}
.walkthrough-inline .walkthrough-stage{width:100%;min-height:0;padding:10px 10px 12px;animation:none}
.walkthrough-inline .walkthrough-heading,.walkthrough-inline .walkthrough-done{display:none}
.walkthrough-inline .walkthrough-canvas{width:min(100%,318px,calc((100dvh - 330px) * 854 / 1190))}
.walkthrough-inline .walkthrough-controls{padding-top:8px;justify-content:center;gap:8px}
.walkthrough-inline .walkthrough-controls button{flex:0 1 150px;min-height:44px;font-size:14px;padding:8px 14px}
.walkthrough-sound{border:1px solid #ffffff40;background:transparent;color:#cfd5c7}
.walkthrough-sound[aria-pressed="true"]{background:#ffffff1a;color:#fffefb}
.walkthrough-inline .walkthrough-card{min-height:200px}
.hero-steps-fold{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:#f7f8f2}
.hero-steps-fold summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;min-height:44px;padding:0 16px;font-size:14px;font-weight:600}
.hero-steps-fold summary::-webkit-details-marker{display:none}
.hero-steps-fold[open] summary .plus{transform:rotate(45deg)}
.hero-steps-fold .hero-steps-written{margin:0;padding:0 16px 16px}

/* A visitor back from an unfinished checkout: the way back comes first. */
.checkout-return{background:var(--orange);color:var(--ink)}
.checkout-return-inner{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-block:26px}
.checkout-return .eyebrow{color:var(--ink);font-weight:700}
.checkout-return h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.03em;margin-top:6px}
.checkout-return p{margin-top:6px;font-size:15px;max-width:560px;color:var(--ink)}
.checkout-return-action{display:grid;gap:8px;justify-items:center}
.checkout-return-action .button{background:var(--ink);color:var(--white);box-shadow:0 16px 28px -16px #191c19;font-size:17px;padding:20px 28px}
.checkout-return-action .button:hover{background:#000}
.checkout-return-action span{font-size:12px;font-weight:600}
@media(max-width:820px){.checkout-return-action{width:100%;justify-items:stretch;text-align:center}.checkout-return-action .button{width:100%}}
/* Practice result by email (app/leads.py): below the buy button, shown only when the list is switched on. */
.report-form{margin-top:22px;padding-top:18px;border-top:1px solid rgb(0 0 0/.1)}
.report-form label{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.report-row{display:flex;gap:10px}
.report-row input{flex:1;min-width:0;padding:13px 14px;font:inherit;font-size:16px;border:1px solid rgb(0 0 0/.25);border-radius:8px;background:#fff;color:inherit}
.report-note{margin:8px 0 0;font-size:13px;opacity:.75}
.report-status{margin:6px 0 0;font-size:14px;min-height:1.2em}
.report-status.is-error{color:#b3261e}.report-status.is-ok{color:var(--green)}
@media (max-width:520px){.report-row{display:grid}}
.report-form .button,.report-form .button:hover{background:#fff;color:var(--ink);border:1px solid rgb(0 0 0/.3);box-shadow:none;padding:13px 20px;font-size:15px}
.report-form .button:disabled{opacity:.55}

/* Free practice: "Check answer" and "Next" stay at the bottom of the screen. */
.practice-page .quiz-controls{position:sticky;bottom:0;z-index:5;margin:24px -14px -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#fffefbf2;backdrop-filter:blur(8px);border-top:1px solid var(--line);border-radius:0 0 18px 18px}
.practice-page .quiz-controls .button.primary{flex:1;justify-content:space-between}
.passage-fold{padding:0}
.passage-fold summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;min-height:48px;padding:0 16px;font-size:14px;font-weight:600}
.passage-fold summary::-webkit-details-marker{display:none}
.passage-fold[open] summary .plus{transform:rotate(45deg)}
.passage-fold p{padding:0 16px 16px}

/* Result: score, what to work on, the offer, then the email field. */
.result-head{display:flex;align-items:center;gap:20px}
.result-ring{position:relative;flex:none;width:112px;height:112px}
.result-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.result-ring circle{fill:none;stroke:#e6e3d6;stroke-width:11}
.result-ring .result-ring-fill{stroke:var(--orange);stroke-linecap:round;animation:ring-draw .9s cubic-bezier(.22,.8,.3,1) both}
@keyframes ring-draw{from{stroke-dasharray:0 327}}
.result-ring strong{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:700;letter-spacing:-.04em}
.result-ring strong small{font-size:15px;font-weight:600;color:var(--muted);margin-left:1px}
.result-ring strong{grid-auto-flow:column;place-content:center;align-items:baseline}
.result-head h2{font-size:clamp(24px,5.6vw,34px);font-weight:700;letter-spacing:-.03em;margin-top:6px}
.result-split{margin-top:4px;font-size:14px;color:var(--muted)}
.result-topics{margin-top:22px}
.result-topics h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.result-topics ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.result-topics li{display:flex;align-items:baseline;gap:12px;padding:13px 16px;border-radius:11px;background:#f1efe6;border-left:4px solid var(--orange)}
.result-topics li span{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:66px}
.result-topics li strong{font-size:16px;font-weight:600;line-height:1.35}
.result-clean{margin-top:20px;font-size:16px}
.result-offer{margin-top:22px;padding:20px;border-radius:14px;background:var(--night);color:#f4f1e9}
.result-offer p{font-size:14px;line-height:1.6;color:#cfd5c7}
.result-offer p strong{display:block;font-size:19px;color:#fffefb;margin-bottom:4px}
.result-offer .results-actions{display:grid;margin-top:16px}
.result-offer .buy-form .button{width:100%;justify-content:space-between;font-size:17px;padding:20px 22px;white-space:nowrap}
@media(max-width:540px){.result-offer{padding:16px}.result-offer .buy-form .button{font-size:16px;padding:19px 16px;gap:10px}}
.result-offer .text-button{margin-top:14px;color:#cfd5c7;font-size:13px}
@media(prefers-reduced-motion:reduce){.result-ring .result-ring-fill{animation:none}}

/* First band under the hero: what the course does that a book of questions cannot. */
.proof-band{background:var(--paper);border-bottom:1px solid var(--line);padding-block:64px}
.proof-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.proof-band .section-label{color:var(--orange);font-weight:700}
.proof-copy h2{font-size:clamp(32px,4.4vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-top:14px}
.proof-copy p{margin-top:18px;font-size:17px;line-height:1.6;max-width:500px;color:var(--ink)}
.proof-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.proof-points li{display:flex;gap:10px;font-size:15px}
.proof-points li:before{content:'✓';color:var(--green);font-weight:700}
.proof-player{min-width:0;max-width:440px;width:100%;justify-self:center}
.proof-play{position:relative;width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:0;border-radius:18px;padding:26px 22px;min-height:150px;color:#fffefb;background:#141c17;background-image:radial-gradient(320px circle at 100% 0%,#ed572a66,transparent 70%),linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:auto,34px 34px,34px 34px;box-shadow:0 30px 50px -30px #141c17;transition:transform .18s}
.proof-play:hover{transform:translateY(-3px)}
.proof-play[hidden]{display:none}
.proof-play .walkthrough-play-icon{width:64px;height:64px;font-size:22px}
.proof-play strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.proof-play small{display:block;margin-top:4px;font-size:14px;color:#cfd5c7;line-height:1.4}
.proof-player .walkthrough-inline .walkthrough-canvas{width:min(100%,360px,calc((100dvh - 190px) * 854 / 1190))}
.proof-player .walkthrough-inline .walkthrough-controls button{flex:0 1 220px}
@media(max-width:820px){.proof-band{padding-block:44px}.proof-inner{grid-template-columns:minmax(0,1fr);gap:26px}.proof-copy p{font-size:16px}}

/* The link by email on the cancelled-checkout band: below the button, smaller than it. */
.link-form{flex-basis:100%;margin-top:0;border-top-color:#191c1933;max-width:520px}
.link-form .report-note a{color:inherit}
.checkout-return .report-status.is-ok{color:var(--ink);font-weight:600}
/* The stake line in the hero links to its source (docs/sources.md). */
/* Three samples to pick from: each tile plays its film where it stands. */
.proof-player{display:grid;gap:12px}
.proof-pick{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.proof-sample .proof-play{min-height:104px;padding:18px;gap:14px;box-shadow:0 22px 40px -30px #141c17}
.proof-sample .proof-play .walkthrough-play-icon{width:48px;height:48px;font-size:17px;flex:none}
.proof-sample .proof-play strong{font-size:19px}
.proof-sample .proof-play small{font-size:14px}
.proof-sample .proof-play>span:nth-child(2){flex:1;min-width:0}
.proof-meta{flex:none;display:grid;justify-items:end;gap:8px;font-size:13px;font-variant-numeric:tabular-nums;color:#cfd5c7}
.proof-level{display:flex;align-items:flex-end;gap:3px;height:16px}
.proof-level i{width:5px;border-radius:2px;background:#ffffff2e}
.proof-level i:nth-child(1){height:6px}.proof-level i:nth-child(2){height:11px}.proof-level i:nth-child(3){height:16px}
.proof-level[data-level="1"] i:nth-child(-n+1),.proof-level[data-level="2"] i:nth-child(-n+2),.proof-level[data-level="3"] i{background:var(--orange)}

/* Phone section labels and method rows. */
@media(max-width:540px){
  main .section-label,.hero-band .eyebrow{font-size:11px}
  .method-section{padding-block:44px}
  .method-section .section-heading h2{font-size:32px}
  .method-cards{gap:10px}
  .method-cards article{display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:4px;align-items:start;padding:16px}
  .method-cards .method-graphic{display:none}
  .method-cards .step-number{grid-row:1/3}
  .method-cards h3{font-size:19px;margin:0;align-self:center}
  .method-cards p{grid-column:2;font-size:15px;line-height:1.45}
}


/* Orange text on paper/white: WCAG AA without changing the brand fills or the dark bands (#23). */
.proof-copy>.section-label,.proof-pick,
.method-section .section-label,.method-cards .graph-equation .equation-arrow,
.curriculum-section .section-label,.curriculum-number{color:#bb3f1b}

/* The consent line under an email form's field and button (app/marketing.py): fine print, no box. */
.access-card form .marketing-fine{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
/* Phones get one supporting example below the hero, the sample films, and then the price. */
@media(max-width:820px){.proof-points{display:none}}
/* There the price card follows its heading at once; the note on which test this is for comes after it. */
@media(max-width:820px){.pricing-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}.pricing-copy{display:contents}.pricing-copy h2{margin-bottom:26px}}
@media(max-width:540px){.proof-copy h2{text-wrap:balance}.proof-copy h2 br{display:none}}

/* Home page, 10 October 2026: the price card fits one phone screen, the contents are four plain rows, one closing line. */
.price-card .price-value{margin-top:0}
.price-card .inclusions{margin:20px 0 22px;padding-top:20px}
.price-card .checkout-note{margin-top:14px;font-size:13px;color:var(--muted)}
.curriculum-list{list-style:none;margin:0;padding:0}
.curriculum-list li{display:flex;align-items:flex-start;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);font-size:20px;font-weight:500;letter-spacing:-.02em}
.curriculum-list li>span:nth-child(2){flex:1}
.curriculum-list li small{display:block;margin-top:8px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)}
/* The guides, named once in the page's body under "What's inside": quiet text links, no new block. */
.curriculum-guides{margin:24px 0 0;max-width:430px;font-size:15px;line-height:1.6;color:var(--muted)}.curriculum-guides a{color:var(--ink);font-weight:600;text-underline-offset:3px}
@media(max-width:820px){.curriculum-guides{margin:0 0 16px}}
.final-cta h2{margin-top:0}
@media(max-width:820px){.pricing-section{padding-block:28px 48px}.pricing-copy h2,.curriculum-section h2{display:none}.pricing-copy .section-label,.curriculum-section .section-label{margin-bottom:14px}.price-card{padding-top:22px}.curriculum-section{padding-block:44px 0;gap:0}.final-cta{padding-block:44px 60px}}
@media(max-width:540px){.curriculum-list li{font-size:17px;gap:15px;padding-block:15px}.curriculum-list li small{margin-top:4px}.final-cta h2{font-size:32px}}

/* The header's button is a checkout form (owner, 10 October 2026: people check out through the header). */
.site-header nav .buy-form{display:inline-flex;margin:0}
.site-header nav button.nav-try{font:inherit;line-height:inherit;cursor:pointer}
.site-header nav button.nav-try:hover{color:var(--white);background:#000}
@media(max-width:820px){.site-header nav button.nav-try{min-height:44px}}
/* Shown under a sample film that has run to its end. */
/* What the course holds next: one short card under the home page's own solution and under a sample film, each once
   it has run to its end. */
.course-next{display:grid;gap:10px;padding:20px 18px 18px;border-radius:18px;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--orange);color:var(--ink);text-align:left;scroll-margin-block:88px 12px}
.course-next[hidden],.course-next [hidden]{display:none}
.course-next h3{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.course-next p{font-size:15px;line-height:1.5;color:var(--muted)}
.next-lesson p{margin-top:4px;color:var(--ink)}
.course-next .buy-form{display:block;margin-top:6px}
.course-next .buy-form .button{width:100%;justify-content:space-between;white-space:nowrap}
.hero-workspace .course-next{margin-top:16px}
@media(max-width:540px){.course-next{padding:16px 14px 14px}.course-next .buy-form .button{font-size:16px;padding:18px 16px;gap:10px}}
/* Phone: the price card follows the first demo (the hero's question); the sample films come after it. */
@media(max-width:820px){.home-page main{display:flex;flex-direction:column}.home-page .proof-band{order:1}.home-page .curriculum-section{order:2}.home-page .final-cta{order:3}}

/* Free practice on a phone: the question and its four answers are on the first screen. */
@media(max-width:540px){
  .practice-intro.practice-intro-compact{padding-top:14px;padding-bottom:8px}
  .practice-intro-compact h1{font-size:19px;letter-spacing:-.02em;margin-top:6px}
  .practice-page .practice-sidebar{padding-top:10px;gap:8px 12px}
  .practice-page .practice-progress{flex:1}
  .practice-page .practice-progress strong{display:inline;font-size:17px;letter-spacing:-.02em}
  .practice-page .practice-progress>span{margin-left:6px;font-size:12px}
  .practice-page .practice-progress .progress-track{margin-top:6px;height:6px}
  .practice-page .practice-layout{gap:10px}
  .practice-page .quiz-stage{padding-top:16px}
  .practice-page .quiz-meta{margin-bottom:14px}
  .practice-page .quiz-prompt{margin-bottom:16px}
  .practice-page .quiz-options{gap:8px}
  .practice-page .quiz-controls{margin-top:16px}
}

/* On a phone the hero stacks its parts; the order is set again for #101 at the end of this file. */
@media(max-width:820px){
  .hero-try .hero-cta{display:flex;flex-direction:column}
  .hero-try .hero-cta .hero-actions{display:contents}
  .hero-try .hero-cta .buy-form{order:1;display:block;margin-top:14px}
  .hero-try .hero-cta .hero-note{order:2;margin-top:12px;justify-content:center}
  .hero-try .hero-cta #hero-more{order:3;margin-top:14px}
  .hero-try .hero-cta .fit-note{order:4;margin-top:16px}
  .practice-page .practice-sidebar .text-button{font-size:13px;min-height:44px}
}

/* The free practice page points to the sample films on the home page. */
.practice-fit .fit-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* The hero says what the payment buys, next to the question and above the buy button: math and reading, the
   lessons, the questions and the two timed tests. The price card further down lists only what this does not. */
.hero-offer{margin-top:28px;max-width:460px}
.hero-offer p{margin:0}
.offer-title{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--white)}
.offer-title span{color:#ff7a4d}
.offer-facts{margin-top:6px;font-size:15px;line-height:1.5;color:#cfd5c7}
/* On a phone it takes the place of the sentence about the 90 days (owner, 10 October 2026: that sentence is not
   needed on a phone), so the question and the buy button stay where they were on the first screen. */
@media(max-width:820px){.hero-offer{margin-top:14px;max-width:none}.offer-title{font-size:19px}.hero-try:not(.has-film) .hero-description{display:none}}

/* Free practice after an answer (ProgressTiger #67): each choice says what it was, the picked mistake and the right
   reasoning stand first, and the full working folds away below the film. */
.practice-page .quiz-option.is-marked{display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:2px}
.option-mark{grid-column:2;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.quiz-option.wrong .option-mark{color:#b1432b}
.choice-teach{display:grid;gap:10px;margin-top:14px}
.choice-teach-item{padding:14px 16px;border-radius:11px;background:#f1efe6;border-left:4px solid var(--green)}
.choice-teach-item.is-wrong{border-left-color:#b1432b}
.choice-teach-item strong{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.choice-teach-item.is-wrong strong{color:#b1432b}
.choice-teach-item p{margin-top:4px;font-size:15px;line-height:1.6;color:var(--ink);overflow-wrap:break-word}
.choice-teach-item .reviewed-option{font-weight:600}
.written-steps summary{min-height:48px;font-weight:600;letter-spacing:0}
/* Result: one line on the score, what each named lesson teaches, then the offer. */
.result-lead{margin-top:18px;font-size:17px;line-height:1.5;color:var(--ink)}
.result-topics li>div{min-width:0}
.result-topics li strong{display:block}
.result-topics li p{margin-top:4px;font-size:14px;line-height:1.55}
/* Back from a checkout that was left. */
.practice-notice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 20px;margin-bottom:14px;padding:10px 16px;border-radius:11px;background:#f1efe6}
.practice-notice p{font-size:15px;color:var(--ink)}
.practice-notice-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.practice-notice .buy-form .button{padding:11px 14px;font-size:14px;gap:10px;box-shadow:none}
.practice-notice .buy-form .button span{font-size:16px}
.practice-notice .text-button{margin-top:0;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.practice-notice.is-results .practice-notice-actions{display:none}
@media(max-width:540px){.result-topics li{flex-direction:column;gap:2px}.result-lead{font-size:16px}}
@media(max-width:540px){.practice-notice-actions{flex-wrap:nowrap;gap:12px}.practice-notice .buy-form .button{padding:10px 12px;font-size:13px;gap:8px;white-space:nowrap}.practice-notice .text-button{font-size:13px;white-space:nowrap}}
/* The checkout's email step (checkout_email.html): one field between a buy button and the payment page. */
.pay-step{max-width:520px;padding-block:56px 80px}
.pay-step h1{font-size:clamp(30px,5vw,40px);line-height:1.1;letter-spacing:-.03em;margin-top:14px}
.pay-step-card{margin-top:28px}
.pay-step-item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-weight:600;font-size:15px;line-height:1.35}
.pay-step-item strong{font-size:26px;letter-spacing:-.03em;flex:0 0 auto}
.access-card.pay-step-card>.pay-step-terms{margin-top:4px;font-size:12px;color:var(--muted)}
.pay-step-card form{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.pay-step-card input[type="email"]{font-size:16px;margin-bottom:0}
.pay-step-card input[aria-invalid="true"]{border-color:#b3261e}
.pay-step-error{margin-top:8px;font-size:13px;font-weight:600;color:#b3261e}
.pay-step-card .button{margin-top:16px;font-size:16px;padding-block:19px}
.access-card.pay-step-card>.small-copy{margin-top:14px;font-size:12px;color:var(--muted)}
.pay-step>.text-link{margin-top:26px}
@media(max-width:540px){.pay-step{padding-block:26px 48px}.pay-step-card{margin-top:20px}.pay-step-card .button{font-size:15px;gap:10px;padding-inline:16px;white-space:normal;justify-content:center;text-align:center;text-wrap:balance}}
/* Free practice: what the page is stands in the heading, set as the small line it always was. */
.practice-intro-compact h1{margin-top:0}
.practice-intro-compact h1 .eyebrow{display:block;margin-bottom:12px}
@media(max-width:540px){.practice-intro-compact h1 .eyebrow{margin-bottom:6px}}
/* Conversion plan #101. The free questions stand right under the buy button, so a phone shows both on its first
   screen, with what the free questions cost and what they give. */
.more-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:#cfd5c7}
@media(max-width:820px){
  .hero-try .hero-cta #hero-more{order:2;margin-top:12px;justify-content:center;gap:12px;padding-block:15px}
  .hero-try .hero-cta .more-note{order:3;margin-top:8px;text-align:center;font-size:12px}
  .hero-try .hero-cta .hero-note{order:4;margin-top:14px}
  .hero-try .hero-cta .hero-offer{order:5}
  .hero-try .hero-cta .fit-note{order:6}
}

/* What the payment gets, beside the price: folded, so the card still reads price, three lines, button. */
.buy-terms{margin-top:16px;border:0;border-top:1px solid var(--line)}
.buy-terms summary{min-height:44px;padding:12px 0 0;font-size:14px;font-weight:600;letter-spacing:0}
.buy-terms dl{margin:12px 0 0;display:grid;gap:12px}
.buy-terms dl>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px}
.buy-terms dt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.buy-terms dd{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.buy-terms a{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
@media(max-width:380px){.buy-terms dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* The course's own study plan and what happens after a miss, where the three-line outline stood. */
.study-path{align-items:start}
.study-path .plan-intro h2{display:block}
.plan-lead{margin-top:18px;max-width:430px;font-size:17px;line-height:1.55}
.plan-loop{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;counter-reset:loop}
.plan-loop li{position:relative;display:grid;gap:1px;padding:0 0 12px 34px;counter-increment:loop}
.plan-loop li:before{content:counter(loop);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--white);font-size:11px;font-weight:700}
.plan-loop li:not(:last-child):after{content:'';position:absolute;left:10.5px;top:26px;bottom:4px;width:1px;background:var(--line)}
.plan-loop li:last-child:before{background:var(--orange);color:var(--ink)}
.plan-loop strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.plan-loop span{font-size:14px;line-height:1.5;color:var(--muted)}
.plan-start{margin-top:8px;display:grid;gap:2px}
.plan-start .fit-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);text-underline-offset:3px}
.plan-start small{font-size:13px;color:var(--muted)}
.plan-days{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.plan-days li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.plan-day{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#bb3f1b;padding-top:3px}
.plan-days strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.plan-days p{margin-top:2px;font-size:13px;line-height:1.45}
.plan-days li:nth-last-child(-n+2) strong{color:#bb3f1b}
.plan-foot{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;margin-top:-60px}
.plan-source{font-size:14px;line-height:1.6;max-width:430px}
.plan-source a{color:var(--ink);font-weight:600}
.plan-foot .curriculum-guides{margin:0}
@media(max-width:820px){
  .study-path{display:flex;flex-direction:column;gap:24px}
  .study-path .plan-intro h2{display:block;font-size:34px}
  .plan-lead{font-size:16px;margin-top:12px}
  .plan-loop{margin-top:22px}
  .plan-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:0}
}

/* The practice result: what five questions are, and which test the course is for. */
.result-fit{margin-top:14px;padding-top:12px;border-top:1px solid #ffffff26;font-size:13px!important;line-height:1.55}
.result-fit a{color:#fffefb;font-weight:600;text-underline-offset:3px}

/* Free practice: the same questions to read, under the practice. The ledger of the course list on the home page. */
.practice-sheet{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:start;padding-top:64px;border-top:1px solid var(--line)}
.sheet-head h2{font-size:clamp(30px,3.3vw,44px);font-weight:600}
.sheet-head p{margin-top:18px;font-size:15px;max-width:340px}
.sheet-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);min-width:0}
.sheet-list>li{border-bottom:1px solid var(--line)}
.sheet-row+.sheet-row{border-top:1px solid var(--line)}
.sheet-row>summary{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:18px;align-items:start;padding:22px 0;list-style:none;cursor:pointer}
.sheet-row>summary::-webkit-details-marker{display:none}
.sheet-num{grid-row:1/3;padding-top:6px;font-size:11px;font-weight:700;color:#bb3f1b;font-variant-numeric:tabular-nums}
.sheet-prompt{grid-column:2;margin:0;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.sheet-kind{grid-column:2;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.sheet-row>summary .plus{grid-column:3;grid-row:1/3;line-height:1.2;color:var(--muted)}
.sheet-row>summary:hover .sheet-prompt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sheet-body{padding:2px 0 28px 40px;min-width:0}
.sheet-options{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sheet-options>li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--white)}
.sheet-options>li>div{min-width:0;flex:1}
.sheet-options>li.is-answer{border-color:#9dbda6;background:#f1f7f0}
.sheet-letter{flex:none;width:23px;height:23px;margin-top:1px;border-radius:5px;background:var(--ink);color:var(--white);font-size:10px;font-weight:700;display:grid;place-items:center}
.is-answer>.sheet-letter{background:var(--green)}
.sheet-option{font-size:16px;font-weight:500;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.sheet-mark{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.sheet-why{margin-top:6px;font-size:14px;line-height:1.7}
.sheet-body h4{margin:26px 0 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sheet-body .solution-steps{margin-top:12px;gap:12px}
.sheet-body .solution-steps p{font-size:15px;line-height:1.75;color:var(--ink)}
.sheet-passage-text h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.sheet-passage-text p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--ink)}
.practice-about{margin-top:72px;margin-bottom:96px;padding-top:26px;border-top:1px solid var(--line)}
.practice-about>.eyebrow{margin:0;color:var(--muted)}
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:22px}
.about-grid h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.about-grid p{margin-top:8px;font-size:14px;line-height:1.7}
.about-grid .fit-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.about-links{display:flex;flex-wrap:wrap;gap:0 22px}
.about-grid .about-source{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media(max-width:1100px){.practice-sheet{gap:55px}.about-grid{gap:36px}}
@media(max-width:820px){
  .practice-sheet{grid-template-columns:1fr;gap:24px;padding-top:40px}
  .sheet-head p{margin-top:10px;max-width:none}
  .about-grid{grid-template-columns:1fr;gap:22px}
  .practice-about{margin-top:48px;margin-bottom:64px}
}
@media(max-width:540px){
  .sheet-head h2{font-size:22px;letter-spacing:-.03em}
  .sheet-head p{font-size:14px}
  .sheet-row>summary{column-gap:12px;padding:16px 0;min-height:48px}
  .sheet-prompt{font-size:17px}
  .sheet-body{padding-left:0;padding-bottom:22px}
  .sheet-options>li{padding:12px}
}
/* Spanish practice, the language of the question: one row of three, so all four choices stand above the check
   button on a 360 px phone. Before, the three buttons wrapped onto two rows of 56 px and the last choice lay
   under the button. The course itself (/study) keeps its own buttons. */
.practice-page .question-language{display:grid;grid-template-columns:auto auto auto;gap:3px;width:fit-content;max-width:100%;margin:0 0 14px;padding:3px;border-radius:10px;background:#eceee6}
.practice-page .question-language .button{justify-content:center;min-height:38px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#3d4139;font-size:13px;font-weight:600;white-space:nowrap}
.practice-page .question-language .button[aria-pressed="true"]{background:var(--white);color:var(--ink);outline:0;box-shadow:0 1px 2px #1b251b33,0 0 0 1px var(--line)}
.practice-page .question-language .button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* The guides, named in the footer of the home page, the guides and the legal pages: three quiet links beside the brand. */
.footer-guides{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:12px}
.footer-guides>span{font-size:9px;font-weight:600;letter-spacing:.1em;color:#a1aa96}
.footer-guides a{display:inline-flex;align-items:center;min-height:44px;color:#d5dbcc;text-decoration:none}
.footer-guides a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
/* Phone header, 13 October 2026: the buy button with its price stays inside the screen from 320 px up, in both
   languages. Before, it ran past the right edge between 361 and 389 px, below 350 px, and for a buyer up to 446 px.
   A buyer's header carries "My course", which is wider than "Log in": there the wordmark is smaller and the link
   loses its arrow; at 356 px and below the buyer's header shows the tiger alone. The course itself (/study) has no
   buy button and keeps its header. */
@media(max-width:460px){
  .site-header nav{flex:none}
  .site-header.has-course .brand{font-size:18px;gap:4px}
  .site-header.has-course .brand img{width:23px;height:23px}
  .site-header.has-course nav{gap:8px}
  .site-header.has-course .nav-course span{display:none}
}
@media(max-width:400px){
  .site-header{padding-inline:16px}
  .site-header .brand{font-size:18px;gap:4px}
  .site-header .brand img{width:23px;height:23px}
  .site-header nav{gap:8px}
  .site-header.has-course .brand{font-size:16px}
  .site-header.has-course .brand img{width:21px;height:21px}
  .site-header.has-course nav{gap:6px}
}
@media(max-width:375px){
  .site-header{padding-inline:12px}
  .site-header nav .nav-try{padding-inline:8px}
  .site-header.has-course .brand{font-size:15px}
  .site-header.has-course .brand img{width:20px;height:20px}
}
@media(max-width:356px){
  .site-header{padding-inline:10px}
  .site-header .brand{font-size:15px}
  .site-header .brand img{width:20px;height:20px}
  .site-header nav{gap:6px}
  .site-header nav>a.nav-lang{padding-inline:2px}
  .site-header nav .nav-try{padding-inline:6px}
  .site-header.has-course .brand>span{display:none}
  .site-header.has-course .brand img{width:26px;height:26px}
}
/* The home page's keyword line sits inside its H1 as a small line, looking as it did above it (h1 margin moves to the line). */
.hero h1.hero-title{margin-top:0}.hero h1.hero-title .eyebrow{display:block;margin-bottom:26px}
@media(max-width:820px){.hero h1.hero-title .eyebrow{margin-bottom:14px}}
/* The retake challenge (app/retake.py): the code's price line, and the unlock form on a perfect practice result. */
.retake-note{margin:8px 0 0;font-size:14px;line-height:1.5;font-weight:600;color:var(--green)}
.unlock-form label{font-size:19px;line-height:1.3}
.unlock-line{margin:0 0 12px;font-size:15px;line-height:1.5}
.unlock-hint{margin-top:18px;font-size:15px;font-weight:600;line-height:1.5}
.pay-step-card form .small-copy{margin:8px 0 0}