@font-face {
    font-family: "Cormorant Garamond Local";
    src: url("../fonts/CormorantGaramond-Variable.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --ink: #092f32;
    --teal: #006b67;
    --teal-dark: #00504e;
    --teal-soft: #e9f7f7;
    --gold: #eba92e;
    --gold-light: #f3c664;
    --line: #c9dfe0;
    --muted: #52666a;
    --paper: #fff;
    --serif: "Cormorant Garamond Local", Georgia, "Times New Roman", serif;
    --sans: "Segoe UI", Arial, sans-serif;
    --shadow: 0 12px 35px rgba(7, 63, 65, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #102c30; background: #fff; font-family: var(--sans); font-size: 16px; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
button, input, select { font: inherit; }
.page-shell { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }

.academy-strip { min-height: 52px; background: linear-gradient(90deg, #e8f6f5, #d9f0ef 45%, #eff9f8); color: var(--ink); }
.academy-strip__inner { min-height: 52px; display: flex; justify-content: center; align-items: center; gap: 20px; font-size: 18px; }
.academy-strip svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.academy-strip a { border: 1px solid var(--ink); border-radius: 6px; padding: 8px 16px; text-decoration: none; }

.site-header { height: 96px; background: rgba(255,255,255,.98); border-bottom: 1px solid #edf1f1; position: relative; z-index: 20; }
.site-header__inner { width: min(1436px, calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--teal-dark); text-decoration: none; font: 40px/1 var(--serif); white-space: nowrap; }
.brand__mark { width: 60px; height: 50px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.primary-nav { display: flex; align-items: center; gap: clamp(28px, 4vw, 62px); margin-left: auto; }
.primary-nav a { color: #111; text-decoration: none; font-size: 16px; }
.primary-nav a:hover { color: var(--teal); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions form { margin: 0; }
.header-user { max-width: 190px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button { display: inline-flex; min-height: 48px; padding: 11px 24px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 5px; font-weight: 500; font-size: 17px; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 78, 75, .15); }
.button--primary { color: #fff; background: linear-gradient(135deg, #00736d, #00635f); }
.button--outline { color: var(--teal-dark); background: #fff; border-color: var(--teal); }
.button--login svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.button--large { min-height: 52px; padding-inline: 25px; }
.nav-toggle { display: none; width: 44px; height: 40px; border: 0; background: none; padding: 8px; }
.nav-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--ink); }
.nav-toggle svg { width: 27px; height: 27px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-nav-account { display: none; }

.home-hero { min-height: 438px; overflow: hidden; background: radial-gradient(circle at 10% 5%, #e4f5f4, transparent 36%), linear-gradient(90deg, #f5fbfb, #fff 57%, #f1f9f8); border-bottom: 1px solid var(--line); }
.home-hero__inner { min-height: 438px; display: grid; grid-template-columns: 44% 56%; position: relative; }
.home-hero__copy { padding: 38px 0 30px 52px; z-index: 3; }
.home-hero h1, .journey-panel h1, .form-panel h1, .login-benefits h1, .login-form-panel h1, .simple-card h1 { margin: 0; color: var(--teal-dark); font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; }
.home-hero h1 { font-size: clamp(48px, 4.2vw, 64px); line-height: .98; }
.gold-rule { display: block; width: 58px; height: 3px; margin: 18px 0; background: var(--gold); }
.home-hero__copy > p { margin: 0 0 20px; font-size: 18px; line-height: 1.5; }
.home-hero__actions { display: flex; gap: 17px; }
.play-icon { width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }

.study-scene { position: relative; min-width: 0; }
.study-tablet { position: absolute; z-index: 5; top: -3px; left: 2%; width: 75%; min-width: 610px; height: 435px; overflow: hidden; background: #fff; border: 15px solid #111; border-radius: 28px; box-shadow: 0 15px 40px rgba(0,0,0,.15); transform: rotate(.3deg); }
.study-toolbar { height: 74px; border-bottom: 1px solid #e5e8e8; display: grid; grid-template-columns: 1.2fr .75fr .7fr .25fr; align-items: center; gap: 18px; padding: 15px 28px; }
.study-toolbar span { padding: 11px 14px; border: 1px solid #d6e2e2; border-radius: 5px; font-size: 14px; }
.study-verse { position: relative; padding: 20px 30px; }
.ayah-line { display: flex; align-items: flex-start; gap: 20px; }
.ayah-line b { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: var(--teal); color: #fff; border-radius: 50%; font-weight: 500; }
.ayah-line > span { font-family: "Traditional Arabic", "Segoe UI", serif; font-size: 31px; line-height: 1.9; text-align: right; }
.study-verse > p { max-width: 440px; margin: 10px 0 22px; font-size: 15px; line-height: 1.45; }
.ayah-word { position: relative; display: inline-block; padding: 0 5px; background: #cbdcf3; border-radius: 2px; }
.ayah-word .word-tip { position: absolute; z-index: 4; top: calc(100% + 12px); right: 50%; width: 135px; padding: 11px 12px; transform: translateX(50%); color: #102c30; background: #fff; border: 1px solid #9ccbcc; border-radius: 5px; box-shadow: 0 8px 18px rgba(0,0,0,.08); font: 12px/1.25 var(--sans); text-align: center; white-space: nowrap; }
.ayah-word .word-tip small { display: block; margin-top: 8px; font-size: 10px; }
.verse-tools { display: flex; align-items: center; gap: 34px; color: var(--teal-dark); font-size: 14px; }
.verse-tools span { display: inline-flex; align-items: center; gap: 8px; }
.verse-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.progress-line { height: 5px; margin: 22px 0 7px; background: #e9eaea; border-radius: 4px; }
.progress-line i { display: block; width: 23%; min-width: 8px; height: 100%; background: var(--teal); border-radius: inherit; }
.quran-stand { position: absolute; z-index: 3; right: -6%; top: 120px; width: 220px; height: 190px; background: linear-gradient(25deg, #8d592f 0 45%, transparent 46%), linear-gradient(-25deg, #70401f 0 45%, transparent 46%); transform: rotate(-7deg); }
.quran-book { position: absolute; top: -25px; left: 25px; width: 160px; height: 110px; display: grid; place-items: center; color: #d6b260; background: #214642; border: 7px double #c9a657; transform: rotate(9deg); font: 25px var(--serif); }
.journal { position: absolute; z-index: 2; left: -15%; bottom: -80px; width: 280px; height: 145px; border-radius: 8px; background: #3e5c58; transform: rotate(-12deg); box-shadow: 0 0 0 8px #314947; }

.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 14px 10px; }
.feature-row article { min-height: 95px; display: flex; align-items: center; gap: 16px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(135deg, #f8fcfc, #e7f5f4); }
.round-icon { width: 62px; height: 62px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal-dark); background: #f5fbfb; border: 1px solid var(--line); border-radius: 50%; font: 31px var(--serif); }
.feature-row h2 { margin: 0 0 5px; font: 19px var(--serif); }
.feature-row p, .steps p { margin: 0; font-size: 12px; line-height: 1.45; }
.how-it-works { padding: 0 75px 10px; }
.how-it-works > h2 { margin: 3px 0 8px; text-align: center; color: var(--teal); font: 600 29px var(--serif); font-variation-settings: "wght" 600; }
.gold-rule--center { margin: 0 auto 9px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 110px; }
.steps article { position: relative; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(135deg,#e6f4f3,#f5fbfa); }
.steps article:not(:last-child)::after { content: "··········"; position: absolute; right: -92px; color: #6e8688; letter-spacing: 5px; }
.steps article > b { position: absolute; left: -17px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-size: 18px; }
.steps .round-icon { width: 56px; height: 56px; }
.steps h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; }

.academy-banner { min-height: 132px; margin-bottom: 32px; padding: 20px 62px; position: relative; overflow: hidden; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 28px; color: #fff; background: radial-gradient(circle at 45% 30%, #08746c, transparent 45%), #005752; border: 2px solid var(--gold); border-radius: 7px; }
.academy-emblem { width: 74px; height: 74px; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 43px; }
.academy-banner h2 { margin: 0 0 9px; color: var(--gold); font: 31px var(--serif); }
.academy-banner p { max-width: 670px; margin: 0; line-height: 1.45; }
.academy-banner__actions { min-width: 330px; display: grid; grid-template-columns: auto auto; gap: 10px 16px; align-items: center; }
.button--gold { color: #1c2c2c; background: linear-gradient(135deg, #f4ca6c, #e7a82d); }
.button--light-outline { color: #fff; background: transparent; border-color: #fff; }
.academy-domain { grid-column: 1 / -1; color: var(--gold); }
.academy-banner__ornament { position: absolute; width: 90px; height: 150px; opacity: .35; background: repeating-radial-gradient(circle at center, transparent 0 7px, var(--gold) 8px 9px, transparent 10px 14px); }
.academy-banner__ornament--left { left: -40px; }
.academy-banner__ornament--right { right: -40px; }

.account-page { background: #fff; }
.account-grid { display: grid; grid-template-columns: 48% 52%; gap: 20px; margin-top: 10px; margin-bottom: 24px; }
.journey-panel, .form-panel, .login-card { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 5px 18px rgba(0,70,70,.035); }
.journey-panel { min-height: 660px; position: relative; overflow: hidden; padding: 29px 72px 0; background: radial-gradient(circle at 20% 5%, #f4fbfb, transparent 34%), linear-gradient(145deg, #fff 35%, #edfafa); }
.journey-panel::after { content: ""; position: absolute; right: -90px; bottom: 190px; width: 480px; height: 300px; border-radius: 50%; background: rgba(220,243,242,.45); transform: rotate(-30deg); }
.journey-panel h1 { font-size: 55px; line-height: 1.08; }
.journey-panel__lead { margin: 13px 0 11px; font-size: 16px; line-height: 1.45; }
.benefit-list { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; }
.benefit-list li { display: flex; align-items: center; gap: 17px; margin: 9px 0; }
.benefit-list li > span { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal-dark); background: #f3fbfa; border: 1px solid var(--line); border-radius: 50%; font: 23px var(--serif); }
.benefit-list strong, .benefit-list small { display: block; }
.benefit-list strong { margin-bottom: 4px; font-size: 15px; }
.benefit-list small { color: #334e52; font-size: 12px; }
.mini-study-device { position: absolute; z-index: 3; left: 70px; bottom: -88px; width: 82%; height: 272px; padding: 19px 26px; background: #fff; border: 13px solid #1a1c1d; border-radius: 22px; box-shadow: var(--shadow); }
.mini-study-device > div { display: flex; justify-content: space-between; font-size: 11px; }
.mini-study-device p { margin: 18px 0 0; text-align: center; font-size: 25px; }
.mini-study-device small { display: block; margin-top: 18px; color: var(--teal); }
.form-panel { min-height: 660px; padding: 29px 49px; }
.form-panel h1 { margin-bottom: 25px; text-align: center; font-size: 44px; }
.account-form { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 36px; }
.field { margin-bottom: 23px; }
.field label { display: block; margin-bottom: 10px; color: #17363a; font-size: 14px; }
.field input, .field select { width: 100%; height: 48px; padding: 0 16px; color: #163538; background: #fff; border: 1px solid #c9d7d9; border-radius: 5px; outline: none; }
.field input:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,110,105,.1); }
.field input::placeholder { color: #7e9094; }
.password-field, .icon-field { position: relative; }
.password-field input { padding-right: 45px; }
.password-field button { position: absolute; right: 9px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); border: 0; background: none; color: #4f6b6f; cursor: pointer; }
.icon-field > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 19px; z-index: 2; }
.icon-field input { padding-left: 50px; }
.check-field { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.check-field input { width: 20px; height: 20px; accent-color: var(--teal); }
.form-submit { width: 100%; margin-top: 23px; }
.account-switch { margin: 17px 0; text-align: center; font-size: 14px; }
.privacy-note { min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #274f53; background: linear-gradient(90deg, #f6fbfb, #edf8f8); border: 1px solid #d6e7e8; border-radius: 7px; font-size: 13px; }
.privacy-note > span { font-size: 25px; }
.field-validation-error, .field-error { display: block; margin-top: 5px; color: #a5352d; font-size: 12px; }
.input-validation-error { border-color: #b94b42 !important; }
.validation-summary { color: #a5352d; font-size: 13px; }
.validation-summary:empty { display: none; }
.validation-summary ul { margin: 0 0 14px; padding-left: 18px; }
.alert { padding: 12px 16px; margin: -10px 0 18px; border-radius: 5px; font-size: 14px; }
.alert--success { color: #07523f; background: #e4f8f0; border: 1px solid #a9daca; }

.login-card { min-height: 627px; margin-top: 31px; margin-bottom: 28px; display: grid; grid-template-columns: 51% 49%; overflow: hidden; border-radius: 22px; box-shadow: var(--shadow); }
.login-benefits { min-width: 0; position: relative; padding: 35px 62px; overflow: hidden; background: radial-gradient(circle at 20% 10%, #eefafa, transparent 50%), linear-gradient(145deg, #fff, #e8f8f8); }
.login-benefits::after { content: ""; position: absolute; width: 320px; height: 160px; left: -80px; bottom: -60px; background: #d9f0f0; border-radius: 50%; }
.login-benefits h1 { font-size: 54px; line-height: 1.08; }
.login-benefits > p { margin: 0 0 16px; color: #42555a; line-height: 1.45; }
.benefit-list--login { width: 62%; }
.benefit-list--login li { margin: 12px 0; }
.benefit-list--login li > span { border-radius: 10px; }
.benefit-list--login strong { font-size: 16px; }
.progress-card { position: absolute; right: 31px; top: 164px; width: 210px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: center; box-shadow: 0 6px 16px rgba(0,70,70,.09); }
.progress-card > span, .progress-card > small { display: block; font-size: 12px; }
.progress-card > b { width: 78px; height: 78px; margin: 8px auto; display: grid; place-items: center; border: 5px solid #cee3e3; border-top-color: var(--teal); border-right-color: var(--teal); border-radius: 50%; font-size: 25px; }
.progress-card hr { border: 0; border-top: 1px solid var(--line); }
.progress-card > div { display: grid; grid-template-columns: 1fr 1fr; }
.progress-card > div strong:first-child { border-right: 1px solid var(--line); }
.progress-card strong small { display: block; font-size: 9px; font-weight: 400; }
.word-card { position: absolute; right: 31px; bottom: 75px; width: 210px; min-height: 145px; padding: 14px 20px 14px 75px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 6px 16px rgba(0,70,70,.09); }
.word-card b, .word-card strong, .word-card small { display: block; }
.word-card b { font: 30px var(--serif); }
.word-card strong { color: var(--teal); }
.word-card small { font-size: 11px; }
.login-form-panel { padding: 37px 70px; }
.login-form-panel h1 { font-size: 52px; }
.login-form-panel > p { margin: 8px 0 23px; color: #3e5256; }
.login-options { margin-top: -9px; display: flex; justify-content: space-between; align-items: center; }
.or-divider { height: 1px; margin: 27px 0 20px; position: relative; background: #bdcccd; text-align: center; }
.or-divider span { position: relative; top: -12px; padding: 0 20px; color: #617477; background: #fff; }
.login-form-panel .account-switch { margin-bottom: -10px; }
.language-links { margin-top: 23px; display: flex; justify-content: center; align-items: center; gap: 15px; color: #54696c; font-size: 13px; }
.language-links > span { font-size: 22px; color: var(--ink); }
.language-links i { width: 1px; height: 16px; background: #becdce; }
.language-links .active { padding-bottom: 5px; border-bottom: 2px solid var(--teal); text-decoration: none; }

.simple-page { background: #f4fbfb; }
.simple-card { max-width: 720px; margin-top: 60px; padding: 55px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); text-align: center; }
.simple-card h1 { font-size: 44px; }
.simple-card p { line-height: 1.6; }

.legal-page { color: #183b3e; background: linear-gradient(180deg, #f1f9f8 0, #fbfdfc 360px, #fff 100%); }
.legal-hero { padding: 55px 0 48px; background: radial-gradient(circle at 15% 20%, rgba(9,112,108,.09), transparent 25%), linear-gradient(115deg, #edf8f6, #fbfdfc 68%); border-bottom: 1px solid #cee0df; }
.legal-hero__inner { max-width: 1040px; display: flex; align-items: center; gap: 28px; }
.legal-hero__icon { width: 92px; height: 92px; flex: 0 0 92px; display: grid; place-items: center; color: #08716d; background: rgba(255,255,255,.75); border: 1px solid #b8d6d4; border-radius: 50%; box-shadow: 0 10px 28px rgba(4,71,70,.08); }
.legal-hero__icon svg { width: 53px; height: 53px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.legal-eyebrow { margin: 0 0 5px; color: #a36c06; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.legal-hero h1 { margin: 0; color: var(--teal-dark); font: 700 48px/1.08 var(--serif); letter-spacing: -.02em; }
.legal-hero p:not(.legal-eyebrow) { max-width: 730px; margin: 10px 0 8px; color: #3e5659; font-size: 17px; line-height: 1.55; }
.legal-hero small { color: #607477; font-size: 12px; }
.legal-layout { max-width: 1040px; margin-top: 34px; margin-bottom: 65px; display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: start; gap: 25px; }
.legal-toc { padding: 22px 20px; background: #f2f9f8; border: 1px solid #c8dedd; border-radius: 9px; position: sticky; top: 18px; }
.legal-toc h2 { margin: 0 0 12px; color: #124f50; font: 700 21px var(--serif); }
.legal-toc a { padding: 7px 0; display: block; color: #285b5d; border-bottom: 1px solid #d9e8e7; text-decoration: none; font-size: 12px; line-height: 1.35; }
.legal-toc a:last-child { border-bottom: 0; }
.legal-toc a:hover { color: #00716d; text-decoration: underline; text-underline-offset: 3px; }
.legal-card { padding: 38px 44px 44px; background: #fff; border: 1px solid #d2e1e0; border-radius: 10px; box-shadow: 0 12px 35px rgba(5,65,65,.06); }
.legal-intro { margin: 0 0 30px; padding: 17px 19px; color: #244f51; background: #f0f8f7; border-left: 4px solid #c18a20; border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.65; }
.legal-card section { padding: 5px 0 24px; scroll-margin-top: 24px; border-bottom: 1px solid #dbe7e6; }
.legal-card section + section { padding-top: 24px; }
.legal-card section:last-child { padding-bottom: 0; border-bottom: 0; }
.legal-card h2 { margin: 0 0 11px; color: #075758; font: 700 27px/1.2 var(--serif); }
.legal-card h3 { margin: 18px 0 5px; color: #1d5052; font-size: 15px; }
.legal-card p { margin: 0 0 11px; color: #3d5154; font-size: 14px; line-height: 1.75; }
.legal-card ul { margin: 8px 0 5px; padding-left: 22px; color: #3d5154; }
.legal-card li { margin: 7px 0; padding-left: 3px; font-size: 14px; line-height: 1.6; }
.legal-card a { color: #00706d; font-weight: 600; text-underline-offset: 3px; }

@media(max-width:800px){.legal-hero{padding:38px 0}.legal-hero__inner{align-items:flex-start}.legal-hero__icon{width:70px;height:70px;flex-basis:70px}.legal-hero__icon svg{width:40px;height:40px}.legal-hero h1{font-size:39px}.legal-layout{grid-template-columns:1fr}.legal-toc{position:static}.legal-toc a{display:inline-block;margin:0 12px 4px 0;border-bottom:0}.legal-card{padding:32px}}
@media(max-width:520px){.legal-hero__inner{display:block}.legal-hero__icon{margin-bottom:17px}.legal-hero h1{font-size:35px}.legal-hero p:not(.legal-eyebrow){font-size:15px}.legal-layout{margin-top:20px;margin-bottom:35px}.legal-toc{display:none}.legal-card{padding:25px 20px}.legal-card h2{font-size:23px}}

@media (max-width: 1180px) {
    .primary-nav { gap: 20px; }
    .brand { font-size: 32px; }
    .brand__mark { width: 48px; }
    .study-tablet { left: -2%; }
    .home-hero__copy { padding-left: 5px; }
    .academy-banner { grid-template-columns: 72px 1fr; }
    .academy-banner__actions { grid-column: 2; }
    .account-grid { grid-template-columns: 43% 57%; }
    .journey-panel { padding-inline: 34px; }
    .progress-card, .word-card { display: none; }
    .benefit-list--login { width: 100%; }
}

@media (max-width: 920px) {
    .page-shell, .site-header__inner { width: min(100% - 32px, 720px); }
    .academy-strip__inner { padding: 8px 16px; font-size: 14px; }
    .academy-strip__inner > span { text-align: center; }
    .academy-strip a { display: none; }
    .site-header { height: 78px; }
    .nav-toggle { display: block; margin-left: auto; }
    .primary-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 20px; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
    .primary-nav.is-open { display: flex; }
    .header-actions .button--login { display: none; }
    .header-actions .button { min-height: 42px; padding: 8px 14px; font-size: 14px; }
    .header-user { display: none; }
    .home-hero__inner { grid-template-columns: 1fr; padding-top: 34px; }
    .home-hero__copy { padding: 0 0 30px; }
    .study-scene { min-height: 390px; }
    .study-tablet { left: 0; width: 94%; min-width: 650px; transform: scale(.82); transform-origin: left top; }
    .feature-row { grid-template-columns: 1fr 1fr; }
    .how-it-works { padding-inline: 0; }
    .steps { grid-template-columns: 1fr; gap: 14px; }
    .steps article::after { display: none; }
    .academy-banner { grid-template-columns: 70px 1fr; padding: 24px; }
    .academy-banner__actions { min-width: 0; }
    .account-grid, .login-card { grid-template-columns: 1fr; }
    .journey-panel { min-height: 560px; }
    .form-panel { padding: 35px; }
    .login-benefits { min-height: 500px; }
    .login-form-panel { padding: 38px; }
}

@media (max-width: 600px) {
    .page-shell, .site-header__inner { width: min(100% - 24px, 520px); }
    .brand { font-size: 25px; gap: 6px; }
    .brand__mark { width: 39px; height: 38px; }
    .header-actions .button--primary { display: none; }
    .home-hero h1, .journey-panel h1, .login-benefits h1 { font-size: 42px; }
    .home-hero__actions { flex-direction: column; align-items: stretch; }
    .study-scene { min-height: 310px; }
    .study-tablet { min-width: 610px; transform: scale(.53); }
    .quran-stand, .journal { display: none; }
    .feature-row { grid-template-columns: 1fr; }
    .feature-row article { min-height: 85px; }
    .how-it-works > h2 { font-size: 25px; }
    .academy-banner { grid-template-columns: 1fr; text-align: center; }
    .academy-emblem { margin: auto; }
    .academy-banner__actions { grid-column: auto; grid-template-columns: 1fr; }
    .academy-domain { grid-column: auto; }
    .journey-panel { min-height: 520px; padding: 30px 24px 0; }
    .journey-panel__lead br { display: none; }
    .mini-study-device { left: 24px; width: 90%; }
    .form-panel, .login-form-panel { padding: 28px 20px; }
    .form-panel h1, .login-form-panel h1 { font-size: 37px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .login-card { margin-top: 16px; }
    .login-benefits { min-height: 570px; padding: 32px 24px; }
    .login-options, .language-links { gap: 10px; font-size: 12px; }
    .desktop-only { display: none; }
}

/* Precision pass for the supplied 1536px source mocks. */
.inline-icon { width: 19px !important; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.academy-strip a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; }
.brand { margin-left: 37px; font-size: 43px; }
.brand__mark { width: 64px; height: 52px; }
.primary-nav { transform: translateX(-80px); }
.header-actions { transform: translateX(-3px); }
.header-actions .button { padding-inline: 18px; }
.login-page .button--login { position: relative; }
.login-page .button--login::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -14px; background: var(--teal); }
.home-hero__inner { grid-template-columns: 49.56% 50.44%; }
.study-tablet { left: 0; width: 613px; min-width: 0; }
.hero-photo { position: absolute; z-index: 1; width: 1000px; max-width: none; height: 438px; left: -272px; top: 0; object-fit: cover; pointer-events: none; }
.round-icon { font: inherit; }
.round-icon svg, .benefit-list li > span svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-list li > span { font: inherit; }
.benefit-list li > span svg { width: 25px; height: 25px; }
.steps article:not(:last-child)::after { content: "··········"; }
.academy-emblem { font-size: inherit; }
.academy-emblem svg { width: 55px; height: 55px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.academy-domain { display: inline-flex; align-items: center; gap: 9px; }
.account-grid--signup { width: min(1436px, calc(100% - 100px)); grid-template-columns: 47.2% 1fr; }
.password-field button { display: grid; place-items: center; }
.password-field button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-field > span { display: grid; place-items: center; font-size: inherit; }
.icon-field > span svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note > span { display: grid; place-items: center; font-size: inherit; }
.privacy-note > span svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.benefit-list--login .arabic-icon { font: 30px/1 "Traditional Arabic", serif; }
.language-links > span { display: grid; place-items: center; font-size: inherit; }
.language-links > span svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.form-grid .field { margin-bottom: 0; }
.form-grid { margin-bottom: 28px; row-gap: 25px; }
.signup-page .academy-banner { width: min(1436px, calc(100% - 100px)); }
.home-page .academy-banner { width: min(1305px, calc(100% - 64px)); padding-top: 17px; padding-bottom: 17px; transform: translateX(-6px); }
.home-hero .gold-rule { margin: 12px 0; }
.signup-page .account-grid { margin-top: 5px; }
.signup-page .journey-panel, .signup-page .form-panel { min-height: 664px; }
.signup-page .journey-panel { padding-top: 23px; }
.signup-page .form-panel { padding-top: 28px; }
.signup-page .account-form > .field { margin-bottom: 14px; }
.signup-page .form-submit { min-height: 56px; margin-top: 20px; }
.signup-page .account-switch { margin: 22px 0 17px; }
.signup-page .privacy-note { margin-top: 12px; }
.signup-page .academy-banner { min-height: 140px; padding-inline: 112px; column-gap: 55px; }
.login-form-panel .field { margin-bottom: 16px; }
.login-form-panel { padding-bottom: 24px; }
.benefit-list--login { padding-top: 0; margin-top: 7px; }
.benefit-list--login li { gap: 22px; }
.benefit-list--login li > span { width: 66px; height: 66px; margin-left: 3px; }
.benefit-list--login li > span svg { width: 33px; height: 33px; }
.progress-card { right: 31px; width: 214px; padding: 12px 16px 22px; }
.progress-card > b { width: 88px; height: 88px; margin: 12px auto 8px; }
.word-card { right: 31px; width: 214px; }
.login-page .academy-banner { padding-left: 83px; padding-right: 79px; column-gap: 46px; }
.login-page .login-card { margin-bottom: 29px; }
.login-page .academy-banner { min-height: 143px; }
.login-page .language-links { margin-top: 19px; }
.login-page .academy-banner__actions { display: block; min-width: 332px; }
.login-page .academy-banner__actions .button { width: 100%; min-height: 59px; }
.word-card__audio { position: absolute; left: 16px; top: 77px; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; }
.word-card__bookmark { position: absolute; right: 16px; top: 13px; }
.word-card__audio svg, .word-card__bookmark svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1300px) and (min-width: 1181px) {
    .brand { margin-left: 27px; font-size: 38px; }
    .brand__mark { width: 55px; height: 48px; }
    .primary-nav { gap: 36px; transform: translateX(20px); }
    .header-actions { transform: none; }
}

@media (max-width: 1180px) {
    .brand { margin-left: 0; font-size: 32px; }
    .brand__mark { width: 48px; }
    .primary-nav, .header-actions { transform: none; }
    .home-page .academy-banner { transform: none; }
    .account-grid--signup { width: min(100% - 64px, 1080px); grid-template-columns: 43% 57%; }
    .signup-page .academy-banner, .home-page .academy-banner { width: min(100% - 64px, 1080px); }
}

@media (max-width: 920px) {
    .home-hero__inner { grid-template-columns: 1fr; }
    .study-tablet { width: 615px; }
    .account-grid--signup { width: min(100% - 32px, 720px); grid-template-columns: 1fr; }
    .signup-page .academy-banner, .home-page .academy-banner { width: min(100% - 32px, 720px); }
    .signup-page .academy-banner, .login-page .academy-banner { padding-inline: 24px; column-gap: 28px; }
    .login-page .academy-banner__actions { min-width: 0; }
}

@media (max-width: 600px) {
    .brand { font-size: 25px; }
    .brand__mark { width: 39px; height: 38px; }
    .study-tablet { width: 610px; }
    .hero-photo { display: none; }
    .account-grid--signup { width: min(100% - 24px, 520px); }
    .signup-page .academy-banner, .home-page .academy-banner { width: min(100% - 24px, 520px); }
    .form-grid { margin-bottom: 0; }
}

/* Contact page */
.contact-page main, .reset-page main, .about-page main { overflow: hidden; }
.contact-page .academy-strip, .contact-page .academy-strip__inner { min-height: 55px; }
.breadcrumbs { display: flex; align-items: center; gap: 16px; color: #152c30; font-size: 16px; }
.breadcrumbs a { color: var(--teal-dark); text-decoration: none; }
.breadcrumbs span:first-of-type { color: #6c7d80; }
.contact-main { min-height: 703px; position: relative; padding-top: 27px; background: radial-gradient(ellipse at 9% 20%, #e9f7f6 0 18%, transparent 18.2%), radial-gradient(ellipse at 83% 23%, #edf8f7 0 21%, transparent 21.2%), linear-gradient(180deg,#fbfefe,#fff 58%); }
.contact-intro { text-align: center; }
.contact-intro .breadcrumbs { justify-content: center; }
.contact-intro h1 { margin: 20px 0 4px; color: var(--teal-dark); font: 500 59px/1 var(--serif); letter-spacing: -.02em; }
.contact-intro > p { margin: 17px 0 40px; font-size: 20px; }
.contact-dots, .reset-dots { position: absolute; width: 82px; height: 72px; opacity: .55; background-image: radial-gradient(circle, #8bd1d1 2px, transparent 2.4px); background-size: 15px 15px; }
.contact-dots--left { left: 24px; top: 109px; }
.contact-dots--right { right: 29px; top: 40px; }
.contact-grid { width: min(1338px, calc(100% - 64px)); display: grid; grid-template-columns: 59% 39%; gap: 2%; }
.contact-form-card, .contact-help-card { min-height: 468px; border: 1px solid #cbdfe0; border-radius: 16px; background: rgba(255,255,255,.86); }
.contact-form-card { padding: 22px 37px 13px; }
.contact-form-card h2, .contact-help-card h2 { margin: 0; color: var(--teal-dark); font: 500 34px var(--serif); }
.contact-form-card h2 { display: flex; align-items: center; gap: 23px; margin-bottom: 18px; }
.contact-status { margin: -12px 0 10px; padding: 8px 12px; color: #07523f; background: #e4f8f0; border: 1px solid #a9daca; border-radius: 5px; font-size: 12px; }
.contact-heading-icon { width: 59px; height: 59px; display: grid; place-items: center; border-radius: 50%; background: #e4f3f2; }
.contact-heading-icon svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form-card .field { margin-bottom: 16px; }
.contact-form-card .field label { margin-bottom: 8px; }
.contact-form-card .field input, .contact-form-card .field select { height: 42px; }
.contact-form-card textarea { width: 100%; height: 84px; padding: 12px 15px; resize: vertical; font: inherit; color: #163538; border: 1px solid #c9d7d9; border-radius: 6px; outline: none; }
.contact-form-card textarea::placeholder { color: #7e9094; }
.contact-form-card .contact-message-field { margin-bottom: 10px; }
.contact-submit-row { display: flex; align-items: center; gap: 32px; }
.contact-submit { width: 241px; min-height: 55px; flex: 0 0 auto; }
.contact-submit svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-submit-row > p { display: flex; align-items: center; gap: 15px; margin: 0; color: #657478; font-size: 13px; line-height: 1.55; }
.contact-submit-row > p > span { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #edf8f7; }
.contact-submit-row > p svg { width: 20px; height: 20px; fill: none; stroke: var(--teal-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-help-card { padding: 31px 40px 21px; background: linear-gradient(135deg,rgba(247,252,252,.94),rgba(234,247,247,.9)); }
.contact-help-card h2 { margin-bottom: 14px; }
.contact-help-card article { min-height: 104px; display: flex; align-items: center; gap: 25px; border-bottom: 1px solid #cfe0e1; }
.contact-help-card article > span { width: 65px; height: 65px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #deefee; }
.contact-help-card article svg { width: 37px; height: 37px; fill: none; stroke: var(--teal-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-help-card h3 { margin: 0 0 7px; color: #083f43; font-size: 17px; font-weight: 500; }
.contact-help-card article p { margin: 0; font-size: 14px; line-height: 1.45; }
.contact-response { display: flex; align-items: center; gap: 17px; margin: 17px 0 0; font-size: 14px; }
.contact-response > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #e2f2f1; }
.contact-response svg { width: 23px; height: 23px; fill: none; stroke: var(--teal-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-response strong { color: var(--teal-dark); font-weight: 500; }
.contact-page .academy-banner { width: min(1338px, calc(100% - 64px)); min-height: 132px; margin-top: 0; padding-inline: 96px; grid-template-columns: 95px 1fr auto; column-gap: 35px; }
.contact-page .academy-banner__actions { display: block; min-width: 215px; }
.contact-page .academy-banner__actions .button { width: 100%; }

/* Password reset request page */
.reset-page { background: #f9fdfd; }
.reset-page .academy-strip, .reset-page .academy-strip__inner { min-height: 60px; }
.reset-main { min-height: 722px; position: relative; padding-top: 19px; background: radial-gradient(ellipse at 13% 39%, #edf8f7 0 21%, transparent 21.2%), radial-gradient(ellipse at 87% 27%, #edf8f7 0 19%, transparent 19.2%), linear-gradient(180deg,#fbfefe,#fff); }
.reset-card { width: 607px; height: 516px; margin: 0 auto; padding: 27px 59px 24px; position: relative; z-index: 2; background: rgba(255,255,255,.94); border: 1px solid #d5e3e3; border-radius: 21px; box-shadow: 0 13px 30px rgba(8,73,73,.08); text-align: center; }
.reset-illustration { width: 190px; height: 128px; margin: -2px auto -1px; position: relative; }
.reset-illustration > span { width: 111px; height: 111px; margin: auto; display: grid; place-items: center; color: var(--teal-dark); border-radius: 50%; background: radial-gradient(circle,#e6f4f3,#f3fafa); }
.reset-illustration svg { width: 71px; height: 71px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reset-illustration::before, .reset-illustration::after { content: ""; position: absolute; bottom: 10px; width: 42px; height: 56px; opacity: .5; background: radial-gradient(ellipse at 50% 90%, transparent 0 36%, #c7e3e1 38% 41%, transparent 43%), radial-gradient(ellipse at 15% 70%, #c7e3e1 0 12%, transparent 14%); transform: rotate(-18deg); }
.reset-illustration::before { left: 7px; }
.reset-illustration::after { right: 7px; transform: scaleX(-1) rotate(-18deg); }
.reset-card h1 { margin: 0; color: var(--teal-dark); font: 500 40px/1.1 var(--serif); }
.reset-card .gold-rule { width: 52px; margin-top: 11px; margin-bottom: 10px; }
.reset-card > p { margin: 0 0 21px; line-height: 1.55; }
.reset-card .field { margin-bottom: 14px; text-align: left; }
.reset-card .field label { margin-bottom: 8px; font-weight: 600; }
.reset-card .field input { height: 49px; }
.reset-card form .button { width: 100%; min-height: 50px; }
.reset-status { margin: -11px 0 12px; padding: 9px 12px; color: #07523f; background: #e4f8f0; border: 1px solid #a9daca; border-radius: 5px; font-size: 12px; line-height: 1.35; }
.reset-card .or-divider { margin: 23px 0 19px; }
.reset-back { display: inline-flex; align-items: center; gap: 12px; color: var(--teal-dark); text-decoration: none; }
.reset-back > span { font-size: 28px; line-height: 1; }
.reset-help { width: 838px; height: 147px; margin-top: 20px; padding: 18px 30px; position: relative; z-index: 2; display: grid; grid-template-columns: 112px 1fr 185px; align-items: center; border: 1px solid #cdddc9; border-radius: 13px; background: linear-gradient(100deg,#f8fbf5,#fbfcf9); }
.reset-help__icon { width: 87px; height: 87px; display: grid; place-items: center; border: 1px solid #cfdfd0; border-radius: 50%; }
.reset-help__icon svg { width: 57px; height: 57px; fill: none; stroke: var(--teal-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reset-help > div:nth-child(2) { min-height: 108px; padding-left: 32px; border-left: 1px solid #ceddd0; }
.reset-help h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.reset-help p { margin: 7px 0; color: #17383b; font-size: 14px; }
.reset-help p::first-letter { color: var(--teal); }
.reset-support { min-height: 108px; padding-left: 38px; display: flex; flex-direction: column; justify-content: center; gap: 9px; border-left: 1px solid #ceddd0; font-size: 13px; }
.reset-support a { text-decoration: none; font-weight: 600; }
.reset-support b { margin-left: 9px; font-size: 24px; font-weight: 400; vertical-align: -2px; }
.reset-dots--left { left: 41px; top: 164px; }
.reset-dots--right { right: 55px; top: 354px; }
.reset-page .academy-banner { width: min(1320px, calc(100% - 64px)); min-height: 111px; margin-top: 0; padding: 13px 92px; grid-template-columns: 82px 1fr auto; }
.reset-page .academy-banner h2 { font-size: 28px; }
.reset-page .academy-banner__actions { display: block; min-width: 200px; }
.reset-page .academy-banner__actions .button { min-height: 50px; }

/* About page */
.about-page .academy-strip, .about-page .academy-strip__inner { min-height: 50px; }
.about-page .site-header { height: 80px; }
.about-page .primary-nav .active { color: var(--teal-dark); position: relative; }
.about-page .primary-nav .active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 3px; background: var(--teal); border-radius: 3px; }
.about-hero { height: 401px; overflow: hidden; background: radial-gradient(circle at 8% 20%,#e8f6f5,transparent 32%), linear-gradient(90deg,#f7fcfc,#fff 62%,#f3faf9); border-bottom: 1px solid #e8eeee; }
.about-hero__inner { height: 100%; position: relative; }
.about-hero__copy { position: relative; z-index: 5; padding: 23px 0 0 44px; }
.about-hero__copy h1 { margin: 49px 0 15px; color: var(--teal-dark); font: 500 59px/.98 var(--serif); letter-spacing: -.02em; }
.about-hero__copy > p { margin: 0; font-size: 21px; line-height: 1.55; }
.about-study-device { position: absolute; z-index: 4; top: 18px; right: 92px; width: 535px; height: 380px; overflow: hidden; padding: 12px 14px; background: #fff; border: 13px solid #151719; border-radius: 25px; box-shadow: 0 14px 30px rgba(0,0,0,.14); transform: rotate(.35deg); }
.about-study-toolbar { height: 54px; display: grid; grid-template-columns: 132px 90px 88px 1fr; gap: 10px; align-items: start; font-size: 11px; }
.about-study-toolbar > span { padding: 10px 12px; border: 1px solid #d6e2e2; border-radius: 5px; }
.about-study-toolbar > small { padding-top: 5px; text-align: right; font-size: 9px; }
.about-study-toolbar > small i { width: 70px; height: 4px; margin-top: 8px; display: block; background: #edf0f0; border-radius: 4px; }
.about-study-toolbar > small i::before { content: ""; display: block; width: 3px; height: 100%; background: var(--teal); }
.about-study-device article { min-height: 181px; padding: 12px 13px; display: flex; gap: 16px; border: 1px solid #e4dddd; border-radius: 6px; }
.about-study-device article + article { min-height: 102px; margin-top: 10px; }
.about-study-device article > b { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50%; font-size: 12px; }
.about-study-device article > div { min-width: 0; flex: 1; }
.about-study-device article p { margin: 0 0 10px; font: 24px/1.55 "Traditional Arabic",serif; text-align: right; }
.about-study-device article small { display: block; font-size: 11px; line-height: 1.35; }
.about-study-device article footer { margin-top: 15px; color: var(--teal-dark); font-size: 10px; }
.about-notebook { position: absolute; z-index: 2; left: 467px; bottom: -3px; width: 255px; height: 120px; overflow: hidden; transform: rotate(4deg); }
.about-notebook img { position: absolute; width: 1060px; max-width: none; left: -103px; top: -294px; }
.about-pencil-cup { position: absolute; z-index: 3; right: -4px; bottom: 53px; width: 116px; height: 176px; border-radius: 15px 15px 35px 35px; background: linear-gradient(90deg,#ddd7ca,#f7f4ec 45%,#ddd5c7); box-shadow: 0 14px 17px rgba(0,0,0,.12); }
.about-pencil-cup i { position: absolute; width: 5px; height: 121px; bottom: 148px; left: 56px; border-radius: 4px; background: #a27635; transform: rotate(22deg); transform-origin: bottom; }
.about-pencil-cup i:nth-child(2) { left: 65px; height: 128px; transform: rotate(25deg); background: #bd913f; }
.about-pencil-cup i:nth-child(3) { left: 49px; height: 105px; transform: rotate(18deg); background: #8d652d; }
.about-purpose { width: min(1290px, calc(100% - 64px)); padding-top: 8px; text-align: center; }
.about-purpose > h2 { margin: 0 0 2px; color: var(--teal-dark); font: 500 30px var(--serif); }
.about-purpose > p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.about-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 23px; }
.about-values article { height: 103px; display: flex; align-items: center; gap: 15px; padding: 11px 19px; text-align: left; border: 1px solid #cae0e1; border-radius: 12px; background: linear-gradient(135deg,#f7fcfc,#fff); }
.about-values article > span { width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e6f4f3; }
.about-values svg { width: 44px; height: 44px; fill: none; stroke: var(--teal-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about-values h3 { margin: 0 0 7px; color: #064b4e; font-size: 16px; font-weight: 500; white-space: nowrap; }
.about-values p { margin: 0; font-size: 12px; line-height: 1.45; }
.founder-note { width: 982px; height: 105px; margin: 17px auto 7px; display: grid; grid-template-columns: 76px 50px 1fr; align-items: center; text-align: left; border: 1px solid #cfe2e3; border-radius: 12px; background: linear-gradient(90deg,#f7fcfc,#edf8f8); }
.founder-note > span { width: 83px; height: 83px; margin-left: 76px; display: grid; place-items: center; border: 1px solid #c8dfe0; border-radius: 50%; background: #fff; transform: translateX(-1px); }
.founder-note > span svg { width: 49px; fill: none; stroke: var(--teal-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.founder-note > i { margin-left: 79px; color: var(--teal-dark); }
.founder-note > i svg { width: 35px; height: 70px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.founder-note > div { margin-left: 77px; }
.founder-note h3 { margin: 0 0 3px; color: var(--teal-dark); font: 500 24px var(--serif); }
.founder-note p { margin: 0; font-size: 12px; line-height: 1.35; }
.about-page .academy-banner { width: min(1328px, calc(100% - 64px)); min-height: 132px; margin-bottom: 34px; padding-inline: 79px; grid-template-columns: 92px 1fr auto; }
.about-page .academy-banner__actions { min-width: 430px; }
.about-page .academy-banner h2 { font-size: 31px; white-space: nowrap; }

/* Shared footer */
.site-footer { color: #e8f5f4; background: #063f3d; border-top: 3px solid var(--gold); }
.site-footer__inner { padding: 42px 24px 34px; display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 55px; }
.site-footer .brand { margin: 0; color: #fff; font-size: 34px; }
.site-footer .brand__mark { width: 50px; height: 43px; }
.site-footer__brand p { margin: 15px 0 0; color: #c6dcda; font-size: 14px; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.site-footer h2 { margin: 0 0 7px; color: var(--gold-light); font: 500 21px var(--serif); }
.site-footer a, .site-footer button { padding: 0; color: #e8f5f4; background: none; border: 0; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.site-footer a:hover, .site-footer button:hover { color: var(--gold-light); text-decoration: underline; }
.site-footer form { margin: 0; }
.site-footer__bottom { min-height: 54px; padding: 16px 24px; display: flex; justify-content: space-between; gap: 20px; color: #b8d2d0; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; }

/* New-password completion screen */
.reset-complete-main { min-height: 610px; padding-top: 35px; }
.reset-complete-card { height: auto; min-height: 545px; }
.reset-complete-card .reset-illustration { height: 112px; }
.reset-complete-card > p { margin-bottom: 17px; }
.reset-complete-card .field { margin-bottom: 15px; }
.reset-complete-card .password-field input { width: 100%; height: 49px; padding: 0 45px 0 16px; border: 1px solid #c9d7d9; border-radius: 5px; }

/* Learning, article and invitation pages */
.learning-page .academy-strip,.learning-page .academy-strip__inner{min-height:48px}.learning-page .site-header{height:76px}.learning-page .site-header__inner{width:min(1390px,calc(100% - 64px))}.learning-page .brand{font-size:37px}.learning-page .brand__mark{width:57px}.learning-page .brand small{margin-left:-13px;font-size:.55em}.learning-page .primary-nav .active{color:var(--teal-dark);position:relative}.learning-page .primary-nav .active:after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:3px;border-radius:2px;background:var(--teal)}
.arabic-hero{height:374px;overflow:hidden;background:radial-gradient(circle at 8% 25%,#e6f5f4,transparent 32%),linear-gradient(90deg,#f6fbfb,#fff 58%,#edf8f7);border-bottom:1px solid #e3eded}.arabic-hero__inner{height:100%;position:relative;display:grid;grid-template-columns:47% 53%}.arabic-hero__copy{padding:30px 0 0 42px}.arabic-hero h1{margin:0;color:var(--teal-dark);font:500 64px/.97 var(--serif)}.arabic-hero__copy>p{margin:0;font-size:23px;line-height:1.42}.course-facts{width:458px;min-height:44px;margin-top:24px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;color:#064f52;border:1px solid #9bc7c7;border-radius:7px}.course-facts i{width:4px;height:4px;border-radius:50%;background:#729698}.arabic-preview{height:355px;margin-top:-2px;display:grid;grid-template-columns:116px 1fr;overflow:hidden;padding:12px;background:#fff;border:14px solid #17191a;border-radius:23px;box-shadow:0 14px 25px #0002;transform:rotate(.2deg)}.arabic-preview aside{display:flex;flex-direction:column;align-items:center;gap:12px;padding:7px;border-right:1px solid #d7e3e3}.arabic-preview aside small{font-size:10px;align-self:flex-start}.arabic-preview aside b{width:20px;height:20px;display:grid;place-items:center;border:1px solid #a7c8c8;border-radius:50%;font-size:10px}.arabic-preview aside .current{color:#fff;background:var(--teal)}.arabic-preview>div{padding:5px 13px}.arabic-preview h2{margin:0 0 14px;font-size:16px}.marks,.words{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.marks span,.words span{padding:8px;display:grid;place-items:center;border:1px solid #d6e3e4;border-radius:6px;font:30px serif}.marks small,.words small{margin-top:6px;font:10px var(--sans);text-align:center}.words{grid-template-columns:repeat(4,1fr);margin-top:12px}.words span{font-size:25px}.listen-line{height:46px;margin-top:13px;padding:0 13px;display:flex;align-items:center;border:1px solid #d8e4e4;border-radius:6px;font-size:11px}.listen-line b{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;background:#e8f4f3;border-radius:50%}.listen-line small{margin-left:35px}
.lesson-catalog{padding:16px 8px;display:grid;grid-template-columns:1fr 296px;gap:18px}.lesson-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px 13px}.lesson-grid article{height:168px;padding:12px 11px 10px;position:relative;text-align:center;border:1px solid #c8dddd;border-radius:7px}.lesson-grid article>b{position:absolute;left:14px;top:12px;width:28px;height:28px;display:grid;place-items:center;color:#fff;background:var(--teal);border-radius:50%}.lesson-grid h2{min-height:39px;margin:0 5px 3px 40px;font-size:15px;font-weight:500;line-height:1.2}.lesson-grid p{height:34px;margin:0;font:23px serif}.lesson-status{padding:4px 23px;color:#076c42;background:#dcefd9;border-radius:10px;font-size:11px}.lesson-status.soon{color:#4b5e60;background:#e7eded}.lesson-grid a{height:31px;margin-top:5px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#087a73,#00635f);border-radius:4px;text-decoration:none;font-size:12px}.lesson-grid a.preview{color:var(--teal-dark);background:#fff;border:1px solid var(--teal)}.lesson-guide{grid-row:1 / span 2;grid-column:2;padding:15px 17px;border:1px solid #c8dddd;border-radius:9px;background:linear-gradient(145deg,#fff,#eff9f8)}.lesson-guide h2{margin:0 0 15px;font:25px var(--serif)}.lesson-guide>div{display:flex;gap:14px;margin:13px 0}.lesson-guide>div>b{width:48px;height:48px;display:grid;place-items:center;background:#e4f3f2;border-radius:50%;font-size:24px}.lesson-guide p{margin:0}.lesson-guide strong,.lesson-guide small{display:block}.lesson-guide small{margin-top:4px;font-size:11px}.lesson-guide hr{border:0;border-top:1px dashed #9cc2c2}.lesson-guide>.button{width:100%;margin-top:10px;font-size:13px}.arabic-page>.academy-banner{width:min(1360px,calc(100% - 64px));min-height:110px;margin:0 auto 24px;padding-block:12px}
.lesson-page .site-footer{display:none}.lesson-app{display:grid;grid-template-columns:315px minmax(600px,1fr) 300px;min-height:755px}.lesson-nav{border-right:1px solid #d6e2e2}.lesson-nav h2{height:57px;margin:0;padding:18px 48px;color:#064f52;font:22px var(--serif)}.lesson-nav>a{height:59px;padding:9px 18px 8px 48px;display:flex;align-items:center;gap:17px;color:#15484b;border-top:1px solid #e4ecec;text-decoration:none}.lesson-nav>a.active{margin:0 20px 0 32px;padding-left:15px;border:1px solid var(--teal);border-radius:8px;background:#f4fbfb}.lesson-nav>a>b{width:26px;height:26px;display:grid;place-items:center;border:1px solid #a8caca;border-radius:50%}.lesson-nav>a.active>b{color:#fff;background:var(--teal)}.lesson-nav span{display:flex;flex-direction:column;gap:4px}.lesson-nav strong{font-size:13px}.lesson-nav small{font-size:10px}.lesson-nav i{margin-left:auto;font-style:normal;font-size:28px}.lesson-nav button{width:262px;height:60px;margin:13px 32px;display:flex;align-items:center;justify-content:center;gap:18px;color:#064f52;background:#fff;border:1px solid var(--teal);border-radius:6px}.lesson-content{padding:16px 34px 10px}.crumb{color:#365a5d;font-size:13px}.lesson-content h1{margin:18px 0 5px;color:#073f42;font:500 42px var(--serif)}.lesson-content h1 span{font-family:serif}.lesson-lead{margin:0 0 12px;font-size:14px;line-height:1.45}.objective{height:69px;padding:9px 15px;display:flex;align-items:center;gap:16px;border:1px solid #abd4d3;border-radius:6px;background:linear-gradient(90deg,#f0f9f8,#edf9f8)}.objective>b{font-size:38px}.objective p{margin:0}.objective strong,.objective small{display:block}.objective small{margin-top:5px;font-size:12px}.vowel-grid{margin-top:13px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.vowel-grid article{height:195px;padding:11px;text-align:center;border:1px solid #d1e0e0;border-radius:7px}.vowel-grid i,.vowel-grid b,.vowel-grid strong,.vowel-grid em{display:block}.vowel-grid i{height:25px;font:36px serif}.vowel-grid b{font:27px serif}.vowel-grid strong{font-size:13px}.vowel-grid em{font:50px serif}.vowel-grid p{margin:4px 0;font-size:12px}.fathah{color:#008c47}.dammah{color:#006dde}.kasrah{color:#cf5200}.sukun{color:#7b3aa6}.quran-example{height:116px;margin-top:10px;padding:10px 16px;border:1px solid #d1e0e0;border-radius:7px}.quran-example h2{margin:0;font-size:15px}.quran-example>div{display:flex;align-items:center;justify-content:space-around}.quran-example span{font:39px serif}.quran-example button{padding:9px 17px;color:#064f52;background:#fff;border:1px solid var(--teal);border-radius:5px}.quran-example p{font-size:10px}.quick-check{height:129px;margin-top:10px;border:1px solid #d1e0e0;border-radius:7px}.quick-check h2{margin:0;padding:6px 9px;font-size:12px}.quick-check h2 small{margin-left:20px;font-weight:400}.quick-check>div{display:grid;grid-template-columns:1fr 1.1fr 1fr}.quick-check article{padding:7px;border-top:1px solid #e0e8e8;border-right:1px solid #e0e8e8;font-size:9px}.quick-check article>strong{font-size:24px}.quick-check article p{margin:5px 0;display:flex;gap:7px}.quick-check article button{min-width:44px;height:36px;background:#fff;border:1px solid #d8e3e3;border-radius:4px;font-size:9px}.quick-check footer{display:flex;justify-content:flex-end;gap:30px;margin-top:9px}.quick-check footer button{width:173px;height:30px;color:#064f52;background:#fff;border:1px solid var(--teal);border-radius:4px}.quick-check footer button:last-child{color:#fff;background:var(--teal)}.lesson-tools{padding:14px 16px;border-left:1px solid #d6e2e2}.lesson-tools section{padding:16px;margin-bottom:14px;border:1px solid #d1e0e0;border-radius:7px}.lesson-tools h2{margin:0 0 12px;font-size:16px}.lesson-tools .progress-ring{width:78px;height:78px;float:left;margin-right:20px;display:grid;place-items:center;border:7px solid #dbe7e7;border-top-color:var(--teal);border-radius:50%;font-size:20px}.lesson-tools section:first-child p{font-size:13px;line-height:1.6}.lesson-tools section:first-child>small{display:block;clear:both;padding-top:8px}.lesson-tools textarea{width:100%;height:112px;padding:10px;border:1px solid #cbdcdc;border-radius:6px;resize:none}.lesson-tools section>button{float:right;padding:7px 12px;color:#527576;background:#fff;border:1px solid #9dc5c5;border-radius:4px}.lesson-tools section:last-child p{margin:4px 0;padding:8px;border:1px solid #e0e8e8;border-radius:5px;font-size:10px}.lesson-tools section:last-child p small{float:right}.lesson-tools section:last-child>a{display:block;margin-top:15px;text-align:center;font-size:11px}.lesson-page>.academy-banner{width:calc(100% - 136px);min-height:106px;margin:12px auto 25px;padding-block:10px}
.articles-intro{height:329px;position:relative;padding:17px 10px}.articles-intro__copy{padding-top:31px}.articles-intro h1{margin:0 0 13px;color:var(--teal-dark);font:500 54px/.98 var(--serif)}.articles-intro__copy>p{margin:0;font-size:17px;line-height:1.55}.articles-intro nav{margin-top:20px;display:flex;gap:8px}.articles-intro nav button{padding:10px 22px;color:var(--teal-dark);background:#fff;border:1px solid #8bbbbb;border-radius:22px}.articles-intro nav .active{color:#fff;background:var(--teal)}.article-still-life{position:absolute;left:505px;top:2px;width:510px;height:310px}.tablet-page,.paper-page{position:absolute;padding:28px 15px;text-align:center;color:#173d3e;background:#fff;border:9px solid #17191a;border-radius:11px;box-shadow:0 10px 20px #0002;transform:rotate(-9deg);font:22px serif}.tablet-page{left:65px;top:20px;width:170px;height:226px}.paper-page{left:220px;top:9px;width:185px;height:210px;border:1px solid #d7c6a9;border-radius:0;transform:rotate(-12deg)}.tablet-page small,.paper-page small{font-size:13px;line-height:2}.green-journal{position:absolute;left:240px;bottom:2px;width:170px;height:120px;background:#7f927b;border-radius:8px;transform:rotate(17deg);box-shadow:0 6px 10px #0003}.article-still-life>i{position:absolute;right:45px;bottom:5px;width:6px;height:135px;background:#32654e;transform:rotate(28deg)}.featured-article{position:absolute;right:8px;top:21px;width:317px;height:295px;padding:14px 16px;background:linear-gradient(135deg,#eff9f8,#fff);border:1px solid #c8dfdf;border-radius:12px}.featured-article>span{padding:7px 14px;display:inline-block;color:#075659;background:#dbeeed;border-radius:7px;font-size:11px}.featured-article h2{margin:11px 0 4px;color:#064f52;font:26px/1.05 var(--serif)}.featured-article p{margin:0;font-size:13px;line-height:1.5}.featured-article small{display:block;margin:7px 0}.featured-article .button{min-height:38px;padding:7px 18px;font-size:14px}.article-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 16px}.article-cards article{height:160px;padding:18px;display:flex;gap:20px;border:1px solid #c9dfdf;border-radius:8px}.article-cards article>b{width:80px;height:80px;flex:0 0 auto;display:grid;place-items:center;color:#064f52;background:#eef8f7;border:1px solid #bcdada;border-radius:50%;font:38px var(--serif)}.article-cards small{color:#076565}.article-cards h2{margin:4px 0;color:#073f42;font:22px var(--serif)}.article-cards p{margin:0;font-size:12px;line-height:1.45}.article-cards a{display:block;margin-top:5px;font-size:12px;text-decoration:none}.article-subscribe{height:78px;margin-top:10px;padding:11px 105px;display:flex;align-items:center;gap:20px;background:linear-gradient(90deg,#edf8f7,#fff,#edf8f7);border:1px solid #c9dfdf;border-radius:14px}.article-subscribe>b{width:46px;height:46px;display:grid;place-items:center;border:1px solid #bfdbdb;border-radius:50%;font-size:24px}.article-subscribe h2{margin:0;font:24px var(--serif)}.article-subscribe p{margin:0;font-size:11px}.article-subscribe form{margin-left:auto;width:500px;display:flex}.article-subscribe input{height:44px;flex:1;padding:0 16px;border:1px solid var(--teal);border-radius:5px 0 0 5px}.article-subscribe button{width:145px;color:#fff;background:var(--teal);border:0;border-radius:0 5px 5px 0}.articles-page>.academy-banner{width:min(1320px,calc(100% - 64px));min-height:121px;margin-top:8px;margin-bottom:28px;padding-block:12px}
.article-layout{padding:20px 20px 0;display:grid;grid-template-columns:1fr 320px;gap:35px}.article-body header{height:194px;padding-top:20px;position:relative;border-bottom:1px solid #bcd6d6}.article-body header>span{padding:5px 13px;background:#e5f2f1;border:1px solid #c3dcdc;border-radius:5px}.article-body h1{margin:8px 0 2px;color:#073f42;font:500 47px var(--serif)}.article-body header p{margin:0;line-height:1.45}.article-body header small{display:block;margin-top:10px}.article-book{position:absolute;right:40px;top:10px;width:160px;height:110px;display:grid;place-items:center;color:#d1ad55;background:#164843;border:7px double #c6a249;transform:rotate(-13deg);font-size:50px}.article-book i{position:absolute;right:-15px;bottom:-25px;width:75px;height:25px;background:#60835a;transform:rotate(25deg)}.article-body>section{padding:9px 0;border-bottom:1px solid #c8dddd}.article-body>section h2{margin:0 0 4px;color:#064f52;font:25px var(--serif)}.article-body>section p{margin:0;font-size:12px;line-height:1.5}.article-body blockquote{margin:8px 0 0;padding:10px 24px;display:grid;grid-template-columns:1fr 1fr;background:#edf8f7;border:1px solid #bdd9d9;border-radius:8px}.article-body blockquote span{font:23px/1.7 serif;text-align:center}.article-body blockquote p{padding-left:30px;border-left:1px solid #bdd9d9}.references{height:64px;margin-top:9px;padding:8px 12px;display:flex;gap:12px;border:1px solid #c9dddd;border-radius:8px;font-size:10px}.references>b{font-size:28px}.references p{margin:0}.related-title{margin:9px 0 0;font:20px var(--serif)}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.related a{padding:10px 15px;border:1px solid #c9dddd;border-radius:7px;text-decoration:none}.related b,.related small{display:block}.related b{font:16px var(--serif)}.related small{margin-top:5px;font-size:9px}.article-sidebar section{margin-bottom:17px;padding:17px 27px;border:1px solid #ccdddd;border-radius:12px}.article-sidebar h2{margin:0 0 14px;color:#073f42;font:24px var(--serif)}.article-sidebar section>a{margin:16px 0;display:block;font-size:11px;text-decoration:none}.article-sidebar p{font-size:11px;line-height:1.5}.article-sidebar .button{font-size:11px}.share-buttons{display:flex;justify-content:space-between}.share-buttons button,.share-buttons a{width:58px;color:#064f52;background:#fff;border:0;text-align:center;text-decoration:none;font-size:28px}.share-buttons small{display:block;margin-top:8px;font-size:9px}.article-detail-page>.academy-banner{width:min(1315px,calc(100% - 64px));min-height:100px;margin-top:10px;padding-block:8px}.article-detail-page>.academy-banner h2{font-size:28px}
.download-hero{height:390px;overflow:hidden;background:radial-gradient(circle at 6% 35%,#e8f6f5,transparent 35%),linear-gradient(90deg,#f6fbfb,#fff 52%,#edf8f7)}.download-hero__inner{height:100%;display:grid;grid-template-columns:45% 55%;position:relative}.download-hero__inner>div:first-child{padding:53px 0 0 52px}.download-hero h1{margin:0;color:#073f42;font:500 64px/.98 var(--serif)}.download-hero p{font-size:20px;line-height:1.5}.download-scene{position:relative}.download-laptop{position:absolute;top:10px;left:10px;width:530px;height:280px;padding:12px;background:#fff;border:13px solid #17191a;border-bottom-width:30px;border-radius:16px;box-shadow:0 13px 25px #0002;transform:rotate(1deg)}.download-laptop:after{content:"";position:absolute;left:-100px;right:-100px;bottom:-60px;height:48px;background:linear-gradient(#bbb,#777);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}.download-laptop header{font-size:10px}.download-laptop header span{float:right}.download-laptop>p{margin:22px 0 9px;text-align:center;font:29px serif}.download-laptop>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.download-laptop>div span{padding:10px;text-align:center;border:1px solid #c9dddd;border-radius:6px;font:23px serif}.download-laptop small{display:block;margin-top:6px;font:10px var(--sans);line-height:1.7}.download-stand{position:absolute;right:-80px;top:170px;width:210px;height:170px;background:linear-gradient(28deg,#875229 0 47%,transparent 48%),linear-gradient(-28deg,#6d3c20 0 47%,transparent 48%)}.download-content{padding-top:12px;display:grid;grid-template-columns:45% 55%;gap:20px}.download-content>article{height:310px;padding:14px 18px;border:1px solid #c9dddd;border-radius:11px}.download-content h2{margin:0;color:#064f52;font:28px var(--serif)}.download-content ul{margin:7px 0 13px;padding:0 0 0 82px;list-style:none}.download-content li{margin:8px 0;font-size:13px}.download-content li:before{content:"✓";margin-right:12px;padding:1px 4px;color:#fff;background:var(--teal);border-radius:50%}.online-more{height:114px;padding:15px;display:grid;grid-template-columns:65px 1fr 145px;gap:15px;align-items:center;background:#edf8f7;border:1px solid #c9dddd;border-radius:7px}.online-more>b{font-size:42px}.online-more p{margin:0}.online-more strong,.online-more small{display:block}.online-more strong{font:20px var(--serif)}.online-more small{font-size:11px;line-height:1.5}.online-more .button{font-size:12px}.download-content form{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.download-content label{font-size:11px}.download-content input,.download-content select{width:100%;height:35px;margin-top:3px;padding:0 12px;border:1px solid #afcdcd;border-radius:5px}.download-check{grid-column:1/-1}.download-check input{width:18px;height:18px;margin:0 8px 0 0;vertical-align:middle}.download-content form>.button,.download-content form>small,.download-content form>p{grid-column:1/-1}.download-content form>.button{height:39px;min-height:39px}.download-content form>small{font-size:9px}.download-content form>p{margin:0;padding-top:8px;border-top:1px solid #cedddd;text-align:center;font-size:11px}.download-page>.academy-banner{width:min(1350px,calc(100% - 64px));min-height:120px;margin-top:14px;padding-block:12px}
.invitation-hero{height:365px;overflow:hidden;background:radial-gradient(circle at 12% 30%,#e8f6f5,transparent 35%),linear-gradient(90deg,#f6fbfb,#fff 55%,#eef8f7)}.invitation-hero>.page-shell{height:100%;position:relative;padding:18px 20px}.invitation-copy{padding:40px 0 0 35px}.invitation-copy h1{margin:0;color:#064f52;font:500 62px/.98 var(--serif)}.invitation-copy p{font-size:19px;line-height:1.55}.invitation-visual{position:absolute;right:70px;bottom:0;width:520px;height:300px;border-radius:50% 50% 0 0;background:linear-gradient(150deg,#dff1ef,#f7fbfb)}.invitation-book{position:absolute;left:170px;top:65px;width:190px;height:125px;padding-top:42px;text-align:center;color:#d7b35a;background:#164b46;border:8px double #c9a54c;transform:rotate(-8deg);font:24px serif}.invitation-stand{position:absolute;left:130px;top:155px;width:280px;height:155px;background:linear-gradient(25deg,#8b542b 0 47%,transparent 48%),linear-gradient(-25deg,#72411f 0 47%,transparent 48%)}.invitation-visual>i{position:absolute;left:235px;bottom:0;width:15px;height:120px;background:#174f4b;clip-path:polygon(0 100%,100% 100%,60% 0,40% 0)}.belief-section{padding:17px 34px;text-align:center}.belief-section>h2{margin:0;color:#064f52;font:32px var(--serif)}.belief-section>p{margin:3px 0 14px;font-size:13px}.belief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.belief-grid article{min-height:100px;padding:15px 16px 12px 67px;position:relative;text-align:left;border:1px solid #c9dddd;border-radius:8px}.belief-grid article>b{position:absolute;left:16px;top:18px;width:38px;height:38px;display:grid;place-items:center;color:#fff;background:var(--teal);border-radius:50%}.belief-grid h3{margin:0;color:#064f52;font:20px var(--serif)}.belief-grid p{margin:4px 0;font-size:11px;line-height:1.45}.invitation-lower{padding:4px 34px 12px;display:grid;grid-template-columns:44% 56%;gap:18px}.invitation-lower>article{padding:18px 25px;border:1px solid #c9dddd;border-radius:10px}.invitation-lower h2{margin:0;color:#064f52;font:28px var(--serif)}.quran-message{text-align:center;background:linear-gradient(145deg,#f5fbfb,#e9f6f5)}.quran-message>p{margin:12px;font:34px serif}.quran-message blockquote{margin:8px;font:20px var(--serif)}.quran-message .button{min-height:40px;font-size:13px}.begin-exploring>div{display:flex;gap:12px;margin:8px 0}.begin-exploring>div>b{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;color:#fff;background:var(--teal);border-radius:50%}.begin-exploring p{margin:0}.begin-exploring strong,.begin-exploring small{display:block}.begin-exploring small{font-size:10px}.begin-exploring footer{display:flex;gap:12px;justify-content:flex-end}.begin-exploring footer .button{min-height:38px;font-size:12px}.journey-note{min-height:46px;margin-bottom:10px;padding:13px;text-align:center;color:#31585a;background:#edf8f7;border:1px solid #c9dddd;border-radius:7px;font-size:12px}.invitation-page>.academy-banner{width:min(1320px,calc(100% - 64px));min-height:110px;padding-block:10px}

@media (max-width: 1180px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-main { padding-bottom: 24px; }
    .contact-help-card { margin-top: 20px; }
    .contact-page .academy-banner, .reset-page .academy-banner, .about-page .academy-banner { width: min(100% - 64px,1080px); }
    .about-study-device { right: -120px; opacity: .9; }
    .about-pencil-cup { display: none; }
    .about-values { grid-template-columns: 1fr 1fr; }
    .founder-note { width: 90%; }
}

@media (max-width: 920px) {
    .contact-intro h1 { font-size: 46px; }
    .contact-grid, .contact-page .academy-banner, .reset-page .academy-banner, .about-page .academy-banner { width: min(100% - 32px,720px); }
    .contact-page .academy-banner, .reset-page .academy-banner, .about-page .academy-banner { padding-inline: 24px; }
    .reset-card { width: min(100% - 32px,607px); }
    .reset-help { width: min(100% - 32px,720px); grid-template-columns: 90px 1fr; height: auto; }
    .reset-support { grid-column: 1 / -1; min-height: 64px; margin-top: 12px; padding: 12px 0 0; border-left: 0; border-top: 1px solid #ceddd0; }
    .about-hero { height: auto; min-height: 680px; }
    .about-hero__copy { padding-left: 0; }
    .about-study-device { top: 270px; left: 0; right: auto; }
    .about-notebook { display: none; }
    .about-purpose { width: min(100% - 32px,720px); }
    .about-page .academy-banner h2 { white-space: normal; }
    .about-values { grid-template-columns: 1fr; }
    .founder-note { width: 100%; grid-template-columns: 74px 1fr; padding: 15px; height: auto; }
    .founder-note > span, .founder-note > i, .founder-note > div { margin-left: 0; transform: none; }
    .founder-note > i { display: none; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 35px; }
}

@media (max-width: 600px) {
    .contact-intro h1 { font-size: 38px; }
    .contact-intro > p { font-size: 16px; }
    .contact-grid, .contact-page .academy-banner, .reset-page .academy-banner, .about-page .academy-banner { width: min(100% - 24px,520px); }
    .contact-form-card, .contact-help-card { padding: 24px 18px; }
    .contact-form-card h2, .contact-help-card h2 { font-size: 29px; }
    .contact-form__row { grid-template-columns: 1fr; gap: 0; }
    .contact-submit-row { align-items: stretch; flex-direction: column; gap: 16px; }
    .contact-submit { width: 100%; }
    .reset-card { width: min(100% - 24px,520px); height: auto; padding: 25px 20px; }
    .reset-card h1 { font-size: 35px; }
    .reset-help { width: min(100% - 24px,520px); grid-template-columns: 1fr; text-align: center; }
    .reset-help__icon { margin: auto; }
    .reset-help > div:nth-child(2) { padding: 15px 0 0; border: 0; }
    .about-hero__copy h1 { font-size: 43px; }
    .about-hero__copy > p br { display: none; }
    .about-study-device { transform: scale(.66); transform-origin: left top; }
    .about-values { grid-template-columns: 1fr; }
    .about-purpose { width: min(100% - 24px,520px); }
    .founder-note { grid-template-columns: 1fr; text-align: center; }
    .founder-note > span { margin: auto; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; }
}

@media(max-width:1180px){.arabic-hero__inner{grid-template-columns:42% 58%}.arabic-hero h1,.download-hero h1,.invitation-copy h1{font-size:51px}.lesson-grid{grid-template-columns:repeat(3,1fr)}.lesson-app{grid-template-columns:240px minmax(560px,1fr)}.lesson-tools{display:none}.lesson-nav>a{padding-left:20px}.lesson-nav>a.active{margin-left:10px}.lesson-nav button{width:210px;margin-left:14px}.articles-intro{height:auto;min-height:530px}.article-still-life{left:auto;right:320px;top:180px}.featured-article{top:180px}.article-layout{grid-template-columns:1fr 280px}.article-book{opacity:.35}.download-hero__inner{grid-template-columns:42% 58%}.download-laptop{transform:scale(.85);transform-origin:left top}.belief-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.learning-page .primary-nav .active:after{display:none}.arabic-hero,.download-hero,.invitation-hero{height:auto;min-height:650px}.arabic-hero__inner,.download-hero__inner{grid-template-columns:1fr}.arabic-hero__copy,.download-hero__inner>div:first-child,.invitation-copy{padding:30px 0}.arabic-preview{width:650px;max-width:100%;margin:0 auto}.lesson-catalog{grid-template-columns:1fr}.lesson-grid{grid-template-columns:repeat(2,1fr)}.lesson-guide{grid-column:1;grid-row:auto}.lesson-app{display:block}.lesson-nav,.lesson-tools{display:none}.lesson-content{max-width:720px;margin:auto;padding:25px 16px}.vowel-grid{grid-template-columns:repeat(2,1fr)}.quick-check{height:auto}.quick-check>div{grid-template-columns:1fr}.quick-check footer{padding:10px}.articles-intro{min-height:780px}.article-still-life{left:0;right:auto;top:350px;transform:scale(.8);transform-origin:left top}.featured-article{top:390px}.article-cards{grid-template-columns:1fr 1fr}.article-subscribe{height:auto;padding:20px}.article-subscribe form{width:45%}.article-layout{grid-template-columns:1fr}.article-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:15px}.download-scene{min-height:330px}.download-content{grid-template-columns:1fr}.download-content>article{height:auto}.invitation-visual{opacity:.35;right:-120px}.belief-grid{grid-template-columns:1fr 1fr}.invitation-lower{grid-template-columns:1fr}.article-body header{height:auto;min-height:215px}}
@media(max-width:600px){.arabic-hero h1,.download-hero h1,.invitation-copy h1{font-size:43px}.arabic-hero__copy>p,.download-hero p,.invitation-copy p{font-size:17px}.course-facts{width:100%;font-size:11px}.arabic-preview{height:340px;grid-template-columns:70px 1fr;border-width:8px}.marks,.words{gap:4px}.marks span,.words span{padding:4px;font-size:20px}.lesson-grid,.vowel-grid,.article-cards,.belief-grid{grid-template-columns:1fr}.lesson-content h1{font-size:34px}.quran-example{height:auto}.quran-example>div{flex-wrap:wrap}.quick-check footer{gap:8px}.article-still-life{display:none}.articles-intro{min-height:650px}.featured-article{left:0;right:0;top:350px;width:100%}.articles-intro nav{overflow:auto}.articles-intro nav button{white-space:nowrap}.article-subscribe{align-items:flex-start;flex-wrap:wrap}.article-subscribe form{width:100%}.article-layout{padding-inline:0}.article-body h1{font-size:37px}.article-book{display:none}.article-body blockquote{grid-template-columns:1fr}.article-body blockquote p{padding:10px 0 0;border:0;border-top:1px solid #bdd9d9}.related,.article-sidebar{grid-template-columns:1fr}.download-hero{min-height:600px}.download-laptop{left:-10px;width:570px;transform:scale(.59)}.download-content form{grid-template-columns:1fr}.download-content form>label{grid-column:1}.online-more{height:auto;grid-template-columns:50px 1fr}.online-more .button{grid-column:1/-1}.invitation-visual{display:none}.invitation-copy{padding-top:45px}.belief-section,.invitation-lower{padding-inline:0}.learning-page>.academy-banner{width:calc(100% - 24px)}}

/* Articles page precision pass */
.articles-page{background:#fefefd}.articles-page main{overflow:hidden}.articles-page .page-shell{width:min(1320px,calc(100% - 64px))}.articles-page .site-header{background:#fff}.articles-page .brand{font-weight:500}.articles-page .primary-nav{gap:64px}.articles-page .primary-nav a{font-size:16px}.articles-page .primary-nav .active:after{bottom:-23px}.articles-intro{height:329px;padding:17px 4px 0;isolation:isolate}.articles-intro .crumb{display:flex;gap:16px;align-items:center;color:#50676b;font-size:12px}.articles-intro .crumb a{color:inherit;text-decoration:none}.articles-intro__copy{position:relative;z-index:4;padding-top:29px}.articles-intro h1{margin:0 0 14px;color:#064b4d;font:500 55px/.98 var(--serif);letter-spacing:-.018em}.articles-intro__copy>p{margin:0;color:#263c40;font-size:16px;line-height:1.72}.articles-intro nav{margin-top:17px;display:flex;gap:7px}.articles-intro nav button{height:38px;padding:0 21px;color:#07565a;background:#fff;border:1px solid #8ebfc0;border-radius:22px;font-size:12px}.articles-intro nav .active{padding-inline:23px;color:#fff;background:#087a74;border-color:#087a74}.article-hero-art{position:absolute;z-index:1;left:478px;top:0;width:595px;height:330px;object-fit:contain;clip-path:inset(0 82px 0 0);pointer-events:none}.articles-intro:after{content:"";position:absolute;z-index:0;top:2px;right:-117px;width:126px;height:282px;background:url("../images/articles-hero-still-life.png") right center/595px 330px no-repeat;pointer-events:none}.featured-article{z-index:3;right:0;top:20px;width:317px;height:295px;padding:13px 15px 14px;background:linear-gradient(135deg,#f0f9f8 0%,#f7fbfb 52%,#fff 100%);border:1px solid #c4dddd;border-radius:12px;box-shadow:none}.featured-article>span{height:31px;padding:0 13px;display:inline-flex;align-items:center;gap:8px;color:#07565a;background:#dcefee;border:0;border-radius:7px;font-size:11px}.featured-article>span svg{width:16px;height:16px;fill:currentColor}.featured-article h2{margin:10px 0 6px;color:#064b4d;font:500 27px/.98 var(--serif);letter-spacing:-.01em}.featured-article p{margin:0;color:#34484b;font-size:12px;line-height:1.55}.featured-article small{margin:9px 0 10px;display:flex;align-items:center;gap:11px;color:#28595b;font-size:10px}.featured-article small i{width:3px;height:3px;background:var(--teal);border-radius:50%}.featured-article .button{width:143px;min-height:38px;padding:7px 16px;justify-content:space-between;border-radius:4px;font-size:13px}.featured-article .button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.article-cards{padding:0 4px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}.article-cards article{height:160px;padding:19px 18px;display:grid;grid-template-columns:82px 1fr;align-items:start;gap:22px;background:#fff;border:1px solid #c9dfdf;border-radius:8px}.article-card__icon{width:82px;height:82px;display:grid;place-items:center;color:#064f52;background:linear-gradient(145deg,#f5fbfb,#eaf6f5);border:1px solid #bddada;border-radius:50%}.article-card__icon svg{width:57px;height:57px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.article-cards article>div{min-width:0}.article-cards small{display:block;margin:-2px 0 4px;color:#08706e;font-size:11px;line-height:1.2}.article-cards h2{margin:0 0 4px;color:#073f42;font:500 21px/1.04 var(--serif);letter-spacing:-.006em}.article-cards p{max-width:290px;margin:0;color:#34484b;font-size:11px;line-height:1.45}.article-cards a{margin-top:5px;display:inline-flex;align-items:center;gap:10px;color:#05706d;font-size:11px;text-decoration:none}.article-cards a span{font-size:15px;line-height:1}
.article-subscribe{height:78px;margin-top:10px;padding:10px 179px 10px 111px;position:relative;display:flex;align-items:center;gap:20px;overflow:hidden;background:linear-gradient(90deg,#eef8f7,#fff 44%,#eef8f7);border:1px solid #c4dddd;border-radius:13px}.article-subscribe__icon{z-index:2;width:47px;height:47px;display:grid;place-items:center;color:#064f52;background:#fff;border:1px solid #bfdada;border-radius:50%}.article-subscribe__icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.article-subscribe h2{margin:0;color:#073f42;font:500 23px/1 var(--serif)}.article-subscribe p{margin:4px 0 0;color:#345659;font-size:10px}.article-subscribe form{width:483px;margin-left:auto;display:flex}.article-subscribe input{height:44px;min-width:0;flex:1;padding:0 16px;color:#17383a;background:#fff;border:1px solid var(--teal);border-radius:5px 0 0 5px;font-size:13px}.article-subscribe button{width:144px;color:#fff;background:#08766f;border:0;border-radius:0 5px 5px 0;font-size:13px}.article-subscribe__leaf{position:absolute;left:11px;top:10px;width:83px;height:64px;opacity:.42;background:radial-gradient(ellipse at 18% 70%,#b9dcd7 0 14%,transparent 15%),radial-gradient(ellipse at 39% 49%,#b9dcd7 0 15%,transparent 16%),radial-gradient(ellipse at 61% 31%,#b9dcd7 0 13%,transparent 14%);transform:rotate(-18deg)}.article-subscribe__leaf:after{content:"";position:absolute;left:14px;bottom:14px;width:58px;height:1px;background:#9fcfc9;transform:rotate(-32deg)}.article-subscribe__dots{position:absolute;right:20px;width:56px;height:48px;opacity:.55;background:radial-gradient(circle,#9ccfca 0 1.4px,transparent 1.7px) 0 0/10px 10px}.articles-page>.academy-banner{width:min(1320px,calc(100% - 64px));min-height:124px;margin-top:8px;margin-bottom:28px;padding:14px 90px;grid-template-columns:82px 1fr auto}.articles-page>.academy-banner .academy-emblem{width:74px;height:74px}.articles-page>.academy-banner h2{margin-bottom:7px;font-size:31px}.articles-page>.academy-banner p{font-size:14px}.articles-page>.academy-banner__actions{min-width:320px}.articles-page>.academy-banner .button{min-width:216px}

@media(max-width:1180px){.articles-page .primary-nav{gap:25px}.article-hero-art{left:43%;opacity:.72}.articles-intro:after{display:none}.featured-article{right:0}.article-cards article{grid-template-columns:68px 1fr;gap:15px}.article-card__icon{width:68px;height:68px}.article-card__icon svg{width:47px;height:47px}.article-subscribe{padding-inline:50px}.articles-page>.academy-banner{padding-inline:45px}}
@media(max-width:920px){.articles-intro{min-height:780px}.article-hero-art{left:0;top:335px;width:590px}.featured-article{top:390px}.article-cards{grid-template-columns:1fr 1fr}.article-subscribe{padding:18px 24px}.article-subscribe__leaf,.article-subscribe__dots{display:none}.articles-page>.academy-banner{padding-inline:24px}}
@media(max-width:600px){.articles-page .page-shell{width:min(100% - 24px,520px)}.articles-intro{min-height:665px}.articles-intro h1{font-size:43px}.articles-intro__copy>p br{display:none}.article-hero-art{display:none}.featured-article{top:360px}.article-cards{grid-template-columns:1fr;padding:0}.article-subscribe{height:auto;align-items:flex-start;flex-wrap:wrap}.article-subscribe form{width:100%}.articles-page>.academy-banner{width:calc(100% - 24px)}}

/* Article detail precision pass */
.article-detail-page{background:#fefefd}.article-detail-page main{overflow:hidden}.article-detail-page .site-header{background:#fff}.article-detail-page .brand{font-weight:500}.article-detail-page .primary-nav{gap:64px}.article-detail-page .primary-nav a{font-size:16px}.article-detail-page .primary-nav .active:after{bottom:-23px}.article-detail-page .page-shell{width:min(1312px,calc(100% - 64px))}.article-layout{padding:18px 0 0;display:grid;grid-template-columns:minmax(0,900px) 320px;justify-content:start;gap:36px}.article-breadcrumb{height:31px;display:flex;align-items:center;gap:15px;color:#50676b;font-size:11px}.article-breadcrumb a{display:inline-flex;align-items:center;color:inherit;text-decoration:none}.article-breadcrumb svg{width:15px;height:15px;fill:none;stroke:var(--teal-dark);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.article-body header{height:192px;padding-top:8px;position:relative;border-bottom:1px solid #bcd6d6}.article-category{height:28px;padding:0 13px;display:inline-flex;align-items:center;color:#0a5558;background:#e4f2f1;border:1px solid #c3dddd;border-radius:5px;font-size:12px}.article-body h1{margin:6px 0 1px;color:#063f42;font:500 47px/.98 var(--serif);letter-spacing:-.018em}.article-body header>p{margin:0;color:#34474b;font-size:14px;line-height:1.55}.article-body header>small{margin-top:9px;display:flex;align-items:center;gap:10px;color:#3a5d60;font-size:11px}.article-body header>small svg{width:17px;height:17px;fill:none;stroke:#086663;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.article-body header>small i{width:3px;height:3px;margin-left:2px;background:#0b6a67;border-radius:50%}.article-detail-art{position:absolute;right:-8px;top:-18px;width:330px;height:203px;object-fit:cover;object-position:center;mix-blend-mode:multiply;pointer-events:none}.article-body>section{min-height:89px;padding:10px 0 9px;border-bottom:1px solid #c8dddd}.article-body>section:first-of-type{min-height:98px}.article-body>section h2{margin:0 0 4px;color:#064f52;font:500 25px/1.05 var(--serif);letter-spacing:-.006em}.article-body>section p{margin:0;color:#34484b;font-size:11px;line-height:1.55}.article-body>section#gradual{min-height:178px}.article-body blockquote{height:95px;margin:8px 0 0;padding:9px 18px;display:grid;grid-template-columns:56px 382px 1fr;align-items:center;background:linear-gradient(90deg,#edf8f7,#f5fbfb);border:1px solid #bdd9d9;border-radius:8px}.verse-mark{width:37px;height:43px;display:grid;place-items:center;color:#075b5d;background:radial-gradient(circle at center,#fff 0 45%,transparent 46%);border:1px solid #7caeac;clip-path:polygon(50% 0,62% 9%,76% 7%,82% 21%,95% 28%,91% 42%,100% 53%,90% 65%,91% 80%,76% 85%,67% 98%,51% 93%,37% 100%,28% 87%,12% 83%,12% 67%,1% 57%,8% 43%,4% 29%,19% 20%,25% 6%,40% 8%)}.verse-mark span{font:10px var(--sans)}.article-body blockquote>span{padding-right:20px;font:22px/1.7 serif;text-align:center}.article-body blockquote>p{align-self:stretch;padding:8px 0 0 32px;color:#24474a;border-left:1px solid #bdd9d9;font-size:10px;line-height:1.55}.references{height:62px;margin-top:9px;padding:7px 12px;display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;background:#fff;border:1px solid #c9dddd;border-radius:8px;font-size:9px}.references>span{width:40px;height:40px;display:grid;place-items:center;color:#064f52;background:#f5fbfb;border:1px solid #c3dddd;border-radius:50%}.references>span svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.references p{margin:0;line-height:1.45}.references strong{font-size:10px}.related-title{margin:8px 0 0;color:#073f42;font:500 19px/1 var(--serif)}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.related a{height:62px;padding:10px 15px;color:#063f42;background:#fff;border:1px solid #c9dddd;border-radius:7px;text-decoration:none}.related b,.related small{display:block}.related b{font:500 16px/1.05 var(--serif)}.related small{margin-top:7px;color:#4b6a6d;font-size:8px}.related small i{width:3px;height:3px;margin:0 8px;display:inline-block;background:var(--teal);border-radius:50%}
.article-sidebar{padding-top:3px}.article-sidebar section{margin-bottom:17px;padding:16px 27px;background:#fff;border:1px solid #ccdddd;border-radius:12px}.article-sidebar h2{margin:0 0 13px;color:#073f42;font:500 24px/1 var(--serif)}.article-sidebar .on-this-page{height:183px}.article-sidebar .on-this-page>a{height:36px;margin:0;display:flex;align-items:center;gap:13px;color:#075c5f;font-size:10px;text-decoration:none}.on-this-page svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.article-sidebar .continue-studying{height:184px}.article-sidebar p{margin:0;color:#42575a;font-size:11px;line-height:1.55}.continue-studying .button{width:100%;height:45px;min-height:45px;margin-top:19px;padding:0 13px;display:grid;grid-template-columns:27px 1fr 10px;color:#fff;border-radius:5px;font-size:10px}.continue-studying .button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.continue-studying .button b{font-size:22px;font-weight:400}.article-sidebar .share-article{height:180px}.share-article h2{margin-bottom:10px}.share-buttons{margin-top:14px;display:flex;justify-content:space-between}.share-buttons button,.share-buttons a{width:65px;padding:0;display:flex;flex-direction:column;align-items:center;color:#064f52;background:none;border:0;text-align:center;text-decoration:none;cursor:pointer}.share-buttons button>span,.share-buttons a>span{width:47px;height:47px;display:grid;place-items:center;background:#fff;border:1px solid #bcd8d8;border-radius:7px}.share-buttons svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.share-buttons small{display:block;margin-top:7px;font-size:9px}.article-detail-page>.academy-banner{width:min(1312px,calc(100% - 64px));min-height:100px;margin-top:10px;margin-bottom:30px;padding:8px 65px;grid-template-columns:82px 1fr auto}.article-detail-page>.academy-banner h2{margin-bottom:5px;font-size:28px}.article-detail-page>.academy-banner p{max-width:590px;font-size:11px}.article-detail-page>.academy-banner .academy-emblem{width:72px;height:72px}.article-detail-page>.academy-banner .academy-banner__actions{min-width:330px}.article-detail-page>.academy-banner .button{min-width:255px;color:var(--gold);background:transparent;border:1px solid var(--gold)}

@media(max-width:1280px){.article-detail-page .primary-nav{gap:28px}.article-layout{grid-template-columns:minmax(0,1fr) 290px;gap:25px}.article-detail-art{opacity:.6}.article-sidebar section{padding-inline:20px}.article-detail-page>.academy-banner{padding-inline:35px}}
@media(max-width:920px){.article-layout{grid-template-columns:1fr}.article-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:15px}.article-sidebar section{margin:0}.article-detail-art{opacity:.28}.article-detail-page>.academy-banner{padding-inline:24px}}
@media(max-width:600px){.article-detail-page .page-shell{width:min(100% - 24px,520px)}.article-body h1{font-size:38px}.article-detail-art{display:none}.article-body header{height:auto;min-height:210px}.article-body>section p br{display:none}.article-body blockquote{height:auto;grid-template-columns:45px 1fr}.article-body blockquote>p{grid-column:1/-1;padding:10px 0 0;border:0;border-top:1px solid #bdd9d9}.references{height:auto}.related,.article-sidebar{grid-template-columns:1fr}.article-sidebar section{height:auto!important}.article-detail-page>.academy-banner{width:calc(100% - 24px)}}

@media(min-width:1281px){.article-detail-page .article-body header{height:186px}.article-detail-page .article-detail-art{right:-120px}}

/* Keep the articles hero copy from intercepting the featured-card link. */
.articles-page .articles-intro__copy{width:650px;max-width:100%;pointer-events:none}.articles-page .articles-intro__copy nav,.articles-page .articles-intro__copy nav button{pointer-events:auto}.articles-page .featured-article,.articles-page .featured-article a{pointer-events:auto}

/* Shared wordmark and homepage typography refinement. */
.site-header .brand{gap:11px;font-family:"Cormorant Garamond Local",Georgia,"Times New Roman",serif;font-size:41px;font-weight:700;font-variation-settings:"wght" 700;letter-spacing:-.025em}.site-header .brand__mark{width:60px;height:50px}.home-page .academy-strip__inner{font-size:19px;font-weight:400;letter-spacing:-.01em}.home-page .primary-nav a{font-size:17px;font-weight:400;letter-spacing:-.012em}.home-page .home-hero h1{font-family:"Cormorant Garamond Local",Georgia,"Times New Roman",serif;font-size:clamp(48px,4.2vw,63px);font-weight:560;font-variation-settings:"wght" 560;line-height:.98;letter-spacing:-.018em}.home-page .home-hero__copy>p{font-size:18px;line-height:1.5;letter-spacing:-.005em}

@media(max-width:1300px) and (min-width:1181px){.site-header .brand{font-size:39px}.site-header .brand__mark{width:57px}}
.learning-page .site-header .brand{font-size:37px}.learning-page .site-header .brand__mark{width:57px}

.site-footer .brand__mark{filter:brightness(0) invert(1)}

/* Homepage decorative refinement — visual only. */
.home-page {
    background: #fdfcf8;
}

.home-page .academy-strip {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        url("../images/promo-rosette.svg") right center / 205px 76px no-repeat,
        linear-gradient(100deg, #075854 0%, #004b48 48%, #003f3d 100%);
    border-bottom: 1px solid rgba(224, 163, 40, .34);
}

.home-page .academy-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 28, 27, .2), transparent 32%, rgba(0, 28, 27, .1));
}

.home-page .academy-strip__inner {
    position: relative;
    z-index: 1;
    gap: 22px;
}

.home-page .academy-strip__inner > svg {
    display: none;
}

.home-page .academy-strip__inner::before {
    content: "";
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    background: linear-gradient(145deg, #f4ca67, #d99617);
    clip-path: polygon(50% 0, 62% 16%, 82% 11%, 88% 31%, 100% 50%, 84% 62%, 89% 82%, 69% 88%, 50% 100%, 38% 84%, 18% 89%, 12% 69%, 0 50%, 16% 38%, 11% 18%, 31% 12%);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}

.home-page .academy-strip a {
    color: #f4c55f;
    border-color: #dca32e;
    background: rgba(0, 48, 46, .32);
    box-shadow: inset 0 0 0 1px rgba(245, 201, 105, .06);
}

.home-page .academy-strip a:hover {
    color: #fff0c7;
    background: rgba(3, 39, 38, .6);
}

.home-page .site-header {
    border-bottom-color: #e4e8e5;
    box-shadow: 0 4px 15px rgba(20, 66, 62, .045);
}

.home-page .site-header .brand__mark {
    content: url("../images/logo-book-home.svg");
}

.home-page .header-actions .button--primary {
    color: #fff;
    background: linear-gradient(135deg, #eeb239, #d99112);
    border-color: #dfa326;
    box-shadow: 0 5px 12px rgba(181, 118, 7, .18);
}

.home-page main {
    background-color: #fdfcf8;
}

.home-page .home-hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 15% 12%, rgba(215, 239, 235, .78), transparent 34%),
        linear-gradient(90deg, #f9fbf8 0%, #f7fbfa 47%, #eef7f5 100%);
    border-bottom-color: #d9e5e2;
}

.home-page .home-hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 190px;
    pointer-events: none;
    background: url("../images/home-hero-arch.svg") left center / 190px 438px no-repeat;
}

.home-page .home-hero__copy {
    position: relative;
    padding-left: clamp(72px, 7.2vw, 112px);
}

.home-page .home-hero__copy::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 20px;
    left: clamp(72px, 7.2vw, 112px);
    width: 74px;
    height: 2px;
    background: linear-gradient(90deg, #d69618 0 72%, transparent 72%);
    box-shadow: 0 7px 0 -1px rgba(214, 150, 24, .34);
}

.home-page .home-hero__inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(49.56% - 318px);
    bottom: 0;
    width: 285px;
    height: 410px;
    opacity: .8;
    pointer-events: none;
    background: url("../images/home-mosque-silhouette.svg") center bottom / contain no-repeat;
}

.home-page .study-tablet {
    top: 12px;
    height: 420px;
}

.home-page .home-hero__copy > * {
    position: relative;
    z-index: 1;
}

.home-page .home-hero h1 {
    padding-top: 10px;
    color: #064b48;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.home-page .home-hero h1 em {
    font-weight: 560;
    font-variation-settings: "wght" 560;
}

.home-page .home-hero .gold-rule {
    width: 52px;
    background: linear-gradient(90deg, #d18d0d, #efbd53);
}

.home-page .home-hero__copy > p {
    color: #263e3e;
}

.home-page .home-hero__actions .button {
    border-radius: 7px;
}

.home-page .home-hero__actions .button--primary {
    color: #fff;
    background: linear-gradient(135deg, #08766f, #005b56);
    border-color: #0b6e68;
    box-shadow: 0 7px 14px rgba(0, 72, 68, .18);
}

.home-page .home-hero__actions .button--outline {
    background: rgba(255, 255, 255, .87);
    box-shadow: 0 4px 12px rgba(7, 76, 71, .06);
}

.home-page .feature-row,
.home-page .how-it-works {
    position: relative;
    background-color: #fdfcf8;
    background-image:
        linear-gradient(90deg, rgba(253, 252, 248, .16), rgba(253, 252, 248, .87) 24%, rgba(253, 252, 248, .87) 76%, rgba(253, 252, 248, .16)),
        url("../images/islamic-geometric-pattern.svg");
    background-size: auto, 128px 128px;
}

.home-page .feature-row {
    gap: 16px;
    padding-top: 17px;
    padding-bottom: 15px;
}

.home-page .feature-row article {
    position: relative;
    overflow: hidden;
    background:
        url("../images/gold-card-corner.svg") left bottom / 27px 27px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 251, 248, .96));
    border-color: #d5dedb;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(16, 67, 61, .055);
}

.home-page .feature-row .round-icon {
    color: #efbd53;
    background: linear-gradient(145deg, #08716b, #004e4a);
    border-color: #c79429;
    box-shadow: 0 5px 12px rgba(0, 57, 54, .24), inset 0 0 0 2px rgba(255, 255, 255, .04);
}

.home-page .feature-row .round-icon svg {
    stroke: currentColor;
    stroke-width: 1.45;
}

.home-page .feature-row h2 {
    color: #073f3e;
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.home-page .feature-row p {
    color: #314745;
}

.home-page .how-it-works {
    padding-top: 1px;
    padding-bottom: 14px;
}

.home-page .how-it-works > h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: #075a55;
    font-weight: 650;
    font-variation-settings: "wght" 650;
    text-shadow: 0 1px 0 #fff;
}

.home-page .how-it-works > h2::before,
.home-page .how-it-works > h2::after {
    content: "";
    width: 64px;
    height: 17px;
    flex: 0 0 auto;
    background: url("../images/gold-flourish.svg") center / contain no-repeat;
}

.home-page .how-it-works > .gold-rule {
    display: none;
}

.home-page .steps article {
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 250, 247, .96));
    border-color: #d2dedb;
    border-radius: 10px;
    box-shadow: 0 4px 13px rgba(15, 65, 60, .07);
}

.home-page .steps article > b {
    border: 2px solid #d5a02f;
    box-shadow: 0 3px 8px rgba(0, 65, 61, .17);
}

.home-page .steps .round-icon {
    background: rgba(255, 255, 255, .95);
    border-color: #d9e4e1;
    box-shadow: 0 5px 13px rgba(13, 70, 64, .11);
}

.home-page .steps h3 {
    color: #083e3d;
    font-weight: 600;
}

.home-page .steps article:not(:last-child)::after {
    color: #5f817e;
}

.home-page .academy-banner {
    margin-top: 8px;
    background:
        radial-gradient(circle at 48% 0%, rgba(16, 124, 116, .7), transparent 45%),
        linear-gradient(110deg, #075f59, #004c48 70%, #00443f);
    border-color: #e4aa32;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 53, 50, .12);
}

.home-page .academy-banner__ornament {
    width: 188px;
    height: 132px;
    opacity: .72;
    background: url("../images/gold-geometric-corner.svg") center / cover no-repeat;
}

.home-page .academy-banner__ornament--left {
    left: -75px;
    transform: rotate(180deg);
}

.home-page .academy-banner__ornament--right {
    right: -65px;
}

.home-page .academy-banner h2 {
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.home-page .academy-banner .button--gold {
    box-shadow: 0 5px 12px rgba(0, 25, 23, .16);
}

@media (max-width: 1180px) {
    .home-page .home-hero::before {
        opacity: .58;
    }

    .home-page .home-hero__copy {
        padding-left: 40px;
    }

    .home-page .home-hero__copy::before {
        left: 40px;
    }

    .home-page .home-hero__inner::after {
        opacity: .48;
        left: calc(49.56% - 355px);
    }

    .home-page .academy-banner h2 {
        font-size: 28px;
    }
}

@media (max-width: 920px) {
    .home-page .academy-strip {
        background-size: 145px 58px, auto;
    }

    .home-page .academy-strip a {
        display: none;
    }

    .home-page .home-hero::before {
        width: 135px;
        opacity: .4;
        background-size: 135px auto;
    }

    .home-page .home-hero__copy {
        padding-left: 24px;
    }

    .home-page .home-hero__copy::before {
        left: 24px;
        top: -9px;
    }

    .home-page .home-hero__inner::after {
        left: auto;
        right: 0;
        width: 250px;
        opacity: .38;
    }

    .home-page .feature-row,
    .home-page .how-it-works {
        background-size: auto, 112px 112px;
    }

    .home-page .how-it-works > h2::before,
    .home-page .how-it-works > h2::after {
        width: 42px;
    }
}

@media (max-width: 600px) {
    .home-page .academy-strip__inner::before {
        width: 18px;
        height: 18px;
    }

    .home-page .academy-strip__inner {
        gap: 10px;
        padding-inline: 8px;
    }

    .home-page .home-hero::before {
        opacity: .27;
    }

    .home-page .home-hero__copy {
        padding-left: 12px;
    }

    .home-page .home-hero__copy::before {
        display: none;
    }

    .home-page .home-hero__inner::after {
        width: 200px;
        height: 330px;
        opacity: .28;
    }

    .home-page .home-hero h1 {
        padding-top: 7px;
    }

    .home-page .how-it-works > h2 {
        gap: 7px;
    }

    .home-page .how-it-works > h2::before,
    .home-page .how-it-works > h2::after {
        width: 25px;
    }

    .home-page .feature-row,
    .home-page .how-it-works {
        background-image: linear-gradient(rgba(253, 252, 248, .82), rgba(253, 252, 248, .82)), url("../images/islamic-geometric-pattern.svg");
    }
}

/* Homepage header revision: light Academy strip with a dark main navigation bar. */
.home-page .academy-strip {
    color: var(--ink);
    background: linear-gradient(90deg, #e8f6f5, #d9f0ef 45%, #eff9f8);
    border-bottom-color: rgba(9, 47, 50, .08);
}

.home-page .academy-strip::after,
.home-page .academy-strip__inner::before {
    display: none;
}

.home-page .academy-strip__inner > svg {
    display: block;
}

.home-page .academy-strip a {
    color: var(--ink);
    background: rgba(255, 255, 255, .2);
    border-color: var(--ink);
    box-shadow: none;
}

.home-page .academy-strip a:hover {
    color: var(--teal-dark);
    background: rgba(255, 255, 255, .56);
}

.home-page .site-header {
    color: #fff;
    background: linear-gradient(100deg, #075854 0%, #004b48 48%, #003f3d 100%);
    border-bottom-color: rgba(239, 189, 83, .42);
    box-shadow: 0 7px 18px rgba(0, 45, 42, .16);
}

.home-page .site-header .brand {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .14);
}

.home-page .site-header .brand__mark {
    content: url("../images/logo-book-home-inverse.svg");
}

.home-page .primary-nav a {
    color: #f7fbf9;
}

.home-page .primary-nav a:hover,
.home-page .primary-nav a.active {
    color: #f4c55f;
}

.home-page .header-user {
    color: #e2f1ef;
}

.home-page .header-actions .button--outline {
    color: #fff;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .8);
}

.home-page .header-actions .button--outline:hover {
    color: #fff8e8;
    background: rgba(255, 255, 255, .12);
    border-color: #f0c567;
}

.home-page .nav-toggle span {
    background: #fff;
}

@media (max-width: 920px) {
    .home-page .primary-nav {
        background: linear-gradient(100deg, #075854 0%, #004b48 48%, #003f3d 100%);
        border-bottom-color: rgba(239, 189, 83, .42);
    }
}

/* Shared header treatment for every page. */
.site-header.site-header {
    color: #fff;
    background: linear-gradient(100deg, #075854 0%, #004b48 48%, #003f3d 100%);
    border-bottom-color: rgba(239, 189, 83, .42);
    box-shadow: 0 7px 18px rgba(0, 45, 42, .16);
}

.site-header .brand {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .14);
}

.site-header .brand__mark {
    content: url("../images/logo-book-home-inverse.svg");
}

.site-header .primary-nav a {
    color: #f7fbf9;
}

.site-header .primary-nav a:hover,
.site-header .primary-nav a.active {
    color: #f4c55f;
}

.site-header .primary-nav a.active::after,
.site-header .button--login::after {
    background: #f4c55f;
}

.site-header .header-user {
    color: #e2f1ef;
}

.site-header .header-actions .button--outline {
    color: #fff;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .8);
}

.site-header .header-actions .button--outline:hover {
    color: #fff8e8;
    background: rgba(255, 255, 255, .12);
    border-color: #f0c567;
}

.site-header .header-actions .button--primary {
    color: #fff;
    background: linear-gradient(135deg, #eeb239, #d99112);
    border-color: #dfa326;
    box-shadow: 0 5px 12px rgba(181, 118, 7, .18);
}

.site-header .nav-toggle span {
    background: #fff;
}

@media (max-width: 920px) {
    .site-header .primary-nav {
        background: linear-gradient(100deg, #075854 0%, #004b48 48%, #003f3d 100%);
        border-bottom-color: rgba(239, 189, 83, .42);
    }
}

/* Long-form article pages sourced from the original MyQuranStudy articles. */
.article-long-page { background: linear-gradient(180deg, #f8fcfb 0, #fff 380px); }
.article-long-page .article-layout { padding-bottom: 42px; }
.article-body--long header { min-height: 224px; height: auto; padding: 12px 210px 22px 0; }
.article-body--long header > p { max-width: 680px; margin-top: 7px; font-size: 14px; }
.article-body--long header > small { flex-wrap: wrap; }
.article-detail-symbol { width: 142px; height: 142px; display: grid; place-items: center; color: #075d5e; background: radial-gradient(circle, #fff 0 42%, #edf8f7 43% 100%); border: 1px solid #bad8d6; border-radius: 50%; box-shadow: 0 12px 30px rgba(5,75,74,.08); position: absolute; right: 24px; top: 24px; }
.article-detail-symbol svg { width: 88px; height: 88px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.article-body--long > section { min-height: 0; padding: 24px 0 26px; scroll-margin-top: 20px; }
.article-body--long > section:first-of-type { min-height: 0; }
.article-body--long > section h2 { margin-bottom: 10px; font-size: 29px; }
.article-body--long > section p { max-width: 850px; margin: 0 0 12px; font-size: 14px; line-height: 1.75; }
.article-source { margin: 19px 0 4px; padding: 20px 24px; background: linear-gradient(115deg, #edf8f7, #f9fcfb); border: 1px solid #bed9d8; border-radius: 9px; }
.article-source + .article-source { margin-top: 14px; }
.article-source figcaption { margin-bottom: 8px; color: #8f620e; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.article-body--long .article-source blockquote { width: auto; height: auto; margin: 0; padding: 0; display: block; color: #28484b; background: none; border: 0; font-size: 14px; font-style: italic; line-height: 1.7; }
.article-body--long .article-source__arabic { max-width: none; margin: 17px 0 12px; padding: 16px 18px; color: #0b4548; background: rgba(255,255,255,.8); border: 1px solid #d0e2e1; border-radius: 6px; font: 25px/1.9 "Traditional Arabic","Arabic Typesetting",serif; text-align: right; }
.article-source cite { color: #557174; font-size: 11px; font-style: normal; font-weight: 600; }
.references--long { min-height: 76px; height: auto; margin: 18px 0; padding: 12px 15px; }
.references--long ul { margin: 4px 0 0; padding-left: 18px; }
.references--long li { margin: 3px 0; color: #415c5f; font-size: 10px; line-height: 1.45; }
.article-body--long .related-title { margin: 22px 0 9px; font-size: 23px; }
.article-body--long .related a { min-height: 78px; height: auto; }
.article-sidebar--sticky { align-self: start; position: sticky; top: 18px; }
.article-sidebar .on-this-page--long { height: auto; min-height: 183px; }
.article-sidebar .on-this-page--long > a { min-height: 36px; height: auto; padding: 6px 0; line-height: 1.35; }

@media(max-width:920px){.article-sidebar--sticky{position:static}.article-body--long header{padding-right:175px}.article-detail-symbol{width:120px;height:120px}.article-detail-symbol svg{width:72px;height:72px}}
@media(max-width:600px){.article-body--long header{padding-right:0}.article-detail-symbol{display:none}.article-body--long > section h2{font-size:25px}.article-body--long > section p,.article-body--long .article-source blockquote{font-size:13px}.article-source{padding:17px 16px}.article-body--long .article-source__arabic{font-size:22px}.article-body--long .related a{min-height:0}}

/* MyQuranStudy Academy coming-soon page. */
.academy-page { background: #fbfdfc; }
.academy-coming-hero { min-height: 440px; overflow: hidden; color: #fff; background: radial-gradient(circle at 72% 12%,rgba(35,139,129,.55),transparent 32%),linear-gradient(112deg,#075854 0%,#004b48 53%,#003a38 100%); border-bottom: 3px solid #e4aa37; }
.academy-coming-hero__inner { min-height: 440px; position: relative; padding: 25px 70px 58px; }
.academy-coming-breadcrumbs { color: #d6eeeb; }
.academy-coming-breadcrumbs a { color: #fff; }
.academy-coming-hero__copy { width: min(650px,58%); padding-top: 54px; position: relative; z-index: 2; }
.academy-coming-kicker { display: inline-block; color: #f3c664; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.academy-coming-hero h1 { margin: 5px 0 0; color: #fff; font: 600 clamp(58px,6vw,82px)/.95 var(--serif); letter-spacing: -.025em; }
.academy-coming-hero .gold-rule { width: 70px; margin: 22px 0 20px; }
.academy-coming-hero__copy p { max-width: 620px; margin: 0; color: #eaf5f3; font-size: 19px; line-height: 1.65; }
.academy-coming-art { width: 375px; height: 375px; position: absolute; right: 105px; top: 36px; display: grid; place-items: center; }
.academy-coming-art__halo { position: absolute; inset: 15px; border: 1px solid rgba(239,189,83,.24); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018); }
.academy-coming-art>svg { width: 270px; color: rgba(239,189,83,.26); fill: none; stroke: currentColor; stroke-width: 2; }
.academy-coming-art__book { width: 128px; height: 106px; position: absolute; display: grid; place-items: center; color: #f3c664; background: rgba(0,51,48,.78); border: 1px solid rgba(243,198,100,.65); border-radius: 50%; box-shadow: 0 16px 38px rgba(0,0,0,.2); }
.academy-coming-art__book svg { width: 76px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.academy-programs { padding: 54px 36px 38px; }
.academy-programs__header { margin-bottom: 28px; text-align: center; }
.academy-programs__header>span { color: #a66c08; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.academy-programs__header h2 { margin: 3px 0 7px; color: #074a49; font: 600 42px/1.05 var(--serif); }
.academy-programs__header p { margin: 0; color: #52666a; }
.academy-program-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.academy-program-card { min-height: 285px; padding: 34px 38px; display: grid; grid-template-columns: 92px 1fr; gap: 26px; position: relative; overflow: hidden; background: linear-gradient(135deg,#fff 20%,#edf8f6); border: 1px solid #bdd9d7; border-radius: 14px; box-shadow: 0 10px 28px rgba(5,78,74,.075); }
.academy-program-card::after { content: ""; width: 150px; height: 150px; position: absolute; right: -70px; bottom: -70px; border: 1px solid rgba(5,105,100,.09); border-radius: 50%; box-shadow: 0 0 0 24px rgba(5,105,100,.025),0 0 0 48px rgba(5,105,100,.02); }
.academy-program-card__icon { width: 88px; height: 88px; display: grid; place-items: center; color: #075854; background: #e4f3f1; border: 1px solid #b8d8d5; border-radius: 50%; }
.academy-program-card__icon svg { width: 51px; height: 51px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.academy-program-card__label { color: #a66c08; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.academy-program-card h3 { margin: 3px 0 11px; color: #064a49; font: 600 31px/1.08 var(--serif); }
.academy-program-card p { margin: 0 0 14px; color: #3c575a; line-height: 1.55; }
.academy-program-card ul { margin: 0; padding: 0; list-style: none; }
.academy-program-card li { margin: 8px 0; color: #163f41; font-size: 14px; }
.academy-program-card li::before { content: "✓"; width: 20px; height: 20px; margin-right: 9px; display: inline-grid; place-items: center; color: #fff; background: #08736d; border-radius: 50%; font-size: 11px; }
.academy-coming-note { min-height: 112px; margin-bottom: 42px; padding: 18px 34px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #fff; background: linear-gradient(100deg,#075854,#004b48 55%,#003f3d); border: 2px solid #e3aa37; border-radius: 10px; }
.academy-coming-note>div { display: flex; align-items: center; gap: 20px; }
.academy-coming-note>div>span { color: #f3c664; font-size: 41px; }
.academy-coming-note h2 { margin: 0 0 4px; color: #f3c664; font: 600 27px var(--serif); }
.academy-coming-note p { margin: 0; color: #e8f4f2; }
.academy-coming-note .button { min-width: 170px; }
@media(max-width:1000px){.academy-coming-hero__inner{padding-inline:40px}.academy-coming-art{right:-20px;opacity:.65}.academy-coming-hero__copy{width:65%}.academy-program-card{grid-template-columns:72px 1fr;padding:28px 25px}.academy-program-card__icon{width:70px;height:70px}.academy-program-card__icon svg{width:42px}}
@media(max-width:760px){.academy-coming-hero{min-height:500px}.academy-coming-hero__inner{min-height:500px;padding-inline:0}.academy-coming-hero__copy{width:100%;padding-top:45px}.academy-coming-art{right:-105px;top:130px;opacity:.24}.academy-programs{padding-inline:0}.academy-program-grid{grid-template-columns:1fr}.academy-coming-note{align-items:flex-start;flex-direction:column}.academy-coming-note .button{width:100%}}
@media(max-width:520px){.academy-coming-hero h1{font-size:56px}.academy-coming-hero__copy p{font-size:16px}.academy-program-card{grid-template-columns:1fr}.academy-program-card__icon{width:64px;height:64px}.academy-program-card h3{font-size:28px}.academy-coming-note h2{font-size:23px}}

/* Keep the shared mobile navigation control visible after desktop precision rules. */
@media (max-width: 920px) {
    .site-header .site-header__inner {
        width: min(100% - 32px, 720px);
        gap: 12px;
        justify-content: flex-start;
    }

    .site-header .site-header__inner .brand {
        min-width: 0;
        margin-left: 0;
        gap: 8px;
        flex: 0 1 auto;
        font-size: 30px !important;
    }

    .site-header .site-header__inner .brand__mark {
        width: 46px !important;
        height: 42px !important;
        flex: 0 0 46px;
    }

    .site-header .nav-toggle {
        width: 44px;
        height: 42px;
        margin: 0;
        padding: 7px 8px;
        position: relative;
        z-index: 31;
        order: -1;
        flex: 0 0 44px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .6);
        border-radius: 6px;
        cursor: pointer;
    }

    .site-header .nav-toggle svg {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        display: block;
        color: #fff;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
    }

    .site-header .header-actions {
        margin-left: auto;
    }

    .site-header .primary-nav {
        top: 100%;
        z-index: 30;
    }
}

@media (max-width: 600px) {
    .site-header .site-header__inner {
        width: min(100% - 24px, 520px);
    }

    .site-header .site-header__inner .brand {
        gap: 6px;
        max-width: calc(100% - 56px);
        font-size: 25px !important;
        overflow: hidden;
    }

    .site-header .site-header__inner .brand__mark {
        width: 39px !important;
        height: 38px !important;
        flex-basis: 39px;
    }

    .site-header .site-header__inner .brand > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-header .header-actions {
        display: none;
    }

    .site-header .mobile-nav-account {
        width: min(100%, 300px);
        margin-top: 5px;
        padding-top: 17px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .site-header .mobile-nav-account form {
        grid-column: 1 / -1;
        margin: 0;
    }

    .site-header .mobile-nav-account a,
    .site-header .mobile-nav-account button {
        width: 100%;
        min-height: 42px;
        padding: 9px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .65);
        border-radius: 5px;
        font: 600 14px var(--sans);
        text-decoration: none;
        cursor: pointer;
    }

    .site-header .mobile-nav-account a:last-child,
    .site-header .mobile-nav-account button {
        color: #153735;
        background: linear-gradient(135deg, #f4ca6c, #e7a82d);
        border-color: #e7a82d;
    }
}