/* Kinverie public site. Colours are the app's tokens (lib/core/design_system/tokens.dart):
   warm canvas, forest primary actions, the stronger control borders and the visible focus
   colour, with the decorative warmth used for glows only. Fonts are web copies of the app's own
   files, served from this site (web/public/ASSETS.md). No rule here loads anything from another
   origin, and the page works without any of the motion. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SourceSerif4-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/SourceSerif4-Semibold.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --canvas: #f7f4ef;
  --paper: #fbf9f5;
  --panel: #ffffff;
  --text: #1c2321;
  --muted: #4c5a56;
  --primary: #24564a;
  --primary-strong: #1a4238;
  --on-primary: #ffffff;
  --border: #d4dbd5;
  --hairline: rgba(28, 35, 33, 0.1);
  --control-border: #768580;
  --error: #a42c3a;
  --error-background: #f9e9eb;
  --focus: #1d5f9c;
  --warmth: #e6b67a;
  --accent-text: #8a5419;
  --subtle: #efebe4;
  --selected: #e3ece7;
  --draft: #fbf1e2;
  --glow-warm: rgba(230, 182, 122, 0.34);
  --glow-cool: rgba(36, 86, 74, 0.1);
  --arch-top: rgba(230, 182, 122, 0.5);
  --arch-bottom: rgba(230, 182, 122, 0);
  --shadow: 28, 35, 33;
  --mark-tile: #24564a;
  --mark-k: #f7f4ef;
  --band-1: #24564a;
  --band-2: #1a4238;
  --band-text: #f7f4ef;
  --band-muted: #cfe0d8;
  --band-accent: #f0c992;
  --ui: "Inter", system-ui, sans-serif;
  --editorial: "Source Serif 4", Georgia, serif;
  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #151b19;
    --paper: #1a211e;
    --panel: #202824;
    --text: #f3f6f2;
    --muted: #bcc8c1;
    --primary: #a7d8c6;
    --primary-strong: #c3e6d8;
    --on-primary: #13221c;
    --border: #506258;
    --hairline: rgba(243, 246, 242, 0.12);
    --control-border: #7d9088;
    --error: #f2a2ab;
    --error-background: #3a262a;
    --focus: #8fc1f0;
    --accent-text: #e6b67a;
    --subtle: #283230;
    --selected: #2b3f38;
    --draft: #2c261d;
    --glow-warm: rgba(230, 182, 122, 0.13);
    --glow-cool: rgba(167, 216, 198, 0.07);
    --arch-top: rgba(230, 182, 122, 0.22);
    --arch-bottom: rgba(230, 182, 122, 0);
    --shadow: 0, 0, 0;
    --mark-tile: #a7d8c6;
    --mark-k: #13221c;
    --band-1: #1d3a33;
    --band-2: #142a24;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--canvas);
  background-image: url("/images/grain.svg");
  background-size: 240px 240px;
  color: var(--text);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  font-feature-settings: "calt", "kern";
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

@media (prefers-color-scheme: dark) {
  /* On the dark canvas the grain only textures; it must not tint the tokens' colours. */
  body {
    background-blend-mode: soft-light;
  }
}

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

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

a:hover {
  text-decoration-thickness: 2px;
}

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

main:focus,
h2[tabindex="-1"]:focus {
  outline: none;
}

h2[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--focus);
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 1.6em 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-family: var(--editorial);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-top: 0.4em;
}

h2 {
  font-family: var(--editorial);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

p,
ul,
ol,
table,
blockquote {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

li + li {
  margin-top: 0.35em;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap.narrow {
  max-width: 46rem;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: 10px;
}

.skip-link:focus {
  top: 0.75rem;
}

.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 38rem;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.6rem 1.35rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--primary);
  background: var(--panel);
  border: 1px solid var(--control-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.button:focus-visible {
  border-radius: 999px;
}

.button svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 10px 24px -14px rgba(var(--shadow), 0.7);
}

.button-primary:hover {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.button-ghost {
  background: transparent;
  color: var(--text);
}

.button-ghost:hover {
  background: var(--panel);
}

.button-large {
  min-height: 56px;
  padding: 0.8rem 1.75rem;
  font-size: 1.05rem;
}

.button-danger {
  color: #ffffff;
  background: var(--error);
  border-color: var(--error);
}

@media (prefers-color-scheme: dark) {
  .button-danger {
    color: #13221c;
  }
}

.button-quiet {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Header */

.site-header {
  position: relative;
  z-index: 2;
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.wordmark,
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--editorial);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark {
  min-height: 48px;
}

.mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.mark-tile {
  fill: var(--mark-tile);
}

.mark-k {
  fill: none;
  stroke: var(--mark-k);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-list,
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
}

.nav-list li + li,
.footer-list li + li {
  margin-top: 0;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.nav-list a:hover {
  background: var(--subtle);
}

.nav-list a[aria-current="page"] {
  background: var(--selected);
  color: var(--primary);
}

.nav-list a:focus-visible {
  border-radius: 999px;
}

@media (max-width: 30rem) {
  .wordmark {
    font-size: 1.35rem;
    gap: 0.5rem;
  }
  .header-row {
    gap: 0 0.5rem;
  }
  .nav-list a {
    padding: 0 0.55rem;
    font-size: 0.95rem;
  }
}

/* Footer */

.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: 3.5rem 0 1.5rem;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.footer-about p {
  margin: 0 0 0.5rem;
  max-width: 26rem;
}

.footer-mark {
  font-size: 1.3rem;
  margin-bottom: 0.9rem !important;
}

.footer-disclosure {
  color: var(--text);
  font-weight: 500;
}

.footer-label {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-list a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.footer-list a {
  text-decoration: none;
}

.footer-list a:hover {
  text-decoration: underline;
}

.footer-contact p {
  margin: 0;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
}

.footer-base p {
  margin: 0;
}

/* Home: shared section rhythm */

.section {
  padding: clamp(4rem, 9vw, 7.5rem) 0 0;
}

.section h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.section-head {
  max-width: 40rem;
}

.section-lead {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Hero */

.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -12rem 0 -24rem;
  z-index: -1;
  background:
    radial-gradient(52rem 36rem at 80% 30%, var(--glow-warm), transparent 66%),
    radial-gradient(38rem 28rem at 6% 62%, var(--glow-cool), transparent 66%);
  pointer-events: none;
}

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

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 6px 18px -12px rgba(var(--shadow), 0.4);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.pill-dot {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #3f8f6f;
  flex: none;
}

.pill-dot::after {
  content: "";
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 2px solid #3f8f6f;
  opacity: 0;
}

.display {
  margin: 0;
  font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 11ch;
}

.display-accent {
  display: block;
  color: var(--primary);
  margin-top: 0.08em;
}

.hero-lead {
  margin: 1.75rem 0 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.075rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.25rem 0 0;
}

.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.hero-promises li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-promises li::before {
  content: "";
  width: 0.9rem;
  height: 0.5rem;
  margin-top: -0.2rem;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  rotate: -45deg;
}

/* The layered phones. Every size is a share of the stage, so the composition scales as one. */

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  aspect-ratio: 20 / 21;
}

.stage-arch {
  position: absolute;
  inset: 0 13% 5% 13%;
  border-radius: 999px 999px 2rem 2rem;
  background: linear-gradient(180deg, var(--arch-top), var(--arch-bottom) 78%);
}

.slot {
  position: absolute;
  container-type: inline-size;
}

.slot-front {
  z-index: 3;
  width: 45%;
  left: 27.5%;
  top: 4%;
}

.slot-left {
  z-index: 2;
  width: 37%;
  left: 3%;
  top: 15%;
  rotate: -8deg;
}

.slot-right {
  z-index: 1;
  width: 37%;
  right: 3%;
  top: 9%;
  rotate: 7deg;
}

.phone {
  position: relative;
  padding: 3.6%;
  border-radius: 13cqi;
  background: linear-gradient(150deg, #3b423f 0%, #1a1f1d 45%, #0f1311 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 2px 4px rgba(var(--shadow), 0.12),
    0 24px 48px -18px rgba(var(--shadow), 0.5),
    0 50px 80px -40px rgba(var(--shadow), 0.45);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10cqi;
  background: #f7f4ef;
}

.slot-left .phone,
.slot-right .phone {
  filter: saturate(0.92);
}

.face {
  display: block;
  border-radius: 50%;
  background-color: #efe6d6;
  background-size: cover;
  background-position: center 30%;
}

.face-mara { background-image: url("/images/characters/mara-vale.webp"); }
.face-jules { background-image: url("/images/characters/jules-park.webp"); }
.face-oren { background-image: url("/images/characters/oren-finch.webp"); }
.face-noor { background-image: url("/images/characters/noor-haddad.webp"); }
.face-amara { background-image: url("/images/characters/amara-osei.webp"); }
.face-felix { background-image: url("/images/characters/felix-achterberg.webp"); }

.medallion {
  position: absolute;
  z-index: 4;
  aspect-ratio: 1;
  border: 5px solid var(--canvas);
  box-shadow: 0 18px 36px -16px rgba(var(--shadow), 0.55);
}

.medallion-a {
  width: 21%;
  left: 1%;
  bottom: 3%;
}

.medallion-b {
  width: 17%;
  right: 1%;
  top: 0;
}

/* Meet the cast: arched portraits, set on a gentle arc on wide screens. */

.cast-list {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(0.9rem, 3vw, 1.5rem);
}

.cast-card {
  margin: 0;
}

.cast-list > li + li {
  margin-top: 0;
}

.cast-list > .cast-card:nth-child(even) {
  margin-top: 2.5rem;
}

@media (min-width: 40rem) {
  .cast-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cast-list > .cast-card:nth-child(even) {
    margin-top: 0;
  }
  .cast-list > .cast-card:nth-child(3n + 2) {
    margin-top: 3rem;
  }
}

@media (min-width: 64rem) {
  .cast-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .cast-list > .cast-card:nth-child(n) {
    margin-top: 0;
  }
  .cast-list > .cast-card:nth-child(1),
  .cast-list > .cast-card:nth-child(6) {
    margin-top: 4.5rem;
  }
  .cast-list > .cast-card:nth-child(2),
  .cast-list > .cast-card:nth-child(5) {
    margin-top: 1.5rem;
  }
}

.cast-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 1.25rem 1.25rem;
  background: #efe6d6;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 22px 40px -26px rgba(var(--shadow), 0.55);
}

.cast-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(28, 35, 33, 0.08);
  pointer-events: none;
}

.cast-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.cast-name {
  margin: 1.1rem 0 0.35rem;
  font-family: var(--editorial);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cast-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cast-role {
  margin: 0.75rem 0 0;
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* How it feels */

.feel-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .feel-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
  }
}

.feel-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.feel-list li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 1.6rem 0;
  border-top: 1px solid var(--hairline);
}

.feel-list li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.feel-list h3 {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--editorial);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feel-list p {
  margin: 0;
  color: var(--muted);
  max-width: 34rem;
}

.icon-badge {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--selected);
  color: var(--primary);
}

.icon-badge svg,
.fact-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feel-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem 0 1rem;
}

.feel-stage::before {
  content: "";
  position: absolute;
  inset: 0 12%;
  border-radius: 999px 999px 2rem 2rem;
  background: linear-gradient(180deg, var(--selected), transparent 72%);
}

.slot-tilt {
  position: relative;
  container-type: inline-size;
  width: min(17.5rem, 68%);
  rotate: 3deg;
}

.note-chip {
  position: absolute;
  left: 0;
  top: 18%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 16px 32px -18px rgba(var(--shadow), 0.55);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  rotate: -3deg;
}

.toggle {
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 1.25rem;
  border: 2px solid var(--control-border);
  border-radius: 999px;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--control-border);
  translate: 0 -50%;
}

/* Your data, your call */

.band {
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(42rem 28rem at 100% 0%, rgba(230, 182, 122, 0.2), transparent 62%),
    url("/images/grain.svg"),
    linear-gradient(160deg, var(--band-1), var(--band-2));
  background-size: auto, 240px 240px, auto;
  color: var(--band-text);
  box-shadow: 0 40px 80px -48px rgba(var(--shadow), 0.7);
}

@media (prefers-color-scheme: dark) {
  .band {
    box-shadow: inset 0 0 0 1px rgba(167, 216, 198, 0.16);
  }
}

.band .eyebrow {
  color: var(--band-accent);
}

.band .section-lead {
  color: var(--band-muted);
}

.band :focus-visible {
  outline-color: var(--band-accent);
}

.facts {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0 2.5rem;
}

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.facts li {
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(247, 244, 239, 0.16);
}

.fact-icon {
  color: var(--band-accent);
}

.facts h3 {
  margin: 0.75rem 0 0.35rem;
  font-size: 1.05rem;
}

.facts p {
  margin: 0;
  color: var(--band-muted);
  font-size: 0.95rem;
}

.band-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.button-on-band {
  color: var(--band-text);
  background: rgba(247, 244, 239, 0.06);
  border-color: rgba(247, 244, 239, 0.45);
}

.button-on-band:hover {
  background: rgba(247, 244, 239, 0.14);
  border-color: rgba(247, 244, 239, 0.8);
}

/* Join */

.join-inner {
  max-width: 44rem;
  text-align: center;
}

.join-inner .section-lead {
  margin-inline: auto;
}

.join-inner > p:not(.eyebrow):not(.section-lead) {
  margin: 1rem auto 0;
  max-width: 34rem;
}

.faces {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.faces .face {
  width: 3.25rem;
  height: 3.25rem;
  border: 3px solid var(--canvas);
  box-shadow: 0 8px 18px -10px rgba(var(--shadow), 0.5);
}

.faces .face + .face {
  margin-left: -0.7rem;
}

.join-action {
  margin-top: 2rem !important;
}

.fine-print {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Motion: a short entrance, a gentle reveal while scrolling, and phones that drift at different
   speeds. Everything is CSS, all of it is skipped for reduced motion, and the page reads the
   same without it. */

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    translate: 0 2.5rem;
  }
}

/* The heading, the lead and the front screenshot are what the page paints first (its largest
   contentful paint), so they move into place without ever being hidden. */
@keyframes settle {
  from {
    translate: 0 1.25rem;
  }
}

@keyframes float-up {
  from {
    translate: 0 2.5rem;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    scale: 0.85;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.7;
    scale: 0.6;
  }
  80%,
  100% {
    opacity: 0;
    scale: 1.6;
  }
}

@keyframes drift-slow {
  to {
    translate: 0 -2.5rem;
  }
}

@keyframes drift-fast {
  to {
    translate: 0 -5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: rise 900ms var(--ease) both;
  }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 240ms; }
  .hero-copy > :nth-child(5) { animation-delay: 300ms; }
  .hero-copy > h1,
  .hero-copy > .hero-lead {
    animation-name: settle;
  }

  .slot .phone {
    animation: float-in 1100ms var(--ease) both;
  }
  .slot-front .phone { animation-delay: 120ms; }
  .slot-left .phone { animation-delay: 260ms; }
  .slot-right .phone { animation-delay: 360ms; }
  .slot-front .phone {
    animation-name: float-up;
  }

  .stage-arch {
    animation: rise 1200ms var(--ease) both;
  }

  .medallion {
    animation: pop 900ms 520ms var(--ease) both;
  }

  .pill-dot::after {
    animation: pulse 2.4s ease-out infinite;
  }

  .button {
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, translate 160ms ease;
  }

  .cast-portrait img {
    transition: scale 600ms var(--ease);
  }
  .cast-card:hover .cast-portrait img {
    scale: 1.04;
  }

  .toc-folded summary::after {
    transition: rotate 200ms ease;
  }

  @supports (animation-timeline: scroll()) {
    .slot-left,
    .medallion-a {
      animation: drift-slow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .slot-right,
    .medallion-b {
      animation: drift-fast linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .medallion-a,
    .medallion-b {
      animation-name: pop, drift-slow;
      animation-duration: 900ms, auto;
      animation-delay: 520ms, 0s;
      animation-timing-function: var(--ease), linear;
      animation-fill-mode: both, both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 90vh;
    }
    .medallion-b {
      animation-name: pop, drift-fast;
    }
  }

  @supports (animation-timeline: view()) {
    .section-head,
    .cast-card,
    .feel-list li,
    .feel-stage,
    .band,
    .join-inner > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* Legal and help pages: comfortable long-form reading with a contents list. */

.doc-page {
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}

.doc-layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64rem) {
  .doc-layout {
    grid-template-columns: 15rem minmax(0, 42rem);
    justify-content: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.doc-main {
  min-width: 0;
}

.toc-side {
  display: none;
}

@media (min-width: 64rem) {
  .toc-side {
    display: block;
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 0.25rem 0.25rem 1rem;
    margin-top: 0.5rem;
  }
  .toc-folded {
    display: none;
  }
}

.toc-title {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}

.toc-list li {
  margin: 0;
}

.toc-list a {
  display: block;
  margin-left: -1px;
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
}

.toc-list a:hover {
  color: var(--text);
  border-left-color: var(--primary);
}

.toc-folded {
  margin: 1.5rem 0 0.5rem;
}

.toc-folded details {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--paper);
}

.toc-folded summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
}

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

.toc-folded summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.15rem;
}

.toc-folded details[open] summary::after {
  rotate: 225deg;
  translate: 0 0.15rem;
}

/* Inside a legal article: no list indent from .prose ol. */
.toc-folded .toc-list {
  margin: 0 1.1rem 1rem;
  padding: 0;
}

.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose h1 {
  margin: 0.25em 0 0.35em;
}

.prose h2 {
  margin: 2.75em 0 0.6em;
  font-size: 1.6rem;
  scroll-margin-top: 1.5rem;
}

.prose h3 {
  margin: 2em 0 0.4em;
  font-size: 1.15rem;
}

.prose > h1 + .doc-version + nav + h2,
.prose > h1 + .doc-version + h2 {
  margin-top: 1.75em;
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

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

.prose strong {
  font-weight: 600;
}

.doc {
  scroll-margin-top: 1.5rem;
}

.doc + .doc {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.doc + .doc h2:first-of-type {
  margin-top: 0.5em;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  letter-spacing: -0.02em;
}

.draft-notice {
  margin: 0 0 1.75rem;
  padding: 0.95rem 1.15rem;
  background: var(--draft);
  border: 1px solid rgba(230, 182, 122, 0.55);
  border-left: 5px solid var(--warmth);
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.draft-notice p {
  margin: 0;
}

.doc-version {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}

.placeholder {
  background: var(--subtle);
  border-bottom: 2px dotted var(--warmth);
}

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  font-size: 0.95rem;
  line-height: 1.55;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose th:first-child,
.prose td:first-child {
  width: 36%;
  border-right: 1px solid var(--border);
}

.prose td:first-child {
  font-weight: 500;
}

.prose th {
  background: var(--subtle);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 30rem) {
  .prose table {
    font-size: 0.9rem;
  }
  .prose th,
  .prose td {
    padding: 0.6rem 0.65rem;
  }
}

/* Deletion page */

.flow-shell {
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .flow-shell {
    grid-template-columns: minmax(0, 44rem) minmax(0, 18rem);
    justify-content: center;
    column-gap: 3.5rem;
  }
  .flow-head {
    grid-column: 1 / -1;
  }
}

.flow-head {
  max-width: 44rem;
}

.flow-head h1 {
  margin: 0;
}

.flow-head .lead {
  margin: 1rem 0 0;
}

.flow-card {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--panel);
  box-shadow: 0 30px 60px -44px rgba(var(--shadow), 0.6);
}

.flow-card h2 {
  margin-top: 0;
}

.flow-card section > :last-child {
  margin-bottom: 0;
}

.flow section {
  margin-top: 0;
}

.flow ul {
  padding-left: 1.35rem;
}

.flow li::marker {
  color: var(--primary);
}

.flow-aside {
  align-self: start;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--paper);
  font-size: 0.95rem;
}

.flow-aside h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.flow-aside p {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.flow-aside p:last-child {
  margin-bottom: 0;
}

.field {
  margin: 1.25rem 0 1rem;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field input[type="email"],
.field input[type="text"] {
  display: block;
  width: 100%;
  max-width: 26rem;
  min-height: 52px;
  padding: 0.65rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--control-border);
  border-radius: 12px;
}

.field input[type="email"]:focus-visible,
.field input[type="text"]:focus-visible {
  border-radius: 12px;
  outline-offset: 2px;
}

.field input[aria-invalid="true"] {
  border: 2px solid var(--error);
}

#code-input {
  max-width: 12rem;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.field-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0.15rem 0 0;
  accent-color: var(--primary);
}

.field-check label {
  margin: 0;
}

.field-error {
  color: var(--error);
  font-weight: 500;
  margin: 0.4rem 0 0;
}

.field-error:empty {
  display: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.hint {
  color: var(--muted);
}

.hint:empty {
  display: none;
}

.receipt {
  padding: 0.9rem 1rem;
  background: var(--subtle);
  border: 1px solid var(--control-border);
  border-radius: 12px;
}

.receipt code {
  font-size: 1.05rem;
  word-break: break-all;
}

.status-text {
  font-size: 1.1rem;
  font-weight: 500;
}

.notice {
  padding: 0.9rem 1rem;
  border-radius: 12px;
}

.notice-error {
  background: var(--error-background);
  border: 1px solid var(--error);
}

/* Not found */

.not-found {
  max-width: 40rem;
  padding-top: clamp(3rem, 10vw, 7rem);
  text-align: center;
}

.not-found h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
}

.not-found .lead {
  margin: 0 auto 2rem;
}