/* pages.css — see DESIGN.md */
.hero--page { min-height: 92svh; }
.hero--page .hero-title { font-size: clamp(40px, 8.4vw, 96px); max-width: 1100px; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; font-size: 14px; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--muted); }
.cp-sec { padding: 96px 0; background: var(--canvas); }
.cp-head-left { max-width: 640px; margin: 0 0 48px; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; perspective: 1200px; }
.who-tilt { transform-style: preserve-3d; will-change: transform; }
.who-card { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; background: var(--canvas-soft); border-radius: var(--r-md); transform-style: preserve-3d; }
.who-icon { margin-bottom: 28px; transform: translateZ(30px); }
.who-title { margin: 0; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.15; text-wrap: balance; transform: translateZ(20px); }
.who-desc { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; transform: translateZ(10px); }
.who-tilt.is-active .tilt-glare { opacity: 1; }
.learn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.learn-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 14px; padding: 24px; background: var(--canvas); border-radius: var(--r-md); }
.learn-check { grid-row: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.learn-check svg { width: 18px; height: 18px; }
.learn-num { grid-row: 1; align-self: center; justify-self: end; font-variant-numeric: tabular-nums; }
.learn-item p { grid-column: 1 / -1; margin: 0; font-size: 18px; font-weight: 450; line-height: 1.4; text-wrap: pretty; }
.hiw { --gap: 20px; position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.hiw-rail { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; margin-left: -1px; }
.hiw-track, .hiw-draw { position: absolute; inset: 0; border-radius: 2px; }
.hiw-track { background: rgba(20,20,20,.1); }
.hiw-draw { transform-origin: top; }
.js .hiw-draw { transform: scaleY(0); }
.hiw-step { position: relative; padding-left: 72px; display: flex; flex-direction: column; gap: 8px; }
.hiw-dot { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-size: 17px; font-weight: 650; transition: background-color .6s var(--ease-out), color .6s var(--ease-out); }
.hiw-step.is-active .hiw-dot { background: var(--ink); color: #fff; }
.hiw-title { margin: 10px 0 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.hiw-desc { margin: 0; max-width: 360px; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.price-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.price-sub { margin-left: 0; }
.price-card { display: flex; flex-direction: column; gap: 28px; padding: 32px 28px 28px; background: var(--canvas); border-radius: var(--r-md); translate: 0 0; transition: translate .8s var(--ease-out), box-shadow .8s var(--ease-out); }
.price-card:hover { translate: 0 -6px; box-shadow: 0 0 0 6px oklch(0.72 0.12 255 / .08), 0 24px 48px -24px rgba(20,20,20,.2); }
.price-top { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.price-figs { display: flex; flex-direction: column; gap: 8px; }
.price-or { margin: 0; font-size: 16px; color: var(--muted); }
.price-or b { color: var(--ink); font-weight: 650; }
@media (min-width: 900px) {
  .faq-grid--5 .faq-a { grid-row: 1 / span 5; }
  .faq-grid--12 .faq-a { grid-row: 1 / span 12; }
  .faq-grid--12 .faq-a-inner { min-height: 0; }
}
.cf-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cf-direct { margin: 28px 0 0; font-size: 17px; color: rgba(255,255,255,.82); }
.cf-direct a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.cf-direct a:hover { color: #fff; border-color: #fff; }
.cp-final.cf-final { background: var(--canvas); color: var(--ink); margin: 0; border-radius: 0; text-align: center; }
.cf-final-title { color: var(--ink); }
@media (min-width: 640px) {
  .cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cp-final { margin-top: 0; }
.final-inner { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
@media (min-width: 640px) {
  .learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cp-sec { padding: 140px 0; }
  .cp-head-left { margin-bottom: 64px; }
  .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .who-card { padding: 40px 36px; min-height: 380px; }
  .who-icon { margin-bottom: auto; }
  .learn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .learn-item { padding: 28px; min-height: 200px; grid-template-rows: auto 1fr; }
  .learn-item p { align-self: end; font-size: 20px; }
  .hiw { flex-direction: row; gap: 32px; }
  .hiw-step { flex: 1; }
  .hiw-rail { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .hiw-draw { transform-origin: left; }
  .js .hiw-draw { transform: scaleX(0); }
  .price-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 80px; }
  .price-card { padding: 44px 40px 40px; }
}
.hero--long .hero-title { font-size: clamp(36px, 7vw, 84px); }
.hero-wave { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 640px; height: 56px; margin-top: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.wf-bar { flex: 1; max-width: 5px; height: var(--h); border-radius: 3px; background: var(--ink); opacity: .75; transform-origin: center; animation: wf-pulse 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.09s); }
@keyframes wf-pulse { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
.sample-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sample-col { display: flex; flex-direction: column; gap: 24px; padding: 28px; background: var(--canvas-soft); border-radius: var(--r-md); }
.sample-label { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.sample-step { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; }
.clip-player { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: var(--canvas); border-radius: var(--r-full); }
.clip-play { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: var(--ink); color: #fff; }
.clip-play i { width: 0; height: 0; margin-left: 3px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.clip-play[aria-pressed="true"] i { width: 10px; height: 12px; margin: 0; border: 0; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.clip-wave { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 2px; }
.wf-c { flex: 1; height: var(--h); border-radius: 2px; background: rgba(20,20,20,.18); transition: background-color .25s; }
.wf-c.is-played { background: var(--ink); }
.clip-time { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.clip-transcript { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.clip-transcript mark { background: var(--canvas); color: var(--ink); font-weight: 600; padding: 1px 6px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.clip-transcript mark.idiom { background: var(--ink); color: #fff; }
.sample-list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sample-list > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 18px; background: var(--canvas); border-radius: var(--r-sm); }
.wf-mini { grid-row: 1 / span 2; align-self: start; display: flex; align-items: center; gap: 2px; width: 28px; height: 28px; margin-top: 2px; }
.wf-m { flex: 1; height: var(--h); border-radius: 2px; background: var(--ink); transform-origin: center; }
.sample-list > div:hover .wf-m { animation: wf-pulse .6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.08s); }
.sample-list dt { font-size: 18px; font-weight: 650; line-height: 1.3; }
.sample-list dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.sample-note { margin: auto 0 0; font-size: 15px; font-weight: 450; line-height: 1.45; text-wrap: pretty; }
.price-card--line { border: 1px solid var(--hairline-soft); }
@media (min-width: 1000px) {
  .sample-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .sample-col { padding: 32px; }
}
.hero--warm .hero-bg { background: radial-gradient(120% 80% at 50% 0%, oklch(0.99 0.008 80) 0%, oklch(0.965 0.016 75) 55%, oklch(0.93 0.024 70) 100%); }
.hero--warm .glow-a { background: radial-gradient(circle, oklch(0.88 0.08 75 / .6), transparent 65%); }
.hero--warm .glow-b { background: radial-gradient(circle, oklch(0.86 0.07 50 / .45), transparent 65%); }
.hero--warm .glow-c { background: radial-gradient(circle, oklch(0.93 0.05 90 / .7), transparent 65%); }
.hero--warm .particles i { background: oklch(0.82 0.11 80 / calc(var(--o, .18) * 3.5)); box-shadow: 0 0 8px 2px oklch(0.88 0.1 85 / .55); }
.hero--warm .hero-sub { color: oklch(0.3 0.02 60); }
.hero--warm .stats { background: rgba(255, 252, 245, .6); border-color: oklch(0.5 0.03 60 / .1); }
.hero--warm .stat + .stat { border-color: oklch(0.5 0.03 60 / .12); }
.read-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.read-book { perspective: 1800px; }
.read-page { position: relative; overflow: hidden; padding: 36px 28px; background: oklch(0.985 0.012 80); border-radius: 6px 20px 20px 6px; box-shadow: inset 12px 0 18px -14px oklch(0.4 0.04 60 / .35), 0 1px 2px rgba(20,20,20,.05), 0 24px 48px -28px oklch(0.35 0.04 60 / .35); transform-origin: 0% 50%; transform-style: preserve-3d; will-change: transform; }
.read-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, oklch(0.3 0.03 60 / .35), transparent 70%); }
.read-meta { margin: 0 0 20px; font-size: 13px; font-weight: 600; color: oklch(0.46 0.03 60); }
.read-text { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.6; color: oklch(0.22 0.015 60); text-wrap: pretty; }
.read-text mark { color: inherit; padding: 0 2px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.note-mark { background: linear-gradient(transparent 62%, oklch(0.86 0.09 80 / .7) 62%); }
.vocab-mark { background: oklch(0.92 0.05 255 / .7); box-shadow: inset 0 -2px 0 oklch(0.55 0.15 255); }
.read-text mark.is-lit { background: oklch(0.86 0.09 80 / .8); }
.read-text .vocab-mark.is-lit { background: oklch(0.86 0.08 255 / .8); }
.read-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.read-note { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--canvas-soft); border-radius: var(--r-sm); transition: background-color .5s var(--ease-out), transform .6s var(--ease-out); }
.read-note.is-lit { background: oklch(0.95 0.035 80); transform: translateX(-4px); }
.read-note--vocab.is-lit { background: oklch(0.95 0.03 255); }
.note-tag { font-size: 12px; font-weight: 600; color: oklch(0.46 0.03 60); }
.read-note--vocab .note-tag { color: oklch(0.45 0.12 255); }
.read-note h3 { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; }
.read-note h3 span { font-size: 14px; font-weight: 450; font-style: italic; color: var(--muted); margin-left: 6px; }
.read-note p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
@media (min-width: 1000px) {
  .read-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
  .read-book { position: sticky; top: 104px; }
  .read-page { padding: 56px 52px; }
}
.ab-hero { justify-content: center; }
.ab-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.ab-hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ab-hero-copy .crumbs { justify-content: flex-start; }
.ab-hero .hero-title { font-size: clamp(48px, 10vw, 112px); }
.ab-hero .hero-ctas { justify-content: flex-start; }
.ab-hero-media { perspective: 1200px; display: flex; justify-content: center; }
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ab-story-body { display: flex; flex-direction: column; gap: 1.1em; max-width: 680px; }
.ab-story-body p { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(20px, 2vw, 24px); line-height: 1.55; color: oklch(0.25 0.012 60); text-wrap: pretty; }
.ab-story-body .ab-lead { font-size: clamp(26px, 3vw, 36px); line-height: 1.3; color: var(--ink); }
.ab-story-body em { font-style: italic; }
.ab-story-body .story-sign { font-family: var(--font); font-size: 16px; margin-top: 8px; color: var(--ink); }
.ab-nums { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-num { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: var(--canvas); border-radius: var(--r-md); }
.ab-num dd { margin: 0; font-size: clamp(48px, 7vw, 88px); font-weight: 650; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ab-num dt { font-size: 15px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.ab-sub { font-weight: 450; font-size: 13px; color: var(--faint); }
.ab-diff { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; background: var(--canvas-soft); border-radius: var(--r-md); translate: 0 0; }
.ab-diff:hover { translate: 0 -6px; background: #ececec; }
.ab-diff .dc-num { margin-bottom: 28px; }
.ab-creds-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.ab-creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ab-cred { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; background: var(--canvas); border-radius: var(--r-full); font-size: 16px; font-weight: 600; }
.ab-cred::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
@media (min-width: 900px) {
  .ab-hero-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
  .ab-hero-media { justify-content: flex-end; }
  .ab-story-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
  .ab-story-side { position: sticky; top: 120px; align-self: start; }
  .ab-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .ab-num { padding: 36px 32px; min-height: 240px; justify-content: space-between; }
  .ab-diff { padding: 40px 36px; min-height: 300px; }
  .ab-diff .dc-num { margin-bottom: auto; }
  .ab-creds-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
}
.tg-hero { min-height: 78svh; }
.tg-hero .hero-title { font-size: clamp(48px, 10vw, 120px); }
.tg-featured { margin-top: 0; }
.tg-feat { margin: 0; display: flex; flex-direction: column; gap: 36px; }
.tg-feat .story-quote p { font-size: clamp(28px, 4vw, 52px); line-height: 1.18; }
.tg-feat-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.tg-meta { display: flex; flex-direction: column; line-height: 1.3; }
.tg-meta b { font-size: 15px; font-weight: 650; }
.tg-meta span { font-size: 14px; color: var(--muted); }
.tg-course { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; width: fit-content; transition: background-color .3s, color .3s; }
.tg-course:hover { background: var(--ink); color: #fff; }
.tg-feat-cap .tg-course { background: oklch(0.995 0.004 75); margin-left: auto; }
.tg-feat-cap .tg-course:hover { background: var(--ink); color: #fff; }
.tg-grid { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 16px; }
.tg-card { break-inside: avoid; margin: 0 0 16px; display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(20,20,20,.03), 0 8px 24px -14px rgba(20,20,20,.10); translate: 0 0; }
.tg-card:hover { translate: 0 -6px; box-shadow: 0 2px 4px rgba(20,20,20,.04), 0 24px 48px -22px rgba(20,20,20,.22); }
.tg-stars { font-size: 15px; letter-spacing: 3px; line-height: 1; }
.tg-quote { margin: 0; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.tg-quote::before { content: "“"; }
.tg-quote::after { content: "”"; }
.tg-card:nth-child(4n+1) .tg-quote { font-family: "Newsreader", Georgia, serif; font-size: 22px; line-height: 1.4; font-weight: 400; }
.tg-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(20,20,20,.07); }
@media (min-width: 640px) {
  .tg-grid { columns: 2; }
}
@media (min-width: 1000px) {
  .tg-grid { columns: 3; column-gap: 20px; }
  .tg-card { margin-bottom: 20px; }
}
.bl-hero { min-height: 64svh; padding-bottom: 32px; }
.bl-hero .hero-title { font-size: clamp(42px, 8.4vw, 104px); }
.bl-ph { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(20,20,20,.04) 14px 15px), linear-gradient(180deg, #efefed, #e6e6e3); }
.bl-ph span { font: 450 12px/1.33 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--muted); background: var(--canvas); padding: 6px 10px; border-radius: var(--r-full); }
.bl-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; width: fit-content; background: var(--canvas-soft); border-radius: var(--r-full); font-size: 12px; font-weight: 600; color: var(--ink); }
.bl-tag--accent { background: var(--accent); color: #fff; }
.bl-rt { font-size: 13px; font-weight: 600; color: var(--muted); }
.bl-ex { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.bl-feat-sec { padding: 8px 0 0; background: var(--canvas); }
.bl-feat-link { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--canvas-soft); border-radius: var(--r-md); color: var(--ink); }
.bl-feat-link:hover { color: var(--ink); }
.bl-feat-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bl-feat-img .bl-ph { inset: -12% 0; }
.bl-feat-body { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.bl-feat-top { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-feat-top .bl-tag:first-child { background: var(--canvas); }
.bl-feat-title { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 650; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.bl-feat-ex { font-size: 18px; color: var(--ink-soft); }
.bl-feat-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.bl-feat-cta span { transition: transform .5s var(--ease-out); }
.bl-feat-link:hover .bl-feat-cta span { transform: translateX(4px); }
.bl-list-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.bl-filter { position: relative; isolation: isolate; display: flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--canvas-soft); border-radius: var(--r-full); }
.bl-filter::-webkit-scrollbar { display: none; }
.bl-pill { position: relative; z-index: 1; flex: none; height: 40px; padding: 0 16px; border: 0; background: transparent; border-radius: var(--r-full); font: 600 15px/1 var(--font); color: var(--muted); cursor: pointer; transition: color .4s var(--ease-out); }
.bl-pill:hover { color: var(--ink); }
.bl-pill.is-active { color: var(--ink); }
.bl-pill-ind { position: absolute; z-index: 0; top: 4px; left: 0; height: 40px; width: 0; background: var(--canvas); border-radius: var(--r-full); box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 2px 8px rgba(20,20,20,.06); transition: transform .6s var(--ease-out), width .6s var(--ease-out); }
.bl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 20px; }
.bl-card[hidden] { display: none; }
.bl-link { display: flex; flex-direction: column; gap: 18px; color: var(--ink); height: 100%; }
.bl-link:hover { color: var(--ink); }
.bl-img { aspect-ratio: 16 / 10; border-radius: var(--r-sm); }
.bl-img .bl-ph { transition: transform 1.2s var(--ease-out); }
.bl-link:hover .bl-img .bl-ph { transform: scale(1.04); }
.bl-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bl-title { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.bl-link:hover .bl-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bl-body .bl-rt { margin-top: auto; padding-top: 4px; }
.bl-nl-inner { display: flex; flex-direction: column; gap: 28px; }
.nl-form { width: 100%; max-width: 560px; }
.nl-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.nl-row { display: flex; flex-direction: column; gap: 10px; }
.nl-input { flex: 1; min-height: 56px; padding: 0 22px; font: 450 16px/1 var(--font); color: var(--ink); background: var(--canvas); border: 0; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s; }
.nl-input::placeholder { color: var(--faint); }
.nl-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.nl-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px oklch(0.6 0.18 25); }
.nl-btn { height: 56px; border: 0; cursor: pointer; }
.nl-status { margin: 10px 0 0; font-size: 15px; }
.nl-status:empty { display: none; }
.nl-status.is-err { color: oklch(0.5 0.18 25); }
@media (min-width: 640px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-row { flex-direction: row; }
}
@media (min-width: 900px) {
  .bl-feat-link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bl-feat-img { aspect-ratio: auto; min-height: 460px; }
  .bl-feat-body { padding: 48px 44px; justify-content: flex-end; }
  .bl-list-head { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
  .bl-nl-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 64px; }
  .bl-nl-inner .courses-title { max-width: 560px; }
}
@media (min-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
}
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.post { padding: 128px 0 0; }
.post-head { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.post-crumbs { justify-content: flex-start; margin: 0; }
.post-cat:hover { background: var(--ink); color: #fff; }
.post-title { margin: 0; font-size: clamp(36px, 6vw, 72px); font-weight: 650; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.post-title .line { display: block; }
.post-title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.post-title .char { display: inline-block; }
.post-meta { display: flex; align-items: center; gap: 12px; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 650; }
.post-meta-text { display: flex; flex-direction: column; line-height: 1.35; }
.post-meta-text b { font-size: 15px; font-weight: 650; }
.post-meta-text span { font-size: 14px; color: var(--muted); }
.post-hero-img { position: relative; overflow: hidden; max-width: var(--max); margin: 48px auto 0; aspect-ratio: 16 / 9; border-radius: var(--r-md); }
.post-hero-img .bl-ph { inset: -10% 0; }
.post-body { max-width: 700px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.post-body > p, .post-body li { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 1.65; color: oklch(0.25 0.012 60); text-wrap: pretty; }
.post-body > p { margin: 0 0 1.1em; }
.post-body .post-lead { font-size: clamp(23px, 2.4vw, 27px); line-height: 1.5; color: var(--ink); }
.post-body h2 { margin: 2em 0 0.6em; font-size: clamp(28px, 3vw, 36px); font-weight: 650; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.post-body h3 { margin: 1.8em 0 0.5em; font-size: 22px; font-weight: 650; line-height: 1.25; }
.post-ex { list-style: none; margin: 0 0 1.4em; padding: 4px 0 4px 20px; border-left: 2px solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.post-ex li { font-style: italic; }
.post-pull { margin: 2.2em 0; padding: 0; }
.post-pull p { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(30px, 4vw, 42px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.post-pull p::before { content: "“"; }
.post-pull p::after { content: "”"; }
.post-callout { margin: 2.4em 0; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--ink); color: #fff; border-radius: var(--r-md); }
.post-callout-text { margin: 0; font-size: clamp(22px, 2.4vw, 26px); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.post-callout-btn { height: 48px; }
.post-inline-img { margin: 2.4em 0; }
.post-inline-ph { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-sm); }
.post-inline-img figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.post-author { margin-top: 64px; padding: 24px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; }
.post-author-photo { position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; }
.post-author-photo .bl-ph span { font-size: 10px; padding: 3px 6px; }
.post-author-text { display: flex; flex-direction: column; gap: 8px; }
.post-author-text p { margin: 0; font-size: 16px; line-height: 1.5; }
.post-author-text .post-author-name { font-size: 18px; font-weight: 650; color: var(--ink); }
.bl-tag--white { background: var(--canvas); }
@media (min-width: 900px) {
  .post { padding-top: 168px; }
  .post-hero-img { margin-top: 64px; width: calc(100% - 2 * var(--gutter)); }
  .post-body { padding-top: 80px; padding-bottom: 120px; }
  .post-pull { margin-left: -80px; margin-right: -80px; }
  .post-callout { padding: 40px; flex-direction: row; align-items: center; justify-content: space-between; }
  .post-inline-img { margin-left: -80px; margin-right: -80px; }
  .post-author { padding: 32px; grid-template-columns: 96px minmax(0, 1fr); gap: 28px; }
  .post-author-photo { width: 96px; height: 96px; }
}
.ty-hero { min-height: 82svh; }
.ty-hero .hero-title { font-size: clamp(40px, 8vw, 96px); }
.ty-check { width: 88px; height: 88px; margin-bottom: 32px; color: var(--ink); }
.ty-check svg { width: 100%; height: 100%; }
.ty-ring, .ty-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ty-ring { animation: ty-draw 1.4s cubic-bezier(.65,0,.35,1) .2s both; }
.ty-tick { animation: ty-draw .9s cubic-bezier(.65,0,.35,1) 1.2s both; }
@keyframes ty-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--ink); opacity: 0; animation: ty-fall var(--d) cubic-bezier(.25,.6,.4,1) calc(1.4s + var(--delay)) 1 both; }
.confetti i:nth-child(3n) { background: var(--accent); width: 6px; height: 6px; border-radius: 50%; }
.confetti i:nth-child(4n) { background: #c9c9c6; width: 10px; height: 6px; }
@keyframes ty-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: .9; }
  80% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(30px, 80svh, 0) rotate(calc(var(--r) + 540deg)); }
}
.ty-final a { color: #fff; border-bottom: 2px solid rgba(255,255,255,.4); }
.ty-final a:hover { color: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .ty-ring, .ty-tick { animation: none; }
}
.js [data-rev], .js [data-who], .js [data-learn], .js [data-hiw], .js [data-price], .js [data-final], .js [data-sample], .js [data-anno], .js [data-num], .js [data-diff], .js [data-cred-b], .js [data-tg], .js [data-field], .js [data-bl] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rev], .js [data-who], .js [data-learn], .js [data-hiw], .js [data-price], .js [data-final], .js [data-sample], .js [data-anno], .js [data-num], .js [data-diff], .js [data-cred-b], .js [data-tg], .js [data-field], .js [data-bl] { opacity: 1; }
  .wf-bar { animation: none; transform: scaleY(.7); }
  .js .hiw-draw { transform: none !important; }
  .hiw-step .hiw-dot { background: var(--ink); color: #fff; }
}
:root { --gold: oklch(0.8 0.1 80); --gold-ink: oklch(0.5 0.1 70); }
.btn { gap: 10px; }
.btn .ic-arrow, .magnetic-label .ic-arrow { width: 18px; height: 18px; flex: none; transition: transform .5s var(--ease-p3); }
.magnetic-label { display: inline-flex; align-items: center; gap: 10px; }
.btn:hover .ic-arrow { transform: translateX(4px); }
.btn-primary, .btn-light { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary { box-shadow: 0 12px 28px -16px oklch(0.22 0.014 55 / .6); }
.btn-primary::after, .btn-light::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, oklch(1 0 0 / .4) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s var(--ease-p3); }
.btn-light::after { background: linear-gradient(110deg, transparent 30%, oklch(0.8 0.1 80 / .35) 50%, transparent 70%); }
.btn:active { scale: .97; transition: scale .15s var(--ease-p3); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.learn-item, .ab-diff, .ab-num, .sample-col, .who-card, .hiw-step, .tg-card, .loc { box-shadow: var(--shadow-1); }
.cp-soft .learn-item, .cp-soft .ab-num { background: var(--canvas); }
.hiw-step { padding: 72px 20px 24px 72px; margin-left: -20px; border-radius: 20px; background: transparent; box-shadow: none; }
[data-spot] { isolation: isolate; }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s var(--ease-p3); background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), oklch(0.8 0.1 80 / .2), transparent 60%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after, .btn-light:hover::after { transform: translateX(120%); }
  .btn-primary:hover, .btn-light:hover { translate: 0 -1px; }
  .btn { transition: background-color .3s, color .3s, box-shadow .5s var(--ease-p3), translate .5s var(--ease-p3); }
  [data-spot]:hover::before { opacity: 1; }
  .learn-item, .ab-diff, .ab-num, .sample-col, .tg-card, .loc, .who-card { translate: 0 0; transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3), background-color .5s; }
  .learn-item:hover, .ab-diff:hover, .ab-num:hover, .sample-col:hover, .tg-card:hover, .who-card:hover { translate: 0 -6px; box-shadow: var(--shadow-2); }
  .ab-diff:hover { background: var(--canvas-soft); }
  .loc:hover { box-shadow: 0 0 0 6px oklch(0.8 0.1 80 / .1), 0 0 40px -12px oklch(0.8 0.1 80 / .45), var(--shadow-2); border-color: oklch(0.8 0.1 80 / .5); }
  .who-icon, .learn-check, .sample-step { transition: transform .7s var(--ease-p3), background-color .5s, color .5s; }
  .who-card:hover .who-icon { transform: translateZ(30px) rotate(-6deg) scale(1.06); }
  .learn-item:hover .learn-check { transform: rotate(-8deg) scale(1.1); background: var(--gold); color: var(--ink); }
  .sample-col:hover .sample-step { transform: scale(1.1); }
  .hiw-step { transition: background-color .6s var(--ease-p3), box-shadow .6s var(--ease-p3); }
  .hiw-step:hover { background: var(--canvas); box-shadow: var(--shadow-1); }
  .hiw-step:hover .hiw-dot { background: var(--ink); color: #fff; }
  .bl-img { transition: translate .8s var(--ease-p3), box-shadow .8s var(--ease-p3); translate: 0 0; }
  .bl-link:hover .bl-img { translate: 0 -6px; box-shadow: var(--shadow-2); }
  .bl-feat-link { transition: box-shadow .8s var(--ease-p3), translate .8s var(--ease-p3); translate: 0 0; }
  .bl-feat-link:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
  .ab-cred { transition: translate .5s var(--ease-p3), background-color .4s, color .4s, box-shadow .5s; translate: 0 0; }
  .ab-cred:hover { translate: 0 -2px; box-shadow: var(--shadow-1); }
  .faq-q { transition: background-color .4s var(--ease-p3), color .4s var(--ease-p3), translate .5s var(--ease-p3); translate: 0 0; }
  .faq-q:not(.is-active):hover { translate: 4px 0; }
  .read-note { cursor: default; }
  .post-author, .post-callout { transition: box-shadow .7s var(--ease-p3); }
  .post-author:hover { box-shadow: var(--shadow-1); }
}
@media (hover: none) {
  .learn-item:active, .ab-diff:active, .sample-col:active, .tg-card:active, .loc:active, .who-card:active, .bl-link:active { scale: .99; transition: scale .2s var(--ease-p3); }
}
@media (min-width: 900px) {
  .hiw-step { padding: 72px 20px 24px; margin-left: 0; }
}
:root { --night: oklch(0.17 0.02 255); --night-line: oklch(1 0 0 / .12); --gold-hi: oklch(0.86 0.09 82); --on-night: oklch(0.96 0.012 85); --on-night-soft: oklch(0.84 0.012 250); --on-night-muted: oklch(0.72 0.015 250); }
.courses-title, .contact-title, .post-title, .hero--page .hero-title, .ab-hero .hero-title, .who-title, .hiw-title, .bl-feat-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.025em; }
.courses-title { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; }
.cp-soft { background: var(--ivory); }
.hero--page { background: var(--night); color: var(--on-night); }
.hero--page .hero-bg, .hero--warm .hero-bg { background: radial-gradient(120% 80% at 70% 0%, oklch(0.25 0.03 255), var(--night) 62%); }
.hero--page .glow-a, .hero--warm .glow-a { background: radial-gradient(circle, oklch(0.8 0.1 80 / .16), transparent 65%); }
.hero--page .glow-b, .hero--warm .glow-b { background: radial-gradient(circle, oklch(0.5 0.08 255 / .4), transparent 65%); }
.hero--page .glow-c, .hero--warm .glow-c { background: radial-gradient(circle, oklch(0.8 0.1 80 / .08), transparent 65%); }
.hero--page .particles i, .hero--warm .particles i { background: oklch(0.8 0.1 80 / calc(var(--o, .18) * 2.4)); box-shadow: 0 0 8px 1px oklch(0.8 0.1 80 / .35); }
.hero--page .grain { opacity: .25; mix-blend-mode: overlay; }
.hero--page .hero-title { color: var(--on-night); }
.hero--page .hero-sub, .hero--warm .hero-sub { color: var(--on-night-soft); }
.hero--page .crumbs, .hero--page .crumbs a { color: var(--on-night-muted); }
.hero--page .crumbs a:hover, .hero--page .crumbs [aria-current] { color: var(--on-night); }
.hero--page .btn-primary { background: var(--gold); color: var(--night); box-shadow: 0 12px 30px -14px oklch(0.8 0.1 80 / .7); }
.hero--page .btn-primary:hover { background: var(--gold-hi); color: var(--night); }
.hero--page .btn-soft { background: oklch(1 0 0 / .08); color: var(--on-night); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .2); }
.hero--page .btn-soft:hover { background: oklch(1 0 0 / .14); color: var(--on-night); }
.hero--page .stats, .hero--warm .stats { background: oklch(1 0 0 / .05); border-color: var(--night-line); }
.hero--page .stat + .stat, .hero--warm .stat + .stat { border-color: var(--night-line); }
.hero--page .stat dd { color: var(--on-night); }
.hero--page .stat dt { color: var(--on-night-muted); }
.hero--page .wf-bar { background: var(--gold); }
.hero--page .ty-check { color: var(--gold); }
.hero--page .confetti i { background: var(--on-night); }
.hero--page .confetti i:nth-child(3n) { background: var(--gold); }
.hero--page :focus-visible { outline-color: var(--gold); }
.contact { background: var(--night); }
.contact .btn-light { background: var(--gold); color: var(--night); }
.contact .btn-light:hover { background: var(--gold-hi); color: var(--night); }
.contact-title { color: #fff; }
.hero--page .hero-bg { z-index: -2; }
.pg-script { position: absolute; z-index: -1; right: -3vw; top: 50%; translate: 0 -50%; pointer-events: none; user-select: none; white-space: nowrap; font: 500 clamp(200px, 30vw, 480px)/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .3); }
.pg-script span { display: inline-block; will-change: transform; }
.ab-hero .pg-script { right: auto; left: 30vw; }
@media (max-width: 959px) {
  .pg-script { display: none; }
}
.hero-title .line, .post-title .line { display: block; overflow: hidden; padding: .06em .08em .26em 0; margin: -.06em -.08em -.26em 0; }
.hero-title .ln, .post-title .ln { display: inline-block; }
:root { --sand: oklch(0.962 0.014 75); --shadow-1: 0 1px 1px oklch(0.35 0.04 60 / .05), 0 2px 4px oklch(0.35 0.04 60 / .05), 0 12px 28px -14px oklch(0.35 0.04 60 / .2); --shadow-2: 0 1px 2px oklch(0.35 0.04 60 / .06), 0 6px 12px -4px oklch(0.35 0.04 60 / .08), 0 36px 64px -28px oklch(0.35 0.04 60 / .34); }
.who-icon { background: var(--night) !important; color: var(--gold) !important; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), 0 14px 28px -14px oklch(0.17 0.02 255 / .55); transition: transform .6s var(--ease-p3); }
.who-card { transition: box-shadow .7s var(--ease-p3); }
.who-card:hover { box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
.who-card:hover .who-icon { transform: rotate(-6deg) scale(1.05); }
.who-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.learn-item { position: relative; transition: box-shadow .7s var(--ease-p3), translate .7s var(--ease-p3); }
.learn-num { font-family: "Newsreader", Georgia, serif !important; font-weight: 400; font-size: 40px !important; line-height: 1 !important; color: transparent !important; -webkit-text-stroke: 1px oklch(0.6 0.1 70 / .55); transition: -webkit-text-stroke-color .6s var(--ease-p3); }
.learn-check { transition: background-color .6s var(--ease-p3), color .6s var(--ease-p3), transform .6s var(--ease-p3); }
@media (hover: hover) {
  .learn-item:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
  .learn-item:hover .learn-num { -webkit-text-stroke-color: var(--gold-ink); }
  .learn-item:hover .learn-check { background: var(--night); color: var(--gold); transform: rotate(-6deg); }
}
.hiw-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.hiw-draw { background: var(--gold-ink) !important; }
.hiw-step.is-active .hiw-dot, .hiw-step.is-on .hiw-dot { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 6px oklch(0.8 0.1 80 / .2); }
.price-card { box-shadow: var(--shadow-2), inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .18); }
.price-card .btn-primary.is-visible { animation: gold-pulse-i 2.8s ease-in-out infinite; }
@keyframes gold-pulse-i { 50% { box-shadow: 0 0 0 8px oklch(0.8 0.1 80 / .14); } }
.tg-card { position: relative; overflow: hidden; transition: box-shadow .7s var(--ease-p3), translate .7s var(--ease-p3); }
.tg-card::before { content: "“"; position: absolute; right: 16px; top: -20px; font: 400 140px/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px var(--hairline); pointer-events: none; transition: -webkit-text-stroke-color .6s var(--ease-p3); }
.tg-quote { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.tg-stars { color: var(--gold-ink) !important; }
.tg-course { background: var(--night) !important; color: var(--gold) !important; }
.t-flag { border-radius: 4px; box-shadow: 0 0 0 1px var(--hairline-soft); }
@media (hover: hover) {
  .tg-card:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
  .tg-card:hover::before { -webkit-text-stroke-color: var(--gold-ink); }
}
.story { position: relative; overflow: clip; isolation: isolate; }
.story-light { position: absolute; z-index: -1; width: 70vmax; height: 70vmax; left: 50%; top: 40%; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, oklch(0.88 0.08 80 / .5), transparent 60%); animation: story-drift-i 18s ease-in-out infinite alternate; }
@keyframes story-drift-i { from { transform: translate(-8%, -4%); } to { transform: translate(8%, 6%) scale(1.12); } }
.story-inner { position: relative; }
.story-mark { position: absolute; left: 50%; top: -0.38em; translate: -50% 0; z-index: -1; pointer-events: none; font: 400 clamp(220px, 28vw, 380px)/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1.5px oklch(0.6 0.1 70 / .35); }
.ab-diff { transition: box-shadow .7s var(--ease-p3), translate .7s var(--ease-p3); }
@media (hover: hover) {
  .ab-diff:hover { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
}
.ab-num { font-family: "Newsreader", Georgia, serif; color: transparent !important; -webkit-text-stroke: 1px var(--gold-ink); }
.ab-cred { transition: background-color .5s var(--ease-p3), color .5s var(--ease-p3); }
.ab-cred:hover { background: var(--night); color: var(--on-night); }
.bl-img { position: relative; overflow: hidden; }
.bl-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, oklch(0.8 0.1 80 / 0) 40%, oklch(0.8 0.1 80 / .35)); opacity: 0; transition: opacity .8s var(--ease-p3); pointer-events: none; }
.bl-link:hover .bl-img::after { opacity: 1; }
.bl-tag:not(.bl-tag--white) { background: var(--night) !important; color: var(--gold) !important; }
.bl-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.faq-q { border-radius: 16px; transition: background-color .5s var(--ease-p3), color .5s var(--ease-p3), padding .5s var(--ease-p3); }
.faq-q .faq-idx { font: 400 22px/1 "Newsreader", Georgia, serif; }
.faq-a-q { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
@media (min-width: 900px) {
  .faq-q.is-active { background: var(--night); color: var(--on-night); padding-left: 20px; padding-right: 20px; }
  .faq-q.is-active .faq-idx { color: var(--gold); }
  .faq-a-inner { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
  .faq-a-body { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 3vw, 44px); border-radius: 24px; background: var(--canvas); box-shadow: var(--shadow-2), inset 0 1px 0 oklch(0.8 0.1 80 / .5); }
  .faq-a-body::before { content: "؟"; position: absolute; z-index: -1; right: 4%; bottom: -12%; font: 500 300px/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.6 0.1 70 / .25); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-light, .price-card .btn-primary { animation: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root { --sand: oklch(0.915 0.014 75); }
}
.cp-promise { position: relative; overflow: clip; isolation: isolate; background: var(--night) !important; color: var(--on-night); }
.cp-promise::before { content: ""; position: absolute; z-index: -1; right: -20%; top: -30%; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 80 / .13), transparent 60%); pointer-events: none; }
.cp-promise .courses-title { color: var(--on-night); margin-bottom: 40px; }
.cp-promise .courses-title em { color: var(--gold); }
.cp-promise .h-vows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cp-promise .h-vow { position: relative; overflow: hidden; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px; border-radius: 20px; background: linear-gradient(180deg, oklch(1 0 0 / .055), oklch(1 0 0 / .02)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .08), inset 0 0 0 1px var(--night-line), 0 24px 48px -32px oklch(0 0 0 / .8); transition: box-shadow .6s var(--ease-p3), translate .6s var(--ease-p3); }
.cp-promise .h-vow-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); background: oklch(0.8 0.1 80 / .08); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .25); transition: transform .6s var(--ease-p3), background-color .6s, color .6s; }
.cp-promise .h-vow-ic .ic { width: 24px; height: 24px; }
.cp-promise .h-vow p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-promise .h-vow b { font: 400 20px/1.25 "Newsreader", Georgia, serif; color: var(--on-night); text-wrap: balance; }
.cp-promise .h-vow em { font-style: italic; font-size: 15px; line-height: 1.45; color: var(--on-night-soft); }
@media (hover: hover) {
  .cp-promise .h-vow:hover { translate: 0 -4px; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45), inset 0 0 0 1px oklch(0.8 0.1 80 / .28), 0 30px 60px -30px oklch(0.8 0.1 80 / .28); }
  .cp-promise .h-vow:hover .h-vow-ic { background: var(--gold); color: var(--night); transform: rotate(-6deg) scale(1.05); }
  .cp-promise .h-vow:hover em { color: var(--gold); }
}
.cp-extras { display: grid; }
.cp-extras-title { margin: 0; color: var(--on-night-soft); }
.cp-promise .h-extras-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cp-promise .h-extras-list li { display: flex; }
.cp-promise .h-extras-list li:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
.cp-promise .h-ex-ic { flex: none; display: grid; place-items: center; background: var(--gold); color: var(--night); }
.cp-promise .h-extras-list b { display: block; font-size: 15px; font-weight: 650; color: var(--on-night); }
.cp-promise .h-extras-list small { display: block; color: var(--on-night-muted); }
.cp-urdu { display: flex; gap: 12px; align-items: flex-start; margin: 32px 0 0; padding: 18px 20px; border-radius: 16px; max-width: 640px; font-size: 15px; line-height: 1.5; color: var(--on-night-soft); background: linear-gradient(135deg, oklch(0.8 0.1 80 / .14), oklch(0.8 0.1 80 / .03)); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.cp-urdu .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gold); }
.cp-urdu b { color: var(--on-night); }
@media (min-width: 720px) {
  .cp-promise .h-vows, .cp-promise .h-extras-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cp-promise .h-vows, .cp-promise .h-extras-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-promise .h-vow { grid-template-columns: minmax(0, 1fr); padding: 26px; min-height: 210px; }
}
.cp-alt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); display: grid; gap: 14px; }
.cp-alt-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.cp-alt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--night); color: var(--gold); }
.cp-alt-ic .ic { width: 20px; height: 20px; }
.cp-alt-row b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.cp-alt-row p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.cp-anchor { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.cp-anchor b { color: var(--gold-ink); }
.ab2-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 48px; }
.ab2-title { margin: 0; font: 400 clamp(38px, 5vw, 64px)/1.04 "Newsreader", Georgia, serif; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.ab2-title em { font-style: italic; color: var(--gold-ink); }
.ab2-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft, var(--muted)); text-wrap: pretty; max-width: 58ch; }
.ab2-ic { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--night); color: var(--gold); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .35), 0 14px 28px -14px oklch(0.17 0.02 255 / .6); transition: transform .6s var(--ease-p3), background-color .5s, color .5s; }
.ab2-ic .ic { width: 24px; height: 24px; }
[data-spot] { position: relative; }
.ab-story-body .ab-lead::first-letter { float: left; font: 400 4.2em/.82 "Newsreader", Georgia, serif; margin: .06em .12em 0 0; color: var(--gold-ink); }
.ab2-sign { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--hairline-soft); }
.ab2-sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4px oklch(0.8 0.1 80 / .6), var(--shadow-1); }
.ab2-sign b { display: block; font: italic 400 24px/1.1 "Newsreader", Georgia, serif; color: var(--ink); }
.ab2-sign small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.ab2-nums-sec { position: relative; overflow: clip; isolation: isolate; padding: 112px 0; background: var(--night); color: var(--on-night); }
.ab2-glow { position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 80 / .2), oklch(0.8 0.1 80 / .05) 40%, transparent 65%); pointer-events: none; }
.ab2-head--night .ab2-title { color: var(--on-night); }
.ab2-head--night .ab2-title em { color: var(--gold); }
.ab2-head--night .ab2-lead { color: var(--on-night-soft); }
.ab2-nums { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ab2-num { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, oklch(1 0 0 / .06), oklch(1 0 0 / .015)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .1), inset 0 0 0 1px var(--night-line), 0 30px 60px -36px oklch(0 0 0 / .9); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.ab2-num-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .28); transition: background-color .5s, color .5s, transform .6s var(--ease-p3); }
.ab2-num-ic .ic { width: 22px; height: 22px; }
.ab2-num dd { margin: 0; display: flex; align-items: flex-start; font: 400 clamp(56px, 7vw, 96px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; padding-top: .04em; background: linear-gradient(180deg, var(--on-night) 30%, var(--gold) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab2-num sup { font-size: .45em; line-height: 1; margin: .18em 0 0 .06em; color: var(--gold); -webkit-text-fill-color: var(--gold); }
.ab2-num dt { display: grid; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--night-line); }
.ab2-num dt b { font-size: 16px; font-weight: 650; color: var(--on-night); }
.ab2-num dt small { font-size: 14px; color: var(--on-night-muted); }
.ab2-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ab2-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 28px; overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.ab2-card .ab2-ic { margin-bottom: 14px; }
.ab2-card h3 { margin: 0; font: 400 clamp(28px, 2.6vw, 36px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -0.02em; color: var(--ink); }
.ab2-card > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft, var(--muted)); text-wrap: pretty; max-width: 46ch; }
.ab2-pattern { margin-top: auto; display: grid; gap: 10px; padding: 22px 24px; border-radius: 20px; color: var(--on-night); background: radial-gradient(120% 140% at 100% 0%, oklch(0.27 0.035 255), var(--night) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), inset 0 0 0 1px var(--night-line); }
.ab2-pat-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font: italic 400 clamp(28px, 3vw, 38px)/1.1 "Newsreader", Georgia, serif; }
.ab2-pat-line b { font-weight: 400; }
.ab2-slot { min-width: 3.2em; text-align: center; color: var(--gold); border-bottom: 2px solid var(--gold); line-height: .9; animation: ab2-blink 2.4s ease-in-out infinite; }
@keyframes ab2-blink { 50% { opacity: .45; } }
.ab2-pat-gloss { font-size: 14px; color: var(--on-night-muted); }
.ab2-pat-swaps { display: flex; flex-wrap: wrap; gap: 8px; }
.ab2-pat-swaps i { font-style: normal; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gold); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); transition: background-color .4s, color .4s, translate .4s var(--ease-p3); }
.ab2-chips { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab2-chips li { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--ivory, var(--canvas-soft)); box-shadow: inset 0 0 0 1px var(--hairline-soft); font-size: 14px; font-weight: 600; color: var(--ink); transition: background-color .4s, color .4s; }
.ab2-repeat { margin: auto 0 0 !important; padding-top: 8px; display: flex; align-items: center; gap: 10px; font: italic 400 18px/1.3 "Newsreader", Georgia, serif !important; color: var(--gold-ink) !important; }
.ab2-repeat .ic { width: 22px; height: 22px; flex: none; transition: rotate .9s var(--ease-p3); }
.ab2-card--gold { background: linear-gradient(160deg, oklch(0.93 0.05 85), oklch(0.86 0.08 80)); box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / .6), inset 0 0 0 1px oklch(0.6 0.1 70 / .25); }
.ab2-card--gold > p { color: oklch(0.3 0.03 60); }
.ab2-dossiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ab2-dossier { display: flex; flex-direction: column; gap: 22px; padding: 30px; border-radius: 26px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.ab2-dossier header { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline-soft); }
.ab2-dossier h3 { margin: 0; font: 400 26px/1.1 "Newsreader", Georgia, serif; letter-spacing: -0.015em; color: var(--ink); }
.ab2-dossier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab2-dossier li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.ab2-dossier li .ic { width: 24px; height: 24px; padding: 4px; border-radius: 50%; color: var(--gold-ink); background: oklch(0.8 0.1 80 / .18); stroke-width: 2.2; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ab2-num:hover { translate: 0 -6px; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .3), 0 36px 70px -30px oklch(0.8 0.1 80 / .3); }
  .ab2-num:hover .ab2-num-ic { background: var(--gold); color: var(--night); transform: rotate(-6deg); }
  .ab2-card:hover, .ab2-dossier:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
  .ab2-card:hover .ab2-ic, .ab2-dossier:hover .ab2-ic { transform: rotate(-6deg) scale(1.05); background: var(--gold); color: var(--night); }
  .ab2-card--gold:hover .ab2-ic { background: var(--night); color: var(--gold); }
  .ab2-card:hover .ab2-pat-swaps i:nth-child(1) { background: var(--gold); color: var(--night); }
  .ab2-pat-swaps i:hover { translate: 0 -2px; background: var(--gold); color: var(--night); }
  .ab2-chips li:hover { background: var(--night); color: var(--gold); }
  .ab2-card:hover .ab2-repeat .ic { rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .ab2-slot { animation: none; }
}
@media (min-width: 720px) {
  .ab2-dossiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab2-card--wide { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .ab2-nums-sec { padding: 160px 0; }
  .ab2-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .ab2-num { padding: 30px; min-height: 320px; }
  .ab2-head { margin-bottom: 64px; }
  .ab2-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab2-card--wide { grid-column: span 2; grid-row: span 1; }
  .ab2-card { padding: 40px; min-height: 340px; }
  .ab2-dossiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab2-dossier { padding: 36px; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .ab2-card--gold, .ab2-dossier:nth-child(3) { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .ab2-card--gold { grid-column: span 2; }
}
.ab2-num { min-width: 0; container-type: inline-size; }
.ab2-num dd { font-size: clamp(44px, 26cqi, 88px); white-space: nowrap; }
.pro2 { position: relative; overflow: clip; isolation: isolate; background: var(--ivory); padding: 112px 0; }
.pro2-pattern { position: absolute; inset: 0; z-index: -1; background: url("assets/pattern-embroidery.webp") center / 900px auto repeat; opacity: .55; -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(120% 90% at 0% 0%, #000 20%, transparent 70%); pointer-events: none; }
.pro2-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.pro2-title { margin: 0; font: 400 clamp(42px, 6vw, 76px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.pro2-title em { font-style: italic; color: var(--gold-ink); position: relative; white-space: nowrap; }
.pro2-title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; border-radius: 1em; background: linear-gradient(90deg, var(--gold), transparent); }
.pro2-sub { margin: 22px 0 0; max-width: 460px; font-size: clamp(18px, 1.8vw, 20px); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.pro2-from { margin-top: 40px; }
.pro2-from-label { margin: 0 0 14px; font: italic 400 20px/1.2 "Newsreader", Georgia, serif; color: var(--muted); }
.pro2-langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.pro2-langs li { display: grid; justify-items: center; gap: 8px; padding: 18px 10px 14px; border-radius: 18px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); font-size: 14px; font-weight: 600; color: var(--ink); transition: translate .6s var(--ease-p3), box-shadow .6s var(--ease-p3), background-color .5s, color .5s; }
.pro2-glyph { font: 500 26px/1.3 "Noto Naskh Arabic", "Newsreader", serif; color: var(--gold-ink); transition: color .5s; }
.pro2-langs li:first-child .pro2-glyph { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; }
.pro2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pro2-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px; border-radius: 24px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.pro2-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--night); color: var(--gold); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .35), 0 14px 28px -14px oklch(0.17 0.02 255 / .6); transition: transform .6s var(--ease-p3), background-color .5s, color .5s; }
.pro2-ic .ic { width: 24px; height: 24px; }
.pro2-body { display: grid; gap: 6px; padding-right: 48px; }
.pro2-tag { margin: 0; font-size: 13px; font-weight: 650; color: var(--gold-ink); }
.pro2-body h3 { margin: 0; font: 400 clamp(24px, 2.3vw, 30px)/1.12 "Newsreader", Georgia, serif; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.pro2-body p:not(.pro2-tag):not(.pro2-seal) { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.pro2-n { position: absolute; right: 22px; top: 18px; font: 400 48px/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px oklch(0.6 0.1 70 / .45); transition: -webkit-text-stroke-color .6s; }
.pro2-card--feat { background: radial-gradient(120% 130% at 100% 0%, oklch(0.27 0.035 255), var(--night) 62%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .4), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), 0 40px 80px -40px oklch(0.17 0.02 255 / .7); }
.pro2-card--feat .pro2-ic { background: var(--gold); color: var(--night); }
.pro2-card--feat .pro2-tag { color: var(--gold); }
.pro2-card--feat h3 { color: var(--on-night); }
.pro2-card--feat .pro2-body p:not(.pro2-tag):not(.pro2-seal) { color: var(--on-night-soft); }
.pro2-card--feat .pro2-n { -webkit-text-stroke-color: oklch(0.8 0.1 80 / .5); }
.pro2-seal { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 10px; justify-self: start; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gold); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
.pro2-seal .ic { width: 18px; height: 18px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pro2-card:hover { translate: 0 -5px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .55); }
  .pro2-card:hover .pro2-ic { transform: rotate(-6deg) scale(1.05); background: var(--gold); color: var(--night); }
  .pro2-card:hover .pro2-n { -webkit-text-stroke-color: var(--gold-ink); }
  .pro2-card--feat:hover { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), inset 0 0 0 1px oklch(0.8 0.1 80 / .45), 0 44px 90px -36px oklch(0.8 0.1 80 / .35); }
  .pro2-card--feat:hover .pro2-ic { background: var(--on-night); }
  .pro2-langs li:hover { translate: 0 -4px; background: var(--night); color: var(--on-night); box-shadow: var(--shadow-2); }
  .pro2-langs li:hover .pro2-glyph { color: var(--gold); }
}
@media (min-width: 960px) {
  .pro2 { padding: 160px 0; }
  .pro2-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .pro2-head { position: sticky; top: 120px; }
  .pro2-card { grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 32px; }
  .pro2-ic { width: 56px; height: 56px; }
}
.cp-promise + .contact { margin: 20px 12px 12px; border-radius: 32px; background: radial-gradient(90% 70% at 50% 0%, oklch(0.8 0.1 80 / .16), transparent 70%), oklch(0.14 0.022 258); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), 0 -30px 60px -40px oklch(0.17 0.02 255 / .6); }
.cp-promise + .contact::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: min(420px, 60%); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); pointer-events: none; }
.cp-promise:has(+ .contact) { border-radius: 0 0 32px 32px; }
@media (min-width: 900px) {
  .cp-promise + .contact { margin: 28px 16px 16px; }
}
.cp-promise--manifesto { background: linear-gradient(180deg, oklch(0.95 0.03 82), oklch(0.92 0.045 80)) !important; color: var(--ink); border-radius: 0 !important; }
.cp-promise--manifesto::before { background: radial-gradient(circle, oklch(1 0 0 / .7), transparent 60%) !important; }
.cp-promise--manifesto .courses-title { color: var(--ink); max-width: 14ch; font-size: clamp(44px, 6vw, 80px); }
.cp-promise--manifesto .courses-title em { color: var(--gold-ink); }
.cp-promise--manifesto .h-vows { gap: 0 !important; border-top: 1px solid oklch(0.5 0.08 70 / .28); }
.cp-promise--manifesto .h-vow { grid-template-columns: 44px minmax(0, 1fr) !important; min-height: 0 !important; padding: 26px 4px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border-bottom: 1px solid oklch(0.5 0.08 70 / .28); translate: none !important; }
.cp-promise--manifesto .h-vow-ic { width: 44px !important; height: 44px !important; background: var(--canvas) !important; color: var(--gold-ink) !important; box-shadow: var(--shadow-1) !important; }
.cp-promise--manifesto .h-vow b { color: var(--ink) !important; font-size: clamp(21px, 2vw, 25px) !important; }
.cp-promise--manifesto .h-vow em { color: oklch(0.42 0.05 65) !important; }
.cp-promise--manifesto .cp-extras-title { color: oklch(0.42 0.05 65); }
.cp-promise--manifesto .h-extras-list b { color: var(--ink) !important; }
.cp-promise--manifesto .h-extras-list small { color: var(--muted) !important; }
.cp-promise--manifesto .h-ex-ic { background: var(--night) !important; color: var(--gold) !important; }
@media (hover: hover) {
  .cp-promise--manifesto .h-vow:hover { box-shadow: none !important; }
  .cp-promise--manifesto .h-vow:hover .h-vow-ic { background: var(--night) !important; color: var(--gold) !important; }
  .cp-promise--manifesto .h-vow:hover em { color: var(--gold-ink) !important; }
}
@media (min-width: 720px) {
  .cp-promise--manifesto .h-vows { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 48px !important; }
}
@media (min-width: 1100px) {
  .cp-promise--manifesto .h-vow { grid-template-columns: 44px minmax(0, 1fr) !important; }
}
.cp-promise--manifesto + .contact { margin-top: 0; }
.ab-final { padding: 72px 0; text-align: left; }
.ab-final-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.ab-final-copy { display: grid; gap: 28px; justify-items: start; }
.ab-final .contact-title { margin: 0; text-align: left; max-width: 14ch; }
.ab-final-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ab-final-ticks li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--on-night-soft); }
.ab-final-ticks .ic { width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 50%; background: oklch(0.8 0.1 80 / .16); color: var(--gold); stroke-width: 2.2; }
.ab-final-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; rotate: 1.5deg; box-shadow: 0 0 0 1px oklch(0.8 0.1 80 / .35), 0 50px 90px -40px oklch(0 0 0 / .8), 0 0 80px -30px oklch(0.8 0.1 80 / .4); transition: rotate .9s var(--ease-p3), scale .9s var(--ease-p3); }
.ab-final-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; display: block; }
.ab-final-photo figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--on-night); background: oklch(0.17 0.02 255 / .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ab-final-photo:hover { rotate: 0deg; scale: 1.02; }
}
@media (min-width: 900px) {
  .ab-final { padding: 112px 0; }
  .ab-final-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
}
.cp-promise--manifesto .cp-urdu { color: var(--ink-soft); background: oklch(1 0 0 / .6); box-shadow: var(--shadow-1), inset 0 0 0 1px oklch(0.6 0.1 70 / .25); }
.cp-promise--manifesto .cp-urdu b { color: var(--ink); }
.cp-promise--manifesto .cp-urdu .ic { color: var(--gold-ink); }
.cp-promise--manifesto + .contact { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), 0 30px 60px -40px oklch(0.17 0.02 255 / .5); }
.cp-extras { margin-top: 64px !important; gap: 22px !important; }
.cp-extras-title { display: flex; align-items: center; gap: 16px; font: italic 400 clamp(26px, 2.6vw, 34px)/1.1 "Newsreader", Georgia, serif !important; }
.cp-extras-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, oklch(0.8 0.1 80 / .6), transparent); }
.cp-promise .h-extras-list { counter-reset: ex; gap: 14px !important; }
.cp-promise .h-extras-list li { counter-increment: ex; position: relative; overflow: hidden; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; padding: 26px 24px 24px !important; border-radius: 22px !important; min-height: 210px; background: linear-gradient(180deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)) !important; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), inset 0 0 0 1px var(--night-line), 0 30px 60px -36px oklch(0 0 0 / .8) !important; transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3) !important; }
.cp-promise .h-extras-list li::before { content: "0" counter(ex); position: absolute; right: 20px; top: 14px; font: 400 44px/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .4); transition: -webkit-text-stroke-color .6s; }
.cp-promise .h-extras-list li::after { content: "Free"; position: absolute; left: 24px; bottom: 22px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--gold); background: oklch(0.8 0.1 80 / .12); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.cp-promise .h-extras-list li > span:last-child { display: grid; gap: 6px; padding-bottom: 40px; }
.cp-promise .h-extras-list b { font: 400 22px/1.15 "Newsreader", Georgia, serif !important; letter-spacing: -0.01em; }
.cp-promise .h-extras-list small { font-size: 14px !important; line-height: 1.5 !important; }
.cp-promise .h-ex-ic { width: 52px !important; height: 52px !important; border-radius: 16px !important; box-shadow: 0 14px 30px -12px oklch(0.8 0.1 80 / .55), inset 0 1px 0 oklch(1 0 0 / .4); transition: transform .6s var(--ease-p3), background-color .5s, color .5s; }
.cp-promise .h-ex-ic .ic { width: 24px !important; height: 24px !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cp-promise .h-extras-list li:hover { translate: 0 -6px !important; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), inset 0 0 0 1px oklch(0.8 0.1 80 / .4), 0 40px 80px -30px oklch(0.8 0.1 80 / .3) !important; }
  .cp-promise .h-extras-list li:hover::before { -webkit-text-stroke-color: var(--gold); }
  .cp-promise .h-extras-list li:hover .h-ex-ic { transform: rotate(-6deg) scale(1.06); }
}
.cp-promise--manifesto .cp-extras-title::after { background: linear-gradient(90deg, oklch(0.5 0.1 70 / .45), transparent); }
.cp-promise--manifesto .h-extras-list li { background: linear-gradient(180deg, oklch(1 0 0 / .95), oklch(1 0 0 / .75)) !important; box-shadow: inset 0 1px 0 oklch(1 0 0), inset 0 0 0 1px oklch(0.6 0.1 70 / .2), var(--shadow-2) !important; }
.cp-promise--manifesto .h-extras-list li::before { -webkit-text-stroke-color: oklch(0.55 0.1 70 / .45); }
.cp-promise--manifesto .h-extras-list li::after { color: var(--gold-ink); background: oklch(0.8 0.1 80 / .2); box-shadow: inset 0 0 0 1px oklch(0.55 0.1 70 / .3); }
.cp-promise--manifesto .h-ex-ic { box-shadow: 0 14px 30px -12px oklch(0.17 0.02 255 / .5), inset 0 1px 0 oklch(0.8 0.1 80 / .35) !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cp-promise--manifesto .h-extras-list li:hover { box-shadow: inset 0 0 0 1px oklch(0.6 0.1 70 / .5), 0 0 0 6px oklch(0.8 0.1 80 / .14), var(--shadow-2) !important; }
  .cp-promise--manifesto .h-extras-list li:hover::before { -webkit-text-stroke-color: var(--gold-ink); }
  .cp-promise--manifesto .h-extras-list li:hover .h-ex-ic { background: var(--gold) !important; color: var(--night) !important; }
}
.ab-hero { padding-bottom: clamp(72px, 9vw, 120px) !important; }
.ab-hero .tilt { max-width: 440px; }
.ab-hero .tilt-card { position: relative; padding: 10px; border-radius: 30px; background: linear-gradient(160deg, oklch(0.32 0.04 255 / .9), oklch(0.17 0.02 255 / .95)); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .28), 0 50px 100px -40px oklch(0 0 0 / .85), 0 0 90px -30px oklch(0.8 0.1 80 / .35); }
.ab-hero .tilt-photo { border-radius: 22px; aspect-ratio: 4 / 5; }
.ab-hero .tilt-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, oklch(0.14 0.02 255 / .85)); pointer-events: none; }
.ab-hero .tilt-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; gap: 2px; padding: 16px 18px; border-radius: 18px; background: oklch(0.17 0.02 255 / .55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 oklch(1 0 0 / .14), inset 0 0 0 1px oklch(1 0 0 / .1); transform: translateZ(40px); }
.ab-hero .tilt-caption strong { font: italic 400 26px/1.1 "Newsreader", Georgia, serif; color: var(--on-night); letter-spacing: -0.01em; }
.ab-hero .tilt-caption span { font-size: 14px; font-weight: 600; color: var(--gold); }
.ab-badge { position: absolute; z-index: 3; top: 28px; right: -18px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); color: var(--night); box-shadow: inset 0 1px 0 oklch(1 0 0 / .6), 0 20px 40px -16px oklch(0 0 0 / .6); transform: translateZ(60px); }
.ab-badge b { font: 400 34px/1 "Newsreader", Georgia, serif; letter-spacing: -0.03em; }
.ab-badge small { font-size: 12px; font-weight: 650; line-height: 1.2; }
@media (max-width: 520px) {
  .ab-badge { right: 12px; top: 22px; }
}
.post-author { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, oklch(0.27 0.035 255), oklch(0.17 0.02 255) 62%) !important; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), 0 40px 80px -40px oklch(0.17 0.03 255 / .7); border-radius: 28px !important; }
.post-author-photo { box-shadow: 0 0 0 3px oklch(0.17 0.02 255), 0 0 0 4px oklch(0.8 0.1 80 / .7), 0 0 40px -6px oklch(0.8 0.1 80 / .5); }
.post-author-name { font: italic 400 28px/1.1 "Newsreader", Georgia, serif !important; color: oklch(0.96 0.012 85) !important; }
.post-author-text p { color: oklch(0.84 0.012 250) !important; }
.post-author-text a { color: oklch(0.8 0.1 80) !important; }
.ab2-nums-sec + .contact { margin: 20px 12px 12px; border-radius: 32px; background: radial-gradient(90% 70% at 50% 0%, oklch(0.8 0.1 80 / .16), transparent 70%), oklch(0.14 0.022 258); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), 0 30px 60px -40px oklch(0.17 0.02 255 / .5); }
.ab2-nums-sec:has(+ .contact) { border-radius: 0 0 32px 32px; }
@media (min-width: 900px) {
  .ab2-nums-sec + .contact { margin: 28px 16px 16px; }
}
.bl2-feat-sec { padding: clamp(48px, 7vw, 88px) 0 24px; position: relative; z-index: 2; background: var(--ivory, var(--canvas)); }
.bl2-feat-link { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 32px; overflow: hidden; text-decoration: none; color: inherit; background: var(--canvas); box-shadow: 0 40px 80px -48px oklch(0.17 0.03 255 / .55), var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.bl2-feat-cov { position: relative; isolation: isolate; min-height: 300px; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; color: var(--on-night); background: radial-gradient(110% 90% at 0% 100%, oklch(0.27 0.04 255), var(--night) 60%); }
.bl2-feat-glow { position: absolute; z-index: -1; right: -20%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 80 / .3), transparent 65%); transition: translate 1.4s var(--ease-p3); }
.bl2-feat-k { font-size: 13px; font-weight: 650; color: var(--gold); }
.bl2-feat-pat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; font: italic 400 clamp(40px, 5vw, 64px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.02em; }
.bl2-feat-pat b { font-weight: 400; }
.bl2-slot { display: inline-block; min-width: 2.6em; text-align: center; color: var(--gold); border-bottom: 2px solid var(--gold); transition: opacity .35s, translate .35s var(--ease-p3); }
.bl2-slot.is-swap { opacity: 0; translate: 0 8px; }
.bl2-feat-gl { font-size: 16px; color: var(--on-night-soft); }
.bl2-feat-ps { position: absolute; z-index: -1; left: 24px; bottom: -0.25em; font: 600 clamp(80px, 12vw, 150px)/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .22); pointer-events: none; white-space: nowrap; }
.bl2-feat-body { display: flex; flex-direction: column; gap: 18px; padding: 32px; }
.bl2-feat-top { display: flex; flex-wrap: wrap; gap: 8px; }
.bl2-feat-title { margin: 0; font: 400 clamp(32px, 3.6vw, 48px)/1.06 "Newsreader", Georgia, serif; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.bl2-feat-ex { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft, var(--muted)); text-wrap: pretty; max-width: 52ch; }
.bl2-feat-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hairline-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bl2-author { display: flex; align-items: center; gap: 12px; }
.bl2-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px oklch(0.8 0.1 80 / .6); }
.bl2-author b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.bl2-author small, .bl2-rt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bl2-author .ic, .bl2-rt .ic { width: 15px; height: 15px; }
.bl2-feat-cta .ic { width: 18px; height: 18px; transition: translate .5s var(--ease-p3); }
.bl2-tag { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ink); background: var(--ivory, var(--canvas-soft)); box-shadow: inset 0 0 0 1px var(--hairline-soft); width: max-content; }
.bl2-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--gold-ink)); }
.bl2-tag--speaking { --dot: oklch(0.45 0.09 255); }
.bl2-tag--media { --dot: oklch(0.6 0.12 200); }
.bl2-tag--reading { --dot: oklch(0.55 0.1 60); }
.bl2-tag--faith { --dot: oklch(0.72 0.12 80); }
.bl2-tag--methods { --dot: oklch(0.5 0.08 150); }
.bl2-tag--feat { background: var(--night); color: var(--gold); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
.bl2-tag--feat::before { display: none; }
.bl2-tag--feat .ic { width: 14px; height: 14px; }
.bl2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.bl2-link { height: 100%; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; text-decoration: none; color: inherit; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.bl2-cov { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: 4px; }
.bl2-glyph { font: 600 clamp(52px, 6vw, 72px)/1.35 "Noto Naskh Arabic", serif; transition: scale 1s var(--ease-p3); }
.bl2-tr { font: italic 400 15px/1 "Newsreader", Georgia, serif; opacity: .8; }
.bl2-cov--night { background: radial-gradient(90% 90% at 80% 10%, oklch(0.28 0.04 255), var(--night) 70%); color: var(--on-night); }
.bl2-cov--night .bl2-glyph { color: var(--gold); }
.bl2-cov--wave { background: linear-gradient(160deg, oklch(0.24 0.035 230), oklch(0.17 0.025 245)); color: var(--on-night); }
.bl2-cov--wave .bl2-glyph { color: var(--on-night); }
.bl2-wave { position: absolute; z-index: -1; inset: auto 0 5% 0; height: 20%; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: .3; }
.bl2-wave i { width: 4px; border-radius: 4px; background: var(--gold); height: 30%; animation: bl2-w 1.6s ease-in-out infinite; animation-play-state: paused; }
.bl2-wave i:nth-child(3n) { height: 70%; animation-delay: -.4s; }
.bl2-wave i:nth-child(3n+1) { height: 45%; animation-delay: -.8s; }
.bl2-wave i:nth-child(4n) { height: 90%; animation-delay: -1.2s; }
@keyframes bl2-w { 50% { transform: scaleY(.35); } }
.bl2-cov--paper { background: repeating-linear-gradient(0deg, transparent 0 27px, oklch(0.6 0.05 70 / .14) 27px 28px), linear-gradient(160deg, oklch(0.97 0.02 85), oklch(0.92 0.035 80)); color: oklch(0.3 0.04 60); }
.bl2-cov--paper .bl2-glyph { color: oklch(0.32 0.05 255); }
.bl2-cov--gold { background: radial-gradient(90% 90% at 20% 0%, oklch(0.93 0.06 88), oklch(0.8 0.1 78)); color: oklch(0.25 0.04 60); }
.bl2-cov--gold .bl2-glyph { color: var(--night); }
.bl2-cov--ink { background: linear-gradient(160deg, oklch(0.95 0.012 85), oklch(0.9 0.018 85)); color: var(--ink); }
.bl2-cov--ink .bl2-glyph { color: transparent; -webkit-text-stroke: 1.5px var(--night); }
.bl2-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 22px; }
.bl2-title { margin: 0; font: 400 clamp(23px, 2vw, 27px)/1.15 "Newsreader", Georgia, serif; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.bl2-ex { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft, var(--muted)); text-wrap: pretty; }
.bl2-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline-soft); display: flex; align-items: center; justify-content: space-between; }
.bl2-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--gold-ink); }
.bl2-go .ic { width: 16px; height: 16px; transition: translate .5s var(--ease-p3); }
.bl2-nl-sec { padding-top: 24px; }
.bl2-nl { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px 28px; border-radius: 32px; color: var(--on-night); background: radial-gradient(100% 120% at 0% 0%, oklch(0.26 0.04 255), var(--night) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45), inset 0 0 0 1px oklch(0.8 0.1 80 / .2), 0 40px 80px -48px oklch(0.17 0.03 255 / .7); }
.bl2-nl-glow { position: absolute; z-index: -1; right: -15%; bottom: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 80 / .22), transparent 65%); }
.bl2-nl-copy { display: flex; flex-direction: column; gap: 14px; }
.bl2-nl-title { margin: 0; font: 400 clamp(34px, 4vw, 52px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.025em; color: var(--on-night); text-wrap: balance; }
.bl2-nl-title em { color: var(--gold); }
.bl2-nl-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--on-night-soft); }
.bl2-nl-form { margin: 8px 0 0; display: grid; gap: 10px; max-width: 520px; }
.bl2-nl-label { color: var(--on-night-soft) !important; font-size: 14px; font-weight: 600; }
.bl2-nl-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: 999px; background: oklch(1 0 0 / .06); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); transition: box-shadow .4s; }
.bl2-nl-row:focus-within { box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .7), 0 0 0 4px oklch(0.8 0.1 80 / .15); }
.bl2-nl-input { flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 18px; border: 0 !important; border-radius: 999px; background: transparent !important; color: var(--on-night) !important; font: inherit; font-size: 16px; outline: none; box-shadow: none !important; }
.bl2-nl-input::placeholder { color: var(--on-night-muted); }
.bl2-nl-btn { height: 48px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)) !important; color: var(--night) !important; border: 0; box-shadow: inset 0 1px 0 oklch(1 0 0 / .55), 0 12px 24px -12px oklch(0.8 0.1 80 / .7); transition: translate .5s var(--ease-p3), box-shadow .5s; }
.bl2-nl-btn .ic { width: 17px; height: 17px; transition: translate .5s var(--ease-p3); }
.bl2-nl-form .nl-status { color: var(--gold); margin: 0; }
.bl2-nl-note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-night-muted); }
.bl2-nl-note .ic { width: 16px; height: 16px; color: var(--gold); }
.bl2-tip { margin: 0; align-self: center; display: grid; gap: 6px; padding: 26px; border-radius: 24px; color: var(--ink); rotate: 2deg; background: linear-gradient(170deg, oklch(0.98 0.012 85), oklch(0.94 0.025 85)); box-shadow: inset 0 1px 0 #fff, 0 30px 60px -28px oklch(0 0 0 / .6); transition: rotate .8s var(--ease-p3), translate .8s var(--ease-p3); }
.bl2-tip figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--gold-ink); margin-bottom: 4px; }
.bl2-tip figcaption .ic { width: 17px; height: 17px; }
.bl2-tip-ps { margin: 0; text-align: right; font: 600 clamp(36px, 4vw, 46px)/1.35 "Noto Naskh Arabic", serif; color: var(--night); }
.bl2-tip-tr { margin: 0; font: italic 400 22px/1.2 "Newsreader", Georgia, serif; }
.bl2-tip-en { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft, var(--muted)); }
.bl2-tip-re { margin: 10px 0 0; padding-top: 12px; border-top: 1px dashed var(--hairline); display: flex; gap: 10px; align-items: baseline; font-size: 13px; font-weight: 650; color: var(--muted); }
.bl2-tip-re i { font: italic 400 18px/1 "Newsreader", Georgia, serif; color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bl2-feat-link:hover .bl2-feat-glow { translate: -10% 10%; }
  .bl2-feat-link:hover .bl2-feat-cta .ic, .bl2-link:hover .bl2-go .ic, .bl2-nl-btn:hover .ic { translate: 4px 0; }
  .bl2-link:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .55); }
  .bl2-link:hover .bl2-glyph { scale: 1.08; }
  .bl2-link:hover .bl2-wave i { animation-play-state: running; }
  .bl2-nl-btn:hover { translate: 0 -2px; box-shadow: inset 0 1px 0 oklch(1 0 0 / .55), 0 18px 30px -12px oklch(0.8 0.1 80 / .85); }
  .bl2-nl:hover .bl2-tip { rotate: 0deg; translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl2-wave i { animation: none; }
  .bl2-slot { transition: none; }
}
@media (min-width: 720px) {
  .bl2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .bl2-feat-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bl2-feat-cov { min-height: 480px; padding: 56px; }
  .bl2-feat-body { padding: 56px; }
  .bl2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .bl2-nl { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; padding: 64px; }
}
.faq-head .courses-title em { font-style: italic; color: var(--gold-ink); }
.ct2 { position: relative; isolation: isolate; overflow: clip; padding: 112px 0; background: var(--night); color: var(--on-night); }
.ct2-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ct2-glow { position: absolute; border-radius: 50%; filter: blur(10px); }
.ct2-glow-a { width: 70vmax; aspect-ratio: 1; left: -25vmax; top: -30vmax; background: radial-gradient(circle, oklch(0.8 0.1 80 / .18), transparent 62%); animation: ct2-drift 18s ease-in-out infinite alternate; }
.ct2-glow-b { width: 60vmax; aspect-ratio: 1; right: -25vmax; bottom: -30vmax; background: radial-gradient(circle, oklch(0.45 0.09 255 / .45), transparent 62%); animation: ct2-drift 22s ease-in-out infinite alternate-reverse; }
@keyframes ct2-drift { to { translate: 6vmax 4vmax; } }
.ct2-script { position: absolute; left: -2vw; bottom: -.28em; font: 600 clamp(180px, 26vw, 400px)/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .12); white-space: nowrap; }
.ct2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.ct2-copy { display: flex; flex-direction: column; gap: 22px; }
.ct2-title { margin: 0; font: 400 clamp(44px, 6vw, 80px)/1 "Newsreader", Georgia, serif; letter-spacing: -0.03em; color: var(--on-night); text-wrap: balance; }
.ct2-title em { color: var(--gold); }
.ct2-sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-night-soft); max-width: 44ch; text-wrap: pretty; }
.ct2-me { display: flex; align-items: center; gap: 14px; }
.ct2-me img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--night), 0 0 0 4px oklch(0.8 0.1 80 / .7), 0 14px 30px -10px oklch(0 0 0 / .6); }
.ct2-me b { display: block; font: italic 400 24px/1.1 "Newsreader", Georgia, serif; color: var(--on-night); }
.ct2-me small { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 14px; color: var(--on-night-soft); }
.ct2-live { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.75 0.17 150); box-shadow: 0 0 0 0 oklch(0.75 0.17 150 / .6); animation: ct2-pulse 2.2s ease-out infinite; }
@keyframes ct2-pulse { 70% { box-shadow: 0 0 0 8px oklch(0.75 0.17 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.75 0.17 150 / 0); } }
.ct2-ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 460px; }
.ct2-chan { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 18px; text-decoration: none; color: var(--on-night); background: linear-gradient(180deg, oklch(1 0 0 / .07), oklch(1 0 0 / .025)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .1), inset 0 0 0 1px var(--night-line); transition: translate .6s var(--ease-p3), box-shadow .6s var(--ease-p3), background-color .5s; }
.ct2-chan > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ct2-chan b { font-size: 15px; font-weight: 650; }
.ct2-chan small { font-size: 13px; color: var(--on-night-muted); }
.ct2-chi { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--gold); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .28); transition: background-color .5s, color .5s, rotate .6s var(--ease-p3); }
.ct2-chi .ic { width: 21px; height: 21px; }
.ct2-chan--wa .ct2-chi { color: oklch(0.8 0.16 150); background: oklch(0.7 0.16 150 / .12); box-shadow: inset 0 0 0 1px oklch(0.7 0.16 150 / .35); }
.ct2-arr { width: 18px; height: 18px; color: var(--gold); transition: translate .5s var(--ease-p3); }
.ct2-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ct2-app { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--on-night); background: oklch(1 0 0 / .08); }
.ct2-app img { width: 16px; height: 16px; }
.ct2-next { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ct2-next li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--on-night-soft); }
.ct2-next b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 16px/1 "Newsreader", Georgia, serif; color: var(--night); background: var(--gold); }
.ct2-form { position: relative; padding: 28px !important; gap: 18px !important; border: 0 !important; border-radius: 30px !important; background: linear-gradient(170deg, oklch(1 0 0 / .1), oklch(1 0 0 / .035)) !important; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .2), 0 50px 100px -50px oklch(0 0 0 / .9), 0 0 80px -40px oklch(0.8 0.1 80 / .35); }
.ct2-form-head { margin-bottom: 4px; }
.ct2-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--gold); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.ct2-badge .ic { width: 16px; height: 16px; flex: none; }
.ct2-row { gap: 18px !important; }
.ct2-field label { font-size: 14px; font-weight: 600; color: var(--on-night-soft); }
.ct2-in { position: relative; }
.ct2-fi { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 19px; height: 19px; color: var(--on-night-muted); pointer-events: none; transition: color .4s; z-index: 1; }
.ct2-in input, .ct2-in select { padding-left: 46px !important; }
.ct2-field input, .ct2-field select, .ct2-field textarea { border-radius: 14px !important; background: oklch(0.13 0.02 255 / .55) !important; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .12) !important; transition: box-shadow .4s var(--ease-p3), background-color .4s !important; }
.ct2-field input:hover, .ct2-field select:hover, .ct2-field textarea:hover { box-shadow: inset 0 0 0 1px oklch(1 0 0 / .24) !important; }
.ct2-field input:focus, .ct2-field select:focus, .ct2-field textarea:focus { outline: none; background: oklch(0.13 0.02 255 / .8) !important; box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .8), 0 0 0 4px oklch(0.8 0.1 80 / .16) !important; }
.ct2-in:focus-within .ct2-fi { color: var(--gold); }
.ct2-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.ct2-btn { background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)) !important; color: var(--night) !important; box-shadow: inset 0 1px 0 oklch(1 0 0 / .55), 0 18px 36px -14px oklch(0.8 0.1 80 / .7) !important; }
.ct2-priv { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-night-muted); }
.ct2-priv .ic { width: 16px; height: 16px; color: var(--gold); }
.ct2 + .ct2-final { margin: 20px 12px 12px; border-radius: 32px; background: radial-gradient(90% 70% at 50% 0%, oklch(0.8 0.1 80 / .16), transparent 70%), oklch(0.14 0.022 258); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), 0 30px 60px -40px oklch(0.17 0.02 255 / .5); }
.ct2:has(+ .ct2-final) { border-radius: 0 0 32px 32px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ct2-chan:not(.ct2-chan--static):hover { translate: 4px 0; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .4), inset 0 0 0 1px oklch(0.8 0.1 80 / .35), 0 20px 40px -24px oklch(0.8 0.1 80 / .4); }
  .ct2-chan:not(.ct2-chan--static):hover .ct2-chi { rotate: -6deg; }
  .ct2-chan:hover .ct2-arr { translate: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ct2-glow-a, .ct2-glow-b, .ct2-live { animation: none; }
}
@media (min-width: 720px) {
  .ct2-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1000px) {
  .ct2 { padding: 160px 0; }
  .ct2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .ct2-copy { position: sticky; top: 120px; }
  .ct2-form { padding: 44px !important; }
  .ct2 + .ct2-final { margin: 28px 16px 16px; }
}
.cv2 .courses-title em { font-style: italic; color: var(--gold-ink); }
.cv2 .who-grid { counter-reset: who; }
.cv2 .who-tilt { counter-increment: who; }
.cv2 .who-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 36px 32px 34px; gap: 14px; background: linear-gradient(180deg, var(--canvas), color-mix(in oklch, var(--canvas) 92%, var(--gold) 8%)); box-shadow: var(--shadow-1), inset 0 1px 0 oklch(0.8 0.1 80 / .55), inset 0 0 0 1px var(--hairline-soft); transition: box-shadow .7s var(--ease-p3), translate .7s var(--ease-p3); }
.cv2 .who-card::before { content: "0" counter(who); position: absolute; z-index: -1; right: 22px; top: 14px; font: 400 92px/1 "Newsreader", Georgia, serif; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px oklch(0.6 0.1 70 / .35); transition: -webkit-text-stroke-color .6s var(--ease-p3), translate .8s var(--ease-p3); }
.cv2 .who-icon { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; background: var(--night) !important; color: var(--gold) !important; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .4), 0 16px 30px -14px oklch(0.17 0.02 255 / .7); margin-bottom: 18px; transition: transform .6s var(--ease-p3); }
.cv2 .who-icon svg { width: 28px; height: 28px; }
.cv2 .who-title { font: 400 clamp(25px, 2.3vw, 30px)/1.12 "Newsreader", Georgia, serif !important; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; max-width: 16ch; }
.cv2 .who-desc { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft, var(--muted)); text-wrap: pretty; }
.cv2 .learn-grid { gap: 14px !important; }
.cv2 .learn-item { position: relative; overflow: hidden; display: grid !important; align-items: center; gap: 18px; min-height: 92px; padding: 20px 24px !important; border-radius: 22px !important; background: var(--canvas) !important; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft) !important; transition: translate .6s var(--ease-p3), box-shadow .6s var(--ease-p3), background-color .6s var(--ease-p3) !important; }
.cv2 .learn-item .learn-num { order: -1; font-size: 40px !important; min-width: 1.4em; }
.cv2 .learn-item p { margin: 0; font: 400 clamp(19px, 1.7vw, 22px)/1.3 "Newsreader", Georgia, serif !important; color: var(--ink); text-wrap: pretty; transition: color .5s; }
.cv2 .learn-check { width: 34px !important; height: 34px !important; border-radius: 50% !important; display: grid !important; place-items: center; color: var(--night) !important; background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)) !important; box-shadow: inset 0 1px 0 oklch(1 0 0 / .55), 0 8px 18px -8px oklch(0.8 0.1 80 / .8) !important; transition: transform .6s var(--ease-p3); }
.cv2 .learn-check svg { width: 17px; height: 17px; }
.cv2 .hiw-step { position: relative; border-radius: 26px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.cv2 .hiw-dot { width: 52px !important; height: 52px !important; font: 400 24px/1 "Newsreader", Georgia, serif !important; color: var(--night) !important; background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)) !important; box-shadow: 0 0 0 6px var(--canvas), 0 0 0 7px oklch(0.8 0.1 80 / .45), 0 14px 30px -10px oklch(0.8 0.1 80 / .7) !important; }
.cv2 .hiw-title { font: 400 clamp(24px, 2.2vw, 30px)/1.12 "Newsreader", Georgia, serif !important; letter-spacing: -0.015em; }
.cv2 .hiw-desc { font-size: 16.5px; line-height: 1.6; }
.cv2 .cp-soft .hiw-step { background: var(--canvas); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cv2 .who-card:hover { box-shadow: var(--shadow-2), inset 0 1px 0 oklch(0.8 0.1 80 / .7), inset 0 0 0 1px oklch(0.8 0.1 80 / .5), 0 0 60px -30px oklch(0.8 0.1 80 / .6); }
  .cv2 .who-card:hover::before { -webkit-text-stroke-color: oklch(0.6 0.1 70 / .8); translate: -6px 4px; }
  .cv2 .who-card:hover .who-icon { transform: rotate(-6deg) scale(1.05); }
  .cv2 .learn-item:hover { translate: 0 -4px; background: var(--night) !important; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .4) !important; }
  .cv2 .learn-item:hover p { color: var(--on-night); }
  .cv2 .learn-item:hover .learn-num { -webkit-text-stroke-color: var(--gold) !important; }
  .cv2 .learn-item:hover .learn-check { transform: rotate(-10deg) scale(1.08); }
  .cv2 .hiw-step:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
}
.cv2 .learn-item { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: auto !important; }
.cv2 .learn-item .learn-num { grid-column: 1 !important; grid-row: 1 !important; }
.cv2 .learn-item p { grid-column: 2 !important; grid-row: 1 !important; }
.cv2 .learn-item .learn-check { grid-column: 3 !important; grid-row: 1 !important; position: static !important; margin: 0 !important; }
.cv2 .hiw-step { padding: 28px !important; display: flex; flex-direction: column; gap: 10px; }
.cv2 .hiw-dot { position: static !important; translate: none !important; margin: 0 0 12px 4px !important; display: grid !important; place-items: center; flex: none; }
.cv2 .hiw-rail { display: none !important; }
.clip-ps { font: 500 clamp(21px, 2vw, 25px)/1.9 "Noto Naskh Arabic", serif !important; text-align: right; }
.clip-ps mark { padding: 0 .2em; border-radius: 6px; }
.clip-en { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline-soft); font: italic 400 16px/1.5 "Newsreader", Georgia, serif; color: var(--muted); }
.sample-list dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sample-list .ps-t { font: 600 24px/1.4 "Noto Naskh Arabic", serif; color: var(--ink); }
.sample-list dt i { font: italic 400 16px/1.2 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.sample-list dd i { font-family: "Newsreader", Georgia, serif; }
.read-ps { font: 500 clamp(26px, 2.8vw, 36px)/2 "Noto Naskh Arabic", serif !important; text-align: right; }
.read-ps mark { border-radius: 6px; }
.read-ps mark mark { padding: 0 .1em; }
.read-tr { margin: 18px 0 0; font: italic 400 17px/1.5 "Newsreader", Georgia, serif; color: oklch(0.4 0.03 60); }
.read-en { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid oklch(0.6 0.05 70 / .25); font-size: 15px; line-height: 1.55; color: oklch(0.4 0.02 60); }
.read-note h3 .ps-t { font: 600 24px/1.3 "Noto Naskh Arabic", serif; }
.read-note h3 i, .read-note p i { font-family: "Newsreader", Georgia, serif; }
.lp-flags { margin: 0 0 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 8px; border-radius: 999px; font-size: 14px; font-weight: 650; color: oklch(0.93 0.015 85); background: oklch(1 0 0 / .08); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
.lp-flags img { width: 30px; height: 21px; border-radius: 4px; object-fit: cover; }
.lp-local-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.lp-left { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
.lp-cities { margin-top: 20px; }
.lp-now { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; background: var(--night); color: oklch(0.9 0.015 85); font-size: 14px; }
.lp-now i { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.75 0.17 150); box-shadow: 0 0 10px oklch(0.75 0.17 150 / .7); }
.lp-now b { font: 400 26px/1 "Newsreader", Georgia, serif; color: oklch(0.86 0.11 82); font-variant-numeric: tabular-nums; }
.lp-quote { margin: 0; padding: 36px; border-radius: 28px; background: var(--canvas); box-shadow: var(--shadow-2), inset 0 1px 0 oklch(0.8 0.1 80 / .6); }
.lp-quote p { margin: 0; font: italic 400 clamp(24px, 2.4vw, 32px)/1.3 "Newsreader", Georgia, serif; color: var(--ink); text-wrap: pretty; }
.lp-quote footer { margin-top: 16px; font-size: 14px; font-weight: 650; color: var(--gold-ink); }
.lp-price { display: grid; gap: 28px; justify-items: start; }
.lp-price-card { width: 100%; max-width: 640px; display: grid; gap: 18px; padding: 36px; border-radius: 30px; color: var(--on-night); background: radial-gradient(120% 100% at 100% 0%, oklch(0.28 0.04 255), var(--night) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), 0 40px 80px -40px oklch(0.17 0.03 255 / .7); }
.lp-price-fig { margin: 0; display: flex; align-items: flex-start; gap: 4px; color: oklch(0.97 0.012 85); }
.lp-price-fig span { font: 400 32px/1.2 "Newsreader", Georgia, serif; color: oklch(0.86 0.11 82); padding-top: .2em; }
.lp-price-fig b { font: 400 clamp(84px, 10vw, 120px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.04em; padding-top: .04em; }
.lp-price-fig small { align-self: flex-end; margin-bottom: 1.2em; font-size: 16px; color: var(--on-night-soft); }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-list li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; color: var(--on-night-soft); }
.lp-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: oklch(0.8 0.1 80) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1424' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.lp-price-card .btn { justify-self: start; background: oklch(0.8 0.1 80) !important; color: var(--night) !important; }
.lp-faq { display: grid; gap: 12px; max-width: 860px; }
.lp-faq .courses-title { margin-bottom: 16px; }
.lp-q { border-radius: 20px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: box-shadow .5s var(--ease-p3); }
.lp-q[open] { box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
.lp-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 24px; font: 400 21px/1.3 "Newsreader", Georgia, serif; color: var(--ink); }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 var(--font); color: var(--gold-ink); background: oklch(0.8 0.1 80 / .15); transition: rotate .4s var(--ease-p3); }
.lp-q[open] summary::after { rotate: 45deg; }
.lp-q p { margin: 0; padding: 0 24px 22px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft, var(--muted)); }
@media (min-width: 960px) {
  .lp-local-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .lp-price-card { padding: 48px; }
}
.lp-cities { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-cities li { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.lp .hero--page { padding-bottom: clamp(88px, 11vw, 140px) !important; min-height: auto !important; }
.lp .hero--page .hero-ctas { margin-bottom: 0; }
.tq-flags { margin: 22px 0 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 16px 6px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: oklch(0.93 0.015 85); background: oklch(1 0 0 / .07); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.tq-flags img { width: 30px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 2px oklch(0.17 0.02 255); margin-right: -10px; }
.tq-flags img:last-of-type { margin-right: 6px; }
.tq-journey { list-style: none; margin: 40px auto 0; padding: 0; max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; position: relative; text-align: left; }
.tq-journey li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; opacity: 0; translate: 0 12px; transition: opacity .8s cubic-bezier(.215,.61,.355,1), translate .8s cubic-bezier(.215,.61,.355,1); }
.tq-journey li:nth-child(2) { transition-delay: .35s; }
.tq-journey li:nth-child(3) { transition-delay: .7s; }
.tq-journey.is-on li { opacity: 1; translate: 0 0; }
.tq-j-dot { grid-row: span 2; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: oklch(0.8 0.1 80 / .35); box-shadow: 0 0 0 4px oklch(0.8 0.1 80 / .12); }
.tq-journey li:last-child .tq-j-dot { background: oklch(0.8 0.1 80); box-shadow: 0 0 0 5px oklch(0.8 0.1 80 / .2), 0 0 18px oklch(0.8 0.1 80 / .8); }
.tq-journey b { font: italic 400 22px/1.2 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.tq-journey li > span:last-child { font-size: 15.5px; color: var(--ink-soft, var(--muted)); }
@media (min-width: 760px) {
  .tq-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 4px; }
  .tq-journey::before { content: ""; position: absolute; left: 7px; right: 7px; top: 11px; height: 2px; background: linear-gradient(90deg, oklch(0.8 0.1 80 / .3), oklch(0.75 0.11 78)); transform-origin: left; scale: 0 1; transition: scale 1.6s cubic-bezier(.65,0,.35,1); }
  .tq-journey.is-on::before { scale: 1 1; }
  .tq-journey li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .tq-j-dot { grid-row: auto; margin: 4px 0 8px; position: relative; z-index: 1; }
}
.tq-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 32px; }
.tq-head .courses-title { margin: 0; }
.tq-head .courses-title em { font-style: italic; color: var(--gold-ink); }
.tq-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft, var(--muted)); text-wrap: pretty; max-width: 58ch; }
.tq-filters { position: sticky; top: 84px; z-index: 5; display: grid; gap: 10px; margin: 0 -12px 32px; padding: 14px 12px; border-radius: 24px; background: color-mix(in oklch, var(--canvas) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.tq-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tq-row::-webkit-scrollbar { display: none; }
.tq-chip { flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font: 650 14.5px/1 var(--font, system-ui); color: var(--ink); background: var(--ivory, oklch(0.97 0.012 85)); box-shadow: inset 0 0 0 1px var(--hairline-soft); transition: background-color .4s, color .4s, box-shadow .4s, translate .4s cubic-bezier(.215,.61,.355,1); }
.tq-chip img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }
.tq-chip:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px oklch(0.75 0.11 78), 0 8px 18px -10px oklch(0.8 0.1 80 / .7); }
.tq-chip.is-on { color: oklch(0.97 0.012 85); background: var(--night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), 0 10px 22px -10px oklch(0.17 0.02 255 / .7); }
.tq-chip:focus-visible { outline: 2px solid oklch(0.75 0.11 78); outline-offset: 2px; }
.tq-you { margin-left: 2px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.tq-count { margin: 2px 4px 0; font-size: 14px; color: var(--muted); }
.tq-count b { font: 400 20px/1 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.tq-grid { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 20px; }
@media (min-width: 720px) {
  .tq-grid { columns: 2; }
}
@media (min-width: 1100px) {
  .tq-grid { columns: 3; column-gap: 24px; }
}
.tq { break-inside: avoid; margin: 0 0 20px; }
.tq[hidden] { display: none; }
.tq.tq-pre { opacity: 0; translate: 0 28px; }
.tq.tq-pre.is-in, .tq.is-in { opacity: 1; translate: 0 0; transition: opacity .9s cubic-bezier(.215,.61,.355,1), translate .9s cubic-bezier(.215,.61,.355,1); }
.tq-card { position: relative; display: grid; gap: 14px; padding: 28px; border-radius: 26px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s cubic-bezier(.215,.61,.355,1), box-shadow .7s cubic-bezier(.215,.61,.355,1); }
.tq-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tq-time { display: inline-flex; align-items: baseline; gap: 6px; min-height: 30px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.9 0.07 84), oklch(0.8 0.1 80)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .5); }
.tq-time b { font: 400 17px/1 "Newsreader", Georgia, serif; }
.tq-stars { font-size: 14px; letter-spacing: 2px; color: oklch(0.72 0.12 75); }
.tq-course { font-size: 12.5px; font-weight: 650; text-decoration: none; color: var(--muted); padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hairline-soft); transition: color .3s, box-shadow .3s; }
.tq-course:hover { color: var(--ink); box-shadow: inset 0 0 0 1px oklch(0.75 0.11 78); }
.tq-before { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.tq-before span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: oklch(0.6 0.02 255); }
.tq-arrow { position: relative; display: block; width: 2px; height: 26px; margin-left: 6px; background: linear-gradient(oklch(0.6 0.02 255 / .3), oklch(0.75 0.11 78)); }
.tq-arrow::after { content: ""; position: absolute; left: -4px; bottom: -2px; width: 8px; height: 8px; border-right: 2px solid oklch(0.75 0.11 78); border-bottom: 2px solid oklch(0.75 0.11 78); rotate: 45deg; }
.tq-after { margin: 0; font: 400 clamp(21px, 1.9vw, 24px)/1.38 "Newsreader", Georgia, serif; color: var(--ink); text-wrap: pretty; }
.tq-who { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--hairline-soft); }
.tq-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font: italic 400 20px/1 "Newsreader", Georgia, serif; color: oklch(0.86 0.11 82); background: radial-gradient(circle at 30% 25%, oklch(0.32 0.045 255), oklch(0.17 0.02 255)); box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px oklch(0.8 0.1 80 / .5); }
.tq-meta { display: grid; gap: 2px; min-width: 0; }
.tq-meta b { font-size: 15px; font-weight: 650; color: var(--ink); }
.tq-meta span { font-size: 13.5px; color: var(--muted); }
.tq-flag { margin-left: auto; width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px oklch(0 0 0 / .08); }
.tq-cta { display: grid; gap: 14px; padding: 30px; border-radius: 26px; color: oklch(0.93 0.015 85); background: radial-gradient(130% 110% at 100% 0%, oklch(0.32 0.05 255), oklch(0.17 0.02 255) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), inset 0 0 0 1px oklch(0.8 0.1 80 / .3), 0 40px 80px -40px oklch(0.17 0.03 255 / .8), 0 0 70px -30px oklch(0.8 0.1 80 / .6); }
.tq-cta-k { margin: 0; font: italic 400 clamp(30px, 3vw, 38px)/1.1 "Newsreader", Georgia, serif; color: oklch(0.97 0.012 85); }
.tq-cta-p { margin: 0; font-size: 15.5px; line-height: 1.55; color: oklch(0.85 0.02 85); }
.tq-cta-btn { justify-self: start; background: oklch(0.8 0.1 80) !important; color: oklch(0.17 0.02 255) !important; }
.tq-empty { display: grid; justify-items: start; gap: 10px; padding: 36px; border-radius: 26px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.tq-empty[hidden] { display: none; }
.tq-empty p { margin: 0; color: var(--muted); }
.tq-empty-k { font: italic 400 30px/1.15 "Newsreader", Georgia, serif; color: var(--ink) !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tq-card:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .55), 0 0 60px -30px oklch(0.8 0.1 80 / .6); }
  .tq-card:hover .tq-av { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px oklch(0.75 0.11 78), 0 0 18px oklch(0.8 0.1 80 / .6); }
}
@media (max-width: 720px) {
  .tq-filters { top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .tq.tq-pre { opacity: 1; translate: none; }
  .tq-journey li { opacity: 1; translate: none; transition: none; }
}
.tg-hero.hero--page { padding-bottom: clamp(88px, 11vw, 140px) !important; min-height: auto !important; }
.bl2-feat-link { transition: translate .8s cubic-bezier(.215,.61,.355,1), box-shadow .8s cubic-bezier(.215,.61,.355,1); }
.bl2-feat-cov { overflow: hidden; }
.bl2-feat-cov > * { transition: scale 1.4s cubic-bezier(.215,.61,.355,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bl2-feat-link:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .55), 0 0 80px -30px oklch(0.8 0.1 80 / .55); }
  .bl2-feat-link:hover .bl2-feat-cov > * { scale: 1.04; }
}
.bl-hero.hero--page { padding-bottom: clamp(88px, 11vw, 140px) !important; min-height: auto !important; }
.nf-hero.hero--page { min-height: auto !important; padding-bottom: clamp(88px, 11vw, 140px) !important; }
.nf-code { margin: 0 0 8px; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.nf-code span { font: 700 18px/1 "Noto Naskh Arabic", serif; }
.pa-page .read-progress { height: 3px; background: transparent; }
.pa-page .read-progress i { background: linear-gradient(90deg, oklch(0.76 0.11 78), oklch(0.88 0.08 82)); box-shadow: 0 0 12px oklch(0.8 0.1 80 / .8); }
.pa-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(140px, 16vw, 200px) 0 clamp(150px, 16vw, 210px); background: var(--night); color: var(--on-night); }
.pa-hero-glyph { position: absolute; z-index: -1; right: -2vw; top: 50%; translate: 0 -46%; font: 700 clamp(220px, 34vw, 520px)/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .16); pointer-events: none; user-select: none; }
.pa-hero-in { position: relative; width: min(100% - 40px, 920px); margin: 0 auto; display: grid; justify-items: start; gap: 20px; }
.pa-hero .crumbs a, .pa-hero .crumbs span { color: var(--on-night-soft); }
.pa-cat { min-height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); box-shadow: 0 10px 24px -12px oklch(0.8 0.1 80 / .8); }
.pa-title { margin: 0; font: 400 clamp(42px, 6vw, 80px)/1.04 "Newsreader", Georgia, serif; letter-spacing: -0.03em; color: oklch(0.97 0.012 85); text-wrap: balance; }
.pa-dek { margin: 0; max-width: 54ch; font: italic 400 clamp(20px, 2vw, 25px)/1.45 "Newsreader", Georgia, serif; color: var(--on-night-soft); text-wrap: pretty; }
.pa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 8px; }
.pa-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--night), 0 0 0 4px oklch(0.8 0.1 80 / .7); }
.pa-meta-t { display: grid; gap: 3px; }
.pa-meta-t b { font-weight: 650; color: oklch(0.97 0.012 85); }
.pa-meta-t span { font-size: 14px; color: var(--on-night-muted); }
.pa-audio-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: oklch(0.86 0.11 82); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
.pa-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.pa-eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: pa-eq 1.1s ease-in-out infinite; }
.pa-eq i:nth-child(2) { animation-delay: -.4s; }
.pa-eq i:nth-child(3) { animation-delay: -.8s; }
@keyframes pa-eq { 0%, 100% { scale: 1 .3; } 50% { scale: 1 1; } }
.pa-cover { position: relative; z-index: 2; width: min(100% - 32px, 1120px); margin: clamp(-130px, -12vw, -90px) auto 0; }
.pa-cover-in { position: relative; overflow: hidden; aspect-ratio: 21 / 8; display: grid; place-content: center; justify-items: center; gap: 6px; }
.pa-cover-in::before { content: ""; position: absolute; inset: 0; background: url("assets/pattern-embroidery.webp") center / 420px repeat; }
.pa-cover-in::after { content: ""; position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.8 0.1 80 / .3), transparent 70%); animation: pa-breathe 7s ease-in-out infinite; }
@keyframes pa-breathe { 50% { scale: 1.15; opacity: .7; } }
.pa-cover-ps { position: relative; z-index: 1; font: 600 clamp(64px, 11vw, 150px)/1.3 "Noto Naskh Arabic", serif; color: oklch(0.97 0.012 85); text-shadow: 0 0 60px oklch(0.8 0.1 80 / .55); }
.pa-cover-tr { position: relative; z-index: 1; font: italic 400 clamp(17px, 1.6vw, 21px)/1 "Newsreader", Georgia, serif; color: oklch(0.86 0.11 82); }
.pa-layout { width: min(100% - 40px, 1180px); margin: 0 auto; padding: 64px 0 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pa-toc-d { border-radius: 20px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.pa-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 18px; font: italic 400 19px/1 "Newsreader", Georgia, serif; color: var(--ink); }
.pa-toc summary::-webkit-details-marker { display: none; }
.pa-toc summary span { font: 650 12.5px/1 var(--font, system-ui); color: var(--gold-ink); }
.pa-toc ol { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; gap: 2px; }
.pa-toc a { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 9px 10px; border-radius: 12px; font-size: 14.5px; line-height: 1.35; font-weight: 550; text-decoration: none; color: var(--muted); transition: color .35s, background-color .35s; }
.pa-toc a span { font: 400 15px/1.3 "Newsreader", Georgia, serif; color: oklch(0.6 0.02 255); transition: color .35s; }
.pa-toc a:hover { color: var(--ink); background: oklch(0.8 0.1 80 / .1); }
.pa-toc a.is-on { color: var(--ink); background: oklch(0.8 0.1 80 / .16); }
.pa-toc a.is-on span { color: var(--gold-ink); }
.pa-toc a.is-on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: oklch(0.75 0.11 78); box-shadow: 0 0 10px oklch(0.8 0.1 80 / .8); }
.pa-body { max-width: 720px; font-size: 18.5px; line-height: 1.75; color: var(--ink-soft, var(--ink)); }
.pa-body > p { margin: 0 0 1.25em; text-wrap: pretty; }
.pa-body i { font-family: "Newsreader", Georgia, serif; font-size: 1.06em; }
.pa-lead { font: 400 clamp(22px, 2.1vw, 26px)/1.55 "Newsreader", Georgia, serif !important; color: var(--ink) !important; }
.pa-lead::first-letter { float: left; margin: .08em .12em 0 0; font: 400 4.1em/.8 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.pa-body h2 { scroll-margin-top: 110px; margin: 2.2em 0 .6em; font: 400 clamp(32px, 3.4vw, 42px)/1.12 "Newsreader", Georgia, serif; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.pa-body h3 { margin: 1.6em 0 .4em; font: 400 26px/1.2 "Newsreader", Georgia, serif; color: var(--ink); }
.pa-tip { padding: 18px 22px; border-radius: 18px; background: oklch(0.8 0.1 80 / .14); box-shadow: inset 0 0 0 1px oklch(0.6 0.1 70 / .3); font-size: 17px !important; }
.pa-tip b { color: var(--ink); }
.pa-pat { position: relative; margin: 22px 0; padding: 30px 30px 26px; border-radius: 28px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s cubic-bezier(.215,.61,.355,1), box-shadow .7s cubic-bezier(.215,.61,.355,1); }
.pa-pat-n { position: absolute; right: 24px; top: 14px; font: 400 76px/1 "Newsreader", Georgia, serif; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px oklch(0.6 0.1 70 / .4); transition: -webkit-text-stroke-color .6s, translate .8s cubic-bezier(.215,.61,.355,1); }
.pa-pat h3 { margin: 0 0 12px; padding-right: 80px; font-size: clamp(26px, 2.6vw, 32px); }
.pa-shape { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pa-shape b { padding: 6px 14px; border-radius: 12px; font: italic 400 22px/1.2 "Newsreader", Georgia, serif; color: oklch(0.97 0.012 85); background: var(--night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45); }
.pa-shape span { font-size: 15px; font-weight: 600; color: var(--gold-ink); }
.pa-pat > p:not(.pa-shape) { margin: 0 0 16px; font-size: 17px; line-height: 1.6; }
.pa-exs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pa-exs:empty { display: none; }
.pa-ex { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 18px; color: var(--on-night); background: radial-gradient(120% 140% at 100% 0%, oklch(0.27 0.035 255), oklch(0.17 0.02 255) 65%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .25); transition: box-shadow .4s, translate .4s cubic-bezier(.215,.61,.355,1); }
.pa-ex > div { min-width: 0; }
.pa-ex-ps { margin: 0; font: 600 clamp(24px, 2.6vw, 30px)/1.5 "Noto Naskh Arabic", serif; color: oklch(0.97 0.012 85); text-align: left; }
.pa-ex-tr { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--on-night-muted); }
.pa-ex-tr i { color: oklch(0.86 0.11 82); margin-right: 4px; }
.pa-ex .sayit-play { flex: none; }
.pa-pull { position: relative; margin: 2.2em 0; padding: 8px 0 8px 32px; }
.pa-pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: linear-gradient(oklch(0.88 0.08 82), oklch(0.75 0.11 78)); transform-origin: top; scale: 1 0; transition: scale 1.2s cubic-bezier(.65,0,.35,1); box-shadow: 0 0 14px oklch(0.8 0.1 80 / .6); }
.pa-pull.is-on::before { scale: 1 1; }
.pa-pull p { margin: 0; font: italic 400 clamp(30px, 3.4vw, 42px)/1.22 "Newsreader", Georgia, serif; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.pa-pull .w { display: inline-block; opacity: .12; translate: 0 .2em; filter: blur(3px); transition: opacity .6s, translate .6s cubic-bezier(.215,.61,.355,1), filter .6s; transition-delay: calc(var(--k) * 45ms); }
.pa-pull.is-on .w { opacity: 1; translate: 0 0; filter: none; }
.pa-callout { margin: 32px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 20px; padding: 26px; border-radius: 28px; color: var(--on-night); background: radial-gradient(130% 120% at 100% 0%, oklch(0.32 0.05 255), oklch(0.17 0.02 255) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .6), inset 0 0 0 1px oklch(0.8 0.1 80 / .3), 0 40px 80px -40px oklch(0.17 0.03 255 / .8), 0 0 70px -30px oklch(0.8 0.1 80 / .55); }
.pa-callout img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px oklch(0.17 0.02 255), 0 0 0 4px oklch(0.8 0.1 80 / .7); }
.pa-callout p { margin: 0; font-size: 15px; line-height: 1.5; color: oklch(0.85 0.02 85); }
.pa-callout .pa-callout-k { margin-bottom: 4px; font: italic 400 clamp(23px, 2.2vw, 28px)/1.2 "Newsreader", Georgia, serif; color: oklch(0.97 0.012 85); }
.pa-callout-btn { grid-column: 1 / -1; justify-self: start; background: oklch(0.8 0.1 80) !important; color: oklch(0.17 0.02 255) !important; }
.pa-body .sx-inline { margin-top: 12px; }
.pa-letters { margin: 24px 0; padding: 22px; border-radius: 24px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.pa-letters ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; direction: rtl; }
.pa-letters li { display: grid; justify-items: center; padding: 10px 4px 8px; border-radius: 16px; color: oklch(0.97 0.012 85); background: radial-gradient(120% 120% at 50% 0%, oklch(0.3 0.045 255), var(--night) 70%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), 0 0 24px -10px oklch(0.8 0.1 80 / .6); }
.pa-letters li span { font: 500 clamp(28px, 3vw, 38px)/1.5 "Noto Naskh Arabic", serif; }
.pa-letters li small { font-size: 12px; font-weight: 650; color: oklch(0.86 0.11 82); direction: ltr; }
.pa-letters figcaption { font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pa-letters figcaption a { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--gold-ink); text-decoration: none; }
.pa-letters .ic-arrow { width: 16px; height: 16px; }
.pa-words { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pa-word { display: grid; gap: 2px; padding: 18px; border-radius: 20px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .5s cubic-bezier(.215,.61,.355,1), box-shadow .5s; }
.pa-word-ps { font: 600 32px/1.5 "Noto Naskh Arabic", serif; color: var(--ink); text-align: left; }
.pa-word-tr i { font-size: 17px; color: var(--gold-ink); }
.pa-word-ur { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline-soft); font-size: 13.5px; color: var(--muted); }
.pa-word-ur span { font: 500 19px/1.4 "Noto Naskh Arabic", serif; color: var(--ink-soft, var(--ink)); }
.pa-word-en { font-size: 14px; font-weight: 650; color: var(--ink); }
.pa-compare { position: relative; margin: 24px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px; border-radius: 28px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.pa-compare > div { display: grid; gap: 4px; justify-items: start; padding: 18px; border-radius: 20px; background: var(--ivory, oklch(0.97 0.012 85)); }
.pa-compare > div:nth-of-type(2) { color: var(--on-night); background: radial-gradient(120% 140% at 100% 0%, oklch(0.27 0.035 255), oklch(0.17 0.02 255) 65%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3); }
.pa-compare > div:first-child .pa-ex-ps { color: var(--ink); }
.pa-compare > div:first-child .pa-ex-tr { color: var(--muted); }
.pa-compare > div:first-child .pa-ex-tr i { color: var(--gold-ink); }
.pa-compare-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pa-compare-l--ps { color: oklch(0.86 0.11 82); }
.pa-compare .sayit-play { margin-top: 8px; }
.pa-compare-eq { justify-self: center; font: 400 34px/1 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.pa-compare-en { margin: 0; text-align: center; font: italic 400 19px/1.4 "Newsreader", Georgia, serif; color: var(--ink); }
@media (min-width: 720px) {
  .pa-compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .pa-compare-en { grid-column: 1 / -1; }
}
.pa-end { margin-top: 56px; display: grid; gap: 18px; }
.pa-helpful, .pa-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 20px; border-radius: 22px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); }
.pa-helpful p, .pa-share p { margin: 0 8px 0 0; font: italic 400 19px/1.3 "Newsreader", Georgia, serif; color: var(--ink); }
.pa-hbtn, .pa-sbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: 650 14px/1 var(--font, system-ui); text-decoration: none; color: var(--ink); background: var(--ivory, oklch(0.97 0.012 85)); box-shadow: inset 0 0 0 1px var(--hairline-soft); transition: background-color .35s, color .35s, translate .35s cubic-bezier(.215,.61,.355,1), box-shadow .35s; }
.pa-hbtn .ic, .pa-sbtn .ic { width: 18px; height: 18px; }
.pa-hbtn--no .ic { rotate: 180deg; }
.pa-hbtn:hover, .pa-sbtn:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px oklch(0.75 0.11 78), 0 10px 22px -12px oklch(0.8 0.1 80 / .8); }
.pa-hbtn.is-on { color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.pa-hbtn:disabled { cursor: default; }
.pa-hbtn:disabled:not(.is-on) { opacity: .45; }
.pa-h-msg { font-size: 14px; color: var(--gold-ink); font-weight: 600; }
.pa-sbtn.is-done { color: oklch(0.97 0.012 85); background: var(--night); }
.pa-author { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px; border-radius: 28px; color: var(--on-night); background: radial-gradient(130% 120% at 0% 0%, oklch(0.3 0.045 255), oklch(0.17 0.02 255) 62%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), 0 40px 80px -40px oklch(0.17 0.03 255 / .8); }
.pa-author img { width: 120px; height: 120px; border-radius: 24px; object-fit: cover; box-shadow: 0 0 0 4px oklch(0.17 0.02 255), 0 0 0 5px oklch(0.8 0.1 80 / .6), 0 20px 40px -16px oklch(0 0 0 / .6); }
.pa-author p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: oklch(0.88 0.02 85); }
.pa-author .pa-author-k { margin-bottom: 6px; font: italic 400 26px/1.15 "Newsreader", Georgia, serif; color: oklch(0.97 0.012 85); }
.pa-creds { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pa-creds li { min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; font-weight: 600; color: oklch(0.86 0.11 82); background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.pa-author-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; text-decoration: none; color: oklch(0.86 0.11 82); }
.pa-author-link .ic-arrow { width: 17px; height: 17px; transition: translate .4s cubic-bezier(.215,.61,.355,1); }
.pa-author-link:hover .ic-arrow { translate: 4px 0; }
.post-related .courses-title em { font-style: italic; color: var(--gold-ink); }
.post-related .bl2-grid { margin-top: 32px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pa-pat:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .55), 0 0 60px -30px oklch(0.8 0.1 80 / .6); }
  .pa-pat:hover .pa-pat-n { -webkit-text-stroke-color: oklch(0.75 0.11 78); translate: -6px 4px; }
  .pa-ex:hover { translate: 4px 0; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .35); }
  .pa-word:hover { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
  .pa-cover:hover .pa-cover-ps { scale: 1.04; }
}
.pa-cover-ps { transition: scale 1.2s cubic-bezier(.215,.61,.355,1); }
@media (min-width: 1040px) {
  .pa-layout { grid-template-columns: 250px minmax(0, 720px); justify-content: center; gap: 64px; padding-top: 80px; }
  .pa-toc { position: sticky; top: 110px; align-self: start; }
  .pa-author { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 32px; }
}
@media (max-width: 640px) {
  .pa-ex { flex-direction: column; align-items: stretch; }
  .pa-ex .sayit-play { align-self: flex-start; }
  .pa-callout img { width: 56px; height: 56px; }
  .pa-cover-in { aspect-ratio: 4 / 3; }
  .pa-body { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-eq i, .pa-cover-in::after { animation: none; }
  .pa-pull::before { scale: 1 1; }
  .pa-pull .w { opacity: 1; translate: none; filter: none; }
}
.pa.post { padding-top: 0 !important; max-width: none !important; margin: 0 !important; }
.pa-hero .hero-bg { background: none !important; }
.pa-hero .hero-bg .glow { opacity: .55; mix-blend-mode: screen; }
.pa-hero .hero-bg .grain { opacity: .06; }
.pa-cover { padding: 0; background: none; border-radius: 28px; box-shadow: 0 50px 100px -50px oklch(0.17 0.03 255 / .75), 0 0 0 1px oklch(0.8 0.1 80 / .18); }
.pa-cover-in { border-radius: 28px; background: radial-gradient(60% 90% at 72% 18%, oklch(0.34 0.06 255), transparent 70%), radial-gradient(50% 70% at 15% 100%, oklch(0.8 0.1 80 / .14), transparent 70%), oklch(0.18 0.025 255); box-shadow: inset 0 1px 0 oklch(1 0 0 / .08); }
.pa-cover-in::before { opacity: .035; }

.pa-answer { margin: 0 0 32px; padding: 24px 26px; border-radius: 22px; background: oklch(0.8 0.1 80 / .13); box-shadow: inset 0 0 0 1px oklch(0.6 0.1 70 / .3); }
.pa-answer p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.pa-answer .pa-answer-k { margin-bottom: 6px; font: italic 400 20px/1.2 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.pa-faq { display: grid; gap: 10px; margin-bottom: 8px; }
.qa-hero.hero--page { min-height: auto !important; padding-bottom: clamp(88px, 11vw, 140px) !important; }
.qa-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.qa-index ol { list-style: none; margin: 0; padding: 18px; display: grid; gap: 2px; border-radius: 22px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); counter-reset: q; }
.qa-index li { counter-increment: q; }
.qa-index a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 9px 10px; border-radius: 12px; font-size: 14.5px; line-height: 1.35; font-weight: 550; text-decoration: none; color: var(--muted); transition: color .35s, background-color .35s; }
.qa-index a::before { content: "0" counter(q); font: 400 15px/1.3 "Newsreader", Georgia, serif; color: var(--gold-ink); }
.qa-index a:hover { color: var(--ink); background: oklch(0.8 0.1 80 / .12); }
.qa-list { display: grid; gap: 16px; max-width: 760px; }
.qa-item { scroll-margin-top: 110px; padding: 28px 30px; border-radius: 26px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s cubic-bezier(.215,.61,.355,1), box-shadow .7s cubic-bezier(.215,.61,.355,1); }
.qa-item h2 { margin: 0 0 10px; font: 400 clamp(26px, 2.6vw, 32px)/1.15 "Newsreader", Georgia, serif; letter-spacing: -0.015em; color: var(--ink); }
.qa-item p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--ink-soft, var(--ink)); text-wrap: pretty; }
.qa-facts { padding: 30px; border-radius: 28px; color: var(--on-night); background: radial-gradient(130% 110% at 100% 0%, oklch(0.3 0.045 255), oklch(0.17 0.02 255) 60%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .55), 0 40px 80px -40px oklch(0.17 0.03 255 / .8); }
.qa-facts h2 { margin: 0 0 18px; font: 400 clamp(26px, 2.6vw, 32px)/1.15 "Newsreader", Georgia, serif; color: oklch(0.97 0.012 85); }
.qa-facts h2 em { color: oklch(0.8 0.1 80); }
.qa-facts dl { margin: 0; display: grid; gap: 0; }
.qa-facts dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid oklch(1 0 0 / .1); }
.qa-facts dt { font-size: 13px; font-weight: 700; color: oklch(0.86 0.11 82); }
.qa-facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: oklch(0.9 0.015 85); }
@media (min-width: 720px) { .qa-facts dl > div { grid-template-columns: 170px minmax(0, 1fr); gap: 16px; } }
@media (min-width: 1040px) { .qa-wrap { grid-template-columns: 300px minmax(0, 760px); justify-content: center; gap: 56px; } .qa-index { position: sticky; top: 110px; align-self: start; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .qa-item:hover { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); } }