@import url("/assets/fonts.css");

/* ============================================================ tokens
   Lifted verbatim from static/atrium.css so the waitlist page and the
   product cannot drift apart. Day is limestone; night is the courtyard
   after dark. Brass is the only warm accent and it is spent, not sprayed. */
:root {
  --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;
  --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);

  --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);
  --d-fast: 170ms;
  --d-med: 280ms;
  --d-slow: 460ms;

  --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;
  --ok: #8fae8b;
  --err: #cd8577;
  --btn-bg: #eae6da;
  --btn-ink: #131c2f;
  --foot-bg: #0a101d;
  --foot-bg2: #101a2e;
  --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);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --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;
    --ok: #8fae8b;
    --err: #cd8577;
    --btn-bg: #eae6da;
    --btn-ink: #131c2f;
    --foot-bg: #0a101d;
    --foot-bg2: #101a2e;
    --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);
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Arabic is not English in Arabic letters: it gets its own family and,
   critically, its own leading. Naskh stacks vertically and suffocates at
   Latin line-height. */
:lang(ar) {
  font-family: "IBM Plex Sans Arabic", "Amiri", var(--font-ui);
  line-height: 1.9;
  font-style: normal;
  letter-spacing: normal;
}
:lang(ar) .display { font-family: "Amiri", "IBM Plex Sans Arabic", serif; }
/* Tracking breaks the joins in connected script. */
:lang(ar) .kicker { letter-spacing: normal; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 0;
}

p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

img { max-width: 100%; display: block; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-tight { width: min(100% - 2.5rem, var(--wrap-tight)); margin-inline: auto; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: .8rem 1.2rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { inset-inline-start: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================ marks */
.mark { width: 1em; height: 1em; color: var(--accent); flex: none; }

.lockup {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.24rem; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.lockup .mark { font-size: 1.7rem; }
.lockup:hover { color: var(--ink); }
/* The interpunct is the hinge holding two equal doors. */
.dot { color: var(--accent); margin-inline: .1rem; font-weight: 400; }
/* Naskh reads optically smaller than Latin at the same point size. */
.ar-name { font-size: 1.08em; font-family: "Amiri", serif; }

/* ============================================================ header */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-med) var(--e-out), background var(--d-med);
}
.hd.stuck { border-bottom-color: var(--line-soft); }
.hd-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 72px;
}
.hd-actions { display: flex; align-items: center; gap: .45rem; min-width: 0; }

/* Below this the lockup, both toggles and a worded button cannot share a
   line without one of them leaving the screen. The hero form is the first
   thing on the page here, and two more CTAs follow, so the header one is
   the right thing to drop. */
@media (max-width: 560px) {
  /* Two classes, because .btn sets display later in this file and would
     otherwise win on source order at equal specificity. */
  .hd-actions .hd-cta { display: none; }
}

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink2);
  cursor: pointer; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 600;
  transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.icon-btn svg { width: 17px; height: 17px; }
.lang-btn { width: auto; padding-inline: .7rem; letter-spacing: .02em; }

/* ============================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .82rem 1.5rem; border-radius: 12px;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast),
              background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
}
.btn:active { transform: translateY(1px); }

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

/* Brass is the one lit doorway on the page: exactly one button wears it. */
.btn-brass {
  background: linear-gradient(160deg, var(--brass-1), var(--brass-2));
  color: #241a07; box-shadow: var(--shadow-1);
}
.btn-brass:hover { color: #241a07; box-shadow: var(--shadow-2); transform: translateY(-1px); }

.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-sm { padding: .58rem 1.05rem; font-size: .88rem; border-radius: 10px; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }

/* ============================================================ hero */
.hero { position: relative; padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(2rem, 4vw, 3rem); }
/* On anything taller than a phone, the hero is exactly one screen: the fold
   should land under the form, not through the middle of it. */
@media (min-height: 600px) {
  .hero { min-height: calc(100svh - 72px); display: flex; align-items: center; }
  .hero > .wrap { width: min(100% - 2.5rem, var(--wrap)); }
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* The photograph is atmosphere, never content. Two scrims: a vertical one
   that lands the image into the page ground, and a directional one that
   stays opaque behind the column of text and thins out over the arcade, so
   the words clear AA on the scrim alone and the courtyard still breathes. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--bg) 72%, transparent) 42%,
      color-mix(in srgb, var(--bg) 34%, transparent) 78%,
      color-mix(in srgb, var(--bg) 22%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 40%, transparent) 0%,
      color-mix(in srgb, var(--bg) 30%, transparent) 38%,
      color-mix(in srgb, var(--bg) 78%, transparent) 74%,
      var(--bg) 100%);
}
[dir="rtl"] .hero-bg::after {
  background:
    linear-gradient(to left,
      color-mix(in srgb, var(--bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--bg) 72%, transparent) 42%,
      color-mix(in srgb, var(--bg) 34%, transparent) 78%,
      color-mix(in srgb, var(--bg) 22%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 40%, transparent) 0%,
      color-mix(in srgb, var(--bg) 30%, transparent) 38%,
      color-mix(in srgb, var(--bg) 78%, transparent) 74%,
      var(--bg) 100%);
}
/* On narrow screens the text spans the full width, so the directional
   scrim has nowhere to thin out to: go back to a flat, safe wash. */
@media (max-width: 780px) {
  .hero-bg::after, [dir="rtl"] .hero-bg::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 74%, transparent) 0%,
      color-mix(in srgb, var(--bg) 86%, transparent) 46%,
      var(--bg) 100%);
  }
}
.hero-in { position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .hero-in {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
  }
}

/* ------------------------------------------------ the hero seat card
   Dark in both themes on purpose: against limestone it reads as the
   courtyard at night, and it is the one thing on the page that should
   catch the eye before the headline finishes being read. */
.seatcard {
  background: var(--foot-bg);
  border: 1px solid rgba(222, 217, 203, .1);
  border-radius: var(--rad-lg);
  padding: clamp(.95rem, 1.8vw, 1.25rem);
  box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
  margin-top: 2rem;
  /* Capped, because a 10x10 grid grows with its column and was pushing the
     fold past the form. */
  width: 100%; max-width: 380px; margin-inline: auto;
}
@media (min-width: 1000px) { .seatcard { margin-top: 0; } }
.seatcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 110% at 78% 6%, rgba(201, 169, 97, .18), transparent 60%);
}
.seatcard > * { position: relative; }

.seatcard-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem;
}
.seatcard-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--brass-1);
}
:lang(ar) .seatcard-label { text-transform: none; letter-spacing: normal; }
.seatcard-open { font-size: .84rem; color: var(--foot-faint); }

.seatcard-foot { margin-top: .7rem; }

.seatcard-perk {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid var(--foot-line);
  font-size: .84rem; line-height: 1.5; color: var(--foot-ink);
}
.seatcard-perk svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--brass-1); }

/* The sticky header is 72px; without this an anchor drops the target
   underneath it and the reader lands past the field they asked for. */
:target, .form, .close-cta, #seats-hero { scroll-margin-top: 96px; }

/* A brief ring on the field an anchor just jumped to, so the eye lands
   in the right place even though the page moved. */
@keyframes land {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}
.form.landed input[type="email"] {
  animation: land 1.1s var(--e-out) 1;
  border-color: var(--accent);
}

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--accent);
  margin-bottom: 1rem;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55;
}
:lang(ar) .kicker { text-transform: none; }

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  max-width: 17ch;
  margin-bottom: 1.1rem;
}
.hero h1 em {
  font-style: italic; color: var(--accent);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--ink2); max-width: 54ch; line-height: 1.6;
  margin-bottom: 1.5rem;
}
.hero-ar {
  font-family: "Amiri", serif; font-size: 1.3rem;
  color: var(--ink2); margin-bottom: 2rem; max-width: 46ch;
}

/* ============================================================ the form */
.form {
  display: flex; gap: .6rem; flex-wrap: wrap;
  max-width: 520px; margin-bottom: 1rem;
}
.form input[type="email"] {
  flex: 1 1 15rem; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: .85rem 1.05rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface2); color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.form input[type="email"]::placeholder { color: var(--faint); }
.form input[type="email"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-note {
  font-size: .84rem; color: var(--faint); max-width: 48ch;
  display: flex; align-items: flex-start; gap: .45rem;
}
.form-note svg { width: 14px; height: 14px; flex: none; margin-top: .22rem; color: var(--accent); }

.msg { font-size: .92rem; margin-top: .9rem; font-weight: 500; display: none; }
.msg.show { display: block; }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--err); }

/* ============================================================ sections */
.sec { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.sec-alt { background: var(--bg2); }
.sec-head { max-width: 62ch; margin-bottom: 1.5rem; }
.sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: .7rem; }
.sec-head p { color: var(--ink2); font-size: .98rem; line-height: 1.55; }

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ============================================================ problem */
.problem { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .problem { grid-template-columns: 1.05fr .95fr; } }

.problem-fig { position: relative; border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.problem-fig img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  /* Cropped rather than scaling with the column, so the section height is
     set by the prose and not by the photograph. */
  max-height: min(52vh, 400px);
}

.quotes { display: grid; gap: .65rem; margin-top: 1.4rem; }
/* Fragments of the thing Atrium replaces: a chat thread nobody can search. */
.qbit {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-inline-start: 2px solid var(--line);
  border-radius: 12px; padding: .7rem 1rem;
  font-size: .92rem; color: var(--ink2);
}
.qbit b { color: var(--ink); font-weight: 600; }
.qbit span { display: block; font-size: .78rem; color: var(--faint); margin-top: .3rem; }

/* ============================================================ cards */
.cards { display: grid; gap: 1.15rem; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--rad); overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform var(--d-med) var(--e-out), box-shadow var(--d-med);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 1.15rem 1.25rem 1.35rem; }
.card h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.card p { color: var(--ink2); font-size: .92rem; line-height: 1.55; }

/* ============================================================ steps */
.steps { display: grid; gap: 1.5rem; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
/* Numbered because this genuinely is a sequence: you cannot read before
   you are verified, or contribute before you have read. */
.step { position: relative; padding-top: 2.2rem; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; inset-inline-start: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  color: var(--accent);
}
.step::after {
  content: ""; position: absolute; top: .55rem; inset-inline-start: 2.6rem;
  height: 1px; width: calc(100% - 2.6rem); background: var(--line-soft);
}
.step h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.step p { color: var(--ink2); font-size: .9rem; line-height: 1.5; }

/* ============================================================ founding */
.founding {
  position: relative; overflow: hidden;
  background: var(--foot-bg);
  color: var(--foot-ink);
  border-radius: var(--rad-lg);
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  box-shadow: var(--shadow-2);
}
.founding::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 82% 8%, rgba(201, 169, 97, .17), transparent 62%);
  pointer-events: none;
}
.founding-in { position: relative; }

.founding .kicker { color: var(--brass-1); }
.founding h2 { font-size: clamp(1.6rem, 2.9vw, 2.2rem); color: #fff; margin-bottom: .7rem; }
.founding > .founding-in p { color: var(--foot-faint); }
.founding-lede { font-size: .95rem; line-height: 1.55; margin-bottom: 0; max-width: 52ch; }

/* ---- the founding offer, given its own room ---- */
.offer-row { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin: 1.2rem 0 1.3rem; }
@media (min-width: 900px) {
  .offer-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
}

.promise {
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--rad);
  background: rgba(201, 169, 97, .09);
  border: 1px solid rgba(201, 169, 97, .32);
}
.promise-kicker {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--brass-1); margin-bottom: .5rem;
}
:lang(ar) .promise-kicker { text-transform: none; letter-spacing: normal; }
.promise-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.12; letter-spacing: -.015em;
  color: var(--brass-1); margin-bottom: .7rem;
}
:lang(ar) .promise-line { font-family: "Amiri", serif; }
.promise-body { color: var(--foot-ink); font-size: .89rem; line-height: 1.5; }
.promise-body b { color: #fff; }

/* ---- the artifact: a card you can actually hold ---- */
.cardwrap { display: grid; gap: .6rem; justify-items: center; align-content: center; }
.fcard {
  position: relative; overflow: hidden;
  width: min(100%, 250px); aspect-ratio: 1.586;   /* ID-1, a real card */
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  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(0deg) translateY(-3px); }
/* A slow brass glint across the foil. Decoration, so it stops for
   anyone who asked for less motion. */
.fcard-sheen {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(74deg, transparent 42%,
              rgba(212, 180, 108, .16) 50%, transparent 58%);
  animation: glint 7s var(--e-out) infinite;
}
@keyframes glint {
  0%, 62% { transform: translateX(-38%); }
  92%, 100% { transform: translateX(38%); }
}
.fcard > *:not(.fcard-sheen) { position: relative; }

.fcard-top { display: flex; align-items: center; gap: .5rem; }
.fcard-mark { width: 22px; height: 22px; color: var(--brass-1); flex: none; }
.fcard-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: .98rem; color: #f2eee2; letter-spacing: -.01em;
}
.fcard-dot { color: var(--brass-1); margin-inline: .18rem; }
.fcard-name [lang="ar"] { font-family: "Amiri", serif; font-size: 1.06em; }

.fcard-mid { display: grid; gap: .25rem; }
.fcard-role {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; color: rgba(222, 217, 203, .78);
}
:lang(ar) .fcard-role { text-transform: none; letter-spacing: normal; font-size: .74rem; }
.fcard-numline { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.fcard-no {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(148deg, #f0dca6, #e2c885 42%, var(--brass-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.fcard-of {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(234, 230, 218, .82);
  padding: .12rem .42rem;
  border: 1px solid rgba(201, 169, 97, .5);
  border-radius: 999px;
  white-space: nowrap;
}
:lang(ar) .fcard-of { text-transform: none; letter-spacing: normal; font-size: .86rem; }
.fcard-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(222, 217, 203, .5);
}
:lang(ar) .fcard-foot { text-transform: none; letter-spacing: normal; font-size: .76rem; }
.fcard-year { font-family: ui-monospace, Menlo, Consolas, monospace; }
.fcard-site { font-family: ui-monospace, Menlo, Consolas, monospace; text-transform: none; letter-spacing: .04em; }

.cardwrap-note {
  font-size: .8rem; line-height: 1.45; color: var(--foot-faint);
  text-align: center; max-width: 34ch;
}

@media (prefers-reduced-motion: reduce) {
  .fcard { transform: none; transition: none; }
  .fcard-sheen { animation: none; }
}

/* ---- plain-language terms ---- */
.terms-block {
  margin-top: clamp(1.3rem, 2.4vw, 1.8rem);
  padding: clamp(.95rem, 1.9vw, 1.3rem);
  border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--surface);
}
.terms-head {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--accent); margin-bottom: .75rem;
}
:lang(ar) .terms-head { text-transform: none; letter-spacing: normal; }
.terms-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
@media (min-width: 860px) { .terms-list { grid-template-columns: repeat(2, 1fr); gap: .6rem 2rem; } }
.terms-list li {
  color: var(--ink2); font-size: .87rem; line-height: 1.5;
  padding-inline-start: 1rem; position: relative;
}
.terms-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .55;
}
.terms-more { margin-top: .9rem; font-size: .88rem; }

/* ---- consent ---- */
.consent {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: .9rem 0 1rem; max-width: 52ch;
  font-size: .85rem; color: var(--ink2); cursor: pointer;
}
.consent-center { margin-inline: auto; text-align: start; }
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: none; margin: .18rem 0 0;
  border: 1.5px solid var(--line-strong, var(--line)); border-radius: 4px;
  background: var(--surface2); cursor: pointer;
  display: grid; place-content: center;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.consent input::before {
  content: ""; width: 9px; height: 9px; transform: scale(0);
  transition: transform var(--d-fast) var(--e-pop, var(--e-out));
  background: var(--btn-ink);
  clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 2%, 39% 68%);
}
.consent input:checked { background: var(--btn-bg); border-color: var(--btn-bg); }
.consent input:checked::before { transform: scale(1); }
.consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent a { color: var(--accent); }

.perks { list-style: none; padding: 0; margin: 0 0 1.15rem; display: grid; gap: .6rem; }
@media (min-width: 860px) {
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2rem; }
}

/* ---- the same hundred places, restated slim beside the second CTA ---- */
.seatbar-wrap { margin-bottom: 0; }
/* The counter and the button share a line: two stacked full-width blocks
   were pushing this section past a laptop screen on their own. */
.founding-foot { display: grid; gap: 1.1rem; align-items: center; }
@media (min-width: 780px) {
  .founding-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; }
}
.seatbar {
  display: grid; grid-template-columns: repeat(50, 1fr);
  gap: 2px; margin-bottom: .6rem;
}
.seatbar .seat {
  aspect-ratio: auto; height: 20px; border-radius: 2px;
}
@media (max-width: 700px) {
  .seatbar { grid-template-columns: repeat(25, 1fr); }
  .seatbar .seat { height: 18px; }
}
.perks li { display: flex; gap: .7rem; align-items: flex-start; font-size: .91rem; line-height: 1.5; color: var(--foot-ink); }
.perks svg { width: 18px; height: 18px; flex: none; margin-top: .22rem; color: var(--brass-1); }
.perks b { color: #fff; font-weight: 600; }

/* --- the signature: one hundred seats, drawn as the product's ledger --- */
.seats { display: grid; gap: 1.1rem; }
/* Without JS these are never filled; an empty bordered box is worse than
   no box, and the counter beneath still states the position. */
.seats-grid:empty, .seatbar:empty { display: none; }
.seats-grid {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: clamp(3px, .6vw, 5px);
  padding: clamp(.6rem, 1.4vw, .9rem);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--foot-line);
  border-radius: var(--rad);
}
.seat {
  aspect-ratio: 1; border-radius: 3px;
  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), transform 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: pulse 2.4s var(--e-out) infinite;
}
@keyframes pulse {
  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); }
}
.seats-legend {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  font-size: .87rem; color: var(--foot-faint);
}
.seats-n {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.25rem; font-weight: 600; color: var(--brass-1);
  letter-spacing: -.02em;
}
.seats-n span { color: var(--foot-faint); font-size: .95rem; font-weight: 400; }

/* ============================================================ trust */
.trust { display: grid; gap: .95rem; }
@media (min-width: 800px) { .trust { grid-template-columns: repeat(2, 1fr); } }
.tr {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--rad); padding: 1.2rem 1.35rem;
}
.tr h3 { font-size: 1.08rem; margin-bottom: .55rem; display: flex; gap: .6rem; align-items: center; }
.tr h3 svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.tr p { color: var(--ink2); font-size: .89rem; line-height: 1.5; }

/* ============================================================ faq */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: .9rem 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.03rem;
  list-style: none; display: flex; justify-content: space-between;
  gap: 1rem; align-items: center; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400;
  flex: none; transition: transform var(--d-fast) var(--e-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink2); font-size: .96rem; margin-top: .8rem; max-width: 64ch; }

/* ============================================================ closing */
.close-cta { text-align: center; }
.close-cta h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 1rem; }
.close-cta > p { color: var(--ink2); font-size: 1.06rem; max-width: 50ch; margin-inline: auto; margin-bottom: 2.2rem; }
.close-cta .form { margin-inline: auto; justify-content: center; }
.close-cta .form-note { justify-content: center; }

/* ============================================================ footer */
.ft {
  background: var(--foot-bg); color: var(--foot-ink);
  padding: 3.5rem 0 2.5rem; margin-top: 0;
}
.ft-in { display: grid; gap: 2rem; }
@media (min-width: 780px) { .ft-in { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.ft .lockup { color: #fff; }
.ft-tag { color: var(--foot-faint); font-size: .93rem; margin-top: .9rem; max-width: 40ch; }
.ft-links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .92rem; }
.ft-links a { color: var(--foot-ink); text-decoration: none; }
.ft-links a:hover { color: var(--brass-1); }
.ft-bot {
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--foot-line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--foot-faint);
}

/* ============================================================ motion */
.rv { opacity: 0; transform: translateY(18px); }
.rv.in { opacity: 1; transform: none; transition: opacity .7s var(--e-out), transform .7s var(--e-out); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  .seat, .card, .card-img img, .btn { transition: none; }
  .seat.next { animation: none; }
}

/* No-JS: never hide content behind a reveal that will never fire. */
.no-js .rv { opacity: 1; transform: none; }

/* ============================================ short viewports
   Laptops at 768–870px of height are the common case on campus, and the
   dense sections overflow them at the comfortable desktop rhythm. Rather
   than shrink the page for everyone, trade padding and a little type size
   back only when the screen is actually short. */
@media (min-width: 900px) and (max-height: 940px) {
  .sec { padding: clamp(1.5rem, 3vw, 2.4rem) 0; }
  .sec-head { margin-bottom: 1.15rem; }
  .sec-head h2 { font-size: clamp(1.5rem, 2.5vw, 1.95rem); }
  .sec-head p { font-size: .92rem; }

  .founding { padding: clamp(1rem, 2vw, 1.5rem); }
  .founding h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: .5rem; }
  .founding-lede { font-size: .89rem; line-height: 1.5; }
  .offer-row { margin: .95rem 0 1rem; gap: 1.2rem; }
  .promise { padding: 1rem 1.1rem; }
  .promise-line { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .5rem; }
  .promise-body { font-size: .85rem; line-height: 1.45; }
  .fcard { width: min(100%, 215px); }
  .fcard-no { font-size: 1.4rem; }
  .fcard-of { font-size: .74rem; }
  .cardwrap-note { font-size: .75rem; }
  .perks { margin-bottom: .9rem; gap: .5rem 1.8rem; }
  .perks li { font-size: .85rem; line-height: 1.45; }
  .founding-foot { gap: 1.25rem; }

  .card-body { padding: .95rem 1.05rem 1.1rem; }
  .card h3 { font-size: 1.06rem; }
  .card p { font-size: .87rem; }
  .cards { gap: .9rem; }

  .steps { gap: 1.15rem; }
  .step { padding-top: 1.9rem; }
  .terms-block { margin-top: 1.1rem; padding: .9rem 1.05rem; }
  .terms-list li { font-size: .83rem; }
  .tr { padding: 1rem 1.15rem; }
  .tr p { font-size: .85rem; }
  .faq details { padding: .75rem 0; }
}

/* A second, tighter step for genuinely short laptop screens (768px and
   below), where the founding section carries the most content on the page. */
@media (min-width: 900px) and (max-height: 810px) {
  .sec { padding: 1.25rem 0; }
  .founding { padding: .95rem 1.1rem; }
  .founding h2 { font-size: 1.45rem; }
  .founding-lede { font-size: .85rem; }
  .offer-row { margin: .8rem 0 .85rem; gap: 1rem; }
  .promise { padding: .85rem .95rem; }
  .promise-line { font-size: 1.2rem; margin-bottom: .4rem; }
  .promise-body { font-size: .81rem; line-height: 1.4; }
  .fcard { width: min(100%, 190px); }
  .fcard-no { font-size: 1.25rem; }
  .fcard-of { font-size: .68rem; padding: .1rem .34rem; }
  .cardwrap { gap: .45rem; }
  .cardwrap-note { font-size: .72rem; }
  .perks { margin-bottom: .75rem; gap: .42rem 1.6rem; }
  .perks li { font-size: .81rem; line-height: 1.4; }
  .perks svg { width: 15px; height: 15px; }
  .seatbar .seat { height: 15px; }
  .founding-foot { gap: 1rem; }
  .btn-lg { padding: .8rem 1.4rem; font-size: .95rem; }
}

/* The hero on a 720px-tall screen: the form and its consent line must stay
   above the fold, so the display type gives up the space instead. */
@media (min-width: 900px) and (max-height: 810px) {
  .hero h1 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); margin-bottom: .8rem; }
  .hero-sub { font-size: .93rem; line-height: 1.55; margin-bottom: 1.05rem; }
  .hero .kicker { margin-bottom: .75rem; }
  .consent { margin: .65rem 0 .7rem; font-size: .79rem; }
  .form-note { font-size: .78rem; }
  .seatcard { max-width: 320px; }
  .seatcard-perk { font-size: .78rem; }
}