/* Rizzpond site. Tokens from Design/design_handoff_rizzpond/README.md: Void, Surface 1 and 2, Ink, Rizz Coral.
   Flat surfaces, no gradients, no shadows. Space Grotesk Bold for display (self-hosted), system text for body.
   Dark is the brand; light is the same system on paper. Text on coral is always Void. */

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

:root {
  --coral: #FF4D6D;
  --coral-pressed: #E63E5C;
  --void: #0B0B0F;
  --sent: #3DDC84;

  --bg: #0B0B0F;
  --surface-1: #15151A;
  --surface-2: #1F1F26;
  --ink: #F5F5F7;
  --ink-60: rgba(245, 245, 247, .6);
  --ink-35: rgba(245, 245, 247, .35);
  --stroke: rgba(245, 245, 247, .08);
  /* Coral as small text. On Void the brand coral passes; on paper it needs to be deeper. */
  --coral-text: #FF4D6D;

  --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --inset: 20px;
  --max: 1120px;
  --section: 96px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F5F7;
    --surface-1: #FFFFFF;
    --surface-2: #E9E9EE;
    --ink: #0B0B0F;
    --ink-60: rgba(11, 11, 15, .66);
    --ink-35: rgba(11, 11, 15, .4);
    --stroke: rgba(11, 11, 15, .1);
    --coral-text: #C4274A;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F5F5F7;
  --surface-1: #FFFFFF;
  --surface-2: #E9E9EE;
  --ink: #0B0B0F;
  --ink-60: rgba(11, 11, 15, .66);
  --ink-35: rgba(11, 11, 15, .4);
  --stroke: rgba(11, 11, 15, .1);
  --coral-text: #C4274A;
  color-scheme: light;
}

/* The phone is the app, and the app is always dark. */
.app {
  --bg: #0B0B0F;
  --surface-1: #15151A;
  --surface-2: #1F1F26;
  --ink: #F5F5F7;
  --ink-60: rgba(245, 245, 247, .6);
  --ink-35: rgba(245, 245, 247, .35);
  --stroke: rgba(245, 245, 247, .08);
  --coral-text: #FF4D6D;
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

/* ---------- Header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand svg { width: 28px; height: 28px; color: var(--coral); --eye: var(--void); }
.wordmark { font: 700 22px/1 var(--display); letter-spacing: -.05em; }
.wordmark b { font-weight: 700; color: var(--coral); }
.top nav { display: flex; gap: 4px; }
.top nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 500; font-size: 15px; color: var(--ink-60); text-decoration: none; border-radius: 999px;
}
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.top nav a.extra { display: none; }
@media (min-width: 560px) { .top nav a.extra { display: inline-flex; } }

/* ---------- Type ---------- */
.display {
  font: 700 clamp(44px, 11.5vw, 88px)/.98 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.h2 { font: 700 clamp(34px, 6.4vw, 56px)/1.02 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.eyebrow { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--coral-text); }
.lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--ink-60); max-width: 34em; text-wrap: pretty; }
.coral { color: var(--coral-text); }

/* ---------- Buttons and pills ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; border: 0;
  background: var(--coral); color: var(--void);
  font: 600 17px/1 var(--body); letter-spacing: -.01em; text-decoration: none;
}
a.cta:hover { background: var(--coral-pressed); }
.cta svg { width: 18px; height: 18px; }
.cta-note { margin-top: 12px; font-size: 14px; color: var(--ink-60); }

.says {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font: 600 15px/1.2 var(--body);
}

/* ---------- Hero ---------- */
.hero { padding-block: 28px var(--section); display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-stage { position: relative; display: grid; justify-items: center; min-width: 0; }
.hero-wink { position: absolute; left: 50%; top: -34px; translate: 78px 0; z-index: 2; display: grid; justify-items: center; gap: 8px; }
.hero-wink .wink { width: 92px; height: 92px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 40px; padding-block: 56px 128px; }
  .hero-wink { translate: 124px 0; top: -46px; }
  .hero-wink .wink { width: 120px; height: 120px; }
}

/* ---------- Wink ---------- */
.wink { color: var(--coral); --eye: var(--void); overflow: visible; transform-origin: 30% 85%; animation: breathe 4s ease-in-out infinite; }
.wink .face > g { display: none; }
.wink[data-mood="idle"] .m-idle, .wink[data-mood="wink"] .m-wink, .wink[data-mood="thinking"] .m-thinking,
.wink[data-mood="hype"] .m-hype, .wink[data-mood="asleep"] .m-asleep, .wink[data-mood="sad"] .m-sad { display: block; }
.wink[data-mood="thinking"] { animation: think 2.4s ease-in-out infinite; }
.wink[data-mood="wink"] { animation: winkTilt 1.4s cubic-bezier(.3, 1.3, .5, 1) 1; }
.wink[data-mood="hype"] { animation: jump .8s cubic-bezier(.3, 1.3, .5, 1) 2; }
.wink .m-idle circle { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.wink .dots circle { animation: pulse 1.2s ease-in-out infinite; }
.wink .dots circle:nth-child(2) { animation-delay: .15s; }
.wink .dots circle:nth-child(3) { animation-delay: .3s; }
@keyframes breathe { 50% { transform: scale(1.025, .985); } }
@keyframes think { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-7deg) translateY(-3px); } }
@keyframes winkTilt { 30% { transform: rotate(-9deg) scale(1.05); } 60% { transform: rotate(4deg); } 100% { transform: none; } }
@keyframes jump { 20% { transform: scale(1.14, .84); } 50% { transform: translateY(-22px) scale(.9, 1.14); } 78% { transform: scale(1.08, .93); } 100% { transform: none; } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- The phone ---------- */
.phone {
  width: min(100%, 340px); min-width: 0; border-radius: 46px; padding: 10px;
  background: #000; border: 1px solid rgba(245, 245, 247, .14);
}
.screen {
  border-radius: 37px; background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column; min-height: 610px; padding: 16px 16px 18px;
}
.island { width: 92px; height: 26px; border-radius: 999px; background: #000; margin: 0 auto 14px; flex: none; }
.bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bar .title { font: 600 16px/1 var(--body); }
.round { width: 36px; height: 36px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink); }
.round svg { width: 16px; height: 16px; }

.thread { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.who { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--stroke); font: 600 15px/1 var(--body); }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; font: 700 14px/1 var(--display); color: var(--ink-60); }
.bubble { max-width: 84%; padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.them { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.you { align-self: flex-end; background: #2B2B34; border-bottom-right-radius: 6px; }
.reply { align-self: flex-end; background: var(--coral); color: var(--void); border-bottom-right-radius: 6px; font-weight: 500; min-height: 38px; }
.reply.typing { display: inline-flex; gap: 5px; align-items: center; padding-block: 14px; }
.reply.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--void); animation: pulse 1s ease-in-out infinite; }
.reply.typing i:nth-child(2) { animation-delay: .15s; }
.reply.typing i:nth-child(3) { animation-delay: .3s; }

/* contain: inline-size keeps the scrolling chip row from widening the phone (a scroll container still reports its
   content as its min-content width, which pushed the whole hero past the screen on a 375px phone). */
.chips { display: flex; gap: 8px; margin: 14px -16px 0; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; contain: inline-size; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--stroke); color: var(--ink);
  font: 500 15px/1 var(--body); display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--void); font-weight: 600; }
.chip svg { width: 13px; height: 13px; }
.screen .spacer { flex: 1; min-height: 14px; }
.copy {
  width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--coral); color: var(--void); font: 600 17px/1 var(--body);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.copy[data-done="true"] { background: var(--sent); }
.copy svg { width: 18px; height: 18px; }
.hint { text-align: center; font-size: 13px; color: var(--ink-35); margin-top: 10px; }

/* Home, reading state */
.shot { position: relative; align-self: center; width: 118px; height: 210px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--stroke); padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.shot span { height: 12px; border-radius: 6px; background: var(--surface-2); }
.shot span.r { align-self: flex-end; background: #34343F; }
.shot::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--coral); animation: sweep 2.6s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(208px); opacity: 0; } }
.read-line { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--body); color: var(--coral-text); margin-top: 2px; }
.read-line svg { width: 16px; height: 16px; }

/* ---------- Facts strip ---------- */
.facts { border-block: 1px solid var(--stroke); }
.facts ul { display: grid; grid-template-columns: 1fr 1fr; }
.facts li { padding: 22px 0; font: 600 15px/1.3 var(--body); display: flex; gap: 10px; align-items: flex-start; }
.facts li:nth-child(odd) { padding-right: 14px; }
.facts li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--stroke); }
.facts li:nth-child(n+3) { border-top: 1px solid var(--stroke); }
.facts svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--coral-text); }
@media (min-width: 900px) {
  .facts ul { grid-template-columns: repeat(4, 1fr); }
  .facts li, .facts li:nth-child(odd), .facts li:nth-child(even) { padding: 26px 22px; border-top: 0; border-left: 1px solid var(--stroke); }
  .facts li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- The problem, set large ---------- */
.problem { padding-block: var(--section); }
.problem p { font: 700 clamp(36px, 8vw, 84px)/1 var(--display); letter-spacing: -.045em; text-wrap: balance; max-width: 13em; }
.problem p + p { margin-top: .35em; color: var(--coral-text); }

/* ---------- Benefits ---------- */
.benefit { padding-block: 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.benefit-copy { display: grid; gap: 18px; justify-items: start; }
.benefit-visual { display: grid; justify-items: center; min-width: 0; }
@media (min-width: 900px) {
  .benefit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding-block: 88px; }
  .benefit.flip .benefit-copy { order: 2; }
}

.voice { width: min(100%, 420px); display: grid; gap: 12px; }
.voice-card { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 20px; padding: 18px; display: grid; gap: 12px; }
.voice-card.mine { border: 1.5px solid var(--coral); }
.voice-card .label { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-35); }
.voice-card.mine .label { color: var(--coral-text); }
.voice-card .text { font-size: 19px; line-height: 1.35; }
.voice-card:not(.mine) .text { color: var(--ink-60); }
.traits { display: flex; flex-wrap: wrap; gap: 6px; }
.traits span { padding: 6px 11px; border-radius: 999px; background: var(--surface-2); font: 500 13px/1 var(--body); color: var(--ink-60); }

/* ---------- Who it is for ---------- */
.forwho { padding-block: var(--section); display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.forwho ul { display: grid; gap: 0; border-top: 1px solid var(--stroke); }
.forwho li { padding: 22px 0; border-bottom: 1px solid var(--stroke); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.35; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; text-wrap: pretty; }
.forwho li span { font: 700 14px/1 var(--display); color: var(--coral-text); }
@media (min-width: 900px) { .forwho { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; } }

/* ---------- Plans, plainly ---------- */
.plans { display: grid; gap: 12px; padding-bottom: var(--section); }
.plan { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 24px; padding: 26px 22px; display: grid; gap: 10px; align-content: start; }
.plan h3 { font: 700 26px/1.1 var(--display); letter-spacing: -.03em; }
.plan p { color: var(--ink-60); max-width: 36em; }
@media (min-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .plan { padding: 34px 32px; } }

/* ---------- Closing ---------- */
.closing { background: var(--coral); color: var(--void); }
.closing .wrap { padding-block: 88px; display: grid; gap: 28px; justify-items: start; }
.closing .wink { color: var(--void); --eye: var(--coral); width: 96px; height: 96px; }
.closing .cta { background: var(--void); color: #F5F5F7; }
.closing .cta-note { color: rgba(11, 11, 15, .72); }
@media (min-width: 900px) { .closing .wrap { padding-block: 128px; } }

/* ---------- Footer ---------- */
.foot { padding-block: 40px 56px; display: grid; gap: 24px; font-size: 15px; color: var(--ink-60); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 500; }
.foot nav a:hover { color: var(--coral-text); }
.foot .small { font-size: 14px; line-height: 1.55; max-width: 46em; }
.theme { justify-self: start; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--surface-1); cursor: pointer; font: 500 14px/1 var(--body); color: var(--ink); }
@media (min-width: 900px) { .foot { grid-template-columns: 1fr auto; align-items: start; } .foot .small { grid-column: 1 / -1; } }

/* ---------- Reveal on scroll ---------- */
/* Driven by the browser's own scroll timeline, so it needs no script and cannot leave a section hidden when timers
   or observers are throttled. Browsers without view() timelines simply show everything. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* ---------- Documents: privacy, terms, support ---------- */
.doc { padding-block: 24px var(--section); display: grid; gap: 40px; }
.doc-head { display: grid; gap: 18px; max-width: 44em; }
.doc-head .display { font-size: clamp(40px, 9vw, 72px); }
.notice { border: 1px dashed var(--coral-text); border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.5; max-width: 44em; }
.notice strong { color: var(--coral-text); }
.short { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 24px; padding: 24px 22px; max-width: 46em; display: grid; gap: 14px; }
.short h2 { font: 700 24px/1.1 var(--display); letter-spacing: -.03em; }
.short li { padding-left: 28px; position: relative; }
.short li + li { margin-top: 10px; }
.short li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2.5px solid var(--coral-text); border-bottom: 2.5px solid var(--coral-text); rotate: -45deg; }
.prose { max-width: 42em; display: grid; gap: 14px; }
.prose h2 { font: 700 clamp(26px, 4vw, 34px)/1.1 var(--display); letter-spacing: -.035em; margin-top: 34px; scroll-margin-top: 20px; }
.prose h3 { font: 600 19px/1.3 var(--body); margin-top: 14px; }
.prose ul { display: grid; gap: 8px; }
.prose ul li { padding-left: 20px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 6px; height: 6px; border-radius: 999px; background: var(--coral-text); }
.prose a { color: var(--coral-text); text-underline-offset: 3px; }
.prose .muted { color: var(--ink-60); }
.table { overflow-x: auto; border: 1px solid var(--stroke); border-radius: 16px; background: var(--surface-1); }
.table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; line-height: 1.45; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--stroke); }
.table tr:last-child td { border-bottom: 0; }
.table th { font: 600 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); }

/* A value only David can give. Loud on purpose, so it cannot ship by accident. */
.placeholder { display: inline-block; padding: 2px 8px; border-radius: 8px; border: 1.5px dashed var(--coral-text); color: var(--coral-text); font: 600 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

.faq { max-width: 46em; border-top: 1px solid var(--stroke); }
.faq details { border-bottom: 1px solid var(--stroke); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font: 600 18px/1.35 var(--body); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border-right: 2.5px solid var(--coral-text); border-bottom: 2.5px solid var(--coral-text); rotate: 45deg; transition: rotate .2s ease-out; }
.faq details[open] summary::after { rotate: -135deg; top: 30px; }
.faq .answer { padding: 0 0 22px; color: var(--ink-60); display: grid; gap: 10px; max-width: 40em; }
.faq .answer a { color: var(--coral-text); }
.contact { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 24px; padding: 24px 22px; max-width: 46em; display: grid; gap: 12px; }
.contact h2 { font: 700 26px/1.1 var(--display); letter-spacing: -.03em; }
.contact dl { display: grid; gap: 12px; }
.contact dt { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 6px; }

.lost { min-height: 62vh; display: grid; align-content: center; justify-items: start; gap: 22px; padding-block: 56px; }
.lost .wink { width: 120px; height: 120px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Wink's ink, and the not-yet-released call to action ---------- */
.wink .e, .brand svg .e { fill: var(--eye); }
.wink .a, .brand svg .a { fill: none; stroke: var(--eye); stroke-width: 6.5; stroke-linecap: round; }
.wink .a.thin { stroke-width: 5; }
.hero-stage { padding-top: 96px; }
.hero-wink { top: 0; }
@media (min-width: 900px) { .hero-stage { padding-top: 110px; } .hero-wink { top: 0; } }
/* Until the app is on the App Store this is a status, not a button, so it must not look pressable. */
.cta.soon { background: transparent; color: var(--ink); border: 1.5px solid var(--coral); }
.closing .cta.soon { background: transparent; color: var(--void); border-color: var(--void); }
.demo-note { margin-top: 14px; font-size: 13px; color: var(--ink-35); text-align: center; }

/* ==========================================================================
   v7 — the coral home page (Design/website/Rizzpond Home v7.dc.html)
   Coral is the home colour and the story happens on dark islands cut into it.
   Scoped to <body class="home">, so the document pages keep the readable
   dark/light system above and the theme toggle still means something there.
   ========================================================================== */

body.home {
  --bg: var(--coral);
  --ink: var(--void);
  --ink-60: rgba(11, 11, 15, .72);
  --ink-35: rgba(11, 11, 15, .5);
  --stroke: rgba(11, 11, 15, .16);
  --surface-1: rgba(11, 11, 15, .06);
  --surface-2: rgba(11, 11, 15, .1);
  --coral-text: var(--void);
  background: var(--coral);
  color: var(--void);
  color-scheme: light;
}
/* Coral is the brand's home colour in both system themes; the phones stay dark because the app is. */
body.home .top nav a:hover, body.home .top nav a[aria-current="page"] { color: var(--void); }
body.home .wordmark b { color: var(--void); }
body.home .brand svg { color: var(--void); --eye: var(--coral); }
body.home .wink { color: var(--void); --eye: var(--coral); }
body.home .cta { background: var(--void); color: #F5F5F7; }
body.home a.cta:hover { background: #1C1C24; }
body.home .cta.soon { background: transparent; color: var(--void); border: 1.5px solid var(--void); }

/* Header: the App Store pill lives in the nav on the home page. */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--void); color: #F5F5F7;
  font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap;
}
.nav-cta:hover { background: #1C1C24; }
.nav-cta.soon { background: transparent; color: var(--void); border: 1.5px solid var(--void); }
.top nav { align-items: center; }

/* ---------- Hero ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--void); color: #F5F5F7; font: 600 12px/1 var(--body);
  letter-spacing: .06em; text-transform: uppercase;
}
.tag svg { width: 13px; height: 13px; }

.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 18px; font-size: 14px; color: var(--ink-60); }
.meta-row span { display: inline-flex; align-items: center; gap: 7px; }
.meta-row svg { width: 15px; height: 15px; flex: none; }

/* Wink's speech, floating over the phone. On coral it is the dark pill. */
body.home .says { background: var(--void); color: #F5F5F7; }

/* ---------- The scrolling strip of places you get stuck ----------
   The design shows the companies' marks here. We set the names in type instead: using another
   company's trademark without permission is a known App Review rejection, and the app removed the
   same five icons on 21 September (docs/MESSAGING_APP_ASSETS.md). Design/website/README.md says why. */
.strip { border-block: 1px solid var(--stroke); padding-block: 26px; overflow: hidden; }
.strip .label { text-align: center; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 20px; }
.marquee { display: flex; gap: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { display: flex; flex: none; gap: 44px; padding-right: 44px; align-items: center; animation: slide 34s linear infinite; }
.marquee li { font: 700 clamp(22px, 3.6vw, 34px)/1 var(--display); letter-spacing: -.035em; white-space: nowrap; }
.marquee li em { font: 500 14px/1 var(--body); font-style: normal; letter-spacing: 0; color: var(--ink-60); margin-left: 8px; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee:hover ul, .marquee:focus-within ul { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; overflow-x: auto; }
  .marquee ul { animation: none; }
  .marquee ul + ul { display: none; }
}

/* ---------- Dark island: a section cut out of the coral ---------- */
.island-block {
  background: var(--void);
  color: #F5F5F7;
  --bg: #0B0B0F; --surface-1: #15151A; --surface-2: #1F1F26;
  --ink: #F5F5F7; --ink-60: rgba(245,245,247,.62); --ink-35: rgba(245,245,247,.38);
  --stroke: rgba(245,245,247,.1); --coral-text: #FF4D6D;
  position: relative;
}
.island-block .h2, .island-block .display { color: #F5F5F7; }
/* These four beat body.home on purpose: inside a dark island the page's coral rules would paint
   Wink void-on-void and turn the outlined "Coming to the App Store" pill invisible. */
body.home .island-block .cta { background: var(--coral); color: var(--void); }
body.home .island-block a.cta:hover { background: var(--coral-pressed); }
body.home .island-block .cta.soon { background: transparent; color: #F5F5F7; border: 1.5px solid var(--coral); }
body.home .island-block .wink { color: var(--coral); --eye: var(--void); }
body.home .island-block a { color: #F5F5F7; }
/* The wave edges. Two SVGs, one at each end, filled with the page colour so the island looks poured in. */
.wave { display: block; width: 100%; height: clamp(30px, 5vw, 62px); fill: var(--coral); }
.wave.top { margin-bottom: -1px; }
.wave.bottom { margin-top: -1px; }
.island-block > .inner { padding-block: clamp(64px, 9vw, 112px); }

/* ---------- How it works: three steps ---------- */
.steps { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.step {
  background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 26px;
  padding: 24px 22px 26px; display: grid; gap: 14px; align-content: start;
}
.step .n { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-text); }
.step h3 { font: 700 clamp(22px, 3vw, 27px)/1.1 var(--display); letter-spacing: -.03em; }
.step p { font-size: 15px; color: var(--ink-60); }
.step .demo { background: var(--bg); border: 1px solid var(--stroke); border-radius: 18px; padding: 14px; display: grid; gap: 8px; min-height: 128px; align-content: center; }
.step .bubble { max-width: 92%; }
.step .tones { display: flex; flex-wrap: wrap; gap: 6px; }
.step .tones span { padding: 7px 13px; border-radius: 999px; background: var(--surface-2); font: 500 13px/1 var(--body); color: var(--ink-60); }
.step .tones span.on { background: var(--coral); color: var(--void); font-weight: 600; }

/* ---------- Pick a reply: the three cards you can actually copy ---------- */
.picker { display: grid; gap: 12px; margin-top: 36px; }
.pick {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 22px;
  padding: 18px 20px; display: grid; gap: 10px; transition: border-color .15s ease-out;
}
.pick:hover { border-color: var(--coral); }
.pick .label { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-35); }
.pick.best .label { color: var(--coral-text); }
.pick .text { font-size: clamp(17px, 2vw, 19px); line-height: 1.35; }
.pick .act { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--body); color: var(--coral-text); }
.pick .act svg { width: 15px; height: 15px; }
.pick[data-done="true"] .act { color: var(--sent); }
.pick[data-done="true"] { border-color: var(--sent); }
.try { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--body); color: var(--ink-60); margin-top: 22px; }

/* ---------- Four promises ---------- */
.promises { display: grid; gap: 14px; }
@media (min-width: 720px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .promises { grid-template-columns: repeat(4, 1fr); } }
.promise { border: 1px solid var(--stroke); border-radius: 24px; padding: 22px 20px; display: grid; gap: 10px; align-content: start; }
.promise svg { width: 22px; height: 22px; }
.promise h3 { font: 700 20px/1.15 var(--display); letter-spacing: -.03em; }
.promise p { font-size: 15px; color: var(--ink-60); }

/* ---------- Section head shared by the new sections ---------- */
.sec-head { display: grid; gap: 16px; justify-items: start; max-width: 40em; }

/* ---------- Footer, four columns ---------- */
.foot-grid { display: grid; gap: 28px; padding-block: 56px 20px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.foot-grid h2 { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 14px; }
.foot-grid ul { display: grid; gap: 2px; }
.foot-grid ul a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; font-size: 15px; }
.foot-grid ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-tag { font: 700 clamp(24px, 4vw, 32px)/1.05 var(--display); letter-spacing: -.04em; max-width: 8em; }
.foot-bottom { border-top: 1px solid var(--stroke); padding-block: 22px 48px; display: grid; gap: 14px; font-size: 13px; line-height: 1.55; color: var(--ink-60); }
@media (min-width: 760px) { .foot-bottom { grid-template-columns: 1fr auto; align-items: center; } .foot-bottom .small { grid-column: 1 / -1; } }

/* ---------- Sticky App Store pill on small screens ---------- */
.sticky-cta {
  position: fixed; left: 50%; translate: -50% 0; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s ease-out, translate .25s ease-out;
  box-shadow: 0 8px 30px rgba(11, 11, 15, .28);
}
.sticky-cta[data-show="true"] { opacity: 1; pointer-events: auto; }
/* It floats over whatever is underneath, so it has to be solid — an outlined pill on top of a headline
   is unreadable in both directions. */
body.home .sticky-cta.soon { background: var(--void); color: #F5F5F7; border-color: var(--void); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Legal index ---------- */
.legal-list { display: grid; gap: 12px; max-width: 46em; }
.legal-list a {
  background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 20px;
  padding: 20px 22px; display: grid; gap: 6px; text-decoration: none;
}
.legal-list a:hover { border-color: var(--coral-text); }
.legal-list strong { font: 700 21px/1.15 var(--display); letter-spacing: -.03em; }
.legal-list span { font-size: 15px; color: var(--ink-60); }

/* Page-to-page links inside a document, above the fold. */
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--surface-1); text-decoration: none;
  font: 500 14px/1 var(--body); color: var(--ink-60);
}
.doc-nav a:hover { color: var(--ink); border-color: var(--coral-text); }
.doc-nav a[aria-current="page"] { background: var(--coral); border-color: var(--coral); color: var(--void); font-weight: 600; }

/* Copied, on coral. The app's green reads as a stain on this background and fails contrast against it,
   so the coral page shows the confirmation in Void with a filled chip instead. The phones keep the green,
   because inside the phone we are drawing the app. */
body.home .pick[data-done="true"] { border-color: var(--void); background: rgba(11, 11, 15, .12); }
body.home .pick[data-done="true"] .act { color: var(--void); font-weight: 700; }

/* The void-coloured marks are near-black, so on the dark page they need a tile to be visible at all.
   It doubles as a check that the mark still reads on a light background. */
.promise img.on-light { background: #F5F5F7; border-radius: 14px; padding: 8px; }
.promise img { border-radius: 14px; }

/* The header is one flex row. Adding the "Coming soon" pill to the nav made that row wider than a
   375px phone, and because the mark is itself a flex item with no flex-basis it was the thing that
   shrank — down to a 4px dot next to the wordmark. Pin the mark, let the nav give ground instead. */
.brand svg { flex: none; }
.brand { min-width: 0; }
.wordmark { white-space: nowrap; }
@media (max-width: 420px) {
  .top { gap: 10px; }
  .top nav { gap: 0; }
  .top nav a { padding: 0 8px; }
  .nav-cta { padding: 0 14px; font-size: 14px; }
}

/* Wink stands to the right of the phone, offset by a fixed translate. A speech pill longer than
   "reading…" (Meet Wink says "i live inside Rizzpond ;)") then hangs 58px off the right edge of a
   375px screen. Pull Wink back in and cap the pill on small screens. */
@media (max-width: 600px) {
  /* left:50% puts the group's LEFT edge on the centre line, so a wider pill grows rightwards off the
     screen. Centre the group on the offset point instead and the pill grows both ways. */
  .hero-wink { translate: calc(-50% + 88px) 0; }
  .hero-wink .says { max-width: 44vw; text-align: center; }
}

/* ---------- Small utilities ----------
   These exist because `_headers` sets style-src 'self': a CSP without 'unsafe-inline' blocks
   style="" attributes as well as <style> blocks, so an inline style works locally and silently
   does nothing once the site is on Cloudflare. Everything that used to be inline lives here. */
.u-section { padding-block: var(--section); }
.u-block { display: block; }
.u-head-gap { margin-bottom: 36px; }
.u-brand-gap { margin-bottom: 14px; }
.u-stack { display: grid; gap: 26px; justify-items: start; }
.u-wink-lg { width: 96px; height: 96px; }
.u-dim { color: var(--ink-60); }
.island-block .u-dim { color: rgba(245, 245, 247, .62); }
.u-link-plain { color: inherit; text-underline-offset: 3px; }
.u-link-arrow { text-underline-offset: 4px; }
.u-narrow { max-width: 44em; }
.steps.auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.promises.assets { max-width: none; }
.promises.assets a { text-decoration: none; }
.promises.assets img { width: 96px; height: auto; }
.wink-droop { transform: skewX(-4deg) scaleY(.93); }

/* ==========================================================================
   v7 rebuild, 23 September — David asked for the design chat's v7 layout.
   ========================================================================== */

/* ---------- Full-bleed header (David: "put these all the way to the side edges") ----------
   v7 capped the nav at 1200px and centred it. This pins the mark to the left edge and the
   call to action to the right, while the page body keeps the 1200px measure. */
.top.bleed { max-width: none; padding-inline: clamp(16px, 2vw, 34px); }

/* ---------- Section rhythm, as v7 has it: coral, dark, coral, dark, coral ---------- */
.band { padding-block: clamp(72px, 9vw, 104px); }
.band.dark {
  background: var(--void); color: #F5F5F7;
  --bg: #0B0B0F; --surface-1: #15151A; --surface-2: #1F1F26;
  --ink: #F5F5F7; --ink-60: rgba(245,245,247,.62); --ink-35: rgba(245,245,247,.38);
  --stroke: rgba(245,245,247,.1); --coral-text: #FF4D6D;
}
body.home .band.dark .h2, body.home .band.dark .display { color: #F5F5F7; }
body.home .band.dark .wink { color: var(--coral); --eye: var(--void); }
body.home .band.dark a { color: #F5F5F7; }
body.home .band.dark .cta { background: var(--coral); color: var(--void); border: 0; }
body.home .band.dark .cta.soon { background: transparent; color: #F5F5F7; border: 1.5px solid var(--coral); }

/* Wink sitting next to a section's eyebrow, as in v7 */
.perch { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.perch .wink { width: 56px; height: 56px; flex: none; }
.perch span { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-text); }
.band.dark .perch span { color: var(--coral); }

/* ---------- The walk-through: one conversation, three phones ----------
   David: "show an actual screenshot AND how Wink generates the reply and copy paste, on the
   same screenshot, for example Hinge." So it is the same chat all the way across — the Jessica
   conversation from docs/appstore/screenshots, which was drawn for publishing. */
.walk { display: grid; gap: 28px; margin-top: 48px; align-items: start; }
@media (min-width: 980px) { .walk { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; } }
.walk-step { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.walk-step .cap { display: grid; gap: 6px; text-align: center; max-width: 30ch; }
.walk-step .cap b { font: 700 19px/1.2 var(--display); letter-spacing: -.03em; }
.walk-step .cap span { font-size: 14px; color: var(--ink-60); }
.walk-step .n { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-text); }
.walk-arrow { display: grid; place-items: center; align-self: center; color: var(--coral); padding-block: 4px; }
.walk-arrow svg { width: 26px; height: 26px; }
@media (max-width: 979px) { .walk-arrow svg { rotate: 90deg; } }

/* A phone small enough that three fit side by side, and a light variant for the chat app. */
.phone.sm { width: min(100%, 268px); border-radius: 38px; padding: 8px; }
.phone.sm .screen { border-radius: 31px; min-height: 452px; padding: 12px 12px 14px; }
.phone.sm .island { width: 76px; height: 21px; margin-bottom: 10px; }
.phone.light {
  background: #1A1A1F; border-color: rgba(11,11,15,.2);
  --bg: #FFFFFF; --surface-1: #F2F2F5; --surface-2: #E8E8EE;
  --ink: #0B0B0F; --ink-60: rgba(11,11,15,.6); --ink-35: rgba(11,11,15,.38);
  --stroke: rgba(11,11,15,.1); --coral-text: #C4274A;
  color: #0B0B0F;
}
.phone.light .island { background: #0B0B0F; }

/* The chat app's own chrome: a back arrow, the name, and the Chat/Profile tabs. */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 14px/1 var(--body); margin-bottom: 10px; }
.appbar .nm { display: inline-flex; align-items: center; gap: 6px; }
.appbar .src { font: 600 9px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-35); border: 1px solid var(--stroke); border-radius: 999px; padding: 4px 7px; }
.appbar svg { width: 14px; height: 14px; }
.tabs { display: flex; gap: 18px; font: 600 12px/1 var(--body); border-bottom: 1px solid var(--stroke); margin-bottom: 12px; }
.tabs span { padding-bottom: 8px; color: var(--ink-35); }
.tabs span.on { color: var(--ink); box-shadow: inset 0 -2px 0 0 currentColor; }
.chat { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; }
.chat .b { max-width: 80%; padding: 8px 12px; border-radius: 17px; font-size: 13px; line-height: 1.32; }
.chat .them { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; }
.chat .me { align-self: flex-end; background: #0B0B0F; color: #F5F5F7; border-bottom-right-radius: 5px; }
.phone.light .chat .me { background: #2B2B34; }
.chat .b.hit { outline: 2px solid var(--coral); outline-offset: 1px; }
.chat .b.pasted { background: var(--coral); color: var(--void); align-self: flex-end; border-bottom-right-radius: 5px; font-weight: 500; }
.inputbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--surface-1); font-size: 13px; color: var(--ink-35); }
.inputbar.filled { color: var(--ink); border-color: var(--coral); }
.inputbar .send { margin-left: auto; width: 24px; height: 24px; border-radius: 999px; background: var(--coral); color: var(--void); display: grid; place-items: center; flex: none; }
.inputbar .send svg { width: 12px; height: 12px; }

/* Wink's own line inside the middle phone, and the scan sweep on the first one. */
.wink-says { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wink-says .wink { width: 30px; height: 30px; flex: none; }
.wink-says span { font-size: 12px; color: var(--ink-60); }
.tone-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tone-row span { padding: 6px 11px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--stroke); font: 500 12px/1 var(--body); }
.tone-row span.on { background: var(--coral); border-color: var(--coral); color: var(--void); font-weight: 600; }
.copy-sm { margin-top: 10px; width: 100%; min-height: 40px; border: 0; border-radius: 999px; background: var(--coral); color: var(--void); font: 600 14px/1 var(--body); display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.copy-sm svg { width: 14px; height: 14px; }


/* ---------- Four promises, with an icon in a coral disc (David: "use SVG icons here") ---------- */
.promise .ic {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--coral); color: var(--void);
}
.promise .ic svg { width: 22px; height: 22px; }
.band.dark .promise { background: var(--surface-1); border-color: var(--stroke); }
.promise { align-content: start; }

/* ---------- The wall of replies: three columns drifting upward ----------
   The shape of a testimonials wall, but Rizzpond has no users yet, so it holds what Wink
   actually writes instead of quotes from people who do not exist. See site/README.md. */
.wall { margin-top: 44px; display: flex; justify-content: center; gap: 18px; max-height: 620px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.wall .col { display: grid; gap: 18px; align-content: start; width: min(100%, 320px); animation: drift 34s linear infinite; }
.wall .col:nth-child(2) { animation-duration: 42s; display: none; }
.wall .col:nth-child(3) { animation-duration: 38s; display: none; }
@media (min-width: 720px) { .wall .col:nth-child(2) { display: grid; } }
@media (min-width: 1040px) { .wall .col:nth-child(3) { display: grid; } }
@keyframes drift { to { transform: translateY(-50%); } }
.wall:hover .col, .wall:focus-within .col { animation-play-state: paused; }
.note {
  background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 22px;
  padding: 20px 22px; display: grid; gap: 14px;
}
.note p { font-size: 16px; line-height: 1.4; }
.note .who { display: flex; align-items: center; gap: 10px; }
.note .who i {
  width: 34px; height: 34px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--coral); color: var(--void);
}
.note .who i svg { width: 17px; height: 17px; }
.note .who b { font: 600 14px/1.2 var(--body); display: block; }
.note .who span { font-size: 13px; color: var(--ink-60); }
@media (prefers-reduced-motion: reduce) {
  .wall { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .wall .col { animation: none; }
  .wall .col > :nth-child(n+4) { display: none; }
}

/* The download section, centred as v7 has it. */
.closing-v7 { display: grid; justify-items: center; text-align: center; gap: 22px; }
.closing-v7 .wink { width: clamp(96px, 13vw, 140px); height: auto; }
.closing-v7 .lede { max-width: 30em; }
/* A quoted message above the reply it answers. */
.note .q { display: block; font-size: 13px; color: var(--ink-35); margin-bottom: 8px; }
.note .who span span { display: block; }

/* ---------- Hero: the group chat you'd otherwise be asking ----------
   Drawn to read as a real iMessage thread rather than a stylised card: iOS blue and grey,
   sender names over each friend's first bubble, avatars, a forwarded message, Delivered, and
   the composer. It is decoration, so it carries one aria-label and nothing inside is focusable. */
.gc {
  width: min(100%, 320px); border-radius: 26px; padding: 0; overflow: hidden;
  background: #FFFFFF; color: #0B0B0F;
  border: 1px solid rgba(11, 11, 15, .08);
  box-shadow: 0 30px 70px rgba(11, 11, 15, .28), 0 4px 12px rgba(11, 11, 15, .12);
  rotate: -4deg;
  font-family: var(--body);
}
/* The iOS chrome bar */
.gc-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  background: rgba(247, 247, 247, .94);
  border-bottom: 1px solid rgba(11, 11, 15, .1);
}
.gc-bar .bk { width: 15px; height: 15px; color: #007AFF; flex: none; }
.gc-vid { margin-left: auto; color: #007AFF; }
.gc-vid svg { width: 19px; height: 19px; }
.gc-id { display: grid; justify-items: center; gap: 4px; flex: 1; min-width: 0; }
.gc-id b { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1 var(--body); letter-spacing: -.01em; }
.gc-id b svg { width: 9px; height: 9px; color: rgba(11, 11, 15, .32); }
.pile { display: flex; }
.pile i {
  width: 24px; height: 24px; border-radius: 999px; margin-left: -8px;
  background: #C9C9CE; border: 2px solid #F7F7F7; color: #FFF;
  font: 700 9px/20px var(--body); font-style: normal; text-align: center;
}
.pile i:first-child { margin-left: 0; }
.pile i:nth-child(2) { background: #B7B7BE; }
.pile i:nth-child(3) { background: #A9A9B1; }
.pile i:nth-child(4) { background: #9A9AA3; }

.gc-day { text-align: center; font: 600 10px/1 var(--body); color: rgba(11, 11, 15, .4); padding: 12px 0 6px; }
.gc-thread { padding: 0 12px 4px; display: grid; gap: 3px; }
.gc .row { display: flex; align-items: flex-end; gap: 6px; }
.gc .row.out { justify-content: flex-end; }
.gc .row.in + .row.in { margin-top: 5px; }
.gc .av {
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: #C9C9CE; color: #FFF; font: 700 9px/22px var(--body); text-align: center;
}
.gc .nm { display: block; font: 500 9px/1 var(--body); color: rgba(11, 11, 15, .42); margin: 0 0 3px 11px; }
.gc .bub {
  max-width: 190px; padding: 7px 11px; border-radius: 17px;
  font-size: 12.5px; line-height: 1.32; overflow-wrap: anywhere;
}
.gc .grey { background: #E9E9EB; color: #0B0B0F; border-bottom-left-radius: 5px; }
.gc .blue { background: #007AFF; color: #FFFFFF; border-bottom-right-radius: 5px; }
.gc .stat { text-align: right; font: 500 9px/1 var(--body); color: rgba(11, 11, 15, .38); margin: 3px 2px 6px 0; }
.gc .typing { display: inline-flex; gap: 3px; align-items: center; padding: 10px 12px; }
.gc .typing i { width: 6px; height: 6px; border-radius: 999px; background: rgba(11, 11, 15, .32); animation: pulse 1.1s ease-in-out infinite; }
.gc .typing i:nth-child(2) { animation-delay: .16s; }
.gc .typing i:nth-child(3) { animation-delay: .32s; }

/* The screenshot you forwarded them: a quoted message with its source. */
.gc .fwd {
  max-width: 210px; border-radius: 15px; overflow: hidden;
  border: 1px solid rgba(11, 11, 15, .12); background: #FFFFFF;
}
.gc .fwd-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; background: #F4F4F6;
  font: 600 9.5px/1 var(--body); color: rgba(11, 11, 15, .55);
  border-bottom: 1px solid rgba(11, 11, 15, .08);
}
.gc .fwd-hd i {
  width: 16px; height: 16px; border-radius: 999px; flex: none;
  background: var(--coral); color: var(--void); font: 700 8px/16px var(--body); font-style: normal; text-align: center;
}
.gc .fwd-msg { display: block; padding: 9px 11px 11px; font-size: 12.5px; line-height: 1.3; }

.gc-input {
  display: flex; align-items: center; gap: 8px; margin: 6px 12px 14px;
  padding: 7px 8px 7px 13px; border-radius: 999px;
  border: 1px solid rgba(11, 11, 15, .16);
  font-size: 12px; color: rgba(11, 11, 15, .36);
}
.gc-input .up {
  margin-left: auto; width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: #C9C9CE; color: #FFFFFF; display: grid; place-items: center;
}
.gc-input .up svg { width: 12px; height: 12px; }

.stack { position: relative; display: grid; justify-items: center; gap: 18px; }
@media (min-width: 900px) {
  .stack { justify-items: end; }
  /* Behind and to the left of the phone: the friends you would otherwise be asking.
     The offset is negative so the card breaks out of the hero's right column and sits partly
     over the empty coral beside the headline. Keep the overlap near 80px: any more and the
     phone eats the forwarded message and the blue bubble, which are the whole joke. */
  .stack .gc { position: absolute; left: clamp(-120px, -7vw, -50px); top: 26px; z-index: 1; }
  .stack .phone { position: relative; z-index: 2; }
}
@media (max-width: 899px) { .stack .gc { justify-self: center; } }

/* The group-chat card leans back over the left column, so the lede has to stop before it or the
   last two words of "Snapchat, wherever" end up underneath a white card. The headline and the
   buttons are short enough to clear it on their own. */
@media (min-width: 900px) { .hero-copy .lede { max-width: 27em; } }


/* ---------- The overscroll canvas ----------
   body's background does not cover the rubber-band area above the top of the page: Chrome paints
   that with the root canvas, and :root is color-scheme: dark, so it came out black. Paint html. */
html { background: var(--bg); }
html:has(body.home) { background: #FF4D6D; color-scheme: light; }

/* ---------- Apple's App Store badge ----------
   Apple's own artwork, unaltered and not recoloured, as its marketing guidelines require. */
.badge { display: inline-block; line-height: 0; border-radius: 10px; }
.badge img { width: 172px; height: auto; }
a.badge:hover { opacity: .88; }
.badge:focus-visible { outline: 2px solid var(--void); outline-offset: 4px; }
.closing-v7 .badge img { width: 196px; }
.sticky-badge {
  position: fixed; left: 50%; translate: -50% 0; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s ease-out;
  border-radius: 12px; box-shadow: 0 10px 34px rgba(11, 11, 15, .34);
}
.sticky-badge[data-show="true"] { opacity: 1; pointer-events: auto; }
.sticky-badge img { width: 156px; }
@media (min-width: 900px) { .sticky-badge { display: none; } }

/* ---------- The app strip, with the marks back in ----------
   David asked for the companies' icons on 23 September after being told twice why the app
   dropped them. His site, his call; site/README.md records it. */
.marquee li { display: inline-flex; align-items: center; gap: 12px; }
.marquee li img { width: clamp(34px, 4.2vw, 46px); height: auto; border-radius: 11px; flex: none; }

/* "Get the app" is an <a> in the nav now, and `.top nav a` (0,1,2) outranked `.nav-cta` (0,1,0),
   so the label was painted near-black on a near-black pill. */
.top nav a.nav-cta { color: #F5F5F7; }
.top nav a.nav-cta:hover { color: #FFFFFF; }
body.home .top nav a.nav-cta { color: #F5F5F7; }