/* KeepSay's public site, in the app's own Bloom.

   The page is a mind map you walk. Its parts are the app's parts, drawn in
   CSS: the lilac page under slow drifting light, white cards on one soft
   violet shadow, the accent for everything that acts, the map's grammar
   (an accent root box, white branch boxes ringed in the branch's colour,
   leaves riding their curves, numbered fold rings), Plum, and one night
   block. Colours are the app's palette (app/lib/theme/keepsay_theme.dart and
   accents.dart); the map's rules are app/lib/notes/mind_map_view.dart. */

/* The app's own faces (P1-LOOK-1, P1-LOOK-5): Nunito for the words, Fredoka
   for headings and figures, and JetBrains Mono for times (SIL Open Font
   Licence, fonts/OFL-*.txt), served from this site: a page about what
   leaves your device sends nothing to a font service. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 100 600;
  font-display: swap;
  src: url("/fonts/nunito-600.woff2") format("woff2");
}

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

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

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fredoka-600.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}

:root {
  --bg: #F5F2FF;
  --bg-deep: #ECE6FF;
  --card: #FFFFFF;
  --ink: #1D1640;
  --soft: #5E5680;
  --line: #ECE8FA;
  --thread: #DAD2F7;

  /* The accent: grape unless the visitor picks another (see [data-accent]). */
  --a: #6445E0;
  --a-hi: #8C72FF;
  --a-lo: #4E31C8;
  --a-tint: #ECE7FF;
  --a-soft: #E4DDFF;
  --a-light: #B9A8FF;
  --a-glow: #7B61FF;
  --a-n: #A897FF;
  --orb-a: #AE99FF;
  --orb-b: #7C5DF2;
  --orb-la: #F1EDFF;
  --orb-lb: #CBBEFF;
  --on-a-soft: #E4DDFF;

  --teal: #0A7670;
  --teal-tint: #E0F1EF;
  --coral: #C4472F;
  --coral-tint: #FBE8E3;
  --amber: #8F5B06;
  --amber-tint: #F7EEDD;

  --night-hi: #4B3AA8;
  --night: #14112A;
  --night-card: #211C3F;
  --night-ink: #F1EEFF;
  --night-soft: #BDB6E0;
  --teal-n: #4FD1C5;
  --coral-n: #FF9A82;
  --amber-n: #F0B64A;

  --shadow: 0 10px 28px rgba(68, 44, 160, 0.08);
  --lift: 0 18px 40px rgba(68, 44, 160, 0.14);
  --glow: 0 18px 40px color-mix(in srgb, var(--a) 32%, transparent);
  --spring: cubic-bezier(0.3, 1.5, 0.5, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut: clamp(16px, 4vw, 40px);
  --h2: clamp(38px, 4.9vw, 68px);
}

/* The six colours the app offers (app/lib/theme/accents.dart). */
[data-accent="ocean"] {
  --bg: #F2F6FE; --bg-deep: #E3EDFC; --thread: #CFDDF5;
  --a: #1F6FD1; --a-hi: #4C93F0; --a-lo: #16509E; --a-tint: #E3EEFC; --a-soft: #D7E7FB;
  --a-light: #9CC3F5; --a-glow: #4C93F0; --a-n: #8DBDF7; --orb-a: #8DBDF7; --orb-b: #3D82E0;
  --orb-la: #EEF5FE; --orb-lb: #B7D4F8; --on-a-soft: #FFFFFF;
}
[data-accent="rose"] {
  --bg: #FDF3F7; --bg-deep: #FAE3EC; --thread: #F0D2DE;
  --a: #C2417A; --a-hi: #E0679B; --a-lo: #962B5B; --a-tint: #FBE6EF; --a-soft: #F8DCE8;
  --a-light: #EFA5C4; --a-glow: #E0679B; --a-n: #F2A3C4; --orb-a: #F2A3C4; --orb-b: #D2528A;
  --orb-la: #FDF0F5; --orb-lb: #F3C0D5; --on-a-soft: #FFFFFF;
}
[data-accent="ember"] {
  --bg: #FEF5EF; --bg-deep: #FBE7DA; --thread: #F2D8C6;
  --a: #B94E17; --a-hi: #E27639; --a-lo: #8A360C; --a-tint: #FBE9DE; --a-soft: #F9DFCF;
  --a-light: #F4B38C; --a-glow: #E27639; --a-n: #F7B78F; --orb-a: #F7B78F; --orb-b: #D2622A;
  --orb-la: #FEF3EC; --orb-lb: #F7CDB2; --on-a-soft: #FFFFFF;
}
[data-accent="forest"] {
  --bg: #F2F8F4; --bg-deep: #E1F0E6; --thread: #CFE3D6;
  --a: #2F7D4F; --a-hi: #4FA673; --a-lo: #1F5A37; --a-tint: #E1F1E7; --a-soft: #D5EBDD;
  --a-light: #9DD1B1; --a-glow: #4FA673; --a-n: #95CFAC; --orb-a: #95CFAC; --orb-b: #3B8F5E;
  --orb-la: #EFF8F2; --orb-lb: #BCE0CA; --on-a-soft: #FFFFFF;
}
[data-accent="midnight"] {
  --bg: #F3F2FA; --bg-deep: #E6E5F4; --thread: #D6D4EA;
  --a: #34306B; --a-hi: #5A55A6; --a-lo: #1F1C47; --a-tint: #E6E5F4; --a-soft: #DAD8EE;
  --a-light: #A9A5D8; --a-glow: #5A55A6; --a-n: #A9A5E0; --orb-a: #A9A5E0; --orb-b: #4A4597;
  --orb-la: #F0EFFA; --orb-lb: #C9C6EA; --on-a-soft: #FFFFFF;
}

/* ── the page ───────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-color: var(--a-light) transparent;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 600 17px/1.55 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.6s var(--out);
}

/* Headings and figures in Fredoka, at its one weight, as the app sets them
   (DESIGN.md, Typography). */
h1,
h2,
h3,
.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
}

::selection {
  background: var(--a-soft);
  color: var(--ink);
}

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

a {
  color: var(--a);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--a) 60%, transparent);
  outline-offset: 3px;
}

/* On the accent block and in the night block the accent ring would all but
   vanish, so there it is white. */
.root :focus-visible,
.night :focus-visible {
  outline-color: #FFFFFF;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--out);
}

.skip:focus {
  top: 16px;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* The light that drifts behind every page of the app: grape and tide. */
.light {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.light i {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  will-change: transform;
}

.light i:nth-child(1) {
  top: -40vmax;
  right: -30vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--a-glow) 24%, transparent), transparent);
  animation: drift-a 34s ease-in-out infinite alternate;
}

.light i:nth-child(2) {
  bottom: -46vmax;
  left: -36vmax;
  background: radial-gradient(closest-side, rgba(79, 209, 197, 0.15), transparent);
  animation: drift-b 42s ease-in-out infinite alternate;
}

.light i:nth-child(3) {
  top: 34vh;
  left: 38vw;
  width: 52vmax;
  height: 52vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--a-hi) 11%, transparent), transparent);
  animation: drift-c 50s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate(-12vmax, 10vmax) scale(1.1); } }
@keyframes drift-b { to { transform: translate(14vmax, -8vmax) scale(1.08); } }
@keyframes drift-c { to { transform: translate(-18vmax, 6vmax) scale(0.9); } }

/* ── the splash, as the app plays it (app/lib/widgets/splash.dart) ─────
   A voice talks and gathers to a point; the point flashes and two rings
   leave it; the mark pops out with a little wave hello; "keepsay" rises a
   letter at a time, then its line, then the promise. On the website it
   plays quicker than in the app, 1.2 s, then it lifts away for 0.3 s, so a
   first visit waits no more than a breath. A tap, a key or a scroll skips
   it. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--a-hi) 0%, var(--a) 48%, var(--a-lo) 100%);
  animation: sp-out 0.3s cubic-bezier(0.6, 0, 0.4, 1) 1.2s forwards;
  cursor: pointer;
}

html.splashing,
html.splashing body {
  overflow: hidden;
}

html.splashing .splash {
  display: block;
}

.splash.leaving {
  animation: sp-out 0.28s ease forwards;
}

@keyframes sp-out {
  to { opacity: 0; scale: 1.08; }
}

.sp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: sp-drift 6s ease-in-out infinite alternate;
}

.sp-teal {
  left: -90px;
  top: 120px;
  width: 280px;
  height: 280px;
  background: rgba(79, 209, 197, 0.28);
}

.sp-coral {
  right: -90px;
  bottom: 120px;
  width: 260px;
  height: 260px;
  background: rgba(255, 154, 130, 0.2);
  animation-duration: 7s;
}

@keyframes sp-drift {
  to { translate: 40px -30px; }
}

.sp-stage {
  position: absolute;
  left: 50%;
  top: 44.3%;
  width: 0;
  height: 0;
}

.sp-voice {
  position: absolute;
  left: -112.5px;
  top: -35px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 225px;
  height: 70px;
}

.sp-voice b {
  flex: none;
  width: 5px;
  height: var(--h);
  border-radius: 4px;
  background: #FFFFFF;
  animation: sp-bar 0.56s calc(var(--i) * 10ms) both;
}

@keyframes sp-bar {
  0% { scale: 1 0.25; animation-timing-function: ease-in-out; }
  30% { scale: 1 1; animation-timing-function: ease-in-out; }
  60% { scale: 1 0.25; }
  67.86% { scale: 1 0.25; translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
  100% { scale: 1 0.025; translate: calc((10 - var(--i)) * 11px) 0; opacity: 0; }
}

.sp-dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0;
  animation: sp-dot 0.3s ease 0.38s both;
}

@keyframes sp-dot {
  0% { opacity: 0; scale: 0.4; }
  40% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 6; }
}

.sp-ring {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0;
  animation: sp-ring 0.75s ease-out 0.45s both;
}

.sp-ring2 {
  animation-delay: 0.58s;
}

@keyframes sp-ring {
  from { width: 75px; height: 75px; margin: -37.5px; opacity: 1; }
  to { width: 345px; height: 345px; margin: -172.5px; opacity: 0; }
}

.sp-pop {
  position: absolute;
  left: -66px;
  top: -66px;
  width: 132px;
  height: 132px;
  animation: sp-pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) 0.45s both;
}

@keyframes sp-pop {
  from { opacity: 0; scale: 0.2; rotate: -20deg; }
  to { opacity: 1; scale: 1; rotate: 0deg; }
}

.sp-hello {
  animation: sp-hello 0.5s linear 0.85s both;
}

@keyframes sp-hello {
  0% { rotate: 0deg; animation-timing-function: ease-in-out; }
  25% { rotate: -9deg; animation-timing-function: ease-in-out; }
  55% { rotate: 7deg; animation-timing-function: ease-in-out; }
  80% { rotate: -3deg; animation-timing-function: ease-in-out; }
  100% { rotate: 0deg; }
}

.sp-mark {
  display: block;
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 16px 30px rgba(20, 10, 80, 0.3));
}

.sp-word,
.sp-tag,
.sp-promise {
  position: absolute;
  left: 24px;
  right: 24px;
  margin: 0;
  text-align: center;
}

.sp-word {
  top: calc(44.3% + 90px);
  color: #FFFFFF;
  font-family: var(--display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

.sp-word span {
  display: inline-block;
  animation: sp-rise 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) calc(0.55s + var(--i) * 25ms) both;
}

.sp-tag {
  top: calc(44.3% + 152px);
  color: var(--a-soft);
  font-size: 17px;
  font-weight: 500;
  animation: sp-rise 0.4s ease 0.75s both;
}

.sp-promise {
  bottom: calc(44px + env(safe-area-inset-bottom));
  color: var(--a-soft);
  font-size: 13.5px;
  font-weight: 500;
  animation: sp-rise 0.4s ease 0.85s both;
}

@keyframes sp-rise {
  from { opacity: 0; translate: 0 22px; }
}

/* ── the floating pill bar ──────────────────────────────────────────── */

.bar {
  position: fixed;
  z-index: 50;
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(68, 44, 160, 0.12);
  transform: translateX(-50%);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0;
  text-decoration: none;
}

.lockup .mark {
  width: 30px;
  height: 30px;
}

.tabs {
  display: flex;
  gap: 2px;
  margin: 0 8px 0 14px;
}

.tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--soft);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.25s var(--out), color 0.25s var(--out);
}

.tabs a .ic {
  display: none;
  width: 22px;
  height: 22px;
}

.tabs a:hover {
  background: var(--a-tint);
  color: var(--ink);
}

.tabs a[aria-current="location"] {
  background: var(--a);
  color: #FFFFFF;
}

/* ── pills, the app's buttons ───────────────────────────────────────── */

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 18px;
  font: 800 17px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.09s var(--out), box-shadow 0.09s var(--out), background-color 0.3s var(--out);
}

/* Pressed, a raised button goes down onto its edge (the app's Raise). */
.pill:active {
  transform: translateY(4px);
}

.pill .ic {
  width: 20px;
  height: 20px;
}

.pill.small {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.pill.white {
  background: #FFFFFF;
  color: var(--a-lo);
  border: 2px solid #E1DAFB;
  box-shadow: 0 4px 0 #E1DAFB;
}

.pill.white:active {
  box-shadow: 0 0 0 #E1DAFB;
}

.pill.glass {
  background: rgba(255, 255, 255, 0.17);
  color: #FFFFFF;
}

.pill.glass:hover {
  background: rgba(255, 255, 255, 0.26);
}

.pill.accent {
  background: var(--a);
  color: #FFFFFF;
  box-shadow: 0 5px 0 var(--a-lo);
}

.pill.accent:active {
  box-shadow: 0 1px 0 var(--a-lo);
}

.pill.soft {
  background: var(--bg);
  color: var(--ink);
}

.pill.soft .ic {
  color: var(--a);
}

.pill.static {
  cursor: default;
}

.pill.static:active,
.pill.glass:active,
.pill.soft:active {
  transform: none;
}

/* A fact dressed as a fact, not as a button: nothing to press yet. */
.pill.label {
  height: 48px;
  padding: 0 20px 0 16px;
  background: var(--a-tint);
  color: var(--a);
  font-size: 15px;
  cursor: default;
}

.pill.label:active {
  transform: none;
}

/* ── the mark and the orb ───────────────────────────────────────────── */

.mark .eyes rect {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: blink 5s infinite;
}

.mark.accent .eyes {
  fill: #FFFFFF;
}

.mark.white .eyes {
  fill: var(--a);
}

@keyframes blink {
  0%, 93% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
  100% { transform: scaleY(1); }
}

/* The companion: Plum's own picture, drawn by tool/icons/icons_test.dart
   from the app's companion (P1-LOOK-5), in the mood its class names.
   Decoration with a job: the words beside it carry the meaning. */
.orb {
  --s: 44px;
  flex: none;
  display: block;
  width: var(--s);
  height: var(--s);
  object-fit: contain;
  animation: breathe 6s ease-in-out infinite;
}

.orb.happy { animation: hop 2.4s ease-in-out infinite; }
.orb.sleep { animation: breathe 9s ease-in-out infinite; }

.orb.sm { --s: 36px; }
.orb.md { --s: 64px; }
.orb.xl { --s: 120px; }

@keyframes breathe { 50% { transform: scale(1.035); } }

@keyframes hop {
  0%, 55%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(calc(var(--s) * -0.09)) scale(1.03); }
}

/* ── the map's grammar, shared by every map on the page ─────────────── */

.map {
  position: relative;
  --mode: right;
}

.wires {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.w {
  fill: none;
  stroke: var(--a);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--out) var(--d, 0ms), opacity 0.3s var(--out), stroke-width 0.3s var(--out);
}

.w.leafw { stroke-width: 1.8; }
.w.stem { stroke: var(--thread); stroke-width: 2.6; }
.night .w.stem { stroke: rgba(255, 255, 255, 0.3); }
.w.c-teal { stroke: var(--teal); }
.w.c-coral { stroke: var(--coral); }
.w.c-amber { stroke: var(--amber); }

.js .map:not(.drawn) .w {
  stroke-dashoffset: 1;
}

.map.focusing .w { opacity: 0.25; }
.map.focusing .w.on { opacity: 1; }

.branch {
  --col: var(--a);
  position: relative;
  display: flex;
  align-items: center;
}

.branch[data-c="teal"] { --col: var(--teal); }
.branch[data-c="coral"] { --col: var(--coral); }
.branch[data-c="amber"] { --col: var(--amber); }

.node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border: 2px solid var(--col);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.node .ic {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--col);
}

a.node:hover {
  box-shadow: var(--lift);
}

.ring {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 0 0 10px;
  padding: 0;
  border: 2px solid var(--col);
  border-radius: 50%;
  background: var(--col);
  color: #FFFFFF;
  font: 700 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s var(--out), color 0.2s var(--out), scale 0.25s var(--spring);
}

.ring::before {
  content: "";
  display: none;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ring::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}

.ring[aria-expanded="true"] {
  background: var(--card);
  color: var(--col);
}

.ring[aria-expanded="true"] span { display: none; }
.ring[aria-expanded="true"]::before { display: block; }
.ring:hover { scale: 1.12; }
.ring:active { scale: 0.92; }

.leaves {
  display: grid;
  gap: 12px;
  margin: 0 0 0 34px;
  padding: 0;
  list-style: none;
}

.leaves[hidden] { display: none; }

.leaf {
  position: relative;
  z-index: 1;
  padding: 0 2px 6px;
  font-size: 15px;
  line-height: 1.35;
  text-wrap: balance;
}

.map-root {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 18px;
  background: var(--a);
  box-shadow: var(--glow);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.map-root .ic {
  width: 24px;
  height: 24px;
}

/* The bloom: a branch grows out of its parent along its line, then its
   leaves along theirs. A clip, not a move, so every box stays where the
   lines were measured to. */
.map .node,
.map .ring,
.map .leaf {
  clip-path: inset(-64px -64px -64px -64px);
  transition:
    opacity 0.5s var(--out),
    clip-path 0.9s var(--out),
    background-color 0.2s var(--out),
    color 0.2s var(--out),
    box-shadow 0.3s var(--out),
    scale 0.25s var(--spring);
}

.js .map:not(.drawn) .node,
.js .map:not(.drawn) .ring,
.js .map:not(.drawn) .leaf {
  opacity: 0;
  clip-path: inset(-64px 100% -64px -64px);
}

.map.blooming .node {
  transition-delay: calc(var(--i, 0) * 90ms + 300ms);
}

/* The fold ring waits for its box, and the leaves for their ring. */
.map.blooming .ring {
  transition-delay: calc(var(--i, 0) * 90ms + 860ms);
}

.map.blooming .leaf {
  transition-delay: calc(var(--i, 0) * 90ms + 1000ms);
}

.leaves.sprout .leaf {
  animation: sprout 0.8s var(--out) both;
}

.leaves.sprout .leaf:nth-child(2) {
  animation-delay: 70ms;
}

@keyframes sprout {
  from {
    opacity: 0;
    clip-path: inset(-64px 100% -64px -64px);
  }
}

/* ── the root: what KeepSay is ──────────────────────────────────────── */

.hero {
  padding: 104px 0 36px;
}

.hero-grid {
  --mode: right;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  column-gap: clamp(48px, 5vw, 72px);
  align-items: center;
  min-height: min(calc(100svh - 140px), 760px);
}

.root {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 36px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--a-hi) 0%, color-mix(in srgb, var(--a-hi) 0%, transparent) 62%),
    var(--a);
  box-shadow:
    0 44px 90px -30px color-mix(in srgb, var(--a) 70%, transparent),
    0 18px 40px color-mix(in srgb, var(--a) 26%, transparent);
  color: #FFFFFF;
}

.root-mark {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 14px rgba(20, 10, 80, 0.22));
}

.root h1 {
  margin: 26px 0 18px;
  font-size: clamp(50px, 5.6vw, 80px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.root .kept {
  color: var(--orb-lb);
}

.root .lead {
  max-width: 30em;
  margin: 0 0 28px;
  color: var(--on-a-soft);
  font-size: 19px;
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fine {
  margin: 18px 0 0;
  color: var(--on-a-soft);
  font-size: 14.5px;
}

.branches {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The hero's map is the spectacle: drawn at reading size, not as a key. */
.hero .branch {
  min-height: 64px;
}

.hero .node {
  gap: 13px;
  padding: 15px 22px 15px 17px;
  border-radius: 18px;
  font-size: 19px;
}

.hero .node .ic {
  width: 27px;
  height: 27px;
}

.hero .ring {
  width: 27px;
  height: 27px;
  margin-left: 12px;
  font-size: 12px;
}

.hero .leaves {
  gap: 14px;
  margin-left: 38px;
}

.hero .leaf {
  font-size: 16px;
}

/* The secondary pill on the accent block: a darker glass, so white text on
   it clears 4.5:1 in every accent. */
.root .pill.glass {
  background: rgba(20, 10, 60, 0.2);
}

.root .pill.glass:hover {
  background: rgba(20, 10, 60, 0.28);
}

/* ── a branch of the page ───────────────────────────────────────────── */

main {
  position: relative;
}

.trunk {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.trunk path {
  fill: none;
  stroke-linecap: round;
}

.trunk .base {
  stroke: var(--thread);
  stroke-width: 2;
}

.trunk .walked {
  stroke: var(--a);
  stroke-width: 2.6;
  stroke-dasharray: 1;
}

.sec {
  --col: var(--a);
  position: relative;
  padding: clamp(72px, 9vw, 124px) 0;
}

.sec[data-c="teal"] { --col: var(--teal); }
.sec[data-c="coral"] { --col: var(--coral); }
.sec[data-c="amber"] { --col: var(--amber); }

.sec-head {
  position: relative;
  margin: 0 0 20px;
}

.sec h2 {
  max-width: 16ch;
  margin: 0;
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.knot {
  display: none;
  position: absolute;
  z-index: 2;
  left: 16px;
  top: calc(var(--h2) * 0.52 - 12px);
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--col);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color 0.4s var(--out), scale 0.5s var(--spring), box-shadow 0.4s var(--out);
}

.sec.here .knot {
  background: var(--col);
  scale: 1.12;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--col) 16%, transparent);
}

.sec-lead {
  max-width: 40em;
  margin: 0 0 44px;
  color: var(--soft);
  font-size: clamp(18px, 1.5vw, 20.5px);
  line-height: 1.55;
}

.stage {
  position: relative;
  border-radius: 34px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 40px);
}

.stage-note {
  margin: 18px 0 0;
  color: var(--soft);
  font-size: 14.5px;
}

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}

/* ── why KeepSay exists: its maker's letter ─────────────────────────── */

.letter {
  max-width: 38em;
}

.letter p {
  margin: 0 0 22px;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.62;
}

.letter .opening {
  margin-bottom: 26px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Read as you reach it: each paragraph inks in as it comes into view, from
   two-thirds ink, never fainter than 4.9:1 on any accent's page: a paragraph
   not yet reached is still read with ease (WCAG AA asks 4.5:1; from 30 % ink
   it began at 1.9:1). */
@supports (animation-timeline: view()) {
  .letter p {
    animation: ink linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }
}

@keyframes ink {
  from { color: color-mix(in srgb, var(--ink) 65%, transparent); }
  to { color: var(--ink); }
}

/* The rules, as leaves: each on its own coloured line, the map's cycle. */
.promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 56px;
  max-width: 1000px;
  margin: 34px 0 52px;
  padding: 0;
  list-style: none;
}

.promises li {
  --col: var(--a);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  background: linear-gradient(var(--col), var(--col)) left bottom / 100% 2px no-repeat;
}

.promises li:nth-child(4n + 2) { --col: var(--teal); }
.promises li:nth-child(4n + 3) { --col: var(--coral); }
.promises li:nth-child(4n + 4) { --col: var(--amber); }

.knotlet {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2.5px solid var(--col);
  border-radius: 50%;
}

.promises p {
  margin: 0;
  color: var(--soft);
  font-size: 16.5px;
  line-height: 1.5;
}

.promises b {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.coda {
  margin-top: 8px;
}

.signed {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  color: var(--soft);
  font-size: 16px;
  font-weight: 500;
}

.signed .mark {
  width: 34px;
  height: 34px;
}

/* Beside the letter, the moments it names as a map that stays in view:
   faded while they are lost, lit as each is read, and kept once the letter
   says what KeepSay does about them. */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.story-map {
  position: sticky;
  top: 112px;
  padding: 26px 24px 22px;
  border-radius: 34px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.moments {
  --mode: tree;
}

.moments .map-root {
  gap: 10px;
  padding: 10px 18px 10px 10px;
  font-size: 17px;
}

.moments .map-root .orb {
  --s: 30px;
}

.moments .kept-label,
.moments.kept .lost-label {
  display: none;
}

.moments.kept .kept-label {
  display: inline;
}

.moments .side {
  display: grid;
  gap: 12px;
  margin: 18px 0 0 48px;
}

.moments .branch {
  flex-wrap: wrap;
  opacity: 0.4;
  filter: saturate(0.25);
  transition: opacity 0.6s var(--out), filter 0.6s var(--out);
}

.moments .branch.lit {
  opacity: 1;
  filter: none;
}

.moments .node {
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  white-space: normal;
}

.moments .leaves {
  flex-basis: 100%;
  margin: 8px 0 2px 38px;
}

.moments .leaf {
  padding-bottom: 2px;
  color: var(--soft);
  font-size: 14px;
}

.moments .w {
  opacity: 0.3;
}

.moments .w.on,
.moments .w.stem {
  opacity: 1;
}

.moments:not(.kept) .w.leafw {
  opacity: 0;
}

.story-map .moments:not(.kept) .leaf {
  opacity: 0;
  clip-path: inset(-64px 100% -64px -64px);
}

.story-map .moments.kept .leaf {
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* ── the band: behind the curtain, and the list to join ─────────────── */

.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

/* The workshop: a light stage where the band waits under a cloth sheet.
   The sheet (site.js, WebGL) hangs from a grape rod; you can grab it and it
   stretches, folds and springs back, and it never tears. Soft shapes drift
   and two cogs turn; the companion watches from the rod in a hard hat.
   Without WebGL, or asking for stillness, the sheet hangs flat. */
.workshop {
  /* Where the rod hangs, as a share of the stage's height. site.js reads it
     so the cloth hangs from the same place. */
  --sheet-top: 0.15;
  position: relative;
  min-height: clamp(420px, 40vw, 520px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background:
    radial-gradient(55% 50% at 50% 42%, #FFFFFF 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  box-shadow: var(--shadow);
}

/* The band, waiting under the sheet: seen only when the sheet is pulled. */
.behind {
  position: absolute;
  z-index: 1;
  left: 14%;
  right: 14%;
  top: 22%;
  bottom: 24%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
}

.behind .band-art {
  width: min(78%, 300px);
}

.behind .band-button {
  fill: var(--a-hi);
  animation: glow 2.4s ease-in-out infinite;
}

@keyframes glow {
  50% { fill: #FFFFFF; }
}

.behind p {
  margin: 0;
  color: var(--soft);
  font-size: 13.5px;
  font-weight: 500;
}

/* Soft shapes in the app's colours, drifting as if in water. */
.blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  box-shadow: inset -8px -10px 18px rgba(20, 10, 60, 0.14), inset 8px 8px 16px rgba(255, 255, 255, 0.55);
  animation: float 14s ease-in-out infinite alternate;
}

.b1 {
  left: -4%;
  top: 14%;
  width: 92px;
  height: 92px;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, var(--a-light) 42%, var(--a) 100%);
}

.b2 {
  right: 3%;
  top: 46%;
  width: 70px;
  height: 118px;
  border-radius: 60px;
  background: radial-gradient(circle at 34% 26%, #FFFFFF 0%, #8EE0D6 40%, var(--teal) 100%);
  rotate: -24deg;
  animation-duration: 17s;
  animation-delay: -4s;
}

.b3 {
  left: 6%;
  bottom: -5%;
  width: 124px;
  height: 84px;
  border-radius: 58% 42% 55% 45% / 60% 50% 50% 40%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FFB8A6 40%, var(--coral) 100%);
  animation-duration: 19s;
  animation-delay: -8s;
}

.b4 {
  right: 16%;
  bottom: -4%;
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F7CF7A 44%, #C98A1E 100%);
  animation-duration: 12s;
  animation-delay: -2s;
}

.b5 {
  right: -3%;
  top: -3%;
  width: 104px;
  height: 64px;
  border-radius: 50px;
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, var(--a-soft) 42%, var(--a-light) 100%);
  rotate: 18deg;
  animation-duration: 21s;
  animation-delay: -11s;
}

@keyframes float {
  0% { translate: 0 0; }
  50% { translate: 10px -14px; }
  100% { translate: -8px 8px; }
}

.gear {
  position: absolute;
  z-index: 5;
  fill: var(--a-soft);
  filter: drop-shadow(0 6px 10px rgba(68, 44, 160, 0.18));
  pointer-events: none;
}

.gear.g1 {
  left: 3%;
  bottom: 4%;
  width: 74px;
  animation: turn 14s linear infinite;
}

.gear.g2 {
  left: calc(3% + 58px);
  bottom: calc(4% + 50px);
  width: 44px;
  fill: var(--a-light);
  animation: turn 10s linear infinite reverse;
}

@keyframes turn {
  to { rotate: 360deg; }
}

.rod {
  position: absolute;
  z-index: 4;
  left: 8%;
  right: 8%;
  top: calc(var(--sheet-top) * 100% - 8px);
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--a-hi), var(--a-lo));
  box-shadow: 0 8px 16px rgba(20, 10, 60, 0.22);
}

.rod::before,
.rod::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--a-hi), var(--a-lo));
}

.rod::before { left: -8px; }
.rod::after { right: -8px; }

.sheet-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.workshop.grabbing .sheet-canvas {
  cursor: grabbing;
}

/* The flat sheet: what shows without WebGL or motion, and what a screen
   reader reads either way. */
.sheet-flat {
  position: absolute;
  z-index: 3;
  left: 12%;
  right: 12%;
  top: calc(var(--sheet-top) * 100%);
  height: 60%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  border-radius: 0 0 16px 16px;
  background:
    repeating-linear-gradient(-45deg, #F0B64A 0 14px, #1D1640 14px 28px) left bottom / 100% 22px no-repeat,
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  box-shadow: 0 18px 34px rgba(68, 44, 160, 0.16);
  text-align: center;
}

.sheet-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.sheet-line {
  max-width: 26em;
  margin: 0 0 14px;
  color: var(--soft);
  font-size: 15.5px;
}

.workshop.cloth-on .sheet-canvas {
  display: block;
}

.workshop.cloth-on .sheet-flat {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The foreman: the companion in a hard hat, on the rod. */
.foreman {
  position: absolute;
  z-index: 6;
  right: 13%;
  top: calc(var(--sheet-top) * 100% - 66px);
  width: 62px;
  height: 62px;
  pointer-events: none;
}

.foreman .orb {
  --s: 62px;
}

.foreman .hat {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -17px;
  width: 58px;
  translate: -50% 0;
  rotate: -9deg;
  filter: drop-shadow(0 3px 4px rgba(20, 10, 60, 0.2));
}

.workshop.grabbing .foreman {
  animation: hop 0.9s ease-in-out infinite;
}

.workshop-hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 16px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  color: var(--a);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  translate: -50% 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--out);
}

.workshop.cloth-on .workshop-hint {
  opacity: 1;
}

.workshop.touched .workshop-hint {
  opacity: 0;
}

/* The list: a white card, the app's inputs, the accent for what acts. */
.interest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 34px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.interest h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.form-lead {
  margin: 0 0 20px;
  color: var(--soft);
  font-size: 15.5px;
}

.field-label,
.uses legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.uses legend span {
  margin-left: 6px;
  color: var(--soft);
  font-weight: 500;
}

.interest input[type="email"] {
  width: 100%;
  height: 56px;
  margin: 0 0 18px;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink);
  font: 500 16.5px/1 var(--sans);
  transition: box-shadow 0.2s var(--out), background-color 0.2s var(--out);
}

.interest input[type="email"]::placeholder {
  color: #817AA3;
}

/* The ring is a shadow; the transparent outline is what a forced-colours
   screen, which drops shadows, draws instead. */
.interest input[type="email"]:focus {
  outline: 2px solid transparent;
  background: var(--card);
  box-shadow: 0 0 0 2.5px var(--a), 0 0 0 7px color-mix(in srgb, var(--a) 16%, transparent);
}

.interest input[aria-invalid="true"] {
  box-shadow: 0 0 0 2.5px var(--coral);
}

.uses {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chipbox {
  position: relative;
  cursor: pointer;
}

.chipbox input,
.consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chipbox span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  transition: background-color 0.2s var(--out), color 0.2s var(--out);
}

.chipbox .tick {
  display: none;
  width: 16px;
  height: 16px;
}

.chipbox .tick path[opacity] {
  display: none;
}

.chipbox input:checked + span {
  background: var(--a);
  color: #FFFFFF;
}

.chipbox input:checked + span .tick {
  display: block;
}

.chipbox input:focus-visible + span,
.consent input:focus-visible + .box {
  outline: 3px solid color-mix(in srgb, var(--a) 60%, transparent);
  outline-offset: 2px;
}

.consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 4px 0 18px;
  color: var(--soft);
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}

.consent .box {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--thread);
  color: #FFFFFF;
  transition: background-color 0.2s var(--out), box-shadow 0.2s var(--out);
}

.consent .box .ic {
  width: 16px;
  height: 16px;
  opacity: 0;
}

.consent .box .ic path[opacity] {
  display: none;
}

.consent input:checked + .box {
  background: var(--a);
  box-shadow: none;
}

.consent input:checked + .box .ic {
  opacity: 1;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.submit {
  width: 100%;
}

.submit:disabled {
  opacity: 0.55;
  cursor: default;
}

.interest.busy .submit {
  opacity: 0.8;
  cursor: progress;
}

.form-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: var(--soft);
  font-size: 14.5px;
}

.form-status.error {
  color: var(--coral);
  font-weight: 500;
}

.thanks {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 0;
  text-align: center;
}

.thanks[hidden] {
  display: none;
}

.thanks .orb {
  margin-bottom: 12px;
}

.thanks-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.thanks-line {
  margin: 0;
  color: var(--soft);
}

.close-cta {
  margin-top: 26px;
}

/* ── record: the band's button, rehearsed ───────────────────────────── */

.rehearse {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.rehearse .stage-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.rh-pad {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.band-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FFFFFF 52%, var(--bg-deep) 100%);
  box-shadow:
    0 0 0 14px var(--bg),
    0 0 0 15px var(--line),
    0 30px 56px rgba(68, 44, 160, 0.2),
    inset 0 -8px 18px rgba(68, 44, 160, 0.07);
  color: var(--a);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: scale 0.18s var(--spring), box-shadow 0.4s var(--out);
}

.band-btn .tap {
  width: 64px;
  height: 64px;
}

.band-btn.press {
  scale: 0.93;
}

.band-btn .pulse i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--a);
  border-radius: 50%;
  opacity: 0;
}

[data-mode="rec"] .band-btn .pulse i {
  animation: listen 1.8s var(--out) infinite;
}

[data-mode="rec"] .band-btn .pulse i:nth-child(2) {
  animation-delay: 0.9s;
}

[data-mode="paused"] .band-btn {
  box-shadow:
    0 0 0 14px var(--a-tint),
    0 0 0 15px var(--a-soft),
    0 30px 56px rgba(68, 44, 160, 0.2),
    inset 0 -8px 18px rgba(68, 44, 160, 0.07);
}

@keyframes listen {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(1.6); opacity: 0; }
}

.rh-hint {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}

.rh-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.rh-state {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.rh-time {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--out);
}

[data-mode="rec"] .rh-time {
  color: var(--a);
}

.rh-wave {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  height: 84px;
  margin: 16px 0 18px;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
}

.rh-wave b {
  flex: none;
  width: 4px;
  height: calc(var(--h) * 1%);
  border-radius: 4px;
  background: var(--a);
  animation: grow 0.3s var(--out);
}

.rh-wave b.gap {
  height: 4px;
  background: var(--thread);
}

@keyframes grow { from { transform: scaleY(0.2); } }

.rh-log {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.rh-log li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 14px;
  font-weight: 500;
  animation: pop 0.45s var(--spring);
}

.rh-log li .mono {
  color: var(--soft);
  font-size: 13px;
}

.rh-log li.phone {
  background: var(--teal-tint);
  color: var(--teal);
}

.rh-log li .ic {
  width: 18px;
  height: 18px;
}

.rh-log .fill {
  position: relative;
  width: 56px;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--teal) 18%, transparent);
}

.rh-log .fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--teal);
  transform-origin: left;
  animation: fill 1.4s var(--out) forwards;
}

@keyframes fill { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; scale: 0.8; } }

.rh-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  font-size: 15px;
}

.rh-legend div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rh-legend dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.rh-legend dd {
  margin: 0;
  color: var(--soft);
}

.taps {
  width: 28px;
  height: 12px;
  fill: var(--a);
}

/* ── notes: every point and the lines it came from ──────────────────── */

.rail {
  --mode: rail;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(56px, 7vw, 104px);
  align-items: start;
}

.rail .wires {
  z-index: 2;
}

/* Only the point being read is joined to its lines, and the join is drawn
   from the time to the transcript as it is chosen. */
.rw {
  fill: none;
  stroke: var(--a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.3s var(--out), stroke-dashoffset 0.7s var(--out);
}

.rw.on {
  opacity: 1;
  stroke-dashoffset: 0;
}

.note-card,
.transcript {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.note-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.note-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.meta {
  margin: 3px 0 0;
  color: var(--soft);
  font-size: 14px;
}

.chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--a-tint);
  color: var(--a);
}

.chip .ic {
  width: 24px;
  height: 24px;
}

.chip.teal {
  background: var(--teal-tint);
  color: var(--teal);
}

.note-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 8px;
  color: var(--soft);
  font-size: 15px;
  font-weight: 600;
}

.note-card h4 .ic {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.claims {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.claim {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: 16px;
  transition: background-color 0.3s var(--out);
}

p.claim {
  grid-template-columns: minmax(0, 1fr) auto;
}

.claim.on {
  background: color-mix(in srgb, var(--a-tint) 70%, transparent);
}

.claim .dot {
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--teal);
}

.claim .box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--soft);
  border-radius: 7px;
}

.claim-text {
  font-size: 16px;
  line-height: 1.5;
}

.cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--a-tint);
  color: var(--a);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.25s var(--out), color 0.25s var(--out), scale 0.25s var(--spring);
}

.cite .mono {
  font-weight: 500;
}

.cite small {
  font: 600 11px/1 var(--sans);
  opacity: 0.8;
}

.cite:active {
  scale: 0.94;
}

.claim.on .cite {
  background: var(--a);
  color: #FFFFFF;
}

.said {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg);
  font-size: 14.5px;
  line-height: 1.5;
}

.said[hidden] {
  display: none;
}

.said .mono {
  color: var(--a);
  font-size: 12.5px;
}

.lines {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background-color 0.35s var(--out);
}

.line .t {
  justify-self: start;
  padding-top: 2px;
  color: var(--soft);
  font-size: 13px;
  transition: color 0.35s var(--out);
}

.line b {
  display: block;
  color: var(--soft);
  font-size: 14px;
  font-weight: 600;
}

.line p {
  margin: 2px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
}

.line.on {
  background: var(--a-tint);
}

.line.on .t {
  color: var(--a);
  font-weight: 500;
}

/* ── the map of a talk ──────────────────────────────────────────────── */

.map-stage {
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 36px);
}

/* One way, as the app draws a map: the recording's title at the reading
   edge, its themes in a column beside it, and what was said, a sentence on
   a card, at the end of every branch. */
.bigmap {
  --mode: right;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(40px, 4.4vw, 64px);
}

.side {
  display: grid;
  gap: 40px;
}

.side.right { justify-items: start; }

.bigmap .side {
  gap: 26px 0;
}

/* Each level a column: every theme box as wide as the widest, so the rings
   line up and so do the cards beyond them. */
@media (min-width: 1100px) {
  @supports (grid-template-columns: subgrid) {
    .bigmap .side {
      grid-template-columns: max-content auto minmax(0, 1fr);
      justify-items: stretch;
    }

    .bigmap .branch {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      align-items: center;
    }
  }
}

.bigmap .node {
  padding: 12px 18px;
  font-weight: 600;
}

.bigmap .leaves {
  gap: 10px;
  margin-left: 44px;
}

.bigmap .leaf {
  max-width: 440px;
  padding: 0;
}

/* What was said: a card ringed in its branch's colour. A tap shows the
   line of the transcript it came from. */
.leaf-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 14px 11px;
  border: 1.5px solid color-mix(in srgb, var(--col) 45%, transparent);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--out), border-color 0.25s var(--out);
}

.leaf-btn .mono {
  margin-left: 3px;
  color: var(--soft);
  font-size: 12px;
}

.leaf-btn:hover,
.leaf-btn[aria-pressed="true"] {
  border-color: var(--col);
  background: color-mix(in srgb, var(--col) 8%, var(--card));
}

.quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  max-width: 660px;
  margin: 40px auto 0;
  padding: 20px 24px;
  border-radius: 24px;
  background: var(--bg);
}

.quote .q {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  color: var(--a);
}

.quote blockquote {
  margin: 0;
}

.quote blockquote p {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
}

.quote figcaption {
  margin-top: 8px;
  color: var(--soft);
  font-size: 14px;
}

.quote.swap blockquote {
  animation: rise 0.45s var(--out);
}

@keyframes rise { from { opacity: 0; translate: 0 6px; } }

/* ── ask ────────────────────────────────────────────────────────────── */

.ask-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.small {
  max-width: 32em;
  margin: 0;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--bg-deep);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

/* As on the app's Ask screen, the bubbles sit straight on the page. */
.chat {
  display: flex;
  flex-direction: column;
}

.msgs {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.msg.you {
  justify-content: flex-end;
}

.bubble {
  max-width: 86%;
  padding: 13px 16px;
  border-radius: 22px;
  font-size: 15.5px;
  line-height: 1.45;
}

.bubble p {
  margin: 0;
}

.msg.ks .bubble {
  border-bottom-left-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.msg.you .bubble {
  border-bottom-right-radius: 6px;
  background: var(--a);
  color: #FFFFFF;
}

.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin-top: 10px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--a-tint);
  color: var(--a);
  font-size: 13.5px;
  font-weight: 600;
}

.cite-chip .ic {
  width: 18px;
  height: 18px;
}

.cite-chip .mono {
  font-weight: 500;
}

.ask-field {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  margin-top: 18px;
  padding: 0 6px 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.3s var(--out), scale 0.2s var(--spring);
}

.js .ask-field {
  display: flex;
}

.ask-field:hover {
  box-shadow: var(--lift);
}

.ask-field:active {
  scale: 0.98;
}

/* In a conversation only the companion who is thinking moves. */
.msgs .orb,
.msgs .orb .eye {
  animation: none;
}

.msg.typing .orb {
  animation: breathe 1.8s ease-in-out infinite;
}

.ask-field .send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--a);
  color: #FFFFFF;
}

.ask-field .send .ic {
  width: 20px;
  height: 20px;
}

.chat .stage-note {
  margin-top: 14px;
  text-align: center;
}

.chat.playing .msg.pending {
  display: none;
}

.msg.arrive {
  animation: arrive 0.5s var(--spring);
}

@keyframes arrive { from { opacity: 0; translate: 0 10px; scale: 0.97; } }

.msg.typing .bubble > * {
  display: none;
}

.msg.typing .bubble::before {
  content: "";
  display: block;
  width: 38px;
  height: 10px;
  background-image: radial-gradient(circle, var(--a-light) 3.6px, transparent 4.2px);
  background-size: 13px 10px;
  background-repeat: repeat-x;
  animation: typing 0.9s ease-in-out infinite;
}

@keyframes typing { 50% { opacity: 0.35; } }

/* ── your day and your week ─────────────────────────────────────────── */

.days-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.day-cards {
  display: grid;
  gap: 16px;
  max-width: 580px;
}

.morning,
.winding {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 24px;
  border-radius: 28px;
}

.morning {
  background: var(--card);
  box-shadow: var(--shadow);
}

.morning .sun {
  position: absolute;
  top: -96px;
  right: -84px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--amber-tint);
}

.morning h3,
.winding h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
}

.morning h3 .ic {
  width: 30px;
  height: 30px;
  color: var(--amber);
}

.morning ul {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.morning li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
}

.morning li .ic {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--a);
}

.morning li:nth-child(2) .ic {
  color: var(--amber);
}

.winding {
  background:
    radial-gradient(90% 80% at 88% 0%, color-mix(in srgb, var(--a-glow) 50%, transparent), transparent 62%),
    linear-gradient(160deg, var(--night-hi), var(--night) 80%);
  box-shadow: 0 24px 50px rgba(20, 17, 42, 0.28);
  color: #FFFFFF;
}

.winding h3 .ic {
  width: 30px;
  height: 30px;
  color: #F6E6B4;
}

.winding p {
  position: relative;
  margin: 0 0 18px;
  color: #ECE8FF;
  font-size: 16px;
  line-height: 1.55;
}

.day-cards .stage-note {
  margin-top: 4px;
}

.phone {
  margin: 0;
}

.phone .screen {
  overflow: hidden;
  border-radius: 44px;
  background: var(--night);
  box-shadow: 0 0 0 9px #1D1640, 0 44px 80px -20px rgba(29, 22, 64, 0.5);
}

.phone figcaption {
  margin-top: 26px;
  color: var(--soft);
  font-size: 14.5px;
  text-align: center;
}

/* ── privacy: the one night block ───────────────────────────────────── */

.night {
  margin: clamp(24px, 4vw, 56px) clamp(8px, 1.4vw, 20px);
  border-radius: clamp(32px, 4vw, 56px);
  background:
    radial-gradient(70% 60% at 88% 0%, color-mix(in srgb, var(--a-glow) 36%, transparent), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(79, 209, 197, 0.12), transparent 62%),
    linear-gradient(172deg, var(--night-hi) 0%, #251C63 28%, var(--night) 72%);
  color: var(--night-ink);
}

.night .sec-lead {
  color: var(--night-soft);
}

.night .knot {
  background: var(--night);
  border-color: var(--teal-n);
}

.night.here .knot {
  background: var(--teal-n);
}

.privmap {
  --mode: right;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(48px, 6vw, 88px);
}

.privmap .side {
  gap: 18px;
}

.night .branch { --col: var(--a-n); }
.night .branch[data-c="teal"] { --col: var(--teal-n); }
.night .branch[data-c="coral"] { --col: var(--coral-n); }
.night .branch[data-c="amber"] { --col: var(--amber-n); }

.night .w { stroke: var(--a-n); }
.night .w.c-teal { stroke: var(--teal-n); }
.night .w.c-coral { stroke: var(--coral-n); }
.night .w.c-amber { stroke: var(--amber-n); }

.night .node {
  background: var(--night-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: var(--night-ink);
}

.night .ring {
  color: var(--night);
}

.night .ring[aria-expanded="true"] {
  background: var(--night-card);
  color: var(--col);
}

.night .map-root {
  background: var(--card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}

.night .map-root .ic {
  color: var(--a);
}

.night .leaf a {
  color: var(--night-ink);
  text-decoration: none;
}

.night .leaf a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.promise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.promise p {
  max-width: 34em;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

/* The policy and the Security page, side by side, wrapping on a phone. */
.promise-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── price ──────────────────────────────────────────────────────────── */

/* The plans: three boxes ringed in the map's colours, each with its hours
   and, since 27 Sep 2026, its price (owner). */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0 0 clamp(40px, 5vw, 56px);
  padding: 0;
  list-style: none;
}

.tier {
  --col: var(--a);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border: 2px solid var(--col);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.tier[data-c="teal"] { --col: var(--teal); }
.tier[data-c="coral"] { --col: var(--coral); }

.tier h3 {
  margin: 0 0 14px;
  color: var(--col);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.tier-hours {
  margin: 0;
  font-size: clamp(40px, 4.2vw, 54px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}

.tier-per {
  margin: 8px 0 18px;
  color: var(--soft);
  font-size: 15.5px;
}

.tier-price {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tier-alt {
  margin: 4px 0 20px;
  color: var(--soft);
  font-size: 14.5px;
}

/* The band and the bundle: two plain cards under the plans, each with its
   price, while the band is still coming. */
.offers-wrap {
  margin: 0 0 clamp(40px, 5vw, 56px);
}

.offers-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer {
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.offer h4 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.offer-price {
  margin: 0 0 8px;
  color: var(--a);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.offer p:last-child {
  margin: 0;
  color: var(--soft);
  font-size: 15.5px;
}

.tier .ticks {
  gap: 10px;
  margin: 0 0 22px;
}

.tier .ticks li {
  font-size: 16px;
}

.tier .ticks .ic {
  color: var(--col);
}

.tier-note {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: 14.5px;
}

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.ticks {
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  font-size: 17px;
}

.ticks .ic {
  width: 24px;
  height: 24px;
  color: var(--teal);
}

.soon-line {
  margin: 0;
}

.why {
  padding: 30px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.why .orb {
  margin-bottom: 18px;
}

.why h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.why p {
  margin: 0;
  color: var(--soft);
}

/* The Own-API option: one card of copy, a reading measure wide. It names no
   provider (owner, 25 Sep 2026). */
.own-api {
  max-width: 820px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 34px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.own-copy {
  max-width: 720px;
}

.own-copy h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.own-copy > p {
  margin: 0 0 20px;
  color: var(--soft);
}

.own-copy .ticks {
  margin: 0;
}

/* ── the invite page ────────────────────────────────────────────────── */

/* Beside .doc p, which would otherwise set its size. */
.doc .invite-code-text {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.invite-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding-inline-start: 1.4em;
}

/* ── questions ──────────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.faq details {
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 18px 24px;
  border-radius: 22px;
  font-size: 17.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq .fold {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--a);
  transition: rotate 0.35s var(--spring), background-color 0.25s var(--out), color 0.25s var(--out);
}

.faq .fold .ic {
  width: 18px;
  height: 18px;
}

.faq .fold .ic {
  stroke: currentColor;
  stroke-width: 6;
}

.faq details[open] .fold {
  rotate: 180deg;
  background: var(--a);
  color: #FFFFFF;
}

.faq details p {
  max-width: 62ch;
  margin: 0;
  padding: 0 24px 22px;
  color: var(--soft);
}

/* ── the close: the root again, in your colour ──────────────────────── */

.close {
  padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px);
  text-align: center;
}

.close-inner {
  display: grid;
  justify-items: center;
}

.orb-says {
  max-width: 24em;
  margin: 24px 0;
  font-size: 19px;
  font-weight: 500;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin-bottom: clamp(56px, 8vw, 96px);
}

.swatches button {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 4px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--soft);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.swatches .sw {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--sw) 35%, transparent);
  transition: scale 0.3s var(--spring);
}

.swatches .tick {
  width: 26px;
  height: 26px;
  color: #FFFFFF;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.2s var(--out), scale 0.35s var(--spring);
}

.swatches .tick path[opacity] {
  display: none;
}

.swatches button:hover .sw {
  scale: 1.06;
}

.swatches [aria-checked="true"] {
  color: var(--ink);
  font-weight: 600;
}

.swatches [aria-checked="true"] .sw {
  scale: 1.1;
}

.swatches [aria-checked="true"] .tick {
  opacity: 1;
  scale: 1;
}

.close h2 {
  margin: 0 0 14px;
  font-size: clamp(44px, 6vw, 86px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.close-line {
  margin: 0;
  color: var(--soft);
  font-size: 18px;
}

/* ── footer ─────────────────────────────────────────────────────────── */

.foot {
  padding: 0 0 calc(40px + env(safe-area-inset-bottom));
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: 14.5px;
}

.foot-row p {
  margin: 0;
}

/* Each link a thumb's height, its words centred in it, the rows meeting where
   the gap between them was: as it looked, and twice the target (29 Oct 2026). */
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.foot a {
  color: var(--soft);
  text-decoration: none;
}

.foot a:hover {
  color: var(--ink);
}

.foot .lockup {
  color: var(--ink);
  font-size: 18px;
}

.foot .lockup .mark {
  width: 26px;
  height: 26px;
}

/* ── the documents ──────────────────────────────────────────────────── */

.doc-wrap {
  padding: 108px var(--gut) 72px;
}

.doc {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px);
  border-radius: 34px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.doc .updated {
  margin: 0 0 24px;
  color: var(--soft);
  font-size: 15px;
}

.doc h2 {
  margin: 38px -12px 10px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.3px;
  scroll-margin-top: 104px;
}

.doc h2:target {
  animation: found 2.6s var(--out);
}

@keyframes found {
  0%, 35% { background: var(--a-tint); }
  100% { background: transparent; }
}

.doc p,
.doc li {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.65;
}

.doc ul {
  padding-left: 22px;
}

.doc li {
  margin: 6px 0;
}

.doc li::marker {
  color: var(--a);
}

/* ── the code page: sign in, type the code, Plus is on the account ───── */

.redeem .rd-lead {
  font-size: 18px;
}

.rd-panel {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 480px;
  margin: 28px 0 8px;
}

.rd-panel p {
  margin: 0;
}

/* One panel at a time; "Getting ready" only where a script can end it. */
.rd-panel[hidden],
.rd-loading {
  display: none;
}

.js .rd-loading:not([hidden]) {
  display: grid;
}

.rd-soon {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  max-width: none;
  padding: 26px 26px 24px;
  border-radius: 24px;
  background: var(--bg);
}

.rd-soon p + p {
  margin-top: 4px;
  color: var(--soft);
}

.rd-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

/* The companion in the band's hard hat: still being made. */
.hatted {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  margin-top: 12px;
}

.hatted .orb {
  --s: 64px;
}

.hatted .hat {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -17px;
  width: 60px;
  translate: -50% 0;
  rotate: -9deg;
  filter: drop-shadow(0 3px 4px rgba(20, 10, 60, 0.2));
}

.rd-who {
  color: var(--soft);
  font-size: 15.5px;
}

.rd-who b {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.redeem .field-label {
  margin: 6px 0 -6px;
}

.redeem input[type="text"] {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink);
  font: 500 18px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: box-shadow 0.2s var(--out), background-color 0.2s var(--out);
}

.redeem input[type="text"]::placeholder {
  color: #817AA3;
}

.redeem input[type="text"]:focus {
  outline: 2px solid transparent;
  background: var(--card);
  box-shadow: 0 0 0 2.5px var(--a), 0 0 0 7px color-mix(in srgb, var(--a) 16%, transparent);
}

.redeem input[aria-invalid="true"],
.redeem input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 2.5px var(--coral), 0 0 0 7px color-mix(in srgb, var(--coral) 14%, transparent);
}

.rd-help {
  color: var(--soft);
  font-size: 14.5px;
}

.redeem .busy .submit {
  opacity: 0.8;
  cursor: progress;
}

.redeem .thanks {
  justify-items: center;
  max-width: none;
  padding: 12px 0 4px;
}

/* Focused so a screen reader reads it out; it is not something to press. */
.redeem .thanks-title:focus {
  outline: none;
}

.lost {
  display: grid;
  place-items: center;
  min-height: 82svh;
  padding: 120px var(--gut) 60px;
  text-align: center;
}

.lost-inner {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.lost h1 {
  margin: 22px 0 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.lost p {
  margin: 0 0 16px;
  color: var(--soft);
}

/* ── wide: the trunk and its knots ──────────────────────────────────── */

@media (min-width: 1100px) {
  .trunk { display: block; }
  .knot { display: block; }

  .sec-head,
  .sec-body {
    padding-left: 64px;
  }

  .said {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    padding: 0;
  }
}

/* ── narrower: maps become trees, the tabs move to the bottom ───────── */

@media (max-width: 1099px) {
  .bar {
    position: absolute;
    top: 12px;
    left: var(--gut);
    right: var(--gut);
    justify-content: space-between;
    width: auto;
    max-width: none;
    padding: 6px 6px 6px 14px;
    transform: none;
  }

  .tabs {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 2px;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: 0 14px 34px rgba(29, 22, 64, 0.2);
    transform: translate(-50%, calc(100% + 40px));
    transition: transform 0.55s var(--spring);
  }

  body.past-hero .tabs {
    transform: translate(-50%, 0);
  }

  .tabs a {
    justify-content: center;
    width: 44px;
    padding: 0;
  }

  .tabs a .ic {
    display: block;
  }

  .tabs a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* As in the app's tab bar, the room you are in says its name. */
  .tabs a[aria-current="location"] {
    width: auto;
    padding: 0 16px 0 12px;
  }

  .tabs a[aria-current="location"] span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  /* Room for six: Record and Health are reached from the page, and the
     price stays in reach from anywhere. */
  .tabs a[data-tab="record"],
  .tabs a[data-tab="days"] {
    display: none;
  }

  .band-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .workshop {
    --sheet-top: 0.24;
    min-height: 390px;
  }

  .map,
  .hero-grid,
  .bigmap,
  .privmap {
    --mode: tree;
  }

  .hero {
    padding-top: 88px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
    min-height: 0;
  }

  .branches {
    gap: 14px;
    padding-left: 52px;
  }

  .map .branch {
    flex-wrap: wrap;
  }

  .map .leaves {
    flex-basis: 100%;
    margin: 12px 0 4px 44px;
  }

  .map .node {
    white-space: normal;
  }

  .rail {
    --mode: stack;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .rail .wires {
    display: none;
  }

  .bigmap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .bigmap .side {
    gap: 16px;
    margin: 26px 0 0 52px;
  }

  .bigmap .leaf {
    max-width: none;
  }

  .privmap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .privmap .side {
    margin: 26px 0 0 52px;
  }

  .ask-grid,
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .promises {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* On a narrow screen the letter reads alone; the promises say the rest. */
  .story-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-map {
    display: none;
  }

  .days-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone {
    width: min(280px, 78%);
    margin: 12px auto 0;
  }

  .foot {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16.5px;
  }

  .lockup {
    font-size: 19px;
  }

  .root {
    border-radius: 30px;
  }

  .root-mark {
    width: 54px;
    height: 54px;
  }

  .root .lead {
    font-size: 17.5px;
  }

  .actions .pill {
    flex: 1 1 auto;
  }

  .branches {
    padding-left: 44px;
  }

  .map .leaves {
    margin-left: 36px;
  }

  .node {
    font-size: 16px;
  }

  .rehearse {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .band-btn {
    width: 148px;
    height: 148px;
  }

  .rh-top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }

  .claim {
    grid-template-columns: auto minmax(0, 1fr);
  }

  p.claim {
    grid-template-columns: minmax(0, 1fr);
  }

  .claim .cite {
    grid-column: 2;
    justify-self: start;
  }

  p.claim .cite {
    grid-column: 1;
  }

  .line {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .bigmap .side,
  .privmap .side {
    margin-left: 40px;
  }

  .map-stage {
    padding-left: 18px;
    padding-right: 18px;
  }

  .quote {
    margin-top: 28px;
    padding: 18px;
  }

  .quote blockquote p {
    font-size: 17px;
  }

  .bubble {
    max-width: 92%;
  }

  .promise {
    margin-top: 40px;
  }

  .orb.xl {
    --s: 104px;
  }

  .swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 88px));
    gap: 14px 18px;
  }

  .swatches .sw {
    width: 52px;
    height: 52px;
  }

  .rd-soon {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px 22px 22px;
  }

  .foot-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .light i {
    animation: none;
  }

  /* Driven by the scroll, not the clock, so the durations above leave it be. */
  .letter p {
    animation: none;
  }

  .js .ask-field {
    display: none;
  }
}