/* ==========================================================================
   De Appmakers — design system
   Aesthetic: "Nachtstudio" — editorial ink, warm paper, teal signal.
   Display: Bricolage Grotesque  ·  Text: Poppins  ·  Meta: JetBrains Mono

   Bricolage carries an optical-size axis, so every display rule sets "opsz"
   to roughly the px size it renders at — that is what keeps the big headings
   tight and the small ones open. "wdth" is only moved where emphasis needs it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink: #0a0b0d;
  --ink-raised: #101216;
  --ink-sunk: #060709;
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.06);

  --paper: #f3f0e9;
  --paper-2: #e7e2d7;
  --paper-ink: #14161a;
  --paper-muted: #565c64;
  --paper-line: rgba(20, 22, 26, 0.14);

  --text: #f4f6f7;
  --muted: #99a2ac;
  --dim: #838c95;

  /* #40E0D0 is the turquoise taken straight from the De Appmakers logo. */
  --brand: #40e0d0;
  --brand-deep: #0a6b60;
  --brand-glow: rgba(64, 224, 208, 0.2);

  /* per-app tint — overridden by [data-app] */
  --tint: var(--brand);
  --tint-2: #7cf2ff;
  --tint-ink: #04110f;

  --shell: 1240px;
  /* Notched phones in landscape put the display cutout inside the viewport, so
     the gutter has to clear it as well as provide the normal margin. Requires
     viewport-fit=cover in the viewport meta, which every page sets. */
  --gutter: clamp(20px, 4vw, 48px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --radius: 4px;
  --radius-lg: 10px;

  /* Body copy is floored at 1rem: under 16px iOS Safari zooms the page the
     moment a field takes focus, and it reads as fine print on a phone. The
     display steps start lower than they used to and climb faster, so headings
     stop overpowering a 360px screen while landing on the same size as before
     from roughly 1280px up. */
  --step--1: clamp(0.82rem, 0.78rem + 0.15vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.13rem + 1.35vw, 2.2rem);
  --step-3: clamp(1.85rem, 1.07rem + 3.34vw, 3.6rem);
  --step-4: clamp(2.3rem, 0.84rem + 6.22vw, 6rem);
  --step-5: clamp(2.6rem, 0.45rem + 9.54vw, 8.5rem);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-app="nadira"] {
  --tint: #b79bff;
  --tint-2: #f6d9b8;
  --tint-ink: #150f26;
  --app-bg: #150f26;
}
[data-app="blindroll"] {
  --tint: #ece7da;
  --tint-2: #e2a23f;
  --tint-ink: #0b0b0b;
  --app-bg: #0b0b0b;
}
[data-app="thinkgrid"] {
  --tint: #3fa9ff;
  --tint-2: #7cf2ff;
  --tint-ink: #05101e;
  --app-bg: #05101e;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  /* Poppins ships no italic in the weights we load and Bricolage has none at
     all, so any faux slanting or bolding would be the browser's invention. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fine film grain — gives the ink surface a printed quality. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.24;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* A full-viewport blended layer is repainted on every scroll frame. Phone GPUs
   pay for that in jank, and the texture is barely legible at that pixel
   density anyway — so drop the blend and thin it out on touch hardware. */
@media (pointer: coarse) {
  body::after {
    opacity: 0.14;
    mix-blend-mode: normal;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

::selection {
  background: var(--brand);
  color: #04110f;
}

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */
.display {
  --opsz: 96;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" var(--opsz), "wdth" 100;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* .display spans 23px to 136px depending on which step it carries, so the
   optical size follows the step rather than sitting at the display extreme
   for every heading on the site. */
.display.h2 {
  --opsz: 80;
}
.display.h3 {
  --opsz: 56;
}
.display.h4 {
  --opsz: 34;
}

/* Fraunces marked emphasis with an italic. A grotesque has none, so the
   emphasised word steps down in width and up in weight instead — a real cut
   of the typeface rather than a browser-slanted fake. */
.display em {
  font-style: normal;
  /* Re-declared rather than inherited: font-variation-settings resolves its
     var() at the parent, so only a fresh declaration picks up the new width. */
  font-variation-settings: "opsz" var(--opsz), "wdth" 92;
  font-weight: 700;
  color: var(--tint);
}

.h1 {
  font-size: var(--step-5);
}
.h2 {
  font-size: var(--step-4);
}
.h3 {
  font-size: var(--step-3);
}
.h4 {
  font-size: var(--step-2);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tint);
}

.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: min(
    var(--shell),
    100% - (var(--gutter) * 2) - var(--safe-l) - var(--safe-r)
  );
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 132px);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 80px);
}

.stack > * + * {
  margin-top: var(--gap, 20px);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--brand);
  color: #04110f;
  font-weight: 700;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

/* The supplied logo file bakes the wordmark into the bottom-right corner with a
   lot of empty space above it. Mark and wordmark are therefore stored as two
   trimmed assets and locked up here, so spacing stays under our control. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}

.brand__mark {
  width: 30px;
  height: auto;
  flex: 0 0 auto;
}

.brand__word {
  width: 116px;
  height: auto;
  /* optical centring: the wordmark asset carries an underline at its foot */
  transform: translateY(-2px);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}

.nav__links a {
  position: relative;
  padding-block: 6px;
  transition: color 0.2s var(--ease);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--text);
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.lang a {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--dim);
  transition: color 0.2s, background 0.2s;
}

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

.lang a[aria-current="true"] {
  background: var(--brand);
  color: #04110f;
  font-weight: 700;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  place-items: center;
}

.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
}
.burger span::before {
  transform: translateY(-5px);
}
.burger span::after {
  transform: translateY(5px);
}

.burger[aria-expanded="true"] span {
  background: transparent;
}
.burger[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 76px 0 0;
  z-index: 55;
  padding: 20px calc(var(--gutter) + var(--safe-r)) 48px
    calc(var(--gutter) + var(--safe-l));
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  overflow-y: auto;
  /* Keeps a rubber-banding drawer from chaining its scroll into the page. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.drawer a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 26, "wdth" 100;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

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

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s,
    border-color 0.25s, box-shadow 0.25s;
}

/* Lift effects are gated on a real pointer. iOS keeps :hover latched after a
   tap, so on touch these read as an element that jumped and stayed jumped. */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.btn--primary {
  background: var(--tint);
  color: var(--tint-ink);
  box-shadow: 0 12px 34px -12px var(--tint);
}

.btn--primary:hover {
  box-shadow: 0 18px 40px -12px var(--tint);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: color-mix(in srgb, var(--tint) 60%, transparent);
  background: rgba(255, 255, 255, 0.04);
}

.btn--paper {
  background: var(--paper-ink);
  color: var(--paper);
}

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

/* Store badges ---------------------------------------------------------- */
/* min() keeps auto-fit from forcing a track wider than the container, which
   otherwise blows the whole hero column out past the viewport on phones. */
.stores {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.store {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, background 0.25s;
}

@media (hover: hover) {
  .store:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tint) 55%, transparent);
    background: rgba(255, 255, 255, 0.07);
  }
}

.store:active {
  background: rgba(255, 255, 255, 0.08);
}

.store svg {
  width: 26px;
  height: 26px;
}

.store small {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.store strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.2;
}

.store--soon {
  pointer-events: none;
}

.store--soon::after {
  content: attr(data-soon);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(2px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 110px) clamp(60px, 8vw, 120px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--brand-glow), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}

/* A blur filter over a 700px area is a costly repaint for a shape that is
   already a soft gradient. The 20px of extra softness is not worth it here. */
@media (pointer: coarse) {
  .hero::before {
    filter: none;
  }
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Grid children default to min-width:auto, which lets wide content push a
   column past its track. Everything here should shrink instead. */
.hero__grid > *,
.app-hero__grid > *,
.head > *,
.grid > * {
  min-width: 0;
}

.hero__title {
  margin-block: 22px 26px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.hero__meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__meta b {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 22, "wdth" 100;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* Tilted device rail ---------------------------------------------------- */
.rail {
  position: relative;
  min-height: clamp(470px, 145vw, 620px);
  perspective: 1400px;
}

.slab {
  position: absolute;
  width: min(216px, 47%);
  aspect-ratio: 9 / 17.4;
  padding: 10px;
  border-radius: 30px;
  background: #07080a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s var(--ease-out), box-shadow 0.4s;
  will-change: transform;
}

@media (hover: hover) {
  .slab:hover {
    z-index: 5;
  }
}

.slab__screen {
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px 18px;
}

.slab__screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.slab h3 {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 20, "wdth" 100;
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 12px;
}

.slab p {
  font-size: 0.74rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 5px;
}

.slab__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.8);
}

.slab--a {
  left: 0;
  top: 14px;
  transform: rotate(-7deg) translateZ(0);
}
.slab--b {
  right: 2%;
  top: 0;
  transform: rotate(6deg) translateZ(0);
}
.slab--c {
  left: 27%;
  top: 30%;
  z-index: 3;
  transform: rotate(1deg) translateZ(0);
}

.slab--a .slab__screen {
  background: radial-gradient(120% 60% at 50% 0%, rgba(183, 155, 255, 0.5), transparent 60%),
    linear-gradient(180deg, #241844, #120c20);
}
.slab--b .slab__screen {
  background: linear-gradient(180deg, #1c1c1c, #070707);
}
.slab--c .slab__screen {
  background: radial-gradient(110% 55% at 50% 0%, rgba(63, 169, 255, 0.35), transparent 60%),
    linear-gradient(180deg, #0b1a2e, #050b16);
}

/* Miniature in-app graphics (pure CSS) */
.orbit {
  width: 96px;
  height: 96px;
  margin: 14px auto 0;
  border: 1px solid rgba(246, 217, 184, 0.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f6d9b8;
  font-size: 1.5rem;
  animation: spin 26s linear infinite;
}

.orbit::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6d9b8;
  transform: translate(48px, 0);
}

.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 14px;
  padding: 5px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0 4px,
    transparent 4px 11px
  );
}

.strip span {
  aspect-ratio: 1;
  border-radius: 2px;
  background: linear-gradient(140deg, #d9c39a, #4a3a26);
}
.strip span:nth-child(2) {
  background: linear-gradient(140deg, #9fb0a3, #26302b);
}
.strip span:nth-child(4) {
  background: linear-gradient(140deg, #c9a89a, #3b2a26);
}

.cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 14px;
}

.cells span {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cells span:nth-child(3n + 1) {
  background: rgba(63, 169, 255, 0.4);
  border-color: rgba(124, 242, 255, 0.5);
}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  --speed: 42s;
  overflow: hidden;
  padding-block: 16px;
  border-block: 1px solid var(--line);
  background: var(--ink-sunk);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide var(--speed) linear infinite;
}

.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 32, "wdth" 100;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.marquee__track span i {
  font-style: normal;
  color: var(--brand);
  font-size: 0.5em;
}

@media (hover: hover) {
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}

/* --------------------------------------------------------------------------
   9. Section heads
   -------------------------------------------------------------------------- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.head h2 {
  margin-top: 16px;
}

.head p {
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. App index rows
   -------------------------------------------------------------------------- */
.index {
  border-top: 1px solid var(--line);
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px) clamp(0px, 1.5vw, 22px);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}

.row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tint) 16%, transparent),
    transparent 62%
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

.row:hover::before,
.row:focus-within::before {
  transform: scaleX(1);
}

/* The whole row is a link, but every cue that says so — the tinted wash, the
   filled arrow, the accented index — is bound to :hover, which touch never
   fires. Give phones a resting state that reads as tappable on its own. */
@media (hover: none) {
  .row::before {
    transform: scaleX(1);
    opacity: 0.55;
  }
  .row .row__no {
    color: var(--tint);
  }
  .row .row__go {
    background: var(--tint);
    border-color: var(--tint);
    color: var(--tint-ink);
  }
  .row:active::before {
    opacity: 1;
  }
}

.row__no {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  transition: color 0.3s;
}

.row:hover .row__no {
  color: var(--tint);
}

.row__body {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  min-width: 0;
}

.row__icon {
  width: clamp(56px, 7vw, 84px);
  height: clamp(56px, 7vw, 84px);
  border-radius: 18px;
  flex: 0 0 auto;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
  .row:hover .row__icon {
    transform: rotate(-3deg) scale(1.05);
  }
}

.row__name {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 48, "wdth" 100;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.row__desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.96rem;
  max-width: 46ch;
}

.row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.tag {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.row__go {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}

.row__go svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease-out);
}

.row:hover .row__go {
  background: var(--tint);
  border-color: var(--tint);
  color: var(--tint-ink);
}

.row:hover .row__go svg {
  transform: translateX(3px);
}

.row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   11. Paper (inverted) sections
   -------------------------------------------------------------------------- */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
}

.paper .lede,
.paper .head p,
.paper .muted {
  color: var(--paper-muted);
}

.paper .kicker {
  color: var(--brand-deep);
}

.paper .rule,
.paper .card,
.paper .tag {
  border-color: var(--paper-line);
}

.paper .card {
  background: rgba(255, 255, 255, 0.6);
}

.paper .tag {
  color: var(--paper-muted);
}

.paper .btn--ghost {
  border-color: var(--paper-line);
  color: var(--paper-ink);
}

.paper .btn--ghost:hover {
  background: rgba(20, 22, 26, 0.05);
}

.paper .mono {
  color: #7b8189;
}

/* --------------------------------------------------------------------------
   12. Cards & grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.card {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease-out);
}

@media (hover: hover) {
  .card:hover {
    border-color: color-mix(in srgb, var(--tint) 45%, transparent);
    transform: translateY(-3px);
  }
}

.card h3 {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.paper .card p {
  color: var(--paper-muted);
}

.card__no {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--tint);
  margin-bottom: 16px;
}

.paper .card__no {
  color: var(--brand-deep);
}

/* Stat strip ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  padding: 26px 22px;
  background: var(--ink);
}

.paper .stats {
  background: var(--paper-line);
  border-color: var(--paper-line);
}

.paper .stat {
  background: var(--paper);
}

.stat b {
  display: block;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 48, "wdth" 100;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.stat span {
  display: block;
  margin-top: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.paper .stat span {
  color: var(--paper-muted);
}

/* --------------------------------------------------------------------------
   13. App detail page
   -------------------------------------------------------------------------- */
.app-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 104px);
  background: linear-gradient(180deg, var(--app-bg, var(--ink)) 0%, var(--ink) 100%);
}

.app-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--tint) 22%, transparent),
    transparent 60%
  );
  pointer-events: none;
}

.app-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* Keeps the app name as the visual anchor while the h1 still carries the
   words people actually search for. */
.app-hero__kind {
  display: block;
  margin-top: 14px;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.app-hero__icon {
  width: clamp(84px, 12vw, 122px);
  height: clamp(84px, 12vw, 122px);
  border-radius: 26px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding-block: 18px;
}

.crumbs a:hover {
  color: var(--tint);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  opacity: 0.5;
}

.crumbs ol {
  display: contents;
}

/* Feature list ---------------------------------------------------------- */
.features {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.feature {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(14px, 3vw, 36px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}

.feature dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tint);
  padding-top: 6px;
}

.feature dd {
  margin: 0;
}

.feature dd b {
  display: block;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 32, "wdth" 100;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.feature dd p {
  color: var(--muted);
  max-width: 68ch;
}

.paper .feature dd p {
  color: var(--paper-muted);
}

.paper .features,
.paper .feature {
  border-color: var(--paper-line);
}

.paper .feature dt {
  color: var(--brand-deep);
}

/* Spec table ------------------------------------------------------------ */
.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.specs th,
.specs td {
  text-align: left;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.specs th {
  width: 42%;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding-right: 18px;
}

.paper .specs th,
.paper .specs td {
  border-color: var(--paper-line);
}

/* On narrow screens a two-column spec table reads better stacked than scrolled. */
@media (max-width: 560px) {
  .specs th,
  .specs td {
    display: block;
    width: auto;
    padding-right: 0;
  }
  .specs th {
    border-bottom: 0;
    padding-bottom: 4px;
  }
  .specs td {
    padding-top: 0;
  }
}

/* Wide data tables scroll inside their own box, never the page. */
.table-scroll {
  overflow-x: auto;
  margin-top: 14px;
  border-radius: var(--radius);
}

.table-scroll table {
  margin-top: 0;
  min-width: 480px;
}

/* FAQ ------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.paper .faq,
.paper .faq details {
  border-color: var(--paper-line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}

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

.faq summary:hover {
  color: var(--tint);
}

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--tint);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > div {
  padding-bottom: 24px;
  color: var(--muted);
  max-width: 78ch;
}

.paper .faq details > div {
  color: var(--paper-muted);
}

.faq details > div p + p {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   14. Prose (legal / long form)
   -------------------------------------------------------------------------- */
.prose {
  max-width: 74ch;
  color: var(--muted);
}

.prose h2 {
  margin: 44px 0 14px;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-variation-settings: "opsz" 32, "wdth" 100;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.prose h3 {
  margin: 30px 0 10px;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text);
}

.prose p + p,
.prose ul,
.prose ol,
.prose table {
  margin-top: 14px;
}

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-top: 8px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 7px;
  height: 1px;
  background: var(--brand);
}

.prose ol {
  counter-reset: n;
}

.prose ol li {
  counter-increment: n;
  position: relative;
  padding-left: 30px;
  margin-top: 8px;
}

.prose ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--brand);
  top: 0.24em;
}

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose strong {
  color: var(--text);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  color: var(--text);
  font-weight: 600;
}

.note {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: var(--radius);
  background: rgba(47, 227, 205, 0.05);
  font-size: 0.92rem;
  color: var(--muted);
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.toc a {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}

.toc a:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* --------------------------------------------------------------------------
   15. Contact / forms
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.contact-card {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
}

.contact-card span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}

.contact-card a,
.contact-card p {
  font-size: 1.06rem;
  font-weight: 500;
}

.contact-card a:hover {
  color: var(--brand);
}

.contact-card small {
  display: block;
  margin-top: 8px;
  color: var(--dim);
  font-size: 0.84rem;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 104px);
  background: var(--ink-sunk);
  border-top: 1px solid var(--line);
}

.cta::before {
  content: "";
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--brand-glow), transparent 60%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 22px;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(48px, 6vw, 76px) 32px;
  background: var(--ink-sunk);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 48px);
}

.footer-grid h4 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}

.footer-grid li + li {
  margin-top: 9px;
}

.footer-grid a:hover {
  color: var(--brand);
}

.footer-brand .brand {
  margin-bottom: 20px;
}

.footer-brand .brand__mark {
  width: 40px;
}

.footer-brand .brand__word {
  width: 150px;
}

.footer-brand p {
  max-width: 34ch;
}

/* One row per app: name, then a button per store it is available in. */
.footer-stores {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.footer-stores li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-stores b {
  flex: 0 0 auto;
  min-width: 84px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.footer-stores a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.footer-stores a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(255, 255, 255, 0.05);
}

.footer-stores svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   17b. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 18px 0;
  border-block: 1px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.trust svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--tint);
}

.paper .trust {
  border-color: var(--paper-line);
  color: var(--paper-muted);
}

.paper .trust svg {
  color: var(--brand-deep);
}

/* --------------------------------------------------------------------------
   17c. Screenshot gallery
   -------------------------------------------------------------------------- */
.shots {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: thin;
  /* A horizontal swipe here must not hand off to the browser's back gesture. */
  overscroll-behavior-x: contain;
}

.shot {
  flex: 0 0 auto;
  width: clamp(206px, 24vw, 264px);
  margin: 0;
  scroll-snap-align: start;
}

.shot__frame {
  padding: 9px;
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
  .shot:hover .shot__frame {
    transform: translateY(-6px);
  }
}

.shot img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: #0a0b0d;
  display: block;
}

.shot figcaption {
  margin-top: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.paper .shot__frame {
  background: linear-gradient(160deg, rgba(20, 22, 26, 0.16), rgba(20, 22, 26, 0.05));
  box-shadow: 0 30px 60px -30px rgba(16, 24, 32, 0.5);
}

.paper .shot figcaption {
  color: var(--paper-muted);
}

/* --------------------------------------------------------------------------
   17d. Sticky download bar (app pages)
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px clamp(14px, 4vw, 26px);
  padding-bottom: max(11px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(160%) blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
}

.dock[data-show="true"] {
  transform: none;
}

.dock img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex: 0 0 auto;
}

.dock__text {
  min-width: 0;
  flex: 1 1 auto;
}

.dock__text b {
  display: block;
  font-size: 0.96rem;
  line-height: 1.2;
}

.dock__text span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock .btn {
  min-height: 44px;
  padding: 10px 20px;
  flex: 0 0 auto;
  width: auto;
}

@media (min-width: 921px) {
  .dock {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   17e. Inline store link inside app rows
   -------------------------------------------------------------------------- */
.row__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.row__play {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.row__play:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--tint) 60%, transparent);
  background: rgba(255, 255, 255, 0.05);
}

.row__play svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Without JavaScript nothing may stay hidden. */
@media (scripting: none) {
  .reveal,
  .rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

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

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rise {
  animation: rise 0.9s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  html {
    scroll-padding-top: 84px;
  }
  .nav__links {
    display: none;
  }
  .burger {
    display: grid;
  }
  .hero__grid,
  .app-hero__grid,
  .head {
    grid-template-columns: 1fr;
  }
  .head {
    align-items: start;
  }
  .rail {
    margin-top: 12px;
  }
  .row {
    grid-template-columns: 52px minmax(0, 1fr);
    row-gap: 18px;
  }
  .row__go {
    grid-column: 2;
    justify-self: start;
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 620px) {
  html {
    scroll-padding-top: 78px;
  }
  .nav {
    height: 68px;
  }
  .drawer {
    inset-block-start: 68px;
  }
  .brand__mark {
    width: 26px;
  }
  .brand__word {
    width: 98px;
  }

  /* The rail is decoration (aria-hidden) but at desktop proportions it eats a
     phone screen and a half, pushing the download buttons below two folds.
     Shrink the whole lock-up rather than dropping it. */
  .rail {
    min-height: clamp(350px, 112vw, 440px);
  }
  .slab {
    width: min(180px, 43%);
    border-radius: 24px;
    padding: 7px;
  }
  .slab__screen {
    border-radius: 18px;
    padding: 16px 13px 14px;
  }
  .slab h3 {
    font-size: 1.1rem;
    margin-top: 9px;
  }
  .slab__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .orbit {
    width: 72px;
    height: 72px;
    margin-top: 10px;
  }
  .orbit::before {
    transform: translate(36px, 0);
  }
  .slab--c {
    left: 26%;
    top: 26%;
  }

  .hero {
    padding-block: 36px 52px;
  }
  .app-hero {
    padding-block: 32px 56px;
  }
  .hero__meta {
    margin-top: 28px;
  }

  .btn {
    width: 100%;
  }
  .btn-row {
    display: grid;
  }
  .row__body {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Let the screenshot strip run to both screen edges, so a partly visible
     next frame signals that it scrolls. */
  .shots {
    margin-inline: calc((var(--gutter) + var(--safe-l)) * -1)
      calc((var(--gutter) + var(--safe-r)) * -1);
    padding-inline: calc(var(--gutter) + var(--safe-l))
      calc(var(--gutter) + var(--safe-r));
    scroll-padding-inline-start: calc(var(--gutter) + var(--safe-l));
  }
}

/* --------------------------------------------------------------------------
   19b. Touch targets
   Fingers need roughly 44px. Several controls are typographically small by
   design, so they get the height from padding while the type stays put.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .brand {
    padding-block: 9px;
  }

  .lang a {
    min-height: 38px;
    padding-inline: 13px;
  }

  .row__play {
    min-height: 44px;
    padding-block: 12px;
  }

  .footer-stores a {
    width: 44px;
    height: 44px;
  }

  /* The store buttons are their own 44px grid, so only the text link columns
     need the extra height here. */
  .footer-grid ul:not(.footer-stores) a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
  }

  .footer-grid ul:not(.footer-stores) li + li {
    margin-top: 0;
  }

  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .crumbs a,
  .toc a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .contact-card a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .prose a {
    padding-block: 3px;
  }

  .drawer a {
    padding: 17px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  body::after,
  .site-header,
  .drawer,
  .cta,
  .marquee {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}