/* Speaking Gym — Fluency Score assessment + results. Mobile first. */
:root{
  --ink:#0c0c0e; --ink-soft:#48453f; --muted:#77736a; --paper:#f8f7f4; --paper-dim:#efece5; --line:#e1ddd2; --card:#fff;
  --red:#c8102e; --red-dark:#9c0c22; --red-soft:#fbe9ec; --navy:#132043; --gold:#b08d57;
  --dark:#0c0c0e; --on-dark:#f5f3ee; --on-dark-soft:#b9b6ad;
  --radius:16px; --tap:58px;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
h1,h2,h3{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-optical-sizing:auto;font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin:0;}
p{margin:0;}
a{color:inherit;}
button{font:inherit;color:inherit;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;}

/* Top bar: logo + exit only (no site navigation during the assessment) */
.fs-top{background:var(--dark);color:var(--on-dark);}
.fs-top-in{max-width:720px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fs-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:16.5px;white-space:nowrap;}
.fs-logo img{width:32px;height:32px;border-radius:50%;}
.fs-exit{color:var(--on-dark-soft);text-decoration:none;font-size:14px;font-weight:600;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center;}
.fs-exit:hover{color:#fff;}

/* Progress */
.fs-progress{background:var(--dark);}
.fs-progress-track{height:6px;background:rgba(245,243,238,0.12);}
.fs-progress-bar{height:6px;background:var(--red);width:0;transition:width .25s ease;}

main{flex:1;width:100%;}
.fs-screen{max-width:640px;margin:0 auto;padding:24px 16px 40px;}
.fs-screen:focus{outline:none;}

/* Intro */
.fs-eyebrow{display:block;color:var(--red);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12.5px;margin-bottom:10px;}
.fs-intro h1{font-size:clamp(30px,8vw,44px);margin:6px 0 14px;}
.fs-intro .lead{font-size:18px;color:var(--ink-soft);margin-bottom:22px;}
.fs-facts{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px;}
.fs-facts li{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--ink);font-weight:500;}
.fs-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;}
.fs-small{font-size:13.5px;color:var(--muted);line-height:1.5;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:14px 26px;border-radius:10px;font-weight:700;font-size:16.5px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;letter-spacing:.01em;transition:background .15s ease,transform .1s ease,box-shadow .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(200,16,46,0.25);}
.btn-primary:hover{background:var(--red-dark);}
.btn-primary[disabled]{opacity:.55;cursor:default;box-shadow:none;}
.btn-block{width:100%;}
.btn-quiet{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-quiet:hover{border-color:#c9c3b5;}
.link-btn{background:none;border:none;padding:10px 0;min-height:44px;color:var(--ink-soft);font-weight:600;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* Question */
.fs-qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;min-height:44px;}
.fs-count{font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.02em;}
.fs-back{background:none;border:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--ink-soft);cursor:pointer;min-height:44px;padding:0 6px 0 0;}
.fs-back:hover{color:var(--ink);}
.fs-back[disabled]{visibility:hidden;}
.fs-q h1{font-size:clamp(24px,6.4vw,32px);margin-bottom:8px;}
.fs-help{color:var(--muted);font-size:15px;margin-bottom:18px;}
.fs-options{display:grid;gap:10px;margin-top:18px;}
.fs-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:var(--tap);padding:14px 16px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;text-align:left;font-size:17px;font-weight:600;cursor:pointer;transition:border-color .12s ease,background .12s ease,transform .1s ease;}
.fs-opt:hover{border-color:#bfb8a8;}
.fs-opt:active{transform:scale(.995);}
.fs-opt .mark{width:22px;height:22px;border-radius:50%;border:2px solid #c9c3b5;flex-shrink:0;display:grid;place-items:center;transition:border-color .12s ease,background .12s ease;}
.fs-opt.multi .mark{border-radius:6px;}
.fs-opt[aria-checked="true"]{border-color:var(--red);background:var(--red-soft);}
.fs-opt[aria-checked="true"] .mark{border-color:var(--red);background:var(--red);}
.fs-opt[aria-checked="true"] .mark::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;}
.fs-opt.multi[aria-checked="true"] .mark::after{width:10px;height:6px;border-radius:0;background:none;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);}
/* Multi-select: chips that size to their text, so words never break */
.fs-options.chips{display:flex;flex-wrap:wrap;gap:10px;}
.fs-options.chips .fs-opt{width:auto;flex:0 1 auto;max-width:100%;padding:12px 16px;gap:10px;font-size:16px;}
.fs-options.chips .fs-opt > span:last-child{white-space:nowrap;}
.fs-continue{margin-top:20px;}

/* Working out */
.fs-working{text-align:center;padding-top:18vh;}
.fs-spinner{width:44px;height:44px;border-radius:50%;border:4px solid var(--paper-dim);border-top-color:var(--red);margin:0 auto 18px;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Email gate */
.fs-gate h1{font-size:clamp(28px,7vw,38px);margin:4px 0 10px;}
.fs-gate .lead{font-size:17px;color:var(--ink-soft);margin-bottom:20px;}
.fs-locked{display:flex;align-items:center;gap:16px;background:var(--dark);color:var(--on-dark);border-radius:var(--radius);padding:18px;margin-bottom:22px;}
.fs-locked .ring-mini{width:64px;height:64px;flex-shrink:0;filter:blur(.2px);}
.fs-locked ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;flex:1;}
.fs-locked li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--on-dark-soft);}
.fs-locked li::before{content:"";width:14px;height:14px;border-radius:4px;background:rgba(245,243,238,0.14);flex-shrink:0;}
.field{margin-bottom:14px;}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px;}
.field input{width:100%;min-height:54px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:17px;background:#fff;color:var(--ink);}
.field input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(176,141,87,0.35);}
.field input[aria-invalid="true"]{border-color:var(--red);}
.field-error{color:var(--red-dark);font-size:14px;font-weight:600;margin-top:6px;}
.field-suggest{font-size:14px;margin-top:6px;color:var(--ink-soft);}
.field-suggest button{background:none;border:none;padding:4px 0;color:var(--red-dark);font-weight:700;text-decoration:underline;cursor:pointer;font-size:14px;}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-soft);margin:6px 0 18px;cursor:pointer;line-height:1.45;}
.check input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--red);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-error{background:var(--red-soft);color:var(--red-dark);border-radius:10px;padding:12px 14px;font-weight:600;font-size:15px;margin-bottom:14px;}

/* Score shown before the email step */
.gate-score{display:flex;align-items:center;gap:18px;background:var(--dark);color:var(--on-dark);border-radius:20px;padding:20px;margin-bottom:22px;}
.ring.ring-sm{width:104px;height:104px;}
.gate-score .track{stroke:rgba(245,243,238,0.12);}
.gate-score .val{stroke:var(--red);stroke-linecap:round;transition:stroke-dashoffset .9s ease;}
.gate-h1{display:flex;flex-direction:column;gap:2px;margin:0;}
.gate-h1 .fs-eyebrow{color:#ef6a7e;margin:0 0 2px;}
.gate-num{font-family:"Fraunces",Georgia,serif;font-size:46px;line-height:1;font-weight:600;color:#fff;}
.gate-num small{font-family:"Inter",sans-serif;font-size:16px;color:var(--on-dark-soft);font-weight:600;}
.gate-band{font-family:"Inter",sans-serif;font-size:16px;font-weight:600;color:var(--on-dark-soft);letter-spacing:0;}
.gate-title{font-size:clamp(24px,6.4vw,30px);margin:0 0 6px;}
.fs-gate .lead{margin-bottom:10px;}
.unlock-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;}
.unlock-list li{display:flex;gap:10px;align-items:center;font-size:16px;font-weight:600;color:var(--ink);}
.unlock-list li::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:5px;background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='10' width='12' height='9' rx='2' fill='%23c8102e'/%3E%3Cpath d='M8.5 10V8a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%23c8102e' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat;}
.r-profile{font-family:"Inter",sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft);margin:22px 0 0;}
.r-profile + .bars{margin-top:12px;}
.why-title{font-weight:700;color:var(--ink);font-size:15px;margin:0 0 6px;}

/* Results */
.fs-results{padding-top:20px;}
.r-hello{font-size:16px;color:var(--ink-soft);margin-bottom:12px;}
.r-score{background:var(--dark);color:var(--on-dark);border-radius:20px;padding:24px 20px;}
.r-score .fs-eyebrow{color:#ef6a7e;}
.r-score-top{display:flex;align-items:center;gap:20px;}
.ring{position:relative;width:132px;height:132px;flex-shrink:0;}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring .track{stroke:rgba(245,243,238,0.12);}
.ring .val{stroke:var(--red);stroke-linecap:round;transition:stroke-dashoffset .9s ease;}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-num b{font-family:"Fraunces",Georgia,serif;font-size:44px;line-height:1;font-weight:600;}
.ring-num span{font-size:13px;color:var(--on-dark-soft);margin-top:4px;}
.r-band{font-family:"Fraunces",Georgia,serif;font-size:22px;margin-bottom:4px;}
.r-band-text{font-size:15px;color:var(--on-dark-soft);line-height:1.5;}
.bars{display:grid;gap:14px;margin-top:22px;}
.bar-row{display:grid;gap:6px;}
.bar-label{display:flex;justify-content:space-between;font-size:15px;font-weight:600;}
.bar-label b{font-weight:700;}
.bar-track{height:8px;border-radius:99px;background:rgba(245,243,238,0.12);overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;background:var(--on-dark);width:0;transition:width .9s ease;}
.bar-row.focus .bar-fill{background:var(--red);}
.bar-row.focus .bar-label span::after{content:"Main focus";margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#ef6a7e;}
.r-note{font-size:13px;color:var(--on-dark-soft);margin-top:18px;line-height:1.5;border-top:1px solid rgba(245,243,238,0.1);padding-top:14px;}
.r-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:14px;}
.r-block h2{font-family:"Inter",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
.r-block h3{font-size:22px;margin-bottom:6px;}
.r-block p{color:var(--ink-soft);font-size:16px;}
.r-plan{list-style:none;counter-reset:p;margin:6px 0 0;padding:0;display:grid;gap:12px;}
.r-plan li{counter-increment:p;display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:16px;color:var(--ink);line-height:1.5;}
.r-plan li::before{content:counter(p);width:30px;height:30px;border-radius:50%;background:var(--paper-dim);display:grid;place-items:center;font-weight:700;font-size:14px;}
.r-rec{border:2px solid var(--ink);box-shadow:0 18px 40px rgba(12,12,14,0.10);}
.r-rec .kind{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:10px;}
.r-rec .best{color:var(--ink);font-weight:600;margin-bottom:8px;}
.r-terms{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:4px;}
.r-terms li{font-size:14.5px;color:var(--ink-soft);display:flex;gap:8px;}
.r-terms li::before{content:"✓";color:var(--ink);font-weight:700;}
.r-rec .btn{margin-top:16px;}
.why{margin-top:14px;border-top:1px solid var(--line);padding-top:4px;}
.why summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;color:var(--ink);}
.why summary::-webkit-details-marker{display:none;}
.why summary::after{content:"+";font-size:20px;color:var(--muted);}
.why[open] summary::after{content:"–";}
.why ul{margin:0 0 6px;padding-left:20px;display:grid;gap:6px;}
.why li{font-size:15px;color:var(--ink-soft);}
.r-after{margin-top:22px;display:grid;gap:4px;justify-items:center;text-align:center;}
.r-emailed{font-size:14.5px;color:var(--ink-soft);margin-top:12px;text-align:center;}

.fs-foot{text-align:center;font-size:13px;color:var(--muted);padding:18px 16px 26px;}
.fs-foot a{color:var(--muted);}

@media (min-width:700px){
  .fs-screen{padding:40px 24px 56px;}
  .r-score{padding:30px 28px;}
  .bars{grid-template-columns:1fr 1fr;column-gap:28px;}
  .ring{width:150px;height:150px;}
  .ring-num b{font-size:50px;}
}
@media (max-width:359px){
  .r-score-top{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}