/* The free check and its finish, rebuilt 2026-10-22 (owner: the test design is confusing on a phone, the breaks are
   boring, the finish is "normal shitty quality"). From material/design: flows.md (question screens, interstitials,
   result), components.md (option cards), motion.md (durations, easing, reduced motion), color.md (tinted neutrals).
   One tinted ground, white cards, one action colour (--cta), section colours only on chips and the progress bar. */
:root{
  --fl-bg:#f2f5f4;--fl-ink:#14201f;--fl-muted:#5d6a68;--fl-hair:rgb(20 32 31 / .09);
  --fl-shadow:0 1px 2px rgb(16 40 38 / .05),0 8px 24px rgb(16 40 38 / .06);
  --fl-ok:#1d7a4c;--fl-ok-soft:#eaf6ef;--fl-miss:#b45309;--fl-miss-soft:#fdf3e6;
  --fl-out:cubic-bezier(.22,1,.36,1);--fl-sheet:cubic-bezier(.32,.72,0,1);
}
html,body{overflow-x:clip}
.sec-english{--sc:#4e3fb5;--sc-soft:#efedfb}
.sec-science{--sc:#17663f;--sc-soft:#e8f5ee}
.sec-reading{--sc:#94400f;--sc-soft:#fbefe6}
.sec-math{--sc:#1747b8;--sc-soft:#e9effc}
.sec-mixed{--sc:var(--accent);--sc-soft:#e6f1f2}
.ic{width:20px;height:20px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
body.practice{background:var(--fl-bg)}

/* top bar: close, progress by section, count */
.practice .runbar{background:rgb(242 245 244 / .88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border:0}
.practice .runbar .wrap{max-width:680px;min-height:60px;gap:14px;flex-wrap:nowrap}
.practice .runbar .pr-x{width:40px;height:40px;min-width:40px;min-height:40px;margin-left:-8px;border-radius:50%}
.pr-x svg{width:22px;height:22px;stroke:var(--fl-ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.practice .pr-segs{gap:5px}
.practice .pr-seg{height:8px;border-radius:99px;background:var(--fl-hair)}
.practice .pr-seg i{background:var(--sc,var(--accent));border-radius:99px;transition:width .5s var(--fl-out)}
.practice .pr-bar{height:8px;background:var(--fl-hair)}
.practice .pr-count{font-size:1rem;min-width:44px;text-align:right}
.practice .pr-count small{font-size:.8rem;color:var(--fl-muted);font-weight:400}
.practice .pr-calc{border-radius:99px;min-height:36px;padding:6px 14px;font-size:.9rem;border-width:1.5px}

/* the question */
.practice .pr-app{max-width:680px;margin:0 auto;padding:12px 20px 40px}
.practice .pr-app:has(.has-passage){max-width:680px}
.practice .pr-kicker{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;font-size:.9rem;color:var(--fl-muted)}
.sec-chip{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;letter-spacing:.02em;padding:5px 12px 5px 10px;border-radius:99px;background:var(--sc-soft);color:var(--sc)}
.sec-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fl-topic{margin-right:auto}
.practice .pr-gift{font-size:.82rem;font-weight:700;color:#7a520f;background:#fff1d1;border-radius:99px;padding:5px 12px}
.fl-card{background:#fff;border-radius:22px;padding:22px 18px 12px;box-shadow:var(--fl-shadow)}
.practice .stem,.qcard .stem{font-size:1.22rem;line-height:1.4;font-weight:700;letter-spacing:-.012em;margin:0 0 18px;color:var(--fl-ink)}
.fl-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fl-muted);margin:0 0 8px}
.fl-card .opt,.qcard .opt{border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px rgb(20 32 31 / .12);padding:13px 14px;min-height:58px;gap:14px;align-items:center;margin:0 0 10px;font-size:1rem;line-height:1.4;color:var(--fl-ink);-webkit-tap-highlight-color:transparent;transition:box-shadow .15s var(--fl-out),background-color .15s var(--fl-out),transform .1s var(--fl-out),opacity .2s}
.fl-card .opt .mark,.qcard .opt .mark{flex:0 0 32px;height:32px;border:0;border-radius:10px;background:var(--fl-bg);color:var(--fl-muted);font-size:.9rem;transition:background-color .15s,color .15s}
.fl-card .opt.sq .mark{border-radius:8px}
.fl-card button.opt:active,.qcard .opt:active{transform:scale(.98)}
@media(hover:hover){.fl-card button.opt:hover,.qcard .opt:hover{box-shadow:inset 0 0 0 1.5px var(--accent);border:0}}
.fl-card .opt[aria-pressed=true],.qcard .opt[aria-pressed=true]{background:#eef6f6;box-shadow:inset 0 0 0 2px var(--accent)}
.fl-card .opt[aria-pressed=true] .mark,.qcard .opt[aria-pressed=true] .mark{background:var(--accent);color:#fff}
.fl-card .opt.good{background:var(--fl-ok-soft);box-shadow:inset 0 0 0 2px var(--fl-ok)}
.fl-card .opt.good .mark{background:var(--fl-ok);color:#fff}
.fl-card .opt.bad{background:var(--fl-miss-soft);box-shadow:inset 0 0 0 2px var(--fl-miss)}
.fl-card .opt.bad .mark{background:var(--fl-miss);color:#fff}
.fl-card .opt .mark svg{width:18px;height:18px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.practice .locked-ans .opt:not(.good):not(.bad){opacity:.42}
.fl-card .shake{animation:fl-shake .34s var(--fl-out)}
.fl-reveal{display:block;margin:2px auto 0;padding:12px;min-height:44px;color:var(--fl-muted);font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.practice .field input,.fl-card #num{border-radius:14px;min-height:56px;border:1.5px solid rgb(20 32 31 / .18);font-size:1.1rem}

/* a reading passage: its own card above, a third of the screen until they open it, so the question is always in view */
.practice .q.has-passage{display:block}
.practice .fl-passage{background:#fff;border:0;border-radius:22px;padding:18px 18px 14px;margin:0 0 12px;box-shadow:var(--fl-shadow)}
.fl-passage h3{font-size:1.08rem;margin:0 0 8px}
.fl-ptext{max-height:28vh;overflow:hidden;position:relative;font-size:1rem;line-height:1.6;color:#2b3634}
.fl-ptext p{margin:0 0 .8em}
.fl-ptext::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgb(255 255 255 / 0),#fff);pointer-events:none}
.fl-passage.open .fl-ptext{max-height:none}
.fl-passage.open .fl-ptext::after{display:none}
.fl-more{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;padding:8px 16px;border:0;border-radius:99px;background:var(--fl-bg);color:var(--accent-dark);font:inherit;font-size:.92rem;font-weight:700;cursor:pointer}
.fl-more:active{transform:scale(.97)}
@media(min-width:900px){
  .practice .pr-app:has(.has-passage){max-width:1080px}
  .practice .q.has-passage{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .practice .fl-passage{position:sticky;top:76px;margin:0;max-height:calc(100vh - 100px);overflow:auto}
  .fl-ptext{max-height:none}.fl-ptext::after,.fl-more{display:none}
}

/* the verdict: a sheet that rises after an answer, white, the colour on the icon and the word */
.practice .pr-sheet{background:#fff;border:0;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgb(16 40 38 / .14);animation:none}
.practice .pr-sheet.rise{animation:fl-rise .44s var(--fl-sheet)}
.practice .pr-sheet.ok,.practice .pr-sheet.no{background:#fff}
.practice .pr-sheet-in{max-width:680px;padding:20px 20px max(16px,env(safe-area-inset-bottom));gap:12px}
.practice .pr-verdict{font-size:1.2rem;gap:12px}
.practice .pr-sheet.ok .pr-verdict{color:var(--fl-ok)}
.practice .pr-sheet.no .pr-verdict{color:var(--fl-miss)}
.practice .pr-ico{flex:0 0 34px;height:34px;background:var(--fl-ok)}
.practice .pr-sheet.no .pr-ico{background:var(--fl-miss)}
.pr-ico svg{width:20px;height:20px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.practice .pr-row{margin-left:auto;background:#fff1d1;color:#7a520f;border-radius:99px;padding:4px 10px;font-size:.85rem}
.practice .pr-why{font-size:1rem;line-height:1.5;color:#2b3634;max-height:30vh}
.practice .pr-sheet .btn,.fl-pin .btn,.fl-doors .btn,.fl-emf .btn{background:var(--cta);color:#fff;border:0;border-radius:16px;min-height:56px;font-size:1.08rem;width:100%}
.practice .pr-sheet .btn:active,.fl-pin .btn:active,.fl-doors .btn:active,.fl-emf .btn:active,.fl-offer .btn:active{transform:scale(.98)}
.practice .pr-sheet.idle{border-radius:20px 20px 0 0}

/* question enters: the card slides in from the right, options settle one after another */
.fl-enter .pr-kicker,.fl-enter .q{animation:fl-in .28s var(--fl-out) both}
.fl-enter #ans>.opt{animation:fl-up .3s var(--fl-out) both}
.fl-enter #ans>.opt:nth-child(2){animation-delay:40ms}
.fl-enter #ans>.opt:nth-child(3){animation-delay:80ms}
.fl-enter #ans>.opt:nth-child(4){animation-delay:120ms}
.fl-enter #ans>.opt:nth-child(5){animation-delay:160ms}

/* break screens: a ring that fills, the sections ticked off, facts that rise in */
.fl-brk,.fl-load{max-width:560px;margin:0 auto;padding:36px 20px 140px;text-align:center}
.fl-ring{width:136px;height:136px;margin:0 auto 20px;position:relative}
.fl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fl-ring circle{fill:none;stroke-width:10}
.fl-ring .rt{stroke:rgb(15 106 115 / .12)}
.fl-ring .rf{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100 100;transition:stroke-dashoffset .9s var(--fl-out) .15s}
.fl-ring-in{position:absolute;inset:0;display:grid;place-content:center;line-height:1}
.fl-ring-in b{font-size:2.6rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fl-ring-in span{font-size:.85rem;color:var(--fl-muted);margin-top:6px}
.fl-brk h1,.fl-load h1{font-size:2rem;letter-spacing:-.028em;line-height:1.1;margin:0 0 8px}
.fl-brk-sub{font-size:1.05rem;color:var(--fl-muted);margin:0 auto}
.fl-good{display:inline-block;margin:6px 0 0;background:var(--fl-ok-soft);color:var(--fl-ok);font-weight:700;font-size:.9rem;border-radius:99px;padding:3px 10px}
.fl-trail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:360px;padding:0;margin:22px auto 0;position:relative}
.fl-trail::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:2px;background:var(--fl-hair)}
.fl-trail li{position:relative;display:grid;justify-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--fl-muted);animation:fl-pop .4s var(--fl-out) both;animation-delay:var(--d)}
.fl-trail .dot{width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgb(20 32 31 / .14);display:grid;place-items:center}
.fl-trail .dot svg{width:15px;height:15px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fl-trail .done{color:var(--fl-ink)}
.fl-trail .done .dot{background:var(--sc);box-shadow:none}
.fl-trail .now{color:var(--sc)}
.fl-trail .now .dot{box-shadow:inset 0 0 0 2.5px var(--sc),0 0 0 5px var(--sc-soft)}
.fl-facts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;text-align:left}
.fl-facts li,.fl-reward{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--fl-shadow);font-size:1rem;line-height:1.45;animation:fl-up .45s var(--fl-out) both;animation-delay:var(--d)}
.fl-reward{margin-top:10px;text-align:left;background:#fff8e6}
.fl-reward p{margin:0}
.fl-fi{flex:0 0 40px;height:40px;border-radius:12px;background:#e8f2f2;display:grid;place-items:center}
.fl-reward .fl-fi{background:#ffeec2}
.fl-reward .ic{stroke:#9a6a10}
.fl-pin{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:20px 20px max(16px,env(safe-area-inset-bottom));background:linear-gradient(rgb(242 245 244 / 0),var(--fl-bg) 34%)}
.fl-pin .btn{display:block;max-width:520px;margin:0 auto}
.fl-later{display:block;margin:18px auto 0;padding:10px;min-height:44px;color:var(--fl-muted)}
.fl-laterf{margin:16px 0 0;background:#fff;border-radius:18px;padding:16px;text-align:left;box-shadow:var(--fl-shadow)}
.fl-laterf input{border-radius:14px;min-height:54px}
.fl-laterf .btn{width:100%;margin-top:10px;border-radius:14px}
.fl-sent{margin:18px 0 0;color:var(--fl-ok);font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center}
.fl-sent svg{width:18px;height:18px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round}

/* scoring: the ring fills while the real steps tick */
.fl-load .rf{transition:stroke-dashoffset 2.1s cubic-bezier(.4,0,.2,1) .1s}
.fl-load .loadsteps{display:inline-grid;text-align:left;margin:16px auto 0}

/* the finish: hint, what the evaluation holds, two doors, the reward */
.fl-gate{max-width:560px;margin:0 auto;padding:20px 20px 56px}
.fl-hero,.fl-eval,.fl-offer{background:#fff;border-radius:24px;box-shadow:var(--fl-shadow)}
.fl-hero{padding:20px 20px 22px;text-align:center;animation:fl-up .4s var(--fl-out) both}
.fl-done{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;background:var(--fl-ok-soft);color:var(--fl-ok);font-size:.85rem;font-weight:700;border-radius:99px;padding:5px 12px 5px 8px}
.fl-done svg{width:16px;height:16px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fl-gauge{position:relative;width:232px;max-width:76%;margin:18px auto 2px;--zone:var(--accent)}
.fl-gauge.above{--zone:var(--fl-ok)}.fl-gauge.close{--zone:#d68a12}.fl-gauge.below{--zone:var(--fl-miss)}
.fl-gauge svg{display:block;width:100%;overflow:visible}
.fl-gauge path{fill:none;stroke-width:18}
.fl-gauge .gt{stroke:rgb(20 32 31 / .07);stroke-linecap:round}
.fl-gauge .gz{stroke:rgb(29 122 76 / .16)}
.fl-gauge .gf{stroke:var(--zone);stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--fl-out) .25s}
.fl-gauge .gl{stroke:var(--fl-ink);stroke-width:2.5;stroke-linecap:round}
.fl-gauge-line{position:absolute;transform:translate(-30%,-120%);font-size:.75rem;font-weight:700;white-space:nowrap;color:var(--fl-ink)}
.fl-gate h1,.fl-gate .fl-h{font-size:1.9rem;letter-spacing:-.028em;line-height:1.12;margin:10px 0 4px}
.fl-line{font-size:.92rem;color:var(--fl-muted);margin:0 auto}
.fl-tease{font-size:1.05rem;line-height:1.5;margin:14px auto 0;max-width:30ch}
.fl-eval{margin-top:12px;padding:20px 20px 8px;animation:fl-up .4s var(--fl-out) .12s both}
.fl-gate>.fl-doors+.fl-eval{margin-top:20px}
.fl-eval h2{font-size:1.2rem;letter-spacing:-.015em;margin:0 0 6px}
.fl-eval ul{list-style:none;padding:0;margin:0}
.fl-eval li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--fl-hair);font-size:.98rem;line-height:1.35}
.fl-eval li:first-child{border-top:0}
.fl-eval li>span:nth-child(2){flex:1}
.fl-eval .fl-fi{flex-basis:36px;height:36px;border-radius:11px}
.fl-eval .ic{width:18px;height:18px}
.fl-eval em{font-style:normal}
.fl-eval .blur{filter:blur(5px);font-weight:700;font-size:1.05rem;user-select:none;-webkit-user-select:none}
.fl-eval .blur.bars{display:grid;gap:3px;width:52px}
.fl-eval .blur.bars i{display:block;height:5px;border-radius:3px;background:var(--accent)}
.fl-lock .ic{stroke:#9aa5a3;width:17px;height:17px}
.fl-doors{display:grid;gap:10px;margin:18px 0 0;animation:fl-up .4s var(--fl-out) .22s both}
.fl-doors .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;text-decoration:none}
.fl-doors .btn .ic{stroke:#fff}
.fl-doors .btn.fl-claim{background:#fff;color:var(--fl-ink);box-shadow:inset 0 0 0 1.5px rgb(20 32 31 / .14),var(--fl-shadow);padding:10px 16px}
.fl-doors .btn.fl-claim .ic{stroke:#9a6a10;width:22px;height:22px}
.fl-claim>span{display:grid;text-align:left;line-height:1.25}
.fl-claim small{font-weight:400;font-size:.85rem;color:var(--fl-muted)}
.fl-free{text-align:center;color:var(--fl-muted);font-size:.9rem;margin:4px 0 0}
.fl-emf{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--fl-shadow);animation:fl-up .3s var(--fl-out) both}
.fl-emf label{font-size:1.1rem;margin:0 0 10px}
.fl-emf input{border-radius:14px;min-height:56px;font-size:1.05rem;border:1.5px solid rgb(20 32 31 / .2)}
.fl-emf input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgb(15 106 115 / .15)}
.fl-emf .btn{margin-top:12px}
.fl-emf .fl-free{margin-top:12px;text-align:left}
.fl-offer{margin-top:28px;padding:22px 20px}
.fl-offer h2{font-size:1.35rem;letter-spacing:-.02em;margin:0 0 8px}
.fl-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 4px}
.fl-price s{color:var(--fl-muted);font-size:1.2rem}
.fl-price b{font-size:2.3rem;letter-spacing:-.03em;line-height:1}
.fl-left{align-self:center;background:#fff1d1;color:#7a520f;font-size:.85rem;font-weight:700;border-radius:99px;padding:4px 10px;font-variant-numeric:tabular-nums}
.fl-ticks{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:9px}
.fl-ticks li{display:flex;gap:10px;align-items:center;font-size:1rem}
.fl-ticks svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--fl-ok-soft);stroke:var(--fl-ok);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fl-offer .btn.alt{display:block;width:100%;border-radius:16px;min-height:56px;border:0;box-shadow:inset 0 0 0 2px var(--cta);color:var(--cta);background:#fff}
.fl-offer .small{color:var(--fl-muted);margin:12px 0 0;font-size:.88rem}

/* landing question card (diagnostic.html) wears the same tiles */
.qcard{border:0;border-radius:22px;padding:20px 18px;box-shadow:var(--fl-shadow)}

/* the evaluation (results.html, free check): same ground, cards and gauge as the finish screen */
body.fl-page{background:var(--fl-bg)}
body.fl-page #root{max-width:none;padding:0}
.fl-res{max-width:560px;margin:0 auto;padding:16px 20px 48px;display:grid;gap:12px}
.fl-box{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--fl-shadow);margin:0}
.fl-box h2{font-size:1.2rem;letter-spacing:-.015em;margin:0 0 12px}
.fl-fine{font-size:.88rem;color:var(--fl-muted);margin:12px 0 0;line-height:1.5}
.fl-res .fl-hero{animation:none}
.fl-gwrap{position:relative;width:232px;max-width:76%;margin:14px auto 0}
.fl-gwrap .fl-gauge{width:100%;max-width:none;margin:0}
.fl-gwrap .score{display:block;position:absolute;left:0;right:0;bottom:-2px;text-align:center;line-height:1}
.fl-gwrap .score .big{font-size:2.9rem;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fl-gwrap .score span{display:block;font-size:.82rem;color:var(--fl-muted);margin-top:4px}
.fl-res .res-h{font-size:1.6rem;letter-spacing:-.025em;line-height:1.15;margin:16px 0 4px}
.fl-res .fl-tease{max-width:32ch;font-size:1rem;color:#2b3634}
.fl-secs{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.fl-sec-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}
.fl-sec-n{display:flex;align-items:baseline;gap:10px}
.fl-sec-n b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.fl-sec-n em{font-style:normal;font-size:.85rem;font-weight:700;color:var(--fl-miss)}
.fl-sec-n em.ok{color:var(--fl-ok)}
.fl-track{position:relative;height:10px;border-radius:99px;background:var(--fl-hair)}
.fl-track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--sc);transition:width .9s var(--fl-out) .2s}
.fl-track i.low{background:linear-gradient(90deg,var(--sc),color-mix(in oklab,var(--sc) 70%,#fff))}
.fl-mark{position:absolute;top:-4px;bottom:-4px;width:2.5px;margin-left:-1px;border-radius:2px;background:var(--fl-ink)}
.fl-topics{list-style:none;padding:0;margin:0}
.fl-topics li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--fl-hair);font-size:.98rem}
.fl-topics li:first-child{border-top:0;padding-top:2px}
.fl-tp{flex:1;line-height:1.35}
.fl-topics b{font-size:.92rem;color:var(--fl-miss);white-space:nowrap}
.fl-buy{box-shadow:0 0 0 2px rgb(26 86 219 / .14),var(--fl-shadow)}
.fl-buy .pblock .pb-rec{background:#eaf1fe;color:#1747b8;border-radius:99px;padding:5px 12px;font-size:.88rem}
.fl-buy .pblock .pb-tags span{background:var(--fl-bg);border:0;font-size:.85rem}
.fl-buy .pblock .pb-save{border-radius:99px;padding:4px 10px;font-size:.88rem}
.fl-buy .pblock .pb-end .left{border-radius:99px}
.fl-buy .pblock .btn.cta{border-radius:16px;min-height:58px}
.fl-buy .pblock .pb-safe{font-size:.9rem;color:var(--fl-muted)}
.fl-buy .pblock .pb-pay span{border:0;background:var(--fl-bg);border-radius:6px;font-size:.75rem;color:var(--fl-muted)}
.fl-bonus{display:flex;gap:14px;align-items:flex-start;background:#fff8e6;border-radius:20px;padding:16px 18px}
.fl-bi{flex:0 0 40px;height:40px;border-radius:12px;background:#ffeec2;display:grid;place-items:center;font-size:1.2rem}
.fl-bonus>div{display:grid;gap:2px;font-size:.98rem}
.fl-bonus span{color:#4d4433}
.fl-bonus .linkbtn{justify-self:start;margin-top:6px;font-weight:700;min-height:36px}
.fl-days{margin:-4px 0 12px;color:var(--fl-muted)}
.fl-days b{color:var(--fl-ink)}
.fl-weeks{list-style:none;padding:0;margin:0;position:relative}
.fl-weeks::before{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:2px;background:var(--fl-hair)}
.fl-weeks li{position:relative;display:flex;gap:14px;padding:0 0 14px}
.fl-weeks li:last-child{padding-bottom:0}
.fl-weeks .wk{flex:0 0 32px;height:32px;border-radius:50%;background:#e8f2f2;color:var(--accent-dark);font-weight:700;font-size:.9rem;display:grid;place-items:center;position:relative}
.fl-weeks li:first-child .wk{background:var(--accent);color:#fff}
.fl-weeks div{display:grid;gap:1px;padding-top:4px;font-size:.98rem;line-height:1.4}
.fl-weeks div span{color:#3a4644}
.fl-res .inside .fl-ticks li{align-items:flex-start;line-height:1.4}
.fl-res .fl-ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--fl-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a4c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.fl-res .inside .fl-ticks{margin:0}
.fl-faq details{border-top:1px solid var(--fl-hair)}
.fl-faq details:first-of-type{border-top:0}
.fl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 0;font-weight:700;font-size:1rem}
.fl-faq summary::-webkit-details-marker{display:none}
.fl-faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--fl-muted);border-bottom:2px solid var(--fl-muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--fl-out)}
.fl-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fl-faq details p{margin:0 0 14px;color:#2b3634}
.fl-res .why-tap .chip{border:0;background:var(--fl-bg);border-radius:99px}
.fl-res .rev-all summary h2{margin:0;font-size:1.1rem}
.fl-res .sticky-buy{border:0;border-radius:20px 20px 0 0;box-shadow:0 -10px 32px rgb(16 40 38 / .12)}
.fl-res .sticky-buy .btn.cta{border-radius:14px}
@media(prefers-reduced-motion:reduce){.fl-track i{transition:none!important}}

@keyframes fl-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes fl-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fl-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes fl-rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes fl-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){
  .fl-enter .pr-kicker,.fl-enter .q,.fl-enter #ans>.opt,.fl-trail li,.fl-facts li,.fl-reward,.fl-hero,.fl-eval,.fl-doors,.fl-emf,.practice .pr-sheet.rise,.fl-card .shake{animation:none!important}
  .fl-ring .rf,.fl-gauge .gf,.practice .pr-seg i{transition:none!important}
}

/* the returner screen (diagnostic.html, owner 2026-10-22: the old one was a mess and gave too much away) */
main.fl-backm{max-width:none;padding:0}
.fl-back .fl-hero{animation:none}
.fl-back .fl-doors{animation:none}
.fl-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:18px 0 0;font-size:.95rem}
.fl-links .linkbtn,.fl-links a{color:var(--fl-muted);min-height:44px;display:inline-flex;align-items:center}

/* Desktop (owner 2026-10-22: "shows only mobile width even on desktop"; material/design/layout.md "App and funnel
   screens on desktop"): the phone layout stays below 1024px; above it, the task on the left (≤ 600px) and what keeps
   them going in a sticky column on the right. The bottom bars give way to that column. */
.fl-aside{display:none}
.fl-side{background:#fff;border-radius:22px;padding:20px;box-shadow:var(--fl-shadow)}
.fl-side-n{font-size:1rem;color:var(--fl-muted);margin:0 0 4px}
.fl-side-n b{font-size:1.6rem;color:var(--fl-ink);letter-spacing:-.02em}
.fl-side-trust{font-size:.9rem;color:var(--fl-muted);margin:14px 4px 0}
@media(min-width:1024px){
  /* questions: card left, progress right */
  .practice .runbar .wrap{max-width:1080px}
  .practice .pr-app{max-width:1080px;display:grid;grid-template-columns:minmax(0,600px) 360px;gap:0 64px;align-items:start;padding-top:28px}
  .practice .pr-app>.pr-kicker,.practice .pr-app>.q{grid-column:1}
  .practice .pr-app:has(.has-passage){display:block}
  .fl-aside{display:block;grid-column:2;grid-row:1 / span 2;position:sticky;top:84px}
  .fl-aside .fl-trail{grid-template-columns:1fr;gap:10px;max-width:none;margin:16px 0 0;justify-items:stretch}
  .fl-aside .fl-trail::before{display:none}
  .fl-aside .fl-trail li{display:flex;align-items:center;gap:10px;justify-items:start}
  .fl-aside .fl-reward{margin-top:12px}
  .practice .pr-sheet{left:max(20px,calc(50vw - 520px));right:auto;width:600px;bottom:20px;border-radius:24px}
  .practice .pr-app:has(.has-passage)~.pr-sheet{left:calc(50vw + 8px);width:min(512px,calc(50vw - 28px))}
  /* break screens: the ring and sections left, the facts and the button right */
  .fl-brk{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:16px 64px;align-items:center;text-align:left;padding:72px 20px 64px}
  .fl-brk>.fl-brk-top{grid-column:1;grid-row:1 / span 6;text-align:center}
  .fl-brk>:not(.fl-brk-top){grid-column:2}
  .fl-brk .fl-facts{margin:0}
  .fl-brk .fl-pin{position:static;padding:8px 0 0;background:none}
  .fl-brk .fl-later{margin:0}
  .fl-load{max-width:880px;display:grid;grid-template-columns:auto 1fr;gap:8px 56px;align-items:center;text-align:left;padding:96px 20px}
  .fl-load>.fl-ring{grid-row:1 / span 2;width:200px;height:200px;margin:0}
  .fl-load .loadsteps{margin:0}
  /* the finish: hint, evaluation and the two doors left; the reward card right */
  .fl-gate{max-width:1080px;display:grid;grid-template-columns:minmax(0,600px) 380px;gap:12px 64px;align-items:start;padding-top:40px}
  .fl-gate>*{grid-column:1}
  .fl-gate>.fl-offer{grid-column:2;grid-row:1 / span 3;margin:0;position:sticky;top:24px}
  /* returner: the hint left, the doors right */
  .fl-back{grid-template-columns:minmax(0,600px) 380px}
  .fl-back>.fl-doors,.fl-back>.fl-links,.fl-back>.sample-err{grid-column:2}
  .fl-back>.fl-hero{grid-row:1 / span 4}
  .fl-back>.fl-doors{grid-row:1;margin:0;align-self:end}
  .fl-back>.fl-links{grid-row:2;justify-content:flex-start;margin:0}
  /* the evaluation: results left, the price right, no bottom bar */
  .fl-res{max-width:1080px;grid-template-columns:minmax(0,640px) 380px;gap:12px 56px;align-items:start;padding-top:28px}
  .fl-res>*{grid-column:1}
  .fl-res>.fl-buy{grid-column:2;grid-row:1 / span 20;position:sticky;top:88px}
  .fl-res .sticky-buy{display:none!important}
  /* the landing: question left; the reward and what it is right */
  main.lp{max-width:1080px;display:grid;grid-template-columns:minmax(0,600px) 360px;gap:0 64px;align-items:start;padding-top:40px}
  main.lp>*{grid-column:1}
  main.lp>.lp-gift{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:10px}
  main.lp>.checks{grid-column:2;grid-row:3 / span 2;align-self:start;margin-top:0;background:#fff;border-radius:22px;padding:20px 20px 8px;box-shadow:var(--fl-shadow)}
}
/* results.html's other two views on desktop: the free English section's result, and a paid test's result */
@media(min-width:1024px){
  body.res-sample #root,body.res-other #root{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,640px) 380px;gap:0 56px;align-items:start}
  body.res-sample #root>*,body.res-other #root>*{grid-column:1}
  body.res-sample #root>.offer{grid-column:2;grid-row:1 / span 40;position:sticky;top:88px;margin-top:0}
  body.res-sample .sticky-buy{display:none!important}
  body.res-other #root>.res-side{grid-column:2;grid-row:1 / span 40;position:sticky;top:88px}
}

/* q.html: the answer behind an email question (2026-10-22). The reason sits in the page, not a pinned sheet, so the price block follows it. */
.qa{max-width:640px}
.qa .opt{color:inherit}
.qa-why{margin:16px 0 8px;padding:16px;border-radius:10px;display:grid;gap:10px}
.qa-why.ok{background:#e9f6ee;border:1px solid #b9dfc6}
.qa-why.no{background:#fdf3e4;border:1px solid #efd6ac}
.qa-why.ok .pr-verdict{color:#17603a}
.qa-why.no .pr-verdict{color:#7a4a0c}
.qa-why p{margin:0}
.qa-why .btn{width:100%}
.qa-h{margin:28px 0 4px;font-size:1.3rem}
@media(min-width:1024px){.qa{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}.qa-r{position:sticky;top:88px}.qa-why{margin-top:0}}
/* The week pass line (price.js weekLine): a quiet second choice under the main price, never louder than it. */
.weekpass{position:relative;display:grid;gap:2px;padding-right:40px!important;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--fl-tint,#eef5f4);color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px rgb(20 32 31 / .10)}
.weekpass span{font-size:.98rem}.weekpass small{color:var(--fl-muted,#5b6b69);font-size:.86rem}
.weekpass:hover span b{text-decoration:underline}
.weekpass i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:1.2rem;color:var(--cta,#1a56db)}
.fl-gate>.weekpass{margin:12px 0 0}

/* The evaluation's one offer card (results-view.js, owner 2026-10-22: clear offer, genuine urgency). The real end
   leads (a dark band with the clock), then the fix built from their misses, the price, one button, one line of terms. */
.fl-res .fl-secs-in{margin:18px 0 6px}
.fl-deal{padding:0;overflow:hidden}
.fl-deal>*:not(.fd-clock){margin-left:20px;margin-right:20px}
.fd-clock{background:#14201f;color:#fff;padding:16px 20px 14px;text-align:center}
.fd-clock p{margin:0}
.fd-k{font-size:.95rem;font-weight:600;color:#ffd7a3}
.fd-t{font-size:2.6rem;line-height:1.1;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:2px 0 4px!important}
.fd-why{font-size:.9rem;color:#c9d3d1}
.fd-h{font-size:1.35rem!important;line-height:1.2;letter-spacing:-.02em;margin:18px 20px 12px!important}
.fd-h span{display:block;font-size:1rem;font-weight:500;color:var(--fl-muted);letter-spacing:0;margin-top:4px}
.fd-gets{list-style:none;padding:0;margin:0 20px 16px;display:grid;gap:10px}
.fd-gets li{display:flex;gap:10px;align-items:flex-start;line-height:1.4;font-size:1rem}
.fd-gets li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--fl-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a4c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.fd-price{display:flex;align-items:baseline;gap:10px;margin:0 20px 12px!important}
.fd-price b{font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}
.fd-price s{font-size:1.25rem;color:var(--fl-muted);text-decoration-thickness:2px}
.fd-save{background:var(--fl-ok);color:#fff;font-weight:700;border-radius:99px;padding:3px 10px;font-size:.9rem}
.fl-deal .fd-btn{display:flex;align-items:center;justify-content:center;width:auto;min-height:58px;border-radius:16px;font-size:1.1rem}
.fd-terms{text-align:center;font-size:.92rem;color:var(--fl-muted);margin:10px 20px 18px!important}
.fl-deal .weekpass{margin-bottom:18px}
.fd-more{background:var(--fl-bg);border-radius:14px;padding:12px 14px;margin:8px 0 0}
.fl-proof .rev{border-top:1px solid var(--fl-hair);padding-top:12px;margin-top:12px}
.fl-proof .rev:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fl-free{text-align:center;color:var(--fl-muted);margin:4px 0}
.fl-free .linkbtn{font-weight:700}
/* the reader's own story on the evaluation (results-view.js, stories.md) */
.fl-story p{margin:0;font-size:1.05rem;line-height:1.5}