/* Quintessa v3.1 "cosmos": só escuro. Tokens e medidas do design Quintessa Landing v3.1. */
:root {
  --bg: #0A0618; --surface: #1C1339; --surface2: #2B1F52;
  --ink: #F5F0FF; --ink2: #D6CEF2; --ink3: #ADA2D2;
  --line: rgba(205, 186, 255, .18); --line2: rgba(205, 186, 255, .36);
  --btn: #E9DFFF; --btnInk: #1A1036; --accent: #CDB8FF;
  --fire: #E07BB8; --air: #F4C9E6; --water: #8F9CF5; --earth: #5E4596;
  --fireS: color-mix(in srgb, #E07BB8 24%, #1C1339); --airS: color-mix(in srgb, #F4C9E6 18%, #1C1339);
  --waterS: color-mix(in srgb, #8F9CF5 24%, #1C1339); --earthS: color-mix(in srgb, #5E4596 45%, #1C1339);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Quicksand', system-ui, sans-serif;
  color-scheme: dark;
}

/* Telas do app (snapshots em screens/): os tokens delas, como no componente do design, e sem barra de rolagem. */
[data-q] {
  --bg: #110A24; --deep: #0A0618; --surface: #1C1339; --surface2: #2B1F52;
  --ink: #F5F0FF; --ink2: #D6CEF2; --ink3: #ADA2D2;
  --line: rgba(205, 186, 255, .18); --line2: rgba(205, 186, 255, .36);
  --btn: #E9DFFF; --btnInk: #1A1036; --accent: #CDB8FF; --link: #CDB8FF; --goldStar: #CDB8FF;
  --scrim: rgba(6, 3, 16, .72); --moon: #F1E9FF;
  --fire: #E07BB8; --air: #F4C9E6; --water: #8F9CF5; --earth: #5E4596; --earthEdge: inset 0 0 0 1px rgba(205, 186, 255, .35);
  --fireS: color-mix(in srgb, #E07BB8 24%, #1B1236); --airS: color-mix(in srgb, #F4C9E6 18%, #1B1236);
  --waterS: color-mix(in srgb, #8F9CF5 24%, #1B1236); --earthS: color-mix(in srgb, #5E4596 45%, #1B1236);
}
[data-q] *::-webkit-scrollbar { display: none; }
[data-q] input::placeholder { color: var(--ink3); }
[data-q] a { color: var(--link); }

*, *::before, *::after { box-sizing: border-box; }
/* As telas do app vêm do design sem reset: caixas e margens como no navegador. */
[data-q], [data-q] *, [data-q] *::before, [data-q] *::after { box-sizing: content-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 500; -webkit-font-smoothing: antialiased;
}
/* Céu estrelado (brand/stars.svg, de landing/tools/make-stars.mjs, ladrilho de 640) e três nebulosas. Os elementos
   decorativos (anel girando, parallax) passam da largura da tela, por isso o corte horizontal. */
.page {
  min-height: 100vh; overflow-x: clip;
  background-color: var(--bg);
  background-image:
    url('/brand/stars.svg'),
    radial-gradient(900px 520px at 85% 0%, rgba(122, 88, 220, .32), transparent 62%),
    radial-gradient(800px 600px at 0% 45%, rgba(224, 123, 184, .10), transparent 60%),
    radial-gradient(900px 600px at 100% 85%, rgba(143, 156, 245, .10), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 640px 640px, 100% 100%, 100% 100%, 100% 100%;
}
@supports not (overflow: clip) { html { overflow-x: hidden; } }

a { color: var(--ink); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:where(h1, h2, h3, p):not([data-q] *) { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
section[id] { scroll-margin-top: 80px; }

.wrap { max-width: 1248px; margin: 0 auto; padding-inline: 24px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); }
.display { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
.display--lg { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06; margin-top: 14px; }
.display--md { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; margin-top: 14px; }
.display--sm { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.display em { font-style: italic; color: var(--accent); }
/* Selo pequeno ao lado de um nome (linha Casal das telas, plano Plus Casal). */
.row-tag, .plan-badge {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  padding: 5px 10px; border-radius: 12px; background: var(--surface2); color: var(--accent); white-space: nowrap;
}

/* Cabeçalho */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(10, 6, 24, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { display: block; flex: none; width: 26px; height: 39px; }
.brand span { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1; font-weight: 500; }
.nav { display: flex; align-items: center; gap: 10px; }
/* "Casal": texto simples antes dos idiomas, que não compete com "Baixar"; some quando a linha não comporta. */
.nav-link { height: 40px; padding: 0 6px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--ink2); }
@media (hover: hover) { .nav-link:hover { color: var(--accent); } }
@media (max-width: 379px) { .nav-link { display: none; } }
.lang { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 3px; }
.lang button {
  box-sizing: content-box; height: 32px; min-width: 38px; padding: 0 10px; border: 0; border-radius: 16px; background: transparent;
  color: var(--ink2); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.lang button[aria-pressed=true] { background: var(--btn); color: var(--btnInk); }
.nav-cta {
  height: 40px; padding: 0 20px; border-radius: 20px; background: var(--btn); color: var(--btnInk);
  display: flex; align-items: center; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(201, 180, 255, .7);
}

/* Botões de loja */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.store {
  height: 60px; padding: 0 24px 0 20px; border-radius: 30px; background: var(--btn); color: var(--btnInk);
  display: flex; align-items: center; gap: 12px; text-align: left;
  box-shadow: 0 10px 30px -8px rgba(201, 180, 255, .7);
}
.store--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }

/* Modal da lista de espera (form do Tally num iframe) */
.waitlist {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden;
  border: 1px solid var(--line2); border-radius: 24px; background: var(--surface); color: var(--ink);
}
.waitlist::backdrop { background: rgba(6, 3, 16, .72); }
.waitlist-bar { display: flex; justify-content: flex-end; padding: 10px 10px 0; }
.waitlist-close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface2);
  color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.waitlist-frame { display: block; width: 100%; height: 580px; max-height: calc(100dvh - 90px); border: 0; }
.store-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-text small { font-size: 11px; font-weight: 600; }
.store-text b { font-size: 18px; font-weight: 700; }
.ios-icon {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center;
}
.ios-icon::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.play-icon { width: 0; height: 0; border-block: 10px solid transparent; border-left: 16px solid currentColor; margin-left: 3px; border-radius: 2px; }
@media (hover: hover) {
  .brand:hover { color: var(--accent); }
}

/* Hero */
.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center;
  padding-block: 80px 48px;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5.8vw, 76px); line-height: 1.02; letter-spacing: -.01em;
  margin-top: 20px; text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.lead { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--ink2); max-width: 520px; text-wrap: pretty; }
.free { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--ink2); max-width: 520px; }
/* Link do casal: pílula discreta, menor que os botões das lojas, com os pontos A e D do mapa do casal. */
.hero-couple {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 16px 8px 10px;
  border: 1px solid var(--line2); border-radius: 22px; background: rgba(28, 19, 57, .6);
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.hero-couple .ico { flex: none; color: var(--accent); transition: transform .2s; }
.pair-dots { display: flex; flex: none; }
.pair-dot {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--btnInk); font: normal 700 11px/1 var(--sans); box-shadow: 0 0 0 2px var(--water);
}
.pair-dot--d { margin-left: -5px; box-shadow: 0 0 0 2px var(--air); }
@media (hover: hover) {
  .hero-couple:hover { border-color: var(--accent); }
  .hero-couple:hover .ico { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .hero-couple .ico { transition: none; } }
.hero-visual { display: flex; justify-content: center; position: relative; min-height: 680px; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-halo, .hero-ring, .hero-orbit { box-sizing: content-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.hero-halo { width: min(560px, 100%); aspect-ratio: 1; background: radial-gradient(circle, rgba(150, 118, 255, .34), transparent 64%); }
.hero-ring { width: min(520px, 100%); aspect-ratio: 1; border: 1px dashed rgba(205, 186, 255, .24); }
.hero-orbit { width: min(620px, 110%); height: 200px; transform: translate(-50%, -50%) rotate(-16deg); border: 1px solid rgba(205, 186, 255, .28); }
.planet { position: absolute; border-radius: 50%; }
.planet--pink {
  left: 8%; top: 62%; width: 22px; height: 22px;
  background: radial-gradient(circle at 35% 30%, #FDEAF6, #E07BB8 75%); box-shadow: 0 0 18px rgba(224, 123, 184, .6);
}
.planet--blue { right: 6%; top: 30%; width: 14px; height: 14px; background: #8F9CF5; box-shadow: 0 0 16px rgba(143, 156, 245, .8); }
.phone-holder { position: relative; }

/* Celular: 296x640 com borda de 8 (312x656). O JS define --k para caber em colunas mais estreitas. */
.phone-fit {
  flex: none; width: 312px; height: 656px; transform: scale(var(--k, 1)); transform-origin: top center;
  margin-bottom: calc(656px * (var(--k, 1) - 1));
}
.phone {
  position: relative; width: 296px; height: 640px; border: 8px solid var(--surface2); border-radius: 48px; box-sizing: content-box;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(205, 186, 255, .3), 0 30px 70px rgba(0, 0, 0, .55), 0 0 70px -10px rgba(150, 118, 255, .4);
}
.phone--hero { box-shadow: 0 0 0 1px rgba(205, 186, 255, .3), 0 40px 90px rgba(0, 0, 0, .6), 0 0 80px -10px rgba(150, 118, 255, .45); }
.phone-screen { width: 390px; height: 844px; transform: scale(.759); transform-origin: 0 0; pointer-events: none; }

/* Manifesto */
.manifesto { padding-block: 40px; }
.manifesto > div { border-top: 1px solid var(--line2); padding-top: 26px; }
.manifesto p { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; text-wrap: balance; max-width: 920px; }

/* Duas lentes: os dois cartões ficam embaixo do mapa dos temperamentos, na largura toda da seção. */
.section { padding-block: 64px; }
.lenses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.map-section .lenses { grid-column: 1 / -1; }
.lens { background: var(--surface); border: 1px solid var(--line); border-radius: 32px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.lens-icon {
  width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.lens--earth .lens-icon { background: var(--earthS); box-shadow: inset 0 0 0 1px rgba(205, 186, 255, .35); }
.lens--water .lens-icon { background: var(--waterS); }
.lens h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; margin-top: 6px; }
.lens p { font-size: 16px; line-height: 1.6; color: var(--ink2); }

/* Mapa dos temperamentos */
.map-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; }
/* O mesmo mapa serve à seção "map" (um ponto, "Você") e ao hero do casal (`.map--pair`, dois pontos): quadrantes, eixos,
   linha tracejada e pontos são classes comuns; só o tamanho e a posição do mapa mudam de um lugar para o outro. */
.map { position: relative; width: 100%; aspect-ratio: 1; }
.map-section .map { justify-self: stretch; }
/* One column (the grid above needs 2 x 420px + the gap): the map keeps a reading size and sits in the middle. */
@media (max-width: 943px) { .map-section .map { max-width: 480px; justify-self: center; } }
/* Two columns: a square as tall as the text beside it (the width follows the stretched height), on the section's left
   edge, so the room left over sits between the map and the text. */
@media (min-width: 944px) { .map-section .map { width: auto; align-self: stretch; justify-self: start; } }
.quads { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; border-radius: 40px; overflow: hidden; }
.quad { padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.quad b { font-size: 15px; font-weight: 700; }
.quad span { font-size: 13px; color: var(--ink2); }
.quad--mel { background: var(--earthS); box-shadow: inset 0 0 0 1px rgba(205, 186, 255, .3); }
.quad--col { background: var(--fireS); align-items: flex-end; }
.quad--fle { background: var(--waterS); justify-content: flex-end; }
.quad--san { background: var(--airS); justify-content: flex-end; align-items: flex-end; }
.axis {
  position: absolute; background: var(--bg); padding: 4px 14px; border-radius: 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); white-space: nowrap;
}
.axis--top { top: -12px; left: 50%; transform: translateX(-50%); }
.axis--bottom { bottom: -12px; left: 50%; transform: translateX(-50%); }
.axis--left, .axis--right { top: 50%; transform: translateY(-50%); padding-inline: 12px; letter-spacing: .1em; }
.axis--left { left: 12px; }
.axis--right { right: 12px; }
.map-line { position: absolute; left: 50%; top: 50%; width: 25%; border-top: 1.5px dashed var(--ink2); transform-origin: 0 0; transform: rotate(156.5deg); }
/* O ponto: um anel (da cor --ring) que pulsa em volta de uma bolinha clara com brilho (tamanho --dot; no casal leva a inicial). */
.map-you {
  --ring: var(--accent); --dot: 18px;
  position: absolute; left: 27%; top: 60%; width: 60px; height: 60px; box-sizing: content-box; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px solid var(--ring); display: flex; align-items: center; justify-content: center;
}
.map-you i {
  width: var(--dot); height: var(--dot); box-sizing: content-box; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg);
  box-shadow: 0 0 14px rgba(245, 240, 255, .8);
  display: flex; align-items: center; justify-content: center; font: normal 700 14px/1 var(--sans); color: var(--btnInk);
}
@keyframes map-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ring) 50%, transparent); }
  to { box-shadow: 0 0 0 28px transparent; }
}
@media (prefers-reduced-motion: no-preference) {
  .map-you { animation: map-pulse 2.4s ease-out infinite; }
  .map-you--b { animation-delay: 1.2s; }
}
.map-you-tag {
  position: absolute; left: calc(27% + 38px); top: calc(60% - 13px); background: var(--btn); color: var(--btnInk);
  font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 14px;
}
/* Dois pontos (hero do casal): cada um com o anel da cor do seu elemento e a inicial na bolinha, unidos por uma linha
   tracejada de A a D (comprimento e ângulo vêm das duas posições, num mapa quadrado). Ficam na metade de baixo (estável),
   abaixo das pílulas Reservado/Expansivo, que ficam no meio das bordas. */
.map--pair { max-width: 420px; }
.map--pair .map-you { --dot: 28px; }
.map-you--a { left: 35%; top: 68%; --ring: var(--water); }
.map-you--b { left: 73%; top: 64%; --ring: var(--air); }
.map--pair .map-line { left: 35%; top: 68%; width: 38.21%; transform: rotate(-6deg); }
.map-copy { display: flex; flex-direction: column; }
.map-copy p { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--ink2); text-wrap: pretty; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.legend > div { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.legend i { width: 12px; height: 12px; border-radius: 6px; flex: none; }
.dot--air { background: var(--air); }
.dot--fire { background: var(--fire); }
.dot--earth { background: var(--earth); box-shadow: 0 0 0 1px rgba(205, 186, 255, .5); }
.dot--water { background: var(--water); }

/* Mensagem das estrelas */
.tip-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 40px; padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: center;
}
.tip-copy { display: flex; flex-direction: column; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1; color: var(--accent); width: 28px; flex: none; }
/* Stretched to the text beside it: from the eyebrow down to the line after the last step. */
.tip {
  background: var(--bg); border: 1px solid var(--line2); border-radius: 32px; padding: 30px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 0 60px -20px rgba(150, 118, 255, .5); align-self: stretch;
}
.tip-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tip-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.tip-label .ico { color: var(--accent); flex: none; }
.tip-badge { display: flex; align-items: center; gap: 6px; background: var(--waterS); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 14px; }
.tip-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--water); }
.tip p { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; }
.chips span { display: inline-block; padding: 7px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chips span:nth-child(1) { background: var(--waterS); }
.chips span:nth-child(2) { background: var(--earthS); }
.chips span:nth-child(3) { background: var(--fireS); }
.tip-note { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--ink3); max-width: 480px; text-wrap: pretty; }

/* Telas do app: texto e lista de um lado, o aparelho do outro (empilhados em colunas estreitas, como no design). */
.screens {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; align-items: center;
  grid-template-areas: 'text phone' 'list phone';
  /* The text starts at the top, level with the device; what the device has beyond the list stays below it. */
  grid-template-rows: auto 1fr;
}
.screens-text { grid-area: text; align-self: end; }
.screens-text h2 { margin-top: 0; max-width: 560px; }
.screens-text h2 em { display: block; }
.screens-text p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink2); max-width: 480px; text-wrap: pretty; }
.screens-list { grid-area: list; align-self: start; margin-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.screens-phone { grid-area: phone; display: flex; justify-content: center; padding: 12px 0 24px; }
.screen-row {
  display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; opacity: .6; transition: opacity .2s;
}
.screen-row[aria-pressed=true] { opacity: 1; }
.row-head { display: flex; align-items: center; gap: 14px; }
.row-dot { width: 12px; height: 12px; border-radius: 6px; flex: none; background: var(--c); }
.screen-row[aria-pressed=true] .row-dot { box-shadow: 0 0 12px var(--c); }
.row-cap { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.15; }
/* A leitura do casal é um trecho, não uma tela inteira: desce a altura da barra de status das outras telas, e o fundo
   das telas completa a altura do celular. */
.screen-fill { min-height: 844px; box-sizing: border-box; padding-top: 48px; background: #110A24; }
.row-desc { display: none; font-size: 15px; line-height: 1.55; color: var(--ink2); padding-left: 26px; }
.screen-row[aria-pressed=true] .row-desc { display: block; }

/* Privacidade */
.privacy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; }
.privacy h2 { grid-column: 1 / -1; margin-bottom: 8px; }
.privacy > div { border-top: 1.5px solid var(--accent); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.privacy b { font-size: 17px; font-weight: 700; }
.privacy span { font-size: 15px; line-height: 1.6; color: var(--ink2); }
/* Planos: o mesmo desenho da privacidade, mas em colunas fixas para o quarto plano (Casal) não ficar sozinho numa linha:
   4 a partir de 1100 px, 2 x 2 a partir de 600 px, 1 abaixo. A nota do presente do anual fecha a seção, na largura toda. */
.plans { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.plans-note { grid-column: 1 / -1; font-size: 15px; line-height: 1.6; color: var(--ink2); }
/* Plus Casal: o selo "Para dois" ao lado do nome e o fio de cima mais grosso. */
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plans .plan--couple { border-top-width: 3px; padding-top: 18.5px; }

/* Casal (Plus Casal): o design Casal Landing. Hero com o mapa dos temperamentos de dois pontos (as mesmas classes do mapa da
   seção "map"), a cena do conflito, os seis ganhos com miniaturas de telas do app, os três passos e o presente. As seções
   depois do hero têm menos respiro entre si que as demais. */
.couple { padding-block: 64px 24px; }
.couple-block { padding-block: 40px; }
.couple-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(36px, 6vw, 96px); align-items: center; }
.couple-copy { display: flex; flex-direction: column; align-items: flex-start; }
.couple-title { max-width: 640px; }
.couple-offer { margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.couple-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.couple-btn {
  height: 56px; padding: 0 28px; border-radius: 28px; background: var(--btn); color: var(--btnInk);
  display: flex; align-items: center; font-size: 16px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgba(201, 180, 255, .7);
}
.couple-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line2); box-shadow: none; padding-inline: 24px; }
.couple-figure { margin: 0; justify-self: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* A pílula do eixo de baixo sai 12 px do mapa: a legenda desce um pouco mais para não encostar nela. */
.couple-figure figcaption { margin-top: 12px; font-size: 14px; color: var(--ink2); }

/* Cena do conflito: um trecho do mapa de conflitos do app, fora do celular. Dois cartões (lado a lado a partir de 700 px) com
   o avatar de cada um nas cores dos pontos do mapa do casal e a frase no estilo da dica; a faixa "Vale observar" embaixo,
   mais discreta. Sem aspas grandes nem foto: é texto do app, não depoimento. */
.scene-title { max-width: 640px; }
.scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .scene { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scene-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 32px; padding: 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.scene-card p { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; text-wrap: pretty; }
.scene-avatar {
  --ring: var(--water);
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ring); display: flex; align-items: center; justify-content: center;
}
.scene-avatar--d { --ring: var(--air); }
.scene-avatar i {
  width: 28px; height: 28px; box-sizing: content-box; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface);
  box-shadow: 0 0 14px rgba(245, 240, 255, .6); display: flex; align-items: center; justify-content: center;
  font: normal 700 14px/1 var(--sans); color: var(--btnInk);
}
.scene-note {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 18px 24px;
  border: 1px dashed var(--line2); border-radius: 24px; font-size: 15px; line-height: 1.55; color: var(--ink2);
}
.scene-note b { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.scene-foot { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink3); }

/* O que o casal ganha: 3 colunas a partir de 1024 px, 2 a partir de 600 px, 1 abaixo. As miniaturas são trechos de
   telas do app (screens/couple-*.html), reduzidos para caber na largura (o app.js define --k) e cortados em 270 px. */
.couple-head .display { max-width: 640px; }
.couple-gains { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 20px; counter-reset: gain; }
@media (min-width: 600px) { .couple-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .couple-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.couple-gain { display: flex; flex-direction: column; gap: 12px; min-width: 0; counter-increment: gain; }
.shot { position: relative; height: 270px; border-radius: 24px; overflow: hidden; background: #110A24; border: 1px solid var(--line); }
.shot::after { content: ''; position: absolute; inset: auto 0 0; height: 64px; pointer-events: none; background: linear-gradient(to bottom, rgba(17, 10, 36, 0), #110A24); }
.shot-screen { position: absolute; left: 50%; top: 0; width: 390px; transform: translateX(-50%) scale(var(--k, .8)); transform-origin: top center; pointer-events: none; }
.couple-gain h3 { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.couple-n::before { content: counter(gain, decimal-leading-zero); font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--accent); }
.couple-gain p { font-size: 15px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }

/* Como funciona: 3 colunas a partir de 700 px, 1 abaixo (nunca um passo sozinho na segunda linha). */
.couple-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line2); }
@media (min-width: 700px) { .couple-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.couple-steps li { padding: 24px 24px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.couple-step-n { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1; color: var(--accent); }
.couple-steps h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; text-wrap: balance; }
.couple-steps p { font-size: 15px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }

/* Presente para os dois: fecha o bloco do casal, no estilo da chamada final, mais baixo e sem o ícone do app. */
.gift {
  background: var(--surface); border: 1px solid var(--line2); border-radius: 40px; padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 72px);
  display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 0 60px -20px rgba(150, 118, 255, .5);
}
.gift h2 { max-width: 640px; }
.gift p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink2); max-width: 520px; text-wrap: pretty; }
.gift .couple-btn { margin-top: 28px; }

/* Perguntas (acordeão): botões com aria-expanded; o painel anima a altura (grid 0fr -> 1fr) e fica invisível quando fechado. */
.faq-section { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 72px); }
.faq-head { flex: 1 1 260px; min-width: 0; }
.faq { flex: 2 1 460px; min-width: 0; border-top: 1px solid var(--line2); align-self: flex-start; }
.faq-item { border-bottom: 1px solid var(--line2); }
.faq-item h3 { font: inherit; }
.faq-q {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 8px 0; border: 0; background: none;
  text-align: left; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink);
}
.faq-q > span:first-child { flex: 1; min-width: 0; text-wrap: pretty; }
.faq-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--line2); color: var(--accent); transition: transform .2s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); }
.faq-icon::before { width: 12px; height: 1.75px; }
.faq-icon::after { width: 1.75px; height: 12px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s .3s; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.faq-a > div { min-height: 0; overflow: hidden; }
.faq-a p { padding: 0 40px 22px 0; font-size: 15px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-icon { transition: none; } }
@media (hover: hover) { .faq-q:hover .faq-icon { background: var(--surface); } }

/* Chamada final */
.cta-section { padding-block: 64px 80px; }
.cta {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line2); border-radius: 48px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 72px) clamp(150px, 16vw, 200px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-planet {
  position: absolute; left: 50%; bottom: -990px; width: 1100px; height: 1100px; margin-left: -550px; border-radius: 50%;
  background: radial-gradient(circle 520px at 40% 0%, #4A3590, #24184E 72%);
  box-shadow: inset 0 2px 0 rgba(235, 222, 255, .75), inset 0 30px 70px rgba(150, 120, 240, .32), 0 -20px 100px rgba(150, 120, 240, .35);
}
.cta > *:not(.cta-planet) { position: relative; }
/* A marca do ícone do app, sem a placa: a camada da frente, transparente sobre o cartão. */
.cta-mark { display: block; width: 96px; height: 96px; }
.cta h2 { font-size: clamp(38px, 5vw, 66px); line-height: 1.04; margin-top: 28px; max-width: 760px; }
.cta p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink2); max-width: 520px; }
/* The cadence follows the line above it, close: one thought, then the buttons. */
.cta .cta-cadence { margin-top: 8px; }
.cta .stores { justify-content: center; margin-top: 32px; }
.cta .store--outline { background: rgba(10, 6, 24, .4); }
.cta .cta-couple { margin-top: 24px; font-size: 15px; }
.cta-couple a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Rodapé */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 28px 40px; font-size: 14px; color: var(--ink2); }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand .logo { width: 18px; height: 27px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--ink2); }

/* Tablet e celular */
@media (max-width: 903px) {
  .screens { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'text' 'list' 'phone'; gap: 0; }
  .screens-phone { margin-top: 56px; }
}
/* Telas muito estreitas (320 a 360 px): o design não cobre; só o que evita estouro. */
@media (max-width: 360px) {
  .legend { grid-template-columns: 1fr; }
  .lang button { min-width: 20px; padding: 0 8px; }
}