/* ============================================================
   PRODUCT — /product/  (a candidate home page, under review; noindex)
   Colour, type, buttons, the FAQ, the closer form and the reveal come from
   /styles.css, so both themes work unchanged and nothing here is authored
   outside the token set.

   WHAT IS DIFFERENT FROM /. The current home page leads with the mechanism:
   a lifecycle diagram, six stages, a security grid. This page leads with the
   consequence — what lands on the reader's side of the table — and keeps ONE
   mechanism section (the reviewed pull request) as the proof beneath it.
   The rest of the machinery is one click deep: /security/, /integrations/,
   /compare/, /doc/.

   Three sources of consequence copy that need no statistics, because the
   product is in private beta and there are no numbers to show:
     1. promises that hold by construction (fail-open paging, no merge rights,
        tested before review, ordinary code in your repo);
     2. scenes — a recognisable Tuesday for each person on the team;
     3. the artefact itself, drawn: the pull request and the escalation.
   Nothing on this page is a measurement.
   ============================================================ */

/* ---------- hero: statement + lede, then the two artefacts ---------- */
.v2-hero { padding: clamp(40px, 5.5vw, 76px) 0 0; }
.v2-hero .tag { margin-bottom: 22px; }
.v2-hero h1 { font-size: clamp(36px, 5.2vw, 66px); max-width: 17ch; letter-spacing: -0.032em; line-height: 1.04; }
.v2-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 4.4vw, 72px); align-items: end;
}
.v2-hero-side { display: grid; gap: 22px; padding-bottom: 6px; }
.v2-hero .lede { max-width: 46ch; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.55; }
.v2-hero .lede b { color: var(--ink); font-weight: 600; }
.v2-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.v2-note { font-size: 14px; color: var(--ink-2); }
@media (max-width: 960px) {
  .v2-hero-grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .v2-hero h1 { max-width: 20ch; }
}

/* the board: what lands on your side. A dotted field, two documents on it. */
.v2-board { margin: clamp(40px, 5vw, 64px) 0 0; }
.v2-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.v2-board-head .tag em { color: var(--ink-3); font-weight: 400; letter-spacing: .06em; }
.v2-field {
  border: 1px solid var(--rule); border-radius: 14px; padding: clamp(14px, 2.4vw, 30px);
  background:
    radial-gradient(circle at 1px 1px, var(--rule-strong) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg-2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px);
}
.v2-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 20px 22px 18px; min-width: 0; display: grid; gap: 14px; align-content: start;
  box-shadow: 0 14px 34px oklch(0.15 0.02 274 / 0.07);
}
.v2-kicker { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.v2-kicker svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.v2-kicker span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.v2-chip {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  color: var(--accent-hover); background: var(--accent-soft);
}
.v2-chip.ok { color: oklch(0.42 0.13 155); background: oklch(0.62 0.13 155 / 0.14); }
[data-theme="dark"] .v2-chip.ok { color: oklch(0.80 0.13 155); }
.v2-card h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.016em; line-height: 1.3; }
.v2-ref { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); letter-spacing: .01em; margin-top: -6px; }
.v2-ref b { color: var(--ink); font-weight: 500; }
.v2-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.v2-lines li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.v2-lines li b { color: var(--ink); font-weight: 600; }
.v2-lines svg { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.v2-lines .ok svg { color: var(--ok); }
/* label : value rows on the escalation */
.v2-kv { margin: 0; display: grid; gap: 9px; }
.v2-kv div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; font-size: 14.5px; line-height: 1.45; }
.v2-kv dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.v2-kv dd { margin: 0; color: var(--ink-2); }
.v2-kv dd b { color: var(--ink); font-weight: 600; }
.v2-card-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 2px;
  font-size: 13.5px; color: var(--ink-2);
}
.v2-card-foot .v2-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--rule-strong); border-radius: 5px; color: var(--ink);
}
.v2-card-foot .v2-btn.primary { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }
.v2-card-foot em { font-style: normal; margin-left: auto; }
@media (max-width: 860px) {
  .v2-field { grid-template-columns: 1fr; }
  .v2-card-foot em { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .v2-kicker { grid-template-columns: 18px minmax(0, 1fr); row-gap: 8px; }
  .v2-chip { grid-column: 2; justify-self: start; margin-left: 0; }
}
@media (max-width: 420px) { .v2-kv div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- promises: four things that hold every time ---------- */
.v2-promises { padding-bottom: 0; }
.v2-promises .v2-head p { max-width: 58ch; }
.v2-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: 40px; }
.v2-four > div { border-top: 1px solid var(--ink); padding-top: 20px; min-width: 0; }
.v2-four h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.v2-four p { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.v2-four .n { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--accent-hover); margin-bottom: 12px; }
@media (max-width: 960px) { .v2-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v2-four { grid-template-columns: 1fr; gap: 0; } .v2-four > div { padding: 22px 0 24px; } }

/* section head shared on this page: eyebrow, soft heading, optional line */
.v2-head { display: grid; gap: 14px; max-width: 60ch; }
.v2-head p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }

/* ---------- scenes: three people, one week ---------- */
.v2-scenes { background: var(--bg-2); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.v2-scene {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.4vw, 72px); align-items: center;
  padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--rule);
}
.v2-scene:first-of-type { margin-top: 44px; }
.v2-scene:nth-of-type(even) > .v2-scene-copy { order: 2; }
.v2-scene-copy { min-width: 0; }
.v2-scene .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hover); }
.v2-scene h3 { margin: 14px 0 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.022em; line-height: 1.22; max-width: 22ch; }
.v2-scene p { margin-top: 16px; color: var(--ink-2); font-size: 16px; line-height: 1.62; max-width: 50ch; }
.v2-scene figure { margin: 0; min-width: 0; }
.v2-scene svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .v2-scene { grid-template-columns: 1fr; gap: 26px; }
  .v2-scene:nth-of-type(even) > .v2-scene-copy { order: 0; }
  .v2-scene figure { max-width: 520px; }
}

/* ---------- how it ships: the one mechanism, then the doors to the rest ---------- */
.v2-ships .flow { margin-top: 44px; }
.v2-deeper {
  margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--rule); padding-top: 22px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
}
.v2-deeper .tag { margin-right: 6px; }
.v2-deeper a { font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; }
.v2-deeper a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- on your stack: one quiet ruled row ---------- */
.v2-stack { padding-top: 0; }
.v2-stack-in {
  border-top: 1px solid var(--ink); padding-top: 24px;
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 24px 32px; align-items: start;
}
.v2-stack-in p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 66ch; }
.v2-stack-in p b { color: var(--ink); font-weight: 600; }
.v2-stack-in .btn-link { white-space: nowrap; }
@media (max-width: 820px) { .v2-stack-in { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- FAQ: the house component, soft heading ---------- */
.v2-faq .faq { margin-top: 40px; }

/* ---------- closer: the brand dark band and the same form as / ---------- */
.v2-closer .display-soft { color: var(--panel-ink); max-width: 20ch; }
.v2-closer .closer-aside p { max-width: 44ch; }