/* ============================================================
   Recto landing — the hero band and its document viewer. Palette,
   type and the no-radius/no-shadow rule all come from tokens.css,
   which must be loaded first; what is left here is the layout the
   homepage does not share with any other page.
   ============================================================ */

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

/* Beats the class rules below that set a display value. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  transition: background .18s, color .18s;
}

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

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

/* Every band runs the full width of the window so its hairline reaches
   the screen edge; the frame inside holds the columns to a measure.
   That is how the rest of the site is built, and without it the page
   reads as a small card marooned on a large display. */
.frame { width: 100%; max-width: var(--measure); margin: 0 auto; }

/* The hero takes whatever height the other bands leave, so a tall
   window ends in the footer rather than in a field of empty ground. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.band--hero { flex: 1 0 auto; display: grid; }
.band--rule { border-top: 1px solid var(--rule); }

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

.head { border-bottom: 1px solid var(--rule); }
.head__in {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--head);
}
.head__logo { color: var(--strong); font-weight: 600; letter-spacing: .04em; }
.head__nav { display: flex; gap: 20px; margin-left: auto; }
.head__nav a { color: inherit; text-decoration: none; }
.head__nav a:hover { color: var(--strong); }


.head__cta {
  text-decoration: none;
  background: var(--cta-bg);
  color: var(--cta-ink);
  padding: 7px 13px;
  font-weight: 600;
}

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

.hero {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  grid-template-areas: "rail demo resp";
  align-items: stretch;
}

.rail {
  grid-area: rail;
  padding: 44px 26px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.rail h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--strong);
  text-wrap: pretty;
}
.rail p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.stack { display: flex; flex-direction: column; gap: 9px; }

.btn {
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--btn);
  color: var(--ink);
  padding: 11px 16px;
  font-weight: 400;
}

.rail__foot {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.9;
}

/* ---------- centre: document viewer ---------- */

/* The hero stretches to the bottom of the window, so on a tall screen
   the viewer centres in its column rather than hanging from the top. */
.demo {
  grid-area: demo;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 30px;
  background: var(--panel);
}

.tabs {
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--rule);
  border-bottom: 0;
}
.tabs button {
  padding: 9px 16px;
  border: 0;
  border-right: 1px solid var(--box-rule);
  cursor: pointer;
  font: inherit;
  background: transparent;
  color: var(--dim);
}
.tabs button[aria-pressed="true"] { background: var(--tab-bg); color: var(--tab-ink); }
.tabs__ms { margin-left: auto; padding: 9px 14px; color: var(--dim); }

.doc {
  border: 1px solid var(--rule);
  background: var(--stage);
  padding: 16px 14px;
  overflow: hidden;
}

/* The stage is the scan's own 1009x977, so it keeps its proportions
   at any width and the document decides how tall the panel is. Word
   boxes are percentages of the sheet, which locks them to the
   artwork however far it gets scaled. */
.stage {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 1009 / 977;
  margin: 0 auto;
}
.sheet { position: absolute; inset: 0; }
.sheet img { display: block; width: 100%; height: 100%; transition: opacity .2s; }
.is-scanning .sheet img { opacity: .45; }

.box {
  position: absolute;
  padding: 0;
  border: 1px solid var(--box-rule);
  background: transparent;
  cursor: crosshair;
  transition: background .12s, border-color .12s;
}
.box.is-low { background: var(--box-low); }
.box.is-hot { border-color: var(--accent); background: var(--box-hover); }

.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -18%;
  height: 18%;
  background: linear-gradient(#FFB00000, #FFB00055, #FFB00000);
  animation: rectoScan .62s linear infinite;
  pointer-events: none;
}
/* Percentages on `top` resolve against the stage, so the bar crosses
   the whole document at whatever size the stage happens to be. The
   prototype animated translateY, whose percentages resolve against
   the bar itself — which is why its sweep stopped a fifth down. */
@keyframes rectoScan {
  from { top: -18%; }
  to   { top: 100%; }
}

.md {
  position: absolute;
  inset: 0;
  background: var(--stage);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.65;
  color: #3a3a44;
  overflow: hidden;
}

.readout {
  border: 1px solid var(--rule);
  border-top: 0;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--body);
}

/* ---------- right: response panel ---------- */

.resp {
  grid-area: resp;
  border-left: 1px solid var(--rule);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 14px 0;
  overflow: hidden;
}
.resp__label { padding: 0 14px 10px; color: var(--dim); letter-spacing: .08em; }
.resp__rows { display: flex; flex-direction: column; gap: 2px; }
.resp__row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 4px;
  color: var(--dim);
}
.resp__row.is-hot { background: var(--accent); color: var(--accent-ink); }
.resp__md { padding: 0 14px; white-space: pre-wrap; line-height: 1.6; color: var(--body); }

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

.foot { border-top: 1px solid var(--rule); }
.foot__in {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 28px 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
}
.foot__mark { color: var(--strong); font-weight: 600; letter-spacing: .04em; }
.foot__nav { display: flex; gap: 20px; margin-left: auto; }
.foot__nav a { color: var(--body); text-decoration: none; }
.foot__nav a:hover { color: var(--strong); }

/* ---------- feature band ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cell { padding: 24px 26px; border-right: 1px solid var(--rule); }
.cell__kicker { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); margin-bottom: 8px; }
.cell p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body); }

.cell--cta {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  border-right: 0;
}
.cell__strong { font-size: 17px; font-weight: 600; color: var(--strong); letter-spacing: -.02em; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   Folding

   Three things want the width: a 300px copy rail, a document that
   is only worth looking at above about 340px, and the response
   beside it. They give way in that order.
   ============================================================ */

/* Both rails plus the document need ~1120px. First to go is the copy
   rail, which crosses the top and splits in two — the response stays
   next to the document, the pairing the whole demo depends on. */
@media (max-width: 1120px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 270px;
    grid-template-areas:
      "rail rail"
      "demo resp";
  }
  /* Two columns, filled in source order: the headline with the buttons
     under it on the left, the sentence with the small print on the
     right. Nothing is reordered, so the reading order still holds. */
  .rail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 22px 44px;
    padding: 34px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .rail h1 { font-size: clamp(30px, 4.2vw, 38px); }
  .rail__foot { margin-top: 0; }
  .demo { padding: 22px; }
}

/* Below ~700 the response can no longer sit beside a document worth
   reading, so it goes underneath — the order the markup was already
   in, which is also the order the story is told in. */
@media (max-width: 700px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rail"
      "demo"
      "resp";
  }
  /* One column, but the copy keeps a measure: a full-width amber slab
     and a 70-character line are both worse than the design's 300px. */
  .rail { grid-template-columns: minmax(0, 1fr); padding: 30px 18px; }
  .rail h1, .rail p { max-width: 34ch; }
  .rail .stack { max-width: 340px; }
  .demo { padding: 18px 16px; }
  .resp { border-left: 0; border-top: 1px solid var(--rule); }
  .resp__label, .resp__md { padding-left: 18px; padding-right: 18px; }
  .resp__rows { padding: 0 14px; }
  .tabs button { padding: 9px 13px; }
  .tabs__ms { padding: 9px 11px; }
}

/* The feature band: four across, then two, then one. Each step hands
   the vertical hairlines over to horizontal ones so the grid still
   reads as a grid. */
@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell, .cell--cta { border-bottom: 1px solid var(--rule); }
  .cell:nth-child(2n) { border-right: 0; }
  .features > :nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 560px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .cell, .cell--cta { border-right: 0; border-bottom: 1px solid var(--rule); padding: 20px 18px; }
  .features > :last-child { border-bottom: 0; }
}

/* The header. The version tag and the header's own Start free go
   first — the rail and the last feature cell both still offer it. */
@media (max-width: 860px) {
  .head__in { gap: 18px; padding: 13px 18px; }
  .head__nav { gap: 16px; }
  .foot__in { padding: 20px 18px 26px; }
}

@media (max-width: 560px) {
  .head__in { gap: 14px; padding: 12px 16px; }
  .head__ver, .head__cta { display: none; }
  .head__nav { gap: 14px; }
  .foot__in { gap: 14px; padding: 20px 16px 26px; font-size: 11px; }
  .foot__nav { gap: 16px; }
}

/* Once the frame is at its full measure the rails widen a little and the
   document grows with them, rather than the page sitting in the middle of
   a large screen at the size it happened to be drawn at. */
@media (min-width: 1260px) {
  .hero { grid-template-columns: 340px minmax(0, 1fr) 320px; }
  .stage { width: min(460px, 100%); }
  .rail { padding: 52px 32px; }
  .rail h1 { font-size: 42px; }
  .cell, .cell--cta { padding: 28px 32px; }
  .head__in, .foot__in { padding-left: 34px; padding-right: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scan { opacity: .5; top: 41%; }
}