/* Luma Engine: one stylesheet for every page. Tokens first, then components, then the three page demos.
   Rules: the finished state is the default; motion lives only inside prefers-reduced-motion: no-preference
   and every moving rule names its job in MOTION.md with a "motion: M-id" comment. */

@font-face{font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF;}
@font-face{font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 500; font-display:swap;
  src:url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF;}
@font-face{font-family:'Instrument Sans'; font-style:normal; font-weight:400 600; font-display:optional; /* body font: no swap, so no reflow on slow first loads */
  src:url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF;}
/* Size-matched fallbacks so the swap does not shift the layout */
@font-face{font-family:'Cormorant fallback'; font-style:normal; src:local('Georgia'); size-adjust:88%; ascent-override:96%; descent-override:30%;}
@font-face{font-family:'Cormorant fallback'; font-style:italic; src:local('Georgia Italic'),local('Georgia-Italic'); size-adjust:78%; ascent-override:108%; descent-override:34%;}
@font-face{font-family:'Instrument fallback'; src:local('Arial'); size-adjust:101.5%; ascent-override:94%; descent-override:25%;}

:root{
  --void:#04050A; --raised:#0A0C14; --raised-2:#10131D;
  --silver:#E9EAEE; --mute:#9A9DAB; --faint:#80849A;
  --line:rgba(233,234,238,.10); --line-2:rgba(233,234,238,.22); --line-3:rgba(233,234,238,.42);
  --moon:#F5F3EC;
  --ember:#E8B478;         /* teachers accent: the lesson ring and the CTA focus */
  --tide:#8FD8C4;          /* Hajj and Umrah accent: used only for "approved by a consultant" and its CTA focus */
  --wait:#E9B27A;          /* the waiting state in the demo clock (time a family is kept waiting) */
  --needs:#F2C14E;
  --display:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  --body:'Instrument Sans','Instrument fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --arabic:'Geeza Pro','Noto Naskh Arabic','Segoe UI','Arial',sans-serif;
  --t1:150ms; --t2:300ms; --t3:600ms; --ease:cubic-bezier(.2,.8,.2,1);
  --pad:20px; --maxw:1120px;
  color-scheme:dark;
}
@media (min-width:1000px){ :root{ --pad:56px; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-gutter:stable;}
body{margin:0; background:var(--void); color:var(--silver); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
/* The night sky: a still image, part of the Luma look. It never moves (MOTION.md: no job, no animation). */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23F5F3EC'%3E%3Ccircle cx='23' cy='41' r='.8' opacity='.7'/%3E%3Ccircle cx='97' cy='12' r='.5' opacity='.5'/%3E%3Ccircle cx='160' cy='88' r='1' opacity='.6'/%3E%3Ccircle cx='233' cy='31' r='.6' opacity='.4'/%3E%3Ccircle cx='301' cy='120' r='.7' opacity='.6'/%3E%3Ccircle cx='388' cy='64' r='.5' opacity='.5'/%3E%3Ccircle cx='54' cy='170' r='.6' opacity='.45'/%3E%3Ccircle cx='131' cy='222' r='.9' opacity='.55'/%3E%3Ccircle cx='205' cy='180' r='.5' opacity='.4'/%3E%3Ccircle cx='276' cy='251' r='.7' opacity='.5'/%3E%3Ccircle cx='352' cy='206' r='1.1' opacity='.65'/%3E%3Ccircle cx='18' cy='300' r='.5' opacity='.4'/%3E%3Ccircle cx='88' cy='356' r='.8' opacity='.55'/%3E%3Ccircle cx='170' cy='318' r='.5' opacity='.45'/%3E%3Ccircle cx='247' cy='390' r='.6' opacity='.5'/%3E%3Ccircle cx='330' cy='330' r='.8' opacity='.6'/%3E%3Ccircle cx='405' cy='392' r='.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 70% -10%, rgba(120,130,170,.10), transparent 60%);
}
h1,h2,h3,.stat b,.clock .now,.calc-out b,.ad-total b,.lring .lab b,.deal-line{font-variant-numeric:lining-nums tabular-nums;}
h1,h2,h3{font-family:var(--display); font-weight:300; margin:0; line-height:1.08; letter-spacing:-.005em; text-wrap:balance;}
h1{font-size:clamp(36px,6.2vw,72px);}
h2{font-size:clamp(30px,4.4vw,52px);}
h3{font-size:clamp(22px,2.4vw,27px); font-weight:400; line-height:1.2;}
h1 em,h2 em{font-style:italic; color:var(--moon);}
p{margin:0;} ul,ol{margin:0; padding:0;} dl,dd{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--silver); outline-offset:3px; border-radius:6px;}
::selection{background:var(--silver); color:var(--void);}
[hidden]{display:none !important;}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:max(var(--pad),env(safe-area-inset-left,0px)) max(var(--pad),env(safe-area-inset-right,0px));}
.skip{position:absolute; left:-9999px; top:8px; z-index:99; background:var(--silver); color:var(--void); padding:10px 16px; border-radius:8px; font-weight:600;}
.skip:focus{left:12px;}
.muted{color:var(--mute);}
.faint{color:var(--faint);}
[lang="ar"]{font-family:var(--arabic); letter-spacing:0;}

/* eyebrow: small caps in the body face (Space Grotesk retired) */
.eyebrow{font:600 12.5px/1.4 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--faint);}
.lead{font-size:clamp(17px,1.5vw,19px); color:var(--mute); max-width:60ch;}

/* NEEDS markers: visible on purpose, so nothing missing can be mistaken for done */
.needs{display:inline; font:500 13px/1.5 var(--body); color:var(--needs); border:1px dashed rgba(242,193,78,.6); border-radius:6px; padding:1px 6px; background:rgba(242,193,78,.06); letter-spacing:0; text-transform:none;}
.needs-block{display:block; margin-top:8px; padding:8px 10px;}

/* chips: "Illustration" / "Sample" / "Example", always in the same view as the thing they label */
.chip{display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase;
  color:var(--void); background:var(--moon); border-radius:100px; padding:6px 10px;}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:30; background:rgba(4,5,10,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.hdr-in{display:flex; align-items:center; gap:14px; min-height:58px; padding-block:8px;}
.mark{display:flex; align-items:baseline; gap:8px; text-decoration:none; min-width:0; padding-block:11px;}
.mark b{font:400 22px/1 var(--display); white-space:nowrap; letter-spacing:.005em;}
.mark span{font-size:13px; color:var(--mute); white-space:nowrap;}
.hdr-nav{margin-left:auto; display:flex; align-items:center; gap:4px;}
.hdr-nav a.q{font-size:14px; color:var(--mute); text-decoration:none; padding:0 10px; min-height:44px; display:inline-flex; align-items:center; border-radius:8px; transition:color var(--t1) var(--ease);} /* motion: M-feedback (colour only) */
.hdr-nav a.q:hover{color:var(--silver);}
.hdr-nav a.dash{font-size:13px;}
@media (max-width:719px){ .hdr-nav a.q{display:none;} .mark span{display:none;} }
@media (max-width:719px){ .home .hdr-nav a.dash{display:inline-block;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:12px 22px; border-radius:100px;
  background:var(--silver); color:var(--void); font:600 15px/1.2 var(--body); text-decoration:none; border:1px solid var(--silver); cursor:pointer;
  transition:background-color var(--t1) var(--ease), border-color var(--t1) var(--ease);} /* motion: M-feedback (colour only) */
.btn:hover{background:#fff;}
.btn.sm{min-height:44px; padding:9px 16px; font-size:14px;}
.btn.ghost{background:transparent; color:var(--silver); border-color:var(--line-3);}
.btn.ghost:hover{border-color:var(--silver);}
.line-umrah .btn:focus-visible{outline-color:var(--tide);}
.line-teach .btn:focus-visible{outline-color:var(--ember);}
.tlink{color:var(--silver); text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--line-3);}
.cta-row > .tlink{display:inline-flex; align-items:center; min-height:44px;}
.tlink:hover{text-decoration-color:var(--silver);}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,9vw,112px); border-top:1px solid var(--line);}
.sec-head{display:grid; gap:14px; margin-bottom:clamp(28px,4vw,44px); max-width:64ch;}
.sec-head h2{max-width:22ch;}

/* ---------- hero (line pages) ---------- */
.hero{padding-block:clamp(40px,7vw,96px) clamp(44px,6vw,80px);}
.hero .eyebrow{margin-bottom:16px;}
.hero h1{max-width:18ch;}
.hero .sub{margin-top:18px; font-size:clamp(17.5px,1.7vw,20px); color:var(--mute); max-width:56ch;}
.hero .sub strong{color:var(--silver); font-weight:500;}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:26px;}
.next{margin-top:12px; font-size:15px; color:var(--mute); max-width:58ch;}
.safeguard{margin-top:22px; padding:14px 16px; border-left:2px solid var(--tide); background:rgba(143,216,196,.05); border-radius:0 10px 10px 0; font-size:15.5px; color:var(--silver); max-width:64ch;}
.terms{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; list-style:none;}
.terms li{font-size:14px; color:var(--silver); border:1px solid var(--line-2); border-radius:100px; padding:7px 12px; background:rgba(10,12,20,.6);}
.terms li a{color:inherit;}
.hero-grid{display:grid; gap:0 48px;}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); align-items:end;}
  .hero-grid h1{font-size:clamp(44px,4.6vw,62px); max-width:17ch;}
  .hero-side{border:1px solid var(--line-2); border-radius:18px; padding:20px; background:rgba(10,12,20,.75);}
  .hero-side .safeguard{margin-top:0;}
  .hero-side .terms{flex-direction:column; gap:0;}
  .hero-side .terms li{border:0; border-bottom:1px solid var(--line); border-radius:0; padding:9px 2px; background:none;}
}
.switch{margin-top:26px; font-size:14.5px; color:var(--mute);}
.switch a{color:var(--silver); text-underline-offset:3px;}

/* ---------- cards and grids ---------- */
.cols{display:grid; gap:14px;}
@media (min-width:860px){ .cols.c3{grid-template-columns:repeat(3,1fr);} .cols.c2{grid-template-columns:1fr 1fr;} }
.card{border:1px solid var(--line-2); border-radius:18px; background:linear-gradient(180deg,rgba(16,19,29,.85),rgba(10,12,20,.85)); padding:clamp(18px,2.4vw,26px); min-width:0;}
.card h3{margin-bottom:12px;}
.ticks{list-style:none; display:grid; gap:9px;}
.ticks li{position:relative; padding-left:22px; color:var(--mute); font-size:16px;}
.ticks li::before{content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--mute);}
.ticks.yes li::before{background:var(--tide);}
.ticks.no li::before{background:transparent; border:1.5px solid #E58F8F; width:9px; height:9px;}
.ticks.no li::after{content:""; position:absolute; left:2px; top:calc(.62em + 4px); width:10px; height:1.5px; background:#E58F8F; transform:rotate(-45deg);}
.status-line{margin-top:18px; font-size:14.5px; color:var(--faint);}

/* steps with CSS counters (so step numbers are not page text) */
.steps{list-style:none; counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line);}
.steps > li{counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:4px 16px; padding:22px 0; border-bottom:1px solid var(--line);}
.steps > li::before{content:counter(s); grid-row:1 / span 3; font:300 30px/1 var(--display); color:var(--faint);}
.steps .when{font:600 12px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
.steps h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;}
.steps .tag{font:600 12px/1 var(--body); letter-spacing:.06em; color:var(--silver); border:1px solid var(--line-2); border-radius:100px; padding:6px 9px;}
.steps p{color:var(--mute); max-width:64ch;}
.steps p + p{margin-top:8px;}
.steps p strong{color:var(--silver); font-weight:500;}
@media (min-width:860px){ .steps > li{grid-template-columns:72px 220px 1fr;} .steps > li::before{grid-row:auto;} .steps .when{padding-top:8px;} .steps .body{grid-column:3;} }

/* price */
.price{display:grid; gap:0; border-top:1px solid var(--line);}
.price > div{display:grid; gap:4px 24px; padding:16px 0; border-bottom:1px solid var(--line);}
@media (min-width:720px){ .price > div{grid-template-columns:200px 1fr;} }
.price dt{font-weight:600;}
.price dd{color:var(--mute);}
.price dd strong{color:var(--silver); font-weight:500;}
.refund{display:grid; gap:14px; margin-top:28px;}
@media (min-width:860px){ .refund{grid-template-columns:1fr 1fr;} }
.refund .card h3{font-size:22px;}
.refund ul{list-style:none; display:grid; gap:8px;}
.refund li{color:var(--mute); padding-left:18px; position:relative;}
.refund li::before{content:"·"; position:absolute; left:4px; color:var(--silver);}
.fine{margin-top:16px; font-size:15px; color:var(--mute); max-width:68ch;}
.fine + .fine{margin-top:8px;}

/* stats */
.stats{display:grid; gap:14px;}
@media (min-width:860px){ .stats{grid-template-columns:repeat(3,1fr);} }
.stat b{display:block; font:300 clamp(48px,6vw,72px)/1 var(--display); color:var(--moon);}
.stat p{margin-top:10px; color:var(--mute); font-size:15.5px;}
.quotes{display:grid; gap:14px; margin-top:28px;}
@media (min-width:860px){ .quotes{grid-template-columns:1fr 1fr;} }
blockquote{margin:0;}
.quote q{font:400 clamp(21px,2.3vw,26px)/1.3 var(--display); font-style:italic; color:var(--silver); quotes:"\201C" "\201D";}
.quote p{margin-top:10px; font-size:14px; color:var(--faint);}

/* FAQ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-size:17.5px; font-weight:500;
  transition:color var(--t1) var(--ease);} /* motion: M-feedback (colour only) */
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--faint); font-size:22px; line-height:1;}
.faq details[open] summary::after{content:"\2212";}
.faq summary:hover{color:#fff;}
.faq .a{padding:0 0 20px; color:var(--mute); max-width:68ch;}
.faq .a p + p{margin-top:8px;}

/* founder */
.founder{display:grid; gap:12px; max-width:64ch;}
.founder p{color:var(--mute);}
.founder p.first{font:400 clamp(24px,2.6vw,30px)/1.25 var(--display); color:var(--silver);}
.founder .sig{font:italic 400 24px/1 var(--display); color:var(--silver); margin-top:6px;}

/* final CTA */
.final{text-align:left;}
.final h2{max-width:20ch;}
.final .lead{margin-top:14px;}

/* footer */
.ftr{border-top:1px solid var(--line); padding-block:36px 44px; font-size:14.5px; color:var(--faint);}
.ftr-in{display:grid; gap:14px;}
.ftr .desc{color:var(--mute);}
.ftr nav{display:flex; flex-wrap:wrap; gap:8px 20px;}
.ftr nav a{color:var(--mute); text-underline-offset:3px; padding-block:6px;}
.ftr nav a:hover{color:var(--silver);}
.ftr nav [aria-current]{color:var(--silver); text-decoration:none;}

/* ======================================================================
   HOME: two doors
   ====================================================================== */
.home-hero{padding-block:clamp(26px,4.4vw,56px) clamp(18px,2.4vw,28px);}
.home-hero h1{font-size:clamp(30px,4.3vw,54px); max-width:24ch;}
.home-hero .helper{margin-top:12px; color:var(--mute); font-size:clamp(15.5px,1.4vw,18px);}
.doors{display:grid; gap:12px; padding-bottom:clamp(20px,4vw,40px);}
@media (min-width:860px){ .doors{grid-template-columns:1fr 1fr; gap:18px;} }
.door{position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 20px 18px; border:1px solid var(--line-2); border-radius:20px;
  background:linear-gradient(180deg,rgba(16,19,29,.92),rgba(8,10,16,.92)); text-decoration:none; color:inherit; min-width:0;
  transition:border-color var(--t1) var(--ease), background-color var(--t1) var(--ease);} /* motion: M-feedback (colour only) */
.door:hover,.door:focus-visible{border-color:var(--line-3);}
.door-b:hover,.door-b:focus-visible{border-color:rgba(143,216,196,.55);}
.door-a:hover,.door-a:focus-visible{border-color:rgba(232,180,120,.55);}
.door-label{font:400 clamp(25px,2.5vw,31px)/1.12 var(--display); color:var(--silver);}
.door-promise{color:var(--mute); font-size:16px; max-width:40ch;}
.door-go{align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:100px; background:var(--silver); color:var(--void); font-weight:600; font-size:14.5px;}
.door-preview{display:none;}
.door-promise{margin-bottom:6px;}
@media (min-width:860px){ .door{padding:28px; gap:14px;} .door-preview{display:block; margin-bottom:6px;} }
@media (max-height:700px) and (max-width:859px){ .home-hero .helper{display:none;} .door{padding:16px 18px 14px;} }

/* preview: Hajj and Umrah door, a draft waiting then approved */
.pv{display:block; border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(4,5,10,.55); font-size:14px;}
.pv-top{display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; color:var(--faint); font-size:12.5px;}
.pv-msg{display:block; border-radius:12px; padding:9px 11px; max-width:88%; line-height:1.4;}
.pv-in{background:var(--raised-2); color:var(--silver);}
.pv-draft{margin:8px 0 0 auto; border:1px dashed var(--line-3); color:var(--mute);}
.pv-state{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px;}
.pv-state i{width:8px; height:8px; border-radius:50%; background:var(--tide); flex:none;}
.pv-state .w{display:none; color:var(--wait);}
.pv-state .w i{background:var(--wait);}
.pv-state .ok{color:var(--tide); display:flex; align-items:center; gap:8px;}
/* preview: teachers door, the ring */
.pv-steps{display:grid; gap:6px; margin-top:12px;}
.pv-steps span{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); color:var(--faint); font-size:13.5px;}
.pv-steps span::before{content:""; width:14px; height:14px; border-radius:50%; border:1px solid var(--line-3); flex:none;}
.pv-steps span.on{color:var(--silver);}
.pv-steps span.on::before{background:var(--ember); border-color:var(--ember);}
.pv-lesson{display:flex; align-items:center; gap:14px;}
.pv-lesson svg{flex:none;}
.pv-lesson .t{font-size:14px;} .pv-lesson .t b{display:block; font-weight:500; color:var(--silver);} .pv-lesson .t span{color:var(--faint); font-size:12.5px;}
.ring-bg{stroke:var(--line-2);} .ring-fg{stroke:var(--ember); stroke-linecap:round;}

/* default = finished state (approved, ring full). JS adds .waiting / sets --done while previewing */
.pv-draft{border-style:solid; border-color:rgba(143,216,196,.55); color:var(--silver);}
.door-b.waiting .pv-draft{border-style:dashed; border-color:var(--line-3); color:var(--mute);}
.door-b.waiting .pv-state .w{display:flex; align-items:center; gap:8px;}
.door-b.waiting .pv-state .ok{display:none;}
.pv-lesson .ring-fg{stroke-dasharray:var(--c); stroke-dashoffset:calc(var(--c) * (1 - var(--done,3) / 3));}
@media (prefers-reduced-motion:no-preference){
  .pv-draft{transition:border-color var(--t2) var(--ease), color var(--t2) var(--ease);} /* motion: M-door-preview (colour only) */
  .pv-lesson .ring-fg{transition:stroke-dashoffset var(--t2) var(--ease);} /* motion: M-door-preview (stroke only) */
}
.home-more{padding-block:clamp(16px,3vw,28px) clamp(56px,8vw,96px);}
.home-more .terms-line{color:var(--mute); font-size:15.5px;}
.home-more .both{margin-top:6px; color:var(--mute); font-size:15.5px;}
.rules{margin-top:clamp(44px,6vw,72px);}
.rules h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:20px;}
.rules .cols{gap:0; border-top:1px solid var(--line);}
.rules .cols > div{padding:22px 0; border-bottom:1px solid var(--line);}
@media (min-width:860px){ .rules .cols{grid-template-columns:repeat(3,1fr);} .rules .cols > div{padding:24px 24px 24px 0;} .rules .cols > div + div{padding-left:24px; border-left:1px solid var(--line);} }
.rules h3{margin-bottom:8px;}
.rules p{color:var(--mute); font-size:16px;}
.home-founder{margin-top:clamp(44px,6vw,72px);}

/* View Transition: the door label becomes the next page's eyebrow */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;} /* motion: M-door-carry */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t2);}
}
.vt-umrah{view-transition-name:door-umrah;} .vt-teach{view-transition-name:door-teach;}

/* ======================================================================
   UMRAH: ad sort
   ====================================================================== */
.adsort{margin-top:clamp(28px,4vw,40px); border:1px solid var(--line-2); border-radius:18px; padding:clamp(16px,2.4vw,24px); background:rgba(10,12,20,.7);}
.adsort-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-bottom:14px; font-size:14px; color:var(--faint);}
.ad-rows{display:grid; gap:12px;}
.ad-row{display:grid; gap:6px;}
@media (min-width:720px){ .ad-row{grid-template-columns:190px 1fr; align-items:center; gap:16px;} }
.ad-row .lab{font-size:14.5px; color:var(--silver);} .ad-row .lab span{color:var(--faint);}
.ad-dots{display:flex; flex-wrap:wrap; gap:3px;}
.ad-dots i{width:7px; height:7px; border-radius:2px; background:var(--wait); display:block;}
.ad-row.web .ad-dots i{background:var(--faint);}
.ad-total{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;}
.ad-total b{font:300 clamp(34px,4vw,46px)/1 var(--display); color:var(--moon);}
.ad-total span{color:var(--mute); font-size:15px;}
.ad-key{display:flex; gap:16px; flex-wrap:wrap;}
.ad-key i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px; background:var(--wait);}
.ad-key .web i{background:var(--faint);}

/* ======================================================================
   UMRAH: the approval demo
   ====================================================================== */
.demo-grid{display:grid; gap:16px; align-items:start;}
@media (min-width:920px){ .demo-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:22px;} }
.phone{border:1px solid var(--line-2); border-radius:24px; background:#070910; overflow:hidden; max-width:440px; width:100%; margin-inline:auto;}
.phone-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--raised);}
.phone-top .chip{display:inline-flex; font-size:11.5px; color:var(--void);}
.phone-top b{font-weight:600; font-size:14.5px;} .phone-top span{display:block; font-size:12px; color:var(--faint);}
.thread{display:grid; gap:10px; padding:14px; min-height:420px; align-content:start;}
.when-line{justify-self:center; font-size:12px; color:var(--faint); background:rgba(233,234,238,.05); border-radius:100px; padding:5px 10px;}
.bubble{max-width:88%; border-radius:16px; padding:10px 12px; font-size:14.5px; line-height:1.45; position:relative;}
.bubble small{display:block; margin-top:6px; font-size:11.5px; color:var(--faint);}
.b-in{background:var(--raised-2); border-top-left-radius:6px;}
.b-out{justify-self:end; background:#123029; border-top-right-radius:6px; color:#EAF7F2;}
.b-out small{color:#9CC9BB;}
.b-draft{justify-self:end; background:transparent; border:1.5px dashed var(--line-3); color:var(--mute); border-top-right-radius:6px;}
.b-draft .flag{display:inline-block; margin-bottom:6px; font:600 11px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--wait);}
.b-draft small{color:var(--faint);}
.state{justify-self:end; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wait);}
.state i{width:8px; height:8px; border-radius:50%; background:var(--wait); flex:none;}
.state.ok{color:var(--tide);} .state.ok i{background:var(--tide);}
.phone-bar{border-top:1px solid var(--line-2); background:var(--raised); padding:14px; display:grid; gap:10px;}
.bar-who{font:600 11.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--tide);}
.phone-bar .clock .now{font-size:32px;}
.phone-bar .waited{font-size:14px; flex-basis:100%;}
.hint{font-size:13.5px;}
.demo.sent .flag{display:none;}
.console{border:1px solid var(--line-2); border-radius:18px; background:rgba(10,12,20,.85); padding:clamp(16px,2.4vw,22px); display:grid; gap:16px;}
.console h3{font-size:22px;}
.clock{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.clock .now{font:300 clamp(34px,4vw,44px)/1 var(--display); font-variant-numeric:tabular-nums; color:var(--silver);}
.clock .now small{font:400 14px/1 var(--body); color:var(--faint); margin-left:6px;}
.waited{font-size:14.5px; color:var(--wait);}
.waited.ok{color:var(--tide);}
.track{position:relative; height:10px; border-radius:10px; background:rgba(233,234,238,.07); overflow:hidden;}
.track .fill{position:absolute; inset:0; transform-origin:left center; background:linear-gradient(90deg,rgba(233,178,122,.25),var(--wait)); transform:scaleX(var(--p,1));}
.track.ok .fill{background:linear-gradient(90deg,rgba(143,216,196,.25),var(--tide));}
.track-scale{display:flex; justify-content:space-between; font-size:12px; color:var(--faint); margin-top:6px;}
.ctrl{display:flex; flex-wrap:wrap; gap:10px;}
.btn.approve{background:var(--tide); border-color:var(--tide); color:#042119;}
.btn.approve:hover{background:#A6E6D4;}
.btn.approve[disabled]{opacity:.45; cursor:default;}
.summary{border:1px solid var(--line-2); border-radius:14px; overflow:hidden;}
.summary h4{margin:0; padding:10px 12px; font:600 13px/1.3 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); background:var(--raised); border-bottom:1px solid var(--line);}
.summary dl{display:grid;}
.summary dl > div{display:grid; grid-template-columns:132px 1fr; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); font-size:14px;}
.summary dl > div:last-child{border-bottom:0;}
.summary dt{color:var(--faint);} .summary dd{color:var(--silver);}
.timeline{list-style:none; display:grid; gap:0; margin-top:22px; border-top:1px solid var(--line);}
.timeline li{display:grid; grid-template-columns:118px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--mute);}
.timeline time{color:var(--silver); font-variant-numeric:tabular-nums;}
.timeline li.gap{color:var(--wait);}
.honest{margin-top:18px; font-size:16px; color:var(--silver); max-width:66ch;}
.honest + .honest{margin-top:6px; color:var(--mute);}
.demo-foot{margin-top:14px; font-size:13.5px; color:var(--faint);}
.demo .pre{display:none;} /* states before approval exist only while the demo runs */
.demo.running .pre{display:revert;}
.demo.running .state.pre{display:flex;}
.demo.running .post{display:none;}
.demo.running .post.shown{display:revert;}
.demo.running .summary .post.shown{display:grid;}

@media (prefers-reduced-motion:no-preference){
  .demo .rise{animation:rise var(--t2) var(--ease) both;} /* motion: M-chat-sequence */
  @keyframes rise{ /* motion: M-chat-sequence */ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
  .demo .bubble{transition:border-color var(--t2) var(--ease), background-color var(--t2) var(--ease), color var(--t2) var(--ease);} /* motion: M-approve (colour only) */
  .flash{animation:flash var(--t1) ease-out;} /* motion: M-calc-flash */
  @keyframes flash{ /* motion: M-calc-flash */ from{opacity:.35;} to{opacity:1;} }
}

/* calculator */
.calc{display:grid; gap:18px;}
@media (min-width:920px){ .calc{grid-template-columns:1.1fr .9fr; gap:28px; align-items:start;} }
.calc fieldset{border:1px solid var(--line-2); border-radius:16px; padding:14px 16px 16px; margin:0; display:grid; gap:12px; min-width:0;}
.calc legend{padding:0 6px; font:600 12.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
.calc label{display:grid; gap:6px; font-size:15px; color:var(--silver);}
.calc label .ex{color:var(--faint); font-size:13.5px;}
.calc .help{font-size:13.5px; color:var(--wait);}
.calc input{width:100%; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--void); color:var(--silver); font:500 16px/1 var(--body);}
.calc input:focus-visible{outline:2px solid var(--tide); outline-offset:1px;}
.calc input[aria-invalid="true"]{border-color:#E58F8F;}
.calc .err{font-size:13.5px; color:#F0A5A5;}
.calc-out{border:1px solid var(--line-2); border-radius:16px; padding:18px; display:grid; gap:14px; background:rgba(10,12,20,.85); position:sticky; top:76px;}
.calc-out p{color:var(--mute); font-size:15.5px;}
.calc-out p b{color:var(--silver); font:400 24px/1 var(--display); font-variant-numeric:tabular-nums;}
.calc-out .note{font-size:14px; color:var(--faint);}
.calc-out .ex-note{color:var(--wait); font-size:13.5px;}

/* Reply Report sample */
.report{align-self:start; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:rgba(10,12,20,.85); max-width:640px;}
.report-top{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--raised);}
.report-top b{font:400 22px/1.1 var(--display);}
.report dl > div{display:grid; grid-template-columns:1fr auto; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:15px;}
.report dt{color:var(--mute);} .report dd{color:var(--silver); text-align:right; font-variant-numeric:tabular-nums;}
.report .foot{padding:12px 16px; font-size:13.5px; color:var(--faint);}

/* ======================================================================
   TEACHERS: the sample lesson
   ====================================================================== */
.lesson-grid{display:grid; gap:22px; align-items:start;}
@media (min-width:920px){ .lesson-grid{grid-template-columns:minmax(0,420px) 1fr; gap:44px;} }
.lphone{border:1px solid var(--line-2); border-radius:28px; background:#090B12; padding:16px; max-width:400px; width:100%; margin-inline:auto;}
.lp-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; color:var(--faint);}
.lp-head{display:flex; align-items:center; gap:16px; margin:16px 0;}
.lp-head .letters{font-size:40px; line-height:1.2; color:var(--moon);}
.lp-head .names{color:var(--mute); font-size:14px;}
.lring{position:relative; width:84px; height:84px; flex:none;}
.lring svg{display:block; transform:rotate(-90deg);}
.lring .ring-fg{stroke-dasharray:var(--c); stroke-dashoffset:calc(var(--c) * (1 - var(--done,3) / 3));}
.lring .lab{position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:12px; color:var(--mute); line-height:1.2;}
.lring .lab b{display:block; font:400 20px/1 var(--display); color:var(--silver);}
@media (prefers-reduced-motion:no-preference){
  .lring .ring-fg{transition:stroke-dashoffset var(--t3) var(--ease);} /* motion: M-lesson-ring (stroke only) */
  .lcard.in{animation:fadein var(--t1) ease-out;} /* motion: M-lesson-step */
  @keyframes fadein{ /* motion: M-lesson-step */ from{opacity:0;} to{opacity:1;} }
}
.lsteps{list-style:none; display:grid; gap:8px;}
.lstep{width:100%; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; text-align:left; padding:12px; border-radius:14px; border:1px solid var(--line-2); background:var(--raised); color:var(--silver); font:500 15px/1.3 var(--body); cursor:pointer;
  transition:border-color var(--t1) var(--ease), background-color var(--t1) var(--ease);} /* motion: M-feedback (colour only) */
.lstep:hover{border-color:var(--line-3);}
.lstep .n{width:26px; height:26px; border-radius:50%; border:1px solid var(--line-3); display:grid; place-content:center; font-size:12.5px; color:var(--mute);}
.lstep .d{display:block; margin-top:2px; font-size:13px; color:var(--faint); font-weight:400;}
.lstep[aria-expanded="true"]{border-color:rgba(232,180,120,.6);}
.lstep.done .n{background:var(--ember); border-color:var(--ember); color:#2A1A07;}
.lstep .s{font-size:12.5px; color:var(--faint);}
.lstep.done .s{color:var(--ember);}
.lcard{margin-top:10px; border:1px solid var(--line-2); border-radius:14px; padding:14px; background:rgba(4,5,10,.6); display:grid; gap:10px; font-size:15px;}
.lcard .q{color:var(--silver);}
.picks{display:flex; gap:8px; flex-wrap:wrap;}
.pick{min-width:64px; min-height:56px; border-radius:12px; border:1px solid var(--line-3); background:var(--raised-2); color:var(--moon); font-size:30px; cursor:pointer; font-family:var(--arabic);
  transition:border-color var(--t1) var(--ease), background-color var(--t1) var(--ease);} /* motion: M-feedback (colour only) */
.pick.right{border-color:var(--ember); background:rgba(232,180,120,.12);}
.pick.wrong{border-color:#E58F8F;}
.fb{font-size:14.5px; color:var(--mute); min-height:1.5em;}
.fb.right{color:var(--ember);}
.ldone{margin-top:12px; padding:12px; border-radius:14px; background:rgba(232,180,120,.08); border:1px solid rgba(232,180,120,.35); font-size:15px;}
.ldone b{font-weight:600;}
.lesson-side{display:grid; gap:16px;}
.lesson-side ul{list-style:none; display:grid; gap:10px;}
.lesson-side li{padding-left:22px; position:relative; color:var(--mute);}
.lesson-side li::before{content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--ember);}
.cap{font-size:13.5px; color:var(--faint);}

/* notes -> lesson slider */
.scrub{margin-top:clamp(36px,5vw,56px); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:var(--raised);}
.scrub-stage{position:relative; display:grid;}
.scrub-stage > div{grid-area:1/1; padding:clamp(16px,2.4vw,24px); min-height:300px;}
.notes{background:#14120E; color:#D9D2C3; font:400 16px/1.7 Georgia,serif;}
.notes p{max-width:46ch;}
.notes .scrawl{color:#B8AE98; font-style:italic;}
.inapp{background:#0B0E16; clip-path:inset(0 0 0 var(--x,50%));}
.inapp ol{list-style:none; counter-reset:a; display:grid; gap:8px; max-width:46ch;}
.inapp li{counter-increment:a; display:grid; grid-template-columns:28px 1fr; gap:10px; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; font-size:15px;}
.inapp li::before{content:counter(a); width:24px; height:24px; border-radius:50%; border:1px solid var(--ember); color:var(--ember); display:grid; place-content:center; font-size:12px;}
.inapp li span{color:var(--faint); display:block; font-size:13px;}
.scrub-label{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--faint);}
.scrub-label > span:last-child{text-align:right;}
.scrub input[type=range]{width:100%; margin:0; padding:12px 16px; background:transparent; accent-color:var(--ember); min-height:44px;}
.no-js .inapp{clip-path:none;}
.no-js .scrub-stage{grid-template-columns:1fr;}
.no-js .scrub-stage > div{grid-area:auto;}
.no-js .scrub input{display:none;}

/* deal */
.deal-line{font:300 clamp(26px,3.4vw,40px)/1.2 var(--display); color:var(--moon); max-width:30ch;}
.deal-rows{margin-top:24px;}

/* Numbers in the display face use lining figures. This sits last because the font shorthand above resets it. */
h1,h2,h3,.stat b,.clock .now,.calc-out b,.ad-total b,.lring .lab b,.deal-line,.steps > li::before,.door-label{font-variant-numeric:lining-nums tabular-nums;}
@media print{ body::before,.hdr,.ctrl,.btn{display:none !important;} body{background:#fff; color:#000;} }

/* demo reading guide: says what the animation shows, in order */
.watch{list-style:none; padding:0; margin:0; display:grid; gap:8px; counter-reset:w; max-width:60ch;}
.watch li{counter-increment:w; display:grid; grid-template-columns:28px 1fr; gap:10px; color:var(--mute); font-size:16px;}
.watch li::before{content:counter(w); width:24px; height:24px; border-radius:50%; border:1px solid var(--line-3); display:grid; place-items:center; font-size:13px; color:var(--moon);}
.watch b{color:var(--moon); font-weight:500;}
@media (max-width:520px){ .scrub-label{grid-template-columns:1fr 1fr; row-gap:8px;} .scrub-label .chip{grid-column:1/-1; grid-row:2; justify-self:center;} }