/* Verbal Quiz styles. Exam-bluebook direction: flat colour bands, heavy condensed caps, highlighter marks. */

@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --blue:#1F3FD1;
  --blue-wash:#EEF0FF;
  --blue-mute:#DDE1FF;
  --ink:#0B0B12;
  --white:#FFFFFF;
  --yellow:#FFE14A;
  --mute:#4B4B57;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bw:2px;
  --gutter:20px;
  --max:1240px;
}
@media (min-width:760px){:root{--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px;color-scheme:light}
@media (min-width:900px){html{scroll-padding-top:84px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nav :focus-visible,.band--blue :focus-visible,.band--ink :focus-visible,.dock :focus-visible,.foot :focus-visible{outline-color:var(--yellow)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:12px 16px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
.skip:focus{top:8px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.label{font-weight:700;font-size:.8125rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}

/* Colour bands */
.band{padding:64px 0}
@media (min-width:900px){.band{padding:112px 0}}
.band--blue{background:var(--blue);color:var(--white)}
.band--ink{background:var(--ink);color:var(--white)}
.band--yellow{background:var(--yellow);color:var(--ink)}
.band--white{background:var(--white);color:var(--ink)}

/* Display type: heavy, condensed, upper case */
h1,h2{font-weight:900;font-stretch:70%;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(3rem,11.5vw,6.5rem)}
h2{font-size:clamp(2.75rem,9vw,6.5rem)}
h3{font-weight:700;font-size:1.25rem;line-height:1.25}
.mark{background:var(--yellow);color:var(--ink);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.h1__s{display:block}
.tag{display:inline-block;margin-bottom:20px;padding:6px 10px;background:var(--ink);color:var(--white)}
.band--blue .tag{background:var(--white);color:var(--blue)}
.band--ink .tag{background:var(--yellow);color:var(--ink)}
.band--yellow .tag{background:var(--ink);color:var(--yellow)}
.lede{font-size:1.25rem;line-height:1.5;max-width:36ch}
.prose p{max-width:56ch;font-size:1.1875rem}
.prose p+p{margin-top:1em}
h2+.prose,h2+.rows,h2+.faq,h2+.steps,h2+p{margin-top:32px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:var(--bw) solid var(--ink);background:var(--yellow);color:var(--ink);font-weight:800;font-stretch:90%;font-size:1rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .12s,color .12s}
.btn:hover{background:var(--ink);color:var(--yellow)}
.btn--sm{min-height:44px;padding:0 16px;font-size:.8125rem}
.btn--ink{background:var(--ink);color:var(--yellow)}
.btn--ink:hover{background:var(--white);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--blue)}
.btn--block{width:100%}
@media (min-width:560px){.btn--block{width:auto}}
.band--prose-cta .btn{margin-top:32px}

/* Nav */
.nav{background:var(--blue);color:var(--white)}
@media (min-width:900px){.nav{position:sticky;top:0;z-index:20}}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.nav__brand{display:inline-flex;align-items:center;min-height:44px;font-weight:900;font-stretch:70%;font-size:1.5rem;line-height:1;letter-spacing:.01em;text-transform:uppercase;text-decoration:none}
.nav__links{display:none}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.nav__links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav__opt{display:none}
@media (min-width:760px){
  .nav__links{display:flex;gap:8px;margin-left:auto;margin-right:24px}
  .nav__opt{display:inline}
}

/* Hero */
.hero{padding:24px 0 64px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.hero__cta{margin-top:32px}
.hero__fine{margin-top:16px;color:var(--blue-mute)}
.hero__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:8px;color:var(--blue-mute)}
.hero__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:underline;text-underline-offset:4px}
.hero .lede{margin-top:28px}
@media (min-width:900px){
  .hero h1{font-size:clamp(3.5rem,7.4vw,6.5rem)}
  .hero{padding:56px 0 112px}
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
  .hero__demo{margin-top:8px}
}

/* Demo (a graded exam answer) */
.demo{background:var(--white);color:var(--ink);border:var(--bw) solid var(--ink)}
.demo__bar{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--ink);color:var(--white)}
.demo__bar span:last-child{color:var(--yellow)}
.demo__q,.demo__a{padding:20px 16px 0}
.demo__q .label,.demo__a .label{color:var(--mute)}
.demo__qtext{margin-top:6px;font-weight:700;font-size:1.25rem;line-height:1.25}
.demo__quote{position:relative;margin-top:8px;padding:12px 14px;border-left:6px solid var(--blue);background:var(--blue-wash);font-size:1rem;line-height:1.55}
.demo__live{position:absolute;left:14px;top:12px;right:14px}
.demo.is-typing .demo__live::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--ink);animation:vq-blink 1s steps(2,start) infinite}
@keyframes vq-blink{to{visibility:hidden}}
.fb{margin:20px 16px 0;border:var(--bw) solid var(--ink)}
.fb__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:var(--bw) solid var(--ink)}
.fb__score{font-weight:900;font-stretch:70%;font-size:4rem;line-height:.8;letter-spacing:-.005em;color:var(--blue)}
.fb__list li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:start;padding:10px 14px;border-top:var(--bw) solid var(--ink);font-size:.9375rem;line-height:1.4}
.fb__list li:first-child{border-top:0}
.fb__list .miss{background:var(--yellow)}
.fb__tag{display:inline-block;padding:3px 6px;border:var(--bw) solid var(--ink);font-weight:800;font-size:.6875rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.fb__list .miss .fb__tag{background:var(--ink);color:var(--white)}
.demo__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px 16px;min-height:72px;color:var(--mute)}
.demo__replay{min-height:44px;padding:0 14px;border:var(--bw) solid var(--ink);background:transparent;color:var(--ink);font:800 .8125rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;visibility:hidden}
.demo__replay.is-in{visibility:visible}
.demo__replay:hover{background:var(--ink);color:var(--white)}
.js-demo .demo__ghost{color:transparent}
.js-demo .fb__list li,.js-demo .fb__score{opacity:0;transition:opacity .25s}
.js-demo .fb__list li.is-in,.js-demo .fb__score.is-in{opacity:1}

/* Why speaking */
.why__cols{display:grid;gap:20px;margin-top:40px}
.why__cols p{max-width:44ch;font-size:1.1875rem}
@media (min-width:900px){.why__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:56px}}

/* Steps */
.steps{border-top:var(--bw) solid var(--white)}
.step{padding:28px 0;border-bottom:var(--bw) solid var(--white)}
.step__n{display:block;font-weight:900;font-stretch:70%;font-size:clamp(6rem,14vw,11rem);line-height:.8;color:var(--yellow)}
.step__t{display:block;margin:20px 0 10px}
.step p{max-width:32ch;font-size:1.125rem}
@media (min-width:900px){
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .step{padding:36px 32px 8px;border-bottom:0;border-left:var(--bw) solid var(--white)}
  .step:first-child{border-left:0;padding-left:0}
}

/* What you get */
.rows{border-top:var(--bw) solid var(--ink)}
.row{display:grid;gap:12px;padding:28px 0;border-bottom:var(--bw) solid var(--ink)}
.row h3{font-weight:900;font-stretch:70%;font-size:clamp(2rem,4.5vw,3.25rem);line-height:.95;text-transform:uppercase}
.row p{max-width:52ch;font-size:1.1875rem}
.rate{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rate li{padding:8px 14px;border:var(--bw) solid var(--ink);font-weight:800;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
@media (min-width:760px){.row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px}}

/* FAQ */
.faq details{border-top:var(--bw) solid var(--ink)}
.faq details:last-child{border-bottom:var(--bw) solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:18px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.25rem}
.faq summary::after{content:"+";flex:none;font-weight:900;font-size:2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{max-width:60ch;padding:0 0 24px;font-size:1.0625rem}

/* Final CTA */
.cta-final p{margin-top:24px;max-width:40ch;font-size:1.25rem}
.cta-final__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.cta-final__actions .btn{width:100%}
@media (min-width:560px){.cta-final__actions .btn{width:auto}}
.cta-final h2{max-width:11ch}

/* Footer */
.foot{background:var(--ink);color:var(--white);padding:28px 0 calc(104px + env(safe-area-inset-bottom))}
.foot__row{display:flex;flex-direction:column;gap:8px}
.foot__nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot a,.foot span{display:inline-flex;align-items:center;min-height:44px}
.foot a{text-decoration:underline;text-underline-offset:4px}
@media (min-width:760px){
  .foot{padding-bottom:28px}
  .foot__row{flex-direction:row;justify-content:space-between;align-items:center}
}

/* Fallback pages (404, posts) */
.page{padding-top:64px;padding-bottom:64px}
.page h1{margin-bottom:24px}
.page .label{margin-bottom:16px;color:var(--mute)}
.page .btn{margin-top:32px}

/* Mobile sticky CTA */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--ink);transform:translateY(100%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
.dock.is-on{transform:none;visibility:visible;transition:transform .2s}
.dock .btn{width:100%}
@media (min-width:760px){.dock{display:none}}