/* =============================================================================
   StarKeeper marketing site — shared stylesheet.

   Palette and type mirror the app's DAYLIGHT skin (src/styles/tokens/) so the
   site and the product read as one thing. The values are COPIED here on
   purpose rather than imported: this site is a separate Vercel project with no
   dependency on the app's build, and the app's lint:tokens purity gate has no
   business scanning marketing markup.

   If Daylight's palette ever changes in the app, update it here by hand.
   ========================================================================== */

:root {
  /* --- ground & surfaces (Daylight) --- */
  --bg:            #FDF7EF;
  --bg-2:          #FBF2EE;
  --surface:       #FFFFFF;
  --surface-warm:  #FCF8F3;

  /* --- ink --- */
  --ink:           #2E2823;
  --ink-2:         #4A423B;
  --muted:         #9A8F84;
  --on-solid:      #FFFFFF;

  /* --- lines --- */
  --line:          rgba(46, 40, 35, .09);
  --line-soft:     rgba(46, 40, 35, .055);

  /* --- semantic roles --- */
  --accent:        oklch(0.64 0.16 28);
  --accent-text:   oklch(0.48 0.14 28);
  --accent-tint:   oklch(0.94 0.05 28);

  --points:        oklch(0.55 0.13 75);
  --points-text:   oklch(0.48 0.12 75);
  --points-tint:   oklch(0.95 0.05 75);
  --points-border: oklch(0.90 0.07 75);

  --success:       oklch(0.55 0.14 158);
  --success-text:  oklch(0.48 0.12 158);
  --success-tint:  oklch(0.96 0.04 158);

  --time:          oklch(0.62 0.13 268);
  --time-text:     oklch(0.45 0.12 268);
  --time-tint:     oklch(0.95 0.04 268);

  /* --- shape --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(46, 40, 35, .05);
  --shadow-md: 0 4px 16px rgba(46, 40, 35, .07);
  --shadow-lg: 0 12px 40px rgba(46, 40, 35, .10);

  /* --- type --- */
  --font-display: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1080px;
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--time);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 88px; }
.section--tight { padding-block: 56px; }

@media (max-width: 720px) {
  .section { padding-block: 60px; }
  .wrap { padding-inline: 20px; }
}

/* ----------------------------------------------------------------- type -- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h3 { font-size: 1.18rem; }

p { margin: 0; }

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  color: var(--ink-2);
  line-height: 1.6;
}

.overline {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.muted { color: var(--muted); }
.small { font-size: .92rem; }

.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.stack-l { display: flex; flex-direction: column; gap: 28px; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 247, 239, .82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark { font-size: 1.32rem; line-height: 1; }
.brand__logo { height: 30px; width: auto; display: block; }
.site-footer .brand__logo { height: 26px; }
@media (max-width: 620px) { .brand__logo { height: 26px; } }

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* A nav label must never break mid-phrase. The header is a single flex row, so
   without this a long label wraps inside its own pill AND squeezes a neighbour
   into wrapping too — at 621px (just above the nav__hide-sm breakpoint)
   Spanish "Descargar apps beta" broke in half and took "Cómo funciona" with
   it. Translation is what surfaces this: the English label fits where the
   Spanish one does not. With nowrap + flex-wrap, whole items move to a second
   row instead, which costs header height only in that narrow band. */
.nav a { white-space: nowrap; }

.nav a:not(.btn) {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 9px 12px;
  border-radius: var(--r-sm);
}

.nav a:not(.btn):hover { background: var(--surface-warm); color: var(--ink); }

@media (max-width: 620px) {
  .nav a.nav__hide-sm { display: none; }
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--on-solid);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { background: var(--surface-warm); }

.btn--sm { min-height: 42px; padding: 0 18px; font-size: .95rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ----------------------------------------------------------------- hero -- */

.hero { padding-block: 76px 40px; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero__copy { display: flex; flex-direction: column; gap: 22px; }

.hero__note {
  font-size: .9rem;
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--points-tint);
  border: 1px solid var(--points-border);
  color: var(--points-text);
  font-size: .85rem;
  font-weight: 700;
}

/* ------------------------------------------------------------ phone frame -- */

.phone {
  --bezel: 11px;
  width: 100%;
  max-width: 310px;
  margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  background: var(--ink);
  border-radius: 42px;
  padding: var(--bezel);
  box-shadow: var(--shadow-lg);
}

.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Placeholder shown until a real screenshot is dropped in. */
.shot-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  background:
    repeating-linear-gradient(
      45deg,
      var(--surface-warm) 0 12px,
      var(--surface) 12px 24px
    );
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.shot-placeholder__mark { font-size: 1.8rem; }

.phone-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.phone-row .phone { max-width: 260px; }

@media (max-width: 860px) {
  .phone-row { grid-template-columns: 1fr; gap: 44px; }
}

.shot-caption {
  margin-top: 16px;
  text-align: center;
}

/* ---------------------------------------------------------------- cards -- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.feature__icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}

/* --------------------------------------------------------------- steps -- */

.steps {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  counter-reset: step;
}

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Steps with a call to action (beta.html): pin the button to the card's
   bottom edge so a shorter card's CTA lines up with its neighbour's. */
.steps--cta .step { display: flex; flex-direction: column; }
.steps--cta .step .btn { margin-top: auto; align-self: flex-start; }
.steps--cta .step p { margin-bottom: 20px; }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------- band -- */

.band {
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
}

.band--warm { background: var(--surface-warm); }

/* --------------------------------------------------------------- prose -- */

/* beta / privacy / support put `prose` on the SAME element as `wrap`, so the
   720px measure replaced the 1080px container and `margin-inline: auto` then
   centred it — leaving the body starting ~156px right of the logo at 1440px,
   because two differently-sized centred boxes cannot line up. index.html uses
   a bare `wrap`, which is why only that page aligned.

   The container now matches the header, so the left edge meets the logo, and
   the reading measure applies to running TEXT only. Cards and step grids take
   the full width, which is what they were always drawn for. */
.prose { max-width: 720px; }

.wrap.prose { max-width: var(--wrap); }
.wrap.prose > h1,
.wrap.prose > h2,
.wrap.prose > h3,
.wrap.prose > p,
.wrap.prose > ul,
.wrap.prose > ol,
.wrap.prose > blockquote { max-width: 720px; }

.prose h2 { margin-top: 44px; margin-bottom: 14px; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 28px; margin-bottom: 8px; }

.prose p, .prose ul, .prose ol { margin-bottom: 16px; }

.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.prose__meta {
  color: var(--muted);
  font-size: .92rem;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

/* A visible marker for text the author must still confirm before publishing. */
.todo {
  display: block;
  background: var(--points-tint);
  border: 1px dashed var(--points-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  color: var(--points-text);
  font-size: .9rem;
}

.todo strong { font-weight: 800; }

/* -------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-warm);
  padding-block: 44px;
  margin-top: 24px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.footer-links a:hover { text-decoration: underline; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--surface);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}