/* ============================================================================
   MyAlma — site stylesheet (index, privacy, terms)
   ----------------------------------------------------------------------------
   Palette and typography match the app. Design rule (2026-08-06): nothing
   that looks like a generic SaaS page — atmosphere (gradients, glow, depth),
   serif type for Alma's voice, slow organic motion.

   Layout of this file:
     1. Tokens (colours, sizes)
     2. Base (reset, typography, links)
     3. Atmosphere (glow and star layers)
     4. Header and language switch
     5. Buttons
     6. Sections and headings
     7. Hero and the constellation sky
     8. "How it works" (the three movements)
     9. Grids and cards
    10. Alma (the guide)
    11. Manifesto ("what Alma will never do")
    12. Pricing
    13. Invitation form and store badges
    14. Footer
    15. Legal pages (privacy.html, terms.html)
    16. Animations (keyframes) and reduced-motion
    17. Responsive (every media query, largest to smallest)
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root {
  /* background and text */
  --bg: #17130E;
  --bg-deep: #120F0B;
  --text: #F1E9DA;

  /* brand golds and amber */
  --gold: #C2A04B;
  --gold-light: #E4C879;
  --amber: #BC6B43;

  /* secondary text. `--dim` used to be .42, which gave a 3.6:1 contrast
     ratio on the background (below the 4.5:1 minimum — audit of 2026-09-10);
     raised to .55 */
  --muted: rgba(241, 233, 218, .62);
  --dim: rgba(241, 233, 218, .55);
  --line: rgba(241, 233, 218, .11);

  /* colour of each sky territory (same as the app) */
  --intuition: #E4C879;
  --mediumship: #9FB4CC;
  --energy: #E0925C;
  --healing: #9FC4A0;
  --dreamwalk: #B49BD1;

  /* maximum content width */
  --wrap: 1120px;

  /* height of the sticky header — used as scroll-margin on sections so a
     menu link never leaves the section title hidden behind the header
     (audit 2026-09-10) */
  --header-height: 76px;

  /* font stacks, so the full list is not repeated in every rule */
  --font-sans: 'Mulish', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
}


/* ============================================================================
   2. BASE
   ============================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* iOS Safari ignores overflow-x:hidden on body alone — without it on html the
   page "walks" sideways when something overflows (logo clipped, 2026-08-11) */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

/* Horizontal padding only: a full `padding` shorthand here beat the vertical
   padding of `section` by specificity (class > element) and glued the
   sections together. */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.16;
  text-wrap: balance;
  letter-spacing: -.005em;
}

h2 {
  font-size: 30px;                       /* fallback for browsers without clamp() */
  font-size: clamp(30px, 4.2vw, 46px);
}

h3 {
  font-size: 21px;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
}


/* ============================================================================
   3. ATMOSPHERE — golden glow at the top + two star layers (light parallax)
   ============================================================================ */

/* Only the top gold glow: the two side glows (amber/blue) turned into blotches
   with banding rings on ordinary screens — removed 2026-08-26. */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 40% at 50% 0%, rgba(194, 160, 75, .10), transparent 70%);
}

/* width/height 100% on the SVG: without them some browsers use 300×150 and
   the whole sky fits in the top-left corner (screenshot 2026-08-17). */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.sky.far  { opacity: .55; }
.sky.near { opacity: .8; }

/* A twinkling star. Per-star variables come from JS:
   --d duration, --o delay (negative = starts mid-cycle), --a base opacity. */
.tw {
  animation: twinkle var(--d, 6s) ease-in-out var(--o, 0s) infinite;
}


/* ============================================================================
   4. HEADER AND LANGUAGE SWITCH
   ============================================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(18, 15, 11, .92), rgba(18, 15, 11, .55));
  border-bottom: 1px solid rgba(241, 233, 218, .06);
}

/* NEVER a padding shorthand here: `padding:14px 0` zeroed the horizontal
   padding of .wrap (same class of bug as the .wrap comment) and the logo
   touched the edge on iPhone. */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* the brand "sun": a breathing golden sphere with an expanding ring */
.orb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  flex: none;
}

.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--amber));
  animation: breathe 5.5s ease-in-out infinite;
}

.orb::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(194, 160, 75, .45);
  animation: ripple 5.5s ease-out infinite;
}

/* "MYALMA" wordmark: caps ONLY here, always with wide tracking (decision 2026-08-10) */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .4em;
  font-size: 14px;
}

.wordmark span {
  color: var(--gold);
}

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

.nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s;
}

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

/* EN | PT pill — same order on every page (audit 2026-09-10) */
.lang {
  display: flex;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 3px;
}

.lang button {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 10px;
  border-radius: 30px;
  cursor: pointer;
}

.lang button[aria-pressed="true"] {
  background: rgba(194, 160, 75, .16);
  color: var(--gold-light);
}


/* ============================================================================
   5. BUTTONS
   ============================================================================ */

/* primary button (request invitation): amber→gold gradient with a pulsing glow */
.cta {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(135deg, var(--amber), var(--gold));
  color: #1A130B;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 16px 38px -16px rgba(188, 107, 67, .9);
  transition: transform .25s, box-shadow .25s;
  animation: ctaGlow 4.5s ease-in-out infinite;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px rgba(188, 107, 67, 1);
}

/* visible focus for keyboard users (the outline used to be removed) */
.cta:focus-visible,
.ghost:focus-visible,
.lang button:focus-visible,
.nav a:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* secondary button, outline only */
.ghost {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 40px;
  border: 1px solid rgba(194, 160, 75, .5);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  transition: background .25s;
}

.ghost:hover {
  background: rgba(194, 160, 75, .1);
}


/* ============================================================================
   6. SECTIONS AND HEADINGS
   ============================================================================ */
section {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  padding-bottom: 96px;
  /* a menu link scrolls to the section with the sticky header clear of the title */
  scroll-margin-top: var(--header-height);
}

/* the "and more" section right below the practices sits close to it */
section.tight-top {
  padding-top: 0;
}

/* small uppercase label above titles ("HOW IT WORKS", "ALMA"…) */
.kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

/* opening paragraph, light serif */
.lead {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

.lead.after-title {
  margin-top: 20px;
}

.center {
  text-align: center;
}

.center .lead {
  margin-left: auto;
  margin-right: auto;
}

.sec-head {
  max-width: 640px;
  margin-bottom: 8px;
}

.center .sec-head,
.sec-head.center {
  margin-left: auto;
  margin-right: auto;
}

/* golden divider that fades at both ends */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 160, 75, .35), transparent);
  max-width: var(--wrap);
  margin: 0 auto;
}


/* ============================================================================
   7. HERO AND THE CONSTELLATION SKY
   ============================================================================ */
#hero {
  padding-top: 88px;
  padding-bottom: 40px;
  text-align: center;
}

#hero h1 {
  font-size: 40px;
  font-size: clamp(40px, 6.6vw, 74px);
  margin-bottom: 24px;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}

#hero .lead {
  font-size: 18px;
  font-size: clamp(18px, 2vw, 21px);
  margin: 0 auto 36px;
  max-width: 56ch;
}

/* "iPhone beta · by invitation" pill above the title */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(194, 160, 75, .35);
  border-radius: 30px;
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold-light);
  margin-bottom: 28px;
}

.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--dim);
}

/* The hero sky: "you" in the centre, five territories with stars. The drawing
   itself is generated by JS (landing.js → drawHeaven); this is the aspect
   ratio, the label typography and the animations. */
.heaven {
  position: relative;
  max-width: 980px;
  margin: 56px auto 0;
  aspect-ratio: 980 / 560;
}

.heaven svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* each territory drifts slowly back and forth — variables come from JS */
.heaven .terr {
  animation: drift var(--dd, 16s) ease-in-out var(--do, 0s) infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

/* territory name ("Intuition", "Healing"…) in italic serif */
.heaven .lbl {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  fill: rgba(241, 233, 218, .72);
  letter-spacing: .01em;
}

/* "YOU" under the central sun */
.heaven .you {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .24em;
  fill: rgba(228, 200, 121, .85);
}

.heaven .cap {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: rgba(241, 233, 218, .38);
}

.pulse {
  animation: pulse 3.6s ease-in-out infinite;
}

/* Life of the sky: every SVG piece breathes via transform. `transform-box:
   fill-box` is mandatory — without it the origin is the SVG corner and the
   element "flies away". */
.heaven .mist {
  animation: mistBreathe var(--md, 12s) ease-in-out var(--mo, 0s) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.heaven .web {
  animation: webGlow var(--wd, 10s) ease-in-out var(--wo, 0s) infinite;
}

.heaven .sunc {
  animation: sunBreathe 9s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.heaven .halo {
  animation: haloBreathe 4.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.heaven .ringp {
  animation: ringRipple 4.8s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* caption under the sky */
.heaven-cap {
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--dim);
}

.heaven-cap b {
  font-weight: 600;
  color: rgba(241, 233, 218, .6);
}


/* ============================================================================
   8. "HOW IT WORKS" — the three movements, side by side with dividers
   ============================================================================ */
.moves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--line);
}

.move {
  padding: 34px 34px 10px 0;
  border-right: 1px solid var(--line);
  /* column, so the screen below can be pushed to the bottom — see .move p */
  display: flex;
  flex-direction: column;
}

.move:last-child {
  border-right: none;
}

.move + .move {
  padding-left: 34px;
}

/* the "01", "02", "03" number */
.move .n {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 22px;
}

.move h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.move p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  /* Grows to fill whatever the tallest column leaves over, which lines the three
     screens up on one baseline (2026-09-11). Without it each screen starts right
     under its own paragraph, and the paragraphs are 3, 3 and 5 lines long. */
  flex: 1 0 auto;
}

/* The real screen under each movement (2026-09-11). Captured on an iPhone, with
   the iOS status bar cropped off: on a marketing page it reads as someone's
   phone photo rather than as the product. The three are cropped to the same
   height so the row lines up. */
.move-shot {
  /* fases diferentes por captura (abaixo): três pulsos em uníssono leem como
     LED, não como respiração. */
  animation: shotBreath 7s ease-in-out infinite;
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  /* auto nas laterais: a coluna é mais larga que os 260px da captura (2026-09-11) */
  margin: 28px auto 24px;
  border-radius: 18px;
  /* the app is darker than the page: without an edge the screen bleeds into it */
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgb(0 0 0 / .45);
}

/* A primeira coluna não tem padding à esquerda — o texto dela encosta na margem
   da seção, de propósito. Por isso `margin: auto` a centralizaria 17px à
   esquerda das outras duas (medido em 11/09/2026: desvio -17px contra 0 e -1).
   O empurrão devolve as três capturas ao mesmo ritmo, sem mexer no texto. */
#shot2 { animation-delay: -2.4s; }
#shot3 { animation-delay: -4.7s; }

@media (min-width: 861px) {
  .move:first-child .move-shot {
    position: relative;
    left: 17px;
  }
}

/* Hover das capturas, só onde existe mouse de verdade (2026-09-11). O vocabulário
   é o da casa, não um efeito novo: o card esquenta a borda para o dourado
   (`.card:hover`) e o CTA levanta alguns pixels (`.cta:hover`). Aqui os dois
   juntos, mais lentos — o objeto é grande, e movimento rápido numa página que
   revela seções em 1s soa apressado. O halo cor de brasa é o mesmo tom do CTA:
   a tela "acende", que é o gesto do próprio produto.
   `hover: hover` mantém o iPad e o celular fora: em touch, :hover gruda depois
   do toque e a captura fica levantada até você tocar noutro lugar. */
@media (hover: hover) and (min-width: 861px) {
  .move-shot {
    transition: translate .5s ease, box-shadow .5s ease, border-color .5s ease;
  }

  /* `translate`, e NÃO `transform` (medido em 11/09/2026): estas imagens também
     são `.reveal`, e `.js .reveal.in { transform: none }` tem especificidade
     maior — o levantar simplesmente não acontecia, enquanto a borda e a sombra
     mudavam, o que faz o efeito PARECER funcionando. Separando as propriedades,
     a entrada fica com `transform` e o hover com `translate`, e as duas nunca
     mais brigam. */
  .move-shot:hover {
    /* `animation: none` é obrigatório, não estético: uma animação em curso ganha
       do `:hover` na cascata, e sem isto a borda continuaria respirando e o
       dourado do hover seria ignorado — o mesmo tipo de silêncio que o
       `transform` do `.reveal` causou aqui em 11/09. */
    animation: none;
    translate: 0 -8px;
    border-color: rgba(194, 160, 75, .3);
    box-shadow:
      0 34px 70px rgb(0 0 0 / .55),
      0 0 46px -14px rgba(188, 107, 67, .38);
  }
}



/* ============================================================================
   9. GRIDS AND CARDS
   ============================================================================ */
.grid {
  display: grid;
  gap: 18px;
  margin-top: 48px;
}

.grid.flush-top {
  margin-top: 0;
}

.g3 { grid-template-columns: repeat(3, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }

.card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  background: rgba(241, 233, 218, .02);
  transition: border-color .4s, background .4s;
}

.card:hover {
  border-color: rgba(194, 160, 75, .3);
  background: rgba(241, 233, 218, .035);
}

/* the glyph of each practice (◎ ✶ ◷ ✦ ☾ ☽ ◐) — same as in the app */
.card .glyph {
  font-size: 22px;
  color: var(--gold-light);
  margin-bottom: 16px;
  display: block;
  line-height: 1;
  animation: glyphGlow 6s ease-in-out infinite;
}

/* stagger the glyph glow so they do not all blink together */
.grid .card:nth-child(2n) .glyph { animation-delay: -2s; }
.grid .card:nth-child(3n) .glyph { animation-delay: -4s; }

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

.card p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--muted);
}

/* The meditation is the premium showcase: full row, its own glow, text on
   the left and "facts" on the right. */
.card-hero {
  grid-column: 1 / -1;
  border-color: rgba(228, 200, 121, .28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(228, 200, 121, .09), rgba(241, 233, 218, .02) 60%);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: end;
  padding: 34px 32px;
}

.card-hero h3 {
  font-size: 28px;
}

.card-hero .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-hero .fact {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold-light);
  border: 1px solid rgba(228, 200, 121, .3);
  border-radius: 20px;
  padding: 6px 11px;
}

/* "PREMIUM · FROM DAY ONE" */
.card-hero .prem {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* note under the practices (Apple Health) */
.practices-note {
  text-align: center;
  margin-top: 30px;
  font-size: 15px;
  color: var(--muted);
}


/* ============================================================================
   10. ALMA — the guide: quote on the left, three points on the right
   ============================================================================ */
.alma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.alma h2 {
  margin-bottom: 26px;
}

.alma .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45;
  color: var(--text);
  border-left: 1px solid rgba(194, 160, 75, .5);
  padding-left: 26px;
}

.alma .who {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.alma .points {
  display: grid;
  gap: 26px;
  padding-top: 6px;
}

.alma .pt h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.alma .pt p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}


/* ============================================================================
   11. MANIFESTO — "what Alma will never do"
   ============================================================================ */
.never {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.never ul {
  list-style: none;
  margin: 36px 0 30px;
  display: grid;
  gap: 14px;
}

.never li {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 22px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  color: var(--text);
}

.never .lead {
  font-size: 17px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================================
   12. PRICING — two plans; the annual one is "best" and glows
   ============================================================================ */
.price-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 680px;
  margin: 44px auto 0;
}

.price {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 28px;
  text-align: center;
  position: relative;
}

.price.best {
  border-color: rgba(194, 160, 75, .55);
  background: rgba(194, 160, 75, .05);
  animation: bestGlow 7s ease-in-out infinite;
}

/* "save 44%" tag sitting on the top border */
.price .tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid rgba(194, 160, 75, .55);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-light);
  text-transform: uppercase;
  white-space: nowrap;
}

.price .plan {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.price .amount {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 42px;
  margin: 12px 0 4px;
}

.price .per {
  font-size: 13px;
  color: var(--muted);
}

.price .note {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 12px;
}

.price-foot {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--dim);
}


/* ============================================================================
   13. INVITATION FORM AND STORE BADGES
   ============================================================================ */
form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 480px;
  margin: 34px auto 0;
}

input[type=email] {
  flex: 1;
  min-width: 230px;
  padding: 16px 20px;
  border-radius: 40px;
  border: 1px solid rgba(241, 233, 218, .18);
  background: rgba(241, 233, 218, .05);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
}

input[type=email]:focus {
  outline: none;
  border-color: rgba(194, 160, 75, .6);
}

/* field with an invalid email (class set by JS on submit) */
input[type=email].is-invalid {
  border-color: rgba(224, 146, 92, .8);
}

/* the label exists for screen readers only; the placeholder carries the visual */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-note {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 14px;
  text-align: center;
}

/* form error message — hidden until JS needs it */
.form-error {
  display: none;
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--energy);
}

.form-error.show {
  display: block;
}

/* "Received" message that replaces the form */
.joined {
  display: none;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gold-light);
  margin-top: 26px;
}

.is-joined form,
.is-joined .form-note,
.is-joined .form-error {
  display: none;
}

.is-joined .joined {
  display: block;
}

/* Stores: official badges, unmodified and unlinked until launch (Apple
   guideline: show the badge only when the app is available; never grey it out). */
.stores {
  margin-top: 44px;
  text-align: center;
}

.stores-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The Google PNGs were cropped to their opaque bounds (2026-09-10), so one
   height fits both badges and the visible rectangles match. */
.badge-store {
  height: 40px;
  width: auto;
  display: block;
  opacity: .92;
  cursor: pointer;
}

/* the note only appears when someone taps a badge (2026-08-17) and fades on its own */
.stores-note {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  min-height: 1.4em;
}

.stores-note.show {
  opacity: 1;
  transform: none;
}


/* ============================================================================
   14. FOOTER — identical on all three pages
   ============================================================================ */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(241, 233, 218, .07);
  padding: 44px 0 40px;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.foot-brand .orb {
  width: 20px;
  height: 20px;
}

.foot-brand .wordmark {
  font-size: 11.5px;
}

footer .tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--dim);
}

footer .links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 2px;
}

footer a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s;
}

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

/* legal line: copyright on the left, trademarks on the right */
footer .legal {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(241, 233, 218, .06);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(241, 233, 218, .45);
}

footer .legal > span {
  display: block;
}


/* ============================================================================
   15. LEGAL PAGES (privacy.html, terms.html) — narrow reading column
   ============================================================================ */
.legal-page .wrap {
  max-width: 760px;
}

/* header and footer keep the normal site width */
.legal-page header .wrap,
.legal-page footer .wrap {
  max-width: var(--wrap);
}

.legal-page main {
  position: relative;
  z-index: 1;
  padding: 64px 0 80px;
}

.legal-page h1 {
  font-size: 34px;
  font-size: clamp(34px, 5vw, 50px);
  margin-bottom: 10px;
}

.legal-page h2 {
  font-size: 22px;
  margin: 40px 0 12px;
}

.legal-page p,
.legal-page li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 14px;
}

.legal-page b {
  color: var(--text);
  font-weight: 600;
}

.legal-page ul {
  padding-left: 20px;
}

.legal-page li {
  margin-bottom: 6px;
}

.legal-page main a {
  color: var(--gold-light);
}

.legal-page .kicker {
  margin-bottom: 16px;
}

.legal-page .updated {
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 36px;
}

.legal-page .lead {
  font-size: 19px;
  margin-bottom: 8px;
}

/* each language lives in its own block; JS switches the chosen one on (legal.js) */
[lang-block] {
  display: none;
}

[lang-block].on {
  display: block;
}


/* ============================================================================
   16. ANIMATIONS AND REDUCED MOTION
   ============================================================================ */

/* Reveal on scroll: only with live JS (the .js class on <html> enables the
   hide-and-show; without JS everything stays visible). */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease, transform 1s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

@keyframes twinkle {
  0%, 100% { opacity: var(--a, .4); }
  50%      { opacity: calc(var(--a, .4) * .25); }
}

@keyframes breathe {
  0%, 100% { transform: scale(.94); opacity: .9; }
  50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

@keyframes ripple {
  0%        { transform: scale(1); opacity: .9; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 16px 38px -16px rgba(188, 107, 67, .85); }
  50%      { box-shadow: 0 18px 46px -14px rgba(188, 107, 67, 1), 0 0 28px rgba(228, 200, 121, .3); }
}

/* As capturas respiram em dourado (2026-09-11). Amplitude baixa e ciclo longo:
   a borda sai de .11 branco e chega a .34 dourado, e o halo cor de brasa vai a
   zero nos extremos — de perto é brilho, de longe é a página viva, não um
   elemento piscando. Mesmo cofre de cores do `ctaGlow`. */
@keyframes shotBreath {
  0%, 100% {
    border-color: rgba(241, 233, 218, .11);
    box-shadow: 0 24px 60px rgb(0 0 0 / .45);
  }
  50% {
    border-color: rgba(194, 160, 75, .34);
    box-shadow:
      0 24px 60px rgb(0 0 0 / .45),
      0 0 34px -10px rgba(228, 200, 121, .28);
  }
}

@keyframes glyphGlow {
  0%, 100% { opacity: .7; text-shadow: none; }
  50%      { opacity: 1; text-shadow: 0 0 14px rgba(228, 200, 121, .55); }
}

/* the mist pulses in brightness like the star: --ma is its base opacity (from JS) */
@keyframes mistBreathe {
  0%, 100% { transform: scale(1); opacity: calc(var(--ma, .1) * .7); }
  50%      { transform: scale(1.1); opacity: calc(var(--ma, .1) * 1.25); }
}

@keyframes webGlow {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

@keyframes sunBreathe {
  0%, 100% { transform: scale(.95); opacity: .85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

@keyframes haloBreathe {
  0%, 100% { transform: scale(.85); opacity: .12; }
  50%      { transform: scale(1.3); opacity: .3; }
}

@keyframes ringRipple {
  0%   { transform: scale(.55); opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes bestGlow {
  0%, 100% { border-color: rgba(194, 160, 75, .45); }
  50%      { border-color: rgba(228, 200, 121, .8); box-shadow: 0 0 30px -8px rgba(194, 160, 75, .4); }
}

@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 3px), var(--dy, -2px)); }
}

/* whoever asked the OS for less motion gets a still page, everything visible */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================================
   17. RESPONSIVE — largest to smallest
   ============================================================================ */

/* ≤ 1000px: a 5-column grid becomes 3 */
@media (max-width: 1000px) {
  .g5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ≤ 860px: tablet. Columns drop to 2 (or 1 for the movements and Alma). */
@media (max-width: 860px) {
  .moves {
    grid-template-columns: 1fr;
  }

  .move {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 30px 0 26px;
  }

  /* uma coluna só: o padding volta a ser simétrico, então `margin: auto`
     centraliza sozinho — a compensação de 17px acima fica fora deste ponto. */
  .move + .move {
    padding-left: 0;
  }

  .move:last-child {
    border-bottom: none;
  }

  /* Empilhado. O teto era 200px para a página não virar três capturas de altura
     inteira — mas 200 de 334 disponíveis deixava a tela do app pequena demais
     para se ler (Rodrigo, no iPhone, 11/09/2026). 88% da coluna com teto de
     340px enche o espaço e ainda cabe inteira na tela: a 390px dá 294x568 num
     viewport de 844. Custo medido: a página passa de 9531 para 10078px, +5,7%.
     O teto em px é o que segura o tablet, onde a coluna tem 712px e `100%`
     produziria uma captura de 1379px de altura. */
  .move-shot {
    max-width: min(340px, 88%);
    margin: 22px auto 4px;
  }

  .g3,
  .g5 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* the three short cards (voice, Codex, Portals) fit in 3 columns on a
     tablet — with 2 columns the third one sat orphaned on its own row
     (audit 2026-09-10) */
  .g3.keep-three {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .alma {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ≤ 720px: menu links disappear (the footer has all of them) */
@media (max-width: 720px) {
  .nav .hide-sm {
    display: none;
  }
}

/* ≤ 640px: the three short cards stack */
@media (max-width: 640px) {
  .g3.keep-three {
    grid-template-columns: 1fr;
  }
}

/* ≤ 560px: phone */
@media (max-width: 560px) {
  /* sections closer together — with 96px above and below, the phone showed
     ~200px holes between one section and the next (audit 2026-09-10) */
  section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  #hero {
    padding-top: 64px;
  }

  .g3,
  .g5 {
    grid-template-columns: 1fr;
  }

  .price-wrap {
    grid-template-columns: 1fr;
  }

  /* On the phone the sky becomes almost square (620×640 viewBox, redrawn by
     JS) — in the wide ratio it was 214px tall with 5px labels. The sizes
     below are in viewBox space: at 320px wide the SVG shrinks to ~52%, so
     26px renders at ~13px on screen. */
  .heaven {
    aspect-ratio: 620 / 640;
    margin-top: 40px;
  }

  .heaven .lbl {
    font-size: 26px;
  }

  .heaven .you {
    font-size: 17px;
  }

  /* "PREMIUM · DESDE O PRIMEIRO DIA" wrapped leaving "DIA" alone on a line */
  .card-hero .prem {
    letter-spacing: .14em;
  }
}

/* ≤ 520px: logo + EN/PT + CTA do not fit together; the header CTA goes
   (the hero has the same, much larger, CTA right below) */
@media (max-width: 520px) {
  .nav .ghost {
    display: none;
  }
}