/* Scroll Felt — live website player doors (www, trust, support, invite,
   waitlist, privacy, terms, login). Table keeps table.css. /admin is site.css. */

:root {
  color-scheme: dark;
}

.theme-scroll-felt {
  /* felt-reduced family ground, cream ink, one warm brass accent */
  --ground: #0a1512;
  --ground-2: #0d1c17;
  --ground-3: #11241d;
  --card: #12271f;
  --card-hi: #17332a;

  --ink: #f4efe2;
  --ink-2: #a6b6ab;
  --ink-3: #7d8f84;

  --cream: #efe9d9;
  --gold: #d9b566;
  --gold-dim: #a8873f;
  --bad: #e08a7a;

  --line: rgba(239, 233, 217, 0.14);
  --line-2: rgba(239, 233, 217, 0.28);
  --focus: #d9b566;

  /* 2026 marketing UI: heavy geometric sans if present, system display if not.
     No webfont is fetched, so the comp opens over file:// with no network. */
  --font-display: "Sora", "Poppins", "Archivo", "Segoe UI Variable Display",
                  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  /* big by default — this is the whole point of the comp */
  --t-display: clamp(2.45rem, 7.6vw, 5.4rem);
  --t-h2: clamp(2rem, 5.2vw, 3.6rem);
  --t-h3: clamp(1.45rem, 2.6vw, 2rem);
  --t-lead: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
  --t-body: clamp(1.15rem, 0.95rem + 0.4vw, 1.35rem);
  --t-small: clamp(0.95rem, 1.1vw, 1.05rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.875rem;
  --s-4: 1.25rem;
  --s-5: 1.75rem;
  --s-6: 2.5rem;
  --s-7: 3.25rem;
  --s-8: 4.75rem;

  --wrap: 76rem;
  --measure: 46rem;
  --radius: 18px;
  --radius-sm: 999px;
  --nav-h: 4.5rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* felt: a faint weave plus two low ambient pools, so the ground is not flat black */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 15% -10%, rgba(60, 120, 96, 0.10), transparent 70%),
    radial-gradient(50rem 40rem at 100% 110%, rgba(216, 178, 92, 0.06), transparent 70%),
    var(--ground);
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -0.025em; }

p { margin: 0; }
p + p { margin-top: var(--s-4); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--ink);
  max-width: 34ch;
}

.say {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

.say strong { color: var(--ink); font-weight: 700; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-4);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

@media (min-width: 720px) {
  .wrap { padding-inline: var(--s-6); }
}

/* single-column doors: sign-in, and anything else that is one task */
.wrap.narrow { max-width: 36rem; }

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cream);
  color: var(--ground);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- top nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 21, 18, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand .pip { color: var(--gold); font-size: 1.1em; line-height: 1; }
.brand:hover { color: #fff; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The doors never collapse into a menu. On a phone they drop to their own
   row under the brand, so the whole site is readable without a tap. */
.nav-end {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* no fat underline anywhere: spacing, a hover fade, and a 2px bar */
.nav-links a {
  display: inline-block;
  position: relative;
  padding: 0.9rem 0.95rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.5rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta {
  padding: 0.7rem 1.25rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-cta::after { display: none; }
.nav-cta:hover { border-color: var(--cream); background: rgba(239, 233, 217, 0.08); }

@media (max-width: 760px) {
  .nav-in {
    flex-wrap: wrap;
    gap: 0 var(--s-3);
    min-height: 0;
    padding-block: 0.65rem 0;
  }

  .brand { font-size: 1.12rem; }

  /* order pulls the account controls up beside the brand and leaves the
     full width of the second row to the doors */
  .nav-end { order: 2; }

  .nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 0 var(--s-4);
    margin-top: 0.15rem;
  }

  .nav-links a { padding: 0.5rem 0 0.65rem; font-size: 1rem; }
  .nav-links a::after { left: 0; right: 0; bottom: 0.3rem; }

  .nav-cta { padding: 0.5rem 1rem; font-size: 0.95rem; }
}

@media (max-width: 380px) {
  .nav-links { gap: 0 var(--s-3); }
  .nav-links a { font-size: 0.94rem; }
}

/* ---------- buttons and pills: every link in body copy is one of these ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.95rem 1.85rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}

.btn-lg { min-height: 4rem; font-size: 1.2rem; padding: 1.1rem 2.25rem; }

.btn-primary { background: var(--cream); color: var(--ground); }
.btn-primary:hover { background: #fff; transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}
.btn-ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(239, 233, 217, 0.08);
  transform: translateY(-2px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* After .btn so inline-flex cannot leak Open Play or guest CTAs. */
.btn[hidden],
a.btn[hidden],
button.btn[hidden],
[hidden],
html.signed-in [data-guest-only],
html:not(.signed-in) [data-signed-in] {
  display: none !important;
}

.say a,
.lead a,
.hero-sub a,
.legal a,
.foot-note a,
.ticks a {
  color: var(--gold);
  text-underline-offset: 0.2em;
}

@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

/* a quiet link is still a pill, never underlined cream text */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.55rem 1.15rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease;
}
.pill::after { content: "→"; color: var(--gold); font-weight: 700; }
.pill:hover {
  border-color: var(--cream);
  background: rgba(239, 233, 217, 0.07);
  transform: translateY(-1px);
}
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- section rhythm ---------- */

.sec { padding-block: var(--s-7); }

@media (min-width: 900px) {
  .sec { padding-block: var(--s-8); }
}

.sec-alt { background: var(--ground-2); border-block: 1px solid var(--line); }

.sec-head { max-width: 54rem; margin-bottom: var(--s-5); }
/* ch is measured against the heading's own size, so this holds a display line to
   roughly three or four words without squeezing it into a column */
.sec-head h2 { max-width: 20ch; }
.sec-head h2 + .say { margin-top: var(--s-4); max-width: 46rem; }

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

/* Heroes are sized so the section under them peeks above the fold. A
   full-viewport hero costs a whole swipe before the page says anything else. */
.hero {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: center;
  padding-block: var(--s-7);
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  background-image: url("/assets/www/hero-table.png");
  background-size: cover;
  background-position: 62% center;
  transform: scale(1.03);
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 21, 18, 0.92) 0%, rgba(10, 21, 18, 0.78) 38%,
                    rgba(10, 21, 18, 0.30) 68%, rgba(10, 21, 18, 0.52) 100%),
    linear-gradient(180deg, rgba(10, 21, 18, 0.75) 0%, rgba(10, 21, 18, 0) 30%,
                    rgba(10, 21, 18, 0.85) 100%);
}

/* insurance where cream type crosses a lit card face */
.hero h1, .hero .lead, .hero .eyebrow,
.band h2, .band .say, .band .lead {
  text-shadow: 0 2px 24px rgba(10, 21, 18, 0.6);
}

.hero-in { position: relative; max-width: 44rem; }
.hero h1 { margin-bottom: var(--s-4); }
.hero .lead { color: var(--ink); max-width: 36ch; }

.hero-sub { margin-top: var(--s-5); }

/* On a laptop the display face is wider than a 44rem column, so the headline
   broke to four lines and pushed the next section off the bottom. The lead
   keeps its own 36ch measure, so only the headline gets the extra room. */
@media (min-width: 1080px) {
  .hero-in { max-width: 60rem; }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.scroll-cue span:last-child { animation: bob 2.2s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-width: 720px) {
  .hero { padding-block: var(--s-6); }
  .hero-sub { margin-top: var(--s-4); }
  .hero-art { background-position: 68% center; }
  .hero-art::after {
    background:
      linear-gradient(180deg, rgba(10, 21, 18, 0.88) 0%, rgba(10, 21, 18, 0.74) 40%,
                      rgba(10, 21, 18, 0.95) 100%);
  }
  .scroll-cue { display: none; }
}

/* short hero for the secondary pages */
.hero-short { min-height: 54vh; min-height: 54svh; }
.hero-short .hero-art { background-position: 76% 45%; }

/* ---------- 3-up stat / icon row ---------- */

.trio {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.stat .ico {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin-bottom: var(--s-4);
}

.stat h3 { margin-bottom: var(--s-3); }
.stat p { color: var(--ink-2); font-size: var(--t-body); line-height: 1.45; }

/* ---------- full-bleed art band ---------- */

.band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 56vh;
  padding-block: var(--s-7);
  overflow: hidden;
}

.band-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* two scrims: one across, one up. Art stays legible, so does the type on top of it */
.band-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 21, 18, 0.94) 0%, rgba(10, 21, 18, 0.88) 45%,
                    rgba(10, 21, 18, 0.15) 85%),
    linear-gradient(180deg, rgba(10, 21, 18, 0.55) 0%, rgba(10, 21, 18, 0.22) 28%,
                    rgba(10, 21, 18, 0.82) 62%, rgba(10, 21, 18, 1) 100%);
}

.band-hand .band-art { background-image: url("/assets/www/hand-spades.png"); background-position: 72% center; }
.band-table .band-art { background-image: url("/assets/www/hero-table.png"); background-position: 66% center; }

.band-in { position: relative; max-width: 40rem; }
.band h2 { max-width: 16ch; margin-bottom: var(--s-4); }

@media (max-width: 720px) {
  .band { min-height: 62vh; }
  .band-hand .band-art { background-position: 62% 22%; }
  /* on a narrow screen the art gets the top half and the copy gets clean felt */
  .band-art::after {
    background: linear-gradient(180deg, rgba(10, 21, 18, 0.45) 0%, rgba(10, 21, 18, 0.2) 18%,
                                rgba(10, 21, 18, 0.86) 42%, var(--ground) 60%);
  }
}

/* ---------- split: image + up to four bullets ---------- */

.split {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; gap: var(--s-7); }
  .split-flip .split-media { order: 2; }
}

.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.split-media img { width: 100%; height: 100%; object-fit: cover; }

.split h2 { margin-bottom: var(--s-5); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.ticks li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.ticks li::before {
  content: "♠";
  color: var(--gold);
  font-size: 0.95rem;
  flex: none;
}

/* ---------- two big tiles ---------- */

.tiles {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 15rem;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(28rem 20rem at 85% 0%, rgba(216, 178, 92, 0.10), transparent 70%),
    var(--card);
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.tile-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.tile h3 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); max-width: 16ch; }
.tile p { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
.tile .pill { margin-top: auto; align-self: flex-start; }

/* whole-card link: the card is the link, so nothing inside needs an underline */
.tile-link { text-decoration: none; color: inherit; }
.tile-link:hover { border-color: var(--line-2); background-color: var(--card-hi); transform: translateY(-3px); }
.tile-link .go { margin-top: auto; color: var(--gold); font-weight: 700; }
.tile-link .go::after { content: " →"; }

/* ---------- chips: bots as avatars ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 5.5rem;
}

.chip .disc {
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background: var(--card-hi);
  border: 2px dashed rgba(216, 178, 92, 0.55);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gold);
}

.chip .name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }

/* label chips used for statuses and outcomes */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); list-style: none; padding: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-2);
  background: rgba(239, 233, 217, 0.04);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.tag-quiet { color: var(--ink-2); border-color: var(--line); }
.tag-quiet .dot { background: var(--ink-3); }

/* ---------- video placeholder ---------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(40rem 24rem at 50% 45%, rgba(60, 120, 96, 0.16), transparent 70%),
    var(--ground-3);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.video-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }

.video .play {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: clamp(4.5rem, 9vw, 6.5rem);
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: rgba(239, 233, 217, 0.06);
  color: var(--cream);
}

.video .play svg { width: 40%; height: 40%; margin-left: 8%; }

.video .label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- statement panel ---------- */

.statement {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(40rem 24rem at 10% 0%, rgba(216, 178, 92, 0.10), transparent 65%),
    var(--card);
  padding: var(--s-6) var(--s-5);
}

@media (min-width: 900px) {
  .statement { padding: var(--s-7) var(--s-6); }
}

.statement h2 { max-width: 18ch; margin-bottom: var(--s-4); }

/* ---------- community cards ---------- */

.cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.card:hover { border-color: var(--line-2); background: var(--card-hi); transform: translateY(-3px); }

.card h3 { font-size: 1.45rem; }
.card p { color: var(--ink-2); font-size: 1.12rem; line-height: 1.45; }

.card-foot {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-3);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
}

.status-open::before { background: #4fbf85; }
.status-announced::before { background: var(--gold); }
.status-pending::before { background: var(--gold-dim); }
.status-done::before { background: #6d8ea0; }
.status-historical::before { background: #7d8f84; }
.status-unverified::before {
  background: transparent;
  border: 2px solid var(--ink-3);
  width: 11px;
  height: 11px;
}

/* ---------- app pages: support, account ----------
   Same ground, type, and chrome as the marketing doors, plus the few
   components a form and an inbox need. */

.page-head {
  padding-block: var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.page-head h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin-bottom: var(--s-4); }
.page-head .lead { color: var(--ink-2); max-width: 44ch; }
.page-head .cs-install-hint { max-width: 52ch; }
.page-head .cs-install-hint [data-cs-install]:not([hidden]) {
  display: flex;
  width: max-content;
  margin-top: var(--s-2);
}
.page-head .cs-install-hint [data-cs-install-note]:not([hidden]) {
  display: block;
  margin-top: var(--s-2);
}
html.cs-standalone .cs-install-hint { display: none; }
.page-head .tags { margin-top: var(--s-4); }

/* the sticky header would otherwise sit on top of whatever #inbox lands on */
:target { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

.pill-jump::after { content: "↓"; }

.duo { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }

/* 1100, not 900: a landscape phone is ~932px and two columns leave a
   dead strip between Partners 200 and Solo 100, plus a cramped custom form. */
@media (min-width: 1100px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
}

/* blocks stacked inside one section, so nothing needs its own margin */
.stack { display: grid; gap: var(--s-4); }

@media (min-width: 900px) {
  .stack { gap: var(--s-5); }
}

.panel {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.panel > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.panel > h3 { font-size: 1.22rem; letter-spacing: -0.015em; }
.panel p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.5; max-width: var(--measure); }
.panel p strong { color: var(--ink); }
.panel a:not(.btn):not(.pill) { color: var(--gold); text-underline-offset: 0.2em; }

/* one rhythm rule instead of a margin on every element */
.panel > * + * { margin-top: var(--s-3); }
.panel > * + h3 { margin-top: var(--s-5); }
.panel > h2 + * { margin-top: var(--s-4); }

.tiny { font-size: 0.95rem; line-height: 1.5; color: var(--ink-3); }
.tiny a { color: var(--gold); }
.form-err,
#inviteMsg:not(:empty),
#phoneMsg:not(:empty),
#codeMsg:not(:empty),
#waitMsg:not(:empty) {
  color: var(--bad);
}

/* ---------- forms ---------- */

.field { display: grid; gap: 0.45rem; }

.field > label,
.panel > label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

input, select, textarea {
  width: 100%;
  max-width: var(--measure);
  min-height: 3.25rem;
  padding: 0.75rem 0.95rem;
  font-family: var(--font-ui);
  /* stays >=16px so iOS Safari does not zoom the page on focus */
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  color-scheme: dark;
  background-color: var(--ground-3);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}

textarea { min-height: 9rem; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  padding-right: 2.4rem;
  /* longhands so Android Chrome does not drop the felt fill when the
     chevron images are applied */
  background-color: var(--ground-3);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) calc(50% - 1px), calc(100% - 1rem) calc(50% - 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:disabled { color: var(--ink-3); }

/* wide enough that the country and the number sit on one row without
   squeezing either, and it collapses before the select truncates */
.phone-row {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: var(--s-3);
  align-items: end;
}

@media (max-width: 34rem) {
  .phone-row { grid-template-columns: 1fr; }
}

.otp-code {
  letter-spacing: 0.42em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
}

.hidden { display: none !important; }

.btn-sm { min-height: 2.9rem; padding: 0.55rem 1.2rem; font-size: 1rem; }

/* inline actions inside a panel stay on one line, unlike the page-level rows */
.btn-row-tight { margin-top: var(--s-3); gap: var(--s-2); }

@media (max-width: 480px) {
  .btn-row-tight { flex-direction: row; }
  .btn-row-tight .btn { width: auto; }
}

/* ---------- notes and inbox ---------- */

.notes { display: grid; gap: var(--s-3); }

/* a note is read, not filled in, so it gets a margin rule and a wash
   instead of the rounded field box */
.note {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--line-2);
  border-radius: 0 12px 12px 0;
  background: rgba(239, 233, 217, 0.04);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.5;
}

.note.unread { border-left-color: var(--gold); background: rgba(216, 178, 92, 0.08); }

.note .who {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}

.note strong { font-weight: 700; }

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

.foot {
  border-top: 1px solid var(--line);
  background: var(--ground-2);
  padding-block: var(--s-6);
}

.foot-in { display: grid; gap: var(--s-4); }

.foot .brand { margin-right: 0; }

.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0; padding: 0; }

.foot-links a {
  display: inline-block;
  padding: 0.45rem 0;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.foot-links a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.foot-note { color: var(--ink-3); font-size: 0.98rem; }

.comp-note {
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
  color: var(--ink-3);
  font-size: 0.9rem;
}
.comp-note a { color: var(--ink-2); }

/* Guest CTAs: hide before chrome.js if a session cookie is present (no flash). */

.nav-end .bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0 0.35rem;
  gap: 0.15rem;
  line-height: 1;
  color: var(--ink-2);
  text-decoration: none;
  opacity: 0.55;
}
.nav-end .bell::after { display: none; }
.nav-end .bell.has-mail { opacity: 1; color: var(--gold); }
.nav-end .bell > .bell-icon,
.nav-end .bell > [aria-hidden] {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1;
  filter: grayscale(1);
}
.nav-end .bell.has-mail > .bell-icon,
.nav-end .bell.has-mail > [aria-hidden] { filter: none; }
.bell-count {
  display: inline-block;
  margin-left: 0.2rem;
  min-width: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ground);
  font-size: 0.7rem;
  font-weight: 800;
}

.nav-account { position: relative; }
.nav-account summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1.25rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
}
.nav-account summary::-webkit-details-marker { display: none; }
.nav-account summary::after { content: " ▾"; font-size: 0.75em; opacity: 0.7; }
.nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 11rem;
  padding: 0.45rem 0.15rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  z-index: 60;
}
.nav-menu a, .nav-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1rem;
  cursor: pointer;
  text-decoration: none;
}
.nav-menu a:hover, .nav-menu button:hover {
  background: rgba(239, 233, 217, 0.08);
}

@media (max-width: 760px) {
  .nav-account summary { padding: 0.5rem 1rem; font-size: 0.95rem; }
}

/* ---------- landscape phone ----------
   A 360px-tall window cannot carry a display face sized for a laptop: the
   sticky bar alone was a fifth of it and the headline filled the rest. Size
   the big type off the viewport height and let every band be content-tall. */

@media (orientation: landscape) and (max-height: 520px) {
  .theme-scroll-felt {
    --t-display: clamp(1.7rem, 7vh, 2.6rem);
    --t-h2: clamp(1.4rem, 5.6vh, 2.1rem);
    --t-h3: 1.25rem;
    --t-lead: 1.08rem;
    --t-body: 1.02rem;
    --nav-h: 3rem;
    --s-7: 2.25rem;
    --s-8: 2.75rem;
  }

  .nav { position: static; }
  .hero, .hero-short, .band { min-height: 0; }
  .hero { padding-block: var(--s-5); }
  .btn-lg { min-height: 3.25rem; font-size: 1.05rem; padding: 0.7rem 1.6rem; }
  .chip .disc { width: 4rem; height: 4rem; font-size: 1.4rem; }
  .tile { min-height: 0; }
}

.wallet-twin { margin-top: var(--s-4); }
.wallet-twin .wallet-bal {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
}
.wallet-twin .store-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 14px;
}
.acct-status { min-height: 1.2em; }
.acct-status.is-ok { color: #b8e0c4; }
.acct-status.is-bad { color: #f0a3a3; }
.acct-status.is-busy { color: var(--gold); }

.legal h2 { margin-top: var(--s-6); }
.legal ul { padding-left: 1.2em; }
.turnstile-box { min-height: 65px; width: 100%; margin: var(--s-3) 0; }
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
  color: var(--ink-3);
  font-size: var(--t-small);
}
.stepper li.is-on { color: var(--gold); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .pill:hover, .card:hover, .tile-link:hover { transform: none; }
}