/* Speekset: one palette, clearer controls, quiet interaction. */
:root { --soft-paper:#fffaf7; --soft-line:#e6d9d2; --rose-ink:#B84A27; }
.vivid-theme { text-rendering:optimizeLegibility; }
.vivid-theme .text-link,.vivid-theme .nav-plain { min-height:44px; }
.vivid-theme .text-link { align-items:center; }
.vivid-theme .site-header .language-switch button,.vivid-theme .site-header .language-switch a { min-height:44px; }
.vivid-theme .icon-button { min-width:44px; min-height:44px; }
.vivid-theme :focus-visible { outline:2px solid var(--rose-ink); outline-offset:4px; }
.vivid-theme .hero h1 { text-wrap:balance; }
.vivid-theme .hero-art .photo-frame { border-color:#17151b16; }
.vivid-theme .hero-art .photo-frame img { object-position:48% 54%; }
.vivid-theme .scene-phrase { border-color:#49343e; }
.vivid-theme .scene-test { border-color:#49343e; }
.vivid-theme .course-facts span:before { color:var(--rose-ink); }
.vivid-theme .plans-section { padding-bottom:64px; }
.vivid-theme .plans-disclaimer { border-color:#EBC7B8; }
.vivid-theme .plans-grid .plan-card { border-color:#D9C6BF; border-radius:12px; }
.vivid-theme .plans-grid .plan-featured { border:1px solid #B84A27; background:#FFF0EB; box-shadow:0 10px 28px #50281812; }
.vivid-theme .plan-card h3 { letter-spacing:-.8px; }
.vivid-theme .plan-description { min-height:66px; }
.vivid-theme .plan-card li { font-size:14px; line-height:1.65; }
.vivid-theme .plan-card>.button { justify-content:space-between; }
.vivid-theme .plan-card>.button svg { width:20px; height:20px; }
.vivid-theme .studio-how { padding-block:56px; margin-bottom:60px; background:var(--soft-paper); border-block:1px solid #F2E6DF; }
.vivid-theme .how-card { border-color:var(--soft-line); border-radius:12px; }
.vivid-theme .how-card .step-index { background:#FFE4DA; color:#8C3419; border-radius:50%; font-size:24px; }
.vivid-theme .how-card h3 { min-height:44px; }
.vivid-theme .how-card>p { min-height:118px; }
.vivid-theme .how-plan,.vivid-theme .how-routine,.vivid-theme .how-video { background:#FFF6F3; border-color:#EED2C8; }
.vivid-theme .how-video { padding:17px; }
.lesson-dialogue { display:grid; gap:12px; margin-top:15px; }
.lesson-dialogue>div { max-width:90%; padding:10px 13px; border:1px solid #EED2C8; border-radius:11px 11px 11px 2px; background:#fff; }
.lesson-dialogue>div:last-child { margin-left:auto; border-radius:11px 11px 2px 11px; background:#FFE4DA; border-color:#F5C8B8; }
.lesson-dialogue small { display:block; margin-bottom:5px; color:#76645E; font-size:10px; }
.lesson-dialogue p { margin:0; color:#17151b; font-size:14px; line-height:1.5; }
.vivid-theme .teacher-section { padding-bottom:60px; }
.vivid-theme .teacher-benefits li>svg { color:#9E3B1C; background:#FFF0EB; }
.vivid-theme .teacher-conversation { background:#211c22; color:#fff; border:0; border-radius:14px; padding:34px; }
.vivid-theme .teacher-conversation .eyebrow { color:#F7B29B; }
.vivid-theme .studio-topic-panel h3,.vivid-theme .conversation-topics p { color:#fff; }
.vivid-theme .conversation-topics>div { border-color:#ffffff24; }
.vivid-theme .conversation-topics>div>span { color:#F4A58A; }
.vivid-theme .conversation-topics small,.vivid-theme .teacher-conversation .topic-note { color:#cfc4cc; }
.vivid-theme .faqs details { border-color:var(--soft-line); }
.vivid-theme .faqs summary { padding-block:16px; min-height:68px; align-items:center; }
.vivid-theme .faqs details[open] { background:var(--soft-paper); }
.vivid-theme .faqs details[open] summary,.vivid-theme .faqs details>p { padding-inline:16px; }
.vivid-theme .hungarian-entry { border-color:var(--soft-line); }
.vivid-theme .free-practice-area { background:var(--soft-paper); border-color:#F2E6DF; }
.vivid-theme .level-invitation { border:1px solid #e2ce76; border-radius:12px; background:#fff0a3; }
.vivid-theme .level-invitation .button-dark { background:#17151b; border-color:#17151b; color:#fff; }
.vivid-theme .level-invitation .button-dark:hover { background:#38323e; }
.vivid-theme .level-invitation-action small { font-size:12px; line-height:1.6; color:#65573b; }
.vivid-theme .filters button { min-height:44px; border-radius:999px; padding-inline:16px; }
.vivid-theme .lesson-card { border-color:#E5D5CE; border-radius:12px; }
.vivid-theme .lesson-card:hover { border-color:#D99B86; box-shadow:0 8px 20px #5b34280d; transform:translateY(-2px); }
.vivid-theme .lesson-visual .scene { opacity:1; color:#5d3b30; }
.vivid-theme .lesson-number { color:#7c6760; }
.vivid-theme .lesson-meta { font-size:12px; border-color:var(--soft-line); }
.vivid-theme .lesson-arrow { border-color:#E5D5CE; background:#FFF6F3; color:#8C3419; }
.vivid-theme .certificate-invitation { border-color:var(--soft-line); margin-bottom:28px; }
.vivid-theme .certificate-progress>span { height:6px; width:140px; background:linear-gradient(to right,#B84A27 var(--milestone),#EDE1DC var(--milestone)); }
.vivid-theme .certificate-progress>span:before { content:none; }
.vivid-theme .certificate-progress small { font-size:12px; }
.vivid-theme .free-practice-area .daily-section { padding-top:24px; }
.vivid-theme .daily-card { background:#fff; border-color:var(--soft-line); border-radius:14px; box-shadow:0 8px 28px #5f34430a; }
.vivid-theme .daily-card:before { display:none; }
.vivid-theme .daily-controls { border-color:var(--soft-line); }
.vivid-theme .daily-context { color:#665961; font-size:14px; }
.vivid-theme .read-practice-note { font-size:12px; }
.vivid-theme .read-practice-note>span:first-child { background:#FFE4DA; color:#8C3419; }
.vivid-theme .daily-translation { color:#78645E; }
.vivid-theme .closing-section { border:0; border-radius:14px; }
.vivid-theme .teach-panel-compact { background:#FFF6F3; border-color:#EED2C8; border-radius:12px; }
.vivid-theme .site-footer { padding-top:44px; }
.vivid-theme .footer-top { padding-bottom:28px; }
.vivid-theme .footer-bottom { padding-block:22px; font-size:12px; }
.vivid-theme .footer-bottom a,.vivid-theme .footer-bottom button,.vivid-theme .footer-langs button,.vivid-theme .footer-langs a { min-height:44px; display:inline-flex; align-items:center; }
.vivid-theme dialog { border-color:#DFCFC8; border-radius:14px; box-shadow:0 24px 90px #17151b25; }
.vivid-theme dialog::backdrop { background:#21172080; backdrop-filter:blur(3px); }
.vivid-theme .question-prompt,.vivid-theme .level-result,.vivid-theme .saved-level-note { background:#FFF6F3; }
.vivid-theme .test-progress { background:#EDE3DE; }
.vivid-theme .test-progress>span { background:#B84A27; }
.vivid-theme .quiz-option { border-radius:8px; }
.vivid-theme .result-plan { border-color:#E5D5CE; background:#fff; border-radius:10px; }
.vivid-theme .result-plan.selected { border-color:#D99B86; background:#FFF0EB; }
.vivid-theme .result-plan input { accent-color:#B84A27; }
.vivid-theme .result-plan strong { font-weight:650; }
.vivid-theme .learning-checkout { justify-content:space-between; }
.vivid-theme .phrasebook-tabs button { min-height:44px; }
.vivid-theme .phrasebook-tabs button.active { background:#FFE4DA; color:#7A2B12; }
.vivid-theme .speak-card,.vivid-theme .progress-summary,.vivid-theme .certificate-checklist,.vivid-theme .finish-phrases { background:#FFF6F3; border-color:#EED2C8; }
.no-script-note { margin:20px; padding:20px; background:#fff0a3; border-radius:10px; line-height:1.6; }
/* The teacher route shares the same palette and form treatment. */
.teacher-page .teacher-header { gap:24px; padding-block:20px; }
.teacher-page .teacher-header nav { gap:4px; padding:4px; border:1px solid #EED2C8; border-radius:999px; background:#FFF6F3; }
.teacher-page .teacher-header nav a { padding:10px 14px; border-radius:999px; text-decoration:none; }
.teacher-page .teacher-header nav [aria-current=page] { background:#17151b; color:#fff; text-decoration:none; }
.teacher-page .teacher-home { min-height:44px; display:inline-flex; align-items:center; gap:8px; text-decoration:underline; text-underline-offset:5px; }
.teacher-page .teacher-hero { background:var(--soft-paper); border-block:1px solid #F2E6DF; }
.teacher-page .teacher-hero .eyebrow { color:#B84A27; }
.teacher-page .teacher-hero figure { transform:none; border:0; box-shadow:none; border-radius:14px; background:#FBDAD0; }
.teacher-page .teacher-hero img { object-position:50% 35%; }
.teacher-page .teacher-steps { border-color:var(--soft-line); }
.teacher-page .application-section h2 { font-size:40px; }
.teacher-page #teacher-application,.teacher-page #application-preview { background:#FFF6F3; border:1px solid #EED2C8; border-radius:14px; padding:26px; }
.teacher-page .application-field input,.teacher-page .application-field select,.teacher-page .application-field textarea { border-color:#DFCFC8; border-radius:8px; }
@media(hover:hover) { .vivid-theme .text-link:hover { color:#B84A27; } }
@media(max-width:900px) and (min-width:681px) { .vivid-theme .how-card>p { min-height:164px; } }
@media(max-width:760px) {
 .teacher-page .teacher-header { flex-wrap:wrap; gap:12px; }
 .teacher-page .teacher-header nav { margin-left:auto; }
 .teacher-page .teacher-home { width:100%; }
 .teacher-page .teacher-hero-grid { grid-template-columns:1fr; gap:28px; }
 .teacher-page .teacher-hero figure { max-width:480px; height:340px; }
}
@media(max-width:680px) {
 .vivid-theme .site-header { height:84px; }
 .vivid-theme .site-header .language-switch button,.vivid-theme .site-header .language-switch a { min-height:44px; }
 .vivid-theme .hero .eyebrow { font-size:10px; }
 .vivid-theme .hero-note { font-size:12px; }
 .vivid-theme .plans-section { padding-bottom:40px; }
 .vivid-theme .plan-description { min-height:0; }
 .vivid-theme .studio-how { margin-bottom:38px; padding-block:36px; }
 .vivid-theme .how-card h3,.vivid-theme .how-card>p { min-height:0; }
 .vivid-theme .teacher-conversation { padding:26px; }
 .vivid-theme .certificate-invitation { margin-bottom:20px; }
 .vivid-theme .certificate-scope { font-size:12px; line-height:1.7; }
 .vivid-theme .free-practice-area .daily-section { padding-top:12px; }
 .vivid-theme .daily-card { padding:24px; }
 .vivid-theme .scene-test { min-height:82px; }
 .vivid-theme .footer-top { align-items:flex-start; gap:18px; }
 .vivid-theme .footer-contact { margin-left:0; min-height:44px; }
 .vivid-theme .footer-langs { gap:12px; margin-left:0; }
 .vivid-theme .modal-actions { gap:14px; }
 .vivid-theme .quiz-option { min-height:56px; }
 .teacher-page .teacher-header nav a { padding:10px 11px; }
 .teacher-page #teacher-application,.teacher-page #application-preview { padding:20px 16px; }
 .teacher-page .application-section h2 { font-size:33px; }
}
@media(max-width:370px) {
 .vivid-theme .site-header { gap:7px; }
 .vivid-theme .brand { font-size:26px; }
 .vivid-theme .site-header .language-switch button,.vivid-theme .site-header .language-switch a { padding-inline:5px; }
 .vivid-theme .hero .eyebrow { font-size:9px; }
 .teacher-page .teacher-header nav a { padding:9px 8px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .vivid-theme .button,.vivid-theme .lesson-card,.vivid-theme .quiz-option { transition:none; }
 .vivid-theme .button:hover,.vivid-theme .lesson-card:hover,.vivid-theme .scene-test:hover { transform:none; }
}

.vivid-theme .teacher-benefits li>span:first-child { background:#FFF0EB; color:#9E3B1C; }
.vivid-theme .studio-hero-art>figcaption { font-size:10px; line-height:1.5; }

/* A single language control, with a vertical disclosure list. */
.vivid-theme .site-header .language-switch { display:block; padding:0; border:1px solid #17151b40; border-radius:8px; background:#ffffff16; flex-shrink:0; }
.language-dropdown { position:relative; }
.language-dropdown summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; cursor:pointer; list-style:none; font-size:13px; font-weight:600; white-space:nowrap; }
.language-dropdown summary::-webkit-details-marker { display:none; }
.language-dropdown summary>svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.language-dropdown summary>svg.language-chevron { width:13px; height:13px; transition:transform .15s; }
.language-dropdown[open] .language-chevron { transform:rotate(180deg); }
.language-dropdown .language-options { position:absolute; z-index:30; right:0; top:calc(100% + 9px); display:flex; flex-direction:column; gap:3px; padding:7px; width:170px; background:#fff; border:1px solid #EED2C8; border-radius:11px; box-shadow:0 12px 32px #2117201a; }
.language-dropdown:not([open]) .language-options { display:none; }
.vivid-theme .site-header .language-options button,.vivid-theme .site-header .language-options a { display:flex; align-items:center; justify-content:flex-start; text-align:left; min-height:44px; width:100%; padding:0 13px; margin:0; border:0; border-radius:6px; background:#fff; color:#17151b; font:500 14px var(--sans); text-decoration:none; }
.vivid-theme .site-header .language-options [aria-pressed=true],.vivid-theme .site-header .language-options [aria-current=page] { background:#FFF0EB; color:#9E3B1C; }
.vivid-theme .site-header .language-options button:hover,.vivid-theme .site-header .language-options a:hover { background:#FFF0EB; }
.language-options .language-full { display:inline!important; }.language-options .language-short { display:none!important; }
@media(max-width:370px){.language-dropdown summary{padding:0 9px;gap:6px;font-size:12px;}}
@media(prefers-reduced-motion:reduce){.language-dropdown summary>svg.language-chevron{transition:none;}}

/* A tighter opening and a clear human invitation for teachers. */
@media(min-width:1000px){
 .vivid-theme .hero { min-height:575px; padding-top:32px; padding-bottom:52px; gap:54px; }
 .vivid-theme .hero h1 { font-size:clamp(52px,4.6vw,70px); letter-spacing:-3px; }
 .vivid-theme .hero-description { max-width:480px; font-size:17px; }
 .vivid-theme .studio-hero-art { height:430px; }
 .vivid-theme .hero-art .photo-frame { inset:20px 48px 36px 12px; transform:rotate(-1.5deg); }
 .vivid-theme .studio-teacher-inset { width:158px; height:178px; transform:rotate(2deg); }
 .vivid-theme .scene-phrase { width:230px; left:0; bottom:6px; padding:16px 18px; transform:rotate(-1.5deg); box-shadow:0 8px 22px #3814261c; }
 .vivid-theme .scene-test { max-width:235px; right:0; bottom:48px; transform:rotate(2deg); box-shadow:0 8px 22px #3814261c; }
 .vivid-theme .hero-actions .button { font-size:16px; }
}
.vivid-theme .hero-art .photo-frame img { transform:scale(1.1); transform-origin:50% 55%; }
.vivid-theme .course-facts { flex:1; justify-content:flex-end; gap:30px; }
.vivid-theme .course-facts>span { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:14px; line-height:1.4; }
.vivid-theme .course-facts>span:before { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#FFF0EB; margin:0; font-size:14px; }
.vivid-theme .teach-panel-feature { grid-template-columns:.9fr 1.1fr; gap:0; overflow:hidden; background:#211c22; border:0; border-radius:16px; }
.teach-panel-feature .recruit-photo { margin:0; position:relative; height:100%; min-height:490px; }
.teach-panel-feature .recruit-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:50% 35%; }
.teach-panel-feature .recruit-photo figcaption { position:absolute; left:16px; bottom:16px; padding:6px 9px; background:#fff; color:#4f4048; font-size:10px; border-radius:4px; }
.vivid-theme .teach-panel-feature .teach-copy { padding:48px; }
.vivid-theme .teach-panel-feature .eyebrow { color:#F7B29B; }
.vivid-theme .teach-panel-feature h2 { color:#fff; font-size:clamp(36px,3.4vw,50px); letter-spacing:-1.8px; margin:14px 0 20px; }
.vivid-theme .teach-panel-feature .teach-description { color:#e4dce1; font-size:17px; line-height:1.65; }
.vivid-theme .teach-panel-feature ul { padding-left:19px; margin:24px 0 28px; }
.vivid-theme .teach-panel-feature li { color:#f1e9ee; font-size:15px; line-height:1.6; padding-left:4px; margin-bottom:10px; }
.vivid-theme .teach-panel-feature .button { width:100%; justify-content:space-between; background:#F4845F; color:#17151b; border-color:#F4845F; }
.vivid-theme .teach-panel-feature .button:hover { background:#F79B7C; border-color:#F79B7C; }
.vivid-theme .teach-panel-feature .teach-note { color:#bfb2bc; font-size:12px; line-height:1.6; margin:17px 0 0; }
@media(max-width:760px){
 .vivid-theme .teach-panel-feature { grid-template-columns:1fr; }
 .teach-panel-feature .recruit-photo { height:300px; min-height:0; }
 .vivid-theme .teach-panel-feature .teach-copy { padding:30px 26px; }
 .vivid-theme .teach-panel-feature h2 { font-size:36px; }
 .vivid-theme .course-facts { justify-content:flex-start; gap:20px; }
 .vivid-theme .course-facts>span { align-items:flex-start; text-align:left; font-size:12px; }
}
@media(prefers-reduced-motion:reduce){.vivid-theme .scene-test:hover{transform:rotate(2deg);}}

/* Put the promise and the next step first; keep detail for lower on the page. */
@media(min-width:681px){
 .vivid-theme .hero-copy{max-width:650px}
 .vivid-theme .hero h1{font-size:clamp(58px,5.1vw,78px);font-weight:750;line-height:.99;letter-spacing:-3.8px;max-width:690px;margin-block:34px 26px}
 .vivid-theme .hero-description{display:none}
 .vivid-theme .hero-actions .button{min-width:270px;min-height:64px;font-size:17px;font-weight:700}
 .vivid-theme .hero-actions .tour-button{font-size:15px;font-weight:700}
}
@media(max-width:680px){
 .vivid-theme .hero h1{font-size:clamp(42px,11vw,56px);font-weight:750;line-height:1.02;letter-spacing:-2.4px;margin-block:26px 20px}
 .vivid-theme .hero-description{display:none}
 .vivid-theme .hero-actions{gap:6px}
 .vivid-theme .hero-actions .button{min-height:58px;font-size:15px;font-weight:700}
 .vivid-theme .hero-actions .tour-button{font-size:14px;font-weight:700}
 .vivid-theme .hero-note{margin-top:20px}
}

/* Quiet framing lets the people and the headline carry the opening. */
.vivid-theme .hero-art .photo-frame,.vivid-theme .studio-teacher-inset,
.vivid-theme .scene-phrase,.vivid-theme .scene-test{transform:none;border-radius:12px;box-shadow:none}
.vivid-theme .scene-phrase,.vivid-theme .scene-test{border:0;box-shadow:0 8px 28px #32152414}
.vivid-theme .scene-phrase>strong,.vivid-theme .scene-test b{display:none}
.vivid-theme .scene-phrase p{font-size:22px;line-height:1.25;font-weight:700;margin:12px 0 16px}
.vivid-theme .scene-test{background:#fff;max-width:230px;min-height:102px}
.vivid-theme .scene-test strong{font-size:19px;line-height:1.15}
.vivid-theme .scene-test small{font-size:12px;margin-top:8px}
.vivid-theme .scene-ring{background:#FFE4DA;border-color:#D95D39}
.vivid-theme .studio-section-heading>p,.vivid-theme .teach-panel-feature .teach-note{display:none}
.vivid-theme .studio-section-heading h2,.vivid-theme .section-heading h2{font-weight:750;letter-spacing:-2px}
.vivid-theme .how-card h3{font-size:32px;font-weight:750;line-height:1.08;letter-spacing:-1.2px}
.vivid-theme .how-card>p{font-size:16px;line-height:1.6}
.vivid-theme .teach-panel-feature h2{font-weight:750}
@media(min-width:1000px){
 .vivid-theme .hero{grid-template-columns:1.15fr 1fr;min-height:620px;gap:40px}
 .vivid-theme .hero h1{font-size:clamp(64px,5.1vw,82px);line-height:1.02;letter-spacing:-3.5px}
 .vivid-theme .hero-actions{align-items:flex-start;flex-direction:column;gap:16px}
 .vivid-theme .hero-actions .tour-button{padding-left:0}
 .vivid-theme .hero-art .photo-frame{inset:20px 30px 30px 10px}
 .vivid-theme .studio-teacher-inset{right:-8px;top:0}
 .vivid-theme .scene-phrase{left:-20px;bottom:8px;width:220px}
 .vivid-theme .scene-test{right:-8px;bottom:0}
}
@media(max-width:680px){
 .vivid-theme .scene-phrase{padding:16px;width:165px}
 .vivid-theme .scene-phrase p{font-size:17px}
 .vivid-theme .scene-test{min-height:84px;max-width:185px;padding:14px}
 .vivid-theme .scene-test strong{font-size:15px}
 .vivid-theme .scene-test small{font-size:10px}
 .vivid-theme .scene-ring{width:32px;height:32px;font-size:13px}
 .vivid-theme .how-card h3{font-size:30px}
}

/* Large type, three clear accents and visual steps. */
.vivid-theme h1,.vivid-theme h2,.vivid-theme h3{font-weight:800}
.vivid-theme .hero h1{font-weight:850}
.vivid-theme .studio-how{background:#fff;border:0;padding:80px 0 72px;margin:0}
.vivid-theme .studio-section-heading .eyebrow{display:none}
.vivid-theme .studio-section-heading h2{font-size:clamp(38px,4.4vw,66px);font-weight:850;line-height:1.08;letter-spacing:-2.8px;margin:0}
.vivid-theme .studio-section-heading{margin-bottom:42px}
.vivid-theme .how-grid{gap:16px}
.vivid-theme .how-card{padding:30px 28px 18px;border:1px solid #28252d;border-radius:4px;background:#fff}
.vivid-theme .how-card .step-index{border-radius:4px;color:#17151b;font-size:29px;font-weight:850;width:42px;height:42px;margin-bottom:22px}
.vivid-theme .how-card .step-1{background:#81e2d3}
.vivid-theme .how-card .step-2{background:#ffe34d}
.vivid-theme .how-card .step-3{background:#3884ff;color:#fff}
.vivid-theme .how-card h3{font-size:clamp(29px,2.8vw,42px);font-weight:850;line-height:1.06;letter-spacing:-1.5px;min-height:88px;margin-bottom:18px}
.vivid-theme .how-card>p{font-size:16px;line-height:1.55;color:#28252d;min-height:100px}
.vivid-theme .how-plan,.vivid-theme .how-routine,.how-call{height:265px;margin:26px 0 12px;border-radius:10px;border:1px solid #d6cfd6}
.vivid-theme .how-plan{background:#f6f4fa;padding:22px}
.vivid-theme .how-plan>div{background:#fff;border:1px solid #ddd6e0;border-radius:7px;padding:11px 14px;margin-bottom:8px}
.vivid-theme .how-plan figcaption{font-size:10px;color:#56515e;margin-bottom:12px}
.vivid-theme .how-plan strong{font-size:14px;font-weight:750;color:#17151b}
.vivid-theme .how-plan span{font-size:11px;color:#66616c}
.how-call{position:relative;overflow:hidden;background:#e6f4f0}
.how-call>img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.call-badge{position:absolute;left:14px;top:14px;background:#fff;padding:6px 10px;border-radius:5px;font-size:12px;font-weight:700}
.how-call figcaption{position:absolute;bottom:10px;left:10px;background:#ffffffed;padding:4px 7px;font-size:9px;border-radius:3px}
.call-controls{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.call-controls i{font-style:normal;display:grid;place-items:center;background:#17151bd9;color:#fff;width:32px;height:32px;border-radius:50%;font-size:13px}
.call-controls i:last-child{background:#D95D39}
.vivid-theme .how-routine{background:#edf6ff;padding:22px}
.vivid-theme .how-routine>small{font-size:11px;color:#384b61}
.vivid-theme .how-routine>div{border:0;background:#fff;border-radius:8px;margin-top:10px;padding:13px 12px;gap:13px}
.vivid-theme .how-routine>div>span{background:#dceaff;border-radius:50%;padding:6px;color:#1e5a9f;font-weight:700}
.vivid-theme .how-routine strong{font-size:14px;font-weight:750;color:#17151b}
.vivid-theme .how-routine>p{display:none}
.vivid-theme .how-card>.text-link{font-size:14px;font-weight:700}
.conversation-band{width:100%;background:#F4845F;text-align:center;padding:90px 0;margin:0 0 80px;color:#17151b}
.conversation-band h2{font-size:clamp(40px,5.6vw,84px);font-weight:850!important;line-height:1.06;letter-spacing:-3px;margin:0 auto 28px;max-width:1300px}
.conversation-band p{font-size:20px;line-height:1.5;margin:0}
.vivid-theme .section-heading h2,.vivid-theme .teach-panel-feature h2{font-weight:850}
@media(max-width:1000px) and (min-width:681px){.vivid-theme .how-card{padding:24px 18px 16px}.vivid-theme .how-card h3{font-size:29px;min-height:92px}.vivid-theme .how-card>p{min-height:150px}.vivid-theme .how-plan,.vivid-theme .how-routine{padding:12px}.vivid-theme .how-plan strong,.vivid-theme .how-routine strong{font-size:12px}}
@media(max-width:680px){.vivid-theme .studio-how{padding:52px 0}.vivid-theme .studio-section-heading{margin-bottom:28px}.vivid-theme .how-card{padding:26px 24px 16px}.vivid-theme .how-card h3{font-size:36px;min-height:0}.vivid-theme .how-card>p{min-height:0}.conversation-band{padding:64px 0;margin-bottom:48px}.conversation-band h2{letter-spacing:-1.8px;font-size:44px}.conversation-band p{font-size:17px}}
@media(max-width:680px){
 .vivid-theme .how-card{display:flex;flex-direction:column}
 .vivid-theme .how-card .step-index{width:42px;height:42px;font-size:29px;margin-bottom:22px}
 .vivid-theme .how-card .how-plan,.vivid-theme .how-card .how-routine{display:block;width:100%}
 .vivid-theme .how-card .how-call{display:block;width:100%;flex-shrink:0}
 .vivid-theme .how-card>.text-link{margin-top:0;font-size:14px}
}
@media(max-width:680px){.vivid-theme .how-card .how-plan,.vivid-theme .how-card .how-routine{height:auto;min-height:265px}.vivid-theme .how-card .how-plan>div:last-child{margin-bottom:0}}

/* ==========================================================================
   WARM CORAL / TERRACOTTA VISUAL SYSTEM FOR SPEEKSET
   ========================================================================== */
:root {
 --preply-pink: #F4845F;
 --preply-pink-soft: #FFE4DA;
 --preply-mint: #8ce0c9;
 --preply-yellow: #ffe34d;
 --preply-blue: #4f7df3;
 --preply-ink: #121117;
}

/* Remove italic serif fallback in headings for pure Preply geometric display */
.vivid-theme h1 em,
.vivid-theme h2 em,
.vivid-theme h3 em {
 font-style: normal !important;
 font-family: var(--display) !important;
 font-weight: 850 !important;
}

/* Top announcement bar & Preply pink header/hero backdrop */
.vivid-theme .recruit-banner {
 background: var(--preply-ink);
 color: #fff;
 font-size: 13px;
 font-weight: 600;
 padding: 10px 16px;
}
.vivid-theme .site-header,
.vivid-theme .hero {
 background-color: var(--preply-pink);
}
body.vivid-theme {
 background: linear-gradient(180deg, var(--preply-pink) 0%, var(--preply-pink) 680px, #ffffff 680px);
}
.vivid-theme .site-header {
 max-width: 100%;
 padding-inline: max(24px, calc((100vw - 1240px) / 2));
 border-bottom: 0;
}
.vivid-theme .hero {
 max-width: 100%;
 padding-inline: max(24px, calc((100vw - 1240px) / 2));
 background: var(--preply-pink);
}
@media(min-width: 901px) {
 .vivid-theme #navigation {
  margin-left: 32px;
  margin-right: auto;
  gap: 24px;
 }
 .vivid-theme #navigation a {
  font-size: 15px;
  font-weight: 600;
  color: var(--preply-ink);
  text-decoration: none;
 }
 .vivid-theme #navigation a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
 }
}

/* Preply bordered header CTA button ("[ -> Choose a class ]") */
.vivid-theme .site-header .header-cta {
 background: transparent !important;
 color: var(--preply-ink) !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 padding: 0 18px !important;
 min-height: 42px !important;
 font-weight: 700 !important;
 box-shadow: none !important;
}
.vivid-theme .site-header .header-cta:hover {
 background: #12111712 !important;
}
.vivid-theme .site-header .language-switch {
 border: 0;
 background: transparent;
}
.vivid-theme .language-dropdown summary {
 font-size: 14px;
 font-weight: 650;
 color: var(--preply-ink);
}

/* All primary buttons: Preply 8px radius, crisp borders */
.vivid-theme .button {
 border-radius: 8px !important;
 font-weight: 700 !important;
 letter-spacing: -0.2px;
}
.vivid-theme .button-dark {
 background: var(--preply-ink) !important;
 border: 1.5px solid var(--preply-ink) !important;
 color: #fff !important;
}
.vivid-theme .button-dark:hover {
 background: #292733 !important;
}
.vivid-theme .button-outline {
 background: #fff !important;
 border: 1.5px solid var(--preply-ink) !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .button-outline:hover {
 background: var(--preply-pink-soft) !important;
}

/* Hero Eyebrow Pill: Preply Rounded-Rectangle Box Badge + Bold Punchy Left Column */
.vivid-theme .hero .eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 padding: 9px 18px;
 margin: 0 0 22px;
 background: transparent;
 border: 2px solid var(--preply-ink);
 border-radius: 10px;
 color: var(--preply-ink);
 font-size: 13px !important;
 font-weight: 850;
 letter-spacing: 0.2px;
 line-height: 1.2;
 max-width: 100%;
}
.vivid-theme .hero .eyebrow .status-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--preply-ink);
 flex-shrink: 0;
}
.vivid-theme .hero h1 {
 margin-block: 4px 28px !important;
 font-size: clamp(54px, 5vw, 76px) !important;
 font-weight: 850 !important;
 line-height: 1.02 !important;
 letter-spacing: -3.4px !important;
 color: var(--preply-ink);
}
/* Cut unnecessary text in Hero so bold headline + CTA command attention like Preply */
.vivid-theme .hero-description,
.vivid-theme .hero-note {
 display: none !important;
}
.vivid-theme .hero-actions {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(236px, 1fr)) !important;
 align-items: stretch !important;
 gap: 14px !important;
 max-width: 530px;
}
.vivid-theme .hero-actions .button {
 min-height: 60px !important;
 min-width: 0 !important;
 width: 100% !important;
 padding: 0 22px !important;
 justify-content: center !important;
 gap: 10px !important;
 font-size: 16px !important;
 font-weight: 800 !important;
 border-radius: 12px !important;
 border: 2px solid var(--preply-ink) !important;
 box-shadow: 0 4px 0 #00000038 !important;
 transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease !important;
}
.vivid-theme .hero-actions .button:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 6px 0 #00000045 !important;
}
.vivid-theme .hero-actions .tour-button {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 text-align: center !important;
 gap: 9px !important;
 padding: 0 20px !important;
 min-height: 60px !important;
 width: 100% !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 12px !important;
 background: #ffffff !important;
 color: var(--preply-ink) !important;
 font-size: 15.5px !important;
 font-weight: 800 !important;
 box-shadow: 0 4px 0 var(--preply-ink) !important;
 cursor: pointer;
 transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease !important;
}
.vivid-theme .hero-actions .tour-button:hover {
 background: #FFF0EB !important;
 transform: translateY(-2px) !important;
 box-shadow: 0 6px 0 var(--preply-ink) !important;
}
@media(max-width: 680px) {
 .vivid-theme .hero-actions {
  grid-template-columns: 1fr !important;
  max-width: 100%;
 }
}

/* Hero Right: Preply Centered Learner Frame + Top-Right Tutor PIP + Borderless White Gauge & Speaking Time Cards */
.vivid-theme .hero-art .photo-frame {
 inset: 22px 44px 36px 24px !important;
 border-radius: 14px !important;
 border: 0 !important;
 background: #e6e7e9 !important;
 box-shadow: none !important;
 transform: none !important;
 overflow: hidden;
}
.vivid-theme .hero-art .photo-frame img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 object-position: 48% 18% !important;
 transform: none !important;
}
.vivid-theme .scene-role {
 top: 14px !important;
 left: 16px !important;
 bottom: auto !important;
 background: #1211177a !important;
 backdrop-filter: blur(4px);
 color: #fff !important;
 border: 0 !important;
 border-radius: 6px !important;
 padding: 4px 10px !important;
 font-size: 12px !important;
 font-weight: 750 !important;
 box-shadow: none !important;
}
.vivid-theme .studio-teacher-inset {
 width: 156px !important;
 height: 184px !important;
 right: -10px !important;
 top: -8px !important;
 bottom: auto !important;
 border-radius: 12px !important;
 border: 0 !important;
 background: #ede5d8 !important;
 box-shadow: 0 12px 28px #12111726 !important;
 transform: none !important;
 overflow: hidden;
}
.vivid-theme .studio-teacher-inset img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 object-position: 50% 16% !important;
}
.vivid-theme .studio-teacher-inset > span {
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 bottom: auto !important;
 width: 100% !important;
 height: auto !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 background: linear-gradient(180deg, rgba(18, 17, 23, 0.58) 0%, rgba(18, 17, 23, 0) 100%) !important;
 color: #fff !important;
 border-radius: 0 !important;
 padding: 8px 11px 14px !important;
 font-size: 12px !important;
 font-weight: 700 !important;
}
.vivid-theme .studio-teacher-inset > span b {
 font-weight: 750;
}
.vivid-theme .studio-teacher-inset .call-ui-icons {
 width: 34px;
 height: 13px;
 color: #fff;
 flex-shrink: 0;
}

/* Preply Bottom-Left White Semi-Circular Gauge Card */
.vivid-theme .scene-phrase.preply-gauge-card {
 border: 0 !important;
 border-radius: 12px !important;
 background: #ffffff !important;
 box-shadow: 0 14px 34px #12111722 !important;
 padding: 16px 20px !important;
 width: 230px !important;
 left: -24px !important;
 bottom: 18px !important;
 transform: none !important;
 text-align: left;
 cursor: pointer;
 transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.vivid-theme .scene-phrase.preply-gauge-card:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 18px 40px #12111730 !important;
}
.vivid-theme .preply-gauge-card .gauge-card-top {
 display: flex !important;
 align-items: center;
 gap: 8px;
 margin-bottom: 12px;
}
.vivid-theme .preply-gauge-card .gauge-card-top svg {
 width: 18px;
 height: 18px;
 stroke: var(--preply-ink);
 flex-shrink: 0;
}
.vivid-theme .preply-gauge-card .gauge-card-top strong {
 display: block !important;
 background: transparent !important;
 color: var(--preply-ink) !important;
 font-size: 14px !important;
 font-weight: 800 !important;
 padding: 0 !important;
 margin: 0 !important;
 letter-spacing: -0.2px;
}
.vivid-theme .preply-gauge-card .gauge-card-bottom {
 display: flex !important;
 align-items: flex-end;
 justify-content: space-between;
 gap: 8px;
}
.vivid-theme .preply-gauge-card .gauge-big-num {
 font-family: var(--display);
 font-size: 40px;
 font-weight: 850;
 line-height: 0.92;
 letter-spacing: -2px;
 color: var(--preply-ink);
}
.vivid-theme .preply-gauge-card .preply-gauge-arc {
 width: 108px;
 height: 54px;
 overflow: visible;
 flex-shrink: 0;
}

/* Preply Bottom-Right White Speaking Time Card */
.vivid-theme .scene-test.preply-speaking-card {
 border: 0 !important;
 border-radius: 12px !important;
 background: #ffffff !important;
 box-shadow: 0 14px 34px #12111722 !important;
 padding: 16px 18px !important;
 width: 234px !important;
 max-width: 234px !important;
 min-height: 0 !important;
 right: -16px !important;
 bottom: -6px !important;
 transform: none !important;
 display: grid !important;
 gap: 7px !important;
 cursor: pointer;
}
.vivid-theme .preply-speaking-card .speaking-title {
 display: block !important;
 font-size: 14px !important;
 font-weight: 800 !important;
 color: var(--preply-ink) !important;
 margin: 0 0 2px !important;
 letter-spacing: -0.2px;
}
.vivid-theme .preply-speaking-card .speaking-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 background: #f4f3f6;
 border-radius: 6px;
 height: 28px;
 padding-right: 9px;
 overflow: hidden;
}
.vivid-theme .preply-speaking-card .speaking-pill {
 display: inline-flex;
 align-items: center;
 height: 100%;
 padding: 0 10px;
 border-radius: 6px;
 font-size: 11px;
 font-weight: 750;
 color: var(--preply-ink);
}
.vivid-theme .preply-speaking-card .speaking-pill-learner {
 width: 62%;
 background: var(--preply-pink);
}
.vivid-theme .preply-speaking-card .speaking-pill-tutor {
 width: 34%;
 background: #d5d4dc;
}
.vivid-theme .preply-speaking-card .speaking-arrow {
 font-size: 13px;
 font-weight: 800;
 color: var(--preply-ink);
 margin-left: auto;
 margin-right: 6px;
}
.vivid-theme .preply-speaking-card small {
 font-size: 11px !important;
 font-weight: 600 !important;
 color: #3a3742 !important;
 margin: 0 !important;
}

/* 4-Column White Stats Bar below Hero */
.vivid-theme .preply-stats-bar {
 background: #fff;
 border-top: 0;
 border-bottom: 1px solid #e6e2ea;
 padding: 34px 0;
 margin-bottom: 48px;
 display: block;
}
.vivid-theme .preply-stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 text-align: center;
 margin-bottom: 0;
}
.vivid-theme .preply-stat-item strong {
 display: block;
 font-family: var(--display);
 font-size: clamp(24px, 2.6vw, 34px);
 font-weight: 850;
 letter-spacing: -1.2px;
 color: var(--preply-ink);
 margin-bottom: 4px;
}
.vivid-theme .preply-stat-item span {
 font-size: 14px;
 font-weight: 500;
 color: #4a4752;
}
.vivid-theme .preply-stats-bar .course-summary {
 text-align: center;
 opacity: 0.78;
 font-size: 12px;
}
@media(max-width: 720px) {
 .vivid-theme .preply-stats-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
 }
}

/* Pricing Plans Cards: Crisp Borders */
.vivid-theme .plans-grid .plan-card {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 background: #fff;
 box-shadow: none;
}
.vivid-theme .plans-grid .plan-featured {
 background: #FFF6F3 !important;
 border: 2px solid var(--preply-ink) !important;
 box-shadow: 6px 6px 0 var(--preply-pink) !important;
}
.vivid-theme .plan-featured .plan-label {
 display: inline-block;
 background: var(--preply-pink);
 color: var(--preply-ink);
 padding: 4px 10px;
 border-radius: 4px;
 font-weight: 800;
}

/* How Speekset Works: 3-Step Visual Cards */
.vivid-theme .how-card {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 6px !important;
 padding: 28px 26px 20px !important;
}
.vivid-theme .how-card .step-index {
 border-radius: 4px !important;
 width: 40px !important;
 height: 40px !important;
 font-size: 24px !important;
 font-weight: 850 !important;
}
.vivid-theme .how-card .step-1 { background: #8ce0c9 !important; color: var(--preply-ink) !important; }
.vivid-theme .how-card .step-2 { background: #ffe34d !important; color: var(--preply-ink) !important; }
.vivid-theme .how-card .step-3 { background: #4f7df3 !important; color: var(--preply-ink) !important; }

/* Step 1: Cascading Stacked Class Cards */
.vivid-theme .preply-cascade-stack {
 background: transparent !important;
 border: 0 !important;
 padding: 4px 0 0 !important;
 height: 265px !important;
 display: flex !important;
 flex-direction: column;
 gap: 0;
 overflow: hidden;
}
.vivid-theme .cascade-card {
 display: grid;
 grid-template-columns: 58px 1fr;
 gap: 12px;
 align-items: center;
 background: #fff !important;
 border: 1px solid #d5d0da !important;
 border-radius: 10px !important;
 padding: 11px 13px !important;
 box-shadow: 0 6px 18px #1211170f;
 margin: 0 !important;
}
.vivid-theme .cascade-card-1 {
 z-index: 3;
 width: 92%;
}
.vivid-theme .cascade-card-2 {
 z-index: 2;
 width: 92%;
 margin-left: 16px !important;
 margin-top: -6px !important;
}
.vivid-theme .cascade-card-3 {
 z-index: 1;
 width: 90%;
 margin-left: 32px !important;
 margin-top: -6px !important;
}
.vivid-theme .cascade-card img {
 width: 58px;
 height: 58px;
 border-radius: 6px;
 object-fit: cover;
}
.vivid-theme .cascade-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 margin-bottom: 3px;
}
.vivid-theme .cascade-top strong {
 font-size: 14px !important;
 font-weight: 800 !important;
 color: var(--preply-ink);
}
.vivid-theme .cascade-badge {
 font-size: 12px !important;
 font-weight: 800 !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .cascade-info p {
 display: flex;
 align-items: center;
 gap: 6px;
 margin: 2px 0 0 !important;
 font-size: 11.5px !important;
 line-height: 1.35 !important;
 color: #4a4752 !important;
 min-height: 0 !important;
}
.vivid-theme .preply-mini-icon {
 width: 14px;
 height: 14px;
 flex-shrink: 0;
 fill: none;
 stroke: #4a4752;
 stroke-width: 1.8;
}

/* Step 2: Split Video-Call Frame */
.vivid-theme .preply-split-call {
 position: relative;
 height: 265px !important;
 background: #e5e0d8 !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 overflow: hidden;
}
.vivid-theme .preply-split-call .call-main-img {
 width: 78%;
 height: 100%;
 object-fit: cover;
 object-position: 48% 24%;
}
.vivid-theme .preply-split-call .call-inset-box {
 position: absolute;
 right: 10px;
 top: 14px;
 width: 42%;
 height: 74%;
 border: 1.5px solid var(--preply-ink);
 border-radius: 8px;
 overflow: hidden;
 background: #d8e2ec;
 box-shadow: 0 8px 20px #12111722;
}
.vivid-theme .preply-split-call .call-inset-box img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 52% 28%;
}

/* Step 3: Clean Triple-Echo Slice Photo Frame (No Ugly Pill Tags Below) */
/* Step 3: Single Crisp Full-Width Photo Frame (No Lagging Cut-Off Slices) */
.vivid-theme .preply-single-visual {
 position: relative;
 background: #eae5dc !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 padding: 0 !important;
 height: 265px !important;
 margin: 26px 0 12px !important;
 overflow: hidden !important;
 display: block !important;
}
.vivid-theme .preply-single-visual img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 24%;
}

/* Full-Width Pink Banner Below "How Speekset Works" (Refined Balanced Weight) */
.conversation-band {
 background: var(--preply-pink) !important;
 padding: 78px 0 !important;
 margin: 0 0 72px !important;
}
.conversation-band h2,
.conversation-band h2 em {
 font-size: clamp(38px, 4.8vw, 70px) !important;
 font-weight: 720 !important;
 -webkit-text-stroke: 0 !important;
 line-height: 1.08 !important;
 letter-spacing: -2.1px !important;
 margin: 0 auto !important;
 color: var(--preply-ink) !important;
}

/* "Match With Your Personal Teacher" Split Section (#teachers) — Matching Preply Reference */
.vivid-theme .preply-match-section {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 align-items: center;
 padding-block: 36px 84px;
}
.vivid-theme .preply-match-section .teacher-conversation {
 background: transparent !important;
 color: var(--preply-ink) !important;
 padding: 0 !important;
 border: 0 !important;
 border-radius: 0 !important;
}
.vivid-theme .preply-match-collage {
 display: block;
}
.vivid-theme .match-main-photo {
 position: relative;
 border-radius: 20px;
 border: 0;
 overflow: hidden;
 height: 470px;
 background: #ece5dc;
 box-shadow: 0 16px 40px #12111717;
}
.vivid-theme .match-main-photo > img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 38% 18% !important;
}
.vivid-theme .match-learner-inset {
 position: absolute;
 top: 18px;
 right: 18px;
 width: 152px;
 height: 164px;
 border-radius: 14px;
 border: 2.5px solid #fff;
 background: #e8e6e2;
 overflow: hidden;
 box-shadow: 0 12px 26px #12111726;
}
.vivid-theme .match-learner-inset img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 48% 24%;
}
.vivid-theme .match-learner-inset .online-dot {
 position: absolute;
 top: 10px;
 left: 10px;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #1f9d68;
 box-shadow: 0 0 0 2px #fff;
}
.vivid-theme .match-learner-inset small {
 position: absolute;
 right: 8px;
 bottom: 8px;
 background: #fff;
 color: var(--preply-ink);
 font-size: 11px;
 font-weight: 800;
 padding: 3px 9px;
 border-radius: 6px;
}
.vivid-theme .match-floating-card {
 position: absolute;
 left: 18px;
 bottom: 18px;
 right: auto;
 min-width: 288px;
 max-width: calc(100% - 36px);
 background: #fff;
 border: 0;
 border-radius: 14px;
 padding: 13px 16px;
 display: grid;
 grid-template-columns: 48px 1fr;
 gap: 12px;
 align-items: center;
 box-shadow: 0 12px 30px #12111729;
}
.vivid-theme .match-badge-icon {
 width: 48px;
 height: 48px;
 border-radius: 10px;
 background: var(--preply-pink);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 line-height: 1.05;
 color: var(--preply-ink);
}
.vivid-theme .match-badge-icon span {
 font-size: 12px;
 font-weight: 850;
}
.vivid-theme .match-badge-icon strong {
 font-family: var(--display);
 font-size: 15px;
 font-weight: 850;
}
.vivid-theme .match-card-head {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 3px;
}
.vivid-theme .match-card-head strong {
 font-size: 17px;
 font-weight: 850;
 color: var(--preply-ink);
 letter-spacing: -0.3px;
}
.vivid-theme .super-pill {
 background: #FFE4DA;
 color: #8C3419;
 font-size: 10.5px;
 font-weight: 800;
 padding: 3px 8px;
 border-radius: 5px;
}
.vivid-theme .match-card-sub {
 margin: 0;
 font-size: 12.5px;
 font-weight: 600;
 color: #4a4752;
}
.vivid-theme .preply-match-copy .eyebrow,
.vivid-theme .preply-match-copy .contact-note {
 display: none !important;
}
.vivid-theme .preply-match-copy .preply-mini-brand {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--display);
 font-size: 28px;
 font-weight: 850;
 letter-spacing: -1.4px;
 color: var(--preply-ink);
 margin-bottom: 16px;
}
.vivid-theme .preply-match-copy .preply-mini-brand .brand-mark {
 transform: scale(0.88);
 transform-origin: left center;
}
.vivid-theme .preply-match-copy h2 {
 font-size: clamp(40px, 4.2vw, 56px) !important;
 font-weight: 850 !important;
 line-height: 1.05 !important;
 letter-spacing: -2.4px !important;
 margin: 0 0 18px !important;
}
.vivid-theme .preply-match-copy h2 em {
 color: #B84A27 !important;
}
.vivid-theme .preply-match-copy .teacher-description {
 font-size: 17px !important;
 font-weight: 600 !important;
 line-height: 1.55 !important;
 color: #221f29 !important;
 margin: 0 0 22px !important;
}
.vivid-theme .preply-match-copy .teacher-benefits {
 margin: 0 0 26px !important;
 gap: 12px !important;
}
.vivid-theme .preply-match-copy .teacher-benefits li {
 font-size: 15px !important;
 font-weight: 750 !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .preply-match-copy .teacher-benefits li > span:first-child {
 background: #FFE4DA !important;
 color: var(--preply-ink) !important;
 width: 24px !important;
 height: 24px !important;
 border-radius: 6px !important;
}
.vivid-theme .preply-pink-cta {
 width: 100%;
 justify-content: center !important;
 gap: 10px;
 background: var(--preply-pink) !important;
 color: var(--preply-ink) !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 min-height: 56px;
 font-size: 16px;
 font-weight: 800 !important;
 margin-top: 8px;
}
.vivid-theme .preply-pink-cta:hover {
 background: #F79B7C !important;
}
@media(max-width: 860px) {
 .vivid-theme .preply-match-section {
  grid-template-columns: 1fr;
  gap: 32px;
 }
}

/* "Teach with Speekset" Split Mint-Green Card (#teach) — Clean Single Portrait Frame */
.vivid-theme .teach-panel-feature.preply-tutor-banner {
 grid-template-columns: 1fr 1fr !important;
 background: var(--preply-mint) !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 12px !important;
 overflow: hidden;
 color: var(--preply-ink) !important;
}
.vivid-theme .preply-tutor-banner .preply-recruit-single {
 position: relative;
 background: #ebe7e0;
 min-height: 510px;
 margin: 0;
 overflow: hidden;
}
.vivid-theme .preply-recruit-single img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 25%;
}
.vivid-theme .preply-tutor-banner .teach-copy {
 padding: 52px 48px !important;
 background: var(--preply-mint) !important;
 color: var(--preply-ink) !important;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.vivid-theme .preply-tutor-banner .eyebrow {
 color: var(--preply-ink) !important;
 opacity: 0.75;
}
.vivid-theme .preply-tutor-banner h2 {
 color: var(--preply-ink) !important;
 font-size: clamp(40px, 4.2vw, 62px) !important;
 font-weight: 850 !important;
 line-height: 1.02 !important;
 letter-spacing: -2.4px !important;
 margin: 8px 0 18px !important;
}
.vivid-theme .preply-tutor-banner .teach-description {
 color: var(--preply-ink) !important;
 font-size: 16px !important;
 line-height: 1.55 !important;
}
.vivid-theme .preply-tutor-banner ul {
 list-style: none !important;
 margin: 22px 0 28px !important;
 padding-left: 0 !important;
}
.vivid-theme .preply-tutor-banner li {
 position: relative;
 padding-left: 22px !important;
 color: var(--preply-ink) !important;
 font-size: 17px !important;
 font-weight: 800 !important;
 line-height: 1.5 !important;
 margin-bottom: 10px !important;
}
.vivid-theme .preply-tutor-banner li::before {
 content: '';
 position: absolute;
 left: 2px;
 top: 0.56em;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--preply-ink) !important;
}
.vivid-theme .preply-tutor-banner .button {
 background: var(--preply-ink) !important;
 color: #fff !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 justify-content: center !important;
 gap: 10px;
 min-height: 54px;
 font-size: 16px;
 font-weight: 700 !important;
}
.vivid-theme .preply-tutor-banner .button:hover {
 background: #282634 !important;
}
.vivid-theme .preply-tutor-banner .teach-platform-link {
 display: block;
 text-align: center;
 margin-top: 18px;
 color: var(--preply-ink);
 font-size: 15px;
 font-weight: 700;
 text-decoration: underline;
 text-underline-offset: 4px;
}
@media(max-width: 760px) {
 .vivid-theme .teach-panel-feature.preply-tutor-banner {
  grid-template-columns: 1fr !important;
 }
 .vivid-theme .preply-tutor-banner .preply-recruit-echo {
  min-height: 320px;
 }
 .vivid-theme .preply-tutor-banner .teach-copy {
  padding: 32px 24px !important;
 }
}

/* Preply-Inspired Expandable FAQ Section ("Your questions.") */
.vivid-theme .faq-section {
 align-items: start;
 gap: 64px;
 margin-bottom: 84px;
}
.vivid-theme .faqs {
 display: grid;
 gap: 12px;
}
.vivid-theme .faqs details {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 background: #fff !important;
 padding: 0 24px !important;
 transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.vivid-theme .faqs details:hover {
 background: #FFF9F7 !important;
}
.vivid-theme .faqs details[open] {
 background: #fff !important;
 box-shadow: 5px 5px 0 var(--preply-pink);
}
.vivid-theme .faqs summary,
.vivid-theme .faqs details[open] summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 min-height: 68px !important;
 padding: 18px 48px 18px 0 !important;
 font-family: var(--display);
 font-size: 18px !important;
 font-weight: 750 !important;
 letter-spacing: -0.3px;
 color: var(--preply-ink) !important;
}
.vivid-theme .faqs summary::after {
 content: '+';
 position: absolute;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 32px;
 height: 32px;
 display: grid;
 place-items: center;
 border: 1.5px solid var(--preply-ink);
 border-radius: 8px;
 background: #FFF6F3;
 color: var(--preply-ink);
 font-size: 20px;
 font-weight: 700;
 line-height: 1;
}
.vivid-theme .faqs details[open] summary::after {
 content: '−';
 background: var(--preply-pink);
}
.vivid-theme .faqs details > p {
 padding: 16px 0 22px 0 !important;
 margin: 0 !important;
 border-top: 1px solid #ece5ee;
 font-size: 15px !important;
 line-height: 1.65 !important;
 color: #332f3b !important;
 max-width: 680px !important;
}

/* Hungarian Speakers Entry Card & Interactive Dialog Polish */
.vivid-theme .hungarian-entry {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 padding: 28px 36px !important;
 background: #FFF6F3 !important;
 align-items: center;
}
.vivid-theme dialog {
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
 background: #fff !important;
}
/* ==========================================================================
   BOLD TYPOGRAPHY, LESS FLUFF & INTERACTIVE EXERCISES OVERHAUL
   ========================================================================== */

/* Cut unnecessary secondary filler paragraphs & middle-of-page clutter so the page reads bold & fast like Preply */
.vivid-theme .plans-disclaimer,
.vivid-theme .plan-description,
.vivid-theme .pricing-controls > p,
.vivid-theme .hu-price-note,
.vivid-theme .course-note,
.vivid-theme .closing-section > p:last-of-type,
.vivid-theme .free-practice-heading,
.vivid-theme .level-invitation-action small,
.vivid-theme .moments-section .section-description,
.vivid-theme .preply-match-copy .teacher-description,
.vivid-theme .hungarian-entry,
.vivid-theme .daily-section,
.vivid-theme #navigation a[href="#daily"],
.vivid-theme .certificate-copy .certificate-scope {
 display: none !important;
}

/* Make card & body copy bolder and punchier across all sections */
.vivid-theme .how-card > p {
 font-weight: 650 !important;
 color: #221f29 !important;
 min-height: 0 !important;
 margin-bottom: 18px !important;
}
.vivid-theme .plan-card h3 {
 margin-bottom: 18px !important;
}
.vivid-theme .plan-card ul li {
 font-weight: 700 !important;
 color: var(--preply-ink) !important;
}

/* Free Practice Area Container */
.vivid-theme .free-practice-area {
 background: #fbf9fd !important;
 border-top: 2px solid var(--preply-ink) !important;
 border-bottom: 2px solid var(--preply-ink) !important;
 padding: 68px 0 42px !important;
 margin: 0 0 72px !important;
}
.vivid-theme .free-practice-heading {
 align-items: center !important;
 margin-bottom: 36px !important;
}
.vivid-theme .free-practice-heading h2 {
 font-size: clamp(36px, 4vw, 54px) !important;
 font-weight: 850 !important;
 letter-spacing: -2.2px !important;
 margin: 6px 0 0 !important;
}
.vivid-theme .free-practice-heading .text-link {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 12px 20px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 8px;
 background: #fff;
 font-size: 14px !important;
 font-weight: 800 !important;
 text-decoration: none !important;
 box-shadow: 3px 3px 0 var(--preply-ink);
}
.vivid-theme .free-practice-heading .text-link:hover {
 background: var(--preply-pink-soft);
}

/* Level Check Invitation Card (#level-check) */
.vivid-theme .level-invitation {
 background: var(--preply-yellow) !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
 padding: 36px 40px !important;
 box-shadow: 6px 6px 0 var(--preply-ink) !important;
 align-items: center !important;
 margin-bottom: 64px !important;
}
.vivid-theme .level-invitation h2 {
 font-size: clamp(32px, 3.4vw, 44px) !important;
 font-weight: 850 !important;
 letter-spacing: -1.8px !important;
 margin: 6px 0 10px !important;
}
.vivid-theme .level-invitation-copy > p:last-child {
 font-size: 16px !important;
 font-weight: 650 !important;
 color: var(--preply-ink) !important;
 margin: 0 !important;
}
.vivid-theme .level-invitation-action {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 10px;
}
.vivid-theme .level-invitation-action .button {
 background: var(--preply-ink) !important;
 color: #fff !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 min-height: 56px !important;
 padding: 0 26px !important;
 font-size: 16px !important;
 font-weight: 800 !important;
 width: 100%;
 justify-content: space-between;
}
.vivid-theme .level-invitation-action small {
 font-size: 12px !important;
 font-weight: 750 !important;
 color: var(--preply-ink) !important;
}

/* Short English Exercises Toolbar & Filter Pills (#moments) */
.vivid-theme .moments-section .section-heading {
 margin-bottom: 24px !important;
}
.vivid-theme .lesson-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 16px;
 margin: 0 0 28px !important;
}
.vivid-theme .filters {
 display: flex;
 flex-wrap: wrap;
 gap: 10px !important;
}
.vivid-theme .filters button {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 999px !important;
 padding: 10px 20px !important;
 font-size: 14px !important;
 font-weight: 800 !important;
 background: #fff !important;
 color: var(--preply-ink) !important;
 cursor: pointer;
 transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.vivid-theme .filters button:hover {
 background: #FFF0EB !important;
 transform: translateY(-1px);
}
.vivid-theme .filters button[aria-pressed="true"] {
 background: var(--preply-ink) !important;
 color: #fff !important;
 box-shadow: 3px 3px 0 var(--preply-pink) !important;
}
.vivid-theme .progress-button {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 999px !important;
 padding: 10px 18px !important;
 background: #fff !important;
 font-size: 13px !important;
 font-weight: 800 !important;
 color: var(--preply-ink) !important;
 box-shadow: 3px 3px 0 var(--preply-ink);
}
.vivid-theme .progress-ring {
 width: 18px !important;
 height: 18px !important;
 border: 2px solid var(--preply-ink) !important;
 background: conic-gradient(var(--preply-pink) var(--progress, 0%), #f0ecf4 0) !important;
}

/* The 6 Exercise Cards (.lesson-card) — Bold Preply Studio Cards */
.vivid-theme .lesson-grid {
 gap: 22px !important;
}
.vivid-theme .lesson-card {
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
 background: #fff !important;
 overflow: hidden !important;
 box-shadow: 0 4px 0 var(--preply-ink) !important;
 transition: transform 0.16s ease, box-shadow 0.16s ease !important;
 display: flex !important;
 flex-direction: column !important;
}
.vivid-theme .lesson-card:hover {
 transform: translateY(-4px) !important;
 box-shadow: 6px 6px 0 var(--preply-ink) !important;
}
.vivid-theme .lesson-visual {
 height: 128px !important;
 border-bottom: 1.5px solid var(--preply-ink) !important;
 position: relative !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 background: #FFDAD0 !important;
}
.vivid-theme .lesson-card[data-lesson="cafe"] .lesson-visual,
.vivid-theme .lesson-card:nth-child(6n+1) .lesson-visual { background: #FFDAD0 !important; }
.vivid-theme .lesson-card[data-lesson="meet"] .lesson-visual,
.vivid-theme .lesson-card:nth-child(6n+2) .lesson-visual { background: #b8f2e1 !important; }
.vivid-theme .lesson-card[data-lesson="way"] .lesson-visual,
.vivid-theme .lesson-card:nth-child(6n+3) .lesson-visual { background: #fff099 !important; }
.vivid-theme .lesson-card[data-lesson="plans"] .lesson-visual,
.vivid-theme .lesson-card:nth-child(6n+4) .lesson-visual { background: #d4e2ff !important; }
.vivid-theme .lesson-card[data-lesson="shop"] .lesson-visual,
.vivid-theme .lesson-card:nth-child(6n+5) .lesson-visual { background: #ffe2cc !important; }
.vivid-theme .lesson-card[data-lesson="hotel"] .lesson-visual,
.vivid-theme .lesson-card:nth-child(6n+6) .lesson-visual { background: #eadbff !important; }

.vivid-theme .lesson-number {
 position: absolute !important;
 top: 14px !important;
 left: 14px !important;
 right: auto !important;
 width: 32px !important;
 height: 32px !important;
 display: grid !important;
 place-items: center !important;
 background: #fff !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 8px !important;
 font-family: var(--display) !important;
 font-size: 13px !important;
 font-weight: 850 !important;
 color: var(--preply-ink) !important;
 opacity: 1 !important;
}
.vivid-theme .lesson-tag {
 position: absolute !important;
 top: 14px !important;
 right: 14px !important;
 left: auto !important;
 background: var(--preply-ink) !important;
 color: #fff !important;
 padding: 5px 10px !important;
 border-radius: 999px !important;
 font-size: 10px !important;
 font-weight: 800 !important;
 letter-spacing: 0.5px !important;
}
.vivid-theme .lesson-completed .lesson-tag {
 background: #157a4e !important;
}
.vivid-theme .lesson-visual .scene {
 position: relative !important;
 right: auto !important;
 top: auto !important;
 left: auto !important;
 width: 108px !important;
 height: 88px !important;
 opacity: 1 !important;
 stroke: var(--preply-ink) !important;
 stroke-width: 1.9 !important;
}
.vivid-theme .lesson-content {
 padding: 22px 22px 18px !important;
 display: flex !important;
 flex-direction: column !important;
 flex: 1 !important;
}
.vivid-theme .lesson-content h3 {
 font-size: 23px !important;
 font-weight: 850 !important;
 letter-spacing: -0.7px !important;
 margin: 0 0 6px !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .lesson-content > p {
 font-size: 14px !important;
 font-weight: 600 !important;
 line-height: 1.45 !important;
 color: #45414e !important;
 min-height: 0 !important;
 margin: 0 0 18px !important;
}
.vivid-theme .lesson-meta {
 margin-top: auto !important;
 padding-top: 14px !important;
 border-top: 1.5px solid #ece7f2 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 font-size: 12px !important;
 font-weight: 800 !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .lesson-arrow {
 width: auto !important;
 height: 34px !important;
 padding: 0 13px !important;
 border-radius: 999px !important;
 border: 1.5px solid var(--preply-ink) !important;
 background: var(--preply-pink-soft) !important;
 color: var(--preply-ink) !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 6px !important;
 font-size: 12px !important;
 font-weight: 800 !important;
 transition: background-color 0.15s ease, transform 0.15s ease;
}
.vivid-theme .lesson-arrow b {
 font-weight: 800;
 letter-spacing: -0.1px;
}
.vivid-theme .lesson-arrow svg {
 width: 15px !important;
 height: 15px !important;
 stroke-width: 2.3 !important;
}
.vivid-theme .lesson-card:hover .lesson-arrow {
 background: var(--preply-pink) !important;
 color: var(--preply-ink) !important;
 transform: translateX(2px);
}
.vivid-theme .lesson-completed .lesson-arrow {
 background: var(--preply-mint) !important;
 color: var(--preply-ink) !important;
}

/* Certificate Card (#certificate) & Daily Phrase Flashcard (#daily) */
.vivid-theme .certificate-invitation {
 padding: 36px 40px !important;
 background: #fff !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
 box-shadow: 6px 6px 0 var(--preply-mint) !important;
 display: grid !important;
 grid-template-columns: 1.25fr 0.85fr !important;
 gap: 36px !important;
 align-items: center !important;
 margin-bottom: 52px !important;
}
.vivid-theme .certificate-copy h2 {
 margin: 8px 0 12px !important;
 font-weight: 850 !important;
}
.vivid-theme .certificate-copy p {
 margin: 0 !important;
 font-size: 16px !important;
 font-weight: 600 !important;
 line-height: 1.55 !important;
 color: #221f29 !important;
}
.vivid-theme .certificate-action-card {
 background: #f4fcf9;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
 padding: 22px;
 display: grid;
 gap: 18px;
}
.vivid-theme .cert-mini-preview {
 display: grid;
 gap: 12px;
}
.vivid-theme .cert-mini-head {
 display: flex;
 align-items: center;
 gap: 10px;
}
.vivid-theme .cert-mini-head .brand-mark {
 transform: scale(0.78);
 transform-origin: left center;
}
.vivid-theme .cert-mini-head strong {
 font-family: var(--display);
 font-size: 17px;
 font-weight: 800;
 color: var(--preply-ink);
}
.vivid-theme .certificate-action-card .certificate-progress {
 display: grid !important;
 gap: 8px !important;
 margin: 0 !important;
}
.vivid-theme .certificate-action-card .certificate-progress > span {
 width: 100% !important;
 height: 10px !important;
 border-radius: 999px !important;
 border: 1px solid var(--preply-ink);
 background: linear-gradient(to right, var(--preply-pink) var(--milestone), #fff var(--milestone)) !important;
}
.vivid-theme .certificate-action-card .certificate-progress small {
 font-size: 13px !important;
 font-weight: 700 !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .certificate-action-card .button {
 width: 100%;
 justify-content: space-between;
}
.vivid-theme .daily-card {
 background: #fff !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
 padding: 32px !important;
 box-shadow: 6px 6px 0 var(--preply-pink) !important;
}
.vivid-theme .daily-card .pill {
 background: var(--preply-pink-soft) !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 999px !important;
 padding: 6px 14px !important;
 font-size: 11px !important;
 font-weight: 800 !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .daily-phrase {
 font-weight: 850 !important;
 font-size: clamp(26px, 2.8vw, 34px) !important;
 letter-spacing: -1px !important;
}
.vivid-theme .phrase-pagination .icon-button,
.vivid-theme .daily-card .save-button {
 width: 38px !important;
 height: 38px !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 background: #fff !important;
}
.vivid-theme .phrase-pagination .icon-button:hover,
.vivid-theme .daily-card .save-button:hover {
 background: var(--preply-pink-soft) !important;
}

/* Interactive Exercise & Level Test Modal Dialog Polish (#main-dialog) */
.vivid-theme dialog {
 border: 2px solid var(--preply-ink) !important;
 border-radius: 16px !important;
 background: #fff !important;
 box-shadow: 10px 10px 0 var(--preply-ink) !important;
}
.vivid-theme .modal-close {
 width: 38px !important;
 height: 38px !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 background: #fff !important;
}
.vivid-theme .modal-close:hover {
 background: var(--preply-pink-soft) !important;
}
.vivid-theme .lesson-stage-track span {
 height: 8px !important;
 border-radius: 999px !important;
 background: #ebe6f0 !important;
}
.vivid-theme .lesson-stage-track span.active {
 background: var(--preply-pink) !important;
 border: 1px solid var(--preply-ink);
}
.vivid-theme .question-prompt {
 background: #FFF6F3 !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 12px !important;
 font-family: var(--display) !important;
 font-size: 21px !important;
 font-weight: 800 !important;
 padding: 20px 22px !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .quiz-option {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 padding: 15px 18px !important;
 font-size: 15px !important;
 font-weight: 750 !important;
 background: #fff !important;
 box-shadow: 0 2px 0 var(--preply-ink);
}
.vivid-theme .quiz-option > span {
 width: 28px !important;
 height: 28px !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 7px !important;
 font-size: 12px !important;
 font-weight: 850 !important;
 background: #f6f3f9;
}
.vivid-theme .quiz-option.selected {
 border-color: var(--preply-ink) !important;
 background: #FFE4DA !important;
 box-shadow: 3px 3px 0 var(--preply-ink);
}
.vivid-theme .speak-card {
 background: #f2fcf9 !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 12px !important;
 box-shadow: 5px 5px 0 var(--preply-mint);
}
.vivid-theme .speak-card > p {
 font-family: var(--display) !important;
 font-weight: 850 !important;
}
@media(max-width: 820px) {
 .vivid-theme .certificate-invitation {
  grid-template-columns: 1fr !important;
  padding: 28px 24px !important;
  gap: 24px !important;
 }
}
.vivid-theme .closing-section {
 background: var(--preply-pink) !important;
 color: var(--preply-ink) !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
}
.vivid-theme .closing-section h2,
.vivid-theme .closing-section p,
.vivid-theme .closing-section .eyebrow {
 color: var(--preply-ink) !important;
}

/* Teacher Application Page (.teacher-page) Crisp Styling */
body.vivid-theme.teacher-page {
 background: linear-gradient(180deg, var(--preply-mint) 0%, var(--preply-mint) 620px, #ffffff 620px) !important;
}
.vivid-theme.teacher-page .teacher-header {
 background: transparent;
}
.vivid-theme.teacher-page .teacher-header nav {
 border: 1.5px solid var(--preply-ink);
 background: #ffffff88;
}
.vivid-theme.teacher-page .teacher-hero {
 background: transparent !important;
 border-block: 0 !important;
}
.vivid-theme.teacher-page .teacher-hero figure {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 14px !important;
 overflow: hidden;
}
.vivid-theme.teacher-page #teacher-application,
.vivid-theme.teacher-page #application-preview {
 background: #fff !important;
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 12px !important;
 box-shadow: 6px 6px 0 var(--preply-mint);
}

/* ==========================================================================
   UNIFIED STUDIO THEME, HIGH-CONVERTING ENROLMENT MODAL & SCROLL REVEAL
   ========================================================================== */

/* Unified Card Border, Radius & Tactile Depth Across All Sections */
.vivid-theme .how-card,
.vivid-theme .plans-grid .plan-card,
.vivid-theme .faqs details,
.vivid-theme .teach-panel-feature.preply-tutor-banner,
.vivid-theme .closing-section {
 border: 2px solid var(--preply-ink) !important;
 border-radius: 14px !important;
}
.vivid-theme .how-card {
 box-shadow: 0 4px 0 var(--preply-ink) !important;
 transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.vivid-theme .how-card:hover {
 transform: translateY(-3px) !important;
 box-shadow: 6px 6px 0 var(--preply-ink) !important;
}
.vivid-theme .plans-grid .plan-card {
 box-shadow: 0 4px 0 var(--preply-ink) !important;
 transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.vivid-theme .plans-grid .plan-card:hover {
 transform: translateY(-3px) !important;
 box-shadow: 6px 6px 0 var(--preply-ink) !important;
}
.vivid-theme .plans-grid .plan-featured {
 box-shadow: 6px 6px 0 var(--preply-pink) !important;
}
.vivid-theme .plans-grid .plan-featured:hover {
 transform: translateY(-3px) !important;
 box-shadow: 8px 8px 0 var(--preply-pink) !important;
}
.vivid-theme .match-main-photo {
 border: 2px solid var(--preply-ink) !important;
 border-radius: 16px !important;
 box-shadow: 6px 6px 0 var(--preply-pink) !important;
}
.vivid-theme .match-floating-card {
 border: 1.5px solid var(--preply-ink) !important;
}
.vivid-theme .closing-section {
 box-shadow: 6px 6px 0 var(--preply-ink) !important;
}
.vivid-theme .teach-panel-feature.preply-tutor-banner {
 box-shadow: 6px 6px 0 var(--preply-ink) !important;
}

/* High-Converting Class Customizer & Enrolment Modal (#main-dialog) */
.vivid-theme .result-plans {
 display: grid;
 gap: 10px;
 margin-bottom: 16px;
}
.vivid-theme .result-plan {
 border: 1.5px solid var(--preply-ink) !important;
 border-radius: 12px !important;
 padding: 14px 16px !important;
 background: #fff !important;
 transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.vivid-theme .result-plan.selected {
 background: #FFF0EB !important;
 border: 2px solid var(--preply-ink) !important;
 box-shadow: 4px 4px 0 var(--preply-pink) !important;
}
.vivid-theme .result-plan span strong {
 font-size: 16px !important;
 font-weight: 850 !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .result-per-lesson {
 display: inline-block;
 margin-top: 4px;
 padding: 2px 8px;
 border-radius: 999px;
 background: #f2eef6;
 color: var(--preply-ink) !important;
 font-size: 11.5px !important;
 font-weight: 800 !important;
}
.vivid-theme .result-plan.selected .result-per-lesson {
 background: var(--preply-pink);
}

.vivid-theme .package-details-box {
 background: #fbf9fd;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
 padding: 16px 18px;
 margin: 0 0 16px;
}
.vivid-theme .pkg-box-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 10px;
 padding-bottom: 10px;
 border-bottom: 1px solid #e6e0ec;
}
.vivid-theme .pkg-box-head strong {
 font-size: 13px;
 font-weight: 850;
 text-transform: uppercase;
 letter-spacing: 0.4px;
 color: var(--preply-ink);
}
.vivid-theme .pkg-per-badge {
 background: var(--preply-mint);
 border: 1px solid var(--preply-ink);
 border-radius: 999px;
 padding: 3px 10px;
 font-size: 12px;
 font-weight: 850;
 color: var(--preply-ink);
}
.vivid-theme .pkg-features-list {
 list-style: none;
 margin: 0 0 10px;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 8px 14px;
}
@media(max-width: 580px) {
 .vivid-theme .pkg-features-list {
  grid-template-columns: 1fr;
 }
}
.vivid-theme .pkg-features-list li {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 font-size: 13.5px;
 font-weight: 700;
 line-height: 1.4;
 color: var(--preply-ink);
}
.vivid-theme .pkg-features-list li svg {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
 margin-top: 2px;
 padding: 2px;
 border-radius: 50%;
 background: var(--preply-pink-soft);
 stroke: var(--preply-ink);
 stroke-width: 2.5;
 fill: none;
}
.vivid-theme .pkg-ideal-note {
 margin: 0;
 font-size: 12.5px;
 font-weight: 650;
 color: #4a4554;
}

.vivid-theme .enrol-customizer {
 display: grid;
 gap: 14px;
 margin: 0 0 16px;
 padding: 16px 18px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
 background: #fff;
}
.vivid-theme .enrol-field > label {
 display: block;
 font-size: 12.5px;
 font-weight: 800;
 color: var(--preply-ink);
 margin-bottom: 8px;
}
.vivid-theme .goal-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.vivid-theme .goal-pill {
 border: 1.5px solid var(--preply-ink);
 border-radius: 999px;
 background: #fff;
 color: var(--preply-ink);
 padding: 7px 14px;
 font-size: 13px;
 font-weight: 750;
 cursor: pointer;
 transition: background-color 0.14s ease, transform 0.14s ease;
}
.vivid-theme .goal-pill:hover {
 background: #FFF0EB;
}
.vivid-theme .goal-pill.active {
 background: var(--preply-ink);
 color: #fff;
 box-shadow: 2px 2px 0 var(--preply-pink);
}
.vivid-theme .enrol-row-2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}
@media(max-width: 580px) {
 .vivid-theme .enrol-row-2 {
  grid-template-columns: 1fr;
 }
}
.vivid-theme .enrol-row-2 select,
.vivid-theme .enrol-row-2 input {
 width: 100%;
 min-height: 42px;
 padding: 8px 12px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 8px;
 background: #fbf9fd;
 font: 700 13.5px var(--sans);
 color: var(--preply-ink);
}

.vivid-theme .enrol-steps-box {
 background: #fff9db;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
 padding: 14px 16px;
 margin: 0 0 18px;
}
.vivid-theme .enrol-steps-box > strong {
 display: block;
 font-size: 12.5px;
 font-weight: 850;
 text-transform: uppercase;
 letter-spacing: 0.4px;
 color: var(--preply-ink);
 margin-bottom: 10px;
}
.vivid-theme .enrol-steps-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
@media(max-width: 620px) {
 .vivid-theme .enrol-steps-grid {
  grid-template-columns: 1fr;
 }
}
.vivid-theme .enrol-steps-grid > div {
 display: flex;
 align-items: flex-start;
 gap: 8px;
}
.vivid-theme .enrol-steps-grid > div > span {
 width: 22px;
 height: 22px;
 border-radius: 6px;
 background: var(--preply-ink);
 color: #fff;
 font-size: 12px;
 font-weight: 850;
 display: grid;
 place-items: center;
 flex-shrink: 0;
}
.vivid-theme .enrol-steps-grid > div > p {
 margin: 0;
 font-size: 12px;
 font-weight: 700;
 line-height: 1.38;
 color: var(--preply-ink);
}

.vivid-theme .enrol-cta-stack {
 display: grid;
 gap: 12px;
}
.vivid-theme .preply-whatsapp-cta {
 width: 100%;
 min-height: 56px !important;
 justify-content: center !important;
 gap: 10px !important;
 background: var(--preply-mint) !important;
 color: var(--preply-ink) !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 font-size: 15.5px !important;
 font-weight: 850 !important;
 box-shadow: 0 4px 0 var(--preply-ink) !important;
 text-decoration: none !important;
}
.vivid-theme .preply-whatsapp-cta:hover {
 background: #77d8be !important;
 transform: translateY(-2px);
 box-shadow: 0 6px 0 var(--preply-ink) !important;
}
.vivid-theme .preply-whatsapp-cta svg {
 width: 20px;
 height: 20px;
 fill: none;
 stroke: currentColor;
 stroke-width: 2;
}
.vivid-theme .whop-secondary-wrap {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 padding: 12px 14px;
 border: 1.5px dashed #b9b0c4;
 border-radius: 10px;
 background: #fbf9fd;
}
.vivid-theme .whop-secondary-wrap > span {
 font-size: 12.5px;
 font-weight: 700;
 color: #4a4554;
}
.vivid-theme .whop-secondary-cta {
 min-height: 42px !important;
 padding: 0 16px !important;
 font-size: 13.5px !important;
 font-weight: 800 !important;
 text-decoration: none !important;
}

/* Preply Scroll-Reveal Pop-In Animations */
.reveal-on-scroll {
 opacity: 0;
 transform: translateY(26px) scale(0.985);
 transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
 transition-delay: var(--reveal-delay, 0ms);
 will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
 opacity: 1;
 transform: translateY(0) scale(1);
}
@media(prefers-reduced-motion: reduce) {
 .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
 }
}

/* ==========================================================================
   MOBILE PHONE & DESKTOP BROWSER AUDIT FIXES (390x844 & 1440x900)
   ========================================================================== */

html, body {
 overflow-x: clip;
 max-width: 100%;
}

/* Remove unwanted focus outline on programmatic modal title focus */
.vivid-theme #dialog-title:focus,
.vivid-theme #dialog-title:focus-visible,
.vivid-theme h2[tabindex="-1"]:focus,
.vivid-theme h2[tabindex="-1"]:focus-visible {
 outline: none !important;
}

/* Force 4-Column Stats Bar on Desktop & 2x2 Grid on Mobile */
.vivid-theme .preply-stats-bar {
 display: block !important;
 width: 100% !important;
 max-width: 1240px !important;
 margin-inline: auto !important;
 padding: 32px 24px !important;
}
.vivid-theme .preply-stats-bar > .preply-stats-grid,
.vivid-theme .language-bar.preply-stats-bar > .preply-stats-grid {
 display: grid !important;
 grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
 width: 100% !important;
 gap: 20px !important;
 align-items: start !important;
 text-align: center !important;
}
@media(max-width: 760px) {
 .vivid-theme .preply-stats-bar {
  padding: 24px 20px !important;
  margin-bottom: 28px !important;
 }
 .vivid-theme .preply-stats-bar > .preply-stats-grid,
 .vivid-theme .language-bar.preply-stats-bar > .preply-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 12px !important;
 }
}

/* Ensure Package Modal Checklist Never Shows Double Bullets or Block SVGs */
.vivid-theme #main-dialog .pkg-features-list {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
}
.vivid-theme #main-dialog .pkg-features-list li {
 list-style: none !important;
 display: flex !important;
 align-items: flex-start !important;
 gap: 8px !important;
 margin: 0 !important;
 padding: 0 !important;
}
.vivid-theme #main-dialog .pkg-features-list li::before,
.vivid-theme #main-dialog .pkg-features-list li::marker {
 content: none !important;
 display: none !important;
}
.vivid-theme #main-dialog .pkg-features-list li svg {
 display: inline-block !important;
 width: 18px !important;
 height: 18px !important;
 min-width: 18px !important;
 flex-shrink: 0 !important;
}

/* Mobile & Tablet Hero, Collage, Exercise Cards & Modal Layout (<= 900px & <= 680px) */
@media(max-width: 900px) {
 .vivid-theme .hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px !important;
 }
 .vivid-theme .hero-copy,
 .vivid-theme .studio-hero-art {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
 }
}

@media(max-width: 680px) {
 body.vivid-theme {
  background: linear-gradient(180deg, var(--preply-pink) 0%, var(--preply-pink) 760px, #ffffff 760px) !important;
 }
 .vivid-theme .site-header {
  padding-inline: 18px !important;
  height: 72px !important;
 }
 .vivid-theme .hero {
  padding: 16px 18px 36px !important;
  gap: 22px !important;
 }
 .vivid-theme .hero .eyebrow {
  font-size: 11px !important;
  padding: 7px 12px !important;
  margin-bottom: 14px !important;
 }
 .vivid-theme .hero h1 {
  font-size: clamp(34px, 9.4vw, 46px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.8px !important;
  margin-block: 4px 18px !important;
  overflow-wrap: break-word;
 }
 .vivid-theme .hero-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  max-width: 100% !important;
 }
 .vivid-theme .hero-actions .button,
 .vivid-theme .hero-actions .tour-button {
  min-height: 54px !important;
  font-size: 15px !important;
 }
 .vivid-theme .studio-hero-art {
  height: 350px !important;
  margin: 4px 0 0 !important;
  position: relative !important;
 }
 .vivid-theme .hero-art .photo-frame {
  inset: 10px 6px 32px 6px !important;
 }
 .vivid-theme .studio-teacher-inset {
  width: 106px !important;
  height: 126px !important;
  right: 0px !important;
  top: 0px !important;
 }
 .vivid-theme .studio-teacher-inset > span {
  padding: 6px 8px 10px !important;
  font-size: 11px !important;
 }
 .vivid-theme .studio-teacher-inset .call-ui-icons {
  width: 28px !important;
  height: 11px !important;
 }
 .vivid-theme .scene-phrase.preply-gauge-card {
  width: 150px !important;
  left: 0px !important;
  bottom: 4px !important;
  padding: 10px 12px !important;
 }
 .vivid-theme .preply-gauge-card .gauge-card-top {
  gap: 6px !important;
  margin-bottom: 6px !important;
 }
 .vivid-theme .preply-gauge-card .gauge-card-top svg {
  width: 15px !important;
  height: 15px !important;
 }
 .vivid-theme .preply-gauge-card .gauge-card-top strong {
  font-size: 11.5px !important;
 }
 .vivid-theme .preply-gauge-card .gauge-big-num {
  font-size: 28px !important;
 }
 .vivid-theme .preply-gauge-card .preply-gauge-arc {
  width: 68px !important;
  height: 35px !important;
 }
 .vivid-theme .scene-test.preply-speaking-card {
  width: 170px !important;
  max-width: 170px !important;
  right: 0px !important;
  bottom: 4px !important;
  padding: 10px 11px !important;
  gap: 5px !important;
 }
 .vivid-theme .preply-speaking-card .speaking-title {
  font-size: 11.5px !important;
 }
 .vivid-theme .preply-speaking-card .speaking-row {
  height: 23px !important;
  padding-right: 6px !important;
 }
 .vivid-theme .preply-speaking-card .speaking-pill {
  font-size: 10px !important;
  padding: 0 7px !important;
 }
 .vivid-theme .preply-speaking-card small {
  font-size: 10px !important;
 }

 /* Step 1 Cascading Cards on Phone: Fit cleanly inside .how-card */
 .vivid-theme .cascade-card-1,
 .vivid-theme .cascade-card-2,
 .vivid-theme .cascade-card-3 {
  width: 100% !important;
  margin-left: 0 !important;
 }

 /* #teachers Collage on Phone */
 .vivid-theme .match-main-photo {
  height: 390px !important;
 }
 .vivid-theme .match-learner-inset {
  width: 116px !important;
  height: 126px !important;
  top: 12px !important;
  right: 12px !important;
 }
 .vivid-theme .match-floating-card {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 11px 13px !important;
 }
 .vivid-theme .match-card-head strong {
  font-size: 15px !important;
 }
 .vivid-theme .match-card-sub {
  font-size: 11.5px !important;
 }

 /* 1-Column Exercise Cards on Phone so Footer & "Start ->" Pill Never Clip */
 .vivid-theme .lesson-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
 }
 .vivid-theme .level-invitation {
  padding: 26px 22px !important;
  margin-bottom: 42px !important;
 }

 /* Mobile Modal Sizing */
 .vivid-theme dialog {
  width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: 90dvh !important;
  margin: auto !important;
 }
 .vivid-theme .modal-shell {
  padding: 22px 16px !important;
 }
}

/* ==========================================================================
   PREPLY GET-STARTED SECTION, TUTOR AVATAR CARD & 2-STEP ONBOARDING MODAL
   ========================================================================== */

/* Pink Guarantee Band Subtitle (Preply Screenshot #1) */
.conversation-band h2 {
 margin: 0 auto 14px !important;
}
.conversation-band p {
 font-size: clamp(16px, 1.5vw, 19px) !important;
 font-weight: 500 !important;
 color: var(--preply-ink) !important;
 margin: 0 auto !important;
 max-width: 680px;
}

/* Personal Tutor Section — Matching Preply Screenshot #5 */
.vivid-theme .match-floating-card {
 grid-template-columns: 54px 1fr !important;
 gap: 13px !important;
 padding: 12px 16px !important;
}
.vivid-theme .match-avatar-img {
 width: 54px !important;
 height: 54px !important;
 border-radius: 10px !important;
 object-fit: cover !important;
 object-position: 50% 20% !important;
 display: block !important;
}
.vivid-theme .preply-match-copy h2 {
 font-size: clamp(34px, 3.6vw, 48px) !important;
 font-weight: 850 !important;
 line-height: 1.08 !important;
 letter-spacing: -1.8px !important;
 margin: 0 0 16px !important;
}
.vivid-theme .preply-match-copy h2 em {
 color: #B84A27 !important;
}
.vivid-theme .preply-match-copy .teacher-description {
 display: block !important;
 font-size: 16px !important;
 font-weight: 500 !important;
 line-height: 1.5 !important;
 color: #282530 !important;
 margin: 0 0 24px !important;
}
.vivid-theme .preply-subject-picker {
 margin: 0 0 18px !important;
}
.vivid-theme .preply-subject-picker > label {
 display: block !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 color: var(--preply-ink) !important;
 margin: 0 0 8px !important;
}
.vivid-theme .preply-select-wrap {
 position: relative;
}
.vivid-theme .preply-select-wrap select {
 width: 100%;
 height: 52px;
 padding: 0 42px 0 16px;
 border: 1.5px solid #d1cdd8;
 border-radius: 8px;
 background: #fff;
 font: 600 16px var(--sans);
 color: var(--preply-ink);
 cursor: pointer;
 transition: border-color 0.15s ease;
}
.vivid-theme .preply-select-wrap select:hover,
.vivid-theme .preply-select-wrap select:focus {
 border-color: var(--preply-ink);
 outline: none;
}
.vivid-theme .preply-underlined-link {
 display: block !important;
 width: fit-content !important;
 margin: 18px auto 0 !important;
 padding: 4px 8px !important;
 background: transparent !important;
 border: 0 !important;
 font: 700 15px var(--sans) !important;
 color: var(--preply-ink) !important;
 text-decoration: underline !important;
 text-underline-offset: 4px !important;
 text-align: center !important;
 cursor: pointer;
}
.vivid-theme .preply-underlined-link:hover {
 opacity: 0.75;
}

/* Preply 2-Step Onboarding & Clean Checkout Modal (#main-dialog) */
.vivid-theme .preply-ob-section {
 margin: 0 0 18px;
}
.vivid-theme .preply-ob-label {
 display: block;
 font-size: 13px;
 font-weight: 800;
 color: var(--preply-ink);
 margin: 0 0 8px;
}
.vivid-theme .preply-lang-toggle {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}
.vivid-theme .preply-lang-toggle.compact {
 display: inline-flex;
 gap: 6px;
}
.vivid-theme .preply-lang-btn {
 min-height: 44px;
 padding: 0 18px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 8px;
 background: #fff;
 color: var(--preply-ink);
 font: 800 14px var(--sans);
 cursor: pointer;
 transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.vivid-theme .preply-lang-toggle.compact .preply-lang-btn {
 min-height: 36px;
 padding: 0 14px;
 font-size: 13px;
}
.vivid-theme .preply-lang-btn.active {
 background: var(--preply-ink);
 color: #fff;
 box-shadow: 3px 3px 0 var(--preply-pink);
}
.vivid-theme .preply-goal-cards {
 display: grid;
 gap: 8px;
}
.vivid-theme .preply-goal-card {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 13px 16px;
 border: 1.5px solid #d5d0dc;
 border-radius: 10px;
 background: #fff;
 color: var(--preply-ink);
 font: 750 14.5px var(--sans);
 text-align: left;
 cursor: pointer;
 transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}
.vivid-theme .preply-goal-card:hover {
 border-color: var(--preply-ink);
 background: #FFF6F3;
}
.vivid-theme .preply-goal-card.active {
 border: 2px solid var(--preply-ink);
 background: #FFF0EB;
 box-shadow: 3px 3px 0 var(--preply-pink);
}
.vivid-theme .preply-radio-dot {
 width: 18px;
 height: 18px;
 border-radius: 50%;
 border: 2px solid var(--preply-ink);
 background: #fff;
 flex-shrink: 0;
 position: relative;
}
.vivid-theme .preply-goal-card.active .preply-radio-dot {
 background: var(--preply-ink);
 box-shadow: inset 0 0 0 3px #fff;
}
.vivid-theme .preply-summary-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
 margin: 0 0 16px;
 padding-bottom: 12px;
 border-bottom: 1px solid #ece6f2;
}
.vivid-theme .preply-change-goal {
 font-size: 13px !important;
 font-weight: 750 !important;
 min-height: 36px !important;
}
.vivid-theme .preply-guarantee-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 11px 14px;
 margin: 10px 0 14px;
 background: #FFF0EB;
 border: 1.5px solid var(--preply-ink);
 border-radius: 10px;
 font-size: 13px;
 font-weight: 700;
 color: var(--preply-ink);
}
.vivid-theme .preply-guarantee-bar svg {
 width: 18px;
 height: 18px;
 flex-shrink: 0;
 stroke: var(--preply-ink);
 stroke-width: 2.4;
 fill: none;
}

/* Preply Split-Screen /get-started Interactive Wizard */
.vivid-theme .preply-split-wizard {
 display: grid;
 grid-template-columns: 270px minmax(0, 1fr);
 gap: 0;
 margin: -6px -4px -8px;
 border: 2px solid var(--preply-ink);
 border-radius: 14px;
 overflow: hidden;
 background: #fff;
 min-height: 440px;
}
.vivid-theme .preply-wiz-left {
 background: #FFF0EB;
 border-right: 1.5px solid #EED2C8;
 padding: 22px 20px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 18px;
}
.vivid-theme .preply-wiz-top {
 display: flex;
 align-items: center;
 gap: 10px;
}
.vivid-theme .preply-wiz-back {
 width: 32px;
 height: 32px;
 border-radius: 8px;
 border: 1.5px solid var(--preply-ink);
 background: #fff;
 color: var(--preply-ink);
 font: 800 15px var(--sans);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 flex-shrink: 0;
}
.vivid-theme .preply-wiz-back:hover {
 background: var(--preply-pink);
}
.vivid-theme .preply-wiz-step-badge {
 font: 800 12px var(--sans);
 color: var(--preply-ink);
 background: #fff;
 border: 1.5px solid var(--preply-ink);
 border-radius: 6px;
 padding: 3px 8px;
 flex-shrink: 0;
}
.vivid-theme .preply-wiz-progress {
 flex: 1;
 height: 6px;
 background: #EED2C8;
 border-radius: 99px;
 overflow: hidden;
}
.vivid-theme .preply-wiz-progress > span {
 display: block;
 height: 100%;
 background: var(--preply-ink);
 border-radius: 99px;
 transition: width 0.25s ease;
}
.vivid-theme .preply-wiz-left-body h3 {
 font-family: var(--display);
 font-size: 21px;
 font-weight: 850;
 line-height: 1.15;
 letter-spacing: -0.6px;
 color: var(--preply-ink);
 margin: 0 0 6px;
}
.vivid-theme .preply-wiz-left-body > p {
 font-size: 13px;
 font-weight: 500;
 line-height: 1.45;
 color: #4a4554;
 margin: 0 0 14px;
}
.vivid-theme .preply-live-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 0 0 16px;
}
.vivid-theme .preply-live-pills.compact {
 margin: 0;
}
.vivid-theme .preply-live-pill {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 5px 10px;
 border-radius: 99px;
 background: #fff;
 border: 1.5px solid var(--preply-ink);
 font-size: 12px;
 font-weight: 750;
 color: var(--preply-ink);
}
.vivid-theme .preply-wiz-tutor-mini {
 display: grid;
 grid-template-columns: 44px 1fr;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 background: #fff;
 border: 1.5px solid var(--preply-ink);
 border-radius: 10px;
 box-shadow: 0 4px 12px #1211170f;
}
.vivid-theme .preply-wiz-tutor-mini img {
 width: 44px;
 height: 44px;
 border-radius: 8px;
 object-fit: cover;
 object-position: 50% 20%;
}
.vivid-theme .preply-wiz-tutor-mini strong {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 5px;
 font-size: 13px;
 font-weight: 800;
 color: var(--preply-ink);
}
.vivid-theme .preply-wiz-tutor-mini small {
 display: block;
 font-size: 11px;
 color: #544f5e;
 margin-top: 2px;
}
.vivid-theme .preply-wiz-brand {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font-family: var(--display);
 font-size: 17px;
 font-weight: 850;
 color: var(--preply-ink);
}
.vivid-theme .preply-wiz-brand b {
 color: #B84A27;
}
.vivid-theme .preply-wiz-right {
 padding: 24px 24px 22px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.vivid-theme .preply-ob-lang-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin: 0 0 14px;
 padding-bottom: 10px;
 border-bottom: 1px solid #eee8f3;
 font-size: 12.5px;
 font-weight: 750;
 color: #4c4757;
}
.vivid-theme .preply-wiz-title {
 font-family: var(--display);
 font-size: clamp(22px, 2.4vw, 27px);
 font-weight: 850;
 line-height: 1.12;
 letter-spacing: -0.8px;
 color: var(--preply-ink);
 margin: 0 0 6px;
}
.vivid-theme .preply-wiz-sub {
 font-size: 13.5px;
 color: #524d5c;
 margin: 0 0 16px;
}
.vivid-theme .preply-wiz-cards {
 display: grid;
 gap: 9px;
}
.vivid-theme .preply-wiz-card {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 13px 16px;
 border: 1.5px solid #DCDCE5;
 border-radius: 10px;
 background: #fff;
 color: var(--preply-ink);
 text-align: left;
 cursor: pointer;
 transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.12s ease;
}
.vivid-theme .preply-wiz-card:hover {
 border-color: var(--preply-ink);
 background: #FFF0EB;
 transform: translateY(-1px);
}
.vivid-theme .preply-wiz-card.active {
 border: 2px solid var(--preply-ink);
 background: #FFF0EB;
 box-shadow: 3px 3px 0 var(--preply-pink);
}
.vivid-theme .preply-wiz-card-left {
 display: flex;
 align-items: center;
 gap: 11px;
}
.vivid-theme .preply-wiz-icon {
 font-style: normal;
 font-size: 18px;
 line-height: 1;
}
.vivid-theme .preply-wiz-card strong {
 font: 750 14.5px var(--sans);
 color: var(--preply-ink);
}
.vivid-theme .preply-wiz-chevron {
 font-size: 22px;
 font-weight: 700;
 line-height: 1;
 color: var(--preply-ink);
}
.vivid-theme .preply-time-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
}
.vivid-theme .preply-time-card {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 11px 12px;
 border: 1.5px solid #DCDCE5;
 border-radius: 9px;
 background: #fff;
 color: var(--preply-ink);
 font: 750 13px var(--sans);
 cursor: pointer;
 text-align: left;
}
.vivid-theme .preply-time-card.active {
 border: 2px solid var(--preply-ink);
 background: #FFF0EB;
 box-shadow: 2px 2px 0 var(--preply-pink);
}
.vivid-theme .preply-days-row {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}
.vivid-theme .preply-day-pill {
 min-width: 42px;
 height: 36px;
 padding: 0 10px;
 border: 1.5px solid #DCDCE5;
 border-radius: 8px;
 background: #fff;
 color: var(--preply-ink);
 font: 750 12.5px var(--sans);
 cursor: pointer;
}
.vivid-theme .preply-day-pill.active {
 border-color: var(--preply-ink);
 background: var(--preply-ink);
 color: #fff;
}

/* Preply Animated Tokyo Pink Matcher Screen */
.vivid-theme .preply-matcher-screen {
 background: var(--preply-pink);
 border: 2px solid var(--preply-ink);
 border-radius: 14px;
 padding: 48px 28px;
 text-align: center;
 color: var(--preply-ink);
}
.vivid-theme .preply-matcher-inner {
 max-width: 420px;
 margin: 0 auto;
}
.vivid-theme .preply-matcher-Brand {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font: 850 18px var(--display);
 margin-bottom: 16px;
}
.vivid-theme .preply-matcher-screen h2 {
 font: 850 clamp(24px, 3vw, 32px)/1.12 var(--display);
 letter-spacing: -1px;
 margin: 0 0 18px;
}
.vivid-theme .preply-matcher-bar {
 height: 8px;
 background: #ffffff66;
 border: 1.5px solid var(--preply-ink);
 border-radius: 99px;
 overflow: hidden;
 margin: 0 auto 14px;
 max-width: 280px;
}
.vivid-theme .preply-matcher-bar > span {
 display: block;
 height: 100%;
 width: 100%;
 background: var(--preply-ink);
 animation: preplyMatchFill 0.7s ease-out forwards;
 transform-origin: left;
}
@keyframes preplyMatchFill {
 from { transform: scaleX(0.15); }
 to { transform: scaleX(1); }
}
.vivid-theme .preply-matcher-screen p {
 font: 750 14px var(--sans);
 margin: 0;
}

/* Preply Matched Tutor Card on Recommendation & Booking Screen */
.vivid-theme .preply-matched-tutor-card {
 display: grid;
 grid-template-columns: 60px 1fr;
 align-items: center;
 gap: 14px;
 padding: 13px 16px;
 margin: 0 0 16px;
 background: #FFF0EB;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
}
.vivid-theme .preply-matched-tutor-card img {
 width: 60px;
 height: 60px;
 border-radius: 10px;
 object-fit: cover;
 object-position: 50% 18%;
 border: 1.5px solid var(--preply-ink);
}
.vivid-theme .preply-matched-tutor-head {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 3px;
}
.vivid-theme .preply-matched-tutor-head strong {
 font: 850 16px var(--display);
 color: var(--preply-ink);
}
.vivid-theme .preply-tutor-rating {
 font: 800 13px var(--sans);
 color: var(--preply-ink);
 margin-left: auto;
}
.vivid-theme .preply-tutor-rating small {
 font-weight: 600;
 color: #585263;
}
.vivid-theme .preply-tutor-langs {
 font: 750 12.5px var(--sans);
 color: var(--preply-ink);
 margin: 0 0 2px;
}
.vivid-theme .preply-tutor-bio {
 font: 500 12.5px var(--sans);
 color: #4b4656;
 margin: 0;
}
.vivid-theme .preply-dual-ctas {
 display: grid !important;
 gap: 10px !important;
}
.vivid-theme .preply-wa-secondary {
 width: 100% !important;
 min-height: 50px !important;
 justify-content: center !important;
 background: #ffffff !important;
 color: var(--preply-ink) !important;
 border: 2px solid var(--preply-ink) !important;
 border-radius: 10px !important;
 font: 800 15px var(--sans) !important;
 box-shadow: none !important;
}
.vivid-theme .preply-wa-secondary:hover {
 background: #FFF0EB !important;
}
.vivid-theme .preply-wiz-right .enrol-cta-stack {
 margin-top: 16px;
}
.vivid-theme .preply-wiz-right .preply-pink-cta:disabled {
 background: #F2E8E4 !important;
 color: #7a7482 !important;
 border-color: #CFC3BE !important;
 box-shadow: none !important;
 cursor: not-allowed;
 transform: none !important;
}
.vivid-theme .preply-wiz-card.active .preply-wiz-chevron {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: var(--preply-ink);
 color: #fff;
 font-size: 14px;
}
/* What happens after you book */
.vivid-theme .preply-next-steps {
 margin: 0 0 16px;
 padding: 14px 16px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
 background: #fff;
}
.vivid-theme .preply-next-steps h4 {
 margin: 0 0 10px;
 font: 850 15px var(--display);
 color: var(--preply-ink);
}
.vivid-theme .preply-next-steps ol {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px 14px;
}
.vivid-theme .preply-next-steps li {
 display: grid;
 grid-template-columns: 24px 1fr;
 gap: 9px;
 align-items: start;
}
.vivid-theme .preply-next-steps li > b {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: var(--preply-pink);
 border: 1.5px solid var(--preply-ink);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font: 850 12px var(--sans);
 color: var(--preply-ink);
}
.vivid-theme .preply-next-steps strong {
 display: block;
 font: 800 13px var(--sans);
 color: var(--preply-ink);
}
.vivid-theme .preply-next-steps small {
 display: block;
 font: 500 12px/1.35 var(--sans);
 color: #524d5c;
}
@media (max-width: 560px) {
 .vivid-theme .preply-next-steps ol {
  grid-template-columns: minmax(0, 1fr);
 }
}
@media (max-width: 720px) {
 /* keep the close button clear of the progress bar / headings, and avoid clipped bottom edge */
 .vivid-theme .preply-split-wizard {
  margin: 0;
 }
 .vivid-theme .preply-wiz-top {
  padding-right: 44px;
 }
 .vivid-theme .preply-wiz-right {
  padding-bottom: 26px;
 }
 .vivid-theme dialog .modal-title,
 .vivid-theme dialog .modal-eyebrow {
  padding-right: 44px;
 }
}

@media (max-width: 720px) {
 .vivid-theme .preply-split-wizard {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
 }
 .vivid-theme .preply-wiz-left {
  border-right: 0;
  border-bottom: 1.5px solid #EED2C8;
  padding: 14px 16px;
  gap: 10px;
 }
 .vivid-theme .preply-wiz-left-body > p,
 .vivid-theme .preply-wiz-tutor-mini,
 .vivid-theme .preply-wiz-brand {
  display: none;
 }
 .vivid-theme .preply-wiz-left-body h3 {
  font-size: 16px;
  margin: 0 0 8px;
 }
 .vivid-theme .preply-live-pills {
  margin: 0;
 }
 .vivid-theme .preply-wiz-right {
  padding: 18px 16px;
 }
 .vivid-theme .preply-time-grid {
  grid-template-columns: minmax(0, 1fr);
 }
}

/* ==========================================================================
   STEP 2 & STEP 3 VISUAL OVERLAYS, TUTOR STYLE CHIPS & TEACHER PAGE POLISH
   ========================================================================== */

/* Step 2 Video Call Role Badges (.preply-split-call) */
.vivid-theme .preply-split-call .call-role-pill {
 position: absolute;
 left: 10px;
 bottom: 10px;
 background: #121117b8;
 backdrop-filter: blur(4px);
 color: #fff;
 font: 750 11px var(--sans);
 padding: 4px 9px;
 border-radius: 6px;
}
.vivid-theme .preply-split-call .call-inset-pill {
 position: absolute;
 right: 6px;
 bottom: 6px;
 background: #ffffffeb;
 color: var(--preply-ink);
 font: 800 10px var(--sans);
 padding: 2px 7px;
 border-radius: 5px;
}

/* Step 3 Floating Weekly Progress Card (.preply-single-visual) */
.vivid-theme .preply-single-visual .how-progress-float {
 position: absolute;
 left: 12px;
 right: 12px;
 bottom: 12px;
 background: #fffffffa;
 border: 1.5px solid var(--preply-ink);
 border-radius: 10px;
 padding: 9px 12px;
 display: flex;
 align-items: center;
 gap: 10px;
 box-shadow: 0 8px 20px #12111724;
}
.vivid-theme .how-progress-check {
 width: 26px;
 height: 26px;
 border-radius: 7px;
 background: var(--preply-mint);
 border: 1.5px solid var(--preply-ink);
 color: var(--preply-ink);
 font: 850 13px var(--sans);
 display: grid;
 place-items: center;
 flex-shrink: 0;
}
.vivid-theme .how-progress-float strong {
 display: block;
 font: 800 12.5px var(--sans);
 color: var(--preply-ink);
 line-height: 1.2;
}
.vivid-theme .how-progress-float small {
 display: block;
 font: 600 11px var(--sans);
 color: #4f4a59;
 margin-top: 1px;
}

/* Interactive Summary Pills & Super Tutor / Teaching Style Chips in Booking Modal */
.vivid-theme .preply-pill-btn {
 cursor: pointer;
 transition: background-color 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}
.vivid-theme .preply-pill-btn:hover {
 background: #FFF0EB;
 transform: translateY(-1px);
 box-shadow: 2px 2px 0 var(--preply-pink);
}
.vivid-theme .super-tutor-pill {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 border-radius: 6px;
 background: #ffffff;
 border: 1px solid var(--preply-ink);
 font: 800 10.5px var(--sans);
 color: var(--preply-ink);
}
.vivid-theme .preply-style-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 margin: 5px 0 6px;
}
.vivid-theme .preply-style-chip {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 border-radius: 99px;
 background: #ffffff;
 border: 1px solid #DFCFC8;
 font: 750 11px var(--sans);
 color: var(--preply-ink);
}
.vivid-theme .preply-tutor-quote {
 display: block;
 margin-top: 4px;
 font-style: normal;
 font-weight: 700;
 color: var(--preply-ink);
}
.vivid-theme .saved-level-note {
 margin: 0 0 14px;
 padding: 10px 14px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 10px;
 background: #fff9db;
 font-size: 13px;
}
.vivid-theme .saved-level-note summary {
 cursor: pointer;
 font-weight: 750;
 color: var(--preply-ink);
}
.vivid-theme .saved-level-note p {
 margin: 6px 0 0;
 font-size: 12.5px;
 color: #433e4d;
}

/* Teacher Application Page Process & Benefits Polish (.teacher-page) */
.vivid-theme.teacher-page .teacher-hero-benefits {
 list-style: none;
 padding: 0;
 margin: 18px 0 26px;
 display: grid;
 gap: 8px;
}
.vivid-theme.teacher-page .teacher-hero-benefits li {
 position: relative;
 padding-left: 22px;
 font: 750 15.5px/1.45 var(--sans);
 color: var(--preply-ink);
}
.vivid-theme.teacher-page .teacher-hero-benefits li::before {
 content: '✓';
 position: absolute;
 left: 0;
 top: 0;
 font-weight: 900;
 color: var(--preply-ink);
}
.vivid-theme.teacher-page .teacher-process {
 margin: 28px auto 48px;
}
.vivid-theme.teacher-page .teacher-steps-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
}
.vivid-theme.teacher-page .teacher-step-card {
 background: #fff;
 border: 2px solid var(--preply-ink);
 border-radius: 12px;
 padding: 20px 22px;
 box-shadow: 0 4px 0 var(--preply-ink);
}
.vivid-theme.teacher-page .teacher-step-card .step-index {
 display: inline-grid;
 place-items: center;
 width: 34px;
 height: 34px;
 border-radius: 6px;
 border: 1.5px solid var(--preply-ink);
 font: 850 18px var(--display);
 margin-bottom: 12px;
}
.vivid-theme.teacher-page .teacher-step-card .step-1 { background: #8ce0c9; }
.vivid-theme.teacher-page .teacher-step-card .step-2 { background: #ffe34d; }
.vivid-theme.teacher-page .teacher-step-card .step-3 { background: #4f7df3; color: #fff; }
.vivid-theme.teacher-page .teacher-step-card h3 {
 margin: 0;
 font: 800 18px/1.25 var(--display);
 color: var(--preply-ink);
}
.vivid-theme.teacher-page .teacher-process-note {
 margin: 14px 0 0;
 font-size: 13px;
 color: #4c4756;
}
@media (max-width: 720px) {
 .vivid-theme.teacher-page .teacher-steps-grid {
  grid-template-columns: minmax(0, 1fr);
 }
}

/* Consistent framing for Nikoletta's portrait across all cards & avatars */
.vivid-theme .match-avatar-img,
.vivid-theme .cascade-card-1 img,
.vivid-theme .preply-wiz-tutor-mini img,
.vivid-theme .preply-matched-tutor-card img {
 object-fit: cover !important;
 object-position: center 18% !important;
}

/* Optional Lead First Name input inside checkout / enquiry step */
.vivid-theme .lead-name-field {
 margin-bottom: 12px;
 text-align: left;
}
.vivid-theme .lead-name-field .learning-label {
 display: block;
 font-size: 12.5px;
 font-weight: 700;
 color: #3a3544;
 margin-bottom: 5px;
}
.vivid-theme .lead-name-field .phrase-search {
 width: 100%;
 padding: 10px 12px;
 border: 1.5px solid #d5d0df;
 border-radius: 8px;
 font-size: 14px;
 background: #fff;
}
.vivid-theme .lead-name-field .phrase-search:focus {
 outline: none;
 border-color: var(--preply-ink);
 box-shadow: 0 0 0 2px rgba(244, 132, 95, 0.25);
}

/* ==========================================================================
   V4 HYPER-SCALE: $5 TRIAL TRIPWIRE, ZERO-PHONE LIVE SUPPORT & /BOOKED/ FLOW
   ========================================================================== */

/* Full-width $19 -> $5 1-on-1 Trial Tripwire Banner above .plans-grid */
.vivid-theme .trial-tripwire-banner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 28px;
 background: linear-gradient(135deg, #FFF5F0 0%, #FFE6DC 100%);
 border: 2px solid var(--preply-ink);
 border-radius: 16px;
 padding: 26px 32px;
 margin: 0 0 26px;
 box-shadow: 0 6px 0 var(--preply-ink);
}
.vivid-theme .trial-tripwire-copy {
 max-width: 640px;
}
.vivid-theme .trial-tripwire-badge {
 display: inline-block;
 background: var(--preply-ink);
 color: #fff;
 font-family: var(--display);
 font-size: 11px;
 font-weight: 850;
 letter-spacing: 0.9px;
 text-transform: uppercase;
 padding: 5px 11px;
 border-radius: 999px;
 margin-bottom: 10px;
}
.vivid-theme .trial-tripwire-copy h3 {
 margin: 0 0 8px;
 font-family: var(--display);
 font-size: clamp(24px, 2.6vw, 31px);
 font-weight: 850;
 letter-spacing: -0.9px;
 line-height: 1.15;
 color: var(--preply-ink);
}
.vivid-theme .trial-tripwire-copy p {
 margin: 0;
 font-size: 15px;
 font-weight: 600;
 line-height: 1.5;
 color: #2b2733;
}
.vivid-theme .trial-tripwire-action {
 display: flex;
 align-items: center;
 gap: 22px;
 flex-shrink: 0;
}
.vivid-theme .trial-tripwire-price {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 line-height: 1;
}
.vivid-theme .trial-tripwire-price s {
 font-family: var(--display);
 font-size: 17px;
 font-weight: 750;
 color: #8b8296;
 margin-bottom: 2px;
}
.vivid-theme .trial-tripwire-price strong {
 font-family: var(--display);
 font-size: 46px;
 font-weight: 900;
 letter-spacing: -1.8px;
 color: var(--preply-ink);
}
.vivid-theme .trial-tripwire-price small {
 margin-top: 4px;
 font-size: 12px;
 font-weight: 750;
 color: #4c4657;
}
.vivid-theme .trial-tripwire-action .preply-pink-cta {
 min-height: 56px !important;
 padding: 0 26px !important;
 white-space: nowrap;
}
@media (max-width: 860px) {
 .vivid-theme .trial-tripwire-banner {
  flex-direction: column;
  align-items: stretch;
  padding: 22px 20px;
  gap: 18px;
 }
 .vivid-theme .trial-tripwire-action {
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1.5px solid rgba(18, 17, 23, 0.12);
  padding-top: 16px;
 }
 .vivid-theme .trial-tripwire-price {
  align-items: flex-start;
 }
}

/* Trial option inside modal plan chooser */
.vivid-theme .result-plan-trial {
 background: #FFF7F4 !important;
 border-color: var(--preply-pink) !important;
}
.vivid-theme .result-plan-trial.selected {
 background: #FFEFE8 !important;
 border-color: var(--preply-ink) !important;
 box-shadow: 4px 4px 0 var(--preply-pink) !important;
}
.vivid-theme .result-trial-tag {
 background: var(--preply-pink) !important;
 color: var(--preply-ink) !important;
}
.vivid-theme .trial-strike {
 font-size: 14px;
 font-weight: 700;
 color: #8c8497;
 margin-right: 4px;
}

/* On-Site Inquiry & Trial Reservation Modal Form */
.vivid-theme .inquiry-modal-form {
 display: grid;
 gap: 8px;
 margin-top: 14px;
 text-align: left;
}
.vivid-theme .inquiry-modal-form .learning-label {
 font-size: 13px;
 font-weight: 800;
 color: var(--preply-ink);
 margin-top: 6px;
}
.vivid-theme .inquiry-modal-form .phrase-search {
 width: 100%;
 padding: 12px 14px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 10px;
 font: inherit;
 font-size: 15px;
 background: #fff;
}
.vivid-theme .inquiry-modal-form textarea.phrase-search {
 resize: vertical;
 min-height: 84px;
}

/* Floating On-Site "Ask a question" Pill (Zero Phone Numbers Exposed) */
.vivid-theme .floating-support-pill {
 position: fixed;
 right: 22px;
 bottom: 22px;
 z-index: 45;
 display: inline-flex;
 align-items: center;
 gap: 9px;
 padding: 12px 18px;
 border: 2px solid var(--preply-ink);
 border-radius: 999px;
 background: #fff;
 color: var(--preply-ink);
 font-family: var(--display);
 font-size: 14px;
 font-weight: 800;
 cursor: pointer;
 box-shadow: 0 4px 0 var(--preply-ink), 0 10px 24px rgba(18, 17, 23, 0.14);
 transition: transform 0.15s ease, background-color 0.15s ease;
}
.vivid-theme .floating-support-pill:hover {
 background: #FFF2EC;
 transform: translateY(-2px);
}
.vivid-theme .floating-support-pill .online-dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: #18b26b;
 box-shadow: 0 0 0 3px rgba(24, 178, 107, 0.22);
 flex-shrink: 0;
}
body.modal-open .floating-support-pill {
 display: none !important;
}
@media (max-width: 760px) {
 .vivid-theme .floating-support-pill {
  bottom: 84px;
  right: 14px;
  padding: 10px 14px;
  font-size: 13px;
 }
}

/* Post-Checkout Confirmation & Live Calendar Page (/booked/) + Done Cards */
.vivid-theme .booked-shell {
 padding: 48px 0 88px;
 max-width: 820px;
}
.vivid-theme .booked-card {
 background: #fff;
 border: 2px solid var(--preply-ink);
 border-radius: 18px;
 padding: clamp(24px, 4vw, 44px);
 box-shadow: 0 8px 0 var(--preply-ink);
}
.vivid-theme .booked-badge {
 display: inline-block;
 background: #d6f7e6;
 color: #0b5c36;
 border: 1.5px solid var(--preply-ink);
 border-radius: 999px;
 padding: 6px 14px;
 font-family: var(--display);
 font-size: 12px;
 font-weight: 850;
 letter-spacing: 0.6px;
 margin-bottom: 16px;
}
.vivid-theme .booked-card h1 {
 margin: 0 0 12px;
 font-family: var(--display);
 font-size: clamp(30px, 4vw, 44px);
 font-weight: 850;
 letter-spacing: -1.5px;
 line-height: 1.1;
 color: var(--preply-ink);
}
.vivid-theme .booked-card h1 em {
 font-style: normal;
 background: linear-gradient(transparent 58%, #FFD6C9 58%);
 padding: 0 4px;
}
.vivid-theme .booked-lead {
 margin: 0 0 26px;
 font-size: 16px;
 line-height: 1.55;
 color: #363140;
}
.vivid-theme .booked-cal-embed {
 border: 2px solid var(--preply-ink);
 border-radius: 12px;
 overflow: hidden;
 background: #faf8fc;
}
.vivid-theme .booked-cal-embed iframe {
 width: 100%;
 height: 640px;
 border: 0;
 display: block;
}
.vivid-theme .booked-tutor-row {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 14px 16px;
 background: #FFF6F2;
 border: 1.5px solid var(--preply-ink);
 border-radius: 12px;
 margin-bottom: 20px;
}
.vivid-theme .booked-tutor-row img {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 object-fit: cover;
 object-position: center 18%;
 border: 1.5px solid var(--preply-ink);
}
.vivid-theme .booked-tutor-row strong {
 display: block;
 font-size: 16px;
 color: var(--preply-ink);
}
.vivid-theme .booked-tutor-row small {
 display: block;
 font-size: 13px;
 color: #4f495c;
 margin-top: 2px;
}
.vivid-theme .booked-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px 16px;
 margin-bottom: 20px;
}
.vivid-theme .booked-grid label {
 display: flex;
 flex-direction: column;
 gap: 6px;
 font-size: 13px;
 font-weight: 800;
 color: var(--preply-ink);
}
.vivid-theme .booked-grid .booked-wide {
 grid-column: 1 / -1;
}
.vivid-theme .booked-grid input,
.vivid-theme .booked-grid select {
 padding: 12px 14px;
 border: 1.5px solid var(--preply-ink);
 border-radius: 10px;
 font: inherit;
 font-size: 15px;
 font-weight: 500;
 background: #fff;
}
@media (max-width: 640px) {
 .vivid-theme .booked-grid {
  grid-template-columns: minmax(0, 1fr);
 }
}
.vivid-theme .booked-done {
 margin-top: 16px;
 padding: 26px 24px;
 border: 2px solid var(--preply-ink);
 border-radius: 14px;
 background: #eefbf3;
 text-align: left;
}
.vivid-theme .booked-done h2,
.vivid-theme .booked-done h3 {
 margin: 0 0 8px;
 font-family: var(--display);
 font-size: 24px;
 font-weight: 850;
 color: var(--preply-ink);
}
.vivid-theme .booked-done p {
 margin: 0 0 14px;
 font-size: 15px;
 line-height: 1.55;
 color: #26382f;
}

/* ==========================================================================
   V5 MOBILE PHONE & BROWSER AUDIT PERFECTION (360px / 390px / iOS / Android)
   ========================================================================== */

/* 1. Prevent iOS Safari & Instagram/Facebook In-App Browser Forced Auto-Zoom (<16px inputs) */
.vivid-theme input:not([type="checkbox"]):not([type="radio"]),
.vivid-theme select,
.vivid-theme textarea,
.vivid-theme .inquiry-modal-form .phrase-search,
.vivid-theme .booked-grid input,
.vivid-theme .booked-grid select,
.vivid-theme.teacher-page .application-field input,
.vivid-theme.teacher-page .application-field select,
.vivid-theme.teacher-page .application-field textarea {
 font-size: 16px !important;
}

/* 2. Cohesive Nikoletta Portrait & Verified Seal in #teachers Collage */
.vivid-theme .match-main-photo {
 background: #EFE6D5 !important;
}
.vivid-theme .match-main-photo > img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 object-position: center 12% !important;
}
.vivid-theme .match-floating-card:has(.match-verified-seal) {
 grid-template-columns: 44px 1fr !important;
 align-items: center !important;
}
.vivid-theme .match-verified-seal {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 background: var(--preply-pink);
 border: 1.5px solid var(--preply-ink);
 color: var(--preply-ink);
 display: grid;
 place-items: center;
 font: 900 20px/1 var(--display);
 box-shadow: 2px 2px 0 var(--preply-ink);
}

/* 3. Fix /teach/ Mint Hero Cut-Off & /booked/ Coral Background Cut-Off */
body.vivid-theme.teacher-page {
 background: #ffffff !important;
 padding-bottom: 0 !important;
}
.vivid-theme.teacher-page .teacher-header {
 background: var(--preply-mint) !important;
 max-width: none !important;
 width: 100% !important;
 padding-inline: max(20px, calc((100vw - 1240px) / 2)) !important;
}
.vivid-theme.teacher-page .teacher-hero {
 background: var(--preply-mint) !important;
 border-bottom: 2px solid var(--preply-ink) !important;
 padding-bottom: 44px !important;
}

body.vivid-theme.booked-page {
 background: #FAF6F3 !important;
 padding-bottom: 0 !important;
}
.vivid-theme.booked-page .site-header {
 background: var(--preply-pink) !important;
 max-width: none !important;
 width: 100% !important;
 padding-inline: max(20px, calc((100vw - 1240px) / 2)) !important;
 border-bottom: 2px solid var(--preply-ink) !important;
}

/* 4. Thumb-Friendly Tap Targets (>= 44x44px) Across Mobile Links & Footer */
.vivid-theme .preply-underlined-link,
.vivid-theme .teach-platform-link {
 min-height: 44px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
}
.vivid-theme .footer-langs button,
.vivid-theme .footer-langs a,
.vivid-theme.teacher-page .teacher-footer a {
 min-height: 44px !important;
 min-width: 44px !important;
 padding-inline: 8px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
}

/* 5. Navigation "Ask a question" button (hidden on desktop bar since desktop has floating pill, shown inside mobile menu) */
.vivid-theme #navigation .nav-ask-btn {
 display: none;
}
@media (max-width: 900px) {
 .vivid-theme #navigation.mobile-open .nav-ask-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--preply-pink);
  font: 800 17px var(--display);
  padding: 16px 0 6px;
  text-align: left;
  cursor: pointer;
 }
}

/* 6. Unified Mobile Conversion Dock (Eliminates Floating Pill Overlap on Hero & Cards) */
@media (max-width: 760px) {
 .vivid-theme .floating-support-pill {
  display: none !important;
 }
 body.vivid-theme:not(.teacher-page):not(.booked-page) {
  padding-bottom: 92px !important;
 }
 .vivid-theme.hero-passed .mobile-enquiry {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 45 !important;
  background: #ffffff !important;
  border-top: 2px solid var(--preply-ink) !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -8px 24px rgba(18, 17, 23, 0.12) !important;
 }
 .vivid-theme .mobile-ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--preply-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--preply-ink);
  font: 800 13.5px var(--display);
  white-space: nowrap;
  cursor: pointer;
 }
 .vivid-theme .mobile-ask-btn .online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18b26b;
  box-shadow: 0 0 0 3px rgba(24, 178, 107, 0.22);
  flex-shrink: 0;
 }
 .vivid-theme .mobile-enquiry .mobile-book-btn {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  font-weight: 850 !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 10px !important;
 }
}
@media (max-width: 375px) {
 .vivid-theme .mobile-ask-btn {
  padding: 0 11px;
  font-size: 12.5px;
 }
 .vivid-theme .mobile-enquiry .mobile-book-btn {
  padding: 0 12px !important;
  font-size: 13.5px !important;
 }
}

/* 7. All-Viewport (Desktop + Tablet + Mobile) Onboarding Wizard & Result Modal Perfection */
.vivid-theme dialog:has(.preply-split-wizard) {
 width: min(780px, calc(100vw - 32px)) !important;
 max-width: 780px !important;
 padding: 0 !important;
 border-radius: 18px !important;
 overflow-x: hidden !important;
}
.vivid-theme dialog:has(.preply-split-wizard) .modal-shell {
 padding: 0 !important;
}
.vivid-theme .preply-split-wizard {
 border: 0 !important;
 border-radius: 0 !important;
 margin: 0 !important;
 grid-template-columns: 270px minmax(0, 1fr) !important;
}
.vivid-theme dialog:has(.preply-split-wizard) .modal-close {
 top: 12px !important;
 right: 14px !important;
 width: 38px !important;
 height: 38px !important;
 z-index: 5 !important;
}
.vivid-theme .preply-wiz-right {
 padding: 18px 26px 24px !important;
 min-width: 0 !important;
}
.vivid-theme .preply-ob-lang-bar {
 display: flex !important;
 flex-direction: column !important;
 align-items: stretch !important;
 gap: 10px !important;
 margin: 0 0 16px !important;
 padding-bottom: 12px !important;
}
.vivid-theme .preply-ob-lang-bar > span {
 padding-right: 52px !important;
 min-height: 36px;
 display: flex;
 align-items: center;
}
.vivid-theme .preply-wiz-right > .preply-wiz-title:first-child {
 padding-right: 48px !important;
}
.vivid-theme .preply-lang-toggle,
.vivid-theme .preply-lang-toggle.compact {
 display: grid !important;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 8px !important;
 width: 100% !important;
}
.vivid-theme .preply-lang-toggle.compact .preply-lang-btn {
 min-height: 40px !important;
 padding: 0 8px !important;
 font-size: 13.5px !important;
 text-align: center !important;
 justify-content: center !important;
 white-space: nowrap !important;
 width: 100% !important;
}

@media (max-width: 720px) {
 .vivid-theme dialog,
 .vivid-theme dialog:has(.preply-split-wizard) {
  width: calc(100vw - 16px) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: 92dvh !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(18, 17, 23, 0.34) !important;
 }
 .vivid-theme .preply-split-wizard {
  grid-template-columns: 1fr !important;
 }
 .vivid-theme dialog:has(.preply-split-wizard) .modal-close {
  top: 10px !important;
  right: 10px !important;
 }
 .vivid-theme .preply-wiz-left {
  padding: 14px 16px !important;
 }
 .vivid-theme .preply-wiz-right {
  padding: 18px 16px 18px !important;
 }
 .vivid-theme .preply-wiz-top {
  padding-right: 48px !important;
 }
 .vivid-theme .preply-ob-lang-bar > span,
 .vivid-theme .preply-wiz-right > .preply-wiz-title:first-child {
  padding-right: 0 !important;
  min-height: 0 !important;
 }
 .vivid-theme .preply-lang-toggle.compact {
  gap: 6px !important;
 }
 .vivid-theme .preply-lang-toggle.compact .preply-lang-btn {
  padding: 0 6px !important;
  font-size: 13px !important;
 }
 .vivid-theme .preply-matched-tutor-card {
  align-items: start !important;
  padding: 12px 13px !important;
  gap: 11px !important;
 }
 .vivid-theme .preply-matched-tutor-card img {
  width: 52px !important;
  height: 52px !important;
  margin-top: 2px;
 }
 .vivid-theme .preply-tutor-rating {
  margin-left: 0 !important;
 }
 .vivid-theme dialog:not(:has(.preply-split-wizard)) .modal-shell {
  padding: 20px 18px 24px !important;
 }
 .vivid-theme .inquiry-modal-form .learning-label {
  margin: 10px 0 5px !important;
 }
 .vivid-theme .inquiry-modal-form textarea.phrase-search {
  min-height: 76px !important;
 }
 .vivid-theme .modal-actions .nav-plain {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
 }
}


/* ==========================================================================
   V6: AUTO-MARKET LANGUAGE & CURRENCY, DUOTONE MINI-ILLUSTRATIONS & PREPLY LAUNCHER
   ========================================================================== */

/* 1. Preply Header Language & Currency Switcher Popover */
.vivid-theme .site-header .language-switch {
  border: 1.5px solid var(--preply-ink) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 2px 2px 0 rgba(18, 17, 23, 0.14);
}
.vivid-theme .language-dropdown summary {
  gap: 7px !important;
  padding: 0 11px !important;
  font: 750 13px var(--sans) !important;
  color: var(--preply-ink) !important;
}
.vivid-theme .language-current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.vivid-theme .language-current .lc-short {
  display: none;
}
.vivid-theme .language-current .lc-dot {
  opacity: 0.45;
  font-weight: 800;
}
.vivid-theme .language-current .lc-curr {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 5px;
  background: #FFF0EB;
  border: 1px solid #DFB9AC;
  font: 800 11.5px var(--display);
  letter-spacing: 0.2px;
  color: var(--preply-ink);
}
.vivid-theme .language-dropdown .language-options {
  width: 242px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 10px !important;
  gap: 3px !important;
  background: #ffffff !important;
  border: 2px solid var(--preply-ink) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(18, 17, 23, 0.2), 4px 4px 0 var(--preply-ink) !important;
  z-index: 60 !important;
}
.vivid-theme .language-options .lc-group-label {
  display: block;
  padding: 4px 8px 3px;
  font: 850 10.5px var(--display);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5b5566;
}
.vivid-theme .language-options .lc-group-divider {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid #ECE6F2;
}
.vivid-theme .site-header .language-options > button,
.vivid-theme .site-header .language-options > a {
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font: 700 13.5px var(--sans) !important;
}
.vivid-theme .site-header .language-options > [aria-pressed="true"],
.vivid-theme .site-header .language-options > [aria-current="page"] {
  background: #FFF0EB !important;
  color: var(--preply-ink) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 0 1.5px var(--preply-ink);
}
.vivid-theme .lc-currency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 3px 2px 2px;
}
.vivid-theme .site-header .language-options .lc-currency-grid button {
  min-height: 36px !important;
  padding: 0 4px !important;
  justify-content: center !important;
  text-align: center !important;
  border: 1.5px solid #DCD6E4 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--preply-ink) !important;
  font: 800 12.5px var(--display) !important;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.vivid-theme .site-header .language-options .lc-currency-grid button:hover {
  border-color: var(--preply-ink) !important;
  background: #FFF0EB !important;
}
.vivid-theme .site-header .language-options .lc-currency-grid button[aria-pressed="true"],
.vivid-theme .site-header .language-options .lc-currency-grid button.active {
  background: var(--preply-ink) !important;
  color: #ffffff !important;
  border-color: var(--preply-ink) !important;
}

@media (max-width: 680px) {
  .vivid-theme .site-header .brand,
  .vivid-theme.teacher-page .teacher-header .brand {
    font-size: 23px !important;
    letter-spacing: -0.03em;
  }
  .vivid-theme .language-current .lc-full {
    display: none !important;
  }
  .vivid-theme .language-current .lc-short {
    display: inline !important;
    font-weight: 800;
  }
  .vivid-theme .language-dropdown summary {
    padding: 0 9px !important;
    gap: 5px !important;
  }
}
@media (max-width: 380px) {
  .vivid-theme .site-header .brand,
  .vivid-theme.teacher-page .teacher-header .brand {
    font-size: 20px !important;
  }
}

/* 2. #plans Currency Switcher Bar */
.vivid-theme .pricing-controls {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  margin: -8px 0 18px !important;
}
.vivid-theme .pricing-controls .currency-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1.5px solid var(--preply-ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--preply-ink);
}
.vivid-theme .pricing-controls .currency-field label {
  font: 750 12.5px var(--sans);
  color: #4b4656;
  margin: 0;
  white-space: nowrap;
}
.vivid-theme .pricing-controls .currency-field select {
  border: 0;
  background: transparent;
  font: 800 16px var(--display);
  color: var(--preply-ink);
  padding: 4px 24px 4px 4px;
  cursor: pointer;
  min-height: 36px;
}
.vivid-theme .pricing-controls .currency-field select:focus {
  outline: none;
}
@media (max-width: 680px) {
  .vivid-theme .pricing-controls {
    justify-content: stretch;
    margin: 0 0 16px !important;
  }
  .vivid-theme .pricing-controls .currency-field {
    width: 100%;
    justify-content: space-between;
  }
}

/* Force local currency large trial figures (e.g. "1 990 Ft", "590 RSD") to stay crisp without wrapping */
.vivid-theme .trial-tripwire-price strong {
  font-size: clamp(32px, 3.4vw, 44px) !important;
  white-space: nowrap;
}
.vivid-theme .plan-price strong {
  font-size: clamp(30px, 3vw, 42px) !important;
  white-space: nowrap;
}

/* 3. Preply.com Interactive Course & Goal Launcher (#preply-course-launcher) */
.vivid-theme .preply-course-launcher {
  background: #ffffff;
  border: 2px solid var(--preply-ink);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 5px 0 var(--preply-ink);
  display: grid;
  gap: 14px;
}
.vivid-theme .preply-launcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid #EEE7F3;
}
.vivid-theme .preply-launcher-step {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  background: #7CE3C4;
  border: 1.5px solid var(--preply-ink);
  font: 850 10.5px var(--display);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--preply-ink);
}
.vivid-theme .preply-launcher-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 750 12px var(--sans);
  color: var(--preply-ink);
}
.vivid-theme .preply-launcher-live .online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18b26b;
  box-shadow: 0 0 0 3px rgba(24, 178, 107, 0.2);
  display: inline-block;
}
.vivid-theme .preply-launcher-block {
  display: grid;
  gap: 7px;
}
.vivid-theme .preply-launcher-label {
  font: 800 12.5px var(--display);
  color: #3f3a4a;
}
.vivid-theme .preply-launcher-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.vivid-theme .preply-launcher-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border: 1.5px solid #D8D3E1;
  border-radius: 10px;
  background: #FAF8FC;
  color: var(--preply-ink);
  font: 750 13.5px var(--sans);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.12s ease;
}
.vivid-theme .preply-launcher-tab:hover {
  border-color: var(--preply-ink);
  background: #FFF0EB;
}
.vivid-theme .preply-launcher-tab.active {
  border: 2px solid var(--preply-ink);
  background: #FFF0EB;
  font-weight: 850;
  box-shadow: 2px 2px 0 var(--preply-pink);
}
.vivid-theme .launcher-tab-illo {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.vivid-theme .tab-illo-svg {
  width: 19px;
  height: 19px;
  display: block;
}
.vivid-theme .preply-launcher-goals {
  display: grid;
  gap: 8px;
}
.vivid-theme .preply-launcher-goal {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1.5px solid #DDD8E5;
  border-radius: 11px;
  background: #ffffff;
  color: var(--preply-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.12s ease;
}
.vivid-theme .preply-launcher-goal:hover {
  border-color: var(--preply-ink);
  background: #FFF6F3;
  transform: translateY(-1px);
}
.vivid-theme .preply-launcher-goal.active {
  border: 2px solid var(--preply-ink);
  background: #FFF0EB;
  box-shadow: 3px 3px 0 var(--preply-pink);
}
.vivid-theme .launcher-goal-illo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.vivid-theme .goal-illo-svg {
  width: 34px;
  height: 34px;
  display: block;
}
.vivid-theme .launcher-goal-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.vivid-theme .launcher-goal-text strong {
  font: 800 14px/1.25 var(--sans);
  color: var(--preply-ink);
}
.vivid-theme .launcher-goal-text small {
  font: 550 12px/1.32 var(--sans);
  color: #544e5f;
}
.vivid-theme .launcher-goal-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #BEB8C9;
  background: #ffffff;
  display: grid;
  place-items: center;
  color: #ffffff;
}
.vivid-theme .preply-launcher-goal.active .launcher-goal-radio {
  border-color: var(--preply-ink);
  background: var(--preply-ink);
}
.vivid-theme .launcher-goal-radio svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

@media (max-width: 420px) {
  .vivid-theme .preply-course-launcher {
    padding: 13px;
  }
  .vivid-theme .preply-launcher-tabs {
    gap: 5px;
  }
  .vivid-theme .preply-launcher-tab {
    padding: 0 5px;
    gap: 4px;
    font-size: 12.5px;
  }
  .vivid-theme .tab-illo-svg {
    width: 16px;
    height: 16px;
  }
}

/* 4. Preply Onboarding Wizard Step Accents, Segmented Progress & Duotone Illustrations */
.vivid-theme .preply-wiz-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vivid-theme .preply-wiz-step-badge.wiz-step-accent-1 {
  background: #7CE3C4 !important;
  color: var(--preply-ink) !important;
}
.vivid-theme .preply-wiz-step-badge.wiz-step-accent-2 {
  background: #FFE03D !important;
  color: var(--preply-ink) !important;
}
.vivid-theme .preply-wiz-step-badge.wiz-step-accent-3 {
  background: #8EA8FF !important;
  color: var(--preply-ink) !important;
}
.vivid-theme .preply-wiz-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  flex: 1;
  max-width: 108px;
  margin-left: auto;
}
.vivid-theme .preply-wiz-segments > span {
  height: 6px;
  border-radius: 99px;
  background: rgba(18, 17, 23, 0.14);
  border: 1px solid rgba(18, 17, 23, 0.24);
}
.vivid-theme .preply-wiz-segments > span.filled {
  background: var(--preply-ink);
  border-color: var(--preply-ink);
}
.vivid-theme .preply-wiz-segments > span.current {
  background: var(--preply-pink);
  border-color: var(--preply-ink);
}

.vivid-theme .preply-wiz-illo {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  font-style: normal;
}
.vivid-theme .wiz-illo-svg {
  width: 34px;
  height: 34px;
  display: block;
}
.vivid-theme .time-illo-wrap {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.vivid-theme .time-illo-svg {
  width: 26px;
  height: 26px;
  display: block;
}
.vivid-theme .pill-illo-svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
.vivid-theme .btn-illo-svg {
  width: 17px;
  height: 17px;
  display: block;
  flex-shrink: 0;
}
.vivid-theme .preply-lang-toggle.compact .preply-lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.vivid-theme .preply-lang-toggle.compact .preply-lang-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .vivid-theme .preply-lang-toggle.compact .preply-lang-btn {
    gap: 4px !important;
    font-size: 12px !important;
    padding: 0 4px !important;
  }
  .vivid-theme .btn-illo-svg {
    width: 15px;
    height: 15px;
  }
}

.vivid-theme .preply-wiz-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.vivid-theme .preply-wiz-card-copy strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 800 14.5px/1.25 var(--sans) !important;
  color: var(--preply-ink);
}
.vivid-theme .preply-wiz-card-copy small {
  font: 550 12px/1.35 var(--sans);
  color: #544e5f;
}
.vivid-theme .cefr-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 5px;
  background: #FFE03D;
  border: 1.5px solid var(--preply-ink);
  font: 850 11px/1.3 var(--display);
  color: var(--preply-ink);
}
.vivid-theme .preply-wiz-chevron svg {
  width: 18px;
  height: 18px;
  display: block;
}
.vivid-theme .preply-tz-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 11px;
  border-radius: 8px;
  background: #F6F3FA;
  border: 1px solid #DFD9E8;
  font: 650 12px var(--sans);
  color: #464052;
}
.vivid-theme .preply-tz-chip strong {
  font-weight: 800;
  color: var(--preply-ink);
}

/* Verified Shield & Tutor Pills with Crisp Mini-Illustrations */
.vivid-theme .match-verified-seal {
  background: #FFF6F3 !important;
}
.vivid-theme .seal-svg {
  width: 28px;
  height: 28px;
  display: block;
}
.vivid-theme .super-tutor-pill,
.vivid-theme .preply-tutor-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vivid-theme .checkout-usd-note {
  margin: 0;
  text-align: center;
  font: 650 12px/1.4 var(--sans);
  color: #554f61;
}
.vivid-theme .booked-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.vivid-theme .inline-check-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.vivid-theme .done-illo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vivid-theme .done-illo-head h2,
.vivid-theme .done-illo-head h3 {
  margin: 0 !important;
}
.vivid-theme .done-illo-svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}

.vivid-theme .result-plan-trial .result-trial-tag {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
  background: var(--preply-ink) !important;
  color: #ffffff !important;
  font: 800 10px/1.3 var(--display) !important;
  letter-spacing: 0.4px;
  margin-bottom: 4px !important;
}