/* Landing page only (docs/design/index.html, ported). Shared tokens and header are in styles.css.
   Layout: survey-sheet grid. Left-aligned text on a 1160px frame; the hero pairs the pitch with a
   batch console; status colours (fixed / review / needs supplier) are the visual language everywhere. */

p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 750;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  font-stretch: 90%;
}

.section {
  padding-block: clamp(56px, 7vw, 96px);
}

/* In-page links (#how, #sample, #pricing, #faq) land with the section heading about 30% down the
   window, clear of the sticky header, instead of the section's top edge at the very top.
   Offset = 30vh minus the section's top padding and the eyebrow label above the heading. */
.section[id] {
  scroll-margin-top: max(72px, calc(30vh - clamp(56px, 7vw, 96px) - 38px));
}

/* Arriving via an in-page link: the section gets a frame of accent colour along its edges that
   fades towards the centre (like a game's damage indicator), swells as the scroll lands and fades
   out. It is a layer behind the content (isolation keeps it above the section's own background), so
   text colours and contrast never change. Only its opacity animates, so it stays on the GPU. */
.section[id] {
  position: relative;
  isolation: isolate;
}

.section[id]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow:
    inset 0 0 90px 0 color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* One smooth swell and fade. The frame's blur spans many colour levels, so it doesn't band;
   only opacity changes. Same fade with reduced motion: it is not movement. */
@keyframes section-wash {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  30% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
  }
}

/* home.js adds .is-arriving when the smooth scroll is halfway there (never sooner than 0.15 s), so
   the frame peaks as the section lands whatever the distance. Without JavaScript, :target with a
   fixed delay is the fallback. */
.section[id].is-arriving::before {
  will-change: opacity;
  animation: section-wash 1.1s both;
}

html:not(.js) .section[id]:target::before {
  will-change: opacity;
  animation: section-wash 1.1s 0.25s both;
}

.section--tint {
  background: var(--sunken);
  border-block: 1px solid var(--line);
}

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

.stack--loose {
  gap: 24px;
}

.stack--tight {
  gap: 12px;
}

.lede {
  color: var(--muted);
  max-width: var(--measure);
  font-size: 1.05rem;
}

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

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 88px);
}

/* the console's table needs ~31rem; give it more of the row than the design's 1 : 1.08 */
@media (min-width: 1024px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 1200px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 980px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.deadline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--muted);
  width: fit-content;
}

.deadline b,
.deadline .nowrap {
  white-space: nowrap;
}

.deadline b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-bg);
}

.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.1rem);
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.015em;
}

.hero h1 span {
  color: var(--accent);
}

.hero .sub {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 54ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.9rem;
  color: var(--muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.trust li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.trust li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--ok);
  -webkit-mask: url("/img/check.svg") center / contain no-repeat;
  mask: url("/img/check.svg") center / contain no-repeat;
}

.coord-tag {
  position: absolute;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted); /* full opacity: the design's 0.7 fell below AA contrast */
}

/* ---------------------------------------------------------------- console */

.console {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}

.console__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.console__file {
  font-family: var(--font-mono);
  color: var(--ink);
}

.console__state {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 17ch; /* fixed box: the animated text must not shift layout */
  text-align: right;
}

.table-scroll {
  overflow-x: auto;
}

/* Fixed table layout: column widths never depend on cell content, so swapping raw and fixed values
   during the animation cannot move anything. IBM Plex Mono advances are exactly 0.6em, so at 0.8rem
   one character is 0.48rem. The result column takes the remaining width; its note may wrap. */
.batch {
  --pad: 8px;
  --edge: 14px;
  --ch: 0.48rem;
  width: 100%;
  min-width: 31rem; /* below this the table scrolls (only under ~520px viewports) */
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .batch {
    --pad: 5px;
    --edge: 10px;
    min-width: 28.5rem;
  }
}

.batch th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 8px var(--pad);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.batch td {
  padding: 8px var(--pad);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.batch th:first-child,
.batch td:first-child {
  padding-left: var(--edge);
}

.batch th:last-child,
.batch td:last-child {
  padding-right: var(--edge);
  white-space: normal;
}

.batch th:nth-child(1) { width: calc(4 * var(--ch) + var(--edge) + var(--pad)); }
.batch th:nth-child(2),
.batch th:nth-child(3) { width: calc(9 * var(--ch) + 2 * var(--pad)); }
.batch th:nth-child(4) { width: calc(3 * var(--ch) + 2 * var(--pad)); }
.batch th:nth-child(5) { width: calc(10 * var(--ch) + 2 * var(--pad)); }

.batch tr:last-child td {
  border-bottom: 0;
}

.batch tr.is-checking td {
  background: var(--accent-soft);
}

.batch td.is-broken {
  background: var(--bad-bg);
  color: var(--bad);
}

.batch td.is-fixed {
  background: var(--ok-bg);
}

.status {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status small {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* "Queued" keeps the row's real note in the layout, invisibly, so row heights never change */
.status small.is-pending {
  visibility: hidden;
}

.chip {
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip--ok {
  color: var(--ok);
  background: var(--ok-bg);
}

.chip--warn {
  color: var(--warn);
  background: var(--warn-bg);
}

.chip--bad {
  color: var(--bad);
  background: var(--bad-bg);
}

.chip--idle {
  color: var(--muted);
  background: var(--sunken);
}

.console__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.tally {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tally + .tally {
  border-left: 1px solid var(--line);
}

.tally b {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tally span {
  font-size: 0.8rem;
  color: var(--muted);
}

.tally--ok b {
  color: var(--ok);
}

.tally--warn b {
  color: var(--warn);
}

.tally--bad b {
  color: var(--bad);
}

.console__note {
  padding: 8px 16px 12px;
  font-size: 0.75rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .batch td {
    transition: none;
  }
}

/* ---------------------------------------------------------------- formats */

.section--formats {
  padding-block: clamp(32px, 4vw, 48px);
}

.formats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.chips li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  font-size: 0.92rem;
}

.formats__note {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- deliverables */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.card p {
  color: var(--muted);
  font-size: 0.97rem;
}

.mini {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.55;
  overflow-x: auto;
  color: var(--ink);
  margin: auto 0 0;
}

.mini .k {
  color: var(--accent);
}

.mini-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

/* ---------------------------------------------------------------- steps */

.steps {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.steps li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
}

.steps li:nth-child(3) {
  border-top-color: var(--accent);
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}

.steps p {
  color: var(--muted);
  font-size: 0.97rem;
}

.step-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

/* ---------------------------------------------------------------- sample */

.sample {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .sample {
    grid-template-columns: minmax(0, 1fr);
  }
}

.report {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.report__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.report__head small {
  color: var(--muted);
  font-size: 0.78rem;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 560px) {
  .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kpi {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi b {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}

.kpi--ok b {
  color: var(--ok);
}

.kpi--warn b {
  color: var(--warn);
}

.kpi--bad b {
  color: var(--bad);
}

.needs {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.needs h4 {
  font-size: 0.88rem;
}

.needs-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  font-size: 0.88rem;
}

.needs-row code {
  color: var(--bad);
}

/* ---------------------------------------------------------------- scope */

.scope {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .scope {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fixlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}

@media (max-width: 600px) {
  .fixlist {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fixlist h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.fixlist ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  background: var(--surface);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: fit-content;
}

.notice p {
  color: var(--muted);
  font-size: 0.95rem;
}

details.tech summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  margin-top: 22px;
}

details.tech .fixlist {
  margin-top: 18px;
}

/* ---------------------------------------------------------------- brokers band */

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

.band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 24px 48px;
  align-items: center;
  padding-block: clamp(44px, 6vw, 72px);
}

@media (max-width: 820px) {
  .band .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.band p {
  opacity: 0.85;
  max-width: 60ch;
}

.band .eyebrow {
  color: inherit;
  opacity: 0.75;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band {
    background: var(--accent-soft);
    color: var(--ink);
    border-block: 1px solid var(--line);
  }

  :root:not([data-theme="light"]) .band h2 {
    color: var(--accent);
  }

  :root:not([data-theme="light"]) .band .btn--invert {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }
}

:root[data-theme="dark"] .band {
  background: var(--accent-soft);
  color: var(--ink);
  border-block: 1px solid var(--line);
}

:root[data-theme="dark"] .band h2 {
  color: var(--accent);
}

:root[data-theme="dark"] .band .btn--invert {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

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

.prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .prices {
    grid-template-columns: minmax(0, 1fr);
  }
}

.price {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price--lead {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.price .amount {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 750;
  font-size: 1.9rem;
  line-height: 1.1;
}

.price p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- about + data */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }
}

.person {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.avatar {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-soft);
  border: 1px solid var(--line);
}

@media (max-width: 639.98px) {
  .person {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .avatar {
    width: 80px;
    height: 80px;
  }
}

.person .stack {
  gap: 12px;
}

.person h2 {
  font-size: 1.6rem;
}

.person p {
  color: var(--muted);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 0.95rem;
}

/* email and LinkedIn at the same size (.mono would shrink the email to 0.86em) */
.contact .mono {
  font-size: 1em;
}

.data {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.data li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 16px;
  padding: 13px 18px;
  font-size: 0.95rem;
}

.data li + li {
  border-top: 1px solid var(--line);
}

.data span {
  color: var(--muted);
}

@media (max-width: 480px) {
  .data li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---------------------------------------------------------------- FAQ */

.faq {
  max-width: 780px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  position: relative;
  font-weight: 600;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--muted);
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  padding-bottom: 18px;
  color: var(--muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- final CTA */

.final .wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.final h2 {
  max-width: 20ch;
}

.final .mono {
  color: var(--muted);
}