/* =========================================================================
   Fireside Ventures — site layout
   Consumes tokens.css (copied verbatim from the design system). All colors,
   type, spacing come from tokens; this file only arranges the page.
   Rules of the system: hairlines over shadows, ember at most twice per
   screen, sentence case, one content column at --measure for reading.
   ========================================================================= */

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

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

body {
  margin: 0;
  font-size: var(--t-body);
}

img { max-width: 100%; height: auto; }

/* Skip link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -48px;
  z-index: var(--z-overlay);
  background: var(--paper-elev);
  color: var(--ink);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  transition: top 120ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.skip-link:focus-visible { top: var(--sp-3); }

/* ---------------------------------------------------------------------
   Header — sticky, paper background, hairline. No blur, no shadow.
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 22px; width: auto; }
.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.site-header nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-small);
  transition: color 120ms ease;
}
.site-header nav a:hover { color: var(--ember); }
.site-header nav a.nav-cta {
  color: var(--paper-elev);
  background: var(--ink);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-weight: 500;
  transition: background 120ms ease;
}
.site-header nav a.nav-cta:hover { background: var(--ink-2); color: var(--paper-elev); }

@media (max-width: 640px) {
  .site-header nav { gap: var(--sp-4); }
  .site-header nav a.nav-proof { display: none; }
  .site-header nav a.nav-cta { padding: var(--sp-2) var(--sp-3); }
}
@media (max-width: 480px) {
  .site-header nav a:not(.nav-cta) { display: none; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero { padding-block: var(--sp-9) var(--sp-8); }
.hero h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-display-fluid);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin: var(--sp-4) 0 var(--sp-5);
  max-width: 24ch;
}
.hero .subhead {
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 0 var(--sp-6);
}
.hero-cta { margin: 0 0 var(--sp-3); }
.under-cta {
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--ink-3);
  margin: 0;
}

/* Buttons are <a> here, not <button> */
a.fs-btn { display: inline-block; text-decoration: none; }

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.section {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8);
  scroll-margin-top: 72px;
}
@media (min-width: 1024px) {
  .section { padding-block: var(--sp-9); }
}

.section h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: var(--ink);
  margin: 0 0 var(--sp-5);
  max-width: 26ch;
}
@media (max-width: 640px) {
  .section h2 { font-size: var(--t-h2); }
}

.section-intro {
  color: var(--ink-2);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-6);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Workflow micro-pattern card (Trigger / What it does / Outcome)
   --------------------------------------------------------------------- */
.workflow-card {
  margin-top: var(--sp-6);
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  max-width: 560px;
}
.workflow { margin: var(--sp-3) 0 0; }
.workflow > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}
.workflow > div + div { border-top: 1px solid var(--rule); }
.workflow dt {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.workflow dd { margin: 0; color: var(--ink); }
@media (max-width: 480px) {
  .workflow > div { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ---------------------------------------------------------------------
   Proof
   --------------------------------------------------------------------- */
.proof-card {
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  max-width: 760px;
}
.proof-card > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: var(--measure);
}
.stat-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: var(--sp-6);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--rule);
}
.stat-strip li { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-lg);
  line-height: var(--lh-mono-lg);
  letter-spacing: var(--tr-mono-lg);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.stat-strip li:last-child .stat { color: var(--ember); }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, auto); gap: var(--sp-5); }
  .stat { font-size: 22px; }
}
.bridge {
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--ink-2);
  max-width: var(--measure);
  margin: var(--sp-5) 0 0;
}

/* ---------------------------------------------------------------------
   How it works — three steps
   --------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-6);
}
.step-num {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink-3);
  margin: 0 0 var(--sp-2);
}
.step h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  margin: 0 0 var(--sp-2);
}
.step p:last-child {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 768px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .step { border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
  .steps .step:first-child { border-top: none; padding-top: 0; }
}

/* ---------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.price-card {
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.price-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  margin: 0 0 var(--sp-3);
}
.price-card .price { margin: 0; }
.price-card .fs-mono-lg { font-size: 22px; }
.price-meta {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-caption);
  color: var(--ink-3);
  margin: var(--sp-1) 0 var(--sp-3);
}
.price-card > p:last-child {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
}
.how-to-start {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin: var(--sp-6) 0 var(--sp-4);
}

/* ---------------------------------------------------------------------
   Contact + footer
   --------------------------------------------------------------------- */
.contact-cta { margin: var(--sp-5) 0 var(--sp-3); }
.contact-plain { font-size: var(--t-small); color: var(--ink-2); margin: 0; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-6) var(--sp-7);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.footer-inner img { height: 18px; width: auto; }
.footer-inner p { margin: 0; }
.footer-inner p:last-child { margin-left: auto; }
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner p:last-child { margin-left: 0; }
}

/* ---------------------------------------------------------------------
   Wide screens — keep the page readable at 4k. The container caps at
   --container (1080px); bump base size slightly past 1600px.
   --------------------------------------------------------------------- */
@media (min-width: 1600px) {
  body { font-size: 16px; }
}