/* ── vybe.css ─────────────────────────────────────────────────────────────
   One stylesheet for every page on myvybe.app. It is the app's own look
   (Vybe/design/sky-style.md): a full-bleed gradient sky, a frosted band for
   the chrome, content on paper, screenshots as prints with a white border,
   one pink pill.

   Three rules that were measured, not guessed:

   1. TEXT ON THE SKY IS --on-sky, NEVER --muted OR --faint. The app's muted
      and faint inks were drawn to sit on white paper. On a coloured sky they
      land at 3.0:1 and 1.4:1, which fails WCAG AA outright. --on-sky is
      5.1:1 on the darkest sky here and 10.2:1 on paper.
   2. --faint IS NOT A TEXT COLOUR anywhere. It is 2.75:1 even on white. It
      paints dots, rules and disabled marks only.
   3. THE PILL'S PINK IS A SHADE DEEPER THAN THE APP'S. White on the app's
      #F0357F is 3.8:1. #C4155C is 5.8:1. Same pink family, legible label.

   The sky does not move. An earlier draft changed it while you scrolled,
   which fought the reading and made a page that also carries legal copy feel
   like a demo. Each page picks one sky and holds it.                       */

:root {
  /* the door's peach: the default sky, overridden per page */
  --sky-a: #FFD9C2;
  --sky-b: #F7C4CF;
  --sky-c: #FBE6E6;

  --ink: #3A2430;
  --on-sky: #523A46;
  --muted: #7A5A66;
  --faint: #B0959E;

  --paper: rgba(255,255,255,0.94);
  --paper-edge: rgba(255,255,255,1);
  --band: rgba(255,255,255,0.7);
  --band-edge: rgba(255,255,255,0.9);
  --glass: rgba(255,255,255,0.4);
  --glass-edge: rgba(255,255,255,0.8);
  --frame: rgba(255,255,255,0.94);
  --shadow: rgba(60,60,110,0.18);
  --shadow-deep: rgba(60,60,110,0.28);
  --top-light: rgba(255,255,255,0.3);
  --rule: rgba(58,36,48,0.14);

  --pink: #E02171;
  --pink-deep: #C4155C;
  --pink-ink: #C4155C;
  --hand: #3A2430;

  --max: 1060px;
  --gutter: 20px;
}

/* Night: the app's night sky, the top near black and the colour rising to a
   lit horizon. Every token flips as a set so nothing is left on the wrong
   ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-a: #16111c;
    --sky-b: #3d1329;
    --sky-c: #8f2a52;
    --ink: #F6F1FB;
    --on-sky: #EFE6F5;
    --muted: #CFC0DE;
    --faint: #9384A8;
    --paper: rgba(22,16,34,0.88);
    --paper-edge: rgba(255,255,255,0.12);
    --band: rgba(22,16,34,0.78);
    --band-edge: rgba(255,255,255,0.16);
    --glass: rgba(255,255,255,0.13);
    --glass-edge: rgba(255,255,255,0.3);
    --shadow: rgba(0,0,0,0.5);
    --shadow-deep: rgba(0,0,0,0.62);
    --top-light: rgba(255,255,255,0.05);
    --rule: rgba(255,255,255,0.14);
    --pink: #FF4D9D;
    --pink-deep: #F0357F;
    --pink-ink: #FF8AC2;
    --hand: #EBA7D4;
  }
}
:root[data-theme="dark"] {
  --sky-a: #16111c;
  --sky-b: #3d1329;
  --sky-c: #8f2a52;
  --ink: #F6F1FB;
  --on-sky: #EFE6F5;
  --muted: #CFC0DE;
  --faint: #9384A8;
  --paper: rgba(22,16,34,0.88);
  --paper-edge: rgba(255,255,255,0.12);
  --band: rgba(22,16,34,0.78);
  --band-edge: rgba(255,255,255,0.16);
  --glass: rgba(255,255,255,0.13);
  --glass-edge: rgba(255,255,255,0.3);
  --shadow: rgba(0,0,0,0.5);
  --shadow-deep: rgba(0,0,0,0.62);
  --top-light: rgba(255,255,255,0.05);
  --rule: rgba(255,255,255,0.14);
  --pink: #FF4D9D;
  --pink-deep: #F0357F;
  --pink-ink: #FF8AC2;
  --hand: #EBA7D4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sky-b);
  color: var(--ink);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
#sky {
  position: fixed; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, var(--top-light) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(168deg, var(--sky-a) 0%, var(--sky-b) 54%, var(--sky-c) 100%);
}

h1, h2, h3 { font-family: 'Gabarito', Georgia, serif; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.6vw, 56px); line-height: 1.04; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(26px, 3.8vw, 36px); line-height: 1.1; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.25; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink); padding: 12px 18px; border-radius: 0 0 14px 0;
  font-weight: 600; z-index: 60; text-decoration: none;
}
.skip:focus { left: 0; }

/* sections clear the sticky band when an anchor jumps to them */
section, [id] { scroll-margin-top: 104px; }

/* ── the frosted band ───────────────────────────────────────────────── */
.band {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  margin: 14px auto 0; max-width: calc(var(--max) - 8px);
  background: var(--band); border: 1px solid var(--band-edge);
  border-radius: 26px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 8px 22px var(--shadow);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 20px;
}
.mark {
  font-family: 'Gabarito', serif; font-weight: 700; font-size: 22px;
  color: var(--ink); text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; gap: 9px;
}
/* the app's own mark, so the tab, the band and the phone all agree */
.mark img { display: block; border-radius: 9px; box-shadow: 0 2px 8px var(--shadow); }
.band-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.band-nav a.nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 12px; border-radius: 22px;
  color: var(--on-sky); text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.band-nav a.nav-link:hover { background: var(--glass); color: var(--ink); }

/* the menu is a details element, so it needs no script to work */
.menu { position: relative; display: none; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--glass-edge);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; }
.menu > summary span::before, .menu > summary span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px; border-radius: 2px; background: var(--ink);
}
.menu > summary span::before { top: -6px; }
.menu > summary span::after { top: 6px; }
.menu-sheet {
  position: absolute; right: 0; top: 54px; min-width: 214px;
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 20px;
  box-shadow: 0 16px 36px var(--shadow-deep);
  padding: 8px; display: flex; flex-direction: column;
}
.menu-sheet a {
  min-height: 46px; display: flex; align-items: center; padding-inline: 14px;
  border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
}
.menu-sheet a:hover { background: rgba(128,96,112,0.1); }
@media (max-width: 800px) {
  .band-nav a.nav-link { display: none; }
  .menu { display: block; }
}

/* ── buttons ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding-inline: 22px; border-radius: 23px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  color: #FFFFFF; font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: 0 8px 20px rgba(196,21,92,0.3);
  border: 0; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.pill.lg { min-height: 54px; padding-inline: 30px; font-size: 16.5px; border-radius: 27px; }
.pill:hover { box-shadow: 0 10px 26px rgba(196,21,92,0.42); }
.quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding-inline: 20px; border-radius: 23px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.quiet:hover { background: var(--paper); }

/* the store badges: replace these with the official Apple and Google art
   before launch. Both stores supply it and both require their own. */
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 56px; padding: 8px 20px 8px 17px; border-radius: 15px;
  background: var(--ink); color: #FFFFFF; text-decoration: none;
  border: 1px solid var(--ink);
}
.store:hover { opacity: 0.88; }
.store svg { flex: none; }
/* only the SMALL line is the small line: styling every span in the badge
   dimmed the whole thing and uppercased the store's name */
.store .s { display: block; }
.store .s b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.15; font-family: 'Gabarito', serif; }
.store .s > span { display: block; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.8; }

/* ── type roles ─────────────────────────────────────────────────────── */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-sky); }
.lede { font-size: 16.5px; line-height: 1.55; color: var(--on-sky); max-width: 60ch; }
.note-line { font-size: 13.5px; line-height: 1.5; color: var(--on-sky); max-width: 60ch; }
.paper .lede, .paper .note-line, .paper p { color: var(--muted); }
.paper .eyebrow { color: var(--muted); }
.hand { font-family: 'Caveat', cursive; font-weight: 600; color: var(--hand); }

/* ── surfaces ───────────────────────────────────────────────────────── */
.paper {
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: 22px; padding: 26px;
  box-shadow: 0 14px 30px var(--shadow);
}
.paper h2, .paper h3 { color: var(--ink); }
.shot {
  display: block; width: 100%; height: auto; aspect-ratio: 722 / 1568;
  border: 5px solid var(--frame); border-radius: 26px;
  box-shadow: 0 22px 44px var(--shadow-deep);
  background: var(--paper);
}
.lean-l { transform: rotate(-2.2deg); }
.lean-r { transform: rotate(2deg); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.chip .dot { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.rail { display: flex; flex-wrap: wrap; gap: 9px; }

/* ── layout ─────────────────────────────────────────────────────────── */
section { padding-block: 64px; }
.stack { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split.art-first > .art { order: -1; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.art { position: relative; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

@media (max-width: 880px) {
  section { padding-block: 48px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split > .art, .split.art-first > .art { order: 2; }
  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  /* two phone shots side by side at phone width are 170px each, which is
     unreadable: they stack */
  .pair { grid-template-columns: 1fr; gap: 26px; max-width: 320px; margin-inline: auto; }
  .split .art .shot { max-width: 320px; margin-inline: auto; }
}

/* ── steps: the only numbered thing on the site, because it is the only
   thing that is actually a sequence ─────────────────────────────────── */
.step { display: flex; flex-direction: column; gap: 9px; }
.step .num {
  width: 34px; height: 34px; border-radius: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  font-family: 'Gabarito', serif; font-weight: 700; font-size: 16px;
}
/* the base rule resolves in both themes on its own: --paper is white in
   light and near-black in dark, which is the contrast the --ink circle
   wants either way. */

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: 18px; padding: 4px 20px;
  box-shadow: 0 10px 22px var(--shadow);
}
.faq summary {
  cursor: pointer; list-style: none;
  min-height: 56px; display: flex; align-items: center; gap: 12px;
  font-family: 'Gabarito', serif; font-weight: 600; font-size: 17px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; font-size: 22px; line-height: 1; color: var(--muted); font-weight: 400;
}
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--muted); font-size: 15px; line-height: 1.55; padding-bottom: 18px; max-width: 62ch; }

/* ── long-form legal pages ──────────────────────────────────────────── */
.doc { max-width: 720px; }
.doc h2 { margin-top: 8px; }
.doc h3 { margin-top: 4px; }
.doc p, .doc li { color: var(--muted); font-size: 15.5px; line-height: 1.62; }
.doc ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc .block { display: flex; flex-direction: column; gap: 14px; }
.doc a { color: var(--pink-ink); font-weight: 600; }
.mailto {
  display: inline-flex; align-items: center; min-height: 46px; padding-inline: 18px;
  border-radius: 14px; background: rgba(128,96,112,0.1);
  font-family: 'Gabarito', serif; font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none; word-break: break-all;
}
.mailto:hover { background: rgba(128,96,112,0.18); }

/* ── forms ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255,255,255,0.7); border: 1px solid var(--rule);
  border-radius: 14px; padding: 13px 15px; min-height: 48px; width: 100%;
}
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea { background: rgba(255,255,255,0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .field textarea { background: rgba(255,255,255,0.08); }
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

/* ── footer: every page carries the legal set ───────────────────────── */
footer { border-top: 1px solid var(--rule); margin-top: 24px; padding-block: 30px 44px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px;
  border-radius: 12px; color: var(--on-sky); text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.foot-links a:hover { background: var(--glass); color: var(--ink); }
.foot-legal { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--on-sky); }
.foot-legal a { color: var(--on-sky); }