/**
 * Landing-site layout. Depends on `tokens.css` for every colour, space,
 * radius and font — nothing below hardcodes a value, same contract the
 * app's CSS modules follow, so re-theming still happens in one file.
 *
 * Structural idea, inherited from the app's Charter theme: hairlines
 * carry structure, not rounding and not shadow. Panels are ruled boxes
 * that share edges rather than floating cards separated by gaps, and
 * the only full-bleed accent line on the page is the 2px masthead rule.
 *
 * Naming is BEM-ish (`.block__element--modifier`) because this is plain
 * CSS with a global namespace, not CSS modules — every selector here is
 * visible to both pages, so the names have to be self-scoping.
 */

/* --- Skip link ----------------------------------------------------
   First focusable element on the page; visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 40;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Masthead -----------------------------------------------------
   Mirrors the app's SiteHeader: sticky, translucent, and capped by the
   2px accent rule (azure in light, crimson in dark) that reads as a
   masthead rather than a toolbar. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 2px solid var(--color-border-strong);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: var(--color-surface);
  }
}

.masthead__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

/* Solid --color-accent-text, never a background-clipped gradient:
   clipped type can't be contrast-checked and desaturates unpredictably.
   Matches SiteHeader.module.css exactly. */
.brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-accent-text);
  margin-right: auto;
  /* inline-flex, not flex: the brand is a link sitting in a flex row,
     and `display: flex` would stretch it to the full row width, making
     the whole strip to the right of the wordmark clickable. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Sized in `em`, so the mark is expressed as a ratio of the wordmark it
   sits beside and stays in proportion if --text-xl is ever retuned.
   1.15em is a shade taller than the cap height of Spectral at 800 — a
   circular mark set to exactly the cap height reads as too small next
   to flat-topped letters, because its curve only touches that line at
   one point.

   `flex-shrink: 0` because an SVG with no width/height attributes is
   flex-shrinkable, and the mark would otherwise get squeezed into an
   ellipse when the masthead runs out of room on narrow screens. */
.brand__mark {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.masthead__nav a {
  color: var(--color-text-muted);
}

.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] {
  color: var(--color-text);
}

@media (max-width: 40rem) {
  .masthead__inner {
    padding: var(--space-3) var(--space-4);
  }

  /* `margin-right: auto` on the brand forces the wrap; the nav then
     takes its own row. No JS drawer needed at this page size. */
  .brand {
    width: 100%;
  }
}

/* --- Theme toggle -------------------------------------------------
   Same slider as the app's ThemeToggle, reimplemented without React.
   Knob position and the sun/moon crossfade are pure CSS, keyed off the
   SAME two conditions tokens.css resolves the palette from, so the
   switch is correct at first paint including before any JS runs. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle__track {
  position: relative;
  display: inline-block;
  width: 3.4rem;
  height: 1.8rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.theme-toggle:hover .theme-toggle__track {
  border-color: var(--color-accent);
}

.theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle__icon {
  grid-area: 1 / 1;
  display: inline-flex;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

html[data-theme="dark"] .theme-toggle__knob {
  transform: translateY(-50%) translateX(1.6rem);
}
html[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(60deg) scale(0.6);
}
html[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle__knob {
    transform: translateY(-50%) translateX(1.6rem);
  }
  html:not([data-theme="light"]) .theme-toggle__icon--sun {
    opacity: 0;
    transform: rotate(60deg) scale(0.6);
  }
  html:not([data-theme="light"]) .theme-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__knob,
  .theme-toggle__icon,
  .theme-toggle__track {
    transition: none;
  }
}

/* --- Page shell ---------------------------------------------------
   One max-width and gutter for the whole site, matching the app's
   layout.module.css. `flex: 1` on the content region pushes the footer
   to the bottom on short pages. */
.page {
  flex: 1;
  width: 100%;
}

.shell {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (max-width: 40rem) {
  .shell {
    padding: 0 var(--space-4);
  }
}

/* --- Hero ---------------------------------------------------------
   Centred, no imagery. There is no product screenshot on this page on
   purpose: the product is not open yet, and a mocked-up screenshot of
   an unavailable storefront is the one thing a page about durable
   ownership cannot afford to show. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-7);
  text-align: center;
}

/* Pre-launch status pill. --color-numeral (not --color-highlight) for
   the gold-toned type: on the parchment canvas raw --color-highlight is
   3.2:1, while --color-numeral measures 6.8:1. Same call the app's
   hero eyebrow makes. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-numeral);
}

.status-pill__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-highlight);
}

.hero__title {
  max-width: 20ch;
  /* Plain ink, not a background-clipped gradient: clipped display type
     can't be contrast-checked and reads washed out at hero sizes. */
  font-size: clamp(var(--text-2xl), 6vw, 3.75rem);
  color: var(--color-text);
}

.hero__tagline {
  max-width: 38rem;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Stacked buttons of different label lengths read as a mistake on a
   phone; matching their width makes the pair read as one control
   group. */
@media (max-width: 30rem) {
  .hero__actions {
    width: 100%;
    flex-direction: column;
  }
}

/* --- Buttons ------------------------------------------------------ */
/* `text-decoration: none` is load-bearing, not tidiness: tokens.css
   underlines `p a` (the inline-prose-link rule ported from the app),
   and the callout CTAs live inside a <p>. Without this the primary
   button renders with an underline through its label. */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Solid accent, not --gradient-accent: Charter's accent gradient runs
   azure -> gold, which over a button-sized area reads as a muddy smear.
   The gradient is for 2px caps and the toggle knob. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-accent);
}

/* --- Assurance band -----------------------------------------------
   Three equal columns on ONE surface, divided by hairlines rather than
   gaps, so it reads as a single ruled panel instead of three cards.
   Full-bleed: the band's rules run edge to edge while its text stays
   inside the shell. */
.band {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--content-max-width);
  margin: 0 auto;
  list-style: none;
}

.band__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.band__cell + .band__cell {
  border-left: 1px solid var(--color-border-soft);
}

.band__label {
  color: var(--color-success);
}

.band__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

@media (max-width: 52rem) {
  .band__grid {
    grid-template-columns: 1fr;
  }

  .band__cell + .band__cell {
    border-left: none;
    border-top: 1px solid var(--color-border-soft);
  }
}

/* --- Generic section ---------------------------------------------- */
.section {
  padding: var(--space-8) 0;
}

.section__head {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.section__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-numeral);
}

.section__title {
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  color: var(--color-text);
}

.section__lede {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.section--centred .section__head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Paths comparison ---------------------------------------------
   Two ruled panels sharing a hairline, then a full-width closing
   statement below. The second panel is deliberately NOT styled as a
   warning (no --color-danger): it describes what people currently do,
   which is an observation about a broken market, not an accusation. */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.paths__panel {
  padding: var(--space-6);
}

.paths__panel + .paths__panel {
  border-left: 1px solid var(--color-border-soft);
}

.paths__label {
  display: block;
  margin-bottom: var(--space-4);
}

.paths__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.paths__list li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

/* The leading mark is decorative punctuation, not information — it is
   hidden from assistive tech and the list semantics carry the meaning. */
.paths__mark {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-highlight);
}

.paths__closer {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border-strong);
  max-width: 44rem;
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

@media (max-width: 52rem) {
  .paths {
    grid-template-columns: 1fr;
  }

  .paths__panel + .paths__panel {
    border-left: none;
    border-top: 1px solid var(--color-border-soft);
  }
}

/* --- Chip grid (media types, creator types) ----------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.chips li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.chips__note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Two-column definition lists (is / is not, commitments) -------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.duo__panel {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.duo__label {
  display: block;
  margin-bottom: var(--space-4);
}

.duo__label--is {
  color: var(--color-success);
}

.duo__label--isnt {
  color: var(--color-danger);
}

.duo__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  color: var(--color-text-muted);
}

.duo__list li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-soft);
  line-height: var(--leading-relaxed);
}

@media (max-width: 52rem) {
  .duo {
    grid-template-columns: 1fr;
  }
}

/* --- Feature rows (creator page) ----------------------------------
   A stack of ruled rows sharing one surface — the same "one object,
   several cells" idea as the assurance band, turned vertical. */
.rows {
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rows__row {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}

.rows__row + .rows__row {
  border-top: 1px solid var(--color-border-soft);
}

.rows__term {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.rows__desc {
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* The "planned, not built" marker. Caution tone, stated plainly rather
   than dressed up as a feature. */
.tag-later {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-caution-bg);
  color: var(--color-caution);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 52rem) {
  .rows__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* --- Notice -------------------------------------------------------
   A section whose whole content is a statement rather than a list. The
   gold left rule marks it as "read this one properly" without using the
   danger tone — nothing here is a warning, it's a disclosure. */
.notice {
  max-width: 48rem;
  padding: var(--space-6);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-highlight);
  border-radius: var(--radius-lg);
}

.notice .section__head {
  margin-bottom: 0;
}

.notice .section__lede {
  font-size: var(--text-base);
}

/* --- Callout / contact -------------------------------------------- */
.callout {
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.callout__title {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
  color: var(--color-text);
}

.callout__body {
  max-width: 42rem;
  margin: var(--space-4) auto 0;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.callout__actions {
  margin-top: var(--space-5);
}

/* --- Footer -------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  margin-top: var(--space-8);
}

.footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__thesis {
  max-width: 32rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__links a:hover {
  color: var(--color-text);
}