/* ──────────────────────────────────────────────────────────────────────────
   Nightcap website styles — built on tokens.css.
   ────────────────────────────────────────────────────────────────────────── */

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;600&display=swap");
@import url("tokens.css");

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

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

html {
  scroll-behavior: smooth;
  font-feature-settings: var(--font-feature-tabular);
}

body {
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-lift);
}
a:hover { color: var(--color-text-primary); }

img, svg { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

/* ── Layout containers ────────────────────────────────────────────────── */

.shell {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.shell--reading {
  max-width: var(--reading-max-width);
}

section {
  padding-block: var(--space-3xl);
}

@media (max-width: 640px) {
  section { padding-block: var(--space-2xl); }
  .shell { padding-inline: var(--space-md); }
}

/* ── Header / nav ─────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--color-surface-0) 80%, transparent);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-family-display);
  font-weight: var(--weight-semibold);
  font-size: var(--type-title);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-title);
}
.nav__brand svg,
.nav__brand img { width: 32px; height: 32px; color: var(--color-primary); }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}
.nav__links a {
  color: var(--color-text-secondary);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--color-text-primary);
}

@media (max-width: 540px) {
  .nav__links { gap: var(--space-sm); }
  .nav__links a { font-size: 12px; }
}

/* ── Typography ───────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-family-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
}
h1 { font-size: var(--type-display-xl); }
h2 { font-size: var(--type-display-lg); letter-spacing: var(--tracking-title); line-height: var(--leading-title); }
h3 { font-size: var(--type-display);    letter-spacing: var(--tracking-title); line-height: var(--leading-title); }
h4 {
  font-family: var(--font-family-display);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title);
  color: var(--color-text-primary);
}

p { color: var(--color-text-secondary); }
p + p { margin-top: var(--space-md); }
ul, ol { color: var(--color-text-secondary); padding-left: 1.25rem; }
li + li { margin-top: var(--space-2xs); }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-family-display);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* Centred section-intro block: eyebrow + h2 + lede paragraph, centred and
   constrained to a comfortable line-length. Use for grid/gallery sections
   that don't have a side illustration. */
.section-intro {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}
.section-intro h2 { margin-inline: auto; }
.section-intro p  { margin-inline: auto; }

/* Centre a chip-list in its container. */
.chip-list--centered { justify-content: center; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3xl) var(--space-2xl);
  background:
    radial-gradient(ellipse at 18% -10%, var(--color-primary-soft) 0%, transparent 50%),
    radial-gradient(ellipse at 95% 90%, var(--color-accent-soft) 0%, transparent 55%);
}
/* Glow blob behind the phone mockup. */
.hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Even split so the dual-phone composition gets as much room as the
     text. Previously 1.2fr 0.8fr caged the image in the smaller column. */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero::after { display: none; }
}
.hero__text { display: grid; gap: var(--space-md); }
.hero__logo {
  width: 128px;
  height: 128px;
  /* small upward nudge to balance optical weight of the h1 below */
  margin-bottom: calc(var(--space-xs) * -1);
}
@media (max-width: 880px) {
  .hero__logo { width: 96px; height: 96px; }
}
.hero h1 {
  max-width: 16ch;
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-primary) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  max-width: 52ch;
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  color: var(--color-text-secondary);
}
.hero__lede strong { color: var(--color-text-primary); }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Phone mockup wrapper — floats with a subtle tilt + glow. */
.hero__mockup {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
}
.hero__mockup img {
  width: 100%;
  /* header.png is a dual-phone marketing composition ~2:2 in aspect.
     Generous cap so the composition becomes the visual anchor of the
     hero — paired with the 1fr/1fr column split above. */
  max-width: 620px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 80px rgba(122, 162, 255, 0.15));
  /* No rotation — the composition already has its own perspective tilt;
     stacking a CSS rotate(-3deg) on top of it looks "drunk." Hover only
     lifts the image vertically now. */
  transition: transform var(--motion-medium) var(--ease-lift);
}
.hero__mockup img:hover {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .hero__mockup img { transition: none; }
  .hero__mockup img:hover { transform: none; }
}

/* ── Impact stat block ────────────────────────────────────────────────── */

.impact {
  padding-block: var(--space-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-1);
  border-block: 1px solid var(--color-border-subtle);
}
.impact__eyebrow {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.impact__numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-lg);
}
.impact__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.impact__num strong {
  font-family: var(--font-family-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: var(--font-feature-tabular);
}
.impact__num span {
  font-family: var(--font-family-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.impact__caption {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--color-text-secondary);
}

/* ── Gallery (See it in action) ───────────────────────────────────────── */

.gallery {
  padding-block: var(--space-3xl);
  background:
    radial-gradient(ellipse at 50% 0%, var(--color-primary-soft) 0%, transparent 50%);
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  align-items: end;
}
@media (max-width: 880px) {
  .gallery__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.gallery__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.gallery__item img {
  width: 100%;
  max-width: 220px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
  transition: transform var(--motion-medium) var(--ease-lift);
}
.gallery__item:hover img {
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item img,
  .gallery__item:hover img { transition: none; transform: none; }
}
.gallery__caption {
  text-align: center;
  font-family: var(--font-family-display);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--type-body);
}
.gallery__sub {
  text-align: center;
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}
/* Center mockup slightly taller — feels like the "primary" view */
.gallery__item--center img {
  max-width: 240px;
  filter:
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 60px rgba(240, 178, 122, 0.18));
}

/* ── Scene layouts (illustrations + text) ─────────────────────────────
   .split            : two-column layout, text + atmospheric scene image.
   .split--reverse   : image on the LEFT instead of the right.
   Scene images are SVG placeholders — see website/README.md for the
   one-line swap path to a real photograph. */

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}
.split__text { min-width: 0; }
.split__text > * + * { margin-top: var(--space-md); }
.split__text p { max-width: 56ch; }

.split__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}
.split__media img {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
  transition: transform var(--motion-medium) var(--ease-lift);
}
.split__media:hover img { transform: translateY(-3px); }
.split__media figcaption {
  font-family: var(--font-family-body);
  font-size: var(--type-caption);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  max-width: 40ch;
}
.split__media--sticky img {
  /* Slightly more lift for the secondary-section scene. */
  filter:
    drop-shadow(0 25px 50px rgba(0, 0, 0, 0.40))
    drop-shadow(0 0 80px rgba(122, 162, 255, 0.10));
}

/* Reverse layout: image first, text second on wide screens. */
.split--reverse .split__media { order: -1; }

@media (max-width: 880px) {
  .split,
  .split--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  /* When stacked, always show text first regardless of source order. */
  .split--reverse .split__text  { order: 0; }
  .split--reverse .split__media { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .split__media img,
  .split__media:hover img { transition: none; transform: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family-display);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-lift),
              border-color var(--motion-fast) var(--ease-lift),
              transform var(--motion-fast) var(--ease-lift);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--color-primary-strong);
  color: var(--color-text-primary);
}
.btn--primary:hover {
  background: #5C82CC;
  color: var(--color-text-primary);
}
.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}
.btn svg { width: 18px; height: 18px; }

/* ── Cards / grids ────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Centred-row variant: caps the column max width so an incomplete final
   row sits in the middle instead of pinning to the left. */
.grid--centered { justify-content: center; }
.grid--centered.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
}
.grid--centered.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
}

.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition:
    transform var(--motion-fast) var(--ease-lift),
    background var(--motion-fast) var(--ease-lift);
}
/* Hover: warm the card body with an amber wash and turn the icon pill
   amber too. Border stays as-is (no colour change). */
.card:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-surface-1) 85%, var(--color-accent) 15%);
}
.card:hover .card__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.card h4 { margin-bottom: var(--space-xs); }
.card p { font-size: 0.9375rem; }
.card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-sm);
  transition:
    background var(--motion-fast) var(--ease-lift),
    color var(--motion-fast) var(--ease-lift);
}
.card__icon svg { width: 18px; height: 18px; }

.card--accent .card__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover,
  .card__icon,
  .card:hover .card__icon { transition: none; transform: none; }
}

/* ── How it works ─────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--space-md);
}
.step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.step__badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  color: var(--color-text-primary);
  display: grid;
  place-items: center;
  font-family: var(--font-family-display);
  font-weight: var(--weight-semibold);
  font-feature-settings: var(--font-feature-tabular);
}
.step__body { min-width: 0; }
.step__body h4 { margin-bottom: var(--space-2xs); }

/* Accordion-style steps: collapse the body, keep the numbered badge + title
   visible. Used in the "How it works" split layout to stay compact next to
   the illustration. Pure CSS via <details>; no JS. */
details.step {
  display: block;        /* override the default flex on .step */
  padding: 0;            /* summary handles its own padding */
}
.step__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  user-select: none;
}
.step__summary::-webkit-details-marker { display: none; }
.step__summary .step__badge { /* allow span instead of div */
  display: grid;
  place-items: center;
}
.step__title {
  font-family: var(--font-family-display);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-title);
}
.step__chev {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 1.5em;
  line-height: 1;
  transition: transform var(--motion-fast) var(--ease-lift);
}
details.step[open] .step__chev { transform: rotate(90deg); }
details.step .step__body {
  padding: 0 var(--space-lg) var(--space-md) calc(var(--space-lg) + 32px + var(--space-md));
}
details.step .step__body p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .step__chev { transition: none; }
}

/* ── Pills / chips ────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
}
.pill--success { background: var(--color-success-soft); color: var(--color-success); }
.pill--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.pill--accent  { background: var(--color-accent-soft);  color: var(--color-accent); }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}
.chip-list li {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-caption);
  margin-top: 0;
}

/* ── Privacy / support / terms — reading-page styles ─────────────────── */

.page-header {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--color-border-subtle);
}
.page-header h1 {
  background: none;
  -webkit-text-fill-color: var(--color-text-primary);
  color: var(--color-text-primary);
  font-size: var(--type-display-lg);
}
.page-header .section-eyebrow { margin-bottom: var(--space-xs); }

.reading {
  padding-block: var(--space-2xl);
}
.reading h2 {
  font-size: var(--type-display);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}
.reading h2:first-child { margin-top: 0; }
.reading h3 {
  font-size: var(--type-title);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}
.reading p,
.reading ul,
.reading ol {
  margin-bottom: var(--space-md);
}
.reading ul ul { margin-top: var(--space-xs); margin-bottom: 0; }
.reading hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin-block: var(--space-xl);
}

.callout {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-block: var(--space-md);
  color: var(--color-primary);
  font-size: var(--type-body);
}
.callout strong { color: inherit; }

/* FAQ — disclosure-based accordion */
.faq {
  display: grid;
  gap: var(--space-sm);
}
.faq details {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-family-display);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "›";
  margin-left: auto;
  color: var(--color-primary);
  transition: transform var(--motion-fast) var(--ease-lift);
  font-size: 1.5em;
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(90deg); }
.faq .faq__body {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-text-secondary);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  margin-top: var(--space-3xl);
  border-top: 1px solid var(--color-border-subtle);
  padding-block: var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--type-caption);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
}
.footer__links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}
.footer__links a {
  color: var(--color-text-muted);
}
.footer__links a:hover { color: var(--color-text-primary); }

/* ── Utility ──────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}