/* Agentic Fabriq adjustments on top of the v47 handoff. Loaded after every handoff
   stylesheet. Handoff selectors are scoped to .af-scope (scripts/v47/build-assets.py);
   these use the shell's real id so they outrank them. Each block names its request. */

/* Shell: clips horizontal overflow (overflow:clip, never hidden, or the sticky chrome
   breaks). The chrome wrappers generate no box so the sticky header's containing block
   is the shell itself. */
#af-mock{overflow:clip;position:relative}
#af-mock .af-chrome{display:contents}
/* The handoff positioned its root; the scoping moved that onto the page wrappers, which
   would make them the containing block for the home canopy (it must sit behind the
   sticky chrome, at the top of the shell, as in the reference). */
#af-mock > .af-scope{position:static}

/* Tailwind's preflight (index.css) changes a few user-agent defaults the handoff was
   built against, and its body rule beats site.css's; restate them inside .af-scope. */
#af-mock .af-scope{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;color:var(--ink,#0a0a0a)}
#af-mock .af-scope *,#af-mock .af-scope ::before,#af-mock .af-scope ::after{border-color:currentColor}
#af-mock .af-scope :is(img,svg,video,canvas,audio,iframe){display:inline;vertical-align:baseline}

/* Hero: more air between the call to action and the "every connection" strip. */
#af-mock .af-strip{margin-top:110px}
@media(max-width:700px){#af-mock .af-strip{margin-top:64px}}

/* Demo section: logos in the trust row instead of words. */
#af-mock .trust-row .trust-logo{display:block;margin-top:10px;height:28px;width:auto}
#af-mock .trust-row .trust-logo-yc{height:30px;border-radius:4px}
#af-mock .trust-row .trust-logo-mit{height:24px;filter:brightness(0) invert(1)}

/* Footer: plain white brand name (no gradient); wordmark as wide as the footer allows,
   its bottom cropped by the footer edge. */
#af-mock .site-footer .footer-brand-name{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#fff;-webkit-text-fill-color:#fff;
}
#af-mock .site-footer{overflow:hidden}
#af-mock .site-footer .footer-wordmark{
  font-size:clamp(40px,12vw,320px); /* DM Sans 900 at -.065em: text is 7.32em wide, footer inner width is 90vw */
  margin-bottom:-.22em;
}

/* Journal film: hide the launch banner and header while the introduction plays. */
.film-active #site-chrome{opacity:0;pointer-events:none}

/* Pages that still use the previous templates sit outside .af-scope; give them the
   background the old shell had so they look as they did. */
#af-mock .legacy-page{background:#F9F7F4;display:block}
/* Those templates padded the top for the old fixed navbar; the new header is in flow. */
#af-mock .legacy-page > .pt-16,#af-mock .legacy-page .mnemiq-artifact.pt-16{padding-top:0}

/* Halftone ripple variants (scripts/v47/build-assets.py, HALFTONE_MAIN): any element with
   data-canopy hosts a canopy stage the artwork script prepends; it fills the host. The
   hosts are the hero art panels, the catalog heroes' right column and the mid-page
   "boundary" panels, which otherwise held paintings or woven cloth. */
#af-mock [data-canopy]{position:relative;overflow:hidden;background:#fafbfc}
#af-mock [data-canopy]>.halftone-canopy{position:absolute;inset:0;height:auto;z-index:0;pointer-events:none;overflow:hidden}
#af-mock [data-canopy]>.halftone-canopy canvas{opacity:1}
#af-mock .afterglow-space[data-canopy]>span{position:relative;z-index:1}
#af-mock .halftone-art .art-window{background:#fafbfc}
#af-mock .story-art.halftone-art{border:1px solid var(--line);padding:15px}
#af-mock .story-art.halftone-art figcaption{border-bottom:0;padding-bottom:0}

/* Integrations catalog: search and the category filter in a sticky column on the left;
   results as a grid of cards (logo tile, name, blurb) in a region with its own scrollbar
   on the right, so the page stays short and the list is easy to flip through. */
#af-mock .catalog-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start}
#af-mock .catalog-side{position:sticky;top:calc(var(--site-chrome-height,80px) + 24px);flex-direction:column;align-items:stretch;gap:22px;margin:0}
#af-mock .catalog-side .search{max-width:none}
#af-mock .catalog-side input{min-width:0;width:100%}
#af-mock .catalog-side>span[data-result-count]{margin:0;padding:0;border-top:1px solid var(--line);padding-top:16px}
#af-mock .catalog-categories{display:flex;flex-direction:column;gap:2px}
#af-mock .catalog-categories>.eyebrow{margin-bottom:8px}
#af-mock .catalog-categories button{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;
  padding:8px 10px;border:0;border-radius:3px;background:transparent;text-align:left;
  font:14px 'DM Sans',sans-serif;color:#4c525c;cursor:pointer;
}
#af-mock .catalog-categories button:hover{background:#f4f5ef;color:#111}
#af-mock .catalog-categories button[aria-pressed=true]{background:#111;color:#fff}
#af-mock .catalog-categories button small{font:11px 'IBM Plex Mono',monospace;color:inherit;opacity:.65}
#af-mock .catalog-results{max-height:calc(100vh - var(--site-chrome-height,80px) - 48px);min-height:420px;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 24px 4px;scrollbar-gutter:stable;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#af-mock .catalog-results::-webkit-scrollbar{width:10px}
#af-mock .catalog-results::-webkit-scrollbar-thumb{background:#d9dccf;border-radius:10px;border:2px solid #fff}
#af-mock .catalog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding-top:18px}
#af-mock .catalog-cards .integration-card{display:grid;grid-template-columns:52px minmax(0,1fr) 14px;gap:14px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff}
#af-mock .catalog-cards .integration-card:hover{background:#fcfcf7;border-color:#cbd8b5}
#af-mock .catalog-cards .card-logo{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);border-radius:10px;background:#fff}
#af-mock .catalog-cards .card-logo img{width:28px;height:28px;object-fit:contain;display:block}
#af-mock .catalog-cards .card-logo img.is-mark{object-fit:cover;object-position:left center}
#af-mock .catalog-cards .card-body{display:block;min-width:0}
#af-mock .catalog-cards .integration-card h3{font-size:16px!important;margin:2px 0 4px!important;font-weight:500;line-height:1.3}
#af-mock .catalog-cards .integration-card p{font-size:13.5px;line-height:1.5;min-height:0;margin:0 0 8px;color:#69707c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#af-mock .catalog-cards .integration-card>.card-body>.eyebrow{display:block;font-size:9.5px;letter-spacing:.4px;margin:0;color:var(--muted)}
#af-mock .catalog-cards .integration-card .card-arrow{position:static;color:#98a088;line-height:1.3}
#af-mock .catalog-results .empty-state{margin-top:20px}
@media(max-width:860px){
  #af-mock .catalog-layout{grid-template-columns:1fr;gap:28px}
  #af-mock .catalog-side{position:static}
  #af-mock .catalog-categories{flex-direction:row;flex-wrap:wrap;gap:6px}
  #af-mock .catalog-categories>.eyebrow{width:100%}
  #af-mock .catalog-categories button{width:auto;padding:7px 12px;border:1px solid var(--line)}
  #af-mock .catalog-results{max-height:none;overflow:visible;padding-right:0;border:0}
}

/* White base everywhere (the handoff's paper was a warm off-white); tinted sections such
   as `.soft` and the story context keep their own colour. */
#af-mock,#af-mock > .af-scope{--af-paper:#fff;background:#fff}

/* Section titles sit at the left, over their content, on every page but the home page
   (the home page keeps the handoff's two-column heads). */
body:not(.textile-home) #af-mock .section-head{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:40px}
body:not(.textile-home) #af-mock .section-head .eyebrow{margin-top:0}
body:not(.textile-home) #af-mock .section-head h2{max-width:none}
/* FAQ: no more empty column beside the questions. */
#af-mock .faq{max-width:none;margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start}
#af-mock .faq details{margin:0}
@media(max-width:860px){#af-mock .faq{grid-template-columns:1fr}}

/* Live policy example: a request record instead of the gate diagram. The same markup and
   script (page-stories.js); acting identity, the Fabriq check and the tool are three
   rows of one ledger, joined by a thread the packets travel down. */
#af-mock .lab-surface{display:grid;grid-template-columns:1fr;gap:0;padding:6px 28px 28px;min-height:0}
#af-mock .lab-node,#af-mock .lab-gate{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;column-gap:22px;padding:18px 22px;min-height:0;text-align:left}
#af-mock .lab-node{border:1px solid #d5dfc4;background:#fff;border-radius:6px}
#af-mock .lab-node small{grid-column:1;font:9px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#8a927c}
#af-mock .lab-node h3{grid-column:2;margin:0!important;font:500 18px 'DM Sans',sans-serif}
#af-mock .lab-node p{grid-column:3;font:11px/1.6 'IBM Plex Mono',monospace;color:#7c886a;margin:0;text-align:right}
#af-mock .lab-node .node-orbit{display:none}
#af-mock .lab-gate{border-radius:6px;box-shadow:none;background:linear-gradient(90deg,#e4eed0,#f1ecc6 55%,#f3ddc6);grid-template-rows:auto auto;row-gap:6px}
#af-mock .lab-gate img{grid-column:1;grid-row:1;width:22px;height:22px;display:block}
#af-mock .lab-gate:before{content:'FABRIQ / DECISION';grid-column:1;grid-row:2;font:9px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#5f6a4b}
#af-mock .lab-gate strong{grid-column:2;grid-row:1;margin:0;font:500 18px 'DM Sans',sans-serif}
#af-mock .lab-gate .gate-checks{grid-column:2;grid-row:2;justify-content:flex-start;gap:8px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.08em}
#af-mock .lab-gate .gate-checks span{border:1px solid #00000022;border-radius:30px;padding:5px 10px}
#af-mock .lab-gate [data-lab-state]{grid-column:3;grid-row:1/3;margin:0;padding:9px 14px;border:1px solid #00000033;border-radius:30px;background:#ffffff88;font:10px 'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
#af-mock .story-lab[data-status=blocked] .lab-gate{background:linear-gradient(90deg,#f1e6d8,#eac4a4)}
#af-mock .story-lab[data-status=pending] .lab-gate{background:linear-gradient(90deg,#f1ebcf,#e9d99f)}
#af-mock .story-lab[data-status=blocked] .lab-target{opacity:.45;border-style:dashed}
#af-mock .lab-wire{height:34px;width:1px;margin-left:calc(22px + 5px);display:block;position:relative;background:#c6d4ad;justify-self:start}
#af-mock .lab-wire i{display:none}
#af-mock .lab-wire:after{content:'';position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:#839a54;box-shadow:0 0 10px #bad58b;opacity:0}
#af-mock .lab-animate .lab-wire.incoming:after{animation:lab-packet-down 1.4s 2}
#af-mock .lab-animate .lab-wire.outgoing:after{animation:lab-packet-down 1.4s .7s 2}
#af-mock .story-lab[data-status=blocked] .outgoing:after,#af-mock .story-lab[data-status=pending] .outgoing:after{animation:none}
@keyframes lab-packet-down{0%{top:0;opacity:0}15%,85%{opacity:1}100%{top:100%;opacity:0}}
@media(max-width:650px){
  #af-mock .lab-node,#af-mock .lab-gate{grid-template-columns:1fr;row-gap:6px;padding:16px}
  #af-mock .lab-node small,#af-mock .lab-node h3,#af-mock .lab-node p,#af-mock .lab-gate img,#af-mock .lab-gate:before,#af-mock .lab-gate strong,#af-mock .lab-gate .gate-checks,#af-mock .lab-gate [data-lab-state]{grid-column:1;grid-row:auto}
  #af-mock .lab-node p{text-align:left}
  #af-mock .lab-gate [data-lab-state]{justify-self:start}
}

/* Page heroes that carry the halftone on their own background (pricing, integrations):
   the stage fills the section, the copy sits over it. */
#af-mock .page-hero[data-canopy]{background:transparent;overflow:hidden}
#af-mock .page-hero[data-canopy]>:not(.halftone-canopy){position:relative;z-index:1}
#af-mock .page-hero[data-canopy]>.halftone-canopy{z-index:0}

/* Home hero: a taller canopy that reaches down the sides around the headline
   (data-canopy-edge on .af-hero); the headline itself sits high, near the centre dissolve. */
.textile-home #af-mock > .af-scope{--canopy-height:clamp(440px,48vw,760px)}
.textile-home #af-mock .af-hero{padding-top:max(12px,calc(var(--canopy-height) * .62 - var(--site-chrome-height) - 24px))}
@media(max-width:700px){.textile-home #af-mock > .af-scope{--canopy-height:420px}.textile-home #af-mock .af-hero{padding-top:max(12px,calc(var(--canopy-height) * .62 - var(--site-chrome-height) - 10px))}}

/* Closing sections: the halftone wraps around the copy, thin at the centre and reaching
   down the sides (data-canopy-edge on the host, which fills the section). */
#af-mock .closing,#af-mock .story-closing{position:relative;overflow:hidden;padding-top:170px;padding-bottom:110px}
#af-mock .closing.closing,#af-mock .story-closing.story-closing{background:#fff} /* outranks per-page gradients */
#af-mock .closing-canopy{position:absolute;inset:0;background:transparent;overflow:hidden}
#af-mock .closing>:not(.closing-canopy),#af-mock .story-closing>:not(.closing-canopy){position:relative;z-index:1}
@media(max-width:650px){#af-mock .closing,#af-mock .story-closing{padding-top:130px}}

/* Home, "built for the next shift": a slow spiral beside the heading. */
#af-mock .shift-section{position:relative}
#af-mock .shift-canopy{position:absolute;right:4%;top:-10px;width:min(44%,560px);height:380px;background:transparent}
#af-mock .shift-section>.section-head,#af-mock .shift-section>.timeline{position:relative;z-index:1}
@media(max-width:860px){#af-mock .shift-canopy{display:none}}

/* Home, "what we do": the five capabilities as a row of cards that fits the page width. */
#af-mock .capability-stories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:6px 0 0;margin-top:8px}
#af-mock .capability-stories article{display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
#af-mock .capability-stories article>div{display:flex;flex-direction:column;flex:1}
#af-mock .capability-stories h3{font-size:21px;max-width:none;letter-spacing:-.4px}
#af-mock .capability-stories p{font-size:13.5px;line-height:1.6}
#af-mock .capability-stories ul{margin:12px 0 16px}
#af-mock .capability-stories li{font-size:12px}
#af-mock .capability-stories .text-link{margin-top:auto;align-self:flex-start}
@media(max-width:1100px){#af-mock .capability-stories{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){#af-mock .capability-stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#af-mock .capability-stories{grid-template-columns:1fr}}

/* Closing sections: the art fills the section and leaves a soft oval gap for the copy
   (data-canopy-hole); tighter padding now that nothing sits above the copy. */
#af-mock .closing,#af-mock .story-closing{padding-top:150px;padding-bottom:150px}

/* Story heroes: keep the copy clear of the tilted art frame. */
#af-mock .story-hero-copy{padding-right:clamp(24px,5vw,90px)}
#af-mock .story-hero-copy h1{max-width:12ch}

/* Home walkthrough: the code sample and its copy button in the handoff's sizes (the
   site's global code styles were leaking in), and who made each audited call. */
#af-mock .walk-code pre,#af-mock .walk-code pre code{font:12px/1.65 'IBM Plex Mono',monospace;color:#1d211c}
#af-mock .walk-code pre{white-space:pre;overflow:auto;margin:0;padding:6px 0 0}
#af-mock .walk-code button{display:inline-block;float:right;margin:0 0 6px 12px;padding:7px 11px;font:11px 'IBM Plex Mono',monospace;line-height:1.4;background:#fff;border:1px solid var(--line)}
#af-mock .walk-event summary{flex-wrap:wrap}
#af-mock .walk-event .walk-who{font:11px 'IBM Plex Mono',monospace;color:#7b8275}
#af-mock .walk-event .walk-who b{font-weight:500;color:#1d211c}

/* The shift spiral is now a corner tide; tuck it behind the heading's right side. */
#af-mock .shift-canopy{top:-30px;height:360px}

/* Home, "built for the next shift": the ring halftone fades out on every side (no box). */
#af-mock .shift-canopy{-webkit-mask-image:radial-gradient(ellipse 58% 55% at 55% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 58% 55% at 55% 45%,#000 30%,transparent 75%)}

/* Home, "two ways in": cards with a primary and a secondary action. */
#af-mock .audience{display:flex;flex-direction:column}
#af-mock .audience-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
#af-mock .audience-actions .action{padding:12px 18px;font-size:14px}
#af-mock .audience-actions .text-link{margin:0}

/* Home, the request path: a map card in the style of the previous site. Agents on the
   left, the Fabriq node in the middle, tools on the right, curved dashed connectors. */
#af-mock .routing-map.routing-map{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px 32px;margin:40px 0 20px;grid-template-columns:1fr .9fr 1fr .9fr 1fr;gap:0;align-items:center}
#af-mock .route-column>.eyebrow{margin-bottom:12px}
#af-mock .route-column>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0;font:14px 'IBM Plex Mono',monospace;gap:10px;flex-wrap:wrap}
#af-mock .route-column>div:before{content:'';width:8px;height:8px;border-radius:50%;background:#c3d9a0;flex:none}
#af-mock .route-column>div img,#af-mock .route-column>div .route-db{width:20px;height:20px;flex:none;object-fit:contain}
#af-mock .route-column>div img+*,#af-mock .route-column>div .route-db+*{margin-left:0}
#af-mock .route-column>div:has(img):before,#af-mock .route-column>div:has(.route-db):before{display:none}
#af-mock .route-db{display:inline-block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444a3e' stroke-width='1.6'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E") center/contain no-repeat}
#af-mock .route-column>div small{width:100%;margin-top:6px;font-size:11px;color:#6b7166}
#af-mock .route-column>div:not(.selected){opacity:.5}
#af-mock .route-column>div.selected{border-color:#0a0a0a;box-shadow:none}
#af-mock .route-column [data-route-tool="1"]{border-color:var(--line)}
#af-mock .route-column [data-route-tool="1"].selected{border-color:#d89a6a}
#af-mock .route-hub.route-hub{background:#0a0a0a;color:#fff;border:0;border-radius:12px;padding:26px 18px;box-shadow:0 18px 40px #0000001f}
#af-mock .route-hub:before,#af-mock .route-hub:after,#af-mock .route-hub .gate-stages{display:none}
#af-mock .route-hub img{width:26px;height:26px;display:block;margin:0 auto;filter:brightness(0) invert(1)}
#af-mock .route-hub h3{font:600 12px 'IBM Plex Mono',monospace!important;letter-spacing:.14em;text-transform:uppercase;margin:12px 0 6px!important;color:#fff}
#af-mock .route-hub p{font:11px 'IBM Plex Mono',monospace;color:#b7bcb0;margin:0 0 10px}
#af-mock .route-hub .route-stage{display:block;font-size:10px!important;color:#c3d9a0;letter-spacing:.06em}
#af-mock .routing-map[data-state=blocked] .route-hub.route-hub{background:#1a120c}
#af-mock .routing-map[data-state=blocked] .route-hub .route-stage{color:#f0b98c}
#af-mock .route-threads.route-threads{display:block;align-self:stretch;min-height:240px;gap:0;background-repeat:no-repeat;background-size:100% 100%}
#af-mock .route-threads i{display:none}
#af-mock .route-threads:nth-of-type(2){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b9bfad' stroke-width='1.4' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 24 C 55 24, 45 50, 100 50' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 50 L 100 50' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 76 C 55 76, 45 50, 100 50' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E")}
#af-mock .route-threads:nth-of-type(4){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b9bfad' stroke-width='1.4' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 50 C 55 50, 45 24, 100 24' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 50 L 100 50' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 50 C 55 50, 45 76, 100 76' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E")}
@media(max-width:860px){#af-mock .routing-map.routing-map{grid-template-columns:1fr;padding:18px}#af-mock .route-threads.route-threads{display:none}}

/* Home, policy matrix: allowed and blocked cells read at a glance. */
#af-mock .matrix-cell.allow{background:#3a5a2c;color:#e4f5c8;border-color:#6f9a4d}
#af-mock .matrix-cell.deny{background:#5a2e1e;color:#ffd0b3;border-color:#a8583a}
#af-mock .matrix-cell.inspected,#af-mock .matrix-cell:focus-visible{border-color:#fff;box-shadow:0 0 0 2px #ffffff44}

/* Header: "Start now" beside "Get a demo". */
html body #af-mock #site-chrome .nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
html body #af-mock #site-chrome .nav-start{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
@media(max-width:860px){html body #af-mock #site-chrome .nav-actions{margin-left:auto}}
@media(max-width:650px){#af-mock .site-header .nav-start{display:none}}

/* Three requests, three outcomes: the concrete example that replaced the policy widget. */
#af-mock .request-table{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .request-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 26px;border-bottom:1px solid var(--line);font:11px 'IBM Plex Mono',monospace;color:#8a927c}
#af-mock .request-head .eyebrow{margin:0}
#af-mock .request-row{display:grid;grid-template-columns:34px minmax(180px,.9fr) minmax(0,1.3fr) auto;grid-template-rows:auto auto;column-gap:22px;row-gap:8px;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line)}
#af-mock .request-row:last-child{border-bottom:0}
#af-mock .request-index{grid-row:1/3;font:12px 'IBM Plex Mono',monospace;color:#9aa08f}
#af-mock .request-what{display:flex;flex-direction:column;gap:3px}
#af-mock .request-what b{font:500 17px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .request-what span{font-size:14px;color:#5a6072}
#af-mock .request-path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:12px 'IBM Plex Mono',monospace;color:#69707c}
#af-mock .request-path code{padding:4px 8px;border:1px solid var(--line);border-radius:4px;background:#fbfbf8;color:#1d211c;font:inherit}
#af-mock .request-path i{font-style:normal;color:#a3a99a}
#af-mock .request-verdict{justify-self:end;padding:7px 12px;border-radius:30px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
#af-mock .is-allowed .request-verdict{background:#e6f0d4;color:#3f5d1e;border:1px solid #b9cf94}
#af-mock .is-blocked .request-verdict{background:#f8e3d6;color:#8a4420;border:1px solid #e3b59a}
#af-mock .is-pending .request-verdict{background:#f6efcf;color:#6e5a12;border:1px solid #e2d290}
#af-mock .request-row p{grid-column:2/5;margin:0;font-size:13.5px;line-height:1.6;color:#69707c;max-width:70ch}
@media(max-width:860px){#af-mock .request-row{grid-template-columns:34px 1fr;row-gap:10px}#af-mock .request-path,#af-mock .request-row p{grid-column:2}#af-mock .request-verdict{grid-column:2;justify-self:start}}

/* Product graphics from the previous site, rendered by the app into the slot. */
#af-mock .story-graphic{margin-top:8px;font-family:'DM Sans',sans-serif}
#af-mock .story-graphic svg{display:inline}