/* ============================================================================
   FluidEQ — site styles

   Every colour, radius, height and easing below is the value the application
   actually uses, lifted from src/renderer/styles/_color.scss, _theme.scss,
   App.scss and Button.scss. The site and the app are meant to read as one
   product, which only works if the numbers are the same numbers.
   ========================================================================= */

/* --- Inter, variable weight axis, latin subset, self-hosted ------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Surfaces */
  --surface-base: #0b1119;
  --surface-panel: #0e1520;
  --panel-bottom: #0a121b;
  --surface-menu: #0d1723;

  /* The exact colour at the top edge of a card. The app derives this by
     mixing 6% of the teal accent into #142131; that mix is precomputed here
     so a card on the site and a card in the app are the same colour. */
  --panel-top: #132d3a;

  /* Primary — violet-ink family. Every muted text tint derives from
     --primary-lighter, which is why the greys read slightly warm. */
  --primary-dark: #070512;
  --primary-lighter: #d8d2ff;

  /* Secondary — the accent. */
  --secondary-darker: #007f95;
  --secondary-dark: #00a9d6;
  --secondary: #00e5cf;
  --secondary-light: #9cfff4;

  /* Accents. Highlights only, never large fills. */
  --neon-cyan: #00e5ff;
  --neon-lime: #b6ff4a;

  /* Text */
  --text-primary: #eefcfb;
  --text-muted: rgba(216, 210, 255, 0.72);
  --text-faint: rgba(216, 210, 255, 0.56);

  /* Borders */
  --border-panel: rgba(216, 210, 255, 0.14);
  --border-subtle: rgba(216, 210, 255, 0.12);
  --border-field: rgba(156, 255, 244, 0.26);
  --border-field-hover: rgba(156, 255, 244, 0.5);

  /* Geometry */
  --r-xs: 8px;
  --r-s: 10px;
  --r-m: 12px;
  --r-l: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --h-sm: 32px;
  --h-md: 38px;
  --h-lg: 46px;

  --shell: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  /* Applied to both sides of every section, so the gap between two of them is
     twice this. At 92px that came to 184px of nothing between a row of cards
     and the next heading — the opposite failure to the one it was raised to
     fix, when sections had no top padding at all. */
  --section-y: clamp(46px, 5.4vw, 74px);

  --ease: 150ms ease;
  --font: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
}

/* --- Base --------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Sticky nav height plus breathing room, so an anchor never lands under it. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text-primary);
  /* The application's own body treatment, layer for layer: three cyan-forward
     radials across the top, one faint lime lift from below, over the diagonal
     base ramp. Fixed, so the page scrolls through the ambience rather than
     dragging it along. */
  /* Same layers as the app, opened up. They were faint enough that the page
     read as flat black with one teal accent, which is not what the product
     looks like — its bands run the whole spectrum. The base stays teal-dark;
     the pink and violet are the far end of that same band palette and sit far
     enough down the page never to fight the accent for the eye. */
  background:
    radial-gradient(circle at 6% -12%, rgba(0, 229, 255, 0.3), transparent 34%),
    radial-gradient(circle at 46% -18%, rgba(0, 229, 207, 0.22), transparent 36%),
    radial-gradient(circle at 94% 6%, rgba(0, 169, 214, 0.26), transparent 38%),
    radial-gradient(circle at 88% 46%, rgba(255, 60, 172, 0.1), transparent 30%),
    radial-gradient(circle at 6% 66%, rgba(139, 92, 255, 0.11), transparent 32%),
    radial-gradient(circle at 48% 114%, rgba(182, 255, 74, 0.1), transparent 34%),
    linear-gradient(145deg, #04090f 0%, #061019 48%, #04090f 100%);
  background-attachment: fixed;
  background-color: #04090f;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  isolation: isolate;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft bloom behind the whole page. Purely decorative, weighted to the
   cyan/teal end of the spectrum palette. You should only notice it if it
   goes missing. */
.bloom {
  position: fixed;
  z-index: -1;
  inset: -10% 12% 40%;
  border-radius: 50%;
  background: conic-gradient(
    from 140deg,
    rgba(0, 229, 255, 0.1),
    rgba(0, 229, 207, 0.09),
    rgba(182, 255, 74, 0.05),
    rgba(0, 169, 214, 0.08),
    rgba(255, 60, 172, 0.035),
    rgba(0, 229, 255, 0.1)
  );
  filter: blur(90px);
  opacity: 0.9;
  pointer-events: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 750;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

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

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--secondary-light);
  text-decoration-color: rgba(156, 255, 244, 0.35);
  text-underline-offset: 3px;
  transition: color var(--ease), text-decoration-color var(--ease);
}

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

/* One focus ring for the whole site, matching the app's focus-ring mixin.
   A box-shadow ring follows whatever radius the element already has, so this
   rule must not set one — doing so squared off the pill buttons and the 18px
   cards the moment they took focus. */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 229, 207, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Links in prose are the one case with no radius of their own, where the ring
   would otherwise be a hard rectangle. */
a:not([class]):focus-visible {
  border-radius: var(--r-xs);
}

/* Clipped to nothing rather than parked above the viewport. It used to sit at
   translateY(-160%), which is off-screen until a phone rubber-bands past the
   top of the document — and then it is briefly on screen, as a stray control
   nobody asked for. Clipping cannot be scrolled into view. */
.skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 1px solid var(--border-field);
  border-radius: var(--r-s);
  background: var(--surface-menu);
  color: var(--secondary-light);
  white-space: nowrap;
  text-decoration: none;
}

/* Keyboard focus only: a touch tap never produces :focus-visible, so this
   stays out of the way on the device where it was showing up. */
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Panel: the app's panel-surface mixin ------------------------------- */

.panel {
  border: 1px solid var(--border-panel);
  border-radius: var(--r-xl);
  background: linear-gradient(
    180deg,
    var(--panel-top) 0%,
    var(--panel-bottom) 62%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 20px 48px rgba(0, 0, 0, 0.2);
}

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

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  min-height: var(--h-md);
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--r-s);
  font: inherit;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.15;
  /* Short labels look better on one line, so this stays — but a label is only
     short in the language it was written in. "Buy & Download — coming soon" is
     "Kaufen & herunterladen — demnächst" in German, and nowrap on a phone
     pushed it straight past the right edge of the page. The large and
     full-width buttons are allowed to wrap once there is no room. */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--ease),
    filter var(--ease),
    box-shadow var(--ease),
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
}

.btn--primary {
  color: #03110f;
  border: 1px solid rgba(156, 255, 244, 0.38);
  background: var(--secondary);
  box-shadow:
    0 8px 22px rgba(0, 229, 207, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.btn--primary:hover {
  color: #03201d;
  background: var(--secondary-light);
  box-shadow:
    0 11px 28px rgba(0, 229, 207, 0.2),
    0 0 24px rgba(0, 229, 207, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.btn--primary:active {
  color: #03201d;
  background: var(--secondary-dark);
  transform: translateY(0);
}

/* The teal ring is invisible on a teal button, so the primary CTA takes the
   white variant the app uses for the same reason. */
.btn--primary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.btn--ghost {
  color: var(--secondary-light);
  border: 1px solid rgba(156, 255, 244, 0.3);
  border-radius: var(--r-pill);
  background: rgba(7, 5, 18, 0.42);
}

.btn--ghost:hover {
  color: #fff;
  border-color: rgba(156, 255, 244, 0.7);
  background: rgba(0, 229, 207, 0.14);
}

/* Disabled, from the app's own [aria-disabled='true'] treatment. Used while
   the signed build is not on sale yet: the primary CTA stays exactly where it
   is and keeps its size, so the page still reads as the sales page it is —
   it simply cannot be pressed.

   pointer-events:none also stops .btn--primary:hover from firing, which would
   otherwise light the button up on a control that does nothing. */
.btn:disabled,
.btn[aria-disabled='true'] {
  color: rgba(216, 210, 255, 0.6);
  border-color: rgba(216, 210, 255, 0.08);
  background: rgba(7, 5, 18, 0.85);
  box-shadow: none;
  transform: none;
  filter: none;
  cursor: default;
  pointer-events: none;
}

.btn--sm {
  min-height: var(--h-sm);
  padding: 6px 14px;
  border-radius: var(--r-xs);
  font-size: 0.875rem;
}

.btn--lg {
  min-height: var(--h-lg);
  padding: 12px 26px;
  font-size: 1.0625rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

@media (max-width: 620px) {
  .btn--lg,
  .btn--block {
    white-space: normal;
    text-align: center;
  }
}

/* --- Nav ---------------------------------------------------------------- */

/* Treat the navigation as shared site chrome during same-origin page changes.
   Supporting browsers keep this element in place while the document beneath
   it changes; older browsers simply fall back to an ordinary navigation. */
@view-transition {
  navigation: auto;
}

.nav {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 1180px;
  margin: 14px auto 0;
  border: 1px solid rgba(216, 210, 255, 0.12);
  border-radius: 18px;
  background: rgba(7, 14, 22, 0.72);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transition: border-color var(--ease), background var(--ease);
  view-transition-name: fluideq-navbar;
}

::view-transition-group(fluideq-navbar),
::view-transition-old(fluideq-navbar),
::view-transition-new(fluideq-navbar) {
  animation-duration: 0s;
  mix-blend-mode: normal;
}

/* Same-language routes use the persistent client shell. Only the outgoing
   page surface softens while it is fetched; the navbar and ambient bloom are
   never part of the transition and therefore never flash or remount. */
html.is-page-navigating main {
  opacity: 0.64;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.site-audio-handoff {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-audio-handoff video {
  width: 1px;
  height: 1px;
}

.nav.is-stuck {
  border-color: rgba(156, 255, 244, 0.2);
  background: rgba(7, 14, 22, 0.9);
}

.nav__inner {
  display: flex;
  height: 58px;
  align-items: center;
  padding-inline: 20px;
  gap: 20px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
}

.nav__brand svg {
  width: 28px;
  height: 28px;
  flex: none;
}

.nav__wordmark {
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.nav__signal-link {
  display: block;
  width: clamp(82px, 16vw, 230px);
  height: 36px;
  min-width: 72px;
  margin-left: clamp(0px, 1vw, 12px);
  flex: 0 1 230px;
  border-radius: 9px;
  text-decoration: none;
}

.nav__signal-link:focus-visible {
  outline: 2px solid rgba(156, 255, 244, 0.7);
  outline-offset: 3px;
}

.nav__signal {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 0 9px rgba(0, 229, 207, 0.3));
  pointer-events: none;
}

:is(html.is-rainbow-mode body, body.is-rainbow-mode) .nav__signal {
  filter:
    drop-shadow(0 0 8px rgba(0, 229, 255, 0.36))
    drop-shadow(0 0 11px rgba(255, 60, 172, 0.24));
}

.nav__links {
  display: flex;
  margin-left: auto;
  gap: 28px;
}

.nav__links a {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.nav__links a:hover {
  color: var(--text-primary);
}

.nav__buy {
  flex: none;
  border-radius: var(--r-pill);
}

/* --- The community gate -------------------------------------------------
   The panel that stands where the discussion will be. It has to read as
   deliberate rather than as a widget that failed to load, because until the
   button is pressed that is exactly what it looks like. */
/* --- Community: the hero's thread illustration -------------------------
   The right-hand column every other inner page fills with a screenshot or the
   radar. There is nothing to photograph here, so this draws the thing itself:
   cards on the site's own surface, with the navbar's wave behind them. */
.thread-stack {
  position: relative;
  width: min(460px, 46vw);
  aspect-ratio: 1.32;
  margin-inline: auto;
}

.thread-stack__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px rgba(0, 229, 207, 0.28));
}

.thread-card {
  position: absolute;
  display: grid;
  width: 74%;
  padding: 16px 18px;
  gap: 9px;
  grid-template-columns: auto 1fr;
  border: 1px solid rgba(216, 210, 255, 0.13);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(19, 45, 58, 0.86), rgba(7, 14, 23, 0.95));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  animation: thread-float 7s ease-in-out infinite;
}

.thread-card--a {
  top: 2%;
  left: 0;
}

.thread-card--b {
  top: 33%;
  right: 0;
  animation-delay: -2.4s;
}

.thread-card--c {
  bottom: 2%;
  left: 8%;
  width: 62%;
  animation-delay: -4.8s;
}

@keyframes thread-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

.thread-card__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #79f5e7, #007f95);
  grid-row: span 3;
}

.thread-card__dot--alt {
  background: linear-gradient(160deg, #d8d2ff, #8b5cff);
}

.thread-card__tag {
  align-self: center;
  color: var(--secondary-light);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.thread-card__tag--answer {
  color: #b6ff4a;
}

.thread-card__tag--show {
  color: #ffe66d;
}

.thread-card__line {
  height: 7px;
  border-radius: 4px;
  background: rgba(216, 210, 255, 0.16);
}

.thread-card__line--mid {
  width: 72%;
}

.thread-card__line--short {
  width: 46%;
}

@media (prefers-reduced-motion: reduce) {
  .thread-card {
    animation: none;
  }
}

/* Below the breakpoint the hero is one column, so 46vw — a width chosen for
   the right-hand half — leaves the illustration marooned at a third of the
   screen. It gets the room the column now has. */
@media (max-width: 900px) {
  .thread-stack {
    width: min(420px, 82vw);
  }
}

/* --- Community: the board index ----------------------------------------
   Rows, not cards. A forum's front page has always been a list that says what
   belongs where, and three equal tiles said nothing about which one a post
   should go in. */
.board {
  overflow: hidden;
  border: 1px solid var(--border-panel, rgba(216, 210, 255, 0.12));
  border-radius: var(--r-l, 18px);
  background: linear-gradient(155deg, rgba(19, 45, 58, 0.44), rgba(7, 14, 23, 0.78));
}

.board__row {
  display: grid;
  align-items: center;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
  gap: 4px 20px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-bottom: 1px solid rgba(216, 210, 255, 0.08);
  color: inherit;
  text-decoration: none;
  transition: background var(--ease);
}

.board__row:last-child {
  border-bottom: 0;
}

.board__row:hover,
.board__row:focus-visible {
  background: rgba(156, 255, 244, 0.045);
}

.board__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  border: 1px solid rgba(156, 255, 244, 0.18);
  border-radius: 13px;
  background: rgba(0, 229, 207, 0.07);
  color: var(--secondary-light);
}

.board__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board__body {
  display: grid;
  gap: 4px;
}

.board__name {
  font-size: 1.0625rem;
  font-weight: 700;
}

.board__desc {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* What actually belongs in this board, said in one line. It is the part that
   keeps bug reports out of the ideas pile. */
.board__rule {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.board__go {
  color: var(--secondary-light);
  font-size: 1.25rem;
  transition: transform var(--ease);
}

.board__row:hover .board__go {
  transform: translateX(4px);
}

/* Buttons need the reset a link does not. */
button.board__row {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* How many topics sit behind this board, so the index answers that without
   being pressed. */
.board__count {
  min-width: 2.4ch;
  color: var(--text-faint);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: right;
}

/* The board currently filtering the list below. */
.board__row.is-active {
  background: rgba(0, 229, 207, 0.07);
}

.board__row.is-active .board__icon {
  border-color: rgba(156, 255, 244, 0.42);
  color: var(--text-primary);
}

.board__row.is-active .board__count {
  color: var(--secondary-light);
}

.board__row--muted .board__icon {
  border-color: rgba(216, 210, 255, 0.14);
  background: rgba(216, 210, 255, 0.05);
  color: var(--text-faint);
}

@media (max-width: 620px) {
  .board__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .board__go {
    display: none;
  }
}

/* --- Community: openers ------------------------------------------------- */
.starters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.starters__label {
  color: var(--text-faint);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.starters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.starters__list a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(216, 210, 255, 0.14);
  border-radius: var(--r-pill, 999px);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease);
}

.starters__list a:hover {
  border-color: rgba(156, 255, 244, 0.3);
  color: var(--text-primary);
}

/* --- Community: writing a topic ----------------------------------------- */
/* `hidden` is a UA rule of the lowest possible weight, so any element given an
   explicit display — every .btn and every grid here — ignores it and stays on
   screen. This is why the open button sat above its own open form. */
.composer [hidden] {
  display: none !important;
}

.composer {
  margin-bottom: 18px;
}

.composer__form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(156, 255, 244, 0.16);
  border-radius: var(--r-l, 18px);
  background: linear-gradient(155deg, rgba(19, 45, 58, 0.5), rgba(7, 14, 23, 0.82));
}

.composer__field {
  display: grid;
  gap: 7px;
}

.composer__field > span {
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.composer__field input,
.composer__field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-field, rgba(216, 210, 255, 0.16));
  border-radius: var(--r-s, 10px);
  background: rgba(7, 14, 23, 0.66);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
}

.composer__field textarea {
  min-height: 150px;
  line-height: 1.6;
  resize: vertical;
}

.composer__field input:focus,
.composer__field textarea:focus {
  border-color: rgba(156, 255, 244, 0.5);
  outline: none;
}

.composer__field ::placeholder {
  color: var(--text-faint);
  opacity: 0.7;
}

/* The board picker. The button matches the text fields beside it; the list is
   the site's own menu surface rather than the operating system's popup. */
.combo {
  position: relative;
}

.combo__button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border-field, rgba(216, 210, 255, 0.16));
  border-radius: var(--r-s, 10px);
  background: rgba(7, 14, 23, 0.66);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.combo__button:focus-visible,
.combo__button[aria-expanded='true'] {
  border-color: rgba(156, 255, 244, 0.5);
  outline: none;
}

.combo__button svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-faint);
  transition: transform var(--ease);
}

.combo__button[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.combo__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(156, 255, 244, 0.2);
  border-radius: var(--r-s, 10px);
  background: var(--surface-menu);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.combo__option {
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 0.9375rem;
  cursor: pointer;
}

.combo__option:hover,
.combo__option:focus-visible {
  background: rgba(0, 229, 207, 0.08);
  color: var(--text-primary);
  outline: none;
}

.combo__option[aria-selected='true'] {
  color: var(--secondary);
  font-weight: 700;
}

/* Said before the button is pressed, not discovered after it. */
.composer__note {
  padding-left: 14px;
  border-left: 2px solid rgba(156, 255, 244, 0.28);
  color: var(--text-faint);
  font-size: 0.875rem;
}

.composer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Community: the forum itself ---------------------------------------- */
.forum {
  border: 1px solid rgba(216, 210, 255, 0.12);
  border-radius: var(--r-l, 18px);
  background: linear-gradient(155deg, rgba(19, 45, 58, 0.4), rgba(7, 14, 23, 0.76));
}

.forum__state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 34px clamp(18px, 2.6vw, 28px);
  color: var(--text-faint);
  font-size: 0.9375rem;
}

.forum__state--error {
  color: var(--text-muted);
}

.forum__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.forum__item + .forum__item {
  border-top: 1px solid rgba(216, 210, 255, 0.08);
}

.forum__link {
  display: grid;
  align-items: start;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 28px);
  gap: 4px 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  color: inherit;
  text-decoration: none;
  transition: background var(--ease);
}

.forum__link:hover,
.forum__link:focus-visible {
  background: rgba(156, 255, 244, 0.045);
}

.forum__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  grid-row: span 2;
}

.forum__avatar--blank {
  display: block;
  background: rgba(216, 210, 255, 0.12);
}

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

.forum__title {
  font-size: 1.0625rem;
  font-weight: 700;
}

.forum__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.9375rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.forum__by {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.forum__side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
}

.forum__chip {
  padding: 4px 10px;
  border: 1px solid rgba(216, 210, 255, 0.14);
  border-radius: var(--r-pill, 999px);
  color: var(--text-faint);
  font-size: 0.75rem;
  white-space: nowrap;
}

.forum__chip--answered {
  border-color: rgba(182, 255, 74, 0.32);
  color: #b6ff4a;
}

.forum__count {
  width: 100%;
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.forum__empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: clamp(26px, 4vw, 40px);
}

.forum__empty-note {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* --- Community: one thread ---------------------------------------------- */
.forum__thread {
  padding: clamp(18px, 2.6vw, 28px);
}

.forum__back-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.forum__back,
.forum__ext {
  color: var(--text-faint);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.forum__back:hover,
.forum__ext:hover {
  color: var(--secondary-light);
}

.forum__thread-head {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(216, 210, 255, 0.1);
}

.forum__thread-head h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}

.forum__count-line {
  margin: 22px 0 10px;
  color: var(--text-faint);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.forum__post {
  padding: 18px 0;
  border-bottom: 1px solid rgba(216, 210, 255, 0.07);
}

.forum__post--opening {
  padding-top: 20px;
}

.forum__post--answer {
  padding-left: 16px;
  border-left: 2px solid rgba(182, 255, 74, 0.4);
}

.forum__post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.forum__prose {
  color: var(--text-muted);
  font-size: 0.9688rem;
  line-height: 1.65;
}

.forum__prose p + p {
  margin-top: 0.8em;
}

.forum__code {
  overflow-x: auto;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid rgba(216, 210, 255, 0.1);
  border-radius: var(--r-s, 10px);
  background: rgba(7, 14, 23, 0.7);
  color: var(--text-primary);
  font-size: 0.875rem;
  white-space: pre;
}

.forum__replies {
  margin-top: 14px;
  padding-left: 18px;
  border-left: 1px solid rgba(216, 210, 255, 0.1);
}

.forum__replies .forum__post:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 620px) {
  .forum__link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .forum__side {
    grid-column: 2;
    justify-content: flex-start;
    text-align: left;
  }
}

.giscus-gate {
  padding: clamp(22px, 4vw, 34px);
}

.giscus-gate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 10px;
}

.giscus-gate__head h2 {
  margin: 0;
}

.giscus-gate__github {
  color: var(--text-faint);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.giscus-gate__github:hover {
  color: var(--secondary-light);
}

.giscus-gate > p {
  max-width: 62ch;
  color: var(--text-muted);
}

/* Holds the space the discussion is about to occupy, so the page does not
   finish loading with a hole in it and then jump when giscus arrives. */
.giscus-gate__mount {
  min-height: 180px;
  margin-top: 22px;
}

.giscus-gate__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 30px 0;
  color: var(--text-faint);
  font-size: 0.9375rem;
}

.giscus-gate__loading.is-error {
  color: var(--text-muted);
}

.giscus-gate__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(156, 255, 244, 0.22);
  border-top-color: var(--secondary-light);
  border-radius: 50%;
  animation: giscus-spin 720ms linear infinite;
}

.giscus-gate__loading.is-error .giscus-gate__spinner {
  display: none;
}

@keyframes giscus-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .giscus-gate__spinner {
    animation: none;
  }
}

/* Said quietly, under the thing it describes: by the time it is read the
   discussion is already there, so this is a statement of fact rather than a
   warning about what a press will do. */
.giscus-gate__notice {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 2px solid rgba(156, 255, 244, 0.28);
  color: var(--text-faint);
  font-size: 0.875rem;
}

/* --- The mobile sheet ---------------------------------------------------
   Only below 720px, and only where the links do not fit on the bar. The
   button is hidden above that width because the links are already there —
   two ways to reach the same five pages is one way too many. */
.nav__menu {
  display: none;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(216, 210, 255, 0.14);
  border-radius: 10px;
  background: rgba(156, 255, 244, 0.05);
  color: var(--text-primary);
  cursor: pointer;
}

.nav__menu:focus-visible {
  outline: 2px solid rgba(156, 255, 244, 0.7);
  outline-offset: 2px;
}

.nav__menu-glyph {
  display: grid;
  place-content: center;
  gap: 4px;
  height: 100%;
}

.nav__menu-glyph span {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ease), opacity var(--ease);
}

/* The bars become a cross while the sheet is open, so the control says which
   way it goes rather than only what it opens. */
.nav__menu[aria-expanded='true'] .nav__menu-glyph span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav__menu[aria-expanded='true'] .nav__menu-glyph span:nth-child(2) {
  opacity: 0;
}

.nav__menu[aria-expanded='true'] .nav__menu-glyph span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* The page holds still under an open sheet. Scroll position is kept rather
   than reset, which `overflow: hidden` alone does not guarantee on iOS. */
body.has-nav-open {
  overflow: hidden;
  touch-action: none;
}

.nav__scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  background: rgba(4, 9, 15, 0.58);
  opacity: 0;
  transition: opacity var(--ease);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 720px) {
  .nav {
    top: 8px;
    width: calc(100% - 20px);
    margin-top: 8px;
    border-radius: 15px;
  }

  .nav__inner {
    height: 54px;
    /* Was 20px. The bar now carries a fifth control and 375px is the width
       that has to hold all of it — brand, wave, buy and menu — without the
       wave being squeezed out of existence. */
    gap: 10px;
    padding-inline: 14px;
  }

  .nav__menu {
    display: block;
    margin-left: 0;
  }

  .nav__buy {
    margin-left: auto;
  }

  /* With scripting off there is no sheet to open, so the bar keeps its links
     and lets them wrap. A menu behind a button that cannot move is worse than
     a second row. */
  .js .nav__links {
    display: none;
  }

  .js .nav__sheet {
    display: flex;
  }

  .js .nav__scrim {
    display: block;
  }

  .js .nav__scrim.is-open {
    opacity: 1;
  }
}

/* The sheet itself. Fixed to the viewport, which is only possible because it
   is rendered outside the filtered navbar — see the note in nav.html. */
.nav__sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  flex-direction: column;
  width: min(78vw, 288px);
  padding: calc(env(safe-area-inset-top, 0px) + 76px) 24px
    calc(env(safe-area-inset-bottom, 0px) + 28px);
  gap: 4px;
  border-left: 1px solid rgba(156, 255, 244, 0.16);
  background: rgba(9, 17, 26, 0.97);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
  overscroll-behavior: contain;
}

.nav__sheet a {
  padding: 13px 0;
  border-bottom: 1px solid rgba(216, 210, 255, 0.07);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.nav__sheet a:last-child {
  border-bottom: 0;
}

.nav__sheet a:hover,
.nav__sheet a:focus-visible {
  color: var(--text-primary);
}

/* Nothing in a shut sheet is reachable by keyboard or read by a screen
   reader. `visibility` rather than `display` so it still slides rather than
   appearing whole — and visibility is itself transitioned, so the panel is
   not hit-testable mid-slide either. */
.nav__sheet:not(.is-open) {
  visibility: hidden;
}

.nav__sheet.is-open {
  visibility: visible;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav__sheet {
    transition: none;
  }
}

/* Above the breakpoint the links are on the bar, so the sheet must not be
   reachable by any route — including a stale `is-open` left by a rotation. */
@media (min-width: 721px) {
  .nav__sheet,
  .nav__scrim {
    display: none !important;
  }
}

/* At the narrow end the wave is the first thing with slack, so it is given a
   floor instead of being allowed to collapse: it is the one piece of the bar
   that is FluidEQ rather than any product's header. */
@media (max-width: 470px) {
  .nav__signal-link {
    width: clamp(64px, 15vw, 120px);
    min-width: 56px;
  }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  /* Room for the response curve to finish below the last line of copy rather
     than through it. */
  padding-bottom: clamp(56px, 7vw, 88px);
  /* The screenshot deliberately runs past the right edge; without this the
     whole document gets a horizontal scrollbar. */
  overflow: hidden;
}

/* Centred, with the wordmark in the middle where it belongs, and the product
   underneath it at full width. The two-column version put the title off to
   one side and lost the thing the page opens with. */
.hero__grid {
  display: flex;
  max-width: 1360px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__copy {
  display: flex;
  /* A readable measure for the copy, independent of how wide the screenshot
     below it is allowed to get. */
  max-width: 760px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.hero__shot {
  width: min(1480px, calc(100vw - 18px));
  max-width: none;
  margin-top: clamp(46px, 6vw, 76px);
  flex: none;
}

.hero__shot .carousel {
  perspective: 1650px;
}

/* Horizontal perspective without planar tilt: the right side recedes across
   the page, but the card is never diagonally rotated. */
.hero__stage {
  position: relative;
  transform: rotateY(-6deg) scale(1.025);
  transform-origin: center;
  transform-style: preserve-3d;
}

.hero__slab {
  display: none;
}

.hero__slab--near {
  background: none;
  transform: translate3d(0, 17px, -24px);
}

.hero__slab--far {
  border-color: rgba(139, 92, 255, 0.22);
  background: none;
  transform: translate3d(0, 32px, -52px);
}

.hero__shot .carousel__frame {
  border-color: rgba(156, 255, 244, 0.2);
  background: linear-gradient(145deg, rgba(13, 28, 39, 0.98), rgba(5, 10, 18, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px -1px 0 rgba(139, 92, 255, 0.1),
    0 16px 36px rgba(0, 0, 0, 0.28);
  transform: translateZ(1px);
}

.hero__shot .carousel__controls {
  margin-top: clamp(38px, 4vw, 58px);
}

@media (max-width: 820px) {
  .hero__shot {
    width: min(108%, calc(100vw - 12px));
  }

  .hero__shot .carousel {
    perspective: 1200px;
  }

  .hero__stage {
    transform: rotateY(-3.5deg) scale(0.99);
  }

  .hero__slab--near {
    transform: translate3d(0, 9px, -14px);
  }

  .hero__slab--far {
    transform: translate3d(0, 17px, -30px);
  }
}

/* Sits behind the hero copy and bleeds past the shell, so the curve runs off
   both edges instead of ending in mid-air. Masked to nothing at the top: the
   wordmark has to stay the brightest thing in the section. */
.hero__curve {
  position: absolute;
  z-index: -1;
  right: -8vw;
  bottom: -2px;
  left: -8vw;
  width: auto;
  height: clamp(130px, 17vw, 210px);
  /* Faint enough that the stroke passing behind a line of text never competes
     with it. At full strength it read as a rule struck through the copy. */
  opacity: 0.4;
  /* Radial rather than a vertical fade. A vertical one left the fill with a
     hard edge where it met the section boundary, which read as a stray
     rectangle sitting under the hero; this dissolves all four sides. */
  -webkit-mask-image: radial-gradient(
    118% 104% at 50% 100%,
    #000 38%,
    transparent 80%
  );
  mask-image: radial-gradient(
    118% 104% at 50% 100%,
    #000 38%,
    transparent 80%
  );
  pointer-events: none;
}

/* A slow vertical drift, as if the curve were settling. Two different periods
   so the line and its fill never move as one flat sheet. */
.hero__curve-line {
  animation: curve-drift 17s ease-in-out infinite;
}

.hero__curve-fill {
  animation: curve-drift 23s ease-in-out infinite reverse;
}

@keyframes curve-drift {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }

  50% {
    transform: translateY(-8px) scaleY(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__curve-line,
  .hero__curve-fill {
    animation: none;
  }
}

/* --- Homepage art direction ---------------------------------------------

   The inner pages deliberately retain the compact application language above.
   The landing page gets a more editorial composition: the product enters the
   first viewport, every major section has its own silhouette, and the spectrum
   is used as light rather than as decoration on every surface. */

.home {
  --shell: 1180px;
  background:
    radial-gradient(circle at 72% 6%, rgba(0, 229, 207, 0.13), transparent 26rem),
    radial-gradient(circle at 18% 27%, rgba(0, 169, 214, 0.09), transparent 30rem),
    radial-gradient(circle at 86% 62%, rgba(139, 92, 255, 0.09), transparent 34rem),
    linear-gradient(150deg, #04090f 0%, #061019 46%, #04090f 100%);
  background-attachment: fixed;
}

.home .bloom {
  inset: -20% 2% 44%;
  background: conic-gradient(
    from 210deg at 68% 42%,
    rgba(0, 229, 255, 0.08),
    rgba(0, 229, 207, 0.16),
    rgba(182, 255, 74, 0.035),
    rgba(255, 60, 172, 0.035),
    rgba(139, 92, 255, 0.07),
    rgba(0, 229, 255, 0.08)
  );
  filter: blur(110px);
}

/* Floating glass navigation gives the first screen a composed edge instead
   of dividing it with a full-width utility bar. */
.home .nav {
  top: 14px;
  width: calc(100% - 32px);
  max-width: 1180px;
  margin: 14px auto 0;
  border: 1px solid rgba(216, 210, 255, 0.12);
  border-radius: 18px;
  background: rgba(7, 14, 22, 0.72);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.home .nav.is-stuck {
  border-color: rgba(156, 255, 244, 0.2);
  background: rgba(7, 14, 22, 0.9);
}

.home .nav__inner {
  height: 58px;
  padding-inline: 20px;
}

.home .nav__links a {
  font-size: 0.875rem;
  font-weight: 600;
}

.home .nav__buy {
  border-radius: var(--r-pill);
}

/* Hero ------------------------------------------------------------------ */

.home .hero {
  min-height: min(850px, calc(100svh - 38px));
  padding-top: clamp(64px, 8vh, 108px);
  padding-bottom: clamp(112px, 12vw, 166px);
  isolation: isolate;
}

.home .hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -100px 0 0;
  background:
    linear-gradient(rgba(156, 255, 244, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 255, 244, 0.026) 1px, transparent 1px),
    radial-gradient(ellipse at 70% 38%, rgba(0, 229, 207, 0.16), transparent 38%),
    radial-gradient(ellipse at 74% 62%, rgba(0, 169, 214, 0.1), transparent 42%);
  background-size: 54px 54px, 54px 54px, auto, auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
  opacity: 0.9;
}

.home .hero__grid {
  display: grid;
  max-width: 1440px;
  align-items: center;
  gap: clamp(48px, 4.6vw, 76px);
  /* Golden-ratio split: one measure for the promise, 1.66 for the product. */
  grid-template-columns: minmax(360px, 1fr) minmax(590px, 1.66fr);
  text-align: left;
}

.home .hero__copy {
  position: relative;
  z-index: 2;
  max-width: 570px;
  align-items: flex-start;
  isolation: isolate;
}

.home .hero__eyebrow {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(156, 255, 244, 0.7);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.035em;
}

.home .hero__product {
  position: relative;
  margin-bottom: 9px;
  padding-bottom: 12px;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  font-weight: 850;
  letter-spacing: 0.24em;
  text-shadow:
    0 0 18px rgba(0, 229, 207, 0.46),
    0 8px 26px rgba(0, 0, 0, 0.42);
  text-transform: uppercase;
}

.home .hero__product::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 76px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00e5ff, #b6ff4a, #ff3cac);
  box-shadow: 0 0 16px rgba(0, 229, 207, 0.48);
}

.home .hero__title {
  max-width: 10.5ch;
  background: none;
  color: inherit;
  font-size: clamp(3.65rem, 5.1vw, 5rem);
  font-weight: 810;
  letter-spacing: -0.065em;
  line-height: 0.94;
  /* Reserve real descender space for the final y in "Automatically". The
     tight display line-height otherwise clips the foot of the glyph. */
  margin-bottom: -0.08em;
  padding-bottom: 0.08em;
  animation: none;
  filter: drop-shadow(0 18px 34px rgba(2, 8, 13, 0.72));
  text-wrap: wrap;
}

.home .hero__title > span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-right: 0.12em;
  background: linear-gradient(128deg, #ffffff 0%, #eefcfb 38%, #9cfff4 75%, #d8d2ff 118%);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 180% 100%;
  color: transparent;
  animation: home-headline-sheen 9s ease-in-out infinite;
}

/* Spanish needs one extra word in its middle thought. Give it a wider, calmer
   measure so “Tu sonido. En cada” stays together without overpowering the app. */
html[lang='es'] body.home .hero__title {
  max-width: 13ch;
  font-size: clamp(3.25rem, 4.55vw, 4.45rem);
}

@keyframes home-headline-sheen {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.home .hero__sub {
  max-width: 48ch;
  margin-top: 24px;
  color: rgba(226, 233, 246, 0.7);
  font-size: clamp(1.0625rem, 1.45vw, 1.2rem);
  line-height: 1.62;
}

.home .hero__actions {
  align-items: flex-start;
  margin-top: 30px;
  gap: 11px;
}

.home .hero__actions .btn {
  border-radius: 13px;
}

.home .hero__cta-row {
  display: flex;
  width: min(100%, 470px);
  align-items: stretch;
  gap: 10px;
}

.home .hero__cta-row .btn--primary {
  min-width: 0;
  flex: 1 1 auto;
}

.home .hero__cta-row .hero__sound {
  min-width: 116px;
  flex: 0 0 auto;
  gap: 7px;
  color: rgba(222, 255, 251, 0.96);
  border-color: rgba(107, 238, 222, 0.42);
  background: rgba(4, 23, 28, 0.78);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.home .hero__cta-row .hero__sound:hover,
.home .hero__cta-row .hero__sound[aria-pressed='true'] {
  color: var(--primary-dark);
  border-color: rgba(156, 255, 244, 0.82);
  background: linear-gradient(110deg, var(--secondary), var(--secondary-light));
  box-shadow:
    0 14px 34px rgba(0, 229, 207, 0.22),
    0 0 24px rgba(0, 229, 207, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.home .hero__actions .btn:disabled,
.home .pricing__card .btn:disabled {
  color: rgba(3, 17, 15, 0.78);
  border-color: rgba(156, 255, 244, 0.34);
  background: linear-gradient(110deg, rgba(0, 229, 207, 0.82), rgba(156, 255, 244, 0.68));
  box-shadow:
    0 16px 42px rgba(0, 229, 207, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.home .hero__cta-row .btn--primary:disabled {
  color: rgba(238, 252, 251, 0.6);
  border-color: rgba(216, 210, 255, 0.14);
  background: linear-gradient(115deg, rgba(22, 31, 42, 0.94), rgba(12, 20, 29, 0.96));
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home .hero__soon {
  color: var(--secondary-light);
  font-size: 0.875rem;
}

.home .hero__buys {
  display: none;
}

.home .hero__free {
  color: rgba(216, 210, 255, 0.48);
  font-size: 0.875rem;
}

.home .hero__meta {
  justify-content: flex-start;
  margin-top: 26px;
  font-size: 0.8125rem;
}

.home .hero__shot {
  position: relative;
  z-index: 1;
  width: min(1240px, 82vw);
  margin-left: -140px;
  margin-top: 0;
  margin-right: min(-19vw, -170px);
  perspective: 1500px;
}

.home .hero__stage {
  transform: rotateY(-7deg) scale(1.055);
  transform-origin: center;
}

/* A restrained light falloff on the receding edge makes the horizontal
   perspective readable without fogging, blurring, or dimming the product as
   a whole. It is intentionally gone by the first third of the screen. */
.home .hero__stage::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 8px;
  border-radius: 15px;
  background: linear-gradient(
    90deg,
    rgba(1, 6, 11, 0.42) 0%,
    rgba(1, 6, 11, 0.24) 10%,
    rgba(1, 6, 11, 0.09) 22%,
    transparent 37%
  );
  pointer-events: none;
  transform: translateZ(6px);
}

/* Offset backing planes add real depth behind the untouched image. */
.home .hero__slab {
  position: absolute;
  z-index: -1;
  display: block;
  inset: 3px;
  border: 1px solid rgba(156, 255, 244, 0.16);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(19, 45, 58, 0.72), rgba(5, 11, 18, 0.9));
  pointer-events: none;
}

.home .hero__slab--near {
  border-color: rgba(0, 229, 207, 0.22);
  transform: translate3d(16px, 15px, -30px) scale(0.993);
  box-shadow: 20px 26px 54px rgba(0, 0, 0, 0.34);
}

.home .hero__slab--far {
  border-color: rgba(139, 92, 255, 0.24);
  transform: translate3d(31px, 28px, -62px) scale(0.985);
  box-shadow: 30px 42px 90px rgba(0, 0, 0, 0.42);
}

/* This keyline marks the crossing between the foreground copy and product
   plane. It changes no media pixel; it only sharpens the frame's near edge. */
.home .hero__stage::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 24px;
  bottom: 24px;
  left: 7px;
  width: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, transparent, #00e5ff 18%, #b6ff4a 48%, #ff3cac 78%, transparent);
  box-shadow:
    0 0 10px rgba(0, 229, 207, 0.62),
    0 0 24px rgba(139, 92, 255, 0.24);
  opacity: 0.86;
  pointer-events: none;
  transform: translateZ(10px);
}

.home .hero__shot::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12% -5% 4% 4%;
  border-radius: 36px;
  background: radial-gradient(circle at 50% 60%, rgba(0, 229, 207, 0.28), transparent 62%);
  filter: blur(42px);
  opacity: 0.85;
}

.home .hero__shot .carousel__frame {
  padding: 7px;
  border-color: rgba(156, 255, 244, 0.19);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(26, 51, 66, 0.96), rgba(5, 11, 18, 0.98));
  box-shadow:
    -18px 26px 48px rgba(0, 0, 0, 0.32),
    22px 58px 124px rgba(0, 0, 0, 0.68),
    0 0 100px rgba(0, 229, 207, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(1px);
}

.home .hero__shot .carousel__cap {
  z-index: 3;
  /* The card intentionally runs beyond the viewport; pull its label back by
     the same visual overhang so the floating copy remains fully readable. */
  right: clamp(190px, 18vw, 270px);
  bottom: clamp(18px, 3vw, 34px);
  left: auto;
  width: min(420px, calc(100% - 36px));
  padding: 16px 18px 18px;
  border: 1px solid rgba(156, 255, 244, 0.2);
  border-radius: 16px;
  background: rgba(5, 11, 18, 0.74);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: hero-caption-float 5s ease-in-out infinite;
}

@keyframes hero-caption-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

/* Rainbow mode becomes a page-level reward after the game is won. The border
   is drawn in a masked overlay so every card keeps its own background and
   radius; colour lives only on the edge, exactly as it does in the app. */
:is(html.is-rainbow-mode .home, .home.is-rainbow-mode) :is(
  .carousel__frame,
  .signal-deck,
  .rainbow__panel,
  .whats-new,
  .pricing__card
) {
  position: relative;
  isolation: isolate;
}

:is(html.is-rainbow-mode .home, .home.is-rainbow-mode) :is(
  .carousel__frame,
  .signal-deck,
  .rainbow__panel,
  .whats-new,
  .pricing__card
)::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--site-rainbow-turn),
    #00e5ff,
    #b6ff4a,
    #ffe66d,
    #ff3cac,
    #8b5cff,
    #00e5ff
  );
  filter: drop-shadow(0 0 8px rgba(139, 92, 255, 0.26));
  opacity: 0.88;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: site-rainbow-border 11s linear infinite;
}

@property --site-rainbow-turn {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes site-rainbow-border {
  to { --site-rainbow-turn: 360deg; }
}

:is(html.is-rainbow-mode .home, .home.is-rainbow-mode) .signal-deck {
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.5),
    0 0 52px rgba(255, 60, 172, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.home .hero__shot img,
.home .story__visual img {
  filter: saturate(1.08) contrast(1.04) brightness(1.045);
}

.home .hero__shot .carousel__controls {
  justify-content: flex-start;
  margin: 22px 0 0 18px;
}

.home .hero__shot .carousel__arrow {
  width: 38px;
  height: 38px;
  background: rgba(5, 10, 18, 0.82);
}

.home .hero__curve {
  right: -14vw;
  bottom: 42px;
  left: -14vw;
  height: 220px;
  opacity: 0.48;
}

/* Proof strip ----------------------------------------------------------- */

.home .hero + .band--tight {
  z-index: 5;
  width: calc(100% - 40px);
  max-width: 1180px;
  margin: -56px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(216, 210, 255, 0.13);
  border-radius: 22px;
  background: rgba(8, 16, 25, 0.86);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

.home .hero + .band--tight .shell {
  max-width: none;
  padding: 0;
}

.home .stats {
  gap: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home .stats li {
  min-height: 66px;
  justify-content: center;
  padding-inline: 12px;
}

.home .stats li + li {
  border-left: 1px solid rgba(216, 210, 255, 0.1);
}

.home .stats b {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.home .stats span {
  font-size: 0.75rem;
}

/* Product story --------------------------------------------------------- */

.home #features {
  padding-top: clamp(104px, 10vw, 148px);
  padding-bottom: clamp(104px, 10vw, 148px);
}

.home #features .section__head {
  align-items: end;
  margin-bottom: clamp(46px, 6vw, 76px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}

.home #features .section__head h2 {
  max-width: 10ch;
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.home #features .section__head p {
  max-width: 49ch;
  justify-self: end;
  color: rgba(226, 233, 246, 0.68);
  font-size: 1.05rem;
  line-height: 1.72;
}

.home .features__layout {
  display: grid;
  align-items: start;
  gap: clamp(28px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.36fr) minmax(330px, 0.64fr);
}

.home .feature-showcase {
  position: sticky;
  top: 100px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(156, 255, 244, 0.16);
  border-radius: 26px;
  background: #0b1119;
  box-shadow:
    0 38px 90px rgba(0, 0, 0, 0.46),
    0 0 80px rgba(0, 229, 207, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.home .feature-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(3, 8, 14, 0.94) 100%),
    linear-gradient(120deg, transparent 64%, rgba(0, 229, 207, 0.08));
  pointer-events: none;
}

.home .feature-showcase picture,
.home .feature-showcase img {
  width: 100%;
}

.home .feature-showcase img {
  min-height: 460px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.home .feature-showcase:hover img {
  transform: scale(1.04);
}

.home .feature-showcase figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: grid;
  align-items: end;
  gap: 2px 16px;
  grid-template-columns: 1fr auto;
}

.home .feature-showcase figcaption span {
  color: var(--secondary-light);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home .feature-showcase figcaption strong {
  grid-row: span 2;
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  letter-spacing: -0.06em;
  line-height: 0.86;
}

.home .feature-showcase figcaption small {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.home .workspaces {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.home .workspaces li {
  align-items: center;
  padding: 15px 16px;
  gap: 14px;
  border: 1px solid rgba(216, 210, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(15, 29, 42, 0.76), rgba(7, 13, 22, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.home .workspaces li:hover {
  border-color: color-mix(in srgb, var(--ws) 30%, transparent);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--ws) 9%, rgba(15, 29, 42, 0.92)),
    rgba(7, 13, 22, 0.66)
  );
  transform: translateX(-5px);
}

.home .workspaces .ws__icon {
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 12px;
}

.home .workspaces strong {
  display: inline;
  margin: 0 8px 0 0;
  font-size: 1.05rem;
}

.home .workspaces li > div {
  color: rgba(216, 210, 255, 0.58);
  font-size: 0.875rem;
  line-height: 1.45;
}

.home #features .section__foot {
  max-width: 66ch;
  margin-top: 34px;
  color: rgba(216, 210, 255, 0.54);
}

.home #features .page-next {
  margin-top: 24px;
}

/* Euphoria -------------------------------------------------------------- */

.home .band--euphoria {
  overflow: hidden;
  padding-block: clamp(88px, 8vw, 124px);
  border-block-color: rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(125deg, rgba(5, 16, 24, 0.98), rgba(8, 8, 18, 0.97)),
    #04090f;
}

.home .band--euphoria::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 720px;
  height: 720px;
  top: -280px;
  right: -180px;
  border-radius: 50%;
  background: conic-gradient(
    from 130deg,
    rgba(0, 229, 255, 0.2),
    rgba(182, 255, 74, 0.12),
    rgba(255, 230, 109, 0.12),
    rgba(255, 60, 172, 0.13),
    rgba(139, 92, 255, 0.15),
    rgba(0, 229, 255, 0.2)
  );
  filter: blur(90px);
  opacity: 0.38;
}

.home .band--euphoria > .shell {
  display: grid;
  align-items: start;
  gap: clamp(52px, 6vw, 76px);
  grid-template-columns: minmax(0, 1fr);
}

.home .euphoria__copy {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 20px 28px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  text-align: left;
}

.home .euphoria__chapter {
  display: inline-grid;
  width: 66px;
  height: 36px;
  margin: 0;
  place-items: center;
  border: 1px solid rgba(182, 255, 74, 0.36);
  border-radius: 999px;
  background: rgba(182, 255, 74, 0.1);
  color: var(--neon-lime);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 850;
  grid-column: 1;
  grid-row: 1;
  letter-spacing: -0.02em;
}

.home .euphoria__eyebrow {
  align-self: center;
  margin: 0;
  grid-column: 2 / -1;
  grid-row: 1;
}

.home .euphoria__copy h2 {
  max-width: 10.8ch;
  margin: 4px 0 0;
  font-size: clamp(4rem, 7.3vw, 6.7rem);
  grid-column: 1 / span 8;
  grid-row: 2;
  letter-spacing: -0.068em;
  line-height: 0.9;
  text-align: left;
  text-wrap: balance;
}

.home .euphoria__body {
  align-self: end;
  max-width: 37ch;
  margin: 0 0 8px;
  padding: 6px 0 6px 26px;
  border-left: 1px solid rgba(156, 255, 244, 0.22);
  color: rgba(226, 233, 246, 0.7);
  font-size: 1.05rem;
  grid-column: 9 / -1;
  grid-row: 2;
  line-height: 1.72;
}

.home .rainbow {
  margin: 0;
  grid-column: 1 / -1;
}

.home .rainbow__panel {
  position: relative;
  display: grid;
  min-height: 390px;
  align-items: stretch;
  padding: clamp(26px, 3.6vw, 44px);
  gap: clamp(26px, 4vw, 54px);
  border-color: rgba(156, 255, 244, 0.17);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 45%, rgba(0, 229, 207, 0.14), transparent 25%),
    radial-gradient(circle at 84% 100%, rgba(255, 60, 172, 0.1), transparent 38%),
    linear-gradient(155deg, rgba(9, 20, 31, 0.97), rgba(4, 9, 17, 0.98));
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.58),
    0 0 110px rgba(139, 92, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  isolation: isolate;
}

.home .rainbow__panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(rgba(156, 255, 244, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 255, 244, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  pointer-events: none;
}

.home .rainbow__panel {
  --pet-joy: 0;
  transition:
    border-color 420ms ease,
    background 520ms ease,
    box-shadow 520ms ease;
}

.home .rainbow__panel.is-perfect {
  animation: rainbow-hit 320ms ease-out;
}

.home .rainbow__panel.is-mode-active {
  border-color: rgba(182, 255, 74, 0.46);
  background:
    radial-gradient(circle at 18% 45%, rgba(0, 229, 255, 0.18), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(255, 60, 172, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(9, 24, 34, 0.99), rgba(8, 8, 21, 0.99));
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.58),
    0 0 130px rgba(255, 60, 172, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@keyframes rainbow-hit {
  50% { transform: scale(1.006); }
}

.home .rainbow__trace {
  height: clamp(126px, 12vw, 160px);
  border-radius: 20px;
  border-color: rgba(0, 229, 207, 0.38);
  box-shadow: 0 0 22px rgba(0, 229, 207, 0.14);
  animation: none;
  transition: border-color 420ms ease, box-shadow 420ms ease;
}

.home .rainbow__trace-cyan,
.home .rainbow__trace-spectrum {
  transition: opacity 520ms ease;
}

.home .rainbow__trace-cyan {
  opacity: 1;
}

.home .rainbow__trace-spectrum {
  opacity: 0;
}

.home .rainbow__panel.is-mode-active .rainbow__trace {
  border-color: hsl(var(--euphoria-hue) 90% 62% / 58%);
  box-shadow: 0 0 28px hsl(var(--euphoria-hue) 95% 60% / 32%);
  animation: euphoria-sweep 3.6s linear infinite;
}

.home .rainbow__panel.is-mode-active .rainbow__trace-cyan {
  opacity: 0;
}

.home .rainbow__panel.is-mode-active .rainbow__trace-spectrum {
  opacity: 1;
}

.home .rainbow__target.is-perfect {
  animation: rainbow-target-perfect 480ms ease-out;
}

@keyframes rainbow-target-perfect {
  0% { background: #ffffff; box-shadow: 0 0 8px rgba(238, 252, 251, 0.55); transform: scaleX(1); }
  35% { background: var(--neon-lime); box-shadow: 0 0 30px rgba(182, 255, 74, 1); transform: scaleX(4); }
  100% { background: rgba(238, 252, 251, 0.85); box-shadow: 0 0 10px rgba(238, 252, 251, 0.55); transform: scaleX(1); }
}

.home .rainbow__hud {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: clamp(24px, 3vw, 42px);
  border-right: 1px solid rgba(216, 210, 255, 0.1);
}

.home .rainbow__playfield {
  display: grid;
  min-width: 0;
  align-content: center;
}

.home .rainbow__feedback {
  display: grid;
  min-height: 38px;
  align-items: center;
  margin-bottom: 14px;
  grid-template-columns: minmax(90px, 1fr) minmax(120px, auto) minmax(90px, 1fr);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

.home .rainbow__score {
  color: rgba(226, 233, 246, 0.56);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
}

.home .rainbow__verdict {
  color: rgba(156, 255, 244, 0.78);
  font-size: clamp(0.86rem, 1.4vw, 1rem);
  letter-spacing: 0.15em;
  opacity: 0.65;
  text-align: center;
  text-transform: uppercase;
}

.home .rainbow__verdict.is-showing {
  animation: rainbow-verdict 460ms cubic-bezier(0.2, 0.85, 0.35, 1);
}

.home .rainbow__multiplier {
  justify-self: end;
  padding: 4px 10px;
  border: 1px solid rgba(182, 255, 74, 0.34);
  border-radius: 999px;
  color: var(--neon-lime);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.home .rainbow__multiplier.is-flaring {
  animation: rainbow-multiplier-flare 520ms cubic-bezier(0.18, 0.8, 0.3, 1);
}

@keyframes rainbow-verdict {
  0% { opacity: 0; transform: translateY(8px) scale(0.86); }
  40% { opacity: 1; transform: translateY(0) scale(1.12); text-shadow: 0 0 22px rgba(182, 255, 74, 0.78); }
  100% { opacity: 0.82; transform: translateY(0) scale(1); }
}

@keyframes rainbow-multiplier-flare {
  0% { transform: scale(0.76); }
  45% { transform: scale(1.24); box-shadow: 0 0 26px rgba(182, 255, 74, 0.46); }
  100% { transform: scale(1); }
}

/* The application fires two rings through the whole window on unlock. They
   live at the document root so the game panel cannot clip the celebration. */
.euphoria-burst {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border: 2px solid var(--burst-colour);
  border-radius: 50%;
  box-shadow: 0 0 22px var(--burst-colour);
  pointer-events: none;
  translate: -50% -50%;
  animation: euphoria-window-burst 900ms cubic-bezier(0.12, 0.68, 0.28, 1) both;
}

.euphoria-burst--one {
  --burst-colour: rgba(182, 255, 74, 0.9);
}

.euphoria-burst--two {
  --burst-colour: rgba(255, 60, 172, 0.86);
  animation-delay: 90ms;
}

@keyframes euphoria-window-burst {
  0% { opacity: 0.9; scale: 1; }
  100% { opacity: 0; scale: 90; }
}

.home .rainbow__pet {
  width: 154px;
  height: 154px;
  margin: 0 auto 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transform-origin: 50% 100%;
  will-change: transform;
}

.home .rainbow__pet svg {
  width: 126px;
  height: 126px;
  overflow: visible;
  transition: filter 220ms ease;
}

.home .rainbow__pet.is-hopping-a {
  animation: rainbow-pet-hop-a 520ms cubic-bezier(0.2, 0.76, 0.25, 1);
}

.home .rainbow__pet.is-hopping-b {
  animation: rainbow-pet-hop-b 520ms cubic-bezier(0.2, 0.76, 0.25, 1);
}

.home .rainbow__pet:active {
  transform: translateY(3px) scale(1.05, 0.91);
}

.home .rainbow__pet-body {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: rainbow-pet-breathe 3.4s ease-in-out infinite;
}

.home .rainbow__pet-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: rainbow-pet-blink 5.2s ease-in-out infinite;
}

.home .rainbow__pet-mouth {
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleX(calc(0.78 + var(--pet-joy) * 0.26)) scaleY(calc(0.72 + var(--pet-joy) * 0.34));
  transition: transform 240ms ease;
}

.home .rainbow__pet-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: rainbow-star-twinkle 2.6s ease-in-out infinite;
}

.home .rainbow__eye-wave {
  fill: none;
  stroke: #00e5ff;
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: calc(0.08 + var(--pet-joy) * 0.68);
  transform: translateX(calc(var(--pet-joy) * -1.8px));
  transition: opacity 220ms ease, transform 220ms ease;
}

.home .rainbow__panel.is-perfect .rainbow__pet svg {
  animation: rainbow-pet-delight 620ms cubic-bezier(0.16, 0.78, 0.26, 1);
}

.home .rainbow__panel.is-perfect .rainbow__pet-eyes {
  animation: rainbow-perfect-eyes 420ms ease-out;
}

.home .rainbow__panel.is-perfect .rainbow__pet-mouth {
  transform: scaleX(1.16) scaleY(1.16);
}

@keyframes rainbow-pet-hop-a {
  0%, 100% { transform: translateY(0) scale(1); }
  14% { transform: translateY(calc(3px * (1 + var(--pet-joy)))) scale(1.05, 0.91); }
  30% { transform: translateY(calc(-11px * (1 + var(--pet-joy) * 1.3))) scale(0.95, 1.07); }
  48% { transform: translateY(calc(-16px * (1 + var(--pet-joy) * 1.3))) scale(1); }
  70% { transform: translateY(calc(-7px * (1 + var(--pet-joy)))) scale(0.96, 1.06); }
  80% { transform: translateY(0) scale(1.09, 0.89); }
  90% { transform: translateY(-2px) scale(0.98, 1.03); }
}

@keyframes rainbow-pet-hop-b {
  0%, 100% { transform: translateY(0) scale(1); }
  14% { transform: translateY(calc(3px * (1 + var(--pet-joy)))) scale(1.05, 0.91); }
  30% { transform: translateY(calc(-11px * (1 + var(--pet-joy) * 1.3))) scale(0.95, 1.07); }
  48% { transform: translateY(calc(-16px * (1 + var(--pet-joy) * 1.3))) scale(1); }
  70% { transform: translateY(calc(-7px * (1 + var(--pet-joy)))) scale(0.96, 1.06); }
  80% { transform: translateY(0) scale(1.09, 0.89); }
  90% { transform: translateY(-2px) scale(0.98, 1.03); }
}

@keyframes rainbow-pet-delight {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(0, 229, 207, 0.5)); transform: scale(1); }
  34% { filter: drop-shadow(0 0 14px rgba(182, 255, 74, 0.95)) drop-shadow(0 0 30px rgba(0, 229, 207, 0.58)); transform: scale(1.1); }
  68% { transform: scale(0.98); }
}

@keyframes rainbow-perfect-eyes {
  0%, 100% { transform: scaleY(1); }
  36% { transform: scaleY(0.55); }
}

@keyframes rainbow-pet-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.985, 1.045); }
}

@keyframes rainbow-pet-blink {
  0%, 92%, 98%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

@keyframes rainbow-star-twinkle {
  0%, 100% { opacity: 0.7; transform: rotate(-5deg) scale(0.88); }
  50% { opacity: 1; transform: rotate(8deg) scale(1.12); filter: drop-shadow(0 0 3px rgba(255, 230, 109, 0.82)); }
}

.home .rainbow__pet:hover .rainbow__aura,
.home .rainbow__pet:focus-visible .rainbow__aura {
  opacity: 0.78;
  filter: blur(10px);
}

.home .rainbow__aura {
  opacity: calc(0.1 + var(--pet-joy) * 0.34);
  transition: opacity 260ms ease, filter 260ms ease;
}

.home .rainbow__panel.is-mode-active .rainbow__aura {
  opacity: 0.74;
  filter: blur(10px);
}

.home .rainbow__panel.is-win .rainbow__aura {
  animation: pet-aura-spin 1.1s linear infinite, rainbow-aura-pop 620ms ease-out;
}

@keyframes rainbow-aura-pop {
  0% { scale: 0.62; opacity: 0; }
  42% { scale: 1.28; opacity: 0.95; }
  100% { scale: 1; opacity: 0.74; }
}

.home .rainbow__pet:focus-visible {
  border-radius: 50%;
  outline: 2px solid var(--secondary-light);
  outline-offset: 8px;
}

.home .rainbow__goal {
  display: inline-flex;
  min-width: 128px;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.home .rainbow__goal b {
  font-size: 3.8rem;
  letter-spacing: -0.08em;
  line-height: 1;
}

.home .rainbow__goal small {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

.home .rainbow__head {
  flex-direction: column;
  gap: 8px;
}

.home .rainbow__mode-toggle {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 7px 4px 11px;
  gap: 8px;
  border: 1px solid rgba(156, 255, 244, 0.16);
  background: rgba(0, 229, 207, 0.11);
  color: var(--secondary-light);
  font: inherit;
  font-size: 0.6rem;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.home .rainbow__mode-toggle:disabled {
  cursor: default;
  opacity: 0.58;
}

.home .rainbow__mode-toggle i {
  position: relative;
  width: 25px;
  height: 14px;
  border: 1px solid rgba(156, 255, 244, 0.28);
  border-radius: 999px;
  background: rgba(4, 10, 17, 0.7);
}

.home .rainbow__mode-toggle i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(226, 233, 246, 0.54);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.home .rainbow__mode-toggle[aria-pressed='true'] {
  border-color: rgba(182, 255, 74, 0.32);
  background: rgba(182, 255, 74, 0.14);
  color: var(--neon-lime);
}

.home .rainbow__mode-toggle[aria-pressed='true'] i::after {
  background: var(--neon-lime);
  box-shadow: 0 0 10px rgba(182, 255, 74, 0.64);
  transform: translateX(11px);
}

.home .rainbow__hint {
  margin-top: 20px;
  color: rgba(226, 233, 246, 0.72);
  font-size: 0.9rem;
  text-align: left;
}

.home .rainbow__progress {
  display: grid;
  margin-top: 20px;
  gap: 7px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home .rainbow__progress span {
  height: 7px;
  border: 1px solid rgba(216, 210, 255, 0.13);
  border-radius: 999px;
  background: rgba(216, 210, 255, 0.06);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home .rainbow__progress span.is-on {
  border-color: hsl(var(--beat-hue) 92% 64% / 58%);
  background: hsl(var(--beat-hue) 92% 60% / 88%);
  box-shadow: 0 0 16px hsl(var(--beat-hue) 92% 60% / 42%);
}

.home .rainbow__progress span:nth-child(1) { --beat-hue: 184deg; }
.home .rainbow__progress span:nth-child(2) { --beat-hue: 142deg; }
.home .rainbow__progress span:nth-child(3) { --beat-hue: 58deg; }
.home .rainbow__progress span:nth-child(4) { --beat-hue: 326deg; }
.home .rainbow__progress span:nth-child(5) { --beat-hue: 252deg; }

.home .rainbow__unlock {
  margin-top: 18px;
  text-align: right;
}

.home .rainbow__unlock a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(156, 255, 244, 0.16);
  border-radius: 999px;
  background: rgba(8, 15, 25, 0.58);
  text-decoration: none;
}

.home .does {
  max-width: none;
  margin: 6px 0 0;
  grid-column: 1 / -1;
}

.home .does__title {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  gap: 16px;
  text-align: left;
}

.home .does__title::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(156, 255, 244, 0.24), transparent);
}

.home .does__list {
  display: grid;
  margin-top: 0;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  counter-reset: euphoria-detail;
}

.home .does__list li {
  min-height: 126px;
  padding: 50px 22px 22px;
  border: 1px solid rgba(216, 210, 255, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dot) 7%, transparent), transparent 48%),
    rgba(8, 15, 25, 0.64);
  color: rgba(216, 210, 255, 0.68);
  font-size: 0.9rem;
  line-height: 1.55;
  grid-column: span 4;
  counter-increment: euphoria-detail;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.home .does__list li:hover {
  border-color: color-mix(in srgb, var(--dot) 32%, transparent);
  transform: translateY(-3px);
}

.home .does__list li:nth-child(1),
.home .does__list li:nth-child(2),
.home .does__list li:nth-child(3) {
  grid-column: span 4;
}

.home .does__list li:nth-child(n + 4) {
  grid-column: span 3;
}

.home .does__list li::before {
  content: counter(euphoria-detail, decimal-leading-zero);
  top: 20px;
  left: 22px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--dot, var(--secondary));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Release --------------------------------------------------------------- */

.home #whats-new {
  padding-top: clamp(104px, 10vw, 150px);
  padding-bottom: clamp(104px, 10vw, 150px);
}

.home .news {
  position: relative;
  overflow: hidden;
  align-items: stretch;
  padding: clamp(18px, 2vw, 26px);
  gap: clamp(20px, 3vw, 36px);
  border: 1px solid rgba(216, 210, 255, 0.11);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 110%, rgba(0, 229, 207, 0.12), transparent 42%),
    linear-gradient(130deg, rgba(14, 28, 40, 0.76), rgba(6, 11, 18, 0.9));
  box-shadow:
    0 38px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  grid-template-columns: minmax(230px, 0.48fr) minmax(0, 1.52fr);
}

.home .news__version {
  display: inline-flex;
  width: max-content;
  min-height: 34px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(156, 255, 244, 0.18);
  border-radius: 999px;
  background: rgba(0, 229, 207, 0.08);
  color: var(--secondary-light);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.home .news__lead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px);
}

.home .news__lead h2 {
  max-width: 7ch;
  margin-top: 22px;
  font-size: clamp(3rem, 5.2vw, 4.5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.home .news__lead .btn {
  margin-top: 36px;
}

.home .news .whats-new {
  position: relative;
  z-index: 1;
  padding: 0;
  overflow: hidden;
  border-color: rgba(156, 255, 244, 0.14);
  border-radius: 22px;
  background: rgba(3, 8, 14, 0.72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.home .news__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 6.2;
  border-bottom: 1px solid rgba(156, 255, 244, 0.12);
  background: var(--surface-base);
}

.home .news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  filter: saturate(1.08) contrast(1.05);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.home .news:hover .news__media img {
  transform: scale(1.025);
}

.home .whats-new__content {
  padding: clamp(24px, 3vw, 38px);
}

.home .news .whats-new__body {
  display: grid;
  gap: 22px;
  color: rgba(226, 233, 246, 0.7);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home .news .whats-new__body p {
  position: relative;
  margin: 0;
  padding-top: 32px;
  font-size: 0.94rem;
  line-height: 1.68;
}

.home .news .whats-new__body p::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--secondary);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home .news .whats-new__body p:nth-child(1)::before { content: '01'; }
.home .news .whats-new__body p:nth-child(2)::before { content: '02'; }
}

/* Pricing --------------------------------------------------------------- */

.home .band--accent {
  overflow: hidden;
  padding-block: clamp(112px, 11vw, 168px);
  background:
    radial-gradient(ellipse at 72% 60%, rgba(0, 229, 207, 0.14), transparent 30%),
    radial-gradient(ellipse at 23% 100%, rgba(139, 92, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(10, 19, 30, 0.7), rgba(4, 9, 15, 0.95));
}

.home .band--accent::after {
  background:
    radial-gradient(70% 80% at 72% 62%, rgba(0, 229, 207, 0.12), transparent 65%),
    linear-gradient(90deg, transparent 0 48%, rgba(156, 255, 244, 0.022) 48% 48.1%, transparent 48.1%);
}

.home .pricing {
  align-items: stretch;
  gap: clamp(48px, 8vw, 110px);
  grid-template-columns: minmax(0, 1fr) minmax(390px, 480px);
}

.home .pricing__eyebrow {
  margin: 0 0 24px !important;
  color: var(--secondary) !important;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.72rem !important;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home .pricing__lead h2 {
  max-width: 9ch;
  font-size: clamp(3.4rem, 6.2vw, 5.5rem);
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.home .pricing__lead > p {
  max-width: 48ch;
  margin-top: 24px;
  color: rgba(226, 233, 246, 0.68);
  line-height: 1.7;
}

.home .pricing__gpl {
  display: grid;
  align-items: start;
  margin-top: 28px;
  padding: 22px;
  gap: 20px;
  border: 1px solid rgba(156, 255, 244, 0.12);
  border-left: 2px solid rgba(0, 229, 207, 0.6);
  border-radius: 0 18px 18px 0;
  background: rgba(7, 14, 23, 0.58);
  grid-template-columns: 66px minmax(0, 1fr);
}

.home .pricing__gpl p {
  color: rgba(216, 210, 255, 0.58);
  font-size: 0.86rem;
  line-height: 1.65;
}

.home .pricing__source {
  display: flex;
  flex-direction: column;
  padding-right: 18px;
  border-right: 1px solid rgba(216, 210, 255, 0.12);
}

.home .pricing__source strong {
  color: var(--secondary-light);
  font-size: 1.55rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.home .pricing__source small {
  margin-top: 7px;
  color: rgba(216, 210, 255, 0.42);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.home .pricing__card {
  align-self: stretch;
  max-width: 480px;
  padding: clamp(32px, 4vw, 46px);
  border-color: rgba(156, 255, 244, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 229, 207, 0.12), transparent 36%),
    linear-gradient(150deg, rgba(17, 37, 49, 0.98), rgba(5, 11, 18, 0.99));
  box-shadow:
    0 48px 110px rgba(0, 0, 0, 0.5),
    0 0 120px rgba(0, 229, 207, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home .pricing__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34px;
  padding-bottom: 16px;
  gap: 20px;
  border-bottom: 1px solid rgba(216, 210, 255, 0.1);
  color: rgba(216, 210, 255, 0.42);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home .pricing__card-top span:first-child {
  color: var(--secondary-light);
  font-weight: 800;
}

.home .pricing__amount {
  background: linear-gradient(125deg, #fff, var(--secondary-light) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(4rem, 7vw, 5.6rem);
}

.home .pricing__list {
  margin-block: 32px;
}

.home .pricing__list li {
  padding-left: 31px;
  color: rgba(226, 233, 246, 0.68);
  font-size: 0.925rem;
}

.home .pricing__list li + li {
  margin-top: 15px;
}

.home .pricing__warn {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
}

.home .pricing__routes {
  display: grid;
  margin-top: clamp(54px, 7vw, 92px);
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home .pricing__routes a {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 184px;
  align-content: end;
  padding: 28px 30px;
  gap: 8px 18px;
  border: 1px solid rgba(216, 210, 255, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 229, 207, 0.1), transparent 38%),
    rgba(5, 12, 20, 0.68);
  color: var(--text-primary);
  text-decoration: none;
  grid-template-columns: minmax(0, 1fr) auto;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.home .pricing__routes a + a {
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 255, 0.13), transparent 40%),
    rgba(5, 12, 20, 0.68);
}

.home .pricing__routes a::before {
  content: '12';
  position: absolute;
  top: -34px;
  right: 20px;
  color: rgba(156, 255, 244, 0.055);
  font-size: 10rem;
  font-weight: 850;
  letter-spacing: -0.1em;
  line-height: 1;
  pointer-events: none;
}

.home .pricing__routes a + a::before {
  content: '?';
  right: 44px;
  color: rgba(216, 210, 255, 0.055);
}

.home .pricing__routes a:hover {
  border-color: rgba(156, 255, 244, 0.3);
  color: var(--secondary-light);
  transform: translateY(-4px);
}

.home .pricing__routes span {
  color: rgba(216, 210, 255, 0.34);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  grid-column: 1;
  letter-spacing: 0.08em;
}

.home .pricing__routes strong {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  grid-column: 1;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.home .pricing__routes small {
  position: relative;
  z-index: 1;
  color: rgba(226, 233, 246, 0.62);
  font-size: 0.78rem;
  grid-column: 1;
  line-height: 1.45;
}

.home .pricing__routes i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  align-self: end;
  place-items: center;
  border: 1px solid rgba(156, 255, 244, 0.22);
  border-radius: 50%;
  background: rgba(4, 10, 17, 0.66);
  color: var(--secondary);
  font-size: 1.4rem;
  font-style: normal;
  grid-column: 2;
  grid-row: 1 / span 3;
  transition: transform 180ms ease;
}

.home .pricing__routes a:hover i {
  transform: translateX(5px);
}

.home #next {
  padding-block: 54px;
}

.home #next .page-next {
  justify-content: center;
  margin-top: 0;
}

.home .footer {
  background: rgba(3, 8, 13, 0.54);
}

/* Responsive homepage --------------------------------------------------- */

@media (max-width: 1080px) {
  .home .hero {
    min-height: auto;
  }

  .home .hero__grid {
    gap: 52px;
    grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
  }

  .home .hero__title {
    font-size: clamp(3.5rem, 6.7vw, 5.2rem);
  }

  .home .hero__shot {
    width: min(1040px, calc(100vw - 16px));
    margin-right: 0;
  }

  .home .does__list li,
  .home .does__list li:nth-child(n) {
    grid-column: span 6;
  }

  .home .does__list li:last-child {
    grid-column: 4 / span 6;
  }
}

@media (max-width: 1120px) {
  .home .hero {
    padding-top: 74px;
  }

  .home .hero__grid {
    display: flex;
    max-width: 780px;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .home .hero__copy {
    max-width: 650px;
  }

  .home .hero__title {
    max-width: 11.5ch;
    font-size: clamp(3.75rem, 11vw, 6rem);
  }

  .home .hero__shot {
    width: calc(100vw - 16px);
    margin-left: 0;
    margin-right: 0;
    align-self: center;
  }

  .home #features .section__head {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
  }

  .home #features .section__head p {
    justify-self: start;
  }

  .home .features__layout {
    grid-template-columns: 1fr;
  }

  .home .feature-showcase {
    position: relative;
    top: auto;
  }

  .home .workspaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .home .euphoria__copy {
    position: static;
    max-width: none;
  }

  .home .euphoria__copy h2 {
    max-width: 10.8ch;
  }

  .home .pricing {
    grid-template-columns: 1fr;
  }

  .home .pricing__lead {
    max-width: 650px;
    text-align: left;
  }

  .home .pricing__card {
    max-width: 620px;
  }
}

@media (max-width: 720px) {
  .home .nav {
    top: 8px;
    width: calc(100% - 20px);
    margin-top: 8px;
    border-radius: 15px;
  }

  .home .nav__inner {
    height: 54px;
    padding-inline: 14px;
  }

  .home .hero {
    padding-top: 84px;
    padding-bottom: 100px;
  }

  .home #features {
    padding-top: 88px;
    padding-bottom: 72px;
  }

  .home .band--euphoria {
    padding-block: 82px;
  }

  .home #whats-new {
    padding-block: 84px;
  }

  .home .band--accent {
    padding-block: 88px;
  }

  .home .hero__title {
    font-size: clamp(3.15rem, 14.8vw, 5.1rem);
  }

  .home .hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .home .hero__cta-row {
    width: 100%;
    flex-direction: column;
  }

  .home .hero__shot {
    width: calc(100vw - 12px);
    margin-right: 0;
  }

  .home .hero__stage {
    transform: rotateY(-3deg) scale(0.985);
    transform-origin: center;
  }

  .home .hero__slab--near {
    transform: translate3d(9px, 9px, -22px) scale(0.995);
  }

  .home .hero__slab--far {
    transform: translate3d(17px, 17px, -44px) scale(0.99);
  }

  .home .hero__stage::after {
    top: 14px;
    bottom: 14px;
    left: 5px;
    width: 1px;
  }

  .home .hero__shot .carousel__frame {
    transform: translateZ(1px);
  }

  .home .hero__shot .carousel__controls {
    justify-content: center;
    margin-left: 0;
  }

  .home .hero + .band--tight {
    width: calc(100% - 24px);
    margin-top: -40px;
    padding: 16px;
    border-radius: 18px;
  }

  .home .stats {
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home .stats li {
    min-height: 78px;
    padding: 10px 6px;
  }

  .home .stats li + li {
    border-left: 0;
  }

  .home .stats li:not(:nth-child(3n + 1)) {
    border-left: 1px solid rgba(216, 210, 255, 0.1);
  }

  .home .stats li:nth-child(n + 4) {
    border-top: 1px solid rgba(216, 210, 255, 0.1);
  }

  .home #features .section__head h2,
  .home .euphoria__copy h2,
  .home .news__lead h2,
  .home .pricing__lead h2 {
    font-size: clamp(2.7rem, 12vw, 4.2rem);
  }

  .home .euphoria__copy h2 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .home .euphoria__copy {
    gap: 20px 14px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home .euphoria__chapter {
    grid-column: 1;
  }

  .home .euphoria__eyebrow {
    grid-column: 2;
  }

  .home .euphoria__body {
    max-width: 48ch;
    margin-top: 4px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(156, 255, 244, 0.18);
    border-left: 0;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .home .feature-showcase img {
    min-height: 320px;
  }

  .home .workspaces {
    grid-template-columns: 1fr;
  }

  .home .workspaces li:hover {
    transform: none;
  }

  .home .rainbow__panel {
    min-height: 0;
    border-radius: 22px;
    grid-template-columns: 1fr;
  }

  .home .rainbow__hud {
    display: grid;
    padding: 0 0 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(216, 210, 255, 0.1);
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .home .rainbow__pet {
    width: 108px;
    height: 108px;
    margin: 0;
  }

  .home .rainbow__pet svg {
    width: 88px;
    height: 88px;
  }

  .home .rainbow__head {
    align-items: flex-start;
    justify-self: start;
  }

  .home .rainbow__goal b {
    font-size: 3rem;
  }

  .home .rainbow__trace {
    height: 100px;
  }

  .home .rainbow__unlock {
    text-align: left;
  }

  .home .does__list li,
  .home .does__list li:nth-child(n),
  .home .does__list li:last-child {
    min-height: 0;
    grid-column: 1 / -1;
  }

  .home .news {
    padding: 34px 26px;
    grid-template-columns: 1fr;
  }

  .home .news__lead {
    padding: 4px 2px 18px;
  }

  .home .news__media {
    aspect-ratio: 16 / 7.5;
  }

  .home .news .whats-new__body {
    grid-template-columns: 1fr;
  }

  .home .pricing__card {
    padding: 30px 24px;
    border-radius: 22px;
  }

  .home .pricing__gpl {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .home .pricing__routes {
    grid-template-columns: 1fr;
  }

  .home .pricing__routes a + a {
    border-top: 1px solid rgba(216, 210, 255, 0.12);
    border-left: 1px solid rgba(216, 210, 255, 0.12);
  }
}

@media (max-width: 470px) {
  .home .nav__wordmark {
    font-size: 0.95rem;
  }

  .home .nav__buy {
    padding-inline: 11px;
    font-size: 0.75rem;
  }

  .home .hero__eyebrow {
    font-size: 0.72rem;
  }

  .home .hero__title {
    font-size: clamp(2.85rem, 14vw, 4.2rem);
  }

  .home .hero__shot {
    width: 100%;
    margin-right: 0;
  }

  .home .hero__shot .carousel__cap {
    padding: 12px 14px 14px;
  }

  .home .hero__shot .carousel__dots {
    gap: 7px;
  }

  .home .stats b {
    font-size: 1.65rem;
  }

  .home .stats span {
    font-size: 0.68rem;
  }

  .home .feature-showcase img {
    min-height: 250px;
  }

  .home .feature-showcase figcaption {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .home .feature-showcase figcaption strong {
    font-size: 2.6rem;
  }
}

/* --- Homepage product chapters -----------------------------------------

   Three real product views carry the middle of the landing page. Each chapter
   pins briefly while the next one arrives, so the page feels like a product
   film without taking control of scrolling or requiring JavaScript. */

/* Signal lab ------------------------------------------------------------ */

.home .signal-lab {
  padding-top: clamp(112px, 11vw, 170px);
  padding-bottom: clamp(98px, 10vw, 150px);
}

.home .signal-lab__head {
  display: grid;
  align-items: end;
  gap: 28px clamp(42px, 7vw, 92px);
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}

.home .signal-lab__eyebrow {
  margin-bottom: 16px;
  color: var(--secondary-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.home .signal-lab__head h2 {
  max-width: 11ch;
  font-size: clamp(3.5rem, 7.2vw, 6.5rem);
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.home .signal-lab__head > p {
  max-width: 45ch;
  padding-bottom: 8px;
  color: rgba(226, 233, 246, 0.67);
  font-size: 1.05rem;
  line-height: 1.72;
}

.home .signal-deck {
  position: relative;
  margin-top: clamp(44px, 6vw, 76px);
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(156, 255, 244, 0.17);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 120%, rgba(0, 229, 207, 0.11), transparent 45%),
    linear-gradient(150deg, rgba(14, 29, 42, 0.97), rgba(4, 9, 15, 0.99));
  box-shadow:
    0 54px 120px rgba(0, 0, 0, 0.52),
    0 0 110px rgba(0, 229, 207, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.home .signal-deck::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -1px;
  right: 14%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00e5ff, #b6ff4a, #ff3cac, #8b5cff, transparent);
}

.home .signal-deck__controls {
  position: relative;
  z-index: 4;
  display: grid;
  padding: 0 0 14px;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home .signal-toggle {
  --toggle: var(--secondary);
  cursor: pointer;
}

.home .signal-toggle--eq {
  --toggle: #00e5ff;
}

.home .signal-toggle--autoeq {
  --toggle: #b6ff4a;
}

.home .signal-toggle--voicing {
  --toggle: #ff3cac;
}

.home .signal-toggle--convolution {
  --toggle: #8b5cff;
}

.home .signal-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.home .signal-toggle span {
  display: flex;
  min-height: 60px;
  align-items: center;
  padding: 14px 18px;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--toggle) 25%, rgba(216, 210, 255, 0.08));
  border-radius: 15px;
  background: color-mix(in srgb, var(--toggle) 9%, rgba(4, 9, 15, 0.86));
  color: color-mix(in srgb, var(--toggle) 68%, #eefcfb);
  font-size: 0.9rem;
  font-weight: 750;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.home .signal-toggle small {
  color: var(--toggle);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.home .signal-toggle:hover span {
  border-color: color-mix(in srgb, var(--toggle) 52%, transparent);
  transform: translateY(-2px);
}

.home .signal-toggle input:not(:checked) + span {
  border-color: rgba(216, 210, 255, 0.08);
  background: rgba(4, 9, 15, 0.56);
  color: rgba(216, 210, 255, 0.38);
  opacity: 0.72;
}

.home .signal-toggle input:not(:checked) + span small {
  color: rgba(216, 210, 255, 0.34);
}

.home .signal-toggle input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--toggle) 24%, transparent);
}

.home .signal-deck__scope {
  position: relative;
  height: clamp(390px, 48vw, 580px);
  overflow: hidden;
  border: 1px solid rgba(216, 210, 255, 0.09);
  border-radius: 22px;
  background:
    linear-gradient(rgba(156, 255, 244, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 255, 244, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 60%, rgba(0, 229, 207, 0.055), transparent 55%),
    rgba(3, 8, 14, 0.92);
  background-size: 100% 20%, 8.333% 100%, auto, auto;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.42);
}

.home .signal-deck__scope::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 8, 14, 0.82), transparent 8%, transparent 92%, rgba(3, 8, 14, 0.82));
  pointer-events: none;
}

.home .signal-deck__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home .signal-deck__frequencies {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 18px;
  left: 22px;
  display: flex;
  justify-content: space-between;
  color: rgba(216, 210, 255, 0.42);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}

.home .signal-deck__readout {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(216, 210, 255, 0.48);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.home .signal-deck__readout span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 12px rgba(0, 229, 207, 0.8);
  animation: signal-live 1.8s ease-in-out infinite;
}

@keyframes signal-live {
  50% {
    opacity: 0.38;
    scale: 0.72;
  }
}

@media (max-width: 720px) {
  .home .signal-lab {
    padding-top: 86px;
    padding-bottom: 78px;
  }

  .home .signal-lab__head {
    grid-template-columns: 1fr;
  }

  .home .signal-lab__head h2 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .home .signal-deck {
    margin-inline: -8px;
    padding: 8px;
    border-radius: 22px;
  }

  .home .signal-deck__controls {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .signal-toggle span {
    min-height: 50px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 0.78rem;
  }

  .home .signal-deck__scope {
    height: 390px;
    border-radius: 16px;
    background-size: 100% 20%, 16.666% 100%, auto, auto;
  }

  .home .signal-deck__frequencies {
    right: 10px;
    left: 10px;
    font-size: 0.55rem;
  }

  .home .signal-deck__frequencies span:nth-child(even) {
    display: none;
  }
}

.home .features__layout[hidden] {
  display: none !important;
}

.home .story-stack {
  display: grid;
  gap: clamp(72px, 10vh, 110px);
}

.home .story {
  --story-accent: var(--secondary);
  position: sticky;
  top: 92px;
  display: grid;
  min-height: min(690px, calc(100svh - 118px));
  overflow: hidden;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--story-accent) 24%, var(--border-panel));
  border-radius: 34px;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--story-accent) 15%, transparent), transparent 34%),
    linear-gradient(138deg, rgba(15, 31, 44, 0.98), rgba(5, 10, 17, 0.99) 54%);
  box-shadow:
    0 52px 120px rgba(0, 0, 0, 0.6),
    0 0 120px color-mix(in srgb, var(--story-accent) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.home .story--eq {
  --story-accent: #00e5ff;
  z-index: 1;
}

.home .story--autoeq {
  --story-accent: #b6ff4a;
  z-index: 2;
}

.home .story--karaoke {
  --story-accent: #ff3cac;
  z-index: 3;
}

.home .story::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--story-accent), transparent);
  opacity: 0.8;
}

/* A compact spectrum floor ties the chapter back to the response graph in the
   product. The bars are deliberately irregular; a perfect barcode looks like
   decoration, while this reads as audio at a glance. */
.home .story::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 22%;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--story-accent) 10%, transparent), transparent),
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      color-mix(in srgb, var(--story-accent) 16%, transparent) 9px 11px,
      transparent 11px 19px
    );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
  opacity: 0.34;
  pointer-events: none;
}

.home .story__copy {
  position: relative;
  z-index: 4;
  display: flex;
  width: 38%;
  min-width: 350px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 5vw, 72px);
  background: linear-gradient(90deg, rgba(5, 11, 18, 0.98) 0%, rgba(5, 11, 18, 0.9) 72%, transparent 100%);
}

.home .story__index {
  color: var(--story-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home .story__copy h3 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(3.8rem, 7.4vw, 6.5rem);
  font-weight: 820;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.home .story__copy > p:not(.story__index, .story__metric) {
  max-width: 30ch;
  margin-top: 24px;
  color: rgba(226, 233, 246, 0.68);
  font-size: 1.05rem;
  line-height: 1.65;
}

.home .story__metric {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: clamp(44px, 7vh, 78px);
}

.home .story__metric strong {
  color: var(--story-accent);
  font-size: clamp(3.1rem, 5.4vw, 5rem);
  font-weight: 820;
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-shadow: 0 0 34px color-mix(in srgb, var(--story-accent) 24%, transparent);
}

.home .story__metric span {
  max-width: 13ch;
  color: rgba(216, 210, 255, 0.5);
  font-size: 0.78rem;
  line-height: 1.3;
  text-transform: lowercase;
}

.home .story__visual {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -8%;
  width: 79%;
  transform: translateY(-50%) rotateY(-2deg) rotateX(1deg);
  transform-origin: right center;
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.48));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}

.home .story__visual::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--story-accent) 18%, transparent), transparent 64%);
  filter: blur(34px);
}

.home .story__visual img {
  position: relative;
  width: 100%;
  border: 1px solid rgba(216, 210, 255, 0.13);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.home .story:hover .story__visual img {
  transform: scale(1.018) translateX(-1.2%);
}

.home .workspace-rail {
  display: grid;
  margin: clamp(78px, 9vw, 118px) 0 0;
  padding: 0;
  border-block: 1px solid rgba(216, 210, 255, 0.11);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none;
}

.home .workspace-rail li {
  display: grid;
  min-height: 108px;
  align-content: center;
  padding: 18px 16px;
  gap: 4px;
}

.home .workspace-rail li + li {
  border-left: 1px solid rgba(216, 210, 255, 0.09);
}

.home .workspace-rail span {
  color: rgba(156, 255, 244, 0.46);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.home .workspace-rail strong {
  color: rgba(238, 252, 251, 0.86);
  font-size: clamp(0.78rem, 1vw, 0.94rem);
  font-weight: 700;
}

@media (max-width: 960px) {
  .home .story {
    min-height: 600px;
  }

  .home .story__copy {
    width: 44%;
    min-width: 330px;
    padding: 42px;
  }

  .home .story__visual {
    right: -17%;
    width: 82%;
  }

  .home .workspace-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home .workspace-rail li:nth-child(5) {
    border-left: 0;
  }

  .home .workspace-rail li:nth-child(n + 5) {
    border-top: 1px solid rgba(216, 210, 255, 0.09);
  }
}

@media (max-width: 700px) {
  .home .story-stack {
    gap: 22px;
  }

  .home .story {
    position: relative;
    top: auto;
    min-height: 560px;
    border-radius: 24px;
  }

  .home .story__copy {
    width: 100%;
    min-width: 0;
    height: 48%;
    justify-content: flex-start;
    padding: 30px 26px;
    background: linear-gradient(180deg, rgba(5, 11, 18, 0.99) 0%, rgba(5, 11, 18, 0.94) 72%, transparent 100%);
  }

  .home .story__copy h3 {
    font-size: clamp(3.1rem, 16vw, 5rem);
  }

  .home .story__copy > p:not(.story__index, .story__metric) {
    max-width: 32ch;
    margin-top: 16px;
    font-size: 0.93rem;
  }

  .home .story__metric {
    margin-top: 22px;
  }

  .home .story__metric strong {
    font-size: 3.25rem;
  }

  .home .story__visual {
    top: auto;
    right: -27%;
    bottom: 3%;
    width: 142%;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  }

  .home .story__visual img {
    border-radius: 15px;
  }

  .home .workspace-rail {
    margin-top: 54px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .workspace-rail li {
    min-height: 82px;
    padding: 14px;
  }

  .home .workspace-rail li:nth-child(odd) {
    border-left: 0;
  }

  .home .workspace-rail li:nth-child(even) {
    border-left: 1px solid rgba(216, 210, 255, 0.09);
  }

  .home .workspace-rail li:nth-child(n + 3) {
    border-top: 1px solid rgba(216, 210, 255, 0.09);
  }
}

.hero__eyebrow {
  margin-bottom: 22px;
  padding: 6px 14px;
  border: 1px solid var(--border-field);
  border-radius: var(--r-pill);
  background: rgba(0, 229, 207, 0.06);
  color: var(--secondary-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* The wordmark travels through the spectrum, the way the app's Euphoria mode
   does — the same trick, from Euphoria.scss: animate one registered angle and
   let the gradient read from it, rather than animating the colours.

   `inherits: false` is not incidental. The app tried this on an inheriting
   property once and every element in the document recomputed sixty times a
   second; the interface went sluggish and memory climbed into the gigabytes.
   Declared this way the hue exists only on the element that animates it.

   Twelve seconds, not the app's 3.6: there it is a burst you have earned, here
   it is the first thing anyone sees and has to be liveable. Lightness stays at
   the top of the range so every hue it passes through is legible on the dark
   page. */
@property --hero-hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 168deg;
}

.hero__title {
  font-size: clamp(3.25rem, 11vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(
    98deg,
    #eefcfb 0%,
    hsl(var(--hero-hue) 96% 80%) 34%,
    hsl(calc(var(--hero-hue) + 58deg) 96% 82%) 62%,
    hsl(calc(var(--hero-hue) + 122deg) 92% 84%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-spectrum 12s linear infinite;
}

@keyframes hero-spectrum {
  from {
    --hero-hue: 0deg;
  }

  to {
    --hero-hue: 360deg;
  }
}

/* --- The companion ------------------------------------------------------ */

/* The companion lives in the header, at the size the application's title bar
   keeps it. Its glow is a drop-shadow on the artwork rather than a blurred
   element behind it: a big soft aura inside a 64px bar gets clipped by the
   bar's own edges, and turning off the clipping to accommodate it would put a
   smear over the page beneath. A drop-shadow follows the shape and has nothing
   to clip. */
.nav__pet {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;
  touch-action: manipulation;
  transform-origin: 50% 100%;
}

.nav__pet::before,
.nav__pet::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  border: 1.5px solid rgba(0, 229, 207, 0.92);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.nav__pet::after {
  border-color: rgba(255, 60, 172, 0.86);
}

.nav__pet:hover svg {
  filter:
    drop-shadow(0 0 7px rgba(156, 255, 244, 0.72))
    drop-shadow(0 0 17px rgba(0, 229, 207, 0.4));
  transform: translateY(-1px) scale(1.04);
}

.nav__pet:focus-visible {
  outline: 2px solid rgba(156, 255, 244, 0.78);
  outline-offset: 4px;
}

.nav__pet:active {
  transform: translateY(2px) scale(1.08, 0.9);
}

.nav__pet.is-reacting {
  animation: nav-pet-hop 640ms cubic-bezier(0.2, 0.76, 0.25, 1);
}

.nav__pet.is-reacting::before {
  animation: nav-pet-ring 560ms cubic-bezier(0.12, 0.68, 0.28, 1) both;
}

.nav__pet.is-reacting::after {
  animation: nav-pet-ring 560ms 90ms cubic-bezier(0.12, 0.68, 0.28, 1) both;
}

@keyframes nav-pet-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  18% { transform: translateY(2px) scale(1.08, 0.88); }
  42% { transform: translateY(-9px) scale(0.94, 1.08); }
  68% { transform: translateY(-3px) scale(1.02, 0.98); }
  84% { transform: translateY(0) scale(1.06, 0.94); }
}

@keyframes nav-pet-ring {
  0% { opacity: 0.9; transform: scale(0.65); }
  100% { opacity: 0; transform: scale(2.15); }
}

.nav__pet svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 6px rgba(0, 229, 207, 0.5))
    drop-shadow(0 0 14px rgba(0, 229, 207, 0.25));
  transition: filter 180ms ease, transform 180ms ease;
}

@media (max-width: 480px) {
  .nav__pet {
    display: none;
  }
}

/* Every timing below is the app's own, from SupportPet.scss, so the creature
   breathes and blinks at the pace people already know it by. */
.nav__pet-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-breathe 3.4s ease-in-out infinite;
}

@keyframes pet-breathe {
  0%,
  100% {
    scale: 1 1;
  }

  50% {
    scale: 0.985 1.045;
  }
}

.nav__pet-eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pet-blink 5.2s ease-in-out infinite;
}

@keyframes pet-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0.08);
  }
}

.nav__pet-star {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pet-twinkle 2.6s ease-in-out infinite;
}

@keyframes pet-twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  50% {
    opacity: 0.75;
    transform: scale(1.14) rotate(12deg);
  }
}

.nav__pet-ears {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-ears 3.4s ease-in-out infinite;
}

@keyframes pet-ears {
  0%,
  100% {
    rotate: -1.5deg;
  }

  50% {
    rotate: 1.5deg;
  }
}

/* Decorative and beside the copy, not in it. Below this width there is no room
   to its right, and shrinking it into the text would make it clutter. */
@media (max-width: 1080px) {
  .nav__pet {
    display: none;
  }
}

.hero__tagline {
  margin-top: 20px;
  color: var(--text-primary);
  font-size: clamp(1.375rem, 3.6vw, 2.125rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.hero__sub {
  max-width: 58ch;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

/* Sits directly under the disabled CTA and carries the price, so the offer is
   still legible even though it cannot be taken yet. */
.hero__soon {
  color: var(--secondary-light);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Answers "it is free software, so what am I paying for?" at the CTA rather
   than in the pricing section, where a visitor who already decided against it
   never reaches. Brighter than the source link below it: the two lines are an
   offer and its footnote, not a pair. */
.hero__buys {
  max-width: 46ch;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}

.hero__free {
  margin-top: -4px;
  color: var(--text-faint);
  font-size: 0.9375rem;
  text-decoration: none;
}

.hero__free:hover {
  color: var(--secondary-light);
}

/* The caveat that keeps the free link from reading as a better deal than the
   thing being sold. Smaller and fainter than the link it qualifies, because it
   is a footnote to a secondary path — not a third message competing with the
   two above it. */
.hero__free-note {
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 0.8125rem;
  opacity: 0.78;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 28px;
  color: var(--text-faint);
  font-size: 0.875rem;
}

.hero__meta span {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero__meta span + span::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* Once the row wraps, a leading separator dot lands at the start of the second
   line looking like a bullet nobody asked for. Below this width the gap alone
   separates the items. */
@media (max-width: 560px) {
  .hero__meta span + span::before {
    display: none;
  }
}

/* --- Screenshots -------------------------------------------------------- */

.shot {
  padding-bottom: var(--section-y);
}

/* --- Carousel -----------------------------------------------------------

   Scroll-snap rather than transforms, for one reason: with scroll-snap the
   track is a real scrolling element, so it works with a trackpad, a touch
   screen, the arrow keys and no JavaScript at all. site.js only syncs the
   dots and drives the arrows.

   Every slide gets the same frame, so the panel never changes height between
   pictures — pnpm assets warns if a new screenshot's aspect ratio would
   letterbox inside it. */

.carousel {
  position: relative;
}

.carousel__frame {
  position: relative;
  padding: 8px;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: calc(var(--r-xl) - 9px);
  /* The bar would sit across the bottom of the screenshot. Navigation is the
     arrows and the dots. */
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track:focus-visible {
  box-shadow:
    0 0 0 3px rgba(0, 229, 207, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 9px);
  scroll-snap-align: center;
  opacity: var(--slide-opacity, 1);
  transition: opacity 90ms linear;
}

.carousel__slide img,
.carousel__slide video {
  display: block;
  width: 100%;
  aspect-ratio: 2560 / 1392;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - 9px);
  background: rgba(5, 11, 18, 1);
  transform: translateX(var(--slide-shift, 0%)) scale(var(--slide-scale, 1));
  transform-origin: center;
  transition: transform 90ms linear;
  will-change: transform;
}

.carousel__slide video {
  height: auto;
  object-fit: contain;
  object-position: center top;
}

.home .hero__shot .carousel__track,
.home .hero__shot .carousel__slide,
.home .hero__shot .carousel__slide img,
.home .hero__shot .carousel__slide video {
  border-radius: 15px;
}

/* Absolutely positioned, so nothing bounds it by default — a long caption in
   one language pushed its own slide wider than the viewport. The max-width is
   what keeps it inside the picture it labels. */
/* A pill was enough when the caption was two words. With a sentence under it
   the block needs a scrim instead, or the description lands on whatever the
   screenshot happens to be showing there. */
.carousel__cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 44px 20px 16px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(6, 10, 16, 0.62) 38%,
    rgba(5, 8, 13, 0.9)
  );
  text-align: left;
  transform: translateX(var(--slide-caption-shift, 0));
  transition: transform 90ms linear;
}

.carousel__cap-title {
  color: var(--secondary-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.carousel__cap-desc {
  max-width: 62ch;
  margin-top: 5px;
  color: rgba(233, 241, 247, 0.92);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* /features carries the full frame description rather than a one-liner, which
   runs to several lines. Laid over the picture it would cover the thing it is
   describing, so it always sits beneath it. */
.carousel__cap--detailed {
  position: static;
  padding: 15px 18px 17px;
  background: rgba(10, 20, 31, 0.55);
}

.carousel__cap--detailed .carousel__cap-desc {
  max-width: 88ch;
}

/* Once the picture is phone-sized, a sentence laid over it covers the thing it
   is describing. Below the frame it costs a little height and hides nothing. */
@media (max-width: 620px) {
  .carousel__cap {
    position: static;
    padding: 12px 14px 14px;
    background: rgba(10, 20, 31, 0.55);
  }

  .carousel__cap-desc {
    font-size: 0.8125rem;
  }

  .home .hero__shot .carousel__cap {
    position: static;
    width: auto;
    padding: 12px 14px 14px;
    border: 0;
    border-radius: 0;
    background: rgba(10, 20, 31, 0.55);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
  }
}

/* One row under the frame: previous, the dots, next. They used to float on
   the picture, covering the thing they exist to help you look at — and once
   the screenshot runs off the right edge of the viewport there is no room
   beside it for them anyway. */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  gap: 14px;
}

.carousel__arrow {
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(156, 255, 244, 0.3);
  border-radius: 50%;
  background: rgba(7, 5, 18, 0.66);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--secondary-light);
  cursor: pointer;
  transition:
    color var(--ease),
    border-color var(--ease),
    background var(--ease),
    opacity var(--ease);
}

.carousel__arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel__arrow:hover {
  color: #fff;
  border-color: rgba(156, 255, 244, 0.7);
  background: rgba(0, 229, 207, 0.22);
}


/* At the first or last slide the arrow has nothing to do. Dimmed and inert
   rather than removed, so the other one does not jump across the frame. */
.carousel__arrow[disabled] {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(156, 255, 244, 0.4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.carousel__dot:hover {
  border-color: var(--secondary);
  background: rgba(0, 229, 207, 0.4);
}

.carousel__dot[aria-current='true'] {
  border-color: var(--secondary);
  background: var(--secondary);
  transform: scale(1.25);
}

@media (max-width: 640px) {
  .carousel__arrow {
    width: 38px;
    height: 38px;
  }

  .carousel__arrow--prev {
    left: 10px;
  }

  .carousel__arrow--next {
    right: 10px;
  }
}

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

/* --- Sections ----------------------------------------------------------- */

/* Padded on both sides, not just the bottom. With bottom-only padding a
   section's first line hugged whatever preceded it, which was invisible while
   every section shared one ground and became obvious the moment bands gave
   them edges — every band ran straight into the heading below it. */
.section {
  padding-block: var(--section-y);
}

/* --- Full-bleed bands ---------------------------------------------------- */

/* Ten sections of identical dark panel read as one undifferentiated column,
   however good the copy is. A band spans the viewport and carries its own
   ground, so the eye gets a boundary to rest on while scrolling.
   Deliberately sparse — every third section at most, or the alternation
   becomes its own kind of monotony. */
.band {
  position: relative;
  z-index: 0;
  /* Hairlines rather than a hard edge: the band should read as a change of
     ground, not as a box dropped onto the page. */
  border-block: 1px solid rgba(255, 255, 255, 0.055);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.028),
    rgba(255, 255, 255, 0.012) 55%,
    transparent
  );
}

.band--tight {
  padding-block: clamp(30px, 4vw, 44px);
}

/* The money section, lit from underneath. */
.band--accent::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 62%, rgba(0, 229, 207, 0.16), transparent 72%),
    radial-gradient(120% 70% at 50% 108%, rgba(0, 169, 214, 0.14), transparent 70%);
  pointer-events: none;
}

/* --- Proof strip --------------------------------------------------------- */

/* Six numbers, evenly weighted. They wrap rather than scroll, because a
   number that has to be swiped to is a number nobody reads. */
.stats {
  display: grid;
  margin: 0;
  padding: 0;
  gap: clamp(20px, 3vw, 30px) 12px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  list-style: none;
  text-align: center;
}

.stats li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Six numbers in the app's six band colours rather than six identical teal
   ones. The application draws its EQ bands as a spectrum; a row of figures
   about that application may as well be the same spectrum. */
.stats li {
  --stat: var(--secondary);
}

.stats li:nth-child(1) {
  --stat: #00e5ff;
}

.stats li:nth-child(2) {
  --stat: #00e5cf;
}

.stats li:nth-child(3) {
  --stat: #b6ff4a;
}

.stats li:nth-child(4) {
  --stat: #ffe66d;
}

.stats li:nth-child(5) {
  --stat: #ff3cac;
}

.stats li:nth-child(6) {
  --stat: #8b5cff;
}

.stats b {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--stat) 62%, #eefcfb),
    var(--stat) 78%
  );
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--stat) 34%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stats span {
  color: var(--text-faint);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-wrap: balance;
}

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(32px, 5vw, 52px);
}

/* Once there is room, the heading and its paragraph sit side by side rather
   than stacking into a narrow column with half the screen empty beside it.
   The centred variant — the pricing header — keeps its own arrangement. */
@media (min-width: 900px) {
  .section__head:not(.section__head--center) {
    display: grid;
    max-width: none;
    align-items: start;
    gap: 0 clamp(32px, 5vw, 64px);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .section__head:not(.section__head--center) p {
    margin-top: 6px;
  }
}

/* The hero wordmark runs to 84px and everything below it sat at 40px inside a
   box, so the whole lower page had one type size and no hierarchy. */
.section__head h2 {
  font-size: clamp(2rem, 5vw, 3.125rem);
}

.section__head p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.section__foot {
  margin-top: 28px;
  color: var(--text-faint);
  font-size: 0.9375rem;
}

/* --- Feature grid ------------------------------------------------------- */

.grid {
  display: grid;
  gap: 18px;
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30vw, 300px), 1fr));
}

.card {
  padding: 26px 24px 28px;
}

.card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid var(--border-field);
  border-radius: var(--r-m);
  background: rgba(0, 229, 207, 0.08);
  color: var(--secondary);
}

.card__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}

.card p {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* What a card does *not* do. Set apart by a rule rather than by a warning
   colour: this is scope, not a problem, and colouring it red would read as an
   apology for a deliberate design decision. */
.card__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-field);
  color: var(--text-faint);
  font-size: 0.875rem;
}

/* --- "Still stuck" -------------------------------------------------------- */

.stuck {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}

.stuck__icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid var(--border-field);
  border-radius: var(--r-m);
  background: rgba(0, 229, 207, 0.08);
  color: var(--secondary);
}

.stuck__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stuck h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
}

.stuck > p {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.stuck__actions {
  margin-top: 24px;
}

.stuck .page-next {
  margin-top: 28px;
  justify-content: center;
}

/* --- What is being built next ------------------------------------------- */

/* Deliberately not a card. Everything in the grid above exists today, and
   putting an unbuilt thing among them would read as a promise attached to the
   price. The dashed edge is the visual version of "not finished". */
.next {
  padding: clamp(26px, 4vw, 38px);
  border-style: dashed;
  text-align: center;
}

.next__eyebrow {
  color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.next h2 {
  margin-top: 12px;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.next > p:not(.next__eyebrow):not(.next__note) {
  max-width: 62ch;
  margin: 16px auto 0;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.next__note {
  max-width: 62ch;
  margin: 18px auto 0;
  color: var(--text-faint);
  font-size: 0.9375rem;
}

/* --- Euphoria beat ------------------------------------------------------ */

/* A short beat between two long sections. It used to sit beside a picture;
   that picture is a carousel slide now, so the copy is centred and given room
   instead of being left hanging against an empty half of the page. */
.euphoria__copy {
  max-width: 58ch;
  margin-inline: auto;
  padding-block: clamp(8px, 2vw, 24px);
  text-align: center;
}

/* The whole point of this section is that the interface goes rainbow, so the
   section goes rainbow. The sweep is the same one the hero title runs, at a
   different phase, so the page reads as one idea rather than two effects. */
.band--euphoria::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(70% 120% at 18% 0%, rgba(0, 229, 255, 0.16), transparent 62%),
    radial-gradient(60% 120% at 82% 100%, rgba(255, 60, 172, 0.13), transparent 62%),
    radial-gradient(80% 140% at 50% 50%, rgba(182, 255, 74, 0.07), transparent 66%);
  pointer-events: none;
}

.euphoria__eyebrow {
  color: var(--secondary-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.euphoria__copy h2 {
  /* Left to itself it broke as "And there is a / game hidden in it", so the
     first line was four function words carrying nothing. This holds the break
     after "game". */
  max-width: 20ch;
  margin-top: 14px;
  margin-inline: auto;
  background: linear-gradient(
    98deg,
    #eefcfb 0%,
    hsl(var(--hero-hue) 96% 80%) 38%,
    hsl(calc(var(--hero-hue) + 74deg) 94% 82%) 72%,
    hsl(calc(var(--hero-hue) + 140deg) 92% 84%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.875rem, 5vw, 3rem);
  /* Offset from the hero's phase so the two are never the same colour at the
     same moment, which would look like a bug rather than a theme. */
  animation: hero-spectrum 12s linear infinite -6s;
}

.euphoria__body {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
}

/* --- Rainbow mode preview ------------------------------------------------ */

/* Reproduces the application's RhythmGame trace rather than illustrating it:
   same mirrored filled wave, same lime onset spikes, same target line at dead
   centre, same five spectrum stops. The one liberty is that this loops on its
   own — in the app the wave is your live system audio and the spikes are real
   detected percussion. */

/* Registered so it can be animated at all. inherits:false is not a style
   choice: the application's own comment records that an inheriting version of
   this property cost gigabytes of memory, because every descendant gets its
   own animated copy. */
@property --euphoria-hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes euphoria-sweep {
  from {
    --euphoria-hue: 0deg;
  }

  to {
    --euphoria-hue: 360deg;
  }
}

/* Full width of the shell. At 560px this was a small card adrift in a band
   nine hundred pixels tall, with four hundred pixels of empty ground either
   side of the only picture in the section. */
.rainbow {
  margin: clamp(30px, 4vw, 44px) auto 0;
  text-align: center;
}

.rainbow__panel {
  display: grid;
  padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(18px, 2.4vw, 26px);
  gap: 14px;
  border: 1px solid var(--border-panel);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(10, 20, 32, 0.92), rgba(6, 13, 22, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.5);
}

/* The thing you actually tap. */
.rainbow__pet {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  margin: 4px auto 8px;
  place-items: center;
}

.rainbow__pet svg {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 12px rgba(0, 229, 207, 0.5));
}

/* The app's aura, value for value: a conic spectrum, half opacity, blurred,
   one turn every eight seconds. The green stop is this palette's lime rather
   than the app's spring green, which is the one colour in that gradient the
   token list does not carry. */
.rainbow__aura {
  position: absolute;
  z-index: 0;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #00e5ff,
    #b6ff4a,
    #ffe66d,
    #ff3cac,
    #8b5cff,
    #00e5ff
  );
  opacity: 0.5;
  filter: blur(13px);
  animation: pet-aura-spin 8s linear infinite;
}

@keyframes pet-aura-spin {
  to {
    rotate: 360deg;
  }
}

.rainbow__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* The badge the app shows once the mode is running, at its own size. */
.rainbow__pill {
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: hsl(var(--euphoria-hue) 95% 62%);
  /* The app's own on-accent label colour, so dark text on a bright swept
     background stays the same near-black it is in the product. */
  color: #03201d;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: euphoria-sweep 3.6s linear infinite;
}

/* The app never shows the streak count — the goal is communicated as ×10 and
   nothing else, so that is all this shows too. */
/* The multiplier is the goal; the badge beside it is chrome. It used to be the
   quietest thing in the panel, sitting in the shadow of a large saturated
   pill — exactly the wrong way round. */
.rainbow__goal {
  padding: 2px 14px;
  border: 1px solid rgba(182, 255, 74, 0.45);
  border-radius: var(--r-pill);
  background: rgba(182, 255, 74, 0.16);
  color: var(--neon-lime);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Demoted to match: it is a state label, not the prize. */
.rainbow__pill {
  font-size: 0.5625rem;
}

.rainbow__trace {
  position: relative;
  overflow: hidden;
  height: 56px;
  border-radius: var(--r-s);
  /* Euphoria.scss recolours this border with the swept hue. */
  border: 1px solid hsl(var(--euphoria-hue) 90% 62% / 55%);
  background: linear-gradient(180deg, rgba(10, 20, 32, 0.9), rgba(6, 13, 22, 0.94));
  box-shadow: 0 0 18px hsl(var(--euphoria-hue) 95% 60% / 30%);
  animation: euphoria-sweep 3.6s linear infinite;
}

.rainbow__svg {
  width: 100%;
  height: 100%;
}

/* Exactly one period, so the seam lands where the shape repeats. */
.rainbow__scroll {
  /* Four equally spaced beats cross the target in 2.4s: the same 600ms beat
     interval as the product's 100-BPM rhythm game. */
  animation: rainbow-scroll 2.4s linear infinite;
}

@keyframes rainbow-scroll {
  from {
    transform: translateX(0);
  }

  to {
    /* Exactly one period of the generated path, so the loop has no seam. */
    transform: translateX(-96px);
  }
}

/* Inside the mask, so these are luminance values rather than colours: solid
   white edge, mid-grey body, which comes out as a bright stroke over a
   translucent fill once the spectrum shows through. */
.rainbow__wave {
  fill: #ffffff;
  fill-opacity: 0.45;
  stroke: #ffffff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.rainbow__peak {
  stroke: var(--neon-lime);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(182, 255, 74, 0.95))
    drop-shadow(0 0 9px rgba(182, 255, 74, 0.55));
}

/* The line you are aiming at. It used to be a 4px swept bar, which at most
   points in the sweep was the same width and very nearly the same colour as
   the lime spikes travelling toward it — five identical verticals in the box
   and no way to tell which one was the target. It is a pale hairline in a
   bracket now: different weight, different colour family, and the caps read as
   "aim here" whatever the hue is doing. */
.rainbow__target {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(238, 252, 251, 0.85);
  box-shadow: 0 0 10px rgba(238, 252, 251, 0.55);
  translate: -1px 0;
}

/* Caps top and bottom, pointing in at the line. */
.rainbow__target::before,
.rainbow__target::after {
  content: '';
  position: absolute;
  left: 50%;
  border: 5px solid transparent;
  translate: -50% 0;
}

.rainbow__target::before {
  top: 0;
  border-top-color: var(--text-primary);
}

.rainbow__target::after {
  bottom: 0;
  border-bottom-color: var(--text-primary);
}

/* Was 0.45 alpha, which measures about 3.55:1 on this panel and fails AA. */
.rainbow__hint {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.rainbow__unlock {
  margin-top: 18px;
  font-size: 0.9375rem;
}

/* --- What Rainbow mode actually does -------------------------------------- */

.does {
  max-width: 940px;
  margin: clamp(34px, 4.5vw, 56px) auto 0;
  text-align: left;
}

.does__title {
  color: var(--secondary-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.does__list {
  display: grid;
  margin: 20px 0 0;
  padding: 0;
  gap: 14px clamp(28px, 4vw, 48px);
  list-style: none;
}

@media (min-width: 820px) {
  .does__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* One marker per item, stepping through the same spectrum the mode runs. */
.does__list li {
  position: relative;
  min-width: 0;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.does__list li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--secondary));
}

.does__list li:nth-child(1) {
  --dot: #00e5ff;
}

.does__list li:nth-child(2) {
  --dot: #00e5cf;
}

.does__list li:nth-child(3) {
  --dot: #b6ff4a;
}

.does__list li:nth-child(4) {
  --dot: #ffe66d;
}

.does__list li:nth-child(5) {
  --dot: #ff3cac;
}

.does__list li:nth-child(6) {
  --dot: #8b5cff;
}

.does__list li:nth-child(7) {
  --dot: #9cfff4;
}

/* Hold the colour, stop the motion — which needs the hue pinned, not just the
   animation removed. Without the explicit value --euphoria-hue falls back to
   its initial 0deg, and hue 0 is red: a red RAINBOW MODE badge, a red frame,
   and a red target line, which in every rhythm game ever made means you
   missed. */
@media (prefers-reduced-motion: reduce) {
  .rainbow__scroll,
  .rainbow__trace,
  .rainbow__target,
  .rainbow__pill,
  .rainbow__aura {
    --euphoria-hue: 165deg;
    animation: none;
  }
}

/* --- How it works ------------------------------------------------------- */

.steps {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
}

/* Cards rather than three columns of loose text. Unpanelled they read as an
   afterthought between two sections that both have ground of their own, and
   they stopped two-thirds of the way across a wide screen with nothing to
   hold the right-hand third. */
/* No border, no fill. A card here was one more rounded rectangle in a column
   of them; a rule and a large numeral carry the sequence on their own. */
.step {
  position: relative;
  padding: 22px 0 0;
}

/* Three steps, three colours off the same band spectrum the rest of the page
   uses, so the sequence is legible at a glance rather than three identical
   teal boxes in a row. */
.step {
  --step: var(--secondary);
}

.step:nth-child(1) {
  --step: #00e5ff;
}

.step:nth-child(2) {
  --step: #b6ff4a;
}

.step:nth-child(3) {
  --step: #ff3cac;
}

/* The numeral is scenery, not a label — big, cropped by the card's own corner,
   and dim enough that the heading still wins. */
/* Sits above the heading at full strength rather than hiding behind it as a
   watermark. It is the only large type in this section and there is no reason
   to whisper it. */
.step__n {
  display: block;
  margin-bottom: 6px;
  color: var(--step);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.step h3 {
  position: relative;
}

.step p {
  position: relative;
  /* Keeps the last line of prose clear of the numeral in the corner. */
  padding-right: 40px;
}

/* A lit top edge that fades left to right, so the three cards read as a
   sequence rather than three unrelated boxes. It replaces the connector rule
   that used to run between them, which no longer had a gap to run through. */
.step::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--step),
    color-mix(in srgb, var(--step) 0%, transparent) 78%
  );
}

.step h3 {
  font-size: 1.1875rem;
  font-weight: 700;
}

.step p {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 1rem;
}


/* --- What's new ---------------------------------------------------------- */

.news {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

.news__lead h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
}

.news__lead .btn {
  margin-top: 22px;
}

@media (min-width: 900px) {
  /* Centred against the notes rather than pinned to their top edge. Pinned, a
     two-line heading sat above half a column of nothing while the panel beside
     it ran on for four hundred pixels. */
  .news {
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    /* Was 0.8:1.5, which left the heading marooned in a narrow strip beside a
       very wide block of notes. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }

}

/* --- Pricing ------------------------------------------------------------ */

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 44px);
}

.pricing__lead {
  max-width: 54ch;
  text-align: center;
}

.pricing__lead h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
}

.pricing__lead > p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

/* Side by side once there is room, with the argument left and the ask right —
   the reading order a price wants. */
@media (min-width: 940px) {
  .pricing {
    display: grid;
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  }

  .pricing__lead {
    max-width: none;
    text-align: left;
  }
}

.pricing__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 34px 32px;
  /* The one element on the page allowed a coloured edge. Everything else uses
     the neutral hairline, so this reads as the focal point rather than as one
     more panel in a stack of panels. */
  border-color: rgba(0, 229, 207, 0.28);
  /* One teal halo on the page, and it belongs here. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.34),
    0 0 90px rgba(0, 229, 207, 0.13);
}

/* A lit top edge, brightest in the middle — the same trick the app uses on its
   active tab, so the page and the product agree with each other. */
.pricing__card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 18%;
  left: 18%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--secondary-light),
    transparent
  );
}

.pricing__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pricing__amount {
  font-size: clamp(2.75rem, 7vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.pricing__unit {
  color: var(--text-faint);
  font-size: 0.9375rem;
}

.pricing__list {
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
}

.pricing__list li {
  position: relative;
  padding-left: 28px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.pricing__list li + li {
  margin-top: 12px;
}

.pricing__list li::before {
  content: '';
  position: absolute;
  top: 0.42em;
  left: 4px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(-45deg);
}

.pricing__warn {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-m);
  background: rgba(10, 20, 31, 0.62);
  color: var(--text-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* GPL notice: muted, but beside the price where it cannot be missed. This is a
   licence requirement, not a footnote — hence the accent rule rather than a
   line of small print at the bottom of the card. */
.pricing__gpl {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid rgba(0, 229, 207, 0.4);
  color: var(--text-faint);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* --- Home résumé lists --------------------------------------------------- */

/* The seven workspaces, named rather than described. The landing page says
   what exists; /features says what each one does. */
/* Seven items never divide evenly into a grid, and a strict three-column one
   left Config stranded alone on a row of its own, reading as a mistake. Flex
   with a centred wrap makes the short last row deliberate instead. */
/* An editorial list, not seven chips. As bordered boxes these were seven more
   rounded rectangles in a page that already had nineteen of them, every label
   set at the same 13px as everything else — no scale contrast anywhere below
   the fold. Rows with a hairline and a name at twice the size read as a
   contents page for the product, which is what they are. */
.workspaces {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 860px) {
  .workspaces {
    column-gap: clamp(36px, 5vw, 72px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.workspaces li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  padding: 18px 0;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 1rem;
}

.workspaces li > div {
  min-width: 0;
}

/* Same 24-unit grid and stroke weight as the icons on /features, at a smaller
   size — these label a list item, not a card. */
/* Seven workspaces across the band spectrum, in the order the tabs appear —
   the same sweep the EQ page draws, so the list reads as the product rather
   than as seven identical teal chips. */
.workspaces li {
  --ws: var(--secondary);
}

.workspaces li:nth-child(1) {
  --ws: #00e5ff;
}

.workspaces li:nth-child(2) {
  --ws: #00e5cf;
}

.workspaces li:nth-child(3) {
  --ws: #b6ff4a;
}

.workspaces li:nth-child(4) {
  --ws: #ffe66d;
}

.workspaces li:nth-child(5) {
  --ws: #ff3cac;
}

.workspaces li:nth-child(6) {
  --ws: #8b5cff;
}

.workspaces li:nth-child(7) {
  --ws: #9cfff4;
}

.workspaces strong {
  color: var(--ws);
}

.ws__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  margin-top: 2px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ws) 34%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--ws) 12%, transparent);
  color: var(--ws);
}

.ws__icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspaces strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ws);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Two columns once there is width for them, so six questions read as a block
   rather than a thin ribbon down the left of a wide screen. */
.qlinks {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px clamp(32px, 5vw, 64px);
  list-style: none;
}

@media (min-width: 820px) {
  .qlinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Rows with an edge rather than underlined text. A bare list was the flattest
   thing on the page once every section around it had ground of its own, and it
   did not look like six things you could click. */
.qlinks a {
  display: flex;
  align-items: center;
  padding: 15px 16px;
  gap: 12px;
  border: 1px solid var(--border-panel);
  border-radius: var(--r-m);
  background: rgba(10, 20, 31, 0.42);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    color var(--ease),
    border-color var(--ease),
    background var(--ease);
}

.qlinks a::after {
  content: '→';
  margin-left: auto;
  color: var(--secondary);
  opacity: 0.45;
  transition: opacity var(--ease), transform var(--ease);
}

.qlinks a:hover {
  border-color: rgba(0, 229, 207, 0.34);
  background: rgba(0, 229, 207, 0.06);
  color: var(--secondary-light);
}

.qlinks a:hover::after {
  opacity: 1;
  transform: translateX(3px);
}

/* --- Requirements icons -------------------------------------------------- */

.requirements__list dt {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Same idea as the workspaces and the steps: one hue per row rather than a
   column of identical teal chips. */
.requirements__list > div {
  --req: var(--secondary);
}

.requirements__list > div:nth-child(1) {
  --req: #00e5ff;
}

.requirements__list > div:nth-child(2) {
  --req: #ffe66d;
}

.requirements__list > div:nth-child(3) {
  --req: #8b5cff;
}

.requirements__list > div:nth-child(4) {
  --req: #ff3cac;
}

.requirements__list dt {
  color: var(--req);
}

.req__icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--req) 34%, transparent);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--req) 12%, transparent);
  color: var(--req);
}

.req__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The link out at the foot of a section, and between sibling pages. */
.page-next {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

/* --- What's new (landing page) ------------------------------------------ */

.whats-new {
  padding: 32px;
}

.whats-new__body p {
  max-width: 72ch;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.whats-new__body p + p {
  margin-top: 16px;
}

.whats-new__body strong {
  color: var(--text-primary);
}

.whats-new .btn {
  margin-top: 26px;
}

/* --- Changelog page ------------------------------------------------------

   Rendered from CHANGELOG.md, so the styling has to cover whatever markdown
   the release notes happen to use rather than a fixed set of components. */

.hero--page {
  padding-bottom: clamp(28px, 4vw, 44px);
}

.hero__title--page {
  font-size: clamp(2.5rem, 7vw, 4rem);
}

.hero__meta a {
  color: inherit;
}

.hero__meta a:hover {
  color: var(--secondary-light);
}

.changelog {
  display: grid;
  gap: 20px;
}

.release {
  /* Grid items default to min-width:auto, which means they refuse to shrink
     below their content's minimum. One long unbreakable token — a filename in
     a code span — then widens the card past the viewport. This is the fix for
     that, not decoration. */
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--border-panel);
  border-radius: var(--r-xl);
  background: linear-gradient(
    180deg,
    var(--panel-top) 0%,
    var(--panel-bottom) 62%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 20px 48px rgba(0, 0, 0, 0.2);
}

.release__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.release__version {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.release__version a {
  color: var(--text-primary);
  text-decoration: none;
}

.release__version a:hover {
  color: var(--secondary-light);
}

.release__badge {
  padding: 4px 12px;
  border: 1px solid var(--border-field);
  border-radius: var(--r-pill);
  background: rgba(0, 229, 207, 0.08);
  color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.release__body {
  color: var(--text-muted);
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}

/* Filenames and config keys have no spaces to break at, so they need
   permission to break anywhere rather than pushing the card wider. */
.release__body code {
  overflow-wrap: anywhere;
}

.release__body > p {
  max-width: 78ch;
  font-size: 1rem;
}

.release__body > p + p {
  margin-top: 14px;
}

/* "New", "Changed", "Fixed". */
.release__body h3 {
  margin-top: 34px;
  margin-bottom: 16px;
  color: var(--secondary-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.release__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.release__body li {
  position: relative;
  max-width: 82ch;
  padding-left: 22px;
}

.release__body li + li {
  margin-top: 14px;
}

.release__body li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--secondary);
  opacity: 0.55;
}

.release__body strong {
  color: var(--text-primary);
  font-weight: 700;
}

.release__body code {
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: rgba(10, 20, 31, 0.62);
  color: var(--secondary-light);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.875em;
}

/* Wide content must scroll inside its own box rather than the page. */
.release__body pre {
  overflow-x: auto;
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-m);
  background: rgba(10, 20, 31, 0.62);
}

.release__body pre code {
  padding: 0;
  border: 0;
  background: none;
}

.release__body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.875rem;
}

.release__body th,
.release__body td {
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.release__body th {
  color: var(--text-primary);
}

.release__body blockquote {
  margin: 16px 0;
  padding-left: 16px;
  border-left: 2px solid var(--border-field);
  color: var(--text-faint);
}

/* --- Requirements ------------------------------------------------------- */

/* Columns under rules, not a panel. Boxed, this was the fourth bordered
   rectangle in a row and the least interesting of them; the same three facts
   read better as three plain columns with a coloured rule over each. */
.requirements dl {
  display: grid;
  margin: 0;
  gap: 28px 40px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.requirements dl > div {
  padding-top: 18px;
  border-top: 2px solid color-mix(in srgb, var(--req) 55%, transparent);
}

.requirements dt {
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.requirements dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 12px;
}

.faq__item {
  overflow: hidden;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--ease);
}

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

.faq__item summary:hover {
  color: var(--secondary-light);
}

/* Chevron. Two borders on a rotated square — no icon file for one glyph. */
.faq__item summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms ease;
}

.faq__item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq__body {
  padding: 0 24px 22px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.faq__body p + p {
  margin-top: 14px;
}

.faq__body strong {
  color: var(--text-primary);
}

/* --- Footer ------------------------------------------------------------- */

.footer {
  padding-bottom: 56px;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--section-y);
}

.footer__brand {
  display: grid;
  align-items: end;
  padding-bottom: clamp(30px, 4vw, 48px);
  gap: 14px 30px;
  border-bottom: 1px solid var(--border-subtle);
  grid-template-columns: auto minmax(0, 1fr);
}

.footer__wordmark {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.footer__wave {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(156, 255, 244, 0.2);
  border-radius: 12px;
  background: rgba(0, 229, 207, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.footer__wave::before {
  content: '∿';
  color: var(--secondary-light);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-2px);
}

.footer__brand > p {
  justify-self: end;
  color: rgba(216, 210, 255, 0.42);
  font-size: clamp(1rem, 2vw, 1.2rem);
  text-align: right;
}

.footer__signal {
  display: block;
  height: 2px;
  grid-column: 1 / -1;
  background: linear-gradient(90deg, #00e5ff, #b6ff4a 30%, #ffe66d 50%, #ff3cac 72%, #8b5cff, transparent);
  opacity: 0.52;
}

.license {
  padding: 32px;
}

.license__head {
  max-width: 46ch;
  font-size: clamp(1.25rem, 2.8vw, 1.625rem);
  font-weight: 750;
}

.license__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.license__same-place {
  max-width: 78ch;
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.license__note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  max-width: 78ch;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.license__warranty {
  max-width: 78ch;
  margin-top: 14px;
  color: var(--text-faint);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.footer__cols {
  display: grid;
  gap: 32px;
  margin-top: 48px;
  grid-template-columns: minmax(0, 1.65fr) minmax(170px, 0.55fr) minmax(240px, 0.9fr);
}

.footer__col {
  min-width: 0;
}

.footer__col + .footer__col {
  padding-left: 28px;
  border-left: 1px solid var(--border-subtle);
}

@media (max-width: 780px) {
  .footer__brand {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .footer__brand > p {
    justify-self: start;
    text-align: left;
  }

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

  .footer__col + .footer__col {
    padding-top: 28px;
    padding-left: 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }
}

/* --- Attribution (on /source) -------------------------------------------- */

.attribution {
  padding: 32px;
}

.attribution__lead {
  max-width: 72ch;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 1.0625rem;
}

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

.attribution__list li {
  position: relative;
  max-width: 82ch;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.attribution__list li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--secondary);
  opacity: 0.55;
}

.footer__licence {
  max-width: 68ch;
  margin-bottom: 22px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.footer .license__links {
  display: grid;
  gap: 8px;
}

.footer .license__links .btn {
  min-height: 38px;
  justify-content: flex-start;
  padding: 8px 12px;
  font-size: 0.78rem;
  text-align: left;
}

.footer__col h3 {
  margin-bottom: 16px;
  color: var(--secondary-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Leads the attribution column, so the first thing read there is who wrote
   FluidEQ rather than whose fork it started from. */
.footer__lead {
  max-width: 68ch;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col li {
  color: var(--text-faint);
  font-size: 0.875rem;
  line-height: 1.65;
}

.footer__col li + li {
  margin-top: 10px;
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  columns: auto;
}

.footer__col .langs li,
.footer__col .langs li + li {
  margin: 0;
}

.langs a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(216, 210, 255, 0.1);
  border-radius: 999px;
  background: rgba(8, 15, 25, 0.42);
  color: var(--text-faint);
  text-decoration: none;
}

.langs a:hover {
  color: var(--secondary-light);
}

.langs a[aria-current='true'] {
  border-color: rgba(0, 229, 207, 0.28);
  background: rgba(0, 229, 207, 0.08);
  color: var(--secondary);
  font-weight: 700;
}

/* Said once, at the foot of a translated page, rather than apologised for
   beside every link that leads somewhere English. */
.english-note {
  margin-top: 28px;
  color: var(--text-faint);
  font-size: 0.875rem;
}

.whats-new__note {
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.footer__legal {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-faint);
  font-size: 0.8125rem;
}

/* --- Secondary pages: one system, five instruments --------------------- */

.inner-page main {
  overflow: clip;
}

.inner-page .page-hero {
  display: grid;
  min-height: clamp(560px, 72vh, 760px);
  align-items: center;
  padding-top: clamp(72px, 9vw, 122px);
  padding-bottom: clamp(72px, 9vw, 118px);
  gap: clamp(46px, 7vw, 96px);
  grid-template-columns: minmax(0, 0.88fr) minmax(390px, 1.12fr);
  overflow: visible;
}

.inner-page .page-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 9%;
  right: -24vw;
  bottom: 0;
  left: 38%;
  background:
    linear-gradient(rgba(216, 210, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 210, 255, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 42% 48%, rgba(0, 229, 207, 0.12), transparent 60%);
  background-size: 44px 44px, 44px 44px, auto;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 78%, transparent);
  opacity: 0.72;
  pointer-events: none;
}

.inner-page .page-hero__copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.inner-page .page-hero .hero__title {
  position: relative;
  z-index: 3;
  width: fit-content;
  min-width: min-content;
  max-width: 10.5ch;
  font-size: clamp(3.6rem, 7.3vw, 6.4rem);
  line-height: 0.88;
  text-wrap: wrap;
}

.inner-page .page-hero > :not(.page-hero__copy) {
  position: relative;
  z-index: 1;
}

.inner-page .page-hero .hero__sub {
  max-width: 47ch;
  margin-top: 28px;
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.64;
}

.inner-page .page-hero .hero__meta {
  justify-content: flex-start;
  margin-top: 30px;
}

.inner-page .page-hero .hero__eyebrow {
  position: relative;
  display: inline-flex;
  width: max-content;
  margin-bottom: 28px;
  border: 0;
  border-radius: 0;
  padding: 0 0 12px;
  background: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inner-page .page-hero .hero__eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 74px;
  height: 2px;
  background: linear-gradient(90deg, var(--secondary), #b6ff4a, #ff3cac);
  box-shadow: 0 0 16px rgba(0, 229, 207, 0.3);
}

/* Features: a real application frame above a bento feature atlas. */
.page-showcase {
  position: relative;
  width: min(760px, 60vw);
  margin: 0;
  perspective: 1500px;
}

.page-showcase::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 6% -5% -8% 9%;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 50%, rgba(0, 229, 207, 0.22), rgba(139, 92, 255, 0.08) 46%, transparent 72%);
  filter: blur(22px);
}

.page-showcase picture {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(156, 255, 244, 0.24);
  border-radius: 20px;
  background: var(--surface-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 42px 100px rgba(0, 0, 0, 0.48);
  transform: rotateY(-7deg) translateX(-2%);
  transform-origin: left center;
}

.page-showcase img {
  display: block;
  width: 100%;
  height: auto;
}

.page-showcase figcaption {
  position: absolute;
  right: 3%;
  bottom: -48px;
  left: 7%;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(216, 210, 255, 0.16);
  border-radius: 16px;
  background: rgba(7, 14, 23, 0.9);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-showcase figcaption span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 15px 17px;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.3;
  text-transform: uppercase;
}

.page-showcase figcaption span + span {
  border-left: 1px solid var(--border-subtle);
}

.page-showcase figcaption b {
  margin-bottom: 3px;
  color: var(--secondary-light);
  font-size: 1.5rem;
  line-height: 1;
}

.features-page .feature-atlas .grid {
  counter-reset: feature-card;
}

@media (min-width: 860px) {
  .features-page .feature-atlas .grid--3 {
    grid-auto-flow: dense;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .features-page .feature-atlas .card {
    grid-column: span 4;
  }

  .features-page .feature-atlas .card:nth-child(1),
  .features-page .feature-atlas .card:nth-child(8) {
    grid-column: span 7;
  }

  .features-page .feature-atlas .card:nth-child(2),
  .features-page .feature-atlas .card:nth-child(7) {
    grid-column: span 5;
  }
}

.features-page .feature-atlas .card {
  --card-accent: var(--secondary);
  position: relative;
  min-height: 238px;
  overflow: hidden;
  padding: 34px 30px;
  counter-increment: feature-card;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--card-accent) 13%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(19, 45, 58, 0.86), rgba(7, 14, 23, 0.96));
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.features-page .feature-atlas .card:nth-child(3n + 1) { --card-accent: #00e5ff; }
.features-page .feature-atlas .card:nth-child(3n + 2) { --card-accent: #b6ff4a; }
.features-page .feature-atlas .card:nth-child(3n) { --card-accent: #ff3cac; }

.features-page .feature-atlas .card::before {
  content: counter(feature-card, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: 24px;
  color: color-mix(in srgb, var(--card-accent) 64%, var(--text-primary));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.features-page .feature-atlas .card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  opacity: 0.56;
}

.features-page .feature-atlas .card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 40%, transparent);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.36), 0 0 46px color-mix(in srgb, var(--card-accent) 9%, transparent);
  transform: translateY(-7px);
}

.features-page .feature-atlas .card__icon {
  border-color: color-mix(in srgb, var(--card-accent) 36%, transparent);
  background: color-mix(in srgb, var(--card-accent) 11%, transparent);
  color: var(--card-accent);
}

.features-page .feature-atlas .card h3 {
  max-width: 20ch;
  font-size: clamp(1.25rem, 2vw, 1.62rem);
}

.features-page .feature-atlas .card p {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.62;
}

/* Pricing: one clear paid offer, followed by the equally real free route. */
.pricing-page .pricing-hero {
  min-height: clamp(640px, 79vh, 820px);
  padding-bottom: clamp(74px, 9vw, 118px);
  gap: clamp(26px, 3.5vw, 48px);
  grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1fr);
}

.pricing-page .pricing-hero::before {
  top: 18%;
  right: -18%;
  width: 70%;
  height: 72%;
  background: radial-gradient(circle, rgba(0, 229, 207, 0.12), transparent 66%);
}

.pricing-page .pricing-hero .hero__title {
  max-width: 13ch;
}

@media (min-width: 901px) {
  .pricing-page .pricing-hero .hero__title {
    width: max-content;
    max-width: none;
    padding-right: 0.08em;
    font-size: clamp(3rem, 4.2vw, 4.2rem);
    white-space: nowrap;
  }
}

.price-orbit {
  position: relative;
  display: grid;
  width: min(430px, 40vw);
  aspect-ratio: 1;
  margin-inline: auto;
  place-items: center;
  border: 1px solid rgba(156, 255, 244, 0.2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 229, 207, 0.2), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(10, 20, 31, 0.94) 0 50%, transparent 51%),
    conic-gradient(from 20deg, rgba(0, 229, 255, 0.3), rgba(182, 255, 74, 0.08), rgba(255, 60, 172, 0.26), rgba(139, 92, 255, 0.16), rgba(0, 229, 255, 0.3));
  box-shadow: inset 0 0 80px rgba(0, 229, 207, 0.08), 0 36px 100px rgba(0, 0, 0, 0.42);
}

.price-orbit__ring {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(156, 255, 244, 0.22);
  border-radius: 50%;
  animation: page-orbit 18s linear infinite;
}

.price-orbit__ring::before,
.price-orbit__ring::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 18px rgba(0, 229, 207, 0.7);
}

.price-orbit__ring::before { top: 9%; left: 17%; }
.price-orbit__ring::after { right: 7%; bottom: 22%; background: #ff3cac; }

.price-orbit__amount {
  position: relative;
  z-index: 2;
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 850;
  letter-spacing: -0.08em;
  line-height: 0.8;
}

.price-orbit__unit {
  position: absolute;
  top: 67%;
  color: var(--secondary-light);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-orbit__free {
  position: absolute;
  top: 12%;
  right: -2%;
  display: flex;
  align-items: baseline;
  padding: 10px 15px;
  gap: 7px;
  border: 1px solid rgba(182, 255, 74, 0.3);
  border-radius: var(--r-pill);
  background: rgba(13, 24, 22, 0.9);
  color: #b6ff4a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.price-orbit__free b { font-size: 1.15rem; }

.price-orbit__pulse {
  position: absolute;
  inset: 24%;
  border: 1px solid rgba(0, 229, 207, 0.28);
  border-radius: 50%;
  animation: price-pulse 3s ease-out infinite;
}

@keyframes price-pulse {
  0% { scale: 0.82; opacity: 0; }
  35% { opacity: 0.62; }
  100% { scale: 1.56; opacity: 0; }
}

.pricing-paid {
  padding-top: clamp(18px, 3vw, 38px);
}

.pricing-paid .pricing-offer {
  max-width: 760px;
  margin-inline: auto;
}

.pricing-offer {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(156, 255, 244, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 229, 207, 0.11), transparent 36%),
    linear-gradient(150deg, rgba(17, 34, 46, 0.96), rgba(5, 11, 18, 0.99));
  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.pricing-offer::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary-light), transparent);
  box-shadow: 0 0 20px rgba(0, 229, 207, 0.42);
}

.pricing-offer__top,
.pricing-offer__top p,
.pricing-offer__status,
.pricing-offer__price {
  display: flex;
  align-items: center;
}

.pricing-offer__top {
  justify-content: space-between;
  padding-bottom: 20px;
  gap: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.pricing-offer__top p {
  margin: 0;
  gap: 10px;
}

.pricing-offer__top strong,
.pricing-offer__top span,
.pricing-offer__status {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-offer__top strong { color: var(--secondary-light); }
.pricing-offer__top p span { color: var(--text-faint); }

.pricing-offer__status {
  padding: 7px 10px;
  gap: 7px;
  border: 1px solid rgba(216, 210, 255, 0.13);
  border-radius: var(--r-pill);
  background: rgba(2, 8, 13, 0.38);
  color: var(--text-muted);
  white-space: nowrap;
}

.pricing-offer__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 10px rgba(0, 229, 207, 0.64);
}

.pricing-offer__price {
  margin: 30px 0 28px;
  align-items: flex-start;
  flex-direction: column;
  gap: 9px;
}

.pricing-offer__price > span {
  background: linear-gradient(125deg, #fff, var(--secondary-light) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(5rem, 9vw, 7.5rem);
  font-weight: 850;
  letter-spacing: -0.085em;
  line-height: 0.92;
  padding: 0.04em 0.08em 0.08em 0;
}

.pricing-offer__price small {
  max-width: none;
  margin-left: 4px;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pricing-offer__list {
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}

.pricing-offer__list li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.48;
}

.pricing-offer__list li::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 3px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid var(--secondary);
  border-left: 2px solid var(--secondary);
  transform: rotate(-45deg);
}

.pricing-offer .btn:disabled {
  color: rgba(238, 252, 251, 0.58);
  border-color: rgba(216, 210, 255, 0.14);
  background: linear-gradient(115deg, rgba(22, 31, 42, 0.96), rgba(12, 20, 29, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pricing-offer__warn {
  margin-top: 18px;
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.58;
}

.pricing-offer__warn a {
  color: var(--secondary-light);
  white-space: nowrap;
}

.pricing-source-band {
  padding-block: clamp(62px, 8vw, 98px);
  border-block: 1px solid var(--border-subtle);
  background:
    radial-gradient(60% 140% at 0% 50%, rgba(182, 255, 74, 0.055), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent);
}

.pricing-source {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pricing-source__price {
  display: flex;
  min-width: 148px;
  flex-direction: column;
  padding-right: clamp(26px, 4vw, 52px);
  border-right: 1px solid var(--border-subtle);
}

.pricing-source__price strong {
  color: #b6ff4a;
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: 850;
  letter-spacing: -0.08em;
  line-height: 0.84;
}

.pricing-source__price span {
  margin-top: 14px;
  color: var(--text-faint);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pricing-source__copy h2 {
  max-width: 15ch;
  margin-top: 8px;
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  line-height: 0.98;
}

.pricing-source__copy > p:last-child {
  max-width: 68ch;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.68;
}

.pricing-source > .btn {
  min-width: max-content;
}

/* FAQ: a live answer desk beside the native accordion. */
.question-field {
  position: relative;
  width: min(410px, 42vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(156, 255, 244, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 229, 207, 0.17), transparent 29%),
    repeating-radial-gradient(circle, transparent 0 42px, rgba(216, 210, 255, 0.07) 43px 44px);
  box-shadow: inset 0 0 70px rgba(0, 229, 207, 0.05), 0 34px 90px rgba(0, 0, 0, 0.35);
}

.question-field__core {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-primary);
  filter: drop-shadow(0 0 26px rgba(0, 229, 207, 0.42));
  font-size: clamp(7rem, 14vw, 11rem);
  font-weight: 850;
  line-height: 1;
  translate: -50% -54%;
}

.question-field__orbit {
  position: absolute;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border-field);
  border-radius: 50%;
  background: rgba(7, 15, 24, 0.92);
  color: var(--secondary-light);
  font-size: 0.69rem;
  font-weight: 800;
  box-shadow: 0 0 22px rgba(0, 229, 207, 0.16);
}

.question-field__orbit--one { top: 10%; left: 47%; }
.question-field__orbit--two { top: 55%; right: 3%; }
.question-field__orbit--three { bottom: 3%; left: 23%; }

.question-field > i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 12px rgba(0, 229, 207, 0.7);
}

.question-field > i:nth-of-type(1) { top: 27%; left: 12%; }
.question-field > i:nth-of-type(2) { top: 20%; right: 20%; background: #b6ff4a; }
.question-field > i:nth-of-type(3) { right: 17%; bottom: 22%; background: #ff3cac; }
.question-field > i:nth-of-type(4) { bottom: 18%; left: 13%; background: #8b5cff; }
.question-field > i:nth-of-type(5) { top: 49%; left: 4%; }

.faq-stage__layout {
  display: grid;
  align-items: start;
  gap: clamp(30px, 5vw, 72px);
  grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1.5fr);
}

.faq-companion {
  position: sticky;
  top: 96px;
  overflow: hidden;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--border-panel);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 100% 0, rgba(0, 229, 207, 0.16), transparent 42%),
    linear-gradient(155deg, rgba(19, 45, 58, 0.88), rgba(7, 14, 23, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

.faq-companion h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.faq-companion > p { margin-top: 16px; color: var(--text-muted); line-height: 1.62; }
.faq-companion .btn { width: 100%; margin-top: 26px; overflow: hidden; text-overflow: ellipsis; }

.faq-companion__signal {
  display: block;
  height: 2px;
  margin-top: 34px;
  background: linear-gradient(90deg, #00e5ff, #b6ff4a, #ffe66d, #ff3cac, #8b5cff);
  box-shadow: 0 0 18px rgba(0, 229, 207, 0.28);
}

.faq-stage__answers .faq { counter-reset: faq-item; }

.faq-stage__answers .faq__item {
  position: relative;
  counter-increment: faq-item;
  border-color: rgba(216, 210, 255, 0.12);
  background: rgba(8, 16, 26, 0.68);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.faq-stage__answers .faq__item summary {
  min-height: 78px;
  padding: 22px 24px;
}

.faq-stage__answers .faq__item summary::before {
  content: counter(faq-item, decimal-leading-zero);
  width: 36px;
  flex: none;
  color: var(--secondary);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.faq-stage__answers .faq__item[open] {
  border-color: rgba(0, 229, 207, 0.3);
  background:
    radial-gradient(circle at 100% 0, rgba(0, 229, 207, 0.09), transparent 38%),
    rgba(8, 16, 26, 0.92);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28), 0 0 40px rgba(0, 229, 207, 0.06);
  transform: translateX(-8px);
}

.faq-stage__answers .faq__body {
  padding: 0 66px 28px 84px;
  font-size: 1rem;
  line-height: 1.7;
}

/* Source: command line first, then legal and build information as a system. */
.source-terminal {
  position: relative;
  overflow: hidden;
  width: min(620px, 52vw);
  margin-inline: auto;
  border: 1px solid rgba(156, 255, 244, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 110%, rgba(0, 229, 207, 0.09), transparent 42%),
    rgba(5, 11, 18, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 42px 100px rgba(0, 0, 0, 0.46),
    0 0 70px rgba(0, 229, 207, 0.08);
}

.source-terminal__bar {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 17px;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(19, 45, 58, 0.8), rgba(10, 20, 31, 0.78));
}

.source-terminal__lights {
  display: flex;
  gap: 6px;
}

.source-terminal__lights i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.55;
}

.source-terminal__lights i:nth-child(2) { background: #ffe66d; }
.source-terminal__lights i:nth-child(3) { background: #b6ff4a; }

.source-terminal__title {
  overflow: hidden;
  color: var(--text-muted);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-terminal__branch {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(0, 229, 207, 0.19);
  border-radius: var(--r-pill);
  background: rgba(0, 229, 207, 0.07);
  color: var(--secondary-light);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-terminal__body {
  display: grid;
  gap: 8px;
  padding: clamp(26px, 4vw, 44px);
  color: var(--text-muted);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: clamp(0.77rem, 1.2vw, 0.94rem);
  line-height: 1.55;
}

.source-terminal__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.source-terminal__row code {
  min-width: 0;
  color: var(--text-primary);
  font: inherit;
  overflow-wrap: anywhere;
}

.source-terminal__prompt {
  color: var(--secondary);
  font-weight: 800;
  text-shadow: 0 0 12px rgba(0, 229, 207, 0.55);
}

.source-terminal__output {
  margin: -3px 0 4px 26px;
  color: var(--text-faint);
  font-size: 0.76em;
}

.source-terminal__output strong { color: var(--text-muted); }
.source-terminal__output b { color: #b6ff4a; font-weight: 700; }

.source-terminal__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-block: 9px 4px;
  padding: 12px 14px;
  gap: 5px 14px;
  border: 1px solid rgba(182, 255, 74, 0.18);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(182, 255, 74, 0.07), rgba(0, 229, 207, 0.035));
}

.source-terminal__result span {
  color: #b6ff4a;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.source-terminal__result code {
  grid-column: 1;
  color: #ff3cac;
  font: inherit;
  font-size: 0.76em;
  overflow-wrap: anywhere;
}

.source-terminal__result b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--secondary-light);
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.source-terminal__row--active {
  min-height: 20px;
  margin-top: 2px;
}

.source-terminal__cursor {
  display: inline-block;
  width: 9px;
  height: 17px;
  margin-top: 2px;
  background: var(--secondary);
  box-shadow: 0 0 12px rgba(0, 229, 207, 0.6);
  animation: terminal-cursor 1s steps(1) infinite;
}

@keyframes terminal-cursor { 50% { opacity: 0; } }

.source-page .source-license {
  background:
    radial-gradient(70% 110% at 18% 50%, rgba(0, 229, 207, 0.11), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}

.source-page .source-license .license {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 58px);
  border-color: rgba(0, 229, 207, 0.23);
  background: linear-gradient(145deg, rgba(19, 45, 58, 0.88), rgba(7, 14, 23, 0.97));
  box-shadow: 0 34px 88px rgba(0, 0, 0, 0.34), 0 0 70px rgba(0, 229, 207, 0.07);
}

.source-page .source-license .license::after {
  content: 'GPL';
  position: absolute;
  right: -0.04em;
  bottom: -0.25em;
  color: rgba(216, 210, 255, 0.035);
  font-size: clamp(8rem, 22vw, 17rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 1;
  pointer-events: none;
}

.source-page .source-license .license > * { position: relative; z-index: 1; }
.source-page .source-license .license__head { max-width: 30ch; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.15; }

.source-page :is(.source-build, .source-owner) .requirements {
  padding: clamp(28px, 4vw, 42px);
  background: linear-gradient(150deg, rgba(19, 45, 58, 0.72), rgba(7, 14, 23, 0.9));
}

.source-page .source-mark {
  position: relative;
  border-block: 1px solid var(--border-subtle);
}

.source-page .source-mark .section__head {
  margin: 0;
  padding: clamp(28px, 4vw, 44px) 0;
}

.source-page .source-attribution .attribution {
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 255, 0.12), transparent 36%),
    linear-gradient(155deg, rgba(19, 45, 58, 0.72), rgba(7, 14, 23, 0.94));
}

/* Changelog: a sticky release rail and a live latest-version radar. */
@keyframes page-orbit { to { rotate: 360deg; } }

.release-radar {
  position: relative;
  display: flex;
  width: min(420px, 42vw);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border: 1px solid rgba(156, 255, 244, 0.18);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 54px, rgba(216, 210, 255, 0.065) 55px 56px),
    radial-gradient(circle, rgba(0, 229, 207, 0.15), rgba(7, 14, 23, 0.9) 58%);
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.4), inset 0 0 80px rgba(0, 229, 207, 0.05);
}

.release-radar small {
  color: var(--secondary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.release-radar strong {
  margin-top: 12px;
  font-size: clamp(3.6rem, 8vw, 6.8rem);
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.release-radar b {
  margin-top: 18px;
  color: var(--text-faint);
  font-size: 1rem;
}

.release-radar b i { font-style: normal; font-weight: 500; }

.release-radar__orbit {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(0, 229, 207, 0.24);
  border-radius: 50%;
  animation: page-orbit 22s linear infinite reverse;
}

.release-radar__orbit::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b6ff4a;
  box-shadow: 0 0 20px rgba(182, 255, 74, 0.65);
}

.release-radar__pulse {
  position: absolute;
  inset: 32%;
  border: 1px solid rgba(0, 229, 207, 0.36);
  border-radius: 50%;
  animation: release-pulse 2.8s ease-out infinite;
}

@keyframes release-pulse {
  from { scale: 0.72; opacity: 0.8; }
  to { scale: 2.5; opacity: 0; }
}

.changelog-stage {
  display: grid;
  align-items: start;
  gap: clamp(30px, 5vw, 64px);
  grid-template-columns: 164px minmax(0, 1fr);
}

.release-index {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 122px);
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
}

.release-index > p {
  margin-bottom: 16px;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.release-index ol { margin: 0; padding: 0; list-style: none; }
.release-index li + li { margin-top: 5px; }

.release-index a {
  display: grid;
  align-items: center;
  padding: 10px 11px;
  gap: 10px;
  border-left: 2px solid transparent;
  border-radius: 0 10px 10px 0;
  color: var(--text-faint);
  text-decoration: none;
  grid-template-columns: 26px minmax(0, 1fr);
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.release-index a span { font-size: 0.64rem; letter-spacing: 0.08em; opacity: 0.6; }
.release-index a strong { font-size: 0.84rem; font-weight: 700; }

.release-index a:hover,
.release-index a[aria-current='true'] {
  border-left-color: var(--secondary);
  background: rgba(0, 229, 207, 0.075);
  color: var(--secondary-light);
}

.changelog-stage .changelog { min-width: 0; gap: 28px; }

.changelog-stage .release {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0, rgba(0, 229, 207, 0.08), transparent 30%),
    linear-gradient(155deg, rgba(19, 45, 58, 0.72), rgba(7, 14, 23, 0.96));
}

.changelog-stage .release:first-child {
  border-color: rgba(0, 229, 207, 0.28);
  box-shadow: 0 32px 84px rgba(0, 0, 0, 0.32), 0 0 64px rgba(0, 229, 207, 0.08);
}

.changelog-stage .release::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--secondary), rgba(0, 229, 207, 0));
  opacity: 0.66;
}

.changelog-stage .release__version { font-size: clamp(2rem, 4vw, 3rem); }
.changelog-stage .release__body { font-size: 1rem; line-height: 1.7; }
.changelog-stage .release__body h3 { display: inline-flex; padding: 6px 10px; border: 1px solid var(--border-field); border-radius: var(--r-pill); background: rgba(0, 229, 207, 0.06); }

:is(.features-page, .pricing-page, .faq-page, .source-page, .community-page, .changelog-page) .nav__links a {
  position: relative;
}

.features-page .nav__links a[href$='features'],
.pricing-page .nav__links a[href$='pricing'],
.faq-page .nav__links a[href$='faq'],
.source-page .nav__links a[href$='source'],
.community-page .nav__links a[href$='community'],
.changelog-page .nav__links a[href$='changelog'] {
  color: var(--text-primary);
}

.features-page .nav__links a[href$='features']::after,
.pricing-page .nav__links a[href$='pricing']::after,
.faq-page .nav__links a[href$='faq']::after,
.source-page .nav__links a[href$='source']::after,
.community-page .nav__links a[href$='community']::after,
.changelog-page .nav__links a[href$='changelog']::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  background: var(--secondary);
  box-shadow: 0 0 12px rgba(0, 229, 207, 0.32);
}

:is(html.is-rainbow-mode .features-page, .features-page.is-rainbow-mode) .nav__links a[href$='features']::after,
:is(html.is-rainbow-mode .pricing-page, .pricing-page.is-rainbow-mode) .nav__links a[href$='pricing']::after,
:is(html.is-rainbow-mode .faq-page, .faq-page.is-rainbow-mode) .nav__links a[href$='faq']::after,
:is(html.is-rainbow-mode .source-page, .source-page.is-rainbow-mode) .nav__links a[href$='source']::after,
:is(html.is-rainbow-mode .community-page, .community-page.is-rainbow-mode) .nav__links a[href$='community']::after,
:is(html.is-rainbow-mode .changelog-page, .changelog-page.is-rainbow-mode) .nav__links a[href$='changelog']::after {
  background: linear-gradient(90deg, #00e5ff, #b6ff4a, #ffe66d, #ff3cac, #8b5cff);
  box-shadow:
    0 0 10px rgba(0, 229, 255, 0.36),
    0 0 14px rgba(255, 60, 172, 0.22);
}

/* Four machine-level effects belong in a balanced matrix, not a three-column
   row with the last disclosure stranded beneath the first. */
.features-page #what-it-does .requirements {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.features-page #what-it-does .requirements dl {
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features-page #what-it-does .requirements dl > div {
  min-height: 230px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--req) 24%, var(--border-panel));
  border-top: 2px solid color-mix(in srgb, var(--req) 72%, transparent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--req) 11%, transparent), transparent 42%),
    linear-gradient(150deg, rgba(19, 45, 58, 0.72), rgba(7, 14, 23, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 54px rgba(0, 0, 0, 0.22);
}

.features-page #what-it-does .requirements dt {
  margin-bottom: 18px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.features-page #what-it-does .requirements dd {
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .features-page #what-it-does .requirements dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .features-page #what-it-does .requirements dl > div {
    min-height: 0;
  }
}

/* Rainbow mode lights only each page's primary instrument, never every card. */
:is(html.is-rainbow-mode .inner-page, .inner-page.is-rainbow-mode) :is(
  .page-showcase picture,
  .price-orbit,
  .question-field,
  .source-terminal,
  .release-radar
) {
  --euphoria-hue: 168deg;
  border-color: hsl(var(--euphoria-hue) 92% 68% / 72%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.42), 0 0 38px hsl(var(--euphoria-hue) 92% 62% / 24%);
  animation: euphoria-sweep 5.2s linear infinite;
}

@media (max-width: 900px) {
  .inner-page .page-hero,
  .faq-stage__layout,
  .changelog-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .inner-page .page-hero {
    min-height: 0;
    padding-top: 72px;
  }

  .inner-page .page-hero .hero__title {
    width: fit-content;
    min-width: min-content;
    max-width: 100%;
  }
  .page-showcase,
  .price-orbit,
  .question-field,
  .source-terminal,
  .release-radar { width: min(100%, 620px); }
  .price-orbit,
  .question-field,
  .release-radar { width: min(410px, 88vw); }
  .page-showcase { margin-inline: auto; }
  .pricing-source { grid-template-columns: auto minmax(0, 1fr); }
  .pricing-source > .btn { width: max-content; grid-column: 2; }
  .faq-companion,
  .release-index { position: relative; top: auto; max-height: none; }
  .release-index ol { display: flex; overflow-x: auto; padding-bottom: 8px; gap: 6px; }
  .release-index li + li { margin-top: 0; }
  .release-index a { min-width: 102px; border-bottom: 2px solid transparent; border-left: 0; border-radius: 10px 10px 0 0; }
  .release-index a:hover,
  .release-index a[aria-current='true'] { border-bottom-color: var(--secondary); border-left-color: transparent; }
}

@media (max-width: 620px) {
  .inner-page .page-hero { gap: 54px; }
  .pricing-page .pricing-hero { gap: 38px; }
  .inner-page .page-hero .hero__title { font-size: clamp(3.2rem, 16vw, 5rem); }
  .page-showcase picture { transform: none; }
  .page-showcase figcaption { position: relative; right: auto; bottom: auto; left: auto; margin-top: 12px; }
  .page-showcase figcaption span { padding: 12px 10px; font-size: 0.62rem; }
  .page-showcase figcaption b { font-size: 1.2rem; }
  .features-page .feature-atlas .card { min-height: 0; padding: 28px 24px; }
  .pricing-offer { padding: 26px 22px; border-radius: 22px; }
  .pricing-offer__top { align-items: flex-start; }
  .pricing-offer__top p { align-items: flex-start; flex-direction: column; gap: 5px; }
  .pricing-offer__price > span { font-size: clamp(4.5rem, 25vw, 6.4rem); }
  .pricing-source { grid-template-columns: minmax(0, 1fr); }
  .pricing-source__price { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .pricing-source > .btn { width: 100%; grid-column: 1; }
  .faq-stage__answers .faq__item summary { min-height: 68px; padding: 18px; gap: 12px; }
  .faq-stage__answers .faq__item summary::before { width: 27px; }
  .faq-stage__answers .faq__body { padding: 0 20px 24px 57px; }
  .faq-stage__answers .faq__item[open] { transform: none; }
  .source-terminal__body { padding: 24px 20px; }
  .source-page .source-license .license { padding: 28px 22px; }
  .source-page .source-license .license__links { display: grid; }
  .source-page .source-license .license__links .btn { width: 100%; }
  .changelog-stage .release { padding: 28px 22px; }
}

/* Display-type safety ----------------------------------------------------

   Gradient text is transparent outside its own painted box. A translated
   word can be wider than a `ch`-based headline measure, so the glyphs still
   exist but their last letters appear cut off. Give every hero title a real
   paint gutter and use the containing column—not a short English character
   count—as the hard boundary. The title may overlap the product visual, but
   it can never silently lose letters again. */
body.home .hero__title,
body.inner-page .page-hero .hero__title {
  box-sizing: content-box;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-right: 0.72em;
  padding-bottom: 0.16em;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
}

body.home .hero__title {
  width: 100%;
  min-width: 0;
}

/* The pricing headline deliberately stays on one line on desktop. Its box is
   already measured from the full text, so it needs only the smaller safety
   gutter rather than the general translated-title allowance above. */
body.pricing-page .pricing-hero .hero__title {
  max-width: none;
  padding-right: 0.22em;
}

/* Translated Spanish display copy is often longer than the English measure.
   Keep the same hierarchy, but step it down before it crowds its instrument. */
html[lang='es'] body.inner-page:not(.pricing-page) .page-hero .hero__title {
  font-size: clamp(3.15rem, 6vw, 5.25rem);
}

/* Large gradient numerals have the same failure mode at tight line heights.
   These transparent gutters are part of the painted box, so dollars, nines,
   and descenders remain visible without changing the apparent alignment. */
:is(
  .pricing__amount,
  .pricing-offer__price > span,
  .price-orbit__amount,
  .stats b
) {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.06em 0.14em 0.14em 0.06em;
  overflow: visible;
}

/* --- Reveal on scroll --------------------------------------------------- */

/* Gated on .js so that with scripting off, or if site.js fails to load, the
   page is simply visible rather than permanently blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Printing never scrolls, so the observer would never fire and the page would
   come out blank below the fold. */
@media print {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

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

  /* The app's own principle, from Euphoria.scss: someone who asked for less
     motion does not want the page travelling through the spectrum, but the
     colour is not the problem — the movement is. So the wordmark keeps a hue
     and holds it, and the creature keeps its face and stops fidgeting. */
  .hero__title,
  .nav__pet-aura,
  .nav__pet-body,
  .nav__pet-eyes,
  .nav__pet-star,
  .nav__pet-ears {
    animation: none;
  }

  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}