/* ===========================================================================
   منادي · Munadee — the launch site.

   Dark, and not flat dark. The ground is a dye-vat indigo that shifts through
   plum and ember across the page rather than sitting at one value — a souq at
   night, lamps at either end of it. Gold is the accent and it is the only
   thing that ever sits at full brightness.

   Two rules hold it together:

   1. The gradients live on the *page*, not on the components. Sections are
      transparent and let the ground show through, so the colour moves as you
      scroll instead of stopping at every card edge.
   2. Gold is spent on the call and on nothing else. Everything structural is
      indigo, so when saffron appears it means something is happening.

   Every layout rule is logical (inline-start/end), so one stylesheet serves the
   Arabic page and the English one with no flip.
   =========================================================================== */

:root {
  /* --- the ground ------------------------------------------------------- */
  --night-000: #06040E;
  --night-050: #0B0817;
  --night-100: #151027;
  --night-150: #1B1533;
  --night-200: #241C42;
  --night-300: #322650;
  --night-400: #463870;

  /* Kept as aliases so components read the same either way round. */
  --paper: var(--night-050);
  --paper-sunk: var(--night-100);
  --card: rgba(30, 22, 56, 0.55);
  --line: rgba(120, 96, 190, 0.22);
  --line-soft: rgba(120, 96, 190, 0.12);

  /* --- warm off-white, never cold grey ---------------------------------- */
  --ink: #F6F0E7;
  --ink-mid: #B4A7CE;
  --ink-lo: #7E7199;
  --on-night: #F6F0E7;
  --on-night-mid: #B4A7CE;
  --on-night-lo: #7E7199;

  /* --- the call --------------------------------------------------------- */
  --saffron-300: #FFD98F;
  --saffron-400: #FFB63D;
  --saffron-500: #E89419;
  --ember-400: #FF7A52;
  --ember-500: #FF5E3A;
  --ember-ink: var(--saffron-400);
  --call: linear-gradient(135deg, var(--saffron-300), var(--ember-500));
  --call-glow: rgba(255, 138, 61, 0.3);
  --on-call: #2B1206;

  /* --- the other lamps in the souq -------------------------------------- */
  --plum: #7B2C6B;
  --violet: #4B2A8A;
  --rose: #C0356F;

  --mint-400: #3BE0B0;
  --mint-ink: #3BE0B0;
  --hot-400: #FF7A52;
  --hot-500: #FF3B5C;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --ring: 0 0 0 1px var(--line);
  --lift: 0 26px 60px -30px rgba(0, 0, 0, 0.85);
  --lift-dark: 0 34px 74px -34px rgba(0, 0, 0, 0.95);

  --display: "Reem Kufi", "IBM Plex Sans Arabic", serif;
  --body: "Rubik", system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 62ch;
  --page: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--night-050);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* The souq at night: lamps bleeding across the whole page, fixed so the colour
   moves under the content as it scrolls rather than banding at each section. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 82% 4%, rgba(255, 138, 61, 0.20), transparent 62%),
    radial-gradient(58% 46% at 6% 26%, rgba(123, 44, 107, 0.30), transparent 66%),
    radial-gradient(64% 50% at 92% 52%, rgba(75, 42, 138, 0.34), transparent 68%),
    radial-gradient(70% 48% at 18% 78%, rgba(192, 53, 111, 0.20), transparent 66%),
    radial-gradient(80% 60% at 50% 104%, rgba(255, 182, 61, 0.16), transparent 62%);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--call-glow); }

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

/* Film grain. Cheap, static, and the single thing that stops large dark
   gradients from stepping into visible bands on an ordinary phone screen. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- bar ----------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--night-050) 78%, transparent);
  backdrop-filter: blur(16px);
  border-block-end: 1px solid var(--line);
}

.brand { display: flex; align-items: baseline; gap: 9px; }
.brand .rings { color: var(--saffron-400); align-self: center; }
.brand-mark {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  color: var(--saffron-400);
  text-shadow: 0 0 26px var(--call-glow);
}
.brand-word {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.soon-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--saffron-300);
  background: rgba(255, 182, 61, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 182, 61, 0.3);
  white-space: nowrap;
}

.grow { flex: 1; }

.lang {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mid);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.lang:hover { color: var(--ink); background: var(--paper-sunk); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-call {
  background: var(--call);
  color: var(--on-call);
  box-shadow: 0 14px 30px -14px rgba(255, 94, 58, 0.55);
}
.btn-call:hover { filter: brightness(1.07); }

.btn-sm { padding: 7px 13px; font-size: 13.5px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-block { inline-size: 100%; }

/* --- shared type --------------------------------------------------------- */

.eyebrow, .kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-ink);
  margin-block-end: 14px;
}

.display {
  font-family: var(--display);
  font-size: clamp(46px, 8vw, 88px);
  line-height: 0.99;
  letter-spacing: -0.015em;
  background: linear-gradient(118deg, var(--saffron-300), var(--ember-500) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block-end: 18px;
}
.display-sm { font-size: clamp(30px, 4.6vw, 52px); }

.h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.5vw, 41px);
  line-height: 1.12;
  margin-block-end: 20px;
  max-inline-size: 20ch;
}
.h3 {
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.18;
  margin-block-end: 16px;
}

.lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--ink-mid);
  max-inline-size: 46ch;
}
.body { font-size: 16px; line-height: 1.72; color: var(--ink-mid); max-inline-size: var(--measure); }
.body-wide { max-inline-size: 74ch; }
.dim { color: var(--ink-lo); }

.statement {
  font-size: clamp(20px, 2.5vw, 31px);
  line-height: 1.45;
  color: var(--ink);
  max-inline-size: 38ch;
  margin-block-end: 22px;
  text-wrap: balance;
}

/* --- layout -------------------------------------------------------------- */

main { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(72px, 11vw, 144px); }

.hero, .band {
  inline-size: 100%;
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
  padding-block-start: clamp(40px, 7vw, 84px);
  position: relative;
}

/* The call carrying: one warm bloom behind the stage, nothing else. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -34%;
  inset-inline-end: -12%;
  inline-size: 72%;
  block-size: 156%;
  background: radial-gradient(closest-side, var(--call-glow), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.cta-sub { font-size: 13px; color: var(--ink-lo); margin-block-start: 12px; }

.hero-stage { display: flex; flex-direction: column; gap: 12px; }
.stage-caption { font-size: 12px; color: var(--ink-lo); text-align: center; }

/* --- the running auction ------------------------------------------------- */

/* The one dark object on the page — a screen sitting on a table. Redefining
   the ink tokens here relights everything inside it in one place, instead of
   overriding each descendant. */
.auc {
  --ink: var(--on-night);
  --ink-mid: var(--on-night-mid);
  --ink-lo: var(--on-night-lo);
  --line: var(--night-200);

  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--night-100), var(--night-000));
  color: var(--on-night);
  box-shadow: 0 0 0 1px var(--night-300), var(--lift-dark);
}

.auc-top { display: flex; align-items: center; gap: 10px; margin-block-end: 20px; }
.auc-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--hot-500); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
}
.auc-live i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.auc-watching { font-size: 12px; color: var(--ink-lo); margin-inline-end: auto; }

/* Tabular, so a falling clock never shifts the row it sits in. */
.auc-clock {
  font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mid);
  transition: color 200ms ease;
}
.auc-clock.urgent { color: var(--hot-400); }
.auc-clock.bumped { color: var(--mint-400); }

.auc-lot { font-size: 15px; margin-block-end: 4px; }
.auc-price { display: flex; align-items: baseline; gap: 10px; margin-block-end: 6px; }
.auc-cur { font-size: 15px; font-weight: 700; color: var(--ink-lo); }

/* The biggest thing on the page, because it is what everyone in a real room
   is looking at. */
.auc-figure {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--saffron-400);
}

.auc-leader { display: flex; align-items: center; gap: 9px; margin-block-end: 18px; min-block-size: 22px; }
.auc-handle { font-size: 13px; font-weight: 700; color: var(--mint-400); direction: ltr; unicode-bidi: isolate; }
.auc-bids { font-size: 12px; color: var(--ink-lo); }

.auc-feed { list-style: none; display: flex; flex-direction: column; gap: 2px; min-block-size: 104px; margin-block-end: 16px; }
.auc-feed li {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 0; font-size: 12.5px;
  border-block-start: 1px solid var(--line);
  animation: feed-in 260ms ease-out;
}
@keyframes feed-in { from { opacity: 0; transform: translateY(-5px) } }
.auc-feed-handle { color: var(--ink-mid); flex: 1; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .auc-feed-handle { text-align: right; }
.auc-feed-price { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.auc-feed-ext {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--mint-400); padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--mint-400) 15%, transparent);
}

.auc-call {
  padding: 11px; border-radius: var(--radius-sm); text-align: center;
  font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--night-200); color: var(--on-night-mid);
  transition: background 220ms ease, color 220ms ease;
}
.auc-call.urgent { background: color-mix(in srgb, var(--hot-500) 20%, transparent); color: var(--hot-400); }
.auc-call.sold { background: var(--call); color: var(--on-call); }

/* --- what it is ---------------------------------------------------------- */

.what { position: relative; padding-block-start: clamp(40px, 6vw, 76px); }
.what::before {
  content: ""; position: absolute; inset-block-start: 0;
  /* Wide enough to reach both edges at any viewport, and clipped at the root —
     `calc(50% - 50vw)` counted the scrollbar and scrolled the page sideways. */
  inset-inline: -1200px; block-size: 1px; background: var(--line);
}

/* --- categories ---------------------------------------------------------- */

.cats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-block-start: 30px;
}

.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 24px 20px 20px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  /* A wash of the category's own hue, kept very pale so eight of them read as
     one set rather than eight competing colours. */
  background: linear-gradient(158deg, hsl(var(--cat-hue) 52% 22% / 0.9), hsl(calc(var(--cat-hue) - 16) 58% 10% / 0.92));
  box-shadow: 0 0 0 1px hsl(var(--cat-hue) 40% 34% / 0.55);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* A wash of the call across the top edge, so the grid warms toward the mark
   rather than being eight cold rectangles. */
.cat::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--call);
  opacity: 0.4;
  transition: opacity 200ms ease;
}

.cat:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px hsl(var(--cat-hue) 55% 52%), var(--lift); }
.cat:hover::after { opacity: 1; }
.cat:hover .cat-art { color: var(--saffron-300); transform: scale(1.05); }

.cat-art {
  color: var(--saffron-400);
  opacity: 0.92;
  inline-size: 46px;
  margin-block-end: 14px;
  transition: color 200ms ease, transform 200ms ease;
}
.cat-art svg { inline-size: 46px; block-size: 46px; }

.cat-label { font-size: 15.5px; font-weight: 700; }
.cat-note { font-size: 12.5px; color: var(--ink-lo); }

/* --- the clock rail ------------------------------------------------------ */

.clock {
  list-style: none;
  margin-block-start: 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.6vw, 44px);
}
.clock li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }

/* Indigo at 0:45, saffron by 0:00 — time running out toward the hammer. */
.clock::before {
  content: "";
  position: absolute;
  inset-block: 8px 8px;
  inset-inline-start: 83px;
  inline-size: 2px;
  background: linear-gradient(to bottom, var(--night-300), var(--saffron-400));
  border-radius: 2px;
}

.clock-time {
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-lo);
  text-align: end;
  padding-inline-end: 4px;
}
.clock li:last-child .clock-time { color: var(--saffron-400); }
.clock-body h3 { font-size: 17px; font-weight: 700; margin-block-end: 7px; }
.clock-body p { font-size: 15px; line-height: 1.7; color: var(--ink-mid); max-inline-size: 58ch; }

/* --- the two sides ------------------------------------------------------- */

.sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.trust .sides { margin-block-start: 26px; }
.side {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  box-shadow: var(--ring), var(--lift);
}
.points { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.points li { font-size: 14.5px; line-height: 1.68; color: var(--ink-mid); padding-inline-start: 17px; position: relative; }

/* A call-ring at list scale, rather than a bullet. */
.points li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 9px;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--saffron-400);
  box-shadow: 0 0 0 3px rgba(255, 182, 61, 0.18);
}

/* --- chips --------------------------------------------------------------- */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin-block-start: 24px; }
.chips li {
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); backdrop-filter: blur(10px); box-shadow: var(--ring);
  font-size: 13px; font-weight: 600; color: var(--ink-mid);
}

/* --- waitlist ------------------------------------------------------------ */

.waitlist {
  border-block-start: 1px solid var(--line);
  background: radial-gradient(120% 100% at 50% 100%, var(--call-glow), transparent 62%);
  padding: clamp(60px, 9vw, 108px) var(--gutter) clamp(64px, 9vw, 112px);
}
.waitlist-inner { max-inline-size: 620px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.waitlist-inner .rings { color: var(--saffron-400); margin-block-end: 18px; }
.waitlist-inner .lead { max-inline-size: 52ch; }

.wl-form { inline-size: 100%; margin-block-start: 30px; text-align: start; display: flex; flex-direction: column; gap: 14px; }

/* Netlify's honeypot: a real field, hidden from people, that bots fill in. */
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wl-row { display: flex; gap: 12px; flex-wrap: wrap; }
.wl-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 150px; }
.wl-grow { flex: 1; }
.wl-field span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-lo); }
.wl-field input {
  inline-size: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(11, 8, 23, 0.55);
  color: var(--ink);
  font: inherit;
  box-shadow: var(--ring);
  transition: box-shadow 0.16s ease;
}
.wl-field input::placeholder { color: var(--ink-lo); }
.wl-field input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--saffron-400), 0 0 0 4px var(--call-glow); }

.wl-roles { border: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wl-roles legend {
  float: inline-start;
  inline-size: 100%;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-lo); margin-block-end: 6px;
}
.wl-roles label { cursor: pointer; }
.wl-roles input { position: absolute; opacity: 0; pointer-events: none; }
.wl-roles span {
  display: inline-block;
  padding: 8px 16px; border-radius: 999px;
  background: var(--card); box-shadow: var(--ring);
  font-size: 14px; font-weight: 600; color: var(--ink-mid);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.wl-roles input:checked + span { color: var(--saffron-300); box-shadow: 0 0 0 1.5px var(--saffron-400); background: rgba(255, 182, 61, 0.14); }
.wl-roles input:focus-visible + span { outline: 2px solid var(--saffron-400); outline-offset: 2px; }

.wl-privacy { font-size: 12px; color: var(--ink-lo); text-align: center; }
.wl-msg { font-size: 14px; font-weight: 600; text-align: center; min-block-size: 20px; }
.wl-msg.ok { color: var(--mint-ink); }
.wl-msg.bad { color: #FF7E93; }

/* --- foot ---------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 2;
  padding: 28px var(--gutter) 44px;
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mid);
}
.foot a:hover { color: var(--saffron-400); }

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { order: -1; }
  .clock li { grid-template-columns: 58px minmax(0, 1fr); }
  .clock::before { inset-inline-start: 57px; }
}

@media (max-width: 560px) {
  .bar { gap: 8px; padding-inline: 14px; }
  .brand-word, .soon-pill { display: none; }
  .cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .cat { padding: 18px 14px 16px; }
  .cat-art, .cat-art svg { inline-size: 36px; block-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .auc-feed li, .auc-live i { animation: none; }
  .cat, .auc-clock, .auc-call, .btn { transition: none; }
  .cat:hover { transform: none; }
}

/* --- try a bid -------------------------------------------------------------
   The one control on the page that touches the product rather than describing
   it. It sits directly under the auction so the cause and the effect are in
   the same glance. */

.try {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.try-btn {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.try-btn:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

.try-hint {
  font-size: 13px;
  color: var(--ink-lo);
  transition: color 160ms ease;
}
.try-hint.yours { color: var(--mint-ink); font-weight: 700; }
.try-hint.outbid { color: #FF7E93; font-weight: 700; }
.try-hint.won { color: var(--ember-ink); font-weight: 700; }

/* The visitor's own rows in the feed, so being outbid is legible at a glance. */
.auc-feed li.you .auc-feed-handle { color: var(--mint-400); font-weight: 700; }

/* --- reveal on scroll ------------------------------------------------------
   Added by script only, so a page with JavaScript off is fully visible rather
   than fully blank. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .screen-play { transition: none; }
  .screen-play:hover { transform: none; }
}

/* --- the two-phone journey -------------------------------------------------
   Two devices side by side running one lot: the seller's side and the buyer's
   side of the same moment. Rendered rather than filmed, so it stays sharp,
   weighs nothing and loops without a seam.

   The phones are the second place boldness is spent (the hero auction is the
   first). They are dark, like every other screen on this page, so they read as
   objects sitting on the paper. */

.journey .stage {
  margin-block-start: 34px;
}

.phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  justify-content: center;
  gap: clamp(14px, 2.6vw, 34px);
  justify-items: center;
  align-items: start;
}

.phone {
  inline-size: 100%;
  max-inline-size: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.phone-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-lo);
}
.phone-seller .phone-label { color: var(--saffron-400); }
.phone-buyer .phone-label { color: var(--mint-ink); }

/* The handset. Drawn, not an image — one border radius and a rim light. */
.phone-shell {
  inline-size: 100%;
  aspect-ratio: 9 / 16;
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(160deg, #2A2340, #100C1E 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 30px 60px -28px rgba(23, 16, 46, 0.6);
  transition: opacity 400ms ease;
}

.phone-screen {
  position: relative;
  block-size: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--night-050);
  display: flex;
  flex-direction: column;
  color: var(--on-night);
}

.phone.is-dim .phone-shell { opacity: 0.72; }

/* --- the feed ------------------------------------------------------------ */

.feed {
  position: relative;
  flex: 1;
  min-block-size: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(88% 66% at 50% 34%, #4A2A57 0%, #241536 46%, #120B22 100%);
  overflow: hidden;
}

/* A warm key light from the top, the way a piece is lit when it is held up. */
.feed::before {
  content: "";
  position: absolute;
  inset-block-start: -34%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 150%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 190, 110, 0.3), transparent 70%);
}

.feed-item {
  position: relative;
  inline-size: 62%;
  animation: turn 9s ease-in-out infinite;
}
.feed-item svg { inline-size: 100%; block-size: auto; }

@keyframes turn {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-5px); }
}

.feed-chrome {
  position: absolute;
  inset-block-start: 10px;
  inset-inline: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hot-500);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.feed-live i {
  inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: #fff; animation: pulse 1.6s ease-in-out infinite;
}

.feed-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 6, 15, 0.6);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--on-night-mid);
}

/* --- the panel ------------------------------------------------------------ */

.panel {
  flex: 0 0 auto;
  padding: 13px 14px 15px;
  background: linear-gradient(180deg, rgba(13, 10, 24, 0.4), var(--night-100));
  border-block-start: 1px solid var(--night-200);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel-lot { font-size: 11px; color: var(--on-night-mid); }

.panel-row { display: flex; align-items: baseline; gap: 8px; }

.panel-price {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--saffron-400);
}
.phone.is-settled .panel-price { color: var(--mint-400); }

.panel-clock {
  margin-inline-start: auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-night-mid);
  transition: color 200ms ease;
}
.panel-clock.urgent { color: var(--hot-400); }
.panel-clock.bumped { color: var(--mint-400); }

.panel-note { font-size: 10.5px; line-height: 1.4; color: var(--on-night-lo); min-block-size: 15px; }
.panel-note.good { color: var(--mint-400); font-weight: 700; }
.panel-note.bad { color: #FF7E93; font-weight: 700; }

.panel-action {
  margin-block-start: 4px;
  padding: 9px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  background: var(--night-200);
  color: var(--on-night-lo);
  cursor: default;
  transition: background 260ms ease, color 260ms ease;
}
.panel-action.is-on { background: var(--call); color: var(--on-call); }

/* --- toast ---------------------------------------------------------------- */

/* Over the picture, not over the panel — sat lower it covered the ticker, so
   the one thing the toast was announcing (who is bidding) was hidden by it. */
.toast {
  position: absolute;
  inset-block-start: 40px;
  inset-inline: 12px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(8, 6, 15, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--on-night);
}
.toast.in { animation: toast-in 260ms ease-out; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* The hammer: one warm flash across the screen, then it settles. */
.phone.is-sold .phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 40%, var(--call-glow), transparent 70%);
  animation: hammer 900ms ease-out;
}
@keyframes hammer {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- the step track ------------------------------------------------------- */

.track {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-block-start: 26px;
}

.track li {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-lo);
  background: var(--card);
  backdrop-filter: blur(8px);
  box-shadow: var(--ring);
  transition: color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}
.track li.on {
  color: var(--on-call);
  background: var(--call);
  box-shadow: 0 8px 18px -8px rgba(255, 94, 58, 0.6);
}

@media (max-width: 560px) {
  .phones { gap: 10px; }
  .phone-shell { padding: 6px; border-radius: 26px; }
  .phone-screen { border-radius: 20px; }
  .panel-price { font-size: 17px; }
  .panel { padding: 9px 10px 11px; }
  .track li { font-size: 10px; padding: 4px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed-item, .feed-live i, .toast.in, .phone.is-sold .phone-screen::after { animation: none; }
  .track li, .panel-action, .panel-clock, .phone-shell { transition: none; }
}

/* --- chat, ticker and controls in the phones -------------------------------
   The furniture of a live room. A show is a crowd, so the buyer's screen has
   the crowd on it: people asking about shipping, the seller answering, and a
   ticker of who is actually in the bidding rather than a single price. */

.chat {
  position: absolute;
  inset-block-end: 8px;
  inset-inline: 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.chat li {
  align-self: start;
  max-inline-size: 92%;
  padding: 4px 8px;
  border-radius: 9px;
  background: rgba(6, 4, 14, 0.6);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--on-night);
  animation: chat-in 320ms ease-out;
}
.chat li b {
  color: var(--saffron-300);
  font-weight: 700;
  margin-inline-end: 5px;
}
/* The seller answering, so the room reads as a conversation not a feed. */
.chat li.own {
  background: rgba(255, 182, 61, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 182, 61, 0.28);
}
.chat li.own b { color: var(--saffron-400); }

@keyframes chat-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Who is actually in it. A single price hides the fact that four people are
   fighting over the thing, which is the part that makes a room a room. */
.ticker {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-block: 2px 1px;
}
.ticker li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  padding: 2px 0;
  color: var(--on-night-lo);
  border-block-start: 1px solid rgba(120, 96, 190, 0.14);
}
.ticker li span { flex: 1; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .ticker li span { text-align: right; }
.ticker li b { font-variant-numeric: tabular-nums; color: var(--on-night-mid); font-weight: 600; }
.ticker li.you span,
.ticker li.you b { color: var(--mint-400); font-weight: 700; }

/* What a seller reaches for without leaving the broadcast. */
.ctrls {
  position: absolute;
  inset-block-end: 8px;
  inset-inline: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ctrl {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(6, 4, 14, 0.62);
  backdrop-filter: blur(6px);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-night-lo);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ctrl.is-on { color: var(--mint-400); box-shadow: inset 0 0 0 1px rgba(59, 224, 176, 0.35); }

.panel-actions { display: flex; align-items: center; gap: 8px; }
.panel-actions .panel-action { flex: 1; }
.panel-alt {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--on-night-lo);
  white-space: nowrap;
  padding: 8px 0;
}

/* Camera texture over the feed, so it reads as a lens rather than a flat fill. */
.feed-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
}

.item-art { inline-size: 100%; block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .chat li { animation: none; }
}

/* --- getting started -------------------------------------------------------
   The one section that is genuinely a sequence, so it is genuinely numbered.
   Everywhere else on this page a number would have been decoration. */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  margin-block-start: 30px;
  counter-reset: none;
}

.steps li {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  box-shadow: var(--ring);
}

.step-n {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  margin-block-end: 14px;
  background: var(--call);
  color: var(--on-call);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.steps h3 { font-size: 16px; font-weight: 700; margin-block-end: 6px; }
.steps p { font-size: 14px; line-height: 1.65; color: var(--ink-mid); }

.note {
  margin-block-start: 20px;
  font-size: 14px;
  color: var(--saffron-300);
  font-weight: 600;
}

/* --- what it costs ---------------------------------------------------------
   A price list, set as one. The point of the section is that there is almost
   nothing in it, so it is laid out to be scanned in three seconds. */

.rate {
  margin-block: 30px 22px;
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  box-shadow: var(--ring);
  overflow: hidden;
  max-inline-size: 560px;
}

.rate-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 20px;
  border-block-start: 1px solid var(--line-soft);
}
.rate-row:first-child { border-block-start: 0; }

.rate-row dt { flex: 1; font-size: 15px; color: var(--ink-mid); }
.rate-row dd {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* The only row that costs anything is the only one in gold. */
.rate-row:nth-child(4) dd { color: var(--saffron-400); }

.points-wide { max-inline-size: 66ch; margin-block-end: 26px; }

/* --- trust ---------------------------------------------------------------- */

.compliance {
  margin-block-start: 20px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(11, 8, 23, 0.4);
  box-shadow: var(--ring);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-lo);
}

/* --- questions -------------------------------------------------------------
   Native <details>, so it works with no script, is keyboard-operable for free,
   and a browser's find-in-page can still reach the answers. */

.faq {
  margin-block-start: 28px;
  max-inline-size: 78ch;
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  box-shadow: var(--ring);
  overflow: hidden;
}

.faq details { border-block-start: 1px solid var(--line-soft); }
.faq details:first-child { border-block-start: 0; }

.faq summary {
  padding: 16px 20px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 160ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--saffron-300); }

.faq summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 19px;
  font-weight: 400;
  color: var(--saffron-400);
  transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-mid);
  max-inline-size: 68ch;
}

/* --- footer --------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 6vw, 64px) var(--gutter) 40px;
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 34px;
  font-size: 13px;
  color: var(--ink-mid);
  text-align: start;
  align-items: stretch;
}

.foot-top {
  inline-size: 100%;
  max-inline-size: var(--page);
  margin-inline: auto;
  display: flex;
  gap: clamp(28px, 6vw, 80px);
  flex-wrap: wrap;
  justify-content: space-between;
}

.foot-brand { display: flex; flex-direction: column; gap: 8px; max-inline-size: 34ch; }
.foot-brand .rings { color: var(--saffron-400); }
.foot-brand .brand-mark { font-size: 26px; }

.foot-cols { display: flex; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; }
.foot-cols > div { display: flex; flex-direction: column; gap: 9px; }
.foot-cols h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-lo);
  margin-block-end: 2px;
}
.foot-cols a { color: var(--ink-mid); transition: color 140ms ease; }
.foot-cols a:hover { color: var(--saffron-400); }

.foot-legal {
  inline-size: 100%;
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--line-soft);
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary, .faq summary::after, .foot-cols a { transition: none; }
}