:root {
  --ink:#343434;
  --muted:#666670;
  --blue:#4244ff;
  --line:#e7e7ef;
  --paper:#f8f9fb;
  --soft:#f0f0ff;
  --max:1160px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit
}

button {
  font:inherit;
  cursor:pointer
}

button:disabled {
  cursor:default;
  opacity:.4
}

[hidden] {
  display:none!important
}

.wrap {
  width:min(var(--max),calc(100% - 64px));
  margin:auto
}

.skip {
  position:absolute;
  left:-9999px
}

.skip:focus {
  left:16px;
  top:16px;
  z-index:99;
  background:white;
  padding:12px
}

a:focus-visible,button:focus-visible {
  outline:3px solid #7576ff;
  outline-offset:5px
}

h1,h2,h3,h4,p {
  margin-top:0
}

h1,h2,h3,h4 {
  line-height:1.2
}

h2 {
  font-size:clamp(30px,3.5vw,42px);
  letter-spacing:-1.5px;
  margin-bottom:22px
}

h3 {
  font-size:21px
}

p {
  color:var(--muted)
}

header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(249,250,246,.97);
  border-bottom:1px solid var(--line)
}

.nav {
  display:flex;
  align-items:center;
  gap:36px;
  min-height:86px
}

.logo {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-size:24px;
  font-weight:750;
  letter-spacing:-1px;
  color:var(--ink)
}

.logo-mark {
  display:grid;
  place-items:center;
  background:var(--blue);
  color:white;
  width:34px;
  height:34px;
  border-radius:10px;
  margin-right:9px;
  font-size:25px
}

.logo>span:last-child {
  color:var(--blue);
  font-weight:450
}

.links {
  display:flex;
  gap:28px;
  margin-left:auto
}

.links a,.nav-account {
  font-size:14px;
  text-decoration:none;
  font-weight:600
}

.links a:hover,.nav-account:hover {
  color:var(--blue);
  text-decoration:underline
}

.nav-account {
  padding:10px 16px;
  border:1px solid #dedeee;
  border-radius:8px;
  white-space:nowrap
}

.menu-btn {
  display:none
}

.hero {
  padding:76px 0 68px;
  background:linear-gradient(115deg,#f8f9fb 40%,#f2f2ff)
}

.hero-grid {
  display:grid;
  grid-template-columns:1.14fr 1fr;
  gap:76px;
  align-items:center
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.6px;
  font-weight:700;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px
}

.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  flex:none
}

h1 {
  font-size:clamp(40px,4.5vw,58px);
  font-weight:650;
  letter-spacing:-2.5px;
  line-height:1.09;
  margin-bottom:26px
}

h1 span {
  color:var(--blue)
}

.lead {
  font-size:17px;
  max-width:470px;
  margin-bottom:30px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:9px;
  padding:14px 22px;
  font-weight:600;
  text-decoration:none;
  font-size:15px;
  border:0;
  min-height:50px;
  transition:background .15s;
  background:var(--blue);
  color:#fff
}

.btn:hover {
  background:#3335e6
}

.micro {
  font-size:12px;
  margin:12px 0 28px
}

.hero-outcomes {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted)
}

.hero-outcomes span::before {
  content:'✓';
  color:var(--blue);
  margin-right:7px
}

.sample-card {
  background:#fff;
  border:1px solid #e2e2f0;
  border-radius:18px;
  padding:28px;
  box-shadow:0 18px 46px #304d3010;
  transform:rotate(1deg)
}

.sample-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:26px
}

.small-label {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--muted)
}

.badge {
  display:inline-block;
  white-space:nowrap;
  background:var(--soft);
  color:var(--blue);
  font-size:10px;
  padding:5px 9px;
  border-radius:5px;
  font-weight:600
}

.sample-card h2 {
  font-size:26px;
  letter-spacing:-.8px;
  margin-bottom:8px
}

.sample-intro {
  font-size:13px;
  margin-bottom:22px
}

.direction {
  display:flex;
  align-items:center;
  gap:12px;
  background:#f0f0ff;
  padding:15px;
  border:1px solid #e5e5f0;
  border-radius:9px
}

.direction-icon {
  font-size:24px;
  color:var(--blue)
}

.direction strong {
  font-size:14px;
  display:block
}

.direction div>span {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}

.sample-plan {
  margin-top:24px
}

.sample-plan p {
  margin-bottom:12px
}

.sample-plan>div {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  margin:13px 0
}

.task-number {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:10px;
  flex:none
}

.sample-bottom {
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:24px;
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}

.how-section {
  padding:60px 0 72px;
  border-bottom:1px solid var(--line)
}

.how-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:34px
}

.step-num {
  font-size:12px;
  font-weight:650;
  color:var(--blue)
}

.mini-visual {
  height:148px;
  border-radius:10px;
  padding:20px;
  margin:16px 0 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#f1f1ff;
  border:1px solid #e4e4f0;
  justify-content:center;
  font-size:11px
}

.mini-visual span,.mini-visual b {
  padding:5px 10px;
  border-radius:4px
}

.mini-answers b {
  background:var(--blue);
  color:white
}

.mini-result span {
  background:#fff;
  border:1px solid var(--line)
}

.mini-checklist span {
  padding:0 10px
}

.how-card h3 {
  margin-bottom:10px
}

.how-card p {
  font-size:14px;
  margin-bottom:0
}

.quiz-section {
  padding:76px 0;
  background:#efefff
}

.quiz-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  align-items:start
}

.quiz-copy {
  padding-top:20px
}

.quiz-copy>p:not(.eyebrow):not(.note) {
  font-size:16px;
  max-width:350px
}

.benefit-list {
  padding:0;
  list-style:none;
  margin:28px 0;
  font-size:14px
}

.benefit-list li {
  margin:12px 0
}

.benefit-list li::before {
  content:'✓';
  color:var(--blue);
  margin-right:12px
}

.note {
  font-size:12px;
  line-height:1.6;
  max-width:440px
}

.quiz-card {
  background:#fff;
  border:1px solid #dedeee;
  padding:30px;
  border-radius:16px;
  min-width:0
}

.quiz-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)
}

.progress {
  height:4px;
  border-radius:3px;
  background:#e8e8f7;
  margin:20px 0 28px;
  overflow:hidden
}

.progress>span {
  display:block;
  height:100%;
  background:var(--blue);
  transition:width .2s;
  width:0
}

.q-text {
  font-size:24px;
  margin-bottom:22px;
  min-height:58px;
  outline:none
}

.options {
  display:grid;
  gap:10px
}

.opt {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1px solid #e3e3ed;
  background:#fff;
  padding:14px;
  border-radius:8px;
  font-size:14px;
  min-height:54px;
  color:var(--ink)
}

.opt::before {
  content:'';
  width:16px;
  height:16px;
  flex:none;
  border:1px solid #a7a7bf;
  border-radius:50%
}

.opt:hover,.opt[aria-pressed=true] {
  background:#f1f1ff;
  border-color:var(--blue)
}

.opt[aria-pressed=true]::before {
  background:var(--blue);
  box-shadow:inset 0 0 0 3px #f1f1ff
}

.quiz-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
  font-size:11px;
  color:var(--muted)
}

.text-button {
  background:none;
  border:0;
  padding:7px 0;
  color:var(--blue);
  font-size:12px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px
}

.matches {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:18px 0
}

.match {
  font-size:12px;
  background:var(--soft);
  color:var(--blue);
  border:1px solid #e1e1f0;
  border-radius:6px;
  padding:9px 12px
}

.next-actions {
  padding:20px;
  background:#f7f7fc;
  border-radius:8px;
  margin:20px 0
}

.next-actions h4 {
  font-size:14px;
  margin-bottom:12px
}

.next-actions ol {
  font-size:13px;
  padding-left:18px;
  margin:0
}

.next-actions li {
  padding-left:4px;
  margin:8px 0
}

#result-summary {
  font-size:14px
}

#result-title {
  outline:none
}

#result-body .btn {
  width:100%;
  gap:10px
}

.registration-note {
  font-size:10px;
  margin:10px 0
}

.result-tools {
  display:flex;
  gap:20px;
  justify-content:space-between
}

.preview-section {
  padding:76px 0
}

.preview-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  align-items:center
}

.section-description {
  max-width:365px;
  font-size:15px
}

.roadmap {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px
}

.roadmap-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}

.roadmap-header h3 {
  font-size:18px;
  margin:0
}

.roadmap ol {
  padding:0;
  list-style:none;
  margin:0
}

.roadmap li {
  display:flex;
  align-items:start;
  gap:14px;
  border-top:1px solid var(--line);
  padding:18px 0
}

.roadmap li:last-child {
  padding-bottom:0
}

.roadmap li>span:first-child {
  font-size:12px;
  color:var(--blue);
  margin-top:2px
}

.roadmap h4 {
  font-size:14px;
  margin:0 0 5px
}

.roadmap p {
  font-size:12px;
  margin:0
}

.status {
  background:#f0f0ff;
  color:var(--blue);
  padding:3px 7px;
  white-space:nowrap;
  font-size:9px;
  margin-left:auto
}

.faq-section {
  background:#f0f0fa;
  border-block:1px solid var(--line);
  padding:56px 0
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px 70px;
  margin-top:32px
}

.faq-grid h3 {
  font-size:16px;
  margin-bottom:10px
}

.faq-grid p {
  font-size:14px;
  margin:0
}

.faq-grid a {
  color:var(--blue);
  text-underline-offset:3px
}

.final-section {
  padding:48px 0
}

.final-band {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:40px;
  background:#4244ff;
  border:1px solid #e1e1f0;
  border-radius:14px
}

.final-band h2 {
  font-size:34px;
  margin-bottom:16px
}

.final-band .eyebrow {
  margin-bottom:14px
}

.final-band p:last-child {
  font-size:14px;
  margin:0
}

.final-band .btn {
  flex:none
}

footer {
  padding:28px 0;
  border-top:1px solid var(--line)
}

.foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:var(--muted)
}

.foot .logo {
  font-size:20px
}

.foot>a:last-child {
  text-decoration:none
}

@media(max-width:1050px) {
  .nav {
  gap:20px
}

.links {
  gap:16px
}

.hero-grid {
  gap:36px
}

.quiz-grid,.preview-grid {
  gap:40px
}

.sample-top {
  flex-wrap:wrap
}

h1 {
  font-size:46px
}

.hero {
  padding:56px 0
}

.status {
  display:none
}

}

@media(max-width:780px) {
  .wrap {
  width:calc(100% - 36px)
}

.nav {
  min-height:72px;
  gap:14px
}

.nav-account {
  margin-left:auto;
  font-size:11px;
  padding:8px 10px
}

.logo {
  font-size:21px
}

.logo-mark {
  width:30px;
  height:30px
}

.menu-btn {
  display:block;
  border:1px solid var(--line);
  background:transparent;
  border-radius:6px;
  padding:6px 10px
}

.links {
  display:none
}

.links.open {
  display:flex;
  position:absolute;
  left:18px;
  right:18px;
  top:72px;
  margin:0;
  background:var(--paper);
  padding:20px;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 24px #20302010
}

.hero-grid,.quiz-grid,.preview-grid {
  grid-template-columns:1fr;
  gap:32px
}

.hero {
  padding:42px 0
}

.hero-copy {
  max-width:580px
}

h1 {
  font-size:clamp(36px,7vw,48px);
  letter-spacing:-1.8px
}

.lead {
  font-size:16px
}

.sample-card {
  transform:none;
  padding:24px
}

.how-section,.quiz-section,.preview-section {
  padding:48px 0
}

.how-grid {
  gap:16px
}

.mini-visual {
  padding:12px
}

.how-card h3 {
  font-size:18px
}

.how-card p {
  font-size:13px
}

.quiz-copy {
  padding:0
}

.quiz-copy h2 br,.preview-grid h2 br {
  display:none
}

.benefit-list {
  margin:20px 0
}

.quiz-copy .note {
  margin-bottom:0
}

.quiz-card {
  padding:24px
}

.faq-grid {
  gap:24px
}

.final-band {
  padding:28px;
  flex-direction:column;
  align-items:start
}

.final-band h2 {
  font-size:30px
}

.final-band .btn {
  width:100%
}

.foot {
  flex-wrap:wrap
}

.foot .logo {
  flex-basis:100%
}

}

@media(max-width:520px) {
  .how-grid,.faq-grid {
  grid-template-columns:1fr
}

.how-grid {
  gap:28px
}

.how-card {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:0 18px
}

.step-num {
  grid-column:1/-1;
  margin-bottom:12px
}

.mini-visual {
  grid-row:2/4;
  margin:0;
  height:128px;
  font-size:8px;
  padding:6px;
  gap:4px
}

.mini-visual span,.mini-visual b {
  padding:5px
}

.how-card h3 {
  align-self:end
}

.how-card p {
  align-self:start
}

.hero-outcomes {
  gap:8px 16px
}

.q-text {
  font-size:21px
}

.quiz-card {
  padding:20px
}

.roadmap {
  padding:20px
}

.sample-top {
  margin-bottom:18px
}

.eyebrow {
  font-size:10px
}

.final-section {
  padding:28px 0
}

.nav-account {
  font-size:10px
}

.logo-mark {
  display:none
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

* {
  transition:none!important
}

}
/* Original Ventorme identity: blue, lime, Onest and Venti. */
@font-face { font-family: Onest; font-weight: 100 900; font-style: normal; font-display: swap; src: url('assets/onest-cyrillic.woff2') format('woff2'); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: Onest; font-weight: 100 900; font-style: normal; font-display: swap; src: url('assets/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193; }
:root { --lime: #e2ff00; --max: 1208px; }
body { font-family: Onest, 'Segoe UI', sans-serif; }
h1,h2,h3 { font-weight: 500; }
header { background: #4244ff; padding: 20px 0; border: 0; }
.nav { width: min(1000px,calc(100% - 40px)); min-height: 54px; padding: 9px 16px 9px 24px; border-radius: 19px; background: white; gap: 28px; box-shadow: 0 2px 12px #2424a10a; }
.logo img { display: block; width: 126px; height: auto; }
.links a { font-weight: 400; }
.nav-account { background: var(--lime); border: 0; border-radius: 12px; padding: 10px 18px; font-weight: 400; color: #222; }
.hero { background: #4244ff url('assets/hero-bg.webp') center/cover no-repeat; color: white; padding: 64px 0 94px; }
.hero-grid { grid-template-columns: 1.2fr 1fr; gap: 70px; }
.hero h1 { font-size: clamp(38px,3.6vw,52px); line-height: 1.06; letter-spacing: -1.7px; max-width: 640px; }
.hero h1 span { color: var(--lime); }
.hero .eyebrow { color: #e3e4ff; letter-spacing: 1px; }
.hero .dot { background: var(--lime); }
.hero .lead { color: #eeeefe; font-size: 18px; max-width: 550px; }
.hero .micro,.hero-outcomes { color: #e6e6ff; }
.hero-outcomes span::before { color: var(--lime); }
.hero-copy>.btn { background: var(--lime); color: #242424; border-radius: 15px; }
.btn { border-radius: 14px; font-weight: 500; }
.btn-lime { background: var(--lime); color: #252525; }
.btn-lime:hover,.hero-copy>.btn:hover { background: #d2ec00; }
.sample-card { background: var(--lime); color: #292929; border: 0; border-radius: 28px; padding: 28px 22px 20px; transform: none; position: relative; overflow: hidden; box-shadow: none; }
.sample-top { gap: 6px; justify-content: start; margin-bottom: 10px; }
.sample-top .badge { background: white; color: #333; border-radius: 999px; padding: 3px 9px; font-weight: 400; }
.sample-card h2 { position: relative; z-index: 2; font-size: 25px; line-height: 1.08; letter-spacing: -.6px; margin-bottom: 12px; }
.sample-card h2 span { color: #4244ff; font-weight: 650; }
.sample-intro { position: relative; z-index: 2; font-size: 12px; max-width: 310px; color: #343434; margin-bottom: 22px; }
.hero-match-list { position: relative; z-index: 2; width: 63%; display: grid; gap: 10px; }
.hero-match-list>div { display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 10px 13px; border-radius: 16px; background: #faffdf; font-size: 12px; }
.hero-match-list span { font-size: 16px; }
.hero-mascot { position: absolute; right: -18px; bottom: 53px; width: 225px; height: auto; pointer-events: none; }
.sample-example { position: relative; z-index: 2; font-size: 10px; color: #373d15; margin: 14px 0 17px; max-width: 65%; }
.sample-card>.btn { position: relative; z-index: 3; width: 100%; background: #4244ff; color: white; min-height: 44px; }
.how-section { padding: 36px 0 54px; border: 0; }
.how-section>.wrap { padding: 32px; background: #4244ff; border-radius: 40px; color: white; }
.how-section .eyebrow { color: #e4e4ff; margin-bottom: 12px; }
.how-section h2 { margin-bottom: 12px; font-size: 38px; }
.how-intro { color: #ececff; margin-bottom: 0; }
.how-grid { gap: 14px; margin-top: 24px; }
.how-card { display: flex; flex-direction: column; padding: 24px; background: white; color: #333; border-radius: 32px; }
.how-card .step-num { font-size: 11px; }
.how-card h3 { order: 1; font-size: 24px; margin-top: 16px; }
.how-card p { order: 2; font-size: 14px; }
.how-card .mini-visual { order: 3; margin: 24px 0 0; min-height: 160px; border-radius: 18px; font-size: 12px; }
.quiz-section { padding: 55px 0; background: #ededff; }
.quiz-card { border-radius: 28px; box-shadow: 0 12px 36px #4244ff08; }
.opt { border-radius: 14px; }
.badge { border-radius: 999px; }
.next-actions { border-radius: 18px; }
.preview-section { padding: 70px 0; }
.path-heading { text-align: center; max-width: 700px; margin: 0 auto 36px; }
.path-heading .eyebrow { justify-content: center; }
.path-heading h2 span { color: #4244ff; }
.path-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.path-card { background: white; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; min-width: 0; border: 1px solid #ededf5; }
.path-number { color: #4244ff; font-size: 30px; letter-spacing: -1px; margin-bottom: 24px; }
.path-card h3 { font-size: 22px; margin-bottom: 12px; }
.path-card p { font-size: 13px; margin-bottom: 22px; }
.path-demo { background: #f5f5fb; border-radius: 17px; padding: 14px; margin-top: auto; font-size: 10px; }
.path-demo>div { border-radius: 8px; background: white; margin: 8px 0; padding: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.demo-label { font-size: 8px; color: #696981; letter-spacing: .4px; }
.path-demo b { background: #efefff; padding: 3px 5px; border-radius: 5px; color: #4244ff; font-weight: 400; font-size: 8px; }
.demo-caption { color: #77778b; font-size: 8px; }
.path-highlight { background: #4244ff; color: white; border: 0; }
.path-highlight .path-number,.path-highlight p { color: #eeeefe; }
.path-highlight img { width: 150px; height: auto; align-self: center; margin-top: auto; }
.path-highlight .btn { margin-top: 12px; font-size: 12px; padding: 12px; min-height: 42px; }
.demo-bars { align-items: end!important; justify-content: center!important; height: 62px; gap: 9px!important; }
.demo-bars i { display: block; width: 17px; background: #4244ff; border-radius: 4px 4px 0 0; height: 18px; }
.demo-bars i:nth-child(2) { height: 24px; }.demo-bars i:nth-child(3) { height: 31px; }.demo-bars i:nth-child(4) { height: 39px; }.demo-bars i:nth-child(5) { height: 44px; }
.essay-line { background: #e6e3ff!important; }
.path-cta { background: #e2ff00; border: 0; }
.path-cta .btn { margin-top: auto; background: #4244ff; color: white; padding: 12px 8px; font-size: 12px; min-height: 42px; }
.path-cta-note { font-size: 10px; color: #45492c; margin-top: 12px; text-align: center; }
.faq-section { background: #f1f1fa; border: 0; }
.faq-grid { gap: 16px; }
.faq-grid article { padding: 24px; border-radius: 24px; background: white; }
.final-band { border: 0; background: #4244ff url('assets/hero-bg.webp') center/cover; border-radius: 32px; color: white; }
.final-band .eyebrow,.final-band p:last-child { color: #e8e8ff; }
.final-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: none; }
.final-actions>a:last-child { font-size: 13px; color: white; text-underline-offset: 4px; }
@media(max-width:1050px) { .hero-grid { gap: 32px; } .hero-mascot { width: 195px; right: -25px; } .hero-match-list { width: 68%; } .path-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .how-card { padding: 20px; } }
@media(max-width:780px) { header { padding: 12px 0; } .nav { width: calc(100% - 28px); min-height: 50px; border-radius: 16px; padding: 9px 12px; gap: 12px; } .logo img { width: 112px; } .links.open { top: 76px; border-radius: 16px; } .hero { padding: 35px 0 46px; } .hero-grid { grid-template-columns: 1fr; gap: 30px; } .hero h1 { font-size: 43px; } .hero .lead { font-size: 16px; } .sample-card { max-width: 540px; width: 100%; margin: 0 auto; padding: 24px; } .hero-mascot { width: 220px; right: 0; } .hero-match-list { width: 63%; } .how-section { padding: 24px 0 40px; } .how-section>.wrap { padding: 24px; border-radius: 28px; } .how-section h2 { font-size: 29px; } .how-grid { grid-template-columns: 1fr; } .how-card { display: grid; grid-template-columns: 1fr 160px; column-gap: 24px; border-radius: 24px; } .step-num { grid-column: 1; } .how-card h3 { grid-column: 1; grid-row: 2; margin-top: 10px; font-size: 22px; } .how-card p { grid-column: 1; grid-row: 3; } .how-card .mini-visual { grid-column: 2; grid-row: 1/4; margin: 0; min-height: 150px; font-size: 10px; } .path-card { padding: 20px; border-radius: 24px; } .path-card h3 { font-size: 21px; } .preview-section { padding: 45px 0; } .final-actions { width: 100%; } }
@media(max-width:520px) { .hero h1 { font-size: 37px; letter-spacing: -1px; } .hero .eyebrow { font-size: 9px; } .sample-card h2 { font-size: 23px; } .hero-match-list>div { font-size: 11px; padding: 11px; min-height: 48px; } .hero-match-list { width: 67%; } .hero-mascot { width: 170px; right: -22px; bottom: 63px; } .sample-example { max-width: 70%; } .sample-card { padding: 22px 18px 18px; } .sample-intro { max-width: 270px; } .how-section>.wrap { padding: 22px 16px; } .how-card { display: flex; gap: 0; } .how-card .mini-visual { width: 100%; margin-top: 18px; font-size: 12px; min-height: 148px; } .path-grid { grid-template-columns: 1fr; } .path-card { min-height: 250px; } .path-highlight img { width: 160px; } .path-card .path-demo { font-size: 12px; } .path-demo b,.demo-label,.demo-caption { font-size: 10px; } .nav-account { font-size: 11px; padding: 8px 12px; } .faq-grid article { padding: 20px; } }
/* Keep the mobile page compact while retaining the visible steps. */
.hero-mascot { width: 310px; right: -44px; bottom: 36px; }
.hero-match-list { width: 62%; }
@media(max-width:1050px) and (min-width:781px) { .hero-mascot { width: 265px; right: -52px; } }
@media(max-width:780px) { .hero-mascot { width: 290px; right: -34px; } }
@media(max-width:520px) {
  .hero-mascot { width: 230px; right: -42px; bottom: 51px; }
  .hero-match-list { width: 67%; }
  .path-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .path-card { padding: 16px; min-height: 270px; border-radius: 22px; }
  .path-card h3 { font-size: 18px; }
  .path-card p { font-size: 12px; }
  .path-number { margin-bottom: 14px; }
  .path-demo { padding: 9px; }
  .path-card .path-demo { font-size: 10px; }
  .path-demo>div { padding: 7px; }
  .path-demo b,.demo-label,.demo-caption { font-size: 8px; }
  .path-highlight img { width: 110px; }
  .path-card .btn { padding: 10px 7px; font-size: 10px; }
  .path-cta-note { font-size: 9px; }
}
@media(max-width:359px) { .path-grid { grid-template-columns: 1fr; } .path-card { min-height: 0; } .path-demo { margin-top: 0; } }
/* Consistent line icons. */
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.career-icon { width: 20px; height: 20px; color: #4244ff; }
.inline-check { width: 15px; height: 15px; margin-right: 5px; }
.icon-back { transform: rotate(180deg); }
.path-number>.icon { width: 30px; height: 30px; }
.text-button .icon,.foot .icon,.final-actions>a:last-child .icon { width: 15px; height: 15px; }
.hero-outcomes span::before,.benefit-list li::before { display: none; }
.hero-outcomes .icon { color: var(--lime); margin-right: 7px; }
.benefit-list .icon { color: var(--blue); margin-right: 9px; }
/* Floating navigation, clear current section and a compact touch menu. */
header { transition: background 200ms ease; }
header.scrolled { background: rgba(248,249,251,.9); backdrop-filter: blur(14px); }
.nav { width: min(1060px,calc(100% - 40px)); gap: 22px; padding: 9px 12px 9px 24px; border: 1px solid rgba(225,225,243,.75); box-shadow: 0 8px 26px rgba(24,24,100,.09); }
.nav .logo { padding-right: 22px; border-right: 1px solid #e8e8f1; }
.links { gap: 4px; align-items: center; }
.links a { padding: 9px 12px; border-radius: 10px; font-size: 13px; white-space: nowrap; transition: color 160ms ease, background 160ms ease; }
.links a:hover,.links a[aria-current="location"] { color: #4244ff; background: #f0f0ff; text-decoration: none; }
.nav-account { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; min-height: 40px; transition: background 180ms ease, box-shadow 180ms ease; }
.nav-account:hover { background: #d5f100; color: #222; text-decoration: none; box-shadow: 0 4px 12px #cde90033; }
.menu-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-line { transform-origin: center; transition: transform 180ms ease; }
.menu-btn[aria-expanded="true"] .menu-line-top { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-line-bottom { transform: translateY(-4px) rotate(-45deg); }
@media(max-width:940px) {
  .nav { width: calc(100% - 28px); gap: 12px; padding: 9px 12px 9px 18px; }
  .nav .logo { border: 0; padding-right: 0; }
  .nav-account { margin-left: auto; }
  .menu-btn { display: grid; place-items: center; background: #f3f3fc; border: 1px solid #e8e8f1; border-radius: 11px; padding: 0; width: 40px; height: 40px; flex: none; color: #4244ff; }
  .links { display: none; }
  .links.open { display: flex; flex-direction: column; position: absolute; top: calc(100% - 10px); left: 14px; right: 14px; margin: 0; padding: 10px; gap: 4px; border: 1px solid #e8e8f1; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px #24245a14; animation: menu-enter 180ms ease both; }
  .links a { width: 100%; min-height: 44px; padding: 12px 14px; font-size: 14px; }
}
@media(max-width:520px) { .nav { gap: 8px; padding-left: 14px; } .nav-account { font-size: 11px; padding: 9px 11px; gap: 7px; } .nav-account .icon { width: 14px; height: 14px; } }
/* Short, one-time transitions; content remains visible without JavaScript. */
.btn { transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px #25257815; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .icon { transition: transform 180ms ease; }
.btn:hover .icon { transform: translateX(2px); }
.opt { transition: border-color 140ms ease, background 140ms ease; }
.how-card,.path-card,.faq-grid article { transition: transform 220ms ease, box-shadow 220ms ease; }
@media(hover:hover) { .how-card:hover,.path-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #28286b0c; } }
.reveal-pending { opacity: 0; transform: translateY(16px); }
.reveal-pending.reveal-visible { opacity: 1; transform: translateY(0); transition: opacity 450ms ease, transform 450ms ease; }
@keyframes menu-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion:no-preference) { .hero-copy { animation: hero-enter 450ms ease both; } .sample-card { animation: hero-enter 500ms 80ms ease both; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none!important; transition: none!important; } .reveal-pending { opacity: 1; transform: none; } .btn:hover,.how-card:hover,.path-card:hover,.btn:hover .icon { transform: none; } }
/* Conversion flow: original blue identity, one bright action in the hero. */
.hero-grid { grid-template-columns: 1.05fr 1fr; align-items: start; gap: 62px; }
.hero-copy { padding-top: 22px; }
.hero .quiz-card { color: #343434; background: white; border: 0; padding: 28px; border-radius: 28px; box-shadow: 0 16px 40px #25269a16; scroll-margin-top: 120px; }
.hero .quiz-card .badge { color: #4545a0; background: #f0f0ff; font-size: 10px; }
.hero .q-text { color: #292934; margin: 0 0 20px; font-size: 25px; min-height: 60px; }
.hero .opt { font-size: 14px; min-height: 58px; line-height: 1.45; }
.hero-guide { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.hero-guide img { width: 74px; height: auto; }
.hero-guide p { color: #eeeefe; font-size: 12px; margin: 0; }
.nav-account { background: #f2f2ff; color: #4244ff; }
.nav-account:hover { background: #e7e7ff; color: #3436d9; box-shadow: none; }
.final-actions .btn-lime { background: white; color: #4244ff; }
.final-actions .btn-lime:hover { background: #eeeeff; }
.hero.is-complete .hero-grid { grid-template-columns: 1fr; gap: 28px; }
.hero.is-complete .hero-copy { padding: 0; }
.hero.is-complete .hero-copy h1 { font-size: 32px; line-height: 1.2; max-width: none; margin: 0; }
.hero.is-complete .hero-copy h1 br { display: none; }
.hero.is-complete .hero-copy h1 br::after { content: ' '; }
.hero.is-complete .hero-copy .lead,.hero.is-complete .hero-copy .btn,.hero.is-complete .hero-copy .micro,.hero.is-complete .hero-guide { display: none; }
.hero.is-complete .quiz-card { max-width: 100%; }
#result-title { font-size: 28px; margin-bottom: 10px; }
#result-summary { color: #565664; margin: 0 0 16px; }
.matches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.match { background: #f0f0ff; color: #3032ba; border-color: #e1e1fb; padding: 16px; border-radius: 14px; font-size: 16px; }
.result-programs { margin: 26px 0; }
.result-programs h4,.next-actions h4 { font-size: 17px; margin-bottom: 14px; }
#program-examples { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.program-card { padding: 20px; border: 1px solid #e4e4ef; border-radius: 18px; min-width: 0; background: white; }
.program-card p { color: #515160; font-size: 12px; line-height: 1.6; margin: 12px 0; }
.program-card .program-university { font-size: 11px; margin: 0 0 8px; color: #555568; }
.program-card>a:not(.program-source) { display: block; color: #3435b5; font-size: 17px; font-weight: 550; text-decoration: underline; text-underline-offset: 4px; }
.program-card .program-dates { background: #f5f5fc; border-radius: 10px; padding: 10px; }
.program-source { color: #4143ac; font-size: 11px; text-underline-offset: 3px; }
.next-actions { margin: 24px 0; background: #f4f4fb; padding: 22px; }
.next-actions li { font-size: 14px; }
#result-body .result-save { width: auto; min-width: 250px; background: #e2ff00; color: #252525; }
.registration-note,.result-disclaimer { color: #555563; font-size: 11px; max-width: none; }
.result-tools { justify-content: start; gap: 28px; margin-top: 8px; }
.result-disclaimer { margin: 14px 0 0; }
.save-status { color: #3435a4; font-size: 13px; padding: 12px; background: #eeeefe; border-radius: 10px; }
.path-heading { text-align: left; margin: 0; max-width: none; }
.path-heading .eyebrow { justify-content: start; }
.process-panel { background: #4244ff; border-radius: 36px; padding: 36px; color: white; }
.process-panel .eyebrow,.process-panel .path-heading>p { color: #eeeefe; }
.process-panel .path-heading>p { margin-bottom: 28px; }
.process-list { list-style: none; padding: 0; margin: 0; background: white; color: #343434; border-radius: 24px; overflow: hidden; }
.process-list li { display: flex; gap: 22px; align-items: center; padding: 20px 24px; border-bottom: 1px solid #eeeef5; }
.process-list li:last-child { border: 0; }
.process-list .path-number { font-size: 23px; min-width: 34px; margin: 0; align-self: start; }
.process-list h3 { font-size: 18px; margin: 0 0 5px; text-align: left; }
.process-list p { font-size: 13px; color: #595969; margin: 0; }
.faq-grid h3,.faq-section h2 { text-align: left; }
.final-band h2 { font-size: 34px; }
.foot>a:last-child { color: #4546a3; }
@media(max-width:1050px) { .hero-grid { gap: 32px; } }
@media(max-width:780px) { .hero-grid { grid-template-columns: 1fr; gap: 28px; } .hero-copy { padding: 0; } .hero-guide { display: none; } .hero .quiz-card { padding: 24px; } .matches { grid-template-columns: 1fr; } #program-examples { grid-template-columns: 1fr; } .process-panel { padding: 26px; border-radius: 28px; } .process-list li { padding: 18px 20px; gap: 16px; } .preview-section { padding: 30px 0; } .final-band h2 { font-size: 30px; } }
@media(max-width:520px) { .hero { padding-top: 24px; } .hero .quiz-card { padding: 22px 18px; border-radius: 24px; } .hero .q-text { font-size: 22px; min-height: 0; } .hero .opt { font-size: 13px; padding: 12px; min-height: 54px; } .quiz-top { font-size: 11px; } .hero .quiz-card .badge { font-size: 9px; } .process-panel { padding: 22px 16px; } .process-list li { gap: 12px; padding: 16px; } .process-list h3 { font-size: 17px; } .process-list p { font-size: 12px; } .process-list .path-number { min-width: 28px; font-size: 21px; } .hero.is-complete .hero-copy h1 { font-size: 25px; } #result-title { font-size: 24px; } .program-card { padding: 16px; } #result-body .result-save { width: 100%; min-width: 0; } .result-tools { flex-wrap: wrap; gap: 12px 24px; } }
.final-band .final-actions>a.btn { color: #4244ff; font-size: 15px; text-decoration: none; }
.result-programs>h3,.next-actions>h3 { font-size: 17px; margin-bottom: 14px; }
.quiz-top { flex-wrap: wrap; gap: 8px 12px; }
.quiz-top #resume-quiz { margin-left: auto; }
/* Compact first screen and a real, explicitly labelled sample. */
.nav-login { text-decoration: none; font-size: 13px; white-space: nowrap; color: #45456a; padding: 8px 4px; }
.nav-login:hover { color: #4244ff; }
.links .menu-account { display: none; }
.hero { padding-top: 32px; padding-bottom: 54px; }
.hero-grid { grid-template-rows: auto 1fr; gap: 20px 62px; }
.hero-copy { grid-column: 1; grid-row: 1; padding-top: 16px; }
.hero-copy .lead { font-size: 17px; margin-bottom: 16px; }
.hero-copy .micro { margin: 0; }
.hero .quiz-card { grid-column: 2; grid-row: 1 / 3; }
.sample-preview { grid-column: 1; grid-row: 2; align-self: start; padding: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); border-radius: 20px; }
.sample-preview-heading { display: flex; gap: 12px; align-items: center; color: #ededff; font-size: 12px; margin-bottom: 14px; }
.sample-preview-heading .badge { background: white; color: #4244ff; font-size: 10px; }
.sample-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sample-chips span { padding: 6px 9px; font-size: 11px; border-radius: 8px; background: #fff; color: #4244ff; }
.sample-program { padding-top: 14px; }
.sample-program a { color: white; font-size: 13px; text-underline-offset: 4px; }
.sample-program p { color: #eeeefe; font-size: 10px; margin: 7px 0 0; }
.sample-preview .text-button { color: white; margin-top: 12px; }
.quiz-bottom { min-height: 32px; }
.quiz-bottom>span { margin-left: auto; }
.process-cta { background: white; color: #4244ff; margin-top: 24px; }
.process-cta:hover { background: #eeeeff; }
.faq-grid p { color: #4f4f60; }
.hero.is-complete .hero-copy { grid-column: 1; grid-row: auto; }
.hero.is-complete .quiz-card { grid-column: 1; grid-row: auto; }
.hero.is-complete .sample-preview { display: none; }
.hero.is-complete .hero-grid { grid-template-rows: auto; }
#result-body .result-save { min-width: 0; }
@media(max-width:940px) { .nav-login { display: none; } .links .menu-account { display: block; } .links .menu-account:first-of-type { border-top: 1px solid #ededf5; } }
@media(max-width:780px) {
  .hero { padding-top: 16px; padding-bottom: 32px; }
  .hero-grid { display: flex; flex-direction: column; gap: 18px; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: 32px; line-height: 1.08; letter-spacing: -1px; margin-bottom: 14px; }
  .hero h1 br { display: none; }
  .hero .eyebrow { margin-bottom: 12px; font-size: 9px; }
  .hero-copy .lead { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
  .hero .micro { font-size: 11px; }
  .hero .quiz-card,.sample-preview { width: 100%; }
  .hero .quiz-card { padding: 20px; }
  .progress { margin: 14px 0 18px; }
  .hero .q-text { min-height: 0; margin-bottom: 16px; }
  .sample-preview { padding: 18px; }
  .hero.is-complete .hero-grid { gap: 18px; }
}
@media(max-width:520px) { .hero h1 { font-size: 29px; } .hero .quiz-card { padding: 18px; } .hero .opt { min-height: 48px; padding: 11px 12px; } .quiz-bottom { margin-top: 14px; } .nav-account { max-width: 174px; font-size: 10px; } }
@media(max-width:520px) { .nav .logo img { width: 100px; } .nav-account { min-width: 0; } }
@media(max-width:359px) { .nav .logo img { width: 88px; } .nav { padding-left: 10px; padding-right: 10px; gap: 6px; } .nav-account { padding: 8px; gap: 5px; } .menu-btn { width: 36px; height: 36px; } }
/* One compact account block; sources stand in for unverified testimonials. */
.product-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 4px 7px; border-radius: 6px; background: #f0f0ff; color: #4545b0; font-size: 10px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.product-tag-free { background: #edf5ed; color: #365a3a; }
.account-section { padding: 12px 0 46px; }
.account-section .eyebrow { margin-bottom: 12px; }
.account-section h2 { font-size: 32px; margin-bottom: 24px; }
.account-features { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.account-features li { display: flex; gap: 12px; min-width: 0; }
.account-features li>.icon { width: 20px; height: 20px; color: #4244ff; margin-top: 2px; }
.account-features h3 { font-size: 16px; margin: 0 0 8px; }
.account-features p { font-size: 13px; color: #535362; line-height: 1.5; margin: 0; }
.account-access-note { font-size: 11px; color: #595966; margin: 20px 0 22px; }
.account-access-note a { color: #4344a7; text-underline-offset: 3px; }
.data-trust { display: flex; gap: 12px; align-items: start; padding: 18px 20px; border: 1px solid #e5e5ef; border-radius: 16px; background: #f1f1fa; }
.data-trust>.icon { margin-top: 3px; color: #4244ff; }
.data-trust p { font-size: 12px; line-height: 1.5; color: #525263; margin: 0; }
.data-trust p+p { margin-top: 5px; }
.data-trust strong { font-weight: 500; color: #40404f; }
.data-trust a { color: #4142a6; text-underline-offset: 3px; }
.final-mascot { width: 112px; height: 123px; object-fit: contain; margin: -8px 0; pointer-events: none; }
@media(max-width:1050px) { .account-features { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } }
@media(max-width:780px) { .account-section { padding: 6px 0 30px; } .account-section h2 { font-size: 28px; } .account-features { grid-template-columns: 1fr; gap: 18px; } .account-features h3 { margin-bottom: 4px; } .data-trust { padding: 16px; } .final-actions { flex-direction: row; gap: 12px; align-items: center; } .final-mascot { flex: none; } .final-actions .btn { flex: 1; width: auto; padding: 12px; font-size: 13px; } }
@media(max-width:520px) { .product-tag { font-size: 9px; margin-left: 4px; } .final-actions { flex-direction: column; gap: 8px; } .final-actions .btn { width: 100%; } }
.nav .logo img { transform: translateY(-3px); }
/* Venti peeks out beside the sample without covering the quiz. */
.sample-preview { position: relative; padding-right: 154px; }
.sample-mascot { position: absolute; right: -26px; bottom: -12px; width: 220px; height: auto; pointer-events: none; z-index: 1; filter: drop-shadow(0 12px 10px rgba(21,20,103,.16)); }
.sample-preview-heading,.sample-chips,.sample-program,.sample-preview #resume-quiz { position: relative; z-index: 2; }
@media(max-width:780px) { .sample-preview { padding-right: 118px; } .sample-mascot { width: 175px; right: -23px; bottom: -2px; } }
@media(max-width:359px) { .sample-preview { padding-right: 100px; } .sample-mascot { width: 155px; right: -25px; } }
@media(max-width:780px) { .sample-mascot { right: 0; } }
@media(min-width:360px) and (max-width:780px) { .sample-preview { padding-right: 154px; } }
@media(max-width:359px) { .sample-preview { padding-right: 122px; } }
/* Venti prepares applications beside the process introduction. */
.process-intro { display: grid; grid-template-columns: minmax(0,1fr) 220px; align-items: center; gap: 32px; margin-bottom: 28px; }
.process-intro .path-heading>p:last-child { margin-bottom: 0; }
.process-mascot { display: block; width: 220px; height: 220px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(23,20,120,.12)); }
@media(max-width:1050px) { .process-intro { grid-template-columns: minmax(0,1fr) 180px; gap: 22px; } .process-mascot { width: 180px; height: 180px; } }
@media(max-width:780px) { .process-intro { display: block; position: relative; margin-bottom: 22px; } .process-mascot { position: absolute; right: -2px; top: 26px; width: 112px; height: 112px; } .process-intro h2 { padding-right: 112px; min-height: 116px; font-size: 27px; margin-bottom: 16px; } }
@media(max-width:359px) { .process-mascot { width: 96px; height: 96px; top: 34px; } .process-intro h2 { padding-right: 96px; font-size: 24px; } }
/* The header reserves its height; only the floating bar changes on scroll. */
header,header.scrolled { height: 104px; padding: 20px 0; background: transparent; border: 0; backdrop-filter: none; pointer-events: none; transition: none; }
.nav { pointer-events: auto; width: min(1100px,calc(100% - 40px)); min-height: 64px; padding: 13px 16px 13px 24px; background: #fff; box-shadow: 0 5px 18px rgba(24,24,100,.045); gap: 16px; transition: width 360ms cubic-bezier(.22,1,.36,1), min-height 360ms cubic-bezier(.22,1,.36,1), padding 360ms cubic-bezier(.22,1,.36,1), background-color 360ms ease, transform 360ms cubic-bezier(.22,1,.36,1); }
header.scrolled .nav { width: min(1040px,calc(100% - 56px)); min-height: 52px; padding-top: 7px; padding-bottom: 7px; background: rgba(255,255,255,.83); backdrop-filter: blur(14px); transform: translateY(-4px); }
.language-switcher { position: relative; flex: none; }
.language-toggle { display: flex; align-items: center; gap: 6px; color: #4b4b69; background: #f4f4fb; border: 1px solid #ebebf3; border-radius: 11px; padding: 9px 10px; height: 40px; font-size: 11px; font-weight: 550; }
.language-toggle:hover,.language-toggle[aria-expanded=true] { background: #ededff; color: #4244ff; }
.language-toggle>.icon { width: 16px; height: 16px; }
.language-toggle .language-chevron { width: 12px; height: 12px; transition: transform 180ms ease; }
.language-toggle[aria-expanded=true] .language-chevron { transform: rotate(180deg); }
.language-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 180px; padding: 6px; background: white; border: 1px solid #e8e8f3; border-radius: 15px; box-shadow: 0 12px 32px #25256416; animation: menu-enter 180ms ease both; }
.language-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 12px; text-align: left; color: #3e3e51; font-size: 13px; }
.language-menu button>span { font-size: 10px; color: #72728c; }
.language-menu button:hover,.language-menu button[aria-current=true] { background: #f0f0ff; color: #4244ff; }
.language-loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(35,35,83,.18); backdrop-filter: blur(5px); animation: menu-enter 150ms ease both; }
.language-loading-card { background: #fff; box-shadow: 0 20px 60px #25256520; border: 1px solid #ededf7; border-radius: 24px; padding: 28px 42px; text-align: center; }
.language-spinner { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; position: relative; display: grid; place-items: center; }
.language-spinner::before { content: ''; position: absolute; inset: 0; border: 3px solid #ededff; border-top-color: #4244ff; border-right-color: #4244ff; border-radius: 50%; animation: language-spin 800ms linear infinite; }
.language-spinner>span { font-size: 22px; font-weight: 600; color: #4244ff; }
.language-loading-card p { font-size: 16px; color: #3a3a54; margin: 0 0 6px; }
.language-loading-card>span { font-size: 12px; color: #686880; }
@keyframes language-spin { to { transform: rotate(360deg); } }
@media(max-width:1050px) and (min-width:941px) { .nav { gap: 10px; padding-left: 18px; } .links a { padding-left: 8px; padding-right: 8px; font-size: 12px; } .nav .logo { padding-right: 14px; } }
@media(max-width:940px) { header,header.scrolled { height: 88px; padding: 14px 0; } .nav { min-height: 60px; width: calc(100% - 28px); padding: 10px 12px; gap: 8px; } header.scrolled .nav { width: calc(100% - 36px); min-height: 52px; padding: 6px 12px; transform: translateY(-2px); } .links.open { top: calc(100% - 4px); } .nav .logo { padding: 0; } }
@media(max-width:520px) { .nav-account { display: none; } .language-switcher { margin-left: auto; } .nav .logo img { width: 112px; } .language-toggle { height: 36px; padding: 7px 9px; } .menu-btn { width: 36px; height: 36px; } header,header.scrolled { height: 82px; padding: 12px 0; } .nav { min-height: 58px; } header.scrolled .nav { min-height: 50px; } }
@media(prefers-reduced-motion:reduce) { .nav,.language-chevron { transition: none; } .language-loading,.language-menu,.language-spinner::before { animation: none; } }
@font-face { font-family: Onest; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/onest-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F; }
/* Anchored pills and cards, without a glowing full-width header. */
.nav { border-color: #dde2ee; box-shadow: 0 5px 18px rgba(37,42,83,.09); }
header.scrolled .nav { border-color: #d4dceb; box-shadow: 0 7px 22px rgba(37,42,83,.12); }
.faq-section { background: #edf1f7; }
.faq-grid article { border: 1px solid #dce3ee; box-shadow: 0 3px 10px rgba(31,43,72,.035); }
.sample-preview { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 12px 16px; padding: 20px; align-items: center; }
.sample-preview-heading { grid-column: 1; margin: 0; }
.sample-chips { grid-column: 1; }
.sample-program { grid-column: 1; padding: 0; }
.sample-preview #resume-quiz { grid-column: 1; margin: 0; justify-self: start; }
.sample-mascot { position: static; grid-column: 2; grid-row: 1 / span 4; width: 130px; height: auto; align-self: end; filter: drop-shadow(0 8px 5px rgba(20,20,80,.18)); }
.final-actions { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 18px; }
.final-mascot { display: block; width: 90px; height: 100px; margin: 0; border-radius: 20px; background: rgba(255,255,255,.09); padding: 6px; object-fit: contain; }
.final-actions .btn { margin: 0; }
@media(max-width:780px) { .sample-preview { grid-template-columns: minmax(0,1fr) 110px; padding: 18px; gap: 12px; } .sample-mascot { width: 110px; } .final-actions { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 12px; } .final-mascot { width: 80px; height: 90px; } .final-actions .btn { width: 100%; } }
@media(max-width:359px) { .sample-preview { grid-template-columns: minmax(0,1fr) 85px; padding: 16px; gap: 10px; } .sample-mascot { width: 85px; } .final-actions { grid-template-columns: 64px minmax(0,1fr); gap: 10px; } .final-mascot { width: 64px; height: 74px; } }
.product-previews { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.product-preview { min-width: 0; border: 1px solid #dce3ee; border-radius: 22px; overflow: hidden; background: white; box-shadow: 0 4px 16px rgba(37,42,83,.04); }
.product-preview-image { display: block; background: #f1f3fa; padding: 12px; border-bottom: 1px solid #e5e9f1; }
.product-preview-image img { display: block; width: 100%; height: 195px; object-fit: contain; border-radius: 12px; }
.product-preview>div { padding: 18px; }
.product-preview h3 { font-size: 17px; margin-bottom: 8px; }
.product-preview p { color: #535362; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.product-preview>div>a { color: #4244b5; font-size: 11px; text-underline-offset: 3px; }
.product-calendar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: #555566; font-size: 12px; margin: 22px 0 10px; }
.product-calendar .icon { color: #4244ff; }
.product-calendar strong { color: #3f3f52; font-weight: 500; }
.product-provenance { color: #5d5d6c; font-size: 11px; margin: 0 0 12px; }
@media(max-width:780px) { .product-previews { grid-template-columns: 1fr; gap: 14px; } .product-preview { display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: center; } .product-preview-image { height: 100%; display: grid; align-items: center; border: 0; border-right: 1px solid #e5e9f1; padding: 8px; } .product-preview-image img { height: 140px; } .product-preview>div { padding: 16px; } .product-preview h3 { font-size: 16px; } .product-preview p { font-size: 12px; } }
@media(max-width:359px) { .product-preview { grid-template-columns: 105px minmax(0,1fr); } .product-preview>div { padding: 12px; } }
/* Extend the hero behind the transparent header, without a separate header slab. */
.hero { margin-top: -104px; padding-top: 136px; }
@media(max-width:940px) { .hero { margin-top: -88px; padding-top: 104px; } }
@media(max-width:520px) { .hero { margin-top: -82px; padding-top: 98px; } }
.account-section { background: #f4f6fb; padding-top: 36px; padding-bottom: 36px; }
/* A fourth feature with the same visual weight, and one compact source row. */
.product-calendar { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 18px 0 16px; padding: 20px; border: 1px solid #dce3ee; border-radius: 20px; background: white; box-shadow: 0 4px 16px rgba(37,42,83,.04); }
.calendar-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; background: #eeeeff; color: #4244ff; }
.calendar-icon .icon { width: 22px; height: 22px; }
.product-calendar h3 { font-size: 17px; margin: 0 0 6px; }
.product-calendar p { margin: 0; font-size: 13px; color: #535362; }
.product-calendar>.product-tag { margin-left: auto; flex: none; }
.product-footnote { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 11px; color: #595966; }
.product-footnote>p { margin: 0; color: #595966; }
.product-footnote a { color: #4446a3; text-underline-offset: 3px; }
.source-details { max-width: 560px; }
.source-details summary { cursor: pointer; color: #4446a3; text-underline-offset: 3px; text-decoration: underline; }
.source-details summary:focus-visible { outline: 3px solid #7576ff; outline-offset: 4px; border-radius: 3px; }
.source-details>div { padding: 14px 16px; margin-top: 10px; border: 1px solid #dde3ee; border-radius: 12px; background: #fff; }
.source-details p { font-size: 11px; margin: 0 0 8px; color: #555563; }
.source-details p:last-child { margin-bottom: 0; }
.nav { border: 1px solid #d4dce9; box-shadow: 0 6px 24px rgba(29,39,69,.13), 0 1px 3px rgba(29,39,69,.05); }
header.scrolled .nav { border-color: #cfd8e6; background: rgba(255,255,255,.94); box-shadow: 0 7px 24px rgba(29,39,69,.16), 0 1px 3px rgba(29,39,69,.05); }
@media(max-width:520px) { .product-calendar { padding: 16px; gap: 12px; flex-wrap: wrap; } .product-calendar>div { flex: 1; min-width: 0; } .product-calendar>.product-tag { margin: 0 0 0 58px; } .product-calendar h3 { font-size: 16px; } .product-calendar p { font-size: 12px; } .calendar-icon { width: 40px; height: 40px; } .product-footnote { flex-direction: column; gap: 10px; } }
@media(max-width:520px) { .product-calendar { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px 12px; } .calendar-icon { grid-column: 1; grid-row: 1 / 3; } .product-calendar>div { grid-column: 2; } .product-calendar>.product-tag { grid-column: 2; justify-self: start; margin: 0; } }
/* A persistent sign-up action, separate from the quiz state. */
.nav-register { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 16px; border-radius: 12px; background: #e2ff00; border: 1px solid #d5ed00; color: #252825; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; box-shadow: 0 3px 8px rgba(146,166,0,.1); transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.nav-register .icon { width: 15px; height: 15px; }
.nav-register:hover { background: #d5f100; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(146,166,0,.17); }
.nav-register:active { transform: translateY(0); }
@media(max-width:1100px) { .nav-account { display: none; } }
@media(max-width:940px) { .nav-register { margin-left: auto; } .language-switcher { margin-left: 0; } }
@media(max-width:520px) { .nav { gap: 6px; } .nav .logo img { width: 100px; } .nav-register { min-height: 36px; padding: 8px 10px; font-size: 11px; gap: 5px; } .nav-register .icon { display: none; } .language-toggle { padding: 7px 8px; } }
@media(max-width:380px) { .language-toggle>.icon { display: none; } .language-toggle { padding: 7px; min-width: 30px; } .nav-register { padding: 8px; } }
@media(prefers-reduced-motion:reduce) { .nav-register { transition: none; } .nav-register:hover { transform: none; } }