/*
 * tryhouse.app: the home page, /support and the 404 page (infra/web/README.md). The legal pages keep /site.css.
 * Controls use monochrome ink. The house mark and headline accents use the app icon’s red (design-system.md
 * §4.4a). Glass is reserved for controls. System fonts only (the CSP has no font-src),
 * nothing inline, logical properties throughout (RTL-ready), every animation optional (prefers-reduced-motion).
 */

:root {
  color-scheme: light dark;
  --canvas: #ffffff;
  --surface: #f3f3f5;
  --surface-2: #ececee;
  --elevated: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #66666b;
  --ink-3: #8e8e93;
  --hairline: #e6e6e9;
  --chip: #efeff1;
  --ink-inverse: #ffffff;
  --focus: #2f6bff;
  --key: #d91e2c; /* the welcome story's key word: 5.03:1 on white */
  --brand-start: #ff5c6e;
  --brand-end: #d91e2c;
  --glyph-start: #f23d50;
  --glyph-end: #d91e2c;
  --door: #b3121e;
  --sun: #ff9f1c;
  --silk-1: #cff3ff;
  --silk-2: #c4b4ff;
  --silk-3: #ffc9e4;
  --silk-4: #ffe5ae;
  --silk-5: #b8f0dc;
  --glass: rgb(255 255 255 / 0.58);
  --glass-strong: rgb(255 255 255 / 0.74);
  --glass-edge: rgb(255 255 255 / 0.75);
  --glass-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 10px 30px rgb(0 0 0 / 0.1);
  --nav-glass: rgb(255 255 255 / 0.72);
  --nav-edge: rgb(0 0 0 / 0.12);
  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 24px 60px -18px rgb(0 0 0 / 0.22);
  --note-yellow: #f3d68a;
  --radius-card: 24px;
  --card: #f5f5f7; /* feature cards and tiles */
  --card-radius: clamp(28px, 3.6vw, 44px);
  --stick: 84px; /* where a stacking card stops: under the top bar */
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1180px;
  --dir: 1;
  --font:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  --font-round: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --ease: cubic-bezier(0.55, 0, 0.35, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0b0b0c;
    --surface: #151517;
    --surface-2: #1c1c1f;
    --elevated: #1c1c1f;
    --ink: #f2f2f2;
    --ink-2: #a2a2a8;
    --ink-3: #77777d;
    --hairline: #2a2a2e;
    --chip: #232326;
    --ink-inverse: #0a0a0a;
    --focus: #4d82ff;
    --key: #ff5c6e; /* 6.5:1 on the dark canvas */
    --glyph-start: #ff7a88;
    --glyph-end: #ff4d5e;
    --silk-1: #5fd0ff;
    --silk-2: #8e7bff;
    --silk-3: #ff8fc6;
    --silk-4: #ffc46a;
    --silk-5: #6fe0b4;
    --glass: rgb(28 28 31 / 0.55);
    --glass-strong: rgb(28 28 31 / 0.72);
    --glass-edge: rgb(255 255 255 / 0.14);
    --glass-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.45);
    --nav-glass: rgb(24 24 27 / 0.72);
    --nav-edge: rgb(255 255 255 / 0.14);
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 60px -18px rgb(0 0 0 / 0.7);
    --card: #161618;
  }
}

[dir='rtl'] {
  --dir: -1;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 88px;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-3);
}

a:hover {
  text-decoration-color: currentColor;
}

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

.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.icon {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -80px;
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  inset-block-start: 14px;
}

/* ---- Type --------------------------------------------------------------------------------------------- */

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 11vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display.small {
  font-size: clamp(38px, 9vw, 64px);
}

@media (min-width: 600px) {
  .display {
    letter-spacing: -0.03em;
  }

  .display.small {
    letter-spacing: -0.02em;
  }
}

@media (min-width: 1000px) {
  .display {
    font-size: clamp(56px, 5.6vw, 76px);
  }

  .display.small {
    font-size: clamp(48px, 4.6vw, 64px);
  }
}

.key {
  color: var(--key);
}

.label {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.lede {
  margin: 24px 0 0;
  max-inline-size: 34em;
  color: var(--ink-2);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.fine {
  margin: 20px 0 0;
  max-inline-size: 36em;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- The top bar: one glass capsule (controls are glass, content stays opaque) ----------------------- */

/* The capsule's padding puts the logo on the content's edge (the page's gutter), at every width. */
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  padding: max(10px, env(safe-area-inset-top)) max(6px, calc(var(--gutter) - 16px)) 0;
  pointer-events: none;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-inline-size: calc(var(--max) - 2 * var(--gutter) + 32px);
  margin: 0 auto;
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: var(--nav-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 0 0 0.5px var(--nav-edge),
    0 6px 20px rgb(0 0 0 / 0.06);
  pointer-events: auto;
}

[dir='rtl'] .nav {
  padding: 7px 16px 7px 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  text-decoration: none;
}

.brand-mark {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.nav-links {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s;
}

.nav-links a:hover {
  background: rgb(127 127 127 / 0.12);
}

/* The home page's top bar ends with a compact download pill on wider screens. */
.nav-cta {
  display: none;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .nav-cta {
    display: inline-flex;
  }
}

/* ---- Download link ------------------------------------------------------------------------------------- */

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}

.hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

.hint .icon {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
}

/* A second sentence that moves to its own line whole instead of splitting after its first word. */
.nb {
  display: inline-block;
}

/* ---- Hero: the words first, then the house rising under them with its posts around it -------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 20px;
  max-inline-size: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--gutter) 0;
  overflow-x: clip;
  text-align: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .display {
  font-size: clamp(48px, 14vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.hero .lede {
  margin: 20px auto 0;
  max-inline-size: 30em;
  text-wrap: balance;
}

.hero .soon {
  margin-block-start: 28px;
}

.hero .hint {
  justify-content: center;
  margin-block-start: 14px;
}

/* Each half of the line stays whole where it fits: "no audience," / "just friends." */
.ln {
  display: inline-block;
}

@media (min-width: 600px) {
  .ln {
    white-space: nowrap;
  }
}

@media (min-width: 1000px) {
  .hero {
    padding-block-start: 28px;
  }
}

.hero-stage {
  position: relative;
  inline-size: min(100%, 640px);
  margin: 8px auto 0;
}

/* A soft glow of the brand red behind the house. */
.hero-stage::before {
  content: '';
  position: absolute;
  inset: 20% -10% -6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(255 92 110 / 0.2),
    rgb(255 92 110 / 0.15) 35%,
    rgb(255 92 110 / 0.07) 65%,
    rgb(255 92 110 / 0.02) 87%,
    transparent
  );
}

.hero-house {
  position: relative;
  z-index: 1;
  aspect-ratio: 512 / 510.465;
}

/* The house's shadow, baked by tools/make-effects.py (pads 50, 18 and 82 of the 512 × 510.465 viewBox). A drop-shadow
   filter here was redrawn on every frame of the photo's slow pan. */
.hero-house::before {
  content: '';
  position: absolute;
  inset: -3.53% -9.77% -16.06%;
  z-index: -1;
  background: url('/assets/img/fx-shadow-house.webp') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.house-red,
.house-photo {
  position: absolute;
  inset: 0;
  -webkit-mask: url('/assets/house-mask.svg') center / 100% 100% no-repeat;
  mask: url('/assets/house-mask.svg') center / 100% 100% no-repeat;
}

.house-red {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
}

.house-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.house-front {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.door .door-panel {
  fill: url(#door-shade);
}

.door .door-sheen {
  fill: url(#door-sheen);
}

/* A hairline keeps the house's edge where the photo is pale. */
.house-edge {
  fill: none;
  stroke: rgb(0 0 0 / 0.1);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

@media (prefers-color-scheme: dark) {
  .house-edge {
    stroke: rgb(255 255 255 / 0.16);
  }
}

.house-line {
  fill: none;
  stroke: url(#brand-red);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0;
}

/* Floating glass cards: what lives in a house. */
.float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 20px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    var(--glass-shadow);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  text-align: start;
  white-space: nowrap;
}

.float strong {
  font-weight: 700;
}

.f-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.f-sub {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
}

.flame {
  inline-size: 15px;
  block-size: 15px;
}

.cover,
.face {
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 11px;
  object-fit: cover;
}

.face {
  border-radius: 50%;
}

/* Two shared edges: the house chip and the voice note on the start edge, the knock and the plan on the end edge. */
.f-house {
  inset-block-start: 5%;
  inset-inline-start: -10%;
}

.f-knock {
  inset-block-start: 52%;
  inset-inline-end: -8%;
  padding-inline-end: 18px;
}

.f-voice {
  inset-block-start: 68%;
  inset-inline-start: -10%;
  gap: 9px;
  padding: 9px 14px 9px 9px;
  border-radius: 999px;
}

.play {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
}

.play svg {
  inline-size: 15px;
  block-size: 15px;
  fill: currentColor;
  margin-inline-start: 2px;
}

.wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  block-size: 26px;
}

.wave i {
  display: block;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--ink);
  block-size: 40%;
}

.wave i:nth-child(3n + 1) {
  block-size: 70%;
}

.wave i:nth-child(4n + 2) {
  block-size: 95%;
}

.wave i:nth-child(5n + 3) {
  block-size: 55%;
}

.wave i:nth-child(n + 11) {
  background: var(--ink-3);
}

.f-time {
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.c-react b {
  margin-inline-start: 4px;
  font-size: 14px;
  font-weight: 700;
}

.f-plan {
  inset-block-end: -3%;
  inset-inline-end: -8%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
}

.f-kicker {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.f-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 4px;
}

.faces {
  display: flex;
}

.faces img {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--elevated);
}

.faces img + img {
  margin-inline-start: -7px;
}

.going {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 13px;
  font-weight: 700;
}

.going svg {
  inline-size: 14px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On wide screens the posts sit out beside the house, two on each side, a little larger. */
@media (min-width: 1000px) {
  .hero .float:not(.f-voice) {
    padding: 12px 16px;
    border-radius: 22px;
  }

  .hero .float {
    font-size: 15px;
  }

  .hero .cover,
  .hero .face {
    inline-size: 40px;
    block-size: 40px;
  }

  .f-house {
    inset-block-start: 18%;
    inset-inline-start: -30%;
  }

  .f-voice {
    inset-block-start: 62%;
    inset-inline-start: -36%;
  }

  .f-knock {
    inset-block-start: 30%;
    inset-inline-end: -32%;
  }

  .f-plan {
    inset-block-end: 12%;
    inset-inline-end: -30%;
  }
}

@media (max-width: 760px) {
  .hero-stage {
    inline-size: 86%;
    padding-block-start: 14%;
  }

  /* The hint wraps as centred text with its icon inline. */
  .hero .hint {
    display: block;
    text-wrap: balance;
  }

  .hero .hint .icon {
    display: inline-block;
    vertical-align: -3px;
    margin-inline-end: 6px;
  }

  .float {
    font-size: 13px;
    padding: 8px 11px;
    gap: 8px;
  }

  .f-sub {
    font-size: 12px;
  }

  .cover,
  .face {
    inline-size: 30px;
    block-size: 30px;
  }

  .f-house {
    inset-inline-start: 0;
    inset-block-start: 0;
  }

  .f-knock {
    inset-block-start: 40%;
    inset-inline-end: -8%;
  }

  .f-voice,
  .f-plan {
    display: none;
  }
}

/* ---- Ribbon: posts drifting past, each one somebody's ------------------------------------------------------ */

.ribbon {
  overflow: hidden;
  margin-block-start: clamp(40px, 6vw, 80px);
  padding-block: 8px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* The list holds the photos twice, so the drift loops without a seam. */
.ribbon-track {
  display: flex;
  gap: 14px;
  inline-size: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ribbon-track li {
  position: relative;
  flex: none;
  block-size: clamp(180px, 22vw, 280px);
}

.ribbon-track li > img {
  display: block;
  inline-size: auto;
  block-size: 100%;
  border-radius: clamp(18px, 2vw, 26px);
}

.ribbon-tag {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6);
  color: #0a0a0a;
  font-size: 15px;
  font-weight: 650;
}

.ribbon-tag img {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
}

/* ---- Features: one card each, stacking like photos on a table as you scroll -------------------------------- */

.deck {
  display: grid;
  gap: 16px;
  max-inline-size: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(40px, 6vw, 88px) var(--gutter) 0;
}

/* `overflow: clip`, not `hidden`: a hidden overflow makes the card a scroll container, and the plan typer's scroll-driven
   typing would then follow the card, which never scrolls, instead of the page, and stop part-typed. `hidden` stays as
   the fallback for browsers without `clip`. */
.card {
  position: relative;
  display: grid;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 72px) 0;
  border-radius: var(--card-radius);
  background: var(--card);
}

.card .display {
  font-size: clamp(40px, 10.5vw, 68px);
}

.card .lede {
  margin-block-start: 18px;
  font-size: clamp(17px, 1.4vw, 20px);
}

.card-copy {
  position: relative;
  z-index: 2;
}

/* On a phone the card shows a fixed window onto the top of the device. */
.card-media {
  position: relative;
  display: grid;
  place-items: start center;
  block-size: clamp(340px, 100vw, 460px);
  margin-block-start: 36px;
}

/* Each image already includes the complete Apple product bezel and its native screen. */
.device {
  position: relative;
  z-index: 1;
  inline-size: min(78%, 320px);
  margin: 0;
}

.device.duo {
  inline-size: min(94%, 440px);
}

.device > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* The device's shadow, drawn once from tools/make-effects.py instead of a drop-shadow filter on the image. The insets
   are that script's pads over the 480 px image: phones 109, 66 and 153 px of 480 × 980, the Duo 77, 36 and 118 of
   480 × 669. */
.device::before {
  content: '';
  position: absolute;
  inset: -6.73% -22.71% -15.61%;
  z-index: -1;
  background: url('/assets/img/fx-shadow-phone.webp') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.device.duo::before {
  inset: -5.38% -16.04% -17.64%;
  background-image: url('/assets/img/fx-shadow-duo.webp');
}

/* Content-owned colour: the screen itself, blurred into a halo behind the phone. The blur is baked
   (tools/make-effects.py): each image is the halo's ellipse (92% × 106% of this column, from 4% and 14%) plus 160 px
   of soft edge on every side, a 64 px blur that is never computed in the browser. */
.aura {
  position: absolute;
  inset-block-start: -27.03%;
  inset-inline-start: -48.8%;
  z-index: 0;
  inline-size: 197.6%;
  block-size: 187.95%;
  opacity: 0.7;
  pointer-events: none;
}

.aura img {
  inline-size: 100%;
  block-size: 100%;
}

/* The floats hang off the phone, not the column. */
.device .glass-chip,
.device .once-badge {
  position: absolute;
  z-index: 3;
}

.device .c-invite {
  inset-block-start: 40%;
  inset-inline-start: -8%;
}

.device .c-react {
  inset-block-start: 52%;
  inset-inline-start: -6%;
}

.device .once-badge {
  inset-block-start: 14%;
  inset-inline-end: -14%;
}

@media (min-width: 900px) {
  .card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 32px;
    min-block-size: min(620px, calc(100vh - var(--stick) - 48px));
    padding-block: 0;
  }

  .card.flip .card-copy {
    order: 2;
  }

  .card-copy {
    padding-block: 64px;
  }

  /* The phone runs off the card's lower edge. The column is a size container so the phone and its floats can fit it. */
  .card-media {
    container-type: inline-size;
    align-self: stretch;
    place-items: end center;
    block-size: auto;
    margin: 0;
    padding-block-start: 64px;
  }

  /* Full size where the column allows (330 and 470 px from about 1240 px wide); narrower windows, such as iPad or
     iPhone Duo Safari, scale the device to the column instead of letting it cover the text. --room is how far a float
     may hang past the device toward the copy: to the column's edge plus 26 px of the 32 px gap. --room-out is the same
     toward the card's outer edge, which keeps 8 px of the card's padding (5vw, at most 72 px). */
  .device {
    --room: calc((min(330px, 80cqi) - 100cqi) / 2 - 26px);
    --room-out: calc((min(330px, 80cqi) - 100cqi) / 2 - min(5vw, 72px) + 8px);
    inline-size: min(330px, 80cqi);
    margin-block-end: -170px;
  }

  .device.duo {
    --room: calc((min(470px, 96cqi) - 100cqi) / 2 - 26px);
    --room-out: calc((min(470px, 96cqi) - 100cqi) / 2 - min(5vw, 72px) + 8px);
    inline-size: min(470px, 96cqi);
    margin-block-end: -110px;
  }

  .device .votes {
    inset-inline-start: max(-10%, var(--room));
  }

  .device .streak-count {
    inset-inline-start: max(-22%, var(--room));
  }

  .device .once-badge {
    inset-inline-end: max(-14%, var(--room));
  }

  .device .pin-drop {
    inset-inline-end: max(-6%, var(--room));
  }

  /* The desktop halo image, for a column of about 502 × 620 px. */
  .aura {
    inset-block-start: -11.81%;
    inset-inline-start: -27.87%;
    inline-size: 155.7%;
    block-size: 157.6%;
  }

  .device .c-invite {
    inset-block-start: 46%;
    inset-inline-start: max(-26%, var(--room));
  }

  /* Replies is a flipped card: this float hangs toward the card's edge, not the copy. */
  .device .c-react {
    inset-inline-start: max(-12%, var(--room-out));
  }
}

/* Cards stack only where one fits the window; on phones and short windows they are a plain list. */
@media (min-width: 900px) and (min-height: 760px) {
  .deck {
    padding-block-end: 96px;
  }

  .card {
    position: sticky;
    inset-block-start: var(--stick);
    box-shadow: 0 -12px 32px -24px rgb(0 0 0 / 0.22);
  }

  .card:nth-child(2) { inset-block-start: calc(var(--stick) + 10px); }
  .card:nth-child(3) { inset-block-start: calc(var(--stick) + 20px); }
  .card:nth-child(4) { inset-block-start: calc(var(--stick) + 30px); }
  .card:nth-child(5) { inset-block-start: calc(var(--stick) + 40px); }
  .card:nth-child(6) { inset-block-start: calc(var(--stick) + 50px); }
  .card:nth-child(7) { inset-block-start: calc(var(--stick) + 60px); }
  .card:nth-child(8) { inset-block-start: calc(var(--stick) + 70px); }
}

/* Question of the day: the brand's red, loud on purpose. White text stays at 4.8:1 or better. */
.card-red {
  background:
    radial-gradient(90% 80% at 95% 0%, #ff6b7b 0%, transparent 50%),
    linear-gradient(160deg, #dc2438, #b8122a);
  color: #fff;
  --ink: #fff;
  --ink-2: #fff;
  --key: #ffd0d5;
}

.card-red .device.duo::before {
  background-image: url('/assets/img/fx-shadow-duo-red.webp');
}

.votes {
  position: absolute;
  z-index: 3;
  inset-block-start: 22%;
  inset-inline-start: -10%;
  display: flex;
  padding: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.45),
    0 12px 30px rgb(90 0 12 / 0.3);
}

.votes img {
  inline-size: 48px;
  block-size: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.votes img + img {
  margin-inline-start: -14px;
}

/* View once: the dark room. */
.card-dark {
  background: #0b0b0c;
  color: #f2f2f2;
  --ink: #f2f2f2;
  --ink-2: #a2a2a8;
  --key: #ff5c6e;
}

.card-dark .fine a {
  color: #f2f2f2;
}

.card-dark .aura {
  opacity: 0.4;
}

.card-dark .device::before {
  background-image: url('/assets/img/fx-shadow-phone-dark.webp');
}

/* Map: a dropped pin over the phone. */
.pin-drop {
  position: absolute;
  z-index: 3;
  inset-block-start: 10%;
  inset-inline-end: -6%;
  display: grid;
  place-items: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50% 50% 50% 8px;
  rotate: -45deg;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 16px 30px -8px rgb(217 30 44 / 0.55);
}

.pin-drop .icon {
  inline-size: 26px;
  block-size: 26px;
  rotate: 45deg;
}

/* Streaks: warm, with the flame on the phone's shoulder. */
.card-warm {
  background: linear-gradient(180deg, #fff5e8, #ffe6cf);
}

.streak-count {
  position: absolute;
  z-index: 3;
  inset-block-start: 14%;
  inset-inline-start: -22%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 22px 12px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 0 0 1px #fff,
    0 16px 34px -12px rgb(160 60 0 / 0.4);
  color: #0a0a0a;
  font-family: var(--font-round);
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.streak-count .flame {
  inline-size: 36px;
  block-size: 36px;
}

/* Shared by the cards. */

.facts {
  display: grid;
  gap: 18px;
  margin: 36px 0 0;
  padding: 0;
  max-inline-size: 34em;
  list-style: none;
}

.facts li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.45;
}

.facts strong {
  color: var(--ink);
  font-weight: 650;
}

.facts .icon {
  margin-block-start: 1px;
  color: var(--ink);
}

.glass-chip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    var(--glass-shadow);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.c-invite .icon {
  inline-size: 20px;
  block-size: 20px;
}

.c-react {
  gap: 2px;
  font-size: 19px;
}

.kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 0;
  padding: 0;
  max-inline-size: 34em;
  list-style: none;
}

.kinds li {
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 15px;
  font-weight: 650;
}

.once-badge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  background: rgb(28 28 31 / 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 12px 32px rgb(0 0 0 / 0.5);
}

.once-badge span {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border: 2.5px dashed #f2f2f2;
  border-radius: 50%;
  font-family: var(--font-round);
  font-size: 22px;
  font-weight: 800;
}

/* Plans: a phrase becomes a plan. */
.typer {
  margin: 32px 0 0;
  max-inline-size: 26em;
}

.typer-field {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--elevated);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.typer-text {
  display: inline-block;
  white-space: nowrap;
}

.caret {
  display: inline-block;
  inline-size: 2px;
  block-size: 1.2em;
  margin-inline-start: 2px;
  border-radius: 2px;
  background: var(--focus);
}

.typer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.typer-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 15px;
  font-weight: 650;
}

.typer-chips .icon {
  inline-size: 17px;
  block-size: 17px;
}

/* ---- And the little things ------------------------------------------------------------------------------ */

.more {
  max-inline-size: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(72px, 9vw, 128px) var(--gutter) 0;
}

.faq {
  max-inline-size: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 140px) var(--gutter);
}

/* A bento: the two richest tiles carry art; the rest are an icon and a line. */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

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

  .tile-widgets,
  .tile-duo {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .bento .tile {
    grid-column: span 2;
  }

  .bento .tile-widgets {
    grid-column: span 4;
  }

  .bento .tile-duo {
    grid-column: 1 / -1;
  }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px;
  border-radius: 28px;
  background: var(--card);
}

.tile h3,
.promises h3 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tile p,
.promises p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}

.tile-icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  background: var(--elevated);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 6px 16px -6px rgb(0 0 0 / 0.15);
}

.tile-icon .icon {
  inline-size: 24px;
  block-size: 24px;
}

/* iPhone Duo's two screens, drawn. */
.duo-icon {
  grid-auto-flow: column;
  gap: 3px;
}

.duo-icon i {
  display: block;
  inline-size: 11px;
  block-size: 19px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.tile-duo {
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.tile-duo h3 {
  margin: 0;
}

/* Widgets: a photo widget and a Lock Screen streak on a blurred wallpaper. */
.widget-screen {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-block-size: 250px;
  margin: -28px -28px 0;
  padding: 36px 28px;
  overflow: hidden;
  background: #3a2418;
}

.widget-wall {
  position: absolute;
  inset: -20%;
  z-index: -1;
  inline-size: 140%;
  block-size: 140%;
  object-fit: cover;
}

.widget-photo {
  position: relative;
  inline-size: 168px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.45);
}

.widget-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.widget-heart {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.widget-heart svg {
  inline-size: 20px;
  block-size: 20px;
  fill: #e0243a;
}

.widget-ring {
  display: grid;
  place-items: center;
  align-content: center;
  inline-size: 96px;
  block-size: 96px;
  border-radius: 50%;
  background: rgb(20 20 24 / 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.28),
    0 14px 30px -14px rgb(0 0 0 / 0.45);
  color: #fff;
  font-family: var(--font-round);
}

.widget-ring .flame {
  inline-size: 26px;
  block-size: 26px;
}

.widget-ring b {
  font-size: 28px;
  line-height: 1;
}

@media (min-width: 1000px) {
  .widget-screen {
    gap: 28px;
    min-block-size: 290px;
  }

  .widget-photo {
    inline-size: 196px;
  }

  .widget-ring {
    inline-size: 112px;
    block-size: 112px;
  }
}

/* The song on repeat: the cover's warmth spills into the tile. */
.tile-song {
  isolation: isolate;
  background: #1b1410;
  color: #fff;
  --ink-2: rgb(255 255 255 / 0.72);
}

.tile-song::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 30% 20%, #f39a4e, transparent 70%),
    radial-gradient(60% 50% at 80% 60%, #8a3e2a, transparent 70%);
  opacity: 0.8;
}

.song-art {
  display: grid;
  gap: 14px;
}

.song-cover {
  inline-size: 100%;
  max-inline-size: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.8);
}

.song-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 18px;
}

.song-eq i {
  display: block;
  inline-size: 4px;
  border-radius: 2px;
  background: #fff;
}

.song-eq i:nth-child(1) { block-size: 60%; }
.song-eq i:nth-child(2) { block-size: 100%; }
.song-eq i:nth-child(3) { block-size: 40%; }
.song-eq i:nth-child(4) { block-size: 75%; }

.tile-song h3 {
  margin-block-start: auto;
  padding-block-start: 22px;
}

/* ---- Privacy: a calm dark room ------------------------------------------------------------------------------ */

.privacy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(72px, 9vw, 128px) max(var(--gutter), calc((100% - var(--max)) / 2)) 0;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border-radius: var(--card-radius);
  background: #0b0b0c;
  color: #f2f2f2;
  --ink: #f2f2f2;
  --ink-2: #a2a2a8;
  --key: #ff5c6e;
}

/* The house's outline, glowing faintly in the corner. */
.privacy-house {
  position: absolute;
  z-index: -1;
  inset-block-start: -10%;
  inset-inline-end: -8%;
  inline-size: min(70%, 560px);
  fill: none;
  stroke: rgb(255 92 110 / 0.22);
  stroke-width: 3;
  filter: drop-shadow(0 0 40px rgb(255 60 80 / 0.35));
}

.privacy-head {
  max-inline-size: 760px;
}

.privacy-head .lede {
  margin-block-start: 18px;
  color: #f2f2f2;
  font-weight: 600;
}

.promises {
  display: grid;
  gap: 14px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 1240px) {
  .promises {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.promises li {
  padding: 26px;
  border-radius: 24px;
  background: rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
}

.promises .tile-icon {
  background: rgb(255 255 255 / 0.1);
  box-shadow: none;
  color: #fff;
}

.promises h3 {
  font-size: 20px;
}

.privacy-more {
  margin: 28px 0 0;
}

.privacy .arrow-link {
  color: #fff;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
}

.arrow-link .icon {
  inline-size: 18px;
  block-size: 18px;
  stroke-width: 2.2;
  transition: transform 0.2s var(--ease);
}

.arrow-link:hover .icon {
  transform: translateX(calc(3px * var(--dir)));
}

[dir='rtl'] .arrow-link .icon {
  transform: scaleX(-1);
}

/* ---- FAQ ---------------------------------------------------------------------------------------------------- */

.faq-list {
  margin: 44px 0 0;
  border-block-start: 1px solid var(--hairline);
}

.faq-more {
  margin: 28px 0 0;
  max-inline-size: 40em;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

@media (min-width: 1000px) {
  .faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    column-gap: 64px;
  }

  .faq > h2 {
    grid-row: span 2;
  }

  .faq .faq-list {
    margin-block-start: 0;
  }
}

.faq details {
  border-block-end: 1px solid var(--hairline);
}

.faq summary {
  position: relative;
  padding: 22px 48px 22px 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 650;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

[dir='rtl'] .faq summary {
  padding: 22px 0 22px 48px;
}

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

.faq summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: 50%;
  inline-size: 12px;
  block-size: 12px;
  border-inline-end: 2px solid var(--ink-2);
  border-block-end: 2px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq details p {
  margin: 0;
  padding: 0 0 24px;
  max-inline-size: 40em;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

.faq details p strong {
  color: var(--ink);
  font-weight: 650;
}

/* ---- Finale: the app icon's own house (tribe-trip/brand: rendered from AppIcon.icon), settling in as you arrive -- */

.finale {
  display: grid;
  justify-items: center;
  gap: 28px;
  max-inline-size: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(80px, 11vw, 140px);
  text-align: center;
}

.finale .display {
  max-inline-size: 12ch;
}

.finale-house {
  inline-size: clamp(120px, 18vw, 180px);
}

.finale-house img {
  inline-size: 100%;
}

.fan {
  position: relative;
  display: grid;
  place-items: center;
  block-size: clamp(200px, 26vw, 300px);
}

.fan .photo {
  position: absolute;
  inline-size: clamp(96px, 11vw, 140px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 5px solid var(--canvas);
  border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.35);
  transform-origin: 50% 120%;
}

.fan .photo:nth-of-type(1) { rotate: -28deg; translate: -10% 6%; }
.fan .photo:nth-of-type(2) { rotate: -12deg; translate: -4% -2%; }
.fan .photo:nth-of-type(3) { rotate: 12deg; translate: 4% -2%; }
.fan .photo:nth-of-type(4) { rotate: 28deg; translate: 10% 6%; }

.fan .finale-house {
  position: relative;
  z-index: 2;
  inline-size: clamp(110px, 13vw, 170px);
}

.fan .finale-house img {
  filter: drop-shadow(0 24px 40px rgb(217 30 44 / 0.35));
}

/* ---- Footer ------------------------------------------------------------------------------------------------- */

.footer {
  border-block-start: 1px solid var(--hairline);
  padding: 28px var(--gutter) max(36px, env(safe-area-inset-bottom));
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  max-inline-size: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
}

.footer .brand-mark {
  inline-size: 18px;
  block-size: 18px;
}

.footer .wordmark {
  font-size: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.4;
}

.footer-links a {
  display: inline-block;
  padding-block: 5px;
  color: var(--ink-2);
  text-decoration-line: none;
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration-line: underline;
}

.footer-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
}

/* ---- Pages: /support and the 404 page ----------------------------------------------------------------------- */

.nav-links a[aria-current='page'] {
  background: rgb(127 127 127 / 0.14);
}

@media (max-width: 420px) {
  .nav-links a {
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media (max-width: 340px) {
  .nav .wordmark {
    display: none;
  }
}

.page {
  max-inline-size: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(64px, 9vw, 120px);
}

.page-hero {
  max-inline-size: 760px;
}

.page-hero .display {
  font-size: clamp(42px, 11vw, 56px);
}

.page-hero .lede {
  max-inline-size: 36em;
}

.help-cards {
  display: grid;
  gap: 20px;
  margin-block-start: clamp(40px, 6vw, 64px);
}

@media (min-width: 900px) {
  .help-cards {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.help-card {
  padding: clamp(24px, 3.4vw, 36px);
  border-radius: 28px;
  background: var(--card);
}

.help-card > .icon {
  inline-size: 30px;
  block-size: 30px;
  stroke-width: 1.6;
}

.help-card h2 {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 750;
  letter-spacing: -0.025em;
}

.help-card p {
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.5;
}

.contact-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Write to us: the brand red, like the home page's question card. White text stays at 4.8:1 or better, and the
   white mail pill carries the darker red (6:1). */
.contact-card {
  background:
    radial-gradient(90% 80% at 95% 0%, #ff6b7b 0%, transparent 50%),
    linear-gradient(160deg, #dc2438, #b8122a);
  color: #fff;
  --ink: #fff;
  --ink-2: #fff;
  --ink-inverse: #b8122a;
  --hairline: rgb(255 255 255 / 0.32);
}

/* Safety: the home page's dark room. */
.safety-card {
  background: #0b0b0c;
  color: #f2f2f2;
  --ink: #f2f2f2;
  --ink-2: #a2a2a8;
  --hairline: rgb(255 255 255 / 0.12);
}

.mail-row {
  margin-block-start: 20px;
}

.mail-pill {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mail-pill:hover {
  opacity: 0.86;
}

.help-card .note {
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--hairline);
  font-size: 15px;
}

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

.steps li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}

.steps li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}

.steps strong,
.qa strong {
  color: var(--ink);
  font-weight: 650;
}

.path {
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 420px) {
  .path {
    white-space: normal;
  }
}

.topics {
  margin-block-start: clamp(56px, 8vw, 96px);
}

.topics-title {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.topics ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topics a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.2s;
}

.topics a:hover {
  background: var(--surface-2);
}

.topics .icon {
  inline-size: 18px;
  block-size: 18px;
}

.qa-section {
  display: grid;
  gap: 8px 48px;
  margin-block-start: clamp(56px, 8vw, 96px);
  padding-block-start: 28px;
  border-block-start: 1px solid var(--hairline);
  scroll-margin-block-start: 88px;
}

@media (min-width: 900px) {
  .qa-section {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  }

  .qa-section > h2 {
    position: sticky;
    inset-block-start: 96px;
    align-self: start;
  }
}

.qa-section > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.qa {
  max-inline-size: 40em;
}

.qa h3 {
  margin: 26px 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.qa h3:first-child {
  margin-block-start: 4px;
}

.qa p {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

.qa p + p {
  margin-block-start: 12px;
}

/* The 404 page: a house with nobody home. */
.lost {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-inline-size: 720px;
  margin: 0 auto;
  padding: clamp(48px, 10vw, 120px) var(--gutter) clamp(72px, 12vw, 140px);
  text-align: center;
}

.lost .display {
  font-size: clamp(44px, 11vw, 84px);
}

.lost .lede {
  margin: 0;
}

/* "Page not found" sits nearer its headline than the house above it. */
.lost .label {
  margin: 12px 0 -6px;
}

.lost-house {
  inline-size: clamp(120px, 26vw, 168px);
  aspect-ratio: 512 / 510.465;
  margin-block-end: 6px;
}

.lost-house svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.lost-line {
  fill: none;
  stroke: url(#brand-red);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lost-door {
  fill: url(#brand-red);
  opacity: 0.18;
}

.lost-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
}

.pill-link.quiet {
  background: var(--chip);
  color: var(--ink);
}

.pill-link:hover {
  opacity: 0.86;
}

/* ---- Motion: all of it optional --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* The arrival: the outline draws itself (the app's pull to refresh), the house fills, its door opens. */
  .hero .house-line {
    animation:
      line-draw 1.1s var(--ease) 0.15s both,
      line-out 0.5s ease 2s forwards;
  }

  .hero .house-red,
  .hero .hero-house::before,
  .hero .door {
    animation: fade-in 0.45s ease 0.75s both;
  }

  .hero .house-photo {
    animation: photo-in 0.9s var(--ease) 1.2s both;
  }

  .hero .house-edge {
    animation: fade-in 0.9s ease 1.2s both;
  }

  .hero .house-photo img {
    animation: ken-burns 24s ease-in-out 2.1s infinite alternate;
  }

  .hero .float {
    animation: float-in 0.7s var(--spring) both;
  }

  .hero .f-house {
    animation-delay: 1.7s;
  }

  .hero .f-knock {
    animation-delay: 1.94s;
  }

  .hero .f-voice {
    animation-delay: 2.06s;
  }

  .hero .f-plan {
    animation-delay: 2.18s;
  }

  .hero-copy > * {
    animation: rise 0.8s var(--ease) both;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .ribbon-track {
    animation: drift 80s linear infinite;
  }

  .ribbon:hover .ribbon-track {
    animation-play-state: paused;
  }

  .caret {
    animation: blink 1.1s steps(1) infinite;
  }

  /* Scroll-driven reveals where the browser has them (Safari 26, Chrome); elsewhere everything is simply there. */
  @supports (animation-timeline: view()) {
    /* The feature cards and the privacy card keep their copy and devices still: they pin as you scroll, and the
       product images carry no scroll animation (README "Images"). */
    .more .display,
    .tile,
    .faq .display,
    .faq details {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    .typer {
      view-timeline: --typer block;
    }

    /* The phrase types itself and its chips pop in as the field scrolls up the screen. */
    .typer-text {
      animation: type steps(23, end) both;
      animation-timeline: --typer;
      animation-range: entry 40% cover 35%;
    }

    .typer-chips li {
      animation: chip-in linear both;
      animation-timeline: --typer;
      animation-range: cover 30% cover 40%;
    }

    .typer-chips li:nth-child(2) {
      animation-range: cover 33% cover 43%;
    }

    .typer-chips li:nth-child(3) {
      animation-range: cover 36% cover 46%;
    }

    /* Where the cards pin, the browser stretches this timeline over the whole pinned stretch, so finish everything
       while the field is still entering: it is fully in view by the time the card pins. */
    @media (min-width: 900px) and (min-height: 760px) {
      .typer-text {
        animation-range: entry 0% entry 55%;
      }

      .typer-chips li {
        animation-range: entry 45% entry 75%;
      }

      .typer-chips li:nth-child(2) {
        animation-range: entry 55% entry 85%;
      }

      .typer-chips li:nth-child(3) {
        animation-range: entry 65% entry 95%;
      }
    }

    /* The hand of photos opens as you reach the end. */
    .fan .photo {
      animation: fan-open linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }

    /* The finale's house drops in and settles as you reach it, like the app's pull to refresh letting go. */
    .finale-house img {
      animation: house-settle linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}

@keyframes line-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes line-out {
  from {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  to {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes photo-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ken-burns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08) translate(calc(-1.5% * var(--dir)), -1%);
  }
}

@keyframes house-settle {
  0% {
    opacity: 0;
    transform: translateY(-36px) scale(0.9);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes drift {
  to {
    transform: translateX(calc((-50% - 7px) * var(--dir)));
  }
}

@keyframes fan-open {
  from {
    rotate: 0deg;
    translate: 0 10%;
  }
}

@media print {
  .topbar,
  .skip,
  .hero-stage,
  .ribbon,
  .card-media,
  .fan {
    display: none;
  }

  .card,
  .privacy {
    background: none;
    color: inherit;
  }
}

/* The latest app's rounded cards and floating, softly translucent controls. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--glass-strong);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
}
.eyebrow-mark { inline-size: 15px; block-size: 15px; }
.hero .soon, .finale .soon {
  min-block-size: 52px;
  padding-inline: 24px;
  background: var(--ink);
  color: var(--ink-inverse);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero .soon:hover, .finale .soon:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow); }
@media (prefers-reduced-motion: reduce) {
  .hero .soon, .finale .soon { transition: none; }
  .hero .soon:hover, .finale .soon:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-eyebrow { background: var(--elevated); }
}

/* ---- The new surfaces in dark mode, more contrast and less transparency ------------------------------------ */

@media (prefers-color-scheme: dark) {
  .card-dark,
  .privacy,
  .safety-card {
    background: #000;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  }

  .card-warm {
    background: linear-gradient(180deg, #2a1d12, #1f150c);
  }

  .streak-count {
    background: rgb(40 40 44 / 0.78);
    color: #f2f2f2;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.14),
      0 16px 34px -12px rgb(0 0 0 / 0.6);
  }

  .tile-icon {
    background: #232326;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  }

  .ribbon-tag {
    background: rgb(28 28 31 / 0.6);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
    color: #f2f2f2;
  }

  .aura {
    opacity: 0.45;
  }
}

@media (prefers-contrast: more) {
  .card-red,
  .contact-card {
    background: #b8122a;
  }

  .aura,
  .widget-wall {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ribbon-tag,
  .votes,
  .streak-count,
  .widget-ring,
  .promises li {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ribbon-tag {
    background: var(--elevated);
  }

  .votes {
    background: #b8122a;
  }
}