:root{--navy:#102741;--navy-soft:#233e5a;--cream:#f7f5ef;--paper:#fff;--red:#be3e35;--muted:#657385;--line:#dfe4e8;--soft:#edf1f5;--green:#21694e;--green-bg:#edf7f1;--red-bg:#fdf1ee;--radius:20px;color-scheme:light;font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--navy);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #397ab5;outline-offset:5px}.container{max-width:1240px;padding-inline:40px;margin-inline:auto}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.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;inset-block-start:-100px;inset-inline-start:16px;z-index:100;background:var(--navy);color:white;padding:14px 24px;border-radius:8px}.skip-link:focus{inset-block-start:12px}[hidden]{display:none!important}
.site-header{background:var(--cream);border-bottom:1px solid rgba(16,39,65,.09)}.header-inner{height:100px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}.brand-icon{width:68px;height:38px;overflow:hidden;position:relative}.brand-icon img{position:absolute;max-width:none;width:88px;height:auto;left:-14px;top:0}.brand-wordmark{font-size:22px;font-weight:750;letter-spacing:-.8px;white-space:nowrap}.brand-wordmark>span{font-weight:500}.brand-wordmark small{display:block;font-size:10px;line-height:1.9;letter-spacing:1.65px;font-weight:600;text-transform:uppercase}.main-nav{display:flex;gap:28px;font-size:14px;font-weight:600}.main-nav a:hover{color:var(--red)}.header-actions{display:flex;align-items:center;gap:24px}.language-picker{display:flex;gap:7px;align-items:center}.language-picker .icon{width:18px;height:18px}.language-picker select{border:0;background:transparent;color:var(--navy);font-size:13px;font-weight:600;padding:8px 2px;cursor:pointer;max-width:97px}.button{background:var(--red);color:white;padding:17px 23px;border:1px solid var(--red);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:20px;font-size:14px;font-weight:650;line-height:1.4;transition:background .15s,transform .15s;min-height:54px}.button:hover{background:#a8322a;border-color:#a8322a;transform:translateY(-1px)}.button-small{padding:12px 17px;min-height:45px;font-size:12px;gap:14px}.button .icon{width:18px;height:18px}.button:disabled{background:#dfe4e8;color:#75808b;border-color:#dfe4e8;transform:none}.button-secondary{background:white;color:var(--navy);border-color:var(--line)}.button-secondary:hover{background:var(--soft);border-color:#c4ced6}.text-link{display:inline-flex;align-items:center;gap:13px;font-size:14px;font-weight:650;line-height:1.5;border-bottom:1px solid transparent;padding-block:5px}.text-link:hover{border-bottom-color:var(--navy)}.text-link .icon{width:19px;height:19px}
.hero{display:grid;grid-template-columns:1.08fr 1fr;gap:50px;align-items:center;padding-block:62px 74px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;line-height:1.5;text-transform:uppercase}.hero-copy .eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:27px}.flag-mark{width:24px;height:17px;background:linear-gradient(to right,transparent 27%,white 27% 46%,transparent 46%),linear-gradient(to bottom,transparent 33%,white 33% 67%,transparent 67%),#ba3b36;position:relative;display:inline-block;border-radius:2px;flex-shrink:0}.flag-mark:before{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 33%,#123455 33% 40%,transparent 40%)}.flag-mark:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 43%,#123455 43% 57%,transparent 57%)}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,4.5vw,61px);font-weight:400;letter-spacing:-2.2px;line-height:1.11;margin-inline-end:-40px}.hero h1 em{color:var(--red);font-style:normal}.hero-description{font-size:16px;line-height:1.85;color:var(--muted);max-width:443px;margin-top:25px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:31px}.language-note{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;margin-top:30px;color:var(--muted)}.language-dot{width:7px;height:7px;border-radius:50%;background:#608475;margin-inline-end:2px}.hero-visual{height:460px;position:relative;border-radius:180px 20px 20px 20px;margin-bottom:10px;background:var(--navy)}.road-photo{width:100%;height:100%;object-fit:cover;object-position:54% center;border-radius:inherit}.hero-visual:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 60%,rgba(16,39,65,.55));pointer-events:none}.logo-card{width:224px;position:absolute;inset-inline-end:-15px;inset-block-end:35px;z-index:2;padding:10px 12px 4px;background:var(--cream);border-radius:14px;box-shadow:0 15px 35px rgba(16,39,65,.15);transform:rotate(3deg)}.logo-card img{width:100%;height:auto}.photo-caption{position:absolute;inset-inline-start:25px;inset-block-end:30px;z-index:2;color:white;font-size:10px;display:flex;align-items:center;gap:8px;max-width:190px;line-height:1.6}.caption-line{width:21px;height:1px;background:white;flex-shrink:0}.visual-number{position:absolute;inset-block-end:-29px;inset-inline-end:6px;font-size:9px;letter-spacing:2.2px;color:var(--muted)}
.how-section{background:#efeee8;padding-block:50px 52px;border-block:1px solid rgba(16,39,65,.05)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:34px}.section-heading .eyebrow{color:var(--muted);margin-bottom:9px}.section-heading h2,.closing-inner h2{font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1.2;font-weight:400;letter-spacing:-.7px}.section-heading>p{font-size:13px;line-height:1.8;color:var(--muted);max-width:290px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.feature{position:relative;padding-top:5px}.feature+.feature{padding-inline-start:32px;border-inline-start:1px solid #d6d9d7}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#e0e6e4;margin-bottom:20px}.feature-icon .icon{width:21px;height:21px}.feature-number{position:absolute;inset-inline-end:0;inset-block-start:12px;font-size:11px;color:#89948f}.feature h3{font-size:17px;letter-spacing:-.3px;font-weight:650;margin-bottom:10px}.feature p{font-size:13px;color:var(--muted);line-height:1.9;max-width:305px}.topics-section{padding-block:63px}.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.topic-card{background:white;border:1px solid var(--line);border-radius:12px;padding:26px;position:relative;transition:border-color .15s,transform .15s}.topic-card:hover{border-color:var(--navy);transform:translateY(-3px)}.topic-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#f5eee8;border-radius:50%;color:#935448;margin-bottom:23px}.topic-card:nth-child(2) .topic-icon{background:#edf1f5;color:#456380}.topic-card:nth-child(3) .topic-icon{background:#edf2ed;color:#4f705b}.topic-card h3{font-size:17px;font-weight:650;letter-spacing:-.4px;margin-bottom:9px}.topic-card p{font-size:12px;line-height:1.8;color:var(--muted);max-width:220px;padding-inline-end:10px}.topic-arrow{position:absolute;inset-inline-end:24px;inset-block-start:35px;width:20px;height:20px}.closing-section{padding-bottom:64px}.closing-inner{background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:38px 42px;border-radius:16px;position:relative;overflow:hidden}.closing-inner:after{content:"";width:150px;height:300px;border-inline:1px solid rgba(255,255,255,.12);position:absolute;inset-inline-end:330px;top:-120px;transform:rotate(28deg);pointer-events:none}.closing-inner .eyebrow{color:#b1bfcb;margin-bottom:9px}.button-light{background:var(--cream);color:var(--navy);border-color:var(--cream)}.button-light:hover{background:white;border-color:white}.site-footer{border-top:1px solid var(--line);padding-block:30px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-inner strong{font-size:15px;letter-spacing:-.4px;display:block}.footer-inner>div>span{font-size:9px;letter-spacing:1.2px;color:var(--muted);display:block;margin-top:4px}.footer-inner p{font-size:11px;color:var(--muted);line-height:1.7}.footer-domain{font-size:11px;font-weight:600}.noscript-note{text-align:center;padding:20px;background:var(--red-bg)}
.practice-section{padding-block:34px 70px;min-height:calc(100vh - 207px)}.back-link{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);margin-bottom:25px}.back-arrow{transform:rotate(180deg);width:17px;height:17px}.practice-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:20px}.practice-heading .eyebrow{color:var(--muted);margin-bottom:7px}.practice-heading h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;letter-spacing:-1px;line-height:1.3}.preview-badge{font-size:10px;border:1px solid #d6ddd9;padding:8px 12px;border-radius:30px;color:#617264;white-space:nowrap;background:#eff2ed}.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:27px;align-items:start}.question-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.question-content{padding:28px 30px}.question-topline{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px;font-size:10px;font-weight:650;color:var(--muted)}.topic-tag{display:inline-flex;gap:8px;align-items:center;padding:6px 9px;background:var(--soft);border-radius:5px;color:var(--navy-soft)}.topic-tag .icon{width:14px;height:14px}.round-progress{display:flex;gap:4px;margin-bottom:24px}.progress-segment{height:3px;flex:1;border-radius:4px;background:var(--soft)}.progress-segment.done{background:#6f9984}.progress-segment.current{background:var(--red)}.question-title{font-size:24px;line-height:1.45;font-weight:650;letter-spacing:-.6px;margin-bottom:22px}.question-image{width:100%;height:230px;object-fit:contain;background:#f8f9fa;border:1px solid #edf0f2;border-radius:12px;margin-bottom:24px}.question-image.meeting{height:300px}.options{border:0;padding:0;margin:0;display:grid;gap:10px}.option{position:relative;border:1px solid var(--line);border-radius:9px;min-height:61px;display:flex;align-items:center;gap:13px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s}.option:hover{border-color:#8195a9;background:#f9fafb}.option.selected{border-color:var(--navy);background:#f1f4f8;box-shadow:0 0 0 1px var(--navy)}.option input{position:absolute;width:1px;height:1px;opacity:0}.option:has(input:focus-visible){outline:3px solid #397ab5;outline-offset:3px}.option-letter{border:1px solid #d8dfe5;background:white;font-size:11px;font-weight:650;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;flex-shrink:0}.option-text{font-size:13px;line-height:1.6}.option-marker{margin-inline-start:auto;width:20px;height:20px;color:var(--green)}.option.correct{background:var(--green-bg);border-color:#68a789;box-shadow:none}.option.incorrect{background:var(--red-bg);border-color:#ce827b;box-shadow:none}.option.incorrect .option-marker{color:var(--red)}.option[aria-disabled=true]{cursor:default}.option.correct .option-letter{background:var(--green);border-color:var(--green);color:white}.option.incorrect .option-letter{background:var(--red);border-color:var(--red);color:white}.question-bottom{border-top:1px solid var(--line);background:#fbfcfc;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 30px}.question-bottom p{font-size:10px;line-height:1.7;color:var(--muted);max-width:235px}.question-bottom .button{min-height:45px;padding:12px 20px;font-size:12px;white-space:nowrap}.feedback{margin-top:22px;padding:20px 22px;border:1px solid #dbe7df;background:#f4f8f5;border-radius:10px}.feedback-title{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--green);font-weight:700}.feedback-title .icon{width:18px;height:18px}.feedback p{font-size:12px;line-height:1.85;color:#435d50}.feedback.wrong{background:#fbf6ef;border-color:#ebdfce}.feedback.wrong .feedback-title{color:#856134}.feedback.wrong p{color:#665943}.source-links{display:flex;gap:13px;flex-wrap:wrap;margin-top:13px}.source-link{display:inline-flex;gap:6px;align-items:center;font-size:10px;font-weight:650;text-decoration:underline;text-underline-offset:3px}.source-link .icon{width:12px;height:12px}.study-navigation{border:1px solid var(--line);border-radius:12px;background:white;padding:7px;display:grid;gap:3px;margin-bottom:20px}.study-tab{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:13px 11px;border-radius:7px;color:var(--muted);font-size:12px;font-weight:600;text-align:start;min-height:45px}.study-tab .icon{width:18px;height:18px}.study-tab.active{background:var(--navy);color:white}.study-tab:hover:not(.active){background:var(--soft)}.mistake-count{margin-inline-start:auto;background:var(--soft);color:var(--muted);border-radius:5px;min-width:20px;font-size:10px;text-align:center;padding:2px 4px}.study-tab.active .mistake-count{background:#344960;color:white}.progress-card{border:1px solid var(--line);border-radius:12px;background:white;padding:24px;margin-bottom:23px}.progress-card .eyebrow{color:var(--muted);font-size:9px;letter-spacing:1.8px}.progress-stat{padding-block:15px 18px;border-bottom:1px solid var(--line);margin-bottom:15px}.progress-stat strong{font-family:Georgia,serif;font-size:43px;line-height:1.2;font-weight:400;display:block;margin-bottom:3px}.progress-stat span{font-size:11px;color:var(--muted)}.progress-details{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-top:12px}.progress-details>span{color:var(--muted)}.progress-details strong{font-weight:650}.storage-note{font-size:9px;color:var(--muted);padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}.study-note{padding-inline:10px}.study-note>.icon{width:24px;height:24px;color:#688b7b;margin-bottom:12px}.study-note h3{font-size:13px;font-weight:650;margin-bottom:8px}.study-note p{font-size:11px;color:var(--muted);line-height:1.9}.empty-state,.results{padding:50px 36px;text-align:center}.empty-icon,.results-icon{display:flex;align-items:center;justify-content:center;width:68px;height:68px;background:#edf3ef;color:var(--green);border-radius:50%;margin:0 auto 24px}.empty-icon .icon,.results-icon .icon{width:29px;height:29px}.empty-state h2,.results h2{font-family:Georgia,serif;font-size:33px;font-weight:400;letter-spacing:-.7px;line-height:1.25;margin-bottom:15px}.empty-state p,.results>p{font-size:13px;line-height:1.9;color:var(--muted);max-width:380px;margin-inline:auto}.empty-state .button{margin-top:27px}.results .eyebrow{color:var(--muted);margin-bottom:12px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-block:25px 7px}.result-score strong{font-family:Georgia,serif;font-size:62px;font-weight:400;letter-spacing:-2px}.result-score span{font-size:22px;color:var(--muted)}.results .result-label{font-size:11px}.results-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.results-actions .button{font-size:12px;min-height:45px;padding:13px 19px}.result-list{margin:30px auto 0;max-width:420px;text-align:start;list-style:none;padding:0;border-top:1px solid var(--line)}.result-list li{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.result-list .result-status{font-size:10px;color:var(--green)}.result-list .result-status.missed{color:#926236}
html[dir=rtl] .directional{transform:scaleX(-1)}html[dir=rtl] .back-arrow{transform:none}html[lang=ar]{font-family:Tahoma,"Segoe UI",sans-serif}html[lang=ar] .hero h1,html[lang=ar] .section-heading h2,html[lang=ar] .closing-inner h2,html[lang=ar] .practice-heading h1,html[lang=ar] .empty-state h2,html[lang=ar] .results h2{font-family:Tahoma,"Segoe UI",sans-serif;letter-spacing:0}html[lang=ar] .hero h1{font-size:49px;line-height:1.5;margin-inline-end:0}html[lang=ar] .eyebrow{letter-spacing:0;font-size:11px}html[lang=ar] .hero-description{line-height:2}html[lang=ar] .brand{direction:ltr}html[lang=ar] .brand-wordmark{text-align:left}html[lang=ar] .language-note{direction:ltr;justify-content:flex-end}html[lang=ar] .logo-card{transform:rotate(-3deg)}html[lang=ar] .question-title{letter-spacing:0;line-height:1.8}html[lang=ar] .option-text{line-height:1.9}html[lang=ar] .feature p,html[lang=ar] .study-note p,html[lang=ar] .feedback p{line-height:2}
@media(min-width:1450px){.container{max-width:1320px}.hero{gap:80px}.hero h1{font-size:67px}.hero-visual{height:480px}}
@media(max-width:1100px){.container{padding-inline:30px}.header-inner{gap:18px}.main-nav{gap:18px}.header-actions{gap:15px}.brand-wordmark{font-size:20px}.brand-wordmark small{font-size:8px}.brand-icon{width:68px}.hero{gap:28px}.hero h1{font-size:51px;letter-spacing:-1.8px}.hero-visual{height:435px}.hero-actions{gap:17px}.hero-actions .text-link{font-size:12px}.hero-description{font-size:14px}.logo-card{width:195px;inset-inline-end:-10px}.photo-caption{max-width:130px;inset-inline-start:18px;font-size:9px}.practice-layout{grid-template-columns:minmax(0,1fr) 230px;gap:20px}.progress-card{padding:20px}.question-content{padding:24px}.question-bottom{padding:18px 24px}.feature-grid{gap:22px}.feature+.feature{padding-inline-start:22px}}
@media(max-width:850px){.header-inner{height:88px}.main-nav{display:none}.hero{grid-template-columns:1fr 1fr;gap:25px;padding-block:44px 60px}.hero h1{font-size:43px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:22px}.hero-description{font-size:13px;line-height:1.8}.hero-actions{flex-direction:column;align-items:flex-start;gap:8px;margin-top:23px}.hero-actions .button{padding:14px 20px;min-height:48px}.language-note{gap:8px;margin-top:20px;font-size:10px}.hero-visual{height:400px;border-start-start-radius:130px}.logo-card{width:170px;inset-block-end:27px}.photo-caption{inset-block-end:157px;max-width:200px}.practice-layout{grid-template-columns:1fr}.study-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.study-navigation{grid-column:1/-1;display:flex;margin-bottom:0}.study-tab{flex:1}.progress-card{margin:0}.study-note{padding-top:15px}.question-image{height:260px}.section-heading{gap:28px}.section-heading h2,.closing-inner h2{font-size:30px}.section-heading>p{max-width:240px;font-size:12px}.feature h3{font-size:15px}.feature p{font-size:12px}.feature-grid{gap:20px}.feature+.feature{padding-inline-start:20px}.topic-card{padding:22px}.topic-card p{font-size:11px}.topic-card h3{font-size:15px}.topic-arrow{inset-inline-end:18px}.closing-inner{padding:30px}.footer-inner{gap:18px}.footer-inner p{max-width:225px}html[lang=ar] .hero h1{font-size:35px}}
@media(max-width:600px){.container{padding-inline:22px}.header-inner{height:83px;gap:9px}.brand-icon{width:64px;height:36px}.brand-icon img{width:84px;left:-14px;top:0}.brand{gap:3px}.brand-wordmark{font-size:18px;letter-spacing:-.7px}.brand-wordmark small{font-size:7px;letter-spacing:1px}.header-actions{gap:0}.header-cta{display:none}.language-picker{gap:4px}.language-picker .icon{width:16px;height:16px}.language-picker select{font-size:11px;max-width:78px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-block:40px 53px;gap:31px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:21px}.hero h1{font-size:46px;line-height:1.14;letter-spacing:-1.8px;margin-inline-end:0}.hero-description{font-size:14px;line-height:1.85;max-width:380px;margin-top:20px}.hero-actions{flex-direction:row;align-items:center;gap:17px;margin-top:26px}.hero-actions .button{font-size:12px;gap:14px;min-height:48px}.hero-actions .text-link{font-size:11px;gap:7px}.language-note{font-size:10px;margin-top:23px;gap:10px}.hero-visual{height:305px;border-start-start-radius:105px;margin-bottom:12px;margin-inline-end:7px}.road-photo{object-position:55% 60%}.logo-card{width:175px;inset-inline-end:-7px;inset-block-end:22px}.photo-caption{max-width:130px;inset-inline-start:16px;inset-block-end:22px;font-size:9px;gap:7px}.caption-line{width:13px}.visual-number{font-size:8px;inset-block-end:-25px}.how-section{padding-block:38px}.section-heading{display:block;margin-bottom:25px}.section-heading>p{margin-top:15px;font-size:12px;max-width:330px}.section-heading h2,.closing-inner h2{font-size:31px}.feature-grid{grid-template-columns:1fr;gap:23px}.feature{padding-top:0}.feature+.feature{padding-top:25px;padding-inline-start:0;border-inline-start:0;border-top:1px solid #d6d9d7}.feature-icon{margin-bottom:14px}.feature-number{inset-block-start:10px}.feature+.feature .feature-number{inset-block-start:35px}.feature h3{font-size:17px}.feature p{font-size:12px;max-width:100%;line-height:1.9}.topics-section{padding-block:40px}.section-heading>.text-link{margin-top:16px;font-size:12px}.topic-grid{grid-template-columns:1fr;gap:12px}.topic-card{padding:24px;padding-inline-start:82px;min-height:122px}.topic-icon{position:absolute;inset-inline-start:24px;inset-block-start:24px;width:36px;height:36px;margin:0}.topic-card h3{font-size:16px;padding-inline-end:20px}.topic-card p{font-size:12px;max-width:240px}.topic-arrow{inset-block-start:27px}.closing-section{padding-bottom:40px}.closing-inner{padding:28px;flex-direction:column;align-items:flex-start;gap:23px}.closing-inner:after{inset-inline-end:30px}.closing-inner .button{font-size:12px;min-height:47px}.site-footer{padding-block:26px}.footer-inner{flex-wrap:wrap;gap:18px}.footer-inner p{order:3;max-width:100%;width:100%;font-size:10px}.footer-domain{font-size:9px}.practice-section{padding-block:25px 40px}.back-link{margin-bottom:22px}.practice-heading{align-items:flex-start;gap:12px;margin-bottom:22px}.practice-heading h1{font-size:28px;letter-spacing:-.7px}.practice-heading .eyebrow{font-size:8px;letter-spacing:1.2px}.preview-badge{font-size:8px;padding:6px 9px;margin-top:4px}.question-panel{border-radius:14px}.question-content{padding:21px 18px}.question-topline{font-size:9px;margin-bottom:15px}.question-title{font-size:20px;margin-bottom:18px;line-height:1.5}.round-progress{margin-bottom:20px}.question-image{height:215px;margin-bottom:20px}.question-image.meeting{height:250px}.option{padding:13px 12px;gap:10px;min-height:61px}.option-text{font-size:12px}.option-letter{width:25px;height:25px;font-size:10px}.question-bottom{padding:17px 18px;gap:12px}.question-bottom p{font-size:9px;max-width:145px}.question-bottom .button{font-size:10px;gap:10px;padding:12px 15px;min-height:43px}.feedback{padding:17px 16px}.feedback p{font-size:11px}.feedback-title{font-size:13px}.study-sidebar{gap:15px}.study-navigation{padding:5px}.study-tab{font-size:11px;gap:8px;padding:11px 10px}.progress-card{padding:18px}.progress-stat strong{font-size:37px}.progress-details{font-size:10px}.study-note h3{font-size:12px}.study-note p{font-size:10px}.empty-state,.results{padding:36px 22px}.empty-state h2,.results h2{font-size:28px}.empty-state p,.results>p{font-size:12px}.results-actions{flex-direction:column}.result-score strong{font-size:55px}html[lang=ar] .hero h1{font-size:37px;line-height:1.55}html[lang=ar] .hero-actions .text-link{font-size:10px}html[lang=ar] .practice-heading h1{font-size:24px;line-height:1.6}html[lang=ar] .question-title{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* The app is the entry page; introductory content lives in About Us. */
.progress-amount{display:flex;align-items:baseline;gap:8px;justify-content:flex-start}.progress-amount>span,.progress-amount>span>span{font-size:22px;color:var(--muted)}html[dir=rtl] .progress-amount{justify-content:flex-end}.progress-stat>p{font-size:11px;color:var(--muted);line-height:1.6}.progress-stat .progress-percent{font-size:10px;color:var(--green);margin-top:7px;font-weight:650}.progress-note{font-size:10px;line-height:1.7;color:var(--muted);margin-top:18px}#learning-progress{display:block;width:100%;height:7px;margin-top:17px;border:0;border-radius:5px;overflow:hidden;appearance:none;background:var(--soft);accent-color:var(--green)}#learning-progress::-webkit-progress-bar{background:var(--soft);border-radius:5px}#learning-progress::-webkit-progress-value{background:var(--green);border-radius:5px}#learning-progress::-moz-progress-bar{background:var(--green);border-radius:5px}.progress-details strong{flex-shrink:0;font-variant-numeric:tabular-nums}
.header-inner{height:88px}.main-nav a{padding-block:8px;border-bottom:2px solid transparent}.main-nav a[aria-current=page]{border-color:var(--red);color:var(--red)}
.practice-section{padding-block:26px 45px;min-height:calc(100vh - 195px)}.practice-heading{margin-bottom:20px}.practice-heading h1{font-size:32px}.practice-heading .eyebrow{font-size:9px}
.question-topline{margin-bottom:14px}.round-progress{margin-bottom:20px}.question-title{font-size:22px;margin-bottom:20px}.question-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center}.question-workspace .question-image{height:238px;margin-bottom:0}.question-workspace .question-image.meeting{height:285px}.question-bottom{padding-block:17px}
.topic-picker{background:white;border:1px solid var(--line);padding:18px;border-radius:12px;margin-bottom:20px}.topic-picker label{display:block;font-size:11px;font-weight:650;margin-bottom:10px}.topic-picker select{width:100%;border:1px solid var(--line);border-radius:7px;padding:10px;background:#f8f9fa;color:var(--navy);font-size:11px;cursor:pointer;min-height:40px}
@media(max-width:600px){.progress-card,.study-note{grid-column:1/-1}}
@media(max-width:850px){.header-inner{height:88px}.main-nav{display:flex}.question-workspace{gap:22px}.topic-picker{grid-column:1/-1;margin-bottom:0}}
@media(max-width:600px){.header-inner{height:auto;min-height:103px;flex-wrap:wrap;gap:10px;padding-block:13px}.header-actions{margin-inline-start:auto;order:1}.main-nav{order:2;width:100%;gap:24px;font-size:11px}.main-nav a{padding-block:3px}.practice-section{padding-block:20px 35px}.practice-heading{margin-bottom:18px}.practice-heading h1{font-size:25px}.practice-heading .eyebrow{font-size:8px}.question-content{padding-block:18px}.question-title{font-size:20px;margin-bottom:18px}.question-workspace{display:block}.question-workspace .question-image{height:190px;margin-bottom:20px}.question-workspace .question-image.meeting{height:250px}.question-bottom{padding-block:16px}.topic-picker{padding:15px}.topic-picker select{font-size:12px}html[lang=ar] .practice-heading h1{font-size:23px}}

/* Feng Shui polish: one focal point, related controls together, steady spacing.
   Core practice type tiers: 14px labels, 16px reading, 28px focal text.
   Touch targets and readable contrast take precedence over decoration. */
:root {
  --muted: #526174;
  --line: #dce2e7;
  --soft: #edf2f5;
  --radius: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --type-label: 14px;
  --type-body: 16px;
  --type-focus: 28px;
  font-size: var(--type-body);
}
html {scroll-padding-top: var(--space-3)}
.container {max-width: 1200px; padding-inline: var(--space-4)}
.header-inner {height: 88px; gap: var(--space-4)}
.brand {gap: var(--space-1)}
.brand-wordmark {font-size: 22px; letter-spacing: -.6px}
.brand-wordmark small {font-size: 11px; letter-spacing: .8px; line-height: 1.6}
.main-nav {gap: var(--space-3); font-size: var(--type-label)}
.main-nav a {min-width: 44px; min-height: 48px; display: inline-flex; align-items: center; padding-block: 0}
.main-nav a[aria-current=page] {border-color: var(--navy); color: var(--navy)}
.main-nav a:hover {color: var(--navy-soft)}
.language-picker {gap: var(--space-1)}
.language-picker select {font-size: var(--type-label); min-height: 48px; max-width: 112px; padding: 8px}
.button {font-size: var(--type-body); min-height: 52px; padding: 14px 24px; border-radius: 10px; gap: var(--space-2)}
.button:hover {transform: none}
.button:disabled {color: #526174; background: #e7ebef; border-color: #dce2e7}
.eyebrow {font-size: var(--type-label); font-weight: 600; letter-spacing: .8px; line-height: 1.6}
.practice-section {padding-block: var(--space-4) 48px; min-height: calc(100vh - 184px)}
.practice-heading {gap: var(--space-3); margin-bottom: var(--space-3); align-items: center}
.practice-heading .eyebrow {font-size: var(--type-label); letter-spacing: .6px; margin-bottom: 4px; color: var(--muted)}
.practice-heading h1, html[lang=ar] .practice-heading h1 {font-family: inherit; font-size: var(--type-body); font-weight: 600; letter-spacing: 0; line-height: 1.6}
.preview-badge {font-size: var(--type-label); color: var(--muted); padding: 0; border: 0; background: transparent; margin: 0}
.practice-layout {grid-template-columns: minmax(0,1fr) 288px; gap: var(--space-3); align-items: start}
.question-panel {border-radius: var(--radius); box-shadow: 0 2px 8px rgb(16 39 65 / 3%)}
.question-content {padding: var(--space-4)}
.question-topline {font-size: var(--type-label); font-weight: 500; line-height: 1.6; margin-bottom: var(--space-2); gap: var(--space-2)}
.topic-tag {background: transparent; color: var(--muted); padding: 0; gap: var(--space-1)}
.topic-tag .icon {width: 18px; height: 18px}
.round-progress {margin-bottom: var(--space-3); gap: 6px}
.progress-segment {height: 4px; background: var(--soft)}
.progress-segment.current {background: var(--navy)}
.progress-segment.done {background: var(--green)}
.question-title, html[lang=ar] .question-title {font-size: var(--type-focus); font-weight: 650; letter-spacing: -.5px; line-height: 1.4; margin-bottom: var(--space-3)}
html[lang=ar] .question-title {letter-spacing: 0; line-height: 1.6}
.question-workspace {grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--space-3); align-items: start}
.question-workspace .question-image {height: 248px; margin-bottom: 0; background: #f7f9fa; border-color: #e8edf1; border-radius: 12px}
.question-workspace .question-image.meeting {height: 320px}
.answer-area {min-width: 0}
.options {gap: 12px}
.option {padding: var(--space-2); gap: 12px; min-height: 68px; border-radius: 10px}
.option-text {font-size: var(--type-body); line-height: 1.6}
.option-letter {font-size: var(--type-label); width: 28px; height: 28px; border-radius: 8px}
.question-actions {margin-top: var(--space-2)}
.question-actions .button {width: 100%; justify-content: center}
.next-action {margin-top: var(--space-3); display: flex; justify-content: center}
.next-action .button {width: auto; min-width: 220px}
.feedback {margin-top: var(--space-3); padding: 0; border-radius: 12px}
.feedback-title {font-size: var(--type-body); line-height: 1.6; margin: 0; min-height: 64px; padding: var(--space-2) var(--space-3); cursor: pointer; justify-content: space-between}
.feedback-title::-webkit-details-marker {display: none}
.feedback-title::marker {content: ""}
.feedback-title:focus-visible {outline: 3px solid #397ab5; outline-offset: 3px; border-radius: 12px}
.feedback-label {display: flex; align-items: center; gap: var(--space-1)}
.feedback-title .feedback-chevron {width: 20px; height: 20px}
.feedback[open] .feedback-chevron {transform: rotate(180deg)}
.feedback-content {padding: 0 var(--space-3) var(--space-3)}
.feedback p {font-size: var(--type-body); line-height: 1.75}
.source-links {margin-top: var(--space-2); gap: var(--space-2)}
.source-link {font-size: var(--type-label); min-height: 48px; min-width: 44px; align-items: center}
.source-link .icon {width: 16px; height: 16px}
.study-sidebar {display: grid; grid-template-columns: 1fr; gap: var(--space-3)}
.study-controls, .progress-card {padding: 20px; background: white; border: 1px solid var(--line); border-radius: var(--radius); margin: 0}
.study-navigation {padding: 0; margin: 0; background: transparent; border: 0; display: grid; gap: 4px; grid-column: auto}
.study-tab {min-height: 48px; padding: 12px; font-size: var(--type-label); line-height: 1.6; gap: 12px; border-radius: 8px}
.study-tab.active {color: var(--navy); background: var(--soft)}
.study-tab .icon {width: 20px; height: 20px}
.mistake-count, .study-tab.active .mistake-count {font-size: var(--type-label); color: var(--navy); background: white; min-width: 24px; padding: 0 4px; line-height: 24px}
.topic-picker {border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--space-2) 0 0; margin: var(--space-2) 0 0; grid-column: auto}
.topic-picker label {font-size: var(--type-label); line-height: 1.6; margin-bottom: var(--space-1); font-weight: 600}
.topic-picker select {font-size: var(--type-label); min-height: 48px; padding: 10px 12px; border-radius: 8px; background: white}
.progress-card .eyebrow {font-size: var(--type-label); letter-spacing: .6px; color: var(--muted)}
.progress-stat {padding-block: var(--space-2); margin-bottom: var(--space-2)}
.progress-counts {display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-2)}
.progress-counts strong {font-family: inherit; font-size: var(--type-focus); line-height: 1.4; font-weight: 650; margin-bottom: 4px; letter-spacing: -.5px}
.progress-counts p {font-size: var(--type-label); line-height: 1.6; color: var(--muted)}
.progress-amount {gap: var(--space-1)}
.progress-amount strong {font-family: inherit; font-size: var(--type-focus); font-weight: 650; line-height: 1.4; margin: 0; letter-spacing: -.5px}
.progress-amount>span, .progress-amount>span>span {font-size: var(--type-body)}
.progress-stat>p {font-size: var(--type-label); line-height: 1.6; margin-top: 4px}
.progress-stat .progress-percent {font-size: var(--type-label); font-weight: 600; margin-top: var(--space-1)}
#learning-progress {height: 8px; margin-top: var(--space-2)}
.progress-details {font-size: var(--type-label); line-height: 1.6; margin-top: var(--space-1); gap: var(--space-2)}
.progress-note, .storage-note {font-size: var(--type-label); line-height: 1.6; color: var(--muted)}
.progress-note {margin-top: var(--space-2)}
.storage-note {padding-top: var(--space-2); margin-top: var(--space-2)}
.empty-state, .results {padding: 48px var(--space-4)}
.empty-state h2, .results h2 {font-family: inherit; font-size: var(--type-focus); font-weight: 650; line-height: 1.4; margin-bottom: var(--space-2)}
.empty-state p, .results>p {font-size: var(--type-body); line-height: 1.75; max-width: 480px}
.result-score {gap: var(--space-1); margin-block: var(--space-3) var(--space-1)}
.result-score strong {font-family: inherit; font-size: var(--type-focus); font-weight: 650; letter-spacing: 0}
.result-score span {font-size: var(--type-body)}
.results .eyebrow, .results .result-label {font-size: var(--type-label)}
.result-list {margin-top: var(--space-3)}
.result-list li {font-size: var(--type-body); line-height: 1.6; padding-block: var(--space-2)}
.result-list .result-status {font-size: var(--type-label)}
.results-actions {gap: var(--space-2); margin-top: var(--space-3)}
.results-actions .button {font-size: var(--type-body); min-height: 52px}
.site-footer {padding-block: var(--space-3)}
.footer-inner {gap: var(--space-3); line-height: 1.6}
.footer-inner strong {font-size: var(--type-body)}
.footer-inner span, .footer-inner p, .footer-domain {font-size: var(--type-label); color: var(--muted)}
.footer-inner p {max-width: 340px}

/* About Us shares the same reading scale and spacing rhythm. */
.hero {gap: 48px; padding-block: 64px}
.hero h1 {font-size: 48px; line-height: 1.2; letter-spacing: -1.4px; margin-inline-end: 0}
.hero-copy .eyebrow {font-size: var(--type-label); margin-bottom: var(--space-3)}
.hero-description {font-size: var(--type-body); line-height: 1.8; margin-top: var(--space-3)}
.hero-actions {gap: var(--space-3); margin-top: var(--space-4)}
.text-link {font-size: var(--type-label); min-height: 48px; min-width: 44px}
.language-note, .photo-caption, .visual-number {font-size: var(--type-label); line-height: 1.6}
.language-note {margin-top: var(--space-3); gap: var(--space-1)}
.hero-visual {height: 440px; border-radius: 100px 16px 16px 16px}
.logo-card {width: 200px; inset-inline-end: var(--space-2); inset-block-end: var(--space-3); transform: none}
.photo-caption {inset-inline-start: var(--space-3); inset-block-end: 180px; max-width: 240px}
.visual-number {display: none}
.how-section, .topics-section {padding-block: 48px}
.section-heading {gap: var(--space-4); align-items: start; margin-bottom: var(--space-4)}
.section-heading h2, .closing-inner h2, html[lang=ar] .hero h1 {font-size: var(--type-focus); line-height: 1.5; letter-spacing: -.4px}
.section-heading>p, .feature p, .topic-card p {font-size: var(--type-body); line-height: 1.8; max-width: 420px}
.feature-grid {gap: var(--space-4)}
.feature+.feature {padding-inline-start: var(--space-4)}
.feature h3, .topic-card h3 {font-size: var(--type-body); line-height: 1.6; margin-bottom: var(--space-1)}
.feature-number {font-size: var(--type-label); color: var(--muted)}
.topic-grid {gap: var(--space-3)}
.topic-card {padding: var(--space-3); border-radius: var(--radius)}
.closing-inner {padding: var(--space-4); border-radius: var(--radius); gap: var(--space-3)}
.closing-section {padding-bottom: 48px}

@media (max-width: 980px) {
  .container {padding-inline: var(--space-3)}
  .header-inner {gap: var(--space-3)}
  .main-nav {gap: var(--space-2)}
  .practice-layout {grid-template-columns: minmax(0,1fr) 264px}
  .question-content {padding: var(--space-3)}
  .question-workspace {grid-template-columns: 1fr}
  .question-workspace .question-image {height: 220px}
  .question-workspace .question-image.meeting {height: 300px}
  .hero {gap: var(--space-4)}
}
@media (max-width: 760px) {
  .header-inner {flex-wrap: wrap; height: auto; min-height: 112px; gap: 4px 16px; padding-block: 12px}
  .header-actions {order: 1; margin-inline-start: auto}
  .main-nav {order: 2; width: 100%; gap: var(--space-3)}
  .main-nav a {padding: 0 4px}
  .practice-layout {grid-template-columns: 1fr}
  .study-sidebar {grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start}
  .study-controls, .progress-card {grid-column: auto}
  .question-workspace {grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr)}
  .hero {grid-template-columns: 1fr; padding-block: 48px; gap: var(--space-4)}
  .hero h1 {font-size: 40px}
  .hero-actions {flex-direction: row; align-items: center}
  .hero-visual {height: 360px; margin-inline-end: 0}
  .section-heading {display: block}
  .section-heading>p {margin-top: var(--space-2); max-width: 100%}
  .feature-grid, .topic-grid {grid-template-columns: 1fr; gap: var(--space-3)}
  .feature+.feature {padding-inline-start: 0; padding-top: var(--space-3); border-inline-start: 0; border-top: 1px solid var(--line)}
  .feature p, .topic-card p {max-width: 100%}
  .topic-card {min-height: 0; padding: var(--space-3)}
  .topic-icon {position: static; width: 40px; height: 40px; margin-bottom: var(--space-2)}
  .closing-inner {flex-direction: column; align-items: start}
}
@media (max-width: 600px) {
  .container {padding-inline: var(--space-2)}
  .brand-wordmark {font-size: 20px}
  .brand-wordmark small {font-size: 10px; letter-spacing: .5px}
  .brand-icon {width: 56px}
  .brand-icon img {width: 76px; left: -12px}
  .language-picker {gap: 4px}
  .language-picker select {max-width: 100px; padding-inline: 4px}
  .practice-section {padding-block: var(--space-3) var(--space-4)}
  .practice-heading {margin-bottom: var(--space-2); gap: var(--space-2); align-items: start}
  .preview-badge {white-space: nowrap; flex-shrink: 0; line-height: 1.6; text-align: end}
  .question-content {padding: 20px}
  .question-topline {gap: 12px; align-items: start}
  .question-topline>span:last-child {text-align: end; white-space: nowrap}
  .question-title, html[lang=ar] .question-title {font-size: 24px; margin-bottom: 20px}
  .question-workspace {display: grid; grid-template-columns: 1fr; gap: 20px}
  .question-workspace .question-image {height: 190px; margin: 0}
  .question-workspace .question-image.meeting {height: 270px}
  .option {padding: 14px; gap: 12px}
  .question-actions {margin-top: var(--space-2)}
  .next-action .button {width: 100%}
  .feedback {padding: 0}
  .feedback-title {padding-inline: 20px}
  .feedback-content {padding: 0 20px 20px}
  .study-sidebar {grid-template-columns: 1fr; gap: var(--space-2)}
  .study-controls, .progress-card {padding: 20px}
  .study-navigation {display: flex; gap: var(--space-1)}
  .study-tab {flex: 1; padding: 12px; gap: var(--space-1)}
  .study-tab .icon {width: 18px; height: 18px}
  .progress-amount strong {font-size: var(--type-focus)}
  .footer-inner {flex-wrap: wrap; gap: var(--space-2)}
  .footer-inner p {order: 3; width: 100%; max-width: 100%; font-size: var(--type-label)}
  .hero h1 {font-size: 36px}
  .hero-visual {height: 320px; border-radius: 72px 16px 16px 16px}
  .hero-actions {flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3)}
  .hero-actions .button {font-size: var(--type-body); min-height: 52px; padding: 14px 24px}
  .hero-actions .text-link, html[lang=ar] .hero-actions .text-link {font-size: var(--type-label)}
  .language-note {font-size: var(--type-label)}
  .photo-caption {font-size: var(--type-label); inset-inline-start: var(--space-3); inset-block-end: 160px; max-width: 200px}
  .logo-card {width: 176px; inset-inline-end: var(--space-2); inset-block-end: var(--space-3)}
  .empty-state, .results {padding: var(--space-4) 20px}
  .results-actions {flex-direction: column}
}
@media (max-width: 380px) {
  .brand {gap: 4px}
  .brand-icon {width: 44px}
  .brand-wordmark {font-size: 18px}
  .brand-wordmark small {font-size: 9px}
  .language-picker .icon {display: none}
  .language-picker select {max-width: 92px}
  .study-navigation {display: grid}
  .question-content, .study-controls, .progress-card {padding: var(--space-2)}
}