:root{
  /* Yazan Core v1.4. Every colour, type, spacing, size and motion token lives in
     /tokens.css (loaded first; design/yazan-core.tokens.json is its record). This
     block holds only what the site adds on top: the icon masks, the hero grid and
     photo details, and the layout tokens. ONE ORANGE PER BACKGROUND: --accent is
     rust on light and bright on dark, and a solid fill is --accent with
     --accent-text on it. --accent-opposite (tokens.css) is the accent of the
     other kind of surface, for a block that is inverted inside its band (the
     testimonial quote). */
  /* Tabler outline icons (stroke 2) for the glyphs that CSS draws; each is a mask,
     so the colour is whatever the rule gives it. Copied from Tabler, no webfont. */
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l0 14'/%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E");
  --i-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
  --i-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l16 0'/%3E%3Cpath d='M4 12l16 0'/%3E%3Cpath d='M4 18l16 0'/%3E%3C/svg%3E");
  --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
  --grid:rgba(26,26,26,.05);
  --tape:rgba(245,240,232,.75);
  /* logos are other people's artwork: grey in light, flattened to the ink
     colour in dark so a dark logo does not vanish into the ground */
  --logo-filter:grayscale(1);
  --gap:20px;                                  /* every card grid */
  --section-space:clamp(48px,8vw,96px);        /* layout.sectionSpace: vertical padding of every section */
  --gutter:20px;                               /* layout.gutter: 96 on desktop, stepped down on smaller screens */
  --section:var(--section-space);
  color-scheme:light;
}
@media (min-width:480px){:root{--gutter:32px}}
@media (min-width:768px){:root{--gutter:48px}}
@media (min-width:1024px){:root{--gutter:64px}}
@media (min-width:1333px){:root{--gutter:96px}}
/* The dark theme and every dark band (tokens.css re-points the Core tokens for
   both). The site adds its own details on top. A dark band stays dark in the
   dark theme: v1.4 has no cream flip. */
:root[data-theme="dark"],.tone-dark{
  --grid:rgba(245,240,232,.07);
  --tape:rgba(245,240,232,.55);
  --logo-filter:brightness(0) invert(1);
  color-scheme:dark;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background-color:var(--bg-screen);color:var(--text-primary);
  font-family:var(--font-sans);line-height:var(--lh-body);font-size:var(--fs-body);
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
/* Focus is ink on light and cream on dark (--focus-ring), never orange. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.dot{color:var(--accent)}
.hot{color:var(--accent)}
[hidden]{display:none!important}

/* nav
   Section labels come from content.json, so their width is unknown. Without
   nowrap every label breaks mid-phrase and the bar collapses into a ragged
   two-line block; without wrap the whole header pushes the document wider
   than the viewport and `overflow-x:hidden` then clips the Arabic start edge
   with no way to scroll it back. Both are needed. */
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch;gap:0 var(--sp-4);min-height:var(--h-header);padding-block:0;border-bottom:1px solid var(--border)}
/* Header A: a square mark in the accent, then the full name. */
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-bold);font-size:var(--fs-title-sm);white-space:nowrap;color:var(--text-primary)}
.brand .mark{flex:none;width:var(--size-brand-mark);height:var(--size-brand-mark);background:var(--accent)}
.links{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-end;font-size:var(--fs-button)}
/* Header tools are plain: no outline, no fill. Text goes to the accent on
   hover; focus keeps the ring from tokens.css. */
.tool{font:inherit;align-self:center;background:none;color:var(--text-secondary);border:0;min-height:48px;min-width:48px;padding:0 var(--sp-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.tool.lang{font-size:var(--fs-label);font-weight:var(--fw-semibold)}
.tool.icon{padding:0}
.tool:hover,.tool:focus-visible{color:var(--accent)}
.tool svg{width:20px;height:20px}
/* tabs run the full height of the header; the active one is bold with a 2px
   accent rule on the header's bottom edge */
.pages{display:flex;align-items:stretch}
.pages a{min-height:48px;display:inline-flex;align-items:center;padding:0 var(--sp-3);font-size:var(--fs-button);font-weight:var(--fw-semibold);white-space:nowrap;
  color:var(--text-primary);border-bottom:2px solid transparent;margin-bottom:calc(-1 * var(--border-w))}
.pages a:hover,.pages a:focus-visible{color:var(--accent)}
.pages a[aria-current="page"]{font-weight:var(--fw-bold);border-bottom-color:var(--accent)}
.vrule{align-self:center;flex:none;width:var(--border-w);height:var(--sp-6);background:var(--border-input);margin:0 var(--sp-2)}
/* Section links are not part of the header. They sit in a bar of their own
   that site.js reveals once the hero has scrolled out of view, so the first
   screen carries one row of navigation. Labels come from content.json, so the
   row never wraps: on a phone it scrolls sideways. It is fixed, so the page
   owes it nothing; the header above it is sticky only on phones (below). */
.secbar{position:fixed;top:0;inset-inline:0;z-index:15;background:var(--bg-screen);border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top,0px)}
.secbar-in{display:flex;align-items:center;gap:var(--sp-2) clamp(16px,2vw,24px);min-height:48px;font-size:var(--fs-button);
  overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.secbar-in::-webkit-scrollbar{display:none}
.secbar .nl{display:inline-flex;align-items:center;min-height:48px;color:var(--text-secondary);white-space:nowrap}
.secbar .nl:hover{color:var(--accent)}
html{scroll-padding-top:64px}

/* ---- phone header ----
   At 820px and below the section links row is hidden, and on a 9,000px page
   the header used to scroll away with it. The top bar now stays, with one
   menu holding the sections, the page tabs and the theme switch. */
.menu{display:none}
@media (max-width:820px){
  html{scroll-padding-top:calc(var(--sp-16) + var(--sp-12) + var(--sp-8))}
  .topbar{position:sticky;top:0;z-index:20;background-color:var(--bg-screen)}
  .secbar{top:var(--nav-h,64px);padding-top:0;z-index:19}
  .topbar .nav{min-height:var(--sp-16);align-items:center}
  .links .pages,.links .vrule,#themeBtn,#langBtn{display:none}
  .links{align-items:center}
  .menu{display:block}
  /* one plain button: the word and a menu icon, no outline */
  .menu summary{list-style:none;cursor:pointer;min-height:48px;display:inline-flex;align-items:center;gap:8px;
    padding:0 var(--sp-2);border:0;color:var(--text-primary);font-size:var(--fs-button);font-weight:var(--fw-semibold)}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary::after{content:"";width:20px;height:20px;background-color:currentColor;
    -webkit-mask:var(--i-menu) center/contain no-repeat;mask:var(--i-menu) center/contain no-repeat}
  .menu summary:hover,.menu[open] summary{color:var(--accent)}
  .menu[open] summary::after{-webkit-mask-image:var(--i-x);mask-image:var(--i-x)}
  .menu-panel{position:absolute;inset-inline:0;top:100%;background:var(--bg-screen);border-top:1px solid var(--border);border-bottom:2px solid var(--accent);
    padding:var(--sp-2) var(--gutter) var(--sp-5);max-height:calc(100dvh - 76px);overflow-y:auto}
  .menu-panel p{margin:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-label);color:var(--text-secondary)}
  .menu-panel a,.menu-panel button{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0;
    border:0;border-bottom:1px solid var(--border);background:none;color:var(--text-primary);font:inherit;font-size:var(--fs-button);text-align:start;cursor:pointer}
  .menu-panel a:hover,.menu-panel button:hover{color:var(--accent)}
  .menu-panel a[aria-current]{font-weight:var(--fw-bold)}
  .menu-panel a[aria-current]::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
}
@media (max-width:420px){.brand{font-size:var(--fs-subhead)}}

/* keyboard users should not have to tab the whole header to reach the page */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:10;background:var(--accent);color:var(--accent-text);
  font-weight:var(--fw-bold);padding:12px 20px;min-height:48px;display:inline-flex;align-items:center}
.skip:focus{inset-inline-start:0}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:var(--sp-6)}
/* A <button> does not inherit the font and keeps the browser's grey fill, so
   every form button rendered in the system face. `font:inherit` comes first
   because it resets weight and size. The secondary button is the app's: white,
   a 1px strong border, ink text; the primary (.solid) is the one accent fill. */
.btn{font:inherit;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 32px;
  font-weight:var(--fw-bold);font-size:var(--fs-button);line-height:var(--lh-button);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);cursor:pointer;text-align:center}
.btn.md{min-height:48px;padding:8px 24px;font-size:var(--fs-button)}
.btn.sm{min-height:48px;padding:8px 16px;font-size:var(--fs-button)}
.btn:hover{background:var(--fill-field);color:var(--text-primary);border-color:var(--border-strong)}
.btn:disabled{cursor:progress}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn.solid:hover,.btn.solid:active{background:var(--accent-pressed);border-color:var(--accent-pressed);color:var(--accent-text)}

/* bands
   A band is one full-width stretch of a page with a tone; its content stays
   in the .wrap inside it. Tones: light is the page ground, deep is one step
   darker, dark is cream text on black (still black in the dark theme: v1.4 has
   no cream flip). The dark band re-points the colour tokens, so
   every component inside it follows without a rule of its own. */
.band{color:var(--text-primary);padding-block:var(--section-space)}
.band.j-top{padding-top:0}
.band-top{padding-block:0}
.band.flow{padding-block:0 var(--section-space)}
.band:not(.flow)>.wrap>.block{padding-top:0}
.band:not(.flow) .cta{margin-top:0;padding-block:0;border-top:0}
/* Band backgrounds come from the tone classes in tokens.css (.tone-cream,
   .tone-cream-deep, .tone-dark), which assemble() adds beside tone-light/deep/dark.
   The deeper cream is --band-deep, which is the page ground in the dark theme. */
/* The graph-paper grid belongs to heroes only, and fades out at their foot.
   It is a pseudo-element behind the content, so the mask never touches text. */
.has-grid{position:relative;isolation:isolate}
.has-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,black 70%,transparent);mask-image:linear-gradient(to bottom,black 70%,transparent)}
/* Centred headings: only a one-line intro (.intro) may centre with them.
   Longer paragraphs and every list keep the start edge, at a readable width. */
.align-center h2{justify-content:center;text-align:center}
.align-center .intro{text-align:center;margin-inline:auto}
.align-center :is(.lead,.txt,.note,.qa-a p){text-align:start;max-width:60ch}
.align-center .cta{flex-direction:column;justify-content:center;text-align:center}
.align-center .cta-act{align-items:center}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,64px);align-items:center;padding-block:var(--section-space)}
/* The kicker says who this is and who it is for, so it cannot be the faintest
   line in the hero. Same size and place; weight and colour carry it. */
.kicker{font-weight:var(--fw-bold);color:var(--text-secondary);font-size:var(--fs-body);margin:0}
.hero h1{margin:0 0 12px;font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-display)}
.hero p.lead{margin:0;max-width:52ch;color:var(--text-secondary);font-size:var(--fs-body)}
/* The highlighted phrase was a second, darker orange next to the dot. Ink
   with an orange underline keeps the accent as a mark and the text at 15:1. */
.hero h1 .hot{color:inherit;padding-bottom:.16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat right bottom;background-size:100% .12em}
[dir="ltr"] .hero h1 .hot{background-position:left bottom}
.hero .alt{margin:var(--sp-4) 0 0;color:var(--text-secondary);font-size:var(--fs-subhead)}
.hero .alt a{color:var(--accent);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:.2em}
.photo{position:relative;width:min(240px,64vw);margin-inline:auto;aspect-ratio:460/580}
.photo .paper{position:absolute;inset:0;background:var(--text-primary);transform:rotate(-2.5deg);
  clip-path:polygon(0% 2%,6% 0%,13% 2.5%,22% .5%,31% 2%,40% 0%,52% 2.2%,63% .4%,74% 2%,85% 0%,94% 1.8%,100% .5%,100% 97%,93% 99.5%,84% 97.5%,72% 100%,60% 98%,49% 99.8%,37% 97.6%,25% 99.6%,14% 97.8%,5% 100%,0% 98%)}
.photo .pic{position:absolute;inset:6%;background:var(--fill-skeleton);transform:rotate(-2.5deg);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-secondary);font-size:var(--fs-body);padding:16px;overflow:hidden}
.photo .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.photo .tape{position:absolute;top:-12px;inset-inline-end:32%;width:34%;height:32px;background:var(--tape);transform:rotate(4deg)}
/* From 900px the text and the photo share a row. Below it the photo sits under
   the text, smaller: phones read the text first, and with the photo on top the
   role, the promise and both buttons fell below the first screen. With no
   photo set the hero is one column at every width. */
@media (min-width:900px){
  .hero[data-photo]{grid-template-columns:minmax(0,1fr) auto}
  .hero[data-photo] .photo{width:clamp(260px,32vw,440px);margin-inline:0}
}
@media (max-width:540px){.hero .btns .btn{flex:1 1 100%}}

/* ---- hero E (home) ----
   Text on the start side, a square photo on the end side from 1024px, with an
   accent square offset 16px toward the bottom-start corner behind it. The
   stats row closes the hero. No graph paper, no big word here (the CV keeps
   both). Everything square; the accent follows the band, so the dark theme
   needs no rule of its own. */
.hero.hero-e{display:block;padding-block:var(--sp-16)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12);align-items:center;isolation:isolate}
.hero-pic{position:relative;order:-1;width:var(--size-hero-photo);max-width:100%;aspect-ratio:1;
  background:var(--fill-skeleton);border:1px solid var(--text-primary)}
.hero-pic::before{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--accent);
  inset-block:var(--sp-4) calc(-1 * var(--sp-4));inset-inline:calc(-1 * var(--sp-4)) var(--sp-4)}
.hero-pic img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr) var(--size-hero-photo);gap:var(--sp-20)}
  .hero-pic{order:0}
}
.hero-e .kicker{margin:0 0 var(--sp-4);font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--text-secondary)}
/* letter spacing pulls Arabic letters apart, so the kicker spaces out in Latin only */
html[lang="en"] .hero-e .kicker{letter-spacing:var(--ls-kicker)}
.hero.hero-e h1{max-width:var(--measure-hero-title);margin:0 0 var(--sp-6);font-size:var(--fs-display-1);line-height:var(--lh-display)}
/* Arabic keeps the Core title line height (1.4): Cairo's marks need it */
html[lang="ar"] .hero.hero-e h1{line-height:var(--lh-heading)}
/* The emphasis rule is a 4px accent underline. Drawn as text decoration, not a
   border: a border sits at the foot of the inline box, which at the 1.2 display
   line height falls into the next line when the phrase wraps. Arabic needs a
   deeper offset to clear its descenders. */
.hero-e h1 .hot{background:none;padding-bottom:0;text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:var(--border-w-mark);text-underline-offset:.14em;text-decoration-skip-ink:none}
html[lang="ar"] .hero-e h1 .hot{text-underline-offset:.42em}
.hero-e .lead{max-width:var(--measure-hero-lead);margin:0;font-size:var(--fs-subhead);line-height:var(--lh-body);color:var(--text-secondary)}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-8)}
.btn.btn-primary{padding:0 var(--sp-7)}
.hero-link,.text-link{display:inline-flex;align-items:center;min-height:48px;color:var(--text-primary);font-size:var(--fs-button);font-weight:var(--fw-bold)}
.hero-link .hl,.text-link .hl{display:inline-flex;align-items:center;gap:var(--sp-2);border-bottom:2px solid var(--text-primary)}
.hero-link svg,.text-link svg{width:var(--icon-inline);height:var(--icon-inline);flex:none}
.hero-link:hover,.hero-link:focus-visible,.text-link:hover,.text-link:focus-visible{color:var(--accent)}
.hero-link:hover .hl,.hero-link:focus-visible .hl,.text-link:hover .hl,.text-link:focus-visible .hl{border-bottom-color:var(--accent)}
.hero-e .trust{margin-top:var(--sp-3)}
/* the stats row: inside the hero, an accent rule above and a hairline below */
.hero-stats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 var(--sp-6);margin-top:var(--sp-16);
  border-top:2px solid var(--accent);border-bottom:1px solid var(--border)}
.hs{padding:var(--sp-5) 0 var(--sp-4)}
.hs b{display:block;font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title);font-variant-numeric:tabular-nums}
.hs>span{display:block;color:var(--text-secondary);font-size:var(--fs-label);line-height:var(--lh-heading)}
@media (max-width:820px){
  .hero-pic{width:100%}
  .hero-pic::before{inset-block:var(--sp-3) calc(-1 * var(--sp-3));inset-inline:calc(-1 * var(--sp-3)) var(--sp-3)}
  .hero.hero-e h1{font-size:var(--fs-display-2)}
  .hero-act{flex-direction:column;align-items:stretch}
  .hero-act .btn-primary{width:100%}
  .hero-link{align-self:center}
  .hs b{font-size:var(--fs-title-sm);line-height:var(--lh-heading)}
}

/* phones: every primary action in a section runs the full width */
@media (max-width:820px){.band .btn.solid{width:100%}}

/* ---- how I teach (Method A) ----
   Two columns from 1024px: kicker, title and a 48x4 accent bar on the start
   side; the story (20 on the body line height, up to 720px) on the end side.
   Then three cards: white, a 1px ink edge, 28px padding. */
.m-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);align-items:start}
.m-bar{display:block;width:var(--sp-12);height:var(--border-w-mark);margin-top:var(--sp-5);background:var(--accent)}
/* 720 = the hero title measure plus the 80 hero gap */
.m-story{margin:0;max-width:calc(var(--measure-hero-title) + var(--sp-20));font-size:var(--fs-title-sm);line-height:var(--lh-body)}
.st-body mark,.m-story mark,.hiw-scene mark{background:var(--peach-bg);color:inherit;font-weight:var(--fw-bold);border-radius:var(--radius);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m-story strong.accent{color:var(--accent);font-weight:var(--fw-bold)}
.m-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);margin-top:var(--sp-12)}
@media (min-width:821px){.m-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.m-head{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-12)}}
.m-card{background:var(--surface);border:1px solid var(--text-primary);padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-3)}
.m-step{margin:0;font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--accent)}
.m-card h3{margin:0;font-size:var(--fs-title);line-height:var(--lh-title)}
.m-card p:not(.m-step){margin:0;font-size:var(--fs-subhead);line-height:var(--lh-body);color:var(--text-secondary)}

/* ---- featured course (home) ----
   A white card with a 1px input edge: the main area (label and audience tag,
   name, promise, up to four outcomes in one column with 12px ink squares) and
   a rail on the page cream behind a 1px ink rule (status line, four facts
   as label and value with no icons,
   two full-width actions). Under 821px the rail drops below the main area. */
.fc{display:grid;grid-template-columns:minmax(0,1fr);background:var(--surface);border:1px solid var(--text-primary)}
.fc-main{padding:var(--sp-6)}
.fc-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4)}
.fc-lbl{margin:0;font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-secondary)}
.fc-tag{display:inline-flex;align-items:center;min-height:var(--h-pill);padding:0 var(--sp-3);background:var(--peach-bg);color:var(--peach-text);
  font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading)}
.fc .fc-name{display:block;margin:var(--sp-4) 0 0;font-size:var(--fs-title);line-height:var(--lh-title)}
.fc-name a:hover{color:var(--accent)}
.fc-promise{margin:var(--sp-4) 0 0;max-width:var(--measure-hero-title);color:var(--text-secondary);font-size:var(--fs-subhead);line-height:var(--lh-body)}
.fc-outh{margin:var(--sp-8) 0 0;padding-top:var(--sp-6);border-top:1px solid var(--border);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-secondary)}
/* one column, kept to a reading width (560 = the hero title measure less 80), so
   no outcome ends on a lone word */
.fc-outs{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
  max-width:calc(var(--measure-hero-title) - var(--sp-20))}
.fc-outs li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
.fc-outs li::before{content:"";flex:none;width:var(--sp-3);height:var(--sp-3);margin-top:calc((1lh - var(--sp-3)) / 2);background:var(--text-primary)}
/* three backgrounds that never match: the band (deep cream), the card (white),
   the rail (page cream). Dark: page ground, --surface, --fill-field. */
.fc-rail{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-6);background:var(--bg-screen);border-top:1px solid var(--text-primary)}
:root[data-theme="dark"] .fc-rail{background:var(--fill-field)}
.fc-status{margin:0;display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-secondary)}
.fc-status i{flex:none;width:var(--sp-2);height:var(--sp-2);background:var(--accent)}
.fc-facts{display:flex;flex-direction:column}
.fc-f{padding:var(--sp-4) 0;border-bottom:1px solid var(--border)}
.fc-f:first-child{padding-top:0}
.fc-fl{margin:0;font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-secondary)}
.fc-fv{margin:0;font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-body)}
.fc-ctas{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:auto}
.fc-ctas .btn{width:100%}
.fc-all{margin:var(--sp-6) 0 0}
@media (min-width:821px){
  /* the rail is a component dimension (like the course side box) */
  .fc{grid-template-columns:minmax(0,1fr) 360px}
  .fc-main{padding:var(--sp-12)}
  .fc-rail{padding:var(--sp-8);border-top:0;border-inline-start:1px solid var(--text-primary)}
}

/* ---- closing (Close C, home): the one giant word of the page ----
   A dark band. From 1024px two equal columns, 64 apart, aligned to the bottom:
   the decorative word («ابدأ.» at --fs-giant, never wrapping) with the real
   title under it; on the end side, under a 1px rule, the lead, the WhatsApp
   button and the trust line (social links live in the footer). One column below. */
.cl{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);align-items:end}
@media (min-width:1024px){.cl{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16)}}
.cl-word{margin:0;font-size:var(--fs-giant);line-height:var(--lh-display);font-weight:var(--fw-bold);color:var(--text-primary);
  letter-spacing:-0.02em;white-space:nowrap}
.cl-title{display:block;margin:var(--sp-4) 0 0;font-size:var(--fs-title);line-height:var(--lh-heading);font-weight:var(--fw-bold);color:var(--text-secondary)}
.cl-end{border-top:1px solid var(--border-strong);padding-top:var(--sp-6)}
/* 480 = the hero lead measure less 40 */
.cl-lead{margin:0 0 var(--sp-8);max-width:calc(var(--measure-hero-lead) - var(--sp-8) - var(--sp-2));color:var(--text-secondary);font-size:var(--fs-title-sm);line-height:var(--lh-body)}
.cl-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin:var(--sp-5) 0 0;font-size:var(--fs-label);line-height:var(--lh-heading)}
.cl-trust{color:var(--text-secondary)}
/* Dark theme only: the closing band sits on the raised surface, so it reads as
   a section of its own after the diagnosis (which takes the page ground) and
   before the footer. The light theme keeps the plain dark band. */
:root[data-theme="dark"] .band-closing{background:var(--surface)}

/* stats
   --n is the number of stats, set by site.js. A hardcoded 4 left an empty
   column whenever the owner published a different count. */
.stats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:2px solid var(--accent);border-bottom:1px solid var(--border)}
.stat{padding:var(--sp-8) var(--sp-5)}
.stat+.stat{border-inline-start:1px solid var(--border)}
/* No direction override. `direction:ltr` used to resolve `text-align:start`
   to *left*, parking the number at the far end of its cell while the Arabic
   label sat at the other; `unicode-bidi:plaintext` repeats the mistake, since
   a value with no strong character falls back to LTR (UAX#9 P3). Digits
   already read left-to-right inside RTL text, and site.js isolates the value
   itself, so inheriting the page direction is both correct and enough. */
.stat b{display:block;font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-display)}
/* `> span` and not `span`: the value is wrapped in <span dir="ltr"> inside
   the <b>, and the descendant rule used to shrink it to a 16px grey caption. */
.stat>span{color:var(--text-secondary);font-size:var(--fs-subhead)}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(odd){border-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--border)}
  /* an odd count left the last stat alone in half a row */
  .stat:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
  .stat+.stat{border-inline-start:0;border-top:1px solid var(--border)}
}

/* sections */
section.block{padding-top:var(--section-space)}
h2{margin:0 0 var(--sp-8);font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-display);display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px}
h2 small{font-weight:var(--fw-regular);font-size:var(--fs-subhead);color:var(--text-secondary)}
h3{margin:0;font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
/* auto-fit rather than a fixed 3: it gives a real two-up tablet step instead
   of jumping 3 -> 1, and it collapses the empty tracks a short list would
   otherwise leave behind (see .course-grid, which often holds one card). */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--gap)}
.card{background:var(--surface);border:1px solid var(--border);padding:var(--sp-8);display:flex;flex-direction:column;gap:12px}
.card p,.work p{margin:0;color:var(--text-secondary);font-size:var(--fs-body)}
/* same trap as .stat b: it pushed "01" to the opposite corner from the
   Arabic heading it numbers. */
.step{font-size:var(--fs-body);color:var(--accent)}

.rows{border-top:1px solid var(--border)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--border)}
.row .t{font-weight:var(--fw-bold);font-size:var(--fs-title-sm)}
.row .n{color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-ui)}
.row .m{color:var(--text-secondary)}
.row .y{font-size:var(--fs-body);color:var(--text-secondary)}
.note{margin-top:20px;color:var(--text-secondary);font-size:var(--fs-body)}

.work{display:flex;flex-direction:column;gap:12px}
.shot{aspect-ratio:4/3;background:var(--fill-skeleton);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--fs-body)}
.work .shot:empty{display:none}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.work .tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--border-strong);color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-ui)}

.quote{background:var(--text-primary);color:var(--bg-screen);padding:clamp(32px,5vw,48px) clamp(24px,5vw,64px);border-inline-start:4px solid var(--accent);margin:0;
  /* an inverted block inside its band: its edge takes the accent of the other surface */
  --accent:var(--accent-opposite)}
.quote p{margin:0 0 16px;font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
.quote cite{font-style:normal;color:var(--quote-soft);font-size:var(--fs-subhead)}

.cta{margin-top:var(--section-space);padding-block:64px;border-top:2px solid var(--accent);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta .big2{font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-display)}
/* Arabic marks (shadda, hamza) reach above and below the line box, so a wrapped
   heading needs more room than Latin */

.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.cta .alt-link{color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-link);text-decoration:underline;text-underline-offset:.2em;min-height:48px;display:inline-flex;align-items:center}
/* the trainer page's course teaser */
.course.teaser .txt{margin:0;max-width:62ch;color:var(--text-secondary);font-size:var(--fs-body)}
.course.teaser .btns{margin-top:var(--sp-2);position:relative;z-index:1}
.all-courses{margin:var(--sp-4) 0 0}
.all-courses a{color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-link);min-height:48px;display:inline-flex;align-items:center}
.all-courses a:hover{text-decoration:underline}

.teach{margin-top:var(--section-space);padding-block:48px;border-block:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}

/* ---- dynamic additions ---- */
.loading{padding:var(--sp-16) 0;color:var(--text-secondary);text-align:center}
/* the content renders client-side: until it does, the page holds one screen,
   so the footer starts below the fold and its move never counts as a shift */
.js #app{min-height:100vh}
.photo .pic img{filter:grayscale(1)}
/* eleven of these stacked full width ran to ~3200px of near-identical
   blocks. Two up halves the scroll without dropping a single quote. */
.quotes{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.work a.more{color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-link)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot{overflow:hidden}

/* CV */
.xp{border-top:1px solid var(--border)}
.xp-item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px var(--sp-8);padding:32px 0;border-bottom:1px solid var(--border)}
/* the experience heading carries the section's rule; it is not a .block */
#experience>h2{border-top:2px solid var(--accent);padding-top:var(--sp-8)}
.xp-item .y{font-size:var(--fs-body);color:var(--text-secondary);padding-top:4px}
.xp-item .c{color:var(--text-secondary);margin:4px 0 8px}
.xp-item ul{margin:0;padding-inline-start:20px;color:var(--text-secondary)}
.xp-item li{margin-bottom:4px}
.xp-item li::marker{color:var(--accent)}
@media (max-width:820px){.xp-item{grid-template-columns:1fr}}
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:820px){.skills{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--border-strong);color:var(--text-secondary);padding:4px 12px;font-size:var(--fs-caption);direction:ltr}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* only shown once the boot script confirms scripting works */
.js-only{display:none}
html.js .js-only{display:block}
html.js noscript{display:none}

/* unknown URL */
.lost{text-align:center;padding-block:var(--section-space)}
.lost h1{font-size:var(--fs-display-2);line-height:var(--lh-display);font-weight:var(--fw-bold);margin:0 0 12px}
.lost p.lead{margin:0 auto 8px;max-width:44ch;color:var(--text-secondary)}
.lost .btns{justify-content:center}

/* print: the CV should come out of a printer looking like a CV */
@media print{
  html{scroll-behavior:auto}
  body{
    background:var(--print-paper)!important;color:var(--print-ink);font-size:11pt;line-height:1.5;
    background-image:none!important;
  }
  .nav,.secbar,.skip,#footer,.btns,.tool,.pages,.loading,.lost .btns{display:none!important}
  .wrap{max-width:none;padding-inline:0}
  a{color:var(--print-ink);text-decoration:none}
  .hero{display:block;padding-block:0}
  .hero h1{font-size:22pt;margin-top:0}
  .hero p.lead{max-width:none;color:var(--print-soft)}
  .photo{width:34mm;float:inline-end;margin-inline-start:8mm;margin-bottom:4mm}
  .photo .paper,.photo .tape{display:none}
  section.block,#experience{padding-top:10mm;break-inside:avoid}
  h2{font-size:14pt;margin-bottom:4mm}
  .xp-item,.card,.work,.row,.quote{break-inside:avoid}
  .chip{border:1px solid var(--print-rule)}
  @page{margin:14mm}
}

/* ---- forms: diagnosis request and launch notices ---- */
.form{margin-top:24px;display:grid;gap:16px;max-width:760px}
.form .f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:720px){.form .f2{grid-template-columns:1fr}}
.frow{display:grid;gap:8px}
.frow label{font-weight:var(--fw-semibold);font-size:var(--fs-label)}
.form input[type=text],.form select,.form textarea{
  width:100%;font:inherit;font-size:var(--fs-body);line-height:var(--lh-body);padding:12px 16px;min-height:48px;
  border:1px solid var(--border-input);background:var(--fill-field);color:var(--text-primary);border-radius:var(--radius)}
/* the app's field: placeholder in secondary text, never the disabled grey */
.form ::placeholder{color:var(--text-secondary);opacity:1}
.form textarea{min-height:calc(var(--sp-16) + var(--sp-8));resize:vertical}
.form input[type=text]:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:none;background:var(--surface);border-color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-primary)}
.form .check{display:flex;align-items:center;gap:8px;min-height:48px;color:var(--text-secondary);font-size:var(--fs-label);cursor:pointer}
.form .check input{width:24px;height:24px;accent-color:var(--text-primary);flex:none}
.form .privacy{margin:0;color:var(--text-secondary);font-size:var(--fs-label)}
.form .btns{margin-top:0}
.frow .ferr:empty{display:none}
/* a field the server rejected: a 2px edge in the error colour, beside a message
   that starts with an icon, so the colour is never the only signal */
.form [aria-invalid="true"],.form input[aria-invalid="true"]:focus-visible,.form select[aria-invalid="true"]:focus-visible,.form textarea[aria-invalid="true"]:focus-visible{
  background:var(--surface);border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.ferr:not(:empty){display:flex;align-items:flex-start;gap:8px;color:var(--danger);font-size:var(--fs-label);font-weight:var(--fw-bold)}
.ferr svg{flex:none;width:20px;height:20px;margin-top:4px}
/* sent: a check in the success colour and normal text, on the plain card */
.done:not([hidden]){margin-top:24px;display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);
  padding:20px 24px;font-weight:var(--fw-bold);font-size:var(--fs-body);max-width:760px}
.done svg{flex:none;width:24px;height:24px;margin-top:4px;color:var(--success)}
.fullmsg{margin:24px 0 0;border:1px solid var(--border);background:var(--surface);padding:16px 20px;color:var(--text-secondary);max-width:760px}
/* the honeypot: off-screen for people, still a normal field for a bot */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- free diagnosis (Diag D, home): WhatsApp first, a light band ----
   From 1024px two columns (the end column 440, a component dimension), 80
   apart, centred: kicker, title, lead, the WhatsApp button and a text link to
   the form, the reply line; then the message to copy in a white box with an
   ink edge, and the steps two by two under an ink rule. Below 1024px the box
   follows the actions; at 820px and below the button is full width with the
   link centred under it. */
.dg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12);align-items:center}
@media (min-width:1024px){.dg{grid-template-columns:minmax(0,1fr) 440px;gap:var(--sp-20)}}
.dg .dg-title{font-size:var(--fs-display-1);line-height:var(--lh-display)}
/* 560 = the hero title measure less the 80 hero gap */
.dg-lead{margin:var(--sp-5) 0 0;max-width:calc(var(--measure-hero-title) - var(--sp-20));color:var(--text-secondary);font-size:var(--fs-title-sm);line-height:var(--lh-body)}
.dg-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-8)}
.btn.dg-wa{gap:var(--sp-2);padding:0 var(--sp-7)}
.btn.cl-btn{padding:0 var(--sp-7)}
.btn.dg-wa svg,.btn.dg-copy svg{flex:none;width:20px;height:20px}
.dg-reply{margin:var(--sp-4) 0 0;color:var(--text-secondary);font-size:var(--fs-label);line-height:var(--lh-heading)}
.dg-cap{margin:0 0 var(--sp-3);color:var(--text-secondary);font-size:var(--fs-label);line-height:var(--lh-heading)}
.dg-box{background:var(--surface);border:1px solid var(--text-primary);padding:var(--sp-6)}
:root[data-theme="dark"] .dg-box{border-color:var(--border-strong)}
.dg-msg{margin:0;font-size:var(--fs-subhead);line-height:var(--lh-loose)}
.dg-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-5)}
.btn.dg-copy{gap:var(--sp-2);padding:0 var(--sp-5);background:transparent;border-color:var(--text-primary)}
.dg-done{color:var(--text-secondary);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading)}
.dg-steps{list-style:none;margin:var(--sp-6) 0 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--text-primary);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-6)}
.dg-steps li{color:var(--text-secondary);font-size:var(--fs-label);line-height:var(--lh-heading)}
/* the number is isolated: «03» beside «30 دقيقة» would otherwise join into one digit run */
.dg-steps b{display:inline-block;unicode-bidi:isolate;margin-inline-end:var(--sp-2);color:var(--accent);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .dg .dg-title{font-size:var(--fs-display-2)}
  .dg-act{flex-direction:column;align-items:stretch}
  .dg-act .text-link{align-self:center}
}
.fits{margin-top:var(--sp-8);gap:var(--sp-6)}
.fit h3{font-size:var(--fs-title-sm);margin-bottom:8px}
.fit ul{margin:8px 0 0;padding:0;list-style:none;color:var(--text-secondary)}
.fit li{padding:8px 0;border-bottom:1px solid var(--border);position:relative;padding-inline-start:24px}
.fit li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:20px;height:20px;background-color:var(--accent);
  -webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat}
.fit.no li::before{-webkit-mask-image:var(--i-minus);mask-image:var(--i-minus)}

/* ---- courses page ---- */
.herolite{padding-block:var(--section-space) var(--sp-12)}
.herolite h1{margin:0 0 12px;font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-display)}
.herolite .lead{margin:0;max-width:56ch;color:var(--text-secondary);font-size:var(--fs-body)}
.course{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);padding:clamp(20px,3vw,32px)}
.course.feat{border-top:2px solid var(--accent);padding:clamp(24px,4vw,48px);margin-bottom:20px}
.course.feat h3{font-size:var(--fs-title)}
/* muted by colour: opacity .6 took --text-muted text to about 2.4:1 */
.course.muted{border-style:dashed;border-color:var(--border-strong)}
.course.muted h3,.course.muted p{color:var(--text-secondary)}
.course-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.course .when{margin:0;font-size:var(--fs-body);color:var(--text-secondary)}
.course .shot{aspect-ratio:16/9;margin:calc(-1 * clamp(20px,3vw,32px));margin-bottom:0}
.course.feat .shot{margin:calc(-1 * clamp(24px,4vw,48px));margin-bottom:0}
.course .form{margin-top:4px}
.course .perk{margin:12px 0 0;font-weight:var(--fw-bold);font-size:var(--fs-subhead);color:var(--accent)}
/* status and audience share one box: same height, padding and size */
.st,.course-head .tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;font-size:var(--fs-caption);line-height:var(--lh-ui)}
/* neutral classification: a 1px outline, ink text, no fill */
.st{border:1px solid var(--border-strong);color:var(--text-primary);font-weight:var(--fw-semibold)}
.course-head .tag{border:1px solid var(--border-strong);color:var(--text-secondary)}
/* attention (open for enrolment): the peach pill, no border */
.st-open{background:var(--peach-bg);border-color:transparent;color:var(--peach-text)}
.course-grid{align-items:start}

/* ---- FAQ: native <details>, no accordion script ----
   One centred column. The heading shares it with the list: left full width it
   would sit at the page's start edge while the questions floated away from it.
   The +/- marker is CSS content, so no screen reader announces it and
   `inset-inline-end` puts it on the correct side in both Arabic and English.
   Nothing animates here on purpose. */
.faq{max-width:820px;margin-inline:auto}
.faq .lead{margin:0 0 var(--sp-8);max-width:60ch;color:var(--text-secondary);font-size:var(--fs-body)}
.qa-list{border-top:1px solid var(--border)}
.qa summary{
  display:block;list-style:none;position:relative;cursor:pointer;
  font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:var(--lh-body);
  min-height:48px;padding:var(--sp-3) 0;padding-inline-end:var(--sp-8);
  border-bottom:1px solid var(--border)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;inset-inline-end:0;top:calc(var(--sp-3) + 4px);width:24px;height:24px;background-color:var(--accent);
  -webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat}
.qa[open] summary::after{-webkit-mask-image:var(--i-minus);mask-image:var(--i-minus)}
.qa summary:hover{color:var(--accent)}
.qa-a{padding:var(--sp-4) 0 var(--sp-6)}
.qa-a p{margin:0 0 var(--sp-3);max-width:70ch;color:var(--text-secondary);font-size:var(--fs-body)}
.qa-a p:last-child{margin:0}
.qa-ask{margin:var(--sp-6) 0 0}
.qa-ask a{color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-link)}
.qa-ask a:hover{text-decoration:underline}

/* ---- one course: /courses/<id> ----
   Nothing here is a new pattern: the facts bar is .stats at a smaller size,
   the plan is the same .card + .step the method section uses, and good fit /
   not a fit is literally the diagnosis markup. Only the header, the price
   block and the phone-only bar are new. */
.chead{padding-block:clamp(32px,5vw,48px) var(--sp-8)}
.chead .back{margin:0 0 var(--sp-4)}
.chead .back a{display:inline-flex;align-items:center;min-height:48px;color:var(--text-secondary);font-size:var(--fs-link)}
.chead .back a:hover{color:var(--accent)}
.chead-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6) clamp(24px,4vw,48px);align-items:end}
.chead h1{margin:12px 0 12px;font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-display)}
.chead .when{margin:0;font-size:var(--fs-body);color:var(--text-secondary)}
.chead .outcome{margin:16px 0 0;max-width:46ch;font-weight:var(--fw-bold);line-height:var(--lh-title);font-size:var(--fs-title)}
.chead .ctext{margin:12px 0 0;max-width:62ch;color:var(--text-secondary);font-size:var(--fs-body)}
.chead-cta .btn{white-space:nowrap}
@media (max-width:820px){.chead-row{grid-template-columns:1fr;align-items:start}}

/* the course facts: a list of label and value, two to a row (who it is for
   and the language take the whole row), a hairline under each. Drawn in the
   side box from 1024px and in the page body below it. */
.cfacts-body{margin-top:var(--sp-12)}
.cfacts dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4)}
.cfacts .cf{min-width:0;padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.cfacts .cf-who,.cfacts .cf-lang{grid-column:1/-1}
.cfacts dt{display:flex;align-items:center;gap:var(--sp-2);margin:0;color:var(--text-secondary);
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:var(--lh-ui)}
.cfacts dt svg{flex:none;color:var(--accent)}
.cfacts dd{margin:var(--sp-1) 0 0;padding-inline-start:calc(var(--sp-5) + var(--sp-2));color:var(--text-primary);
  font-size:var(--fs-subhead);font-weight:var(--fw-bold);line-height:var(--lh-ui);font-variant-numeric:tabular-nums}
.cfacts .cf-who dd{padding-inline-start:0}
.cfacts .cf-line{margin:var(--sp-3) 0 0;color:var(--text-secondary);font-size:var(--fs-label);line-height:var(--lh-ui)}
.chead h1 .colon{color:var(--accent)}

.price{margin-top:var(--sp-8);border-inline-start:4px solid var(--accent);padding:var(--sp-4) var(--sp-6)}
.price .p-val{margin:0;font-weight:var(--fw-bold);line-height:var(--lh-title);font-size:var(--fs-title)}
.price .p-note{margin:4px 0 0;color:var(--text-secondary);font-size:var(--fs-subhead)}

.prose p{margin:0 0 var(--sp-4);max-width:70ch;color:var(--text-secondary);font-size:var(--fs-body)}
.prose p:last-child{margin-bottom:0}

.cando{margin:0;padding:0;list-style:none;max-width:70ch}
.cando li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--text-secondary);font-size:var(--fs-body)}
.cando li:last-child{border-bottom:0}
.cando .tick{flex:none;display:inline-flex;color:var(--accent);margin-top:4px}
.cando .tick svg{width:20px;height:20px}

.plan{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan .card:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:720px){.plan{grid-template-columns:1fr}}

/* symptoms: the problem slot opens with lines the reader recognises, as
   cards on the dark band: a thin orange line on the start side, no icons */
.s-intro{margin:calc(-1 * var(--sp-4)) 0 var(--sp-6);max-width:62ch;color:var(--text-secondary);font-size:var(--fs-body)}
.symptoms{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:700px){.symptoms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.symptoms li{display:grid;gap:var(--sp-1);align-content:start;border-inline-start:4px solid var(--accent);padding:var(--sp-2) var(--sp-5);line-height:var(--lh-body)}
.symptoms li b{font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--text-primary)}
.symptoms li span{color:var(--text-secondary);font-size:var(--fs-body)}

/* what else comes with the course: the plan's cards, two up */
.extras{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.extras{grid-template-columns:1fr}}

.proj{align-items:center;gap:clamp(24px,4vw,48px)}
.proj .shot{aspect-ratio:4/3}
.proj-t h2{margin-bottom:var(--sp-4)}
.proj-t p{margin:0 0 var(--sp-3);max-width:60ch;color:var(--text-secondary);font-size:var(--fs-body)}
.proj-t p:last-child{margin-bottom:0}

.about-row{display:flex;align-items:flex-start;gap:var(--sp-6)}
.about-row p{margin:0 0 var(--sp-3);max-width:70ch;color:var(--text-secondary);font-size:var(--fs-body)}
.mug{flex:none;width:120px;height:120px;object-fit:cover;border:1px solid var(--border);filter:grayscale(1)}
@media (max-width:540px){.about-row{flex-direction:column}}

/* the closing call to action: a button when there is somewhere to send the
   reader, the launch-notice form when there is not */
.cta.form-cta,.cta.closed{display:block}
.cta.form-cta .big2{margin-bottom:var(--sp-5)}
.closed-line{margin:0;font-weight:var(--fw-bold);color:var(--text-secondary);font-size:var(--fs-title-sm)}
.closed-ask{margin:var(--sp-3) 0 0}
.closed-ask a{color:var(--accent);font-weight:var(--fw-semibold)}
.closed-ask a:hover{text-decoration:underline}

/* phone only: on a long page the button is otherwise a full scroll away */
.sticky-cta{display:none}
@media (max-width:1023px){
  .sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:9;
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
    background:var(--bg-screen);border-top:2px solid var(--accent);
    padding:12px clamp(16px,5vw,24px);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .sticky-cta .sticky-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--fw-bold);font-size:var(--fs-subhead)}
  .sticky-cta .btn{white-space:nowrap}
  /* the bar floats over everything, so the page owes it the space */
  body.has-sticky #footer{padding-bottom:calc(var(--sp-6) + var(--sp-16) + var(--sp-4) + env(safe-area-inset-bottom,0px))}
}

/* a course card opens its own page. The link is on the title and stretched
   over the card, because an <a> around the card would have swallowed the
   launch-notice form inside it. */
.course{position:relative}
.course h3 .cover::after{content:"";position:absolute;inset:0;z-index:0}
.course h3 .cover:hover{color:var(--accent)}
.course .form,.course .btns,.course .done,.course .perk,.course .fullmsg{position:relative;z-index:1}

@media print{
  .sticky-cta,.chead .back,.chead-cta{display:none!important}
  body.has-sticky #footer{padding-bottom:0!important}
}
.cta.form-cta .perk{margin:0 0 var(--sp-4);font-weight:var(--fw-bold);color:var(--accent)}
.cta.form-cta .form{margin-top:0}

/* small labels line their digits up */
:is(.step,.tag,.when,.y){font-variant-numeric:tabular-nums}

/* ---- logos strip: the same band as the stats, directly under them ----
   One row: a small muted label, then the names in bold. A logo not uploaded
   yet is its name in text; the text keeps full opacity, because --text-muted at .7
   would drop under 4.5:1. */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-8);padding-top:var(--sp-5)}
.logos-t{margin:0;color:var(--text-secondary);font-size:var(--fs-body)}
.logos-row{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-8)}
.logo{display:inline-flex;align-items:center;min-height:48px}
.logo img{display:block;max-height:36px;width:auto;max-width:160px;object-fit:contain;opacity:.7;filter:var(--logo-filter)}
.logo:hover img,a.logo:focus-visible img{opacity:1}
.logo-name{color:var(--text-primary);font-weight:var(--fw-bold);font-size:var(--fs-subhead);white-space:nowrap}
a.logo:hover .logo-name{color:var(--accent)}
@media (max-width:420px){.logos-row{gap:var(--sp-2) var(--sp-6)}.logo-name{white-space:normal}}
@media print{.logos{display:none}}

/* ---- 8B ---- */
/* testimonials: the name in bold, its context under it */
.quote cite{display:grid;gap:4px}
.quote cite b{font-weight:var(--fw-bold);color:var(--bg-screen)}

/* the line under a primary button */
.trust{margin:var(--sp-3) 0 0;color:var(--text-secondary);font-size:var(--fs-label)}

/* course cards: one link, outcome first, price and a button at the foot */
a.ccard{color:inherit}
.ccard{border-top:2px solid var(--border)}
.ccard:hover{transform:translateY(-3px);border-top-color:var(--accent)}
.ccard:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ccard h3{font-size:var(--fs-title)}
.c-line{margin:0;color:var(--text-secondary);font-size:var(--fs-body);max-width:62ch}
.meta{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);color:var(--text-secondary);font-size:var(--fs-body)}
.meta li+li::before{content:"·";margin-inline-end:var(--sp-4)}
/* a dot at the start of a wrapped line reads as a stray mark: stack instead */
@media (max-width:540px){.meta{flex-direction:column}.meta li+li::before{content:none}}
.c-foot{margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.c-price{display:grid;gap:4px;min-width:0}
.c-price b{font-weight:var(--fw-bold);font-size:var(--fs-title-sm);line-height:var(--lh-heading)}
.c-price span{color:var(--text-secondary);font-size:var(--fs-body);max-width:34ch}
.ccard:hover .btn{background:var(--text-primary);color:var(--bg-screen)}
.course.muted .c-price b,.course.muted .c-line{color:var(--text-secondary)}

/* course page: the problem as a quote, the list of results in two columns */
.pquote{margin:0;padding:var(--sp-2) 0;padding-inline-start:var(--sp-6);border-inline-start:4px solid var(--accent)}
.pquote p{margin:0 0 var(--sp-3);max-width:62ch;color:var(--text-primary);font-size:var(--fs-title-sm);line-height:var(--lh-body)}
.pquote p:last-child{margin-bottom:0}
@media (min-width:700px){
  .cando{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-8);max-width:none}
  .cando li:last-child{border-bottom:1px solid var(--border)}
}
.band-top+.flow .block:first-child{padding-top:var(--sp-4)}
.band.flow.after{padding-top:var(--section-space)}
.band.flow.after .block:first-child{padding-top:0}

/* the floating WhatsApp button: bottom-left in Arabic, bottom-right in English
   (the end edge of the page in both) */
.wa{position:fixed;z-index:8;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--whatsapp);color:var(--on-whatsapp);box-shadow:none}
.wa:hover{background:var(--text-primary);color:var(--bg-screen)}
.wa:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* the sticky course bar is fixed to the same corner on phones */
@media (max-width:1023px){body.has-sticky .wa{bottom:calc(var(--sp-16) + var(--sp-8) + env(safe-area-inset-bottom,0px))}}
@media print{.wa{display:none!important}}

/* ---- 18: footer, privacy ----
   The footer is a dark band like the closing section, set apart from it by a
   hairline made from the band's own ink, so it mirrors in the dark theme. */
/* The footer is light on every page: the deep-band cream, ink text, a 1px ink
   rule on top. In the dark theme it takes the page ground with a strong rule, so
   it never matches the closing (which sits on --surface there). The closing is
   the only dark band. */
#footer.band{padding-block:var(--sp-12) var(--sp-6);background:var(--band-deep);color:var(--text-primary);border-top:1px solid var(--text-primary)}
:root[data-theme="dark"] #footer.band{background:var(--bg-screen);border-top-color:var(--border-strong)}
.f-cols{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media (min-width:900px){.f-cols{grid-template-columns:var(--fcols,1fr)}}
.f-name{margin:0;font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
.f-line{margin:var(--sp-2) 0 0;color:var(--text-secondary);font-size:var(--fs-subhead)}
.f-soc{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.soc{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:1px solid var(--text-primary);color:var(--text-primary)}
.soc svg{width:20px;height:20px}
.soc:hover,.soc:focus-visible{color:var(--accent);border-color:var(--accent)}
.f-h{margin:0 0 var(--sp-3);font-weight:var(--fw-bold);font-size:var(--fs-label);line-height:var(--lh-heading);color:var(--text-secondary)}
.f-col ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-1)}
/* a course link stays on one line (short names keep it short) */
.f-col li a{display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-link);color:var(--text-primary);white-space:nowrap}
.f-col li a:hover{color:var(--accent)}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid var(--border);color:var(--text-secondary);font-size:var(--fs-body)}
:root[data-theme="dark"] .f-bottom{border-top-color:var(--border-strong)}
.f-bottom a{display:inline-flex;align-items:center;min-height:48px;margin-block:calc(-1 * var(--sp-3))}
.f-bottom a:hover{color:var(--accent)}
.privacy-line{margin:var(--sp-3) 0 0;color:var(--text-secondary);font-size:var(--fs-label)}
.privacy-line a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
/* the closing call to action centres its form too */
.align-center .form{margin-inline:auto}
.align-center .done:not([hidden]){margin-inline:auto}

/* ---- 8D: the course page ---- */
/* testimonials open with what changed for the student */
.quote .q-result{margin:0 0 var(--sp-3);font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
.quote.has-result p:not(.q-result){font-weight:var(--fw-regular);font-size:var(--fs-body);color:var(--quote-soft)}

/* the side box lives in a rail laid over the page, so the full-width bands keep
   their backgrounds; below 1024px there is no rail and no box */
.cp{position:relative}
.cp-rail{display:none}
@media (min-width:1024px){
  .cp-rail{display:block;position:absolute;inset:0;z-index:5;pointer-events:none}
  .cp-rail>.wrap{height:100%;display:flex;justify-content:flex-end}
  .side{pointer-events:auto;position:sticky;align-self:flex-start;width:340px;
    top:calc(var(--nav-h,64px) + env(safe-area-inset-top,0px) + var(--sp-4));margin-top:var(--sp-8);
    display:grid;gap:var(--sp-4);padding:var(--sp-5);background:var(--surface);color:var(--text-primary);
    border:1px solid var(--border);border-top:2px solid var(--accent);color-scheme:inherit}
  /* the page leaves the box's column free */
  .cp .band>.wrap{padding-inline-end:calc(var(--gutter) + 340px + var(--sp-12))}
  .cp .price,.cp .cfacts-body,.chead-cta{display:none}
  body.has-aside .wa{display:none}
}
.side .s-price{display:grid;gap:4px}
.side .s-price b{font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
.side .s-price span{color:var(--text-secondary);font-size:var(--fs-body)}
.side .btn{width:100%}
.side .form{margin-top:0;gap:var(--sp-3)}
.side .btns{margin-top:0}
.side .s-h{margin:0 0 var(--sp-2);font-weight:var(--fw-bold);font-size:var(--fs-subhead)}
.side .s-gets ul{margin:0;padding:0;list-style:none}
.side .s-gets li{padding:var(--sp-2) 0;border-top:1px solid var(--border);color:var(--text-secondary);font-size:var(--fs-subhead);line-height:var(--lh-ui)}
.side .trust{margin:0}
.side .privacy-line{margin:var(--sp-2) 0 0}

/* the floating WhatsApp button must never sit on the last footer line: the page
   ends with room for it (and, on phones, for the sticky course bar above it) */
body.has-wa #footer{padding-bottom:calc(var(--sp-6) + var(--sp-16) + var(--sp-4) + env(safe-area-inset-bottom,0px))}
@media (max-width:1023px){body.has-wa.has-sticky #footer{padding-bottom:calc(var(--sp-6) + var(--sp-16) + var(--sp-12) + var(--sp-8) + env(safe-area-inset-bottom,0px))}}
@media (min-width:1024px){body.has-wa.has-aside #footer{padding-bottom:var(--sp-6)}}

/* ---- 19: screenshots of messages ----
   A static grid in CSS columns (a screenshot is as tall as it is), each image
   whole in a plain paper card. Nothing scrolls by itself. */
.chats-h{font-size:var(--fs-title);margin-bottom:var(--sp-6)}
/* below the testimonials in the same band, so it keeps a gap of its own */
.band:not(.flow)>.wrap>.block.chats{padding-top:var(--sp-16)}
.chat-grid{margin:0;padding:0;list-style:none;columns:1;column-gap:var(--gap)}
@media (min-width:600px){.chat-grid{columns:2}}
@media (min-width:900px){.chat-grid{columns:3}}
/* the card: paper, a thin border all round, an orange line on the start side
   (a fixed brand orange in both themes), square corners, no shadow, no tilt */
.chat{break-inside:avoid;margin:0 0 var(--gap);padding:var(--sp-3);background:var(--surface);
  border:1px solid var(--border);border-inline-start:4px solid var(--accent);border-radius:var(--radius);box-shadow:none}
.chat:hover{transform:translateY(-3px)}
.chat-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.chat-open img{display:block;width:100%;height:auto}
/* course on the start side, date on the end side; either may be missing */
.chat-meta{display:flex;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-2) 0 0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-ui)}
.chat-course{min-width:0}
.chat-date{margin-inline-start:auto;flex:none;white-space:nowrap}
.chat-dlg{padding:var(--sp-4);max-width:min(92vw,640px);max-height:92vh;overflow:auto;background:var(--surface);color:var(--text-primary);border:1px solid var(--border)}
.chat-dlg::backdrop{background:rgba(0,0,0,.65)}
.chat-dlg img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin:var(--sp-4) auto 0}
.chat-cap{margin:var(--sp-2) 0 0;text-align:center;color:var(--text-secondary);font-size:var(--fs-body)}
.chat-cap:empty{display:none}
.chat-x{display:flex;align-items:center;justify-content:center;margin-inline-start:auto;width:48px;height:48px;border:1px solid var(--text-primary);
  background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-title);line-height:var(--lh-title);cursor:pointer}
.chat-x:hover{background:var(--text-primary);color:var(--bg-screen)}
@media print{.chat-dlg{display:none!important}}

/* ---- students section (Quotes A) ----
   A header row (kicker, title and one line on the start side, the "read more"
   arrows on the end side), then one row of figures that scrolls sideways: a WhatsApp screenshot in a
   dark frame with its strongest sentence and who said it underneath, or a
   written review as a text-only card. Square, no shadow. */
.q-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-8)}
.q-intro{flex:1 1 320px;min-width:0;max-width:var(--measure-hero-title)}
/* a section's kicker and title (students, how I teach): the kicker in the
   accent, letter-spaced in Latin only; the title at display-2 */
.sec-kicker{margin:0 0 var(--sp-3);font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--accent)}
html[lang="en"] .sec-kicker{letter-spacing:var(--ls-kicker)}
.sec-title{display:block;margin:0;font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:var(--lh-heading)}
.q-lead{margin:var(--sp-3) 0 0;color:var(--text-secondary);font-size:var(--fs-subhead);line-height:var(--lh-body)}
/* a secondary action: white, a 1px input edge, ink text */
.btn.secondary{background:var(--surface);border-color:var(--border-input)}
.q-nav{display:flex;gap:var(--sp-2)}
.q-arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-input);color:var(--text-primary)}
.q-arrow svg{width:20px;height:20px}
.q-arrow:hover:not(:disabled){border-color:var(--text-primary);color:var(--accent)}
.q-arrow:disabled{background:var(--fill-track);border-color:var(--border);color:var(--text-disabled);cursor:default}
/* one row that scrolls sideways and snaps to each item; the next item peeks in
   on phones and tablets so the row reads as scrollable; three in view from 1024 */
.q-track{list-style:none;margin:0;padding:0 0 var(--sp-4);display:flex;align-items:flex-start;gap:var(--sp-6);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.q-track:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.q-item{flex:0 0 85%;min-width:0;scroll-snap-align:start}
@media (min-width:720px){.q-item{flex-basis:46%}}
@media (min-width:1024px){.q-track{gap:var(--sp-8)}.q-item{flex-basis:calc((100% - 2 * var(--sp-8)) / 3)}}
.q-fig{margin:0;min-width:0}
.q-frame{background:var(--text-primary);border:1px solid var(--text-primary);padding:var(--sp-3)}
:root[data-theme="dark"] .q-frame{background:var(--surface);border-color:var(--border-strong)}
.q-fig figcaption{margin-top:var(--sp-4)}
.q-quote{margin:0;font-size:var(--fs-subhead);font-weight:var(--fw-bold);line-height:var(--lh-body)}
.q-who{margin:var(--sp-2) 0 0;font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-secondary)}
/* a written review with no screenshot: the same caption, on a plain card */
.q-text{padding:var(--sp-6);background:var(--surface);border:1px solid var(--border)}
.q-text figcaption{margin-top:0}

/* ---- 8C: motion ----
   All of it lives in this one block. Outside it nothing moves: no transitions,
   no keyframes, no smooth scrolling. With reduced motion the whole block is
   skipped, so the hero shows at once and its underline is already drawn (it is
   a plain full-width background above). Two things only: the hero's load
   moment, and the hover fade on controls and cards. */
/* ---- my story (#story on the home page, Story F, version A) ----
   One deep cream band. The intro start-aligned on every size, then the timeline:
   one rail on the start side, the full height of the stations (a 2px track in
   --border and the 2px accent fill over it, its centre 32px in from the start
   edge), and per station a plain 32px square marker on it, level with the
   card's first line. Each station is one full-width card 56px in from the
   start edge (32 + half the marker + 8): --surface, a 1px --border edge,
   square, 20px inside on phones and 28 from 720, 48px between cards.
   Inside: number and year on one line, the title, then the photo and the
   text. (The card's "next" grid row is empty now: no station has a link.)
   From 1024 the card has two columns: number, year, title and text on the
   start side, the photo (4:3, 400 wide) on the end side, aligned to the top;
   the same for every station. Below 1024 one column: the photo under the
   title, over the text. A station with no photo is text only, full width.
   Station 02 (.st-low) is a dark band (the dark tone) edge to edge, 64 above
   and below; its card has no edge or fill of its own and covers the rail.
   The rules below draw the finished state (line full, every station reached,
   everything visible), which is what a reader with reduced motion or without
   the script sees. .st-live (added by initStory) takes the stations back to
   the start: unreached until the fill passes their marker, hidden until they
   first come into view. */
.story{padding-block:var(--section-space)}
/* on the home page the band pads the section */
.story.story-home{padding-block:0}
.st-intro{max-width:var(--measure-hero-title);margin:0 0 var(--sp-16)}
.st-kicker{margin:0 0 var(--sp-3);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--accent)}
html[lang="en"] .st-kicker{letter-spacing:var(--ls-kicker)}
.story .st-title{display:block;margin:0;font-size:var(--fs-display-2);line-height:var(--lh-display);font-weight:var(--fw-bold)}
.st-lead{max-width:var(--measure-story-lead);margin:var(--sp-4) 0 0;font-size:var(--fs-heading);line-height:var(--lh-body);color:var(--text-secondary)}
.st-line{position:relative}
.st-track,.st-fill{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--sp-8) - var(--border-w));width:var(--border-w-strong);pointer-events:none}
.st-track{background:var(--border)}
:root[data-theme="dark"] .st-track{background:var(--border-strong)}
.st-fill{background:var(--accent);transform-origin:top}
.st-list{display:flex;flex-direction:column;gap:var(--sp-12)}
/* the card's inside: 20 on phones, 28 from 720 (the marker follows it) */
.stn{--st-pad:var(--sp-5);position:relative;padding-inline-start:calc(var(--sp-8) + var(--size-story-marker) / 2 + var(--sp-2))}
.st-mark{position:absolute;z-index:1;top:calc(var(--border-w) + var(--st-pad) + var(--fs-label) * var(--lh-heading) / 2 - var(--size-story-marker) / 2);inset-inline-start:calc(var(--sp-8) - var(--size-story-marker) / 2);
  width:var(--size-story-marker);height:var(--size-story-marker);box-sizing:border-box;background:var(--accent);border:var(--border-w-strong) solid var(--accent)}
.st-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "title" "pic" "body" "next";row-gap:var(--sp-3);
  padding:var(--st-pad);background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius)}
.st-meta{grid-area:meta;display:flex;align-items:baseline;gap:var(--sp-3);margin:0;font-size:var(--fs-label);line-height:var(--lh-heading)}
.st-no{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--accent)}
.st-year{color:var(--text-secondary)}
.story .st-h{grid-area:title;display:block;margin:0;font-size:var(--fs-title);line-height:var(--lh-heading);font-weight:var(--fw-bold)}
/* one sentence per line, as the owner wrote it */
.st-body{grid-area:body;margin:0;font-size:var(--fs-subhead);line-height:var(--lh-loose);white-space:pre-line}
.st-body strong.accent{color:var(--accent);font-weight:var(--fw-bold)}
.st-pic{grid-area:pic;position:relative;z-index:0;margin-block:var(--sp-2) var(--size-story-offset)}
.st-pic[data-count]{margin-block-end:0}
.st-pic::before{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--accent);
  inset-block:var(--size-story-offset) calc(-1 * var(--size-story-offset));inset-inline:calc(-1 * var(--size-story-offset)) var(--size-story-offset)}
/* with dots under the photo the square still ends 14px below the photo, not
   under the dots: the dots sit 8px past the square (14 + 8), 8 tall, so the
   square stops 16 above the box's end */
.st-pic[data-count]::before{inset-block-end:var(--sp-4)}
/* the photo is a button: it opens the lightbox */
.st-open{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;margin:0;border:var(--border-w) solid var(--text-primary);border-radius:var(--radius);
  background:var(--fill-skeleton);cursor:zoom-in;overflow:hidden}
.st-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.st-img:not(.is-on){opacity:0}
/* the dots: which photo is showing (squares, not circles) */
.st-dots{display:flex;gap:var(--sp-2);margin-top:calc(var(--size-story-offset) + var(--sp-2))}
.st-dot{width:var(--sp-2);height:var(--sp-2);background:var(--border-strong)}
.st-dot.is-on{background:var(--accent)}
/* pause / play: a 48px tap target over the photo's top end corner, drawn as a
   small 28px square */
.st-play{position:absolute;z-index:1;top:0;inset-inline-end:0;display:flex;align-items:flex-start;justify-content:flex-end;
  width:var(--sp-12);height:var(--sp-12);padding:var(--sp-2);margin:0;background:none;border:0;color:var(--text-primary);cursor:pointer}
.st-play[hidden]{display:none}
.st-play-in{display:flex;align-items:center;justify-content:center;width:var(--sp-7);height:var(--sp-7);background:var(--surface);border:var(--border-w) solid var(--border-strong)}
.st-play-in svg{width:var(--icon-inline);height:var(--icon-inline)}
.st-play:focus-visible{outline:none}
.st-play:focus-visible .st-play-in{outline:var(--border-w-strong) solid var(--focus-ring);outline-offset:var(--border-w)}
/* the last station's way on: a quiet text link down to how I teach */
.st-live .stn:not(.is-reached) .st-mark{background:var(--bg-screen);border-color:var(--text-primary)}
.st-live .stn:not(.is-reached) .st-pic::before{background:var(--bg-screen)}
/* on the home page the story sits on the deep band: an unreached marker takes that colour */
.tone-cream-deep .st-live .stn:not(.is-reached) .st-mark,.tone-cream-deep .st-live .stn:not(.is-reached) .st-pic::before{background:var(--band-deep)}
/* station 02: the low point, a dark band edge to edge that covers the rail.
   The dark tone re-points the colours: cream text, a cream edge on the
   unreached marker, the bright accent once reached. The card inside has no
   edge or fill of its own; the band is the card. */
.st-low{margin-inline:calc(-1 * var(--gutter));padding-block:var(--sp-16);color:var(--text-primary);
  padding-inline:calc(var(--gutter) + var(--sp-8) + var(--size-story-marker) / 2 + var(--sp-2)) var(--gutter)}
.st-low .st-card{background:none;border-color:transparent;padding-block:0}
.st-low .st-mark{top:calc(var(--sp-16) + var(--fs-label) * var(--lh-heading) / 2 - var(--size-story-marker) / 2);inset-inline-start:calc(var(--gutter) + var(--sp-8) - var(--size-story-marker) / 2)}
.story .st-low .st-h{font-size:var(--fs-display-2);line-height:var(--lh-display)}
.st-low .st-body mark{background:var(--accent);color:var(--accent-text)}
.st-low .st-body mark strong.accent{color:inherit}
/* edge to edge on wide screens too: past 1280 the gutter no longer reaches the
   screen edge, so the band's colour is painted outward with a border image (ink
   overflow: it draws past the box without widening it, so no sideways scroll
   and the text stays where it is) */
.st-low{border-image:linear-gradient(var(--bg-screen) 0 0) fill 0 / / 0 100vw}
:root[data-theme="dark"] .st-low{background:var(--surface);border-image-source:linear-gradient(var(--surface) 0 0)}
.st-live .st-card:not(.is-in){opacity:0;transform:translateY(var(--sp-4))}
/* ---- «كيف بشتغل معك» (howIWork), right after the story ----
   A light band (the page ground) that opens with the scene as a dark block
   edge to edge (.hiw-top tone-dark: the technique of story station 02, the
   colour painted past the wrapper with a border image, --surface in the dark
   theme), 48 inside above and below on phones, 64 from 1024; the band has no
   top padding of its own, so the block starts where the band does. Inside:
   the label (an h2 while there is no punchline, drawn the same) in the
   bright accent; the first two scene lines 18 then 24 from 720, regular, up
   to 640; the third, the punchline (.is-punch), 24 then display-2 (40) from
   720, Bold, 24 above it; its key phrase sits on the accent. Below
   the block, on the page ground, 48 under it: the steps are an <ol>: on
   phones a 2px --border line 31px in from the start edge
   (centre 32), the items 56 in, 32 apart; from 1024 three columns 48 apart
   with the line running across behind the markers. Each marker is the
   story's 32px square with the number (13 Bold, tabular): step 1 filled in
   the accent, 2 and 3 a 2px ink edge on the band's colour. No card edges or
   fills. Title 20 then 24, the outcome line 15 SemiBold accent, the body 16
   on the loose line height (up to 340 from 1024). The closing is centred:
   the closing sentence 16 secondary up to 560, the question 24 Bold and the
   one primary button (full width at 820 and below, like every band primary),
   which scrolls to the diagnosis. The step text keeps its line breaks. */
.band-how{padding-block:0 var(--sp-12)}
.hiw-top{margin-inline:calc(-1 * var(--gutter));padding:var(--sp-12) var(--gutter);color:var(--text-primary);
  border-image:linear-gradient(var(--bg-screen) 0 0) fill 0 / / 0 100vw}
:root[data-theme="dark"] .hiw-top{background:var(--surface);border-image-source:linear-gradient(var(--surface) 0 0)}
.hiw-kicker{display:block;margin:0 0 var(--sp-4);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--accent)}
html[lang="en"] .hiw-kicker{letter-spacing:var(--ls-kicker)}
.hiw-scene{max-width:var(--measure-hero-title);margin:0 0 var(--sp-3);font-size:var(--fs-heading);font-weight:var(--fw-regular);line-height:var(--lh-body)}
.hiw-scene.is-punch{margin:var(--sp-6) 0 0;font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-heading)}
/* Cairo's line box is taller than the 1.2 display line height, so a plain
   background would cover the dots of the line above: the fill is one
   line height tall, centred on the glyphs */
.hiw-top mark{background:linear-gradient(var(--accent) 0 0) 0 50% / 100% 1.2em no-repeat;color:var(--accent-text)}
.hiw-punch{max-width:20ch;margin:var(--sp-6) 0 0;font-size:var(--fs-title);line-height:var(--lh-heading);font-weight:var(--fw-bold)}
.hiw-steps{position:relative;display:grid;gap:var(--sp-8);margin:var(--sp-12) 0 0;padding:0;list-style:none}
.hiw-steps::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--sp-8) - var(--border-w));width:var(--border-w-strong);background:var(--border)}
:root[data-theme="dark"] .hiw-steps::before{background:var(--border-strong)}
.hiw-step{position:relative;min-width:0;padding-inline-start:calc(var(--sp-8) + var(--size-story-marker) / 2 + var(--sp-2))}
.hiw-mark{position:absolute;top:0;inset-inline-start:calc(var(--sp-8) - var(--size-story-marker) / 2);display:flex;align-items:center;justify-content:center;
  width:var(--size-story-marker);height:var(--size-story-marker);box-sizing:border-box;font-size:var(--fs-label);line-height:var(--lh-button);
  font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;background:var(--bg-screen);border:var(--border-w-strong) solid var(--text-primary);color:var(--text-primary)}
.hiw-step.is-first .hiw-mark{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.hiw-h{margin:0;padding-top:var(--sp-1);font-size:var(--fs-title-sm);line-height:var(--lh-heading);font-weight:var(--fw-bold)}
.hiw-out{margin:var(--sp-2) 0 0;font-size:var(--fs-body);line-height:var(--lh-ui);font-weight:var(--fw-semibold);color:var(--accent)}
.hiw-body{margin:var(--sp-3) 0 0;font-size:var(--fs-subhead);line-height:var(--lh-loose);white-space:pre-line}
.hiw-close{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);margin-top:var(--sp-16);text-align:center}
.hiw-line{max-width:var(--measure-story-lead);margin:0;text-wrap:balance;font-size:var(--fs-subhead);line-height:var(--lh-body);color:var(--text-secondary)}
.hiw-q{margin:0;font-size:var(--fs-title);line-height:var(--lh-heading);font-weight:var(--fw-bold)}
.hiw-trust{margin:0;font-size:var(--fs-label);line-height:var(--lh-ui);color:var(--text-secondary)}
@media (min-width:720px){
  .hiw-scene{font-size:var(--fs-title)}
  .hiw-scene.is-punch,.hiw-punch{font-size:var(--fs-display-2);line-height:var(--lh-display)}
}
@media (min-width:1024px){
  .band-how{padding-block:0 var(--sp-16)}
  .hiw-top{padding-block:var(--sp-16)}
  .hiw-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
  .hiw-steps::before{top:calc(var(--size-story-marker) / 2 - var(--border-w));bottom:auto;inset-inline:0;width:auto;height:var(--border-w-strong)}
  .hiw-step{padding-inline-start:0;padding-top:calc(var(--size-story-marker) + var(--sp-4))}
  .hiw-mark{inset-inline-start:0}
  .hiw-h{padding-top:0;font-size:var(--fs-title)}
  .hiw-body{max-width:340px}
}
/* «القصة كاملة ←» at the end of the home story */
.st-more{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--text-primary);font-weight:var(--fw-bold);border-bottom:2px solid var(--accent);white-space:nowrap}
.st-more svg{width:var(--icon-inline);height:var(--icon-inline);flex:none}
.st-more:hover,.st-more:focus-visible{color:var(--accent)}
/* the lightbox: a dark screen (the dark tone), the photo as large as fits,
   its description under it, 48px square buttons */
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--sp-16) var(--sp-4);background:var(--bg-screen);color:var(--text-primary)}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);max-width:100%;max-height:100%}
.lb-img{display:block;max-width:100%;max-height:calc(100vh - var(--sp-16) * 2 - var(--sp-12));width:auto;height:auto;object-fit:contain}
.lb-cap{margin:0;font-size:var(--fs-label);line-height:var(--lh-ui);color:var(--text-secondary);text-align:center}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--sp-12);height:var(--sp-12);padding:0;
  background:var(--surface);color:var(--text-primary);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius);cursor:pointer}
.lb-btn:focus-visible{outline:var(--border-w-strong) solid var(--focus-ring);outline-offset:var(--border-w-strong)}
.lb-close{top:var(--sp-4);inset-inline-end:var(--sp-4)}
.lb-prev,.lb-next{top:calc(50% - var(--sp-12) / 2)}
.lb-prev{inset-inline-start:var(--sp-4)}
.lb-next{inset-inline-end:var(--sp-4)}
@media (max-width:719px){
  .lb-prev,.lb-next{top:auto;bottom:var(--sp-4)}
}
@media (min-width:720px){
  .stn{--st-pad:var(--sp-7)}
}
@media (min-width:1024px){
  .st-card{grid-template-columns:minmax(0,1fr) var(--size-story-photo-w);grid-template-rows:auto auto auto 1fr;column-gap:var(--sp-8);
    grid-template-areas:"meta pic" "title pic" "body pic" "next pic"}
  .st-pic{align-self:start;margin-block:0 var(--size-story-offset)}
  .st-nopic .st-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"meta" "title" "body" "next"}
}
/* reduced motion: the finished state, whatever the script did */
@media (prefers-reduced-motion: reduce){
  .st-fill{transform:none!important}
  .st-line .stn .st-mark{background:var(--accent)!important;border-color:var(--accent)!important}
  .st-line .stn .st-pic::before{background:var(--accent)!important}
  .st-line .st-card{opacity:1!important;transform:none!important}
}

@media (prefers-reduced-motion: no-preference) {
  html{scroll-behavior:smooth}
  .tool,.btn,.pages a,.secbar .nl,#footer a,.qa summary,.course h3 .cover,.menu summary{
    transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
  .ccard{transition:transform .15s ease-out,border-color .15s ease-out}
  .chat{transition:transform .15s ease-out}

  /* The story: the marker (and its number) and the square behind the photo
     change colour as the fill passes; each card fades and rises 16px once.
     The fill itself follows the scroll with no transition. */
  .st-mark,.st-pic::before{transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
  .st-card{transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
  /* a station's photos crossfade; the dots follow */
  .st-img{transition:opacity var(--dur-base) var(--ease)}
  .st-dot{transition:background-color var(--dur-base) var(--ease)}

  /* The hero plays once, when the page loads: eyebrow, big word and headline
     fade in and rise 14px, 120ms apart; then the underline draws from the start
     edge (right in Arabic, left in English), from 450ms, over 800ms. site.js
     adds .hero-done a moment after the first render so a language switch does
     not replay it. */
  @keyframes rise14{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes draw{from{background-size:0 .12em}to{background-size:100% .12em}}
  html:not(.hero-done) .hero .kicker{animation:rise14 .6s cubic-bezier(.2,.7,.2,1) 0ms both}
  html:not(.hero-done) .hero h1{animation:rise14 .6s cubic-bezier(.2,.7,.2,1) 240ms both}
  html:not(.hero-done) .hero:not(.hero-e) h1 .hot{animation:draw .8s ease-out 450ms both}
}

/* ---- Yazan Core: icons ---- */
/* the theme button shows the moon in light mode and the sun in dark mode */
:root[data-theme="dark"] #themeBtn .i-moon{display:none}
:root:not([data-theme="dark"]) #themeBtn .i-sun{display:none}
.wa svg{width:24px;height:24px}
.chat-x svg{width:24px;height:24px}

/* ---- Yazan Core type: steps, not fluid sizes ----
   Display 48 and headline 32 are web-only steps, so the big headings change once
   (at 900px, the hero at 1024px) instead of growing with the viewport. Titles are
   1.3 in Latin and 1.6 in Arabic, whose marks reach above and below the line. The
   hero has no big word any more, so there is no fluid size left. */
@media (min-width:900px){
  .stat b,.cta .big2,.lost h1,.herolite h1,.chead h1{font-size:var(--fs-display-1)}
  .price .p-val,.course.feat h3{font-size:var(--fs-display-2)}
}
@media (min-width:1024px){.hero h1{font-size:var(--fs-display-1)}}
html[lang="ar"] :is(h1,h2,h3,.big2,.stat b,.p-val,.q-result,.f-name,.c-price b,.s-price b){line-height:var(--lh-heading)}