/* impact-assessment.css: page-specific presentation for /impact-assessment,
   loaded after site.css. Tokens, reset, nav, footer, and the reveal-line/
   count/plane/stack primitives all come from site.css -- this file is only
   what the page itself needs: the hero's photo + two SVG arcs + scrim, the
   five-job scroll-scrubbed map device, the Ian video, the when-to-automate
   matrix, and a couple of small panel/chip components reused across the
   lower sections. */

/* Skip link: owned centrally by site.css's `.skip` primitive (cyan-on-ink,
   1px-clip hidden at rest, fixed pill on focus). This page defines no rule
   of its own -- a same-specificity page-local override here would win the
   cascade on source order alone and put a stray lime focus state on this
   page only, out of step with every other Phase 3 page. */

/* -------------------------------------------------------------- 0. layout */
.ia-section { padding: 88px 0; border-top: 1px solid var(--border); }
.ia-section:first-of-type { border-top: none; }
.ia-lead { color: var(--text-dim); font-size: 17px; line-height: 1.65; max-width: 620px; margin: 0 0 16px; }
.ia-body { color: var(--text-dim); font-size: 15.5px; line-height: 1.7; max-width: 620px; margin: 16px 0 0; }
.ia-body a, .ia-lead a { color: var(--cyan); }
h2.ia-h { margin: 0 0 16px; }
.chip { display: inline-block; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
@media (max-width: 780px) { .ia-section { padding: 56px 0; } }

/* --------------------------------------------- 0b. vary the anchor (round B)
   Eight of the nine .ia-section acts (every one but when-to-automate's own
   900px matrix) shared one identical left column with nothing opposite it
   -- DESIGN.md §8 bans the same anchor in every act. Three change shape at
   desktop widths, using only content already on the page (no new copy);
   below 1100px all three revert to the plain single-column flow untouched,
   CSS only, no DOM change. */
@media (min-width: 1100px) {
  /* What we survey (the method section): text stays left, the five-job map
     moves right at a fixed 42% of the wrap -- comfortably over the "at
     least 5/12" (41.67%) floor at every width from 1100px up to the 1280px
     wrap cap, constant because it's a percentage of the wrap itself, not
     of the leftover space after the column gap -- so the map reads as a
     map at full presence, not a bulleted list with dots down the margin. */
  #survey > .wrap {
    display: grid;
    grid-template-columns: 1fr 42%;
    column-gap: 48px;
    align-items: start;
    grid-template-areas:
      "eyebrow map"
      "h2      map"
      "lead    map"
      "video   map";
  }
  #survey > .wrap > .eyebrow { grid-area: eyebrow; }
  #survey > .wrap > h2.ia-h { grid-area: h2; }
  #survey > .wrap > .ia-lead { grid-area: lead; }
  #survey > .wrap > .jobs-video { grid-area: video; }
  #survey > .wrap > .job-map { grid-area: map; max-width: none; width: 100%; margin: 0; }

  /* Investment and Who runs it: the same panel, the same copy, anchored to
     the right edge of the wrap instead of the left. A column flex with
     align-items: flex-end moves the box; the text inside it stays as-set
     (left-aligned), so nothing about the copy changes, only where it sits. */
  #pricing > .wrap, #who-runs-it > .wrap {
    display: flex; flex-direction: column; align-items: flex-end;
  }
}

/* ------------------------------------------------------------------ 1. hero
   Three planes: far = the generated photo (+ navy scrim over the upper two
   thirds, where the headline sits), mid = a quiet SVG arc, near = a second
   arc whose top edge overlaps the CTA block's bottom by 8px. Positioning/
   parallax mechanics are generic (site.css + site.js); this is each plane's
   own shape/height and the scrim. */
.hero { position: relative; overflow: hidden; padding: 168px 0 96px; }
.hero .plane-far { position: absolute; inset: 0; z-index: 0; background: #e7e9ee; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Top two stops eased from .95/.92: the price chip and H1 both already
     carry a wide contrast margin on their own (chip has its own tinted
     background+border; H1 is --text at 16.88:1 against pure navy per the
     original build note), so the photo can show through more here without
     losing legibility. The bottom three stops are untouched: they are the
     ones that were tuned twice against a real contrast failure on the
     cross-links, and re-touching them risks reopening that. */
  background: linear-gradient(180deg,
    rgba(10,14,26,.84) 0%, rgba(10,14,26,.84) 45%,
    rgba(10,14,26,.86) 68%, rgba(10,14,26,.78) 85%, rgba(10,14,26,.68) 100%);
}
.hero .plane-mid { z-index: 2; height: 240px; opacity: .5; }
.hero .plane-mid svg, .hero .plane-near svg { display: block; width: 100%; height: 100%; }
.hero .plane-near { z-index: 2; height: 104px; opacity: .85; }
.hero-inner { position: relative; z-index: 3; }
.price-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(0,227,228,.35); background: rgba(0,227,228,.08);
  padding: 9px 15px; border-radius: 30px; margin: 0 0 28px;
}
.hero h1 { max-width: 15ch; margin: 0 0 22px; }
.hero-sub { color: var(--text); opacity: .88; font-size: 18px; line-height: 1.6; max-width: 560px; margin: 0 0 32px; }
.cross-link { margin: 14px 0 0; font-size: 14px; color: var(--text); max-width: 480px; }
@media (max-width: 780px) {
  .hero { padding: 128px 0 72px; }
  .hero .plane-mid { height: 150px; }
  .hero .plane-near { height: 80px; }
  .hero h1 { max-width: 100%; }
  /* At 390 the chip's full text wraps mid-pill inside the rounded shape and
     reads as unresolved (critic taste note). Tighten size/spacing enough to
     keep it one line at phone widths without shortening the copy. */
  .price-chip { font-size: 9.5px; letter-spacing: .09em; gap: 6px; padding: 8px 13px; white-space: nowrap; }
}

/* Lime cap (brandbook: under 2% of the first view at 390): the full label
   ("Buy the Impact Assessment · £497 →") put this button at 3.5% of the
   390 first view, the worst breach on the site. Same fix already working
   on agent-mot/first-agent: hide the descriptive middle phrase in a
   <span class="long">, not the button's shared size/padding, so "Buy ·
   £497 →" reads clean and the control stays the standard size. Full
   label restored at 601px and up. */
@media (max-width: 600px) {
  .hero-inner .btn-lime .long { display: none; }
}

/* ------------------------------------------------------ 2. the five-job map
   Real text in <text> elements (not baked). .map-path draws itself via
   stroke-dashoffset (impact-assessment.js), driven by the "What we survey"
   section's scroll progress. Nodes switch from a dim outline to solid cyan
   as the drawn line reaches them. Reduced motion: JS sets the final state
   (full line, every node lit) and never attaches the listener. Below
   1100px this 460px cap is what sizes the map (in the single-column flow,
   same as before round B); at 1100px and up the 0b block above removes the
   cap so the map fills its 42% grid column instead -- the two rules apply
   at different widths and never fight. */
.job-map { max-width: 460px; margin: 40px 0 0; }
.job-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.map-node circle { fill: var(--surface); stroke: var(--border); stroke-width: 2; transition: fill .35s ease, stroke .35s ease; }
.map-node.is-lit circle { fill: var(--cyan); stroke: var(--cyan); }
.map-node .map-num { font: 600 16px/1 'JetBrains Mono', monospace; fill: var(--text-faint); letter-spacing: .04em; }
.map-node .map-name { font: 700 28px/1 Inter, sans-serif; fill: var(--text-dim); letter-spacing: -.01em; transition: fill .35s ease; }
.map-node.is-lit .map-name { fill: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .map-node circle, .map-node .map-name { transition: none; }
}

/* ------------------------------------------------------------- Ian's video
   Behaviour (impact-assessment.js) is Phase 0's, kept exactly: no native
   controls at rest, controls added on play, the custom button returns only
   on `ended`. */
.jobs-video { max-width: 460px; margin-top: 36px; }
.rung-video-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border: 1px solid rgba(0,227,228,.3); border-radius: 12px; overflow: hidden;
}
.rung-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; object-fit: cover; }
.rung-video-play {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(4,6,12,.18) 0%, rgba(4,6,12,.42) 100%);
  border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .2s ease;
}
.rung-video-play:hover { background: linear-gradient(180deg, rgba(4,6,12,.10) 0%, rgba(4,6,12,.34) 100%); }
.rung-video-play[hidden] { display: none; }
.rung-video-play-disc {
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,26,.66); border: 1.5px solid var(--cyan);
  transition: transform .2s ease, background .2s ease;
}
.rung-video-play:hover .rung-video-play-disc { transform: scale(1.06); background: rgba(10,14,26,.85); }
.rung-video-play:focus-visible { outline: none; }
.rung-video-play:focus-visible .rung-video-play-disc { outline: 2px solid var(--cyan); outline-offset: 3px; }
.rung-video-play-disc svg { width: 24px; height: 24px; margin-left: 3px; fill: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .rung-video-play, .rung-video-play-disc { transition: none; } }
.rung-video-cap { margin: 10px 0 0; font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* ------------------------------------------------- 3. when-to-automate grid
   Flat quads: no box-shadow, no gradients, no keyframes. The DOM keeps
   number order (01, 02, 04, 03) so a no-JS/no-CSS reader still meets them in
   order; the mobile-only order rule below puts 03 back before 04 on screen. */
.matrix { display: grid; grid-template-columns: 34px 1fr; gap: 14px; margin-top: 40px; max-width: 900px; }
.m-yaxis { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; }
.m-yaxis .ax-label { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); writing-mode: vertical-rl; transform: rotate(180deg); }
.m-yaxis .ax-tick { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.m-plot { position: relative; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .m-plot { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } }
.m-xaxis { grid-column: 2; display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.m-xaxis .ax-label { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.m-xaxis .ax-tick { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 779px) {
  .matrix { grid-template-columns: 1fr; }
  .m-yaxis { flex-direction: row; justify-content: space-between; padding: 0 2px 4px; }
  .m-yaxis .ax-label { writing-mode: horizontal-tb; transform: none; }
  .m-xaxis { display: none; }
  .quad.q-human { order: 3; }
  .quad.q-leave { order: 4; }
}
.quad { position: relative; border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; min-height: 190px; }
.quad .q-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quad .q-num { font: 800 24px Inter, sans-serif; line-height: 1; }
.quad .q-coord { font: 500 10px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.quad .q-name { font: 700 17px Inter, sans-serif; letter-spacing: -.005em; margin: 2px 0 0; }
.quad .q-line { font-size: 14px; line-height: 1.45; max-width: 40ch; margin: 0; }
.quad .q-eg { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: .02em; line-height: 1.5; margin: auto 0 0; padding-top: 10px; }

.quad.q-auto { background: var(--surface-elev); border: 1px solid var(--border); border-left: 3px solid var(--cyan); }
.quad.q-auto .q-num, .quad.q-auto .q-coord { color: var(--cyan); }
.quad.q-auto .q-name { color: var(--text); }
.quad.q-auto .q-line { color: var(--text-dim); }
.quad.q-auto .q-eg { color: var(--text-faint); }

.quad.q-gate, .quad.q-human { background: var(--surface); border: 1px solid var(--border); }
.quad.q-gate .q-num, .quad.q-gate .q-coord, .quad.q-human .q-num, .quad.q-human .q-coord { color: var(--text-dim); }
.quad.q-gate .q-name, .quad.q-human .q-name { color: var(--text); }
.quad.q-gate .q-line, .quad.q-human .q-line { color: var(--text-dim); }
.quad.q-gate .q-eg, .quad.q-human .q-eg { color: var(--text-faint); }

.quad.q-leave { background: transparent; border: 1px solid var(--border); }
.quad.q-leave .q-num, .quad.q-leave .q-coord { color: var(--text-faint); }
.quad.q-leave .q-name { color: var(--text-dim); }
.quad.q-leave .q-line, .quad.q-leave .q-eg { color: var(--text-faint); }

.when-rule { margin-top: 28px; max-width: 900px; padding: 18px 24px; display: flex; align-items: center; gap: 18px; border-left: 3px solid var(--cyan); background: rgba(0,227,228,.06); border-radius: 0 12px 12px 0; }
.when-rule .chip { flex-shrink: 0; }
.when-rule .line { font-size: 16px; line-height: 1.45; color: var(--text); font-weight: 500; }
.when-rule .line strong { font-weight: 700; }
@media (max-width: 560px) { .when-rule { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ------------------------------------------------------------- 4. panels
   One flat card (proof / who-runs-it) and one accented strip (promise /
   urgency), reused across the lower sections. */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 30px; max-width: 640px; }
.panel p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.7; }
.panel--accent { border: none; border-left: 3px solid var(--cyan); background: rgba(0,227,228,.06); border-radius: 0 12px 12px 0; padding: 20px 24px; }
.panel--accent .chip { display: block; margin-bottom: 8px; }
.panel--accent p { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------- 5. price */
.price-panel { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px 34px; max-width: 560px; }
.price-panel p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.65; }
/* Specificity fix: this page's only price must outrank the generic
   `.price-panel p` rule above, not the other way round. `.price-figure`
   alone is (0,1,0) against `.price-panel p`'s (0,1,1), so the generic rule
   was winning and the £497 rendered at 15.5px --text-dim, the same as the
   sentence beside it. Qualifying the selector with its parent brings this
   to (0,2,0) -- no !important needed. */
.price-panel .price-figure { font: 700 42px/1 'JetBrains Mono', monospace; color: var(--lime-read); margin: 0 0 14px; letter-spacing: -.02em; }

/* ------------------------------------------------------------ 6. closing */
.closing { text-align: center; padding: 100px 0; border-top: 1px solid var(--border); }
.closing h2 { margin: 0 auto 18px; max-width: 26ch; }
.closing p { color: var(--text-dim); font-size: 16.5px; line-height: 1.6; max-width: 560px; margin: 0 auto 30px; }