/* ============================================================================
   Durusi — glass.css v2 (2026-07-12)
   Static ivory backdrop + a real glass CARD SYSTEM (not just backgrounds).
   Fixes the broken boxes: June-17 line-items (.step/.why-item) become proper
   glass cards with their chips inside; June dark cards (.glass-card,
   .path.mentor) are recolored for the light canvas so no text disappears.
   No entrance/scroll animations anywhere — hover states only.
   ============================================================================ */

/* ── No entrance animations: content is simply there ─────────────────────── */
html:not(.m-ready) .reveal-on-scroll{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}

/* ── Page backdrop — static washes + grain (replaced by rb-bg when active) ── */
body{ position:relative; background:transparent !important; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  /* pure white: the dot-grid texture and the mint/teal washes are what read as
     "frost" rather than white. Brand gradients belong on sections, not the canvas. */
  background: #FFFFFF;
}
/* when a live React Bits background is mounted, flatten the static washes */
html.rb-bg-on body::before{ background:#FFFFFF; }
/* The fractal-noise grain here is what made a white page read as "frost".
   Removed 2026-08-24 at Mahmoud's request; keep the element as a no-op hook. */
body::after{ content:none; }
#rb-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
#rb-bg canvas{ width:100%; height:100%; display:block; }

/* ── Shared glass surface ─────────────────────────────────────────────────── */
.sc-card, .step, .glass-card, .why-item, .quote, .path,
.faq details, .stats-band{
  background:rgba(255,255,255,0.60) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.8) brightness(1.04);
  backdrop-filter:blur(12px) saturate(1.8) brightness(1.04);
  border:1px solid rgba(255,251,242,0.7) !important;
  box-shadow:
    0 10px 34px rgba(16,39,24,0.09),
    0 2px 12px rgba(16,39,24,0.04),
    inset 0 1px 0 rgba(255,252,244,0.6) !important;
}
@supports not (backdrop-filter: blur(12px)){
  .sc-card, .step, .glass-card, .why-item, .quote, .path, .faq details, .stats-band{
    background:rgba(255,255,255,0.90) !important;
  }
}
@media (prefers-reduced-transparency: reduce){
  .sc-card, .step, .glass-card, .why-item, .quote, .path, .faq details, .stats-band, .scm-box{
    background:rgba(255,255,255,0.95) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

/* ── FIX · Steps — was a border-top line item with a chip floating outside ── */
.steps{ gap:20px; }
.step{
  border-top:0 !important;
  border-radius:20px;
  padding:26px 26px 28px;
}
.step::before{
  position:static !important;
  top:auto; left:auto;
  margin-bottom:16px;
  box-shadow:0 5px 14px rgba(69,251,178,0.25);
}
.step h3{ margin:0 0 0.45rem; color:var(--forest); }

/* ── FIX · Why items — same line-item problem ─────────────────────────────── */
.why-grid{ gap:20px; }
.why-item{
  border-top:0 !important;
  border-radius:20px;
  padding:26px 26px 28px;
}
.why-item .ic{
  background:rgba(69,251,178,0.22);
  box-shadow:inset 0 1px 0 rgba(255,252,244,0.5);
}
.why-item h3{ color:var(--forest); }

/* ── FIX · "Ways to learn" cards — June was DARK glass with white text ────── */
.glass-card{ border-radius:20px; }
.glass-card h3{ color:var(--forest) !important; }
.glass-card .gc-meta{ color:var(--link) !important; }
.glass-card p{ color:var(--cocoa) !important; }
.glass-card .btn-glass{
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(21,172,118,0.45);
  color:var(--forest);
  font-weight:600;
}
.glass-card .btn-glass:hover{ background:rgba(69,251,178,0.25); border-color:var(--mint-deep); }

/* ── FIX · Paths — mentor card was a dark gradient with white text ────────── */
.path{ border-radius:20px; }
.path.mentor{
  background:rgba(255,255,255,0.60) !important;
  color:var(--espresso) !important;
  border:1px solid rgba(21,172,118,0.35) !important;
}
.path.mentor h3{ color:#1A1914 !important; }
.path.mentor .tag{ color:var(--link) !important; }
.path.mentor p{ color:var(--cocoa) !important; }
.path.mentor li{ color:var(--espresso); }
.path.mentor li::before{ color:var(--mint-deep) !important; }
.path.mentor .btn-glass{
  background:var(--mint);
  color:var(--forest);
  border:0;
  font-weight:700;
  box-shadow:0 10px 26px rgba(69,251,178,0.4);
}
.path.mentor .btn-glass:hover{ filter:brightness(1.05); }

/* ── FIX · FAQ — was flat border-bottom rows turned into raw slabs ────────── */
.faq{ display:grid; gap:12px; }
.faq details{
  border-bottom:0 !important;
  border-radius:16px;
  padding:4px 22px;
}
.faq summary{ padding:16px 40px 16px 0; }
.faq summary::after{ right:2px; top:14px; }
.faq details p{ padding:0 0 18px; }
[dir="rtl"] .faq summary{ padding:16px 0 16px 40px; }
[dir="rtl"] .faq summary::after{ right:auto; left:2px; }

/* ── Quotes + stats band — soften to match the system ─────────────────────── */
.quote{ border-radius:20px; }
.stats-band{ border-radius:20px; }

/* ── Small glass chips ────────────────────────────────────────────────────── */
.app-pill, .proof-check, .sc-soon-inline{
  background:rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);
  backdrop-filter:blur(10px) saturate(1.6);
  border:1px solid rgba(255,251,242,0.6);
  box-shadow:inset 0 1px 0 rgba(255,252,244,0.5);
  border-radius:999px;
  padding:6px 14px;
}

/* ── Demo modal stays a glass sheet ───────────────────────────────────────── */
.scm-box{
  background:rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);
  backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);
  border:1px solid rgba(255,251,242,0.7) !important;
  box-shadow:
    0 24px 80px rgba(16,39,24,0.18),
    inset 0 1px 0 rgba(255,252,244,0.6) !important;
}
.scm-back{
  background:rgba(16,39,24,0.30) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* ── v3 · Hero joins the aurora canvas (was a dark teal band) ─────────────── */
.hero{ background:transparent !important; color:var(--espresso) !important; }
.hero .ribbon{ display:none; }
.hero .eyebrow{ color:var(--link) !important; }
.hero h1{ color:var(--forest) !important; }
.hero .hero-sub{ color:var(--cocoa) !important; }
.hero .btn-ghost{ color:var(--forest) !important; border-color:rgba(16,39,24,0.22) !important; }
.hero .btn-ghost:hover{ background:rgba(255,255,255,0.7) !important; border-color:var(--soul,var(--mint-deep)) !important; }

/* ── v4 · Site-wide (inner pages on main.css) ─────────────────────────────── */
.hero .ribbon-soft{ display:none; }
.hero .lead{ color:var(--cocoa) !important; }
.hero .proof{ color:var(--cocoa) !important; }
.hero .proof span strong{ color:var(--forest) !important; }
.hero h1 .dim{ color:var(--cocoa) !important; }

.card, .float-card, .quote-card, .post-card, .path-card{
  background:rgba(255,255,255,0.60) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.8) brightness(1.04);
  backdrop-filter:blur(12px) saturate(1.8) brightness(1.04);
  border:1px solid rgba(255,251,242,0.7) !important;
  box-shadow:
    0 10px 34px rgba(16,39,24,0.09),
    0 2px 12px rgba(16,39,24,0.04),
    inset 0 1px 0 rgba(255,252,244,0.6) !important;
  border-radius:20px;
}
@supports not (backdrop-filter: blur(12px)){
  .card, .float-card, .quote-card, .post-card, .path-card{
    background:rgba(255,255,255,0.90) !important;
  }
}
@media (prefers-reduced-transparency: reduce){
  .card, .float-card, .quote-card, .post-card, .path-card{
    background:rgba(255,255,255,0.95) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

/* the dark mentor path card follows the light system, like the homepage one */
.path-card.mentor{
  background:rgba(255,255,255,0.60) !important;
  border:1px solid rgba(21,172,118,0.35) !important;
}
.path-card.mentor h3{ color:var(--forest) !important; }
.path-card.mentor p{ color:var(--cocoa) !important; }
.path-card.mentor ul{ color:var(--espresso) !important; }
.path-card.mentor li::before{ color:var(--mint-deep) !important; }
.path-card.mentor .pill{ background:rgba(69,251,178,0.18) !important; color:var(--mint-deep) !important; }

/* ── v4b · About-page bespoke hero (ab-*) joins the light canvas ──────────── */
.ab-hero-copy h1{ color:var(--forest) !important; }
.ab-hero-copy .lead{ color:var(--cocoa) !important; }
.ab-eyebrow{
  color:var(--link) !important;
  background:rgba(255,255,255,0.55) !important;
  border:1px solid rgba(255,251,242,0.6) !important;
}
.ab-trust span{
  color:var(--forest) !important;
  background:rgba(255,255,255,0.55) !important;
  border:1px solid rgba(255,251,242,0.6) !important;
}
.ab-scroll{ color:rgba(16,39,24,0.55) !important; }
.ab-scroll .mouse{ border-color:rgba(16,39,24,0.35) !important; }
.ab-tile{
  background:rgba(255,255,255,0.60) !important;
  border:1px solid rgba(255,251,242,0.7) !important;
  box-shadow:0 10px 34px rgba(16,39,24,0.10), inset 0 1px 0 rgba(255,252,244,0.6) !important;
  color:var(--espresso) !important;
}
.ab-tile .mt{ color:var(--cocoa) !important; }
.ab-tile.t3 .sm{ color:var(--cocoa) !important; }
/* .ab-dark stays dark on purpose — a deliberate brand band, like the CTA */

/* ============================================================================
   v5 · Per-page accent identity + cream-only surfaces (2026-07-12)
   One accent per page. home=green · about=purple · academics=blue · blog=cream.
   Accent drives eyebrows, highlights, glow ring, nav pill, rail, CTA + footer
   bands. Every surface is warm cream — no white anywhere.
   ============================================================================ */
:root{ --rbA-rgb:69,251,178; }
body.rb-a-green  { --soul:#15AC76; --rbA-rgb:69,251,178; --btn-bg:#45FBB2; --btn-fg:#102718; --btn-bg-h:#102718; --btn-fg-h:#45FBB2;
  --page-grad:var(--grad-mint-teal);
  --foot-grad:linear-gradient(180deg,#0C5C42 0%,#15AC76 46%,#7FE3BD 76%,#EAF7F0 100%); }
body.rb-a-purple { --soul:#7C3AED; --rbA-rgb:168,85,247; --btn-bg:#7C3AED; --btn-fg:#F7F3FF; --btn-bg-h:#5B21B6; --btn-fg-h:#F7F3FF;
  --page-grad:linear-gradient(167deg,#A855F7 -22%,#3A2350 46%,#241633 100%);
  --foot-grad:linear-gradient(180deg,#3F2470 0%,#7C2BE0 46%,#C6A0F5 76%,#F3ECFD 100%); }
body.rb-a-blue   { --soul:#0E7490; --rbA-rgb:34,211,238; --btn-bg:#0E7490; --btn-fg:#ECFEFF; --btn-bg-h:#0A5568; --btn-fg-h:#ECFEFF;
  --page-grad:linear-gradient(167deg,#22D3EE -22%,#0E3A52 46%,#0A2233 100%);
  --foot-grad:linear-gradient(180deg,#0A4254 0%,#0A93A1 46%,#74DEE6 76%,#EAFBFC 100%); }
body.rb-a-cream  { --soul:#8A7157; --rbA-rgb:186,164,120; --btn-bg:#4A3B2C; --btn-fg:#F5EFE2; --btn-bg-h:#2A2118; --btn-fg-h:#F5EFE2;
  --page-grad:linear-gradient(160deg,#8A7157 -22%,#4A3B2C 46%,#2A2118 100%);
  --foot-grad:linear-gradient(180deg,#4A3B2C 0%,#8A7157 46%,#D8C9A6 76%,#F2ECDE 100%); }

/* accent-follow highlights */
mark{ color:var(--soul,var(--link)) !important; }
.eyebrow{ color:var(--soul,var(--link)) !important; }
.nav a[aria-current="page"]{ color:var(--soul,var(--link)) !important; }
.hero .eyebrow{ color:var(--soul,var(--link)) !important; }

/* ── Cream surfaces — kill every remaining white block ────────────────────── */
main > section.soft, .soft{ background:transparent !important; }
.step, details, .stats-band, table.pricing, .tile-soft{
  background:rgba(255,255,255,0.60) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.8) brightness(1.04);
  backdrop-filter:blur(12px) saturate(1.8) brightness(1.04);
  border:1px solid rgba(255,251,242,0.7) !important;
  box-shadow:0 10px 34px rgba(16,39,24,0.08), inset 0 1px 0 rgba(255,252,244,0.6) !important;
}
table.pricing th{ background:var(--forest) !important; color:#FFFFFF !important; }  /* text on dark stays light */
.post-card .thumb{ background:rgba(var(--rbA-rgb),0.14) !important; }
.tile-blue,.tile-green{ background:rgba(var(--rbA-rgb),0.12) !important; }
.tile-yellow,.tile-pink{ background:rgba(var(--rbA-rgb),0.10) !important; }
.chip{ background:var(--soul) !important; color:#FFFFFF !important; }
.chip-blue,.chip-yellow{ background:rgba(var(--rbA-rgb),0.16) !important; color:var(--soul) !important; }
.app-pill{ background:rgba(var(--rbA-rgb),0.16) !important; color:var(--soul) !important; }
.app-pill .dot-live{ background:var(--soul) !important; }
.card .note, .post-card .meta, .post-card .more, .quote-card .avatar,
.stats .num em, .step h3, table.pricing .save{ color:var(--soul) !important; }
.quote-card .avatar{ background:rgba(var(--rbA-rgb),0.14) !important; }
.rating{ color:var(--soul) !important; }
details summary::after{ color:var(--soul) !important; }
.step::before{ background:var(--soul) !important; color:#FFFFFF !important; }
/* CTA follows the page accent (one colour per page) — ghost/white excluded */
.btn:not(.btn-ghost):not(.btn-white):not(.btn-yellow){
  background:var(--btn-bg,#45FBB2) !important;
  color:var(--btn-fg,#102718) !important;
  border-color:var(--btn-bg,#45FBB2) !important;
}
.btn:not(.btn-ghost):not(.btn-white):not(.btn-yellow):hover{
  background:var(--btn-bg-h,#102718) !important;
  color:var(--btn-fg-h,#45FBB2) !important;
  border-color:var(--btn-bg-h,#102718) !important;
}
.btn-ghost{ background:transparent !important; color:var(--forest) !important; border-color:rgba(16,39,24,0.22) !important; }
.btn-ghost:hover{ background:rgba(255,255,255,0.7) !important; border-color:var(--soul,var(--mint-deep)) !important; color:var(--forest) !important; }
.btn-white, .cta-band .btn-yellow{ background:#FFFFFF !important; color:var(--forest) !important; border-color:#FFFFFF !important; }
.btn-ghost:hover{ background:rgba(255,255,255,0.7) !important; }
.phone{ background:rgba(255,255,255,0.96) !important; }

/* ── Inner-page hero fits the viewport (was pushed low) ───────────────────── */
main > .hero{ padding:52px 0 clamp(40px,6vw,64px) !important; }
.hero .ribbon, .hero .ribbon-soft, .ab-orbs, .ab-scroll{ display:none !important; }
.page-illus, .hero-illus{ display:none !important; }

/* ── Accent-tinted static washes for reduced-motion / pre-JS on inner pages ─ */
body.rb-a-purple::before, body.rb-a-blue::before, body.rb-a-cream::before{
  background:#FFFFFF;
}

/* ============================================================================
   v6 · Card definition + About story/believe + pricing hero + hero motion
   (2026-07-12) — faint accent tint so glass always reads over cream; the
   'Our story' band → purple; 'What we believe' + academics cards → glass.
   ============================================================================ */

/* every card-like surface: cream glass with a whisper of the page accent so it
   never reads as a flat white block (fixes academics/blog "white" cards) */
.sc-card, .step, .glass-card, .why-item, .quote, .path, .faq details, .stats-band,
.card, .float-card, .quote-card, .post-card, .path-card, main details, table.pricing,
.ab-card, .ab-stat, .tile-soft{
  background:
    linear-gradient(180deg, rgba(var(--rbA-rgb),0.10), rgba(var(--rbA-rgb),0.035)),
    rgba(249,246,237,0.74) !important;
  border:1px solid rgba(255,251,242,0.72) !important;
  box-shadow:0 12px 36px rgba(16,39,24,0.10), 0 1px 4px rgba(16,39,24,0.05),
             inset 0 1px 0 rgba(255,252,244,0.65) !important;
}
.tile-blue,.tile-green,.tile-yellow,.tile-pink{
  background:
    linear-gradient(180deg, rgba(var(--rbA-rgb),0.17), rgba(var(--rbA-rgb),0.05)),
    rgba(249,246,237,0.74) !important;
  border:1px solid rgba(255,251,242,0.72) !important;
}
.post-card .thumb{ background:rgba(var(--rbA-rgb),0.16) !important; }

/* About · 'Our story' band → purple (was forest green) */
.ab-dark{ background:linear-gradient(160deg,#3A2350 0%,#241633 100%) !important; }
.ab-dark .eyebrow{ color:#C4A5FF !important; }
.ab-dark .ab-card{
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  box-shadow:0 20px 44px rgba(0,0,0,0.28) !important;
}
.ab-dark .ab-card h3{ color:#fff !important; }
.ab-dark .ab-card p{ color:rgba(255,255,255,0.82) !important; }
/* About · 'What we believe' cards (light canvas) read as glass, dark heading */
.ab-card h3{ color:var(--forest); }

/* shared stat-chip layout (about + pricing heroes) */
.ab-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:2.4rem; }
.ab-stat{ padding:20px 22px; border-radius:18px; }
.ab-stat .n{ display:block; font-family:var(--sans); font-weight:700; font-size:1.7rem; color:var(--forest); line-height:1.05; }
.ab-stat .l{ display:block; font-size:0.85rem; color:var(--cocoa); margin-top:6px; }
@media (max-width:720px){ .ab-stats{ grid-template-columns:1fr; } }

/* Hero entrance — one-time on load, every page (home uses .reveal, inner pages
   use main.js GSAP, about + pricing-stats use this CSS). No scroll motion. */
@keyframes rbHeroIn{ from{ opacity:0; transform:translateY(26px); filter:blur(6px); }
                     to{ opacity:1; transform:none; filter:blur(0); } }
.ab-hero .ab-eyebrow{ animation:rbHeroIn .6s cubic-bezier(0.16,1,0.3,1) both; }
.ab-hero .ab-h1{ animation:rbHeroIn .95s cubic-bezier(0.16,1,0.3,1) .08s both; }
.ab-hero .lead{ animation:rbHeroIn .75s cubic-bezier(0.16,1,0.3,1) .24s both; }
.ab-hero .actions{ animation:rbHeroIn .65s cubic-bezier(0.16,1,0.3,1) .4s both; }
.ab-hero .ab-stats{ animation:rbHeroIn .7s cubic-bezier(0.16,1,0.3,1) .52s both; }
.hero .ab-stats{ animation:rbHeroIn .7s cubic-bezier(0.16,1,0.3,1) .5s both; }
@media (prefers-reduced-motion:reduce){ .ab-hero *, .hero .ab-stats{ animation:none !important; } }

/* Blog (cream) — a visible warm static background, no WebGL (no rainbow) */
body.rb-a-cream::before{
  background:
    radial-gradient(rgba(16,39,24,0.035) 1px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(56vw 46vh at 14% 4%,  rgba(214,186,132,0.34), transparent 60%),
    radial-gradient(50vw 42vh at 88% 8%,  rgba(232,210,164,0.26), transparent 58%),
    radial-gradient(60vw 52vh at 82% 92%, rgba(206,176,124,0.24), transparent 64%),
    radial-gradient(46vw 40vh at 6% 88%,  rgba(188,160,116,0.20), transparent 60%),
    #F3EEE1;
}

/* ============================================================================
   v7 · Red accent (pricing = app admin red) · About mint→accent · home
   headings to ink · obvious hover glow (2026-07-12)
   ============================================================================ */
body.rb-a-red{ --soul:#C42B2B; --rbA-rgb:224,64,64; --btn-bg:#D92D2D; --btn-fg:#FFF3F1; --btn-bg-h:#9E1B1B; --btn-fg-h:#FFF3F1;
  --page-grad:linear-gradient(167deg,#FF6B6B -22%,#5A1A1A 46%,#3A1414 100%);
  --foot-grad:linear-gradient(180deg,#5A1414 0%,#C42B2B 46%,#F0A5A5 76%,#FBECEC 100%); }
body.rb-a-red::before{
  background:#FFFFFF;
}

/* About · recolour every leftover mint accent to the page accent (purple) */
.ab-yr{ background:var(--soul) !important; color:#fff !important; }
.ab-dark .ab-yr{ background:rgba(255,255,255,0.16) !important; color:#fff !important; }
.ab-card .big-num{ color:var(--soul) !important; }
.ab-bic{ background:rgba(var(--rbA-rgb),0.16) !important; color:var(--soul) !important; }
.ab-dark .eyebrow{ color:#C4A5FF !important; }

/* Home 'three steps' + 'why' box headings → near-black ink (were accent green) */
.step h3, .why-item h3{ color:#1A1914 !important; }

/* ============================================================================
   v8 · Official Durusi Colour System adopted (src/lib/brand.ts, 12 Jul 2026)
        + shrink-on-scroll header + white contrast cards      (2026-07-12)
   • Rule 1 — Mint #45FBB2 is the ONLY button, every page / every theme.
     Accents (--soul) drive eyebrows, links, tags, glow — never the button.
   • Cards → clean warm-white frosted glass that contrasts the coloured aurora
     (the Colour System says cards are White; the React-Bits card look you liked).
   • One theme per page, exact palette:  green = Parent / Mint ·
     purple = Student / Lilac · blue = Tutor / Electric ·
     red-key = Admin / MAGENTA (the system has no red) · cream = neutral.
   Overrides v5–v7 where they disagree.
   ============================================================================ */

/* ── Per-page theme tokens: ink-safe accent + fill-rgb + hero gradient ─────── */
body.rb-a-green  { --soul:#067952; --rbA-rgb:69,251,178;  --page-grad:var(--grad-mint-teal);
  --foot-grad:linear-gradient(180deg,#0C5C42 0%,#15AC76 46%,#7FE3BD 76%,#EAF7F0 100%); }
body.rb-a-purple { --soul:#7A52A6; --rbA-rgb:202,159,255; --page-grad:var(--grad-lilac-currant);
  --foot-grad:linear-gradient(180deg,#3B2560 0%,#7A52A6 46%,#CBAEF0 76%,#F3ECFD 100%); }
body.rb-a-blue   { --soul:#017579; --rbA-rgb:0,224,232;   --page-grad:var(--grad-electric-currant);
  --foot-grad:linear-gradient(180deg,#0A4254 0%,#0A93A1 46%,#74DEE6 76%,#EAFBFC 100%); }
body.rb-a-red    { --soul:#BC0071; --rbA-rgb:254,1,154;   --page-grad:var(--grad-magenta-currant);
  --foot-grad:linear-gradient(180deg,#6A003D 0%,#BC0071 46%,#FEA6D0 76%,#FDEFF4 100%); }
body.rb-a-magenta{ --soul:#BC0071; --rbA-rgb:254,1,154;   --page-grad:var(--grad-electric-magenta);
  --foot-grad:linear-gradient(180deg,#0A8190 0%,#7A1F8E 46%,#FB86C3 76%,#FCEDF5 100%); }
body.rb-a-cream  { --soul:#8A6E3F; --rbA-rgb:186,164,120; }

/* Rule 1 — every page's primary button is Mint (overrides v5/v7 accent buttons) */
body[class*="rb-a-"]{ --btn-bg:#45FBB2; --btn-fg:#102718; --btn-bg-h:#102718; --btn-fg-h:#45FBB2; }

/* Pricing pre-JS / reduced-motion static wash → magenta (was red) */
body.rb-a-red::before{
  background:#FFFFFF;
}

/* ── Cards → warm-white frosted glass, contrasting the coloured aurora ─────── */
.sc-card, .step, .glass-card, .why-item, .quote, .path, .faq details, .stats-band,
.card, .float-card, .quote-card, .post-card, .path-card, main details, table.pricing,
.ab-card, .ab-stat, .tile-soft{
  background:rgba(255,255,255,0.78) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(22,24,27,0.07) !important;
  box-shadow:
    0 1px 2px rgba(42,15,15,0.05),
    0 14px 38px rgba(42,15,15,0.09),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
@supports not (backdrop-filter: blur(1px)){
  .sc-card,.step,.glass-card,.why-item,.quote,.path,.faq details,.stats-band,
  .card,.float-card,.quote-card,.post-card,.path-card,main details,table.pricing,
  .ab-card,.ab-stat,.tile-soft{ background:rgba(255,255,255,0.95) !important; }
}
/* keep the mentor card in step with the rest (v6 had it cream) */
.path.mentor, .path-card.mentor{
  background:rgba(255,255,255,0.80) !important;
  border:1px solid rgba(22,24,27,0.07) !important;
}
/* .ab-dark .ab-card stays dark glass — higher specificity in v6 wins on purpose */

/* ── Header: roomy full-width at top → floating rounded ISLAND on scroll ───── */
.site-header{ transition:background .25s ease, padding .3s cubic-bezier(0.4,0,0.2,1); }
.site-header .container{
  border:1px solid transparent;
  transition:height .3s cubic-bezier(0.4,0,0.2,1), max-width .3s cubic-bezier(0.4,0,0.2,1),
             width .3s cubic-bezier(0.4,0,0.2,1), border-radius .3s ease, padding .3s ease,
             background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header .logo-img{ transition:height .3s cubic-bezier(0.4,0,0.2,1); }

/* at the very top — flat, full width, see-through */
.site-header:not(.scrolled){ background:rgba(255,255,255,0.55); }
.site-header:not(.scrolled) .container{ height:84px; }
.site-header:not(.scrolled) .logo-img{ height:40px; }

/* scrolled — the bar contracts into a centered, rounded, floating glass island */
.site-header.scrolled{ background:transparent !important; box-shadow:none !important;
  border-bottom-color:transparent !important; padding-top:10px; padding-bottom:2px; }
.site-header.scrolled .container{
  width:calc(100% - 40px);
  max-width:1140px;
  margin:0 auto;
  height:58px;
  padding:0 20px;
  border-radius:18px;
  background:rgba(255,255,255,0.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  backdrop-filter:blur(18px) saturate(1.7);
  border-color:rgba(22,24,27,0.08);
  box-shadow:0 12px 34px rgba(16,39,24,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
}
.site-header.scrolled .logo-img{ height:26px; }

@media (max-width:860px){
  .site-header:not(.scrolled) .container{ height:64px; }
  .site-header:not(.scrolled) .logo-img{ height:34px; }
  .site-header.scrolled .container{ height:54px; width:calc(100% - 20px); padding:0 16px; border-radius:16px; }
}
@media (prefers-reduced-motion:reduce){
  .site-header .container, .site-header .logo-img{ transition:none; }
}

/* ============================================================================
   v9 · "What's inside Durusi" — MagicBento feature grid (2026-07-12)
   6 glass cells; the React-Bits effect layer (spotlight + border glow +
   particle stars + tilt) lives in rb.css/rb.js. Each cell has a small
   hover-driven demo — calm at rest, alive on hover (matches the allowed motion:
   app-demo content + hover only, no autonomous scroll motion).
   ============================================================================ */
.mb-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:2.2rem;
  perspective:1100px;
}
@media (max-width:980px){ .mb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mb-grid{ grid-template-columns:1fr; } }

.mb-card{
  background:rgba(255,255,255,0.80);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(22,24,27,0.07);
  box-shadow:0 1px 2px rgba(42,15,15,0.05), 0 14px 38px rgba(42,15,15,0.09),
             inset 0 1px 0 rgba(255,255,255,0.9);
  border-radius:22px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:236px;
  overflow:hidden;
  outline:none;
  cursor:default;
}
.mb-viz{
  position:relative;
  flex:1;
  min-height:118px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--rbA-rgb),0.10), rgba(var(--rbA-rgb),0.03));
  overflow:hidden;
  display:grid;
  place-items:center;
}
.mb-txt h3{ margin:0 0 0.25rem; font-size:1.02rem; color:var(--forest); }
.mb-txt p{ margin:0; font-size:0.86rem; line-height:1.45; color:var(--cocoa); }

/* 1 · Verified mentors */
.mb-viz-mentors{ gap:12px; grid-auto-flow:row; }
.mbm-avatar{ width:56px; height:56px; border-radius:50%; position:relative;
  background:linear-gradient(160deg, rgba(var(--rbA-rgb),0.55), rgba(var(--rbA-rgb),0.20));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); }
.mbm-check{ position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%;
  background:var(--mint); color:var(--forest); font-size:12px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(16,39,24,0.25); }
.mbm-pill{ font-size:0.72rem; font-weight:600; color:var(--soul);
  background:rgba(var(--rbA-rgb),0.16); border:1px solid rgba(var(--rbA-rgb),0.30);
  padding:4px 11px; border-radius:999px; opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease; }
.mb-card:hover .mbm-check, .mb-card:focus-visible .mbm-check{ animation:mbmPop .5s ease; }
@keyframes mbmPop{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.2); } }
.mb-card:hover .mbm-pill, .mb-card:focus-visible .mbm-pill{ opacity:1; transform:none; }

/* 2 · Live lesson tracking */
.mb-viz-track{ background:#ECEAE2; }
.mbt-map{ position:absolute; inset:0; width:100%; height:100%; }
.mbt-pin{ position:absolute; width:15px; height:15px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,0.28); }
.mbt-pin-tutor{ left:30%; top:26%; background:var(--soul); }
.mbt-pin-tutor::after{ content:""; position:absolute; inset:4px; background:#fff; border-radius:50%; }
.mbt-pin-home{ left:66%; top:62%; background:var(--forest); }
.mb-card:hover .mbt-pin-tutor, .mb-card:focus-visible .mbt-pin-tutor{ animation:mbtPulse 1.3s ease-out infinite; }
@keyframes mbtPulse{
  0%{ box-shadow:0 2px 6px rgba(0,0,0,0.28), 0 0 0 0 rgba(var(--rbA-rgb),0.55); }
  100%{ box-shadow:0 2px 6px rgba(0,0,0,0.28), 0 0 0 15px rgba(var(--rbA-rgb),0); } }
.mbt-eta{ position:absolute; left:8px; bottom:8px; font-size:0.7rem; font-weight:600;
  color:var(--forest); background:rgba(255,255,255,0.88); padding:3px 9px; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,0.12); }

/* 3 · Matched to your child */
.mb-viz-match{ overflow:hidden; }
.mbp-trail{ position:absolute; width:56%; height:0; border-top:2px dotted rgba(var(--rbA-rgb),0.45); transform:rotate(-6deg); }
.mbp-plane{ width:34px; height:34px; fill:var(--soul); opacity:0.9; transform:translate(-6px,-1px) rotate(-6deg); }
.mb-card:hover .mbp-plane, .mb-card:focus-visible .mbp-plane{ animation:mbpFly 1.05s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes mbpFly{
  0%{ transform:translate(-46px,10px) rotate(-8deg); opacity:0; }
  25%{ opacity:1; } 70%{ opacity:1; }
  100%{ transform:translate(46px,-12px) rotate(6deg); opacity:0; } }
.mbp-done{ position:absolute; font-size:0.82rem; font-weight:700; color:var(--soul);
  opacity:0; transform:scale(0.9); }
.mbp-done::before{ content:"\2713\00a0"; }
.mb-card:hover .mbp-done, .mb-card:focus-visible .mbp-done{ animation:mbpDone .45s ease .78s forwards; }
@keyframes mbpDone{ to{ opacity:1; transform:scale(1); } }

/* 4 · Proof after every lesson */
.mbr-card{ width:80%; background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:11px;
  padding:13px; box-shadow:0 4px 14px rgba(0,0,0,0.06); position:relative; }
.mbr-dot{ position:absolute; right:11px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--soul); }
.mbr-line{ display:block; height:6px; border-radius:3px; background:rgba(0,0,0,0.10);
  margin-bottom:9px; transition:width .5s ease; }
.mbr-line.l1{ width:46%; transition-delay:.05s; } .mbr-line.l2{ width:62%; transition-delay:.18s; } .mbr-line.l3{ width:36%; transition-delay:.31s; margin-bottom:12px; }
.mb-card:hover .mbr-line.l1, .mb-card:focus-visible .mbr-line.l1{ width:72%; }
.mb-card:hover .mbr-line.l2, .mb-card:focus-visible .mbr-line.l2{ width:92%; }
.mb-card:hover .mbr-line.l3, .mb-card:focus-visible .mbr-line.l3{ width:58%; }
.mbr-bar{ height:6px; border-radius:3px; background:rgba(var(--rbA-rgb),0.18); overflow:hidden; }
.mbr-bar i{ display:block; height:100%; width:30%; background:var(--soul); transition:width .8s ease .32s; }
.mb-card:hover .mbr-bar i, .mb-card:focus-visible .mbr-bar i{ width:74%; }

/* 5 · Prepaid hours */
.mb-viz-wallet{ gap:12px; grid-auto-flow:row; }
.mbw-balance{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.mbw-num{ font-family:var(--sans); font-weight:700; font-size:2.05rem; color:var(--forest); }
.mbw-balance span{ font-size:0.68rem; color:var(--cocoa); margin-top:5px; }
.mbw-packs{ display:flex; gap:6px; }
.mbw-packs span{ font-size:0.72rem; font-weight:600; color:var(--cocoa);
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.06); border-radius:9px; padding:4px 10px; }
.mbw-packs span.on{ color:var(--forest); background:rgba(var(--rbA-rgb),0.18); border-color:rgba(var(--rbA-rgb),0.40); }
.mb-card:hover .mbw-packs span, .mb-card:focus-visible .mbw-packs span{ animation:mbwSweep 1.9s ease-in-out infinite; }
.mb-card:hover .mbw-packs span:nth-child(2), .mb-card:focus-visible .mbw-packs span:nth-child(2){ animation-delay:.32s; }
.mb-card:hover .mbw-packs span:nth-child(3), .mb-card:focus-visible .mbw-packs span:nth-child(3){ animation-delay:.64s; }
@keyframes mbwSweep{
  0%,70%,100%{ color:var(--cocoa); background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.06); }
  15%,45%{ color:var(--forest); background:rgba(var(--rbA-rgb),0.22); border-color:rgba(var(--rbA-rgb),0.45); } }

/* 6 · Every curriculum */
.mb-viz-curr{ align-content:center; padding:14px; }
.mb-viz-curr span{ font-size:0.72rem; font-weight:600; color:var(--cocoa);
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.06); border-radius:999px;
  padding:5px 11px; margin:3px; }
.mb-card:hover .mb-viz-curr span, .mb-card:focus-visible .mb-viz-curr span{ animation:mbcCycle 3.1s ease-in-out infinite; }
.mb-viz-curr span:nth-child(2){ animation-delay:.28s; } .mb-viz-curr span:nth-child(3){ animation-delay:.56s; }
.mb-viz-curr span:nth-child(4){ animation-delay:.84s; } .mb-viz-curr span:nth-child(5){ animation-delay:1.12s; }
.mb-viz-curr span:nth-child(6){ animation-delay:1.40s; }
@keyframes mbcCycle{
  0%,82%,100%{ color:var(--cocoa); background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.06); }
  9%,22%{ color:#fff; background:var(--soul); border-color:var(--soul); } }

/* flex wrap for the two flex-column vizzes (grid place-items handles the rest) */
.mb-viz-mentors, .mb-viz-wallet{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mb-viz-curr{ display:flex; flex-wrap:wrap; justify-content:center; }

@media (prefers-reduced-motion:reduce){
  .mb-card :is(.mbm-check,.mbm-pill,.mbr-line,.mbr-bar i){ transition:none !important; }
  .mb-card *{ animation:none !important; }
  .mbm-check{ transform:scale(1); } .mbm-pill{ opacity:1; transform:none; }
  .mbr-line.l1{ width:72%; } .mbr-line.l2{ width:92%; } .mbr-line.l3{ width:58%; } .mbr-bar i{ width:74%; }
}

/* ============================================================================
   v10 · Homepage feedback (2026-07-12): back to GLASS not white · steps number
   on the left · bento auto-animates · app-demo + mentor cards glass · CTA band
   recoloured to the page theme. His live eye overrides the artifact's white cards.
   ============================================================================ */

/* ── Cards → warm frosted GLASS everywhere (revert v8 white) ───────────────── */
.sc-card, .step, .glass-card, .why-item, .quote, .path, .faq details, .stats-band,
.card, .float-card, .quote-card, .post-card, .path-card, main details, table.pricing,
.ab-card, .ab-stat, .tile-soft, .mb-card{
  background:
    linear-gradient(180deg, rgba(var(--rbA-rgb),0.12), rgba(var(--rbA-rgb),0.04)),
    rgba(250,248,243,0.58) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.7) brightness(1.03);
  backdrop-filter:blur(18px) saturate(1.7) brightness(1.03);
  border:1px solid rgba(255,255,255,0.60) !important;
  box-shadow:0 12px 36px rgba(16,39,24,0.10), 0 1px 4px rgba(16,39,24,0.05),
             inset 0 1px 0 rgba(255,255,255,0.70) !important;
}
@supports not (backdrop-filter: blur(1px)){
  .sc-card,.step,.glass-card,.why-item,.quote,.path,.faq details,.stats-band,.card,
  .float-card,.quote-card,.post-card,.path-card,main details,table.pricing,
  .ab-card,.ab-stat,.tile-soft,.mb-card{ background:rgba(250,248,243,0.90) !important; }
}
.path.mentor, .path-card.mentor{
  background:
    linear-gradient(180deg, rgba(var(--rbA-rgb),0.12), rgba(var(--rbA-rgb),0.04)),
    rgba(250,248,243,0.58) !important;
  border:1px solid rgba(255,255,255,0.60) !important;
}

/* ── Three steps → number on the LEFT, shorter box ────────────────────────── */
.step{
  display:grid !important;
  grid-template-columns:auto 1fr;
  column-gap:16px;
  align-content:center;
  padding:18px 22px !important;
  min-height:0 !important;
}
.step::before{
  grid-row:1 / span 2; grid-column:1;
  position:static !important; margin:0 !important; align-self:center;
  top:auto !important; left:auto !important;
  width:44px; height:44px; border-radius:13px;
}
.step h3{ grid-column:2; align-self:end; margin:0 !important; color:#1A1914 !important; }
.step p{ grid-column:2; align-self:start; margin:3px 0 0 !important; }

/* ── App-demo boxes → all four the SAME glass + one consistent accent stage ── */
.sc-card .sc-stage::before,
.app-showcase > .sc-card:nth-of-type(2) .sc-stage::before,
.sc-card.wide .sc-stage::before{
  background:radial-gradient(82% 74% at 50% 112%,
    rgba(var(--rbA-rgb),0.20), rgba(var(--rbA-rgb),0.06) 55%, transparent 78%) !important;
}

/* ── "Find your perfect mentor" band → frosted glass on the green gradient ─── */
.grad-section .glass-card{
  background:rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.24) !important;
  box-shadow:0 18px 44px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.grad-section .glass-card h3{ color:#fff !important; }
.grad-section .glass-card .gc-meta{ color:rgba(255,255,255,0.82) !important; }
.grad-section .glass-card p{ color:rgba(255,255,255,0.90) !important; }
.grad-section .btn-glass{
  background:rgba(255,255,255,0.14) !important;
  border:1px solid rgba(255,255,255,0.45) !important;
  color:#fff !important; font-weight:600;
}
.grad-section .btn-glass:hover{ background:rgba(255,255,255,0.26) !important; border-color:#fff !important; }

/* ── Final CTA band → the page's own gradient (was clashing cyan→magenta) ──── */
.cta-band{ background:var(--page-grad) !important; }

/* ── Bento AUTO-ANIMATES (in view), not only on hover ─────────────────────── */
.mb-card.mb-live .mbm-check{ animation:mbmCheckLoop 4.2s ease-in-out infinite; }
.mb-card.mb-live .mbm-pill{ animation:mbmPillLoop 4.2s ease-in-out infinite; }
.mb-card.mb-live .mbt-pin-tutor{ animation:mbtPulse 1.8s ease-out infinite; }
.mb-card.mb-live .mbp-plane{ animation:mbpFlyLoop 4.6s cubic-bezier(0.4,0,0.2,1) infinite; }
.mb-card.mb-live .mbp-done{ animation:mbpDoneLoop 4.6s ease infinite; }
.mb-card.mb-live .mbr-line.l1{ animation:mbrL1 4s ease-in-out infinite; }
.mb-card.mb-live .mbr-line.l2{ animation:mbrL2 4s ease-in-out infinite; }
.mb-card.mb-live .mbr-line.l3{ animation:mbrL3 4s ease-in-out infinite; }
.mb-card.mb-live .mbr-bar i{ animation:mbrBar 4s ease-in-out infinite; }
.mb-card.mb-live .mbw-packs span{ animation:mbwSweep 2.6s ease-in-out infinite; }
.mb-card.mb-live .mbw-packs span:nth-child(2){ animation-delay:.4s; }
.mb-card.mb-live .mbw-packs span:nth-child(3){ animation-delay:.8s; }
.mb-card.mb-live .mb-viz-curr span{ animation:mbcCycle 3.6s ease-in-out infinite; }
.mb-card.mb-live .mb-viz-curr span:nth-child(2){ animation-delay:.3s; }
.mb-card.mb-live .mb-viz-curr span:nth-child(3){ animation-delay:.6s; }
.mb-card.mb-live .mb-viz-curr span:nth-child(4){ animation-delay:.9s; }
.mb-card.mb-live .mb-viz-curr span:nth-child(5){ animation-delay:1.2s; }
.mb-card.mb-live .mb-viz-curr span:nth-child(6){ animation-delay:1.5s; }
@keyframes mbmCheckLoop{ 0%,55%,100%{ transform:scale(1); } 65%{ transform:scale(1.22); } }
@keyframes mbmPillLoop{ 0%,10%{ opacity:0; transform:translateY(8px); } 26%,70%{ opacity:1; transform:none; } 86%,100%{ opacity:0; transform:translateY(8px); } }
@keyframes mbpFlyLoop{ 0%,4%{ transform:translate(-46px,10px) rotate(-8deg); opacity:0; } 16%{ opacity:1; } 40%{ opacity:1; } 54%,100%{ transform:translate(48px,-12px) rotate(6deg); opacity:0; } }
@keyframes mbpDoneLoop{ 0%,52%{ opacity:0; transform:scale(0.9); } 64%,88%{ opacity:1; transform:scale(1); } 96%,100%{ opacity:0; transform:scale(0.9); } }
@keyframes mbrL1{ 0%,8%{ width:46%; } 30%,72%{ width:72%; } 92%,100%{ width:46%; } }
@keyframes mbrL2{ 0%,8%{ width:62%; } 34%,72%{ width:92%; } 92%,100%{ width:62%; } }
@keyframes mbrL3{ 0%,8%{ width:36%; } 38%,72%{ width:58%; } 92%,100%{ width:36%; } }
@keyframes mbrBar{ 0%,12%{ width:30%; } 40%,74%{ width:74%; } 94%,100%{ width:30%; } }

/* ============================================================================
   v11 · About page — purple TEXT → black (his call) + hover glow on cards.
   Point --soul at ink so every accent-text use (hero eyebrow, "for students."
   heading, section eyebrows, belief icons, big number) goes black. The lilac
   aurora + faint tints (backgrounds) stay. On the dark "Our story" band, text
   stays white — black would vanish on the purple.
   ============================================================================ */
body.rb-a-purple{ --soul:#1A1914; }
body.rb-a-purple .ab-dark .eyebrow,
body.rb-a-purple .ab-dark .big-num{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* ============================================================================
   v12 · "What's inside" bento — REAL mini-demos (2026-07-13). Replaces the
   abstract placeholders with concrete app content: a named verified-mentor
   card, a live-tracking chip with a name, a paper-plane → named match result,
   a real lesson note (Covered / Next), an hours wallet with real pack pricing,
   the curriculum chips. Auto-animate when in view; respects the reality bans
   (paper-plane match, static pins, hours wallet, no rating stars).
   ============================================================================ */

/* 1 · Verified mentors — a real mentor mini-card */
.mb-viz-mentors{ gap:10px; }
.mbm-card{ display:flex; align-items:center; gap:10px; width:86%; padding:9px 11px;
  border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 4px 14px rgba(16,39,24,0.07); }
.mbm-av{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; font-size:0.78rem; font-weight:700; color:var(--forest);
  background:rgba(var(--rbA-rgb),0.30); }
.mbm-info{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.mbm-info b{ font-size:0.82rem; color:var(--forest); font-weight:700; }
.mbm-info small{ font-size:0.65rem; color:var(--cocoa); white-space:nowrap; }
.mbm-tick{ margin-left:auto; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--forest);
  background:var(--mint); box-shadow:0 2px 6px rgba(16,39,24,0.22); }
.mbm-verify{ display:inline-flex; align-items:center; gap:6px; font-size:0.66rem;
  font-weight:600; color:var(--soul); background:rgba(var(--rbA-rgb),0.14);
  border:1px solid rgba(var(--rbA-rgb),0.28); padding:4px 11px; border-radius:999px; }
.mbm-vd{ width:6px; height:6px; border-radius:50%; background:var(--mint-deep); }
.mb-card.mb-live .mbm-tick{ animation:mbmTickLoop 4.2s ease-in-out infinite; }
.mb-card.mb-live .mbm-verify{ animation:mbmVerifyLoop 4.2s ease-in-out infinite; }
@keyframes mbmTickLoop{ 0%,60%,100%{ transform:scale(1); } 8%{ transform:scale(0); } 20%{ transform:scale(1.25); } 30%{ transform:scale(1); } }
@keyframes mbmVerifyLoop{ 0%,14%{ opacity:0; transform:translateY(6px); } 30%,80%{ opacity:1; transform:none; } 92%,100%{ opacity:0; transform:translateY(6px); } }

/* 2 · Live tracking — eta chip now carries a name (map + static pins unchanged) */
.mbt-eta{ max-width:92%; }

/* 3 · Matched — paper-plane flies, lands as a named result */
.mbp-plane{ opacity:0.9; transform:translate(-4px,-2px) rotate(-6deg); }
.mbp-result{ position:absolute; inset:0; margin:auto; width:max-content; height:max-content;
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700;
  color:var(--forest); background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:999px;
  padding:5px 12px; box-shadow:0 4px 12px rgba(16,39,24,0.10); opacity:0; transform:scale(0.9); }
.mbp-rt{ width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  font-size:9px; font-weight:700; color:var(--forest); background:var(--mint); }
.mb-card.mb-live .mbp-result{ animation:mbpResultLoop 4.6s ease infinite; }
@keyframes mbpResultLoop{ 0%,52%{ opacity:0; transform:scale(0.9); } 64%,90%{ opacity:1; transform:scale(1); } 98%,100%{ opacity:0; transform:scale(0.9); } }

/* 4 · Proof — a real lesson note (Covered / Next), no abstract lines */
.mb-viz-report .mbr-note{ width:88%; background:#fff; border:1px solid rgba(0,0,0,0.06);
  border-radius:11px; padding:11px 12px; box-shadow:0 4px 14px rgba(16,39,24,0.07); }
.mbr-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mbr-head b{ font-size:0.74rem; color:var(--forest); font-weight:700; }
.mbr-head span{ font-size:0.6rem; color:var(--cocoa); background:rgba(0,0,0,0.04); padding:2px 8px; border-radius:999px; }
.mbr-row{ display:flex; align-items:center; gap:8px; font-size:0.71rem; color:var(--espresso); margin-top:7px; line-height:1.2; }
.mbr-row i{ font-style:normal; flex:0 0 auto; width:16px; height:16px; border-radius:6px;
  display:grid; place-items:center; font-size:10px; font-weight:700; }
.mbr-row.r-done i{ color:var(--forest); background:rgba(var(--rbA-rgb),0.24); }
.mbr-row.r-next i{ color:#fff; background:var(--soul); }
.mb-card.mb-live .mbr-row.r-done{ animation:mbrRowLoop 4s ease-in-out infinite; }
.mb-card.mb-live .mbr-row.r-next{ animation:mbrRowLoop 4s ease-in-out infinite; animation-delay:.4s; }
@keyframes mbrRowLoop{ 0%,10%{ opacity:0; transform:translateX(-6px); } 26%,82%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:translateX(-6px); } }

/* 5 · Prepaid hours — balance + packs + real pack price */
.mb-viz-wallet{ gap:8px; }
.mbw-num{ font-size:1.9rem !important; }
.mbw-packs span{ font-size:0.7rem; padding:4px 11px; }
.mbw-pack-price{ font-size:0.64rem; color:var(--cocoa); }

/* ============================================================================
   v13 · CTA buttons FOLLOW THE PAGE THEME (2026-07-13, his call — reverses the
   v8 "mint is the only button" rule). Home's theme IS mint so it's unchanged;
   About→lilac, Academics→electric, Pricing→magenta, Blog→warm-neutral.
   Bright theme fill + dark ink label (magenta takes white); hover inverts.
   ============================================================================ */
body.rb-a-green  { --btn-bg:#45FBB2; --btn-fg:#102718; --btn-bg-h:#102718; --btn-fg-h:#45FBB2; }
body.rb-a-purple { --btn-bg:#CA9FFF; --btn-fg:#2A1B38; --btn-bg-h:#2A1B38; --btn-fg-h:#CA9FFF; }
body.rb-a-blue   { --btn-bg:#00E0E8; --btn-fg:#0C333B; --btn-bg-h:#0C333B; --btn-fg-h:#00E0E8; }
body.rb-a-red    { --btn-bg:#FE019A; --btn-fg:#FFFFFF; --btn-bg-h:#6A003D; --btn-fg-h:#FFFFFF; }
body.rb-a-cream  { --btn-bg:#8A6E3F; --btn-fg:#F6F1E7; --btn-bg-h:#4A3B2C; --btn-fg-h:#F6F1E7; }

/* ============================================================================
   v14 · (2026-07-13) shared 2-col page hero (About + Pricing) · Pricing text →
   black + magenta table header (was green) · tighter heroes so the top fits.
   ============================================================================ */

/* shared 2-column hero: copy left + stat stack right (add .abh-grid to a .hero .container) */
.hero .container.abh-grid{ max-width:1140px; display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:clamp(28px,5vw,60px); align-items:center; }
.abh-copy{ text-align:left; }
.abh-copy .lead{ max-width:46ch; }
.abh-stats{ display:flex; flex-direction:column; gap:14px; }
.abh-stats .ab-stat{ display:flex; align-items:center; gap:16px; padding:18px 24px; margin-top:0 !important; }
.abh-stats .ab-stat .n{ font-size:2rem; flex:0 0 auto; }
.abh-stats .ab-stat .l{ margin-top:0; font-size:0.92rem; }
.abh-stats .ab-stat:nth-child(2){ margin-left:clamp(0px,3vw,34px); }
.abh-stats .ab-stat:nth-child(3){ margin-left:clamp(0px,1.5vw,16px); }
@media (max-width:900px){
  .hero .container.abh-grid{ grid-template-columns:1fr; gap:28px; }
  .abh-stats{ display:grid; grid-template-columns:1fr; }
  .abh-stats .ab-stat:nth-child(n){ margin-left:0; }
}

/* Pricing (magenta) — accent TEXT → black, like About (keeps the magenta CTA/theme) */
body.rb-a-red{ --soul:#1A1914; }

/* Pricing table — header band was forest GREEN → page-theme magenta */
table.pricing th{ background:linear-gradient(180deg,#BC0071,#6A003D) !important; color:#FFFFFF !important; }

/* Heroes sit higher so the top of each page fits the first screen without scrolling */
main > .hero{ padding:34px 0 clamp(26px,4vw,46px) !important; }

/* ============================================================================
   v15 · Immunity to browser AUTO-DARK / forced-dark (2026-07-13). The site is
   light-only; declaring color-scheme:light tells Chrome/Edge/Android auto-dark
   NOT to invert it into that "dark & brown" look. (Meta tags in each <head>
   reinforce this before CSS loads; a darkreader-lock meta covers that extension.)
   ============================================================================ */
:root{ color-scheme: only light; }
html, body, ::before, ::after{ color-scheme: only light; }
/* extra belt: keep our own colours even if a UA tries a forced-dark pass */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: only light; }
}

/* small-phone polish: the 4-col pricing table gets tight — shrink padding/type */
@media (max-width:560px){
  table.pricing th, table.pricing td{ padding:12px 7px !important; font-size:0.8rem; }
  table.pricing th{ font-size:0.66rem; line-height:1.2; }
}

/* ============================================================================
   v16 · ONE BRAND COLOUR — GREEN EVERYWHERE + ALL ACCENT TEXT BLACK
   (2026-07-14, his call: retire the per-page purple/blue/magenta/cream themes).
   Every page is rb-a-green now. This block (a) reverts the few per-theme
   colours that were hardcoded globally back to green, and (b) forces accent
   TEXT on the light canvas to black — graphics (icons, badges, glows, buttons,
   gradient bands, aurora) stay green via --soul / --rbA-rgb / --btn-*.
   ============================================================================ */
/* (a) revert global per-theme colours → green */
table.pricing th{ background:linear-gradient(180deg,#0C5C42,#102718) !important; color:#FFFFFF !important; }
.ab-dark{ background:linear-gradient(160deg,#0C333B 0%,#102718 100%) !important; }
.ab-dark .big-num{ color:#45FBB2 !important; }

/* (b) accent TEXT on the light canvas → black */
.eyebrow, .hero .eyebrow, mark, .grad, .ab-h1 .grad,
.nav a[aria-current="page"], .step h3, table.pricing .save,
.abs-name > div b, .lg-updated, .hero .lead a, .ct-alt a, .sc-desc a,
.sc-eyebrow, .stats .num em, .path.mentor .tag,
.meta, .more, .note, .note a, .post-card .meta, .post-card .more,
.card .note, .rating, .fine, .fine a, .abs-body a,
.sc-link, .stars, .tag, .num em, .app-pill{ color:#1A1914 !important; }
details summary::after{ color:#1A1914 !important; }
mark, .grad, .ab-h1 .grad{ -webkit-text-fill-color:#1A1914 !important; background:none !important; }

/* eyebrows that sit on a dark / green band stay light */
.cta-band .eyebrow, .grad-section .eyebrow, .ab-dark .eyebrow{ color:#7FE3BD !important; }

/* ============================================================================
   v17 · STRIPE-STYLE BENTO (2026-07-17 — his "YES to 1,2,3,4" on stripe.com's
   product grid). "What's inside Durusi" becomes a product-UI bento:
   1) real Frost app UI inside every card (not abstract vizzes)
   2) ↗ expand affordance on each card → opens the existing #sc-modal
   3) gradient is MATERIAL: it lives only inside the .mb-viz artwork stage;
      the card body is neutral glass with black text (overrides v10's tint)
   4) density contrast: airy grid, dense card content
   Layout: 2 large cards (tracking, matching) + 4 small. Text sits on TOP like
   Stripe; artwork fills the rest. All existing anim loops/reality bans kept.
   ============================================================================ */
.mb-grid{ grid-template-columns:repeat(12,1fr); gap:20px; }
.mb-card{ grid-column:span 3; position:relative; padding:20px; gap:12px;
  min-height:330px; cursor:pointer;
  background:rgba(253,251,247,0.74) !important;   /* neutral glass — green stays in the artwork */
  border:1px solid rgba(255,255,255,0.62) !important;
  box-shadow:0 12px 36px rgba(16,39,24,0.09), 0 1px 4px rgba(16,39,24,0.05),
             inset 0 1px 0 rgba(255,255,255,0.75) !important;
}
.mb-card.lg{ grid-column:span 6; }
@media (max-width:980px){
  .mb-grid{ grid-template-columns:repeat(2,1fr); }
  .mb-card, .mb-card.lg{ grid-column:auto; }
  .mb-card.lg{ grid-column:1 / -1; }
}
@media (max-width:600px){ .mb-grid{ grid-template-columns:1fr; } .mb-card.lg{ grid-column:auto; } }

/* text on top, Stripe-style; clear the ↗ button */
.mb-txt{ order:-1; padding-right:44px; }
[dir="rtl"] .mb-txt{ padding-right:0; padding-left:44px; }
.mb-txt h3{ font-size:1.08rem; letter-spacing:-0.01em; }
.mb-txt p{ font-size:0.87rem; }

/* the artwork stage = the only place the gradient lives (material, not decor) */
.mb-viz{
  min-height:170px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.78);
  background:
    radial-gradient(120% 95% at 50% 118%, rgba(69,251,178,0.30), rgba(69,251,178,0.10) 52%, transparent 78%),
    linear-gradient(180deg, #F5F2EB 0%, #EEEAE0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);
}
.mb-card.lg .mb-viz{ min-height:225px; }
.mb-viz-track{ background:#ECEAE2; }  /* the map IS the artwork */
.mb-viz-track::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 60% at 50% 118%, rgba(69,251,178,0.22), transparent 70%); }

/* ↗ expand — quiet, top-right, same affordance as the app showcase */
.mb-card .sc-expand{ top:16px; right:16px; width:34px; height:34px; border-radius:10px; }
[dir="rtl"] .mb-card .sc-expand{ right:auto; left:16px; }
.sc-expand:active{ transform:scale(0.92); }
.sc-expand:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

/* ── denser Frost UI pieces ────────────────────────────────────────────── */
/* tracking: status card pinned to the stage bottom (mirrors the app tracker) */
.mbt-status{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.9);
  border-top:1px solid #fff; border-radius:12px; box-shadow:0 6px 18px rgba(16,39,24,0.10); }
.mbt-sav{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--mint); color:var(--forest); font-weight:700; font-size:0.68rem; }
.mbt-sinfo{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.mbt-sinfo b{ font-size:0.78rem; color:var(--forest); }
.mbt-sinfo small{ font-size:0.63rem; color:var(--cocoa); }
.mbt-dots{ margin-left:auto; display:flex; gap:5px; align-items:center; }
[dir="rtl"] .mbt-dots{ margin-left:0; margin-right:auto; }
.mbt-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,0.12); }
.mbt-dots i.on{ background:var(--mint-deep); }
.mb-card.mb-live .mbt-dots i.cur{ animation:mbtDotPulse 1.6s ease-out infinite; background:var(--mint-deep); }
@keyframes mbtDotPulse{ 0%{ box-shadow:0 0 0 0 rgba(69,251,178,0.55); } 100%{ box-shadow:0 0 0 8px rgba(69,251,178,0); } }
.mb-card.lg .mbt-eta{ left:auto; right:10px; top:10px; bottom:auto; }
[dir="rtl"] .mb-card.lg .mbt-eta{ right:auto; left:10px; }

/* matching: the request card the plane "carries" to a match */
.mbp-req{ position:absolute; left:14px; top:14px; z-index:2; display:flex; flex-direction:column;
  padding:8px 12px; line-height:1.25; text-align:left;
  background:rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.9); border-top-color:#fff;
  border-radius:11px; box-shadow:0 5px 16px rgba(16,39,24,0.09); }
[dir="rtl"] .mbp-req{ left:auto; right:14px; text-align:right; }
.mbp-req small{ font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--cocoa); }
.mbp-req b{ font-size:0.76rem; color:var(--forest); }
.mb-card.lg .mbp-result{ inset:auto; right:14px; bottom:14px; margin:0; }
[dir="rtl"] .mb-card.lg .mbp-result{ right:auto; left:14px; }

/* mentors: verification checklist chips (replace the single pill) */
.mbm-checks{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.mbm-checks span{ font-size:0.68rem; font-weight:600; color:var(--cocoa);
  background:rgba(255,255,255,0.85); border:1px solid rgba(0,0,0,0.05); border-radius:9px; padding:4px 9px; }
.mb-card:hover .mbm-checks span, .mb-card.mb-live .mbm-checks span{ animation:mbwSweep 2.6s ease-in-out infinite; }
.mb-card:hover .mbm-checks span:nth-child(2), .mb-card.mb-live .mbm-checks span:nth-child(2){ animation-delay:.4s; }
.mb-card:hover .mbm-checks span:nth-child(3), .mb-card.mb-live .mbm-checks span:nth-child(3){ animation-delay:.8s; }

/* report: homework row + delivery footer */
.mbr-row.r-hw i{ color:var(--cocoa); font-style:normal; }
.mbr-sent{ margin-top:9px; padding-top:8px; border-top:1px dashed rgba(0,0,0,0.08);
  font-size:0.6rem; color:var(--cocoa); display:flex; align-items:center; gap:5px; }
.mbr-sent::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--mint-deep); }

/* plans: the per-hour rate line (matches pricing.html) */
.mbw-rate{ font-size:0.66rem; color:var(--cocoa); }

/* ── expanded (modal) versions ─────────────────────────────────────────── */
.mbd h3{ margin:0 0 0.4rem; font-size:1.35rem; color:var(--forest); letter-spacing:-0.01em; }
.mbd > p{ margin:0 0 1.1rem; color:var(--cocoa); font-size:0.98rem; line-height:1.55; max-width:60ch; }
.mbd .mb-viz{ position:relative; min-height:300px; display:grid; place-items:center;
  pointer-events:none; overflow:hidden; }
.mbd .mb-viz-mentors, .mbd .mb-viz-wallet{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.mbd .mb-viz-curr{ display:flex; flex-wrap:wrap; justify-content:center; align-content:center; padding:14px; }
/* v17.1 — status card: keep the name on one line, truncate gracefully */
.mbt-sinfo{ flex:1; }
.mbt-sinfo b, .mbt-sinfo small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* ============================================================================
   v18 · FLAT CARDS + NEUTRAL GLASS SITE-WIDE + FITTED BENTO MODALS
   (2026-07-17, his calls: "remove the tilt" · "the expanded card text is in
   the corners, not fitted" · "clean all the glass boxes, they all have a green
   color, keep them white — way too much green").
   Green now lives ONLY in: artwork stages (.mb-viz/.sc-stage), icon chips,
   glow rings, CTAs, gradient bands and the aurora. Boxes are neutral glass —
   translucent warm-white (NOT opaque white), so the aurora still shows through.
   ============================================================================ */
/* tilt gone → no need for a 3D context on the grid */
.mb-grid{ perspective:none; }

/* neutral glass for every box the v10 rule tinted green (same list + tiles) */
.sc-card, .step, .glass-card, .why-item, .quote, .path, .faq details, .stats-band,
.card, .float-card, .quote-card, .post-card, .path-card, main details, table.pricing,
.ab-card, .ab-stat, .tile-soft, .mb-card,
.tile-blue, .tile-green, .tile-yellow, .tile-pink{
  background:rgba(253,251,247,0.74) !important;
}
/* the mentor band's dark-frosted cards keep their on-gradient styling
   (.grad-section .glass-card wins on specificity — no change needed) */

/* ── bento modal: padded, centered, stage constrained (was corner-to-corner) ── */
.mbd{ max-width:760px; margin:0 auto; padding:46px 40px 44px; }
.mbd h3{ font-size:1.9rem; line-height:1.15; padding-inline-end:44px; }
.mbd > p{ font-size:1rem; }
.mbd .mb-viz{ width:100%; max-width:640px; min-height:320px; margin:0 auto; border-radius:18px; }
@media (max-width:640px){
  .mbd{ padding:38px 22px 30px; }
  .mbd h3{ font-size:1.5rem; }
  .mbd .mb-viz{ min-height:260px; }
}

/* ============================================================
   v19 (2026-07-26) — site-wide press states + unified focus ring
   Emil rule: pressable elements scale down on :active (subtle,
   120-160ms, rides each element's existing transform transition).
   ============================================================ */

/* btn-ghost/btn-glass lacked transform in their transitions — give them
   a superset so press (and hover lift, where defined) animates smoothly */
.btn-ghost, .btn-glass{
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .15s ease, box-shadow .2s ease;
}

.btn:active, .btn-ghost:active, .btn-glass:active,
.btn-yellow:active, .btn-white:active,
.lang-toggle:active, .nav-toggle:active{
  transform: translateY(0) scale(0.97);
  box-shadow: 0 3px 10px rgba(16,39,24,0.12);
}

/* wide clickable rows press more gently than compact buttons */
details summary{ transition: transform .13s ease; }
details summary:active{ transform: scale(0.99); }

/* Unified mint focus ring (keyboard only) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid #45FBB2;
  outline-offset: 2px;
}
/* mint-filled CTAs: mint ring would vanish against the fill — use forest */
.btn:focus-visible{ outline: 2px solid #102718; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .btn-ghost, .btn-glass, details summary{ transition-duration: 0.01ms; }
}

/* ============================================================
   v20 (2026-07-26) — scroll reveals, restrained edition
   Off by default. reveal.js adds html.sr-on (and only when the
   visitor has NOT asked for reduced motion), then tags chosen
   elements .sr; .sr-in plays them once. The July version was a
   40px 3D flight with rotateX — this is a 14px rise + fade.
   ============================================================ */
html.sr-on .sr{
  opacity:0 !important;
  transform:translateY(14px) !important;
}
html.sr-on .sr.sr-in{
  opacity:1 !important;
  transform:none !important;
  transition:opacity .5s cubic-bezier(.23,1,.32,1),
             transform .5s cubic-bezier(.23,1,.32,1);
  transition-delay:calc(var(--sr-d, 0) * 1ms);
}
/* belt and braces — JS already refuses to run under reduced motion */
@media (prefers-reduced-motion: reduce){
  html.sr-on .sr{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   v21 (2026-07-26) — Motion layer + bento refinements
   Colours unchanged: neutral warm-white glass boxes, black text,
   green only in artwork/chips/glow/CTAs. This block adds (a) the
   pre-entrance hidden state Motion animates out of, (b) the card
   craft borrowed from motion.dev — a category label and a sweeping
   accent hairline on hover.
   ============================================================ */

/* (a) hidden until Motion plays it. Non-!important on purpose so the
   library's inline styles win the moment the animation starts. */
/* NOTE the :not(.m-in). A finished Web Animations animation is removed by the
   browser and the element falls back to its CSS state — if that state were
   still opacity:0 the content would vanish once the entrance ended. motion.js
   adds .m-in as it starts each animation, so the resting state is visible. */
html.m-ready .reveal-on-scroll:not(.m-in):not(.grad-section):not(.cta-band):not(.stats-band):not(.steps):not(.why-grid):not(.quotes):not(.proof-checks):not(.faq):not(.paths),
html.m-ready .steps > *:not(.m-in),
html.m-ready .why-grid > *:not(.m-in),
html.m-ready .quotes > *:not(.m-in),
html.m-ready .proof-checks > *:not(.m-in),
html.m-ready .faq > *:not(.m-in),
html.m-ready .paths > *:not(.m-in),
html.m-ready .mb-grid > *:not(.m-in),
html.m-ready .hero .reveal:not(.m-in){
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  html.m-ready .reveal-on-scroll,
  html.m-ready .steps > *, html.m-ready .why-grid > *, html.m-ready .quotes > *,
  html.m-ready .proof-checks > *, html.m-ready .faq > *, html.m-ready .paths > *,
  html.m-ready .mb-grid > *, html.m-ready .hero .reveal{ opacity:1 !important; }
}

/* (b) bento card craft ---------------------------------------------------- */
.mb-tag{
  display:block; margin-bottom:9px;
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soul);
}
[dir="rtl"] .mb-tag{ letter-spacing:.06em; }

.mb-card .mb-txt h3{ letter-spacing:-0.015em; }

/* sweeping accent hairline along the top edge on hover (motion.dev's
   border-beam idea, in our green rather than their yellow) */
.mb-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:4; opacity:0; transition:opacity .25s ease;
  background:linear-gradient(90deg, transparent, rgb(var(--rbA-rgb)), transparent)
             top left / 45% 1.5px no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .mb-card:hover::before{ opacity:.95; animation:mbBeam 1.5s cubic-bezier(0.39,0.24,0.3,1) infinite; }
}
@keyframes mbBeam{ from{ background-position-x:-50%; } to{ background-position-x:150%; } }
@media (prefers-reduced-motion: reduce){ .mb-card:hover::before{ animation:none; } }

/* ============================================================
   v22 (2026-08-11) — Stripe-style showcase replaces the bento:
   the app's real booking screen (animated by showcase.js) + the
   curricula globe. Neutral glass language kept: cream canvas,
   black text, green only in accents/artwork. The old .mb-card
   rules below v17-v21 are now inert on EN home (markup removed);
   AR still uses them until the redesign is approved.
   ============================================================ */
.du-showcase{ margin-top:2.4rem; display:grid; gap:clamp(64px,8vw,110px); }
.du-feature{
  display:grid; grid-template-columns:0.94fr 1.06fr;
  gap:clamp(30px,4.5vw,70px); align-items:center;
}
.du-copy h3{ font-size:clamp(1.45rem,2.5vw,2rem); letter-spacing:-0.015em; margin:10px 0 12px; color:#1A1914; }
.du-copy p{ color:#586863; max-width:52ch; }
.du-flip .du-copy{ order:2 } .du-flip .du-visual{ order:1 }

.du-ticks{ list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
.du-ticks li{ display:flex; gap:9px; align-items:baseline; font-size:.92rem; color:#1A1914; }
.du-ticks li::before{ content:"\2713"; color:var(--soul); font-weight:700; flex:none; }

.du-legend{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.du-legend li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; color:#1A1914;
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(26,25,20,.10); background:rgba(253,251,247,.74);
}
.du-legend li i{ width:8px; height:8px; border-radius:50%; background:var(--soul); flex:none; }
.du-legend li.du-home i{ background:#45FBB2; box-shadow:0 0 0 3px rgba(69,251,178,.28); }

.du-visual{ display:flex; justify-content:center; min-width:0; }

/* ── the phone ─────────────────────────────────────────────── */
.du-phone{
  width:min(344px,88vw); border-radius:50px; background:#101816; padding:9px;
  box-shadow:0 28px 70px rgba(16,39,24,.20), 0 4px 16px rgba(16,39,24,.10);
}
.du-ph-in{ border-radius:42px; overflow:hidden; background:#fff; }
.du-ph-head{
  background:linear-gradient(155deg,#11413E 0%,#102718 88%);
  color:#fff; padding:12px 22px 26px;
}
.du-ph-status{ display:flex; justify-content:space-between; font-size:.72rem; font-weight:600; letter-spacing:.02em; opacity:.95; }
.du-ph-status span:last-child{ font-size:.5rem; letter-spacing:.16em; opacity:.8; }
.du-ph-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.8); }
.du-ph-back{ font-size:1.5rem; line-height:1; }
.du-ph-kicker{ margin-top:22px; font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.du-ph-h{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.6rem; margin-top:4px; }
.du-ph-body{ padding:6px 20px 20px; }

.du-subj{ display:flex; align-items:center; gap:9px; padding:14px 0 2px; font-size:.95rem; color:#1A1914; }
.du-subj b{ font-weight:600; }
.du-subj-board{ margin-inline-start:auto; color:#8A8578; font-size:.82rem; }
.du-subj-ic{ display:inline-flex; }
.du-subj-ic svg{ width:17px; height:17px; color:#1A1914; }
.du-plan{ font-size:.72rem; color:#8A8578; padding-bottom:8px; border-bottom:1px solid rgba(26,25,20,.08); }

.du-row{
  display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(26,25,20,.07);
}
.du-d{ display:flex; flex-direction:column; font-size:.86rem; color:#1A1914; }
.du-d b{ font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8A8578; }
.du-t{ display:flex; flex-direction:column; }
.du-t b{ font-size:.88rem; font-weight:500; color:#1A1914; }
.du-t i{ font-size:.78rem; color:#8A8578; }
.du-x{ color:#B5B0A4; font-size:1rem; }

.du-add{ padding:11px 0; font-size:.82rem; border-bottom:1px solid rgba(26,25,20,.07); }
.du-add-lesson{ text-align:end; color:#8A8578; font-style:italic; }
.du-add-subj{ display:flex; align-items:center; gap:9px; font-size:.9rem; }
.du-add-subj b{ font-weight:600; color:#1A1914; }

.du-sum{ padding-top:14px; }
.du-sline{ display:flex; justify-content:space-between; font-size:.86rem; color:#586863; padding:3px 0; }
.du-sline b{ font-weight:500; color:#1A1914; font-variant-numeric:tabular-nums; }
.du-total{ font-size:.95rem; padding-top:6px; }
.du-total span{ font-weight:700; color:#1A1914; }
.du-total b{ font-weight:700; }
.du-vat{ font-size:.72rem; color:#8A8578; margin-top:2px; }
.du-pay{
  width:100%; margin-top:16px; padding:15px 0; border-radius:999px;
  background:#fff; border:1.5px solid #1A1914; color:#1A1914;
  font:inherit; font-weight:600; font-size:.95rem; cursor:default;
  font-variant-numeric:tabular-nums;
}
.du-pay b{ font-weight:600; }

/* ── the globe ─────────────────────────────────────────────── */
.du-globe-wrap{ position:relative; width:min(540px,92vw); aspect-ratio:1/1; }
.du-globe-wrap::before{
  content:''; position:absolute; inset:4%; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 40%, rgba(69,251,178,.16), rgba(69,251,178,0) 72%);
}
.du-globe-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }

@media (max-width:980px){
  .du-feature{ grid-template-columns:1fr; gap:34px; }
  .du-flip .du-copy{ order:0 } .du-flip .du-visual{ order:0 }
  .du-ticks{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   v23 (2026-08-12) — showcase refinements:
   (a) the phone is now true iPhone geometry — a 390×844 logical
   screen scaled down (transform), so proportions match a real
   device instead of stretching to content; status-bar icons and
   home indicator added. (b) the globe went Stripe-dark: bigger
   wrap, deep-forest sphere is drawn by showcase.js, the CSS halo
   softens behind it. Overrides the v22 phone/globe blocks.
   ============================================================ */
.du-phone{ --dus:0.78; width:auto; border-radius:calc(54px*var(--dus) + 9px); padding:9px; }
.du-ph-in{
  width:calc(390px*var(--dus)); height:calc(844px*var(--dus));
  border-radius:calc(46px*var(--dus)); overflow:hidden; background:#fff; position:relative;
}
.du-ph-screen{
  width:390px; height:844px; transform:scale(var(--dus));
  transform-origin:top left; display:flex; flex-direction:column; position:relative;
}
@media (max-width:1120px){ .du-phone{ --dus:0.72; } }
@media (max-width:480px){ .du-phone{ --dus:0.66; } }
@media (max-width:380px){ .du-phone{ --dus:0.58; } }

.du-ph-head{ padding:14px 24px 22px; flex:none; }
.du-ph-status{ display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; }
.du-ph-sbi{ width:56px; height:12px; }
.du-ph-nav{ margin-top:12px; font-size:17px; }
.du-ph-back{ font-size:30px; }
.du-ph-kicker{ margin-top:24px; font-size:11px; letter-spacing:.13em; }
.du-ph-h{ font-size:30px; margin-top:5px; }

.du-ph-body{ padding:2px 24px 0; flex:1; }
.du-subj{ padding:16px 0 3px; font-size:17px; gap:10px; }
.du-subj-ic svg{ width:19px; height:19px; }
.du-subj-board{ font-size:15px; }
.du-plan{ font-size:12px; padding-bottom:10px; }
.du-row{ grid-template-columns:56px 1fr auto; padding:10px 0; gap:14px; }
.du-d{ font-size:15px; }
.du-d b{ font-size:10px; }
.du-t b{ font-size:16px; }
.du-t i{ font-size:14px; }
.du-x{ font-size:17px; }
.du-add{ padding:12px 0; font-size:14px; }
.du-add-subj{ font-size:16px; }
.du-sum{ padding-top:12px; }
.du-sline{ font-size:15px; padding:3px 0; }
.du-total{ font-size:17px; padding-top:7px; }
.du-vat{ font-size:12px; }
.du-pay{ margin-top:14px; padding:16px 0; font-size:17px; }
.du-ph-home{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:134px; height:5px; border-radius:3px; background:rgba(26,25,20,.85);
}

/* globe: bigger, dark-sphere halo */
.du-globe-wrap{ width:min(600px,94vw); }
.du-globe-wrap::before{
  inset:-3%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(69,251,178,.14), rgba(69,251,178,0) 70%);
}
.du-legend li.du-cream i{ background:#FFFBF0; border:1px solid rgba(26,25,20,.30); }

/* v23.1 — the phone screen inherits the site's 1.6 line-height, which blew
   the 844pt budget. Tighten type inside the screen and trim paddings so the
   full booking flow fits a real iPhone screen with room to spare. */
.du-ph-screen{ line-height:1.3; }
.du-ph-head{ padding:12px 24px 18px; }
.du-ph-kicker{ margin-top:16px; }
.du-ph-nav{ margin-top:8px; }
.du-ph-h{ font-size:28px; margin-top:4px; line-height:1.15; }
.du-ph-body{ padding-top:0; overflow:hidden; }
.du-subj{ padding:12px 0 2px; }
.du-plan{ padding-bottom:8px; }
.du-row{ padding:8px 0; }
.du-t b, .du-t i{ line-height:1.35; }
.du-add{ padding:10px 0; }
.du-sum{ padding-top:10px; }
.du-sline{ padding:2px 0; }
.du-total{ padding-top:5px; }
.du-pay{ margin-top:12px; padding:14px 0; }

/* ============================================================
   v24 (2026-08-12) — phone matched to the real app screenshot +
   moved to the hero; globe went Stripe-LIGHT (dark sphere dead).
   Screenshot-faithful details: Fredoka inside the screen (the
   app's typeface), serif-italic price sublines, dark header card
   with rounded bottom, airy rows with hairline dividers, thin
   bezel, muted greys. Overrides earlier .du-* phone rules.
   ============================================================ */
.hero-art .du-phone{ --dus:0.8; }
.du-phone{ padding:7px; background:#0A0F0C; border-radius:calc(56px*var(--dus)); }
.du-ph-in{ border-radius:calc(50px*var(--dus)); }
.du-ph-screen{ font-family:'Fredoka',sans-serif; line-height:1.28; }

.du-ph-head{
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(38,110,92,.85) 0%, rgba(38,110,92,0) 55%),
    linear-gradient(160deg,#0F4237 0%,#081F17 100%);
  border-radius:0 0 30px 30px;
  padding:14px 26px 26px;
}
.du-ph-status{ font-size:15px; font-weight:600; letter-spacing:.01em; }
.du-ph-nav{ margin-top:10px; font-size:16px; font-weight:500; color:rgba(255,255,255,.55); }
.du-ph-back{ font-size:26px; color:#fff; }
.du-ph-kicker{ margin-top:22px; font-size:11px; font-weight:500; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.du-ph-h{ font-size:29px; font-weight:600; margin-top:5px; }

.du-ph-body{ padding:4px 26px 0; }
.du-subj{ padding:16px 0 3px; }
.du-subj b{ font-size:17px; font-weight:600; color:#14231B; }
.du-subj-board{ font-size:15px; font-weight:400; color:#9AA39C; }
.du-subj-ic svg{ width:20px; height:20px; color:#14231B; }
.du-plan{ font-size:12px; font-weight:400; color:#9AA39C; padding-bottom:9px; border-bottom:1px solid rgba(26,25,20,.07); }

.du-row{ grid-template-columns:54px 1fr auto; padding:11px 0; border-bottom:1px solid rgba(26,25,20,.06); }
.du-d{ font-size:16px; font-weight:500; color:#14231B; }
.du-d b{ font-size:10px; font-weight:600; letter-spacing:.09em; color:#A9B1AA; }
.du-t b{ font-size:16px; font-weight:500; color:#17251D; }
.du-t i{
  font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:14px; color:#9AA39C; margin-top:1px;
}
.du-x{ color:#B9BFB7; font-size:16px; }

.du-add{ border-bottom:1px solid rgba(26,25,20,.06); }
.du-add-lesson{
  font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:14px; color:#9AA39C; padding:12px 0;
}
.du-add-subj{ padding:13px 0; }
.du-add-subj b{ font-size:16px; font-weight:600; color:#14231B; }

.du-sum{ padding-top:12px; }
.du-sline{ font-size:15px; font-weight:400; color:#6B756D; padding:2px 0; }
.du-sline b{ font-size:15px; font-weight:500; color:#14231B; }
.du-total{ padding-top:6px; }
.du-total span, .du-total b{ font-size:17px; font-weight:600; color:#0F1B14; }
.du-vat{ font-size:12px; color:#A9B1AA; margin-top:2px; }
.du-pay{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px;
  border:1.6px solid #14231B; color:#0F1B14; background:#fff;
  margin-top:13px; padding:15px 0;
}
.du-pay b{ font-weight:600; }
.du-ph-home{ background:rgba(26,25,20,.8); bottom:7px; }

/* hero hosts the phone now; the frost tracking iphone moved to the showcase */
.hero-art .du-phone{ box-shadow:0 44px 90px rgba(16,39,24,.28); }
.du-visual .iphone.frost{ margin-inline:auto; }

/* globe: light Stripe planet — the CSS halo is now a soft neutral lift */
.du-globe-wrap{ width:min(620px,94vw); }
.du-globe-wrap::before{
  inset:5%;
  background:radial-gradient(50% 50% at 50% 54%, rgba(16,39,24,.10), rgba(16,39,24,0) 70%);
}

/* v24.1 — reclaim ~55px so the airy metrics still fit the 844pt screen */
.du-ph-head{ padding:12px 26px 22px; }
.du-ph-kicker{ margin-top:15px; }
.du-ph-h{ font-size:28px; }
.du-ph-body{ padding-top:2px; }
.du-subj{ padding:12px 0 3px; }
.du-row{ padding:9px 0; }
.du-add-lesson{ padding:10px 0; }
.du-add-subj{ padding:11px 0; }
.du-sum{ padding-top:10px; }
.du-pay{ margin-top:12px; padding:14px 0; }

/* v24.2 — final 20px: the home indicator needs clearance under Pay */
.du-row{ padding:8px 0; }
.du-ph-kicker{ margin-top:12px; }
.du-sline{ padding:1px 0; }
.du-pay{ padding:13px 0; }

/* ============================================================
   v25 (2026-08-15) — brand identity: "durusi:" wordmark
   The logo is now the app's identity — Fredoka rounded "durusi"
   in forest ink with the mint colon (matches the app icon's
   d: mark). Rendered as text: crisp at every size, no image.
   Favicon/apple-touch now come from the app icon itself.
   ============================================================ */
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo-word{
  font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:1.5rem; line-height:1; letter-spacing:-0.01em;
  color:#102718;
}
/* header wordmark reads small against the nav — size it up, and let it shrink
   slightly once the header contracts on scroll */
.site-header .logo-word{ font-size:1.95rem; }
.site-header.scrolled .logo-word{ font-size:1.7rem; }
.site-header .logo-word{ transition:font-size .3s cubic-bezier(0.4,0,0.2,1); }
@media (max-width:760px){
  .site-header .logo-word{ font-size:1.72rem; }
  .site-header.scrolled .logo-word{ font-size:1.55rem; }
}
.logo-word i{ font-style:normal; color:#45FBB2; margin-inline-start:1px; }
.site-footer .logo-word{ color:#fff; }
.site-footer .logo-word i{ color:#45FBB2; }

/* v25.1 — the wordmark is a Latin lockup: force LTR so the mint colon
   stays on the RIGHT of "durusi" on Arabic pages (bidi puts trailing
   neutral punctuation on the left of a Latin run in RTL context). */
.logo-word{ direction:ltr; unicode-bidi:isolate; }

/* ============================================================
   v26.1 (2026-08-16) — REVERTED: the ink/black accent pass and the
   coloured marquee logos are undone (his call — accents return to
   the green theme, logos back to grayscale via the original rules).
   Kept from v26: the white globe module card, the globe legend
   palette, a NEUTRAL (not green) nav pill for the current page,
   and the softened aurora wash.
   ============================================================ */
#rb-bg{ opacity:.45; }

/* current-page pill: quiet neutral, not green, not black-on-everything */
.rb-pill{ background:rgba(26,25,20,.06) !important; border-color:rgba(26,25,20,.10) !important; }
.nav a[aria-current="page"]{ color:#14231B !important; font-weight:600; }

/* globe floats directly on the cream canvas — full sphere, no card */
.du-globe-wrap{
  width:min(600px,94vw); aspect-ratio:1/1;
  background:none; border-radius:0; overflow:visible; box-shadow:none;
}
.du-globe-wrap::before{ content:none; }

/* legend chips follow the globe's palette */
.du-legend li i{ background:#635BFF; }
.du-legend li.du-cream i{ background:#FF8A5C; border:none; }
.du-legend li.du-home i{ background:#45FBB2; box-shadow:0 0 0 3px rgba(69,251,178,.28); }

/* ============================================================
   v27 (2026-08-16) — LAUNCH CUT. All app-demo mockups removed
   from the homepage (hero booking screen, "What's inside" bento
   + globe, "The app" Frost showcase) — the real app isn't ready
   to show yet; nothing on the live site should imply otherwise.
   Hero goes single-column and centred now there's no right-hand
   visual. Same treatment on EN + AR.
   ============================================================ */
.hero-grid.solo{
  grid-template-columns:1fr;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.hero-grid.solo .hero-copy{ max-width:none; }
.hero-grid.solo .eyebrow{ justify-content:center; }
.hero-grid.solo .hero-sub{ margin-inline:auto; }
.hero-grid.solo .actions{ justify-content:center; }
@media (max-width:760px){
  .hero-grid.solo .actions{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
   v28 (2026-08-16) — feedback pass: kill the current-page nav
   pill (JS now suppresses it at rest — see rb.js `rest()`), stop
   nav-hover turning teal/blue, make stat numbers an accent colour
   instead of near-black forest, and drop the mentor path card's
   leftover lilac-gradient background so it matches its sibling.
   ============================================================ */
.rb-pill{ background:rgba(69,251,178,.14) !important; border-color:rgba(69,251,178,.30) !important; }
.nav a:hover{ color:#14231B !important; }

/* (v28 made these green; reverted in v30 - black only) */

.path.mentor{ color:inherit !important; }
.path.mentor h3{ color:var(--forest) !important; }
.path.mentor p{ color:var(--cocoa) !important; }
.path.mentor li{ color:var(--espresso) !important; }

/* ============================================================
   v29 (2026-08-16) — three fixes:
   1. Hero copy back to left-aligned (uses text-align:start so the
      Arabic page stays right-aligned).
   2. ONE accent colour for text. The "Become a mentor" label was
      teal while its identical twin "For parents" was ink; both are
      ink now, so the only coloured text left on the page is the
      big stat numbers.
   3. The mentor card kept a mint gradient overlay from home.css +
      the old v10 green-tinted glass. Both are cleared so it is
      byte-identical to the card beside it.
   ============================================================ */
.hero-grid.solo{
  text-align:start;
  max-width:none;
  margin:0;
}
.hero-grid.solo .hero-copy{ max-width:640px; }
.hero-grid.solo .eyebrow{ justify-content:flex-start; }
.hero-grid.solo .hero-sub{ margin-inline:0; }
.hero-grid.solo .actions{ justify-content:flex-start; }

/* same treatment for the About hero, which uses the same centred block */
.ab-hero .container{ text-align:start; }
.abh-grid{ text-align:start; }
.abh-copy{ text-align:start; }
.abh-copy .lead{ margin-inline:0; }
.ab-hero .actions{ justify-content:flex-start; }

/* mentor card: identical to .path.parents, no green tint */
.path.mentor{
  background-color:rgba(253,251,247,0.74) !important;
  background-image:none !important;
}
/* both sibling labels share one colour */
.path .tag, .path.mentor .tag{ color:#1A1914 !important; }

/* ============================================================
   v30 (2026-08-16) — BLACK TEXT ONLY.
   No coloured text anywhere on the light canvas. The stat numbers
   (v28 made them green) and every heading that used forest green
   (#102718, a dark green that still reads green) are now the same
   ink as body copy. Dark bands keep their white/mint text, and the
   mint colon in the logo stays: that is the logo, not text.
   ============================================================ */
.stats-band .num,
.stats-band .num em,
.ab-stat .n,
.ab-card .big-num,
.stats .num,
.stats .num em{ color:#1A1914 !important; }

main > section:not(.cta-band):not(.grad-section) h1,
main > section:not(.cta-band):not(.grad-section) h2,
main > section:not(.cta-band):not(.grad-section) h3,
main > section:not(.cta-band):not(.grad-section) h4,
main > section:not(.cta-band):not(.grad-section) .lead,
main > section:not(.cta-band):not(.grad-section) p{
  color:#1A1914;
}
main > section:not(.cta-band):not(.grad-section) .sub,
main > section:not(.cta-band):not(.grad-section) .hero-sub,
main > section:not(.cta-band):not(.grad-section) li{
  color:#4A4740;                     /* secondary copy: grey, still no green */
}
/* dark bands must keep their light text */
.ab-dark h2, .ab-dark h3, .ab-dark p, .ab-dark .big-num{ color:#fff !important; }
.ab-dark p{ color:rgba(255,255,255,.78) !important; }

/* hero: fewer lines. Wider measure so the headline and subline stop wrapping. */
.hero-grid.solo .hero-copy{ max-width:780px; }
.hero-grid.solo .hero-sub{ max-width:60ch; }

/* v30.1 — the last of the forest green (#102718) in text. It reads as a dark
   green, not black, so it goes too: headline, button labels, card headings.
   Uses !important because glass.css line 184 and home.css both force it. */
.hero h1,
main h1, main h2, main h3, main h4,
.path h3, .why-item h3, .step h3, .quote p, .ab-stat .l{
  color:#1A1914 !important;
}
body[class*="rb-a-"]{ --btn-fg:#1A1914; }      /* mint CTA label: black, not forest */

/* dark bands keep their light text (this rule must come last) */
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band p,
.grad-section h2, .grad-section h3, .grad-section p,
.ab-dark h2, .ab-dark h3{ color:#fff !important; }
.grad-section .glass-card h3{ color:#fff !important; }
.ab-dark p, .grad-section p{ color:rgba(255,255,255,.82) !important; }

/* v30.2 — final three: the ghost/glass button labels and the mentor card
   heading, all still inheriting forest green from earlier rules. */
.btn-ghost, .btn-glass,
.path h3, .path.mentor h3, .paths h3{ color:#1A1914 !important; }
/* the glass button lives on the dark mentor band too, keep that one light */
.grad-section .btn-glass{ color:#fff !important; }

/* v30.3 — ghost button label and FAQ question rows were the last two. */
.btn.btn-ghost, a.btn-ghost, details summary{ color:#1A1914 !important; }

/* ============================================================
   v31 (2026-08-17) — launch-day sweep.
   · Nav: the current-page pill is gone for good (it still slid in
     on hover); the AR language toggle no longer turns teal on hover.
   · Old decorative ribbons behind inner-page heroes removed
     (careers, referrals, contact-thanks still carried them).
   · Blog index: the empty tinted thumbnail rectangles are hidden;
     cards are clean text until real covers exist.
   ============================================================ */
.rb-pill{ display:none !important; }
.lang-toggle:hover{ color:#1A1914 !important; border-color:rgba(26,25,20,.28) !important; }
.ribbon, .ribbon-soft{ display:none !important; }
.post-card .thumb{ display:none !important; }

/* v31.1 — last inline colour sources on inner pages:
   the green "Last updated" pill on the legal pages, and teal in-text links
   inside body copy (home.css `a{color:var(--link)}`). Links go ink + underline. */
.lg-updated{ color:#1A1914 !important; }
main p a, main li a, main td a, .faq a{ color:#1A1914 !important; text-decoration:underline; text-underline-offset:2px; }

/* v31.2 — the two hits the all-pages scan still found: contact-form labels
   (forest) and the About hero eyebrow pill (green). Both ink now. */
main label, .ct-form label, .ab-eyebrow, .ab-eyebrow span{ color:#1A1914 !important; }

/* ============================================================
   v33 (2026-08-24) — FEWER BOXES.

   (a) The three hero stat cards are gone from academics, pricing,
       igcse-tutors-dubai and the two Arabic twins, so the 2-column
       hero at :888 was left holding an empty right column that
       squeezed the copy into ~55% of the line. Collapse it to one
       column: the same fix about.html already carries inline, so
       every inner-page hero is now title + lead + buttons, nothing
       beside it, matching the homepage.
       The whole v32 stat-card block that used to sit here was
       deleted in the same pass: no .abh-stats / .ab-stat markup is
       left anywhere on the site (about.html still declares
       .ab-stats in its own inline CSS, but has no such markup).

   (b) academics (EN + AR) ran three consecutive grids of bordered,
       shadowed cards, 18 boxes back to back. Only the Curricula
       grid stays a card grid. Subjects becomes a plain index and
       Exam preparation a divided list, so the page reads
       card / not-card instead of card / card / card.
       Scoped to the new .ac-index / .ac-rows class names, which
       exist only on the academics pages: the shared .card, .grid,
       .why-item and .step rules are untouched.
   ============================================================ */

/* ── (a) single-column inner-page hero ───────────────────────── */
/* ties :888 on specificity (0,3,0) and wins on source order */
.hero .container.abh-grid{ display:block; max-width:1140px; }
.abh-copy{ max-width:680px; }
.abh-copy .lead{ max-width:58ch; }   /* was 46ch at :891, matching about.html */

/* ── (b) academics · Subjects: a plain index, no card chrome ─── */
.ac-index{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:38px 32px;
  margin-top:2.4rem;
  text-align:start;
}
.ac-index .ac-entry h3{ margin:0 0 0.35rem; font-size:1.16rem; }
.ac-index .ac-entry p{
  margin:0;
  font-size:0.95rem;
  line-height:1.55;
  max-width:34ch;
  /* v30's `main > section p` paints every paragraph full ink. With no
     card edge to do the work, the muted second level is what separates
     the subject name from its line, so it is restored here (grey, not
     --cocoa, which reads brown on the white canvas). */
  color:#5A574F !important;
}

/* ── (b) academics · Exam preparation: a divided list ────────── */
.ac-rows{
  margin-top:2.4rem;
  text-align:start;
  border-top:1px solid rgba(26,25,20,0.10);
}
.ac-rows .ac-row{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:8px 40px;
  align-items:center;
  padding:22px 4px;
  border-bottom:1px solid rgba(26,25,20,0.10);
}
.ac-rows .ac-row h3{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:1.16rem;
}
/* the icon chip shrinks for a list row (page CSS sets 44px + margin) */
.ac-rows .ac-row .ac-ic{ width:34px; height:34px; border-radius:10px; margin-bottom:0; }
.ac-rows .ac-row .ac-ic svg{ width:18px; height:18px; }
.ac-rows .ac-row p{
  margin:0;
  font-size:0.95rem;
  line-height:1.55;
  color:#5A574F !important;
}

@media (max-width:640px){
  .ac-index{ gap:30px 24px; }
  .ac-rows .ac-row{ grid-template-columns:1fr; gap:8px; padding:18px 2px; }
}

/* =====================================================================
   v15 · (2026-08-24) the live app demo, in a page hero
   proto.html?embed=1&only=… renders one 414x868 phone with a transparent
   background and scales itself to the frame it is given. The frame here
   only has to set a width; aspect-ratio holds the device proportion so
   it can never letterbox, and the glow sits behind the transparent
   corners so the phone reads as placed rather than pasted on.
   ===================================================================== */
.demo-stage{
  position:relative;
  display:flex;
  justify-content:center;
  isolation:isolate;
}
.demo-stage::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:6%;
  width:132%;
  height:78%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--demo-glow,#45FBB2) 42%, transparent) 0%,
    transparent 70%);
  filter:blur(26px);
  pointer-events:none;
}
.app-demo{
  display:block;
  width:var(--demo-w,300px);
  max-width:100%;
  aspect-ratio:414 / 868;          /* the device's own ratio */
  border:0;
  background:transparent;
  border-radius:calc(var(--demo-w,300px) * 0.14);   /* 58/414 of the width */
  box-shadow:0 42px 84px -32px rgba(6,50,62,.5), 0 4px 14px rgba(6,50,62,.10);
  color-scheme:light;
}
@media (max-width:1040px){ .demo-stage{ --demo-w:270px; } .app-demo{ --demo-w:270px; } }
@media (max-width:900px){
  .demo-stage{ --demo-w:260px; margin-top:8px; }
  .app-demo{ --demo-w:260px; }
}
@media (max-width:420px){ .demo-stage{ --demo-w:225px; } .app-demo{ --demo-w:225px; } }

/* services hero: re-open the 2-column grid that :1721 collapses for inner
   pages, but only where a demo is actually present. */
.hero .container.abh-grid.has-demo{
  display:grid;
  grid-template-columns:1.06fr 0.94fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
.hero .container.abh-grid.has-demo .abh-copy{ max-width:560px; }
@media (max-width:900px){
  .hero .container.abh-grid.has-demo{ grid-template-columns:1fr; gap:34px; }
  .hero .container.abh-grid.has-demo .abh-copy{ max-width:680px; }
}
@media (prefers-reduced-motion:reduce){ .demo-stage::before{ filter:none; opacity:.5; } }

/* ── RTL typography: undo Latin letter-tracking on Arabic text (2026-08-25) ──
   main.css and home.css set letter-spacing on headings (negative) and on the
   small-caps labels above them (positive, up to 0.14em). Both are wrong for
   Arabic: positive tracking pulls joined letters apart into separate shapes,
   negative tracking makes them collide. Reset for RTL only — every English
   page is untouched.

   Runs that are always Latin or decorative keep their tracking on purpose:
   the "durusi" wordmark (.logo), the giant footer watermark
   (.site-footer::after), the star glyphs (.rating, .quote .stars), the stat
   numerals (.stats .num) and .mb-tag, which glass.css:1179 already tunes for
   RTL by hand rather than zeroing.

   The [dir="rtl"] prefix also raises specificity to (0,2,0), so this wins over
   home.css's own .eyebrow rule on the Arabic homepage regardless of load
   order.                                                                     */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .eyebrow, [dir="rtl"] .sc-eyebrow, [dir="rtl"] .trusted-label,
[dir="rtl"] .site-footer h4, [dir="rtl"] .foot-cols h4,
[dir="rtl"] .path .tag, [dir="rtl"] .path-card .pill, [dir="rtl"] .bubble .tag,
[dir="rtl"] .aw-pill, [dir="rtl"] .hs-label, [dir="rtl"] .du-ph-kicker,
[dir="rtl"] .du-d b, [dir="rtl"] .mbp-req small, [dir="rtl"] .pay-field .lab,
[dir="rtl"] .sc-soon, [dir="rtl"] .sc-soon-inline, [dir="rtl"] .du-copy h3,
[dir="rtl"] .mb-txt h3, [dir="rtl"] .mbd h3, [dir="rtl"] .ps-head .t{
  letter-spacing:0;
}

/* ───────────────────────────────────────────────────────────────────────────
   v16 · (2026-08-26) TAPPABLE CONTACT IN EVERY FOOTER
   Audited 2026-08-26: href="tel:" existed on 2 of 46 pages. A parent landing
   on /igcse-tutors-dubai from Google had no way to call from that page, and
   GA4's phone_click was therefore measuring almost nothing.
   There are TWO footer markup variants — .foot-cols/.foot-brand on the two
   homepages (styled in home.css) and .cols on the other 42 (styled in
   main.css). glass.css is the only stylesheet loaded by all 44, so the block
   lives here and is written to look right inside either one.
   min-height:44px is deliberate: it is the tap-target floor, and this is the
   one footer link that gets tapped on a phone.
   ────────────────────────────────────────────────────────────────────────── */
.foot-contact{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 20px; margin:10px 0 6px; }
.foot-contact a{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px;
  color:#fff; font-size:0.95rem; font-weight:600; letter-spacing:0;
  text-decoration:none; transition:color .15s;
}
.foot-contact a:hover{ color:#45FBB2; }
.foot-contact svg{ width:15px; height:15px; flex:none; opacity:.7; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
[dir="rtl"] .foot-contact a[dir="ltr"]{ direction:ltr; }