/* Vocabulary product landing page. Uses /styles.css shared layout and navigation. */
.vocabulary-landing { overflow-x:hidden; }
.vl-hero { position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 53% 72% at 95% 53%,#e7ebff 0,transparent 85%),linear-gradient(170deg,#f9faff 0%,#fff 94%);border-bottom:1px solid #edf0f6; }
.vl-hero:before { content:"";position:absolute;right:-240px;top:40px;width:700px;height:700px;border:1px solid #dfe5fc;border-radius:50%;pointer-events:none;z-index:-1; }
.vl-breadcrumb { display:flex;align-items:center;gap:10px;padding-top:28px;font-size:11px;color:#9aa4bb;font-weight:650; }
.vl-breadcrumb a:hover { color:#4b61e4; }
.vl-breadcrumb span:last-child { color:#4c5b7c; }
.vl-hero-grid { display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:38px;min-height:630px;padding:28px 0 88px; }
.vl-hero-content,.vl-demo { min-width:0; }
.vl-hero-content { position:relative;z-index:2; }
.vl-eyebrow { display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;background:#edf0ff;border:1px solid #dfe5ff;border-radius:100px;color:#4d61cf;font-size:10px;letter-spacing:.10em;font-weight:830;margin-bottom:22px; }
.vl-eyebrow-mark { display:grid;place-items:center;width:28px;height:28px;background:#fff;color:#4c61d8;border-radius:50%;letter-spacing:-.05em;font-size:13px;box-shadow:0 2px 8px rgba(59,77,160,.1); }
.vl-hero h1 { font-size:clamp(42px,4.3vw,65px);line-height:1.105;letter-spacing:-.066em;max-width:610px;font-weight:850; }
.vl-lead { color:#6c7b93;font-size:15px;line-height:1.85;max-width:525px;margin:24px 0 30px; }
.vl-actions { display:flex;gap:12px;flex-wrap:wrap; }
.vl-mini-benefits { display:flex;align-items:center;gap:12px 19px;flex-wrap:wrap;margin-top:27px; }
.vl-mini-benefits span { display:flex;align-items:center;gap:7px;color:#8592a8;font-size:11px;font-weight:670; }
.vl-mini-benefits i { color:#29ad82;font-size:13px;font-style:normal;font-weight:800; }
.vl-demo { position:relative;justify-self:end;width:min(100%,484px);margin:52px 15px 20px 10px;border-radius:20px;background:#fff;border:1px solid #e4e9f6;box-shadow:0 35px 70px rgba(38,59,121,.16),0 5px 14px rgba(38,59,121,.04);transform:rotate(1.15deg); }
.vl-demo-top { display:flex;align-items:center;gap:15px;min-height:45px;padding:0 17px;background:#f9faff;border-radius:20px 20px 0 0;border-bottom:1px solid #ebeff9;color:#99a5bb;font-size:10px;font-weight:750; }
.vl-demo-top>span:last-child { margin-left:auto;font-size:17px; }
.vl-demo-dots { display:flex;gap:5px; }
.vl-demo-dots b { display:block;width:7px;height:7px;border-radius:50%;background:#eaabb1; }
.vl-demo-dots b:nth-child(2) { background:#ebd69b; }.vl-demo-dots b:last-child { background:#a9dfcf; }
.vl-demo-inner { padding:26px 26px 22px; }
.vl-demo-head { display:flex;justify-content:space-between;gap:10px;align-items:center; }
.vl-demo-tag { font-size:9px;font-weight:850;letter-spacing:.14em;color:#8f9dba; }
.vl-demo-level { color:#36a87f;background:#e8f8f0;border-radius:100px;padding:7px 11px;font-weight:800;font-size:9px;letter-spacing:.06em; }
.vl-demo h2 { color:#1b2a4a;font-size:46px;line-height:1.1;letter-spacing:-.06em;margin-top:21px; }
.vl-demo h2 span { font-size:23px;color:#b7bef3;vertical-align:top;display:inline-block;margin-top:4px; }
.vl-pronunciation { font-size:13px;color:#97a3b6;margin-top:7px; }.vl-pronunciation span { margin-left:8px;color:#6376b2; }
.vl-demo-tabs { display:flex;gap:7px;margin-top:28px;padding:5px;border:1px solid #e6ebf5;border-radius:12px;background:#f6f8fe; }
.vl-demo-tabs button { flex:1;min-height:37px;border:0;background:transparent;border-radius:9px;font-size:11px;font-weight:800;color:#9ba6ba;cursor:pointer; }
.vl-demo-tabs button[aria-selected="true"] { color:#455ddd;background:#fff;box-shadow:0 4px 15px rgba(43,64,123,.08); }
.vl-demo-content { padding:21px 18px;min-height:173px;margin-top:12px;border:1px solid #ebedf5;border-radius:13px;background:#fff; }
.vl-demo-content section[hidden] { display:none!important; }
.vl-panel-label { letter-spacing:.14em;font-size:9px;font-weight:830;color:#a4adc0;margin-bottom:12px; }
.vl-meaning { font-size:15px;line-height:1.6;font-weight:730;color:#2a3959; }
.vl-word-assoc { display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:22px; }
.vl-word-assoc span { font-size:10px;color:#9aabc2;margin-right:5px; }
.vl-word-assoc strong { display:inline-block;color:#4472b8;background:#edf4ff;padding:5px 9px;font-size:10px;font-weight:750;border-radius:7px; }
.vl-example { color:#263858;font-size:16px;line-height:1.65;font-weight:650; }
.vl-example strong { color:#4d62df; }
.vl-translation { margin-top:14px;color:#7d89a0;font-size:12px;line-height:1.65; }
.vl-quiz-question { font-size:12px;color:#4b5c79;font-weight:650;margin:3px 0 12px; }
.vl-quiz-options { display:grid;gap:7px; }
.vl-quiz-options button { text-align:left;padding:9px 12px;min-height:39px;cursor:pointer;border:1px solid #e6ebf4;border-radius:8px;background:#fff;color:#5c6983;font-size:11px;font-weight:690; }
.vl-quiz-options button:not(:disabled):hover { border-color:#96a6ed;background:#f8faff; }
.vl-quiz-options button.is-correct { border-color:#8bddbc;background:#e7f9f0;color:#23755a; }
.vl-quiz-options button.is-incorrect { border-color:#f4bebf;background:#fff0f0;color:#a84d54; }
.vl-quiz-options button:disabled { cursor:default; }
.vl-quiz-feedback { font-size:11px;color:#25785c;line-height:1.6;font-weight:720;margin-top:9px; }
.vl-quiz-feedback.is-error { color:#ac4d54; }
.vl-quiz-feedback:empty { display:none; }
.vl-quiz-reset { margin-top:7px;background:transparent;border:0;padding:5px 0;font-size:11px;font-weight:780;color:#4c62dd;cursor:pointer; }
.vl-quiz-reset[hidden] { display:none; }
.vl-demo-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 26px 20px;font-size:10px;font-weight:750;color:#a6afc1; }
.vl-demo-footer span:first-child { display:flex;align-items:center;gap:8px; }
.vl-demo-footer i { width:7px;height:7px;background:#4dc79a;border-radius:50%; }
.vl-float { position:absolute;z-index:3;background:#fff;box-shadow:0 14px 38px rgba(46,67,128,.1);border:1px solid #edf0f8;border-radius:12px;font-size:11px;font-weight:820;color:#4f5e81;padding:13px 17px;white-space:nowrap; }
.vl-float-top { top:-36px;right:-22px;transform:rotate(3deg);color:#6774a3; }.vl-float-bottom { bottom:-20px;left:-27px;transform:rotate(-4deg);display:flex;align-items:center;gap:10px; }
.vl-float-bottom span { color:#209d72;background:#d9f6e8;border-radius:100px;width:25px;height:25px;display:grid;place-items:center; }
.vl-strip { background:#fff;border-bottom:1px solid #edf0f7; }
.vl-strip .container { display:flex;justify-content:space-between;align-items:center;min-height:81px;gap:14px; }
.vl-strip span { font-size:11px;font-weight:850;letter-spacing:.12em;color:#7b87a0; }.vl-strip i { color:#cbd4e8;font-size:11px;font-style:normal; }
.vl-section-heading { display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px; }
.vl-section-heading h2,.vl-feature-header h2,.vl-process h2,.vl-faq h2 { font-size:clamp(32px,3.4vw,47px);line-height:1.15;letter-spacing:-.06em;font-weight:840; }
.vl-section-heading>p { max-width:365px;color:#7e8aa2;font-size:13px;line-height:1.8; }
.vl-why-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.vl-why-grid article { border:1px solid #e8edf7;border-radius:17px;padding:27px 25px 30px;min-width:0; }
.vl-why-icon { display:grid;place-items:center;width:49px;height:49px;border-radius:15px;background:#eaf0ff;color:#4c60d7;font-size:12px;font-weight:830; }
.vl-why-grid article:nth-child(2) .vl-why-icon { background:#e3f8ed;color:#27976f; }.vl-why-grid article:nth-child(3) .vl-why-icon { background:#fff0e0;color:#d28a43; }
.vl-why-grid h3 { font-size:19px;letter-spacing:-.035em;margin:26px 0 10px; }.vl-why-grid p { font-size:12px;line-height:1.9;color:#7d899d;max-width:310px; }
.vl-features { background:#f9faff;border-top:1px solid #f1f3fa;border-bottom:1px solid #f1f3fa; }
.vl-feature-header { text-align:center;max-width:900px;margin-bottom:38px; }.vl-feature-header h2 { margin-top:0; }.vl-feature-header>p:last-child { max-width:515px;margin:14px auto 0;line-height:1.8;color:#7f8aa1;font-size:13px; }
.vl-feature-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; }
.vl-feature-card { border:1px solid #e9edf5;border-radius:18px;background:white;padding:14px 14px 23px;min-width:0; }
.vl-feature-visual { height:160px;position:relative;overflow:hidden;border-radius:13px;background:var(--feature-bg);display:grid;place-items:center;color:var(--feature-fg); }
.vl-feature-visual:before { content:"";position:absolute;width:180px;height:180px;right:-80px;top:-110px;border:1px solid currentColor;opacity:.13;border-radius:50%; }
.vl-feature-symbol { font-size:44px;font-weight:850;letter-spacing:-.08em;transform:rotate(-7deg); }
.vl-feature-chip { position:absolute;bottom:11px;left:12px;padding:6px 9px;background:#fff;border-radius:7px;font-size:10px;font-weight:760;box-shadow:0 7px 15px rgba(0,0,0,.035); }
.vl-feature-blue { --feature-bg:#eaf0ff;--feature-fg:#5a71df; }.vl-feature-mint { --feature-bg:#e5f8ef;--feature-fg:#249b72; }.vl-feature-peach { --feature-bg:#fff0e3;--feature-fg:#ca8949; }.vl-feature-pink { --feature-bg:#ffedf4;--feature-fg:#cf699b; }
.vl-feature-card h3 { font-size:17px;letter-spacing:-.035em;margin:20px 6px 9px; }.vl-feature-card p { color:#7d8aa0;line-height:1.8;font-size:11px;margin:0 6px; }
.vl-feature-note { color:#9ba6b7;font-size:11px;text-align:right;line-height:1.7;margin-top:18px; }
.vl-process-layout { display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center; }
.vl-process-copy>p:not(.section-kicker) { font-size:13px;line-height:1.9;color:#78879d;max-width:440px;margin:22px 0 28px; }
.vl-process-steps { display:grid;gap:12px; }
.vl-process-steps>div { display:flex;align-items:flex-start;gap:21px;background:#fff;border:1px solid #e9ecf5;border-radius:15px;padding:26px 25px; }
.vl-process-steps>div>span { flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;color:#576bd9;background:#eff1ff;border-radius:11px;font-size:12px;font-weight:850; }
.vl-process-steps h3 { font-size:17px;letter-spacing:-.035em;margin-bottom:9px; }.vl-process-steps p { font-size:12px;color:#8793a8;line-height:1.75;max-width:340px; }
.vl-audience { background:#fbfcff; }
.vl-audience-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }
.vl-audience-grid article { min-width:0;padding:25px 25px 29px;border:1px solid #e8edf4;background:white;border-radius:17px; }
.vl-audience-grid article>span { display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#f0f2ff;color:#566ade;font-size:19px; }
.vl-audience-grid h3 { margin:22px 0 9px;font-size:17px;letter-spacing:-.03em; }.vl-audience-grid p { line-height:1.8;color:#8a96aa;font-size:12px; }
.vl-faq-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:95px;align-items:start; }
.vl-faq-grid>div:first-child>p:last-child { color:#8390a4;font-size:13px;line-height:1.85;margin-top:18px;max-width:320px; }
.vl-bottom-cta { padding:0 0 90px;background:#fff; }
.vl-cta-panel { background:linear-gradient(120deg,#3c55d7,#6b7aec);border-radius:25px;padding:72px 25px 76px;text-align:center;position:relative;isolation:isolate;overflow:hidden; }
.vl-cta-panel:before { content:"";position:absolute;z-index:-1;width:680px;height:680px;border:1px solid rgba(255,255,255,.18);border-radius:50%;top:-380px;right:-320px; }
.vl-cta-panel .section-kicker { color:#c4ccff; }.vl-cta-panel h2 { color:white;font-size:clamp(33px,3.8vw,51px);line-height:1.16;letter-spacing:-.06em;margin:15px 0; }.vl-cta-panel h2 span { color:#d4dcff; }
.vl-cta-panel>p:not(.section-kicker) { color:#e3e8ff;font-size:13px;line-height:1.8;margin-bottom:26px; }
@media(max-width:1100px) {
 .vl-hero-grid { gap:15px; }.vl-hero h1 { font-size:clamp(41px,4.5vw,56px); }
 .vl-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .vl-feature-visual { height:185px; }.vl-process-layout { gap:33px; }.vl-faq-grid { gap:40px; }
}
@media(max-width:800px) {
 .vl-hero-grid { grid-template-columns:1fr;gap:24px;padding-top:48px;padding-bottom:83px; }
 .vl-hero-content { text-align:center;max-width:635px;margin:auto; }
 .vl-hero h1 { max-width:630px;font-size:clamp(43px,7vw,61px); }
 .vl-lead { margin:23px auto 28px; }.vl-actions,.vl-mini-benefits { justify-content:center; }
 .vl-demo { margin:65px auto 0;transform:none;justify-self:center;width:min(100%,530px); }
 .vl-strip .container { flex-wrap:wrap;justify-content:center;min-height:66px;padding-block:20px; }
 .vl-section-heading { display:block; }.vl-section-heading>p { max-width:520px;margin-top:18px; }
 .vl-process-layout,.vl-faq-grid { grid-template-columns:1fr;gap:35px; }.vl-process-copy { max-width:600px; }
 .vl-faq-grid { gap:25px; }.vl-faq-grid>div:first-child>p:last-child { max-width:520px; }
 .vl-why-grid { gap:12px; }.vl-why-grid article { padding:23px 17px; }
 .vl-audience-grid { gap:12px; }
}
@media(max-width:560px) {
 .vl-breadcrumb { padding-top:22px;font-size:10px; }
 .vl-hero-grid { padding-top:46px;padding-bottom:66px; }
 .vl-eyebrow { font-size:9px;letter-spacing:.07em; }
 .vl-hero h1 { font-size:clamp(39px,10.4vw,53px); }
 .vl-lead { font-size:14px;line-height:1.8; }
 .vl-actions { flex-direction:column; }.vl-actions .btn { width:100%; }
 .vl-mini-benefits { gap:8px 16px; }.vl-mini-benefits span { font-size:10px; }
 .vl-demo { width:calc(100% - 11px);margin-top:62px; }.vl-demo-inner { padding:21px 16px 17px; }
 .vl-demo h2 { font-size:39px; }.vl-pronunciation { font-size:11px; }
 .vl-demo-content { padding:18px 13px;min-height:160px; }
 .vl-demo-footer { padding-inline:15px; }.vl-float { font-size:10px;padding:10px 12px; }
 .vl-float-top { right:-7px;top:-32px; }.vl-float-bottom { left:-7px;bottom:-21px; }
 .vl-strip .container { gap:7px 12px; }.vl-strip span { font-size:9px; }
 .vl-section-heading h2,.vl-feature-header h2,.vl-process h2,.vl-faq h2 { font-size:35px; }
 .vl-why-grid,.vl-feature-grid,.vl-audience-grid { grid-template-columns:1fr; }
 .vl-why-grid article { padding:23px 24px; }.vl-why-grid h3 { margin-top:17px; }
 .vl-feature-visual { height:170px; }
 .vl-feature-card { padding:13px 13px 22px; }.vl-feature-card p { font-size:12px; }
 .vl-feature-note { text-align:left; }
 .vl-process-steps>div { gap:14px;padding:21px 18px; }
 .vl-process-steps h3 { font-size:15px; }.vl-process-steps p { font-size:12px; }
 .vl-bottom-cta { padding-bottom:65px; }.vl-cta-panel { padding:53px 18px 58px;border-radius:20px; }
 .vl-cta-panel h2 { font-size:35px; }
}
@media(max-width:375px) {
 .vl-hero h1 { font-size:35px; }
 .vl-demo { width:100%; }.vl-demo-inner { padding:17px 11px 15px; }
 .vl-demo h2 { font-size:35px; }
 .vl-demo-content { padding:16px 11px; }
 .vl-float-top { right:-3px; }.vl-float-bottom { left:-3px; }
 .vl-demo-footer { flex-wrap:wrap; }
 .vl-meaning { font-size:13px; }.vl-example { font-size:14px; }
 .vl-section-heading h2,.vl-feature-header h2,.vl-process h2,.vl-faq h2 { font-size:32px; }
 .vl-cta-panel h2 { font-size:31px; }
}
@media(prefers-reduced-motion:reduce){ .vl-demo,.vl-float{transform:none} }