/* Base styles: reset, typography, layout primitives, header and footer.
   Design tokens live in tokens.css; page-specific styles in landing.css. */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Safety net: one element wider than the screen widens the phone
     layout viewport, which zooms the whole page out and drags every
     fixed element with it (the 2026-07-25 header bug). clip, not
     hidden: hidden would make body a scroll container and detach the
     sticky header. */
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

a:hover {
  color: var(--accent-deep);
}

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

::selection {
  background: var(--accent);
  color: var(--paper);
}

/* Layout primitives */

.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

.container-narrow {
  width: min(var(--container-narrow), 100% - 2.5rem);
  margin-inline: auto;
}

.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
}

/* Copy glue: phrases that must wrap as one unit (hyphenated compounds
   split at the hyphen otherwise). */
.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -100vw;
  top: var(--space-2);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 10;
}

.skip-link:focus {
  left: var(--space-2);
  color: var(--paper);
}

/* Header: the relaunch world (RELAUNCH.md section 13). A hairline that
   fades in from the sides, the wordmark, the section links on the
   marketing pages, sign in, and the one pill. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
}

.site-header::after {
  content: "";
  position: absolute;
  left: max(1.25rem, calc((100% - var(--container)) / 2));
  right: max(1.25rem, calc((100% - var(--container)) / 2));
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.75rem;
}

.header-nav {
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-base);
  color: var(--ink-soft);
}

.header-nav a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 380ms var(--ease-out), color 200ms;
}

.header-nav a:hover {
  color: var(--ink);
  background-size: 100% 1.5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Plain nav link in the anonymous header (Log in). Quieter than the
   pill beside it on purpose: it points, the pill acts. */
.header-nav-link {
  font-size: var(--text-base);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms;
}

.header-nav-link:hover {
  color: var(--ink);
}

@media (max-width: 899px) {
  .header-nav {
    display: none;
  }
}

/* Phone widths: the header row is the tightest fit on the site, the
   wordmark plus the usage ring plus a button share ~335px. Trim
   instead of wrapping: a two-line sticky header would spend canvas
   height every page needs. */
@media (max-width: 479px) {
  .site-header .container {
    gap: var(--space-2);
    min-height: 4rem;
  }

  .header-actions {
    gap: var(--space-3);
  }

  .header-nav-link {
    font-size: var(--text-sm);
  }

  /* Scoped to .site-header on purpose, and not only for the footer's
     sake: the bare .wordmark base rule below and .usage-chip's base in
     workspace.css (later in load order) tie these on specificity, so an
     unscoped override here silently loses the cascade. */
  .site-header .wordmark {
    font-size: 1.25rem;
  }

  .site-header .btn-sm {
    font-size: var(--text-xs);
    padding: 0 0.9em;
    min-height: 2.5rem;
  }

  .site-header .btn-sm .btn-arrow {
    display: none;
  }
}

/* The signed-in row (wordmark + usage ring + Dashboard) still overflowed
   the narrowest phones after the trims above: the button cannot shrink
   below its text, so every fixed cost shaves again. */
@media (max-width: 360px) {
  /* The container's gutter is a width cap, not padding: widen it here
     instead of padding it, or the row loses another 24px it needs. */
  .site-header .container {
    width: calc(100% - 1.5rem);
  }

  .site-header .wordmark {
    font-size: 1.125rem;
  }

  .site-header .btn-sm {
    padding: 0 0.7em;
  }
}

/* The mark (2026-09-25) costs the header row about 34px, so the name
   keeps its smaller size a little longer at each step: the smallest to
   380px, the phone size to 529px (the wide sizes start at 480px, where
   the section links are still hidden). Under 340px (the first iPhone
   SE) the button would still sit 9px past the edge, so the name goes
   alone there, as it did before the mark. Swept at every 5px from 320
   to 560, signed out. */
@media (max-width: 380px) {
  .site-header .wordmark {
    font-size: 1.125rem;
  }
}

@media (min-width: 480px) and (max-width: 529px) {
  .site-header .wordmark {
    font-size: 1.25rem;
  }
}

@media (max-width: 340px) {
  .site-header .logo-mark {
    display: none;
  }
}

/* A planless account's two buttons ("Studio", "Reveal my design") are
   the widest row: on phones the mark sits a touch smaller and closer,
   and the buttons closer together. */
@media (max-width: 400px) {
  .site-header .wordmark {
    gap: 0.32em;
  }

  .site-header .logo-mark {
    width: 1.18em;
    height: 1.18em;
  }

  .site-header .header-actions {
    gap: var(--space-2);
  }
}

/* Scrolled-to sections clear the sticky header */
[id] {
  scroll-margin-top: 5.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
}

/* The mark (shared/_logo_mark): a little taller than the lowercase, so
   it sits level with the name's ascenders and descenders. */
.logo-mark {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

.wordmark em {
  font-style: normal;
  color: var(--accent);
}

.wordmark:hover {
  color: var(--ink);
}

/* Footer: the deep navy foot with the link columns and the giant faded
   wordmark (the sketch's close). */

.site-footer {
  background: var(--footer);
  color: #aab4bf;
  padding: 4.5rem 0 0;
  margin-top: 8.5rem;
  overflow: hidden;
}

.site-footer .wordmark {
  color: #fff;
}

.site-footer .footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  font-size: var(--text-sm);
}

.site-footer h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer p {
  color: #aab4bf;
  font-size: var(--text-sm);
}

.site-footer a,
.site-footer .footer-billing {
  color: #aab4bf;
  text-decoration: none;
  transition: color 200ms;
}

.site-footer a:hover,
.site-footer .footer-billing:hover {
  color: #fff;
}

.footer-billing-form {
  display: inline;
}

.footer-billing {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.footer-giant {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 15vw, 13.75rem);
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: #fff;
  opacity: 0.085;
  margin-top: 3.5rem;
  white-space: nowrap;
  transform: translateY(22%);
  user-select: none;
}

@media (max-width: 720px) {
  .site-footer {
    margin-top: 4.75rem;
    padding-top: 3.5rem;
  }

  .site-footer .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  .site-footer .footer-cols > :first-child {
    grid-column: span 2;
  }

  .footer-giant {
    margin-top: 2.5rem;
  }
}

/* Motion preferences */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Legal pages */

.legal-page h1 {
  font-size: var(--text-h2);
  margin: var(--space-2) 0;
}

.legal-page h2 {
  font-size: var(--text-lg);
  margin: var(--space-6) 0 var(--space-2);
}

.legal-updated {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.footer-legal a {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* The footer Billing control is a form button (the portal needs a POST),
   restyled to sit inline with the surrounding links. */
.footer-billing-form {
  display: inline;
}

.footer-billing {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-billing:hover {
  color: var(--accent-deep);
}

.site-footer .footer-blurb { margin-top: 10px; max-width: 18rem; }
.site-footer .footer-copy { margin-top: 10px; }