/* Fonts are hosted with the site (no request to Google). Both are SIL Open Font License; see assets/fonts/LICENSE.txt */
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-italic-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/unbounded-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/unbounded-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Peck — Match & Date
   Bold & vibrant design system. Plain CSS, no build step.
   ========================================================================== */

:root {
  /* Brand */
  --night: #14062b;
  --plum-900: #1f0b40;
  --plum-800: #2c1059;
  --plum-700: #44188a;
  --violet: #8b5cf6;
  --lilac: #b79cff;
  --lilac-50: #f4efff;
  --pink: #ff3d8b;
  --coral: #ff7a59;
  --sun: #ffc93c;
  --mint: #2de2a6;
  --sky: #4cc9ff;

  /* Neutrals */
  --ink: #1a1030;
  --ink-soft: #4d4466;
  --muted: #7a7194;
  --line: #e7e1f5;
  --paper: #fffaf6;
  --white: #ffffff;

  /* Gradients */
  --grad-hot: linear-gradient(120deg, var(--pink) 0%, var(--violet) 100%);
  --grad-sunset: linear-gradient(120deg, var(--sun) 0%, var(--coral) 45%, var(--pink) 100%);
  --grad-night: radial-gradient(1200px 600px at 85% -10%, rgba(255, 61, 139, .35), transparent 60%),
                radial-gradient(900px 600px at -10% 110%, rgba(139, 92, 246, .45), transparent 60%),
                linear-gradient(160deg, var(--plum-800) 0%, var(--night) 100%);

  /* Type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, .98rem + .35vw, 1.25rem);

  /* Shape */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(31, 11, 64, .08);
  --shadow-md: 0 12px 32px -8px rgba(31, 11, 64, .18);
  --shadow-lg: 0 30px 60px -20px rgba(31, 11, 64, .35);
  --shadow-pop: 6px 6px 0 var(--ink);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Smooth scrolling only after load, so a refresh restores your position instantly instead of gliding from the top */
html.smooth-scroll { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.025em; font-weight: 800; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }

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

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--dark { background: var(--grad-night); color: var(--white); }
.section--lilac { background: var(--lilac-50); }
.section--white { background: var(--white); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--rev > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split--rev { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor; }
.section--dark .eyebrow { color: var(--sun); }
.h-hero { font-size: var(--fs-hero); letter-spacing: -.04em; line-height: .98; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 62ch; }
.section--dark .lead { color: rgba(255, 255, 255, .78); }
.center .lead { margin-inline: auto; }
.text-grad { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-sun { color: var(--sun); }
.text-lilac { color: var(--lilac); }
.squiggle { position: relative; white-space: nowrap; }
.squiggle::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .28em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 Q 25 2 50 12 T 100 12 T 150 12 T 198 8' fill='none' stroke='%23ffc93c' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); border: 2px solid transparent;
  background-origin: border-box;   /* gradients start under the transparent border, so no off-colour slivers at the edges */
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background .2s;
}
@media (hover: hover) { .btn:hover { transform: translateY(-3px); } }
.btn:active { transform: translateY(0); }
.btn--hot { background: var(--grad-hot); color: var(--white); box-shadow: 0 10px 24px -8px rgba(255, 61, 139, .7); }
@media (hover: hover) { .btn--hot:hover { box-shadow: 0 16px 32px -8px rgba(255, 61, 139, .8); } }
.btn--sun { --bg: var(--sun); --fg: var(--ink); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
@media (hover: hover) { .btn--ghost:hover { background: rgba(255, 255, 255, .1); } }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: .92rem; }
.btn svg { width: 20px; height: 20px; flex: none; }

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .store-row { justify-content: center; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 10px 22px 10px 18px; border-radius: 16px;
  background: var(--night); color: var(--white); text-decoration: none;
  border: 2px solid rgba(255, 255, 255, .18);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s;
}
@media (hover: hover) { .store-btn:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--sun); } }
/* Touch: same tilt, only while the finger is down. Hover effects are mouse-only because a press would leave them stuck. */
@media (hover: none) { .store-btn:active { transform: translateY(-3px) rotate(-1deg); } }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn small { display: block; font-size: .68rem; line-height: 1.1; opacity: .75; letter-spacing: .02em; }
.store-btn strong { display: block; font-size: 1.08rem; line-height: 1.15; font-weight: 700; }
.store-btn--light { background: var(--white); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
@media (hover: hover) { .store-btn--light:hover { border-color: var(--ink); box-shadow: 6px 6px 0 var(--pink); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(20, 6, 43, .72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--white);
  transition: background .3s, box-shadow .3s;
}
.site-header.is-scrolled { background: rgba(20, 6, 43, .92); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img:first-child { width: 40px; height: 40px; }
.brand img:last-child { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  display: block; padding: 8px 14px; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 500; font-size: .95rem; color: rgba(255, 255, 255, .82);
  transition: color .2s, background .2s;
}
@media (hover: hover) { .nav-links a:hover { color: var(--white); background: rgba(255, 255, 255, .08); } }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--sun); font-weight: 700; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: var(--white); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .25s, background .25s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn { display: none; }
  .nav-menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--night); border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 16px var(--gutter) 28px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav-menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-links a { padding: 14px 16px; font-size: 1.1rem; border-radius: var(--r-sm); }
  .nav-menu .btn { display: flex; width: 100%; margin-top: 16px; }
}
@media (min-width: 1001px) { .nav-menu .btn { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-night); color: var(--white);
  padding-block: clamp(56px, 8vw, 104px) clamp(80px, 10vw, 140px);
  margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px));
}
.hero .lead { color: rgba(255, 255, 255, .8); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy { position: relative; z-index: 2; }
.hero .h-hero .line { display: block; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem; font-weight: 500;
}
.badge i { font-style: normal; }
.hero .store-row { margin-top: 32px; }

.page-hero { text-align: center; padding-bottom: clamp(72px, 9vw, 120px); }
.page-hero .lead { margin-inline: auto; }
.page-hero .h1 { max-width: 16ch; margin-inline: auto; }

/* Floating blobs + feathers */
.blob { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 0; }
.blob--sun { width: 120px; height: 120px; background: var(--sun); top: 18%; right: 4%; opacity: .9; animation: float 9s ease-in-out infinite; }
.blob--pink { width: 64px; height: 64px; background: var(--pink); bottom: 14%; left: 46%; animation: float 7s ease-in-out infinite reverse; }
.blob--mint { width: 28px; height: 28px; background: var(--mint); top: 24%; left: 52%; animation: float 6s ease-in-out infinite; }
.feather {
  position: absolute; width: 46px; height: 120px; pointer-events: none; z-index: 1; opacity: .9;
  background: url("../img/feather.svg") no-repeat center / contain;
  animation: drift 14s ease-in-out infinite;
}
.feather--1 { top: 12%; left: 3%; transform: rotate(-30deg); }
.feather--2 { bottom: 8%; right: 38%; width: 34px; height: 88px; animation-delay: -5s; animation-duration: 18s; }
.feather--3 { top: 6%; right: 26%; width: 28px; height: 74px; animation-delay: -9s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-24deg); }
  33% { transform: translate(14px, -22px) rotate(-8deg); }
  66% { transform: translate(-10px, -8px) rotate(-36deg); }
}

/* Wave divider */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; max-width: none; height: clamp(40px, 6vw, 90px); z-index: 3; }   /* width: an SVG does not stretch between left/right on its own */
.wave path { fill: var(--paper); }
.wave--white path { fill: var(--white); }
.wave--lilac path { fill: var(--lilac-50); }

/* ---------- Phone mockup ---------- */
.phone-stage { position: relative; display: grid; place-items: center; min-height: 560px; z-index: 2; }
.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 19;
  border-radius: 44px; padding: 12px;
  background: linear-gradient(145deg, #2b2240, #0d0618);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), var(--shadow-lg), 0 50px 100px -30px rgba(255, 61, 139, .45);
  transform: rotate(4deg);
}
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 90px; height: 24px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 3; }
.phone-screen {
  position: relative; height: 100%; border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--lilac-50) 100%); color: var(--ink);
  display: flex; flex-direction: column; padding: 52px 14px 14px;
}
.phone-screen--dark { background: linear-gradient(180deg, #1c0d36 0%, #120623 100%); color: var(--white); }
.app-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; font-size: .95rem; }
.app-bar .pill { font-size: .66rem; padding: 3px 9px; border-radius: var(--r-pill); background: var(--lilac-50); color: var(--plum-700); font-weight: 700; }
.phone-screen--dark .app-bar .pill { background: rgba(255, 255, 255, .1); color: var(--sun); }

.profile-card {
  position: relative; flex: 1; border-radius: 24px; overflow: hidden;
  background: var(--grad-sunset); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: var(--white);
}
.profile-card .avatar-art { position: absolute; inset: 0; display: grid; place-items: center; }
.profile-card .avatar-art svg { width: 76%; }
.profile-card .meta { position: relative; z-index: 1; background: linear-gradient(0deg, rgba(20, 6, 43, .7), transparent); margin: -16px; padding: 40px 16px 16px; }
.profile-card h4 { font-size: 1.2rem; margin: 0; }
.profile-card p { font-size: .75rem; margin: 2px 0 0; opacity: .9; }
.invite-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.invite-row span {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; font-size: 1.25rem;
  background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.invite-row span:first-child { background: var(--sun); border-color: var(--sun); transform: scale(1.08); }

.float-card {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 18px;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: .82rem; line-height: 1.25; max-width: 230px;
  animation: float 6s ease-in-out infinite;
}
.float-card .ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 1.2rem; }
.float-card strong { display: block; font-size: .88rem; }
.float-card small { color: var(--muted); }
.float-card--a { top: 10%; left: -2%; transform: rotate(-4deg); }
.float-card--b { top: 46%; right: -6%; animation-delay: -2s; }
.float-card--c { bottom: 6%; left: 2%; animation-delay: -4s; }
@media (max-width: 520px) {
  .float-card { font-size: .74rem; padding: 8px 12px 8px 8px; max-width: 190px; }
  .float-card--a { left: 0; top: 4%; }
  .float-card--b { right: 0; }
  .float-card--c { left: 0; }
}

/* Chat bubbles (Hoot) */
.chat { display: flex; flex-direction: column; gap: 8px; flex: 1; font-size: .78rem; }
.bubble { max-width: 80%; padding: 9px 13px; border-radius: 18px; line-height: 1.35; }
.bubble--them { align-self: flex-start; background: rgba(255, 255, 255, .1); border-bottom-left-radius: 6px; }
.bubble--me { align-self: flex-end; background: var(--grad-hot); border-bottom-right-radius: 6px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.owl-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--plum-700); display: grid; place-items: center; font-size: 1.3rem; border: 2px solid var(--sun); }
.chat-head strong { display: block; font-size: .85rem; }
.chat-head small { font-size: .68rem; color: var(--mint); }
.reveal-cta { margin-top: auto; padding: 12px; border-radius: 16px; border: 1.5px dashed rgba(255, 201, 60, .7); text-align: center; font-size: .74rem; color: var(--sun); font-weight: 600; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--sun); color: var(--ink); overflow: hidden;
  border-block: 3px solid var(--ink); transform: rotate(-1.5deg) scaleX(1.02); margin: -18px 0 0; position: relative; z-index: 5;
}
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 22px; padding: 14px 22px; font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.35rem); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.marquee-track span::after { content: "✦"; color: var(--pink); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--white); border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 32px); border: 2px solid var(--ink);
  box-shadow: var(--shadow-pop);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s;
}
@media (hover: hover) { .card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); } }
.card .h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-soft); }
.card-icon {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  font-size: 1.75rem; margin-bottom: 20px; border: 2px solid var(--ink);
}
.bg-sun { background: var(--sun); }
.bg-pink { background: var(--pink); }
.bg-mint { background: var(--mint); }
.bg-sky { background: var(--sky); }
.bg-lilac { background: var(--lilac); }
.bg-coral { background: var(--coral); }

.card--glass {
  background: rgba(255, 255, 255, .06); color: var(--white); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (hover: hover) { .card--glass:hover { box-shadow: none; transform: translateY(-4px); border-color: rgba(255, 201, 60, .5); } }
.card--glass p { color: rgba(255, 255, 255, .74); }
.card--glass .card-icon { border-color: transparent; }

/* Wingman invite tiles */
.invites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .invites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .invites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.invite {
  --c: var(--sun);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 20px; border-radius: var(--r-md); background: var(--c); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-pop);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease, rotate .25s cubic-bezier(.3, 1.6, .5, 1), scale .25s cubic-bezier(.3, 1.6, .5, 1);
}
.invite:nth-child(odd) { rotate: -2deg; }
.invite:nth-child(even) { rotate: 2deg; }
@media (hover: hover) { .invite:hover { rotate: 0deg; scale: 1.05; z-index: 1; } }
.invite .emoji { font-size: 2.4rem; line-height: 1; }
.invite small { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.invite strong { font-size: 1.3rem; line-height: 1.1; }
.invite--coffee { --c: var(--sun); }
.invite--drink { --c: var(--pink); color: var(--white); }
.invite--movie { --c: var(--sky); }
.invite--flower { --c: var(--lilac); }


/* Feature rows */
.feature-row + .feature-row { margin-top: clamp(80px, 10vw, 140px); }
.check-list { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.check-list li { position: relative; padding-left: 40px; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  background: var(--mint); color: var(--ink); border: 2px solid var(--ink);
}
.section--dark .check-list li::before { border-color: transparent; }
.check-list strong { display: block; }
.check-list span { color: var(--ink-soft); font-size: .95rem; }
.section--dark .check-list span { color: rgba(255, 255, 255, .7); }

/* Visual panels used beside feature copy */
.panel {
  position: relative; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px);
  border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); overflow: hidden;
}
.panel--sun { background: var(--sun); }
.panel--pink { background: var(--pink); color: var(--white); }
.panel--lilac { background: var(--lilac); }
.panel--mint { background: var(--mint); }
.panel--night { background: var(--grad-night); color: var(--white); }

.mini-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); font-size: .92rem;
}
.mini-card + .mini-card { margin-top: 12px; }
.mini-card .ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; border: 2px solid var(--ink); }
.mini-card strong { display: block; line-height: 1.2; }
.mini-card small { color: var(--muted); }
.mini-card .tag { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--sun); white-space: nowrap; }

/* Compare table */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 2px solid var(--ink); box-shadow: var(--shadow-pop); background: var(--white); }
.compare { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--ink); color: var(--white); font-size: .9rem; }
.compare thead th:nth-child(3) { color: var(--sun); }
.compare thead th:nth-child(4) { color: var(--pink); }
.compare tbody th { font-weight: 600; width: 26%; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare td { color: var(--ink-soft); }

/* Pricing / Peck Pass */
.pass {
  position: relative; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px);
  background: var(--grad-hot); color: var(--white); overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(255, 61, 139, .6);
}
.pass::after {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  right: -120px; top: -120px; background: rgba(255, 201, 60, .35); filter: blur(10px);
}
.pass > * { position: relative; z-index: 1; }
.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
@media (max-width: 820px) { .pass-grid { grid-template-columns: 1fr; } }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-weight: 600; font-size: .92rem;
}
.chip--solid { background: var(--white); color: var(--ink); border-color: var(--ink); border-width: 2px; }

/* Story */
.story-feature {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--white);
}
@media (max-width: 860px) { .story-feature { grid-template-columns: 1fr; } }
.story-art { position: relative; min-height: 340px; background: var(--grad-sunset); display: grid; place-items: center; overflow: hidden; }
.story-art .cups { font-size: clamp(4rem, 10vw, 7rem); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .2)); }
.story-art .label { position: absolute; left: 20px; bottom: 20px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--sun); font-weight: 700; font-size: .8rem; }
.story-body { padding: clamp(28px, 4vw, 52px); }
.story-body blockquote { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink-soft); }
.story-body .h2 { margin-bottom: .4em; }
.quote-mark { font-size: 5rem; line-height: .6; height: 40px; font-weight: 800; color: var(--pink); }

.story-card { display: flex; flex-direction: column; }
.story-card .story-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.story-card .pair { display: flex; }
.story-card .pair span { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 1rem; }
.story-card .pair span + span { margin-left: -12px; }
.story-card .story-top strong { display: block; line-height: 1.2; }
.story-card .story-top small { color: var(--muted); }
.story-card blockquote { margin: 0; color: var(--ink); flex: 1; font-size: 1.08rem; line-height: 1.55; }
.story-card .via { margin-top: 18px; display: inline-flex; align-self: flex-start; }
.placeholder-tag {
  position: absolute; top: 14px; right: 14px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--lilac-50); color: var(--plum-700); border: 1px dashed var(--plum-700);
}

/* Forms */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--ink); background: var(--white);
  transition: box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  -webkit-appearance: none; appearance: none; height: 58px; line-height: 1.2; padding-right: 46px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1030' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 16px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; box-shadow: 4px 4px 0 var(--pink); }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.form-note { font-size: .85rem; color: var(--muted); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--pink); flex: none; }

/* FAQ */
.faq-search { position: relative; max-width: 640px; margin: 32px auto 0; }
.faq-search input {
  width: 100%; min-height: 62px; padding: 16px 24px 16px 58px; border-radius: var(--r-pill);
  border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: var(--white); font-size: 1.05rem;
}
.faq-search input::placeholder { color: rgba(255, 255, 255, .6); }
.faq-search input:focus { outline: none; border-color: var(--sun); background: rgba(255, 255, 255, .14); }
.faq-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--sun); }

.faq-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }
.faq-nav { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 6px; }
.faq-nav a {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  text-decoration: none; font-weight: 600; font-size: .95rem; border: 2px solid transparent;
}
@media (hover: hover) { .faq-nav a:hover { background: var(--white); border-color: var(--line); } }
.faq-nav a.is-active { background: var(--white); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
@media (max-width: 900px) {
  .faq-nav { position: sticky; top: var(--header-h); z-index: 5; display: flex; overflow-x: auto; gap: 8px; padding-block: 10px 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; background: var(--paper); }
  .faq-group { scroll-margin-top: calc(var(--header-h) + 76px); }
  .faq-nav a { flex: none; white-space: nowrap; background: var(--white); border-color: var(--line); }
  /* Soft fade on the edge(s) that have more topics to swipe to (classes set by main.js) */
  .faq-nav.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), rgba(0,0,0,0) 100%); }
  .faq-nav.fade-l { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 44px, #000 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 44px, #000 100%); }
  .faq-nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 44px, #000 calc(100% - 56px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 44px, #000 calc(100% - 56px), rgba(0,0,0,0) 100%); }
}
.faq-group + .faq-group { margin-top: 56px; }
.faq-group h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-bottom: 20px; }
.faq-group h2 .card-icon { width: 46px; height: 46px; font-size: 1.3rem; margin: 0; border-radius: 14px; }

.accordion { border: 2px solid var(--ink); border-radius: var(--r-md); background: var(--white); overflow: hidden; box-shadow: var(--shadow-pop); }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-weight: 600; font-size: 1.02rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  --plus: var(--plum-700); --plus-bg: var(--lilac-50);
  background: linear-gradient(var(--plus), var(--plus)) center / 12px 2px no-repeat,
              linear-gradient(var(--plus), var(--plus)) center / 2px 12px no-repeat, var(--plus-bg);
  transition: transform .25s;
}
.accordion details[open] summary::after { transform: rotate(45deg); --plus: var(--white); --plus-bg: var(--pink); }
@media (hover: hover) { .accordion summary:hover { color: var(--plum-700); } }
.accordion .answer { padding: 0 24px 22px; color: var(--ink); font-size: 1.04rem; line-height: 1.6; }
.accordion .answer p:last-child { margin-bottom: 0; }
.accordion .answer a { color: var(--plum-700); font-weight: 600; }
.faq-empty { display: none; padding: 32px; text-align: center; border: 2px dashed var(--line); border-radius: var(--r-md); color: var(--muted); }
.faq-empty.is-visible { display: block; }

/* Safety */
.alert {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-md);
  background: #fff3f0; border: 2px solid var(--coral);
}
.alert .ico { font-size: 1.6rem; line-height: 1; flex: none; }
.alert .ico svg { display: block; width: 40px; height: 40px; }
.alert p { margin: 0; }
.rules { list-style: none; padding: 0; margin-block: 0; counter-reset: rule; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; } }
.rules li {
  counter-increment: rule; position: relative; padding: 18px 20px 18px 66px; border-radius: 16px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18);
}
.rules li::before {
  content: counter(rule, decimal-leading-zero); position: absolute; left: 18px; top: 16px;
  font-weight: 800; font-size: 1.1rem; color: var(--sun);
}
.rules strong { display: block; color: var(--white); font-size: 1.05rem; margin-bottom: 2px; }
.rules span { font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.rules-note { margin: 18px 0 0; color: rgba(255, 255, 255, .7); font-size: .95rem; }

.report-steps { list-style: none; padding: 0; margin-block: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: rs; }
@media (max-width: 900px) { .report-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .report-steps { grid-template-columns: 1fr; } }
.report-steps li { counter-increment: rs; padding: 22px; border-radius: 24px; background: var(--white); border: 2px solid var(--ink); box-shadow: var(--shadow-pop); }
.report-steps li::before {
  content: counter(rs); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink); color: var(--white); font-weight: 800; margin-bottom: 14px;
}

/* Countries */
.countries { display: flex; flex-wrap: wrap; gap: 10px; }
.countries .chip { background: var(--white); color: var(--ink); border: 2px solid var(--ink); }
.chip-flag { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--ink); object-fit: cover; flex: none; }
.countries-more { margin: 18px 0 0; font-weight: 700; }
.center .countries { justify-content: center; max-width: 900px; margin-inline: auto; } /* 12 flags: two rows of six on desktop */
@media (max-width: 1023px) { .center .countries { max-width: 560px; } } /* three rows of four */
@media (max-width: 640px) { .center .countries { max-width: 440px; } } /* rows of three */
@media (max-width: 480px) { .center .countries { max-width: 320px; } } /* rows of two */
.section--find { padding-bottom: calc(var(--section-y) * .25); }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 64px);
  background: var(--sun); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  text-align: center;
}
.cta-band .h1 { max-width: 18ch; margin-inline: auto; }
.cta-band .lead { color: var(--ink); margin-inline: auto; }
.cta-band .birds { position: absolute; width: clamp(80px, 11vw, 150px); height: auto; }
.cta-band span.birds { width: auto; font-size: clamp(2.5rem, 6vw, 4.5rem); }
.cta-band .birds--l { left: 4%; top: 12%; transform: rotate(-12deg); }
.cta-band .birds--r { right: 5%; bottom: 10%; transform: rotate(10deg) scaleX(-1); }
.cta-band .store-row { justify-content: center; margin-top: 28px; }
@media (max-width: 640px) { .cta-band .birds { display: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: rgba(255, 255, 255, .72); padding-top: clamp(56px, 6vw, 72px); margin-top: clamp(72px, 9vw, 128px); position: relative; }
.site-footer--flush { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { max-width: 34ch; margin-top: 18px; }
.site-footer h3 { color: var(--white); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.footer-links { list-style: none; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; font-size: .95rem; transition: color .2s; }
@media (hover: hover) { .footer-links a:hover { color: var(--sun); } }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: var(--white); transition: background .2s, transform .2s;
}
@media (hover: hover) { .socials a:hover { background: var(--pink); transform: translateY(-3px); } }
.socials svg { width: 20px; height: 20px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem;
}
.footer-bottom a { color: var(--sun); text-decoration: none; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Utility spacing */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 24px; } .mb-3 { margin-bottom: 40px; }
.maxw-md { max-width: 760px; margin-inline: auto; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; }

/* Page heroes: keep decorative blobs clear of centred copy */
.page-hero .blob--pink { left: 6%; bottom: 26%; }
.page-hero .blob--mint { left: 12%; top: 30%; }
@media (max-width: 640px) { .page-hero .blob { display: none; } }
@media (max-width: 960px) {
  .hero:not(.page-hero) .blob--sun { top: auto; bottom: 22%; right: -24px; width: 96px; height: 96px; }
  .hero:not(.page-hero) .blob--mint { top: auto; bottom: 45%; left: 8%; }
  .hero:not(.page-hero) .blob--pink { bottom: 4%; left: 70%; }
}

/* ---------- App screenshot gallery ---------- */
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.gallery-nav { display: flex; gap: 10px; flex: none; }
.gallery-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform .2s, background .2s, box-shadow .2s;
}
@media (hover: hover) { .gallery-btn:hover { background: var(--sun); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } }
.gallery-btn:disabled { opacity: .35; cursor: default; transform: none; background: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.gallery-btn svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .gallery-nav { display: none; } }

.shots {
  list-style: none; display: flex; gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding-block: 8px 28px;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots:focus-visible { outline-offset: -3px; }
.shot {
  flex: 0 0 clamp(220px, 62vw, 290px); scroll-snap-align: start;
  border-radius: 26px; overflow: hidden; background: var(--white);
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.shot:nth-child(3n+1) { box-shadow: 6px 6px 0 var(--pink); }
.shot:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--violet); }
.shot:nth-child(3n) { box-shadow: 6px 6px 0 var(--sun); }
@media (hover: hover) { .shot:hover { transform: translateY(-6px); } }
.shot img { width: 100%; height: auto; aspect-ratio: 1242 / 2688; object-fit: cover; }

/* Single screenshot beside feature copy */
.shot-single {
  width: min(320px, 80%); margin-inline: auto; border-radius: 28px; overflow: hidden;
  border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); rotate: 3deg; background: var(--white);
}
.shot-single--l { rotate: -3deg; }
.shot-single img { width: 100%; height: auto; aspect-ratio: 1242 / 2688; }
.section--dark .shot-single { border-color: rgba(255, 255, 255, .2); box-shadow: 10px 10px 0 var(--pink); }

/* ==========================================================================
   Gen Z refresh: display type, acid lime, stickers, bento, tapes, grain
   ========================================================================== */
:root {
  --night: #0e0420;
  --lime: #c6ff3d;
  --font-display: "Unbounded", "Plus Jakarta Sans", system-ui, sans-serif;
  --fs-hero: clamp(2.7rem, 1.2rem + 6.4vw, 7rem);
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.9rem);
  --fs-h2: clamp(1.65rem, 1.15rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.02rem, .95rem + .45vw, 1.28rem);
}
::selection { background: var(--lime); color: var(--ink); }
/* On lime backgrounds the lime highlight would be invisible: use pink there */
.hl ::selection, .hl::selection,
.btn--lime ::selection, .btn--lime::selection,
.store-btn--lime ::selection, .store-btn--lime::selection,
.site-header .btn--hot ::selection, .site-header .btn--hot::selection,
.nav-menu .btn--hot ::selection, .nav-menu .btn--hot::selection,
.nav-links a[aria-current="page"] ::selection, .nav-links a[aria-current="page"]::selection,
.sticker--lime ::selection, .sticker--lime::selection,
.bg-lime ::selection, .bg-lime::selection,
.tape--lime ::selection, .tape--lime::selection,
.tile--lime ::selection, .tile--lime::selection,
.tile-tag ::selection, .tile-tag::selection,
.vs-row .vs-us ::selection, .vs-row .vs-us::selection,
.vs-badge ::selection, .vs-badge::selection,
.cta-band--lime ::selection, .cta-band--lime::selection,
.cookie-card__row button.is-yes ::selection, .cookie-card__row button.is-yes::selection,
.legal-tab.is-current ::selection, .legal-tab.is-current::selection,
.legal-toc a.is-active ::selection, .legal-toc a.is-active::selection,
.legal-num ::selection, .legal-num::selection,
.step-no ::selection, .step-no::selection,
.mood--lime ::selection, .mood--lime::selection,
.end-card ::selection, .end-card::selection { background: var(--pink); color: var(--white); }
body {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(68, 24, 138, .09) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
}
h1, h2, h3, h4, .h-hero, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
.h3 { letter-spacing: -.01em; font-weight: 700; }
.h-hero { line-height: .95; letter-spacing: -.035em; }
.eyebrow { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; font-size: .72rem; }
.section--dark .eyebrow, .hero .eyebrow { color: var(--lime); }

/* Highlighter text */
.hl {
  background: var(--lime); color: var(--ink); padding: 0 .16em; border-radius: .14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl--pink { background: var(--pink); color: var(--white); }
.hl--violet { background: var(--violet); color: var(--white); }
.h-hero .hl { display: inline-block; rotate: -3deg; padding: .02em .14em .06em; box-shadow: 6px 6px 0 var(--pink); margin-top: .08em; }

/* Buttons */
.btn--ink { --bg: var(--ink); --fg: var(--white); }
.btn--lime { --bg: var(--lime); --fg: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.site-header .btn--hot, .nav-menu .btn--hot { background: var(--lime); color: var(--ink); box-shadow: 0 0 0 rgba(198, 255, 61, 0); }
@media (hover: hover) { .site-header .btn--hot:hover { box-shadow: 0 0 28px rgba(198, 255, 61, .55); } }
.nav-links a[aria-current="page"] { background: var(--lime); }
.store-btn--lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
@media (hover: hover) { .store-btn--lime:hover { border-color: var(--white); } }

/* Grain texture for dark surfaces */
.grain, .hero { isolation: isolate; }
.grain::after, .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Home hero ---------- */
.hero--home {
  background:
    radial-gradient(700px 500px at 82% 30%, rgba(139, 92, 246, .55), transparent 65%),
    radial-gradient(600px 420px at 10% 90%, rgba(255, 61, 139, .35), transparent 65%),
    var(--night);
  padding-bottom: clamp(96px, 11vw, 150px);
}
.spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(198, 255, 61, .14), transparent 60%);
  transition: background .1s;
}
.hero--home .hero-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .hero--home .hero-grid { grid-template-columns: 1fr; } }
.hero--home .lead strong { color: var(--white); }
.rating { margin-top: 22px; font-size: .9rem; color: rgba(255, 255, 255, .72); }
.rating .stars { color: var(--lime); letter-spacing: 2px; }
.rating strong { color: var(--white); }

/* Stickers */
.sticker {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.72rem, .66rem + .25vw, .9rem); letter-spacing: -.01em;
  border: 2px solid var(--ink);
  /* the second, invisible shadow pads the animated layer, so the pill's tilted edges are drawn inside it
     (and smoothed) instead of on the layer's own edge, which Safari and Chrome leave saw-toothed */
  box-shadow: 3px 3px 0 var(--ink), 0 0 0 8px rgba(255, 255, 255, .004);
  rotate: var(--r, 0deg); animation: bob 5s ease-in-out infinite;
}
.sticker:nth-of-type(2n) { animation-delay: -2.5s; }
.sticker--lime { background: var(--lime); color: var(--ink); }
.sticker--pink { background: var(--pink); color: var(--white); }
.sticker--white { background: var(--white); color: var(--ink); }
.sticker--static { position: static; animation: none; margin: 0 0 22px; rotate: -2deg; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Phone fan of real screenshots */
.phone-fan { position: relative; height: clamp(420px, 50vw, 640px); z-index: 2; }
.fan-card {
  position: absolute; top: 50%; left: 50%; margin: 0; width: clamp(160px, 18.5vw, 252px);
  border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden; background: var(--white);
  border: 3px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 70px -25px rgba(0, 0, 0, .7);
  transition: transform .6s cubic-bezier(.2, .9, .2, 1);
}
.fan-card img { width: 100%; height: auto; aspect-ratio: 1242 / 2688; }
.fan-card--c { z-index: 3; transform: translate(-50%, -50%); }
.fan-card--l { z-index: 1; transform: translate(-118%, -46%) rotate(-11deg) scale(.86); }
.fan-card--r { z-index: 2; transform: translate(18%, -46%) rotate(11deg) scale(.86); }
@media (hover: hover) { .phone-fan:hover .fan-card--l { transform: translate(-128%, -44%) rotate(-15deg) scale(.88); } }
@media (hover: hover) { .phone-fan:hover .fan-card--r { transform: translate(28%, -44%) rotate(15deg) scale(.88); } }
@media (hover: hover) { .phone-fan:hover .fan-card--c { transform: translate(-50%, -53%) scale(1.03); } }
@media (max-width: 960px) { .phone-fan { height: clamp(400px, 110vw, 560px); margin-top: 16px; } .fan-card { width: clamp(150px, 42vw, 230px); } }

/* Crossing marquee tapes */
.tape-x { position: relative; height: clamp(120px, 14vw, 170px); margin-top: calc(clamp(120px, 14vw, 170px) / -2); z-index: 5; overflow: hidden; pointer-events: none; }
.tape { position: absolute; left: -5%; right: -5%; top: 50%; border-block: 3px solid var(--ink); overflow: hidden; }
.tape--lime { background: var(--lime); color: var(--ink); transform: translateY(-50%) rotate(-3.5deg); z-index: 2; }
.tape--pink { background: var(--pink); color: var(--white); transform: translateY(-50%) rotate(3deg); }
.tape-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.tape-track--rev { animation-direction: reverse; animation-duration: 36s; }
.tape-track span {
  display: inline-flex; align-items: center; gap: 22px; padding: 12px 22px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, .8rem + .6vw, 1.35rem);
}
.tape-track span::after { content: "✦"; }
.tape--lime .tape-track span::after { color: var(--pink); }
.tape--pink .tape-track span::after { color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .tape-track, .sticker { animation: none; } }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: clamp(14px, 1.6vw, 20px); }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  padding: clamp(20px, 2.2vw, 28px); border-radius: 28px;
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
@media (hover: hover) { .tile:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 9px 9px 0 var(--ink); } }
.tile h3 { font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); margin: 0; }
.tile p { margin: 0; opacity: .85; font-size: .95rem; }
.tile-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: auto; padding-bottom: 18px; }
.tile--hero { grid-column: span 2; grid-row: span 2; justify-content: flex-end; min-height: 420px; }
.tile--hero h3 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1; }
.tile--hero p { max-width: 34ch; font-size: 1.05rem; }
.tile-tag {
  position: absolute; top: 22px; left: 22px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .72rem; border: 2px solid var(--ink);
}
.tile-art { position: absolute; top: 12%; right: -6%; width: 62%; rotate: 8deg; pointer-events: none; transition: rotate .4s; }
@media (hover: hover) { .tile--hero:hover .tile-art { rotate: 0deg; } }
.tile--wide { grid-column: span 2; grid-row: span 1; min-height: 0; }
.tile--violet { background: linear-gradient(150deg, #5b21d6 0%, var(--plum-800) 100%); color: var(--white); }
.tile--lime { background: var(--lime); color: var(--ink); }
.tile--dark { background: var(--night); color: var(--white); }
.tile--pink { background: var(--pink); color: var(--white); }
.tile--sky { background: var(--sky); color: var(--ink); }
.tile--white { background: var(--white); color: var(--ink); }
.tile--sun { background: var(--sun); color: var(--ink); }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--hero { grid-row: span 1; min-height: 360px; }
  .tile--wide { grid-column: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile--hero, .tile--wide { grid-column: span 1; }
  .tile--hero { min-height: 400px; }
  .tile-art { width: 70%; top: 70px; }
}

/* Interactive invites on dark */
button.invite { font: inherit; text-align: left; cursor: pointer; }
.section--dark .invite { box-shadow: 6px 6px 0 var(--lime); }
.invite[aria-pressed="true"] { outline: 3px solid var(--white); outline-offset: 4px; }
.invite:active { scale: .96; }
.toast-slot { display: flex; justify-content: center; margin-top: 40px; min-height: 80px; }
.toast {
  display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 22px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--pink);
  animation: toastIn .45s cubic-bezier(.2, 1.4, .4, 1);
}
.toast[hidden] { display: none; }
.toast-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--lime); font-size: 1.5rem; border: 2px solid var(--ink); flex: none; }
.toast strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.toast small { color: var(--muted); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }

/* Section tweaks */
.section--dark { background: radial-gradient(900px 500px at 90% 0%, rgba(255, 61, 139, .25), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(139, 92, 246, .35), transparent 60%), var(--night); }
.section--dark .shot { border-color: rgba(255, 255, 255, .16); }
.section--dark .shot:nth-child(3n+1) { box-shadow: 6px 6px 0 var(--pink); }
.section--dark .shot:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--lime); }
.section--dark .shot:nth-child(3n) { box-shadow: 6px 6px 0 var(--violet); }
.section--white { background-color: var(--white); background-image: none; }
.phone-stage .sticker { z-index: 6; }
.cta-band--lime { background: var(--lime); }
.cta-band .h1 { max-width: 20ch; }
.card { border-radius: 24px; }
.pass { border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.page-hero { background: radial-gradient(700px 420px at 85% 10%, rgba(255, 61, 139, .3), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(139, 92, 246, .45), transparent 60%), var(--night); }
@media (max-width: 640px) {
  .tape--lime { transform: translateY(-50%) rotate(-8deg); }
  .tape--pink { transform: translateY(-50%) rotate(7deg); }
}

/* Hero devices: app screens cropped from the store images, in our own frames */
.device {
  background: #0b0614; padding: clamp(6px, .7vw, 10px);
  border: 0; border-radius: clamp(26px, 3vw, 42px); overflow: visible;
  --glow: rgba(198, 255, 61, .35);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .14),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 46px -6px var(--glow),
    0 40px 70px -25px rgba(0, 0, 0, .8);
}
.device--lime { --glow: rgba(198, 255, 61, .45); }
.device--pink { --glow: rgba(255, 61, 139, .5); }
.device--violet { --glow: rgba(139, 92, 246, .6); }
.device-screen {
  position: relative; overflow: hidden; aspect-ratio: var(--ar);
  border-radius: clamp(20px, 2.3vw, 33px); background: #1c0d36;
}
.device-screen img {
  position: absolute; max-width: none; width: var(--w); height: auto; aspect-ratio: 1242 / 2688;
  left: var(--x); top: var(--y);
}
.device::before { /* side button for a touch of realism */
  content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 12%; border-radius: 0 3px 3px 0; background: #2a1f3d;
}

/* ---------- Screens: colour boost, lighting, motion ---------- */
.device-screen img, .shot img, .shot-single img { filter: saturate(1.14) contrast(1.06); }

/* Glass glare across each hero screen */
.device-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 22%, transparent 38%),
    linear-gradient(0deg, rgba(14, 4, 32, .18), transparent 20%);
  mix-blend-mode: screen;
}

/* Light source behind the fan */
.phone-fan { transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform .35s ease-out; }
.phone-fan::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 255, 61, .55) 0%, rgba(255, 61, 139, .32) 38%, rgba(139, 92, 246, .18) 58%, transparent 72%);
  filter: blur(18px); animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.device--lime { --glow: rgba(198, 255, 61, .6); }
.device--pink { --glow: rgba(255, 61, 139, .6); }
.device--violet { --glow: rgba(139, 92, 246, .7); }
.device { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 60px -4px var(--glow), 0 40px 70px -25px rgba(0, 0, 0, .8); }

/* Cycling centre screen */
.screen-slide { opacity: 0; }   /* faded frame by frame in main.js (no CSS transition: Safari would square the corners) */
.screen-slide.is-active { opacity: 1; }
.screen-dots { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; display: flex; gap: 6px; }
.screen-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .35); transition: width .3s, background .3s; }
.screen-dots i.is-active { width: 20px; background: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .phone-fan { transform: none; }
  .phone-fan::before { animation: none; }
}

/* Primary calls to action use the display face; secondary buttons stay in the body font */
.btn--hot, .btn--lime, .btn--sun {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: -.01em;
}
.btn--hot.btn--sm { font-size: .8rem; }

/* Star rating filled to the exact score (e.g. 4.5 → 90%) */
.rating .stars { position: relative; display: inline-block; letter-spacing: 2px; color: rgba(255, 255, 255, .22); }
.rating .stars::before { content: "★★★★★"; }
.rating .stars::after {
  content: "★★★★★"; position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
  width: calc(var(--rating, 5) / 5 * 100%); color: var(--lime);
}

/* ---------- Real app screens (full screenshots, no cropping) ---------- */
.device-screen { aspect-ratio: var(--ar, 924 / 2000); }
.device-screen picture { position: absolute; inset: 0; display: block; }
.device-screen picture img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: top center;
}
.device--solo { position: relative; z-index: 2; width: clamp(220px, 24vw, 290px); rotate: -4deg; }
.device--feature { position: relative; width: min(300px, 78%); margin: 0 auto; rotate: 3deg; }
.device--tilt-l { rotate: -3deg; }

/* Gallery of phones with captions */
.shot--device {
  flex: 0 0 clamp(190px, 54vw, 240px); padding: 14px 4px 0;
  background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none !important;
}
@media (hover: hover) { .shot--device:hover { transform: translateY(-8px); } }
.shot--device .device { width: 100%; margin-inline: 0; }
.shot--device:nth-child(odd) .device { rotate: -1.5deg; }
.shot--device:nth-child(even) .device { rotate: 1.5deg; }
.shot-cap {
  margin: 20px 0 0; text-align: center; color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: -.01em;
}

/* ---------- Hero phones: keep them pixel-sharp ----------
   - 3D tilt only while the pointer is moving over the hero (.is-tilting);
     a permanent perspective transform makes browsers resample the screens.
   - Stack the phones with grid centering instead of translate(-50%,-50%),
     which landed the centre phone on half-pixels. */
.phone-fan { display: grid; place-items: center; transform: none; }
.phone-fan.is-tilting { transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.fan-card { position: relative; top: auto; left: auto; grid-area: 1 / 1; }
.fan-card { width: clamp(160px, 18.5vw, 252px); width: round(nearest, clamp(160px, 18.5vw, 252px), 2px); }
@media (max-width: 960px) {
  .fan-card { width: clamp(150px, 42vw, 230px); width: round(nearest, clamp(150px, 42vw, 230px), 2px); }
}
.fan-card--c { transform: none; }
.fan-card--l { transform: translate(-68%, 4%) rotate(-11deg) scale(.86); }
.fan-card--r { transform: translate(68%, 4%) rotate(11deg) scale(.86); }
@media (hover: hover) { .phone-fan:hover .fan-card--c { transform: translateY(-3%) scale(1.03); } }
@media (hover: hover) { .phone-fan:hover .fan-card--l { transform: translate(-78%, 6%) rotate(-15deg) scale(.88); } }
@media (hover: hover) { .phone-fan:hover .fan-card--r { transform: translate(78%, 6%) rotate(15deg) scale(.88); } }
/* Touch: the same spread, only while a finger is down (a :hover here would stay stuck after the tap) */
@media (hover: none) {
  .phone-fan:active .fan-card--c { transform: translateY(-3%) scale(1.03); }
  .phone-fan:active .fan-card--l { transform: translate(-78%, 6%) rotate(-15deg) scale(.88); }
  .phone-fan:active .fan-card--r { transform: translate(78%, 6%) rotate(15deg) scale(.88); }
}

/* Hero stickers on phones: a little smaller, with a gentler float, so they fit the gaps on the small phones */
@media (max-width: 640px) {
  .phone-fan .sticker { font-size: .64rem; padding: 6px 11px; animation-name: bob-sm; }
}
@keyframes bob-sm { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* "IRL > DMs" lives inside the right phone, in the gap below the match screen's "Say Hey" button,
   so it lands in the same spot at every size and follows the phone's tilt */
.sticker--irl { top: 78%; right: -16%; --r: -5deg; }

/* Gallery as a numbered journey */
ol.shots { list-style: none; margin-top: 0; margin-bottom: 0; }
.shot-cap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.step-no {
  display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 99px;
  background: var(--lime); color: var(--ink); font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: 0;
}
@media (max-width: 640px) {
  .shot-cap { flex-direction: column; gap: 6px; font-size: .84rem; text-align: center; }
}
.cap-text { white-space: nowrap; }

/* Gallery phones: upright, with an even bezel all the way round.
   (A slight tilt made the thin bezels render uneven/wavy, and the inner corner
   radius didn't follow the outer one.) */
.device { --pad: clamp(6px, .7vw, 10px); --rad: clamp(26px, 3vw, 42px); padding: var(--pad); border-radius: var(--rad); }
.device-screen { border-radius: calc(var(--rad) - var(--pad)); }
.shot--device .device,
.shot--device:nth-child(odd) .device,
.shot--device:nth-child(even) .device { rotate: 0deg; --pad: 9px; --rad: 36px; }
/* Every gallery tile the same width: a long caption must never stretch its tile */
.shot--device { min-width: 0; }
.shot--device .shot-cap { font-size: .86rem; gap: 6px; }

/* Ribbons: smooth edges.
   The coloured bands (with their dark edges) are flat full-width shapes clipped to the diagonal,
   which browsers always anti-alias. Only the scrolling text is tilted, at the same angle, so the
   saw-tooth edges a tilted box produces are gone. */
.tape-x { container-type: inline-size; --tape-h: clamp(46px, 40px + .9vw, 58px); --edge: 3px; }
.band { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.band-edge { fill: var(--ink); }
.band--pink .band-fill { fill: var(--pink); }
.band--lime .band-fill { fill: var(--lime); }
.band--pink { --a: 3deg;    --c: var(--pink); z-index: 1; }
.band--lime { --a: -3.5deg; --c: var(--lime); z-index: 3; }
/* the old tilted boxes now only carry the text */
.tape { background: none; border: 0; padding: 0; outline: 0; height: var(--tape-h); display: flex; align-items: center; overflow: hidden; }
.tape--pink { z-index: 2; transform: translateY(-50%) rotate(3deg); }
.tape--lime { z-index: 4; transform: translateY(-50%) rotate(-3.5deg); }
.tape-track span { padding-block: 0; }
@media (max-width: 640px) {
  .band--pink { --a: 7deg; }  .band--lime { --a: -8deg; }
  .tape--lime { transform: translateY(-50%) rotate(-8deg); }
  .tape--pink { transform: translateY(-50%) rotate(7deg); }
}
/* Text strips repeat enough to cover the widest screens; durations scaled so the speed is unchanged */
.tape--lime .tape-track { animation-duration: 60s; }
.tape--pink .tape-track { animation-duration: 108s; }

/* Ribbon strip grows with screen width so the tilted bands' ends are never clipped flat
   (the vertical rise of a tilted band is proportional to the page width) */
.tape-x { --tx-h: calc(6.6vw + 76px); height: var(--tx-h); margin-top: calc(var(--tx-h) / -2); }
@media (max-width: 640px) { .tape-x { --tx-h: calc(16vw + 60px); } }
/* "The whole point" tile: Peck doves sticker */
.tile-art--doves { top: 6%; right: -2%; width: 60%; rotate: 6deg; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
@media (hover: hover) { .tile--hero:hover .tile-art--doves { rotate: -2deg; scale: 1.04; transition: rotate .4s, scale .4s; } }
@media (max-width: 560px) { .tile-art--doves { width: 66%; top: 40px; } }

/* Bento tiles: sticker icons, whole-tile links, colour fixes */
.tile--pink, .tile--pink p { color: var(--ink); }
.tile--pink p, .tile--sun p, .tile--lime p, .tile--sky p, .tile--white p { opacity: .9; }
.tile--white { background: var(--white) linear-gradient(90deg, var(--pink), var(--sun), var(--lime), var(--sky), var(--violet)) bottom / 100% 8px no-repeat; }
.tile-icon {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: auto; flex: none;
  border-radius: 20px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  rotate: -6deg; transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1), scale .4s cubic-bezier(.3, 1.6, .5, 1);
}
.tile-icon svg { width: 44px; height: 44px; overflow: visible; }
.tile-icon + h3 { margin-top: 18px; }
@media (hover: hover) { .tile:hover .tile-icon { rotate: 5deg; scale: 1.08; } }
.tile-icon--pink { background: var(--pink); }
.tile-icon--lime { background: var(--lime); }
.tile-icon--white { background: var(--white); }
.tile-icon--night { background: var(--night); }
.tile--dark .tile-icon { box-shadow: 3px 3px 0 var(--pink); }
.tile-link { color: inherit; text-decoration: none; }
.tile-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.tile-link:focus-visible { outline: none; }
.tile:has(.tile-link:focus-visible) { outline: 3px solid var(--pink); outline-offset: 4px; }
.tile-go {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid currentColor; opacity: .55;
  transition: opacity .25s, background .25s, color .25s, rotate .3s;
}
.tile-go svg { width: 18px; height: 18px; }
@media (hover: hover) { .tile:hover .tile-go { opacity: 1; background: var(--ink); color: var(--lime); border-color: var(--ink); rotate: 45deg; } }
@media (hover: hover) { .tile--dark:hover .tile-go { background: var(--lime); color: var(--ink); border-color: var(--lime); } }

/* Arrow on the big tile */
.tile--hero .tile-go { top: auto; bottom: 22px; right: 22px; }
.tile--hero p { max-width: calc(100% - 52px); font-size: 1.2rem; text-wrap: balance; }

/* Discover tile: wide, dark, with mood chips */
.tile--mint { background: var(--mint); color: var(--ink); }
.tile--disc { grid-column: span 2; gap: 12px; }
.tile--disc .tile-tag { position: static; align-self: flex-start; margin-bottom: auto; }
.tile--disc h3 { margin-top: 18px; }
.moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; padding: 0; list-style: none; }
.mood {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font-weight: 700; font-size: .85rem; color: var(--ink); white-space: nowrap;
  transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1);
}
.mood:nth-child(odd) { rotate: -2deg; }
.mood:nth-child(even) { rotate: 2deg; }
@media (hover: hover) { .tile--disc:hover .mood:nth-child(odd) { rotate: 2deg; } }
@media (hover: hover) { .tile--disc:hover .mood:nth-child(even) { rotate: -2deg; } }
.mood--sun { background: var(--sun); }
.mood--pink { background: var(--pink); }
.mood--lime { background: var(--lime); }
.mood--sky { background: var(--sky); }
.mood--white { background: var(--white); }
@media (max-width: 560px) { .tile--disc { grid-column: span 1; padding-right: clamp(20px, 2.2vw, 28px); } .tile--disc h3 { padding-right: 48px; } }

/* Invite demo: sticker icons, placeholder, call to action */
.invite .invite-icon { width: 56px; height: 56px; margin: 0 0 4px; border-radius: 18px; }
.invite .invite-icon svg { width: 40px; height: 40px; }
@media (hover: hover) { .invite:hover .invite-icon { rotate: 5deg; scale: 1.08; } }
.invite--drink { color: var(--ink); }
.toast-slot { margin-top: 0; min-height: 0; align-items: center; }
.toast { margin-top: 52px; }
.toast-ico { background: var(--lime); }
.toast-ico svg { width: 34px; height: 34px; }
.toast-text { display: flex; flex-direction: column; }
.toast-cta {
  margin-left: 6px; padding: 10px 16px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--ink); color: var(--lime); font-family: var(--font-display); font-weight: 700; font-size: .82rem; text-decoration: none;
  transition: background .2s, color .2s, scale .2s;
}
@media (hover: hover) { .toast-cta:hover { background: var(--pink); color: var(--white); scale: 1.04; } }
@media (max-width: 560px) {
  .toast { flex-wrap: wrap; justify-content: center; text-align: left; padding: 12px; }
  .toast-cta { margin: 4px 0 0; width: 100%; text-align: center; }
}

/* Keep a highlighted phrase in one piece (wraps as a whole onto the next line) */
.hl--keep { white-space: nowrap; }

/* Hoot Mode: profile phone in front, anonymous chat peeking out behind */
.phone-stage--pair > .device { grid-area: 1 / 1; }
.device--pair-front { translate: -24% 0; }
.device--pair-back { z-index: 1; width: clamp(200px, 21vw, 255px); rotate: 8deg; translate: 52% 5%; }
@media (max-width: 560px) {
  .device--pair-front { width: 56vw; translate: -18% 0; }
  .device--pair-back { width: 44vw; translate: 40% 6%; }
}
.sticker--owl { display: inline-flex; align-items: center; gap: 6px; }
.sticker-owl { width: 1.6em; height: 1.6em; margin: -.3em 0; flex: none; }
.more-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--violet); text-decoration: none;
}
.more-link span { transition: translate .25s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) { .more-link:hover { color: var(--pink); } }
@media (hover: hover) { .more-link:hover span { translate: 4px 0; } }

/* Features: Hoot Mode step-by-step walkthrough */
.hoot-walk-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.hoot-walk-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hoot-walk-row + .hoot-walk-row { margin-top: clamp(48px, 7vw, 96px); }
.hoot-walk-row--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hoot-walk-row--rev .device { order: 2; }
.hoot-walk-row .device { width: min(260px, 78%); }
.device--upright { rotate: 0deg; }
.walk-steps { list-style: none; counter-reset: walk calc(var(--start, 1) - 1); margin: 0; padding: 0; display: grid; gap: 26px; }
.walk-steps[start="4"] { --start: 4; }
.walk-steps li { counter-increment: walk; position: relative; padding-left: 64px; }
.walk-steps li::before {
  content: counter(walk); position: absolute; left: 0; top: -4px; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; rotate: -5deg;
}
.walk-steps li:nth-child(even)::before { background: var(--pink); rotate: 4deg; }
.walk-steps strong { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }
.walk-steps span { color: var(--ink-soft); }
@media (max-width: 860px) {
  .hoot-walk-row, .hoot-walk-row--rev { grid-template-columns: 1fr; }
  .hoot-walk-row--rev .device { order: 0; }
  .hoot-walk-row .device { width: min(260px, 70%); }
}

/* How Peck works: three-step cards in the gallery intro */
.mini-cards { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 0; padding: 0; }
.mini-cards li {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .25); color: var(--white);
}
.mini-cards strong { font-weight: 800; }
.mini-cards span { font-size: .85rem; color: rgba(255, 255, 255, .72); }
.mini-cards li.arr { background: none; border: 0; padding: 0 2px; color: var(--lime); font-size: 1.3rem; }
/* Phones and tablets: stacked, arrows point down (in a row below 900px the titles wrap) */
@media (max-width: 899px) {
  .mini-cards { flex-direction: column; align-items: stretch; }
  .mini-cards li.arr { align-self: flex-start; margin-left: 22px; rotate: 90deg; line-height: 1; }
}
/* Wider screens: all three cards share one row, so each arrow leads to the next card */
@media (min-width: 900px) {
  .mini-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .mini-cards li { padding: 12px 14px; }
  .mini-cards li.arr { align-self: center; }
}

/* Checklist descriptions: even line breaks, no single word left on the last line */
.check-list li span { text-wrap: balance; }

/* Gallery: closing card after the last screen */
.end-card {
  aspect-ratio: 232 / 481; margin: 16px 0 0; border-radius: 38px; background: var(--lime); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--pink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 24px; color: var(--ink); rotate: -2deg;
}
.end-emoji { font-size: 4rem; line-height: 1; }
.end-title { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; margin: 0; line-height: 1; }
.end-sub { margin: 0; font-weight: 700; }
.end-btn { margin-top: 10px; }
@media (max-width: 560px) {
  .end-card { padding: 16px; gap: 8px; }
  .end-emoji { font-size: 3rem; }
  .end-title { font-size: 1.65rem; }
  .end-sub { font-size: .85rem; }
  .end-btn { white-space: nowrap; padding-inline: 18px; }
}

/* Store buttons: same width when they stack on phones */
@media (max-width: 560px) {
  .store-row { display: grid; grid-template-columns: max-content; }
  .store-row .store-btn { width: 100%; }
  .center .store-row { justify-content: center; }
}

/* Gradient fills start under the (transparent) border, so the edges show no off-colour slivers.
   Placed last: the background shorthands on the button variants would otherwise reset it. */
.btn[class], .store-btn[class], .nav-menu a[class] { background-origin: border-box; }

/* Story feature: cartoon cups instead of emoji; the quote mark hangs beside the quote */
.story-cups { width: min(78%, 320px); height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgba(26, 16, 48, .22)); rotate: -3deg; transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) { .story-feature:hover .story-cups { rotate: 2deg; } }
.story-body blockquote { position: relative; padding-left: 2.1rem; }
.story-body blockquote::before {
  content: "\201C"; position: absolute; left: -.1rem; top: -.55rem;
  font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--pink);
}

/* Hoot Mode phones: gentle float (out of step) and the front phone switching between the Hoot
   profile and sending a Hoot. Paused until the section is on screen (main.js adds .is-live). */
@keyframes hootFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hootFloatB { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@keyframes hootSwap { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.phone-stage--pair .device--pair-front { animation: hootFloatA 6s ease-in-out infinite paused; }
.phone-stage--pair .device--pair-back { animation: hootFloatB 7s ease-in-out infinite paused; }
.cyc { position: absolute; inset: 0; }
.cyc > picture { position: absolute; inset: 0; display: block; }
.cyc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyc-b { opacity: 0; animation: hootSwap 9s ease-in-out infinite paused; }
.phone-stage--pair.is-live .device, .phone-stage--pair.is-live .cyc-b { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .phone-stage--pair .device, .cyc-b { animation: none !important; }
}

/* Story location under the couple's names */
.story-loc { margin: -.35em 0 1em; font-weight: 600; font-size: .92rem; color: var(--ink-soft); }
.story-card:has(.placeholder-tag) .story-top { margin-top: 16px; }   /* names sit below the "Sample" tag */
.story-card .story-top small { white-space: nowrap; }

/* Locations: "City, Country" by default; flag + city where flag emoji render (html.flags, set by main.js).
   The text version stays available to screen readers either way. */
.loc-flag { display: none; }
.flags .loc-flag { display: inline; }
.flags .loc-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flag { display: none; }
.flags .flag { display: inline; }

/* Story: bigger location; Peck's sign-off set apart from the couple's own words */
.story-loc { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.story-loc .loc-flag { font-size: 1.15em; }
.story-signoff {
  margin: 1.2em 0 0; padding-top: 1em; border-top: 2px dashed var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--pink);
}
.story-signoff { text-wrap: balance; }

/* Safety panel: cartoon sticker icons */
.mini-card .ico { box-shadow: 2px 2px 0 var(--ink); rotate: -4deg; }
.mini-card:nth-child(even) .ico { rotate: 4deg; }
.mini-card .ico svg { width: 30px; height: 30px; overflow: visible; }
.mini-card small { white-space: nowrap; }
.dots { font-weight: 900; font-size: 1.2em; color: var(--ink); line-height: 0; }
.mini-card { position: relative; }
.mini-card .tag { position: absolute; top: -13px; right: 14px; line-height: 1.1; margin: 0; border: 2px solid var(--ink); }
.mini-card:has(.tag) { padding-top: 18px; }

/* Peck Pass: benefit chips grouped under "Unlimited" and "Plus", and a button */
.pass-btn { box-shadow: 4px 4px 0 var(--ink); border-color: var(--ink); }
.pg-label { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.pg-label:not(:first-child) { margin-top: 22px; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-chips .chip { background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 10px 14px; font-weight: 700; font-size: .92rem; }

/* Download band: Peck doves, bigger store buttons, rating in ink on lime */
.cta-band .birds { width: clamp(90px, 12vw, 160px); }
.cta-band .birds--l { left: 3%; top: 8%; transform: rotate(-10deg); }
.cta-band .birds--r { right: 4%; bottom: 8%; transform: rotate(8deg) scaleX(-1); }
.cta-band .store-btn { padding: 14px 24px; gap: 12px; }
.cta-band .store-btn svg { width: 30px; height: 30px; }
.cta-band .store-btn small { font-size: .74rem; }
.cta-band .store-btn strong { font-size: 1.25rem; }
.rating--ink { color: var(--ink-soft); text-align: center; }
.rating--ink strong { color: var(--ink); }
.rating--ink .stars { color: rgba(26, 16, 48, .2); }
.rating--ink .stars::after { color: var(--ink); }
.cta-band .birds--l { left: 2.5%; top: 6%; width: clamp(80px, 9vw, 125px); }

/* ---------- Legal pages: the fine print, Gen-Z style ---------- */
.read-progress { position: fixed; left: 0; right: 0; top: var(--header-h); height: 4px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime), var(--pink)); border-radius: 0 4px 4px 0; }
.legal-hero { padding-bottom: clamp(36px, 5vw, 64px); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vw, 40px); }
.legal-tab { padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid currentColor; font-weight: 700; font-size: .85rem; text-decoration: none; color: inherit; opacity: .75; transition: opacity .2s, background .2s, color .2s; }
@media (hover: hover) { .legal-tab:hover { opacity: 1; } }
.legal-tab.is-current { opacity: 1; background: var(--lime); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.legal-hero__row { display: flex; gap: clamp(16px, 3vw, 32px); align-items: flex-start; }
.legal-icon { flex: none; width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px); border-radius: 26px; display: grid; place-items: center; background: var(--pink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); rotate: -7deg; }
.legal-icon svg { width: 66%; height: 66%; overflow: visible; }
.legal-hero .h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.8rem); margin: .1em 0 .3em; }
.legal-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legal-pill { padding: 7px 14px; border-radius: var(--r-pill); background: var(--white); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; font-size: .85rem; box-shadow: 2px 2px 0 var(--ink); }
.legal-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.legal-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-aside .legal-toc ol { max-height: calc(100vh - var(--header-h) - 130px); overflow-y: auto; position: relative; scrollbar-width: thin; scrollbar-color: var(--line) transparent; margin-right: -6px; padding-right: 6px; }
.legal-toc { border: 2px solid var(--ink); border-radius: 24px; background: var(--white); box-shadow: 4px 4px 0 var(--ink); padding: 14px; }
.legal-toc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 800; color: var(--ink); padding: 2px 4px 10px; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary span { font-family: var(--font-body); font-size: .75rem; font-weight: 700; color: var(--muted); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc a { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 12px; color: var(--ink-soft); text-decoration: none; font-size: .86rem; line-height: 1.35; transition: background .2s, color .2s; }
.legal-toc a b { flex: none; min-width: 1.6em; color: var(--plum-700); font-size: .78rem; }
.legal-toc .sub a { padding-left: 26px; font-size: .82rem; }
@media (hover: hover) { .legal-toc a:hover { background: var(--lilac-50); color: var(--ink); } }
.legal-toc a.is-active { background: var(--lime); color: var(--ink); font-weight: 700; }
.legal { min-width: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.legal-sec { background: var(--white); border: 2px solid var(--ink); border-radius: 24px; padding: clamp(20px, 3vw, 32px); margin-bottom: 18px; box-shadow: 4px 4px 0 var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-sec--intro { background: var(--lilac-50); }
.legal-sec--sub { margin-left: clamp(0px, 3vw, 28px); box-shadow: 3px 3px 0 var(--ink); }
.legal-sec h2 { display: flex; gap: 12px; align-items: center; font-family: var(--font-display); color: var(--ink); font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.3; margin: 0 0 .8em; }
.legal-num { flex: none; min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border-radius: 13px; background: var(--lime); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: .9rem; rotate: -5deg; }
.legal-sec--sub .legal-num { background: var(--sun); min-width: 34px; height: 34px; font-size: .8rem; }
.legal-sec:nth-child(3n+2) .legal-num { background: var(--sky); }
.legal-sec:nth-child(3n) .legal-num { background: var(--pink); color: var(--white); }
.legal h3, .legal h4 { color: var(--ink); font-size: 1.05rem; margin: 1.4em 0 .4em; }
.legal p { margin: 0 0 1em; }
.legal-sec > :last-child, .legal-sec > :last-child > :last-child { margin-bottom: 0; }
.legal ul, .legal ol { padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin: .35em 0; }
.legal li::marker { color: var(--pink); }
.legal li > p { margin: 0; }
.legal a { color: var(--plum-700); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.legal strong { color: var(--ink); }
.legal-shout { position: relative; margin: 1.2em 0; padding: 30px 18px 16px; background: #fff6d6; border: 2px solid var(--ink); border-radius: 16px; font-size: .9rem; line-height: 1.6; color: var(--ink); }
.legal-shout__tag { position: absolute; top: -12px; left: 16px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--sun); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); }
.legal table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9rem; line-height: 1.55; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal tr:last-child td { border-bottom: 0; }
.legal th, .legal tr:first-child td { background: var(--lilac-50); color: var(--ink); font-weight: 700; }
.legal td > p:last-child { margin-bottom: 0; }
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--white); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .25s, translate .25s; }
.to-top.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .legal-aside .legal-toc ol { max-height: none; }
  .legal-toc:not([open]) { padding-bottom: 4px; }
}
@media (max-width: 560px) {
  .legal-hero__row { flex-direction: column; }
  .legal-sec--sub { margin-left: 0; }
}
.legal-hero { text-align: center; }
.legal-tabs, .legal-pills { justify-content: center; }
.legal-hero__row { flex-direction: column; align-items: center; gap: 18px; }
.legal-hero .lead { margin-inline: auto; }
.legal table.nested { min-width: 0; font-size: inherit; }
.legal table.nested td, .legal table.nested th { padding: 6px 8px; background: none; font-weight: inherit; border-bottom: 1px dashed var(--line); }
.legal table.nested tr:first-child td { background: none; font-weight: inherit; }
.legal .table-wrap > table:not(:has(thead)) > tbody > tr:first-child > td { background: var(--lilac-50); color: var(--ink); font-weight: 700; }
.legal tr:first-child td { background: none; font-weight: inherit; }
.legal .table-wrap > table { min-width: 720px; }

/* Footer: reach line and small store badges */
.footer-reach { margin: -4px 0 16px; font-weight: 700; font-size: .9rem; color: var(--lime); }
.footer-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-store { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .35); color: var(--white); text-decoration: none; font-weight: 700; font-size: .85rem; line-height: 1.1; transition: border-color .2s, background .2s; }
@media (hover: hover) { .footer-store:hover { border-color: var(--lime); background: rgba(198, 255, 61, .08); } }
.footer-store svg { width: 20px; height: 20px; flex: none; }
.footer-store small { display: block; font-size: .62rem; font-weight: 500; opacity: .75; }
@media (max-width: 560px) {
  .legal-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 0 -16px 24px; padding: 4px 16px 8px; scrollbar-width: none; }
  .legal-tabs::-webkit-scrollbar { display: none; }
  .legal-tab { white-space: nowrap; flex: none; }
}

/* Legal tables: whole words only; the label column never collapses to a sliver */
.legal table { overflow-wrap: normal; }
.legal .table-wrap > table > * > tr > :first-child { min-width: 11em; }
.legal table.ccpa th { font-size: .82rem; }
.legal table.ccpa td { border-right: 1px solid var(--line); }
.legal table.ccpa td:last-child { border-right: 0; }
.legal table.ccpa td strong { display: block; color: var(--ink); }
.legal table.ccpa td strong + p { margin: 4px 0 0; }
.legal table.ccpa ul { margin: 0; padding-left: 1.1em; }
.legal table.ccpa li p { margin: 0 0 6px; }
.legal table.ccpa td[rowspan] { background: var(--white); }
.legal table.ccpa tr:last-child td { border-bottom: 0; }
.legal .table-wrap > table:not(:has(tr > :nth-child(3))) { min-width: 0; }
/* Footer on phones: Explore + Safety side by side, Legal full width */
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
}
.footer-cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .95rem; cursor: pointer; text-align: left; transition: color .2s; }
@media (hover: hover) { .footer-cookie:hover { color: var(--sun); } }
/* Cookie choice banner */
.cookie-card { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 460px; margin-left: auto; background: var(--white); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.cookie-card[hidden] { display: none; }
.cookie-card__title { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.cookie-card a { color: var(--plum-700); }
.cookie-card__row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cookie-card__row button { flex: 1 1 0; min-width: 120px; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--ink); font: inherit; font-weight: 800; cursor: pointer; background: var(--white); color: var(--ink); }
.cookie-card__row button.is-yes { background: var(--lime); }
.cookie-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cookie-card__head .cookie-card__title { margin-bottom: 0; }
.cookie-card__text { margin: 0; }
.cookie-card__more { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--plum-700); text-decoration: underline; cursor: pointer; }
.cookie-card__sep[hidden], .cookie-card__end[hidden] { display: none; }
.cookie-card__more[hidden], .cookie-card__save[hidden] { display: none; }
.cookie-card__row .cookie-card__save { flex-basis: 100%; background: var(--ink); color: var(--white); }
@media (max-width: 640px) {
  .cookie-card { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; font-size: .86rem; line-height: 1.45; border-radius: 18px; }
  .cookie-card__title { font-size: .95rem; }
  .cookie-card__row { margin-top: 10px; gap: 8px; }
  .cookie-card__row button { min-width: 0; padding: 8px 12px; font-size: .88rem; }
}
.cookie-card__choices { margin-top: 10px; display: grid; gap: 8px; }
.cookie-card__choices[hidden] { display: none; }
.cookie-card__choices label { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; }
.cookie-card__choices input { margin-top: 4px; accent-color: var(--plum-700); }
.cookie-card__choices b { color: var(--ink); }
body:has(.cookie-card:not([hidden])) .to-top { bottom: 20px; opacity: 0; pointer-events: none; }
/* Phone footer: Explore and Safety headings take the same height, so their links start on one line */
@media (max-width: 520px) {
  .footer-grid > div:nth-child(2) h3, .footer-grid > div:nth-child(3) h3 { min-height: 2.6em; }
}
/* Card icons as cartoon stickers (Features page): tilted badge with a pop shadow, like the home page */
.card-icon:has(svg) { box-shadow: 3px 3px 0 var(--ink); rotate: -4deg; transition: rotate .2s, scale .2s; }
.card:nth-child(even) .card-icon:has(svg) { rotate: 4deg; }
.card-icon svg { width: 40px; height: 40px; overflow: visible; }
@media (hover: hover) { .card:hover .card-icon:has(svg) { rotate: 6deg; scale: 1.06; } }
.card--glass .card-icon:has(svg) { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .card-icon:has(svg) { transition: none; } }
/* Features hero: chips that jump to a section */
.badge--jump { text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.badge--jump::after { content: "↓"; margin-left: 6px; font-weight: 800; opacity: .7; transition: translate .2s; }
.badge--jump:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--ink); }
@media (hover: hover) { .badge--jump:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); } }
@media (hover: hover) { .badge--jump:hover::after { opacity: 1; translate: 0 2px; } }
/* Features: the IRL invite stickers under "Three ways to ask" */
.invite-stickers { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.invite-sticker { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); rotate: -4deg; }
.invite-sticker:nth-child(even) { rotate: 4deg; }
.invite-sticker svg { width: 30px; height: 30px; overflow: visible; }
.invite-plus { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
/* Features: the IRL invites phone cycles Coffee -> Drink -> Movie -> Rose; the matching sticker lights up */
.invite-frame { display: block; position: absolute; inset: 0; opacity: 0; }   /* faded by main.js, not a CSS transition */
.invite-frame.is-on { opacity: 1; }
.invite-sticker { cursor: pointer; transition: opacity .3s, scale .3s, box-shadow .3s; }
.invite-stickers.is-cycling .invite-sticker:not(.is-on) { opacity: .75; }
.invite-stickers.is-cycling .invite-sticker.is-on { scale: 1.12; box-shadow: 3px 3px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .invite-sticker { transition: none; } }
/* IRL invites phone: a slow, constant sway (drifts left and right while rocking around its 3deg tilt) */
@keyframes inviteSway {
  0%   { translate: -4px 0; rotate: 2.25deg; }
  50%  { translate: 4px -2px; rotate: 3.75deg; }
  100% { translate: -4px 0; rotate: 2.25deg; }
}
/* Edge ring on its own layer (helps Safari keep the screen edge smooth while the screens crossfade) */
[data-invite-cycle]::after { will-change: transform; transform: translateZ(0); }
[data-invite-cycle] { animation: inviteSway 9s ease-in-out infinite paused; }
[data-invite-cycle].is-live { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { [data-invite-cycle] { animation: none; } }
/* Features hero: floating feature stickers (coffee, owl, golden heart, binoculars) instead of plain blobs */
.page-hero .lead { text-wrap: balance; }
.bg-lime { background: var(--lime); }
.hero-sticker {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, .45); pointer-events: none;
  animation: heroStickerBob 6s ease-in-out infinite;
}
.hero-sticker svg { width: 54px; height: 54px; overflow: visible; }
.hero-sticker--1 { left: 7%; top: max(24%, calc(var(--header-h) + 24px)); rotate: -8deg; }
.hero-sticker--2 { right: 7%; top: max(18%, calc(var(--header-h) + 20px)); rotate: 7deg; animation-delay: -1.5s; }
.hero-sticker--3 { left: 6%; bottom: 18%; rotate: 6deg; animation-delay: -3s; }
.hero-sticker--4 { right: 6%; bottom: 20%; rotate: -6deg; animation-delay: -4.5s; }
@keyframes heroStickerBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 1359px) {
  .hero-sticker { width: 64px; height: 64px; border-radius: 18px; }
  .hero-sticker svg { width: 40px; height: 40px; }
  .hero-sticker--1 { left: 3%; top: max(22%, calc(var(--header-h) + 24px)); } .hero-sticker--2 { right: 3%; top: max(16%, calc(var(--header-h) + 20px)); }
  .hero-sticker--3, .hero-sticker--4 { display: none; }
}
@media (max-width: 960px) {
  .hero-sticker { width: 54px; height: 54px; border-radius: 16px; }
  .hero-sticker svg { width: 34px; height: 34px; }
  .hero-sticker--1 { left: 3%; top: 98px; } .hero-sticker--2 { right: 3%; top: 94px; }
}
@media (max-width: 640px) {
  .hero-sticker { width: 46px; height: 46px; border-radius: 14px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); }
  .hero-sticker svg { width: 30px; height: 30px; }
  .hero-sticker--1 { left: 4%; top: 98px; } .hero-sticker--2 { right: 4%; top: 94px; }
}
@media (prefers-reduced-motion: reduce) { .hero-sticker { animation: none; } }
/* Home hero feathers: the small one sits fully below the menu bar; the big one steps aside on phones (the headline fills the width) */
.hero:not(.page-hero) .feather { background-image: url("../img/feather-glow.svg"); filter: drop-shadow(0 0 10px rgba(255, 61, 139, .55)); }
.hero:not(.page-hero) .feather--3 { top: calc(var(--header-h) + 30px); }
@media (max-width: 640px) {
  .hero:not(.page-hero) .feather--1 { display: none; }
  .hero:not(.page-hero) .feather--3 { right: 4%; }
}
/* Phones: a thin ring in the frame colour over the screen's rounded edge. On rotated (and swaying) phones the
   browser draws the clipped screen edge without smoothing, which shows as a sawtooth; the ring covers it. */
.device::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  inset: var(--pad); border-radius: calc(var(--rad) - var(--pad));
  box-shadow: inset 0 0 0 2px #0b0614, 0 0 0 2px #0b0614;
}
/* Safari: clip the rounded screen with a mask (smoothed) instead of relying on overflow + radius inside a rotated phone */
.device-screen { -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); isolation: isolate; }
.phone-fan .device-screen { -webkit-mask-image: none; mask-image: none; }   /* masks blank out phones inside the 3D hero fan */
/* IRL invites phone: while two invite screens crossfade, Safari draws each as its own layer with a rougher edge;
   a wider frame-coloured ring covers that band */
[data-invite-cycle]::after { box-shadow: inset 0 0 0 3.5px #0b0614, 0 0 0 2px #0b0614; }
.invite-frame { border-radius: inherit; }
/* Features Hoot Mode, second row: a still pair (the invite with a note behind, the chat in front) */
.hoot-pair { position: relative; display: grid; place-items: center; padding: 4% 0; }
.hoot-walk-row--rev .hoot-pair { order: 2; }
.hoot-pair > .device { grid-area: 1 / 1; }
.hoot-walk-row .hoot-pair__front { width: min(235px, 50%); z-index: 2; translate: 34% 4%; }
.hoot-walk-row .hoot-pair__back { width: min(215px, 46%); z-index: 1; rotate: -6deg; translate: -44% -3%; }
@media (max-width: 860px) {
  .hoot-walk-row--rev .hoot-pair { order: 0; }
  .hoot-walk-row .hoot-pair__front { width: min(215px, 46%); translate: 30% 4%; }
  .hoot-walk-row .hoot-pair__back { width: min(190px, 41%); translate: -40% -3%; }
}
/* Hoot Mode: the single phone in row 1 matches the front phone of the pair in row 2 */
.hoot-walk-row:not(.hoot-walk-row--rev) > .device { width: min(222px, 70%); }
@media (max-width: 860px) { .hoot-walk-row:not(.hoot-walk-row--rev) > .device { width: min(200px, 54%); } }
/* Features Discover: the other categories as a row of chips under the cards */
.discover-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 28px 0 0; }
.discover-more__label { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--lime); margin-right: 4px; }
.discover-more .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: var(--white); }
/* Tiny inline icons used in place of an emoji (e.g. Discover's binoculars; there is no binoculars emoji) */
.emo-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; overflow: visible; flex: none; }
/* Phones: feature cards two per row (shorter scroll), and the comparison table becomes three small cards */
.compare-cards { display: none; }
@media (max-width: 640px) {
  .grid--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid--phone-2 .card { padding: 16px 14px; border-radius: 18px; }
  .grid--phone-2 .card-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px; }
  .grid--phone-2 .card-icon svg { width: 30px; height: 30px; }
  .grid--phone-2 .h3 { font-size: 1rem; line-height: 1.2; }
  .grid--phone-2 .card p { font-size: .86rem; line-height: 1.45; }

  .table-wrap:has(.compare) { display: none; }
  .compare-cards { display: grid; gap: 12px; }
  .compare-card { padding: 16px 18px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 4px 4px 0 var(--ink); }
  .compare-card--gold { background: #fff6d6; }
  .compare-card--pink { background: #ffe3ef; }
  .compare-card__name { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; color: var(--ink); }
  .compare-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
  .compare-card dt { color: var(--muted); font-weight: 600; }
  .compare-card dd { margin: 0; color: var(--ink); }
}
.card p strong { color: var(--ink); }
/* Keep a short highlighted phrase on one line, except on the narrowest phones (where it would be clipped) */
@media (min-width: 361px) { .hl--fit { white-space: nowrap; } }
@media (min-width: 600px) { .hl--fit-md { white-space: nowrap; } }
/* Links inside a page hero's intro: subtle lime underline */
.page-hero .lead a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s; }
.page-hero .lead a:focus-visible { color: var(--lime); }
@media (hover: hover) { .page-hero .lead a:hover { color: var(--lime); } }
/* About: "Other apps vs. Peck" comparison on the dark band */
.vs { position: relative; max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.vs-head, .vs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.vs p { margin: 0; padding: 16px 20px; border-radius: 16px; font-size: 1rem; line-height: 1.4; }
.vs-head p { display: flex; align-items: center; gap: 10px; padding-block: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; background: none; }
.vs-head .vs-them { color: rgba(255, 255, 255, .55); }
.vs-head .vs-us { color: var(--lime); }
.vs-head img { width: 30px; height: 30px; }
.vs-row .vs-them { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .72); text-decoration: line-through; text-decoration-color: rgba(255, 61, 139, .7); text-decoration-thickness: 2px; }
.vs-row .vs-us { background: var(--lime); color: var(--ink); font-weight: 700; border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); }
@media (max-width: 640px) {
  .vs p { padding: 12px 14px; font-size: .9rem; }
  .vs-head p { font-size: .72rem; }
}
.vs-badge {
  position: absolute; left: 50%; top: 58%; z-index: 2; translate: -50% -50%; rotate: -8deg;
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--lime); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -.02em;
}
.bg-white { background: var(--white); }
.vs-head p { position: relative; }
.vs-sticker {
  position: absolute; right: 6px; top: -6px; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); animation: heroStickerBob 6s ease-in-out infinite;
}
.vs-sticker svg { width: 36px; height: 36px; overflow: visible; }
.vs-sticker--them { right: auto; left: 6px; rotate: -10deg; }
.vs-head .vs-them { justify-content: flex-end; }
.vs-sticker--us { rotate: 10deg; animation-delay: -3s; }
@media (max-width: 640px) {
  .vs-head, .vs-row { gap: 34px; }
  .vs-head p { font-size: .8rem; gap: 6px; }
  .vs-head img { width: 22px; height: 22px; }
  .vs-badge { width: 44px; height: 44px; font-size: .85rem; border-width: 2px; }
  .vs-sticker { width: 38px; height: 38px; border-radius: 11px; right: -4px; top: -12px; }
  .vs-sticker--them { right: auto; left: -4px; }
  .vs-sticker svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vs-sticker { animation: none; } }
.tip-head { display: flex; align-items: center; gap: 12px; }
.tip-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); rotate: -6deg; flex: none; }
.tip-ico svg { width: 28px; height: 28px; overflow: visible; }
a.card { display: flex; flex-direction: column; }
.card-cta { margin-top: auto; padding-top: 12px; font-weight: 800; color: var(--pink); }
@media (hover: hover) { a.card:hover .card-cta { text-decoration: underline; text-underline-offset: 3px; } }
.story-sticker { position: absolute; top: -14px; right: 18px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); rotate: 8deg; }
.story-sticker svg { width: 36px; height: 36px; overflow: visible; }
.story-card:nth-child(even) .story-sticker { rotate: -8deg; }
.story-card .story-top { padding-right: 56px; }
@media (max-width: 640px) { .story-card blockquote { font-size: 1rem; } .story-sticker { width: 46px; height: 46px; } .story-sticker svg { width: 30px; height: 30px; } }
.story-translate { margin-top: 10px; }
.story-translate summary { list-style: none; cursor: pointer; display: inline-block; font-size: .9rem; font-weight: 800; color: var(--pink); }
.story-translate summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .story-translate summary:hover { text-decoration: underline; text-underline-offset: 3px; } }
.story-translate .t-hide, .story-translate[open] .t-see { display: none; }
.story-translate[open] .t-hide { display: inline; }
.story-translate p { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--lilac); color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
/* Live rating (main.js + assets/data/rating.json): its space is always held and it's shown only when current and 4.5 or higher.
   Removing the line after load would shrink the page and move Back/Forward off its saved spot. */
.rating[data-live-rating] { visibility: hidden; }
.rating[data-live-rating].is-live { visibility: visible; }
/* Safari drops the parent's rounded clip on layers that are fading or tilted (the hero fan crossfade),
   showing square screen corners. Round every screen layer itself so the corners hold mid-fade. */
.device-screen > picture, .device-screen > img, .device-screen .screen-slide, .device-screen .screen-slide img, .device-screen picture img { border-radius: inherit; }
.device-screen picture { border-radius: inherit; overflow: hidden; }
/* Phone mockups, stickers and decorative art aren't selectable: a double-click shouldn't flood them with the lime selection colour */
.device, .phone-fan, .shot, .shot-single, .sticker, .hero-sticker, .story-sticker, .vs-sticker, .tip-ico, .card-icon, .tile-icon,
.feather, .birds, .story-art, .invite-sticker, .screen-dots { -webkit-user-select: none; user-select: none; }
.device img, .phone-fan img, .shot img, .shot-single img, .birds, .story-art img { -webkit-user-drag: none; }
/* Hero phones are decoration: no iOS long-press pop-up, and hidden screens can't catch a press (the top one was always Hoot Mode) */
.phone-fan img { -webkit-touch-callout: none; }
.screen-slide:not(.is-active) { pointer-events: none; }