/* Uses browser-installed fonts so the site works offline. */

:root {
  --ink: #17322d;
  --heading: #482615;
  --green: #004337;
  --green-deep: #002f28;
  --green-soft: #e7f0e9;
  --gold: #9d6518;
  --gold-light: #e7bd72;
  --cream: #fffaf0;
  --paper: #fffdf8;
  --card: rgba(255, 253, 247, .92);
  --muted: #5e6862;
  --line: rgba(99, 70, 29, .19);
  --shadow: 0 18px 50px rgba(68, 44, 16, .15);
  --surface-card: #fffdf8;
  --surface-card-alt: #f8ebcf;
  --surface-control: #fffdf8;
  --surface-control-alt: #f7e5c1;
  --surface-inset: #edf2e8;
  --surface-illustration: #fffdf4;
  --surface-illustration-alt: #f4dfb6;
  --border-subtle: rgba(157, 101, 24, .28);
  --border-strong: rgba(157, 101, 24, .42);
  --inset-highlight: rgba(255, 255, 255, .82);
  --icon-surface: #f5ddb1;
  --icon-highlight: #fffdf5;
  --focus-ring: #9d6518;
  --on-accent: #fffaf0;
  --progress-dot: rgba(114, 109, 91, .48);
  --progress-fill-end: #16806c;
  --venn-one: #dae9d9;
  --venn-two: #fde5ba;
  --venn-three: #efcec7;
  --venn-ink: #31453d;
  --radius: 26px;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

html[data-theme="dark"] {
  --ink: #f9f3e7;
  --heading: #f2cb82;
  --green: #0d5548;
  --green-deep: #062b25;
  --green-soft: #183f35;
  --gold: #f1bc5b;
  --gold-light: #ffce78;
  --cream: #0d2420;
  --paper: #14342e;
  --card: rgba(23, 55, 47, .96);
  --muted: #d2d8cc;
  --line: rgba(247, 204, 118, .28);
  --shadow: 0 18px 50px rgba(0, 0, 0, .37);
  --surface-card: #173d34;
  --surface-card-alt: #1d493d;
  --surface-control: #15382f;
  --surface-control-alt: #1a4539;
  --surface-inset: #244f43;
  --surface-illustration: #183e35;
  --surface-illustration-alt: #245346;
  --border-subtle: rgba(247, 204, 118, .35);
  --border-strong: rgba(255, 214, 142, .54);
  --inset-highlight: rgba(255, 244, 218, .12);
  --icon-surface: #244f43;
  --icon-highlight: #315f51;
  --focus-ring: #ffdc93;
  --on-accent: #fffdf4;
  --progress-dot: #8ca49a;
  --progress-fill-end: #27a789;
  --venn-one: #285a4b;
  --venn-two: #63512f;
  --venn-three: #65443e;
  --venn-ink: #fff8e9;
}

html[lang="ar"] {
  --sans: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  --serif: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--cream); font-family: var(--sans); }
button { border: 0; font: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; inset-block-start: -60px; inset-inline-start: 16px; padding: 12px 16px; color: white; background: var(--green); border-radius: 12px; }
.skip-link:focus { inset-block-start: 16px; }

.site-page { position: relative; min-height: 100dvh; overflow: clip; background: radial-gradient(circle at 90% 0%, #f7d797 0, transparent 25rem), radial-gradient(circle at 5% 76%, #d6e3d8 0, transparent 31rem), linear-gradient(150deg, #fff8eb 0%, var(--cream) 53%, #e6eee7 100%); }
.site-page::before { position: absolute; z-index: 0; inset: 0; content: ""; pointer-events: none; opacity: .3; background-image: linear-gradient(135deg, transparent 48%, rgba(169, 110, 34, .12) 49%, transparent 50%), linear-gradient(45deg, transparent 48%, rgba(169, 110, 34, .12) 49%, transparent 50%); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent 0 63%, #000 78%, transparent 100%); }
html[data-theme="dark"] .site-page { background: radial-gradient(circle at 92% 2%, #3e604e 0, transparent 27rem), linear-gradient(150deg, #102b26, var(--cream) 55%, #071b18); }
html[data-theme="dark"] .site-page::before { opacity: .18; }
html[data-theme="dark"] .hero::after { background: linear-gradient(170deg, transparent 0 26%, var(--paper) 27% 42%, #003f35 43% 100%); }
html[data-theme="dark"] .page-hero::before, html[data-theme="dark"] .result-hero::before { opacity: .24; }
html[data-theme="dark"] .quiz-intro::before { opacity: .2; }
html[data-theme="dark"] .scene::after { background: linear-gradient(90deg, var(--cream) 0%, transparent 44%, transparent); }
.site-page > * { position: relative; z-index: 1; }
.scene { position: absolute; z-index: 0; display: none; inset-block-start: 51px; inset-inline-end: -7vw; width: min(70vw, 1030px); opacity: .22; pointer-events: none; mix-blend-mode: multiply; }
/* The Home hero uses Saudi paper, arch, and wave details rather than a large skyline image. */
.site-page:has(main > .hero) .scene { display: none; }
html[data-theme="dark"] .scene { opacity: .18; mix-blend-mode: screen; }
html[data-theme="dark"] .quiz-intro::before, html[data-theme="dark"] .journey-wrap::before { opacity: .24; }
html[data-theme="dark"] .journey-wrap::after { opacity: .24; }
.scene::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, var(--cream) 0%, transparent 44%, rgba(255, 249, 235, .25)); }
.scene img { width: 100%; }

.site-header { position: relative; z-index: 8; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 38px); min-height: 96px; padding: 15px clamp(20px, 5vw, 88px); }
.site-header::after { position: absolute; inset-inline: clamp(20px, 5vw, 88px); inset-block-end: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(166, 106, 31, .42), transparent); }
.brand { display: inline-flex; flex: 0 1 310px; align-items: center; gap: 10px; min-width: 225px; padding: 0; color: var(--ink); text-align: start; background: transparent; }
.brand-mark { display: grid; flex: 0 0 auto; width: 62px; height: 62px; place-items: center; filter: drop-shadow(0 4px 8px rgba(102, 62, 13, .14)); }
.brand-mark img { width: 100%; height: 100%; }
html[data-theme="dark"] .brand-mark { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)) brightness(1.05); }
.passport-head .brand-mark { width: 54px; height: 54px; }
@media (max-width: 480px) { .brand-mark { width: 48px; height: 48px; } .passport-head .brand-mark { width: 48px; height: 48px; } }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { color: var(--heading); font: 700 26px/1 var(--serif); letter-spacing: -.03em; }
.brand-copy small { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .11em; }
.top-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: clamp(13px, 2.5vw, 42px); }
.top-nav button { min-height: 44px; padding: 10px 0 8px; color: var(--ink); background: transparent; border-block-end: 2px solid transparent; font-size: 14px; white-space: nowrap; }
.top-nav button:hover, .top-nav button.active { color: var(--gold); border-color: var(--gold); }
.header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.lang-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 7px 12px; color: var(--ink); background: linear-gradient(135deg, var(--surface-control), var(--surface-control-alt)); border: 1px solid var(--border-strong); border-radius: 99px; box-shadow: 0 4px 14px rgba(104, 63, 14, .07); font-size: 12px; }
.lang-control b { color: var(--gold); }
.theme-toggle { display: flex; align-items: center; justify-content: space-between; width: 63px; height: 36px; padding: 3px 5px; color: var(--gold-light); background: var(--green-deep); border: 1px solid var(--border-strong); border-radius: 99px; }
.theme-toggle .knob { width: 28px; height: 28px; background: var(--surface-control); border-radius: 50%; box-shadow: 0 1px 5px #0005; transition: transform .2s ease; }
html[data-theme="dark"] .theme-toggle .knob { transform: translateX(27px); }
html[dir="rtl"][data-theme="dark"] .theme-toggle .knob { transform: translateX(-27px); }
.menu-toggle { display: none; width: 44px; height: 44px; color: var(--heading); background: var(--surface-control); border: 1px solid var(--border-subtle); border-radius: 12px; font-size: 25px; }

main { width: 100%; }
.hero { position: relative; display: block; min-height: calc(100dvh - 96px); padding: clamp(68px, 10vw, 140px) clamp(20px, 10vw, 178px) clamp(105px, 13vw, 175px); overflow: hidden; }
.hero::after { position: absolute; z-index: 0; inset-inline: -3vw; inset-block-end: -3px; height: min(18vw, 210px); content: ""; pointer-events: none; background: linear-gradient(170deg, transparent 0 26%, #fdf8ed 27% 42%, #003f35 43% 100%); clip-path: polygon(0 40%, 19% 16%, 42% 40%, 67% 19%, 100% 43%, 100% 100%, 0 100%); }
.hero::before { position: absolute; z-index: 0; inset-inline-end: -92px; inset-block-start: -122px; width: min(42vw, 560px); height: min(55vw, 650px); content: ""; pointer-events: none; opacity: .44; background: radial-gradient(circle at 24% 70%, rgba(244, 220, 165, .84) 0 8%, transparent 8.5%), repeating-linear-gradient(45deg, transparent 0 22px, rgba(169, 107, 30, .16) 23px 25px), repeating-linear-gradient(-45deg, transparent 0 22px, rgba(169, 107, 30, .13) 23px 25px); border: 37px solid rgba(182, 126, 47, .43); border-block-end: 0; border-inline-start: 0; border-radius: 0 0 0 470px; transform: rotate(-9deg); }
.hero-copy::after { position: absolute; z-index: -1; inset-inline-start: -100px; inset-block-start: -52px; width: min(78vw, 820px); height: min(50vw, 570px); content: ""; opacity: .58; background: radial-gradient(ellipse at 34% 38%, rgba(255, 254, 246, .96), rgba(255, 246, 224, .55) 43%, transparent 72%); }
.hero-copy { position: relative; z-index: 1; max-width: 700px; }
.eyebrow { margin: 0 0 13px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .23em; text-transform: uppercase; }
html[lang="ar"] .eyebrow { letter-spacing: 0; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.hero h1, .page-hero h1, .result-hero h1, .quiz-intro h1 { max-width: 850px; margin: 0; color: var(--heading); font: 700 clamp(43px, 5.5vw, 86px)/.99 var(--serif); letter-spacing: -.045em; }
html[lang="ar"] .hero h1, html[lang="ar"] .page-hero h1, html[lang="ar"] .result-hero h1, html[lang="ar"] .quiz-intro h1 { letter-spacing: 0; line-height: 1.35; }
.hero h1 span, .page-hero h1 span, .result-hero h1 span, .quiz-intro h1 span { color: var(--gold); }
.hero-copy > p:not(.eyebrow), .page-hero > div > p:last-child, .result-hero > div > p:last-child, .quiz-intro-copy > p:not(.eyebrow) { max-width: 665px; margin: 22px 0 30px; color: var(--muted); font-size: clamp(16px, 1.45vw, 20px); line-height: 1.65; }
.hero-visual { display: none; }
.hero-visual::before, .hero-visual::after, .hero-visual img { display: none; }
html[data-theme="dark"] .hero::before { opacity: .24; }
html[data-theme="dark"] .hero-copy::after { opacity: .16; }
.primary-button, .secondary-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 12px 21px; border-radius: 99px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease, filter .2s ease; }
.primary-button { color: var(--on-accent); background: var(--green); box-shadow: 0 8px 22px rgba(0, 67, 55, .25); }
.secondary-button { color: var(--heading); background: var(--surface-control); border: 1px solid var(--border-subtle); }
.text-button { min-height: 38px; padding: 6px 0; color: var(--gold); background: transparent; border-radius: 0; }
.primary-button:hover, .secondary-button:hover, .text-button:hover { filter: brightness(1.1); transform: translateY(-2px); }
.primary-button:disabled, .secondary-button:disabled { color: var(--muted); background: var(--surface-inset); border-color: var(--border-subtle); opacity: .72; transform: none; }
.direction-arrow { display: inline-block; font-size: 1.3em; line-height: .7; }
html[dir="rtl"] .direction-arrow { transform: scaleX(-1); }

.benefit-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: min(1370px, calc(100% - 40px)); margin: -31px auto 72px; }
.benefit { min-height: 205px; padding: 24px; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: 19px; box-shadow: 0 10px 28px rgba(81, 56, 18, .09), inset 0 1px var(--inset-highlight); }
.round-icon { display: inline-grid; width: 46px; height: 46px; place-items: center; flex: 0 0 auto; color: var(--gold); background: radial-gradient(circle at 33% 25%, var(--icon-highlight), var(--icon-surface)); border: 1px solid var(--border-subtle); border-radius: 50%; box-shadow: inset 0 1px var(--inset-highlight); font-size: 22px; }
.benefit h3, .vision-card h2, .field-card h2, .how-step h2, .result-content h2, .strength-grid h3, .major-grid h3, .combo-field h3, .combo-result h3, .faq-item button, .ready-card h2 { margin: 14px 0 8px; color: var(--heading); font: 700 clamp(19px, 1.65vw, 25px)/1.16 var(--serif); }
.benefit p, .vision-card p, .field-card p, .how-step p, .result-content p, .strength-grid p, .major-grid p, .faq-item p, .ready-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.page-hero, .result-hero { position: relative; display: block; min-height: 0; padding: clamp(42px, 6vw, 76px) clamp(20px, 7vw, 118px) clamp(51px, 6vw, 82px); overflow: hidden; background: linear-gradient(100deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 58%, transparent 100%); border-block-end: 1px solid var(--line); }
.page-hero::before, .result-hero::before { position: absolute; inset-block-start: -210px; inset-inline-end: -130px; width: 390px; height: 440px; content: ""; opacity: .42; background-image: linear-gradient(135deg, rgba(255, 232, 183, .68), rgba(178, 112, 37, .38)), repeating-linear-gradient(45deg, transparent 0 20px, rgba(103, 63, 18, .23) 21px 23px), repeating-linear-gradient(-45deg, transparent 0 20px, rgba(103, 63, 18, .16) 21px 23px); border: 29px solid rgba(177, 118, 39, .39); border-block-end: 0; border-inline-start: 0; border-radius: 0 0 0 340px; transform: rotate(-9deg); }
.page-hero::after, .result-hero::after { position: absolute; inset-inline: 0; inset-block-end: -1px; height: 33px; content: ""; background: linear-gradient(176deg, transparent 0 43%, rgba(0,63,53,.92) 46% 100%); clip-path: polygon(0 55%, 16% 12%, 40% 67%, 68% 22%, 100% 59%, 100% 100%, 0 100%); }
.page-hero > div, .result-hero > div { position: relative; z-index: 1; max-width: 820px; }
.page-hero > img, .result-hero > img { display: none; }
.page-hero h1 { font-size: clamp(39px, 4.9vw, 72px); }
.result-hero { min-height: 0; padding-inline: clamp(20px, 5vw, 82px); border: 1px solid var(--line); border-radius: var(--radius); }
.result-hero h1 { font-size: clamp(37px, 4.6vw, 68px); }

.how-panel, .vision-grid, .field-grid, .faq-layout, .journey-wrap { width: min(1520px, calc(100% - 40px)); margin-inline: auto; }
.how-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 30px; margin-block: -46px 40px; position: relative; background: linear-gradient(135deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.how-panel::before { position: absolute; inset: 20px; content: ""; pointer-events: none; border: 1px solid var(--border-subtle); border-radius: calc(var(--radius) - 9px); }
.how-step { position: relative; min-height: 313px; padding: 9px; overflow: hidden; }
.how-step:not(:last-child)::after { position: absolute; inset-inline-end: -11px; inset-block-start: 47%; width: 22px; height: 22px; content: ""; border-block-start: 2px solid var(--gold); border-inline-end: 2px solid var(--gold); transform: rotate(45deg); opacity: .75; }
.how-step small { display: block; margin-top: 23px; color: var(--gold); font: 700 14px/1 var(--serif); }
.how-step img { position: absolute; z-index: -1; inset-inline: 24%; inset-block-end: -27px; width: 115px; opacity: .22; }
.center-action { padding: 0 20px 72px; text-align: center; }
.vision-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; padding-block: 44px 78px; }
.vision-card { position: relative; min-height: 270px; padding: 23px; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: 20px; }
.vision-card::before { position: absolute; inset-inline-end: -17px; inset-block-start: -17px; width: 100px; height: 100px; content: ""; opacity: .25; background: repeating-linear-gradient(45deg, transparent 0 12px, var(--gold) 13px 14px), repeating-linear-gradient(-45deg, transparent 0 12px, var(--gold) 13px 14px); border-radius: 50%; }
.vision-card img { position: absolute; inset-inline-end: -17px; inset-block-end: -18px; width: 112px; opacity: .31; }
.vision-card h2, .vision-card p { position: relative; z-index: 1; }
.field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 45px 78px; }
.field-card { position: relative; display: flex; flex-direction: column; min-height: 390px; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: 22px; box-shadow: 0 12px 25px rgba(83, 54, 15, .09); }
.field-card > img { width: 100%; height: 152px; object-fit: cover; background: var(--green-soft); border-block-end: 2px solid var(--border-strong); }
.field-card > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 17px 20px 20px; }
.field-card .text-button { margin-top: auto; }

.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr); align-items: start; gap: 28px; padding-block: 46px 78px; }
.faq-list { display: grid; gap: 11px; }
.faq-item { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.faq-item button { display: flex; justify-content: space-between; width: 100%; min-height: 66px; padding: 17px 19px; margin: 0; color: var(--heading); text-align: start; background: transparent; }
.faq-item button span:last-child { color: var(--gold); font: 400 29px/1 var(--sans); }
.faq-item > div { padding: 0 19px 19px; }
.ready-card { padding: 27px; background: linear-gradient(145deg, #0b5144, #00382f); border-radius: var(--radius); box-shadow: var(--shadow); }
.ready-card img { width: min(100%, 310px); margin: -8px auto 18px; }
.ready-card h2 { color: #fff5de; font-size: 32px; }
.ready-card h2 span { color: var(--gold-light); }
.ready-card p { color: #e0ebe3; margin-bottom: 23px; }
.ready-card .primary-button { color: var(--green-deep); background: var(--gold-light); }

.quiz-intro { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr); align-items: center; gap: clamp(30px, 6vw, 105px); min-height: calc(100dvh - 96px); width: min(1420px, calc(100% - 40px)); padding-block: 54px 76px; margin-inline: auto; }
.quiz-intro::before { position: absolute; z-index: -1; inset: 1% -7vw 0; content: ""; opacity: .52; background: radial-gradient(ellipse at 84% 32%, rgba(220, 178, 102, .3), transparent 23rem), repeating-linear-gradient(45deg, transparent 0 26px, rgba(167, 106, 32, .09) 27px 29px), repeating-linear-gradient(-45deg, transparent 0 26px, rgba(167, 106, 32, .07) 27px 29px), linear-gradient(90deg, rgba(255,250,240,.96) 0%, rgba(255,250,240,.8) 48%, transparent 83%); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 91%, transparent); }
.quiz-intro-copy { max-width: 760px; }
.quiz-intro h1 { font-size: clamp(42px, 5.6vw, 77px); }
.reassurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.reassurance-grid article { min-height: 174px; padding: 20px; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: 17px; box-shadow: inset 0 1px var(--inset-highlight); }
.reassurance-grid article > span { color: var(--gold); font-size: 28px; }
.reassurance-grid h2 { margin: 14px 0 7px; color: var(--heading); font: 700 19px/1.2 var(--serif); }
.reassurance-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.quiz-meta-line { margin-top: 23px !important; color: var(--gold) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .13em; }
html[lang="ar"] .quiz-meta-line { letter-spacing: 0; }
.quiz-intro-art { position: relative; padding: clamp(15px, 3vw, 38px); background: linear-gradient(145deg, var(--surface-illustration), var(--surface-illustration-alt)); border: 1px solid var(--border-strong); border-radius: 50% 50% 24% 24%; box-shadow: var(--shadow); transform: rotate(2deg); }
.quiz-intro-art::before { position: absolute; inset: 15px; content: ""; pointer-events: none; border: 1px solid var(--border-subtle); border-radius: inherit; }
.quiz-intro-art img { position: relative; z-index: 1; width: 100%; transform: rotate(-2deg); }

.journey-wrap { position: relative; padding-block: 16px 78px; }
.journey-wrap::before { position: absolute; z-index: -1; inset: 0 -7vw auto; height: 390px; content: ""; opacity: .45; pointer-events: none; background: radial-gradient(ellipse at 87% 15%, rgba(227, 190, 122, .29), transparent 19rem), repeating-linear-gradient(45deg, transparent 0 30px, rgba(170, 108, 30, .07) 31px 32px), repeating-linear-gradient(-45deg, transparent 0 30px, rgba(170, 108, 30, .06) 31px 32px), linear-gradient(145deg, transparent 8%, rgba(0, 63, 53, .05) 58%, transparent 75%); mask-image: linear-gradient(#000, transparent); }
.journey-wrap::after { position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 22px; height: 85px; content: ""; opacity: .14; pointer-events: none; background: #003f35; clip-path: polygon(0 68%, 18% 33%, 39% 70%, 66% 38%, 100% 67%, 100% 100%, 0 100%); }
.progress-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 66px; padding: 8px 18px; margin-bottom: 24px; overflow-x: auto; background: linear-gradient(100deg, var(--surface-control), var(--surface-control-alt)); border: 1px solid var(--border-subtle); border-radius: 99px; box-shadow: 0 6px 21px rgba(72, 50, 20, .09); }
.progress-step { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 42px; padding: 7px 9px; color: var(--muted); background: transparent; font-size: 12px; white-space: nowrap; }
.progress-step > span { display: grid; width: 25px; height: 25px; place-items: center; color: var(--muted); border: 1px solid var(--border-subtle); border-radius: 50%; font-size: 11px; }
.progress-step.active { color: var(--ink); font-weight: 700; }
.progress-step.active > span, .progress-step.done > span { color: var(--on-accent); background: var(--green); border-color: var(--green); }
.progress-step:disabled { opacity: .53; }
.quiz-card { position: relative; width: min(1150px, 100%); padding: clamp(25px, 5vw, 68px); margin: 0 auto; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.quiz-card::before { position: absolute; z-index: 0; inset: 12px; content: ""; pointer-events: none; border: 1px solid var(--border-subtle); border-radius: calc(var(--radius) - 10px); }
.quiz-card > * { position: relative; z-index: 1; }
.quiz-topline { display: flex; justify-content: space-between; gap: 16px; color: var(--heading); font: 700 19px/1 var(--serif); }
.progress-track { height: 12px; margin: 17px 0 16px; overflow: hidden; background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: 99px; }
.progress-track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--progress-fill-end)); border-radius: inherit; transition: width .25s ease; }
.question-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; }
.question-dots i { width: 8px; height: 8px; background: var(--progress-dot); border-radius: 50%; }
.question-dots i.answered { background: var(--gold-light); }
.question-dots i.active { width: 27px; background: var(--green); border-radius: 99px; }
.quiz-question { max-width: 830px; margin: 0 auto; color: var(--heading); text-align: center; font: 700 clamp(30px, 3.7vw, 57px)/1.08 var(--serif); letter-spacing: -.03em; }
.quiz-help { margin: 14px auto 32px; color: var(--muted); text-align: center; font-size: 15px; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.answer { position: relative; display: grid; grid-template-columns: 47px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 144px; padding: 19px; color: var(--ink); text-align: start; background: linear-gradient(145deg, var(--surface-control), var(--surface-control-alt)); border: 1px solid var(--border-subtle); border-radius: 19px; box-shadow: inset 0 1px var(--inset-highlight); transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.answer:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.answer strong { display: block; color: var(--heading); font: 700 clamp(18px, 1.6vw, 23px)/1.12 var(--serif); }
.answer small { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.42; }
.answer.selected { color: var(--on-accent); background: var(--green); border-color: var(--gold-light); box-shadow: 0 8px 19px rgba(0, 65, 54, .19); }
.answer.selected .round-icon { color: var(--green-deep); background: var(--gold-light); border-color: var(--gold-light); }
.answer.selected strong, .answer.selected small { color: var(--on-accent); }
.selected-mark { position: absolute; inset-block-start: 13px; inset-inline-end: 14px; display: grid; width: 25px; height: 25px; place-items: center; color: var(--green-deep); background: var(--gold-light); border-radius: 50%; font-size: 13px; }
.quiz-actions, .page-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 31px; }

.top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.result-card { display: flex; flex-direction: column; min-height: 455px; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: 22px; box-shadow: 0 10px 28px rgba(83, 57, 17, .09); }
.result-art { position: relative; height: 194px; overflow: hidden; background: var(--green-soft); border-block-end: 2px solid var(--border-strong); }
.result-art::after { position: absolute; inset-inline: 0; inset-block-end: -1px; height: 27px; content: ""; background: linear-gradient(170deg, transparent 0 37%, rgba(0, 63, 53, .92) 41% 100%); clip-path: polygon(0 56%, 33% 13%, 64% 60%, 100% 24%, 100% 100%, 0 100%); }
.result-art > img { width: 100%; height: 100%; object-fit: cover; }
.rank, .match-badge { position: absolute; inset-block-start: 14px; display: inline-grid; place-items: center; color: #fff; background: var(--green); box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.rank { inset-inline-start: 14px; width: 42px; height: 42px; border: 2px solid var(--gold-light); border-radius: 50%; font: 700 22px/1 var(--serif); }
.match-badge { inset-inline-end: 14px; min-width: 67px; padding: 8px; background: rgba(57, 34, 15, .84); border-radius: 12px; text-align: center; }
.match-badge bdi { display: block; font: 700 21px/1 var(--serif); }
.match-badge small { margin-top: 3px; font-size: 10px; }
.result-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 0 23px 23px; }
.result-content .round-icon { margin-top: -24px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.result-content h2 { margin-top: 15px; }
.result-content .text-button { margin-top: auto; }
.result-card.compact { min-height: 347px; }
.result-card.compact .result-art { height: 150px; }
.chart-card, .content-panel { padding: clamp(22px, 4vw, 54px); background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.chart-card > h2, .content-panel > h2, .meaning h2, .majors-careers h2 { margin: 0 0 10px; color: var(--heading); font: 700 clamp(28px, 3.5vw, 48px)/1.12 var(--serif); }
.chart-card > p, .meaning p, .content-panel > p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.6; }
.bar-chart { display: grid; grid-template-columns: repeat(8, minmax(75px, 1fr)); align-items: end; gap: clamp(9px, 1.6vw, 25px); min-height: 390px; padding: 32px 0 14px; overflow-x: auto; }
.bar-wrap { display: grid; grid-template-rows: auto 258px auto auto; justify-items: center; min-width: 76px; gap: 8px; color: var(--heading); text-align: center; }
.bar-wrap > bdi { font: 700 22px/1 var(--serif); }
.bar { align-self: end; width: min(100%, 75px); height: calc(var(--score) * 2.45px); min-height: 40px; background: linear-gradient(to bottom, var(--bar-color), color-mix(in srgb, var(--bar-color) 55%, var(--green))); border-radius: 20px 20px 8px 8px; }
.bar-wrap img { width: 36px; height: 36px; padding: 4px; object-fit: cover; background: var(--green-soft); border-radius: 50%; }
.bar-wrap span { font: 600 12px/1.25 var(--serif); }
.meaning { display: grid; grid-template-columns: 1fr minmax(250px, .65fr); gap: 25px; padding-top: 37px; border-top: 1px solid var(--line); }
.meaning blockquote, .connection-panel blockquote { margin: 0; padding: 23px; color: var(--heading); background: color-mix(in srgb, var(--gold-light) 26%, transparent); border-inline-start: 4px solid var(--gold); border-radius: 0 16px 16px 0; font: 600 18px/1.55 var(--serif); }
html[dir="rtl"] .meaning blockquote, html[dir="rtl"] .connection-panel blockquote { border-radius: 16px 0 0 16px; }
.minor-heading { margin: 41px 0 0 !important; font-size: 29px !important; }
.compact-grid { margin-top: 19px; }

.path-feature { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1fr); gap: 0; margin-top: 25px; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.path-feature > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; background: var(--green-soft); border-inline-end: 2px solid var(--border-strong); }
.path-feature > div { position: relative; padding: clamp(26px, 5vw, 62px); }
.path-feature > div::after { position: absolute; inset-inline-end: -15%; inset-block-end: -25%; width: 280px; height: 280px; content: ""; opacity: .15; background: repeating-linear-gradient(45deg, transparent 0 16px, var(--gold) 17px 18px), repeating-linear-gradient(-45deg, transparent 0 16px, var(--gold) 17px 18px); border-radius: 50%; }
.path-feature > div > * { position: relative; z-index: 1; }
.path-feature .rank { position: static; margin-bottom: 21px; }
.path-feature h2 { margin: 0; color: var(--heading); font: 700 clamp(34px, 4vw, 60px)/1.08 var(--serif); }
.match-line { margin: 11px 0 20px; color: var(--gold); font-weight: 700; }
.path-feature > div > p:not(.match-line) { max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.path-feature .primary-button { margin-top: 15px; }
.path-feature + .content-panel { margin-top: 26px; }
.strength-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 27px; }
.strength-grid article { min-height: 200px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 17px; }
.connection-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 25px; align-items: center; padding: clamp(25px, 4vw, 52px); margin-top: 26px; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.connection-panel h2, .future-banner h2, .hybrid-meaning h2 { margin: 0 0 9px; color: var(--heading); font: 700 clamp(29px, 3.4vw, 48px)/1.13 var(--serif); }
.connection-panel > div > p, .hybrid-meaning p, .future-banner p { color: var(--muted); line-height: 1.6; }
.venn { position: relative; width: min(100%, 430px); height: 225px; margin-top: 22px; }
.venn span { position: absolute; display: grid; width: 145px; height: 145px; place-items: center; padding: 20px; color: var(--venn-ink); background: var(--venn-one); border: 1px solid var(--border-strong); border-radius: 50%; font: 700 16px/1.2 var(--serif); text-align: center; }
.venn span:nth-child(1) { inset-inline-start: 0; inset-block-start: 13px; }
.venn span:nth-child(2) { inset-inline-start: 26%; inset-block-start: 45px; background: var(--venn-two); }
.venn span:nth-child(3) { inset-inline-start: 52%; inset-block-start: 13px; background: var(--venn-three); }
.future-banner { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 25px; align-items: center; padding: 27px; margin-top: 26px; overflow: hidden; color: white; background: linear-gradient(105deg, #003c32, #0d705c); border: 1px solid rgba(231, 189, 114, .6); border-radius: var(--radius); }
.future-banner::after { position: absolute; inset-inline-end: -50px; inset-block-start: -80px; width: 300px; height: 320px; content: ""; opacity: .22; background: repeating-linear-gradient(45deg, transparent 0 19px, #E7BD72 20px 22px), repeating-linear-gradient(-45deg, transparent 0 19px, #E7BD72 20px 22px); border-radius: 50%; }
.future-banner img { position: relative; z-index: 1; width: 155px; height: 130px; object-fit: cover; border: 1px solid rgba(244, 207, 136, .7); border-radius: 15px; }
.future-banner > div { position: relative; z-index: 1; }
.future-banner h2, .future-banner p { color: #fff; }

.combination-panel { margin-top: 26px; }
.combination-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1.22fr; gap: 13px; align-items: center; margin-top: 26px; }
.combo-field, .combo-result { min-height: 190px; padding: 17px; border-radius: 17px; }
.combo-field { background: linear-gradient(145deg, var(--surface-inset), var(--surface-control-alt)); border: 1px solid var(--border-subtle); }
.combo-field img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--border-strong); border-radius: 50%; }
.combo-field h3 { font-size: 22px; }
.combo-field p { margin: 0; color: var(--muted); }
.combo-symbol { color: var(--gold); font: 700 36px/1 var(--serif); }
.combo-result { color: var(--on-accent); background: linear-gradient(135deg, #003c32, #0d6b59); border: 1px solid var(--border-strong); }
.combo-result p { margin: 0; color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.combo-result h3 { color: var(--on-accent); font-size: 26px; }
.combo-result span { color: #e0ece4; font-size: 13px; line-height: 1.45; }
.hybrid-meaning { position: relative; display: block; min-height: 0; padding: clamp(31px, 5vw, 60px); margin-top: 26px; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.hybrid-meaning::before { position: absolute; inset-inline-end: -75px; inset-block-start: -115px; width: 270px; height: 315px; content: ""; opacity: .25; background: repeating-linear-gradient(45deg, transparent 0 18px, var(--gold) 19px 20px), repeating-linear-gradient(-45deg, transparent 0 18px, var(--gold) 19px 20px); border: 22px solid var(--border-strong); border-block-end: 0; border-inline-start: 0; border-radius: 0 0 0 250px; transform: rotate(-8deg); }
.hybrid-meaning img { display: none; }
.hybrid-meaning > div { position: relative; z-index: 1; max-width: 790px; }
.majors-careers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .43fr); gap: 27px; margin-top: 26px; }
.majors-careers > div, .majors-careers > aside { padding: clamp(23px, 3vw, 38px); background: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt)); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); }
.major-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 22px; }
.major-grid article { min-height: 205px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.major-grid img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.majors-careers ul { padding: 0; margin: 16px 0 0; list-style: none; }
.majors-careers li { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; color: var(--ink); border-bottom: 1px solid var(--line); }
.majors-careers li:last-child { border-bottom: 0; }
.majors-careers li span { color: var(--gold); }

.passport-wrap { width: min(1360px, calc(100% - 40px)); }
.passport-card { --passport-ink: #2d382f; --passport-heading: #294a3b; --passport-muted: #385044; --passport-gold: #8d6329; --passport-label: #876333; --passport-border: #bca072; position: relative; padding: clamp(23px, 5vw, 62px); overflow: hidden; color: var(--passport-ink); background: radial-gradient(circle at 86% 11%, rgba(238, 206, 142, .38), transparent 16rem), linear-gradient(135deg, #fffef7, #f3e3bf); border: 2px solid #b68d4d; border-radius: 28px; box-shadow: 0 20px 60px rgba(55, 39, 14, .21); }
.passport-card h1, .passport-card h2 { color: var(--passport-heading); }
.passport-card .match-line { color: var(--passport-gold); }
.passport-card .round-icon { color: var(--passport-gold); background: #fff8e8; border-color: var(--passport-border); }
.passport-card .text-button { color: var(--passport-gold); }
.passport-card::before { position: absolute; inset: 13px; content: ""; pointer-events: none; background: repeating-linear-gradient(45deg, transparent 0 24px, rgba(159, 104, 29, .13) 25px 26px), repeating-linear-gradient(-45deg, transparent 0 24px, rgba(159, 104, 29, .09) 25px 26px); border: 1px solid rgba(153, 98, 26, .45); border-radius: 19px; mask-image: linear-gradient(90deg, transparent 0 62%, #000 74%, transparent 100%); }
.passport-card::after { position: absolute; inset-inline: -2%; inset-block-end: -1px; height: 68px; content: ""; background: linear-gradient(176deg, transparent 0 27%, #003f35 30% 100%); clip-path: polygon(0 55%, 18% 10%, 42% 62%, 66% 19%, 100% 58%, 100% 100%, 0 100%); }
.passport-card > * { position: relative; z-index: 1; }
.passport-head { display: grid; grid-template-columns: 1fr minmax(220px, 1.1fr) 105px; gap: 15px; align-items: center; padding-bottom: 23px; border-bottom: 1px solid #bca072; }
.passport-head .brand { min-width: 0; color: #2d382f; }
.passport-head .brand-copy strong { color: #244638; font-size: 21px; }
.passport-head .brand-copy small { color: #677063; font-size: 8px; }
.passport-brand > small { display: block; margin-top: 8px; color: #8d6b3e; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.passport-head > div:nth-child(2) { text-align: center; }
.passport-head h1 { margin: 0; color: #2c4b3c; font: 700 clamp(29px, 4vw, 58px)/1 var(--serif); letter-spacing: .12em; }
.passport-head p { margin: 8px 0 0; color: #8d6b3e; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.passport-stamp { display: grid; width: 92px; height: 92px; place-items: center; color: #9e7a42; background: repeating-radial-gradient(circle at center, transparent 0 8px, rgba(158,122,66,.18) 9px 10px); border: 2px solid rgba(158, 122, 66, .55); border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(255, 248, 226, .55); font: 700 17px/1.05 var(--serif); text-align: center; transform: rotate(-12deg); }
.passport-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr); gap: 28px; padding-block: 29px; }
.passport-main > section:first-child { position: relative; padding: 19px 23px; overflow: hidden; background: linear-gradient(135deg, rgba(246, 234, 206, .77), rgba(255, 253, 243, .46)); border: 1px solid rgba(177, 129, 64, .32); border-radius: 15px; }
.passport-main > section:first-child::after { position: absolute; inset-inline-end: -43px; inset-block-end: -45px; width: 156px; height: 175px; content: ""; opacity: .16; background: repeating-linear-gradient(45deg, transparent 0 14px, #9d6518 15px 16px), repeating-linear-gradient(-45deg, transparent 0 14px, #9d6518 15px 16px); border: 13px solid #9d6518; border-block-start: 0; border-inline-start: 0; border-radius: 0 0 0 160px; }
.passport-main > section:first-child > * { position: relative; z-index: 1; }
.passport-label { margin: 0 0 8px; color: #876333; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.passport-main h2 { margin: 12px 0 6px; color: #294a3b; font: 700 clamp(27px, 3vw, 46px)/1.08 var(--serif); }
.passport-main .round-icon { color: var(--passport-gold); background: #fff8e8; }
.strength-list { display: grid; gap: 5px; padding: 0; margin: 13px 0 0; list-style: none; }
.strength-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.strength-list li span { display: grid; width: 22px; height: 22px; place-items: center; color: #8d6329; background: #f6ead1; border-radius: 50%; font-size: 11px; }
.passport-suggestions { padding-inline-start: 25px; border-inline-start: 1px solid #bca072; }
.passport-suggestions blockquote { margin: 0 0 22px; color: #345143; font: 600 17px/1.45 var(--serif); }
.passport-suggestions ul { padding: 0; margin: 0 0 20px; list-style: none; }
.passport-suggestions li { padding: 7px 0; font-size: 13px; border-bottom: 1px solid rgba(162, 128, 77, .28); }
.passport-hybrid { padding-top: 23px; border-top: 1px solid #bca072; }
.passport-hybrid > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1.24fr; gap: 11px; align-items: center; }
.passport-hybrid article { display: flex; align-items: center; gap: 9px; min-height: 74px; padding: 9px; background: #edf1e7; border: 1px solid rgba(150, 117, 70, .25); border-radius: 12px; font: 700 13px/1.22 var(--serif); }
.passport-hybrid article img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.passport-hybrid > div > b { color: #93703e; font-size: 26px; }
.passport-hybrid .passport-combo { display: block; color: #fff; background: #174e40; }
.passport-combo small { display: block; margin-top: 5px; color: #e2eee5; font: 400 10px/1.35 var(--sans); }
.passport-statement { padding-top: 19px; margin-top: 23px; border-top: 1px solid #bca072; }
.passport-statement > p:last-child { max-width: 900px; margin: 0; color: #385044; font: 16px/1.62 var(--serif); }
.passport-actions { display: flex; gap: 10px; }
.passport-actions .primary-button, .passport-actions .secondary-button { font-size: 14px; }

.toast { position: fixed; z-index: 30; inset-inline-start: 50%; inset-block-end: 20px; max-width: min(570px, calc(100% - 32px)); padding: 14px 19px; color: var(--on-accent); background: var(--green-deep); border: 1px solid var(--border-strong); border-radius: 13px; box-shadow: var(--shadow); text-align: center; transform: translate(-50%, 140px); transition: transform .25s ease; }
html[dir="rtl"] .toast { transform: translate(50%, 140px); }
.toast.show { transform: translate(-50%, 0); }
html[dir="rtl"] .toast.show { transform: translate(50%, 0); }

@media (max-width: 1080px) {
  .site-header { flex-wrap: wrap; min-height: 80px; gap: 9px; }
  .brand { flex: 1 1 auto; }
  .top-nav { order: 3; flex-basis: 100%; justify-content: flex-start; padding-block: 3px; overflow-x: auto; }
  .vision-grid { grid-template-columns: repeat(3, 1fr); }
  .field-grid { grid-template-columns: repeat(3, 1fr); }
  .how-panel { grid-template-columns: repeat(2, 1fr); }
  .reassurance-grid { grid-template-columns: 1fr; }
  .combination-row { grid-template-columns: 1fr auto 1fr; }
  .combination-row .combo-symbol:last-of-type, .combination-row .combo-result { grid-column: 1 / -1; }
  .combination-row .combo-symbol:last-of-type { text-align: center; transform: rotate(90deg); }
  .passport-main { grid-template-columns: 1fr 1fr; }
  .passport-suggestions { grid-column: 1 / -1; padding-top: 22px; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid #bca072; }
}

@media (max-width: 780px) {
  .scene { width: 85vw; opacity: .09; }
  .site-header { padding: 11px 17px; }
  .brand { min-width: 0; }
  .brand-mark { width: 45px; height: 45px; }
  .brand-copy strong { font-size: 21px; }
  .brand-copy small { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .top-nav { display: none; order: 4; width: 100%; padding: 10px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px; }
  .top-nav.open { display: grid; grid-template-columns: 1fr 1fr; }
  .top-nav button { padding: 10px; text-align: start; }
  .header-actions { margin-inline-start: auto; }
  .lang-control { min-width: 64px; padding: 6px 8px; }
  .lang-control span { display: none; }
  .theme-toggle { width: 55px; }
  .theme-toggle .knob { width: 26px; height: 26px; }
  html[data-theme="dark"] .theme-toggle .knob { transform: translateX(21px); }
  html[dir="rtl"][data-theme="dark"] .theme-toggle .knob { transform: translateX(-21px); }
  .hero, .quiz-intro { grid-template-columns: 1fr; min-height: auto; padding-block: 50px 67px; }
  .hero { padding: 74px 20px 103px; }
  .hero::before { inset-inline-end: -202px; inset-block-start: -137px; width: 490px; height: 570px; border-width: 29px; transform: scale(.76) rotate(-9deg); }
  .hero h1, .page-hero h1, .result-hero h1, .quiz-intro h1 { font-size: clamp(40px, 11.2vw, 61px); }
  .hero-visual { display: none; }
  .benefit-row { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .benefit { min-height: 190px; }
  .page-hero, .result-hero { min-height: auto; padding-block: 45px 53px; }
  .page-hero::before, .result-hero::before { inset-block-start: -235px; inset-inline-end: -175px; transform: scale(.76) rotate(-9deg); }
  .page-hero > img, .result-hero > img { display: none; }
  .how-panel, .vision-grid, .field-grid, .faq-layout, .journey-wrap { width: min(100% - 32px, 1520px); }
  .how-panel { padding: 18px; margin-top: -21px; }
  .vision-grid, .field-grid { grid-template-columns: repeat(2, 1fr); padding-block: 32px 58px; }
  .field-card { min-height: 345px; }
  .faq-layout { grid-template-columns: 1fr; }
  .quiz-intro { width: min(100% - 32px, 1420px); }
  .quiz-intro-art { max-width: 470px; margin-inline: auto; }
  .progress-nav { justify-content: flex-start; margin-bottom: 16px; }
  .quiz-card { padding: 24px 17px; border-radius: 20px; }
  .answer-grid, .top-grid, .strength-grid, .major-grid, .meaning, .connection-panel, .hybrid-meaning, .majors-careers { grid-template-columns: 1fr; }
  .answer { min-height: 130px; padding: 16px; }
  .quiz-question { font-size: 32px; }
  .result-card { min-height: 400px; }
  .chart-card, .content-panel { padding: 21px 17px; border-radius: 20px; }
  .bar-chart { min-height: 370px; padding-bottom: 6px; }
  .path-feature { grid-template-columns: 1fr; border-radius: 20px; }
  .path-feature > img { min-height: 230px; max-height: 280px; }
  .venn { transform: scale(.86); transform-origin: top left; margin-bottom: -27px; }
  html[dir="rtl"] .venn { transform-origin: top right; }
  .future-banner { grid-template-columns: 1fr; border-radius: 20px; }
  .combination-row { grid-template-columns: 1fr; }
  .combination-row .combo-symbol, .combination-row .combo-symbol:last-of-type { grid-column: auto; text-align: center; transform: rotate(90deg); }
  .hybrid-meaning { padding: 29px 24px; }
  .hybrid-meaning::before { inset-inline-end: -125px; inset-block-start: -147px; transform: scale(.72) rotate(-8deg); }
  .hybrid-meaning img { display: none; }
  .page-actions { flex-direction: column-reverse; align-items: stretch; }
  .page-actions > .secondary-button, .page-actions > .primary-button { width: 100%; }
  .passport-wrap { width: min(100% - 20px, 1360px); }
  .passport-card { padding: 20px 15px; border-radius: 18px; }
  .passport-head { grid-template-columns: 1fr; }
  .passport-head > div:nth-child(2) { text-align: start; }
  .passport-head h1 { font-size: 33px; }
  .passport-stamp { position: absolute; inset-inline-end: 17px; inset-block-start: 20px; width: 64px; height: 64px; font-size: 12px; }
  .passport-main { grid-template-columns: 1fr; gap: 20px; }
  .passport-main > section:first-child { padding: 19px; }
  .passport-suggestions { grid-column: auto; }
  .passport-hybrid > div { grid-template-columns: 1fr; }
  .passport-hybrid > div > b { text-align: center; transform: rotate(90deg); }
  .passport-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .passport-actions button { width: 100%; }
}

@media (max-width: 480px) {
  .brand-copy strong { font-size: 19px; }
  .header-actions { gap: 5px; }
  .menu-toggle { width: 39px; height: 39px; }
  .hero, .page-hero, .result-hero { padding-inline: 20px; }
  .benefit-row, .vision-grid, .field-grid { grid-template-columns: 1fr; }
  .reassurance-grid { gap: 10px; }
  .reassurance-grid article { min-height: auto; }
  .how-panel { grid-template-columns: 1fr; }
  .how-step { min-height: 220px; }
  .quiz-actions { flex-direction: column-reverse; align-items: stretch; }
  .quiz-actions button { width: 100%; }
  .top-nav.open { grid-template-columns: 1fr; }
}

@media print {
  @page { size: auto; margin: 10mm; }
  .scene, .journey-wrap::before, .journey-wrap::after { display: none !important; }
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #passport, #passport * { visibility: visible !important; }
  #passport { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; padding: 12mm; color: #2d382f !important; background: #fffef5 !important; border: 1px solid #b68d4d !important; border-radius: 0 !important; box-shadow: none !important; }
  .passport-head h1, .passport-main h2, .passport-statement > p:last-child { color: #294a3b !important; }
  .passport-head p, .passport-label { color: #876333 !important; }
  .passport-main { gap: 15px; padding-block: 18px; }
  .passport-hybrid article { min-height: 58px; }
  .passport-statement { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}