/* ————————————————————————————————————————————————————————————
   amirnet.css — the AmirNet course, on its own sheet.

   Loads AFTER course.css and keeps its chrome only. Plain paper.

   The idea: the exam is in English and the course is in Arabic, so the page
   is a mirror. Everything the exam owns is set LTR in a serif — the face the
   platform's headwords use — and everything the course answers is Arabic in
   the house display face. A ladder says what the score is for; a mirror
   pairs each part of the exam with the course's answer; a strip of real
   screens shows the words as they live on the platform.
   ———————————————————————————————————————————————————————————— */

.am-page{ --col: 1080px; --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; }

/* plain paper */
.am-page::before, .am-page::after{ content:none; }
body.am-page{ background-image:none; }
@media (min-width:1024px){ body.am-page{ background-image:none; } }
:root[data-room="dark"] body.am-page{ background-image:none; }

.am-page .bar > .wrap, .am-page .foot > .wrap{ max-width: var(--col); padding-inline: var(--pad); }
main.am{ max-width: var(--col); margin-inline:auto; padding-inline: var(--pad); }
.am .crumb{ margin-top: 26px; }

/* ——— section numerals ——— */
.am-h2{
  display:flex; align-items:baseline; gap:14px; margin:0 0 26px; flex-wrap:wrap;
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); line-height:1.4;
}
.am-no{ font-weight:500; font-size:.62em; color: var(--accent); letter-spacing:.5px; position:relative; top:-.08em; }
.am-h2-s{ font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }

/* ————————————————————————————————————————————————————————————
   THE TITLE, THEN THE PAIR
   ———————————————————————————————————————————————————————————— */
.am-head{ padding-block: 22px 40px; border-bottom: 1px solid var(--line); }
.am-head h1{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg); line-height:1; }
.h1-kick{ display:block; font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); font-weight:700; color: var(--fg-mute); line-height:1.5; margin-bottom:.3em; }
/* the hamza over the alef rides above the em box — the name gets head-room so
   it never crosses the kicker */
.h1-name{
  display:block; font-size: clamp(4rem, 2.2rem + 9vw, 9.5rem); line-height:1.14; letter-spacing:-.02em;
  color: var(--accent); margin-inline-start:-.03em; padding-top:.04em;
}

/* the pair: the exam's sentence, LTR, in the serif; ours under it, RTL, in
   the house face. On a wide screen they face each other across a hairline
   with the English on the LEFT — where an English line starts. */
.am-pair{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 64px);
  margin-top: 34px; padding-block: 28px; border-block: 1px solid var(--line);
  direction: ltr;
}
.am-en{
  margin:0; font-family: var(--serif); font-weight:700; color: var(--fg);
  font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.2rem); line-height:1.2; text-align:left;
  align-self:center;
}
.am-ar{
  margin:0; direction: rtl; text-align:right; align-self:center;
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg);
  font-size: clamp(1.35rem, 1.05rem + 1.7vw, 2.3rem); line-height:1.45;
  border-inline-start: 2px solid var(--accent); padding-inline-start: clamp(16px, 2.5vw, 28px);
}
.am-ar b{ color: var(--accent); font-weight:800; }
.am-lede{ margin: 26px 0 0; font-size: clamp(1rem, .96rem + .35vw, 1.14rem); line-height:1.95; color: var(--fg-soft); max-width: 40em; }

/* the facts, in one quiet line */
.am-facts{ list-style:none; margin: 24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap: 8px 0; }
.am-facts li{ display:flex; align-items:baseline; gap:8px; padding-inline-end: 22px; margin-inline-end: 22px; border-inline-end: 1px solid var(--line); }
.am-facts li:last-child{ border-inline-end:0; margin-inline-end:0; padding-inline-end:0; }
.am-facts b{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:1.55rem; line-height:1; color: var(--fg); letter-spacing:-.02em; }
.am-facts span{ font-size:.92rem; color: var(--fg-soft); }
.am-facts .am-fact-w span{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg); }
.am-facts .am-fact-w b{ font-size:1rem; color: var(--accent); }
.am-acts{ display:flex; flex-wrap:wrap; align-items:center; gap: 12px 22px; margin-top: 28px; }
.am-link{
  color: var(--fg); text-decoration:none; font-weight:500; font-size:.98rem;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat;
  background-size:100% 1px; background-position: 0 100%; padding-bottom:3px; transition: color .18s ease;
}
.am-link:hover{ color: var(--accent); }

/* on load: the name, then the exam's line, then ours — the answer arrives second */
@media (prefers-reduced-motion: no-preference){
  .h1-name{ animation: rise .7s var(--out) both; }
  .am-en{ animation: rise .6s .35s var(--out) both; }
  .am-ar{ animation: rise .6s .7s var(--out) both; }
  .am-lede, .am-facts, .am-acts{ animation: fade-in .6s 1s ease both; }
}
@keyframes rise{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } }

@media (max-width: 720px){
  .am-pair{ grid-template-columns: 1fr; gap: 16px; }
  .am-ar{ border-inline-start:0; padding-inline-start:0; border-top: 1px solid var(--line); padding-top: 16px; }
  .am-facts li{ padding-inline-end: 14px; margin-inline-end: 14px; }
}

/* ————————————————————————————————————————————————————————————
   WHY — the ladder
   ———————————————————————————————————————————————————————————— */
.why{ margin-block: 72px 0; }
.why-grid{ display:grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 30px clamp(32px, 5vw, 72px); align-items:center; }
.why-txt p{ margin:0 0 14px; font-size: clamp(1rem, .96rem + .25vw, 1.08rem); line-height:1.95; color: var(--fg-soft); max-width: 30em; }
.why-txt p:last-child{ margin-bottom:0; }
.why-lead{ font-size: clamp(1.12rem, 1.02rem + .6vw, 1.36rem) !important; line-height:1.8 !important; color: var(--fg) !important; }
.why-txt b{ color: var(--fg); font-weight:600; }
.why-note{ font-size:.88rem !important; color: var(--fg-mute) !important; padding-top: 12px; border-top: 1px solid var(--line); }
.why-note a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.why-ld{ min-width:0; }
.ld{ display:block; width:100%; height:auto; overflow:visible; }
.ld-tread{ fill:none; stroke: var(--fg); stroke-width:3; stroke-linecap:round; }
.ld-riser{ fill:none; stroke: var(--rail-line); stroke-width:1.6; stroke-linecap:round; }
.ld-range{ font-family:'Rubik', system-ui, sans-serif; font-weight:600; font-size:30px; fill: var(--fg); }
.ld-ar{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:24px; fill: var(--fg-soft); }
.ld-he{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:19px; fill: var(--fg-mute); }
.ld-top .ld-tread{ stroke: var(--accent); stroke-width:5; }
.ld-top .ld-range, .ld-top .ld-ar{ fill: var(--accent); }
.ld-top .ld-range{ font-size:38px; }
.ld-gate{ fill:none; stroke: var(--accent); stroke-width:2; stroke-linecap:round; }
.ld-gate-t{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:19px; fill: var(--accent); }
.am-js .why-ld:not(.in) .ld-step, .am-js .why-ld:not(.in) .ld-gate, .am-js .why-ld:not(.in) .ld-gate-t{ opacity:0; }
.am-js .why-ld.in .ld-step{ animation: step-up .55s var(--out) both; animation-delay: var(--d); }
.am-js .why-ld.in .ld-gate, .am-js .why-ld.in .ld-gate-t{ animation: fade-in .4s .9s ease both; }
@keyframes step-up{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width: 860px){
  .why-grid{ grid-template-columns: 1fr; }
  .why-ld{ order:-1; }
  .ld-range{ font-size:36px; } .ld-ar{ font-size:28px; } .ld-he{ font-size:22px; } .ld-gate-t{ font-size:22px; }
}
/* a phone keeps the ladder at full length and slides it; the page is RTL, so
   the container opens on its right end — the top of the ladder, the exemption */
@media (max-width: 560px){
  .why-ld{ overflow-x:auto; scrollbar-width:none; direction:rtl; }
  .why-ld::-webkit-scrollbar{ display:none; }
  .ld{ width: 640px; }
}

/* ————————————————————————————————————————————————————————————
   THE MIRROR
   ———————————————————————————————————————————————————————————— */
.mir{ margin-block: 84px 0; }
.mir-list{ margin:0; border-top: 1px solid var(--fg); }
.mir-row{
  display:grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 0 clamp(24px, 4vw, 56px);
  padding-block: 24px 26px; border-bottom: 1px solid var(--line); align-items:start;
  direction: ltr; /* the English column sits where English starts */
}
.mir-row dt{ text-align:left; }
.mir-row dt b{ display:block; font-family: var(--serif); font-weight:700; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); line-height:1.15; color: var(--fg); }
.mir-row dt i{ display:block; margin-top:6px; font-family: var(--serif); font-style:italic; font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); color: var(--fg-mute); }
.mir-row dd{ margin:0; direction: rtl; text-align:right; }
/* direct children only: the title and the note are blocks; a numeral inside
   either stays in its line */
.mir-row dd > b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem); line-height:1.6; color: var(--fg); }
.mir-row dd > span{ display:block; margin-top:5px; font-size:.95rem; line-height:1.9; color: var(--fg-soft); max-width: 34em; }
.mir-row dd .latin{ font-weight:500; }
.mir-foot{ margin: 20px 0 0; font-size:.98rem; line-height:1.9; color: var(--fg-soft); }
.am-js .mir-row:not(.in){ opacity:0; }
.am-js .mir-row.in dt{ animation: rise .5s var(--out) both; }
.am-js .mir-row.in dd{ animation: rise .5s .18s var(--out) both; }
.am-js .mir-row.in{ animation: fade-in .01s both; }
@media (max-width: 720px){
  .mir-row{ grid-template-columns: 1fr; gap: 8px; }
}

/* ————————————————————————————————————————————————————————————
   THE SCREENS — real, scroll-snapped
   ———————————————————————————————————————————————————————————— */
.app{ margin-block: 84px 0; }
.app-lead{ margin:0 0 28px; font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.95; color: var(--fg-soft); max-width: 40em; }
.app-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(230px, 1fr); gap: clamp(14px, 2vw, 24px);
  overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width:thin;
}
.app-shot{ margin:0; scroll-snap-align:start; min-width:0; }
.app-shot img{
  display:block; width:100%; height:auto; border-radius: 22px;
  border: 1px solid var(--card-line); box-shadow: var(--lift); background: var(--card);
}
.app-shot figcaption{ margin: 12px 4px 0; font-size:.9rem; line-height:1.8; color: var(--fg-mute); }
.app-shot figcaption b{ color: var(--fg); font-weight:700; font-family:'Baloo Bhaijaan 2', sans-serif; }
.am-js .app-strip:not(.in) .app-shot{ opacity:0; transform: translateY(14px); }
.am-js .app-strip.in .app-shot{ animation: rise .6s var(--out) both; animation-delay: var(--d); }
@media (max-width: 720px){
  .app-strip{ grid-auto-columns: 78%; }
}

/* ————————————————————————————————————————————————————————————
   THE ASK — pink ground, white type
   ———————————————————————————————————————————————————————————— */
.talk{ margin-block: 84px 0; }
.talk-in{ background: var(--pink); color:#fff; border-radius:24px; padding: clamp(34px, 5vw, 60px) var(--pad) clamp(36px, 5vw, 60px); text-align:center; box-shadow: var(--cta-shadow); }
.talk h2{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color:#fff; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); line-height:1.35; }
.talk-p{ margin:8px auto 0; max-width: 30em; color: rgba(255,255,255,.86); font-size:1rem; line-height:1.9; }
.talk-tel{
  display:block; margin: 22px auto 0; width:fit-content; color:#fff; text-decoration:none;
  font-family:'Rubik', system-ui, sans-serif; font-weight:600; letter-spacing:-.01em;
  font-size: clamp(2.2rem, 1.6rem + 3.6vw, 4.4rem); line-height:1.1;
  border-bottom: 3px solid rgba(255,255,255,.4); padding-bottom:4px; transition: border-color .18s ease;
}
.talk-tel:hover{ border-color:#fff; }
.talk-acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 26px; }
.tb-1{ background:#fff; color: var(--pink); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.tb-1:hover{ background:#fff5f8; }
.tb-2{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
.tb-2:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.talk a:focus-visible{ outline-color:#fff; }

/* ——— the other four ——— */
.sib{ margin-block: 72px 0; }
.sib-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.sib-list a{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 16px 4px; border-bottom:1px solid var(--line); text-decoration:none; color: var(--fg); transition: color .18s ease; }
.sib-list b{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.05rem; }
.sib-list em{ font-style:normal; font-size:.88rem; color: var(--fg-mute); }
.sib-list a:hover, .sib-list a:hover b{ color: var(--accent); }

/* the screens follow the room: the app was captured in both of its themes */
.app-shot .shot-d{ display:none; }
:root[data-room="dark"] .app-shot .shot-l{ display:none; }
:root[data-room="dark"] .app-shot .shot-d{ display:block; }