/* Hallmark · shape: Stage hero + video wall + chat rail + price cards · genre: atmospheric · theme: brand · redesign: full
 * paper: oklch(15% 0.035 272) · accent: oklch(92% 0.19 131) · display: Rubik 800 · body: Rubik 400 · hero: Stage (the Wingman presenter reel plays beside the head, a tap opens WhatsApp) · nav: wordmark, four links, Quantis, one action · footer: a mast with Quantis, the socials and the legal links · signature: every video carries the same green "try it yourself" button
 * axes: dark/grotesk-heavy/lime · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R3 V4 · weakest: R, the owner wants many WhatsApp actions; four button looks (green with logo, lime with logo, outline, text) keep them from reading as one repeated block */
/* Hallmark · waive 38iii · .hero h1 .line2, once on the page, in the hero · the second line says who it is for, dating and couples */
/* Hallmark · waive 78 · section heads at 2.75rem max under a 4.25rem hero · the owner said the desktop type was too big */
/* Hallmark · waive 77 · the questions section stays two columns of text · short answers and two help links */
@import url("./wm2-tokens.css");
@import url("./wm2-base.css");

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-weight: 400; }
h1, h2, h3 { font-weight: var(--display-weight); }
p { color: var(--color-ink-2); }
b, strong { font-weight: 800; color: var(--color-ink); }

/* ── buttons: four looks, eight states ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 2px solid transparent; border-radius: var(--radius-pill); font: 800 var(--text-lg)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn .ico { width: 24px; height: 24px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--wa { background: var(--color-wa); color: var(--color-wa-ink); box-shadow: var(--shadow-wa); }
.btn--wa:hover { background: var(--color-wa-2); }
.btn--lime { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-lime); }
.btn--lime:hover { background: var(--color-focus); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-paper-3); }
.btn--big { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-xl); }
.btn--big .ico { width: 28px; height: 28px; }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); box-shadow: none; }
.btn--small .ico { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-width: 44px; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.chip:hover { background: var(--color-paper-3); }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
a { color: var(--color-ink); }
a:not(.btn):not(.chip):hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.skip { position: absolute; right: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.ico { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 94%, transparent); border-bottom: 1px solid var(--color-rule); }
.nav .container { display: flex; align-items: center; gap: var(--space-md); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; font: 800 var(--text-xl)/1 var(--font-display); }
.brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nav ul { display: none; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-md); }
.nav ul a { text-decoration: none; }
.nav .end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-xs); }
.aaa { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); text-decoration: none; font: 800 var(--text-sm)/1 var(--font-body); }
.aaa img { width: 34px; height: 34px; border-radius: 50%; }
.aaa bdi { display: none; }
.aaa:hover { background: var(--color-paper-3); }

/* ── hero ── */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero .container { display: grid; gap: var(--space-xl); }
.hero h1 { font-size: var(--text-display); line-height: 1.02; }
.hero h1 .line2 { display: block; color: var(--color-accent); }
.hero .lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink); max-width: 40ch; }
.users { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-lg); }
.users strong { font: 800 clamp(2.25rem, 2vw + 1.25rem, 3rem)/1 var(--font-display); color: var(--color-accent-2); font-variant-numeric: tabular-nums; }
.users span { color: var(--color-ink); font-weight: 800; font-size: var(--text-lg); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.actions .btn--big { flex: 1 1 100%; }
.socials { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); padding: 0; list-style: none; }
.socials a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-paper-3); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.socials a:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.socials a:active { transform: translateY(1px); }
.stage { justify-self: center; width: min(86%, 380px); }

/* ── a video card: the picture opens WhatsApp, sound and pause on top, the green button below ── */
.clip { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: var(--radius-video); overflow: hidden; background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip .go { position: absolute; inset: 0; z-index: 1; }
.clip .go:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -6px; }
.clip .tools { position: absolute; z-index: 2; top: var(--space-xs); inset-inline: var(--space-xs); display: flex; justify-content: space-between; }
.clip .chip { background: color-mix(in oklab, var(--color-paper) 82%, transparent); font-weight: 800; }
.clip .try { position: absolute; z-index: 2; inset-inline: var(--space-sm); bottom: var(--space-sm); display: flex; justify-content: center; align-items: center; gap: var(--space-xs); min-height: 52px; border-radius: var(--radius-pill); background: var(--color-wa); color: var(--color-wa-ink); font: 800 var(--text-lg)/1 var(--font-body); white-space: nowrap; text-decoration: none; box-shadow: var(--shadow-wa); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.clip .try .ico { width: 24px; height: 24px; }
.clip .try:hover { background: var(--color-wa-2); transform: translateY(-2px); }
.clip .try:active { transform: translateY(1px); }
.clip .try:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
html:not(.js) .clip .tools { display: none; }

/* ── sections ── */
.section { padding-block: var(--space-2xl); }
.section--violet { background: var(--color-violet); color: var(--color-ink); }
.section--violet p { color: var(--color-ink); }
.section--band { background: var(--color-paper-2); color: var(--color-ink); }
.head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.head h2 { font-size: var(--text-section); line-height: 1.1; }
.head p { font-size: var(--text-lead); max-width: 52ch; color: var(--color-ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }

.clips { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-sm); scrollbar-width: thin; }
.clips .clip { scroll-snap-align: center; }

/* chat photos: a tap opens them large */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-sm); scrollbar-width: thin; }
.shot { scroll-snap-align: start; display: block; padding: 0; border: 2px solid transparent; border-radius: var(--radius-card); overflow: hidden; background: none; cursor: zoom-in; transition: border-color var(--dur-short) var(--ease-out); }
.shot:hover { border-color: var(--color-accent); }
.shot:active { transform: translateY(1px); }
.shot:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.shot img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.rail-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); }
html:not(.js) .rail-tools button { display: none; }

.box { width: min(94vw, 460px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); }
.box::backdrop { background: var(--color-backdrop); }
.box-in { position: relative; display: grid; gap: var(--space-sm); padding: var(--space-sm); }
.box img { width: 100%; max-height: calc(94vh - 170px); object-fit: contain; border-radius: var(--radius-card); }
.box-x { position: absolute; top: var(--space-md); left: var(--space-md); z-index: 1; }
.box-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.box-tools .btn { order: -1; flex: 1 1 100%; min-height: 52px; }

/* what you get */
.gives { display: grid; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.gives li { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); border: 1px solid var(--color-rule-2); }
.gives h3 { font-size: var(--text-xl); }
.gives p { color: var(--color-ink); }

/* moments, each one a way in */
.moments { display: grid; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.moments a { display: grid; align-content: start; gap: var(--space-xs); height: 100%; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-violet-2); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.moments a:hover { background: var(--color-violet); outline: 2px solid var(--color-accent); }
.moments a:active { transform: translateY(1px); }
.moments h3 { font-size: var(--text-xl); }
.moments p { color: var(--color-ink); }
.more { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-accent); font-weight: 800; }
.more .ico { width: 18px; height: 18px; }

.strip { background: var(--color-violet-2); padding-block: var(--space-xl); }
.strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.strip .users { margin: 0; }
.strip .users span { color: var(--color-ink); }
.strip .btn--wa { box-shadow: none; }

/* audiences */
.who { display: grid; gap: var(--space-sm); }
.who a { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.who a:hover { background: var(--color-violet); outline: 2px solid var(--color-accent); }
.who a:active { transform: translateY(1px); }
.who h3 { font-size: var(--text-xl); }
.who p { color: var(--color-ink); }
.who .more { color: var(--color-wa); }

/* prices */
.plans { display: grid; gap: var(--space-md); align-items: stretch; }
.plan { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.plan--hot { background: var(--color-violet-2); outline: 3px solid var(--color-accent); }
.plan h3 { font-size: var(--text-xl); }
.plan .price { font: 800 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-accent); }
.plan .price small { font: 400 var(--text-md)/1 var(--font-body); color: var(--color-ink); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.plan li { color: var(--color-ink); }
.plan li::before { content: "✓ "; color: var(--color-accent); font-weight: 800; }
.plan .btn { margin-top: var(--space-sm); justify-self: start; }
.plan .join { font-size: var(--text-md); color: var(--color-ink); }

/* faq */
.faq { display: grid; gap: var(--space-2xl); }
.faq h2 { margin-bottom: var(--space-md); font-size: var(--text-section); }
.faq details { border-bottom: 1px solid var(--color-rule-2); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); font: 800 var(--text-lg)/1.3 var(--font-display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--color-accent); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-md); color: var(--color-ink); }
.help { list-style: none; margin: 0; padding: 0; }
.help a { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule-2); text-decoration: none; }
.help strong { font: 800 var(--text-lg)/1.3 var(--font-display); }
.help a:hover strong { color: var(--color-accent); }
.help span { color: var(--color-ink); }

/* footer with the parent brand */
.foot { background: var(--color-violet); padding-block: var(--space-2xl) var(--space-3xl); }
.foot .final { display: grid; gap: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-violet-2); }
.foot .final h2 { font-size: var(--text-section); max-width: 18ch; }
.parent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md) var(--space-lg); align-items: center; padding-block: var(--space-xl); border-bottom: 1px solid var(--color-violet-2); }
.parent img { width: 72px; height: 72px; border-radius: 50%; }
.parent h3 { font-size: var(--text-2xl); }
.parent p { color: var(--color-ink); }
.parent .btn { grid-column: 1 / -1; justify-self: start; }
.legal { display: grid; gap: var(--space-md); padding-top: var(--space-lg); }
.legal nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-md); }
.legal nav a { display: inline-flex; align-items: center; min-height: 44px; }
.legal p { color: var(--color-ink); }

/* floating WhatsApp */
.float-wa { position: fixed; z-index: var(--z-sticky); bottom: var(--space-md); right: var(--space-md); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 56px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-wa); color: var(--color-wa-ink); font-weight: 800; text-decoration: none; box-shadow: var(--shadow-wa); transition: transform var(--dur-micro) var(--ease-out); }
.float-wa:hover { background: var(--color-wa-2); }
.float-wa:active { transform: translateY(1px); }
.float-wa:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.float-wa .ico { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) { .btn, .chip, .clip .try, .float-wa, .socials a, .shot, .who a, .moments a { transition: none; } }


/* ── wider screens ── */
@media (min-width: 40rem) {
  .aaa bdi { display: inline; }
  .aaa { padding-inline-end: var(--space-md); border: 1px solid var(--color-rule-2); }
  .actions .btn--big { flex: 0 1 auto; }
  .gives, .who, .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clips { grid-auto-columns: 44%; }
}
@media (min-width: 60rem) {
  .hero { padding-block: var(--space-2xl); }
  .hero .container { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); }
  .stage { width: 360px; }
  .clips .clip .try { font-size: var(--text-md); inset-inline: var(--space-xs); }
  .section { padding-block: var(--space-3xl); }
  .clips { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .gives, .who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .moments { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot .final { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .parent { grid-template-columns: auto minmax(0, 1fr) auto; }
  .parent .btn { grid-column: auto; }
  .legal { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
@media (min-width: 70rem) { .nav ul { display: flex; } }