/* ==========================================================================
   ATRIUM — the stylesheet
   ==========================================================================
   A courtyard, twice: limestone daylight (day) and ink-navy evening (night).
   One brass accent. Fraunces/Amiri carry display; Inter/IBM Plex Sans Arabic
   carry the interface. Layout uses logical properties throughout, so Arabic
   RTL is the `dir` attribute, not a second stylesheet.

   Sections:
     0 tokens          4 header & menus      8 features/founding
     1 base            5 search              9 contact · faq · prose
     2 utilities       6 home               10 insights · course · auth
     3 buttons/forms   7 footer & cta       11 app pages · veil · motion
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* day — limestone */
  --bg: #efece3;
  --bg2: #e6e2d4;
  --surface: #f8f6ef;
  --surface2: #fffdf7;
  --ink: #1a2438;
  --ink2: #4c566b;
  --faint: #6b7386;
  --line: rgba(26, 36, 56, .14);
  --line-soft: rgba(26, 36, 56, .08);
  --accent: #a0762b;
  --accent-strong: #855f1e;
  --accent-soft: rgba(160, 118, 43, .13);
  --brass-1: #c9a961;
  --brass-2: #ac8138;
  --brass-ink: #241a07;
  --ok: #567857;
  --err: #9c4f42;
  --btn-bg: #1a2438;
  --btn-ink: #f5f2e9;
  --foot-bg: #10182b;
  --foot-bg2: #16203a;
  --foot-ink: #ded9cb;
  --foot-faint: #9aa0b0;
  --foot-line: rgba(222, 217, 203, .14);
  --shadow-1: 0 1px 2px rgba(21, 30, 51, .05), 0 10px 30px -14px rgba(21, 30, 51, .18);
  --shadow-2: 0 2px 6px rgba(21, 30, 51, .07), 0 24px 60px -22px rgba(21, 30, 51, .28);
  --scrim: rgba(13, 18, 31, .5);

  --font-ui: "Inter", "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Amiri", Georgia, serif;

  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.6, .05, .25, 1);
  --e-pop: cubic-bezier(.3, 1.45, .4, 1);
  --d-fast: 170ms;
  --d-med: 280ms;
  --d-slow: 460ms;

  --hd-h: 76px;
  --rad: 18px;
  --rad-lg: 30px;
  --wrap: 1200px;
  --wrap-tight: 880px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0d1422;
  --bg2: #111a2c;
  --surface: #151f33;
  --surface2: #1a2540;
  --ink: #eae6da;
  --ink2: #b6b2a5;
  --faint: #91907f;
  --line: rgba(234, 230, 218, .15);
  --line-soft: rgba(234, 230, 218, .08);
  --accent: #c9a961;
  --accent-strong: #ddbe78;
  --accent-soft: rgba(201, 169, 97, .14);
  --brass-1: #d4b46c;
  --brass-2: #b08a3e;
  --brass-ink: #221806;
  --ok: #8fae8b;
  --err: #cd8577;
  --btn-bg: #eae6da;
  --btn-ink: #131c2f;
  --foot-bg: #0a101d;
  --foot-bg2: #101a2e;
  --foot-ink: #ded9cb;
  --foot-faint: #8f96a8;
  --foot-line: rgba(222, 217, 203, .12);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 70px -24px rgba(0, 0, 0, .7);
  --scrim: rgba(6, 10, 19, .55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0d1422;
    --bg2: #111a2c;
    --surface: #151f33;
    --surface2: #1a2540;
    --ink: #eae6da;
    --ink2: #b6b2a5;
    --faint: #91907f;
    --line: rgba(234, 230, 218, .15);
    --line-soft: rgba(234, 230, 218, .08);
    --accent: #c9a961;
    --accent-strong: #ddbe78;
    --accent-soft: rgba(201, 169, 97, .14);
    --brass-1: #d4b46c;
    --brass-2: #b08a3e;
    --brass-ink: #221806;
    --ok: #8fae8b;
    --err: #cd8577;
    --btn-bg: #eae6da;
    --btn-ink: #131c2f;
    --foot-bg: #0a101d;
    --foot-bg2: #101a2e;
    --foot-ink: #ded9cb;
    --foot-faint: #8f96a8;
    --foot-line: rgba(222, 217, 203, .12);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .55);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 70px -24px rgba(0, 0, 0, .7);
    --scrim: rgba(6, 10, 19, .55);
    color-scheme: dark;
  }
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--font-ui);
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--d-med) var(--e-io), color var(--d-med) var(--e-io);
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; font-weight: 620; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
p a, .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent-soft); color: var(--ink); }

.display {
  font-family: var(--font-display);
  font-weight: 560;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  line-height: 1.06;
}
.display em { font-style: italic; color: var(--accent); }
:lang(ar) .display, :lang(ar).display { letter-spacing: 0; line-height: 1.34; }

main { display: block; min-height: 52vh; padding-top: var(--hd-h); }
body[data-page="home"] main { padding-top: 0; }
main:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- utilities */

.skip {
  position: fixed; z-index: 300; top: 10px; inset-inline-start: 10px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  transform: translateY(-64px); transition: transform var(--d-fast) var(--e-out);
}
.skip:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.faint { color: var(--faint); }
.eyebrow {
  font-size: 12.5px; font-weight: 650; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
:lang(ar) .eyebrow { letter-spacing: .06em; }

.dirflip { transition: transform var(--d-fast) var(--e-out); }
[dir="rtl"] .dirflip { transform: scaleX(-1); }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--rad);
  box-shadow: var(--shadow-1);
}

.sec-head { max-width: 640px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-top: 10px; }
.sec-sub { margin-top: 14px; color: var(--ink2); font-size: 17px; }
.sec-row {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 550; color: var(--ink2);
  background: transparent; white-space: nowrap;
}
.chip.helped { color: var(--accent); border-color: transparent; background: var(--accent-soft); }
.chip.mine { color: var(--ok); border-color: currentColor; }
.chip.pending { color: var(--accent); border-style: dashed; }
a.chip { transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast); }
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.filter.on {
  background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg);
}
.chip .count { opacity: .65; font-size: 11px; }

.flash {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--wrap-tight); margin: 18px auto 0;
  padding: 13px 20px; border-radius: 14px;
  background: var(--accent-soft); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 14.5px;
}
.flash .ic { color: var(--accent); flex-shrink: 0; }

.notice { border-radius: 14px; padding: 16px 20px; font-size: 14.5px; }
.notice-nudge {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.notice-nudge .nudge-title { font-weight: 650; margin-bottom: 6px; }
.notice p + p { margin-top: 8px; }

/* ---------------------------------------------------------- buttons, forms */

.btn, button.primary, button.quiet, a.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 0 24px; height: 46px;
  border: 1px solid transparent; border-radius: 999px;
  font: 550 15px/1 var(--font-ui); letter-spacing: .01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-io),
              border-color var(--d-fast) var(--e-io),
              color var(--d-fast) var(--e-io);
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 80ms; }

.btn-primary, button.primary, a.button.primary {
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover, button.primary:hover { box-shadow: var(--shadow-2); transform: translateY(-1.5px); }

.btn-brass {
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: var(--brass-ink); font-weight: 620;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 252, 240, .35);
}
.btn-brass:hover { box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 252, 240, .45); }

.btn-quiet, button.quiet, a.button:not(.primary) {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover, button.quiet:hover { border-color: var(--accent); color: var(--accent); }
button.quiet.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-lg { height: 54px; padding-inline: 30px; font-size: 15.5px; }
.btn-sm, button.small, .primary.small, .quiet.small { height: 36px; padding-inline: 16px; font-size: 13.5px; }
.btn-block { width: 100%; }

.linkish, button.linkish {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 550 14.5px/1.4 var(--font-ui); color: var(--accent);
}
.linkish:hover { color: var(--accent-strong); }
.linkish .ic { transition: transform var(--d-fast) var(--e-out); }
.linkish:hover .ic { transform: translateX(3px); }
[dir="rtl"] .linkish:hover .ic { transform: translateX(-3px) scaleX(-1); }

button.faint.linkish { color: var(--faint); font-weight: 450; }
button.faint.linkish:hover { color: var(--err); }
.inline { display: inline-flex; }

.field { display: grid; gap: 7px; }
.field.grow { flex: 1; }
.field label, .field-label, .stack label, .f-group label {
  font-size: 13.5px; font-weight: 620; color: var(--ink2);
  letter-spacing: .02em;
}
.field-note { font-size: 13px; color: var(--faint); margin-top: 8px; }
.field-err { font-size: 13px; color: var(--err); font-weight: 500; }

.input, .stack input:not([type="radio"]):not([type="hidden"]),
.stack textarea, .stack select {
  width: 100%;
  padding: 13px 16px; border-radius: 13px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink); font: 400 15px/1.5 var(--font-ui);
  transition: border-color var(--d-fast) var(--e-io),
              box-shadow var(--d-fast) var(--e-io),
              background-color var(--d-fast) var(--e-io);
}
.input:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.input:focus, .stack :is(input, textarea, select):focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.input.invalid,
.touched:invalid { border-color: var(--err); }
textarea.input, .stack textarea { resize: vertical; min-height: 110px; }
.input-code { letter-spacing: .5em; font-variant-numeric: tabular-nums; text-align: center; }
select.input, .stack select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--faint) 50%, transparent 60%),
                    linear-gradient(135deg, transparent 49%, var(--faint) 50%, transparent 60%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 7px 7px;
  background-repeat: no-repeat;
  padding-inline-end: 40px;
}
[dir="rtl"] select.input, [dir="rtl"] .stack select {
  background-position: 20px 55%, 14px 55%;
}

output.count {
  font-size: 12.5px; color: var(--faint); justify-self: end;
  font-variant-numeric: tabular-nums;
}
output.count.near { color: var(--err); }

.form-row { display: flex; gap: 16px; }
.stack { display: grid; gap: 20px; max-width: 620px; margin-inline: auto; padding-block: 34px 60px; }
/* Below its own max-width the stack has no gutter, so every form page --
   the composer, the ask, the add form -- put its heading and its text
   flush against both screen edges on a phone. Bordered content made it
   obvious rather than causing it. 18px is the inset the account and
   section pages already use. */
@media (max-width: 640px) { .stack { padding-inline: 18px; } }
.stack.narrow { max-width: 460px; }
.stack h1 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 580; }
.stack .guide, .composer-course { color: var(--ink2); font-size: 15px; }
.composer-course .code { font-weight: 650; color: var(--accent); }
.prompt-q { font-size: 1.25rem; font-weight: 620; line-height: 1.35; }

.opts { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; cursor: pointer; user-select: none;
  transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
.opt:hover { border-color: var(--accent); }
.opt:has(input:checked), .opt.on {
  background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

fieldset.fact {
  border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 18px 20px 20px; margin: 0; background: var(--surface);
}
fieldset.fact legend {
  padding-inline: 8px; font-size: 14px; font-weight: 620; color: var(--ink2);
}
.stack-sm { display: grid; gap: 10px; }

/* ---------------------------------------------------------- header & menus */

header.site {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  height: var(--hd-h);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--d-med) var(--e-io),
              border-color var(--d-med) var(--e-io);
}
.hd-in {
  max-width: 1440px; height: 100%; margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
}
.hd-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hd-end { justify-content: flex-end; }
/* Last-resort guard against a future label outgrowing the row. It cannot
   be overflow:hidden on the track, because the Tools dropdown is an
   absolutely-positioned child of the nav and would be clipped the moment
   it opened. Instead the nav alone is allowed to compress, and each flat
   link clips its own text inside its pill -- so the overflow stays inside
   the header rather than painting across the wordmark. */
.hd-start > .hd-nav { flex-shrink: 1; min-width: 0; }
.nav-link { overflow: hidden; }
/* Header controls keep their size. Without this they are flex items in a
   column narrower than their content, and the browser resolves that by
   shrinking them -- which is how the search trigger became a 25px pill
   with a zero-width logo inside it, sitting on top of the wordmark. */
.hd-side > *, .hd-search > * { flex-shrink: 0; }

/* gap: the active item is a filled pill, and 2px left its edge almost
   touching the next label -- a short word like "FAQ" read as a circle
   pressed against its neighbour. Unfilled links tolerate a tight gap
   because they have no visible edge; a filled one needs room to be a
   shape rather than a collision. */
.hd-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  /* A pill 42px tall is a circle until it is wider than it is tall by a
     clear margin. min-width keeps "FAQ" a lozenge like every other item
     instead of a blob, and gives the row an even rhythm. */
  min-width: 64px; padding: 9px 11px; border-radius: 999px;
  font-size: 14.5px; font-weight: 530; color: var(--ink2);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-io), background-color var(--d-fast) var(--e-io);
}
.nav-link:hover { color: var(--ink); background: var(--line-soft); }
.nav-link[aria-current="page"] {
  color: var(--btn-ink); background: var(--btn-bg); font-weight: 570;
}

.hd-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); justify-self: center;
}
.hd-mark { color: var(--accent); flex-shrink: 0; }
.hd-word {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  letter-spacing: .01em;
}

.icon-btn, .menu-btn, .theme-btn, .hd-burger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink2); cursor: pointer;
  transition: color var(--d-fast) var(--e-io), background-color var(--d-fast) var(--e-io),
              border-color var(--d-fast) var(--e-io);
}
.icon-btn:hover, .menu-btn:hover, .theme-btn:hover, .hd-burger:hover {
  color: var(--ink); background: var(--line-soft);
}
.hd-burger, .f-toggle { display: none; }

.menu { position: relative; }
.menu-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 200px; padding: 8px; z-index: 210;
  /* The panel had no relationship to the viewport: on a narrow window a
     long item ran off the edge with no way to reach it, and on a short
     one the list had no way to scroll. */
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - var(--hd-h) - 24px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px) scale(.98);
  transform-origin: top; pointer-events: none;
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.menu:hover .menu-panel, .menu:focus-within .menu-panel,
.menu[data-open] .menu-panel {
  opacity: 1; transform: none; pointer-events: auto;
}
/* The 10px between the trigger and the panel belonged to neither of them,
   so a pointer travelling from one to the other left .menu:hover on the
   way down and the panel closed before it could be reached. The menu was
   only usable by clicking it open and clicking again -- by hover, which is
   how a pointer user opens a menu, it was unusable.

   This bridges that band. It cannot live on .menu-panel::before, because
   the panel scrolls its own overflow and would clip it; it hangs off .menu
   instead, and only exists while the menu is open so it never swallows a
   stray click. Wide enough to cover a diagonal move toward the far side of
   the panel, which is wider than its trigger. */
.menu::after { content: ""; display: none; }
.menu:hover::after, .menu:focus-within::after, .menu[data-open]::after {
  display: block; position: absolute; top: 100%;
  inset-inline: -210px; height: 12px;
}
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 13px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: 500 14px/1.3 var(--font-ui);
  cursor: pointer; text-align: start;
  transition: background-color var(--d-fast) var(--e-io);
}
.menu-item:hover { background: var(--accent-soft); }
.menu-item .ic { color: var(--faint); }
.menu-item[aria-current="true"] { color: var(--accent); font-weight: 620; }
.menu-form { display: contents; }
.menu-code {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px;
}
.lang-code { font-size: 13.5px; font-weight: 650; letter-spacing: .1em; }
.menu-chev { transition: transform var(--d-fast) var(--e-out); }
.menu:hover .menu-chev, .menu:focus-within .menu-chev { transform: rotate(180deg); }

.theme-btn { position: relative; width: 44px; }
.theme-btn .ic { position: absolute; transition: opacity var(--d-med) var(--e-out), transform var(--d-med) var(--e-out); }
.th-moon { opacity: 0; transform: rotate(-60deg) scale(.5); }
[data-theme="dark"] .th-moon { opacity: 1; transform: none; }
[data-theme="dark"] .th-sun { opacity: 0; transform: rotate(60deg) scale(.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .th-moon { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .th-sun { opacity: 0; transform: rotate(60deg) scale(.5); }
}

/* Header search trigger */
.hd-search {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 8px 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--faint); font-size: 13.5px;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  transition: border-color var(--d-fast) var(--e-io), color var(--d-fast) var(--e-io),
              opacity var(--d-med) var(--e-io), background-color var(--d-fast) var(--e-io);
}
[dir="rtl"] .hd-search { padding: 0 12px 0 8px; }
.hd-search:hover { border-color: var(--accent); color: var(--ink2); }
.hd-search-mark { color: var(--accent); }
.hd-search-ph {
  max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-search-ic { color: var(--faint); }

/* Transparent-over-hero state (home, top of page) */
body[data-page="home"] header.site:not(.scrolled) {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-page="home"] header.site:not(.scrolled) :is(.hd-word, .hd-brand) { color: #f2eee2; }
body[data-page="home"] header.site:not(.scrolled) .nav-link { color: rgba(242, 238, 226, .82); }
body[data-page="home"] header.site:not(.scrolled) .nav-link:hover {
  color: #fff; background: rgba(242, 238, 226, .14);
}
body[data-page="home"] header.site:not(.scrolled) .nav-menu .menu-btn {
  color: rgba(242, 238, 226, .82);
}
body[data-page="home"] header.site:not(.scrolled) .nav-menu .menu-btn:hover {
  color: #fff; background: rgba(242, 238, 226, .14);
}
body[data-page="home"] header.site:not(.scrolled) .nav-link[aria-current="page"],
body[data-page="home"] header.site:not(.scrolled) .nav-menu.on .menu-btn {
  color: #10182b; background: #f2eee2;
}
body[data-page="home"] header.site:not(.scrolled)
  :is(.menu-btn, .theme-btn, .hd-burger, .icon-btn) { color: rgba(242, 238, 226, .85); }
body[data-page="home"] header.site:not(.scrolled)
  :is(.menu-btn, .theme-btn, .hd-burger, .icon-btn):hover {
  color: #fff; background: rgba(242, 238, 226, .14);
}
body[data-page="home"] header.site:not(.scrolled) .hd-search {
  border-color: rgba(242, 238, 226, .35); color: rgba(242, 238, 226, .75);
  background: rgba(16, 24, 43, .25);
}
/* On home the trigger idles hidden until the hero search docks. */
html.js body[data-page="home"] .hd-search { opacity: 0; pointer-events: none; }
html.js body[data-page="home"] .hd-search.docked { opacity: 1; pointer-events: auto; }
html:not(.js) body[data-page="home"] .hd-search { opacity: 1; }

/* Mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 240; }
.sheet-scrim {
  position: absolute; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity var(--d-med) var(--e-io);
}
.sheet-panel {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
  width: min(340px, 86vw); padding: 18px 22px 28px;
  background: var(--bg); border-inline-end: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(calc(var(--flip, 1) * -102%));
  transition: transform var(--d-med) var(--e-out);
  overflow-y: auto;
}
[dir="rtl"] .sheet-panel { --flip: -1; }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-list { display: grid; }
.sheet-link {
  display: block; padding: 13px 12px; border-radius: 12px;
  font-size: 16.5px; font-weight: 550;
}
.sheet-link:hover { background: var(--accent-soft); color: var(--accent); }
.sheet-sep { height: 1px; background: var(--line-soft); margin: 12px 0; }
.sheet-foot {
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.sheet-lang {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink2); font-weight: 550;
  min-height: 44px;            /* a thumb target, not a text link */
}
.sheet-theme { background: none; border: 0; font: inherit; cursor: pointer; }
.sheet-theme:hover { color: var(--ink); }

.lockup { display: flex; align-items: center; gap: 12px; color: inherit; }
.lockup .mark { color: var(--accent); }
.lockup-words { display: grid; line-height: 1.15; }
.lockup-en { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.lockup-ar { font-family: var(--font-display); font-size: 14px; color: var(--faint); }

/* ------------------------------------------------------------------ search */

.sbar {
  display: flex; align-items: center; gap: 12px;
  padding-inline: 20px 8px;
  background: color-mix(in srgb, var(--surface2) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px; box-shadow: var(--shadow-2);
}
[dir="rtl"] .sbar { padding-inline: 20px 8px; }
.sbar-mark { color: var(--accent); flex-shrink: 0; }
.sbar-input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font: 450 17px/1.4 var(--font-ui); padding-block: 10px;
}
.sbar-input::placeholder { color: var(--faint); }
.sbar-input:focus { outline: none; }
.sbar-input::-webkit-search-cancel-button { display: none; }
.sbar-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: var(--brass-ink);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast);
}
.sbar-go:hover { transform: scale(1.05); box-shadow: var(--shadow-1); }
.sbar:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-2), 0 0 0 4px var(--accent-soft);
}

.sbar-hero { height: 74px; }
.sbar-hero .sbar-go { width: 54px; height: 54px; }
.sbar-page { height: 56px; box-shadow: var(--shadow-1); }
.sbar-page .sbar-go { width: 42px; height: 42px; }

.sbar-segs { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.seg { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 570; letter-spacing: .02em;
  color: var(--ink2); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: background-color var(--d-fast) var(--e-io), color var(--d-fast),
              border-color var(--d-fast);
}
.seg:hover span { border-color: var(--accent); }
.seg input:checked + span {
  background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg);
}
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero .sbar-segs .seg span {
  background: rgba(16, 24, 43, .38); color: rgba(242, 238, 226, .9);
  border-color: rgba(242, 238, 226, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero .sbar-segs .seg input:checked + span {
  background: #f2eee2; color: #10182b; border-color: #f2eee2;
}

.s-results {
  position: absolute; inset-inline: 0; top: calc(100% + 12px);
  max-height: 350px; overflow-y: auto; z-index: 60;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 22px; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.s-results.open { opacity: 1; transform: none; pointer-events: auto; }
.s-group {
  padding: 14px 18px 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.s-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 18px; cursor: pointer; color: var(--ink);
}
.s-item:hover, .s-item.act { background: var(--accent-soft); }
.s-item-code {
  font-size: 12.5px; font-weight: 650; color: var(--accent);
  min-width: 74px; direction: ltr; text-align: start;
}
.s-item-name { flex: 1; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-item-meta { font-size: 12px; color: var(--faint); white-space: nowrap; }
.s-empty { padding: 22px 20px; color: var(--faint); font-size: 14px; text-align: center; }
.s-foot { padding: 10px 18px 14px; border-top: 1px solid var(--line-soft); }

.sk-row { display: flex; gap: 13px; padding: 13px 18px; align-items: center; }
.sk-line, .sk-dot {
  border-radius: 8px; background: var(--line-soft);
  animation: skpulse 1.1s var(--e-io) infinite alternate;
}
.sk-dot { width: 52px; height: 14px; }
.sk-line { height: 14px; flex: 1; }
@keyframes skpulse { from { opacity: .55; } to { opacity: 1; } }

/* Search overlay panel (header trigger, non-home pages) */
.spanel { position: fixed; inset: 0; z-index: 230; }
.spanel-scrim {
  position: absolute; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity var(--d-med) var(--e-io);
}
.spanel-in {
  position: absolute; top: 0; inset-inline: 0;
  padding: calc(var(--hd-h) + 22px) clamp(16px, 4vw, 44px) 34px;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
  transform: translateY(-14px); opacity: 0;
  transition: transform var(--d-med) var(--e-out), opacity var(--d-med) var(--e-out);
}
.spanel.open .spanel-scrim { opacity: 1; }
.spanel.open .spanel-in { transform: none; opacity: 1; }
.spanel-in .sbar { max-width: 720px; margin-inline: auto; height: 62px; position: relative; }
.spanel-in .sbar-segs { max-width: 720px; margin-inline: auto; }
.spanel-in .s-results {
  position: relative; top: 0; max-width: 720px; margin: 14px auto 0;
  box-shadow: none; border-color: var(--line-soft);
}
.spanel-close { position: absolute; top: calc(var(--hd-h) - 60px); inset-inline-end: clamp(16px, 4vw, 44px); }

/* -------------------------------------------------------------------- home */

.hero { position: relative; }
.hero-frame {
  /* No overflow:hidden here. The frame is shorter than the search
     results panel on a short viewport, and clipping at this level cut
     the panel off mid-list. Only the media needs clipping, so the
     rounding moved down to the layers that actually paint. */
  position: relative;
  margin: clamp(8px, 1.4vw, 18px);
  border-radius: clamp(22px, 3vw, 36px);
  min-height: min(94svh, 980px);
  background: #10182b;
}
.hero-pic, .hero-pic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* the image is scaled 1.04 -> 1 on load, so it needs its own clip */
.hero-pic { overflow: hidden; border-radius: inherit; }
.hero-scrim { border-radius: inherit; }
.hero-pic img { transform: scale(1.04); animation: heroSettle 1.6s var(--e-out) forwards; }
@keyframes heroSettle { to { transform: scale(1); } }
.hero-scrim {
  position: absolute; inset: 0;
  /* Two layers doing different jobs. The radial pool sits behind the
     text column so the headline has something to be legible against;
     the linear wash keeps the top and bottom edges anchored. The old
     single gradient thinned to .10 across the middle — exactly the band
     the headline occupies — so cream type sat on sunlit marble. */
  background:
    radial-gradient(125% 100% at 50% 42%,
                    rgba(10, 15, 27, .76), rgba(10, 15, 27, .14) 80%),
    linear-gradient(180deg, rgba(10, 15, 27, .62), rgba(10, 15, 27, .42) 30%,
                    rgba(10, 15, 27, .46) 62%, rgba(10, 15, 27, .66) 92%);
}

/* the soft curves carving into the frame */
.scoop { position: absolute; background: var(--bg); z-index: 3;
  transition: background-color var(--d-med) var(--e-io); }
.scoop-bl { bottom: 0; inset-inline-start: 0; width: clamp(80px, 11vw, 170px); height: 44px; border-start-end-radius: 30px; }
.scoop-br { bottom: 0; inset-inline-end: 0; width: clamp(80px, 11vw, 170px); height: 44px; border-start-start-radius: 30px; }
.scoop-bl::after, .scoop-br::after {
  content: ""; position: absolute; top: -26px; width: 26px; height: 26px;
}
.scoop-bl::after {
  inset-inline-start: 0;
  background: radial-gradient(circle at 100% 0, transparent 25.5px, var(--bg) 26px);
}
.scoop-br::after {
  inset-inline-end: 0;
  background: radial-gradient(circle at 0 0, transparent 25.5px, var(--bg) 26px);
}
[dir="rtl"] .scoop-bl::after { background: radial-gradient(circle at 0 0, transparent 25.5px, var(--bg) 26px); }
[dir="rtl"] .scoop-br::after { background: radial-gradient(circle at 100% 0, transparent 25.5px, var(--bg) 26px); }

.hero-tab {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 4; height: 56px; padding: 12px 34px 0;
  background: var(--bg);
  border-start-start-radius: 30px; border-start-end-radius: 30px;
  transition: background-color var(--d-med) var(--e-io);
}
.hero-tab::before, .hero-tab::after {
  content: ""; position: absolute; bottom: 0; width: 26px; height: 26px;
}
.hero-tab::before {
  inset-inline-start: -26px;
  background: radial-gradient(circle at 0 0, transparent 25.5px, var(--bg) 26px);
}
.hero-tab::after {
  inset-inline-end: -26px;
  background: radial-gradient(circle at 100% 0, transparent 25.5px, var(--bg) 26px);
}
[dir="rtl"] .hero-tab::before { background: radial-gradient(circle at 100% 0, transparent 25.5px, var(--bg) 26px); }
[dir="rtl"] .hero-tab::after { background: radial-gradient(circle at 0 0, transparent 25.5px, var(--bg) 26px); }
.hero-cue {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 570; letter-spacing: .06em; color: var(--ink2);
}
.hero-cue .ic { animation: cueBob 2.2s var(--e-io) infinite; color: var(--accent); }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.hero-cue:hover { color: var(--accent); }

.hero-inner {
  /* Above .scoop (3) and .hero-tab (4). This element is a stacking
     context, so the search results' own z-index is resolved *inside* it
     — at 2 they were trapped under the scoops and the courtyard cue no
     matter how high they climbed. */
  position: relative; z-index: 5;
  min-height: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--hd-h) + 2.5vh) clamp(18px, 5vw, 60px)
           clamp(44px, 7vh, 96px);
}
.hero-eyebrow {
  color: #e3cf95;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(13, 19, 33, .58);
  border: 1px solid rgba(227, 207, 149, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-title {
  margin-top: clamp(10px, 2vh, 18px);
  /* vh in the middle term so a short window shrinks the display size
     instead of pushing the search field below the fold. */
  font-size: clamp(2.4rem, min(7.2vw, 8.4vh), 5.6rem);
  color: #f5f1e5; text-shadow: 0 2px 30px rgba(10, 15, 27, .45);
  /* 14ch broke "Know what you're" mid-phrase. 17ch lets each half of the
     headline hold its own line in both languages. */
  max-width: 17ch;
}
.hero-title em { color: #ddc27c; }
.hero-sub {
  margin-top: clamp(12px, 2.4vh, 22px); max-width: 590px;
  font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.7;
  /* full opacity: at .88 over a sunlit photo this was the least legible
     text on the page */
  color: #f2eee2; text-shadow: 0 1px 14px rgba(10, 15, 27, .7);
}

.hero-search {
  position: relative; width: min(660px, 94%);
  margin-top: clamp(18px, 4vh, 40px);
}
.hero-search .s-results { text-align: start; }

/* staged entrance for the hero stack */
html.js body[data-page="home"] :is(.hero-eyebrow, .hero-title, .hero-sub, .hero-search) {
  opacity: 0; transform: translateY(22px);
  animation: riseIn .8s var(--e-out) forwards;
}
html.js body[data-page="home"] .hero-title { animation-delay: .08s; }
html.js body[data-page="home"] .hero-sub { animation-delay: .18s; }
html.js body[data-page="home"] .hero-search { animation-delay: .3s; }
html.intro body[data-page="home"] :is(.hero-eyebrow, .hero-title, .hero-sub, .hero-search) {
  animation-delay: 1.5s;
}
html.intro body[data-page="home"] .hero-title { animation-delay: 1.58s; }
html.intro body[data-page="home"] .hero-sub { animation-delay: 1.68s; }
html.intro body[data-page="home"] .hero-search { animation-delay: 1.8s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* sections */
.how, .trending, .trust, .fnd-stats, .feat-grid-wrap, .insights, .contact,
.faq, .prose, .fnd-join, .acct {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(56px, 8.5vw, 110px) clamp(18px, 4vw, 44px) 0;
}
.trust { padding-bottom: clamp(56px, 8.5vw, 96px); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); margin-top: 48px; }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.step::before {
  content: ""; position: absolute; top: -1px; inset-inline-start: 0;
  width: 52px; height: 2px; background: var(--accent);
}
.step-n {
  font-family: var(--font-display); font-style: italic; font-weight: 480;
  font-size: 2.6rem; color: var(--accent); line-height: 1;
}
.step-t { margin-top: 14px; font-size: 1.2rem; }
.step-b { margin-top: 10px; color: var(--ink2); font-size: 15px; }

.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(330px, 80vw);
  gap: 18px; margin-top: 40px;
  overflow-x: auto; padding: 6px 6px 22px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rail > * { scroll-snap-align: start; }

.trust-in {
  background: var(--foot-bg);
  color: var(--foot-ink);
  border-radius: var(--rad-lg);
  padding: clamp(44px, 6vw, 84px) clamp(24px, 6vw, 90px);
  text-align: center;
  position: relative; overflow: hidden;
}
.trust-in::before {
  content: ""; position: absolute; inset: -40% -20% auto;
  height: 70%; pointer-events: none;
  background: radial-gradient(50% 90% at 50% 0%, rgba(201, 169, 97, .16), transparent 70%);
}
.trust-badge {
  width: 64px; height: 64px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 999px; color: var(--brass-1);
  border: 1px solid rgba(201, 169, 97, .4);
  background: rgba(201, 169, 97, .08);
}
.trust-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 12px; color: #f2eee2; }
.trust-body { max-width: 640px; margin: 18px auto 0; color: var(--foot-faint); font-size: 16px; }
.trust-list {
  max-width: 560px; margin: 30px auto 0; display: grid; gap: 13px; text-align: start;
}
.trust-list li { display: flex; gap: 12px; align-items: start; font-size: 15px; color: var(--foot-ink); }
.trust-list .ic { color: var(--brass-1); flex-shrink: 0; margin-top: 3px; }

/* --------------------------------------------- the founding hundred (home)
   Ported from the waitlist site. Namespaced fnd-* because .founding already
   belongs to the meter block on /features. Colours come from this site's
   tokens, not the waitlist's, so the section matches its neighbours. */
.fnd { padding-bottom: clamp(56px, 8.5vw, 96px); }
.fnd-in {
  position: relative; overflow: hidden;
  background: var(--foot-bg); color: var(--foot-ink);
  border-radius: var(--rad-lg); padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-2);
}
.fnd-in::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 82% 8%, rgba(201, 169, 97, .17), transparent 62%);
}
.fnd-in > * { position: relative; }
.fnd-in .eyebrow { color: var(--brass-1); }
.fnd-title { font-size: clamp(1.6rem, 3vw, 2.3rem); color: #f2eee2; margin-bottom: 10px; }
.fnd-lede { color: var(--foot-faint); font-size: 15px; line-height: 1.6; max-width: 54ch; }

.fnd-offer { display: grid; gap: clamp(16px, 2vw, 26px); margin: 24px 0; }
@media (min-width: 900px) {
  .fnd-offer { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
}
.fnd-promise {
  padding: clamp(16px, 2vw, 22px); border-radius: var(--rad);
  background: rgba(201, 169, 97, .09); border: 1px solid rgba(201, 169, 97, .32);
}
.fnd-promise-k {
  font-size: 12px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass-1); margin-bottom: 8px;
}
.fnd-promise-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.14;
  letter-spacing: -.015em; color: var(--brass-1); margin-bottom: 11px;
}
.fnd-promise-body { color: var(--foot-ink); font-size: 14.5px; line-height: 1.55; }

.fnd-cardwrap { display: grid; gap: 10px; justify-items: center; align-content: center; }
.fcard {
  position: relative; overflow: hidden;
  width: min(100%, 250px); aspect-ratio: 1.586 / 1;
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(152deg, #1c2740 0%, #131b2e 48%, #0b1120 100%);
  border: 1px solid rgba(201, 169, 97, .38);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), 0 2px 5px rgba(0, 0, 0, .35);
  transform: rotate(-2.2deg); transition: transform var(--d-slow) var(--e-out);
}
.fcard:hover { transform: rotate(0) translateY(-3px); }
.fcard-sheen {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(74deg, transparent 42%, rgba(212, 180, 108, .16) 50%, transparent 58%);
  animation: cardGlint 7s var(--e-out) infinite;
}
.fcard > :not(.fcard-sheen) { position: relative; }
.fcard-top { display: flex; align-items: center; gap: 8px; }
.fcard-top .ic { color: var(--brass-1); flex-shrink: 0; }
.fcard-name {
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
  color: #f2eee2; letter-spacing: -.01em;
}
.fcard-dot { color: var(--brass-1); margin-inline: 3px; }
.fcard-mid { display: grid; gap: 4px; }
.fcard-role {
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(222, 217, 203, .78);
}
.fcard-numline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fcard-no {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.6rem; font-weight: 700; color: var(--brass-1);
}
.fcard-of {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  color: rgba(234, 230, 218, .82); padding: 2px 7px;
  border: 1px solid rgba(201, 169, 97, .5); border-radius: 999px; white-space: nowrap;
}
.fcard-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(222, 217, 203, .5);
}
.fnd-card-note {
  font-size: 13px; line-height: 1.5; color: var(--foot-faint);
  text-align: center; max-width: 34ch;
}

.fnd-perks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
@media (min-width: 860px) {
  .fnd-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
}
.fnd-perks li {
  display: flex; gap: 11px; align-items: start;
  font-size: 14.5px; line-height: 1.55; color: var(--foot-ink);
}
.fnd-perks .ic { color: var(--brass-1); flex-shrink: 0; margin-top: 4px; }
.fnd-perks b { color: #fff; font-weight: 600; }

.fnd-foot { display: grid; gap: 18px; align-items: center; }
@media (min-width: 780px) { .fnd-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; } }
.fnd-seats { display: grid; grid-template-columns: repeat(50, 1fr); gap: 2px; margin-bottom: 10px; }
.seat {
  height: 20px; border-radius: 2px;
  background: rgba(222, 217, 203, .07); border: 1px solid rgba(222, 217, 203, .17);
  transition: background var(--d-med) var(--e-out), border-color var(--d-med);
}
.seat.taken { background: linear-gradient(155deg, var(--brass-1), var(--brass-2)); border-color: transparent; }
.seat.next {
  border-color: var(--brass-1); background: rgba(201, 169, 97, .2);
  animation: seatPulse 2.4s var(--e-out) infinite;
}
@media (max-width: 700px) {
  .fnd-seats { grid-template-columns: repeat(25, 1fr); }
  .seat { height: 18px; }
}
.fnd-legend {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--foot-faint);
}
.fnd-n {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.25rem; font-weight: 600; color: var(--brass-1); letter-spacing: -.02em;
}
.fnd-n span { color: var(--foot-faint); font-size: 15px; font-weight: 400; }

/* Arabic sets its own case and tracking; the Latin uppercase treatment
   does not apply to it. */
:lang(ar) .fnd-promise-k,
:lang(ar) .fcard-role,
:lang(ar) .fcard-foot { text-transform: none; letter-spacing: normal; }
:lang(ar) .fcard-role { font-size: 12px; }
:lang(ar) .fcard-foot { font-size: 12px; }
:lang(ar) .fcard-of { letter-spacing: normal; font-size: 13.5px; }

@keyframes cardGlint { 0%, 62% { transform: translateX(-38%); } 92%, 100% { transform: translateX(38%); } }
@keyframes seatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, .5); }
  55% { box-shadow: 0 0 0 5px rgba(201, 169, 97, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fcard { transform: none; transition: none; }
  .fcard-sheen, .seat.next { animation: none; }
  .seat { transition: none; }
}

/* ------------------------------------------------------------ footer & cta */

.cta {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(64px, 9vw, 120px) clamp(18px, 4vw, 44px);
  text-align: center;
}
.cta-title { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.cta-sub { margin: 16px auto 30px; color: var(--ink2); font-size: 17px; }

.site-foot {
  background: var(--foot-bg); color: var(--foot-ink);
  border-top: 1px solid var(--foot-line);
}
.ft-in { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 44px) 30px; }
.ft-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: clamp(28px, 5vw, 80px); }
.ft-brand .ft-tag { margin-top: 16px; color: var(--foot-faint); font-size: 14.5px; max-width: 300px; }
.ft-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ft-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--foot-faint); margin-bottom: 16px;
}
:lang(ar) .ft-label { letter-spacing: .05em; }
.ft-links { display: grid; gap: 10px; }
.ft-links a { color: var(--foot-ink); font-size: 14.5px; opacity: .85;
  transition: opacity var(--d-fast), color var(--d-fast); }
.ft-links a:hover { opacity: 1; color: var(--brass-1); }

/* Footer invitation. This was an email capture while the waitlist ran;
   the platform is open now, so it is a link into signup instead. */
.ft-join {
  margin-top: clamp(36px, 5vw, 60px);
  padding: 26px clamp(20px, 3vw, 34px);
  background: var(--foot-bg2); border: 1px solid var(--foot-line);
  border-radius: 20px;
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.ft-join-copy { display: grid; gap: 4px; }
.ft-join-copy strong { font-size: 16.5px; color: #f2eee2; }
.ft-join-copy span { font-size: 13.5px; color: var(--foot-faint); }

.ft-bottom {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--foot-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.ft-copy { color: var(--foot-faint); font-size: 13px; }
.ft-note { color: var(--foot-faint); font-size: 12.5px; opacity: .8; flex-basis: 100%; order: 3; }
.ft-meta { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.ft-social { display: flex; gap: 6px; }
.ft-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; color: var(--foot-faint);
  border: 1px solid transparent;
  transition: color var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.ft-social a:hover { color: var(--brass-1); border-color: var(--foot-line); transform: translateY(-2px); }
.ft-lang { display: inline-flex; align-items: center; gap: 7px; color: var(--foot-faint); font-size: 13px; }

.site-foot-min .ft-in { padding-block: 26px; }

/* ------------------------------------------------------- features/founding */

.feat-hero {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) clamp(18px, 4vw, 44px) 0;
  text-align: center;
}
.feat-title { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 17ch; margin: 16px auto 0; }
.feat-sub { max-width: 620px; margin: 22px auto 0; color: var(--ink2); font-size: 17px; }

.fnd-stats {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-top: clamp(44px, 6vw, 72px);
}
.fnd-counter { text-align: center; }
.fnd-count {
  display: block; font-size: clamp(4.4rem, 9vw, 7rem);
  color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fnd-count-label { display: block; margin-top: 10px; color: var(--ink2); font-size: 15.5px; }

.founding { padding: 30px clamp(22px, 3vw, 36px); }
.founding-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.founding-head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 580; }
.founding-pct { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.meter {
  height: 10px; margin-top: 18px; border-radius: 999px;
  background: var(--line-soft); overflow: hidden;
}
.meter-fill {
  height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brass-2), var(--brass-1));
  transform-origin: left; transition: width 1.1s var(--e-out);
}
[dir="rtl"] .meter-fill { transform-origin: right; }
html:not(.js) .meter-fill { width: calc(var(--pct, 0) * 1%); }
.founding-nums {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 12px; font-size: 14px; color: var(--ink2);
}
.founding-nums strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.founding-sub { margin-top: 16px; font-size: 13.5px; color: var(--faint); }

.feat-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 22px; margin-top: 46px;
}
.feat-card { overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--d-med) var(--e-out), box-shadow var(--d-med) var(--e-out),
              border-color var(--d-med); }
.feat-card:nth-child(-n+3) { grid-column: span 2; }
.feat-card:nth-child(n+4) { grid-column: span 3; }
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-soft)); }
.feat-card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.feat-card-img img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--e-out); }
.feat-card:hover .feat-card-img img { transform: scale(1.045); }
.feat-card-body { padding: 22px 24px 26px; }
.feat-card-body h3 { font-size: 1.15rem; }
.feat-card-body p { margin-top: 9px; color: var(--ink2); font-size: 14.5px; }

/* Tools dropdown in the primary nav. .menu/.menu-panel do the work; this
   just makes the trigger sit like the flat nav links beside it. */
/* Tools is a nav item that happens to open a menu, so it wears what the
   others wear: same height, same min-width, same pill when its page is
   open. It used to mark itself active with a colour change alone, which
   read as a different kind of state sitting in the middle of the row. */
.nav-menu .menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  min-width: 64px; height: 42px; padding: 9px 11px; border-radius: 999px;
  font: inherit; font-size: 14.5px; font-weight: 530; color: var(--ink2);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-io),
              background-color var(--d-fast) var(--e-io);
}
.nav-menu .menu-btn:hover { color: var(--ink); background: var(--line-soft); }
.nav-menu.on .menu-btn {
  color: var(--btn-ink); background: var(--btn-bg); font-weight: 570;
}
.nav-menu .menu-panel { inset-inline-start: 0; inset-inline-end: auto; }
.nav-chev { transition: transform var(--d-fast) var(--e-out); }
.nav-menu[data-open] .nav-chev, .nav-menu:hover .nav-chev { transform: rotate(180deg); }

.soon-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.fnd-join { padding-bottom: 0; }
.fnd-join-in { padding: clamp(34px, 5vw, 60px) clamp(22px, 5vw, 70px); text-align: center; }
.fnd-join h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.fnd-join-sub { max-width: 520px; margin: 14px auto 26px; color: var(--ink2); font-size: 15.5px; }
@keyframes badgePop {
  0% { opacity: 0; transform: scale(.86) translateY(10px); }
  100% { opacity: 1; transform: none; }
}

/* --------------------------------------------------- contact · faq · prose */

.contact-grid {
  display: grid; grid-template-columns: 330px 1fr;
  gap: 26px; margin-top: 44px; align-items: start;
}
.contact-panel { padding: 28px 26px; display: grid; gap: 24px; }
.cp-item h3 { font-size: 14px; color: var(--faint); font-weight: 620;
  letter-spacing: .04em; margin-bottom: 5px; }
.cp-item p { font-size: 14.5px; color: var(--ink2); }
.contact-main { padding: clamp(24px, 3.4vw, 40px); }
.contact-form { display: grid; gap: 20px; }
.chip-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip-opt span {
  display: inline-flex; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 14px; font-weight: 530;
  color: var(--ink2); cursor: pointer;
  transition: background-color var(--d-fast) var(--e-io), color var(--d-fast),
              border-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.chip-opt:hover span { border-color: var(--accent); color: var(--accent); }
.chip-opt input:checked + span {
  background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink);
}
.chip-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-form .btn { justify-self: start; }
.contact-form.busy .btn { opacity: .7; pointer-events: none; }

.contact-done { text-align: center; padding: clamp(20px, 4vw, 40px); display: grid; gap: 14px; justify-items: center; }
.done-ring {
  width: 76px; height: 76px; border-radius: 999px;
  display: grid; place-items: center; color: var(--ok);
  border: 2px solid color-mix(in srgb, var(--ok) 55%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  animation: badgePop .6s var(--e-pop) both;
}
.contact-done h2 { font-size: 2rem; }
.contact-done p { color: var(--ink2); max-width: 46ch; }

.faq-tools { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 40px; }
.faq-search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.faq-search .input { padding-inline-start: 46px; border-radius: 999px; }
.faq-search-ic {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-start: 16px; color: var(--faint); pointer-events: none;
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  font: 550 13.5px/1 var(--font-ui); color: var(--ink2);
  transition: background-color var(--d-fast) var(--e-io), color var(--d-fast), border-color var(--d-fast);
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }

.faq-groups { margin-top: 34px; display: grid; gap: 40px; }
.faq-cat { font-family: var(--font-display); font-weight: 580; font-size: 1.35rem; margin-bottom: 16px; }
.acc-list { display: grid; gap: 12px; }
.acc {
  border: 1px solid var(--line-soft); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: border-color var(--d-fast);
}
.acc[open], .acc:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft)); }
.acc-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 570;
}
.acc-q::-webkit-details-marker { display: none; }
.acc-chev { flex-shrink: 0; color: var(--faint); transition: transform var(--d-med) var(--e-out), color var(--d-fast); }
.acc[open] .acc-chev { transform: rotate(180deg); color: var(--accent); }
.acc-body { overflow: hidden; }
.acc-in { padding: 0 22px 20px; color: var(--ink2); font-size: 15px; line-height: 1.75; max-width: 75ch; }
.faq-empty { margin-top: 30px; color: var(--faint); }

.faq-more {
  margin-top: 54px; padding: clamp(26px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.faq-more h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.faq-more p { margin-top: 8px; color: var(--ink2); }

.prose { max-width: 760px; padding-bottom: 20px; }
.prose h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: 28px; }
.prose p { margin-bottom: 18px; font-size: 16.5px; line-height: 1.8; color: var(--ink2); }
.prose p:first-of-type { font-size: 18.5px; color: var(--ink); }
/* Sectioned prose (founding terms). The flat pages never needed these. */
.prose h2 { font-size: 1.22rem; margin: 40px 0 12px; color: var(--ink); }
.prose ul { padding-inline-start: 20px; margin-bottom: 18px; }
.prose li {
  margin-bottom: 10px; font-size: 16.5px; line-height: 1.8; color: var(--ink2);
}
.prose li strong { color: var(--ink); }
.prose-meta {
  display: block; margin-top: 48px; font-size: 13.5px; color: var(--faint);
  line-height: 1.7;
}

/* ------------------------------------------------ insights · course · auth */

.i-tools { display: flex; gap: 14px; margin-top: 38px; align-items: center; }
/* min-width: 0, because a flex item defaults to min-width: auto and will
   not shrink below the intrinsic width of its content. The search input
   inside this bar has one, so on a phone the bar stayed 339px wide inside
   a 303px row and pushed the Filters button 135px off the side of the
   screen, where the only way to reach it was to zoom out. */
.i-tools .sbar-page { flex: 1; min-width: 0; max-width: 620px; position: relative; }
.i-tools .sbar-input { min-width: 0; }
.f-toggle { flex-shrink: 0; }

.i-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px); margin-top: 30px; align-items: start;
}
/* A sticky element does not scroll once it is stuck, so anything taller
   than the room under the header cannot be reached at all. The panel is
   short enough now that this never engages on a real desktop; it stays as
   a floor so the unreachable tail cannot come back on a very short window,
   and overflow-y: auto shows no scrollbar until it would actually be
   needed. */
.i-side {
  position: sticky; top: calc(var(--hd-h) + 18px);
  max-height: calc(100vh - var(--hd-h) - 42px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Two columns, because the four filters were 316px of a 556px panel and
   that is what pushed the Apply row past the fold on a short screen. Side
   by side they cost 158px instead, which takes the whole panel to about
   350px and leaves it fully visible without scrolling anything. The
   segmented control and the actions row span both columns. */
.f-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 20px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--rad); box-shadow: var(--shadow-1); }
.f-panel > .f-seg, .f-panel > .f-actions { grid-column: 1 / -1; }
.f-group { display: grid; gap: 6px; min-width: 0; }
/* The select has to be allowed to be narrower than its longest option, or
   the grid column stretches to fit "Biological Sciences" and the two
   columns stop being equal. Native selects truncate the closed state and
   still show every option in full when opened. */
.f-group .input { min-width: 0; width: 100%; text-overflow: ellipsis; }
.f-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--line-soft); padding: 4px; border-radius: 999px;
}
.seg-link {
  text-align: center; padding: 9px 6px; border-radius: 999px;
  font-size: 13.5px; font-weight: 570; color: var(--ink2);
  transition: background-color var(--d-fast) var(--e-io), color var(--d-fast), box-shadow var(--d-fast);
}
.seg-link.on { background: var(--surface2); color: var(--ink); box-shadow: var(--shadow-1); }
.f-actions { display: flex; align-items: center; gap: 16px; }
html.js .f-apply-hide { display: none; }

.i-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.i-count { font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.chips-active { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chips-active .chip { cursor: pointer; }
.chips-active .chip:hover { border-color: var(--err); color: var(--err); }
.sort-ctl { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.sort-ctl .sort-label { font-size: 13px; color: var(--faint); font-weight: 570; }
.sort-ctl .input { width: auto; padding: 9px 38px 9px 14px; font-size: 13.5px; border-radius: 999px; }
[dir="rtl"] .sort-ctl .input { padding: 9px 14px 9px 38px; }

.igrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 18px;
}
.igrid.swap { opacity: 0; transition: opacity 140ms var(--e-io); }

.icard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--rad); box-shadow: var(--shadow-1);
  transition: transform var(--d-med) var(--e-out), box-shadow var(--d-med) var(--e-out),
              border-color var(--d-med) var(--e-io);
}
.icard:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line-soft));
}
.icard-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; min-height: 46px; }
.icard-code { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.icard-prof { letter-spacing: .01em; font-weight: 570; color: var(--faint); }
.icard-prof span { color: var(--accent); font-weight: 650; }
.icard-title { font-size: 1.14rem; line-height: 1.3; }
.icard-dept { font-size: 13px; color: var(--faint); }
.icard-teachers { font-size: 13px; color: var(--ink2); }
.icard-meta { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--faint); }
.im-helped { color: var(--accent); }
.icard-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }

.sig { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.sig svg { display: block; }
.sig-bg { stroke: var(--line-soft); fill: none; }
.sig-fg { stroke: url(#none), var(--accent); fill: none;
  transition: stroke-dasharray 1s var(--e-out); }
.sig-n {
  position: absolute; font-size: 12.5px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.sig-new {
  align-self: start;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok); border: 1px dashed color-mix(in srgb, var(--ok) 60%, transparent);
  padding: 4px 10px; border-radius: 999px;
}

.iempty { text-align: center; padding: 70px 20px; display: grid; gap: 12px; justify-items: center; }
.iempty .empty-mark { color: var(--line); }
.iempty h2 { font-family: var(--font-display); font-weight: 580; }
.iempty p { color: var(--faint); max-width: 46ch; }

.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 18px; }
.sk-card { padding: 24px; border-radius: var(--rad); background: var(--surface);
  border: 1px solid var(--line-soft); display: grid; gap: 14px; }
.sk-card .sk-line { animation-delay: calc(var(--i, 0) * 80ms); }
.sk-w40 { width: 40%; } .sk-w80 { width: 85%; } .sk-w60 { width: 60%; }

.inst-results { margin-top: 26px; padding: 20px 24px; }
.inst-results h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px; }
.inst-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 7px; }
.inst-name { font-weight: 620; }
.inst-courses { display: flex; gap: 7px; flex-wrap: wrap; }

/* course page */
.wide { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }
main:not(.wide) > :is(.course-head, .chips, .fingerprint, .prompts, .asks,
                      .ask-invite, .notfound) {
  max-width: var(--wrap-tight); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px);
}
.crumbs { display: flex; gap: 10px; font-size: 13.5px; color: var(--faint); padding-top: 30px; }
.crumbs a:hover { color: var(--accent); }
.course-head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.course-title { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-top: 14px; }
.course-title .code { color: var(--accent); }
.course-dept { margin-top: 12px; color: var(--ink2); font-size: 15px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 22px; }

.fingerprint { margin-top: 30px; padding: clamp(22px, 3vw, 34px); }
.fingerprint h2 { font-family: var(--font-display); font-weight: 580; font-size: 1.5rem; }
.fingerprint .sub { color: var(--faint); font-size: 14px; margin-top: 6px; }
.fp-row {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 8px 26px; padding: 15px 0; border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.fp-row:first-of-type { margin-top: 18px; }
.fp-q { font-size: 14px; color: var(--ink2); }
.fp-a { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-a strong { font-size: 15px; }
.fp-tiles { display: inline-flex; gap: 3px; }
.fp-tiles .t {
  width: 9px; height: 14px; border-radius: 3px;
  background: var(--line-soft);
}
.fp-tiles .t.on { background: var(--accent); }
html.js .fingerprint.reveal .t.on { animation: tileIn .5s var(--e-out) backwards; }
html.js .fingerprint.reveal .t.on:nth-child(2) { animation-delay: 40ms; }
html.js .fingerprint.reveal .t.on:nth-child(3) { animation-delay: 80ms; }
html.js .fingerprint.reveal .t.on:nth-child(4) { animation-delay: 120ms; }
html.js .fingerprint.reveal .t.on:nth-child(5) { animation-delay: 160ms; }
html.js .fingerprint.reveal .t.on:nth-child(n+6) { animation-delay: 200ms; }
@keyframes tileIn { from { opacity: 0; transform: translateY(5px); } }
.fp-count { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.fp-alt { font-size: 12.5px; color: var(--faint); }
/* No answer held a majority. Amber, which everywhere else in this product
   means "paused, being read", not red: a split section is not an error,
   it is the honest state of the record. */
.fp-split {
  font-size: 12px; font-weight: 600; color: var(--warn, #8a5a17);
  background: var(--warn-soft, rgba(138, 90, 23, .12));
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
/* The instructor tabs. A row of chips that scrolls rather than wraps, so
   a course with eight instructors keeps the ledger in the same place. */
.inst-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.inst-tabs::-webkit-scrollbar { height: 4px; }
.inst-tabs::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
}
.inst-tabs .chip { flex: 0 0 auto; }
.fp-cta { margin-top: 18px; }

.prompts { padding-top: 8px; }
.prompt { padding: 30px 0 6px; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.prompt-head h3 { font-family: var(--font-display); font-weight: 580; font-size: 1.3rem; }
.asks-head { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.asks-head h2 { font-family: var(--font-display); font-weight: 580; font-size: 1.5rem; }
.asks { padding-bottom: 70px; }

.note {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: var(--shadow-1);
  padding: 20px 22px 14px; margin-bottom: 12px;
}
.note-body { font-size: 15.5px; line-height: 1.7; }
.note-body.quoted { border-inline-start: 3px solid var(--accent);
  padding-inline-start: 14px; color: var(--ink2); }
.note-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.note-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.note-actions .quiet { height: 32px; padding-inline: 13px; font-size: 12.5px; border-radius: 999px;
  border: 1px solid var(--line); background: none; cursor: pointer; color: var(--ink2);
  transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast); }
.note-actions .quiet:hover { color: var(--accent); border-color: var(--accent); }
.note-actions .quiet.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.note-actions a.faint { font-size: 12.5px; }
.note-actions a.faint:hover { color: var(--err); }
.note.queue { margin-bottom: 14px; }

.faint.empty { display: flex; align-items: center; gap: 12px; padding: 20px 4px; font-size: 14.5px; }
.empty-mark { color: var(--line); flex-shrink: 0; }

.notfound { text-align: center; padding: 90px 20px 100px; display: grid; gap: 16px; justify-items: center; }

/* auth */
.auth { padding: 20px clamp(14px, 2.5vw, 30px) 40px; }
.auth-grid {
  display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
  max-width: 1240px; margin-inline: auto; align-items: stretch;
}
.auth-card { padding: clamp(26px, 4vw, 46px); align-self: center; }
.auth-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top: 10px; }
.auth-card .notice { margin-top: 18px; }
.auth-forms { position: relative; margin-top: 26px; }
.auth-form { display: grid; gap: 18px; }
html.js .auth-form { transition: opacity var(--d-med) var(--e-io), transform var(--d-med) var(--e-out); }
html.js .auth-form.leaving { opacity: 0; transform: translateY(8px); position: absolute; inset-inline: 0; top: 0; pointer-events: none; }
html.js .auth-form.entering { animation: riseIn var(--d-slow) var(--e-out) both; }
.auth-hint { color: var(--ink2); font-size: 14.5px; }
.auth-alt { font-size: 14px; color: var(--faint); }
.anon { margin-top: 28px; padding: 20px 22px; background: var(--bg2); box-shadow: none; }
.anon-head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.anon-head .ic { color: var(--accent); }
.anon-list { display: grid; gap: 10px; margin-top: 14px; }
.anon-list li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink2); line-height: 1.55; }
.anon-list .ic { color: var(--ok); flex-shrink: 0; margin-top: 3px; }

.auth-panel {
  position: relative; overflow: hidden; border-radius: var(--rad-lg);
  min-height: 640px; display: flex;
}
.auth-panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-panel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(9, 14, 26, .25), rgba(9, 14, 26, .78) 80%);
}
.auth-panel-in {
  position: relative; z-index: 2; margin-top: auto; width: 100%;
  padding: clamp(26px, 4vw, 46px);
  color: #ece7da; display: grid; gap: 26px;
}
.auth-panel-in .lockup { color: #f2eee2; }
.auth-panel-in .lockup .mark { color: var(--brass-1); }
.auth-panel-in .lockup-ar { color: rgba(236, 231, 218, .7); }
.vals { position: relative; min-height: 120px; }
.val { position: absolute; inset: 0; opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--e-io), transform .6s var(--e-out); }
.val.on { opacity: 1; transform: none; }
html:not(.js) .val:first-child { opacity: 1; transform: none; }
.val-q { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 540; line-height: 1.4; }
.val-a { margin-top: 10px; font-size: 13.5px; color: var(--brass-1); }

.auth-badge {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(201, 169, 97, .2), rgba(201, 169, 97, .05));
  border: 1px solid rgba(201, 169, 97, .45);
  max-width: 340px;
}
.badge-mark { color: var(--brass-1); flex-shrink: 0; }
.badge-words { display: grid; gap: 1px; }
.badge-words strong { font-size: 15px; }
.badge-words span { font-size: 12.5px; opacity: .75; }
.badge-no { color: var(--brass-1); font-weight: 650; margin-top: 3px; }
.badge-shine {
  position: absolute; top: 0; bottom: 0; width: 46%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 226, .35), transparent);
  transform: skewX(-18deg);
}
.auth-badge:hover .badge-shine, .badge-enter .badge-shine {
  animation: shine 1.3s var(--e-io) .35s;
}
@keyframes shine { to { inset-inline-start: 130%; } }
.auth-count { font-size: 13.5px; color: rgba(236, 231, 218, .75); }
.auth-count strong { color: var(--brass-1); font-size: 15px; }

.pw-meter { display: grid; gap: 6px; }
.pw-bar { height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.pw-fill { display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--err); transition: width var(--d-med) var(--e-out), background-color var(--d-med); }
.pw-fill[data-lvl="1"] { width: 40%; background: var(--brass-2); }
.pw-fill[data-lvl="2"] { width: 72%; background: var(--ok); }
.pw-fill[data-lvl="3"] { width: 100%; background: var(--ok); }
.pw-fill[data-lvl="0"] { width: 14%; }
.pw-word { color: var(--faint); }

/* account */
.acct { max-width: 720px; padding-bottom: 60px; }
.acct-head { display: grid; gap: 14px; justify-items: start; margin-bottom: 30px; }
.acct-badge { margin-top: 6px; }
.acct-badge .badge-words strong { color: var(--ink); }
.badge-enter { animation: badgePop .8s var(--e-pop) both; }
.acct-card { max-width: none; margin: 0 0 20px; padding: 26px 28px; }
.acct-card.danger { border-color: color-mix(in srgb, var(--err) 30%, var(--line-soft)); }

/* XP card. Private to its owner — see atrium/xp.py on why there is no
   leaderboard and no peer-visible tier. */
.xp-head {
  display: flex; justify-content: space-between; align-items: start;
  gap: 16px; flex-wrap: wrap;
}
.xp-points { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.xp-points strong {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--ink); margin-inline-end: 6px; line-height: 1;
}
.xp-tier {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
:lang(ar) .xp-tier { text-transform: none; letter-spacing: normal; }
.tier-bronze   { color: #a1662f; }
.tier-silver   { color: #7d8794; }
.tier-gold     { color: #b08a3e; }
.tier-diamond  { color: #3f7f94; }
.tier-platinum { color: #5b6bb5; }
.xp-next, .xp-need, .xp-private { font-size: 14px; margin-top: 12px; }
.xp-private { margin-top: 14px; font-size: 13px; }
.xp-premium {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 14.5px; color: var(--ok, var(--accent));
}
.xp-card form { margin-top: 16px; }

/* steward */
section > h2 { scroll-margin-top: 90px; }

/* ------------------------------------------------------------ where to start
   The first screen a member sees, so it is built to be looked at rather
   than worked through: one column, centred, generous air, and the whole
   page readable on a laptop without reaching for the scrollbar.

   Two weights of card. The primary pair is what Atrium is; the secondary
   pair is what else is here. The difference is carried by size, by the
   ink of the title and by whether the tile behind the icon is filled --
   not by colour alone, which would vanish for a reader who cannot
   separate brass from ink.

   Depth is a hairline and a very soft shadow. The lift on hover is 2px:
   enough to read as "this is a door", small enough not to bounce. */

.start {
  max-width: 760px; margin-inline: auto;
  padding: clamp(26px, 4.4vh, 48px) clamp(18px, 5vw, 28px) 52px;
  display: grid; gap: clamp(16px, 2.4vh, 24px);
}

.start-head { display: grid; justify-items: center; text-align: center; gap: 8px; }
.start-mark { color: var(--accent); opacity: .9; }
.start-title { font-size: clamp(1.9rem, 5vw, 2.55rem); }
.start-lede {
  max-width: 46ch; color: var(--ink2);
  font-size: 1.02rem; line-height: 1.65;
}

.start-grid { display: grid; gap: 14px; }

.start-card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--rad);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.start-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft));
}
/* Keyboard users get the same affordance as the mouse, and a ring the
   card cannot swallow. */
.start-card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.start-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  flex-shrink: 0;
}
.start-body { min-width: 0; display: grid; gap: 3px; }
.start-name {
  font-family: var(--font-display); font-weight: 570;
  font-size: 1.22rem; letter-spacing: -.01em; line-height: 1.2;
}
.start-desc { color: var(--ink2); font-size: .95rem; line-height: 1.5; }

/* The word is for the pointer, the arrow is for everyone. On a narrow
   screen the word goes and the arrow stays, because the whole card is
   the target there and the label was only ever a hint. */
.start-go {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent); font-size: .9rem; font-weight: 560;
  opacity: .82; transition: opacity var(--d-fast) var(--e-io),
                            transform var(--d-fast) var(--e-out);
}
.start-card:hover .start-go { opacity: 1; transform: translateX(2px); }
[dir="rtl"] .start-card:hover .start-go { transform: translateX(-2px); }

/* "Also here": a label sitting on a rule, which separates the two weights
   without drawing a box around either. */
.start-also {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px;
}
.start-also-t {
  font-size: 12.5px; font-weight: 650; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
:lang(ar) .start-also-t { letter-spacing: .04em; }
.start-rule { flex: 1; height: 1px; background: var(--line-soft); }

.start-grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; }
.start-small {
  grid-template-columns: auto 1fr;
  padding: 14px 16px; gap: 12px;
  box-shadow: none;
  background: transparent;
}
.start-small:hover { background: var(--surface); box-shadow: var(--shadow-1); }
.start-small .start-ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: transparent; color: var(--ink2);
  border: 1px solid var(--line-soft);
}
.start-small:hover .start-ic { color: var(--accent); }
.start-small .start-name { font-size: 1.03rem; font-weight: 560; }
.start-small .start-desc { font-size: .86rem; line-height: 1.42; }
.start-small .start-go { display: none; }

@media (max-width: 720px) {
  .start-grid-2 { grid-template-columns: 1fr; }
  .start-go-t { display: none; }
  .start-card { padding: 18px 17px; gap: 14px; }
  .start-ic { width: 42px; height: 42px; }
}

/* --------------------------------------------------------- deadline tracker
   The date rail.

   Atrium's mark is a courtyard drawn in plan — orthogonal lines only,
   privacy achieved by geometry. Read edge-on, that is a colonnade: a
   repeating vertical rhythm with things set against it. This page is
   built the same way. One hairline runs down the list, every deadline
   hangs off it on a small plaque carrying its date, and a brass line
   marks where today falls.

   That line is the point. Every tracker shows what is due; almost none
   show where the reader is standing, so "how far away is this" stays
   arithmetic. Drawn once, it answers the question for every row at the
   same time: above the line has gone, below is still coming, and the
   distance is the gap.

   Mobile-first, because the moment this has to survive is a student on a
   phone at 11pm. The plaque is 46px, which leaves the content column
   readable at 375 without the row ever becoming two columns of nothing.

   The three confirmation states stay distinguishable without colour —
   each carries a glyph and a border weight as well as a hue. A confirmed
   date and somebody's unverified guess must never read the same at arm's
   length; that constraint outranks every aesthetic decision here. */

/* One gutter for every block on these pages. `main` carries none, so
   without this the rail and the tick sit hard against the screen edge on
   a phone -- which is where this page is read. */
.dash, .setup, .sec-head-block, .sec-earlier,
main > .dl-group, main > .dash-empty, .add-form, .add-gate {
  max-width: var(--wrap-tight); margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 28px);
}
.dash, .setup { padding-block: 30px 64px; display: grid; gap: 30px; }
.setup { gap: 26px; }
.add-form, .add-gate { padding-block: 24px 26px; }

/* ---- header ---- */
.dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.dash-titles { display: grid; gap: 6px; }
.dash-head h1 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); line-height: 1.1; }
.dash-sub { font-size: 14.5px; color: var(--faint); }
.dash-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-size: 13.5px; font-weight: 550; color: var(--ink2);
  transition: border-color var(--d-fast) var(--e-io),
              color var(--d-fast) var(--e-io),
              background-color var(--d-fast) var(--e-io);
}
.dash-act:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dash-act .ic { color: var(--accent); }

/* ---- week headings: the label answers "when", the range answers
       "how long have I got" without the reader doing the sum ---- */
.dl-group { display: grid; gap: 10px; }
.dash > .dl-group + .dl-group { margin-top: 22px; }
.dl-group-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-inline-start: 2px;
}
.dl-group-when {
  font-size: 12px; font-weight: 660; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink2);
}
:lang(ar) .dl-group-when { letter-spacing: .03em; text-transform: none; }
.dl-group-range {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums;
}
:lang(ar) .dl-group-range { font-style: normal; }
.dl-group-passed { opacity: .66; }
.dl-group-passed:hover, .dl-group-passed:focus-within { opacity: 1; }

/* ---- the rail ---- */
.dl-list { display: grid; position: relative; }
.dl-list::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: 14px; inset-inline-start: 22px; width: 1px;
  background: var(--line);
}
.dl-list-tail { min-height: 34px; }

/* ---- one deadline ---- */
.dl-row {
  position: relative; z-index: 1;
  display: grid; gap: 4px 14px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas: "plaque body tick";
  padding: 11px 0;
}
.dl-plaque {
  grid-area: plaque; align-self: start;
  display: grid; justify-items: center; align-content: center; gap: 1px;
  width: 46px; min-height: 46px; padding: 5px 0 6px;
  border: 1px solid var(--line-soft); border-radius: 13px;
  /* Opaque, so the rail reads as passing behind the plaques rather than
     through them. */
  background: var(--surface);
}
.dl-dow {
  font-size: 10.5px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink2);
}
:lang(ar) .dl-dow { letter-spacing: normal; text-transform: none; font-size: 9.5px; }
.dl-day {
  font-size: 19px; font-weight: 620; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.dl-mon {
  font-size: 9.5px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-top: 1px;
}
:lang(ar) .dl-mon { letter-spacing: normal; text-transform: none; }

.dl-plaque.is-today {
  border-color: var(--accent); background: var(--accent-soft);
}
.dl-plaque.is-today .dl-day, .dl-plaque.is-today .dl-dow { color: var(--accent-strong); }
.dl-plaque.is-past { border-style: dashed; }
.dl-plaque.is-past .dl-day { color: var(--faint); }

.dl-body { grid-area: body; min-width: 0; display: grid; gap: 3px; padding-top: 1px; }
.dl-course {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 660; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-strong);
}
:lang(ar) .dl-course { letter-spacing: normal; text-transform: none; }
.dl-sec { color: var(--faint); font-weight: 550; letter-spacing: .04em; }
.dl-allsec {
  letter-spacing: normal; text-transform: none; font-size: 11px;
  font-weight: 560; color: var(--ink2);
  padding: 1px 8px; border-radius: 999px; background: var(--bg2);
}
.dl-title {
  font-size: 16px; font-weight: 560; color: var(--ink); line-height: 1.35;
  justify-self: start;
}
.dl-title:hover { color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dl-cov { font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.dl-meta {
  display: flex; align-items: center; gap: 7px 10px; flex-wrap: wrap;
  margin-top: 4px;
}
.dl-time { font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ---- confirmation state: two pills, one question each ----
   Colour does the first read. Amber while a date is only claimed, green
   once the section agrees, red while it is contested — and each still
   carries a glyph and a border weight, so the three stay apart for a
   reader who cannot use the hue. Amber is the brand's own brass rather
   than a warning yellow: this is a page about uncertainty, not danger. */
.dl-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; border: 1px solid transparent;
  letter-spacing: .01em;
}
.dl-pill .ic { flex-shrink: 0; }
.dl-ok {
  color: color-mix(in srgb, var(--ok) 60%, var(--ink));
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent);
}
.dl-new {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.dl-dis {
  color: color-mix(in srgb, var(--err) 66%, var(--ink));
  background: color-mix(in srgb, var(--err) 14%, transparent);
  border-color: color-mix(in srgb, var(--err) 34%, transparent);
}
/* The count is neutral on purpose. It reports a quantity; the pill beside
   it has already said what that quantity means. */
.dl-count {
  color: var(--ink2); background: transparent; border-color: var(--line);
  font-variant-numeric: tabular-nums; font-weight: 550;
}

/* The vote pair, permanent for anyone in the section. A confirmed date
   can still be wrong, and a reader who has already answered may learn
   better a minute later — so these never disappear, and the answer
   already given is shown pressed. */
.dl-ask { display: contents; }
.dl-ask-q {
  font-size: 12.5px; color: var(--ink2); font-weight: 500;
  margin-inline-start: 2px;
}
.btn-xs {
  height: 28px; padding-inline: 14px; font-size: 12.5px; gap: 5px;
  border-radius: 999px; font-weight: 570;
}
.dl-meta .btn-xs { background: var(--surface2); border-color: var(--line); }
.dl-meta .btn-xs:hover { border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); }
.dl-vote.on {
  background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg);
}
.dl-vote.on:hover { background: var(--btn-bg); color: var(--btn-ink); }
.dl-meta form.inline { display: inline-flex; }

/* Remove, for the person who recorded it. Quiet until reached for: it is
   the one control here that takes something away from the whole section. */
.dl-own { margin-inline-start: auto; }
.dl-remove {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: 550 12px/1 var(--font-ui); color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.dl-remove:hover { color: var(--err); text-decoration-color: currentColor; }

/* ---- personal completion: private, and a different shape from
       everything that writes to the shared record ---- */
.dl-tick { grid-area: tick; align-self: start; padding-top: 8px; }
.dl-box {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: transparent; color: transparent; cursor: pointer;
  transition: border-color var(--d-fast) var(--e-io),
              background-color var(--d-fast) var(--e-io),
              color var(--d-fast) var(--e-io);
}
.dl-box::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
}
.dl-box { position: relative; }
.dl-box:hover { border-color: var(--ok); color: color-mix(in srgb, var(--ok) 55%, transparent); }
.dl-row.is-done .dl-box { background: var(--ok); border-color: var(--ok); color: var(--btn-ink); }
[data-theme="dark"] .dl-row.is-done .dl-box { color: #0d1422; }

.dl-row.is-done .dl-title { text-decoration: line-through;
  text-decoration-thickness: 1px; color: var(--faint); }
.dl-row.is-done .dl-course { color: var(--faint); }
.dl-row.is-done .dl-cov, .dl-row.is-done .dl-meta { display: none; }
.dl-row.is-done .dl-plaque { opacity: .5; }

/* ---- today ---- */
.dl-now {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0 9px 0; margin-inline-start: 22px;
}
.dl-now::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  margin-inline-start: -4px;
  box-shadow: 0 0 0 4px var(--bg);
}
.dl-now::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
}
[dir="rtl"] .dl-now::after { background: linear-gradient(to left, var(--accent), transparent); }
.dl-now-label {
  font-size: 11px; font-weight: 680; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-strong); white-space: nowrap;
}
:lang(ar) .dl-now-label { letter-spacing: normal; text-transform: none; font-size: 12.5px; }

/* ---- disagreement, never hidden ---- */
.dl-cands {
  margin-top: 8px; padding: 11px 14px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--line-soft); font-size: 13px;
}
.dl-cand-list { display: grid; gap: 8px; margin-top: 8px; }
.dl-cand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-cand-d { font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-cand-n {
  min-width: 24px; text-align: center; padding: 1px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; font-variant-numeric: tabular-nums;
}

/* ---- something wrong with the item, not its date ----
   The link sits with the confirm pair because it is the third answer to
   the same question, but it is quieter than either: most rows are fine,
   and an objection offered as loudly as "Yes" invites idle use. The
   standing-objection line above the row is the loud part, because that
   is the one a reader needs before they revise around the date. */
.dl-flagged {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 0 2px; font-size: 12.5px; color: var(--err);
}
.dl-flagged .ic { flex-shrink: 0; }

/* ---- "No" opens this: what is actually wrong ----
   Three answers, each its own form, so none of them can be held up by a
   field another one needs. Every card carries its consequence, because
   two of these take a date off thirty calendars and the tap should not
   be the first time anyone says so. */
.wrong-set { display: grid; gap: 12px; }

.wrong-btn, .wrong-body {
  display: grid; gap: 5px; width: 100%; text-align: start;
  padding: 17px 19px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  font: inherit; color: inherit;
}
.wrong-btn {
  cursor: pointer; appearance: none;
  transition: border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.wrong-btn:hover {
  border-color: var(--accent-strong); background: var(--surface2);
}
.wrong-btn:active { transform: translateY(1px); }
.wrong-btn:focus-visible {
  outline: 2px solid var(--accent-strong); outline-offset: 3px;
}

.wrong-claim { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
/* --ink2, not --faint: at 13px the quieter token lands under 4.5:1 on the
   day ground, and this line is the part of the card doing the work. */
.wrong-effect { font-size: 13px; color: var(--ink2); line-height: 1.5; }

.wrong-mine {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-strong);
}
.wrong.is-mine .wrong-btn, .wrong.is-mine .wrong-body {
  border-color: var(--accent-strong); background: var(--accent-soft);
}

/* The one answer that keeps the item is also the one that needs another
   fact first, so it holds its own field instead of borrowing a stray one
   at the foot of the page. */
.wrong-date {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: end;
  margin-top: 11px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.wrong-date label {
  flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--ink2);
}
.wrong-date .input { flex: 1 1 9rem; min-width: 0; }

@media (max-width: 420px) {
  .wrong-date .input, .wrong-date .btn { flex-basis: 100%; }
}

/* The two drafts, side by side. Neither is styled as the winner: the
   student is being asked which is true, not told. */
.dup-card {
  padding: 14px 16px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); display: grid; gap: 5px;
}
.dup-card-mine { background: var(--bg2); border-style: dashed; }
.dup-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.dup-what { font-size: 15px; }
.dup-when { font-variant-numeric: tabular-nums; }
.dup-cov { font-size: 13px; color: var(--ink2); }

/* ---- the steward desk ----
   Its own column, because the page had none: six blocks dropped straight
   into main, which carries no gutter, so every line of it sat against the
   screen edge with nothing between one block and the next. Scoped here
   rather than made a default for every page. */
.desk {
  max-width: 1080px; margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  padding-block: clamp(28px, 4vw, 42px) 90px;
  display: grid; gap: clamp(30px, 4vw, 46px);
}
.desk-head { display: grid; gap: 10px; }
.desk-head h1 {
  font-family: var(--font-display); font-weight: 580;
  font-size: clamp(1.8rem, 4.4vw, 2.5rem); line-height: 1.1;
  letter-spacing: -.015em;
}
.desk-head .sub { max-width: 58ch; color: var(--ink2); font-size: 15.5px; }

/* Each queue is a group: a heading that belongs to the list under it,
   rather than a line of text floating between two lists. */
.desk > section { display: grid; gap: 16px; }
.desk > section > h2 {
  font-family: var(--font-display); font-weight: 580; font-size: 1.35rem;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.desk .note.queue { padding: 22px 24px; }

/* ---- contribution, on the steward desk ----
   The desk is meant to be almost empty, so this is what tells a steward
   whether a quiet queue means the funnel is working or the platform is
   going quiet. Reuses the fingerprint's tiles: the headline is the same
   kind of sentence the ledger makes, about a different question. */
/* .card carries a border and a shadow and no padding at all, so the panel
   was printing its own text onto its own edge. Padded, and split into
   three bands that each say one thing: the rate, the totals, the trend. */
.mpanel {
  display: grid; gap: clamp(22px, 2.4vw, 30px);
  padding: clamp(24px, 2.8vw, 34px);
}
.mpanel-head { display: grid; gap: 8px; }
.mpanel-head h2 {
  font-family: var(--font-display); font-weight: 580; font-size: 1.35rem;
}
.mpanel-head .sub { color: var(--ink2); font-size: 14.5px; max-width: 62ch; }
.mrate { display: grid; gap: 12px; }
.mrate-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 16px;
}
.mrate-pct {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--accent-strong); font-variant-numeric: tabular-nums;
}

/* Four across, not eight. Eight equal columns of a number and a caption
   read as one dense strip with no way in; in two rows of four each figure
   gets room to be read on its own. */
.mgrid {
  display: grid; gap: clamp(16px, 2vw, 26px) clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.mstat { display: grid; gap: 5px; min-width: 0; }
.mstat-n {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.mstat-k { font-size: 12.5px; color: var(--ink2); line-height: 1.35; }

.mweeks {
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.mweeks-h {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink2); font-weight: 600; margin-bottom: 11px;
}
/* A grid, not a wrapping flex row. Four cards at flex 1 1 78px fitted
   three across on a phone and gave the fourth the whole next row, so one
   week was three times the width of the others for no reason. */
.mweeks-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.mweek {
  display: grid; gap: 3px; padding: 12px 14px; min-width: 0;
  border-radius: 11px; background: var(--bg2);
  border: 1px solid var(--line-soft);
}
.mweek-n {
  font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.mweek-k { font-size: 11.5px; color: var(--ink2); }

/* ---- empty states are designed states: show what we do know ---- */
.dash-empty { padding: 30px 26px; display: grid; gap: 12px; justify-items: start; }
.dash-empty h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 570; }
.shape-list { display: grid; gap: 10px; margin-top: 8px; width: 100%; }
.shape-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.shape-code { font-weight: 620; color: var(--accent); }

.dash-add {
  display: grid; gap: 10px; padding-top: 4px;
}
.dash-add-label { font-size: 12px; font-weight: 660; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); }
:lang(ar) .dash-add-label { letter-spacing: normal; text-transform: none; font-size: 13px; }
.dash-add-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- the calendar feed: the retention mechanism, offered plainly ---- */
.cal-card { padding: 26px 28px; display: grid; gap: 14px; scroll-margin-top: 96px; }
.cal-head { display: flex; align-items: center; gap: 11px; }
.cal-head .ic { color: var(--accent); }
.cal-head h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 570; }
.cal-url { display: grid; gap: 7px; }
.cal-url .input { font-size: 13px; font-family: ui-monospace, "SFMono-Regular", monospace; }
.cal-revoke { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }

@media (min-width: 620px) {
  .dl-row { gap: 5px 18px; grid-template-columns: 52px minmax(0, 1fr) auto; padding: 13px 0; }
  .dl-plaque { width: 52px; min-height: 52px; }
  .dl-day { font-size: 21px; }
  .dl-title { font-size: 16.5px; }
  .dl-list::before { inset-inline-start: 25px; }
  .dl-now { margin-inline-start: 25px; }
}

/* Setup: the highest-friction moment in the product, built as a search
   that answers rather than a form with a submit button at the bottom. */
.setup-search { display: grid; gap: 8px; position: relative; }
.setup-search-row { display: flex; gap: 10px; }
.setup-search-row .input { flex: 1; }

/* The typing menu. Absolutely positioned so the list below it does not
   jump every keystroke, and capped in height so a broad query like "MATH"
   is scrollable rather than endless. Closed is the default state in CSS,
   so a scriptless page never sees an empty box. */
.sec-menu {
  display: none; position: absolute; z-index: 40;
  inset-inline: 0; top: 100%; margin-top: 6px;
  max-height: min(58vh, 420px); overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-2);
  padding: 6px;
  overscroll-behavior: contain;
}
.sec-menu.open { display: block; }
.sec-menu-group {
  padding: 9px 12px 5px; font-size: 11.5px; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
:lang(ar) .sec-menu-group { letter-spacing: .03em; text-transform: none; }
.sec-menu-item {
  padding: 9px 12px; border-radius: 11px; cursor: pointer;
  display: grid; gap: 2px;
}
.sec-menu-item:hover, .sec-menu-item.act { background: var(--accent-soft); }
.sec-menu-item.act { outline: 2px solid var(--accent); outline-offset: -2px; }
.sec-menu-item.mine { cursor: default; opacity: .62; }
.sec-menu-item.mine:hover { background: transparent; }
.sec-menu-top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.sec-menu-code {
  font-weight: 650; font-size: 14.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sec-menu-title { font-size: 13.5px; color: var(--ink2); }
.sec-menu-meta { font-size: 12.5px; color: var(--faint); line-height: 1.45; }
.sec-menu-empty { padding: 16px 12px; font-size: 14px; color: var(--faint); }
.setup-results, .setup-mine { display: grid; gap: 12px; }
.setup-results h2, .setup-mine h2 {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 570;
}
.sec-opts { display: grid; gap: 8px; }
.sec-opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--surface);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.sec-opt:hover { border-color: var(--accent); }
.sec-opt.on { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.sec-opt-main { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.sec-opt-code { font-weight: 650; font-size: 14.5px; white-space: nowrap; }
.sec-opt-title { font-size: 14px; color: var(--ink2); }
/* Instructor and meeting time, because that is how students recognise
   their section -- most do not remember the number. */
.sec-opt-meta { font-size: 12.5px; }
.setup-pending { padding: 22px 24px; }
.pending-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
.pending-form .input { width: 100px; }

/* Section page */
.sec-head-block { padding-block: 8px 4px; display: grid; gap: 10px; }
.sec-head-block h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.sec-head-block .code { color: var(--accent); }
.sec-meta { font-size: 14px; }
.sec-share { font-size: 13px; }
.sec-earlier { max-width: var(--wrap-tight); margin-inline: auto; }
.sec-earlier summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--faint);
  padding: 12px 2px;
}
.sec-earlier summary:hover { color: var(--accent); }
.sec-head-block + .dl-group, main > .dl-group { max-width: var(--wrap-tight); margin-inline: auto; width: 100%; }
main > .dash-empty { max-width: var(--wrap-tight); margin-inline: auto; }

/* The add form. At the bottom of the section page, always visible, never
   behind a button -- and nothing in it is required except type and date,
   both of which arrive already answered. */
.add-form {
  max-width: var(--wrap-tight); margin: 30px auto 60px;
  padding: 24px 26px 26px; display: grid; gap: 18px;
}
.add-form h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 570; }
.add-form .field { display: grid; gap: 8px; }
.date-opts .opt { gap: 6px; }
.opt-d { opacity: .6; font-size: 12px; font-variant-numeric: tabular-nums; }
.add-when-row { display: flex; gap: 10px; flex-wrap: wrap; }
.add-when-row .input { flex: 1 1 150px; }
/* Inline and unavoidable, at the point of entry. The line between a
   planner and an academic integrity violation is not something to bury
   in a policy page. */
.cov-rule {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
  font-size: 13px; color: var(--accent);
}
.cov-rule .ic { flex-shrink: 0; }
.check-line {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  align-items: center; font-size: 14px; cursor: pointer;
}
.check-line small { grid-column: 2; font-size: 12.5px; }
.add-gate {
  max-width: var(--wrap-tight); margin: 30px auto 60px;
  padding: 24px 26px; display: grid; gap: 14px; justify-items: start;
}

/* ------------------------------------------------- veil · reveal · motion */

.veil {
  position: fixed; inset: 0; z-index: 999;
  display: none; place-items: center;
  background: var(--bg);
  pointer-events: none;
}
html.intro .veil { display: grid; animation: veilOut .55s var(--e-io) 1.5s forwards; }
.veil-in { display: grid; justify-items: center; gap: 20px; }
.veil-mark { color: var(--accent); }
html.intro .veil-mark .mk {
  stroke-dasharray: 46; stroke-dashoffset: 46;
  animation: draw .55s var(--e-out) forwards;
}
html.intro .veil-mark .mk2 { animation-delay: .08s; }
html.intro .veil-mark .mk3 { animation-delay: .16s; }
html.intro .veil-mark .mk4 { animation-delay: .24s; }
html.intro .veil-mark .mk-dot {
  opacity: 0; transform: translateY(-14px); transform-origin: center;
  animation: lightFall .5s var(--e-pop) .42s forwards;
}
.veil-words { display: flex; align-items: center; gap: 13px;
  font-family: var(--font-display); font-size: 27px; font-weight: 590; color: var(--ink); }
.veil-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); }
html.intro .veil-words { opacity: 0; animation: riseIn .5s var(--e-out) .62s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lightFall { to { opacity: 1; transform: none; } }
@keyframes veilOut { to { opacity: 0; visibility: hidden; } }

/* scroll reveals */
html.js .rv { opacity: 0; transform: translateY(18px); }
html.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--e-out) calc(var(--i, 0) * 75ms),
              transform .65s var(--e-out) calc(var(--i, 0) * 75ms);
}

/* cross-document transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut 200ms var(--e-io) both; }
  ::view-transition-new(root) { animation: vtIn 320ms var(--e-out) 60ms both; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1279px) {
  /* Compact search: a square icon button showing a magnifier.
     It previously hid the magnifier and kept the brand mark, which left
     a pill that did not read as "search" to anyone. Fixed square sizing
     also stops it being the thing the layout squeezes when space runs
     short. */
  .hd-search-ph { display: none; }
  .hd-search-mark { display: none; }
  .hd-search-ic { display: block; color: var(--ink2); }
  .hd-search {
    width: 44px; min-width: 44px; height: 44px;
    padding: 0; gap: 0; justify-content: center;
  }
  [dir="rtl"] .hd-search { padding: 0; }
}

/* The nav is five items at every width and for signed-in and signed-out
   alike, which is what makes it affordable below desktop. Two adaptations
   carry it from 1240px down to the phone:

   1240-768  the centred wordmark is what the row cannot afford, not the
             nav itself. The lockup moves to the inline-start and the nav
             takes the middle track, which roughly doubles its budget.
   1023-768  the type steps down and the theme toggle moves to the sheet,
             so a 768px tablet still shows all five.

   Below 768 the burger takes over. The upper bounds carry .98 because a
   scaled display gives a fractional viewport: at 767.33px neither
   max-width:767px nor min-width:768px matches, and the header fell
   through both rules into a nav it had no room for. */
@media (max-width: 1239.98px) and (min-width: 768px) {
  .hd-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .hd-brand { order: -1; justify-self: start; }
  .hd-start { justify-content: flex-start; }
}

@media (max-width: 1023.98px) and (min-width: 768px) {
  .hd-nav { gap: 2px; }
  .nav-link, .nav-menu .menu-btn {
    font-size: 13px; min-width: 0; padding: 8px 9px;
  }
  /* Language stays: it is a bilingual product and the sheet is not
     reachable while the burger is hidden. Theme is a preference that
     already follows the system, so it is the one that gives way. */
  .hd-in > .hd-end > .theme-btn { display: none; }
}

@media (max-width: 767.98px) {
  .hd-nav { display: none; }
  .hd-burger { display: inline-flex !important; }
}

@media (max-width: 1020px) {
  .feat-card:nth-child(-n+3) { grid-column: span 3; }
  .feat-card:nth-child(n+4) { grid-column: span 3; }
  .fnd-stats { grid-template-columns: 1fr; gap: 30px; }
  .auth-grid { grid-template-columns: 1fr; max-width: 640px; }
  .auth-panel { min-height: 0; order: 2; }
  .auth-panel-in { margin-top: 200px; }
}

@media (max-width: 900px) {
  :root { --hd-h: 62px; }
  .hd-word { font-size: 19px; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .i-layout { grid-template-columns: 1fr; }
  .f-toggle { display: inline-flex !important; }
  /* filter sidebar becomes a bottom sheet */
  html.js .i-side {
    position: fixed; inset: auto 0 0; z-index: 250; top: auto;
    transform: translateY(105%);
    transition: transform var(--d-med) var(--e-out);
    max-height: 82vh; overflow-y: auto;
    border-radius: 22px 22px 0 0;
    box-shadow: var(--shadow-2);
    background: var(--surface);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  html.js .i-side.open { transform: none; }
  html.js .i-side .f-panel { border: 0; box-shadow: none; border-radius: 0; padding: 24px 22px 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-panel { order: 2; }
  .ft-top { grid-template-columns: 1fr; }
  .ft-wl { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; gap: 20px; }
  .course-head-row { flex-direction: column; align-items: start; }
  .fp-row { grid-template-columns: 1fr; gap: 6px; }
  .faq-more { justify-content: center; text-align: center; }
}

@media (max-width: 700px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mweeks-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  /* Search and Filters stop sharing a row. Both fit once the bar can
     shrink, but the bar ends up at 168px, which is not enough of a field
     to type a course code into. The search takes the row and the button
     drops under it. */
  .i-tools { flex-wrap: wrap; }
  .i-tools .sbar-page { flex: 1 1 100%; max-width: none; }
  /* The header carries four controls on the right. Beside a centred
     wordmark at 375px the side columns are ~120px and those four need
     ~198px, so they overflowed leftward across the brand and the browser
     shrank the search trigger to a 25px shell with a zero-width logo in
     it. Language and theme move into the sheet, which already opens for
     navigation; burger, brand, search and account fit with room to
     spare.

     Theme was named in that plan and then not carried out: only the
     language control was removed here, so three 44px buttons stayed on
     the right and the search trigger sat across the wordmark on every
     phone. The arithmetic, with the brand 103px wide and centred:
     the controls start at W - 110 and the brand ends at W/2 + 51.5, so
     they clear each other only above 423px with three of them and above
     323px with two. */
  .hd-in > .hd-end > .menu-lang { display: none; }
  .hd-in > .hd-end > .theme-btn { display: none; }
  /* Scoped to html.js because the button does nothing without it. Both
     theme triggers ship hidden and atrium.js reveals them; an
     unscoped !important here would beat [hidden] and show a dead
     control to a reader with scripting off. */
  html.js .sheet-theme { display: inline-flex !important; }
  .hd-in { gap: 10px; }

  body { font-size: 15.5px; }
  .hero-frame { margin: 6px; min-height: 88svh; }
  .hero-inner { padding-bottom: clamp(40px, 7vh, 80px); }
  .hero-title { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .sbar-hero { height: 60px; padding-inline-start: 16px; }
  .sbar-hero .sbar-go { width: 46px; height: 46px; }
  .sbar-input { font-size: 15.5px; }
  .hero-tab { padding-inline: 20px; height: 50px; }
  .founding-head { flex-wrap: wrap; }
  .rail { grid-auto-columns: 86vw; }
  .icard { padding: 19px 18px 17px; }
  .contact-main { padding: 22px 18px; }
  .btn-lg { height: 50px; }
  .ft-bottom { flex-direction: column; align-items: start; }
  .ft-meta { margin-inline-start: 0; }
  .spanel-in { padding-top: calc(var(--hd-h) + 14px); }
  .sort-ctl { margin-inline-start: 0; }
}

/* Two controls beside a centred wordmark clear each other down to 323px,
   which covers every current phone but leaves nothing in hand. Buying
   8px back from the outer padding and the gap between the two buttons
   takes that to 307px. The 44px targets themselves are not negotiable:
   they are the minimum a thumb can reliably hit. */
@media (max-width: 380px) {
  .hd-in { padding-inline: 12px; }
  .hd-side { gap: 2px; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-pic img { animation: none; transform: none; }
  .hero-cue .ic { animation: none; }
  html.js .rv { transform: none; transition: opacity .25s ease; }
  html.js .rv.in { transition-delay: 0ms; }
  html.js body[data-page="home"] :is(.hero-eyebrow, .hero-title, .hero-sub, .hero-search) {
    animation: none; opacity: 1; transform: none;
  }
  .btn:hover, .icard:hover, .feat-card:hover, .ft-social a:hover { transform: none; }
  .feat-card:hover .feat-card-img img { transform: none; }
  .menu-panel { transition-duration: 1ms; }
  .sheet-panel, .spanel-in, html.js .i-side { transition-duration: 1ms; }
  .meter-fill { transition-duration: 1ms; }
  .sig-fg { transition: none; }
  .badge-shine, .acc-chev, .veil { animation: none !important; }
  html.js .auth-form { transition: opacity .2s ease; }
  @keyframes heroSettle { to { transform: none; } }
}

/* ---- the ask, and what it says back ----
   The one card in the product that initiates anything, so it is quiet on
   purpose: a bordered panel in the page flow, never a modal, never a
   badge, and always carrying a way to say no that is as easy as the way
   to say yes. */
.askc {
  border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--surface); padding: 22px 24px; margin-top: 22px;
}
.askc-welcome { background: var(--bg2); border-style: dashed; }
.askc-in { display: grid; gap: 9px; }
.askc-eyebrow {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink2); font-weight: 600;
}
.askc-q {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 580;
  line-height: 1.3; text-wrap: balance; margin: 0;
}
.askc-why { font-size: 14.5px; color: var(--ink2); line-height: 1.55; max-width: 60ch; }
.askc-do { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Never a zero, so when this renders it always has something true to say.
   --ink2 rather than --faint: it is small and it is the payoff. */
.impact {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 13.5px; color: var(--ink2);
}
.impact .ic { color: var(--accent-strong); flex-shrink: 0; }

/* The course picker's scriptless result list. */
.crs-field { position: relative; }
.crs-results { margin-top: 4px; }
.crs-opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crs-opt-link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 12px 15px; border-radius: 11px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); color: inherit;
}
.crs-opt-link:hover { border-color: var(--accent-strong); }
.crs-opt-code { font-weight: 650; font-size: 14px; }
.crs-opt-title { color: var(--ink2); font-size: 14px; }

/* A multi-select question says so beside its legend. */
.fact-multi {
  margin-inline-start: 9px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink2);
}

/* The invitation to ask, on a course nobody has asked about yet. Quieter
   than the section it stands in for: there is nothing to read here, only
   something a reader could start. */
/* The invitation was a full-width bar carrying 399px of content across
   1265px, so two thirds of it was an empty box. It is as wide as what it
   says now: a pill, sized to its own words, sitting where the rest of the
   page starts rather than against the screen edge. */
.ask-invite { margin-top: 22px; }
.ask-invite-in {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  padding-block: 8px; padding-inline: 20px 8px;
  border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line-soft);
}
.ask-invite-t { font-size: 14.5px; color: var(--ink2); }
@media (max-width: 480px) {
  /* Below this the two do not share a line, and a pill wrapped onto two
     rows reads as a broken shape rather than one control. */
  .ask-invite-in {
    width: 100%; border-radius: var(--rad);
    padding: 14px 16px; gap: 10px;
  }
}

/* A retired question reads as an archive rather than a prompt. */
.prompt.is-retired { opacity: .82; }
.prompt.is-retired .prompt-q { font-weight: 500; }

/* "Forgot your password?" sits above the button, aligned to the end of the
   row, where a reader looks after failing to remember the field above it. */
.auth-forgot { display: flex; justify-content: flex-end; margin-top: -4px; }
.auth-forgot .linkish { font-size: 13.5px; }