/* Homepage-only styling, from the boards canvas (the source of truth, FACTS
   Part D rulings 28-38). Loads LAST, after the generated page's own style
   block, workflow-standard.css, workflow-carousel.css and system.css, and
   deliberately overrides all four:

   1. It removes the old page chrome (the beige ground, the 72px grid).
   2. It translates the workflow scenes to the settled system per ruling 36:
      vendor surfaces keep vendor colors, her surfaces move from terra/teal to
      Petrol, the edge slabs become the soft depth ladder.
   3. It carries the homepage-only moments: the hero's masked washes, the
      glass band, the drift objects.

   Fields fade, objects occlude, arrivals sharpen (ruling 38): every tone
   change here is a color layer feathering to transparent through a mask.
   Nothing is boxed and no tone region has a hairline edge. */

/* A TRY, her ask 2026-08-26 round eight: the display face from the old
   guide, DM Serif Display, on the titles and section heads, body and system
   staying Inter. This runs against ruling 30 (her own Inter-over-serif
   call), knowingly, so she can judge it on the real page: if it stays,
   ruling 30 gets amended; if not, delete this block and the font-link
   family and the page is all-Inter again. The face has one weight, 400. */
.aa-hero h1, h2 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.brand {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
}

/* --- the old page chrome, retired ------------------------------------- */
/* Safety net first: any terra or teal var the scene styles still reach for
   resolves to the settled system rather than the dead palette. */
:root { --terra: var(--accent); --teal: var(--accent); --paper: #FFFFFF; }
body { background: var(--canvas); }
body::before { content: none; }
main { min-height: 0; }

/* --- the hero field ----------------------------------------------------- */
/* One wash layer for the nav, the headline and the scene together. The
   gradients feather to transparent and the mask dies the layer out before
   the fold, so the hero ends with no bottom line. Arc per ruling 38: 16%. */
/* Round eleven: the dots row and the scale section pull in together (her
   note: too much space between them). 20px comes off here and 48px off the
   scale section's top margin below. */
.aa-hero { position: relative; padding: 84px 0 36px; }
.aa-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Round twenty, her note that the top still read white all over: the
     wash steps up ~4 points (16 to 20, 6 to 10, bone 0.9 to 0.95),
     amending ruling 38's hero 16%. */
  background:
    radial-gradient(900px 520px at 82% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%),
    radial-gradient(700px 420px at 30% 22%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(880px 520px at 4% 74%, rgba(240,236,230,0.95), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
}
.aa-hero > * { position: relative; z-index: 1; }
/* Round sixteen, her ask: the dots land above the fold. The hero stack
   compresses ~76px through these trims and the dots pull. */
/* Round eighteen added +62px above the title; round nineteen took 45px
   (her 5%) back out. Net: +17px over the round-sixteen state. The
   subheader-to-buttons +18px (her 2%) stands. */
.hero-top { text-align: center; padding-top: 45px; }
.aa-hero h1 {
  display: block; margin: 0;
  font-size: clamp(2.5rem, 4.4vw, 3.875rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
  -webkit-text-stroke: 0;
}
/* The lifted scene styles stroke h1 and the step labels for the old thin
   face on beige; the settled Inter weights do not want it. */
.step-label { -webkit-text-stroke: 0; }
.aa-hero h1 span { display: block; }
.aa-hero .sub { margin: 12px auto 0; font-size: 18px; color: var(--muted); max-width: 52ch; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }

/* --- the scenes, translated to the settled system (ruling 36) ----------- */
/* Cards: white faces, hairline borders, the soft depth ladder. The edge
   slabs are gone; occlusion and shadow carry the depth now. */
.wf-std .analysis, .wf-std .output, .wf-std .artifact {
  border: 1px solid var(--hairline);
  background: #FFFFFF;
  border-radius: 7px;
  box-shadow: var(--shadow-raised);
}
.wf-std .artifact.evidence-card {
  --edge: transparent;
  border: 1px solid var(--hairline);
  border-top: 3px solid rgb(var(--evidence-rgb));
  background: #FFFFFF;
  box-shadow: var(--shadow-raised);
}
@media (hover: hover) {
  .wf-std .artifact.hover-ready:hover,
  .wf-std .analysis.hover-ready:hover,
  .wf-std .output.hover-ready:hover {
    border-color: var(--hairline);
    box-shadow: var(--shadow-float);
  }
  .wf-std .artifact.evidence-card.hover-ready:hover {
    border-top-color: rgb(var(--evidence-rgb));
  }
}

/* The Claude panel header: quiet white with a hairline, the Petrol run dot
   as the live marker. Terra tints out everywhere. */
.wf-std .analysis-head {
  border-bottom: 1px solid var(--hairline);
  background: #FFFFFF;
}
.wf-std .analysis-brand { color: var(--ink); }
.wf-std .analysis-head .run-when { color: var(--muted); }
.wf-std .run-state, .wf-std .rundot {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.wf-std .skill-run { border-color: var(--hairline); background: #F7F4EF; }
.wf-std .skill-run em { color: var(--ink); }
.wf-std .analysis-result {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, white);
}
.wf-std .triage-row { background: #F6F3EE; box-shadow: none; }
.wf-std .triage-row.vip { background: color-mix(in srgb, var(--accent) 10%, white); box-shadow: none; }
.wf-std .triage-row.vip .mark { background: var(--accent); }
.wf-std .triage-row.vip b { color: var(--ink); }
.wf-std .safety-chips i {
  border-color: color-mix(in srgb, var(--accent) 26%, white);
  background: color-mix(in srgb, var(--accent) 9%, white);
  color: var(--ink);
}
/* Her round-eight note: the funnel caption's clock was the only step label
   carrying an icon; removed for consistency. The schedule story lives on
   the skill card's "7:30am daily". */
.wf-std .step-label .alarm { display: none; }

/* The Claude chrome on the enrichment card: the light Petrol gradient from
   the canvas, ink text, never a solid accent fill. */
.wf-std .enrich-card .tool-chrome.light {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 14%, white),
    color-mix(in srgb, var(--accent) 6%, white));
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, white);
}
.wf-std .enrich-stat {
  background: color-mix(in srgb, var(--accent) 8%, white);
}
.wf-std .enrich-stat b { color: var(--ink); }
.wf-std .fit-row { background: #F6F3EE; }
.wf-std .fit-row.high { background: color-mix(in srgb, var(--accent) 10%, white); }
.wf-std .fit-row.high i { background: var(--accent); }
.wf-std .fit-row.high b { color: var(--ink); }
.wf-std .fit-row.strong i { background: color-mix(in srgb, var(--accent) 40%, white); }
.wf-std .draft-note { background: #F6F3EE; }

/* The Slack message: the avatar tile goes light Petrol and the Claude mark
   keeps its own colors, per the canvas. Chips are quiet white pills; the
   primary action stays the ink fill. */
.wf-std .brief-av { background: color-mix(in srgb, var(--accent) 12%, white); }
.wf-std .brief-av img { filter: none; }
.wf-std .brief-text b { color: var(--ink); }
.wf-std .brief-actions i.archive,
.wf-std .brief-actions i.cal {
  border-color: rgba(28,45,58,0.16); background: #FFFFFF; color: var(--ink);
}
.wf-std .slack-reacts i,
.wf-std .slack-reacts.mine i {
  border-color: rgba(28,45,58,0.14); background: #FFFFFF; color: var(--muted);
}

/* Inner fills and icon tiles on the white faces. */
.wf-std .tool-row { background: #F6F3EE; }
.wf-std.wf-std .evidence-icon { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(28,45,58,0.08); }
.wf-std .artifact-bar { background: #F6F3EE; }

/* Connectors and runners take the settled ink. */
.wf-std .path { stroke: rgba(28,45,58,0.5); }
.wf-std .runner { border-left-color: rgba(28,45,58,0.5); }

/* Round six: the finishing outline and its pill are gone, her call ("not
   sold on the outline... is that helpful anymore?"). The sentence survives
   as the quiet caption under the diagram; the boundary element hides
   entirely, trace machinery and all. */
.wf-std .system-boundary { display: none; }

/* Her round-five note: the funnel's closing Slack card sat 30px below the
   skill card (top 28% vs 22%), so the eye dropped to finish the flow.
   Raised near-level; the frozen connector still lands on its left edge. */
.shape-funnel .brief-card { top: 23%; }

/* The consolidated beats, her staging-review note 2026-08-26 round two: the
   build should go faster by letting each stage's header, arrow and card all
   arrive at the same time, with no change to how fast any one thing moves.
   These redefinitions (a later @keyframes with the same name wins) compress
   the timeline so each beat starts as the previous one lands. The schedule,
   in percent of the 23s cycle (1% = 0.23s):

   funnel: sources 1.4-7.3, beat two (caption+arrows+analysis) 7.5-11.3,
     beat three (caption+arrow+brief) 12.0-15.8, trace 16.5-26.5, gone 27.2.
   fan: gather 1.4-9.1, analysis beat 9.1-13.0, outputs beat 13.5-17.3,
     slack beat 17.8-21.7, trace 22.6-32.6, gone 33.3.
   fork: files 1.4-6.1, enrich beat 6.5-10.3, record beat 10.4-14.3,
     branches beat 14.3-18.2, trace 19.1-29.1, gone 29.8.

   The carousel settles at 8.0s, after every trace has dissolved, and the
   approved 5s of stillness follows. Caption type-on starts are rewritten to
   the same beat starts by the build script. The boundary container appears
   at 16.5% so the chip and trace are never drawn inside an invisible box.
   Review pages keep the original timings throughout. */

/* funnel */
@keyframes enterOneB { 0%, 2.6087% { opacity: 0; transform: translateY(-18px) scale(.96) } 6.0869%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0; transform: translateY(6px) scale(.97) } }
@keyframes enterOneC { 0%, 3.8261% { opacity: 0; transform: translateY(-16px) scale(.96) } 7.3043%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0; transform: translateY(6px) scale(.97) } }
@keyframes enterTwo { 0%, 7.4783% { opacity: 0; transform: translateX(-18px) scale(.94) } 10.9565%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0; transform: translateY(6px) } }
@keyframes enterThree { 0%, 12% { opacity: 0; transform: translateX(-16px) } 15.4783%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0 } }
@keyframes drawBeat { 0%, 7.0435% { stroke-dashoffset: 1; opacity: 0 } 7.4783% { stroke-dashoffset: 1; opacity: 1 } 11.3043%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7392%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes runBeat { 0%, 7.1304% { opacity: 0; offset-distance: 0 } 7.4783% { opacity: 1; offset-distance: 0 } 11.3043%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7392%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes drawBeatTwo { 0%, 11.5652% { stroke-dashoffset: 1; opacity: 0 } 12% { stroke-dashoffset: 1; opacity: 1 } 15.8261%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7392%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes runBeatTwo { 0%, 11.6522% { opacity: 0; offset-distance: 0 } 12% { opacity: 1; offset-distance: 0 } 15.8261%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7392%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes beatOne { 0%, 0.6957% { opacity: 0 } 2.087%, 7.4783% { opacity: 1; color: var(--ink) } 9.1304%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes beatTwo { 0%, 7.4783% { opacity: 0 } 8.3478%, 12% { opacity: 1; color: var(--ink) } 13.5652%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes beatThree { 0%, 12% { opacity: 0 } 12.8696%, 16.5217% { opacity: 1; color: var(--ink) } 18.087%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes ellipsisOne { 0%, 2.087%, 7.4783%, 100% { opacity: 0 } 2.7826%, 6.7826% { opacity: 1 } }
@keyframes ellipsisTwo { 0%, 7.913%, 12%, 100% { opacity: 0 } 8.3478%, 11.5652% { opacity: 1 } }
@keyframes ellipsisThree { 0%, 12.4348%, 16.5217%, 100% { opacity: 0 } 12.8696%, 15.8261% { opacity: 1 } }

/* fan */
@keyframes gather { 0%, 1.3913% { opacity: 0; transform: translate3d(var(--corner-x), -260px, 0) rotate(var(--rot)) } 4.3478%, 6.5217% { opacity: 1; transform: translate3d(var(--corner-x), var(--corner-y), 0) rotate(var(--rot)) } 9.1304%, 91.6522% { opacity: 1; transform: translate3d(0, -38px, 0) rotate(var(--rot)) } 93.7392%, 100% { opacity: 0; transform: translate3d(0, -32px, 0) scale(.96) } }
@keyframes analysis { 0%, 9.1304% { opacity: 0; transform: translateX(-18px) scale(.94) } 12.6087%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0; transform: translateY(6px) } }
@keyframes linearIn { 0%, 13.4783% { opacity: 0; transform: translateX(-15px) } 16.9565%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0 } }
@keyframes slackIn { 0%, 17.8261% { opacity: 0; transform: translateX(-15px) } 21.3043%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0 } }
@keyframes fanDrawOne { 0%, 8.6957% { stroke-dashoffset: 1; opacity: 0 } 9.1304% { stroke-dashoffset: 1; opacity: 1 } 12.9565%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7391%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes fanRunOne { 0%, 8.7826% { opacity: 0; offset-distance: 0 } 9.1304% { opacity: 1; offset-distance: 0 } 12.9565%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7391%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes fanDrawTwo { 0%, 13.0435% { stroke-dashoffset: 1; opacity: 0 } 13.4783% { stroke-dashoffset: 1; opacity: 1 } 17.3043%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7391%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes fanRunTwo { 0%, 13.1304% { opacity: 0; offset-distance: 0 } 13.4783% { opacity: 1; offset-distance: 0 } 17.3043%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7391%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes fanDrawThree { 0%, 17.3913% { stroke-dashoffset: 1; opacity: 0 } 17.8261% { stroke-dashoffset: 1; opacity: 1 } 21.6522%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7391%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes fanRunThree { 0%, 17.4783% { opacity: 0; offset-distance: 0 } 17.8261% { opacity: 1; offset-distance: 0 } 21.6522%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7391%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes sourceProgress { 0%, 1.3913% { opacity: 0 } 2.7826%, 9.1304% { opacity: 1; color: var(--ink) } 10.6957%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes analysisProgress { 0%, 9.1304% { opacity: 0 } 10%, 13.4783% { opacity: 1; color: var(--ink) } 15.0435%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes workProgress { 0%, 13.4783% { opacity: 0 } 14.3478%, 17.8261% { opacity: 1; color: var(--ink) } 19.3913%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes notifyProgress { 0%, 17.8261% { opacity: 0 } 18.6957%, 22.6087% { opacity: 1; color: var(--ink) } 24.1739%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes sourceEllipsis { 0%, 2.087%, 9.1304%, 100% { opacity: 0 } 2.7826%, 8.6957% { opacity: 1 } }
@keyframes analysisEllipsis { 0%, 9.5652%, 13.4783%, 100% { opacity: 0 } 10%, 13.0435% { opacity: 1 } }
@keyframes workEllipsis { 0%, 13.913%, 17.8261%, 100% { opacity: 0 } 14.3478%, 17.3913% { opacity: 1 } }
@keyframes notifyEllipsis { 0%, 18.2609%, 22.6087%, 100% { opacity: 0 } 18.6957%, 22.1739% { opacity: 1 } }

/* fork */
@keyframes f3EnterOneB { 0%, 2.6087% { opacity: 0; transform: translateY(-18px) scale(.96) } 6.0869%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0; transform: translateY(6px) scale(.97) } }
@keyframes f3EnterTwo { 0%, 6.5217% { opacity: 0; transform: translateX(-18px) scale(.94) } 10%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0; transform: translateY(6px) } }
@keyframes f3EnterThree { 0%, 10.4348% { opacity: 0; transform: translateX(-16px) } 13.913%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0 } }
@keyframes f3EnterFour { 0%, 14.3478% { opacity: 0; transform: translateX(-14px) } 17.8261%, 91.6522% { opacity: 1; transform: none } 93.7392%, 100% { opacity: 0 } }
@keyframes f3DrawA { 0%, 6.087% { stroke-dashoffset: 1; opacity: 0 } 6.5217% { stroke-dashoffset: 1; opacity: 1 } 10.3478%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7392%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes f3RunA { 0%, 6.1739% { opacity: 0; offset-distance: 0 } 6.5217% { opacity: 1; offset-distance: 0 } 10.3478%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7392%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes f3DrawB { 0%, 10% { stroke-dashoffset: 1; opacity: 0 } 10.4348% { stroke-dashoffset: 1; opacity: 1 } 14.2609%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7392%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes f3RunB { 0%, 10.087% { opacity: 0; offset-distance: 0 } 10.4348% { opacity: 1; offset-distance: 0 } 14.2609%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7392%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes f3DrawC { 0%, 13.913% { stroke-dashoffset: 1; opacity: 0 } 14.3478% { stroke-dashoffset: 1; opacity: 1 } 18.1739%, 91.6522% { stroke-dashoffset: 0; opacity: 1 } 93.7392%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes f3RunC { 0%, 14% { opacity: 0; offset-distance: 0 } 14.3478% { opacity: 1; offset-distance: 0 } 18.1739%, 91.6522% { opacity: 1; offset-distance: 100% } 93.7392%, 100% { opacity: 0; offset-distance: 100% } }
@keyframes f3BeatOne { 0%, 0.6957% { opacity: 0 } 2.087%, 6.5217% { opacity: 1; color: var(--ink) } 8.087%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes f3BeatTwo { 0%, 6.5217% { opacity: 0 } 7.3913%, 10.4348% { opacity: 1; color: var(--ink) } 12%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes f3BeatThree { 0%, 10.4348% { opacity: 0 } 11.3043%, 14.3478% { opacity: 1; color: var(--ink) } 15.913%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes f3BeatFour { 0%, 14.3478% { opacity: 0 } 15.2174%, 19.1304% { opacity: 1; color: var(--ink) } 20.6957%, 91.6522% { opacity: 1; color: var(--muted) } 93.7392%, 100% { opacity: 0 } }
@keyframes f3EllipsisOne { 0%, 2.087%, 6.5217%, 100% { opacity: 0 } 2.7826%, 6.087% { opacity: 1 } }
@keyframes f3EllipsisTwo { 0%, 6.9565%, 10.4348%, 100% { opacity: 0 } 7.3913%, 10% { opacity: 1 } }
@keyframes f3EllipsisThree { 0%, 10.8696%, 14.3478%, 100% { opacity: 0 } 11.3043%, 13.913% { opacity: 1 } }
@keyframes f3EllipsisFour { 0%, 14.7826%, 19.1304%, 100% { opacity: 0 } 15.2174%, 18.6957% { opacity: 1 } }


/* Stage captions sit centered over their cards, her staging-review note
   2026-08-26 round two: three fan labels and one label each on the funnel
   and fork were anchored 1.3 to 2.1 percent of the stage away from their
   card's center. Anchors pinned to the card centers the scenes actually use.
   The funnel and fork first columns need a pixel correction as well as the
   anchor: the review page's late width override renders every intake slip
   158px wide while the slips keep the margin from their old 196px and 206px
   widths, so those cards sit 19px and 24px left of their own anchors, and
   the connectors are tuned to the as-rendered boxes. The labels follow the
   cards. */
/* The funnel step-a label moved with its column in round eleven; its rule
   now lives beside the slip move further down. */
.shape-fan .step-label.analysis-label { left: 36.5625%; }
.shape-fan .step-label.linear-label { left: 60.5357%; }
.shape-fan .step-label.slack-label { left: 84.82%; }
.shape-fork .step-label.step-a { left: calc(15.52% - 24px); }

/* The completion gesture: trace-then-dissolve. The outline draws once the
   run finishes, dissolves, and only the label chip stays. The standing
   rectangle is off, per the parked-decision recommendation on record. */
.wf-std .system-boundary:after { animation: none !important; opacity: 0 !important; }
.wf-std .system-boundary span {
  border-color: rgba(28,45,58,0.2);
  background: var(--canvas);
  color: var(--ink);
}

/* Trim the stage's empty tail so the fold hands off sooner, the same trim
   the canvas boards carry. The deepest drawn content ends by 430px of the
   500px coordinate space. Below 700px the carousel's own scroller height
   rule is more specific and still wins, unchanged. */
.aa-hero .motion-field { height: calc(var(--stage-scale, 1) * 430px); }

/* Her round-seven note: the automation block sits closer to the buttons.
   The stage's own coordinate space carries ~35px of empty canvas above its
   step labels, so the margin goes negative to counter it: a 52px lift in
   total, roughly 6% of the hero. */
.carousel { margin-top: -1.6rem; }

/* Step labels and the dots row. */
.step-label { color: var(--muted); }
.carousel-dots { margin-top: -12px; position: relative; z-index: 2; }
.carousel-dots button:hover { background: rgba(28,45,58,0.3); }
.carousel-dots button[aria-current="true"] { background: var(--accent); }
.carousel-dots button:focus-visible { outline: 2px solid var(--accent); }

/* The scale section sits closer to the hero's dots (round eleven, with the
   hero trim above). Round fourteen adds the top-right Petrol field, her
   note that the section's background read "a little too matte": a
   feathered wash in the liquid-glass family, masked out at both ends per
   ruling 38, no edges. */
.aa-hero + .shell > section:first-child { position: relative; margin-top: 48px; }
/* Round sixteen: the lede runs the whole measure instead of bunching in
   a 62ch column, her lean, seconded; it is one line at desktop. */
.aa-hero + .shell > section:first-child .lede { max-width: none; }
.aa-hero + .shell > section:first-child::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -80px; bottom: -50px; width: 100vw; z-index: 0; pointer-events: none;
  /* Full-viewport layer, shell-anchored pool, ellipse contained: the
     round-sixteen "soooooo obvious" lines were this layer's old 1440px
     cap slicing the gradient on any window wider than 1440. No cap, the
     center rides calc off the page center, and the feather completes
     inside every layer edge, so nothing straight can show. */
  background: radial-gradient(860px 400px at calc(50% + 400px) 38%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
}
.aa-hero + .shell > section:first-child > * { position: relative; z-index: 1; }

/* --- the fluency staircase ---------------------------------------------- */
/* Round five, her notes: the outer boxes are gone. The hero is the model:
   artifacts float directly on the field with their own shadows, no
   containing rectangle. Each step is a boxless cluster (icon, name, line,
   the drawn interior), the climb is stronger, and the interiors carry the
   real vendor marks and a little vendor color. The hover gesture stays: a
   deeper lift and the Petrol line loading under the name. The two-ways-in
   cards keep their boxes by her word. */
/* The climb staggers the cluster TOPS (her screenshot showed the tops and
   hairlines near-flush: bottom-aligning let the varying interior heights
   eat any offset). Operating's top sits nearly flush with the lede. */
.stairs { display: flex; gap: 32px; align-items: flex-start; margin-top: 30px; }
.step {
  flex: 1; padding: 0 4px;
  transition: transform 180ms ease;
}
.step:hover { transform: translateY(-6px); }
.step-icon { display: block; width: 24px; height: 24px; color: var(--muted); }
.step-icon svg { display: block; width: 24px; height: 24px; }
.step h3 { position: relative; margin: 10px 0 0; padding-bottom: 11px; font-size: 20px; font-weight: 700; }
.step h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.step:hover h3::after { transform: scaleX(1); }
/* Round fifteen, her ask: the interiors react to the roll-over too. The
   pieces rise a hair in sequence and the carded ones deepen one shadow
   step; the delays apply only on the way in, so everything settles back
   together. */
.step .mini > * { transition: translate 240ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 240ms ease; }
.step:hover .mini > * { translate: 0 -7px; }
.step:hover .mini > *:nth-child(2) { transition-delay: 60ms; }
.step:hover .mini > *:nth-child(3) { transition-delay: 120ms; }
.step:hover .mini > *:nth-child(4) { transition-delay: 180ms; }
.step:hover .mini-slip, .step:hover .mini-answer,
.step:hover .mini-skill, .step:hover .mini-brief { box-shadow: var(--shadow-raised); }
@media (prefers-reduced-motion: reduce) { .step .mini > * { transition: none; } }
.step p { font-size: 13.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.5; }
/* Her round-fourteen drawing settled what the climb is judged by: the
   HAIRLINES above the interiors must be equidistant. They sat at deltas
   40/42/30 (Operating's one-liner wraps to two lines, so its heading
   block runs 20px taller and ate the third gap); these margins put all
   three line gaps at a measured 42px. Re-measure the lines, not the
   cluster tops, after any change here. */
.s1 { margin-top: 146px; }
.s2 { margin-top: 104px; }
.s3 { margin-top: 62px; }
.s4 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .step, .step h3::after { transition: none; }
}
/* Round thirteen: the line drops another 20px, her note that the artifacts
   read squished against it. */
.baseline { height: 1px; background: var(--hairline); margin-top: 46px; }

/* Round thirteen, the even climb: the cluster tops already step 44px, but
   the visible bottoms stepped 6/84/30 because Directing's interior ran
   ~40px taller than the rest. These tuners bring the four cluster heights
   together so top and bottom edges climb in the same rhythm; re-measure
   after any interior copy change. */
.s1 .mini { gap: 8px; }
.s2 .mini { gap: 5px; }
.s2 .mini-ask { width: 92%; padding: 7px 9px; }
.s3 .mini-skill { padding: 10px 8px; }
.s3 .mini-stack span { width: 30px; height: 30px; }
.s3 .mini-stack img, .s3 .mini-stack svg { width: 16px; height: 16px; }
.s3 .mini-safety i { padding: 3px 8px; }
.s4 .mini { gap: 4px; }
.s4 .mini-brief { gap: 3px; padding: 4px 8px; }
.mini-brief-li { line-height: 1.3; font-size: 9.5px; }

/* The step interiors: the same job, the inbox, at four levels of fluency,
   in the scenes' own anatomy. Skeleton bars stand in for conversation; the
   only words are approved scene strings; vendor marks keep vendor colors. */
.step .mini { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); display: grid; gap: 6px; }
.mini .bar { display: block; height: 4px; border-radius: 2px; background: rgba(52,70,80,0.14); }
.mini-line { display: flex; align-items: center; gap: 6px; }
.mini-line .bar { flex: 1; }
.mini-ic { width: 13px; height: 13px; object-fit: contain; flex: none; }
.mini-slip {
  display: flex; align-items: center; gap: 6px; width: 66%; padding: 5px 8px;
  border: 1px solid var(--hairline); border-top: 3px solid #EA4335;
  border-radius: 6px; background: #FFFFFF; box-shadow: var(--shadow-rest);
}
.mini-slip .bar { flex: 1; }
.mini .bar.strong { height: 5px; background: rgba(52,70,80,0.22); }
.mini-text { font-size: 10.5px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.mini-answer .mini-line .mini-text { font-weight: 700; }
.mini-bullet { display: flex; align-items: center; gap: 5px; }
.mini-bullet i { width: 4px; height: 4px; flex: none; border-radius: 50%; background: rgba(52,70,80,0.35); }
.mini-bullet .bar { flex: 1; }
.mini-ask {
  justify-self: end; width: 78%; display: grid; gap: 4px; padding: 7px 9px;
  border-radius: 9px 9px 2px 9px; background: var(--bone); border: 1px solid var(--bone-deep);
}
.mini-answer {
  width: 88%; display: grid; gap: 4px; padding: 7px 9px;
  border-radius: 9px 9px 9px 2px; background: #FFFFFF; border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent); box-shadow: var(--shadow-rest);
}
.mini-chips { display: flex; gap: 4px; justify-self: end; }
.mini-chips i {
  padding: 2px 8px; border-radius: 999px; font-size: 8.5px; font-style: normal;
  font-weight: 800; letter-spacing: 0.03em; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, white);
  background: color-mix(in srgb, var(--accent) 9%, white);
}
.mini-stack { display: flex; }
.mini-stack span {
  display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px;
  border-radius: 7px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(28,45,58,0.09), 0 3px 8px rgba(28,45,58,0.1);
}
.mini-stack span:first-child { margin-left: 0; }
.mini-stack img, .mini-stack svg { width: 14px; height: 14px; object-fit: contain; }
.mini-skill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--hairline); background: #F7F4EF;
  box-shadow: var(--shadow-rest);
}
.mini-skill code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--ink); }
.mini-skill em { font-style: normal; font-weight: 800; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.mini-safety { display: flex; gap: 4px; }
.mini-safety i {
  padding: 2px 7px; border-radius: 999px; font-size: 8px; font-style: normal;
  font-weight: 800; letter-spacing: 0.05em; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, white);
  background: color-mix(in srgb, var(--accent) 9%, white);
}
.mini-sched { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink); }
.mini-sched svg { width: 13px; height: 13px; color: var(--muted); }
.op-dot {
  width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  animation: opPulse 2.6s ease-in-out infinite;
}
@keyframes opPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent); }
}
/* Round twelve: the brief card carries a small draft of its Slack message
   under the header row, her ask, so both skills read as at work. */
.mini-brief {
  display: grid; gap: 5px; padding: 6px 8px;
  border: 1px solid var(--hairline); border-left: 3px solid #4A154B;
  border-radius: 7px; background: #FFFFFF; box-shadow: var(--shadow-rest);
}
.mini-brief-top { display: flex; align-items: center; gap: 6px; }
.mini-brief-msg { font-size: 10px; line-height: 1.4; color: var(--ink); }
/* Round thirteen: the brief opens "Good morning" and lists three bullets,
   her shape. */
.mini-brief-li {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 10px; line-height: 1.35; color: var(--ink);
}
.mini-brief-li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(52,70,80,0.35); flex: none; align-self: center;
}
.mini-av {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 12%, white);
  box-shadow: inset 0 0 0 1px rgba(28,45,58,0.1);
}
.mini-av img { width: 13px; height: 13px; object-fit: contain; }
.mini-brief b { font-size: 10.5px; }
.mini-apptag { padding: 1px 4px; border-radius: 3px; background: rgba(28,45,58,0.12); color: var(--muted); font-size: 7px; font-weight: 800; font-style: normal; letter-spacing: 0.06em; }
.mini-slack { width: 12px; height: 12px; margin-left: auto; flex: none; }
/* Operating's brief runs both skills at once underneath it, her
   round-eleven arc: each carries a live accent dot. */
.mini-feeds { display: flex; gap: 4px; flex-wrap: wrap; }
.mini-feeds i {
  display: flex; align-items: center; gap: 4px; padding: 2px 7px;
  border: 1px solid var(--hairline); border-radius: 5px; background: #F7F4EF;
  font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px; font-weight: 600; color: var(--ink);
}
.mini-feeds i::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex: none;
}
@media (prefers-reduced-motion: reduce) { .op-dot { animation: none; } }

/* Scroll choreography for the staircase: the steps rise in left to right as
   the section arrives, and the baseline draws itself under them. Arrivals
   sharpen (ruling 38); the rise uses the translate property so it composes
   with the resting stagger and the hover lift. No effect where scroll-driven
   animation is unsupported, and none under reduced motion. */
@supports (animation-timeline: view()) {
  .stairs .step { animation: stepRise linear both; animation-timeline: view(); }
  .stairs .s1 { animation-range: entry 0% entry 38%; }
  .stairs .s2 { animation-range: entry 12% entry 50%; }
  .stairs .s3 { animation-range: entry 24% entry 62%; }
  .stairs .s4 { animation-range: entry 36% entry 74%; }
  @keyframes stepRise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
  .baseline {
    transform-origin: left;
    animation: baselineDraw linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  @keyframes baselineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .stairs .step, .baseline { animation: none; } }
}

/* --- two ways in, with the 10% echo behind it (ruling 38) ---------------- */
/* Round fourteen: the gap under the scale baseline was the page's big
   outlier, her note; this section starts 36px sooner. */
.tracks-section { position: relative; margin-top: 68px; }
.tracks-section::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -70px; bottom: -70px; width: 100vw; z-index: 0; pointer-events: none;
  /* Round fifteen, the page-wide tonal walk (her ask to stop tuning row
     by row): the wash opens top-right in the hero (16%), echoes down the
     right through the scale section (18%), CROSSES LEFT here (14%, up
     from the round-ten 10% that read as accident rather than intent),
     peaks top-left in the band (27%), and the page ends quiet. One peak
     per page, quiet ends, alternating corners on the way down; other
     pages reuse the walk at their own amplitude. Amends ruling 38's 10%
     echo. */
  background: radial-gradient(900px 380px at calc(50% - 400px) 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%);
}
.tracks-section > * { position: relative; z-index: 1; }
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
/* Round thirteen, a PROPOSAL on her ask for more dimension here: the cards
   pick up the page's own depth language. A gradient face (light from
   above), an inset top highlight like the keycap's, a tighter contact
   shadow under the raised one, and a feathered Petrol wash in the upper
   corner, a field fading to nothing per ruling 38, never a boxed tint. */
.track {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF7 100%);
  border: 1px solid var(--hairline); border-radius: 14px;
  padding: 30px 32px 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(28,45,58,0.08), var(--shadow-raised);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.track::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(340px 220px at 88% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%);
}
.track > * { position: relative; z-index: 1; }
.track:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 4px rgba(28,45,58,0.09), var(--shadow-float); }
/* Part of the running serif TRY, round fifteen: the track heads read flat
   in Inter, her note ("I don't like the font those are in"), so they join
   the display face the section heads already carry. If ruling 30 wins and
   the serif try dies, this dies with it. */
.track h3 { margin: 0; font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-weight: 400; font-size: 27px; letter-spacing: 0; }
.track p { font-size: 15px; color: var(--muted); margin: 8px 0 0; max-width: 44ch; }
.track .btn { margin-top: 22px; }

/* --- sponsor ------------------------------------------------------------- */
/* Round eleven, her note: the bar was not responding on hover. It behaves
   like the two-ways-in cards now, the same lift and float shadow. */
.sponsor {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--bone); border: 1px solid var(--bone-deep); border-radius: 14px;
  padding: 28px 32px; box-shadow: var(--shadow-rest);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.sponsor:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
@media (prefers-reduced-motion: reduce) { .sponsor { transition: none; } }
.sponsor h2 { font-size: 24px; }
.sponsor p { font-size: 15px; margin: 4px 0 0; }

/* --- the glass band (ruling 38: peaks 27% and 16%, feathered, unboxed) --- */
/* Round eleven: another 56px comes out between the sponsor bar and the
   band's headline (margin 56 to 24, top padding 108 to 84), on her note
   that the gap still read too large after the round-six trim. */
.patterns-band {
  position: relative; margin-top: 24px; overflow: hidden;
  padding: 84px 0 96px;
}
.patterns-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(760px 420px at 12% 14%, color-mix(in srgb, var(--accent) 27%, transparent), transparent 70%),
    radial-gradient(820px 460px at 92% 86%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, white), var(--bone));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
}
.patterns-band .shell { position: relative; z-index: 2; }
/* Round fourteen, her proposal, taken up: the glass box retired ("we don't
   really need that box for anything"), the same move as the round-five
   boxless staircase. The copy floats on the band's field; a vertical
   hairline, feathered at both ends per ruling 38, stands in the grid gap
   between copy and artifacts. Revert lives in git (rounds ten to
   thirteen carried the boxed version). */
.patterns-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.patterns-grid::before {
  content: ""; position: absolute; top: 6%; bottom: 6%; width: 1px;
  left: calc((100% - 56px) * 0.525 + 28px);
  background: linear-gradient(to bottom, transparent, rgba(52,70,80,0.17) 22%, rgba(52,70,80,0.17) 78%, transparent);
}
.patterns-copy h2 { font-size: clamp(24px, 2.2vw, 30px); }
.patterns-copy p { font-size: 16px; margin: 12px 0 0; max-width: 52ch; }
/* Seven source-and-result pairs plus a related app tile rotate together
   (her round-ten notes: the tile joins the rotation showing an app related
   to the pair, the double-Outreach pair is cut, and the swipe is replaced
   by the sharpen-in arrival from her own vocabulary: the pair focuses in
   from a soft blur card by card; the outgoing pair dissolves upward). The
   lower result card layers above the source's open corner. */
.artifact-stack { position: relative; height: 250px; }
.pair { position: absolute; inset: 0; z-index: 10; }
/* --hy is the hover lift, registered so it can transition on its own
   clock while the role machinery owns opacity, filter and translate
   (round seventeen, her ask: the band artifacts respond like everything
   else). */
@property --hy { syntax: '<length>'; inherits: false; initial-value: 0px; }
.pair > * {
  transition:
    opacity 600ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0ms),
    filter 600ms ease var(--d, 0ms),
    translate 600ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0ms),
    --hy 170ms ease, box-shadow 170ms ease;
}
.pair.role-stage .artifact-card:hover,
.pair.role-stage .app-tile:hover { --hy: -5px; box-shadow: var(--shadow-float); }
.pair .card-b { --d: 140ms; }
.pair .card-c { --d: 280ms; }
.pair .card-d { --d: 380ms; }
.pair.role-stage > * { opacity: 1; filter: blur(0); translate: 0 0; }
/* Invisible pairs stop catching the pointer (round eighteen): the
   outgoing pair keeps its exit role through the whole dwell, and the
   DOM-last pair otherwise sits invisibly over the first one and eats
   its hovers, her catch that only the inbox-triage set ignored the
   mouse. */
.pair.role-enter, .pair.role-exit { pointer-events: none; }
.pair.role-enter > * { opacity: 0; filter: blur(10px); translate: 0 18px; transition: none; }
.pair.role-exit > * { opacity: 0; filter: blur(8px); translate: 0 -12px; --d: 0ms; transition-duration: 420ms; }
.pair.role-parked { display: none; }
.artifact-card {
  position: absolute; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px; width: 250px;
}
.artifact-card .src svg { width: 16px; height: 16px; flex: none; }
/* The --j vars are the round-twelve per-arrival offsets the band script
   writes, so each pair lands somewhere slightly new; they read 0 before
   the first rotation. */
/* Positions run through the --a/--b/--t vars so the round-thirteen
   compositions can move whole cards; the defaults are the round-nine
   layout, which is also what reduced motion and the first pair hold. */
.pair .card-a { left: var(--ax, 24px); top: var(--ay, 6px); transform: translate(var(--jx, 0px), calc(var(--jy, 0px) + var(--hy))) rotate(calc(-2deg + var(--jr, 0deg))); z-index: 1; box-shadow: var(--shadow-raised); }
.pair .card-b { left: var(--bx, 190px); top: var(--by, 116px); transform: translate(var(--jx, 0px), calc(var(--jy, 0px) + var(--hy))) rotate(calc(1.5deg + var(--jr, 0deg))); z-index: 2; box-shadow: var(--shadow-float); }
/* The two app tiles, 15% bigger (round fourteen, 46 to 53px) and never
   overlapping, her call: the pair's second app stands on the opposite side
   of the cards, each composition placing both tiles apart. */
.pair .app-tile {
  position: absolute; left: var(--tx, 344px); top: var(--ty, 26px); z-index: 3; width: 53px; height: 53px;
  display: grid; place-items: center; border-radius: 13px; background: #FFFFFF;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-raised);
  transform: translate(var(--jx, 0px), calc(var(--jy, 0px) + var(--hy))) rotate(calc(6deg + var(--jr, 0deg)));
}
.pair .app-tile img, .pair .app-tile svg { width: 30px; height: 30px; object-fit: contain; }
.pair .app-tile.tile-b {
  left: var(--ux, 60px); top: var(--uy, 150px);
  transform: translate(var(--jx, 0px), calc(var(--jy, 0px) + var(--hy))) rotate(calc(-6deg + var(--jr, 0deg)));
}
.pair .app-tile i {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #E01E5A; color: #FFFFFF; font-size: 10.5px; font-weight: 800;
  font-style: normal; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(28,45,58,0.25);
}
.src .pdfsq { width: 16px; height: 16px; border-radius: 4px; background: #C0392B; color: #FFFFFF; font-size: 6.5px; font-weight: 900; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .pair > * { transition: none; } }
.artifact-card .src { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.artifact-card .src img { width: 16px; height: 16px; object-fit: contain; }
.artifact-card .t { font-size: 14px; font-weight: 600; margin-top: 8px; color: var(--ink); }
.artifact-card .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.artifact-card .chip {
  display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, white);
  background: color-mix(in srgb, var(--accent) 9%, white);
  color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600;
}

/* The footer's layout moved to system.css 2026-08-26: it is shared chrome,
   and keeping the rendering half here meant a page importing the shared file
   alone got a different footer with unsized social marks. What stays here is
   only what is homepage-specific: the tighter top margin and the landing
   wash below. */
.aa-foot { margin-top: 48px; }
/* The landing, round sixteen: after the band's fade the page was "just
   white", her note. A faint unmasked pool behind the footer settles the
   page down instead of cutting to canvas. */
.aa-foot::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; bottom: 0; width: 100vw; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%);
}

/* Round ten small pieces: the glass CTA, the sticky-on-scroll-up nav, the
   responsive sponsor bar, and the funnel's middle column pulled to the
   page's true center. The footer marks' styling moved to .soc-icon above
   when GitHub and X joined LinkedIn in round eleven. */
.patterns-copy .btn { margin-top: 22px; }
/* Fixed, not sticky (round thirteen): sticky was fenced inside the hero,
   so the scroll-up return only worked before the fold. The hero pads its
   top by the bar's height to keep the layout identical at rest. */
.nav-holder { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: transform 260ms ease, background 260ms ease, box-shadow 260ms ease; }
.nav-holder.floating {
  /* Round seventeen, her note: at 86% the returning bar read as a harsh
     white line over the band. The glass drops to 55% so what is behind
     shows through the blur, and the shadow softens a step. */
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 8px 24px rgba(28,45,58,0.06);
}
.nav-holder.floating .aa-nav { padding: 14px 0; }
/* The hidden bar is only slid off the top, so its links stayed in the
   tab order while invisible: a keyboard user scrolling down and then
   tabbing landed on controls they could not see, inside a fixed element
   the browser cannot scroll into view. visibility takes it out of the
   tab order, delayed so the slide still plays on the way out and
   restored instantly on the way back in. The script also drops the
   hidden class on focusin, which covers focus arriving from a click. */
.nav-holder.hidden { transform: translateY(-100%); visibility: hidden; }
.nav-holder { visibility: visible; }
.nav-holder.hidden { transition: transform 260ms ease, visibility 0s linear 260ms; }
@media (prefers-reduced-motion: reduce) { .nav-holder, .nav-holder.hidden { transition: none; } }
@media (max-width: 800px) {
  .sponsor { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.shape-funnel .analysis { left: 50%; }
.shape-funnel .step-label.step-b { left: 50%; }
/* Her round-eleven note: centering the middle column had left the first
   column's arrows far longer than the second's (210px vs 125px of gap in
   stage coordinates). The intake slips move 85px toward the middle card so
   both gaps measure 125px, the label follows its cards, and the three
   beat-one connectors and runners re-fit: starts on the slips' new edge,
   ends unchanged on the analysis card. */
.shape-funnel .inbox-card,
.shape-funnel .slack-inbox,
.shape-funnel .tasks-inbox { left: calc(15% + 85px); }
.shape-funnel .step-label.step-a { left: calc(15% + 75px); }
.shape-funnel .connectors .path.beat-one,
.shape-funnel .connectors .path.beat-one-b,
.shape-funnel .connectors .path.beat-one-c {
  transform-box: view-box; transform-origin: 0 0;
  transform: translateX(149.2px) scaleX(0.7256);
}
.shape-funnel .connectors .path.beat-two {
  transform-box: view-box; transform-origin: 802px 0; transform: scaleX(0.77);
}
.shape-funnel .runner.beat-one { offset-path: path("M319 133 C367 133 405 144 438 148"); }
.shape-funnel .runner.beat-one-b { offset-path: path("M319 223 C367 223 405 214 438 212"); }
.shape-funnel .runner.beat-one-c { offset-path: path("M319 313 C367 313 405 284 438 276"); }
.shape-funnel .runner.beat-two { offset-path: path("M688 240 C724 240 765 212 802 208"); }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .stairs { flex-wrap: wrap; gap: 16px; }
  .step { flex: 1 1 calc(50% - 16px); }
  .s1, .s2, .s3, .s4 { margin-top: 0; }
  .patterns-grid { grid-template-columns: 1fr; gap: 40px; }
  .patterns-grid::before { display: none; }
  .artifact-stack { height: 230px; max-width: 480px; }
}
@media (max-width: 700px) {
  section { margin-top: 72px; }
  .tracks { grid-template-columns: 1fr; }
  .sponsor { flex-direction: column; align-items: flex-start; gap: 18px; }
  .patterns-band { padding: 72px 0 80px; }
  .aa-foot { margin-top: 72px; }
}
@media (max-width: 560px) {
  .step { flex: 1 1 100%; }
  .artifact-card { width: 220px; }
}


/* --- the Easter egg ------------------------------------------------------ */
/* Moved to system.css 2026-08-26 on her ruling 63: the keycap, its shimmer
   and the click-through cursor travel to every page, so they belong in the
   shared file rather than here. Nothing homepage-only is left of it. */