/* base.css - P1 Foundation. Reset, tokens, font faces, element typography,
   and the shared class contract (spec section 4.5). Section files may only
   add selectors that begin with their own .s-<name> root class. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/fraunces-500.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/instrument-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
}

/* reset */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
.list-reset { list-style: none; margin: 0; padding: 0; }

html {
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

/* tokens */

:root {
  /* paper and ink */
  --paper: #FFF8ED;            /* page ground, nav, cards, footer card */
  --paper-2: #F3EBDD;          /* secondary panels, outline-button hover */
  --paper-3: #E9DFCC;          /* tags, tan sticker, step-4 panel */
  --ink: #1E1E1E;              /* text, solid buttons, wordmark */
  --ink-72: rgba(30, 30, 30, 0.72);  /* body copy */
  --ink-64: rgba(30, 30, 30, 0.64);  /* eyebrows, nav links, captions (4.9:1 on paper) */
  --ink-40: rgba(30, 30, 30, 0.40);  /* decorative only, never text */
  --line: rgba(30, 30, 30, 0.14);    /* hairline borders */
  --grid: rgba(150, 135, 115, 0.22); /* graph-paper lines */
  --white: #FFFFFF;

  /* pencil accents */
  --yellow: #F5C518;           /* pencil body, primary sticker, steps panel 1 */
  --yellow-deep: #D9A400;      /* yellow hover / outlines on yellow */
  --pink: #F2A7A0;             /* eraser, sticker, steps panel 3 */
  --blue: #A9BFCF;             /* blueprint grey-blue, sticker, steps panel 2 */
  --cedar: #B84A16;            /* CTA band, link underline, hover; white on it = 5.2:1 */
  --cedar-deep: #9A3C10;       /* cedar hover */
  --graphite: #4A4A4A;         /* lead, stamp ink */
  --wood: #E8D5B0;             /* pencil tip */
  --yc-orange: #F26522;        /* YC badge square only, never elsewhere */

  /* mockup status (used only inside .mock) */
  --st-cited: #1E1E1E;   --st-cited-bg: #EFE7D8;
  --st-question: #7A5416; --st-question-bg: #F6ECD2;   /* 5.6:1 */
  --st-changed: #9A3C10;  --st-changed-bg: #F8E3D6;    /* 5.6:1 */
  --st-ok: #2E6B4F;      --st-ok-bg: #E3EFE7;

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  --fs-h1: 64px;  --lh-h1: 1.1;  --ls-h1: -0.015em;
  --fs-h2: 40px;  --lh-h2: 0.98; --ls-h2: -0.02em;
  --fs-h3: 32px;  --lh-h3: 1.0;  --ls-h3: -0.02em;
  --fs-h4: 22px;  --lh-h4: 1.15; --ls-h4: -0.01em;
  --fs-eyebrow: 16px;
  --fs-lede: 18px; --lh-lede: 1.4;
  --fs-body: 18px; --lh-body: 1.4;
  --fs-ui: 16px;
  --fs-small: 14px;
  --fs-mono: 13px;

  /* spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: 128px;
  --gutter: 24px;
  --container: 1200px;
  --nav-h: 64px;
  --footer-under-h: 280px;

  /* radii */
  --r-btn: 6px;
  --r-chip: 4px;
  --r-sticker: 8px;
  --r-card: 10px;
  --r-panel: 16px;

  /* shadows (stickers only; resting cards have none) */
  --shadow-sticker: 0 8px 20px rgba(30, 30, 30, 0.14), 0 1px 2px rgba(30, 30, 30, 0.10);
  --shadow-panel: 0 1px 0 rgba(30, 30, 30, 0.06);

  /* grid texture */
  --grid-size: 32px;
}

@media (max-width: 1199px) {
  :root {
    --fs-h1: 48px; --fs-h2: 34px; --fs-h3: 26px; --fs-h4: 20px;
    --fs-lede: 17px; --fs-body: 17px;
    --section-y: 96px;
  }
}

@media (max-width: 809px) {
  :root {
    --fs-h1: 38px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 19px;
    --fs-lede: 16px; --fs-body: 16px;
    --section-y: 64px;
    --gutter: 20px;
    --nav-h: 56px;
    --footer-under-h: 200px;
  }
}

.grid-bg {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center top;
}

/* layout */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section__head {
  max-width: 720px;
  margin-bottom: var(--sp-8);
}

.section__head--center {
  text-align: center;
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-btn);
  font: 500 16px var(--font-sans);
  text-decoration: none;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
}

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

/* typography */

body {
  font: 400 var(--fs-body) / var(--lh-body) var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  text-transform: capitalize;
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  text-transform: capitalize;
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  text-transform: capitalize;
  margin: 0;
  text-wrap: balance;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--ink);
  text-transform: capitalize;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  color: var(--ink-64);
  text-transform: capitalize;
  letter-spacing: normal;
  margin: 0 0 20px;
}

.lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--ink-72);
  text-transform: none;
  max-width: 640px;
}

p {
  color: var(--ink-72);
  margin: 0 0 var(--sp-4);
}

.small {
  font-size: var(--fs-small);
  color: var(--ink-64);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.no-caps, .mock, .mock * {
  text-transform: none;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cedar);
  text-underline-offset: 3px;
}

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

/* wordmark (P1; consumed by nav and footer) */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.wordmark__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* YC badge (P1; placed by P2 in the hero) */

.backed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  margin: 0 0 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  font-size: 15px;
  color: var(--ink);
}
.backed__label,
.backed__name {
  color: var(--ink);
  font-weight: 500;
}
.backed__y {
  width: 19px;
  height: 19px;
}

/* buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  border: none;
  font: 400 var(--fs-ui) / 1 var(--font-sans);
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn--solid {
  background: var(--ink);
  color: var(--white);
}
.btn--solid:hover {
  background: #000;
}
.btn--outline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn--outline:hover {
  background: var(--paper-2);
}
.btn--paper {
  background: var(--paper);
  color: var(--ink);
}
.btn--paper:hover {
  background: var(--paper-2);
}
.btn .arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* cards */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: none;
  min-width: 0;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--ink);
  text-transform: capitalize;
  margin: 0 0 12px;
  text-wrap: balance;
}
.card__body {
  color: var(--ink-72);
  font-size: var(--fs-body);
  margin: 0;
}
.card__meta {
  color: var(--ink-64);
  font-size: 14px;
  margin: 12px 0 0;
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.card__icon svg {
  width: 16px;
  height: 16px;
}
.card__icon--yellow { background: var(--yellow); }
.card__icon--pink { background: var(--pink); }
.card__icon--blue { background: var(--blue); }
.card__icon--paper3 { background: var(--paper-3); }

/* chips, tags, pills */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  font: 500 14px var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
}
.chip .mono {
  color: var(--ink-64);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  background: var(--paper-3);
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font: 600 12px var(--font-sans);
  text-transform: none;
}
.pill--cited { color: var(--st-cited); background: var(--st-cited-bg); }
.pill--question { color: var(--st-question); background: var(--st-question-bg); }
.pill--changed { color: var(--st-changed); background: var(--st-changed-bg); }
.pill--ok { color: var(--st-ok); background: var(--st-ok-bg); }

/* stickers (inline SVG) */

.sticker {
  display: block;
  position: absolute;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 8px 12px rgba(30, 30, 30, .14));
  pointer-events: none;
}
.sticker text {
  font-family: var(--font-sans);
}
.sticker .mono-t {
  font-family: var(--font-mono);
}
.sticker .display-t {
  font-family: var(--font-display);
}
.sticker--static {
  position: static;
}

/* mockups (product UI built in HTML, never a screenshot) */

.mock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font: 14px / 1.35 var(--font-sans);
  color: var(--ink);
  text-transform: none;
  overflow: hidden;
}
.mock__bar {
  height: 36px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-64);
}
.mock__dots {
  position: relative;
  display: block;
  width: 36px;
  height: 8px;
  flex-shrink: 0;
}
.mock__dots::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: 14px 0 0 var(--line), 28px 0 0 var(--line);
}
.mock__body {
  padding: 14px;
}
.mock-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.mock-row:last-child {
  border-bottom: none;
}
.mock-row .ref {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.mock-row .desc {
  font-size: 14px;
  color: var(--ink);
}
.mock-row .val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-64);
}
.mock-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
}
.mock-card__title {
  font: 500 15px var(--font-sans);
  color: var(--ink);
  margin: 6px 0;
}
.mock-card__cite {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-72);
}
.mock-card__cite::before {
  content: "Cited: ";
  font-family: var(--font-sans);
}
.mock-note {
  font-size: 13px;
  color: var(--ink-64);
  margin-top: 10px;
}

/* reveal (P1 writes the CSS and JS; parts just add the attribute) */

.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.js [data-reveal][data-reveal-delay="1"].is-visible { transition-delay: .08s; }
.js [data-reveal][data-reveal-delay="2"].is-visible { transition-delay: .16s; }
.js [data-reveal][data-reveal-delay="3"].is-visible { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* footer lift (coordinator correction: main and .s-footer__card only, never
   .s-nav here - a base position: relative on .s-nav would fight the sticky
   nav positioning that 00-nav.css owns) */

body {
  padding-bottom: var(--footer-under-h);
}
main, .s-footer__card {
  position: relative;
  z-index: 1;
  background-color: var(--paper);
}