@charset "UTF-8";

/* Synnk Collective AB — synnk.net
   The 2026 "SYNNK ID" identity: a cream top half that hands over to a deep
   navy lower half, the wordmark set as artwork, and the brand yellow on the
   ID tab, the players and the people's names. Colours are sampled straight from the
   brand sheet. Still no third-party requests: the fonts below are served from
   our own origin, which keeps the page fast and ships no visitor IPs to a
   font/analytics CDN. */

/* --- Fonts ---------------------------------------------------------------
   Inter Display is copied from the app's own assets/fonts/ so synnk.net and
   the Expo app are typographically identical. Subset to Latin-1 + General
   Punctuation (Swedish å ä ö and the · × © — the footers need). woff2 only.
   index.html preloads 400 and 800, the two weights above the fold. */

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-display-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-display-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-display-700.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-display-800.woff2") format("woff2");
}

/* The Black cut is the one weight the app doesn't ship: the design sets the
   hero headline and the card names in it. Taken as-is from the Inter 4.1
   release (OFL, `web/InterDisplay-Black.woff2`), not subset like the others —
   subsetting needs fonttools, which this box doesn't have. ~110 KB, loaded
   only where used. */
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/inter-display-900.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  /* No dark design exists. Native controls stay light; the dark-scheme block
     further down is what keeps browsers from inventing a dark page. */
  color-scheme: light;

  --ink: #02020e;
  --navy: #0a073b;
  /* Surfaces and bands within the dark lower half. */
  --navy-card: #12103f;
  --navy-deep: #050325;
  /* The deep band the lower page sits on, and the footer's lighter step out
     of it — both sampled from the SYNNKWEBMVP design export. */
  --navy-band: #07062b;
  --navy-footer: #0b083f;
  --indigo: #6057eb;
  --periwinkle: #8a83f0;
  --lavender: #e8e6fc;
  --coral: #ff5f4b;
  /* The brand yellow: the ID tab, the players, the people's names. The lime
     (#d4ff00) the design export used was retired on the designer's call
     (2026-09-10). */
  --id-yellow: #fffc5a;
  /* Reserved for status: the beta line's dot. */
  --amber: #ffb74b;
  --cream: #f9f6ee;

  --bg: var(--cream);
  --fg: var(--ink);
  --muted: #4a4a63;
  --rule: rgba(10, 7, 59, 0.14);
  --card: #ffffff;

  /* Text tones on the navy lower half. */
  --on-navy: #eceaff;
  --on-navy-muted: rgba(236, 234, 255, 0.72);
  --rule-navy: rgba(236, 234, 255, 0.16);

  /* Bare `Inter` deliberately does not lead this stack: a visitor with plain
     Inter installed would match it over the Inter Display we ship, since
     @font-face only claims the name it declares. The tail is the fallback. */
  --font: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --measure: 72rem;
  --pad: clamp(1.25rem, 5vw, 2.5rem);

  /* The design is a 1920-wide frame; these are its column widths, and the
     landing sections pick theirs with a .wrap--* modifier (see .wrap). */
  --w-hero: 1440px;
  --w-section: 1400px;
  --w-deck: 1532px;
  --w-rule: 1200px;
  --w-cta: 930px;
  --w-footer: 1088px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky and opaque, so an anchor jump clears it plus a little
     air. Moves with the header's min-height. */
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Chrome's auto-dark and Samsung Internet's "darken websites" leave a page
   alone only when it handles dark mode itself: a dark-scheme query in the CSS
   and `light dark` in the color-scheme meta. `only light` alone did not stop
   Samsung Internet on a Galaxy S24. So the site declares dark support, and
   its "dark theme" is the light page, restated. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: var(--cream);
    --fg: var(--ink);
  }
  html,
  body {
    background: var(--cream);
    color: var(--ink);
  }
  .site-header {
    background: rgba(249, 246, 238, 0.9);
  }
  .signup-row,
  .lang-toggle {
    background: #fff;
  }
}

a,
button {
  -webkit-tap-highlight-color: rgba(96, 87, 235, 0.18);
}

::selection {
  background: var(--indigo);
  color: var(--cream);
}

/* --- Language switching -------------------------------------------------
   Both languages ship in the HTML so the page is readable with JavaScript off
   (English is the default). The toggle only ever *hides* the inactive
   language — it never sets display on the visible one, so elements keep
   whatever layout their own rules give them. */
html[data-lang="en"] [lang="sv"],
html[data-lang="sv"] [lang="en"] {
  display: none !important;
}

/* --- Typography --------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.25rem);
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9375rem);
}

.h2-lead {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  color: var(--indigo);
}

h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

a {
  color: var(--indigo);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(96, 87, 235, 0.45);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

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

.accent {
  color: var(--indigo);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 40ch;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

/* --- Shell -------------------------------------------------------------- */

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

/* The landing sections use the design's own column widths. The padding is
   added on top so the content sits at exactly the design width once the
   viewport is wide enough, and keeps its side margin below that. */
.wrap--hero {
  max-width: calc(var(--w-hero) + 2 * var(--pad));
}
.wrap--1400 {
  max-width: calc(var(--w-section) + 2 * var(--pad));
}
.wrap--deck {
  max-width: calc(var(--w-deck) + 2 * var(--pad));
}
.wrap--930 {
  max-width: calc(var(--w-cta) + 2 * var(--pad));
}
.wrap--1088 {
  max-width: calc(var(--w-footer) + 2 * var(--pad));
}

section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* Landing sections carry their own colour bands, so no hairline between them.
   The subpage prose still gets the rule below it. */
section + section {
  border-top: 1px solid var(--rule);
}

.hero + section,
.scattered + section,
.profiles + section,
.features + section,
.final-cta + section,
section.scattered,
section.profiles,
section.features,
section.final-cta {
  border-top: 0;
}

/* --- The brand mark --------------------------------------------------------
   The SYNNK-ID lockup from the Figma "Logos" section, shipped as artwork (a
   <symbol> on the landing page, inline paths on the subpages) rather than set
   in a substitute face — so the letterforms are exact and the forward lean is
   the real one, not a CSS skew. Three colours make its variants: the wordmark
   follows `color`; the slanted ID tab is the neon yellow everywhere (owner's
   call — the design frame draws the cards' tab white); the letters cut from
   the tab are always navy.
     header  navy + navy tab, white letters = SYNNK-ID-PURPLE
     footer  white + yellow tab             = SYNNK-ID-YELLOW-HOLLOW
     cards   white + yellow tab             = SYNNK-ID-YELLOW-HOLLOW */
.wm-id {
  display: block;
  color: #fff;
  --wm-id-tab: var(--id-yellow);
}

.wm-id-tab {
  fill: var(--wm-id-tab, currentColor);
}

.wm-id-cut {
  fill: var(--wm-id-cut, var(--navy));
}

/* The header wears the all-navy mark with white letters in the tab
   (Figma "Logos" › SYNNK-ID-PURPLE), designer's call 2026-09-10. */
.site-header .brand .wm-id {
  --wm-id-tab: currentColor;
  --wm-id-cut: #fff;
}

/* In the header and footer the lockup stands 34 tall, which puts its wordmark
   at the 32px the design gives the plain mark. */
.brand .wm-id {
  height: 34px;
  width: auto;
  color: inherit;
}

/* The holder for the <symbol> definitions paints nothing and takes no space;
   pulling it out of flow keeps it from nudging the first real element. */
.wm-def {
  position: absolute;
}

/* --- Header ---------------------------------------------------------------
   84px tall, cream at 90 % over a light blur, the wordmark alone on the left
   and the language toggle on the right — the design's header, no rule below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(249, 246, 238, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  min-height: 84px;
  padding-block: 0;
  /* 200px in from each edge at the design's 1920; proportional below that. */
  padding-inline: clamp(var(--pad), 10.4167vw, 200px);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.15s ease;
}

.brand:hover {
  color: var(--indigo);
}

/* Language toggle */
/* Each half is its own pill inside the outer one (no overflow clipping), so
   a phone that renders the mono a hair wider can't push "SV" into the curve.
   The navy fill is one ::before that slides between the halves (they are
   the same width: two letters each); the buttons stay transparent above it. */
.lang-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 1px;
  background: #fff;
}

.lang-toggle::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: calc(50% - 1px);
  border-radius: 999px;
  background: var(--navy);
  transition: translate 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-lang="sv"] .lang-toggle::before {
  translate: 100% 0;
}

.lang-toggle button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 700 12px/20px var(--mono);
  letter-spacing: 0.96px;
  color: var(--muted);
  padding: 5px 13px;
  min-height: 30px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.lang-toggle button[aria-pressed="true"] {
  color: var(--cream);
}

.lang-toggle button:hover:not([aria-pressed="true"]) {
  color: var(--ink);
  background: rgba(96, 87, 235, 0.09);
}

/* --- Button --------------------------------------------------------------
   The one thing to press. Coral appears nowhere else, so it never competes
   with itself. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 1.5rem;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(255, 95, 75, 0.75);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: #f4472f;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 13px 26px -10px rgba(255, 95, 75, 0.85);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px -10px rgba(255, 95, 75, 0.75);
}

button.btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Secondary button: an outline, so the coral copy button stays the page's one
   loud thing. Doubled class out-ranks `button.btn`'s zeroed border. */
.btn.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(10, 7, 59, 0.35);
  box-shadow: none;
}

.btn.btn-ghost:hover,
.btn.btn-ghost:focus-visible {
  background: rgba(96, 87, 235, 0.08);
  color: var(--indigo);
  border-color: var(--indigo);
  box-shadow: none;
}

/* --- Signup form ---------------------------------------------------------
   The signup is the page's one job, so the form sits in the page rather than
   behind a link. Field and button share one white pill, drawn to the design:
   540 wide in the hero (720 under the final CTA), 8px of padding around a
   61px coral button, 24px of air before the placeholder. The same markup
   appears in both places; site.js attaches to both. */

.signup-form {
  margin-top: 48px;
  max-width: 540px;
}

.signup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid rgba(62, 55, 166, 0.2);
  border-radius: 64px;
  padding: 8px 8px 8px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.signup-row:focus-within {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.signup-row input {
  flex: 1 1 8rem;
  min-width: 0;
  font: 400 18px/24px var(--font);
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
}

.signup-row input:focus,
.signup-row input:focus-visible {
  outline: 0;
}

/* The design sets the placeholder in full ink, not a muted tone. */
.signup-row input::placeholder {
  color: var(--ink);
  opacity: 1;
}

.signup-row .btn {
  flex: none;
  height: 61px;
  padding: 0 24px;
  border-radius: 32px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.signup-row .btn:hover,
.signup-row .btn:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 13px 26px -10px rgba(255, 95, 75, 0.85);
}

/* While a submit is in flight both halves are disabled; dimming is the only
   state change — the page navigates away on success anyway. */
.signup-row input:disabled,
.signup-row .btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* On a narrow phone the pill relaxes into a stacked card so neither half is
   crushed. */
@media (max-width: 30rem) {
  .signup-row {
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 0.75rem;
    gap: 0.625rem;
  }
  .signup-row input {
    flex: 1 1 100%;
    padding: 0.5rem 0.5rem;
  }
  .signup-row .btn {
    flex: 1 1 100%;
    height: auto;
    padding-block: 0.875rem;
  }
}

/* The honeypot. Off-screen rather than display:none — the cruder bots fill
   whatever is technically rendered, which is who this is for. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Error text is a darkened coral: the raw button colour is unreadable at text
   size on cream. Same hue family, so it still reads as "hot". */
.form-error {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #b0290f;
}

.form-note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* The form on the dark final-CTA band: lift the note and errors off navy. */
.on-dark .form-note {
  color: var(--on-navy-muted);
}

.on-dark .form-note a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.on-dark .form-error {
  color: #ffb1a3;
}

/* =========================================================================
   HERO  (Figma: Ny Version 20260822 › Hero Area, 1920 × 770)
   ========================================================================= */

.hero {
  padding: 24px 0 0;
  background: var(--cream);
  /* The record reaches past the card's right edge; clip trims the overhang
     instead of letting it put a horizontal scrollbar on the page. The vertical
     axis stays visible so the card can overlap the section below by the
     design's few pixels. */
  overflow-x: clip;
  overflow-y: visible;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5.47vw, 105px);
  align-items: center;
}

/* 615 of copy, 105 of air, 720 of figure — the design's hero row. */
@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 615fr) minmax(0, 720fr);
  }
}

.hero h1 {
  margin: 0 0 19px;
  font-size: clamp(2.75rem, 3.75vw, 72px);
  line-height: 1.1111;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--ink);
  text-wrap: initial;
  /* 615px at 72px: keeps the design's "Everything you / are in music." break
     as the headline scales down. */
  max-width: 8.55em;
}

/* Scoped to the landing hero copy: "One ID." sits on its own line. The 404 and
   thank-you pages reuse .hero for layout, and their headline accents must stay
   inline — a block here would orphan the trailing period onto its own line. */
.hero-copy h1 .accent {
  display: block;
  color: var(--indigo);
}

.hero-sub {
  margin: 0;
  font-size: clamp(1.125rem, 1.25vw, 24px);
  line-height: 1.3333;
  font-weight: 700;
  color: var(--ink);
}

/* --- The SYNNK-ID card + record ------------------------------------------
   A 720 × 754 figure. Inside it everything is measured in the design's own
   pixels: the figure is a size container and its children set
   1em = 1/720 of its width, so the card, its tilt and the record keep the
   Figma geometry at every viewport. */

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 720 / 754;
  margin-inline: auto;
  container-type: inline-size;
}

/* The row is 770 tall in the design while the figure is 754 below 24px of
   padding — the card runs 8px past the section's bottom edge. */
@media (min-width: 62rem) {
  .hero-visual {
    margin-bottom: -8px;
  }
}

.hero-vinyl,
.hero-card {
  font-size: calc(100cqw / 720);
}

/* The record, behind the card — 553 square, 335 in from the left (the
   frame's x), centred on the card's vertical middle so it peeks out evenly.
   On hover it slides a little further out from under the card. */
.hero-vinyl {
  position: absolute;
  display: block;
  left: 335em;
  top: 133.4em;
  width: 553em;
  height: 553em;
  z-index: 0;
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hero-visual:hover .hero-vinyl {
  translate: 28em 0;
}

/* On a phone the figure is the screen, so the record cannot run off it. It
   keeps its full size but sits further under the card, like a disc slipping
   out of its sleeve: its right edge ends at the figure's edge, 51 past the
   card, centred on the card as on desktop. */
@media (max-width: 62rem) {
  .hero-vinyl {
    left: auto;
    right: calc(-1 * var(--pad) + 2px);
  }
}

/* The card artwork: 618 × 772, centred a hair low, leaning 2°. The shadow
   stack is the design's. Hovering the figure eases the lean, as the old
   hero did. */
.hero-card {
  position: absolute;
  z-index: 1;
  display: block;
  left: 50%;
  top: 50%;
  width: 618em;
  height: 772em;
  translate: -50% calc(-50% + 32.9em);
  rotate: 2deg;
  border-radius: 24em;
  overflow: hidden;
  box-shadow: 0 15em 34em rgba(0, 0, 0, 0.2), 0 61em 61em rgba(0, 0, 0, 0.17),
    0 138em 83em rgba(0, 0, 0, 0.1), 0 246em 98em rgba(0, 0, 0, 0.03);
  transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hero-visual:hover .hero-card {
  rotate: 0.5deg;
}

.hero-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   SCATTERED  (Figma: Section 4, 1400 × 642 at y 950)
   ========================================================================= */

/* Below the cream hero the page is white down to the navy seam — the
   designer's call (2026-09-10): the frame's grey under the deck was dropped
   along the way, so it is two grounds, cream then white, not three. The
   hand-over is a fade rather than an edge: cream at the top of this section,
   white by 220px (the figure starts at 144), so no line runs under the hero. */
.scattered {
  background: linear-gradient(to bottom, var(--cream) 0, #fff 220px);
  padding: clamp(4rem, 7.5vw, 144px) 0 clamp(3rem, 5.05vw, 97px);
}

.scattered-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}

/* 739 of figure, 661 of copy, no gutter between. */
@media (min-width: 62rem) {
  .scattered-grid {
    grid-template-columns: minmax(0, 739fr) minmax(0, 661fr);
    gap: 0;
  }
}

/* --- The figure: six rings, the cube, four chips --------------------------
   .scatter-stage is a size container; .scatter-visual sets 1em = 1/739 of its
   width and places everything in design pixels. */
.scatter-stage {
  width: 100%;
  max-width: 739px;
  margin-inline: auto;
  container-type: inline-size;
}

.scatter-visual {
  position: relative;
  font-size: calc(100cqw / 739);
  width: 739em;
  height: 594em;
}

.scatter-ring {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1em solid #5e55e5;
}

.scatter-ring--1 {
  left: 262em;
  top: 188.4em;
  width: 216em;
  height: 214.8em;
  border: 4em solid var(--indigo);
  background: rgba(96, 87, 235, 0.2);
}
.scatter-ring--2 {
  left: 240.4em;
  top: 166.92em;
  width: 259.2em;
  height: 257.76em;
  border-width: 2em;
  opacity: 0.2;
}
.scatter-ring--3 {
  left: 214.48em;
  top: 141.15em;
  width: 311.04em;
  height: 309.31em;
  border-width: 2em;
  opacity: 0.1;
}
.scatter-ring--4 {
  left: 183.38em;
  top: 110.22em;
  width: 373.25em;
  height: 371.17em;
  opacity: 0.1;
}
.scatter-ring--5 {
  left: 146.05em;
  top: 73.1em;
  width: 447.9em;
  height: 445.41em;
  opacity: 0.05;
}
.scatter-ring--6 {
  left: 101.26em;
  top: 28.56em;
  width: 537.48em;
  height: 534.49em;
  border-width: 1.2em;
  opacity: 0.05;
}

/* The cube is a 180 square in the design; its export carries the glow, so the
   image is 340 square centred on the same point. */
.scatter-core {
  position: absolute;
  z-index: 2;
  left: 200em;
  top: 126em;
  width: 340em;
  height: 340em;
}

.scatter-core img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The orbiting sources: navy chips, 64 tall, an icon and a mono label. */
.orbit {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12em;
  padding: 16em;
  border-radius: 16em;
  background: var(--navy-footer);
  border: 1.5em solid rgba(255, 255, 255, 0.2);
  color: #fff;
  white-space: nowrap;
}

.orbit-icon {
  display: grid;
  place-items: center;
  width: 32em;
  height: 32em;
  flex: none;
}

.orbit-icon svg {
  display: block;
  fill: none;
}

.orbit-icon--soundcloud {
  width: 32em;
  height: 14.35em;
}
.orbit-icon--instagram {
  width: 28em;
  height: 28em;
}
.orbit-icon--users {
  width: 31em;
  height: 27.3em;
}
.orbit-icon--badge {
  width: 29em;
  height: 29em;
}

.orbit-label {
  font-family: var(--mono);
  font-size: 16em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

.orbit--demos {
  left: 150em;
  top: 87.3em;
}
.orbit--socials {
  left: 526em;
  top: 165.3em;
}
.orbit--connections {
  left: 11em;
  top: 265em;
}
.orbit--credits {
  left: 370em;
  top: 450.3em;
}

/* The sources hover around the ID, each on its own slow rhythm so they never
   bob in unison. Neutralised by the global prefers-reduced-motion rule. */
@keyframes orbit-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.6rem);
  }
}

.orbit {
  animation: orbit-float 4.5s ease-in-out infinite;
  will-change: transform;
}

.orbit--demos {
  animation-duration: 4.3s;
  animation-delay: -0.3s;
}
.orbit--socials {
  animation-duration: 5.1s;
  animation-delay: -1.7s;
}
.orbit--connections {
  animation-duration: 4.8s;
  animation-delay: -0.9s;
}
.orbit--credits {
  animation-duration: 5.4s;
  animation-delay: -2.4s;
}

/* --- The copy: 109px below the figure's top edge in the design ------------ */
@media (min-width: 62rem) {
  .scatter-copy {
    padding-top: clamp(0px, 5.68vw, 109px);
  }
}

.scatter-copy h2 {
  margin: 0 0 32px;
  font-size: clamp(2rem, 2.5vw, 48px);
  line-height: 1.1667;
  letter-spacing: 0;
  font-weight: 800;
  color: var(--ink);
  text-wrap: initial;
}

.scatter-copy h2 .accent {
  display: block;
  color: var(--indigo);
}

.scatter-copy p {
  margin: 0;
  font-size: clamp(1.125rem, 1.25vw, 24px);
  line-height: 1.6667;
  font-weight: 500;
  color: var(--ink);
}

/* =========================================================================
   PROFILE SHOWCASE + NETWORK  (Figma: Section 3 — the handover to navy)
   ========================================================================= */

.profiles {
  /* The pale grey continues from the section above and hands over to the
     navy band 506px into the lead card — exactly where the design runs its
     seam. site.js keeps --deck-seam at that fraction of the lead card's
     height; the fallback covers the no-JS stack and the first paint. */
  /* A hard seam, on purpose: a fade here was tried (v=46) and the owner
     called it ugly. The cards straddling the line is the design's device. */
  background: linear-gradient(
    to bottom,
    #fff var(--deck-seam, 506px),
    var(--navy-band) var(--deck-seam, 506px)
  );
  color: var(--on-navy);
  padding: 0 0 88px;
}

/* --- The deck -------------------------------------------------------------
   The deck is a size container 1532 wide (the design's fan). Every card sets
   1em = 1/1532 of that width and is 603 × 876em: the lead card's real size.
   The two neighbours are the same card scaled by 0.9 and 0.8 in their slots,
   which is exactly how the design draws them. Below the carousel breakpoint
   the lead card fills 86 % of the deck instead and the neighbours peek in
   from the edges. */
.profiles-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--w-deck);
  margin-inline: auto;
  container-type: inline-size;
}

.pcard {
  position: relative;
  font-size: calc(86cqw / 603);
  width: 603em;
  height: 876em;
  background: var(--navy-footer);
  border-radius: 24em;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 24em 53em rgba(0, 0, 0, 0.1), 0 96em 96em rgba(0, 0, 0, 0.09),
    0 217em 130em rgba(0, 0, 0, 0.05);
  transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* A gentle welcome on hover: the card lifts a few pixels and its shadow
   deepens. `translate` composes with the slot's `transform`, so the fan
   is kept. Reduced-motion users get the shadow shift without the lift. */
.pcard:hover {
  translate: 0 -6px;
  box-shadow: 0 30em 53em rgba(0, 0, 0, 0.16), 0 96em 96em rgba(0, 0, 0, 0.12),
    0 217em 130em rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .pcard:hover {
    translate: none;
  }
}

@media (min-width: 62rem) {
  .pcard {
    font-size: calc(100cqw / 1532);
  }
}

/* The photo: 524.5 tall, fading into the card's own navy from 77 % down. */
.pcard-photo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 524.5em;
  background-color: #1a1530;
  background-size: cover;
  background-repeat: no-repeat;
}

.pcard-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 8, 63, 0) 76.8%, #0b083f 100%);
  pointer-events: none;
}

/* The crops are the design's: Carl's 16:9 still sits in a 725.6 × 626.7 box
   nudged 8.7 up, Stella's 4:3 in a 607-wide box 2 to the left, David's field
   simply covers the area — each image fitted to its box height and centred. */
.pcard-photo--carl {
  background-image: url("card-carl.jpg");
  background-size: 1114em auto;
  background-position: -193.8em -8.7em;
}
.pcard-photo--stella {
  background-image: url("card-stella.jpg");
  background-size: 699em auto;
  background-position: -48em 0;
}
.pcard-photo--david {
  background-image: url("card-davidr.jpg");
  background-position: 50% 50%;
}

/* The lockup: 96.7 × 16 at (40, 48). */
.pcard .wm-id {
  position: absolute;
  z-index: 1;
  left: 40em;
  top: 48em;
  width: 96.727em;
  height: 16em;
}

/* Name and the active-years tag share a row whose baseline sits 359.5 above
   the card's bottom edge. */
.pcard-namerow {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 359.5em;
  padding: 0 40em;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16em;
}

.pcard-name {
  margin: 0;
  min-width: 0;
  font-size: 44em;
  line-height: 1.1818;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-wrap: initial;
}

.pcard-years {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8em;
  padding: 12em 16em;
  border-radius: 4em;
  background: rgba(0, 0, 0, 0.6);
}

.pcard-years strong {
  font: 700 16em/1 var(--mono);
  letter-spacing: 0.0625em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.pcard-span {
  display: flex;
  align-items: center;
  gap: 12em;
}

.pcard-span em {
  font: 700 12em/1 var(--mono);
  letter-spacing: 0.0833em;
  text-transform: uppercase;
  color: var(--periwinkle);
}

/* The small arrow between the years: a hairline with a chevron head. */
.pcard-span i {
  position: relative;
  width: 12em;
  height: 1px;
  background: var(--periwinkle);
}

.pcard-span i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2.5em;
  width: 4.5em;
  height: 4.5em;
  border-top: 1px solid var(--periwinkle);
  border-right: 1px solid var(--periwinkle);
  transform: rotate(45deg);
}

.pcard-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 556.5em;
  height: 1px;
  margin: 0;
  border: 0;
  background: rgba(138, 131, 240, 0.4);
}

/* --- Role + genre chips --------------------------------------------------- */
.pcard-tags {
  position: absolute;
  left: 0;
  right: 0;
  top: 589em;
  padding: 0 40em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12em;
}

.pcard-roles {
  display: flex;
  gap: 8em;
}

.pcard-genres {
  display: flex;
  gap: 12em;
}

/* Each chip sets its own font-size, so its padding and radius are expressed
   in fractions of that size (12 / 16 of a 16px chip = the design's 12px). */
.pcard .rchip,
.pcard .gchip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--navy-footer);
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
}

.pcard .rchip {
  font-size: 16em;
  line-height: 0.9;
  letter-spacing: 0.0625em;
  padding: 0.75em;
  border-radius: 0.25em;
  border-width: 0.09375em;
  color: #fff;
}

.pcard .gchip {
  font-size: 12em;
  line-height: 0.75;
  letter-spacing: 0.0833em;
  padding: 1em;
  border-radius: 0.3333em;
  border-width: 0.125em;
  color: var(--periwinkle);
}

/* --- The players ----------------------------------------------------------
   Two clips side by side from (36, 712): the live track, and the next one
   waiting to the right, which the card edge cuts off as in the design. */
.pcard-players {
  position: absolute;
  left: 36em;
  top: 712em;
  display: flex;
  align-items: center;
  gap: 16em;
}

.pclip {
  flex: none;
  width: 430em;
  padding: 24em;
  border-radius: 16em;
  background: rgba(2, 2, 14, 0.4);
}

.pcard .player {
  display: grid;
  grid-template-columns: 72em minmax(0, 1fr);
  grid-template-areas:
    "btn title"
    "btn wave";
  align-items: center;
  column-gap: 16em;
  row-gap: 9em;
  padding: 12em;
  border-radius: 120em;
  background: var(--navy);
  border: 1.5em solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pcard .player--dim {
  opacity: 0.4;
}

.pcard .pbtn {
  grid-area: btn;
  /* A <button> does not inherit font-size, and every measure here is in em. */
  font: inherit;
  width: 72em;
  height: 72em;
  padding: 0;
  border-radius: 50%;
  border: 4.5em solid var(--id-yellow);
  background: var(--navy-band);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.pcard .pbtn svg {
  display: block;
  width: 15em;
  height: 18em;
  margin-left: 3em;
  fill: #f5f5f5;
}

.pcard .pbtn--off {
  border-color: #fff;
  cursor: default;
}

.pcard button.pbtn {
  transition: scale 0.2s ease, box-shadow 0.2s ease;
}

.pcard button.pbtn:hover {
  scale: 1.06;
  box-shadow: 0 0 0 6em rgba(255, 252, 90, 0.14);
}

.pcard .ptrack {
  grid-area: title;
  min-width: 0;
  align-self: end;
}

.pcard .ptrack strong {
  display: block;
  font-size: 18em;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard .pwave {
  grid-area: wave;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 4.5em;
  height: 37em;
  overflow: hidden;
}

.pcard .pwave i {
  flex: none;
  width: 4.5em;
  height: var(--h, 10em);
  border-radius: 2em;
  background: #fff;
}

.pcard .pwave i.is-on {
  background: var(--id-yellow);
}

/* While a pressed track fetches its first seconds the button pulses, so a
   slow start reads as "coming" rather than "broken". site.js sets the class
   on press and clears it the moment audio actually plays (or fails). */
.player.is-loading .pbtn {
  animation: pbtn-wait 0.9s ease-in-out infinite;
}

@keyframes pbtn-wait {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player.is-loading .pbtn {
    animation: none;
    opacity: 0.6;
  }
}

/* --- Playing state ------------------------------------------------------
   site.js adds .is-playing to the one track that is sounding. The play
   triangle becomes a pause bar-pair and the whole wave turns lime and dances.
   The global prefers-reduced-motion rule freezes the dance, leaving a static
   lime wave — still a clear "on". */
.pcard .player.is-playing .pbtn svg {
  display: none;
}

.pcard .player.is-playing .pbtn::before {
  content: "";
  width: 14em;
  height: 18em;
  background: linear-gradient(#f5f5f5, #f5f5f5) left / 4.5em 100% no-repeat,
    linear-gradient(#f5f5f5, #f5f5f5) right / 4.5em 100% no-repeat;
}

.player.is-playing .pwave i {
  background: var(--id-yellow);
  transform-origin: center;
  animation: wave-bounce 0.9s ease-in-out infinite;
}

.player.is-playing .pwave i:nth-child(3n) {
  animation-duration: 1.15s;
}
.player.is-playing .pwave i:nth-child(3n + 1) {
  animation-duration: 0.72s;
}
.player.is-playing .pwave i:nth-child(2n) {
  animation-delay: -0.25s;
}
.player.is-playing .pwave i:nth-child(4n) {
  animation-delay: -0.45s;
}

@keyframes wave-bounce {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

/* --- The deck as a carousel ---------------------------------------------
   site.js assigns each card one of three slot classes and flags the deck
   `.is-carousel`; without JavaScript no slot exists and the cards simply
   stack, which is the no-script fallback. The deck's height is set by JS
   (absolutely positioned children give the container none of their own). */
.profiles-deck.is-carousel {
  display: block;
  overflow-x: clip;
  overflow-y: visible;
  /* Horizontal swipes belong to the deck; vertical ones keep scrolling the page. */
  touch-action: pan-y;
}

.profiles-deck.is-carousel .pcard {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Phone stage: the lead card centered, its neighbours peeking in from the
   edges — the peek is the swipe affordance. */
.deck-slot--lead {
  transform: translateX(-50%);
  z-index: 3;
}
.deck-slot--left {
  transform: translateX(-50%) translateX(-96%) scale(0.92);
  z-index: 1;
  opacity: 0.45;
}
.deck-slot--right {
  transform: translateX(-50%) translateX(96%) scale(0.92);
  z-index: 1;
  opacity: 0.45;
}

/* Desktop stage: the design's fan. The lead sits 30 right of centre; the
   left card is 0.9 scale, 494.65 to the left and 43.8 down; the right card is
   0.8 scale, 524.9 to the right and 87.6 down (all in deck pixels). */
@media (min-width: 62rem) {
  .deck-slot--lead {
    transform: translate(calc(-50% + 30.2em), 0);
  }
  .deck-slot--left {
    transform: translate(calc(-50% - 494.65em), 43.8em) scale(0.9);
    opacity: 1;
    z-index: 2;
  }
  .deck-slot--right {
    transform: translate(calc(-50% + 524.9em), 87.6em) scale(0.8);
    opacity: 1;
    z-index: 1;
  }
  .profiles-deck.is-carousel .pcard:not(.deck-slot--lead) {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profiles-deck.is-carousel .pcard {
    transition: none;
  }
}

/* --- Deck controls ------------------------------------------------------
   The design shows the fan without controls, so on desktop — where all three
   cards are on stage and a click fronts a tucked one — they stay hidden. On a
   phone they are the way past the edge peeks. */
.deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

@media (min-width: 62rem) {
  .deck-controls {
    display: none;
  }
}

.deck-arrow {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule-navy);
  background: var(--navy-card);
  color: var(--on-navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.deck-arrow:hover {
  border-color: var(--id-yellow);
  color: var(--id-yellow);
}

.deck-arrow svg {
  width: 1rem;
  height: 1rem;
}

.deck-dots {
  display: inline-flex;
  gap: 0.55rem;
}

.deck-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule-navy);
  cursor: pointer;
  transition: background 0.2s ease, scale 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.deck-dot[aria-current="true"] {
  background: var(--id-yellow);
  scale: 1.25;
}

/* --- Network heading: 48 below the deck, 960 wide ----------------------- */

.network {
  text-align: center;
  max-width: 960px;
  margin: 48px auto 0;
  display: grid;
  gap: 8px;
}

.network h2 {
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 48px);
  line-height: 1.21;
  letter-spacing: 0;
  /* Designer's call: pure white, 800 (the frame had cream, 700). */
  font-weight: 800;
  color: #fff;
}

.network p {
  margin: 0;
  font-size: clamp(1.0625rem, 1.146vw, 22px);
  line-height: 1.55;
  font-weight: 400;
  color: #fff;
}

/* --- The hairline between the band's sections --------------------------- */

.band-divider {
  background: var(--navy-band);
  padding: 0 var(--pad);
}

.band-divider::before {
  content: "";
  display: block;
  max-width: var(--w-rule);
  height: 1px;
  margin-inline: auto;
  background: rgba(138, 131, 240, 0.4);
}

/* =========================================================================
   FEATURES  (Figma: End Teasers, 1400 × 382 — 113 below the rule, 94 above the next)
   ========================================================================= */

.features {
  background: var(--navy-band);
  color: #fff;
  padding: clamp(3.5rem, 5.9vw, 113px) 0 clamp(3rem, 4.9vw, 94px);
}

.features-grid {
  display: grid;
  /* minmax(0, …) so the 470px opportunity card can never widen the column
     past the viewport on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 3.33vw, 64px);
}

.feature {
  min-width: 0;
}

@media (min-width: 54rem) {
  .features-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.feature h2 {
  margin: 0 0 33px;
  font-size: clamp(1.75rem, 2.083vw, 40px);
  line-height: 1.21;
  letter-spacing: 0;
  font-weight: 700;
  color: #fff;
}

.feature > p {
  margin: 0 0 33px;
  font-size: clamp(1.125rem, 1.25vw, 24px);
  line-height: 1.3333;
  font-weight: 500;
  color: #fff;
}

/* --- People chips: 80 tall, two equal columns, 12 apart ------------------
   The frame let each chip hug its label, which made four different widths;
   an even 2 × 2 grid reads calmer (owner's call, 2026-09-10). A cell needs
   ~196px for "SONGWRITER" beside a 48px avatar, so on a phone (content
   under ~404px) the grid drops to one column rather than truncating labels. */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
  max-width: 420px;
}

.person {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--navy-footer);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

/* The picked person: a 2px indigo edge over indigo dimmed 40 % with navy. */
.person--active {
  background: #3e37a6;
  border: 2px solid var(--indigo);
}

.person--bare {
  background: none;
  border: 0;
  padding: 0;
}

/* The chips are real buttons — same look, plus the states a control needs.
   The global :focus-visible ring covers keyboard focus. */
button.person {
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background 0.2s ease, translate 0.2s ease,
    box-shadow 0.2s ease;
}

button.person:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

button.person:hover:not(.person--active) {
  border-color: var(--periwinkle);
}

.person-avatar {
  flex: none;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(140deg, var(--indigo), var(--periwinkle));
}

/* A band is several people: 8px-rounded tiles overlapping by 28, each one
   over the one before it, as the design stacks them. */
.person-avatars {
  flex: none;
  display: inline-flex;
}

.person-avatars .person-avatar {
  position: relative;
  border-radius: 8px;
}

.person-avatars .person-avatar:not(:last-child) {
  margin-right: -28px;
}

/* Photos from the design, layered over the old gradients so the chip still
   paints something while an image loads. The Northway order is the design's:
   a = the curly-haired man, b = the smiling woman, c = the man in glasses. */
.person-avatar--maya {
  background: url("avatar-maya.jpg") center/cover no-repeat,
    linear-gradient(140deg, #6b4bc4, #c78fb0);
}
.person-avatar--nw-a {
  background: url("avatar-northway-a.jpg?v=38") center/cover no-repeat,
    linear-gradient(140deg, #3a3550, #8a6b5a);
}
.person-avatar--nw-b {
  background: url("avatar-northway-b.jpg?v=38") center/cover no-repeat,
    linear-gradient(140deg, #4a3550, #7a6b5a);
}
.person-avatar--nw-c {
  background: url("avatar-northway-c.jpg?v=38") center/cover no-repeat,
    linear-gradient(140deg, #3a4550, #8a7b5a);
}
.person-avatar--alex {
  background: url("avatar-alex.jpg") center/cover no-repeat,
    linear-gradient(140deg, #2f2a5c, #5a86b9);
}
.person-avatar--sofia {
  background: url("avatar-sofia.jpg") center/cover no-repeat,
    linear-gradient(140deg, #7d5a86, #caa27a);
}

.person-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.person-text em {
  font: 700 12px/1 var(--mono);
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--id-yellow);
}

.person-text strong {
  font: 700 16px/1 var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Opportunity cards -------------------------------------------------- */

.opp-track {
  position: relative;
  /* The four person cards share one grid cell, stacked; the cell takes the
     tallest card's height so cycling never moves the layout below. The next
     card peeks in from the right and is cut by the column's edge. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* Picking a person advances the deck: the card that was peeking slides in
   from the right and settles, the one that was showing fades out where it
   stands, and a new peek fades in behind. Hidden cards wait at the peek
   position (invisible) so whichever card is picked next arrives the same
   way. The global reduced-motion rule turns all of this into a plain swap. */
.opp-track > .opp-card {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translateX(494px) scale(0.96);
  /* Outgoing: fade in place, then jump back to the peek position unseen. */
  transition: opacity 0.25s ease, transform 0s linear 0.25s;
}

/* The one behind: 494 to the right at 44 %, fading out over its first 257px —
   the design's mask. */
.opp-track > .opp-card.is-next {
  opacity: 0.44;
  z-index: 1;
  transform: translateX(494px);
  transition: opacity 0.3s ease 0.2s, transform 0s;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 257px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 257px 100%;
  mask-image: linear-gradient(to right, #000, transparent 257px);
  mask-repeat: no-repeat;
  mask-size: 257px 100%;
}

.opp-track > .opp-card.is-active {
  opacity: 1;
  z-index: 2;
  transform: none;
  pointer-events: auto;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.opp-card {
  position: relative;
  z-index: 2;
  width: 470px;
  max-width: 100%;
  background: var(--navy-band);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
}

.opp-title {
  margin: 0;
  padding-right: 56px;
  font-size: clamp(1.75rem, 2.083vw, 40px);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 700;
  color: #d0cdf9;
  text-wrap: initial;
}

.opp-body {
  margin: 8px 0 24px;
  padding-right: 56px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
}

.opp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.opp-genres {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

.opp-card .gchip {
  display: inline-flex;
  align-items: center;
  padding: 12px;
  border-radius: 4px;
  background: var(--navy-footer);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  font: 700 12px/10px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--periwinkle);
  white-space: nowrap;
}

.opp-card .person--bare {
  gap: 12px;
}

/* On a phone the card is narrow already; the design's 56px of air to the
   right of the title and body would only force extra lines. */
@media (max-width: 62rem) {
  .opp-title,
  .opp-body {
    padding-right: 0;
  }
}

/* =========================================================================
   FINAL CTA  (Figma: Secure Spot, 930 wide — 69 below the rule, 127 above the footer)
   ========================================================================= */

.final-cta {
  background: var(--navy-band);
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 3.6vw, 69px) 0 clamp(4rem, 6.6vw, 127px);
}

.final-cta h2 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 2.5vw, 48px);
  line-height: 1.3333;
  letter-spacing: 0;
  font-weight: 800;
  color: #fff;
}

.final-cta h2 .accent {
  color: var(--indigo);
}

.final-cta .signup-form {
  margin: 0 auto;
  max-width: 720px;
}

.final-cta .form-note {
  text-align: center;
}

/* The two form notes are ours, not the design's. On desktop they hang below
   the form without taking part in the layout, so the hero copy stays centred
   and the CTA band keeps its 127px — the notes sit in that air. */
@media (min-width: 62rem) {
  .signup-form {
    position: relative;
  }
  .signup-form .form-note {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 12px 0 0;
  }
  .final-cta .signup-form .form-note {
    margin-top: 16px;
  }
}

/* =========================================================================
   SUBPAGE COMPONENTS  (privacy / terms / support / thanks / 404)
   ========================================================================= */

/* Row of links separated by middots — used on the 404 page. */
.inline-links {
  margin-top: 2rem;
  color: var(--muted);
}

.inline-links a {
  font-weight: 500;
  white-space: nowrap;
}

/* Opening line of a section, set above the paragraphs. */
.body-lead {
  font-weight: 700;
  color: var(--ink);
}

/* A mono status eyebrow with an amber dot — the "Spot secured" line above the
   thank-you heading. Amber only ever means state. */
.beta-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.beta-label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* A bold announcement line under a heading — used on the thank-you page. */
.hero-tagline {
  margin: -0.25rem 0 1.25rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  max-width: 24ch;
  text-wrap: balance;
}

/* --- Thank-you page ----------------------------------------------------- */

.thanks {
  padding-block: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.thanks h1 {
  margin-bottom: 1rem;
}

.thanks-sub {
  max-width: 36ch;
}

.share-lede {
  color: var(--muted);
  max-width: 44ch;
}

.share-card {
  margin-top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 36rem;
}

.share-url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.share-url code {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  background: rgba(10, 7, 59, 0.05);
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
}

.share-url .btn {
  margin-top: 0;
}

[data-copy] .label-done {
  display: none;
}

[data-copy].is-copied .label-idle {
  display: none;
}

[data-copy].is-copied .label-done {
  display: inline;
}

.share-text {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1.125rem;
  border-left: 3px solid var(--periwinkle);
  color: var(--muted);
  font-size: 0.9375rem;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.share-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.share-link:hover,
.share-link:focus-visible {
  color: var(--indigo);
  border-color: var(--indigo);
  background: rgba(96, 87, 235, 0.06);
}

/* Instagram is not set up yet, so this is a status chip, not a link. */
.follow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
}

.follow-chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

.back-link {
  margin: 2.5rem 0 0;
}

.back-link a {
  font-weight: 500;
}

/* --- Contact ------------------------------------------------------------ */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.contact-list dt,
.contact-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.contact-list dd {
  margin: 0;
  font-size: 1.0625rem;
}

.contact-list a {
  font-weight: 500;
}

address {
  font-style: normal;
}

/* --- Long-form legal/support pages -------------------------------------- */

.prose {
  max-width: 44rem;
}

.prose h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  margin-top: 3rem;
  margin-bottom: 0.875rem;
  color: var(--navy);
}

.prose h2:first-of-type {
  margin-top: 2rem;
}

.prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose li::marker {
  color: var(--periwinkle);
}

.page-head {
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
}

.updated {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 1.25rem;
}

.note {
  border-left: 3px solid var(--periwinkle);
  padding: 0.25rem 0 0.25rem 1.125rem;
  margin: 1.75rem 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- Footer ---------------------------------------------------------------
   Figma: 376 tall on the lighter navy — 64 of padding, three 315-wide columns
   32 apart inside a 1088 container with 40 of its own padding, a rule, and
   the company line. */

.site-footer {
  background: var(--navy-footer);
  color: var(--lavender);
  padding-block: 64px;
}

.site-footer .brand {
  color: #fff;
}

.site-footer .brand:hover {
  color: var(--periwinkle);
}

.site-footer a {
  color: var(--cream);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--periwinkle);
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

@media (min-width: 62rem) {
  .footer-grid {
    padding-inline: 40px;
  }
  .footer-grid > div {
    min-height: 161px;
  }
}

.footer-grid h2 {
  margin: 0 0 11px;
  font: 700 11px/12px var(--mono);
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--periwinkle);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.footer-grid li {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
}

/* The ways to reach us are the underlined links. */
.footer-reach a {
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-color: currentColor;
}

.footer-tagline {
  margin: 8px 0 0;
  font: 700 12px/19.8px var(--font);
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--periwinkle);
}

.footer-address {
  margin-top: 11px;
  font-style: normal;
  font-size: 14px;
  line-height: 23.1px;
  color: rgba(232, 230, 252, 0.75);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 23px;
  border-top: 1px solid rgba(232, 230, 252, 0.2);
  font-size: 14px;
  line-height: 23.1px;
  color: rgba(232, 230, 252, 0.75);
}

@media (min-width: 62rem) {
  .footer-bottom {
    margin-inline: 40px;
  }
}

.footer-bottom p {
  margin: 0;
}

/* Footer variant for the legal/support pages, which don't need the full grid. */
.footer-slim {
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Touch targets ------------------------------------------------------ */
@media (pointer: coarse) {
  .lang-toggle button {
    min-height: 2.75rem;
    padding-inline: 1rem;
  }

  .footer-grid li {
    margin-bottom: 0.75rem;
  }
}

/* --- Print ---------------------------------------------------------------
   A privacy policy and a set of terms are documents people save as PDFs and
   keep. The footer stays: on the legal pages it carries the company
   registration details, which is what makes a printed copy worth anything. */
@media print {
  :root {
    --bg: #fff;
    --fg: #000;
    --muted: #000;
    --navy: #000;
    --indigo: #000;
    --rule: #999;
  }

  .site-header,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  a {
    color: #000;
    text-decoration-color: currentColor;
  }

  .site-footer {
    background: none;
    color: #000;
    border-top: 1px solid #999;
  }

  .site-footer a,
  .footer-grid h2,
  .footer-tagline,
  .footer-address,
  .footer-bottom {
    color: #000;
  }

  section {
    padding-block: 1.5rem;
  }

  .wrap {
    max-width: none;
    padding-inline: 0;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }
}