@font-face{font-family:Figtree;src:url('/fonts/figtree.woff2') format('woff2');font-weight:300 900;font-display:swap}
:root{--navy:#04194F;--ink:#0E1A45;--action:#2F6BFF;--light:#8DB4FF;--line:#DFE6F2;--pad:clamp(20px,5vw,80px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Figtree,Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}a{color:inherit}.wrap{max-width:1400px;margin:auto;padding:0 var(--pad)}
.hero{position:relative;overflow:hidden;background:var(--navy);color:white}.top{height:94px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.logo{display:block;width:148px;height:auto}.top nav{display:flex;align-items:center;gap:30px;font-size:15px}.top nav a{text-decoration:none;color:#CCD8F1}.top .signin{padding:9px 18px;border:1px solid #52638C;border-radius:30px;color:white}
.hero-row{position:relative;z-index:2;display:flex;align-items:center;min-height:626px;padding-top:34px;padding-bottom:92px}.copy{width:52%;max-width:660px}.eyebrow{margin:0 0 24px;color:#C3D3F4;font-size:15px;font-weight:500}h1{margin:0;font-size:clamp(38px,4.15vw,62px);line-height:1.045;letter-spacing:-.034em;font-weight:650}h1 em{font-style:normal;color:var(--light)}.sub{font-size:clamp(17px,1.45vw,20px);line-height:1.55;max-width:30em;margin:25px 0 34px;color:#DAE4F8}.cta{display:inline-flex;align-items:center;gap:16px;height:58px;padding:0 25px;background:var(--action);color:white;font-size:17px;font-weight:650;text-decoration:none;border-radius:12px}.cta:hover{background:#467CFF}.cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cta:focus-visible,.top a:focus-visible{outline:3px solid #8DB4FF;outline-offset:5px}
.visual{position:absolute;right:0;bottom:0;width:min(53%,750px);height:644px;z-index:1}.student{display:block;width:100%;height:100%;object-fit:cover;object-position:left bottom;mask-image:linear-gradient(to right,transparent,#000 16%);-webkit-mask-image:linear-gradient(to right,transparent,#000 16%)}
.product .visual{display:grid;place-items:center;height:100%;padding:105px 5vw 60px 20px;max-width:660px}.practice-preview{width:100%;max-width:520px;padding:25px;background:#fff;color:var(--ink);border-radius:20px;box-shadow:0 18px 48px #0004;overflow:hidden}.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}.example-label{font-size:12px;font-weight:600;color:#62708E}.task-label{font-size:12px;font-weight:600;background:#EEF3FF;color:#1748BA;padding:5px 9px;border-radius:6px}.practice-preview h3{font-size:21px;letter-spacing:-.02em;margin:19px 0 12px}.chart{display:block;width:100%;height:auto;font-family:Figtree,Arial,sans-serif}.chart-title{font-size:14px;fill:#0E1A45;font-weight:600}.answer{padding:15px 0;border-top:1px solid var(--line);margin-top:10px}.field-label{display:block;font-size:12px;font-weight:650;color:#5B6789}.answer p,.feedback p{font-size:16px;line-height:1.5;margin:6px 0 0}.feedback{padding:16px;background:#EEF3FF;border-left:3px solid #2F6BFF;border-radius:0 8px 8px 0}.feedback .field-label{color:#1748BA}.feedback strong{font-weight:650}
.minimal-preview{position:absolute;left:2%;bottom:100px;z-index:2;width:310px;max-width:90%;background:#fff;color:var(--ink);padding:19px 22px;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px #0003}.minimal-preview .example-label{padding-bottom:15px;margin-bottom:14px;border-bottom:1px solid var(--line)}.minimal-preview p{font-size:17px;font-weight:600;margin:6px 0 9px}.minimal-preview blockquote{margin:0;padding:9px 0 0;border-top:1px solid var(--line);font-size:15px;color:#36517D;line-height:1.4}
.problem{padding:86px 0 96px}.problem .wrap{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:start}.problem h2{font-size:clamp(31px,3vw,44px);font-weight:650;line-height:1.1;letter-spacing:-.03em;margin:0;max-width:12em}.problem p{font-size:20px;line-height:1.5;color:#5B6789;margin:20px 0 0}.steps{list-style:none;margin:0;padding:0;counter-reset:step}.steps li{counter-increment:step;display:flex;align-items:baseline;gap:22px;padding:23px 0;border-bottom:1px solid var(--line);font-size:21px;font-weight:600;line-height:1.4}.steps li:first-child{border-top:1px solid var(--line)}.steps li:before{content:'0' counter(step);font-size:14px;color:#2F6BFF;font-weight:600;width:2ch;flex-shrink:0}.problem .cta{margin-top:30px}.footer{padding:22px var(--pad);font-size:13px;background:#F4F7FD;color:#62708E;text-align:center}
@media(min-width:1800px){.visual{right:max(0px,calc((100vw - 1500px)/2));}}
@media(max-width:1000px){.top{height:80px}.hero-row{min-height:570px;padding-bottom:60px}.copy{width:53%}h1{font-size:clamp(38px,4.8vw,50px)}.visual{width:52%;height:570px}.product .visual{padding:95px 24px 45px 18px}.practice-preview{padding:18px}.practice-preview h3{font-size:18px}.answer p,.feedback p{font-size:14px}.preview-heading{flex-wrap:wrap;padding-bottom:12px}.minimal-preview{left:5%;bottom:78px;width:265px;padding:16px}.problem .wrap{gap:35px}}
@media(max-width:900px){.top{height:80px}.logo{width:124px}.top nav{gap:16px}.top nav a:not(.signin){display:none}.hero-row{display:block;min-height:0;padding:35px 0 18px}.copy{width:100%;max-width:none}h1{font-size:clamp(38px,9.5vw,54px);max-width:13em}.eyebrow{font-size:14px;margin-bottom:19px}.sub{font-size:18px;margin:22px 0 28px;max-width:28em}.cta{height:58px;padding:0 23px;font-size:17px;max-width:100%}.visual{position:relative;width:100%;height:auto;aspect-ratio:952/941;right:auto;bottom:auto;margin-top:15px;max-width:600px;margin-left:auto}.student{mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 92%,transparent)}.product .visual{height:auto;padding:28px var(--pad) 42px;width:100%;margin-top:0;aspect-ratio:auto;max-width:600px}.practice-preview{padding:22px}.preview-heading{padding-bottom:16px;flex-wrap:nowrap}.practice-preview h3{font-size:21px}.answer p,.feedback p{font-size:16px}.minimal-preview{left:var(--pad);bottom:28px;max-width:calc(100% - 2*var(--pad));width:300px}.problem{padding:55px 0 65px}.problem .wrap{display:block}.problem h2{font-size:34px}.problem p{font-size:19px;margin-top:17px}.steps{margin-top:33px}.steps li{font-size:19px;padding:20px 0}.footer{font-size:12px}}
@media(max-width:350px){.logo{width:112px}.top .signin{padding:8px 14px}.sub{font-size:17px}.cta{font-size:16px;padding:0 18px;gap:12px}.preview-heading{align-items:flex-start;flex-direction:column}.practice-preview{padding:18px}.minimal-preview{padding:16px}.minimal-preview p{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.field-label.spoken{display:flex;align-items:center;gap:6px}.spoken svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:900px){.product .hero-row{padding:26px 0 0}.product .sub{margin:18px 0 22px}.product .visual{padding:20px var(--pad) 28px}.practice-preview{padding:14px 16px;border-radius:16px}.preview-heading{padding-bottom:8px}.practice-preview h3{font-size:17px;margin:10px 0 4px}.chart{height:84px}.answer{padding:8px 0;margin-top:4px}.answer p,.feedback p{font-size:15px;line-height:1.4;margin-top:3px}.feedback{padding:9px 12px}}

/* Brilliant-style hero: one white practice card with real PTE content, a cursor doing the task,
   a green check when it's right, quick cuts between three tasks, and the score card at the end. */
.product .visual{display:grid;place-items:center;z-index:1}
/* hero-row paints above the card (z-index) but must not swallow its clicks */
.product .hero-row{pointer-events:none}
.product .hero-row a{pointer-events:auto}
.visual .mat{position:absolute;inset:-70px -150px -50px -360px;z-index:0;background:radial-gradient(58% 60% at 62% 46%,rgba(122,162,242,.17),rgba(122,162,242,.055) 55%,transparent 78%);-webkit-mask-image:linear-gradient(to left,#000 55%,transparent 92%);mask-image:linear-gradient(to left,#000 55%,transparent 92%)}
.demo{--ink:#0E1A45;--soft:#5B6788;--line:#D7DEEE;--chip:#EEF2FA;--blue:#2F6BFF;--ok:#18A957;position:relative;z-index:1;width:100%;max-width:470px;font-family:Figtree,Arial,sans-serif;color:var(--ink)}
.demo .card{position:relative;height:300px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(2,10,40,.45);overflow:hidden;cursor:pointer}
.demo .sc{position:absolute;inset:0;padding:30px 32px;opacity:0;transform:translateX(24px);pointer-events:none}
.demo[data-scene=fib] .sc-fib,.demo[data-scene=di] .sc-di,.demo[data-scene=wfd] .sc-wfd{opacity:1;transform:none}
.demo.animated .sc{transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.demo .prompt{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}

/* Fill in the Blanks */
.demo .sent{margin:18px 0 0;font-size:24px;line-height:1.5;font-weight:600}
.demo .gap{display:inline-block;width:92px;height:38px;vertical-align:middle;margin:0 4px;border:2px dashed #AEB9D3;border-radius:10px}
.demo .gap.right{border:2px solid var(--ok);background:#EAF8F0}
.demo .tray{position:absolute;left:28px;right:28px;bottom:30px;display:flex;gap:14px;justify-content:center;padding-top:18px;border-top:1.5px solid var(--line)}
.demo .chip{display:inline-block;padding:7px 16px;font-size:20px;font-weight:600;background:var(--chip);border:1.5px solid var(--line);border-radius:10px;position:relative}
.demo.animated .chip{transition:transform .55s cubic-bezier(.5,0,.2,1),background .3s,border-color .3s}
.demo .chip.held{background:#fff;border-color:var(--blue);box-shadow:0 6px 14px rgba(47,107,255,.25)}
.demo .chip.landed{background:#fff;border-color:var(--ok);color:var(--ok)}
@keyframes nope{20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:4px 0}}
.demo .chip.nope{animation:nope .4s;border-color:#E5484D;color:#C0282D;background:#FDEBEC}
.demo .chip.nope::after{content:"\00d7";position:absolute;top:-9px;right:-7px;width:16px;height:16px;border-radius:50%;background:#E5484D;color:#fff;font-size:13px;font-weight:800;line-height:16px;text-align:center}

/* "since 2019" read as one unit: an underline lands on the point in time when since drops in */
.demo .sent .when{padding-bottom:2px;border-bottom:3px solid transparent;transition:border-color .35s}
.demo .sent.linked .when{border-bottom-color:var(--blue)}
@keyframes gapHint{50%{border-color:var(--blue)}}
.demo .gap.hint{animation:gapHint .7s ease-in-out 2}

/* Describe Image */
.demo .chart{display:block;width:100%;height:auto;margin-top:26px}
.demo .chart .ax{stroke:var(--line);stroke-width:1.5}
.demo .chart .lab{font:600 13px Figtree,Arial,sans-serif;fill:var(--soft)}
.demo .chart .lgt{font:600 11.5px Figtree,Arial,sans-serif;fill:var(--soft)}
.demo .chart .bar{fill:#B9CBF7}
.demo .chart .bar2{fill:#DDE3EF}
.demo .chart .lg-on{fill:#B9CBF7}
.demo .chart .lg-in{fill:#DDE3EF}
.demo .chart .bar.top{transition:fill .3s}
.demo[data-step=fix] .chart .bar.top,.demo[data-step=ok] .chart .bar.top{fill:var(--blue)}
.demo .chart .val{font:700 13px Figtree,Arial,sans-serif;fill:var(--ink);opacity:0}
/* Teacher's pen-marks: trend arrow + circled peak, drawn then lifted */
.demo .chart .ann{opacity:0;transition:opacity .3s}
.demo .chart .ann.show{opacity:1}
.demo .chart .ann path,.demo .chart .ann ellipse{stroke:var(--blue);stroke-width:3;fill:none;stroke-linecap:round}
.demo .chart .ann-arr{stroke-dasharray:360;stroke-dashoffset:360;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) .1s}
.demo .chart .ann-head{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .22s ease .8s}
.demo .chart .ann-cir{stroke-width:2.5;stroke-dasharray:4 7;transition:none}
.demo .chart .ann.show .ann-arr{stroke-dashoffset:0}
.demo .chart .ann.show .ann-head{stroke-dashoffset:0}

.demo[data-step=fix] .chart .val,.demo[data-step=ok] .chart .val{opacity:1}
.demo .say{position:absolute;left:28px;right:28px;bottom:20px;margin:0;min-height:42px;padding:10px 14px;background:var(--chip);border-radius:12px;font-size:17px;font-weight:600;line-height:1.35;display:flex;align-items:center;gap:8px}
.demo .say .mic{width:15px;height:15px;flex:0 0 auto;fill:var(--soft)}
.demo .say::before{content:"";position:absolute;left:22px;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--chip)}
.demo .say .tpart{color:var(--soft)}
.demo .say .lpart{color:var(--blue);font-weight:700}
.demo .say .turn{display:none;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#E5A33A;border-radius:20px;padding:3px 9px;margin:0 7px;vertical-align:2px}
.demo .say .turn.show{display:inline-block}


/* Editor's caret: teacher marks where a word was dropped */
.demo .caret{position:relative}
.demo .caret::after{content:"";position:absolute;left:-5px;top:19px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--blue);opacity:0;transform:translateY(3px)}
.demo .caret.show::after{opacity:1;transform:none}
.demo.animated .caret::after{transition:opacity .3s,transform .3s}
/* Text caret while a line is being typed — sells "someone is writing this" */
.demo .live::after{content:"";display:inline-block;width:2px;height:.95em;background:var(--blue);margin-left:2px;vertical-align:-.12em;animation:caretBlink .85s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}

/* Write From Dictation: audio bar + the learner's transcript, then the dropped word is restored */
.demo .sc-wfd{display:flex;flex-direction:column;justify-content:center}
.demo .sc-wfd .audio{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.demo .sc-wfd .spk{width:20px;height:20px;fill:var(--soft);stroke:var(--soft)}
.demo .sc-wfd .wave{display:flex;align-items:center;gap:3px;height:22px}
.demo .sc-wfd .wave i{width:3px;height:5px;background:#C9D6F5;border-radius:2px}
.demo .sc-wfd .audio.play .wave i{background:var(--blue);animation:wv .8s ease-in-out infinite}
.demo .sc-wfd .wave i:nth-child(3n){animation-delay:.12s}.demo .sc-wfd .wave i:nth-child(4n){animation-delay:.24s}.demo .sc-wfd .wave i:nth-child(5n){animation-delay:.36s}
@keyframes wv{0%,100%{height:5px}50%{height:17px}}
.demo .sc-wfd .wfd-text{margin:0;padding:15px 17px;border:1.5px solid var(--line);border-radius:12px;font-size:19px;font-weight:500;line-height:1.6;background:#fff}
.demo .sc-wfd .wl:empty::before{content:"Type what you hear";color:#B9C3D8;font-weight:400}
.demo .sc-wfd .wi{color:var(--blue);font-weight:700}

/* Green check, top right of the card */
.demo .ok{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:9px;background:var(--ok);display:grid;place-items:center;opacity:0;transform:scale(.6)}
.demo .ok svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.demo[data-step=ok] .ok{opacity:1;transform:none}
.demo.animated .ok{transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}

/* Score card at the end: a labelled report tile — ring + tick + real numbers,
   the scored verdict as compact stat chips (score / speed / speech) */
.demo .pdial{position:relative;z-index:2;width:max-content;margin:-26px auto 0;padding:12px 20px 12px 14px;background:#fff;border-radius:16px;box-shadow:0 14px 34px rgba(2,10,40,.35);display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(10px) scale(.88)}
.demo .pdial svg{width:46px;height:46px;flex:none}
.demo .pdial .track{fill:none;stroke:#DDE3F2;stroke-width:4}
.demo .pdial .fillc{fill:none;stroke:#3DDC84;stroke-width:4;stroke-linecap:round;stroke-dasharray:0 69.2;transform:rotate(-90deg);transform-origin:center}
.demo .pdial .stick{fill:none;stroke:var(--ok);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.demo .pdial .rep{display:grid;gap:7px}
.demo .pdial .rep b{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.demo .pdial .rep .nums{display:flex;gap:16px}
.demo .pdial .rep .num{display:grid;gap:2px}
.demo .pdial .rep .num strong{font-size:15px;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.demo .pdial .rep .num small{font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.demo.scored .card{filter:brightness(.93) saturate(.8)}
.demo.animated .card{transition:filter .5s}
.demo.scored .pdial{opacity:1;transform:none}.demo.scored .pdial .fillc{stroke-dasharray:69.2}.demo.scored .pdial .stick{opacity:1}
.demo.animated .pdial{transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.demo.animated .pdial .fillc{transition:stroke-dasharray .8s .3s cubic-bezier(.4,0,.2,1)}
.demo.animated .pdial .stick{transition:opacity .3s 1s}

/* The cursor — big enough to follow, with a click ripple */
.demo .cursor{position:absolute;left:0;top:0;width:44px;height:44px;z-index:5;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.demo .cursor.on{opacity:1}
.demo.animated .cursor{transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .2s}
.demo .cursor.snap{transition:none}
.demo .cursor svg{width:100%;height:100%;transition:transform .12s}
.demo .cursor.press svg{transform:scale(.84)}
@keyframes ping{from{transform:scale(.35);opacity:.85}to{transform:scale(1.35);opacity:0}}
.demo .cursor.ping::after{content:"";position:absolute;inset:4px;border:3px solid rgba(47,107,255,.55);border-radius:50%;animation:ping .5s ease-out forwards}

@media(min-width:901px){.product .visual .demo{transform:translateY(16px)}}

/* Texture handover: faint practice-paper grid fades in at the hero's foot and out of the section below */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.22) 1.6px,transparent 1.8px);background-size:42px 42px;-webkit-mask-image:linear-gradient(to bottom,transparent 55%,#000 96%);mask-image:linear-gradient(to bottom,transparent 55%,#000 96%)}
.problem{position:relative}
.problem::before{content:"";position:absolute;left:0;right:0;top:0;height:300px;pointer-events:none;background-image:linear-gradient(rgba(19,42,108,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(19,42,108,.065) 1px,transparent 1px),radial-gradient(circle,rgba(19,42,108,.13) 1.6px,transparent 1.8px);background-size:42px 42px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}

/* Centred variant: headline → sub → CTA → card (card DOM sits after the CTAs) */
body.centred .hero-row{display:block;min-height:0;padding:14px 20px 0;text-align:center}
body.centred .copy{width:auto;max-width:470px;margin:0 auto}
body.centred h1{max-width:11em;margin:0 auto;text-wrap:balance}
body.centred h1 em{color:inherit}
body.centred .sub{margin:20px auto 28px;text-wrap:balance}
body.centred .visual{position:static;height:auto;width:auto;max-width:none;padding:48px 0 0;pointer-events:auto}
body.centred .product .visual{display:block;margin:26px auto 0;padding:0}
body.centred .visual .mat{inset:-30px -140px;-webkit-mask-image:none;mask-image:none}
body.centred .demo{margin:0 auto}

/* Centred layout: keep the header inside the same centred column as the copy */
@media(min-width:901px) and (max-width:1549px){
body.centred .top{width:min(1100px,100% - 40px);margin:14px auto 0;height:auto;padding:11px 14px 11px 26px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);border-radius:60px;backdrop-filter:blur(6px)}
body.centred .top .logo{width:118px}
}

/* Centred by default; on wide viewports (or zoomed out) the copy and card split apart */
@media(min-width:1550px){
body.centred .hero-row{display:flex;align-items:center;min-height:626px;padding-top:34px;padding-bottom:92px;text-align:left}
body.centred .copy{width:52%;max-width:660px;margin:0}
body.centred h1{max-width:none;margin:0;text-wrap:wrap}
body.centred .sub{margin:25px 0 34px}
body.centred .visual,body.centred .product .visual{position:absolute;right:0;bottom:0;top:auto;width:min(53%,750px);height:644px;max-width:660px;margin:0;padding:105px 5vw 60px 20px;display:grid;place-items:center}
body.centred .demo{margin:0;max-width:600px}
body.centred .demo .card{height:340px}
body.centred .visual .mat{inset:-70px -150px -50px -360px;-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%)}
}
/* Short windows (snapped halves, small notebooks, heavy browser chrome): compress the
   centred stack so the card surfaces above the fold — headline shrinks a step, sub and
   CTA tighten, card drops a row of height */
@media(min-width:901px) and (max-height:700px){
body.centred .hero-row{padding-top:6px}
body.centred .top{margin-top:8px}
body.centred h1{font-size:clamp(30px,3.1vw,44px)}
body.centred .sub{font-size:17px;margin:14px auto 18px}
body.centred .cta{height:50px;font-size:16px}
body.centred .cta2{height:50px}
body.centred .product .visual{margin:16px auto 0}
body.centred .demo .card{height:270px}
}

/* Small phones: the spoken line wraps as one sentence, not as two squeezed columns */
@media(max-width:420px){.demo .say{display:block}.demo .say .mic{display:inline-block;vertical-align:-2px;margin-right:6px}}
@media(max-width:900px){.product .visual{padding:20px var(--pad) 40px}.demo .card{height:280px}.demo .sc{padding:20px}.demo .chart{margin-top:20px}.demo .sent{font-size:20px}.demo .gap{width:78px;height:34px}.demo .chip{font-size:17px;padding:6px 13px}.demo .tray{left:20px;right:20px;bottom:22px}.demo .essay{font-size:18px}.demo .say{left:20px;right:20px;bottom:18px;font-size:15px}.demo .sc-we .prompt{top:20px;left:20px}.demo .why{left:20px;bottom:92px;font-size:13px;max-width:88%}.demo .note{font-size:14px}.demo .sc-di .note{top:8px;left:20px}}

/* Light variant: ivory hero, serif display headline, green pill CTA, calm card */
body.light .hero{background:#F4F2ED;color:var(--ink)}
body.light .top{height:auto;margin-top:20px;padding:10px 14px 10px 24px;background:#fff;border:1px solid #EDEAE0;border-radius:60px;box-shadow:0 2px 10px rgba(30,25,10,.07)}
body.light .top .logo{width:118px}
body.light .top a{color:#3C392F}
body.light .top .signin{background:#fff;border:1.5px solid #E3DFD4;color:var(--ink)}
body.light .top .signin:hover{border-color:#C9C3B2}
body.light.centred .hero-row{padding-top:44px}
body.light h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:600;letter-spacing:-.018em;color:#17150F}
body.light h1 em{color:inherit}
body.light .sub{color:#5A574D}
body.light .cta{background:#16A34A;border-radius:40px;height:62px;padding:0 32px;font-size:18px}
body.light .cta:hover{background:#128A3E}
.cta2{display:none}
body.light .cta2{display:inline-flex;align-items:center;height:62px;padding:0 30px;margin-left:12px;font-size:18px;font-weight:650;color:var(--ink);background:#fff;border:1.5px solid #E3DFD4;border-radius:40px;text-decoration:none}
body.light .cta2:hover{border-color:#C9C3B2}
body.light .visual .mat{background:radial-gradient(58% 60% at 62% 46%,rgba(122,162,242,.14),rgba(122,162,242,.04) 55%,transparent 78%)}
body.light .demo .card{box-shadow:0 24px 60px rgba(30,25,10,.16);border:1px solid #EDEAE0}
body.light .demo .pdial{box-shadow:0 14px 34px rgba(30,25,10,.2);border:1px solid #EDEAE0}

/* VV-inverted variant: paper field, thin black lines, humanist serif, single accent */
body.vv .hero{background:#FBFAF6;color:#17150F}
body.vv .top a{color:#3C392F}
body.vv .top .signin{border-color:#17150F;color:#17150F}
body.vv .top .signin:hover{background:#17150F;color:#FBFAF6}
body.vv.centred .hero-row{padding-top:54px}
body.vv h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:500;letter-spacing:-.012em;color:#14130F}
body.vv h1 em{color:#14130F;font-style:italic}
body.vv .sub{color:#555249;font-family:Georgia,serif;font-style:italic}
body.vv .cta{background:#17150F;border-radius:40px;height:60px;padding:0 34px;font-size:18px}
body.vv .cta:hover{background:#3A382F}
body.vv .cta2{display:inline-flex;align-items:center;height:60px;padding:0 28px;margin-left:12px;font-size:18px;font-weight:500;color:#17150F;background:none;border:none;border-radius:40px;text-decoration:underline;text-underline-offset:5px}
body.vv .cta2:hover{color:#000}
body.vv .visual .mat{display:none}
body.vv .demo .card{box-shadow:0 10px 30px rgba(20,15,5,.08);border:1.5px solid #1C1A14}
body.vv .demo .pdial{box-shadow:0 10px 26px rgba(20,15,5,.1);border:1.5px solid #1C1A14}