/* ============================================================
   Pebbii — website

   The marketing homepage, the invite landing and the legal pages all share the
   chrome and the primitives in this file. Tokens live in tokens.css; nothing
   here should hard-code a brand colour.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears the sticky header when an in-page link lands. */
  scroll-padding-top: 96px;
}

body {
  background: var(--surface-app);
  color: var(--text-primary);
  font: var(--type-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

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

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The skip link is visually-hidden until a keyboard lands on it; an invisible
   focus target is worse than none. Above the sticky header (z-index 20). */
.skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
  white-space: nowrap;
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: var(--radius-button);
}

/* ── Layout ───────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 96px); }
.section--tight { padding-block: clamp(56px, 7vw, 80px); }
.band { background: var(--surface-card); }

.section__head { margin-bottom: clamp(36px, 5vw, 48px); }

.section__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.section__lede {
  margin-top: 12px;
  max-width: 52ch;
  font: var(--type-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.eyebrow {
  display: block;
  font: var(--type-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.grid--2 { gap: 20px; }
.grid--3 { gap: 32px; }
.grid--4 { gap: 20px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.split--top { align-items: start; }

@media (min-width: 620px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
@media (min-width: 1060px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-app);
  border-bottom: 1px solid var(--border-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: 14px;
}

.site-logo { flex: none; }
.site-logo img { height: 44px; width: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-left: auto;
  align-items: center;
}

.site-nav__link {
  font: var(--type-body-sm);
  color: var(--text-secondary);
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.site-nav__link:hover { opacity: 0.7; }

/* Below the breakpoint the links would wrap into a second and third row and
   push the sticky header over a third of the screen. The same links are all in
   the footer, so the header keeps the logo and the one call to action. */
@media (max-width: 899px) { .site-nav { display: none; } }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  height: 56px;
  padding-inline: 26px;
  border-radius: var(--radius-button);
  font: var(--type-headline-sm);
  text-align: center;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.98); }
/* Both disabled states are the signup's: in flight, and waiting on Turnstile for a token.
   Only <button> takes :disabled, so the nav's <a> buttons are untouched. */
.btn:disabled,
.btn:disabled:hover { opacity: 0.45; }
.btn:disabled { cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost {
  border: 1.5px solid var(--border-strong);
  color: var(--text-primary);
}
.btn--ghost:hover { opacity: 0.7; }
.btn--sm { height: 44px; padding-inline: 20px; }
.btn--md { height: var(--control-height); padding-inline: 24px; }

/* ── Badge ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 10px 15px;
  border-radius: var(--radius-capsule);
  background: var(--pebbii-primary);
  color: var(--pebbii-cream);
  font: var(--type-headline-sm);
}

.badge--accent { background: var(--accent); color: var(--accent-ink); }

.badge__dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.badge__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: pebbii-pulse 2s ease-out infinite;
}

@keyframes pebbii-pulse {
  0%        { transform: scale(1);   opacity: 0.3; }
  70%, 100% { transform: scale(2.2); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .badge__dot::after { animation: none; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 72px) clamp(64px, 8vw, 88px); }

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.hero__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero__title em { font-style: normal; color: var(--pebbii-primary); }

.hero__lede {
  max-width: 46ch;
  font-size: 19px;
  line-height: 30px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

.hero__note { font: var(--type-caption); color: var(--text-muted); }

.signup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* stretch, not flex-start: the field/button row and the beta row are meant to fill the
     column's 460px, and hero__copy above aligns its children to the start. */
  align-items: stretch;
  width: 100%;
  max-width: 460px;
}
.signup__note { font: var(--type-caption); color: var(--text-muted); }

/* ── Launch notify + beta ask ──────────────────────────────
   Ported from redesign draft-5, and moved from the bottom CTA into the hero by draft-7.
   The draft's controls are 52px rather than the 48px
   --control-height the rest of the site uses; that is kept, so the field and its button read as
   one unit at the size they were drawn. Colour and hover come from .btn / .btn--ghost, whose
   opacity .85 / .7 already match the draft exactly. */
.signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.signup__input {
  flex: 1 1 260px;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-field);
  /* Raised against the hero, where the CTA card had it the other way round. */
  background: var(--surface-card);
  color: var(--text-primary);
  font: var(--type-body);
}
.signup__input::placeholder { color: var(--text-muted); }
/* The draft has no focus style. A custom border replaces the one the browser would have drawn, so
   without this the field is the only control on the page a keyboard cannot see itself on. */
.signup__input:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 2px;
}
.signup__submit { flex: none; height: 52px; padding-inline: 26px; }

/* interaction-only: usually renders nothing at all, so it must not leave a gap when empty. */
.signup__turnstile:empty { display: none; }

.signup__beta,
.signup__beta-done {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
}
.signup__beta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.signup__beta-copy {
  flex: 1 1 280px;
  font: var(--type-body-sm);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.signup__beta-btn { flex: none; min-height: 44px; padding-inline: 22px; }
.signup__beta-done { font: var(--type-body-sm); color: var(--text-secondary); }

/* `hidden` has to win over the flex display above, or a hidden state still lays out. */
.signup__form[hidden],
.signup__beta[hidden] { display: none; }

/* ── App screenshots ──────────────────────────────────────── */
.phone {
  justify-self: center;
  width: 100%;
  max-width: 340px;
  padding: 10px;
  border-radius: 54px;
  background: var(--pebbii-primary-deep);
}
.phone--sm { max-width: 320px; }

.phone__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 44px;
}

/* ── Content cards ────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.card--roomy { padding: 28px; }
.card__title { font: var(--type-headline-md); }
.card__body { font: var(--type-body-sm); color: var(--text-secondary); text-wrap: pretty; }

.step { display: flex; flex-direction: column; gap: 16px; }
.step__art {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.step__title { font: var(--type-headline-lg); }
.step__body { font: var(--type-body-sm); color: var(--text-secondary); text-wrap: pretty; }

.type-card { display: flex; flex-direction: column; gap: 12px; }
.type-card__art {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.type-card__title { font: var(--type-headline-md); }
.type-card__body { font: var(--type-body-sm); color: var(--text-secondary); }

/* ── What you get, free ───────────────────────────────────
   Replaces the .plan cards draft-7 dropped. The icons are Lucide 0.446 paths inlined rather
   than pulled from the CDN the draft uses: eight 24px glyphs are smaller than the loader, and
   the page otherwise takes no third-party script but Turnstile. */
.feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.feature__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-field);
  background: var(--surface-chip);
  color: var(--pebbii-primary-deep);
}
.feature__text { display: flex; flex-direction: column; gap: 6px; }
.feature__title { font: var(--type-headline-sm); }
.feature__body { font: var(--type-body-sm); color: var(--text-secondary); text-wrap: pretty; }

/* ── Privacy ──────────────────────────────────────────────── */
.privacy__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.privacy__cards { display: grid; gap: 16px; }

/* ── Call to action ───────────────────────────────────────── */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: clamp(36px, 6vw, 56px) clamp(24px, 4vw, 40px);
  border-radius: var(--radius-dialog);
  background: var(--surface-raised);
}
@media (min-width: 760px) { .cta { grid-template-columns: minmax(0, 1fr) auto; } }

.cta__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.cta__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cta__body { max-width: 44ch; font: var(--type-body); color: var(--text-secondary); }
.cta__stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta__note { font: var(--type-caption); color: var(--text-muted); }
.cta__icon { width: 140px; height: 140px; border-radius: 32px; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  background: var(--pebbii-primary-deep);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,.85);
  --text-muted: rgba(255,255,255,.6);
  --border-hairline: rgba(255,255,255,.20);
  color: var(--text-primary);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: clamp(48px, 6vw, 64px) 40px;
}
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}

.site-footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.site-footer__brand img { height: 44px; width: auto; }
.site-footer__blurb { max-width: 34ch; font: var(--type-body-sm); color: var(--text-muted); }

.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__heading {
  margin-bottom: 4px;
  font: var(--type-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.site-footer__link {
  font: var(--type-body-sm);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.site-footer__link:hover { color: var(--pebbii-cream); }

.site-footer__social { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.site-footer__social .site-footer__heading { margin-bottom: 0; }
.site-footer__social-list { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-capsule);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
}
.site-footer__social-link:hover { opacity: .7; }
.site-footer__social-link svg { display: block; }

.site-footer__legal {
  padding-block: 24px 48px;
  border-top: 1px solid var(--border-hairline);
  font: var(--type-caption);
  color: var(--text-muted);
}

/* ── Centred single-column pages (invite, legal) ──────────── */
.page-main { flex: 1; }