/* Shared marketing styles. Everything resolves to tokens.css; this file adds
   layout for the pages the generator produces and nothing else. */

/* --- nav ------------------------------------------------------------------ */

.nav { display: none; gap: var(--s-5); margin-inline: auto; }
@media (min-width: 62rem) { .nav { display: flex; } }

.nav__link {
  font-size: 0.92rem;
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav__link--on { color: var(--ink); border-bottom-color: var(--mark); }

/* Below the nav breakpoint the links move into a scrollable strip under the
   masthead rather than into a hamburger. Five items do not need a menu, and a
   menu hides four of the five pages we want read. */
.navstrip {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  padding: var(--s-3) var(--s-5);
  border-bottom: var(--rule-w) solid var(--rule);
  scrollbar-width: none;
}
.navstrip::-webkit-scrollbar { display: none; }
@media (min-width: 62rem) { .navstrip { display: none; } }
.navstrip .nav__link { white-space: nowrap; font-size: 0.88rem; }

/* --- generic page --------------------------------------------------------- */

.page { padding-block: var(--s-8) var(--s-5); max-width: 58rem; }

.page__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.8rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page__deck {
  margin-top: var(--s-5);
  max-width: 44rem;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.page__body { padding-bottom: var(--s-9); max-width: 58rem; }

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

.page__body p, .prose__body p {
  margin-top: var(--s-4);
  max-width: 40rem;
  line-height: 1.72;
  color: var(--ink-secondary);
}
.page__body ul, .page__body ol,
.prose__body ul, .prose__body ol {
  margin-top: var(--s-4);
  max-width: 40rem;
  padding-left: var(--s-5);
  color: var(--ink-secondary);
  line-height: 1.68;
}
.page__body li, .prose__body li { margin-top: var(--s-2); }
.page__body strong, .prose__body strong { color: var(--ink); font-weight: var(--w-strong); }
.page__body a, .prose__body a { color: var(--accent); text-underline-offset: 2px; }

.prose__h2 {
  margin-top: var(--s-7);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.prose__h3 {
  margin-top: var(--s-6);
  font-size: 1.06rem;
  font-weight: var(--w-strong);
  color: var(--ink);
}
.prose__h4 { margin-top: var(--s-5); font-size: 0.96rem; font-weight: var(--w-strong); }

.prose__rule { margin-top: var(--s-6); border: 0; border-top: var(--rule-w) solid var(--rule); }

/* A short ochre rule above rather than a full-height stripe down the left.
   A coloured 2px left border on a block is a measured tell; the same mark set
   as a rule above says the same thing and matches the eyebrow. */
blockquote {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  max-width: 40rem;
  position: relative;
}
blockquote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s-6);
  height: 2px;
  background: var(--mark);
}
blockquote p { color: var(--ink-muted); font-size: 0.96rem; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--surface-sunk);
  padding: 0.1em 0.3em;
  border-radius: var(--r-sm);
}

/* --- article -------------------------------------------------------------- */

.prose { padding-block: var(--s-8) var(--s-9); max-width: 52rem; }

.prose__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.prose__meta {
  margin-top: var(--s-4);
  font-size: 0.84rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.prose__lede {
  margin-top: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: var(--rule-w) solid var(--rule);
  max-width: 40rem;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
}

.prose__back { margin-top: var(--s-8); padding-top: var(--s-4);
               border-top: var(--rule-w) solid var(--rule); font-size: 0.9rem; }

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

.cards { margin-top: var(--s-6); padding: 0; list-style: none;
         border-top: 2px solid var(--ink); }

.card { border-bottom: var(--rule-w) solid var(--rule); }

.card__link {
  display: block;
  padding-block: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease);
}
.card__link:hover { background: var(--surface-sunk); }
.card__link:hover .card__title { text-decoration: underline;
                                 text-decoration-color: var(--accent);
                                 text-underline-offset: 4px; }

.card__meta { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.card__title {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.card__lede { margin-top: var(--s-2); max-width: 46rem; color: var(--ink-secondary);
              font-size: 0.96rem; line-height: 1.6; }

/* --- pricing tiers -------------------------------------------------------- */

.tiers { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 54rem) { .tiers { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.tier { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.tier--mark { border-top-color: var(--accent); }

.tier__name { font-weight: var(--w-strong); font-size: 1.02rem; }
.tier__for { margin-top: 0.15rem; font-size: 0.82rem; color: var(--ink-faint); }
.tier__price {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tier__unit { font-family: var(--f-text); font-size: 0.8rem; color: var(--ink-muted); }
.tier__list { margin-top: var(--s-4); padding-left: var(--s-4); font-size: 0.92rem;
              color: var(--ink-secondary); line-height: 1.6; }
.tier__list li { margin-top: var(--s-2); }
.tier__note { margin-top: var(--s-3); font-size: 0.82rem; color: var(--ink-faint); }

/* --- section illustrations ------------------------------------------------ */

/* Drawn, not sourced. Stock photography and unDraw-style figures are measured
   tells and the design gate rejects them, so density comes from real diagrams
   built out of the same hairlines and tabular numbers as the rest of the site. */

.illus-band { padding-block: var(--s-6) var(--s-7); border-top: var(--rule-w) solid var(--rule); }
.illus-band--tight { padding-block: var(--s-5) var(--s-6); }
.illus { margin: 0; }
.illus__svg { display: block; width: 100%; height: auto; max-width: 72rem; margin-inline: auto; }
.illus__cap { font-size: 0.78rem; font-weight: var(--w-strong); letter-spacing: 0.02em;
              color: var(--ink-muted); margin-bottom: var(--s-4); }
.page--cont { padding-block: var(--s-5) var(--s-8); }

/* flow */
.fl__n { font-family: var(--f-text); font-size: 16px; font-weight: 620; fill: var(--ink); }
.fl__s { font-family: var(--f-text); font-size: 12.5px; fill: var(--ink-muted); }
.fl__i { font-family: var(--f-text); font-size: 11px; font-weight: 620; fill: var(--mark);
         font-variant-numeric: tabular-nums; }
.fl__gtxt { font-family: var(--f-text); font-size: 12.5px; fill: var(--ink-muted); }

/* market band */
.mk__v { font-family: var(--f-display); font-size: 38px; fill: var(--ink);
         font-variant-numeric: tabular-nums; }
.mk__u { font-family: var(--f-text); font-size: 17px; fill: var(--ink-muted); }
.mk__l { font-family: var(--f-text); font-size: 13px; fill: var(--ink-secondary); }
.mk__s { font-family: var(--f-text); font-size: 11px; fill: var(--ink-faint); }

/* pricing stack */
.st__n { font-family: var(--f-text); font-size: 15px; font-weight: 620; fill: var(--ink); }
.st__w { font-family: var(--f-text); font-size: 12.5px; fill: var(--ink-muted); }

/* archive + directory need no extra type rules */

@media (prefers-reduced-motion: no-preference) {
  .fl__stage, .fl__arrow, .mk__col, .st__row, .lb__doc, .dr__card {
    opacity: 0; animation: rise 300ms var(--ease) both;
  }
  .fl__stage[data-i="0"], .mk__col[data-i="0"], .st__row[data-i="0"],
  .lb__doc[data-i="0"], .dr__card[data-i="0"] { animation-delay: 40ms; }
  .fl__stage[data-i="1"], .mk__col[data-i="1"], .st__row[data-i="1"],
  .lb__doc[data-i="1"], .dr__card[data-i="1"] { animation-delay: 110ms; }
  .fl__stage[data-i="2"], .mk__col[data-i="2"], .st__row[data-i="2"],
  .lb__doc[data-i="2"], .dr__card[data-i="2"] { animation-delay: 180ms; }
  .fl__stage[data-i="3"], .mk__col[data-i="3"],
  .lb__doc[data-i="3"], .dr__card[data-i="3"] { animation-delay: 250ms; }
  .fl__stage[data-i="4"], .lb__doc[data-i="4"], .dr__card[data-i="4"] { animation-delay: 320ms; }
  .lb__doc[data-i="5"], .dr__card[data-i="5"] { animation-delay: 390ms; }
  .lb__doc[data-i="6"], .dr__card[data-i="6"] { animation-delay: 460ms; }
  .lb__doc[data-i="7"], .dr__card[data-i="7"] { animation-delay: 530ms; }
  .lb__doc[data-i="8"], .dr__card[data-i="8"] { animation-delay: 600ms; }
  .dr__card[data-i="9"] { animation-delay: 670ms; }
  .dr__card[data-i="10"] { animation-delay: 740ms; }
  .dr__card[data-i="11"] { animation-delay: 810ms; }
  .fl__arrow[data-i="0"] { animation-delay: 90ms; }
  .fl__arrow[data-i="1"] { animation-delay: 160ms; }
  .fl__arrow[data-i="2"] { animation-delay: 230ms; }
  .fl__arrow[data-i="3"] { animation-delay: 300ms; }
  .fl__gate { opacity: 0; animation: rise 300ms var(--ease) 420ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .fl__stage, .fl__arrow, .fl__gate, .mk__col, .st__row, .lb__doc, .dr__card { opacity: 1; }
}

/* Below this the diagrams are unreadable rather than merely small, and the
   prose beside them already says the same thing. */
@media (max-width: 48rem) { .illus-band { display: none; } }