/* ============================================================
   HERO CANDIDATES — six directions, each from a named reference
   ------------------------------------------------------------
   Built so they can be compared on one page and one chosen. They
   share the v3 tokens, so what differs is composition and the
   design devices, not the palette or the type.
   ============================================================ */

@media (max-width: 760px) { .pick__src { display: none; } }

/* ============================================================
   A — CROSSHAIR GRID + GRADIENT FIELD          (Vercel)
   A technical grid with real crosshairs at the intersections and a
   soft spectrum bleeding up from the baseline. The grid says
   "engineered"; the gradient stops it being cold.
   ============================================================ */
/* Shorter now the panel has gone — the tall bottom run existed to make room
   for it, and left a void once it was lifted out. */
/* ============================================================
   ROUND TWO — six more, after A was chosen and then outgrown.
   References pulled from Mobbin, named per block. A stays as the
   control at the top of heroes.html.
   ============================================================ */

/* ---- C. EDGE BLEED: cards cropped by the frame  (Maze) ----------
   Content deliberately running off the right edge, cut by the viewport
   rather than by a container. It reads as a window onto something
   larger — which is the whole pitch. This is the one pattern here that
   is undiscoverable from first principles: every instinct says finish
   the card inside the grid. */
.hC { position: relative; overflow: hidden; padding-block: var(--s7) var(--s6); }
.hC__in { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1fr); gap: var(--s5);
  align-items: center; }
.hC h1 { font-size: var(--t-xl); }
/* The stage has to escape the 1200px wrap or nothing gets cut — the cards
   simply sat inside the container with a fade over them, which is a different
   (and much weaker) pattern. This pulls the stage out to the viewport's right
   edge so the crop is done by the frame itself. */
.hC__stage { position: relative; height: 380px; margin-right: calc(50% - 50vw); }
.hC__card { position: absolute; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--lift-3); padding: var(--s3); width: 330px; }
/* Offsets are chosen so the cards are CUT by the viewport's right edge, not
   contained by it. Do not "fix" them back inside the frame — the crop is the
   pattern. (These four rules were lost once to a bad edit and the symptom was
   three cards reporting an identical right edge; if that ever recurs, this is
   the block that went missing.) */
.hC__card--1 { top: 0;     left: 6%;  }
.hC__card--2 { top: 128px; left: 50%; }
.hC__card--3 { top: 256px; left: 44%; }
.hC__fade { position: absolute; inset: 0 -1px 0 auto; width: 120px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--paper)); }
@media (max-width: 940px) { .hC__in { grid-template-columns: 1fr; } .hC__stage { height: 300px; } }

/* ---- E. FULL-BLEED VIGNETTE UNDER THE TYPE  (Figma / Runway) ----
   Centred headline, then the product running the full width of the
   viewport and cropped at the bottom of the fold. The crop is what
   makes it feel like a real screen rather than a screenshot. */
.hE { padding-top: var(--s7); text-align: center; overflow: hidden; }
.hE h1 { font-size: var(--t-xl); }
.hE__stage { margin-top: var(--s6); height: 300px; position: relative; }
.hE__win { position: absolute; left: 50%; translate: -50% 0; top: 0; width: min(1320px, 96vw);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -1px 0 var(--line), 0 30px 70px -20px rgba(15,15,15,0.22); overflow: hidden;
  text-align: left; }
.hE__chrome { display: flex; align-items: center; gap: 7px; padding: 12px var(--s3);
  border-bottom: 1px solid var(--line); }
.hE__dot { width: 9px; height: 9px; border-radius: 99px; background: var(--paper-3); }
.hE__fade { position: absolute; inset: auto 0 0 0; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--paper)); }

/* ---- G. DECK FANNED BEHIND THE TYPE  (Fruitful, applied to a hero) --
   The cards sit BEHIND the headline, tilted and faded back. The scrim
   is not decoration: white type over white cards needs a ground, and
   without it the headline loses its counters against the card borders. */
.hG { position: relative; overflow: hidden; padding-block: var(--s8) var(--s7); text-align: center; }
.hG__deck { position: absolute; inset: 0; pointer-events: none; }
.hG__c { position: absolute; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--lift-2); width: 300px; padding: var(--s3);
  opacity: 0.85; }
.hG__c--1 { left: 4%;  top: 16%; transform: rotate(-7deg); }
.hG__c--2 { right: 3%; top: 12%; transform: rotate(6deg); }
.hG__c--3 { left: 12%; bottom: 6%; transform: rotate(4deg); }
.hG__c--4 { right: 9%; bottom: 2%; transform: rotate(-5deg); }
.hG__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 48%, var(--paper) 0%, var(--paper) 42%, rgba(255,255,255,0) 78%); }
.hG__in { position: relative; }
.hG h1 { font-size: var(--t-xl); }
@media (max-width: 1100px) { .hG__c { display: none; } }







/* ============================================================
   V — SPLIT, SERIF, AND A CLUSTER OF REAL SURFACES  (incident.io)
   ------------------------------------------------------------
   Claim on the left in an editorial serif, one pill CTA, and on the
   right four product fragments overlapping at different depths.

   What makes this pattern work is that the fragments are DIFFERENT
   KINDS of surface — a list, a message, a chart, a record — not four
   copies of one card. That is what says "one system, many places"
   without a word of copy doing it.

   The serif is doing real work here: it is the only thing on the site
   that is not Manrope or Inter, so it reads as a masthead rather than
   as another heading. Newsreader, self-hosted, 400/500 only.
   ============================================================ */
.hV { position: relative; overflow: hidden; padding-block: var(--s7) var(--s6); background: var(--paper); }
.hV__in { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
  gap: var(--s5); align-items: center; }
/* Brand face, not the serif. Newsreader was tried for V's editorial register
   and dropped — the wordmark and every other heading on the site are Manrope,
   and one page in a different family reads as a different company. */
.hV h1 { font-family: var(--display); font-weight: var(--w-display);
  font-size: clamp(40px, 5.2vw, 74px); line-height: 1.03;
  letter-spacing: var(--track); color: var(--ink); }
.hV .lede { font-size: var(--t-md); max-width: 30ch; color: var(--ink-3); }
.hV__pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--white);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); }
.hV__cta { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s4);
  padding: 15px 30px; border-radius: var(--r-pill); background: var(--ink); color: var(--white);
  font-size: var(--t-body); font-weight: 600; }
.hV__cta:hover { background: #2A2A2A; }
.hV__alt { display: block; margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-3); }

/* the cluster. Depth is carried by shadow SIZE, not by opacity — a faded card
   reads as disabled, a card with a bigger shadow reads as nearer. */
/* The cluster. Depth is carried by shadow SIZE, not by opacity — a faded card
   reads as disabled, a bigger shadow reads as nearer.

   The first layout put the record card straight over the task list and the
   message: at 440px the four fragments simply did not fit without colliding,
   and the fix is height, not smaller cards. Positions below are set so that
   fragments overlap only on CHROME. Verified by sampling every text box in the
   stage, not by looking at it. */
/* Measured, not eyeballed. The stage is 562 wide at 1440; the record card was
   352x289 inside it, which put it over the message card's send control and the
   chart's meta. Cards are sized against that 562 now, and the only overlap left
   is the record's top-left corner on the task card's PADDING — chrome, not
   copy. Depth comes from shadow size, never from opacity: a faded card reads as
   disabled, a bigger shadow reads as nearer. */
/* Stage measures 562x520 at 1440. Each fragment gets its own lane, and the ONLY
   overlap left is the chart's right edge sitting on the task card's 24px of
   left padding — chrome, never copy.

   Two earlier attempts failed here and both were found by measurement, not by
   looking: the record card landed on the message and the chart, then the
   message landed on the task rows. Anything moved in this block needs the
   overlap check re-run, and that check must include elements that have child
   nodes — the task rows each contain a checkbox span, and an earlier version of
   the check skipped them for exactly that reason while they were the ones
   broken. Depth is shadow SIZE, never opacity. */
.hV__stage { position: relative; height: 520px; }
.hV__f { position: absolute; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.hV__f--tasks { top: 0; right: 0; width: 372px; padding: var(--s3);
  box-shadow: 0 1px 2px rgba(15,15,15,0.04), 0 10px 26px -10px rgba(15,15,15,0.14); z-index: 1; }
.hV__f--chart { top: 120px; left: 0; width: 206px; padding: var(--s3);
  box-shadow: 0 2px 4px rgba(15,15,15,0.05), 0 18px 40px -12px rgba(15,15,15,0.18); z-index: 2; }
.hV__f--msg   { bottom: 88px; left: 0; width: 224px; padding: 14px;
  box-shadow: 0 2px 4px rgba(15,15,15,0.05), 0 18px 40px -12px rgba(15,15,15,0.20); z-index: 2; }
.hV__f--rec   { bottom: 10px; right: 0; width: 330px; padding: var(--s3);
  box-shadow: 0 4px 8px rgba(15,15,15,0.06), 0 34px 66px -16px rgba(15,15,15,0.28); z-index: 3; }

.hV__h { display: flex; align-items: baseline; justify-content: space-between; }
.hV__ht { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.hV__hm { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.hV__bar { height: 3px; border-radius: 99px; background: var(--paper-3); margin: 12px 0 14px; }
.hV__bar span { display: block; height: 100%; border-radius: 99px; background: var(--brand-hot); width: 20%; }
.hV__t { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--t-sm); color: var(--ink-2); }
.hV__box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line-2); flex: 0 0 auto; }
.hV__box--on { background: var(--ink); border-color: var(--ink); }
.hV__slash { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--tint-3);
  color: #2563A8; font-family: var(--mono); font-size: 12px; }
.hV__tools { display: flex; gap: 14px; margin-top: 12px; color: var(--ink-4); font-size: 14px; }
.hV__cols { display: flex; align-items: flex-end; gap: 5px; height: 76px; margin-top: 12px; }
.hV__col { flex: 1; border-radius: 2px 2px 0 0; background: var(--brand); opacity: 0.75; }
.hV__kv { display: flex; justify-content: space-between; font-size: var(--t-sm); padding: 5px 0; }
.hV__kv span:first-child { color: var(--ink-3); }
.hV__kv span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.hV__tag { display: inline-block; padding: 5px 10px; border-radius: 7px; background: #FDF3D8;
  color: #7A5A12; font-size: var(--t-xs); font-weight: 600; }
.hV__btn { display: block; text-align: center; margin-top: 14px; padding: 10px;
  border: 1px solid var(--line-2); border-radius: var(--r); font-size: var(--t-sm);
  font-weight: 600; color: var(--ink); }

/* the proof strip. incident.io runs a customer logo row here; we have ONE
   customer, so a fake logo wall would be a lie. A single true line instead. */
.hV__proof { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center;
  font-size: var(--t-sm); color: var(--ink-3); }
.hV__proof b { color: var(--ink); font-weight: 600; }

@media (max-width: 1000px) {
  .hV__in { grid-template-columns: 1fr; gap: var(--s6); }
  .hV__stage { height: 400px; }
  .hV__f--tasks { width: 84%; } .hV__f--msg { width: 76%; }
  .hV__f--rec { width: 80%; right: 0; } .hV__f--chart { width: 62%; left: 0; }
}

/* ============================================================
   ROUND SIX — the synthesis of M, G, E and V.

   The rule those four share: the visual is an ARTEFACT, not an
   atmosphere. A real interface or a drafting system, sitting behind
   or under the type, cut by the frame, drawn in hairlines with no
   blur anywhere. Everything rejected was a light effect.

   W, X and Y each take that further rather than recombining it
   politely. No gradients, no blur, no glow in this block — if one
   appears here later, it has broken the rule these were built on.
   ============================================================ */

.plan { position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15,15,15,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,15,15,0.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,15,15,0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,15,15,0.075) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px; }
.serifh { font-family: var(--display); font-weight: var(--w-display); line-height: 1.03;
  letter-spacing: var(--track); color: var(--ink); }
.callout { font-family: var(--mono); font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-4); }
.wire { position: absolute; background: var(--ink-4); opacity: 0.34; }
.wire--h { height: 1px; } .wire--v { width: 1px; }
.joint { position: absolute; width: 7px; height: 7px; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--ink-4); translate: -50% -50%; }

/* ---- W. EXPLODED SCHEMATIC -------------------------------------
   One call drawn as a wiring diagram: the caller enters on the left,
   the system is the box in the middle, and three outcomes leave on
   the right — each one a real surface, connected by orthogonal
   hairlines with mono callouts on the runs.

   This is the only hero here that explains the product rather than
   asserting it, and it does it without a sentence of copy. */
.hW { position: relative; overflow: hidden; background: var(--paper); padding-block: var(--s7) var(--s6); }
.hW__in { display: grid; grid-template-columns: minmax(0,0.86fr) minmax(0,1.14fr);
  gap: var(--s5); align-items: center; }
.hW h1 { font-size: clamp(38px, 4.6vw, 64px); }
.hW__stage { position: relative; height: 452px; }
.hW__node { position: absolute; background: var(--white); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 12px 14px; }
.hW__hub { position: absolute; left: 40%; top: 50%; translate: -50% -50%;
  width: 148px; text-align: center; padding: 16px 12px;
  background: var(--ink); color: var(--white); border-radius: var(--r-lg); }
.hW__hub b { display: block; font-size: var(--t-sm); }
.hW__hub span { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-top: 4px; }
.hW__t { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.hW__s { font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }

/* ---- X. DIMENSIONED DRAWING ------------------------------------
   E's cropped window, but placed on a drafting plane and DIMENSIONED
   — extension lines, arrow rules and mono figures reading off its
   edges. The annotations are the design; the window is the subject. */
.hX { position: relative; overflow: hidden; background: #FCFDFE; padding-block: var(--s7) 0; }
.hX__stage { position: relative; margin-top: var(--s6); height: 330px; }
.hX__win { position: absolute; left: 50%; translate: -50% 0; top: 0; width: min(980px, 88vw);
  background: var(--white); border: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; text-align: left; }
.hX__chrome { display: flex; align-items: center; gap: 7px; padding: 11px var(--s3);
  border-bottom: 1px solid var(--line); }
.hX__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--paper-3); }
.hX__dim { position: absolute; display: flex; align-items: center; gap: 6px; }
.hX__dim::before, .hX__dim::after { content: ''; height: 1px; flex: 1; background: var(--ink-4); opacity: 0.4; }
.hX__ext { position: absolute; width: 1px; background: var(--ink-4); opacity: 0.28; }

/* ---- Y. THE LINE AS AN AXIS ------------------------------------
   A single time axis crossing the whole viewport, ticked by the
   minute, with real fragments pinned at the moment they happened —
   above the line for what the caller did, below for what the system
   did. Cut by both edges, because the day did not start at the left
   margin. */
.hY { position: relative; overflow: hidden; background: var(--paper); padding-block: var(--s7) var(--s6); }
.hY h1 { font-size: clamp(38px, 4.8vw, 66px); max-width: 17ch; }
.hY__stage { position: relative; height: 330px; width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: var(--s6); }
.hY__axis { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-4); opacity: 0.42; }
.hY__tick { position: absolute; top: 50%; width: 1px; height: 9px; translate: 0 -50%;
  background: var(--ink-4); opacity: 0.42; }
.hY__time { position: absolute; top: calc(50% + 12px); translate: -50% 0; }
.hY__pin { position: absolute; width: 1px; background: var(--ink-4); opacity: 0.3; }
.hY__card { position: absolute; width: 238px; background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; }
.hY__card b { display: block; font-size: var(--t-sm); color: var(--ink); }
.hY__card span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

@media (max-width: 1000px) {
  .hW__in { grid-template-columns: 1fr; gap: var(--s5); }
  .hW__stage { height: 420px; }
  .hY__card { width: 190px; }
}

/* ---- Z. DOCUMENT FAN, CUT AT THE FOLD  (Acctual) ----------------
   Centred type over a fan of real paperwork rising from the bottom
   and cropped by the fold. Same family as G and E — objects with
   depth, cut by the frame — but the objects are DOCUMENTS, which is
   the one artefact a trade business already recognises.

   Acctual props the composition with photographed desk objects
   bleeding in at the corners. We have no photography and stock would
   be worse than none, so the fan carries it alone. */
.hZ { position: relative; overflow: hidden; background: var(--paper); padding-block: var(--s7) 0; }
.hZ__pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-pill);
  background: #DCEBFB; color: #1D62A8; font-size: var(--t-sm); font-weight: 600; }
/* Tracking was -0.035em while the display face was Manrope — a wide geometric
   that needs pulling in at size. Archivo is a narrower grotesque and the same
   value closes its counters, so it moves with the face. A tracking value tuned
   for one typeface is not a site constant; it is part of that typeface's setup. */
.hZ h1 { font-size: clamp(40px, 5.6vw, 78px); line-height: 1.03; letter-spacing: -0.018em; }
.hZ__cta { display: inline-flex; margin-top: var(--s4); padding: 16px 30px;
  border-radius: var(--r-btn); background: var(--ink); color: var(--white);
  font-size: var(--t-body); font-weight: 600; }
.hZ__cta:hover { background: #2A2A2A; }
.hZ__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5);
  margin-top: var(--s5); }
.hZ__ck { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm);
  font-weight: 600; color: #1D62A8; }
.hZ__ck::before { content: '✓'; width: 17px; height: 17px; border-radius: 99px; background: #2F80DA;
  color: #fff; font-size: 10px; display: grid; place-items: center; }

.hZ__fan { position: relative; height: 330px; margin-top: var(--s6); }
.hZ__doc { position: absolute; background: var(--white); border-radius: var(--r-paper);
  box-shadow: 0 1px 2px rgba(15,15,15,0.06), 0 26px 60px -22px rgba(15,15,15,0.30); }
/* the two behind are rotated and pushed under the front sheet — they are
   PAPER, so they get square corners and a hard shadow, not a card radius */
.hZ__doc--l { left: 50%; margin-left: -516px; top: 46px; width: 300px; height: 380px;
  transform: rotate(-9deg); z-index: 1; padding: var(--s3); }
.hZ__doc--r { left: 50%; margin-left: 236px; top: 38px; width: 300px; height: 380px;
  transform: rotate(7deg); z-index: 1; padding: var(--s3); }
.hZ__doc--m { left: 50%; translate: -50% 0; top: 0; width: 620px; height: 430px; z-index: 2;
  overflow: hidden; }
/* The document is a JOB LOG, not an invoice.

   It was built as an invoice first — FROM party, TO party, line items — because
   that is what Acctual's reference is. But an invoice has two parties because
   money moves between them; a job has one customer and a sequence of events.
   Copying the form without the reason put the best fact on the page ("nobody in
   the shop touched it") into small grey type as a caption.

   The log makes that fact structural instead: every row is a timestamped event
   and the last column is WHO DID IT. Five rows say Levrg, one says a person's
   name — and that column is the whole product argument, made without a sentence
   of marketing copy. It is also simply true, which is why it can be shown. */
.hZ__hd { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.hZ__no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.hZ__cust { font-size: var(--t-lg); font-weight: 600; color: var(--ink); line-height: 1.1;
  margin-top: 4px; letter-spacing: -0.018em; }
.hZ__meta { font-size: var(--t-sm); color: var(--ink-3); margin-top: 5px; }
.hZ__st { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand); border: 1px solid var(--brand-line);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }

.hZ__log { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: var(--s3);
  padding: 12px var(--s4); font-size: var(--t-sm); color: var(--ink-2);
  border-bottom: 1px solid var(--line); align-items: baseline; }
.hZ__log--h { color: var(--ink-4); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; }
.hZ__when { font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  font-variant-numeric: tabular-nums; }
.hZ__by { font-size: var(--t-xs); font-weight: 600; color: var(--ink-4); text-align: right;
  white-space: nowrap; }
/* the one row a person did. It is darker than the rest on purpose — the reader
   should be able to count the human rows without reading a word. */
.hZ__by--human { color: var(--ink); }

.hZ__ghost { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-4); }

/* ------------------------------------------------------------------
   Row grids for the two windowed heroes.

   These lived on `.hA .row` and were deleted with hero A. The default
   `.row` is four columns and `.panel--nodur .row` is three, but E's
   rows carry FIVE children (tag, name, status, value, duration) and
   X's carry four — so the surplus child wrapped onto a line of its
   own and the value read as a stray number under the name.

   A grid whose column count is set somewhere other than where the
   markup is written will break exactly like this the next time a
   block is moved. Both are pinned here, next to the heroes that own
   the markup.
   ------------------------------------------------------------------ */
.hE .row { grid-template-columns: 30px minmax(0,1fr) auto 84px 52px; }
.hX .panel--nodur .row { grid-template-columns: 30px minmax(0,1fr) auto 62px; }

/* Z's right-hand sheet started 74px inside the front sheet, so its text
   began underneath it. Pushed clear — only the tail tucks under now. */
.hZ__doc--r { margin-left: 286px; }

/* ------------------------------------------------------------------
   Z on the home page.

   The candidate page had no nav above it. On the real page a white
   header strip sitting on top of Z's grey ground would draw a hard
   line across the top of the composition, so the header moves INSIDE
   the hero and becomes a floating pill — which is what Acctual does,
   and it is the reason their nav reads as an object on a desk rather
   than as a browser chrome bar.
   ------------------------------------------------------------------ */
.hZ--home { padding-top: var(--s3); }
.hZ__nav { background: var(--white); border-radius: var(--r-pill); padding: 10px 12px 10px 22px;
  box-shadow: 0 1px 2px rgba(15,15,15,0.05), 0 10px 26px -14px rgba(15,15,15,0.22); }
.hZ__nav .nav { border: 0; padding: 0; }
.hZ--home .wrap { position: relative; z-index: 1; }
.hZ--home .hZ__fan { z-index: 0; }
/* The fan is cropped by the section, so the section must not grow to fit it. */
.hZ--home .hZ__fan { height: 392px; }
@media (max-width: 900px) {
  .hZ__nav { padding: 10px 12px; }
  .hZ--home .hZ__fan { height: 300px; }
}