/* ==========================================================================
   HeyMiela — landing page styles
   Editorial dating-app look: a full-bleed photo hero, bold serif headlines,
   black pill buttons, rounded photographs, dark blocks for the quiet moments,
   and a wine-red accent with blush tints. Automatic dark mode. Fonts are
   self-hosted.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("/assets/fonts/bricolage-latin-ext.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("/assets/fonts/bricolage-latin.woff2") format("woff2-variations");
  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: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/source-serif-latin-ext-normal.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/source-serif-latin-normal.woff2") format("woff2-variations");
  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: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/source-serif-latin-ext-italic.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/source-serif-latin-italic.woff2") format("woff2-variations");
  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;
}

:root {
  --bg: #fffdfc;
  --bg-soft: #fbf0f1;
  --surface: #ffffff;
  --surface-2: #f8eaec;
  --text: #1b1617;
  --text-muted: #5a5052;
  --text-faint: #8d8285;
  --line: #efe3e5;
  --line-strong: #dccbce;
  --accent: #1b1617;
  --accent-hover: #000000;
  --accent-soft: #f8eaec;
  --accent-text: #ffffff;
  --rose: #b0123f;
  --blush: #fbf0f1;
  --ink-dark: #1d1718;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --tg: #229ed9;
  --shadow-sm: 0 1px 2px rgba(16, 18, 25, 0.05), 0 1px 3px rgba(16, 18, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 18, 25, 0.06), 0 1px 3px rgba(16, 18, 25, 0.04);
  --shadow-lg: 0 18px 48px rgba(16, 18, 25, 0.1), 0 2px 8px rgba(16, 18, 25, 0.04);
  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1120px;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141011;
    --bg-soft: #1d1517;
    --surface: #1e1719;
    --surface-2: #2a1f22;
    --text: #f7f0f1;
    --text-muted: #bdaeb1;
    --text-faint: #8a7b7e;
    --line: #2f2427;
    --line-strong: #413236;
    --accent: #f7f0f1;
    --accent-hover: #ffffff;
    --accent-soft: #2a1f22;
    --accent-text: #141011;
    --rose: #ff6b8e;
    --blush: #1d1517;
    --ink-dark: #0e0b0c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- per-variant accent ----------
   Only the accent tokens change, so every component that already derives from
   them — buttons, chips, glows, links, plan borders — follows automatically.
   Add a variant here to give it its own colour. */

/* the chat mockup shows a photograph of the variant's character: frame it on
   the face, and drop the gloss overlay meant for the illustrated placeholders */
.phone img.msg__photo {
  object-position: 50% 25%;
  background: var(--surface-2);
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 650;
}

p {
  margin: 0;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 10px 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* ---------- layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

/* keeps anchor targets clear of the sticky header */
.section[id],
[id]:not(body) {
  scroll-margin-top: 88px;
}

.section--soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.h2 {
  font-size: clamp(28px, 4vw, 40px);
}

.lede {
  color: var(--text-muted);
  font-size: 18px;
  margin-top: 16px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

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

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

.btn--sm {
  padding: 9px 16px;
  font-size: 15px;
  border-radius: 9px;
}

.btn--wide {
  padding-inline: 28px;
}

.btn svg {
  flex: none;
}

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header.is-stuck {
  border-bottom-color: var(--line);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  font-size: 15px;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

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

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

.header__end {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- language picker ---------- */

.lang {
  position: relative;
  display: inline-flex;
}

.lang__select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lang__select:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.lang::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

/* the language picker needs the room on small screens; the hero CTA is
   immediately below anyway */
@media (max-width: 560px) {
  .header__cta {
    display: none;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 96px;
}

.hero__glow {
  position: absolute;
  inset: -30% 0 auto 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 62%
  );
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 940px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}

.hero h1 {
  font-size: clamp(38px, 6vw, 62px);
  margin: 22px 0 0;
  font-weight: 680;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  margin-top: 22px;
  font-size: 19px;
  color: var(--text-muted);
  max-width: 30em;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-faint);
}

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

.trustbar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--text-muted);
}

.trustbar svg {
  color: var(--accent);
}

/* ---------- chat mockup ---------- */

.phone {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.phone__bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(140deg, #8b5cf6, #ec4899 55%, #f59e0b);
  object-fit: cover;
}

.phone__name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

.phone__status {
  font-size: 12.5px;
  color: #22c55e;
}

.phone__body {
  padding: 18px 16px 22px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 380px;
}

.msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
  animation: rise 0.5s ease both;
}

.msg--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}

.msg--out {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-text);
  border-bottom-right-radius: 5px;
}

.msg--photo {
  padding: 6px;
  max-width: 66%;
}

.msg__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  /* also the fallback for the generated-image placeholders in the preview */
  background: linear-gradient(160deg, #a78bfa, #f472b6 48%, #fb923c);
  position: relative;
  overflow: hidden;
}

.msg__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      120% 60% at 30% 18%,
      rgba(255, 255, 255, 0.45),
      transparent 60%
    ),
    radial-gradient(80% 50% at 78% 82%, rgba(0, 0, 0, 0.22), transparent 65%);
}

.msg__caption {
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 7px 8px 3px;
}

.typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: blink 1.3s infinite ease-in-out;
}

.typing i:nth-child(2) {
  animation-delay: 0.18s;
}

.typing i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes blink {
  0%,
  60%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

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

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-sm);
}

.step__num {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.step h3 {
  font-size: 18.5px;
  margin-bottom: 9px;
}

.step p {
  color: var(--text-muted);
  font-size: 15.5px;
}

/* ---------- feature grid ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.card h3 {
  font-size: 18.5px;
  margin-bottom: 10px;
}

.card p {
  color: var(--text-muted);
  font-size: 15.5px;
}

/* ---------- modes ---------- */

.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.mode {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
}

.mode__tag {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.mode h3 {
  font-size: 17.5px;
  margin: 12px 0 8px;
}

.mode p {
  font-size: 15px;
  color: var(--text-muted);
}

.mode__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
}

.mode__link::after {
  content: " →";
}

.mode__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the card for the variant you are already on: highlighted, and no self-link */
html[data-variant="friend"] [data-variant-link="friend"],
html[data-variant="girlfriend"] [data-variant-link="girlfriend"],
html[data-variant="boyfriend"] [data-variant-link="boyfriend"] {
  border-color: var(--accent);
}

html[data-variant="friend"] [data-variant-link="friend"] .mode__link,
html[data-variant="girlfriend"] [data-variant-link="girlfriend"] .mode__link,
html[data-variant="boyfriend"] [data-variant-link="boyfriend"] .mode__link {
  display: none;
}

/* ---------- personality builder ---------- */

.builder {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 940px) {
  .builder {
    grid-template-columns: 1fr;
  }
}

.builder__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.field + .field {
  margin-top: 26px;
}

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.builder__hint {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text-faint);
}

.preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.preview__body {
  padding: 20px 18px 24px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
}

/* the preview column is wider than a phone, so cap the photo */
.preview__body .msg--photo {
  max-width: 190px;
}

/* ---------- trust ---------- */

.trust {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 940px) {
  .trust {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

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

.trust__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.trust__list svg {
  color: var(--accent);
  margin-top: 3px;
}

.trust__list strong {
  display: block;
  font-weight: 620;
  font-size: 16px;
  margin-bottom: 3px;
}

.trust__list span {
  color: var(--text-muted);
  font-size: 15.5px;
}

/* ---------- pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px 32px;
  box-shadow: var(--shadow-sm);
}

.plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  position: relative;
}

.plan__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}

.launch-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}

.plan h3 {
  font-size: 18px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0 6px;
}

.plan__price b {
  font-size: 38px;
  font-weight: 680;
  letter-spacing: -0.03em;
}

.plan__price span {
  color: var(--text-faint);
  font-size: 15px;
}

/* launch offer: the paid plans are free until 01.01.2028 */
.plan__price--launch {
  flex-wrap: wrap;
  row-gap: 0;
}

.plan__price--launch b {
  color: var(--accent);
}

.plan__price--launch s {
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.plan__price--launch s span {
  font-size: 14px;
}

.plan__until {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
}

.plan > p {
  color: var(--text-muted);
  font-size: 15px;
}

.plan ul {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15.5px;
  color: var(--text-muted);
}

.plan li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
}

.plan li svg {
  color: var(--accent);
  margin-top: 5px;
}

.plan .btn {
  margin-top: auto;
  width: 100%;
}

/* ---------- faq ---------- */

.faq {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

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

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 6px;
}

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

.faq p {
  padding: 0 4px 24px;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ---------- final cta ---------- */

.cta {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 64px 32px 68px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: -60% 30% auto -10%;
  height: 420px;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--accent) 14%, transparent),
    transparent 62%
  );
  pointer-events: none;
}

.cta > * {
  position: relative;
}

.cta h2 {
  font-size: clamp(28px, 4.4vw, 42px);
}

.cta p {
  color: var(--text-muted);
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 18px;
}

.cta .btn {
  margin-top: 32px;
}

.cta__small {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-faint);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 46px;
  background: var(--bg);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}

.footer__blurb {
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 14px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.footer__col h4 {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.footer__col a {
  color: var(--text-muted);
}

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

.footer__bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-faint);
}

.badge-18 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- legal pages ---------- */

.legal {
  padding: 72px 0 96px;
  max-width: 760px;
}

.legal h1 {
  font-size: clamp(30px, 4.6vw, 42px);
}

.legal__meta {
  margin-top: 14px;
  color: var(--text-faint);
  font-size: 14.5px;
}

.legal h2 {
  font-size: 21px;
  margin: 44px 0 12px;
}

.legal p,
.legal li {
  color: var(--text-muted);
  font-size: 16.5px;
}

.legal p + p {
  margin-top: 14px;
}

.legal ul {
  margin: 12px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 9px;
}

.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notice {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

@media (max-width: 640px) {
  body {
    font-size: 16.5px;
  }
  .section {
    padding: 72px 0;
  }
  .hero {
    padding: 44px 0 72px;
  }
  .cta {
    padding: 48px 22px 52px;
  }
  .builder__panel {
    padding: 22px;
  }
}


/* ==========================================================================
   Editorial layer
   Overrides the component defaults above. One photograph carries the hero,
   bold serif headlines carry the voice, black pills carry the actions, and
   wine red is kept for the few things that should catch the eye.
   ========================================================================== */

h1,
h2,
.h2,
.cta h2,
.legal h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

h3 {
  font-weight: 650;
  letter-spacing: -0.015em;
}

.h2 {
  font-size: clamp(38px, 5.2vw, 60px);
}

.eyebrow {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rose);
}

.lede {
  font-size: 19px;
}

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

/* ---------- actions ---------- */

.btn {
  border-radius: 999px;
  font-weight: 650;
  padding: 15px 28px;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--ghost {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--text);
}

.btn--ghost:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.btn--sm {
  border-radius: 999px;
  padding: 10px 20px;
}

/* ---------- header: wordmark top left, links beside it ---------- */

.header {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.header__inner {
  height: 84px;
}

.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.brand__mark {
  display: none;
}

.nav {
  gap: 28px;
  margin-right: auto;
  margin-left: 24px;
}

.nav a {
  color: inherit;
  font-weight: 550;
  font-size: 16px;
}

.nav a:hover {
  color: var(--rose);
}

.lang__select {
  border-radius: 999px;
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}

/* over the hero photograph, until the page scrolls */
html:has(.hero) .header:not(.is-stuck) {
  background: transparent;
  color: #fff;
}

html:has(.hero) .header:not(.is-stuck) .nav a,
html:has(.hero) .header:not(.is-stuck) .lang__select {
  color: #fff;
}

html:has(.hero) .header:not(.is-stuck) .lang::after {
  border-color: rgba(255, 255, 255, 0.85);
}

html:has(.hero) .header:not(.is-stuck) .btn--primary {
  background: #fff;
  color: #1b1617;
}

.lang__select option {
  color: #1b1617;
}

/* ---------- hero: one photograph, the headline on it ---------- */

.hero {
  position: relative;
  margin-top: -84px;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding: 140px 0 72px;
  color: #fff;
  background: #2a1f1c;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 10, 12, 0.62) 0%, rgba(20, 10, 12, 0.18) 55%, transparent 80%),
    linear-gradient(0deg, rgba(20, 10, 12, 0.55) 0%, transparent 45%),
    linear-gradient(180deg, rgba(20, 10, 12, 0.35) 0%, transparent 22%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

.hero__copy {
  max-width: 640px;
}

.hero .pill {
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.hero h1 {
  font-size: clamp(48px, 7.2vw, 92px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-top: 22px;
  text-wrap: balance;
}

/* the phrase the headline is about gets a hand-drawn underline in wine red */
.hero h1 em {
  font-style: normal;
  color: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c30-5 62-6.5 96-5.5 34 1 66 3 100-.5' fill='none' stroke='%23e0315f' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    0 100% / 100% 0.22em no-repeat;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__sub {
  margin-top: 22px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 30em;
}

.hero .btn--ghost {
  color: #fff;
}

.hero .btn--primary {
  background: #fff;
  color: #1b1617;
}

.hero .btn--primary:hover {
  background: #fbf0f1;
}

@media (max-width: 640px) {
  .hero {
    min-height: 88vh;
    padding-bottom: 48px;
  }

  .hero__photo {
    object-position: 72% 40%;
  }

  .hero::after {
    background: linear-gradient(0deg, rgba(20, 10, 12, 0.82) 0%, rgba(20, 10, 12, 0.35) 55%, rgba(20, 10, 12, 0.3) 100%);
  }
}

/* small print and promises, right under the photograph */
.herobar {
  border-bottom: 1px solid var(--line);
}

.herobar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding-block: 22px;
}

.herobar .hero__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

.herobar .trustbar {
  margin: 0;
  padding: 0;
  border: 0;
  gap: 10px 26px;
}

.herobar .trustbar span {
  color: var(--text);
  font-size: 15px;
}

.herobar .trustbar svg {
  color: var(--rose);
}

/* ---------- styles: one photo card per companion type ---------- */

#modes .section-head {
  text-align: left;
  margin-inline: 0;
}

.modes {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1000px) {
  .modes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* phones: one swipeable row of characters instead of a tall stack */
@media (max-width: 640px) {
  .modes {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    margin-inline: -24px;
    padding: 4px 24px 10px;
    scrollbar-width: none;
  }

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

  .mode {
    scroll-snap-align: start;
  }

  .mode__photo {
    aspect-ratio: 4 / 5;
  }

  .mode h3 {
    font-size: 22px;
  }
}

.mode {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 16px;
  margin-bottom: 10px;
  background: var(--surface-2);
}

.mode__tag {
  align-self: flex-start;
  background: transparent;
  color: var(--rose);
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

[data-variant-link="dating"] .mode__tag {
  background: var(--rose);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
}

.mode h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 650;
}

.mode p {
  color: var(--text-muted);
}

.mode__link {
  margin-top: auto;
  padding-top: 6px;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.mode__link:hover {
  color: var(--rose);
}

/* the card for the page you are on, quietly marked */
html[data-variant="dating"] [data-variant-link="dating"] .mode__link {
  display: none;
}

html[data-variant] .mode[data-variant-link] {
  background: transparent;
  border: 0;
}

html[data-variant="friend"] [data-variant-link="friend"] .mode__photo,
html[data-variant="girlfriend"] [data-variant-link="girlfriend"] .mode__photo,
html[data-variant="boyfriend"] [data-variant-link="boyfriend"] .mode__photo,
html[data-variant="dating"] [data-variant-link="dating"] .mode__photo {
  outline: 3px solid var(--rose);
  outline-offset: 4px;
}

/* ---------- how it works: steps beside the chat ---------- */

.how__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.how__grid .steps {
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (max-width: 940px) {
  .how__grid {
    grid-template-columns: 1fr;
  }
}

.step {
  border-radius: 20px;
  box-shadow: none;
}

.step__num {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 650;
  background: var(--rose);
  color: #fff;
  border: 0;
  border-radius: 50%;
}

.phone {
  border-radius: 34px;
  border: 1px solid var(--line);
  box-shadow: 0 34px 80px -44px rgba(80, 10, 30, 0.45);
}

.avatar {
  width: 40px;
  height: 40px;
}

.phone__name {
  font-weight: 650;
}

.msg--out {
  background: var(--text);
  color: var(--bg);
}

.msg__photo,
.phone img.msg__photo {
  border-radius: 20px;
}

/* ---------- the rest of the body ---------- */

.section {
  padding-block: 112px;
}

.section--soft {
  background: var(--blush);
}

.card,
.plan,
.faq details {
  border-radius: 22px;
  box-shadow: none;
}

.card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--line-strong);
}

.card__icon {
  background: var(--blush);
  color: var(--rose);
  border-radius: 50%;
}

.chip {
  border-radius: 999px;
}

.chip[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* privacy is the quiet, serious moment: a dark block, like a testimonial */
#trust {
  background: var(--ink-dark);
  color: #f7f0f1;
}

#trust .h2,
#trust h2 {
  color: #fff;
}

#trust .eyebrow {
  color: #ff8aa5;
}

#trust .lede,
#trust p {
  color: rgba(255, 255, 255, 0.72);
}

#trust .trust__list li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
}

#trust .trust__list strong {
  color: #fff;
}

#trust .trust__list span {
  color: rgba(255, 255, 255, 0.66);
}

#trust .trust__list svg {
  color: #ff8aa5;
}

.plan--featured {
  border: 1.5px solid var(--text);
  box-shadow: none;
}

.plan__badge {
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
}

.plan__price b {
  font-family: var(--serif);
  font-weight: 650;
  font-size: 50px;
  letter-spacing: -0.03em;
}

.launch-badge,
.plan__until {
  background: color-mix(in srgb, var(--rose) 10%, var(--bg));
  border: 0;
  color: var(--rose);
}

.plan__price--launch b {
  color: var(--rose);
}

.plan__price--launch s {
  font-family: var(--font);
}

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

.faq summary {
  font-size: 19px;
  font-weight: 600;
}

.cta {
  background: var(--ink-dark);
  color: #fff;
  border: 0;
  border-radius: 28px;
}

.cta::before {
  display: none;
}

.cta h2 {
  font-size: clamp(40px, 6vw, 72px);
  color: #fff;
}

.cta p,
.cta__small {
  color: rgba(255, 255, 255, 0.72);
}

.cta .btn--primary {
  background: #fff;
  color: #1b1617;
}

.cta .btn--primary:hover {
  background: #fbf0f1;
}

/* ---------- footer ---------- */

.footer {
  background: var(--ink-dark);
  color: rgba(255, 255, 255, 0.72);
  border-top: 0;
}

.footer .brand {
  color: #fff;
  font-size: 40px;
}

.footer__col h4 {
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 500;
}

.footer__col a {
  color: #fff;
  font-weight: 600;
}

.footer__col a:hover {
  color: #ff8aa5;
}

.footer__blurb,
.footer__bottom {
  color: rgba(255, 255, 255, 0.6);
}

.footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.badge-18 {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
  .section {
    padding-block: 80px;
  }
}

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

.nav a {
  white-space: nowrap;
}

/* six links don't fit beside the wordmark on smaller laptops: keep how it
   works, features and pricing; the rest stay reachable further down */
@media (max-width: 1240px) {
  .nav a:nth-child(3),
  .nav a:nth-child(4),
  .nav a:nth-child(6) {
    display: none;
  }
}

/* the 18+ pages, one line under the four style cards */
.adult-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
}

.adult-links span {
  font-weight: 600;
  color: var(--rose);
  margin-right: 6px;
}

.adult-links a {
  padding: 8px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 550;
  color: var(--text);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.adult-links a:hover {
  border-color: var(--rose);
  color: var(--rose);
}

html[data-variant="sexting"] .adult-links [data-variant-link="sexting"],
html[data-variant="roleplay"] .adult-links [data-variant-link="roleplay"],
html[data-variant="nsfw-girlfriend"] .adult-links [data-variant-link="nsfw-girlfriend"],
html[data-variant="nsfw-boyfriend"] .adult-links [data-variant-link="nsfw-boyfriend"] {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

/* ---------- demo chat: plays on arrival, with a round video message ---------- */

/* the visual comes first: the button that leads here promises a demo */
.how__grid .phone {
  order: -1;
}

html.js .phone .msg,
html.js .phone .typing {
  animation-play-state: paused;
}

html.js .phone.is-playing .msg,
html.js .phone.is-playing .typing {
  animation-play-state: running;
}

.how__grid .typing {
  animation: rise 0.5s ease both;
}

/* a Telegram-style round video message */
.msg--note {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-width: none;
}

.note {
  display: block;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: 0 8px 24px -12px rgba(40, 10, 20, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  html.js .phone .msg,
  html.js .phone .typing {
    animation: none;
  }
}

/* desktop: the chat on the left, the heading and steps beside it, so the
   demo is fully in view the moment "See how it works" lands here */
.how__grid {
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-areas:
    "phone head"
    "phone steps";
  align-items: start;
  column-gap: 72px;
}

.how__grid .phone {
  grid-area: phone;
  align-self: center;
}

.how__head {
  grid-area: head;
  margin-bottom: 28px;
}

.how__grid .steps {
  grid-area: steps;
}

@media (max-width: 940px) {
  .how__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "phone"
      "steps";
  }
}

/* phones: the plans become one swipeable row as well; the page opens it on
   the featured plan (script.js), with free and yearly peeking in either side */
@media (max-width: 640px) {
  .plans {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -24px;
    padding: 16px 24px 10px; /* room for the "most popular" badge above the card */
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }

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

  .plan {
    scroll-snap-align: center;
  }
}

/* ---------- personality builder on phones ----------
   The options used to sit a full screen above the preview, so tapping one
   changed nothing visible. On phones the preview comes first and each option
   group is a single swipeable line right under it. */
.preview__body img.msg__photo {
  object-position: 50% 25%;
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .builder {
    gap: 14px;
  }

  /* let the one-line chip rows scroll instead of widening the page */
  .builder > * {
    min-width: 0;
  }

  .builder .preview {
    order: -1;
  }

  /* a fixed-height chat window, newest message at the bottom: tapping an
     option re-renders the preview without moving the options below it, and
     preview plus options fit on one screen. The photos are in the style
     cards and the demo chat already, so the preview skips them here. */
  .preview__body {
    height: 300px;
    min-height: 0;
    overflow: hidden;
    justify-content: flex-end;
    padding: 14px 14px 16px;
  }

  .preview__body .msg--photo {
    display: none;
  }

  .builder__panel {
    padding: 16px 0 16px 16px;
  }

  .field + .field {
    margin-top: 14px;
  }

  .field__label {
    margin-bottom: 8px;
  }

  .builder .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 16px;
    scrollbar-width: none;
  }

  .builder .chips::-webkit-scrollbar {
    display: none;
  }

  .builder .chip {
    flex: none;
  }

  .builder__hint {
    margin-right: 16px;
    margin-top: 16px;
    padding-top: 14px;
  }
}

/* phones: the privacy points as one swipeable row of short cards */
@media (max-width: 640px) {
  .trust__list {
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -24px;
    padding: 2px 24px 10px;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }

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

  .trust__list li {
    scroll-snap-align: start;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
  }
}

/* phones: the feature cards as one swipeable row, like styles, plans and privacy */
@media (max-width: 640px) {
  .features {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -24px;
    padding: 2px 24px 10px;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }

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

  .features .card {
    scroll-snap-align: start;
    padding: 22px;
  }
}

/* phones: less air between a section's heading and the content under it */
@media (max-width: 640px) {
  .section-head {
    margin-bottom: 28px;
  }

  .how__grid {
    row-gap: 22px;
  }

  .how__head {
    margin-bottom: 0;
  }
}

/* the photo opens that companion's page too; the text link stays the one
   announced to screen readers */
.mode__photo-link {
  display: block;
  border-radius: 16px;
}

.mode__photo-link .mode__photo {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.mode__photo-link:hover .mode__photo {
  filter: brightness(1.04);
  transform: scale(1.015);
}

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

/* the hero loop sits over the photo and fades in once it is playing */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__video.is-ready {
  opacity: 1;
}

@media (max-width: 640px) {
  .hero__video {
    object-position: 72% 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* ---------- header: globe language picker, chat button on every screen ---------- */

.header .lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  color: inherit;
}

.header .lang::after {
  display: none;
}

.lang__code {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* the real select covers the pill, invisible: one tap opens the native list */
.header .lang__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: 0;
}

.header .lang:focus-within {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.header .lang:hover {
  border-color: currentColor;
}

.header__cta-short {
  display: none;
}

@media (max-width: 640px) {
  .header .lang {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .lang__code {
    display: none;
  }

  /* the chat button stays in the sticky header on phones, with a short label */
  .header__cta {
    display: inline-flex;
    padding: 9px 16px;
  }

  .header__cta-long {
    display: none;
  }

  .header__cta-short {
    display: inline;
  }

  .header__end {
    gap: 8px;
  }

  .brand {
    font-size: 27px;
  }
}