/* The website's one stylesheet (plans/public-website.md, section 5; D109). Phone first (390 px), then tablet and laptop. Colours are tokens,
   light and dark follow the device (Q99 A); contrast as measured in section 5.1. Only position and transparency move (section 5.4, SCROLL-1);
   nothing is blurred; "reduce motion" shows everything still. No inline style anywhere (the content policy of section 8.4). */

:root {
  --ink: #12141c;
  --cream: #f4eedd;
  --coral: #f9575b;
  --coral-deep: #c7363c;
  --purple: #5b45d6;
  --purple-light: #7b6cf0;
  --lilac: #9b93d9;
  --paper: #fbf8f1;

  /* Light (the default) */
  --bg: var(--paper);
  --bg-2: #f3eee3;
  --surface: #ffffff;
  --text: var(--ink);
  --text-2: #4e4a5e;
  --line: rgb(18 20 28 / 0.1);
  --line-strong: rgb(18 20 28 / 0.22);
  --accent-text: var(--coral-deep); /* coral as text on light grounds is too weak (2.8): the deeper coral (4.5) */
  --on-accent: var(--paper);
  --link: var(--purple);
  --descriptor-2: var(--purple);
  --shadow: 0 30px 60px -24px rgb(18 20 28 / 0.38), 0 12px 24px -12px rgb(18 20 28 / 0.18);

  /* Shared */
  --band: var(--ink);
  --band-text: var(--cream);
  --band-text-2: #cfc9dd;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --bg-2: #171a23;
    --surface: #1c1f2b;
    --text: var(--cream);
    --text-2: #bdb7cf;
    --line: rgb(244 238 221 / 0.1);
    --line-strong: rgb(244 238 221 / 0.24);
    --accent-text: var(--coral);
    --on-accent: var(--ink);
    --link: #aea4f7;
    --descriptor-2: var(--purple-light);
    /* The thin light edge keeps the device frames visible on the dark page (critique C19: twice as strong). */
    --shadow: 0 30px 60px -24px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(244 238 221 / 0.13);
    --band: #0b0c11;
  }
}

/* ---- Base ---------------------------------------------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
/* Smooth only once the page has loaded (site.js adds .smooth): a page opened or refreshed at a chapter jumps there, never glides (owner, 2026-11-07,
   the iPad's "slingshot"). */
@media (prefers-reduced-motion: no-preference) {
  html.smooth {
    scroll-behavior: smooth;
  }
}
/* The footer sits at the bottom of the screen on a short page (critique C23). */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main {
  flex: 1 0 auto;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  color: var(--link);
}
/* No grey rectangle on a tap (Android's tap highlight, owner 2026-11-07): the buttons answer with their own press (scale) instead; the keyboard's focus ring
   stays. */
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--purple-light);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 744px) {
  .wrap {
    padding-inline: 32px;
  }
}
.wrap--narrow {
  max-width: 800px;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
}
.skip:focus {
  left: 16px;
}

/* ---- Logo pieces --------------------------------------------------------------------------------------------------------------------------- */
/* The wordmarks and the 1ne are files (brand/*.svg); their light and dark colours are in the files, chosen by <picture> (Logo.tsx). */
.wordmark,
.solo-mark {
  display: block;
  width: auto;
}
/* The 4& is the app's own square picture (owner, Q130): the mark fills 94 % of its width and 70.4 % of its height, so negative margins crop the
   empty border and --h is the mark's own visible height. */
.mark {
  --h: 30px;
  display: block;
  width: calc(var(--h) / 0.7036);
  height: auto;
  margin: calc(var(--h) * -0.2104) calc(var(--h) * -0.0426);
}

/* ---- Buttons (TAP-1, TAP-2: 44 px at least, 48 for a main action that stands alone) --------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink); /* near-black on coral: 5.7; white on coral would be 3.2 (never) */
  font-weight: 650;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.15s var(--ease-out),
    background-color 0.2s var(--ease-out);
}
.button:active {
  transform: scale(0.97);
}
.button--quiet {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
/* Hover only with a mouse (DEV-3, critique C24): on touch a tapped button would keep its hover look. */
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: #ff6b6e;
  }
  .button--quiet:hover {
    background: var(--line);
  }
  .topnav a:hover,
  .footer-links a:hover {
    color: var(--text);
  }
  /* A card under the mouse lights up (owner, 2026-11-07); one that opens something also rises, with a soft shadow and a faint coral tint, faded in.
     A card that cannot be clicked (features, Contact) shows only the faint coral edge: rising would promise a click (critique round 2, M7, Q201). */
  .demo-card:hover {
    transform: translateY(-4px);
  }
  .card:hover::before,
  .demo-card:hover::before {
    opacity: 1;
  }
}
/* The light a card takes on under the mouse: one layer, between the card's ground and its words, shown by its transparency alone. Every card gets
   the coral edge; a card that opens something (.demo-card) also the tint and the shadow. */
.card,
.demo-card {
  position: relative;
  isolation: isolate;
}
.demo-card {
  transition: transform 0.25s var(--ease-out);
}
.card::before,
.demo-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgb(249 87 91 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.demo-card::before {
  background: rgb(249 87 91 / 0.05);
  box-shadow: 0 18px 36px -18px rgb(18 20 28 / 0.35);
}
@media (prefers-color-scheme: dark) {
  .demo-card::before {
    background: rgb(249 87 91 / 0.07);
    box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-card:hover {
    transform: none;
  }
}
.button--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.button--large {
  min-height: 56px;
  padding: 0 34px;
  font-size: 18px;
}

/* ---- Top bar ------------------------------------------------------------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg); /* solid: no blur over scrolling content (the iPad stutter, L75) */
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}
.mark--top {
  --h: 28px;
}
.wordmark--top {
  height: 21px;
  margin-top: 4px; /* the box holds the g's descender: optically on the 4&'s line */
}
.topnav {
  display: none;
  margin-left: auto;
  gap: 2px;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
}
.topbar .button--small {
  margin-left: auto;
}
.topbar .long {
  display: none;
}
/* The menu from an upright iPad on (critique C22), tighter until there is room; the button's long words from 960. */
@media (min-width: 744px) {
  .topnav {
    display: flex;
  }
  .topbar .button--small {
    margin-left: 8px;
  }
}
@media (min-width: 744px) and (max-width: 959px) {
  .topnav a {
    padding: 0 8px;
    font-size: 14px;
  }
}
@media (min-width: 744px) and (max-width: 899px) {
  .wordmark--top {
    display: none;
  }
}
@media (min-width: 960px) {
  .topbar .long {
    display: inline;
  }
  .topbar .short {
    display: none;
  }
}
@media (max-width: 359px) {
  .wordmark--top {
    display: none;
  }
}

/* ---- Hero ---------------------------------------------------------------------------------------------------------------------------------- */
.hero {
  padding: 48px 0 32px;
  text-align: center;
  background:
    radial-gradient(70% 45% at 15% 0%, rgb(249 87 91 / 0.14), transparent 70%),
    radial-gradient(60% 40% at 90% 8%, rgb(91 69 214 / 0.16), transparent 70%),
    var(--bg);
}
.mark--hero {
  --h: 76px;
  margin: calc(var(--h) * -0.2104) auto calc(var(--h) * -0.2104 + 28px);
}
.hero h1 {
  margin: 0 auto;
  max-width: 13ch;
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.lead {
  margin: 20px auto 0;
  max-width: 34ch;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--text-2);
}
.descriptor {
  margin: 18px 0 0;
  font-size: 19px; /* bold at 19 px is "large text": purple light on near-black passes */
  font-weight: 750;
  letter-spacing: -0.01em;
}
.descriptor .d1 {
  color: var(--accent-text);
}
.descriptor .d2 {
  color: var(--descriptor-2);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 479px) {
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-inline: auto;
  }
}
.audience {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--text-2);
}
/* "Already on a team? Open the app" on a phone only: from 744 the top bar has it (critique C22). */
.hero-app a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  font-weight: 650;
}
.hero-devices {
  position: relative;
  margin-top: 48px;
  padding-bottom: 24px;
}
.hero-devices .device--tablet {
  width: min(100%, 900px);
  margin-inline: auto;
}
.hero-devices .device--phone {
  position: absolute;
  right: max(16px, calc(50% - 500px));
  bottom: 0;
  width: clamp(112px, 26%, 210px);
}
/* A phone shows its own pictures (the Stage on a phone), from 744 the tablet ones (critique C9). */
.only-wide {
  display: none;
}
@media (min-width: 744px) {
  .only-wide {
    display: block;
  }
  .only-narrow {
    display: none;
  }
}
.hero-devices.only-narrow {
  padding-bottom: 8px;
}
.hero-devices.only-narrow .device--phone {
  position: static;
  width: min(62vw, 300px);
  margin-inline: auto;
}
/* On a phone the top bar already shows the 4&: the large one would push the product down (Q194 A, critique C26). */
.mark--hero {
  display: none;
}
@media (min-width: 744px) {
  .hero {
    padding-top: 64px;
  }
  .mark--hero {
    display: block;
    --h: 88px;
  }
  .hero-devices {
    margin-top: 64px;
  }
  .hero-app {
    display: none;
  }
}
/* A laptop and a sideways tablet: words on the left, the app on the right, so the product is in the first view (critique C9). */
@media (min-width: 1000px) {
  .hero {
    padding: 72px 0 64px;
    text-align: left;
  }
  .hero-in {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 40px;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 32px;
  }
  .hero-in > .wrap {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .mark--hero {
    --h: 72px;
    margin-left: calc(var(--h) * -0.0426);
    margin-right: 0;
  }
  .hero h1 {
    margin: 0;
    font-size: clamp(3rem, 1rem + 3.6vw, 4.6rem);
  }
  .lead {
    margin-left: 0;
  }
  .hero .actions {
    justify-content: flex-start;
  }
  .hero-devices {
    margin-top: 0;
    padding-bottom: 28px;
  }
  .hero-devices .device--tablet {
    width: 100%;
  }
  /* The phone stands partly out of the tablet's frame (owner, 2026-11-07). */
  .hero-devices .device--phone {
    right: -8%;
    bottom: 0;
    width: 25%;
  }
}

/* The one entrance (section 5.4): the hero settles in once, under 0.6 s; nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * {
    animation: settle 0.6s var(--ease-out) both;
  }
  .hero-text > :nth-child(2) {
    animation-delay: 0.05s;
  }
  .hero-text > :nth-child(3) {
    animation-delay: 0.1s;
  }
  .hero-text > :nth-child(n + 4) {
    animation-delay: 0.15s;
  }
  .hero-devices {
    animation: settle 0.45s 0.1s var(--ease-out) both;
  }
}
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Sections rise gently into view, drawn by the browser itself (no script); browsers without it simply show them. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise > .wrap {
      animation: settle linear both;
      animation-timeline: view();
      /* Done by the time the section's top is 15 % up the screen: no ghostly heading while it is read (critique C24). */
      animation-range: entry 0% entry 15%;
    }
  }
  /* Moving between the site's pages: the browser's own soft fade (section 5.4). */
  @view-transition {
    navigation: auto;
  }
}

/* ---- Section heads ------------------------------------------------------------------------------------------------------------------------- */
h2 {
  margin: 0.25em 0 0.5em;
  font-size: clamp(2rem, 1.35rem + 2.8vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--accent-text);
  font-weight: 700;
  font-size: 16px;
}
/* One number style on the page, the outlined circle of "How it works" (critique C21). */
.kicker-n {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--coral);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 800;
}
/* Every section head on the left, except the hero and the beta panel (critique C21 A). */
.section-lead {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-2);
  max-width: 44ch;
}
.points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}
.points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

/* ---- Chapters: Plan, Rehearse, Perform ------------------------------------------------------------------------------------------------------ */
.chapter {
  padding: 72px 0;
}
.chapter + .chapter {
  border-top: 1px solid var(--line);
}
.chapter-in {
  display: grid;
  gap: 40px;
}
.chapter-picture {
  display: grid;
  justify-items: center;
}
/* Perform: the stage's lights come on facing the reader, from behind the device and the words (owner, 2026-11-08: "as he is hit by the lights in
   the face"; the app stays opaque). A bright bloom behind the device spills round its edges, three lamps peek over its top edge, rays fan out
   towards the reader. site.js brings them up (opacity only); lit as they stand without the script or with reduced motion. The section clips them,
   so nothing sticks out sideways (a phone would let the page pan, and the top bar and the strip slide away). */
.chapter:has(.stage-light) {
  overflow: clip;
}
.chapter-in:has(.stage-light) {
  position: relative;
  isolation: isolate; /* the lights' layer: behind everything in the chapter, the words and the device too */
}
.chapter-picture:has(.stage-light) {
  position: relative;
}
/* The lamps: the middle one peeks over the device's top edge, the outer two stand beyond its top corners (owner, 2026-11-08), wider on a tablet
   picture and wider still beside the words on a wide screen. In the layer's own measures: the device's top edge is at 26 % of its height; a phone
   spans 37 % to 63 % of its width, a tablet 29 % to 71 %. */
.stage-light {
  --lamp-l: 30%;
  --lamp-r: 70%;
  --lamp-y: 24%;
  --ray-side: 26% 22%; /* how far each lamp's rays reach, inside the layer so they fade out before its edge */
  --ray-mid: 34% 28%;
  --bloom: 30% 26%;
  position: absolute;
  z-index: -1;
  inset: -55% -70%;
  pointer-events: none;
  background:
    radial-gradient(circle 46px at var(--lamp-l) var(--lamp-y), rgba(255, 250, 238, 0.95), rgba(255, 214, 160, 0.45) 30%, transparent 100%),
    radial-gradient(circle 54px at 50% 26.5%, rgba(255, 252, 242, 1), rgba(255, 220, 168, 0.5) 30%, transparent 100%),
    radial-gradient(circle 46px at var(--lamp-r) var(--lamp-y), rgba(255, 250, 238, 0.95), rgba(255, 214, 160, 0.45) 30%, transparent 100%),
    radial-gradient(ellipse var(--bloom) at 50% 46%, rgba(255, 238, 210, 0.55), rgba(255, 196, 140, 0.26) 45%, rgba(255, 120, 90, 0.08) 75%, transparent 100%);
}
/* Only in the dark: on a light page the lamps were yellow blobs (owner, 2026-11-08). */
@media not (prefers-color-scheme: dark) {
  .stage-light {
    display: none;
  }
}
@media (min-width: 744px) {
  .stage-light {
    --lamp-l: 31%; /* the tablet fills the width: the lamps at its top corners */
    --lamp-r: 69%;
    --ray-side: 21% 18%;
  }
}
@media (min-width: 900px) {
  /* A wider layer beside the words: the device spans 34 % to 66 % of it. */
  .stage-light {
    inset: -55% -110%;
    --lamp-l: 23%; /* behind the words */
    --lamp-r: 72%; /* short of the screen's edge */
    --ray-side: 21% 18%;
    --ray-mid: 26% 22%;
    --bloom: 22% 26%;
  }
}
.stage-light::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Rays from each lamp towards the reader, uneven, soft at their edges and blurred: light in haze, not a comb (owner, 2026-11-08). Each lamp's
     rays fade with the distance from it. */
  background:
    repeating-conic-gradient(from 4deg at var(--lamp-l) var(--lamp-y), transparent 0deg, rgba(255, 232, 196, 0.3) 4deg, transparent 9deg 26deg),
    repeating-conic-gradient(from 11deg at 50% 26.5%, transparent 0deg, rgba(255, 232, 196, 0.3) 4deg, transparent 9deg 22deg),
    repeating-conic-gradient(from 17deg at 50% 26.5%, transparent 0deg, rgba(255, 226, 186, 0.16) 7deg, transparent 14deg 37deg),
    repeating-conic-gradient(from 9deg at var(--lamp-r) var(--lamp-y), transparent 0deg, rgba(255, 232, 196, 0.3) 4deg, transparent 9deg 29deg);
  filter: blur(7px);
  -webkit-mask-image:
    radial-gradient(ellipse var(--ray-side) at var(--lamp-l) var(--lamp-y), #000 3%, rgba(0, 0, 0, 0.5) 35%, transparent 100%),
    radial-gradient(ellipse var(--ray-mid) at 50% 26.5%, #000 3%, rgba(0, 0, 0, 0.5) 35%, transparent 100%),
    radial-gradient(ellipse var(--ray-side) at var(--lamp-r) var(--lamp-y), #000 3%, rgba(0, 0, 0, 0.5) 35%, transparent 100%);
  mask-image:
    radial-gradient(ellipse var(--ray-side) at var(--lamp-l) var(--lamp-y), #000 3%, rgba(0, 0, 0, 0.5) 35%, transparent 100%),
    radial-gradient(ellipse var(--ray-mid) at 50% 26.5%, #000 3%, rgba(0, 0, 0, 0.5) 35%, transparent 100%),
    radial-gradient(ellipse var(--ray-side) at var(--lamp-r) var(--lamp-y), #000 3%, rgba(0, 0, 0, 0.5) 35%, transparent 100%);
}
.chapter-picture .device--phone {
  width: clamp(210px, 58vw, 300px);
}
.chapter-picture .device--upright {
  width: min(100%, 400px);
}
@media (min-width: 900px) {
  .chapter {
    padding: 112px 0;
  }
  .chapter-in {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;
  }
  .chapter--flip .chapter-picture {
    order: -1;
  }
}

/* ---- "3 easy steps": the chapters' mini map (owner, 2026-11-07) ------------------------------------------------------------------------------- */
/* It stays in one place while the three chapters are read: a see-through strip under the top bar, or, from 1360 px, a column in the empty left
   margin. site.js flies the big title into the map (wide screens), then each chapter's number (and on a wide screen its word) into its station as the
   chapter reaches the map, and moves the train with the scrolling, from one station to the next; only position and transparency change. Without the
   script, or with reduced motion: the map stands still, complete. */
/* The big title: the section's heading. On the strip's screens only for screen readers (the strip shows its small copy). */
.journey-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.journey-head h2 {
  margin: 0;
}
.journey-map {
  position: sticky;
  top: 64px;
  z-index: 9;
  padding: 4px 16px;
  background: var(--bg);
  /* A little see-through, without a blur (the iPad stutter, L75); 92 %, so bold words and chords behind it do not show (critique round 2, M5). */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
.jm-in {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin-inline: auto;
}
.jm-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 700;
  white-space: nowrap;
}
.jm-track {
  position: relative;
  flex: 1;
}
.journey-map ol {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The line through the stations, grey; over it, the stretch the train has travelled, coral (.jm-done: a window with a coral line that site.js slides in;
   without the script it stays out of sight). */
.journey-map ol::before,
.jm-done {
  content: "";
  position: absolute;
  top: 21px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--line-strong);
}
.jm-done {
  overflow: hidden;
  background: none;
  pointer-events: none;
}
.jm-done > span {
  position: absolute;
  inset: 0;
  background: var(--coral);
  transform: translateX(-100%);
}
.journey-map a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}
/* A station waiting for its number. */
.jm-stop {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
/* The station's number, faint, while it waits for its own to land: landing then reads as lighting up (critique round 2, M6). */
.jm-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-2);
  opacity: 0.5;
  font-size: 15px;
  font-weight: 800;
}
/* The number, drawn like the chapter's own (.kicker-n), which it replaces while it flies and once it has landed. */
.jm-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--coral);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 800;
}
/* What has flown is shown once, at the place it flew to: the chapter's copy is hidden meanwhile. */
.jm-num.away,
.jm-name.away,
.jm-title.away,
.kicker-n.gone,
.kicker-w.gone,
.jh-fly.gone {
  opacity: 0;
}
/* The station names: in the column on a wide screen; on the strip only for screen readers (the chapters show them). */
.jm-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The train: under the stations, so it is hidden at a station and comes out of it as it leaves. */
.jm-train {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgb(249 87 91 / 0.25);
  opacity: 0;
  pointer-events: none;
}
.journey-map.live .jm-train {
  opacity: 1;
}
/* A chapter opened from a link starts right under the strip, at the very moment the strip settles under the top bar (64 + 53 = the page's 76 + 41):
   its number arrives in its station as the strip arrives at the top (owner, 2026-11-07: "a sense of arrival"). */
.journey .chapter {
  scroll-margin-top: 41px;
}

/* On a wide screen the big title opens the section, centred, with room below it to fly through (down, then left, shrinking into the map); the map
   stands in the empty margin on the left, in the middle of the screen, from the first chapter to the last. The journey is a grid so the map can
   share the chapters' rows and stick only while they are on the screen. */
@media (min-width: 1360px) {
  /* The hero fills the first screen but for the big title's line, so the title waits whole at the bottom of the screen, on any screen (owner,
     2026-11-07): the hero, less the top bar (64), the title (56) and a gap (24). */
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(100vh - 144px);
    min-height: calc(100svh - 144px);
  }
  .journey {
    display: grid;
  }
  /* Little room below the title (owner, 2026-11-07: "still too much empty space"): it flies on while the first chapter comes up. */
  .journey > .journey-head {
    grid-row: 1;
    grid-column: 1;
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: 0 32px 6vh;
    text-align: center;
  }
  .journey > .chapter:nth-of-type(1) {
    padding-top: 48px;
  }
  .jh-fly {
    display: inline-block;
    position: relative;
    z-index: 2;
    transform-origin: 0 0;
  }
  .journey > .chapter {
    grid-column: 1;
    scroll-margin-top: 0;
  }
  .journey > .chapter:nth-of-type(1) {
    grid-row: 2;
  }
  .journey > .chapter:nth-of-type(2) {
    grid-row: 3;
  }
  .journey > .chapter:nth-of-type(3) {
    grid-row: 4;
  }
  /* Parked at the top, under the top bar, where the reader reads (owner, 2026-11-07: in the middle of the screen the numbers cut through the
     pictures or came back down); from the title's row on, so it parks as the title lands in it. */
  .journey-map {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: start;
    justify-self: start;
    top: 96px;
    z-index: 1;
    width: 150px;
    margin: 0 0 0 max(20px, calc(50% - 700px));
    padding: 0;
    background: none;
    border: 0;
  }
  .jm-in {
    display: block;
    max-width: none;
  }
  /* The big title made small: the same face, weight and spacing, so the hand-over at the end of its flight does not show. */
  .jm-title {
    margin-bottom: 7px;
    font-family: var(--font-display);
    font-size: 16px; /* "From plan to stage" within the map's 150 px (Q200) */
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
  }
  .journey-map:not(.live) .jm-title {
    display: none;
  }
  .journey-map ol {
    display: grid;
    gap: 8px;
  }
  .journey-map ol::before,
  .jm-done {
    top: 22px;
    bottom: 22px;
    left: 14px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .jm-done > span {
    transform: translateY(-100%);
  }
  .journey-map a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
  }
  /* Drawn like the chapter's word (.kicker), which flies in to it. */
  .jm-name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--accent-text);
    font-size: 16px;
    font-weight: 700;
  }
}

/* ---- Device frames, drawn (section 6: no device makers' pictures) -------------------------------------------------------------------------- */
.device {
  margin: 0;
  position: relative;
  background: #0b0c10;
  box-shadow: var(--shadow);
}
.device--tablet {
  width: 100%;
  aspect-ratio: 1180 / 820;
  border-radius: clamp(14px, 2.6vw, 30px);
  padding: clamp(6px, 1.1vw, 13px);
}
.device--upright {
  aspect-ratio: 820 / 1180;
}
/* The phone's corners and edge follow the drawn phone's own width (percentages: across of its width, down of its height), never the screen's,
   so a small phone in the hero does not clip "Setlists" and "Me" (critique C18). */
.device--phone {
  aspect-ratio: 390 / 844;
  /* A phone's thin edge (owner, 2026-11-07: "the bezels are too thick"). The screen's corner is the frame's corner less the edge, so the two curves
     run side by side (a round corner of 7 % of the width; the vertical figure is the same length over the taller side). */
  border-radius: 7% / 3.23%;
  padding: 1.3%;
}
.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(9px, 1.8vw, 20px);
  background: var(--bg-2);
}
.device--phone .device-screen {
  border-radius: 5.85% / 2.67%;
}

/* The app's screens: pictures of the real app (W6, scripts/site/shots.mjs), filling the frame. */
.device-screen picture {
  display: block;
  height: 100%;
}
.device-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---- Try it live --------------------------------------------------------------------------------------------------------------------------- */
.demo {
  padding: 72px 0;
  background: var(--bg-2);
}
.demo-cards {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
@media (min-width: 744px) {
  .demo-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.demo-card {
  display: grid;
  gap: 6px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
/* The setlist's size, not a play button: it opens a chart, not a sound (critique C26). */
.demo-count {
  justify-self: start;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--coral);
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 700;
}
.demo-name {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.demo-note {
  color: var(--text-2);
}
.demo-open {
  margin-top: 8px;
  color: var(--accent-text);
  font-weight: 650;
}
.demo-open::after {
  content: " \2192";
}

/* ---- Features ------------------------------------------------------------------------------------------------------------------------------ */
.features {
  padding: 80px 0;
  background: var(--bg-2);
}
.grid {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 360px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
@media (min-width: 744px) {
  .grid {
    gap: 14px;
  }
}
@media (min-width: 1000px) {
  .features {
    padding: 120px 0;
  }
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  padding: 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
@media (min-width: 744px) {
  .card {
    padding: 22px;
  }
}
.icon {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon .accent {
  stroke: var(--coral);
}
.card h3 {
  margin: 14px 0 4px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.card p {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
}

/* ---- How it works -------------------------------------------------------------------------------------------------------------------------- */
.how {
  padding: 80px 0;
}
.steps {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  gap: 32px;
}
@media (min-width: 744px) {
  .how {
    padding: 120px 0;
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
.step-n {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--coral);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 22px;
}
.steps h3 {
  margin: 16px 0 6px;
  font-size: 21px;
  letter-spacing: -0.015em;
}
.steps p {
  margin: 0;
  color: var(--text-2);
}

/* ---- Why 4& and TonicaSolo: one layout (owner, 2026-11-07) ---------------------------------------------------------------------------------- */
/* Both plain on the page, the logo in a column of the same width, so the two logos and the two texts start on the same lines. The purple corner
   is the beta panel's only (Q194 A, critique C20). */
.why,
.solo {
  padding: 56px 0;
}
.why {
  border-top: 1px solid var(--line);
}
.why-in,
.solo-in {
  display: grid;
  gap: 28px;
  align-items: center;
}
.mark--why {
  --h: 130px;
}
.solo-mark {
  height: 96px;
}
.solo .section-lead {
  margin-bottom: 24px;
}
@media (min-width: 744px) {
  .why,
  .solo {
    padding: 72px 0;
  }
  .why-in,
  .solo-in {
    grid-template-columns: 300px 1fr;
    gap: 64px;
  }
  .mark--why {
    --h: 200px;
  }
  .solo-mark {
    height: 150px;
  }
}

/* ---- Beta access --------------------------------------------------------------------------------------------------------------------------- */
.beta {
  padding: 24px 0 80px;
}
.beta-panel {
  position: relative;
  overflow: hidden;
  padding: 88px 22px 64px;
  border-radius: 32px;
  background: var(--band);
  color: var(--band-text);
  text-align: center;
}
/* The poster's diagonal coral and purple lines, kept in the corner, clear of the words; and its purple corner. */
.beta-panel::before,
.beta-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.beta-panel::before {
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  background:
    linear-gradient(135deg, transparent 0 30%, var(--coral) 30% 33%, transparent 33%),
    linear-gradient(135deg, transparent 0 47%, var(--purple) 47% 50%, transparent 50%);
}
/* Smaller on a phone, clear of the Copy button (critique C16). */
.beta-panel::after {
  right: 0;
  bottom: 0;
  width: 70px;
  height: 70px;
  background: linear-gradient(to top left, var(--purple) 0 50%, transparent 50.5%);
}
/* In dark the page is nearly the panel's colour: the lighter card colour lifts it (critique C17). */
@media (prefers-color-scheme: dark) {
  .beta-panel {
    background: var(--surface);
  }
}
.beta-panel > * {
  position: relative;
}
.beta-panel h2 {
  margin-top: 0;
  color: var(--band-text);
}
.beta-panel .section-lead {
  margin: 0 auto;
  color: var(--band-text-2);
}
/* Good news, not a warning: plain bold coral, no box (critique C17 A). */
.price {
  margin: 24px auto 8px;
  max-width: 40ch;
  color: var(--coral);
  font-weight: 750;
  font-size: 19px;
}
.points--beta {
  max-width: 46ch;
  margin: 20px auto 0;
  text-align: left;
  color: var(--band-text-2);
}
.beta .actions {
  margin-top: 24px;
}
@media (max-width: 479px) {
  .beta .actions .button {
    width: 100%;
    max-width: 320px;
  }
}
.or-write {
  margin: 18px 0 0;
  color: var(--band-text-2);
  font-size: 16px;
}
.copy {
  min-height: 44px;
  margin-left: 6px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgb(244 238 221 / 0.12);
  color: var(--band-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.copy.done {
  color: var(--coral);
}
@media (min-width: 744px) {
  .beta {
    padding-bottom: 120px;
  }
  .beta-panel {
    padding: 88px 64px 72px;
  }
  .beta-panel::after {
    width: 110px;
    height: 110px;
  }
}

/* ---- Questions ----------------------------------------------------------------------------------------------------------------------------- */
.faq {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.faq h2 {
  margin-bottom: 28px;
}
details {
  border-bottom: 1px solid var(--line);
}
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--text-2), var(--text-2)) center / 16px 2px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) center / 2px 16px no-repeat;
}
details[open] summary::after {
  transform: rotate(45deg);
}
details p {
  margin: 0 0 22px;
  max-width: 62ch;
  color: var(--text-2);
}
/* The + turns and the answer settles in softly (critique C24); with "reduce motion" both are still. Only position and transparency move. */
@media (prefers-reduced-motion: no-preference) {
  summary::after {
    transition: transform 0.25s var(--ease-out);
  }
  details[open] p {
    animation: settle 0.3s var(--ease-out) both;
  }
}
.ideas {
  margin-top: 48px;
  padding: 24px;
  border-radius: 20px;
  background: var(--bg-2);
}
.ideas p {
  margin: 0 0 6px;
  color: var(--text-2);
}

/* ---- Footer -------------------------------------------------------------------------------------------------------------------------------- */
.footer {
  padding: 48px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.footer-in {
  display: grid;
  gap: 28px;
}
.wordmark--hq {
  height: 26px;
}
.footer-brand p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 15px;
}
.footer-links {
  display: flex;
  gap: 48px;
}
.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a,
.footer-links span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
}
.copyright {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
}
@media (min-width: 744px) {
  .footer-in {
    grid-template-columns: 1fr auto;
  }
}

/* ---- The small pages: legal, contact, not found ---------------------------------------------------------------------------------------------- */
.page {
  padding: 56px 0 88px;
}
.page h1 {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.page-lead {
  margin: 0 0 28px;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-2);
}
.contact-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 744px) {
  .page {
    padding: 96px 0 128px;
  }
  .contact-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.contact-cards h2,
.page .ideas h2 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.contact-cards p {
  margin: 0 0 6px;
  color: var(--text-2);
}
.contact-address {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
}
.page .ideas {
  margin-top: 32px;
}
/* The not-found page: centred, so it does not look off to one side on a wide screen (critique C23). */
.page--center {
  text-align: center;
}
.page--center .page-lead {
  margin-inline: auto;
}

/* ---- The legal pages (their Markdown, Q135 A): long text, easy to read ------------------------------------------------------------------------- */
.legal h1 {
  margin-bottom: 24px;
}
.legal h2 {
  margin: 40px 0 10px;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.legal h3 {
  margin: 28px 0 8px;
  font-size: 19px;
}
.legal p,
.legal li {
  max-width: 68ch;
  color: var(--text-2);
}
.legal p {
  margin: 0 0 14px;
}
.legal ul,
.legal ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal li {
  margin-bottom: 6px;
}
.legal strong {
  color: var(--text);
}

/* A legal page's line that is only a link (the guest notice's address): a full-size target, since it is not inside a sentence (TAP-1) */

.legal p > a:only-child {
  display: inline-block;
  padding-block: 11px;
}
/* A link inside a sentence, in a paragraph or a list (the guest notice's support@): its tap area grows to 44 px without moving the lines (TAP-1,
   critique C23 and its second look). */
.legal p > a:not(:only-child),
.legal li > a {
  padding-block: 11px;
}