/* Rafter Systems — one stylesheet.
   Tokens from design-system.md. Where a literal value there would fail WCAG AA,
   AA wins (CLAUDE.md lists it as a constraint, not a style choice) and the
   deviation is commented at the point of use. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* neutrals */
  --espresso:    #261b07;
  --bark:        #61594a;
  --driftwood:   #8f897e;
  --warm-ash:    #aca89f;
  --stone-mist:  #d5d2cd;
  --linen:       #e3dfd5;
  --cream:       #f8f7f5;
  --paper:       #ffffff;

  /* accent — amber is a FILL only. As text on cream it is 1.9:1. */
  --amber:       #f9a600;
  --gold:        #e89b01;

  /* AA-corrected ink. --driftwood is 3.3:1 on cream and fails AA for small
     print. Same hue, darkened to the first step that clears 4.5:1 — measured
     at 4.66:1 on cream and 4.99:1 on paper. Used for all muted TEXT;
     --driftwood itself is kept for control borders, where 3:1 is the bar. */
  --driftwood-ink: #746f66;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Label face. Vercel, Intercom, Linear and Subframe all set eyebrows and
     tag chips in mono: it separates a label from the headline by texture
     rather than by weight, so it registers without shouting. */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: 40px;
  --fs-h2:      30px;
  --fs-h3:      24px;
  --fs-sub:     22px;
  --fs-body:    18px;
  --fs-body-sm: 16px;
  --fs-caption: 14px;

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --page:    1200px;
  --measure: min(680px, 68ch);
  --section: var(--s-8);          /* 64px mobile */
  --radius:  8px;
  --radius-sm: 4px;
}

@media (min-width: 768px) {
  :root {
    --fs-display: 64px;
    --fs-h2:      40px;
    --fs-h3:      28px;
    --section:    var(--s-9);     /* 96px desktop */
  }
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--bark);
  font-family: var(--font);
  font-size: var(--fs-body);      /* 18px at every breakpoint */
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--espresso);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2);      line-height: 1.15; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3);      line-height: 1.2;  letter-spacing: -0.01em;  }

p { margin: 0; max-width: var(--measure); }

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

ul { margin: 0; padding: 0; list-style: none; }

/* Focus: the espresso outline is what carries the 3:1 against cream — an amber
   ring alone is 1.9:1. The amber halo sits outside it for the brand read. */
:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(249, 166, 0, 0.40);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 768px) { .wrap { padding-inline: var(--s-7); } }

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

/* The one structural tool: a 1px linen rule on continuous cream. */
.rule { border: 0; border-top: 1px solid var(--linen); margin: 0; }

.stack    > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.lede {
  font-size: var(--fs-sub);
  line-height: 1.35;
  color: var(--bark);
}

.eyebrow {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--bark);
  margin-bottom: var(--s-2);
}

.caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--driftwood-ink);
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

/* Amber fill, espresso text — 8.4:1. No gradient, no shadow, no lift. */
.btn-primary {
  background: var(--amber);
  color: var(--espresso);
}
.btn-primary:hover,
.btn-primary:active { background: var(--gold); color: var(--espresso); }

/* Ghost. Border is --driftwood, not --stone-mist: a control boundary needs
   3:1 and stone-mist is 1.5:1 on cream. */
.btn-ghost {
  background: transparent;
  color: var(--espresso);
  border-color: var(--driftwood);
}
/* :active as well as :hover — a phone has no hover, so without this the
   button gives no feedback at all when a thumb lands on it. */
.btn-ghost:hover,
.btn-ghost:active { border-color: var(--espresso); color: var(--espresso); }

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  max-width: 340px;
}
.actions .btn { text-align: center; }

@media (min-width: 560px) {
  .actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
  .actions .btn { text-align: left; }
}

/* --------------------------------------------------------------- header */

.site-header {
  border-bottom: 1px solid var(--linen);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
}
/* The header logo is the chevron as inline SVG plus live type — it renders
   from the same Inter the page already loads, so there is no image and no
   resolution to lose at any screen density. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-body);
  color: var(--espresso);
  text-decoration: none;
  transition: color 150ms;
}
.wordmark:hover { color: var(--espresso); }
.wm-mark {
  height: 0.8em;
  width: auto;
  flex: none;
  display: block;
}
.wm-type { text-transform: uppercase; white-space: nowrap; }
.wm-strong { font-weight: 600; letter-spacing: 0.01em; }
.wm-light  { font-weight: 400; letter-spacing: 0.1em; }

/* On a phone the hero's own "Get in touch" sits a thumb below this one, so
   the header link only earns its space once there is room for it. */
.header-link { display: none; }

@media (min-width: 560px) { .header-link { display: inline; } }

.header-link {
  white-space: nowrap;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--espresso);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 150ms;
}

/* ----------------------------------------------------------------- hero */

.hero { padding-block: var(--s-8) var(--section); }
@media (min-width: 768px) { .hero { padding-block: var(--s-9) var(--section); } }

/* Audience qualifier. Ramp's small-uppercase-label pattern: caption size,
   positive tracking, bark rather than espresso so it sits under the headline
   rather than competing with it. Sentence case in the markup and uppercased
   in CSS — screen readers spell out literal all-caps. */
.hero-eyebrow {
  /* The audience qualifier. Sized to be read first, not to be a second
     headline: 20px against the 64px display is a 3.2x step, so hierarchy
     holds. Tracking stays near-tight — 0.12em stretched it into a banner and
     none of Runway, Ramp or Subframe go past 0.05em on caps. */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--espresso);
  margin-bottom: var(--s-4);
  max-width: 24ch;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .hero-eyebrow { font-size: 20px; max-width: none; }
}

.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: var(--s-5); }
.hero .actions { margin-top: var(--s-6); }

/* -------------------------------------------------------------- problem */

.stats {
  display: grid;
  gap: 0;
  margin-block: var(--s-6);
  border-top: 1px solid var(--linen);
}
.stat {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--linen);
}
.stat dt {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--espresso);
}
.stat dd {
  margin: var(--s-2) 0 0;
  max-width: 42ch;
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--s-7);
    border-bottom: 1px solid var(--linen);
  }
  .stat { border-bottom: 0; }
}

/* The money figure. Size does the work — amber would be 1.9:1 as type. */
.money {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--espresso);
  max-width: 30ch;
}

/* ----------------------------------------------------------------- demo */

.video {
  margin: var(--s-6) 0 0;
  max-width: 900px;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  /* cream, not paper — it matches the video's own background so there is no
     white flash before the poster paints */
  background: var(--cream);
  border: 1px solid var(--linen);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-frame video,
.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  text-align: center;
}
.video-placeholder p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--bark);
  max-width: 32ch;
}

.play {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font: inherit;
  /* sized against the frame, which is only ~184px tall at 375px */
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--espresso);
  background: var(--amber);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: background-color 150ms;
}
.play:hover,
.play:active { background: var(--gold); }
.play svg { display: block; }

@media (min-width: 768px) {
  .play { font-size: var(--fs-sub); padding: var(--s-4) var(--s-6); }
}

/* Our own play button sits over the poster, so the first tap target is brand
   coloured and thumb sized rather than the browser's small default glyph. */
.play-overlay {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
}

@media (min-width: 768px) {
  .play-overlay { left: var(--s-5); bottom: var(--s-5); }
}

.video figcaption { margin-top: var(--s-3); }

/* ----------------------------------------------------------- components */

.component + .component { margin-top: var(--section); }
.component .eyebrow + h3 { margin-bottom: var(--s-4); }
.component h3 + p { margin-top: var(--s-4); }

/* Three and four get half the space and sit two-up. One and two stay full. */
.minor-pair {
  margin-top: var(--section);
  display: grid;
  gap: var(--section);
}
@media (min-width: 768px) {
  .minor-pair { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .minor-pair p { max-width: 46ch; }
}

/* message thread — paper on cream, linen border, no icons, no avatars */
.thread {
  margin-top: var(--s-6);
  max-width: 560px;
}
.thread li + li { margin-top: var(--s-5); }
.thread .day {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--driftwood-ink);
  margin-bottom: var(--s-2);
}
.bubble {
  background: var(--paper);
  border: 1px solid var(--linen);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--espresso);
  max-width: 46ch;
}

/* ----------------------------------------------------------- works with */

.tools {
  margin-top: var(--s-6);
  border-top: 1px solid var(--linen);
}
.tools li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--linen);
  font-size: var(--fs-sub);
  font-weight: 500;
  line-height: 1.35;
  color: var(--espresso);
}
@media (min-width: 768px) {
  .tools {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s-7);
    border-bottom: 1px solid var(--linen);
  }
  .tools li { border-bottom: 0; }
}

/* ------------------------------------------------------------------ fit */

.fit-grid {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--section);
}
@media (min-width: 768px) {
  .fit-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.fit-list { margin-top: var(--s-4); border-top: 1px solid var(--linen); }
.fit-list li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--linen);
  max-width: 46ch;
}

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

.price-shape {
  margin-top: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--linen);
  border-radius: var(--radius);
  padding: var(--s-5);
}
@media (min-width: 768px) { .price-shape { padding: var(--s-6); } }
.price-shape > * + * { margin-top: var(--s-4); }

/* ----------------------------------------------------------------- form */

.form { margin-top: var(--s-6); max-width: 560px; }

/* Honeypot — never shown, never announced, never focusable. */
#botcheck { display: none !important; }
.field + .field { margin-top: var(--s-5); }
.field label {
  display: block;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: var(--s-2);
}
.field .hint {
  font-weight: 400;
  color: var(--driftwood-ink);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);   /* 18px — never shrink an input */
  line-height: 1.6;
  color: var(--espresso);
  background: var(--paper);
  /* --driftwood, not --stone-mist: a field boundary needs 3:1. */
  border: 1px solid var(--driftwood);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  transition: border-color 150ms;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--espresso); }

.form .btn-primary { margin-top: var(--s-6); width: 100%; }
@media (min-width: 560px) { .form .btn-primary { width: auto; } }

.form-note { margin-top: var(--s-4); }

.form-message {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--linen);
  border-left: 3px solid var(--espresso);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--espresso);
  max-width: var(--measure);
}
.form-message[hidden] { display: none; }

.field-error {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-body-sm);
  color: var(--espresso);
  font-weight: 500;
}

/* --------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--linen);
  padding-block: var(--s-7);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linen);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--driftwood-ink);
  max-width: 78ch;
}

/* ------------------------------------------------------------- utility */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--espresso);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--espresso);
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

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

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

.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-7); }
.prose ul { max-width: var(--measure); }
.prose li { padding-block: var(--s-2); }
.prose li + li { border-top: 1px solid var(--linen); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}