/* Klaro landing: tokens, base, type, buttons and the small kit the market still uses.
   site.css builds every site component on top of this file. Light only, as the app.
   Logical properties only, so Arabic mirrors by itself. Plan: design/brief/redesign.md §5.

   Two token groups live in :root:
   1. App tokens: the app's own (klaro-beta-v2 apps/web/src/styles/tokens.css). /market/ and any
      piece that shows the app's own controls use them. Change them only when the app changes.
   2. Site tokens: the redesign (§5): colour roles, the type scale, spacing, radii, the sticky top.
      New components use only these, plus the purple and gold. */
:root {
  color-scheme: light;

  /* 1. App tokens */
  --page: #f3f3f1; --card: #ffffff; --surface: #f8f8f6;
  --ink: #171717; --ink-soft: #66665f; --muted: #6b6a6f; --faint: #9a9a94;
  --border: #ecece8; --border-strong: #deded9;
  --purple: #9254e0; --purple-dark: #7538bb; --purple-soft: #f1e8fb; --purple-tint: #faf8fd; --purple-line: #cfc6df;
  --yellow: #f0c93d; --gold-deep: #a17a0a; --gold-soft: #fff4d0;
  --teal: #5b8e84; --teal-dark: #3f6b62; --teal-soft: #e9f2ef;
  --amber: #d49e37; --amber-soft: #fcf1dc;
  --success: #32724f; --success-soft: #eaf5ed; --success-line: #b9dfc8;
  --warn: #856011; --warn-soft: #fff8de;
  --info: #536a7c; --info-soft: #edf2f4;
  --r-pill: 999px; --r-large: 24px; --r-card: 20px; --r-control: 12px; --r-button: 9px;
  --shadow-panel: 0 8px 22px rgb(23 23 23 / .043);
  --shadow-popover: 0 8px 24px rgb(0 0 0 / .078);
  --shadow-lift: 0 22px 44px -12px rgb(23 23 23 / .18), 0 5px 14px -6px rgb(23 23 23 / .12);
  --shadow-segment: 0 1px 4px rgb(28 24 38 / .09);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-settle: cubic-bezier(.22, 1.12, .36, 1);
  --font: "Manrope", "Readex Pro", ui-sans-serif, system-ui, sans-serif;

  /* 2. Site tokens (redesign §5) */
  /* Colour roles. One action colour (purple), gold only for the H1 underline and the spark, one
     deep panel per page, at most one pale band card per page. No gradients, no glows.
     (2026-10-12: site.css, "Hierarchy, bands and the beta marks", adds the softer copy colour, the
     heading ink, fluid type steps, eyebrows and alternating full-width section bands on top of these.) */
  --text: #45443f;            /* leads and body copy: darker than the app's grey, a printed feel */
  --line: #dcdcd6;            /* hairline on cards, visible on the off-white page */
  --gold: #f0c93d;
  --deep: #2e1758;            /* the one deep panel per page */
  --on-deep: rgb(255 255 255 / .74);
  --band: #efe6fb;            /* the one flat pale band per page */
  --chip: #e9e8e3;            /* grey chips and the audience switch */
  --chip-muted: #5f5e63;      /* quiet words on a chip: 5.2:1 on --chip (--muted is 4.4:1, under AA) */
  --paper: #efeeea;           /* the illustrations' paper; also behind them while they load */
  --plate: #ddd0f2;           /* a scene plate before its illustration exists */
  --ph: #e6e5e0;              /* placeholder boxes */

  /* Type scale (Manrope; Arabic falls through to Readex Pro). Headings 600, body 400,
     nav 500, buttons 600. Sentence case everywhere: no uppercase anywhere on the site. */
  --fs-h1: clamp(44px, 5.2vw, 76px);
  --fs-h1-split: clamp(44px, 4vw, 60px);   /* an H1 in a two-column hero (5/12 copy column) */
  --fs-h2: clamp(34px, 4vw, 56px);
  --fs-h3: clamp(22px, 2.2vw, 30px);
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-nav: 15px;
  --tr-display: -.03em;       /* H1, H2 */
  --tr-title: -.02em;         /* H3, card titles */

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 40px; --s-8: 56px; --s-9: 80px; --s-10: 112px;
  --container: 1200px;
  --gutter: 40px;             /* 16 on phones */
  --section: 112px;           /* section padding; 72 on phones */
  --head-gap: 56px;           /* heading block to its content */

  /* Radius scale (SchoolAI-like large radii) */
  --radius-panel: 96px;       /* the deep panel; 40 on phones */
  --radius-card: 40px;        /* cards, bands; 28 on phones */
  --radius-media: 28px;       /* media inside cards, plates; 20 on phones */
  --radius-tile: 28px;        /* illustration tiles */
  --radius-frame: 16px;       /* the browser frame */

  /* Header and sticky things */
  --header-h: 64px;
  --sticky-top: 88px;         /* stacked cards, step lists, the opening's stage */
  --shadow-device: 0 30px 60px -20px rgb(30 12 60 / .45);
  --shadow-float: 0 24px 48px -24px rgb(30 12 60 / .28);

  --k-dir: 1;                 /* -1 in right-to-left pages: horizontal motion mirrors */
}
[dir="rtl"] { --k-dir: -1; }
@media (max-width: 640px) {
  :root {
    --fs-h1: 44px; --fs-h1-split: 40px; --fs-h2: 34px; --fs-h3: 22px; --fs-lead: 18px; --fs-body: 16px;
    --gutter: 16px; --section: 72px; --head-gap: 40px;
    --radius-panel: 40px; --radius-card: 28px; --radius-media: 20px; --radius-tile: 20px;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; overflow-x: clip; background: var(--page); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { max-width: 100%; }
img, video { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: min(calc(var(--container) + 2 * var(--gutter)), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.i { flex-shrink: 0; width: 1.125em; height: 1.125em; }
[dir="rtl"] .flip { transform: scaleX(-1); }   /* SVG arrows only; a text › mirrors by itself */

/* ---------- Type ---------- */
.h1, .display { font-size: var(--fs-h1); font-weight: 600; line-height: 1.06; letter-spacing: var(--tr-display); text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: var(--tr-display); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: var(--tr-title); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.005em; color: var(--text); max-width: 34em; text-wrap: pretty; }
.text { color: var(--text); }
.small { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.card-title { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: var(--tr-title); }

/* The H1's one gold underline, hand drawn, ending in the Klaro spark. One per page, on one or two
   words of the H1: <h1 class="h1">Spend your time <span class="uline">teaching</span>. …</h1>
   It draws in once on load (site.css, Motion). Arabic: lower and thicker, spark on the left. */
.uline { position: relative; z-index: 0; white-space: nowrap; }   /* inline, so punctuation after it never wraps away */
.uline::after { content: ""; position: absolute; z-index: -1; inset-inline: -.04em -.02em; inset-block-end: .06em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath fill='%23f0c93d' d='M2.4 10.6C34 7.6 82 5.4 128 4.7c24-.4 46-.6 68.2-1.6 2.2-.1 2.6 3.1.4 3.6C172 8.4 120 9.3 78 10.7 52 11.6 26 13.2 4.2 14.6 1.2 14.8.2 10.9 2.4 10.6Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.uline::before { content: ""; position: absolute; z-index: 1; inset-inline-end: -.3em; inset-block-end: 0; width: .26em; height: .26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='112.56 0 103.11 103.11'%3E%3Cpath fill='%23f0c93d' d='M215.67 51.56C203.93 55.66 189.46 58.46 180.24 67.68C171.02 76.9 168.22 91.37 164.12 103.11C160.02 91.37 157.21 76.9 147.99 67.68C138.77 58.46 124.3 55.66 112.56 51.56C124.3 47.46 138.77 44.65 147.99 35.43C157.21 26.21 160.02 11.74 164.12 0C168.22 11.74 171.02 26.21 180.24 35.43C189.46 44.65 203.93 47.46 215.67 51.56Z'/%3E%3C/svg%3E") no-repeat center / contain; }
[dir="rtl"] .uline::after {                     /* the same stroke, mirrored: it rises towards its end, on the left */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath transform='matrix(-1 0 0 1 200 0)' fill='%23f0c93d' d='M2.4 10.6C34 7.6 82 5.4 128 4.7c24-.4 46-.6 68.2-1.6 2.2-.1 2.6 3.1.4 3.6C172 8.4 120 9.3 78 10.7 52 11.6 26 13.2 4.2 14.6 1.2 14.8.2 10.9 2.4 10.6Z'/%3E%3C/svg%3E"); }
.uline:lang(ar)::after { inset-block-end: -.14em; height: .24em; }
.uline:lang(ar)::before { inset-block-end: -.18em; }

/* ---------- Buttons: pills, one language (§5.4) ----------
   .btn-primary   purple; one per view ("Start your course", "Try it free")
   .btn-secondary white with a hairline ("Try it yourself", "Join code")
   .btn-soft      soft purple ("Sign in")
   .btn-on-deep   white on the deep panel
   Sizes: .btn-lg 52px, default 44px, .btn-sm 36px (header). .btn-block fills its row. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding-inline: 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; font: 600 16px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color .15s var(--ease-out), background-color .15s var(--ease-out), border-color .15s var(--ease-out), scale .15s var(--ease-out); }
.btn:active { scale: .98; }
.btn .i { width: 18px; height: 18px; }
.btn-lg { height: 52px; padding-inline: 28px; font-size: 17px; }
.btn-sm { height: 36px; padding-inline: 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-dark); }
.btn-secondary { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--surface); border-color: var(--border-strong); }
.btn-soft { background: var(--purple-soft); color: var(--purple-dark); }
.btn-soft:hover { background: #e8dbf8; }
.btn-on-deep { background: #fff; color: var(--deep); }
.btn-on-deep:hover { background: var(--purple-soft); }
.btn:lang(ar) { padding-inline: 24px; }        /* Arabic labels run 10–15% longer */
.btn-lg:lang(ar) { padding-inline: 30px; }
.btn-sm:lang(ar) { padding-inline: 18px; }

/* A text link with an arrow: "Try it yourself", "Read the research". The arrow is the sprite's
   #i-arrow with .flip, so it points the right way in Arabic. */
.tlink { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1.3 var(--font); color: var(--purple-dark); text-decoration: none; }
.tlink:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tlink .i { width: 18px; height: 18px; transition: translate .2s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .tlink:is(:hover, :focus-visible) .i { translate: calc(3px * var(--k-dir)) 0; } }

/* ---------- The app's small kit, kept for /market/ (and the app's own pieces) ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding-inline: 8px; border-radius: var(--r-pill); font: 600 11px/1 var(--font); white-space: nowrap; }
.tag-purple { background: var(--purple-soft); color: var(--purple-dark); }
.tag-yellow { background: var(--warn-soft); color: var(--warn); }
.tag-green { background: var(--success-soft); color: var(--success); }
.tag-neutral { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); }
.tag-slate { background: var(--info-soft); color: var(--info); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.lift { transition: translate .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.lift:hover { translate: 0 -3px; border-color: var(--purple-line); box-shadow: var(--shadow-panel); }
.lift:focus-visible { border-color: var(--purple-line); }
.bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--purple); border-radius: inherit; }
/* Media card (market course cards): picture, scrim, eyebrow and title in white */
.media { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: var(--ink); }
.media .pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--purple-soft); }
.media .pic img { width: 100%; height: 100%; object-fit: cover; transition: scale .22s var(--ease-out); }
.media:hover .pic img { scale: 1.035; }
.media .scrim { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 44px 18px 14px; color: #fff; background: linear-gradient(to top, rgb(18 14 26 / .78), rgb(18 14 26 / .45) 55%, rgb(18 14 26 / 0)); }
.media .eyebrow { font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / .82); }
.media .title { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.media .corner { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; display: flex; gap: 6px; }
.media .figs { padding: 12px 18px 0; font-size: 12.5px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; font-variant-numeric: tabular-nums; }
.media .figs b { color: var(--ink); }
.media .foot { margin-top: auto; padding: 12px 18px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.media .chev { margin-inline-start: auto; color: var(--ink-soft); }
[dir="rtl"] .media .scrim bdi { text-align: right; }   /* an English course name on an Arabic card */
.course-content { direction: ltr; text-align: left; }  /* course material stays in its own language */

/* ---------- Arabic (Readex Pro): no tracking, no capitals, more leading ----------
   Tracking pulls joined Arabic letters apart, so no element in Arabic ever gets it; English blocks
   marked lang="en" keep theirs. Same sizes as English; H1/H2 600, H3 500 (§5.2, arabic.md §6). */
:lang(ar) { letter-spacing: 0 !important; }
body:lang(ar) { line-height: 1.75; }
:is(.h1, .display):lang(ar) { line-height: 1.3; }
.h2:lang(ar) { line-height: 1.35; }
:is(.h3, .card-title):lang(ar) { font-weight: 500; line-height: 1.45; }
.lead:lang(ar) { line-height: 1.75; }
:is(i, em):lang(ar) { font-style: normal; }    /* Arabic has no true italic */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}