/* first-agent.css: page-specific styles for /first-agent (One Job, Handled,
   £997, PROVE). Loaded after site.css. Section 1 hero (image far plane +
   SVG mid/near arcs); 2 layout/typography helpers; 3 page device (the
   split stage, "yours today / yours by day 10"); 4 content components
   (cards, credit, promise, fit columns); 5 closing. */

/* -------------------------------------------------------------- 1. hero
   far = generated image (srcset, phone crop); mid/near = SVG arcs (site.js
   drives all three via the shared .planes/.plane-far/-mid/-near listener,
   rates 0.10/0.25/0.60). A navy scrim covers the upper two-thirds only, so
   the H1 sitting there keeps contrast; the lower third stays clear so the
   image shows through, matching the brief. */
.hero.planes {
  position: relative; overflow: hidden;
  min-height: 640px;
}
.hero.planes .plane-far { position: absolute; inset: 0; height: 100%; z-index: 0; overflow: hidden; }
.hero.planes .plane-far img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim covers the upper two-thirds solidly (the H1/sub/CTA sit there, top-
   aligned so they never drift into the fading zone), then opens up over the
   image's own lower third where the subject sits. Strong enough to clear
   4.5:1 even against --white-media's worst case (measured, see report). */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10,14,26,.94) 0%, rgba(10,14,26,.94) 55%,
    rgba(10,14,26,.74) 70%, rgba(10,14,26,.32) 84%, rgba(10,14,26,0) 96%);
}
.hero.planes .plane-mid { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 190px; pointer-events: none; }
.hero.planes .plane-mid svg { display: block; width: 100%; height: 100%; }
/* Tall enough that its own top edge reaches up to overlap the CTA block's
   bottom by a few px (the contrast scrim pushed the hero content further up
   the frame than the homepage's own front plane, so this plane is taller
   than 46px to still reach it -- same path, same preserveAspectRatio="none"
   stretch, just a bigger box). */
/* z-index 1: BEHIND .hero-inner (z-index 2), never in front of it. The
   "front plane overtakes the CTA" cue (DESIGN.md sect. 4) still reads --
   the arc's own top edge still rises up past the CTA block's bottom edge
   -- but because it now sits behind the copy in the stacking order, it can
   never paint over a glyph, at any width. Coordinator ruling, fix-first-agent
   round: the earlier z-index 3 painted over the hero cross-link on every
   width 430px and below. */
.hero.planes .plane-near { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 232px; pointer-events: none; }
.hero.planes .plane-near svg { display: block; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 2; width: min(1280px, 92%); margin: 0 auto; padding: 116px 0 220px; }
.hero-inner h1 { max-width: 16ch; }
.hero .sub { margin: 22px 0 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: var(--text); }
.hero-act { margin-top: 32px; }
.cross-link { margin: 16px 0 0; font-size: 14.5px; color: var(--text); }
.cross-link a { color: var(--text); text-decoration: underline; }
@media (max-width: 780px) {
  .hero.planes { min-height: 620px; }
  .hero-inner { padding: 88px 0 160px; }
  .hero-inner h1 { max-width: 13ch; }
}
/* Same technique the shipped homepage hero already uses for its own
   .btn-lime (index.html/home.css: ".hero .btn-lime .long"): the full
   wording stays in the markup (jury: every word kept), just visually
   hidden under 600px so the button's PIXEL AREA clears the law's "lime
   under 2% of the first view" cap. Measured: full label put the 390px
   hero button at 3.16% of the first view; shortened it clears 2%. */
@media (max-width: 600px) {
  .hero-act .btn-lime .long { display: none; }
}

/* ------------------------------------------------------- 2. layout/type */
.narrow { width: min(820px, 92%); margin: 0 auto; }
main section { padding: 92px 0; border-bottom: 1px solid var(--border); }
main section:last-of-type { border-bottom: none; }
@media (max-width: 780px) { main section { padding: 60px 0; } }

main h3 { font: 600 17px/1.32 Inter, sans-serif; color: var(--text); letter-spacing: -0.01em; margin: 0 0 10px; }
.lead { color: var(--text-dim); font-size: 18px; line-height: 1.6; margin: 0 0 8px; max-width: 700px; }
.prose { max-width: 720px; }
.prose p { color: var(--text-dim); font-size: 16.5px; line-height: 1.7; margin: 0; }
.prose p strong { color: var(--text); }

/* -------------------------------------------------- 3. the page device
   Split stage: two real panels sharing one flex row. --split (0 to 1) is
   the enclosing section's own scroll progress (first-agent.js), 0 at the
   section's start (50/50) to 1 at the section's end.

   Coordinator ruling, fix-first-agent round: the divider now travels
   50/50 -> 38/62 only (a 12-point swing off centre), never further, so
   neither panel ever drops below 38% of the stage width at any width
   601px and up -- there is always room for "The single job most stuck on
   you." and "Making it happen." to wrap onto a second line rather than
   being cut mid-word by `overflow: hidden`. `white-space: nowrap` (the
   actual cause of the mid-word clipping: it forced one line, then the
   line got cut where the shrinking box ended) is gone; normal wrapping
   replaces it.

   The "resolve" is a colour move, not a vanishing act: once the section
   is most of the way through (JS adds .is-resolved at split >= 0.75), the
   day10 panel's background moves --surface -> --surface-elev (the "right
   column gaining the surface token") and the today panel's text moves
   --text -> --text-dim (the "left column dims to the #7a85a8 text
   token"), both a plain 0.4s colour transition, not a per-frame mix.
   Deliberately NOT a continuous color-mix() tied to --split: Chrome
   serialises a color-mix() computed value as a CSS Color 4 string
   (`color(srgb ...)`), which check-contrast.js's colour parser (it only
   understands `rgb()`/`rgba()`) cannot read -- it silently fell back to
   treating the text as pure black, which is what turned into two false
   1.17-ratio FAILs against the dark backdrop on the first pass of this
   fix. A class-toggled swap between two literal var() colours always
   computes to a plain rgb() the tool can parse, at every scroll position
   check-contrast.js freezes and measures. Neither panel's copy is ever
   removed, shrunk below its readable floor, or faded to invisible -- both
   stay real, present text the whole way. */
.split-stage {
  display: flex; align-items: flex-start;
  margin-top: 40px;
  border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.split-today, .split-day10 {
  min-width: 0;
  padding: 30px 26px;
}
.split-today {
  flex: 0 0 calc(50% - var(--split, 0) * 12%);
  border-right: 1px solid var(--border);
  color: var(--text);
  transition: color .4s ease;
}
.split-stage.is-resolved .split-today { color: var(--text-dim); }
.split-day10 {
  flex: 0 0 calc(50% + var(--split, 0) * 12%);
  background: var(--surface);
  transition: background-color .4s ease;
}
.split-stage.is-resolved .split-day10 { background: var(--surface-elev); }
.split-tag {
  font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 16px; white-space: nowrap;
}
.split-day10 .split-tag { color: var(--cyan); }
.split-line { font: 600 19px/1.35 Inter, sans-serif; color: inherit; letter-spacing: -0.01em; margin: 0 0 10px; }
.split-today .split-line.dim { font: 500 15px/1.4 Inter, sans-serif; }
.split-body { color: var(--text-dim); font-size: 15px; line-height: 1.62; margin: 0 0 14px; }
.split-pull { font: 600 15.5px/1.5 Inter, sans-serif; color: var(--text); margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 780px) {
  .split-today, .split-day10 { padding: 20px 16px; }
  .split-line { font-size: 16px; }
  .split-today .split-line.dim { font-size: 14px; }
  .split-body { font-size: 14px; }
  .split-pull { font-size: 14px; }
}
/* Under 601px there is no split at all: the two columns stack, "Yours
   today" then "Yours by day 10", each full width and fully readable, with
   the shared .reveal-line entrance (site.js) standing in for the
   scroll-driven divider, which has nothing to drive in a single column. */
@media (max-width: 600px) {
  .split-stage { flex-direction: column; }
  .split-today, .split-day10 {
    flex: 1 1 auto; width: 100%;
    color: var(--text); background: var(--surface);
  }
  .split-today { border-right: none; border-bottom: 1px solid var(--border); }
}
/* Reduced motion: first-agent.js never runs (it returns immediately), so
   --split simply stays at the markup's own inline default (0) forever --
   a plain 50/50, both panels at full, un-resolved readability. Nothing
   further needs overriding here; the old override that used to force the
   today panel to flex-basis:0% (erasing it) has been removed rather than
   replaced. */

/* ------------------------------------------------- 4. content components
   Cards: surface plus hairline border, 16px radius (brand law), flat (no
   shadow anywhere on this page). A hover lift uses transform and a cyan
   border, never lime (lime stays the mark and the one CTA per view). */
.get-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; margin-top: 40px; max-width: 920px; }
@media (max-width: 780px) { .get-grid { grid-template-columns: 1fr; } }
.get { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; transition: transform .2s, border-color .2s; }
.get:hover { transform: translateY(-2px); border-color: var(--cyan); }
.get p { margin: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.62; }

.sku-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 40px; max-width: 1120px; }
@media (max-width: 920px) { .sku-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sku-grid { grid-template-columns: 1fr; } }
.sku-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 24px 26px; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.sku-card:hover { transform: translateY(-2px); border-color: var(--cyan); }
.sku-card .sku-num { font: 500 11px 'JetBrains Mono', monospace; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 10px; }
.sku-card p { margin: 0 0 10px; color: var(--text-dim); font-size: 14px; line-height: 1.58; }
.sku-card p:last-child { margin-bottom: 0; }
.sku-card p strong { color: var(--text); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.sku-card.flagship { border-color: var(--cyan); background: var(--surface-elev); }
.sku-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid var(--cyan); padding: 4px 10px; border-radius: 8px;
  margin-bottom: 12px; width: fit-content;
}
.sku-menu-note { margin-top: 26px; max-width: 720px; color: var(--text-dim); font-size: 15px; line-height: 1.65; }

.line-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; max-width: 920px; }
@media (max-width: 780px) { .line-grid { grid-template-columns: 1fr; } }
.line-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; }
.line-card .ltag { display: block; font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.line-card p { margin: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.62; }

.credit-block { margin-top: 36px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 34px; max-width: 720px; }
.credit-block .figure { font: 700 38px/1.15 'JetBrains Mono', monospace; color: var(--lime-read); margin: 0 0 14px; letter-spacing: -0.02em; }
.credit-block .figure span { font: 500 16px Inter, sans-serif; color: var(--text-dim); display: block; margin-top: 6px; letter-spacing: 0; }
.credit-block p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.65; }

.promise-block { margin-top: 8px; max-width: 720px; padding: 18px 22px; border-left: 3px solid var(--cyan); background: var(--surface); border-radius: 0 16px 16px 0; }
.promise-block .ptag { display: block; font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.promise-block p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text); font-weight: 600; }
.promise-block p + p { margin-top: 12px; }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; max-width: 920px; }
@media (max-width: 780px) { .fit-grid { grid-template-columns: 1fr; gap: 26px; } }
.fit-col { border-top: 1px solid var(--border); padding: 24px 2px 2px; position: relative; }
.fit-col:before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--text-dim); }
.fit-col.yes:before { background: var(--cyan); }
.fit-col h3 { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 12px; color: var(--text-dim); }
.fit-col.yes h3 { color: var(--cyan); }
.fit-col p { color: var(--text-dim); font-size: 15.5px; line-height: 1.65; margin: 0; }

.who-card { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; max-width: 820px; }
.who-card p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.7; }

/* --------------------------------------------------------- 5. closing
   Flow and hold: one H2, one lime act (the second and last lime control
   on the page -- hero and close only). No gradient wash: plain elevated
   surface, matching the brand law (a wash of --lime-faint here read as a
   second glow and was removed). */
.closing { background: var(--surface); border-top: 1px solid var(--border); text-align: center; padding: 100px 24px; }
.closing .lead { margin: 0 auto 30px; max-width: 620px; text-align: center; }
.closing .btn-lime { margin-top: 6px; }