/* ══════════════════════════════════════════════════════════════════
       Landing hero — Agents.

       Hand-written for landing-agents.html and nothing else. This sheet is
       not generated and the hero markup is not stamped: edit the page and
       this file directly.

       Palette and type come from tokens.css. Nothing new is declared —
       the greys inside the miniature documents are paper tones, the only
       colour is var(--accent).

       Every rule is scoped under .agents-hero so the short names inside
       (.k, .v, .row, .gd) cannot leak into another page.
       ══════════════════════════════════════════════════════════════════ */

    /* ── layout ─────────────────────────────────────────────────────────
       A letter: the copy runs the panel's full width, and the pile sits
       inside it after the salutation, floated right, the lines wrapping
       round it and running full width again beneath it. */

    .agents-hero { display: block; }

    .agents-hero .gh-copy { min-width: 0; }

    .agents-hero .hero-kicker { margin-bottom: 18px; }

    .agents-hero .hero-title {
      font-size: clamp(34px, 3.5vw, 50px);
      line-height: 1.06;
      margin: 0 0 22px 0;
      max-width: none;
    }
    /* the claim after "Subject:" reads lighter than the label — graphite on paper, the
       inverted page's filler tone when the page has turned */
    .agents-hero .hero-title .hero-title-claim,
    .agents-hero .hero-title .hero-title-claim .trigger { color: var(--graphite); }
    body.is-inverted .agents-hero .hero-title .hero-title-claim,
    body.is-inverted .agents-hero .hero-title .hero-title-claim .trigger { color: #d2d2cd; }

    /* ── the marked words ───────────────────────────────────────────────
       "document" is the .trigger that turns the page; "management" only
       borrows its rule, so the two read as one phrase. Scoped here because
       home.css is the landing page and nothing else — the five capability
       pages keep the graphite underline they share.

       The behaviour stays on the one word. A hit area twice as wide would
       turn the page on the way past it, and the underline was never what
       made that word live. */
    .agents-hero .hero-title .trigger,
    .agents-hero .hero-title .hero-mark {
      border-bottom: 3px dashed rgba(var(--accent-rgb), .6);
    }
    .agents-hero .hero-title .trigger:hover,
    .agents-hero .hero-title .trigger:focus-visible {
      border-bottom-color: var(--accent);
    }

    .agents-hero .gh-lede {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.6;
      color: #46453f;
      margin: 0 0 26px 0;
    }
    .agents-hero .gh-lede b { font-weight: 600; color: var(--ink); }
    .agents-hero .gh-lede .quiet { color: var(--graphite); }

    .agents-hero .spec-inline { margin: 0; }

    /* Two ways in on one row: the ask first, the spec link second.
       They drop onto separate lines when the column runs out. */
    .agents-hero .gh-ctas {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 26px;
    }

    /* ── the stage ──────────────────────────────────────────────────────
       No frame, no rail, no caption. The composition is fixed at its
       design size and scaled as one piece on narrow screens, so the wire
       and the panel never drift out of register.

       The wrap clips only so a document flying in from off-stage cannot
       widen the document and produce a horizontal scrollbar. Cards fade
       in well inside the edge, so the clip is never visible. */

    .agents-hero .gh-stage-wrap {
      float: right;
      /* Above the letter's paragraphs: the ones that follow the figure are positioned
         (extract-box) and would otherwise paint over it and take its hover. */
      position: relative;
      z-index: 2;
      width: min(560px, 55%);
      margin: -28px 0 0 36px;
      height: 397px;
      display: flex;
      justify-content: center;
      overflow: hidden;
      transition: opacity .4s ease .45s;
    }
    .agents-hero .gh-ctas { clear: both; }
    /* The stage's own geometry starts its first piece, the agents' tool row, 85px
       down; inside the letter that blank band is pulled up out of the clipped box, so
       the tool row starts 2px in, the panel ends 2px before the bottom, and the box
       itself starts 28px above the line beside it, so the tool row meets the paragraph above. */
    .agents-hero .gh-stage {
      position: relative;
      width: 560px;
      height: 530px;
      flex: none;
      transform-origin: top center;
      transform: scale(.9);
      margin-top: -74px;
    }

    /* ── the packet, boxed as one ───────────────────────────────────────
       An inert overlay whose only job is to carry an annotation. No card can
       carry its own: each clips to its own bounds, and its ::after is already
       spent on the sheen. Geometry tracks the fan — the outer cards land
       182px off centre rotated 9.5deg, so the pile spans about 14px to 546px
       of the 560px stage. */

    .agents-hero .gh-pile-box {
      position: absolute;
      z-index: 30;
      left: 14px;
      top: 142px;
      width: 532px;
      height: 210px;
      pointer-events: none;
    }
    /* Label above. Below, it would land on the extracted panel. */
    .agents-hero .gh-pile-box::after {
      top: auto;
      bottom: calc(100% + 3px);
    }

    /* ── a document ─────────────────────────────────────────────────────
       Flies in from off-stage, lands in the fan. */

    .agents-hero .gd {
      position: absolute;
      left: 50%;
      top: 258px;
      width: 140px;
      height: 184px;
      background: var(--tint, #ffffff);
      border: 1px solid #cbcbc5;
      box-shadow: 0 5px 15px rgba(0,0,0,.11), 0 1px 2px rgba(0,0,0,.07);
      overflow: hidden;
      /* The resting pose is a normal declaration, not the animation's held
         frame. It is identical to gd-in's 100%, so nothing moves when the
         fill lets go — and letting go is the point: an animation filling
         forwards outranks :hover and the card could never be lifted. */
      transform:
        translate(-50%,-50%)
        translate(var(--ex), var(--ey))
        rotate(var(--er))
        scale(1);
      animation: gd-in 1.62s cubic-bezier(.22,.68,.16,1) var(--d) backwards;
      transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
    }

    /* Lift one page clear of the fan to read it. Four transform functions in
       the same order as the resting pose, so the two interpolate one at a
       time instead of collapsing to matrix maths and swinging. z-index has
       to shout: every card carries its own stacking inline. */
    @media (hover: hover) {
      .agents-hero .gd:hover {
        transform:
          translate(-50%,-50%)
          translate(var(--ex), calc(var(--ey) - 16px))
          rotate(var(--er))
          scale(1.14);
        box-shadow: 0 24px 46px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.10);
        z-index: 60 !important;
      }
    }
    @keyframes gd-in {
      0% {
        opacity: 0;
        transform: translate(-50%,-50%) translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(.87);
      }
      22% { opacity: 1; }
      100% {
        opacity: 1;
        transform: translate(-50%,-50%) translate(var(--ex), var(--ey)) rotate(var(--er)) scale(1);
      }
    }

    /* the light on the glass: one lit corner, one shaded, faint banding */
    .agents-hero .gd::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        linear-gradient(var(--lg, 162deg),
          rgba(255,255,255,.40),
          rgba(255,255,255,0) 34%,
          rgba(0,0,0,.030) 84%,
          rgba(0,0,0,.075)),
        repeating-linear-gradient(0deg,
          rgba(0,0,0,.016) 0 1px,
          rgba(0,0,0,0) 1px 3px);
    }

    .agents-hero .gd-s {
      padding: 7px 8px;
      font-family: var(--mono);
      color: #55524b;
      transform: skewY(var(--skw, 0deg));
    }

    /* ── document primitives ────────────────────────────────────────────
       Small enough that body copy reads as texture, which is what a
       thumbnail of a real page looks like. The headings stay legible. */

    .agents-hero .gd .hd {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 4px;
      font-size: 6.4px;
      font-weight: 700;
      letter-spacing: .02em;
      color: #2f2d29;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .gd .hd .yr { font-weight: 400; font-size: 5.4px; color: #7d7a72; }

    .agents-hero .gd .sub {
      font-size: 3.4px;
      line-height: 1.5;
      color: #8b877e;
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
    }

    .agents-hero .gd .rule {
      height: 1px;
      background: #d5d2ca;
      margin: 3px 0;
    }
    .agents-hero .gd .rule.dk { background: #a8a49b; }

    /* label · dotted leader · figure */
    .agents-hero .gd .row {
      display: flex;
      align-items: baseline;
      gap: 3px;
      font-size: 4px;
      line-height: 1.75;
      color: #63605a;
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .gd .row .k { flex: none; }
    .agents-hero .gd .row .dots {
      flex: 1 1 auto;
      min-width: 4px;
      align-self: center;
      height: 1px;
      background-image: linear-gradient(90deg, #cfccc4 1px, transparent 1px);
      background-size: 2px 1px;
    }
    .agents-hero .gd .row .v { flex: none; color: #37352f; }
    .agents-hero .gd .row.tot { font-weight: 700; color: #2f2d29; }
    .agents-hero .gd .row.tot .v { color: #1d1c19; }

    /* boxed grid, the W-2 shape */
    .agents-hero .gd .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid #c9c6bd;
      margin: 3px 0;
    }
    .agents-hero .gd .grid .cell {
      border-right: 1px solid #d8d5cc;
      border-bottom: 1px solid #d8d5cc;
      padding: 2px 3px;
      overflow: hidden;
    }
    .agents-hero .gd .grid .cell:nth-child(2n) { border-right: none; }
    .agents-hero .gd .grid .cell:nth-last-child(-n+2) { border-bottom: none; }
    .agents-hero .gd .grid .cell .cap {
      display: block;
      font-size: 2.9px;
      line-height: 1.4;
      color: #948f86;
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .gd .grid .cell .fig {
      display: block;
      font-size: 4.6px;
      line-height: 1.35;
      color: #35332e;
      white-space: nowrap;
    }

    /* ledger */
    .agents-hero .gd .tbl { margin: 2px 0; }
    .agents-hero .gd .tbl .tr {
      display: grid;
      grid-template-columns: 15px 1fr 24px 26px;
      gap: 2px;
      font-size: 3.5px;
      line-height: 1.85;
      color: #64615b;
      border-bottom: 1px dotted #ddd9d1;
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .gd .tbl .tr.th {
      color: #8d8980;
      border-bottom: 1px solid #bfbbb2;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .agents-hero .gd .tbl .tr .n { text-align: right; color: #35332e; }
    .agents-hero .gd .tbl .tr .neg { color: #6f6b64; }

    /* checkbox run */
    .agents-hero .gd .cks {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 3.5px;
      color: #6e6a63;
      margin: 3px 0;
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .gd .cks i {
      display: inline-block;
      width: 4px;
      height: 4px;
      border: 1px solid #96928a;
      margin-right: 2px;
      vertical-align: -.5px;
    }
    .agents-hero .gd .cks i.on { background: #4a4740; border-color: #4a4740; }

    /* name / value strip, the three-cell block at the top of a 1040 */
    .agents-hero .gd .strip {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 3px;
      border: 1px solid #cfccc4;
      padding: 2px 3px;
      margin: 3px 0;
      font-size: 4.1px;
      color: #35332e;
      letter-spacing: .04em;
      white-space: nowrap;
      overflow: hidden;
    }

    /* a float needs a block formatting context beside it: flex rows
       would otherwise ignore the portrait and run underneath. */
    .agents-hero .gd .beside { overflow: hidden; }

    /* portrait, seal, signature, stamps */
    .agents-hero .gd .por {
      width: 34px;
      height: 42px;
      float: left;
      margin: 0 5px 3px 0;
      border: 1px solid #c9c6bd;
      background:
        radial-gradient(circle at 50% 34%, #cfcbc2 0 6px, transparent 6.5px),
        radial-gradient(ellipse 11px 9px at 50% 76%, #cfcbc2 0 100%, transparent 0),
        #e6e3db;
    }
    .agents-hero .gd .sig {
      height: 15px;
      margin-top: 2px;
      border-bottom: 1px solid #b7b3aa;
      background:
        radial-gradient(circle at 10% 70%, #9a968d 1px, transparent 1.4px),
        radial-gradient(circle at 24% 40%, #9a968d 1px, transparent 1.4px),
        radial-gradient(circle at 38% 72%, #9a968d 1px, transparent 1.4px),
        radial-gradient(circle at 52% 38%, #9a968d 1px, transparent 1.4px),
        radial-gradient(circle at 66% 68%, #9a968d 1px, transparent 1.4px),
        radial-gradient(circle at 80% 44%, #9a968d 1px, transparent 1.4px);
    }
    .agents-hero .gd .stamp {
      position: absolute;
      z-index: 3;
      font-size: 4.6px;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid currentColor;
      padding: 2px 3px;
      opacity: .62;
      color: #6b6760;
    }
    .agents-hero .gd .stamp.ink {
      left: 9px; bottom: 11px;
      color: var(--accent);
      transform: rotate(-12deg);
    }
    .agents-hero .gd .stamp.paid {
      right: 6px; bottom: 26px;
      color: #7d7970;
      transform: rotate(-9deg);
    }
    .agents-hero .gd .notary {
      position: absolute;
      right: 7px; bottom: 8px;
      z-index: 3;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1px solid #b0aca3;
      opacity: .55;
      transform: rotate(-8deg);
      background: radial-gradient(circle, transparent 8px, #cbc7be 8.5px 9.5px, transparent 10px);
    }
    .agents-hero .gd .flag {
      position: absolute;
      right: 8px; top: 8px;
      z-index: 3;
      width: 5px; height: 5px;
      background: var(--accent);
    }

    /* ── the two that do not look like clean paper ───────────────────── */

    /* a photograph of a document on a desk, taken at an angle */
    .agents-hero .gd-shot .desk {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(158deg, #3a3733, #211f1d);
    }
    .agents-hero .gd-shot .sheet {
      position: absolute;
      left: 8px; right: 4px; top: 20px; bottom: 12px;
      background: linear-gradient(150deg, #f6f4ee, #d9d5cc);
      font-family: var(--mono);
      transform: rotate(-6deg) skewX(-4deg);
      box-shadow: 0 6px 14px rgba(0,0,0,.45);
      padding: 6px 7px;
      overflow: hidden;
    }
    .agents-hero .gd-shot .sheet .row,
    .agents-hero .gd-shot .sheet .sub { color: #57534b; }
    .agents-hero .gd-shot .glare {
      position: absolute;
      z-index: 2;
      left: -10%; top: -20%;
      width: 70%; height: 150%;
      background: linear-gradient(102deg, rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0));
      transform: rotate(9deg);
      pointer-events: none;
    }
    .agents-hero .gd-shot .thumb {
      position: absolute;
      z-index: 3;
      right: -8px; bottom: 14px;
      width: 26px; height: 40px;
      border-radius: 13px 13px 4px 4px;
      background: linear-gradient(140deg, #6d6055, #4a4038);
      transform: rotate(16deg);
      box-shadow: -3px 0 8px rgba(0,0,0,.4);
    }

    /* a fax of a photocopy: banded, speckled, one edge burnt in */
    .agents-hero .gd-fax .gd-s { filter: contrast(1.22) brightness(.99); }
    .agents-hero .gd-fax .faxhead {
      font-size: 3.2px;
      letter-spacing: .04em;
      color: #6d6a63;
      border-bottom: 1px solid #b6b2a9;
      padding-bottom: 2px;
      margin-bottom: 3px;
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .gd-fax .grime {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 24%, rgba(0,0,0,.30) .5px, transparent 1px),
        radial-gradient(circle at 62% 18%, rgba(0,0,0,.24) .5px, transparent 1px),
        radial-gradient(circle at 34% 58%, rgba(0,0,0,.28) .5px, transparent 1px),
        radial-gradient(circle at 78% 66%, rgba(0,0,0,.22) .5px, transparent 1px),
        radial-gradient(circle at 47% 87%, rgba(0,0,0,.26) .5px, transparent 1px),
        radial-gradient(circle at 88% 41%, rgba(0,0,0,.20) .5px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.42) 0 3px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 2px);
    }
    .agents-hero .gd-fax .skip {
      position: absolute;
      z-index: 2;
      left: 0; right: 0;
      height: 3px;
      background: rgba(255,255,255,.7);
      box-shadow: 0 1px 2px rgba(0,0,0,.16);
    }

    /* ── the agents ─────────────────────────────────────────────────────
       A row of whoever you already run. It arrives only after the
       extraction has finished and settled, and it holds nothing: there is no
       line until you ask for one. It idles with a slight, deliberately
       out-of-sync bob so it reads as a group murmuring rather than a widget.
       The bobs are staggered by --bd, which is what keeps a straight row
       of four from reading as a toolbar.

       Point at it — or tap it — and one of them, yours, steps out to the
       right, drops a line into the pile, and answers a question the
       extraction never asked.

       One class drives all of it. The inline script at the foot of the page
       sets .asking on hover where hovering exists and on tap where it does
       not, because touch browsers synthesise a sticky :hover that a bare CSS
       :hover rule can never reliably let go of. The container is the target,
       not the mark, so a mark sliding out from under the cursor cannot break
       the hover. Without the script the page simply keeps its extraction
       panel, which is a fine place to land.

       The marks are hand-drawn stand-ins, not hosted brand assets: this
       site makes no external requests. They rest monochrome and pick up
       their own hue only on hover, so the colour lives in a --brand custom
       property on each mark rather than a rule per agent. Yours declares
       none and falls through to --accent, which is the point: it is not
       one of them. */

    .agents-hero .ag-cloud {
      position: absolute;
      z-index: 20;
      left: 240px;
      top: 84px;
      /* wide enough to still contain the .on mark after its 38px pull-out,
         which is what keeps the container hover from dropping mid-slide */
      width: 158px;
      height: 44px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      /* Inert until it has arrived. Without this the huddle is invisible but
         still hit-testable for the whole 4.74s delay, so a pointer already
         parked in this corner would fire the reveal partway through the
         opening sequence. pointer-events is a discrete property, so it flips
         at the animation's midpoint and the 4.74s stays in one place rather
         than being duplicated into a timer. */
      pointer-events: none;
      animation: ag-arrive .27s ease-out 4.74s both;
    }
    @keyframes ag-arrive {
      from { opacity: 0; }
      to   { opacity: 1; pointer-events: auto; }
    }
    .agents-hero .ag {
      position: absolute;
      left: var(--ax);
      top: var(--ay);
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      /* the huddle rests quiet and half-there; only the picked one comes up
         to full weight, and the rest drop back further still */
      opacity: .5;
      transition: transform .3s cubic-bezier(.3,.9,.25,1), opacity .25s ease-out;
    }
    /* The bob sits on an inner wrapper so the pull-out can own .ag's
       transform outright. Two animations on one property fight, and the last
       one declared silently wins. */
    .agents-hero .ag-i {
      display: block;
      animation: ag-bob var(--bt) ease-in-out var(--bd) infinite;
    }
    @keyframes ag-bob {
      0%, 100% { transform: translateY(0)     scale(1); }
      50%      { transform: translateY(-.8px) scale(1.02); }
    }
    .agents-hero .ag svg {
      display: block;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: #4a4740;
      /* eased back from 1.9 so the bigger marks don't also gain weight */
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .25s ease-out;
    }
    .agents-hero .ag b {
      position: absolute;
      top: 21px;
      left: 50%;
      width: 44px;
      margin-left: -22px;
      text-align: center;
      font-family: var(--mono);
      font-size: 6.4px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
      white-space: nowrap;
      opacity: 0;
      transition: opacity .2s ease-out;
    }
    .agents-hero .ag-cue {
      position: absolute;
      left: 0;
      top: 82px;
      width: 118px;
      text-align: center;
      font-family: var(--mono);
      font-size: 6.4px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #a8a49b;
      transition: opacity .2s ease-out;
    }

    /* ── one of them gets picked ──────────────────────────────────────── */

    .agents-hero .ag-cloud.asking .ag-i     { animation-play-state: paused; }
    .agents-hero .ag-cloud.asking .ag       { opacity: .32; transform: scale(1.2); }
    /* each mark carries its own --brand inline; no rule per agent. .32
       keeps them behind the picked one and still lets the hue read. */
    .agents-hero .ag-cloud.asking .ag svg   { stroke: var(--brand, #4a4740); }
    .agents-hero .ag-cloud.asking .ag-cue   { opacity: 0; }
    .agents-hero .ag-cloud.asking .ag.on    { opacity: 1; transform: translateX(38px) scale(1.28); }
    .agents-hero .ag-cloud.asking .ag.on svg { stroke: var(--accent); }
    .agents-hero .ag-cloud.asking .ag.on b  { opacity: 1; transition-delay: .22s; }

    /* The line. Only exists while one of them is chosen. z-index 0 keeps it
       under the cards, so it runs down and vanishes behind the paper. */
    .agents-hero .ag-t {
      position: absolute;
      z-index: 0;
      /* = .ag-cloud left (240) + the .on mark's --ax (105) + its 38px travel.
         Move the row and this has to move with it or the line detaches.
         top clears the mark's bottom edge (100+10) and its "Yours" label
         (which runs to --ay+20), so it starts below both. */
      left: 383px;
      top: 124px;
      width: 0;
      height: 0;
      border-left: 1px dashed var(--accent);
      transition: height .22s ease-in;
    }
    .agents-hero .ag-cloud.asking ~ .ag-t { height: 122px; transition: height .46s ease-out .18s; }

    /* ── the handoff ────────────────────────────────────────────────────
       Sits below the row and over the pile. Its right edge stops short of
       the dashed line's column (383) so the line still drops into the
       paper unobstructed -- widen this box and that breaks first.

       Above the pile but under a lifted card: hovering a document raises
       it over this, the same as it already does over the panel. */
    .agents-hero .gh-cta {
      position: absolute;
      z-index: 11;
      left: 108px;
      top: 134px;
      width: 260px;
      opacity: 0;
      transform: translateY(6px);
      /* Nothing invisible should eat a hover: while it is away the cards
         underneath it are reachable again. */
      pointer-events: none;
      transition: opacity .25s ease-out, transform .25s cubic-bezier(.2,.9,.2,1);
    }
    /* Held open by the script for 2.5s past the last hover of either the row
       or the box -- the box sits 50px below the row and would be unreachable
       if it left with the pointer. The delay waits for the wire to land; on
       the way out there is none, so the box goes first and the wire retracts
       behind it. */
    .agents-hero .ag-cloud.handoff ~ .gh-cta {
      opacity: 1;
      transform: none;
      pointer-events: auto;
      transition-delay: .29s;
    }
    .agents-hero .gh-cta-l {
      margin: 0 0 6px;
      /* Pinned rather than inherited so the box top is arithmetic the wire
         below can rely on: 134 + 12 + 6 = 152. The 10px indent clears the
         wire's column and happens to land this on the same x as PROMPT
         inside the box, which the flush version never was. */
      line-height: 12px;
      padding-left: 10px;
      font-family: var(--mono);
      /* the Extracted panel's sizes: its header for the label, its values for the box */
      font-size: 9.5px;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--graphite);
    }
    .agents-hero .gh-cta-box {
      position: relative;
      background: #ffffff;
      border: 1px solid var(--line);
      border-left: 1px solid var(--accent);
      box-shadow: 0 6px 18px rgba(0,0,0,.07);
    }
    /* Set by the copy script, so the cursor only promises what it can do. */
    .agents-hero .gh-cta-box.is-copyable { cursor: pointer; }
    /* Lower-right corner, in the dead space the credential lines leave --
       the longest of them stops around 115px short of this. A span rather
       than a button: the whole stage is aria-hidden, and a focusable
       control inside an aria-hidden subtree is an accessibility fault. */
    .agents-hero .gh-cta-c {
      position: absolute;
      right: 8px;
      bottom: 8px;
      display: block;
      width: 26px;
      height: 26px;
      color: var(--accent);
      opacity: .6;
      cursor: pointer;
      transition: opacity .22s ease-out;
    }
    .agents-hero .gh-cta-c svg {
      display: block;
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      /* eased back as the glyph grew, so it gains size and not weight */
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* The confirmation. One glyph or the other, never both, so the corner
       reports the result in the space the control already occupies. */
    .agents-hero .gh-cta-c .ic-done { display: none; }
    .agents-hero .gh-cta-box.is-copied .gh-cta-c .ic-copy { display: none; }
    .agents-hero .gh-cta-box.is-copied .gh-cta-c .ic-done { display: block; }

    /* ── the prompt read as a terminal ──────────────────────────────────
       The same move as the Extracted panel below: hover and the body drops
       to the code ground. Background and colour straight on the <pre>
       rather than an overlay — .gh-json is only an overlay because the rows
       beneath it hold their opacity from a filling animation, and there is
       nothing like that here.

       Behind (hover: hover) because a touch browser synthesises a sticky
       hover it never reliably lets go of. That is also why the glyph rests
       visible outside this block and hidden inside it: with no hover to
       reveal it, hiding it would hide it for good. */
    @media (hover: hover) {
      .agents-hero .gh-cta-c { opacity: 0; }
      .agents-hero .gh-cta-box:hover .gh-cta-p {
        background: #16160f;
        color: #e8e5dc;
      }
      .agents-hero .gh-cta-box:hover .gh-cta-c { opacity: .75; }
      .agents-hero .gh-cta-box:hover .gh-cta-c:hover { opacity: 1; }
      /* The check outranks the resting reveal: it has to be seen. */
      .agents-hero .gh-cta-box.is-copied .gh-cta-c { opacity: 1; }
    }
    .agents-hero .gh-cta-p {
      margin: 0;
      padding: 8px 9px 9px;
      font-family: var(--mono);
      font-size: 11.5px;
      line-height: 1.6;
      letter-spacing: .01em;
      background: #ffffff;
      color: #2f2d28;
      transition: background-color .22s ease-out, color .22s ease-out;
      /* pre-wrap, not pre: the first line is longer than the box and has to
         fold, but the blank line and the two credential lines must survive */
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    /* ── the handoff wire ───────────────────────────────────────────────
       Out of the row's left edge, one right angle, down into the box. Two
       growing borders, same as the wire below: scaling a dashed line
       stretches its dashes, animating width and height does not.

       The horizontal ends at 245 = .ag-cloud left (240) + the first mark's
       --ax (15) - half of its 20px box. translateX(-100%) pins that end to
       the row and lets the line grow leftward out of it, so widening it
       later moves the far end and never the join.

       The vertical falls in the box's own left-border column (108), so the
       dashes hand straight off to the accent border instead of landing
       alongside it, and stops at the box top (152). */

    .agents-hero .gh-cta-wh,
    .agents-hero .gh-cta-wv {
      position: absolute;
      z-index: 11;
    }
    .agents-hero .gh-cta-wh {
      left: 245px;
      top: 100px;
      width: 0;
      height: 0;
      transform: translateX(-100%);
      border-top: 1px dashed var(--ink);
      transition: width .17s ease-out .12s;
    }
    .agents-hero .gh-cta-wv {
      left: 108px;
      top: 100px;
      width: 0;
      height: 0;
      border-left: 1px dashed var(--ink);
      transition: height .12s ease-out;
    }
    /* Transitions rather than keyframes so one pair of rules draws the line
       out of the row and reels it back in. Across then down on the way in,
       up then back on the way out: each leg waits out the other's delay. */
    .agents-hero .ag-cloud.handoff ~ .gh-cta-wh { width: 137px; transition-delay: 0s; }
    .agents-hero .ag-cloud.handoff ~ .gh-cta-wv { height: 52px; transition-delay: .17s; }

    /* ── the wire ───────────────────────────────────────────────────────
       Down out of the settled pile, right angle, into the panel. Drawn as
       two growing borders rather than an SVG path, so the dashes stay a
       fixed size while the line extends. */

    .agents-hero .gh-wire-v,
    .agents-hero .gh-wire-h {
      position: absolute;
      z-index: 9;
      left: 150px;
    }
    .agents-hero .gh-wire-v {
      top: 366px;
      width: 0;
      height: 72px;
      border-left: 1px dashed #a9a59c;
      animation: gh-drop .25s ease-out 2.07s both;
    }
    .agents-hero .gh-wire-h {
      top: 438px;
      width: 122px;
      height: 0;
      border-top: 1px dashed #a9a59c;
      animation: gh-run .3s ease-out 2.32s both;
    }
    @keyframes gh-drop { from { height: 0; } to { height: 72px; } }
    @keyframes gh-run  { from { width: 0; }  to { width: 122px; } }

    .agents-hero .gh-wire-tip {
      position: absolute;
      z-index: 9;
      left: 266px;
      top: 434px;
      width: 0;
      height: 0;
      border-left: 5px solid var(--accent);
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      animation: gh-appear .13s ease-out 2.61s both;
    }

    /* ── the panel it arrives at ───────────────────────────────────────── */

    /* The slot carries the arrival animation, so the two panels inside are
       free to transition their own opacity without an animation fill
       outranking them — which it would, animations beating everything short
       of !important. */
    .agents-hero .gh-panels {
      position: absolute;
      z-index: 10;
      left: 272px;
      top: 366px;
      width: 288px;
      animation: gh-panel .25s cubic-bezier(.2,.9,.2,1) 2.65s both;
    }
    .agents-hero .gh-out,
    .agents-hero .gh-ask {
      box-sizing: border-box;
      width: 100%;
      background: #ffffff;
      border: 1px solid var(--line);
      border-left: 1px solid var(--accent);
      box-shadow: 0 6px 18px rgba(0,0,0,.07);
    }
    .agents-hero .gh-out { position: relative; opacity: 1; transition: opacity .2s ease-out; }
    .agents-hero .gh-ask {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity .2s ease-out;
    }
    .agents-hero .ag-cloud.asking ~ .gh-panels .gh-out { opacity: 0; transition: opacity .2s ease-out .42s; }
    .agents-hero .ag-cloud.asking ~ .gh-panels .gh-ask { opacity: 1; transition: opacity .28s ease-out .5s; }
    @keyframes gh-panel {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }

    .agents-hero .gh-out-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 11px;
      border-bottom: 1px solid var(--line);
      background: var(--paper-dark);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--graphite);
    }
    .agents-hero .gh-out-h .n { color: var(--accent); }

    .agents-hero .gh-out-b { position: relative; padding: 4px 11px 8px; }

    /* ── the same five fields, as the reader hands them back ─────────────
       Hovering the Extracted panel shows the JSON behind the pretty rows.
       The block is opaque and covers the body outright rather than fading
       the rows away: each row's opacity is held by a filling animation,
       which outranks anything a hover rule could set. Monochrome but for
       the accent on numbers — this stays a black-and-white page. */
    .agents-hero .gh-json {
      position: absolute;
      inset: 0;
      z-index: 3;
      overflow: hidden;
      box-sizing: border-box;
      padding: 6px 11px;
      background: #16160f;
      font-family: var(--mono);
      font-size: 8.5px;
      line-height: 1.7;
      letter-spacing: .02em;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease-out;
    }
    .agents-hero .gh-json .i  { padding-left: 10px; }
    .agents-hero .gh-json .jk { color: #8f8b80; }
    .agents-hero .gh-json .js { color: #e8e5dc; }
    .agents-hero .gh-json .jn { color: var(--accent); }
    .agents-hero .gh-json .jp { color: #57544c; }

    /* .gh-ask is stacked over .gh-out at opacity 0 whenever the panel is not
       in its asking state, so it would swallow the hover before it ever
       reached the Extracted box. */
    .agents-hero .gh-ask { pointer-events: none; }
    .agents-hero .ag-cloud.asking ~ .gh-panels .gh-ask { pointer-events: auto; }
    .agents-hero .ag-cloud.asking ~ .gh-panels .gh-out { pointer-events: none; }

    @media (hover: hover) {
      .agents-hero .gh-out:hover .gh-json { opacity: 1; }
    }

    /* the five extracted fields, typed in one after another */
    .agents-hero .gh-o {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 4px 0;
      border-bottom: 1px dotted #e2e0d9;
      font-family: var(--mono);
      animation: gh-appear .18s ease-out var(--rd) both;
    }
    .agents-hero .gh-o:last-child { border-bottom: none; }
    .agents-hero .gh-o .k {
      flex: none;
      width: 74px;
      font-size: 8.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--graphite);
    }
    .agents-hero .gh-o .v {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
      width: 0;
      font-size: 11.5px;
      color: var(--ink);
      animation: gh-type .35s steps(20, end) var(--td) forwards;
    }

    /* the question, asked only when you ask for it */
    .agents-hero .ag-q {
      display: flex;
      align-items: baseline;
      gap: 5px;
      padding: 2px 0 8px;
      font-family: var(--mono);
    }
    .agents-hero .ag-q .p { flex: none; font-size: 10.5px; color: var(--accent); }
    .agents-hero .ag-q .v {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
      width: 0;
      font-size: 10.5px;
      color: var(--ink);
      /* Both numbers below are the length of the question in the markup,
         "any invoice above its agreed rate?" = 34 characters. --ch sets the
         final width, steps() makes it land one character at a time. steps()
         cannot read a custom property, so the two are kept adjacent here:
         change the question, count it, change both. At 10.5px mono, 34ch plus
         the prompt and gaps is ~232px inside a 264px panel, so there is room
         for a slightly longer line but not an unbounded one. */
      --ch: 34;
      transition: width .2s ease-out;
    }
    .agents-hero .ag-cloud.asking ~ .gh-panels .ag-q .v {
      width: calc(var(--ch) * 1ch);
      transition: width .85s steps(34, end) .72s;
    }

    /* and the whole point: an answer, not a search result */
    .agents-hero .ag-a {
      display: flex;
      align-items: baseline;
      gap: 9px;
      padding: 7px 0 8px;
      border-top: 1px solid var(--line);
      opacity: 0;
      transition: opacity .2s ease-out;
    }
    .agents-hero .ag-a .ans {
      font-family: var(--sans);
      font-size: 21px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.015em;
      color: var(--accent);
    }
    .agents-hero .ag-a .s {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--graphite);
    }

    /* what it stood on */
    .agents-hero .ag-r {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 3px 0;
      border-top: 1px dotted #e2e0d9;
      font-family: var(--mono);
      opacity: 0;
      transition: opacity .2s ease-out;
    }
    .agents-hero .ag-cloud.asking ~ .gh-panels .ag-a { opacity: 1; transition-delay: 1.62s; }
    .agents-hero .ag-cloud.asking ~ .gh-panels .ag-r { opacity: 1; transition-delay: var(--rd); }
    .agents-hero .ag-r .k {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 8.5px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--graphite);
      white-space: nowrap;
      overflow: hidden;
    }
    .agents-hero .ag-r .f { flex: none; font-size: 10px; color: var(--ink); }
    .agents-hero .ag-r .c {
      flex: none;
      font-size: 7px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid currentColor;
      padding: 1px 3px;
    }

    @keyframes gh-type { to { width: calc(var(--ch) * 1ch); } }
    @keyframes gh-appear { from { opacity: 0; } to { opacity: 1; } }

    .agents-hero .gh-caret {
      display: inline-block;
      width: 6px;
      height: 12px;
      margin-left: 1px;
      background: var(--accent);
      vertical-align: -2px;
      opacity: 0;
      animation: gh-blink .35s step-end 4.24s forwards;
    }
    /* the question panel's caret waits on the interaction rather than a
       clock, and stops on the last character rather than blinking past it */
    .agents-hero .gh-ask .gh-caret { animation: none; }
    .agents-hero .ag-cloud.asking ~ .gh-panels .gh-ask .gh-caret { animation: gh-blink .85s step-end .72s forwards; }
    /* Two blinks across the final line, then gone. Not 'both': before the
       delay the resting opacity: 0 above is what should apply. */
    @keyframes gh-blink {
      0%   { opacity: 1; }
      25%  { opacity: 0; }
      50%  { opacity: 1; }
      75%  { opacity: 0; }
      100% { opacity: 0; }
    }

    /* ── the page turn ──────────────────────────────────────────────────
       The trigger in the headline flips the whole page over, and the shared
       rules ghost whatever is on the reverse: text pales, images drop to a
       tenth, card backgrounds go transparent. This stage sets its own
       colours at a higher specificity than that blanket rule, so left alone
       it would sit there solid while everything around it faded out. It is
       a picture, so it fades like one. */
    /* Ghosted by colour, never opacity. The annotation boxes are children
       of the art they mark, so a fade on the wrap takes the reveal down with
       it — the same trap the rest of the turned sheet already avoids. And
       overflow opens up, or a label sitting under a card gets clipped. */

    body.is-inverted .agents-hero .gh-stage-wrap { overflow: visible; }
    body.is-inverted .agents-hero .gh-stage :where(div, span, i, b, pre) {
      background: transparent;
      box-shadow: none;
      border-color: rgba(0,0,0,.08);
    }
    /* Solid decoration has no ghosted form, so it leaves instead. */
    body.is-inverted .agents-hero .gd::after,
    body.is-inverted .agents-hero .gd-shot .desk,
    body.is-inverted .agents-hero .gd-shot .glare,
    body.is-inverted .agents-hero .gd-shot .thumb,
    body.is-inverted .agents-hero .gd-fax .grime,
    body.is-inverted .agents-hero .gd .por,
    body.is-inverted .agents-hero .gd .sig,
    body.is-inverted .agents-hero .gd .flag { opacity: 0; }

    /* ── narrower ───────────────────────────────────────────────────────
       The stage scales as one piece; the wrap height follows so nothing
       collides with the section below. */

    @media (max-width: 1180px) {
      .agents-hero .gh-stage-wrap { height: 340px; width: min(560px, 50%); }
      .agents-hero .gh-stage { transform: scale(.77); margin-top: -62px; }
    }
    /* narrow: the stage leaves the letter and stacks last, as it always did */
    @media (max-width: 980px) {
      .agents-hero .gh-copy { display: flex; flex-direction: column; }
      .agents-hero .gh-stage-wrap { float: none; width: auto; margin: 34px 0 0; order: 99; height: 456px; }
      .agents-hero .gh-stage { transform: scale(.86); margin-top: 0; }
    }
    @media (max-width: 680px) {
      .agents-hero .gh-lede { font-size: 16px; }
      .agents-hero .gh-stage-wrap { height: 334px; }
      .agents-hero .gh-stage { transform: scale(.63); }
    }
    @media (max-width: 480px) {
      .agents-hero .gh-stage-wrap { height: 265px; }
      .agents-hero .gh-stage { transform: scale(.50); }
    }
    /* 560 * .42 = 235px, inside the 272px column a 320px screen leaves. */
    @media (max-width: 400px) {
      .agents-hero .gh-stage-wrap { height: 223px; }
      .agents-hero .gh-stage { transform: scale(.42); }
    }

    /* ── no motion ──────────────────────────────────────────────────────
       Every step lands on its finished frame straight away, so the whole
       tableau — pile, wire, panel, values — is there on load. */

    @media (prefers-reduced-motion: reduce) {
      .agents-hero .gd,
      .agents-hero .gh-wire-v,
      .agents-hero .gh-wire-h,
      .agents-hero .gh-wire-tip,
      .agents-hero .gh-panels,
      .agents-hero .gh-o,
      .agents-hero .gh-o .v,
      .agents-hero .ag-cloud {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
      }
      /* the idle bob is the one thing here going nowhere, so it goes */
      .agents-hero .ag-i { animation: none; }
      /* the interaction still works, it just arrives all at once */
      .agents-hero .gd,
      .agents-hero .gh-json,
      .agents-hero .gh-cta,
      .agents-hero .gh-cta-wh,
      .agents-hero .gh-cta-wv,
      .agents-hero .gh-cta-p,
      .agents-hero .gh-cta-c,
      .agents-hero .ag,
      .agents-hero .ag svg,
      .agents-hero .ag b,
      .agents-hero .ag-cue,
      .agents-hero .ag-t,
      .agents-hero .gh-out,
      .agents-hero .gh-ask,
      .agents-hero .ag-q .v,
      .agents-hero .ag-a,
      .agents-hero .ag-r,
      .agents-hero .ag-cloud.asking ~ .gh-panels .ag-q .v {
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
      }
      .agents-hero .gh-caret,
      .agents-hero .ag-cloud.asking ~ .gh-panels .gh-ask .gh-caret { animation: none; opacity: 0; }
    }

    /* ══ below the fold ═══════════════════════════════════════════════════
       Written for this page only. The three inherited sections were generic
       to every capability page; these two carry the agent argument instead.
       Shapes borrow from the shared dossier furniture so the page still
       reads as one document. */

    .byo-converge {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: 30px;
    }
    .byo-converge span {
      justify-self: center;
      width: 0;
      height: 100%;
      border-left: 1px dashed #b4b0a7;
    }

    .byo-same {
      border: 1px solid var(--line);
      border-left: 2px solid var(--accent);
      background: var(--paper-dark);
      padding: 24px 26px 22px;
    }
    .byo-same .lbl {
      margin: 0 0 14px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--graphite);
    }
    .byo-same .ans {
      margin: 0 0 18px;
      font-size: clamp(20px, 2.4vw, 27px);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.2;
      color: var(--ink);
    }
    .byo-same .cites {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--line);
    }
    .byo-same .cites li {
      display: flex;
      align-items: baseline;
      gap: 14px;
      padding: 7px 0;
      border-bottom: 1px dotted #d3d1c9;
      font-family: var(--mono);
      font-size: 12px;
    }
    .byo-same .cites .k { flex: 1 1 auto; min-width: 0; color: var(--ink); }
    .byo-same .cites .p { flex: none; width: 30px; color: var(--graphite); }
    .byo-same .cites .f { flex: none; width: 78px; text-align: right; color: var(--ink); }
    .byo-same .cites .c {
      flex: none;
      width: 84px;
      text-align: right;
      font-size: 10.5px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .byo-same .note {
      margin: 14px 0 0;
      font-size: 13.5px;
      font-style: italic;
      color: var(--graphite);
    }

    @media (max-width: 768px) {
      .byo-converge { grid-template-columns: 1fr; height: 22px; }
      .byo-converge span:nth-child(2),
      .byo-converge span:nth-child(3) { display: none; }
      .byo-same { padding: 20px 18px 18px; }
      .byo-same .cites li { flex-wrap: wrap; gap: 8px 12px; font-size: 11.5px; }
      .byo-same .cites .k { flex: 1 0 100%; }
      .byo-same .cites .f { width: auto; }
      .byo-same .cites .c { width: auto; margin-left: auto; }
    }

/* ══════════════════════════════════════════════════════════════════
   THE ARC  ·  the homepage's six below-fold sections
   Page-scoped. Each section carries one artefact rather than a
   paragraph about one, so the styling here is mostly small pieces of
   data furniture: a manifest, a record, an annotated plate, a
   lifecycle, a result list.
   ══════════════════════════════════════════════════════════════════ */

/* ── 01 · the manifest ─────────────────────────────────────────── */
.arc-manifest {
  border: 1px solid var(--line);
  background: var(--paper);
  margin-top: 42px;
}
.arc-manifest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.arc-manifest-head .f { color: var(--ink); word-break: break-all; }
.arc-manifest-head .m { color: var(--graphite); white-space: nowrap; }
.arc-rows { list-style: none; margin: 0; padding: 0; }
.arc-rows li {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}
.arc-rows li:last-child { border-bottom: 0; }
.arc-rows .pp {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--graphite);
}
.arc-rows .dn { font-size: 15px; color: var(--ink); }
.arc-rows .st {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.arc-rows .st.ok { color: var(--graphite); }
.arc-rows .st.gs { color: var(--ink); }
.arc-rows .st.no { color: var(--accent); }

/* The gate is the point of the section, so it is drawn rather than
   described: the manifest visibly stops here. */
.arc-gate {
  position: relative;
  padding: 22px;
  border-top: 1px dashed var(--graphite);
  background: var(--paper-dark);
  text-align: center;
}
.arc-gate-text {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--graphite);
}
.arc-manifest-foot {
  margin: 0;
  padding: 20px 22px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
}
.arc-manifest-foot em { color: var(--ink); font-style: italic; }

/* ── 02 · value and box ────────────────────────────────────────── */
.arc-ground {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 42px;
}
.arc-page {
  position: relative;
  margin: 0;
  padding: 20px 16px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 3px 3px 0 -1px var(--paper), 4px 4px 0 -1px var(--line);
}
.arc-page-l {
  display: block;
  height: 5px;
  margin-bottom: 9px;
  background: var(--paper-dark);
}
.arc-page-l.s { width: 58%; }
.arc-page-box {
  display: block;
  position: relative;
  height: 15px;
  margin: 14px 0 16px;
  border: 1px solid var(--accent);
}
.arc-page-box i {
  position: absolute;
  inset: 3px 40% 3px 3px;
  background: var(--accent);
  opacity: 0.16;
}
.arc-page figcaption {
  position: absolute;
  left: 16px;
  bottom: 9px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--graphite);
}
.arc-record-lbl {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--graphite);
}
.arc-kv {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--line);
}
.arc-kv dt,
.arc-kv dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.arc-kv dt { color: var(--graphite); }
.arc-kv dd { color: var(--ink); }
.arc-kv dd.gd { color: var(--accent); }
.arc-record-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
}
.arc-record-note strong { color: var(--ink); }

/* ── 03 · the annotated plate ──────────────────────────────────── */
.arc-plate { margin: 42px 0 0; }
.arc-plate-frame {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-dark);
  line-height: 0;
}
.arc-plate-frame img { display: block; width: 100%; height: auto; }

/* Pins are positioned as a fraction of the plate so they hold their
   place at any width. Below 768px they stop being overlays and become
   an ordinary wrapped list under the image -- at phone width a caption
   pinned over a screenshot is unreadable and covers the thing it is
   pointing at. */
.arc-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.arc-pin i {
  width: 7px;
  height: 7px;
  flex: none;
  background: #1e8e3e;
  box-shadow: 0 0 0 3px rgba(249, 249, 247, 0.9);
}
.arc-pin b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(206, 232, 213, 0.92);
  border: 1px solid rgba(30, 142, 62, 0.5);
  padding: 5px 8px;
}
.arc-pin.b { flex-direction: row-reverse; transform: translateX(-100%); }
.arc-plate figcaption {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
}
.arc-plate figcaption .n { color: var(--ink); }
.arc-plate figcaption em { font-style: italic; }

/* ── 04 · the lifecycle and the rules ──────────────────────────── */
.arc-life {
  list-style: none;
  counter-reset: arc;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 42px 0 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.arc-life li {
  counter-increment: arc;
  background: var(--paper);
  padding: 22px 20px 24px;
}
.arc-life .s {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 10px;
}
.arc-life .s::before {
  content: counter(arc) " / ";
  color: var(--graphite);
}
.arc-life .d {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
}
.arc-rules {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.arc-rules-lbl {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.arc-rules-lbl span { color: var(--graphite); }
.arc-rules ul { list-style: none; margin: 0; padding: 0; }
.arc-rules li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}
.arc-rules li:last-child { border-bottom: 0; }
.arc-rules .r { font-size: 15px; color: var(--ink); }
.arc-rules .c {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--graphite);
  white-space: nowrap;
}
.arc-rules li.res .c { color: var(--accent); }
.arc-aside {
  margin: 26px 0 0;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.75;
  color: var(--graphite);
}

/* ── 05 · the corpus desk ──────────────────────────────────────── */
.arc-desk {
  margin-top: 42px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.arc-ask {
  margin: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.arc-ask span { color: var(--accent); margin-right: 8px; }
.arc-hits { list-style: none; margin: 0; padding: 0; }
.arc-hits li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.arc-hits .s { font-size: 15px; color: var(--ink); }
.arc-hits .v {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}
.arc-hits .c {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--graphite);
}
.arc-meter {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 15px 22px;
  background: var(--paper-dark);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--graphite);
}
.arc-meter .t { color: var(--ink); }

/* ── 06 · the three doors ──────────────────────────────────────── */
.arc-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 42px;
  background: var(--line);
  border: 1px solid var(--line);
}
.arc-door {
  background: var(--paper);
  padding: 26px 24px 28px;
}
.arc-door .who {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--graphite);
  margin-bottom: 14px;
}
.arc-door h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.arc-door p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--graphite);
}
.arc-door code {
  display: block;
  margin-top: 14px;
  padding: 9px 11px;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  overflow-x: auto;
}
.arc-instead {
  margin: 32px 0 0;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ══════════════════════════ narrow ══════════════════════════════ */
@media (max-width: 768px) {
  .arc-rows li {
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
  }
  .arc-rows .pp { grid-column: 1 / -1; order: -1; }
  .arc-ground { grid-template-columns: 1fr; gap: 30px; }
  .arc-page { max-width: 190px; }
  .arc-kv { grid-template-columns: 92px 1fr; }

  /* Pins stay over the image at every width -- an annotation that has left
     the thing it points at is not an annotation. Only the type and the
     marker shrink; position, chip and halo carry over from the desktop rule.
     7px is the floor: at 375px the longest label still clears the plate edge
     and the five pins are far enough apart vertically not to collide. */
  .arc-pin { gap: 6px; }
  .arc-pin i {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 2px rgba(249, 249, 247, 0.9);
  }
  .arc-pin b {
    font-size: 7px;
    letter-spacing: 0.04em;
    padding: 3px 5px;
  }

  .arc-life { grid-template-columns: 1fr; }
  .arc-rules li { flex-direction: column; gap: 5px; }
  .arc-doors { grid-template-columns: 1fr; }
  .arc-meter { flex-direction: column; gap: 5px; }
  .arc-instead { font-size: 18px; }
}


/* ------------------------------------------------------------------
   02 / CRITERIA  ·  the template and the schema, side by side.
   Same 1px-gap-over-a-background-rule trick as .arc-life so the two
   columns share a single hairline instead of doubling it.
   ------------------------------------------------------------------ */
.arc-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 42px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.arc-spec-col { background: var(--paper); }
.arc-spec-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.arc-spec-lbl span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--graphite);
}
.arc-spec-list { margin: 0; padding: 0; list-style: none; }
.arc-spec-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 11px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
.arc-spec-list li:last-child { border-bottom: 0; }
.arc-spec-list .q {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--graphite);
  white-space: nowrap;
}
.arc-spec-list.sch .d { font-family: var(--mono); font-size: 12px; }

@media (max-width: 768px) {
  .arc-spec {
    grid-template-columns: 1fr;
    gap: 18px;
    background: none;
    border: 0;
  }
  .arc-spec-col { border: 1px solid var(--line); }
}

/* ── try it · the two sample cards ───────────────────────────────
   A card is a form (see index.html): the whole card is its submit button,
   stretched over it, so the markup inside stays ordinary headings and lists.
   The page picture wears what the review room draws on a real page: boxes
   where values were read, a cut where one document ends and the next begins,
   and a slow pass of the reader over it. */
.try-section {
  padding: 80px 48px;
  border-top: 1px solid var(--line);
}
.try-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.try-card {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  align-items: start;
  margin: 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  transition: background-color 0.3s, border-left-color 0.3s;
}
.try-card:hover,
.try-card:focus-within {
  background: var(--paper-dark);
  border-left-color: var(--accent);
}
.try-page {
  position: relative;
  margin: 0;
  overflow: hidden;
  line-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
}
.try-page-stack {
  box-shadow: 0 1px 0 var(--line), 4px 4px 0 -1px #fff, 5px 5px 0 -1px var(--line), 9px 9px 0 -2px #fff, 10px 10px 0 -2px var(--line);
}
.try-page img { display: block; width: 100%; height: auto; }
.try-box {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  opacity: 0;
  animation: try-box-in 6s var(--d) infinite;
}
.try-cut {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--y);
  border-top: 1px dashed var(--accent);
}
.try-cut i {
  position: absolute;
  right: 6px;
  top: -8px;
  padding: 2px 5px;
  background: var(--accent);
  color: #fff;
  font: normal 8px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.try-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.13));
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.55);
  transform: translateY(-100%);
  animation: try-scan 6s linear infinite;
}
@keyframes try-scan {
  0% { transform: translateY(-100%); }
  70%, 100% { transform: translateY(460%); }
}
@keyframes try-box-in {
  0%, 8% { opacity: 0; }
  18%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
.try-kind {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.try-name {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.try-about {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--graphite);
}
.try-splits {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.try-splits li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.try-splits b { font-weight: 600; }
.try-splits span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--graphite);
  white-space: nowrap;
}
.try-open {
  padding: 0;
  border: 0;
  background: none;
  font: 11px var(--mono);
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
/* The button's hit area is the whole card. */
.try-open::after { content: ""; position: absolute; inset: 0; }
.try-open:focus-visible { outline: 0; }
.try-card:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.try-card:hover .try-open,
.try-card:focus-within .try-open { color: var(--accent); }

@media (max-width: 1080px) {
  .try-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .try-section { padding: 56px 20px; }
  .try-card { grid-template-columns: 1fr; padding: 20px; }
  .try-page { max-width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .try-scan { animation: none; opacity: 0; }
  .try-box { animation: none; opacity: 1; }
}