/* Integra landing page — layout only. Tokens in tokens.css, primitives in base.css. */

/* Smooth anchor scrolling, motion-permitting */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--blurple); color: var(--accent-ink); }

/* Primary CTA — base.css fills it with --blurple, on which Paper copy measures
   4.42:1: under the 4.5:1 AA floor for the button's 15px/600 label, and this
   is the site's main call to action. --blurple-strong is the same blue one
   step down — it is already the light theme's --blurple-text, so no new colour
   enters the palette. Paper on it: 5.23:1. As a fill it still reads 3.33:1
   against the dark page and 5.23:1 against Paper, both clear of the 3:1
   non-text floor. This belongs in tokens.css + base.css; it is scoped here
   because both are locked files. Hover keeps base.css's --haze step. */
:root { --blurple-strong: #4E5ADF; }
.btn-accent { background: var(--blurple-strong); border-color: var(--blurple-strong); }

/* Balanced rag on display type */
h1, h2, .band-motto, .contracts-note { text-wrap: balance; }

/* Scroll reveal — landing.js adds html.js, then .is-visible per section.
   Hidden state exists ONLY with JS present AND motion permitted: with JS
   off or reduced motion on, everything below renders fully visible. */
@media (prefers-reduced-motion: no-preference) {
  html.js main .section {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  html.js main .section.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media print {
  html.js main .section { opacity: 1; transform: none; }
}

/* ---- 1 · Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.header-brand { display: inline-flex; align-items: center; }
/* Both themes wear the badged lockup at the same 28px (spec §1: 28–32px), so
   the brand block is identical in size and shape either side of a theme
   toggle — nothing in the header moves. */
.header-lockup { height: 28px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; gap: var(--s6); }
.nav-link { position: relative; color: var(--ink); font-size: 15px; font-weight: 500; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-fast) var(--ease);
}
.nav-link:hover, .nav-link.is-current { color: var(--blurple-text); }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-current::after { transform: scaleX(1); }
.btn-signin { padding: 10px 18px; font-size: 14px; }

@media (max-width: 700px) {
  .nav-link { font-size: 13px; }
  .header-nav { gap: var(--s4); }
  .btn-signin { padding: 8px 12px; font-size: 13px; }
}
/* Below ~480px the 28px lockup plus both anchors plus the button cannot fit
   the container; keep "How it works" and drop only the second anchor. The
   theme toggle adds 36px + a gap, so the gap tightens here and the last
   anchor goes at 420px — measured against the worst case (360px viewport,
   8vw padding each side = 302px of content column). */
@media (max-width: 480px) {
  .nav-link[href="#see"] { display: none; }
  .header-nav { gap: var(--s3); }
}
@media (max-width: 420px) {
  .nav-link[href="#how"] { display: none; }
}

/* ---- Shared section rhythm ----
   Alternating density: hero (widest air) → ink statement → dense detail →
   airy mock → dense grid → whitespace one-liner. All steps on the 8px scale. */
.section { padding: var(--s9) 0; }
#how, .reach { padding: var(--s8) 0; }

/* Section-opening rule: spans exactly the content column, with the mono
   number + eyebrow sitting on the line. */
.section-eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  max-width: none;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s6);
}
.section-num { color: var(--blurple-text); font-weight: 500; }
.section-title { margin-bottom: var(--s5); }
.section-lede { margin-bottom: var(--s7); }

@media (max-width: 700px) {
  .section, .section.hero { padding: var(--s8) 0; }
  #how, .section.reach { padding: var(--s7) 0; }
}

/* Anchor targets clear the sticky header */
#how, #see { scroll-margin-top: 80px; }

/* ---- 2 · Hero ---- */
.hero { padding: calc(var(--s9) + var(--s5)) 0; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); }
.hero-eyebrow { margin-bottom: var(--s5); }
.hero-sub { font-size: 17px; max-width: 56ch; margin-bottom: var(--s7); }
.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--s6);
  flex-wrap: wrap;
}
.hero-demo { font-weight: 500; font-size: 15px; }

/* ---- 3 · The problem (Ink band) ---- */
/* A dark band in BOTH themes. On light it is brand Ink against Paper and needs
   no edge. On dark it lifts one step above the page (#211F29 vs #16151B) and
   takes a hairline top and bottom, so it reads as a band instead of
   dissolving into the page — the edge is transparent on light, so the 1px
   is in the box model either way and the layout does not move between themes.
   Copy: 16.38:1 on light, 14.54:1 on dark; the muted lines 7.54:1 / 6.88:1. */

/* On dark the seam has to carry the band: the fill is only 1.12:1 against the
   page, and --band-edge resolves to --rule there — 1.26:1 against the page,
   1.13:1 against the band — so neither reads and the band vanishes. --band-seam
   lifts ONLY that hairline, to #4A4857: 2.05:1 against the page (L* 31.3 vs the
   page's 7.1), visible without becoming a bright rule. Light never defines the
   token, so the fallback keeps --band-edge (transparent) and the black slab
   keeps its hard, unoutlined edge. This belongs in tokens.css as the dark
   --band-edge; it is scoped here because tokens.css is a locked file. */
:root[data-theme="dark"] { --band-seam: #4A4857; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-seam: #4A4857; }
}

.band-ink {
  background: var(--band-surface);
  color: var(--band-ink);
  border-top: 1px solid var(--band-seam, var(--band-edge));
  border-bottom: 1px solid var(--band-seam, var(--band-edge));
}
.band-mark { display: block; margin-bottom: var(--s7); }
.band-lede {
  color: var(--band-ink);
  opacity: 0.65;
  margin-bottom: var(--s6);
}
.band-motto {
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--band-ink);
  max-width: 24ch;
  margin: 0 0 var(--s6);
}
.band-note {
  color: var(--band-ink);
  opacity: 0.65;
  margin-bottom: 0;
}

/* ---- 4 · How it works ---- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s4);
  padding: var(--s6) 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step-num {
  font-size: 15px;
  font-weight: 500;
  color: var(--blurple-text);
  line-height: 1.7;
}
.step-body h3 { margin-bottom: var(--s2); }
.step-body p { margin-bottom: 0; }
.step-body p + p { margin-top: var(--s3); }
.step-tag { display: inline-block; }

@media (max-width: 480px) {
  .step { grid-template-columns: 48px 1fr; }
}

/* ---- 5 · What you see — dashboard mock ---- */
.mock { margin: 0; }
/* No max-width: the frame fills the content column, so its right edge lands on
   the same line as the section rule above it and the caption below it. */
.mock-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
/* Window-title bar: the mock reads as a precise product miniature */
.mock-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.mock-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.13em;
  color: var(--graphite);
}
.mock-inner { padding: var(--s5); }
.mock-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--graphite);
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}
.mock-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 var(--s4);
  border-left: 1px solid var(--rule);
  min-width: 0;
}
.mock-stat:first-child { border-left: 0; padding-left: 0; }
.mock-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
}
.mock-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.mock-sub {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--graphite);
  white-space: nowrap;
}

.mock-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s6);
  padding-top: var(--s5);
}
.mock-chart { min-width: 0; }
.mock-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s3);
}
.mock-ranges {
  display: inline-flex;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--graphite);
}
.mock-ranges .is-active {
  color: var(--blurple-text);
  border-bottom: 2px solid var(--blurple);
  padding-bottom: 1px;
}
.mock-chart-svg { display: block; width: 100%; height: auto; }
.mock-chart-svg .grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.mock-chart-svg .series {
  fill: none;
  stroke: var(--blurple);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.mock-chart-svg .series-dot { fill: var(--blurple); }
.mock-chart-svg .t {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 9px;
  fill: var(--graphite);
}
.mock-chart-svg .t-end { fill: var(--ink); font-size: 10px; font-weight: 500; }

.mock-streak { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.mock-streak-svg { display: block; width: 100%; max-width: 195px; height: auto; }
.mock-streak-svg .on { fill: var(--blurple); }
.mock-streak-svg .off { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.mock-streak-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.mock-caption {
  font-size: 13px;
  color: var(--graphite);
  margin-top: var(--s4);
}

@media (max-width: 700px) {
  .mock-inner { padding: var(--s4); }
  /* 2×2. The row gap is carried by cell padding, not by row-gap, so the
     vertical hairline runs unbroken down both rows and the two rows are
     separated by a hairline of their own — every boundary in the grid is a
     continuous rule, which is the only structure device the brand has. */
  .mock-stats { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .mock-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mock-stat:nth-child(-n+2) { padding-bottom: var(--s4); }
  .mock-stat:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: var(--s4); }
  .mock-body { grid-template-columns: 1fr; }
}

/* ---- 6 · Where it reaches you ---- */
.reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s6);
  margin-top: var(--s7);
}
.reach-item {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
}
.reach-label { margin-bottom: var(--s3); }
.reach-item p:last-child { margin-bottom: 0; }

/* ---- 7 · Contracts note ---- */
.contracts-note {
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -0.005em;
  line-height: 1.35;
  max-width: var(--measure);
  margin: 0;
}

/* ---- 8 · Footer ---- */
/* Same dark band as §3, so the Paper wordmark and mark stay correct in both
   themes. The hairline top only appears on dark, where the footer would
   otherwise butt straight onto a near-identical page surface. */
.site-footer {
  background: var(--band-surface);
  color: var(--band-ink);
  border-top: 1px solid var(--band-seam, var(--band-edge));
  padding: var(--s8) 0;
}
.footer-wordmark {
  height: 20px;
  width: auto;
  display: block;
  margin-bottom: var(--s6);
}
.footer-tagline {
  color: var(--band-ink);
  margin-bottom: var(--s6);
}
/* 5.79:1 light / 5.33:1 dark at this opacity — quiet, still readable. */
.footer-meta {
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--band-ink);
  opacity: 0.55;
  margin: 0;
}