/* Foundry producer landing — the front door at foundry.nine71.ai/.
 *
 * Deliberately its own sheet rather than a fork of style.css: that file is a
 * workspace (rails, cards, forms), this is a poster. What they share is the
 * identity — the same matte near-black, the same Outfit, and the same colour
 * sentence the product speaks everywhere: violet is the label's catalogue,
 * amber is the producer's record. The theme rides the same .nine71.ai cookie
 * as the app surfaces (the inline snippet in index.html), so a producer who
 * chose light in the app gets a light landing; there is no toggle here — the
 * page is a poster, and the choice is made where the work happens. */

/* One look, on purpose (Nikhil, 2026-08-13, pointing at Mobbin): a flat white
   page, black text, black buttons, grey pill header. The dark default and the
   theme cookie went with the redesign — a poster does not need a theme. The
   product's two colours survive only where they mean something: the violet
   catalogue bars and the amber track dot inside the pictures. */
:root {
  --bg: #ffffff;
  --surface: #f5f5f3;     /* the grey band, the pill, the card wash */
  --surface-2: #ececea;
  --border: #e7e7e4;
  --border-2: #d6d6d2;
  --text: #141414;
  --text-2: #454545;
  --muted: #6d6d6d;
  --dim: #969692;
  --violet: #6f56bd;      /* the catalogue / the label side */
  --violet-soft: rgba(111, 86, 189, 0.12);
  --amber: #c08a2e;       /* the producer's record */
  --ok: #2c7a4b;
  --r: 18px;
  --map-dot: #6f56bd;
  --map-ring: #6f56bd;
  --map-line: #9a9a96;
  --cta-bg: #141414;
  --cta-bg-2: #000000;
  --cta-fg: #ffffff;
  --font: 'Outfit', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;

  color-scheme: light;
}

/* The wordmark ships as a white SVG (outlines, not a webfont — licensing);
   pure white inverts to pure black exactly, same trick as the app. */
.wordmark-img { filter: invert(1); }

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

a { color: inherit; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 10px 22px;
  font: 500 15px var(--font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn.big { padding: 14px 30px; font-size: 17px; }
.btn.primary { background: var(--cta-bg); color: var(--cta-fg); font-weight: 600; }
.btn.primary:hover { background: var(--cta-bg-2); }
.btn.ghost { border-color: var(--border-2); color: var(--text); background: var(--bg); }
.btn.ghost:hover { border-color: var(--text); }
.btn-arrow { display: inline-flex; align-items: center; }

/* Flat monochrome: the headline highlight and the kickers stopped being
   coloured with the Mobbin pass — colour belongs to the pictures only. */
.hl { color: inherit; }

.kicker {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 12px; color: var(--muted);
}
.k-violet, .k-amber { color: var(--muted); }

/* ---------- the map ----------
   One drawing, three sizes: violet points are a catalogue, the dashed ring is
   a label's sound, the amber point is your track landing inside it. */
.map-svg { display: block; pointer-events: none; }
.map-dot { fill: var(--map-dot); }
.map-ring {
  fill: none; stroke: var(--map-ring); stroke-width: 1.4;
  stroke-dasharray: 5 7; opacity: 0.75;
}
.map-line { stroke: var(--map-line); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.6; }
.map-you { fill: var(--amber); }
.map-you-halo {
  fill: none; stroke: var(--amber); stroke-width: 1.4; opacity: 0.5;
  transform-origin: center; transform-box: fill-box;
  animation: you-pulse 3.2s ease-in-out infinite;
}
@keyframes you-pulse {
  0%, 100% { transform: scale(0.75); opacity: 0.55; }
  50%      { transform: scale(1.25); opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) { .map-you-halo { animation: none; } }

/* ---------- nav ---------- */
/* The Mobbin pill (Nikhil, 2026-08-13, screenshot in hand): one rounded grey
   capsule floating top-centre — logo on its left, plain links on its right,
   nothing outside it. Still unpinned: absolute over the page, scrolls away. */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 24px 0;
}
.nav-inner {
  max-width: 720px; margin: 0 auto;
  background: var(--surface); border-radius: 999px;
  padding: 15px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wordmark { display: flex; align-items: baseline; text-decoration: none; }
.wordmark-img { height: 18px; width: auto; display: block; }
.module-label { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 9px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  color: var(--text); font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: opacity 140ms ease;
}
.nav-links a:hover { opacity: 0.6; }

/* ---------- hero ---------- */
/* Mobbin's shape: everything centred on flat white — headline, one sub, two
   buttons — and the product demo in a big rounded block right underneath.
   The catalogue map left the hero with the redesign; the fairness band still
   carries it. Top padding clears the absolute pill. */
.hero { padding: 185px 0 64px; text-align: center; }
/* A touch thinner and a size up (Nikhil): 500, not the global 600. */
.hero h1 {
  font-size: clamp(3.3rem, 7.3vw, 5.7rem); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.08;
  max-width: 12em; margin: 0 auto;
}

/* ---------- the label deck ---------- */
/* Mobbin's rotating app icon, worn by real label marks: the front card holds,
   the next peeks out above, and on each tick the front recedes to the back. */
.deck { position: relative; width: 92px; height: 92px; margin: 0 auto 40px; }
.deck img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 22px; object-fit: cover; background: var(--surface);
  transition: transform 480ms ease, opacity 480ms ease;
  opacity: 0; transform: translateY(-10px) scale(0.9); z-index: 1;
}
.deck img.is-front { opacity: 1; transform: none; z-index: 3; }
.deck img.is-back  { opacity: 1; transform: translateY(-11px) scale(0.9); filter: saturate(0) opacity(0.35); }
.deck img.is-gone  { opacity: 0; transform: translateY(16px) scale(0.86); z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  .deck img { transition: none; }
}
.hero-sub {
  margin: 22px auto 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text-2); max-width: 34em;
}
.hero-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }


/* ---------- audience subpages ---------- */
.subhero { padding: 140px 0 56px; }
.subhero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); letter-spacing: -0.02em; max-width: 16em; }
.subhero .hero-sub { max-width: 38em; }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 500; }
.aud-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.aud {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 30px;
}
.aud h2 { font-size: 1.25rem; margin-bottom: 10px; }
.aud p { color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---------- playing out now: the belt ---------- */
/* Same mechanics as the app's Home conveyors (.net-conveyor in style.css):
   the track rendered twice, one translate loop, hover pauses, reduced motion
   turns it into a plain scroller. Hidden until the script confirms the corpus
   answered — see the loader at the foot of index.html. */
.belt-sec { padding: 56px 0 40px; }
.belt-sec.hidden { display: none; }
/* Caption sits centred UNDER the conveyor. */
.belt-head {
  display: flex; align-items: baseline; justify-content: center; gap: 16px;
  flex-wrap: wrap; text-align: center; margin-top: 24px;
}
.belt-head .kicker { margin-bottom: 0; }
.belt-sub { color: var(--muted); font-size: 13.5px; }
.belt-sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.belt-sub a:hover { opacity: 0.6; }
.belt {
  display: flex; overflow: hidden; padding: 4px 0 6px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.belt-track {
  display: flex; gap: 14px; flex: none; padding-right: 14px;
  animation: belt-move 60s linear infinite;
}
.belt:hover .belt-track { animation-play-state: paused; }
@keyframes belt-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .belt { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .belt-track { animation: none; }
  .belt-track[aria-hidden] { display: none; }
}
.belt-tile {
  display: flex; flex-direction: column; width: 132px; flex: none;
  text-decoration: none; color: inherit;
}
.belt-tile img {
  width: 132px; height: 132px; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
}
.belt-tile:hover img { border-color: var(--text); }
.bt-name {
  margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-sub {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- how it works ---------- */
.how { padding: 72px 0; }
.how h2, .feats h2, .faq h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 40px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Monochrome since the Mobbin pass: the amber/violet/green card accents left
   with the rest of the marketing colour. */
.step {
  background: var(--surface); border-radius: 22px;
  padding: 28px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-weight: 600; font-size: 16px; margin-bottom: 16px;
  background: #fff; color: var(--text);
}
.step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.step p { color: var(--text-2); font-size: 15px; }

/* ---------- the label-side screenshot ---------- */
.proof { padding: 72px 0; }
.proof-head { max-width: 640px; margin-bottom: 36px; }
.proof-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.proof-head p { color: var(--text-2); font-size: 1.05rem; }
.shot-frame {
  border: 1px solid var(--border-2); border-radius: var(--r); overflow: hidden;
  background: #000;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-note { margin-top: 12px; font-size: 12.5px; color: var(--dim); text-align: right; }

/* ---------- the showcase: gradient cards, tilted devices ---------- */
/* Trackstack-shaped: a landscape card of raw colour, the device leaning into
   it, the caption OUTSIDE the card so the picture stays a picture. The screens
   are CSS devices on purpose — when real platform screenshots arrive, each is
   one <img>/one block to swap, no compositing pipeline. */
.showcase {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px;
}
.show-card {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 392px;
  /* Flat grey, deliberately — first "just grey" instead of colour gradients
     (Nikhil), then flat instead of washed + grained (the Mobbin pass). */
  background: var(--surface);
}
.show-stage {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  perspective: 1400px;
}
.show-cap { padding: 18px 6px 0; }
.show-cap h3 { font-size: 1.15rem; margin-bottom: 6px; }
.show-cap p { color: var(--text-2); font-size: 14.5px; max-width: 34em; }

/* The phone. A dark slab regardless of theme — it is a picture of the product,
   not a surface of this page (the .auth-shot precedent). */
.dev-phone {
  /* 244px, not more: at 272 the screen ran 510px tall inside a 392px card and
     the bezel was sliced off top and bottom, which reads as a broken frame
     rather than as a big phone. The phone's apparent size is set by the crop's
     aspect as much as by this number — they move together. */
  position: relative; width: 244px; flex: none;
  background: #08080b; border-radius: 40px; padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 24px 40px 70px rgba(0, 0, 0, 0.5);
  /* ONE AXIS ONLY (Nikhil, 2026-10-07): tilted back along the horizontal axis
     so it reads as lying flat on a desk, and not turned at all about the
     vertical. The rotateY(-14deg) and rotate(3deg) that used to be here swung
     the device into a three-quarter view — which flatters a render and fights a
     screenshot, because the moment a real UI is skewed its type stops being
     readable and the picture stops being evidence. rotateX alone keeps every
     vertical in the shot vertical. */
  transform: rotateX(9deg) translateY(6px);
}
/* The phone's screen. One <img> of a real screenshot since 2026-10-07 — the
   greeked .ph-* mock it used to hold (a fake file name, four invented verdict
   bars and a fake send button) is gone, along with .dev-notch: a dark pill
   floating over a real app header reads as a rendering fault, not as hardware.

   Light, not the old #131316 slab, because the screenshot is light and a dark
   ground behind an opaque image only shows as a seam at the rounded corners.
   The padding goes for the same reason: the bezel is the frame, so the shot
   runs to the edge of it the way a screen does. */
.dev-screen {
  border-radius: 30px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.dev-screen-shot img { display: block; width: 100%; height: auto; }

/* The desktop. Screen, chin, foot — enough iMac to read as one. */
.dev-mac {
  /* WIDER THAN ITS CARD, deliberately: the stage is ~390px at desktop, so
     `width: 100%` capped the device at the card and max-width never came into
     it — the frame was doing the sizing and the number below was decoration.
     118% lets the device bleed past both edges and get cropped by the card's
     overflow, which is what makes a screenshot read as a screen you are close
     to rather than a thumbnail floating in grey. */
  /* A HAIR past the card, not a fifth past it. 118% made the screenshot big
     and sliced both bezels off, so the iMac stopped reading as an iMac — a
     device frame only does its job while it is a closed shape. The size now
     comes from the card being shorter rather than the device being wider:
     same apparent scale, frame intact. */
  width: 106%; max-width: 620px; flex: none;
  transform: rotateX(7deg) translateY(4%);
}
.dev-mac-screen {
  border-radius: 16px 16px 0 0; overflow: hidden;
  border: 10px solid #0c0c0f; border-bottom: none;
  box-shadow: -24px 40px 70px rgba(0, 0, 0, 0.45);
  background: #000;
}
.dev-mac-screen img { display: block; width: 100%; height: auto; }
.dev-mac-chin {
  height: 26px; background: linear-gradient(180deg, #d7d7dc, #b9b9c2);
  border-radius: 0 0 10px 10px;
}
.dev-mac-foot {
  width: 68px; height: 34px; margin: 0 auto;
  background: linear-gradient(180deg, #b9b9c2, #8f8f99);
  clip-path: polygon(38% 0, 62% 0, 78% 100%, 22% 100%);
}

/* The laptop: screen on a thin base, lid-forward. */
.dev-book {
  width: 106%; max-width: 640px; flex: none;   /* see .dev-mac */
  transform: rotateX(9deg) translateY(2%);
}
.dev-book-screen {
  border: 9px solid #0c0c0f; border-bottom-width: 14px; border-radius: 14px 14px 0 0;
  overflow: hidden; background: #000;
  box-shadow: 20px 36px 60px rgba(0, 0, 0, 0.45);
}
.dev-book-screen img { display: block; width: 100%; height: auto; }
.dev-book-base {
  position: relative; height: 12px; margin: 0 -3%;
  background: linear-gradient(180deg, #c9c9d0, #9d9da7);
  border-radius: 2px 2px 12px 12px;
}
.dev-book-base::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 74px; height: 5px; border-radius: 0 0 6px 6px; background: #8f8f99;
}

/* ---------- fairness band (labels subpage still wears it) ---------- */
.fair {
  position: relative; padding: 110px 0; overflow: hidden;
  background: var(--surface);
}
.fair-inner { position: relative; max-width: 720px; text-align: center; }
.fair h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 16px; }
.fair p { color: var(--text-2); font-size: 1.1rem; }

/* ---------- the numbers band + the burst ---------- */
/* Stripe's stats section in 971 material: claim, four real figures on
   hairlines, and a half-burst of rays whose tips sway away from the cursor. */
.pulse { padding: 96px 0 0; overflow: hidden; }
.pulse-head {
  text-align: center; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 500;
  margin-bottom: 56px;
}
.pulse-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pstat { padding: 30px 26px; text-align: center; }
.pstat + .pstat { border-left: 1px solid var(--border); }
.pstat-n { display: block; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 500; line-height: 1.1; }
.pstat-c { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 15em; margin-left: auto; margin-right: auto; }
.burst-wrap {
  position: relative; height: 500px; margin-top: 8px;
  /* Atmosphere behind the rays — properly warm (Nikhil, second Stripe pass):
     a big peach bloom with a violet core low in the middle. */
  background:
    radial-gradient(ellipse 78% 115% at 50% 100%, rgba(246, 168, 78, 0.5), rgba(246, 168, 78, 0.16) 58%, transparent 78%),
    radial-gradient(ellipse 42% 62% at 50% 100%, rgba(226, 128, 96, 0.28), transparent 72%),
    radial-gradient(ellipse 24% 38% at 50% 100%, rgba(111, 86, 189, 0.24), transparent 70%);
}
.burst-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .pulse-stats { grid-template-columns: 1fr 1fr; }
  .pstat:nth-child(3) { border-left: none; }
  .pstat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .burst-wrap { height: 320px; }
}

/* ---------- features ---------- */
.feats { padding: 72px 0; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat {
  border-radius: 22px; padding: 24px;
  background: var(--surface);
}
.feat h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feat p { color: var(--text-2); font-size: 14.5px; }

/* ---------- FAQ ---------- */
.faq { padding: 72px 0; }
.faq-list { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 36px 18px 2px; position: relative;
  font-size: 1.05rem; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--dim); font-size: 1.3rem; font-weight: 300;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 2px 20px; color: var(--text-2); max-width: 44em; }
.faq details a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- final CTA ---------- */
.cta-end { padding: 72px 0 96px; text-align: center; }
.end-map { width: 260px; height: auto; margin: 0 auto 10px; }
.cta-inner h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 30px; }

/* ---------- footer ---------- */
/* The main site's big footer: brand + tagline left, link columns right, a
   legal row, and the giant near-invisible wordmark cropped by the page edge. */
.footer { padding-top: 72px; overflow: hidden; position: relative; }
.footer-content {
  display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap;
  padding-bottom: 48px;
}
.footer-logo .wordmark-img { height: 22px; }
.footer-tagline { margin-top: 12px; color: var(--muted); font-size: 14.5px; max-width: 18rem; }
.footer-links { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-column { display: flex; flex-direction: column; gap: 9px; }
.footer-column h4 {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 6px;
}
.footer-column a {
  color: var(--text-2); text-decoration: none; font-size: 15px;
  transition: color 140ms ease;
}
.footer-column a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 22px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; color: var(--dim); font-size: 13.5px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-legal a { color: var(--dim); text-decoration: none; transition: color 140ms ease; }
.footer-legal a:hover { color: var(--text); }
/* Decoration, never a link: the baseline sits below the page edge so the page
   reads as cut off, not as an image someone forgot to position. */
.footer-giant { margin-top: 56px; margin-bottom: -2.6vw; line-height: 0; pointer-events: none; user-select: none; }
.footer-giant-mark { display: block; width: 100%; height: auto; filter: invert(1); opacity: 0.05; }
@media (max-width: 900px) {
  .footer-links { gap: 40px; }
  .footer-giant { margin-top: 40px; margin-bottom: -2.5vw; }
  .footer-giant-mark { opacity: 0.07; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .dev-book, .dev-mac { max-width: 520px; }
  .show-card { min-height: 340px; }
  .dev-phone { width: 210px; }
  .hero { padding: 160px 0 44px; }
  .steps, .feat-grid { grid-template-columns: 1fr; }
  /* The pill shrinks rather than restructures: tighter padding, smaller
     links, and the module label goes — the mark alone carries the left end. */
  .nav { padding: 14px 14px 0; }
  .nav-inner { padding: 12px 20px; gap: 14px; }
  .nav-links { gap: 15px; font-size: 13px; }
  /* The link row scrolls INSIDE the pill instead of widening the document.
     Measured before this rule (Chrome, 390px viewport): the front door's
     scrollWidth was 390 with four links and 429 with five, and /labels/ went
     392 -> 485 — i.e. the row had already outgrown a phone and every link added
     dragged the whole page sideways with it. A body that scrolls horizontally
     moves the hero and the copy too, which reads as a broken page rather than
     as a long nav. min-width:0 is the half that actually does the work: without
     it a flex item refuses to shrink below its content and overflow-x never
     engages. Scrollbar hidden because the pill is 40px tall and a visible bar
     inside it looks like damage; the row is still swipeable and still
     keyboard-reachable, and focus scrolls it into view. */
  .nav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  .module-label { display: none; }
  .subhero { padding-top: 120px; }
}
@media (max-width: 480px) {
  .hero-ctas .btn.big { width: 100%; }
  .cta-inner .btn.big { width: 100%; }
}

/* ===========================================================================
   THE PRICING LADDERS
   ===========================================================================
   Lived inline in foundry/pricing/index.html until 2026-10-07, when the landing
   page started rendering the same two ladders. Two inline copies of a card that
   carries a dollar figure is how a price drifts between pages while both files
   look correct on their own, so there is one definition and both pages link it.
   tools/test_pricing_page.mjs asserts the numbers agree across both pages and
   the Stripe catalogue; this file is only the pixels.

   Every colour is a token from the block at the top of this sheet. Nothing here
   introduces a palette — that is checked, because a second palette on the one
   page where a wrong colour reads as a different product is a bad trade. */

/* The early-access notice. A hairline band, not a coloured alert: it is a
   statement of fact about the page, not a warning about the product. */
.notice {
  border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 22px 26px; max-width: 860px; margin: 0 auto;
  background: var(--surface);
}
.notice h2 { font-size: 1.05rem; margin-bottom: 8px; }
.notice p { color: var(--text-2); font-size: 15px; }
.notice p + p { margin-top: 10px; }

/* Each ladder's own heading. The two ladders are the same card grid twice, so
   what separates them has to be the heading rather than the cards — hence a
   real <h2> and a lede per side, and the kicker colour this sheet already
   assigns to each audience (amber = the producer's record, violet = the
   catalogue / the label side). */
.ladder-head { max-width: 46em; margin-bottom: 26px; }
.ladder-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 6px 0 12px; }
.ladder-head .lede { color: var(--text-2); font-size: 1.05rem; }

.tiers { padding: 56px 0 8px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.tier {
  background: var(--surface); border-radius: 22px; padding: 26px 24px;
  display: flex; flex-direction: column; height: 100%;
}
.tier.featured { background: var(--surface-2); }
.tier-name { font-size: 1.15rem; font-weight: 600; }
.tier-for { color: var(--muted); font-size: 13.5px; margin-top: 4px; min-height: 2.8em; }
.tier-price { margin: 18px 0 2px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tier-amt { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.tier-per { color: var(--muted); font-size: 14px; }
.tier-year { color: var(--text-2); font-size: 14px; min-height: 1.5em; }
.tier ul { list-style: none; margin: 20px 0 0; padding: 0; }
.tier li {
  color: var(--text-2); font-size: 14.5px; padding: 7px 0 7px 22px; position: relative;
  border-top: 1px solid var(--border);
}
.tier li:first-child { border-top: none; }
.tier li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--dim);
}
.tier li b { color: var(--text); font-weight: 600; }
.tier-cta { margin-top: 22px; }
.tier-cta .btn { width: 100%; }

/* The contract row is a band, not a fourth card: it is priced differently,
   bought differently and sold by a person, and a card would imply a checkout.
   The same band carries the artist side's "paying does not move you up anyone's
   list" statement, for the opposite reason — it is the one thing on that ladder
   that must not look like a feature of one tier. */
.contract {
  margin-top: 18px; border: 1px solid var(--border-2); border-radius: 22px;
  padding: 26px 24px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.contract-main { flex: 1 1 380px; }
.contract h3 { font-size: 1.15rem; margin-bottom: 8px; }
.contract p { color: var(--text-2); font-size: 14.5px; max-width: 46em; }
.contract .btn { flex: none; }

.note-list { padding: 56px 0 8px; }
.note-list h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.note-list .lede { color: var(--text-2); max-width: 44em; margin-bottom: 26px; font-size: 1.05rem; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; }
.notes div { border-top: 1px solid var(--border); padding-top: 14px; }
.notes h3 { font-size: 0.98rem; margin-bottom: 6px; }
.notes p { color: var(--text-2); font-size: 14.5px; }

@media (max-width: 900px) {
  .notes { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .notice { padding: 18px 18px; }
  .tier { padding: 22px 20px; }
  .contract { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------------
   THE DARK LADDER, AND THE METER STRIP
   ---------------------------------------------------------------------------
   Added 2026-10-07 (Nikhil: "more creativity and variation on this page"). The
   front door was white from the hero to the footer, and six pricing cards in two
   identical grids made the longest stretch of it the flattest. */

/* .tiers-dark REDEFINES THE TOKENS, IT DOES NOT RESTYLE THE CARDS. Every rule in
   the PRICING LADDERS block above reads --surface, --border, --text and friends,
   so overriding those on the section gives the whole subtree — cards, featured
   card, contract band, notice, both button kinds — a dark palette with no second
   set of selectors to keep in step. Restyling .tier-name, .tier-amt, .tier li
   and the rest by hand would have been forty lines that drift the first time
   somebody edits the light ones.

   This is also why the band is a section-level class and not a <body> theme: the
   sheet's header is explicit that this page is a poster, flat white, no theme
   toggle. One band opting out of that is a composition decision; a theme is not. */
.tiers-dark {
  background: var(--cta-bg);
  padding-top: 72px; padding-bottom: 72px; margin-top: 40px;
  color: #f7f7f8;

  --bg: #141414;
  --surface: rgba(255, 255, 255, 0.065);
  --surface-2: rgba(255, 255, 255, 0.115);
  --border: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.22);
  --text: #f7f7f8;
  --text-2: #b7b7be;
  --muted: #8b8b94;
  --dim: #74747e;
  /* The primary button inverts with the ground: a near-black pill on near-black
     is a hole, not a button. */
  --cta-bg: #ffffff;
  --cta-bg-2: #e9e9ec;
  --cta-fg: #141414;
}
/* --cta-bg is the section's own background AND the token the button reads, and
   the override above would otherwise repaint the band white. Resolved by taking
   the ground from a value the cascade cannot reach back into. */
.tiers-dark { background: #141414; }

/* The two-up that says which thing is metered, before any number appears. */
.meter {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 34px;
  align-items: start; margin: 4px 0 34px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 26px 0;
}
.meter-rule { width: 1px; align-self: stretch; background: var(--border); }
.meter-half strong { display: block; font-size: 1.15rem; font-weight: 600; margin: 10px 0 6px; }
.meter-half p { color: var(--text-2); font-size: 14.5px; max-width: 32em; }
.meter-tag {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px;
}
/* The one place on this page where the two kickers' colours carry meaning rather
   than decorating a heading: amber is the producer's own record throughout this
   sheet, violet is the catalogue side. Here they separate what is free from what
   is bought, which is the distinction the whole artist ladder rests on. */
.meter-free { color: #2c7a4b; background: rgba(44, 122, 75, 0.12); }
.meter-paid { color: #6f56bd; background: var(--violet-soft); }

@media (max-width: 760px) {
  .meter { grid-template-columns: 1fr; gap: 24px; padding: 22px 0; }
  .meter-rule { display: none; }
  .meter-half + .meter-half { border-top: 1px solid var(--border); padding-top: 22px; }
  .tiers-dark { padding-top: 54px; padding-bottom: 54px; }
}

/* The ghost button is "the page's own ground showing through a hairline", and that
   definition breaks on this band: .btn.ghost paints var(--bg), the cards sit on
   var(--surface), and --surface is LIGHTER than the ground here — so a ghost
   button on a dark card rendered as a near-black hole punched through it rather
   than as a control. It is the one place the token override above cannot reach,
   because the right answer is not a different colour but no fill at all. */
.tiers-dark .btn.ghost {
  background: transparent; border-color: rgba(255, 255, 255, 0.34); color: #f7f7f8;
}
.tiers-dark .btn.ghost:hover {
  border-color: #ffffff; background: rgba(255, 255, 255, 0.07);
}