/* =================================================================
   Autoprinter marketing site — V2 storyboard styles
   Layered on top of /styles.css. Only adds v2-specific classes
   (`.v2-*`). Inherits CSS variables (--paper, --ink, --honey, etc.)
   from the parent stylesheet so light/dark theme works for free.
   ================================================================= */

/* Section spacing — slightly tighter than mk-section default to
   keep the 5-frame journey scrolling at a brisk pace. */
.v2-section { padding: 80px 32px; }
@media (min-width: 768px) { .v2-section { padding: 96px 48px; } }

/* =================================================================
   HERO HEADLINE — override V1's muted `em` color into the honey
   accent. The /v2 punchline "1-Click Printing." is the conversion-
   clinching beat — it must read STRONGER than the lines above it,
   not weaker. V1's shared rule at styles.css `.mk-headline em` set
   `color: var(--ink-4)` (the lightest grey), which was right for V1's
   different copy intent but exactly wrong here. /how-it-works
   already uses --honey-ink for the same em pattern — this mirrors it.
   ================================================================= */
.v2-hero .mk-headline em {
  color: var(--honey-ink);
}
[data-theme="dark"] .v2-hero .mk-headline em {
  /* On the dark hero, honey-ink reads too brown — bump to the
     brighter --honey hue for the same emphasis on dark paper. */
  color: var(--honey);
}

/* =================================================================
   NETWORK LINES (Section 5) — bump SVG path visibility above the
   default `var(--rule)` (too faint to read as routing logic on
   either theme). Honey-wash at 0.5 opacity ties the multi-station
   network visualization into the brand without overpowering content.
   NOTE: Section 2's routing lines used to share this rule but now
   have per-rule inline strokes (orange/purple/teal) so each path
   color-codes which rule fired — they intentionally override per
   inline `stroke` attributes and don't share this CSS rule anymore.
   ================================================================= */
.v2-network__lines path {
  stroke: var(--honey);
  stroke-opacity: 0.55;
  stroke-width: 1.75;
}
[data-theme="dark"] .v2-network__lines path {
  stroke-opacity: 0.65;
}

/* =================================================================
   HERO — compressed Frame 3 (click → printer)
   ================================================================= */
.v2-hero-frame {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 56px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
}
@media (max-width: 720px) {
  .v2-hero-frame {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
}

.v2-frame-side { position: relative; }
.v2-frame-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}

/* Shopify admin mock card (left side of Frame 3) */
.v2-shopify-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}
.v2-shopify-row {
  display: grid;
  grid-template-columns: 1fr 1fr 84px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.v2-shopify-row:last-of-type { border-bottom: 0; }
.v2-shopify-row--head {
  background: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.v2-shopify-row--active {
  background: oklch(0.98 0.015 75);
  border-left: 2px solid var(--honey);
}
[data-theme="dark"] .v2-shopify-row--active {
  background: oklch(0.20 0.02 70);
}
.v2-shopify-row__cell { color: var(--ink-2); }
.v2-shopify-row__cell b { color: var(--ink); font-weight: 600; }
.v2-shopify-row__cell--status { text-align: right; }

.v2-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.v2-badge--paid {
  background: oklch(0.96 0.10 145);
  color: oklch(0.42 0.14 145);
}
[data-theme="dark"] .v2-badge--paid {
  background: oklch(0.32 0.08 145);
  color: oklch(0.85 0.10 145);
}
.v2-badge--amazon {
  background: oklch(0.94 0.08 65);
  color: oklch(0.44 0.14 50);
}
[data-theme="dark"] .v2-badge--amazon {
  background: oklch(0.32 0.08 65);
  color: oklch(0.85 0.10 65);
}
.v2-badge--shopify {
  background: oklch(0.94 0.05 145);
  color: oklch(0.42 0.10 145);
}
[data-theme="dark"] .v2-badge--shopify {
  background: oklch(0.28 0.04 145);
  color: oklch(0.84 0.08 145);
}
.v2-badge--wholesale {
  background: oklch(0.94 0.05 280);
  color: oklch(0.42 0.10 280);
}
[data-theme="dark"] .v2-badge--wholesale {
  background: oklch(0.28 0.04 280);
  color: oklch(0.84 0.08 280);
}

.v2-shopify-card__action {
  padding: 14px;
  background: var(--paper-3);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.v2-shopify-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.v2-shopify-btn:hover { background: var(--ink-2); }
.v2-cursor {
  position: absolute;
  left: 110px;
  top: 18px;
  color: var(--ink);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* Connecting arrow with "missing" labels */
.v2-frame-arrow {
  position: relative;
  height: 80px;
  color: var(--honey);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .v2-frame-arrow { height: 60px; }
  .v2-frame-arrow svg { transform: rotate(90deg); }
}
.v2-frame-arrow__missing {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v2-frame-arrow__missing li {
  display: block;
  line-height: 1.7;
  text-decoration: line-through;
  text-decoration-color: var(--honey);
  text-decoration-thickness: 1px;
}

/* Printer mockup (right side of Frame 3) */
.v2-printer {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  position: relative;
}
.v2-printer__body {
  background: linear-gradient(180deg, var(--paper-3), var(--paper-4));
  height: 40px;
  border-radius: 8px 8px 4px 4px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  position: relative;
}
.v2-printer__light {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}
.v2-printer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.v2-printer__paper {
  background: white;
  margin: -4px 14px 0;
  padding: 14px 16px 20px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--rule);
  border-top: 0;
}
[data-theme="dark"] .v2-printer__paper {
  background: oklch(0.92 0.005 80);
}
.v2-paper-doc { display: flex; flex-direction: column; gap: 6px; color: oklch(0.30 0.01 70); }
.v2-paper-doc__h {
  height: 12px;
  width: 60%;
  background: oklch(0.30 0.01 70);
  border-radius: 2px;
}
.v2-paper-doc__line {
  height: 4px;
  background: oklch(0.70 0.01 70);
  border-radius: 2px;
}
.v2-paper-doc__line--short { width: 60%; }
.v2-paper-doc__row {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 8px;
  margin-top: 2px;
}
.v2-paper-doc__row span {
  height: 4px;
  background: oklch(0.70 0.01 70);
  border-radius: 2px;
}

/* =================================================================
   SECTION 1 — Beautiful documents (fanned carousel)
   ================================================================= */
.v2-doc-fan {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
  position: relative;
  min-height: 340px;
}
@media (max-width: 900px) {
  .v2-doc-fan {
    grid-template-columns: repeat(2, 1fr);
    min-height: auto;
  }
  /* On mobile, span the 5th card to fill its row instead of leaving
     it orphaned half-width below a 2x2 grid. */
  .v2-doc-fan .v2-doc--5 {
    grid-column: 1 / -1;
  }
}

.v2-doc {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: 50% 100%;
}
[data-theme="dark"] .v2-doc { background: oklch(0.94 0.005 80); }

/* Subtle fan rotation on desktop — 5 cards symmetric around the
   center card (index 3). Outer cards rotate more + sit slightly
   lower; center card sits highest, no rotation. Creates a fan arc. */
@media (min-width: 901px) {
  .v2-doc--1 { transform: rotate(-5deg) translateY(10px); }
  .v2-doc--2 { transform: rotate(-2.5deg) translateY(-2px); }
  .v2-doc--3 { transform: rotate(0deg) translateY(-8px); }
  .v2-doc--4 { transform: rotate(2.5deg) translateY(-2px); }
  .v2-doc--5 { transform: rotate(5deg) translateY(10px); }
  .v2-doc:hover {
    transform: rotate(0deg) translateY(-12px);
    z-index: 2;
    box-shadow: 0 16px 36px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
}

.v2-doc__chip {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--paper-3);
  color: var(--ink-3);
  border-radius: 999px;
}
.v2-doc__brand {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: oklch(0.50 0.04 70);
  margin-bottom: 6px;
}
.v2-doc__brand--alt { background: oklch(0.55 0.10 240); }
.v2-doc__h {
  height: 14px;
  width: 70%;
  background: oklch(0.30 0.01 70);
  border-radius: 2px;
}
.v2-doc__line {
  height: 4px;
  background: oklch(0.78 0.01 70);
  border-radius: 2px;
}
.v2-doc__line--short { width: 55%; }
.v2-doc__row {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 8px;
  margin-top: 4px;
}
.v2-doc__row span {
  height: 5px;
  background: oklch(0.78 0.01 70);
  border-radius: 2px;
}
.v2-doc__row--total span {
  background: oklch(0.30 0.01 70);
  height: 6px;
}
.v2-doc__barcode {
  margin-top: auto;
  height: 32px;
  background: repeating-linear-gradient(90deg,
    oklch(0.20 0.01 70) 0 2px,
    transparent 2px 5px,
    oklch(0.20 0.01 70) 5px 7px,
    transparent 7px 9px);
  border-radius: 2px;
}
.v2-doc__qr {
  margin-top: auto;
  height: 60px;
  width: 60px;
  background:
    linear-gradient(90deg, oklch(0.20 0.01 70) 50%, transparent 50%),
    linear-gradient(0deg,  oklch(0.20 0.01 70) 50%, transparent 50%);
  background-size: 10px 10px;
  border: 2px solid oklch(0.20 0.01 70);
  align-self: flex-end;
}
.v2-doc__ribbon {
  height: 6px;
  background: var(--honey);
  border-radius: 999px;
  margin-bottom: 4px;
}

/* Pick slip — distinctive task-list signature.
   Rows show small checkboxes (some "done" = honey-filled, some empty)
   followed by a line representing the item. A thin progress bar
   anchors the bottom of the card showing partial completion. */
.v2-doc__pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.v2-doc__pick-check {
  width: 10px;
  height: 10px;
  border: 1.5px solid oklch(0.40 0.01 70);
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
}
.v2-doc__pick-check--done {
  background: var(--honey);
  border-color: var(--honey);
}
.v2-doc__pick-check--done::after {
  content: '';
  position: absolute;
  left: 2px;
  top: -1px;
  width: 3px;
  height: 6px;
  border: solid oklch(0.20 0.05 70);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.v2-doc__pick-text {
  flex: 1;
  height: 4px;
  background: oklch(0.78 0.01 70);
  border-radius: 2px;
}
.v2-doc__pick-progress {
  margin-top: auto;
  height: 6px;
  background: oklch(0.85 0.01 70);
  border-radius: 999px;
  overflow: hidden;
}
.v2-doc__pick-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 50%;
  background: var(--honey);
  border-radius: 999px;
}

.v2-doc-fan__caption {
  margin-top: 56px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
  font-style: italic;
}

/* =================================================================
   SECTION 2 — Routing (5-col order table + color-coded bezier lines
   + 3 staggered letterhead docs). Three rule conditions in play:
   source / tag / ship-to state. Matched cell per row gets a colored
   pill; SVG line color-matches the rule that fired; destination doc
   color-matches the rule. Sub-grid layout:
     [ orders panel | templates panel (Z-stagger) ]
   with the SVG overlay across the whole v2-routing area so paths
   can travel to any doc position regardless of its grid sub-cell.
   ================================================================= */
.v2-routing {
  position: relative; /* SVG overlay anchor */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 56px;
  align-items: start;
  min-height: 875px;
}
@media (max-width: 900px) {
  .v2-routing {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
  }
  .v2-routing__lines { display: none; }
}

.v2-routing__col-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  margin-bottom: 12px;
}

/* Orders panel — centered vertically against the (taller) templates
   stagger so lines have headroom + tailroom to arc gracefully.
   Z-index 1 keeps it BELOW the SVG lines (z=2) so the lines visibly
   originate AT the matched pill instead of being clipped behind the
   table cells — merchants can trace pill → doc unambiguously. */
.v2-routing__orders {
  position: relative;
  z-index: 1;
  align-self: center;
}

/* SVG line overlay — full-width across the v2-routing grid,
   pointer-events none so it never blocks clicks on pills or docs.
   Z-index 2 puts the lines ABOVE the orders panel (z=1) so each
   line is fully visible from its origin pill outward. Templates
   panel (also z=2 but later in DOM) renders on top of the SVG via
   DOM-order tiebreaker, so lines tuck cleanly under the docs at
   their endpoints — clean "pill → doc" connection both ends. */
.v2-routing__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Order table — 5-col with header row */
.v2-order-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.v2-order-table thead { background: var(--paper-3); }
.v2-order-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.v2-order-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: middle;
  font-size: 13px;
}
.v2-order-table tbody tr:last-child td { border-bottom: 0; }
.v2-order-table__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.v2-order-table__empty {
  color: var(--ink-4);
  font-size: 14px;
  text-align: center;
}

/* Pills — base + per-color variants + matched (highlighted) ring.
   Calm state for non-matched pills (Shopify badge on PO/AZ rows);
   matched pills are the same hue + ring callout in the rule color. */
.v2-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.01em;
  background: var(--paper-3);
  color: var(--ink-3);
  white-space: nowrap;
}
.v2-pill--shopify {
  background: oklch(0.94 0.05 145);
  color: oklch(0.42 0.10 145);
}
[data-theme="dark"] .v2-pill--shopify {
  background: oklch(0.28 0.04 145);
  color: oklch(0.84 0.08 145);
}
.v2-pill--amazon {
  background: oklch(0.94 0.08 65);
  color: oklch(0.44 0.14 50);
}
[data-theme="dark"] .v2-pill--amazon {
  background: oklch(0.32 0.08 65);
  color: oklch(0.85 0.10 65);
}
.v2-pill--tag {
  background: oklch(0.94 0.07 290);
  color: oklch(0.42 0.14 290);
}
[data-theme="dark"] .v2-pill--tag {
  background: oklch(0.28 0.06 290);
  color: oklch(0.84 0.10 290);
}
.v2-pill--state {
  background: oklch(0.93 0.07 200);
  color: oklch(0.42 0.13 200);
}
[data-theme="dark"] .v2-pill--state {
  background: oklch(0.28 0.06 200);
  color: oklch(0.84 0.10 200);
}
/* Matched pill — ring in rule's color to call out the trigger. */
.v2-pill--match.v2-pill--amazon {
  box-shadow: 0 0 0 2px oklch(0.65 0.18 50 / 0.40);
}
.v2-pill--match.v2-pill--tag {
  box-shadow: 0 0 0 2px oklch(0.55 0.16 290 / 0.40);
}
.v2-pill--match.v2-pill--state {
  box-shadow: 0 0 0 2px oklch(0.60 0.14 200 / 0.40);
}

/* Templates panel — Z-stagger layout. 2 internal cols × 3 rows;
   col-label spans both. Doc 1 (Amazon) col 1 row 2 (TL); Doc 2
   (Wholesaler) col 2 row 3 (MR); Doc 3 (Willcall) col 1 row 4 (BL).
   Inner grid is fixed-width (200px each) and justify-content: start
   keeps docs flush left of the right column so SVG line endpoints
   stay predictable. */
.v2-routing__templates {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: auto auto auto auto;
  column-gap: 16px;
  /* Tight row-gap pulls the TL/MR/BL docs slightly closer on the
     Y axis — the Z-pattern is still readable but the cluster feels
     more cohesive rather than three docs floating in separate bands. */
  row-gap: 12px;
  justify-content: start;
}
.v2-routing__templates > .v2-routing__col-label {
  grid-column: 1 / -1;
  grid-row: 1;
}
/* Subtle right-shift per doc. MR (Wholesaler) moves the furthest
   because it sits on the far side of the staggered triangle; TL +
   BL move half as much. Net effect: a more deliberate "the docs
   live in the right half of the section, not the centerline"
   feel without the whole stagger shifting in lockstep.
   Uses `transform: translateX` (NOT margin-left) because the grid
   track is a fixed 200px and a margin would compress the doc's
   own width — the doc would shrink to 200 - margin and headers
   would wrap. Transform visually shifts the doc without affecting
   layout width. getBoundingClientRect (used by the runtime
   line-drawing JS) reflects the post-transform position, so
   routing lines automatically connect to the new doc positions. */
.v2-letterhead--pos-tl { grid-column: 1; grid-row: 2; transform: translateX(20px); }
.v2-letterhead--pos-mr { grid-column: 2; grid-row: 3; transform: translateX(30px); }
.v2-letterhead--pos-bl { grid-column: 1; grid-row: 4; transform: translateX(20px); }
@media (max-width: 900px) {
  .v2-routing__templates {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-content: stretch;
  }
  .v2-letterhead--pos-tl,
  .v2-letterhead--pos-mr,
  .v2-letterhead--pos-bl {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Letterhead-shaped doc render. Each template variant has a distinct
   color accent on the header strip + brand-square hue (matches the
   rule color). Body fills out with abstract content (lines, item
   rows, total, barcode) that hints at a real packing slip without
   being literally legible at thumbnail size. Footer meta strip
   names the rule + match count below the doc. */
.v2-letterhead {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  aspect-ratio: 8.5 / 11; /* letterhead proportions */
  display: flex;
  flex-direction: column;
  position: relative;
}
[data-theme="dark"] .v2-letterhead { background: oklch(0.94 0.005 80); }

.v2-letterhead__header {
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
}
.v2-letterhead--amazon .v2-letterhead__header { background: oklch(0.55 0.16 55); }
.v2-letterhead--wholesale .v2-letterhead__header { background: oklch(0.45 0.16 290); }
.v2-letterhead--willcall .v2-letterhead__header { background: oklch(0.50 0.13 200); }

.v2-letterhead__body {
  flex: 1;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: oklch(0.30 0.01 70);
}

.v2-letterhead__brandrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2-letterhead__brand {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.v2-letterhead--amazon .v2-letterhead__brand { background: oklch(0.55 0.16 55); }
.v2-letterhead--wholesale .v2-letterhead__brand { background: oklch(0.45 0.16 290); }
.v2-letterhead--willcall .v2-letterhead__brand { background: oklch(0.50 0.13 200); }
.v2-letterhead__brandline {
  flex: 1;
  height: 8px;
  background: oklch(0.30 0.01 70);
  border-radius: 2px;
}

.v2-letterhead__addr {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.v2-letterhead__line {
  height: 3px;
  background: oklch(0.75 0.01 70);
  border-radius: 2px;
}
.v2-letterhead__line--short { width: 60%; }

.v2-letterhead__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed oklch(0.80 0.01 70);
}
.v2-letterhead__item {
  display: grid;
  grid-template-columns: 1fr 28%;
  gap: 6px;
}
.v2-letterhead__item span {
  height: 4px;
  background: oklch(0.75 0.01 70);
  border-radius: 2px;
}

.v2-letterhead__total {
  display: grid;
  grid-template-columns: 1fr 28%;
  gap: 6px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid oklch(0.30 0.01 70);
}
.v2-letterhead__total span {
  height: 5px;
  background: oklch(0.30 0.01 70);
  border-radius: 2px;
}

.v2-letterhead__barcode {
  margin-top: auto;
  height: 18px;
  background: repeating-linear-gradient(90deg,
    oklch(0.20 0.01 70) 0 2px,
    transparent 2px 5px,
    oklch(0.20 0.01 70) 5px 7px,
    transparent 7px 9px);
  border-radius: 2px;
}

/* Routing rule callout — sits below the doc body, color-tinted to
   match the rule (orange/purple/teal), with a small uppercase label
   and the rule condition in larger bold text below. Visually reads
   as "this is the rule that fires this doc" rather than incidental
   metadata. Top border in the rule's color is the visible "tab"
   tying the callout to the line color landing on the doc above. */
.v2-letterhead__meta {
  padding: 10px 14px 12px;
  background: var(--paper-2);
  border-top: 2px solid var(--rule);
}
.v2-letterhead__meta-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.v2-letterhead__meta-rule {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  margin-top: 3px;
  color: var(--ink-2);
}

/* Per-rule color tints — bg + border + rule text color all shift
   into the rule's hue (orange Amazon / purple PO tag / teal AZ
   state), tying each doc's footer back to the line color landing
   on it. Subtle enough not to compete with the colored header
   band on the doc itself. */
.v2-letterhead--amazon .v2-letterhead__meta {
  background: oklch(0.95 0.07 65);
  border-top-color: oklch(0.65 0.18 50 / 0.55);
}
.v2-letterhead--amazon .v2-letterhead__meta-rule {
  color: oklch(0.40 0.14 50);
}
[data-theme="dark"] .v2-letterhead--amazon .v2-letterhead__meta {
  background: oklch(0.32 0.08 65);
  border-top-color: oklch(0.65 0.18 50 / 0.65);
}
[data-theme="dark"] .v2-letterhead--amazon .v2-letterhead__meta-rule {
  color: oklch(0.85 0.10 65);
}

.v2-letterhead--wholesale .v2-letterhead__meta {
  background: oklch(0.94 0.07 290);
  border-top-color: oklch(0.55 0.16 290 / 0.55);
}
.v2-letterhead--wholesale .v2-letterhead__meta-rule {
  color: oklch(0.40 0.16 290);
}
[data-theme="dark"] .v2-letterhead--wholesale .v2-letterhead__meta {
  background: oklch(0.28 0.08 290);
  border-top-color: oklch(0.55 0.16 290 / 0.65);
}
[data-theme="dark"] .v2-letterhead--wholesale .v2-letterhead__meta-rule {
  color: oklch(0.84 0.10 290);
}

.v2-letterhead--willcall .v2-letterhead__meta {
  background: oklch(0.93 0.07 200);
  border-top-color: oklch(0.60 0.14 200 / 0.55);
}
.v2-letterhead--willcall .v2-letterhead__meta-rule {
  color: oklch(0.38 0.14 200);
}
[data-theme="dark"] .v2-letterhead--willcall .v2-letterhead__meta {
  background: oklch(0.28 0.08 200);
  border-top-color: oklch(0.60 0.14 200 / 0.65);
}
[data-theme="dark"] .v2-letterhead--willcall .v2-letterhead__meta-rule {
  color: oklch(0.84 0.10 200);
}

/* =================================================================
   SECTION 3 — One click (without/with flow comparison)
   ================================================================= */
.v2-without-with {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.v2-flow-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .v2-flow-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.v2-flow-row__label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.v2-flow-row__label--honey { color: var(--honey-ink); }

.v2-flow-row__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.v2-flow-step {
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}
.v2-flow-step--end {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.v2-flow-step--honey {
  background: oklch(0.96 0.06 75);
  color: var(--honey-ink);
  border-color: var(--honey-line);
}
[data-theme="dark"] .v2-flow-step--honey {
  background: oklch(0.28 0.06 75);
  color: oklch(0.88 0.08 75);
}
.v2-flow-step--end.v2-flow-step--honey {
  background: var(--honey);
  color: oklch(0.20 0.05 70);
  border-color: var(--honey);
}
.v2-flow-step__arrow {
  color: var(--ink-4);
  font-size: 14px;
  padding: 0 2px;
}
.v2-flow-step__arrow--honey { color: var(--honey); }

.v2-missing-banner {
  margin-top: 48px;
  padding: 24px 32px;
  background: var(--paper);
  border: 1px dashed var(--honey-line);
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  color: var(--ink-2);
}
.v2-missing-banner__q {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--honey-ink);
  margin-bottom: 4px;
}

/* =================================================================
   SECTION 4 — Print Chain (bulk-select + queue)
   ================================================================= */
.v2-chain-config {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(120px, 150px) 1fr;
  gap: 52px;
  align-items: center;
}
.v2-chain-config__header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.v2-chain-config__icon {
  color: var(--honey);
}
.v2-chain-config__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
  text-align: right;
}
.v2-chain-config__steps {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: stretch;
  width: 100%;
  position: relative;
}
/* [-bracket on the LEFT of the pill row — mirrors the queue's ]-brackets
   (right side). The chain-link icon centers on its vertical line, so the
   config "opens" the chain on the left and each queue group "closes" it. */
.v2-chain-config__bracket {
  position: absolute;
  left: -34px;
  top: -10px;
  bottom: -10px;
  width: 40px;
  border: 2.5px solid var(--honey);
  border-right: none;
  border-radius: 8px 0 0 8px;
  pointer-events: none;
  z-index: 2;
}
.v2-chain-config__bracket-icon {
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--honey);
  color: var(--honey);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-chain-config__bracket-icon svg {
  width: 14px;
  height: 14px;
}
/* Subtle horizontal line threading through the pills at midpoint — visual
   signal that the 5 pills belong to one chain lineup, without enclosing
   them in a box. Pills (z-index 1) cover the line where they sit; the
   line only shows in the gaps between them. */
.v2-chain-config__steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: oklch(0.82 0.03 70);
  z-index: 0;
}
.v2-chain-config__step {
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  transition: opacity 200ms;
}
.v2-chain-config__step--active {
  background: var(--paper);
  border: 1.5px solid oklch(0.72 0.13 65);
  box-shadow: 0 2px 6px oklch(0.50 0.10 65 / 0.10);
}
.v2-chain-config__step--inactive {
  background: oklch(0.92 0.01 70);
  border: 1px dashed oklch(0.76 0.02 70);
}
.v2-chain-config__step--inactive .v2-chain-config__step-name,
.v2-chain-config__step--inactive .v2-chain-config__step-rule {
  color: oklch(0.55 0.02 70);
}
.v2-chain-config__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--honey);
  color: oklch(0.20 0.05 70);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px oklch(0.30 0.05 65 / 0.25);
}
.v2-chain-config__step-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.v2-chain-config__step-rule {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.v2-chain-config__step--inactive .v2-chain-config__step-rule {
  font-style: italic;
}
.v2-chain-config__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.32 0.10 60);
  background: oklch(0.93 0.10 75);
  border: 1px solid oklch(0.74 0.14 65);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.4;
}
.v2-chain-config__tag-sep {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.v2-chain-config__down {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  color: var(--honey);
}
.v2-chain-config__down svg {
  opacity: 0.85;
}
@media (max-width: 900px) {
  .v2-chain-config {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .v2-chain-config__header { align-items: center; }
  .v2-chain-config__label { text-align: center; }
}
@media (max-width: 800px) {
  .v2-chain-config__steps { flex-direction: column; }
  .v2-chain-config__step { width: 100%; }
  .v2-chain-config__steps::before { display: none; }
}

.v2-chain {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  gap: 16px;
  margin-top: 12px;
  align-items: stretch;
  position: relative;
}
.v2-chain__lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.v2-chain__select {
  position: relative;
  z-index: 1;
}
.v2-chain__queue {
  position: relative;
  /* No z-index so we don't create a stacking context — lets the SVG (z:2)
     render over the queue card's dark background, while the queue items
     below (z:3) still sit on top of the lines. */
}
.v2-chain__queue-head,
.v2-chain__queue-item {
  position: relative;
  z-index: 3;
}
@media (max-width: 900px) {
  .v2-chain {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .v2-chain__arrow svg { transform: rotate(90deg); }
}

.v2-chain__select {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.v2-chain__select-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-2);
}
.v2-chain__button {
  margin-left: auto;
  padding: 8px 14px;
  background: var(--honey);
  color: oklch(0.20 0.05 70);
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.v2-chain__button:hover { background: var(--honey-hover); }

.v2-checkbox {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink-4);
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}
.v2-checkbox--checked {
  background: var(--honey);
  border-color: var(--honey);
}
.v2-checkbox--checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid oklch(0.20 0.05 70);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.v2-chain__row {
  display: grid;
  grid-template-columns: 24px 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.v2-chain__row:last-child { border-bottom: 0; }
.v2-chain__row span:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.v2-chain__row span:nth-child(3) {
  color: var(--ink);
  font-weight: 500;
}
.v2-chain__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
}
/* Unselected orders in the picker — present but not part of this job. */
.v2-chain__row--unselected {
  opacity: 0.5;
}

.v2-chain__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--honey);
}

.v2-chain__queue {
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-chain__queue-item-num {
  font-weight: 700;
  color: oklch(0.99 0.02 70);
}
.v2-chain__queue-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: oklch(0.72 0.02 70);
  padding-bottom: 8px;
  border-bottom: 1px solid oklch(0.30 0.01 70);
  margin-bottom: 4px;
}
.v2-chain__queue-item {
  padding: 6px 10px;
  background: oklch(0.22 0.01 70);
  border-radius: 6px;
  color: oklch(0.92 0.02 70);
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2-chain__queue-item-sep {
  color: oklch(0.62 0.02 70);
}
/* Right mode: badge pushed to the far right edge of the row. */
.v2-chain__queue-item-step {
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--honey);
  color: oklch(0.20 0.05 70);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px oklch(0.10 0.02 70 / 0.4);
}
.v2-chain__queue-item--more {
  background: transparent;
  text-align: center;
  color: oklch(0.65 0.02 70);
  padding-top: 4px;
  display: block;
}

/* Print Chain group brackets — honey ]-brackets in the right gutter that
   mark each order's run of queue rows as one chain. Positions computed by
   the inline script from live row rects. */
.v2-queue-brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.v2-queue-bracket {
  position: absolute;
  right: -30px;
  width: 36px;
  border: 2.5px solid var(--honey);
  border-left: none;
  border-radius: 0 7px 7px 0;
}
.v2-queue-bracket__icon {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--honey);
  color: var(--honey);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-queue-bracket__icon svg {
  width: 13px;
  height: 13px;
}
/* Left-side variant: [-bracket on the queue's LEFT edge, opening toward
   the queue. Used when data-brackets="left" — the connection lines run
   into these instead of the queue item text. */
.v2-queue-bracket--left {
  right: auto;
  left: -26px;
  width: 52px;
  border-right: none;
  border-left: 2.5px solid var(--honey);
  border-radius: 7px 0 0 7px;
}
.v2-queue-bracket--left .v2-queue-bracket__icon {
  right: auto;
  left: -12px;
}
/* In left mode the right gutter isn't needed; the brackets live in the
   existing inter-column gap on the queue's left. */
.v2-chain[data-brackets="left"] {
  padding-right: 0;
}
/* Left mode: step-number badge sits right before the document type
   (#3001 · [1] Packing slip). Reorder the flex children num · step doc;
   the badge no longer pushes to the far right. */
.v2-chain[data-brackets="left"] .v2-chain__queue-item-num { order: 1; }
.v2-chain[data-brackets="left"] .v2-chain__queue-item-sep { order: 2; }
.v2-chain[data-brackets="left"] .v2-chain__queue-item-step { order: 3; margin-left: 0; }
.v2-chain[data-brackets="left"] .v2-chain__queue-item-doc { order: 4; }

/* #1 — per-row timing, right-aligned, reinforces speed. */
.v2-chain__queue-item-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(0.74 0.11 78);
  white-space: nowrap;
  order: 5;
  margin-left: auto;
}
/* #2 — summary stat footer inside the queue. */
.v2-chain__queue-summary {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid oklch(0.30 0.01 70);
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(0.82 0.04 78);
  text-align: center;
  letter-spacing: 0.02em;
}
.v2-chain__queue-summary span {
  color: var(--honey);
  margin: 0 5px;
}



/* =================================================================
   SECTION 5 — Scale across stations
   ================================================================= */
.v2-network {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v2-network__cloud {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.v2-network__cloud svg { color: var(--honey-ink); }

.v2-network__lines {
  width: 100%;
  max-width: 720px;
  height: 80px;
  color: var(--rule);
}

.v2-network__stations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
@media (max-width: 900px) {
  .v2-network__stations { grid-template-columns: 1fr; }
  .v2-network__lines { display: none; }
}

.v2-station {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px;
}
.v2-station__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.v2-station__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ink-4);
}
.v2-station__dot--ok { background: var(--ok); }
.v2-station__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.v2-station__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.v2-station__printers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-station__printer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper-3);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.v2-station__printer svg { color: var(--honey-ink); flex-shrink: 0; }

/* LIVE TRACE schematic absorbed into Section 5 footer */
.v2-schematic {
  margin-top: 56px;
}

/* V1's .mk-flow grid was sized for V1's 3-node flow (5 columns:
   `1fr auto 1fr auto 1fr`). V2's LIVE TRACE has FOUR nodes
   (click → routing → station → done) + three arrows = seven grid
   items, so item 6 (arrow) and item 7 (node 04) wrap to row 2 and
   land awkwardly under node 01 instead of continuing the horizontal
   flow. Override to a 7-column grid at desktop so the full
   "click → label in tray" punchline stays on one line. Mobile
   keeps V1's single-column stack rule at <=900px (works for any
   node count) — this override is gated behind min-width:901px so
   it doesn't override the mobile rule. */
@media (min-width: 901px) {
  .v2-schematic .mk-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  }
}

/* =================================================================
   FOUNDER STORY
   ================================================================= */
.v2-founder {
  background: var(--paper);
  padding: 96px 32px;
}
.v2-founder__inner {
  max-width: 720px;
  margin: 0 auto;
}
.v2-founder__title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 24px;
}
.v2-founder__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.v2-founder__body:last-child { margin-bottom: 0; }