/* =============================================================================
   Peregrina — Design System + Page Styles   (Vesper)
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Geist:wght@300;400;500;600&display=swap");

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --pg-canvas:    #FFFFFF;
  --pg-surface:   #FFFFFF;
  --pg-ink-1:     #0A0A0A;
  --pg-ink-2:     #7B7B7B;
  --pg-ink-3:     #BFBFBF;
  --pg-rule:      #EDEDED;
  --pg-rule-deep: #DCDCDC;
  --fg-inverse:   #FFFFFF;

  --phase-menstrual:  #A8392C;
  --phase-follicular: #B07A1D;
  --phase-ovulatory:  #3F6A4A;
  --phase-luteal:     #4B3F87;
  --phase-waiting:    #8F8F8F;

  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body:    "Geist", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-italic:  "Cormorant Garamond", Garamond, "Times New Roman", serif;

  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  --r-none: 0px;
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 999px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pg-canvas);
  color: var(--pg-ink-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: #0A0A0A; color: #fff; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--pg-ink-1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
section { scroll-margin-top: 64px; }
.band { border-top: 1px solid var(--pg-rule); }
.sec-pad { padding-block: 110px; }
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 64ch; }
.sec-head h2 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* ─── Typography helpers ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--pg-ink-2);
}
.eyebrow.center { text-align: center; }
.prose {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--pg-ink-1);
  max-width: 58ch;
}
.prose.muted { color: var(--pg-ink-2); }
.prose + .prose { margin-top: 22px; }
.prose em { font-family: var(--font-italic); font-style: italic; }
.hint {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--pg-ink-3);
}

/* ─── Nav ────────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pg-rule);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 40px;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 24px; height: 24px; display: block; flex: none; }
.brand .mark {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--pg-ink-2);
  transition: color 0.2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--pg-ink-1); }

/* Hamburger toggle */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 38px; height: 38px; padding: 0 8px; margin-right: -8px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 1px; background: var(--pg-ink-1);
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Mobile menu panel */
.mobile-menu {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 49;
  background: var(--pg-canvas); border-top: 1px solid var(--pg-rule);
  padding: 12px 40px 40px; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display); font-weight: 500; font-size: 34px;
  letter-spacing: -0.015em; color: var(--pg-ink-1); padding: 24px 0;
  border-bottom: 1px solid var(--pg-rule);
  display: flex; align-items: baseline; justify-content: space-between;
}
.mobile-menu a .idx {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--pg-ink-3);
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: calc(100vh - 64px); overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-bottom: 1px solid var(--pg-rule);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hero .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30,19,7,0.40) 0%,
    rgba(30,19,7,0.22) 40%,
    rgba(30,19,7,0.30) 70%,
    rgba(30,19,7,0.58) 100%
  );
}
.hero-content { position: relative; padding: 72px 0; }
.hero .shell { width: 44px; height: 44px; margin: 0 auto 34px; display: block; }
.hero .eyebrow.center { color: rgba(255,255,255,0.82); }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(56px, 9vw, 104px); line-height: 0.98; letter-spacing: -0.025em;
  margin: 22px auto 0; max-width: 14ch; color: #fff;
}
.hero .lede {
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  color: rgba(255,255,255,0.92); max-width: 46ch; margin: 32px auto 0;
}
.hero .actions {
  margin-top: 44px; display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.hero .hint { color: rgba(255,255,255,0.78); }

/* ─── App Store button ───────────────────────────────────────────────────── */
.appstore {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--pg-ink-1); color: #fff; padding: 14px 22px 14px 20px;
  border-radius: 0; transition: opacity 0.2s; cursor: pointer;
}
.appstore:hover { opacity: 0.82; }
.appstore svg { width: 22px; height: 22px; flex: none; }
.appstore .as-text { display: flex; flex-direction: column; line-height: 1.1; }
.appstore .as-sm {
  font-family: var(--font-body); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.7; white-space: nowrap;
}
.appstore .as-lg {
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; margin-top: 2px;
}

/* ─── About ──────────────────────────────────────────────────────────────── */
/* (uses sec-head, prose — see Typography helpers) */

/* ─── App section ────────────────────────────────────────────────────────── */
.app-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: center;
}
.feature-list { margin-top: 48px; display: flex; flex-direction: column; }
.feature {
  display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 0;
  border-top: 1px solid var(--pg-rule);
}
.feature:last-child { border-bottom: 1px solid var(--pg-rule); }
.feature .ft {
  font-family: var(--font-display); font-weight: 500; font-size: 21px;
  letter-spacing: -0.01em;
}
.feature .fb {
  font-family: var(--font-body); font-size: 14px; color: var(--pg-ink-2); line-height: 1.6;
}
.app-actions { align-items: flex-start; margin-top: 44px; display: flex; }

/* Phone — single large frame (desktop) */
.phone-single {
  width: 300px; margin: 0 auto; border: 1px solid var(--pg-ink-1);
  border-radius: 34px; padding: 10px; background: #fff;
}
.phone-single .scr {
  border: 1px solid var(--pg-rule); border-radius: 26px; overflow: hidden; background: #fff;
}
.phone-single .scr img { display: block; width: 100%; height: auto; }

/* Phone cluster — fanned three-screen (mobile) */
.phone-cluster {
  display: none; align-items: center; justify-content: center; padding: 24px 0;
}
.mini {
  flex: none; width: 152px; border: 1px solid var(--pg-ink-1);
  border-radius: 28px; padding: 7px; background: #fff;
  box-shadow: 0 22px 48px -20px rgba(10,10,10,0.30); position: relative;
}
.mini .scr {
  border: 1px solid var(--pg-rule); border-radius: 21px; overflow: hidden; background: #fff;
}
.mini .scr img { display: block; width: 100%; height: auto; }
.mini.is-front { z-index: 3; }
.mini.is-left  {
  z-index: 1; transform: translateY(34px) scale(0.86);
  transform-origin: bottom right; margin-right: -44px;
}
.mini.is-right {
  z-index: 1; transform: translateY(34px) scale(0.86);
  transform-origin: bottom left; margin-left: -44px;
}

/* ─── Contact ────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px;
}
.contact-aside .prose { margin-top: 22px; }
.contact-aside a.email { border-bottom: 1px solid var(--pg-ink-1); padding-bottom: 1px; }
form { display: flex; flex-direction: column; gap: 0; }
.field { display: flex; flex-direction: column; border-bottom: 1px solid var(--pg-rule); }
.field label {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--pg-ink-2); padding-top: 22px;
}
.field input, .field textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--pg-ink-1);
  border: none; background: none; outline: none; padding: 10px 0 18px; resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--pg-ink-3); }
.field textarea { min-height: 96px; line-height: 1.6; }
.submit {
  align-self: flex-start; margin-top: 32px;
  background: var(--pg-ink-1); color: #fff; border: none; cursor: pointer;
  padding: 15px 34px; border-radius: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; transition: opacity 0.2s;
}
.submit:hover { opacity: 0.82; }

/* ─── Privacy ────────────────────────────────────────────────────────────── */
.privacy .prose { max-width: 64ch; }
.pp { margin-top: 56px; }
.pp-item {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: 34px 0; border-top: 1px solid var(--pg-rule);
}
.pp-item:last-child { border-bottom: 1px solid var(--pg-rule); }
.pp-item h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 23px;
  letter-spacing: -0.01em; line-height: 1.1;
}
.pp-num {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--pg-ink-3); display: block; margin-bottom: 10px;
}
.pp-item p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.75;
  color: var(--pg-ink-1); margin: 0;
}
.pp-item p + p { margin-top: 14px; }
.pp-item a.email { border-bottom: 1px solid var(--pg-ink-1); padding-bottom: 1px; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--pg-ink-1); padding: 64px 0 80px; }
.foot-inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 32px;
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand .mark { font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.foot-tag {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--pg-ink-2); margin-top: 6px;
}
.foot-links { display: flex; gap: 28px; }
.foot-links a {
  font-family: var(--font-body); font-size: 11px; color: var(--pg-ink-2); letter-spacing: 0.06em;
}
.foot-links a:hover { color: var(--pg-ink-1); }
.colophon {
  font-family: var(--font-body); font-size: 11px; color: var(--pg-ink-3);
  letter-spacing: 0.04em; margin-top: 40px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .app-grid { grid-template-columns: 1fr; gap: 56px; }
  .phone-single { display: none; }
  .phone-cluster { display: flex; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 760px) {
  .pp-item { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
}

@media (max-width: 420px) {
  .mini { width: 128px; }
  .mini.is-left, .mini.is-right { transform: translateY(28px) scale(0.84); }
  .wrap { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
}