/* Coy marketing site. Tokens match 03-design/tokens/tokens.css. Light theme only. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
}

:root {
  --bg: #FFFFFF;
  --soft: #F6F4FA;
  --line: #ECE9F2;
  --rule: #DDD8E8;
  --text: #15121D;
  --muted: #6D6979;
  --pink: #FF3D81;
  --pink-strong: #D81E63;
  --pink-soft: #FFE4EF;
  --yellow: #FFE45C;
  --lilac: #E7E0FF;
  --mint: #CBF4E0;
  --sky: #D7ECFF;
  --peach: #FFE1CF;
  --whatsapp: #25D366;
  --ok: #0E8F48;
  --on-dark: #D9D5E2;
  --edge: 2px solid var(--text);
  --sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --section-gap: clamp(64px, 8vw, 96px);
}

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--pink-strong); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 12px; }
[id] { scroll-margin-top: 16px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 12px 20px;
  background: var(--text);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 700;
}
.skip-link:focus { top: 16px; color: #FFFFFF; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 32px;
  border: var(--edge);
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 4px 4px 0 var(--text);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--text); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--text); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--text); }
.btn-small { min-height: 44px; padding: 0 20px; box-shadow: 3px 3px 0 var(--text); font-size: 17px; }
.btn-small:hover { box-shadow: 4px 4px 0 var(--text); }
.btn-dark { background: var(--text); box-shadow: none; color: #FFFFFF; }
.btn-dark:hover { box-shadow: none; color: #FFFFFF; transform: translate(-1px, -1px); }
.btn-dark:active { box-shadow: none; transform: translate(1px, 1px); }

/* Header */
.site-header {
  max-width: 1248px;
  margin: 0 auto;
  padding: 24px 24px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
}
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { display: block; width: 76px; height: auto; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
  margin-left: auto;
  font-size: 17px;
  font-weight: 600;
}
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.top-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; }

/* Hero */
.hero {
  max-width: 1248px;
  margin: 0 auto;
  padding: 56px 24px 104px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}
.hero-copy {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--yellow);
  border: var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--text);
  font-size: 16px;
  font-weight: 700;
  transform: rotate(-3deg);
}
h1 {
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 800;
}
.lede {
  max-width: 32ch;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.5;
  color: var(--muted);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.fine { font-size: 16px; color: var(--muted); }

.hero-art {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0;
}
.msg-card {
  align-self: flex-start;
  width: min(100%, 400px);
  padding: 20px 22px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFFFF;
  border: var(--edge);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--text);
  transform: rotate(-3deg);
}
.msg-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.msg-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  border: var(--edge);
  border-radius: 50%;
}
.msg-time { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }
.msg-body { font-size: 17px; line-height: 1.45; }
.msg-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--pink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.match-card {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: min(100%, 380px);
  margin-top: -18px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--pink);
  border: var(--edge);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--text);
  text-align: center;
  transform: rotate(3deg);
}
.match-card-solo { align-self: center; margin-top: 0; }
.pair { display: flex; align-items: center; }
.avatar {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--edge);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 800;
}
.avatar-you { background: var(--peach); }
.avatar-them { background: var(--sky); font-size: 30px; }
.pair-heart {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin: 0 -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: var(--edge);
  border-radius: 50%;
  color: var(--pink-strong);
}
.match-title { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.match-text { font-size: 17px; line-height: 1.4; }
.match-hi {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--whatsapp);
  border: var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--text);
  font-size: 17px;
  font-weight: 700;
}
.hero-art figcaption { margin-top: 28px; font-size: 15px; color: var(--muted); text-align: center; }

/* Dark band */
.band { background: var(--text); color: #FFFFFF; }
.band-inner {
  max-width: 1248px;
  margin: 0 auto;
  padding: 44px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
}
.band-title { font-size: clamp(30px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.band-text { font-size: 20px; color: var(--on-dark); }

/* Sections */
.section {
  max-width: 1248px;
  margin: 0 auto;
  padding: var(--section-gap) 24px 40px;
}
.section-how { padding-top: clamp(64px, 9vw, 112px); }
.section-last { padding-bottom: var(--section-gap); }
h2 {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

/* How it works */
.steps {
  list-style: none;
  margin-top: 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 24px;
}
.step {
  padding: 32px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: var(--edge);
  border-radius: 26px;
}
.step-lilac { background: var(--lilac); }
.step-peach { background: var(--peach); }
.step-pink { background: var(--pink-soft); }
.step-head { display: flex; align-items: center; justify-content: space-between; }
.step-num {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
}
.step h3 { margin-top: 8px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.step p { font-size: 18px; line-height: 1.5; }

/* Privacy */
.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 64px; }
.split-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.nothing { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--pink-strong); }
.split-text { max-width: 40ch; font-size: 19px; line-height: 1.55; color: var(--muted); }
.promises {
  flex: 1 1 460px;
  min-width: 0;
  list-style: none;
  padding: 12px 30px;
  background: var(--soft);
  border: var(--edge);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--text);
}
.promises li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  line-height: 1.5;
}
.promises li:last-child { border-bottom: 0; }
.promises svg { flex: none; margin-top: 2px; }

/* Pricing */
.pricing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.pricing-sub { font-size: 19px; color: var(--muted); }
.packs {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 24px;
}
.pack {
  position: relative;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #FFFFFF;
  border: 2px solid var(--line);
  border-radius: 24px;
}
.pack-featured { background: var(--pink-soft); border: var(--edge); box-shadow: 4px 4px 0 var(--text); }
.pack-free { gap: 12px; background: var(--mint); border: var(--edge); }
.pack-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pack-price { margin-top: 18px; font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pack-each { font-size: 16px; color: var(--muted); }
.pack-featured .pack-each { color: var(--text); } /* muted fails AA on pink-soft */
.pack-free-text { font-size: 16px; line-height: 1.5; }
.pack-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  padding: 5px 12px;
  background: var(--yellow);
  border: var(--edge);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.pack-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: var(--edge);
  border-radius: 14px;
}
.pay-note { margin-top: 20px; font-size: 15px; color: var(--muted); }

/* FAQ */
.faq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }
.faq h2 { flex: 1 1 300px; }
.faq-list { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: var(--edge); }
details { padding: 6px 0; border-bottom: var(--edge); }
summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 21px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker { display: none; }
.faq-plus { flex: none; font-size: 30px; font-weight: 500; line-height: 1; transition: transform .12s ease; }
details[open] .faq-plus { transform: rotate(45deg); }
details p { max-width: 60ch; margin-bottom: 22px; font-size: 18px; line-height: 1.55; color: var(--muted); }

/* Closing call to action */
.closing { max-width: 1248px; margin: 0 auto; padding: var(--section-gap) 24px; }
.closing-card {
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  background: var(--pink);
  border: var(--edge);
  border-radius: 32px;
  box-shadow: 8px 8px 0 var(--text);
}
.closing-card h2 { max-width: 16ch; font-size: clamp(40px, 6vw, 76px); letter-spacing: -.05em; line-height: .98; }
.closing-fine { font-size: 17px; font-weight: 600; }

/* Footer */
.site-footer { border-top: 2px solid var(--line); }
.footer-inner {
  max-width: 1248px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
}
.footer-brand a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand img { display: block; width: 64px; height: auto; }
.footer-brand p { font-size: 15px; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 16px; font-weight: 600; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Simple pages: 404, holding pages */
.simple {
  max-width: 1248px;
  min-height: 60vh;
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.simple h1 { font-size: clamp(52px, 7vw, 88px); }
.simple .lede { max-width: 42ch; }

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; font-size: 18px; line-height: 1.6; }
.legal h1 { font-size: clamp(44px, 6vw, 68px); line-height: 1; }
.legal h2 { margin: 36px 0 10px; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 24px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--pink-strong); text-decoration: underline; text-underline-offset: 3px; }
.legal-date { margin-top: 24px !important; }

/* Small phones */
@media (max-width: 700px) {
  /* Logo and button share the first row, links wrap below them. */
  .site-header { padding-top: 16px; }
  .site-nav { display: contents; }
  .site-nav .btn { order: 2; }
  .site-nav-links {
    order: 3;
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: space-between;
    font-size: clamp(14px, 4.1vw, 16px);
    font-weight: 600;
    white-space: nowrap;
  }
  .hero { padding-top: 32px; padding-bottom: 72px; gap: 48px; }
  .site-footer .footer-nav { gap: 0 20px; }
}
@media (min-width: 701px) {
  .site-nav-links { display: contents; }
}
@media (max-width: 480px) {
  h1 { font-size: 13.3vw; }
  .simple h1 { font-size: 13.3vw; }
  .legal h1 { font-size: 11.5vw; }
  .promises { padding: 8px 20px; }
  .step { padding: 26px 24px 28px; }
  .step h3 { font-size: 26px; }
  .band-text { font-size: 18px; }
  .msg-card { padding-bottom: 36px; }
  .match-card { padding: 26px 20px 24px; }
  .match-title { font-size: 32px; }
  .match-hi { padding: 0 18px; font-size: 16px; white-space: nowrap; }
  .closing-card { box-shadow: 5px 5px 0 var(--text); }
  .site-header { gap: 4px 8px; }
  .site-nav .btn { padding: 0 16px; font-size: 16px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq-plus { transition: none; }
}