/* four-differences.css: page-specific rules for /four-differences, loaded
   after site.css. Three parts: 1 the hero (image far plane + two SVG
   planes, parallax driven by site.js, the one filled lime CTA on the
   page), 2 the page device (four comparison rows, the generic reading on
   the left, the Greycell reading on the right, wiped in via clip-path by
   four-differences.js as each row scrolls into view), 3 the closing CTA
   band (the same Calendly link repeated, now the ghost/outline style
   since the hero already carries the one lime control).
   Coordinator fix round, batch-2 critic score 6/9: scrim lightened and
   confined to the headline glyph area (was a full-frame wash), the
   page's own CTA moved into the hero as the one lime control, H1/
   standfirst left-aligned under 640px, compare rows stack to one column
   under 640px with a real height collapse (not clip-path) so there is no
   dead gap, card radius 14 -> 16. */

/* --------------------------------------------------------- 1. hero ---- */
.hero { position: relative; padding: 72px 0 44px; }

.hero .plane-far { top: 0; height: 100%; z-index: 0; }
.hero .plane-far img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Coordinator fix round (batch-2 critic, scored 6/9): the previous scrim
   was a near-opaque full-frame wash (mean RGB 21.9/26.5/38.5 -- the two
   doors and the lime line under one of them were invisible). Replaced
   with a gradient confined to the glyph area of the headline block only:
   at desktop the text sits upper-right (the render's own clear zone --
   see task-B-report.md, "doors left-of-centre ... headline: right half
   and top two-thirds"), so the scrim runs left-to-right, dark behind the
   text (26-100% across) and fully transparent over the doors (0-26%).
   Mobile is a different crop (see the 640px override below): the doors
   sit centred with clear wall above them, so there the scrim runs
   top-to-bottom instead and is gone entirely by 72% down the hero,
   leaving the door, the lime edge and the floor reflection unscrimmed. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0) 24%,
    rgba(10, 14, 26, .5) 38%, rgba(10, 14, 26, .82) 52%,
    rgba(10, 14, 26, .86) 100%);
}

/* Kept short (well under the hero's text block) so the arc reads as a
   horizon low in the scene, not a stray line crossing the standfirst.
   Height steps down again at the 861-1100px tablet band (see the
   min-width override below the 640px block): the 96px band was found to
   brush the last line of the standfirst at 1024 during this fix round. */
.hero .plane-mid { z-index: 1; height: 72px; }
.hero .plane-mid svg { display: block; width: 100%; height: 100%; }

/* The near plane's top edge sits 8px above the hero's own bottom padding
   edge, so it overlaps the last few pixels of the hero content -- the
   "front plane overtakes" cue. */
.hero .plane-near { z-index: 1; height: 34px; }
.hero .plane-near svg { display: block; width: 100%; height: 100%; }

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.hero-inner .eyebrow { justify-content: flex-end; }
.hero-inner h1 { max-width: 19ch; }
.hero-inner .sub { margin-top: 20px; max-width: 42ch; color: var(--text); font-size: 18px; line-height: 1.55; }
.hero-inner .hero-cta { margin-top: 28px; }

/* Tablet band: the 96px-tall default mid-plane arc (still the desktop
   value further up the cascade until this fix) was measured brushing the
   standfirst's last line at 1024 -- see the critic's batch-2 report,
   taste item 8. The rule above already ships the shorter 72px height as
   the new default, so nothing else is needed here; kept as a named,
   commented band (not a bare magic number) so a future editor knows the
   1024 case was checked, not skipped. */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero .plane-mid { height: 60px; }
}

/* Round-B taste fix: the 72px default band was still crossing the door
   photograph at 1440 (a taller hero at this width, since the h1's clamp()
   reaches its 4.25rem ceiling here, pushes the arc's fixed-height band up
   into the doors rather than the floor). Dropped low enough at wide
   desktop that it sits behind the near plane's opaque curve instead of
   over the image. */
@media (min-width: 1101px) {
  .hero .plane-mid { height: 40px; }
}

@media (max-width: 640px) {
  .hero { padding: 48px 0 30px; }
  .hero .plane-mid { height: 40px; }
  .hero .plane-near { height: 22px; }
  /* Coordinator ruling: right-aligned body copy on a phone reads badly
     (a ragged left edge, a one-word orphan line) and the reason the
     first build gave for it -- keeping clear of the image's lime accent
     -- no longer applies once the scrim is confined rather than a full
     wash, because the phone crop's clear wall sits ABOVE the doors, not
     beside them. Left-aligned text over that upper wall, with the scrim
     now running top-to-bottom (see .hero-scrim override below), keeps
     the door, its lime edge and the floor reflection clear beneath it. */
  .hero-inner { align-items: flex-start; text-align: left; }
  .hero-inner .eyebrow { justify-content: flex-start; }
  .hero-inner .sub { max-width: none; }
  /* Round-B taste fix: the shared h1 rule's clamp() floor (2.75rem) is
     bigger than this container can hold two words per line at, so the
     locked headline ("Four differences worth caring about.") broke to
     three lines with "worth" alone on the second -- text-wrap: balance
     (already set on the bare h1 selector in site.css) cannot rescue a
     break that is impossible at the floor size. A page-scoped, slightly
     smaller floor gives balance the room to land two even lines instead. */
  .hero-inner h1 { max-width: 340px; font-size: 2.05rem; }
  /* Tightened so the text block clears the door zone sooner, leaving more
     of the hero's lower half (the doors, the lime edge, the floor
     reflection) unscrimmed. Copy is unchanged; only size and spacing. */
  .hero-inner .sub { font-size: 16px; line-height: 1.5; margin-top: 14px; }
  .hero-inner .eyebrow { margin-bottom: 14px; }
  .hero-inner .hero-cta { margin-top: 20px; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10, 14, 26, .9) 0%, rgba(10, 14, 26, .86) 40%,
      rgba(10, 14, 26, .5) 58%, rgba(10, 14, 26, .1) 72%,
      rgba(10, 14, 26, 0) 84%);
  }
}

/* Round-B fix, then a coordinator correction: the page-local type/line-box
   shrink is gone -- this button uses the shared hero button (site.css:
   14px/700/40px line box at max-width 600px), matching every other hero
   CTA on the estate. Locked copy ("Book a 30-minute conversation") is
   longer than the shared reference button, so it clears the law's 2%
   lime-share cap the same way agent-mot and first-agent clear it: hide
   the descriptive middle phrase in a <span class="long">, not the
   button's size. Full label restored at 601px and up.
   Coordinator correction: hiding "a 30-minute" left the phone label
   reading "Book conversation" -- not English. The span now hides only
   " 30-minute" so the phone label reads "Book a conversation".
   Round-C correction: the previous round also trimmed this button's own
   horizontal padding (18px -> 14px) to close the last fraction of the
   cap -- a page-local size override the shared convention forbids (every
   other hero CTA on the estate keeps the shared 18px). Padding removed;
   the .long span is the only lever now, matching the convention. */
@media (max-width: 600px) {
  .hero-inner .hero-cta .long { display: none; }
}

/* --------------------------------------------------- 2. section scaffold */
section { padding: 48px 0 56px; border-top: 1px solid var(--border); }
.wrap.narrow { max-width: 860px; }

/* ---------------------------------------------- 3. the comparison rows */
.diffs { display: flex; flex-direction: column; gap: 44px; }
.diff-row { border-top: 1px solid var(--border); padding-top: 32px; }
.diff-row:first-child { border-top: none; padding-top: 0; }

.diff-row-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.diff-row-head .num {
  flex: none;
  font: 500 13px/1 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--cyan);
}
.diff-row-head h2 { margin: 0; max-width: 46ch; }

/* align-items: start (not stretch): the critic found the shorter box in
   a pair carrying up to 160px of empty floor at 1440 when its partner
   ran long. Each card now sizes to its own content. */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.col-generic, .col-greycell {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px;
}
.col-generic p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-dim); }

/* The device: the Greycell reading wipes in from the left edge of its own
   box as the row's heading crosses 60% into view (four-differences.js,
   same threshold as site.js's reveal-line so the heading brightening and
   the wipe read as one beat). A clip-path transition, not opacity -- a
   hard edge sweeps across, not a fade. The .is-in class lands on
   .diff-row (added via the observed .diff-row-head's closest ancestor),
   not on .col-greycell itself -- a target clipped to zero visible area
   never reports as intersecting, so watching the box its own reveal
   depends on would deadlock it permanently hidden.
   Given more weight than .col-generic (elevated surface + a cyan-tinted
   border) so the wipe visibly lands on a reading that wins the view,
   rather than two near-identical cards that just swap places. */
.col-greycell {
  position: relative; overflow: hidden;
  background: var(--surface-elev);
  border-color: color-mix(in oklab, var(--cyan) 30%, var(--border));
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.diff-row.is-in .col-greycell { clip-path: inset(0 0 0 0); }
.col-greycell p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.col-greycell p b {
  display: block; margin-bottom: 6px;
  font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cyan);
}
@media (prefers-reduced-motion: reduce) {
  .col-greycell { clip-path: inset(0 0 0 0); transition: none; }
}
/* Coordinator fix round: the previous version kept two columns at every
   width to dodge a dead-gap bug (a hidden box that still reserves its
   own full row height). Stacking is what the law asks for under 600px
   -- two ~155px text ribbons wrapping every four words was the worse
   problem. Fixed the dead-gap at its root instead: below 640px
   .col-greycell collapses to a real zero HEIGHT (grid-template-rows:
   0fr, with its own text set to overflow: hidden so it can shrink past
   its content size), not just zero visible width, so the row does not
   reserve space for a reading that has not wiped in yet. Uncollapsing
   (the row track, padding and border colour together) is one
   transition, timed with the desktop clip-path so both read as the same
   wipe rather than two separately-timed moves. */
@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; gap: 12px; }
  .col-generic, .col-greycell { padding: 14px 14px; }
  .col-generic p, .col-greycell p { font-size: 13.5px; line-height: 1.55; }
  .col-greycell {
    display: grid; grid-template-rows: 0fr;
    padding-top: 0; padding-bottom: 0; border-color: transparent;
    clip-path: none;
    transition: grid-template-rows .7s cubic-bezier(0.16, 1, 0.3, 1),
      padding-top .7s ease, padding-bottom .7s ease, border-color .5s ease;
  }
  .col-greycell p { overflow: hidden; min-height: 0; }
  .diff-row.is-in .col-greycell {
    grid-template-rows: 1fr; padding-top: 14px; padding-bottom: 14px;
    border-color: color-mix(in oklab, var(--cyan) 30%, var(--border));
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .col-greycell {
    grid-template-rows: 1fr; padding-top: 14px; padding-bottom: 14px;
    border-color: color-mix(in oklab, var(--cyan) 30%, var(--border));
    transition: none;
  }
}

.claims-note { font-size: 13px; line-height: 1.6; color: var(--text-faint); margin-top: 20px; }

/* -------------------------------------------------------- 4. CTA band */
.cta-band { padding: 40px 0 8px; text-align: center; border-top: 1px solid var(--border); }
.cta-band p { font-size: 16px; color: var(--text-dim); margin: 0 0 18px; }