/* Deliberate corrections to the v7 page, layered so css/v7.css stays a
   verbatim record of the approved prototype. Every deviation lives here, with
   the reason, so it can be audited against the prototype in one place.
   (The single unavoidable edit inside v7.css is its url(), which had to become
   stylesheet-relative once the CSS left the document.) */

/* --- 1. Measure callouts never stacked, so 390px rendered 514px wide -------
   .m-calls was added by build brief item 87 without a mobile rule, unlike
   every other grid on the page. HANDOVER section 5 requires no horizontal
   scroll at 390px. */
@media (max-width:980px) {
  .m-calls { grid-template-columns:1fr; }
}

/* --- 2. Audit trail: restore the reasoning column on small screens ---------
   v7.css hid .logtable .why below 980px but not its <th>, so seven headers sat
   over six cells and every column was labelled with its neighbour's meaning.
   Un-hiding is the better fix than hiding the orphaned header: brief
   non-negotiable 2 requires the reasoning to stay on the page, and the table
   is already inside a .tscroll horizontal scroller. */
@media (max-width:980px) {
  .logtable .why { display:table-cell; }
}

/* --- 3. Full-bleed audit window ------------------------------------------
   .bleedwin spans 100vw while .logtable caps at 1600px and centres, so above
   1700px the dark table was flanked by white (480px each side at 2560) with
   the chrome bar running to the viewport edge. Giving the window the dark
   ground makes the full-bleed frame genuinely edge-to-edge, which is the
   signature brief item 82 asked for. */
.bleedwin { background:var(--ink-deep); }
.bleedwin .frame-lab { max-width:1600px; margin-left:auto; margin-right:auto; }

/* --- 4. Headline underlines must not float when the span wraps ------------
   border-bottom draws one rule under the whole inline box, so a wrapped .ul
   left a rule hanging between lines that optically underlined the next line's
   first word. text-decoration draws per line box instead. Visually identical
   on single-line headlines, which is most of them. */
.ul {
  border-bottom:0;
  padding-bottom:0;
  text-decoration:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:3px;
  text-underline-offset:.13em;
  text-decoration-skip-ink:none;
}

/* --- 5. Chapter counters were 2.14:1 -------------------------------------
   The NN/06 counters are load-bearing wayfinding, so they have to be legible.
   #6f6a5e is 4.53:1 on cream and 4.82:1 on cream-hi; the navy variant moves
   from 2.65:1 to 5.04:1. The warm hue and the counter's secondary role are
   preserved. NOTE: the masthead label itself (#847e70, 3.39:1) is mandated by
   build brief item 85 and is left alone pending a ruling. */
.sect-lab .idx { color:#6f6a5e; }
.dial .sect-lab .idx { color:#8fa1b0; }

/* --- 6. Accent discipline in the creative tag chips ----------------------
   .ctag.g used #1f7a4d, the exact green of the .cpill status pill in the same
   table, so status green did decorative duty inches from a literal status
   pill. .ctag.w used #8a6414, an amber outside the token set entirely. These
   chips are extracted attributes, which is data, so they take the cobalt
   default the other three chips already use. */
.ctag.g, .ctag.w { background:#EDF1FE; color:var(--blue); }

/* --- 7. Mobile navigation ------------------------------------------------
   v7.css hides nav .links below 980px with no replacement, so phones got the
   wordmark and Book a Demo only and the ROI simulator was unreachable. The
   pre-v7 page had a toggle, so v7 shipped a regression. This reuses the same
   .links element as the desktop nav rather than duplicating the link set. */
.nav-toggle { display:none; }
@media (max-width:980px) {
  nav { flex-wrap:wrap; align-content:flex-start; background:rgba(239,235,226,.97);
        backdrop-filter:blur(12px); }
  nav .btn { margin-left:auto; }

  .nav-toggle {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 9px; margin-left:4px;
    background:transparent; border:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span {
    display:block; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .26s ease, opacity .18s ease;
  }
  .nav-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:5px; }
  nav.open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  nav.open .nav-toggle span:nth-child(2) { opacity:0; }
  nav.open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  nav .links {
    display:none; order:9; flex-basis:100%; flex-direction:column; gap:0;
    margin-top:13px; border-top:1.5px solid var(--line);
    max-height:min(62vh, 420px); overflow-y:auto;
  }
  nav.open .links { display:flex; }
  nav .links a {
    padding:15px 2px; border-bottom:1px solid var(--line); opacity:1;
  }
  nav .links a:last-child { border-bottom:0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition:none; }
}

/* --- 8. The how-it-works masthead follows its section -------------------
   .eco is text-align:center (the thesis, the diagram and the hub are all
   centred), and the eyebrow item 85 deleted was a centred block, which is what
   the leftover ".eco .mono-lab { display:block }" rule in v7.css was for. A
   .sect-lab is a flex row, so it ignored that and sat left, out of step with
   everything under it. Experts is left-aligned, so its masthead stays left. */
#how .sect-lab { justify-content:center; }

/* ========================================================================
   Design-review batch. Findings numbered as in the review.
   ===================================================================== */

/* --- 9. The compounding section names itself (FB) ------------------------
   Paired with "How it works". Centred as requested, though note .comp-grid is
   a left-aligned two-column layout, unlike the centred .eco section. */
.comp .sect-lab { justify-content:center; }

/* --- 10. Scrollable tables had no affordance (#19) ----------------------
   At 390px the reconciliation table hides 44% of itself and the audit trail
   51%, with no fade, shadow, hint or visible scrollbar. A persistent thin
   scrollbar plus a hint line that js/tables.js adds only while the table
   actually overflows, and removes once it has been scrolled. */
.tscroll { scrollbar-width:thin; scrollbar-color:#c9c2b2 transparent; }
.tscroll::-webkit-scrollbar { height:8px; }
.tscroll::-webkit-scrollbar-track { background:transparent; }
.tscroll::-webkit-scrollbar-thumb { background:#c9c2b2; border-radius:99px; }
.bleedwin .tscroll { scrollbar-color:#3d5060 transparent; }
.bleedwin .tscroll::-webkit-scrollbar-thumb { background:#3d5060; }
.tscroll-hint {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#847e70; padding:9px 16px 2px;
  display:flex; align-items:center; gap:7px;
}
.tscroll-hint::after { content:"\2192"; font-size:13px; letter-spacing:0; }
.bleedwin .tscroll-hint { color:#8fa1b0; }

/* --- 11. Numeric table columns were left-aligned (#11) -----------------
   Ragged right on money and counts. Scoped per section, because .recon is
   used by both the reconciliation table and the creative monitor, which have
   different columns. */
#measure .recon th:nth-child(n+2), #measure .recon td:nth-child(n+2) { text-align:right; }
#creative .recon th:nth-child(4), #creative .recon td:nth-child(4),
#creative .recon th:nth-child(5), #creative .recon td:nth-child(5) { text-align:right; }
#execute .draft th:nth-child(2), #execute .draft td:nth-child(2),
#execute .draft th:nth-child(3), #execute .draft td:nth-child(3) { text-align:right; }

/* --- 12. REVERTED. The review's finding #13 wanted the wall on a real grid,
   because centred flex-wrap starts every row at a different x. FB prefers the
   original centred flow, so v7.css's .int-list is untouched. The bigger filter
   tabs from the same batch are kept (see 15). */

/* --- 13. REVERTED with 12, since it changes how the wall reads. Available
   again on request: .intg .lki { background:#fff; border:1px solid var(--line) }
   makes the tile visible on cream, which is what brief item 24 intended and
   which currently only works inside the eco diagram's white panels. */

/* --- 14. REVERTED with 12. The review's #14 noted the ghost tile shares the
   pill shape and letterspaced mono of the .itab row above it; it keeps the
   prototype's dashed pill. */

/* --- 15. Touch targets under 44px (#23, #22) --------------------------- */
.itab {
  min-height:44px; display:inline-flex; align-items:center;
  padding:0 18px; line-height:1;
}
@media (max-width:720px) { .itab { padding:0 15px; } }
footer .fine a { display:inline-block; padding:6px 0; }

/* --- 16. Hover and focus states (#24) ---------------------------------
   v7.css ships exactly one :hover rule and no :focus-visible at all, on a page
   whose only controls are five tabs and a hover dial. */
nav .links a:hover { opacity:1; }
.itab:hover { border-color:var(--ink); color:var(--ink); }
.itab.on:hover { color:#fff; }
.lk:hover .lki { border-color:#b9b1a0; }
footer a:hover { text-decoration-thickness:2px; }
a:focus-visible, button:focus-visible, .itab:focus-visible {
  outline:2px solid var(--blue); outline-offset:3px; border-radius:3px;
}
.dial a:focus-visible, footer a:focus-visible { outline-color:var(--blue-soft); }

/* --- 17. Footer links had no link affordance (#22) --------------------
   Bold ink with no colour and no underline, identical to the adjacent
   non-link "Nupact". */
footer .fine a {
  text-decoration:underline; text-decoration-color:#b3ac9c;
  text-underline-offset:.18em; text-decoration-thickness:1px;
}

/* --- 18. The hero CTA pair was two different heights (#7) -------------
   .btn has no border and .btn.ghost adds 2px, and height is content-driven so
   box-sizing does not absorb it. 53px vs 57px, exposed by align-items:center. */
.btn { border:2px solid transparent; }
.btn.ghost { border-color:var(--ink); }

/* --- 19. Mobile CTA pairs stacked at unequal widths (#16) -------------- */
@media (max-width:520px) {
  .cta-row { flex-direction:column; align-items:stretch; }
  .cta-row .btn { width:100%; text-align:center; }
}

/* --- 20. The approval band at 390px (#18) ----------------------------
   The chart chrome wrapped both labels and the card's action row left
   "Reject" orphaned on a third line. */
@media (max-width:520px) {
  #sigchart .frame-lab .right { display:none; }
  .apv-btns { flex-direction:column; align-items:stretch; }
  .apv-btns .abtn { text-align:center; }
}

/* --- 21. The nav link group sat 26px left of centre (#25) -------------
   space-between with an 88px wordmark and a 139px CTA. Desktop only: below
   980px the group is the mobile panel and must stay in flow. */
@media (min-width:981px) {
  nav .links { position:absolute; left:50%; transform:translateX(-50%); }
}

/* --- 22. "Early fatigue" pill wrapped to two lines (#9) ---------------
   38px tall against 22px for its siblings, making creative row 3 20px taller
   than rows 1 and 2 at 1024 to 1440. */
.cpill { white-space:nowrap; }

/* --- 23. Dark-table headers were 3.44:1 (#21) ------------------------- */
.logtable th { color:#7c8fa0; }

/* --- 24. REVERTED. The review's opinion J wanted card grids to stop
   stretching to equal height ("dead space" in the taller cards). FB prefers
   the equal-height boxes in the onboarding section, and the same reasoning
   applies to the guardrail pair, so both keep v7.css's default stretch. */

/* --- 25. Hero veil: off-token, and too thin under the copy (#26, A) ---
   The veil used #F0EFEB rather than the --cream token #EFEBE2, and its mid
   stop sat at 42% while the copy column ends at ~52% of the width, so
   headline text always fell over live film at roughly 56% opacity. Because
   the film autoplays, that looked fine on most frames and weak on some.
   Mid stop moved to 55% and the tail to 80%; the film still carries the
   right-hand two thirds of the frame. */
.hero-veil {
  background:
    linear-gradient(180deg, rgba(239,235,226,.92) 0, rgba(239,235,226,0) 140px),
    linear-gradient(90deg, rgba(239,235,226,.95) 0%, rgba(239,235,226,.86) 55%, rgba(239,235,226,.08) 80%);
}
@media (max-width:980px) {
  /* the mobile veil was 95/86/60, which nearly erased the film (opinion L) */
  .hero-veil {
    background:linear-gradient(180deg, rgba(239,235,226,.94) 0%, rgba(239,235,226,.82) 58%, rgba(239,235,226,.45) 100%);
  }
}

/* --- 26. Secondary labels darkened for legibility (FB) -----------------
   #847e70 measured 3.39:1 on cream, below the 4.5:1 the standard asks for at
   these sizes, and it is used on 17 selectors: section mastheads, artifact
   chrome, table headers, the eco and loop captions, the expert kicker and the
   footer fine print. All move to #655f54 (5.32 on cream, 5.66 on cream-hi,
   6.33 on white), which is still a muted warm grey well clear of body ink at
   12.3:1. The 01/06 counters stay at #6f6a5e (4.53), so the counter is now
   lighter than the label it belongs to and the hierarchy reads correctly
   again, with both above the threshold. Revises build brief item 85's exact
   value while keeping its intent. */
.sect-lab, .frame-lab, .apv-tm, .apv-stat .l, .apv-col .cl, .apv2-next,
.sigcap, .apv-next, .eco-group .glab, .eco-hub .cat, .draft th,
.loop-hub .cat, .recon th, .ctags .ctlab, .exp-klab, footer .fine,
.tscroll-hint { color:#655f54; }
/* the navy sections keep their own lighter pair, which already passes */
.dial .sect-lab { color:#93a5b4; }
.logtable th { color:#7c8fa0; }
.bleedwin .tscroll-hint { color:#8fa1b0; }

/* --- 27. Mobile dial: emphasise L2, not L3 (FB) ------------------------
   With the knob, track and caption hidden below 980px, the only emphasis left
   came from .dial-card.hi's lighter background on L3, so Level 3 read as the
   selected one while .dial-card.on's lift was disabled. L2 now carries a
   cobalt-soft edge, and the "most partners run here" caption is promoted from
   an absolutely positioned overlay to a real line directly under L2, which
   also means phone visitors finally see it at all. */
@media (max-width:980px) {
  .dial-card.lo { order:1; }
  .dial-card.on { order:2; border-color:var(--blue-soft); }
  .dial-cap {
    order:3; display:block; position:static; transform:none;
    left:auto; top:auto; text-align:center; opacity:1;
    margin:-4px 0 2px;
  }
  .dial-card.hi { order:4; }
}

/* --- 28. Keep the failures headline's underlined phrase intact ----------
   Removing "we meet" shifted the wrap so "three failures" split across two
   lines, breaking the cobalt underline in half. Same treatment the hero H1
   already uses on "top 1%." per build brief item 60. */
.punch .ul { white-space:nowrap; }