/* Frontier's article furniture for the Visa Agentic Commerce Benchmark: the six objectives, the
   gold art that shimmers behind sections as they scroll, and the paradox
   pictures set into sections. Each piece follows the Visa Payments Frontier
   v1.5 page it comes from (design-system/uploads/Visa Frontier - v1.5 - ADA
   Performance/articles/pages): the objectives are agent-score.html's six
   dimensions (#ca5), the gold art is the .c-goldart
   mask with the scroll sheen, and the pictures follow
   ai-cyber-resilience.html's image lanes (#cg2). gold.js moves the sheens and
   drifts the pictures. */
:root{
  --cb-gold-base:.22;--cb-gold-opacity:1;--cb-gold-angle:55deg;
  --cb-lane-h:400px;--cb-lane-gap:72px;--cb-lane-top:64px;--cb-art-shift:.035;
  /* What's next: the picture and the cards sit closer under the text (Kyle, 27 Oct: "a lot of space between the end of
     the text block and the top of the cards"): 24px to the picture and a shorter band, so the cards start 177px under
     the text where they started 245px under it. The cards still cover 42% of the band, so its lit doorway and the figure
     in it stay above card 02 (the pre-deploy review: at 55% the door showed as a white strip on the card's edge). */
  --cb-next-gap:24px;--cb-next-dia-h:170px;--cb-next-band-h:264px;--cb-next-overlap:.42;
}

/* ── 01 | The problem ─────────────────────────────────────────────────── */
.article .ovw .c-title{max-width:28ch}
/* What we found (the team's outline, 22 Oct): three results under the summary, each a link to its detail.
   Rows ruled by the page's hairline; the numbers share one column so their meanings line up. */
/* .lane sets a top margin later in this file; the Intro's lane starts right under its eyebrow, as every title does. */
.lane.ovw-lane{margin-top:0}
.ovw-lane .c-title+.c-sub{margin-top:30px}
/* The team's summary (29 Oct) is four short paragraphs; it defines intent and Episodes itself. */
.ovw-lane .c-sub+.c-sub{margin-top:16px}
.ovw-finds-lead{margin:30px 0 0;font:700 20px/1.3 var(--display);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.ovw-finds{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--fx-hair)}
.ovw-finds li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;border-bottom:1px solid var(--fx-hair)}
/* Each result: a short label, then its number and meaning centred on one line (Kyle, 22 Oct). */
.ovw-find{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;column-gap:22px;row-gap:6px;align-items:center;padding:14px 0;color:inherit;text-decoration:none}
.ovw-find-k{grid-column:1 / -1;font:400 11px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--fx-ink)}
.ovw-find b{font:700 clamp(28px,2.5vw,36px)/1 var(--display);letter-spacing:-.03em;color:#fff;white-space:nowrap;transition:color .2s}
.ovw-find b small{margin:0 .1em;font:400 .5em/1 var(--display);white-space:pre;letter-spacing:0;color:var(--fx-ink)}
.ovw-find-t{font:400 15px/1.4 var(--display);color:var(--fx-ink);text-wrap:pretty;transition:color .2s}
.ovw-find:hover b,.ovw-find:focus-visible b{color:var(--fx-gold)}
.ovw-find:hover>.ovw-find-t,.ovw-find:focus-visible>.ovw-find-t{color:#fff}
/* A quiet arrow says each result goes somewhere, on touch as well as hover. */
/* A no-break space keeps the arrow on the last word's line; it nudges on hover by relative position. */
.ovw-find-t::after{content:"\00a0\2192";position:relative;left:0;color:var(--fx-ink);transition:left .2s,color .2s}
.ovw-find:hover>.ovw-find-t::after,.ovw-find:focus-visible>.ovw-find-t::after{left:3px;color:var(--fx-gold)}
/* Below 1024px the summary and the figure stack, so the results keep a wide column. */
@media(max-width:1023px){.ovw-lane{grid-template-columns:1fr}}
@media(max-width:479px){.ovw-finds,.ovw-finds li,.ovw-find{grid-template-columns:1fr}.ovw-find{row-gap:6px;padding:12px 0}}

/* ── Gold art ─────────────────────────────────────────────────────────────
   The line art is a mask over a dim gold fill; a band of bright gold three
   times the art's width slides through it as the section scrolls (gold.js,
   Frontier's sweep: right to left as you read down). Each section places its
   own art with inline left/right/top/bottom and --ga-w. */
.gold-art{position:absolute;z-index:0;pointer-events:none;width:var(--ga-w,50vw);aspect-ratio:var(--ga-ratio,1);overflow:hidden;opacity:var(--cb-gold-opacity);background:rgba(201,153,74,var(--cb-gold-base));-webkit-mask:var(--ga) center/contain no-repeat;mask:var(--ga) center/contain no-repeat}
.gold-art .sheen{position:absolute;top:0;bottom:0;left:0;width:300%;transform:translateX(-58.333%);will-change:transform;background:linear-gradient(var(--cb-gold-angle),transparent 37.5%,rgba(214,164,74,.14) 42.5%,rgba(235,186,92,.55) 46.5%,#f2cf7a 48.75%,#fff4d2 50%,#f2cf7a 51.25%,rgba(235,186,92,.55) 53.5%,rgba(214,164,74,.14) 57.5%,transparent 62.5%)}
.article .comp>.c-plane{z-index:2}

/* ── Paradox art ────────────────────────────────────────────────────────────
   A purpose-made picture set into a section the way Frontier sets its paradox
   images (ai-cyber-resilience.html #cg2): it bleeds off one side of the page,
   and its inner edge (data-edge) breaks up into pixel-sorted streaks
   (.px-tear: the picture's columns stretched out), blocks of big pixels
   (.px-mosaic: a 48px copy of the picture drawn without smoothing) and a
   shifted piece or two (.px-cut). Every piece is in register with the
   picture: .px-art is a size container, and each piece works out where the
   picture sits from its own size and the image's ratio. gold.js drifts the
   picture (--plx) a little slower than the page. No text sits on it. */
.px-art{--ratio:2.3529;--focus:.5;--fx:.5;--zoom:1;--src:.03;--plx:0px;position:relative;container-type:size}
.px-art>*{--pw:calc(max(100cqw,100cqh * var(--ratio)) * var(--zoom));--ph:calc(var(--pw) / var(--ratio));--top:calc((100cqh - var(--ph)) * var(--focus) + var(--plx));--left:calc((100cqw - var(--pw)) * var(--fx));background-image:var(--img);background-repeat:no-repeat}
.px-fill{position:absolute;inset:0;background-size:var(--pw) var(--ph);background-position:var(--left) var(--top)}
/* Feathered into the section (designer's simplification, Kyle 19 Oct): the picture fades out at its top and
   bottom and on its torn side, and its blacks lift to the section's ground (lighten), so no rectangle shows.
   Only the picture layer is masked, so the torn side keeps its streaks and blocks. */
.px-fill{--feather:linear-gradient(transparent,#000 18%,#000 82%,transparent);--inner:linear-gradient(#000,#000);-webkit-mask-image:var(--feather),var(--inner);mask-image:var(--feather),var(--inner);-webkit-mask-composite:source-in;mask-composite:intersect;mix-blend-mode:lighten}
.px-art[data-edge=left] .px-fill{--inner:linear-gradient(to right,transparent,#000 24%)}
.px-art[data-edge=right] .px-fill{--inner:linear-gradient(to left,transparent,#000 24%)}
/* What's next's band runs the page's full width, so only its top and bottom fade. */
.next .next-art .px-fill{--inner:linear-gradient(#000,#000)}
.px-tear{position:absolute;top:calc(var(--y) * 1%);height:calc(var(--h) * 1%);width:calc(var(--w) * 1%);opacity:var(--o,1);background-size:calc(var(--pw) * 60) var(--ph);background-position-y:calc(var(--top) - var(--y) * 1cqh)}
.px-art[data-edge=left] .px-tear{right:100%;background-position-x:calc((var(--left) - var(--src) * var(--pw)) * 60);-webkit-mask-image:linear-gradient(to left,#000 35%,transparent);mask-image:linear-gradient(to left,#000 35%,transparent)}
.px-art[data-edge=right] .px-tear{left:100%;background-position-x:calc((var(--left) - 100cqw + var(--src) * var(--pw)) * 60);-webkit-mask-image:linear-gradient(to right,#000 35%,transparent);mask-image:linear-gradient(to right,#000 35%,transparent)}
.px-cut{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);background-size:var(--pw) var(--ph);background-position:calc(var(--left) - var(--x) * 1cqw + var(--dx) * 1px) calc(var(--top) - var(--y) * 1cqh);filter:brightness(var(--b,1.15))}
.px-mosaic{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);background-image:var(--tiny);background-size:var(--pw) var(--ph);background-position:calc(var(--left) - var(--x) * 1cqw) calc(var(--top) - var(--y) * 1cqh);image-rendering:pixelated}

/* How far a lane bleeds: from the plane's text edge out to the window's. */
.article{--bleed:calc((100vw - min(100vw,var(--fx-plane) + 2 * var(--fx-margin))) / 2 + var(--fx-margin))}
/* A lane: the picture on one side, bleeding off the page, the text on the other. */
.lane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--cb-lane-gap);margin-top:var(--cb-lane-top)}
.lane>.px-art{height:var(--cb-lane-h)}
.lane[data-bleed=left]>.px-art{margin-left:calc(-1 * var(--bleed))}
.lane[data-bleed=right]>.px-art{order:2;margin-right:calc(-1 * var(--bleed))}
.lane .c-sub{margin-top:0}
/* 03: the challenge's bar, under its title (designer's simplification, 19 Oct). */
/* One line where the width allows (Kyle, 19 Oct: "we have enough space to get text on one line"). */
.article .c-sub.ep-lead{max-width:none;margin-top:18px;text-wrap:pretty}
/* 01's scene (designer's simplification, Kyle 19 Oct; reworked 20 Oct): the shopper, a person drawn
   still in dots, hands a need to the shopping assistant, the moving shopping orb (orb.js). The 11 labs'
   logos are an irregular cloud the two stand inside: behind them smaller and dimmer (showing through the
   dots), in front raised and free to cover an edge. */
.ovw-scene{display:grid;justify-items:center;margin:0;padding:8px 0}
.ovw-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;max-width:600px;aspect-ratio:16/9}
.ovw-logos{position:absolute;inset:0;margin:0;padding:0;list-style:none}
/* Each logo's size (--s, pixels, from logo-cloud.js) says how near it is; --k shrinks the whole cloud on phones. */
.ovw-logos li{--size:calc(var(--s,44) * var(--k,1) * 1px);position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:2;display:grid;place-items:center;width:var(--size);height:var(--size);border-radius:50%;background:#161616;box-shadow:0 calc(var(--size) * .22) calc(var(--size) * .6) rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.ovw-logos li.is-mid{opacity:.74}
.ovw-logos li.is-back{z-index:0;opacity:.38;box-shadow:none}
.ovw-logos .logo{width:calc(var(--size) / 2);height:calc(var(--size) / 2);color:#fff}
.ovw-flow{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(70px,160px) auto;align-items:start;gap:0 16px}
/* Below 1200px the scene's column is narrow: a square scene, where the figures stand near its sides, so each
   logo takes its second place (logo-cloud.js gives each its --px, --py), and smaller figures below 1024px. */
@media(max-width:1199px){
  .ovw-stage{aspect-ratio:1;max-width:460px}
  .ovw-logos li{left:calc(var(--px) * 1%);top:calc(var(--py) * 1%)}
}
@media(min-width:768px) and (max-width:1023px){:root{--cb-ovw-orb:96px}}
/* The shopper is a person, not a model: a still bust drawn in dots, the orbs' own texture without their motion. */
.ovw-person{display:block;width:var(--cb-ovw-orb,120px);aspect-ratio:1;background:radial-gradient(circle,#ebe5db 0 1.25px,transparent 1.75px) 0 0/6px 6px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='17'/%3E%3Cpath d='M14 98c0-22 16-38 36-38s36 16 36 38z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='17'/%3E%3Cpath d='M14 98c0-22 16-38 36-38s36 16 36 38z'/%3E%3C/svg%3E") center/contain no-repeat}
.ovw-node{display:grid;justify-items:center;gap:10px}
.ovw-orb{display:block;width:var(--cb-ovw-orb,120px);aspect-ratio:1}
.ovw-orb canvas{display:block;width:100%;height:100%}
.ovw-node b{font:400 12px/1.4 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:#fff}
/* The request travels from the shopper to the assistant: a dashed line moving right, level with the orbs' centres. */
.ovw-link{position:relative;display:block;height:2px;margin-top:calc(var(--cb-ovw-orb,120px) / 2);container-type:inline-size}
.ovw-link i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(242,207,122,.8) 0 6px,transparent 6px 14px);animation:ovw-flow 1.4s linear infinite}
/* What travels from the shopper to the assistant is the shopper's intent, what the experiment solves for (Kyle,
   20 Oct): named on the line in the page's highlight gold, on a solid gold-dark fill that hides the dashes
   behind it, with a soft glow. No ring. */
.ovw-intent{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);padding:7px 15px;border-radius:999px;background:#41361f;box-shadow:0 0 30px rgba(242,207,122,.3);font:400 13px/1 var(--mono);letter-spacing:2.4px;text-transform:uppercase;color:var(--fx-gold);white-space:nowrap}
/* The label sizes itself by its own line, not the screen (review, 20 Oct): on a line under 150px it rides just
   above the dashes, a size smaller, so the whole line still shows and it never meets the arrowhead. */
@container (max-width:149px){.ovw-intent{top:auto;bottom:9px;transform:translateX(-50%);padding:5px 10px;font-size:11px;letter-spacing:1.6px}}
.ovw-link::after{content:"";position:absolute;right:-2px;top:50%;width:8px;height:8px;border-top:2px solid rgba(242,207,122,.8);border-right:2px solid rgba(242,207,122,.8);transform:translateY(-50%) rotate(45deg)}
@keyframes ovw-flow{to{background-position:14px 0}}
html.vf-motion-pause .ovw-link i,.ovw-link.is-off i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ovw-link i{animation:none}}

/* ── 01 | The problem: the six objectives ──────────────────────────────────
   Frontier's six-dimension grid (agent-score.html #ca5): framed cards with a
   gold mono name and one line. Each card spans two rows of the list and
   shares them (subgrid), so a row of cards gives every name the height of its
   longest and the lines under them start level (Kyle, 19 Oct). */
/* How it works' three blocks (the head, the diagram, the objectives) stand the same distance apart, the
   diagram's margin, and the lead keeps to one line where the page is wide enough (Kyle, 22 Oct). */
/* Left-aligned, as Frontier sets its text (Kyle, 29 Oct). */
.dims-lead{margin:96px 0 0;max-width:none;text-align:left;font:700 var(--fx-title-s,28px)/1.15 var(--display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
/* All six the same size (Kyle, 29 Oct): every row as tall as the tallest card, and each name keeps two lines' room so
   every card's text starts at the same height. */
.dims{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px;margin:36px 0 0;padding:0}
.dim{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;background:var(--fx-grey)}
.dim>.dim-name{min-height:2.6em}
/* The frame itself: hairlines 13px in from each edge and a dot at each corner. The research page's cards and
   Figure 1 wear it too, as .fx-frame, with the same spans (design review, 22 Oct). */
.fx-frame{position:relative;background:var(--fx-grey)}
.comp[data-bg=grey] :is(.dim,.fx-frame){background:var(--fx-ground)}
:is(.dim,.fx-frame)::before,:is(.dim,.fx-frame)::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fx-hair);pointer-events:none}
:is(.dim,.fx-frame)::before{top:13px}
:is(.dim,.fx-frame)::after{bottom:13px}
:is(.dim,.fx-frame)>:is(.vl,.vr){position:absolute;top:0;bottom:0;width:1px;background:var(--fx-hair);pointer-events:none}
:is(.dim,.fx-frame)>.vl{left:13px}
:is(.dim,.fx-frame)>.vr{right:13px}
:is(.dim,.fx-frame)>.cdot{position:absolute;width:5px;height:5px;background:var(--fx-dot);pointer-events:none}
:is(.dim,.fx-frame)>.d1{left:10px;top:10px}
:is(.dim,.fx-frame)>.d2{right:11px;top:10px}
:is(.dim,.fx-frame)>.d3{left:10px;bottom:10px}
:is(.dim,.fx-frame)>.d4{right:11px;bottom:10px}
.dim-name{position:relative;align-self:start;margin:0;font:400 19px/1.3 var(--mono);letter-spacing:2px;text-transform:uppercase;background:linear-gradient(100deg,#c9994a 0%,#e0b45e 30%,#f2cf7a 44%,#fff4d2 50%,#f2cf7a 56%,#e0b45e 70%,#c9994a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dim-body{position:relative;margin:0;font:400 15px/1.45 var(--display);color:var(--fx-ink)}

/* ── 02 | The research (was The work): what an episode is ──────────────────────────────────────
   The head pairs Kyle's title with the episode picture. Under it, the
   whitepaper's Figure 1 (p.4): the customer, the shopping assistant and the
   controlled market, Figure 1's words for what passes between them, the
   customer's private dossier and the sealed answer key. The pinned story
   that follows plays the runs at scale. */
.lane.wk-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);margin-top:0}
.wk-head>.px-art{height:var(--cb-work-art-h,420px)}
/* The picture's darks lift to the section's ground through mix-blend-mode:lighten, but .px-art is its own
   stacking context, so the blend needs the ground inside it: the section's own, black or grey (How it works is
   black again since 29 Oct, Compare grey). */
.comp .px-art{background:var(--fx-ground)}
.comp[data-bg=grey] .px-art{background:var(--fx-grey)}
.work .wk-title{max-width:22ch}
.work .wk-head .wk-sub{max-width:46ch;margin-top:26px}
/* The lock the dossier and the answer key wear (How it works' chat, tabs.css). */
.wk-lock{flex:none;width:11px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ── 04 | Findings (was Research) ─────────────────────────────────────────
   Kyle (19 Oct): the research team's own devices (its results-only
   report), every model shown by its provider's logo, and pass rate
   against cost. Later that day: the full results link up top, and the two
   charts and what they mean, nothing else. Each panel is headed by its
   finding, said in the affirmative, with one line of support; the counts
   live on /insights, and the other findings are set aside
   (docs/copy/research-set-aside-2026-10-19.md). Each finding is a row of its
   own, its words on the left and its chart on the right. */
.rs-p b{font-weight:700;color:#fff}
.rs-numbers{margin-top:28px}
.rs-numbers>summary{cursor:pointer;font:400 12px/1.5 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-ink)}
.rs-numbers>summary:hover{color:var(--fx-gold)}
.rs-figure{position:relative;margin:56px 0 0}
/* The charts continue Findings straight after the runs (22 Oct): no second top margin over them. */
.article .story+.comp.research{padding-top:0}
.story+.research .rs-figure{margin-top:24px}
/* Designer's simplification (Kyle, 19 Oct): the findings stack, one full-width row each, the finding and
   its line on the left and the chart wide beside them. */
.rs-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:88px}
/* Each finding's takeaway on top, left-aligned, and its chart below it, bigger and centred (Kyle, 22 Oct). */
.rs-panel{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;scroll-margin-top:calc(var(--fx-nav) + 24px)}
.rs-panel>.rs-svg{justify-self:center;max-width:900px;margin-top:8px}
.rs-h{margin:0 0 12px;font:700 28px/1.16 var(--display);letter-spacing:-.018em;color:#fff;text-wrap:balance}
.rs-p{margin:0 0 22px;font:400 17px/1.5 var(--display);color:var(--fx-ink);text-wrap:pretty}
.rs-svg{display:block;width:100%;height:auto;overflow:visible}
.rs-grid line{stroke:rgba(150,145,140,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.rs-grid .rs-v{stroke-dasharray:2 5}
.rs-ticks text{font:400 11px var(--mono);letter-spacing:.4px;fill:var(--fx-caption)}
.rs-ticks .rs-axis-title{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase}
.rs-pt{color:#fff;transition:opacity .2s ease}
.rs-badge{fill:#121212;transition:fill .2s ease}
.rs-level{stroke:rgba(255,255,255,.72);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rs-level-label{font:600 13px var(--display);fill:#fff;font-variant-numeric:tabular-nums}
/* Each logo's short name, in small grey type (research team's note, Kyle 19 Oct). */
.rs-name{font:400 11px var(--display);fill:var(--fx-ink)}
.rs-leader{stroke:rgba(236,232,226,.35);stroke-width:1;vector-effect:non-scaling-stroke}
/* Under 600px the plot draws at about half size, too small for names; a tap names a model. */
@media(max-width:599px){.rs-name,.rs-leader{display:none}}
#research-chart[data-active] .rs-levels{opacity:.25}
#research-chart[data-active] .rs-pt:not(.is-active){opacity:.16}
.rs-pt.is-active .rs-badge{fill:#4a3d1c}
.rs-tip{position:absolute;z-index:5;min-width:210px;padding:12px 14px 12px;border:1px solid var(--fx-hair-strong);border-radius:10px;background:#141414;box-shadow:0 14px 32px rgba(0,0,0,.5);pointer-events:none;font:400 13px/1.4 var(--display);color:var(--fx-ink)}
.rs-tip b{display:flex;align-items:center;font:600 15px/1.2 var(--display);color:#fff}
.rs-tip>span{display:block;margin:3px 0 10px 26px;font:400 10.5px/1.2 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-caption)}
.rs-tip dl{display:grid;gap:4px;margin:0}
.rs-tip dl div{display:flex;justify-content:space-between;gap:18px}
.rs-tip dt{color:var(--fx-caption)}
.rs-tip dd{margin:0;color:#fff;font-variant-numeric:tabular-nums}
.rs-logo{flex:none;width:18px;height:18px;margin-right:8px;color:#fff;vertical-align:-4px}
.rs-table{margin-top:14px}
.rs-table th[scope=row]{white-space:nowrap;font-weight:600;color:#fff}
.rs-model{display:flex;align-items:center}
.rs-table th small{margin-left:10px;font:400 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--fx-caption)}
.rs-table td small{margin-left:6px;color:var(--fx-caption)}
.rs-table tr.is-active{background:rgba(242,207,122,.06)}
.rs-figure>figcaption{margin-top:18px}

/* ── 05 | What's next: the three phases as a flow ─────────────────────────
   Kyle (19 Oct) picked the band of three takes: the lead as a statement
   across the page, the first-step picture as a band across the window, and
   the three phases over its lower half with an arrow between each, as
   ai-cyber-resilience.html #cg4 sets its cards over an image. The cards are
   Frontier's framework cards (large-transaction-models.html #ct2): a panel
   with crop-mark hairlines, a framed picture, a mono name. story.js lights
   checkout, and the arrow into it, as the section comes in (--card-dim,
   --lit). */
.next-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--cb-next-gap)}
.next .next-title{max-width:24ch}
.next .next-lead{max-width:64ch}
.next .next-art{--zoom:1.08;height:var(--cb-next-band-h);margin:0 calc(-1 * var(--bleed))}
.next .story-phases{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:stretch;margin:calc(var(--cb-next-band-h) * -1 * var(--cb-next-overlap) - var(--cb-next-gap)) 0 0;padding:0;list-style:none}
.next .fcard{position:relative;display:flex;flex-direction:column;margin:0;padding:24px 27px 32px;border:0;background:var(--fx-ground)}
.next .fcard::before,.next .fcard::after{content:"";position:absolute;left:-12px;right:-12px;height:1px;background:var(--fx-hair-strong)}
.next .fcard::before{top:13px}
.next .fcard::after{bottom:13px}
.next .fcard .vl,.next .fcard .vr{position:absolute;top:-14px;bottom:-14px;width:1px;background:var(--fx-hair-strong)}
.next .fcard .vl{left:13px}
.next .fcard .vr{right:13px}
.next .fcard .d1{top:10px;left:10px}.next .fcard .d2{top:10px;right:10px}.next .fcard .d3{bottom:10px;left:10px}.next .fcard .d4{bottom:10px;right:10px}
.next .fw-text{display:contents}
.next .fcard .num{order:-1;margin:0 0 14px;font-size:15px}
.next .fcard .fdia{height:var(--cb-next-dia-h);margin:0 0 20px;border:1px solid var(--fx-hair-strong)}
.next .fcard h3{margin:0 0 10px;font:400 19px/1.3 var(--mono);letter-spacing:2px;text-transform:uppercase;background:linear-gradient(100deg,#c9994a 0%,#e0b45e 30%,#f2cf7a 44%,#fff4d2 50%,#f2cf7a 56%,#e0b45e 70%,#c9994a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.next .fcard .fw-text>p:not(.num){margin:0;font:400 15px/1.45 var(--display);color:var(--fx-ink)}
/* Only the contents dim, so the gold art never shows through a panel. */
.next .fcard>.fdia,.next .fw-text>*{opacity:var(--card-dim,1)}
/* The arrow from each phase to the next, in the gap, level with the pictures. */
.next .fnext{position:absolute;z-index:3;top:calc(var(--cb-next-dia-h) / 2 + 52px);right:-31px;width:22px;height:22px;background:var(--fx-gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 11h14M12 5.5 17.5 11 12 16.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 11h14M12 5.5 17.5 11 12 16.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.next .fcard:nth-child(1) .fnext{opacity:calc(.3 + .7 * var(--lit,1))}
.next .fcard:nth-child(2) .fnext{background:var(--fx-caption)}

@media(max-width:1100px){
  .rs-panels{gap:64px}
}
@media(max-width:767px){.rs-h{font-size:24px}}
@media(max-width:1000px){
  :root{--cb-lane-gap:40px;--cb-lane-h:340px}
  .dims{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  /* Frontier anchors the art top right at phone widths and keeps it large;
     here it is dimmed so it never competes with the heading over it. */
  .gold-art{left:auto!important;bottom:auto!important;top:0!important;right:-58vw!important;width:min(150vw,760px)!important;opacity:calc(var(--cb-gold-opacity) * .32)}
  /* Research has no headline for its rings to sit behind; they stay above its charts. */
  .research .gold-art{top:auto!important;bottom:-480px!important}
  :root{--cb-lane-h:220px;--cb-lane-top:40px;--cb-next-gap:28px;--cb-next-dia-h:150px;--cb-next-band-h:200px}
  .lane{grid-template-columns:1fr;gap:28px}
  .lane[data-bleed=right]>.px-art{order:0}
  .lane[data-bleed=left]>.px-art{margin-right:calc(-1 * var(--bleed))}
  .lane[data-bleed=right]>.px-art{margin-left:calc(-1 * var(--bleed))}
  .px-tear:nth-of-type(n+5),.px-cut{display:none}
  .dims{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .dim>.dim-name{min-height:0}
  .lane.wk-head{grid-template-columns:1fr}
  .wk-head>.px-art{height:240px;order:0}
  .dims-lead{margin-top:64px;font-size:24px}
  :root{--cb-ovw-orb:88px}
  .ovw-flow{gap:0 10px}
  .ovw-logos{--k:.72}
  .next .story-phases{grid-template-columns:1fr;gap:32px;margin-top:0}
  .next .fnext{display:none}
}
/* The page's one closing button (the team, 29 Oct: one CTA), above What's next's sign-off. */
.end-cta{margin-top:64px}
/* The game's way back in (comms and Kyle, 3 Nov): a band at the very bottom, before the credits, that opens Episode 1's
   page in a new tab, with the demo notice. Episode 1's art fills its right half; on phones it follows the words. */
.play-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;margin-top:64px;padding:40px;border-radius:16px;background:#1a1a1a}
.play-band-k{margin:0 0 14px;font:400 12px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--fx-gold,#f2cf7a)}
.play-band-h{margin:0 0 12px;font:500 clamp(26px,2.4vw,34px)/1.12 var(--display);letter-spacing:-.02em;color:#fff}
.play-band-p{max-width:44ch;margin:0 0 24px;font:400 17px/1.5 var(--display);color:var(--fx-ink,#b9b4ae);text-wrap:pretty}
.play-band-note{max-width:48ch;margin:18px 0 0;font:400 13px/1.5 var(--display);color:#9a958f}
.play-band-art{overflow:hidden;border-radius:12px;aspect-ratio:16/9;background:#141414}
.play-band-art img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.play-band{grid-template-columns:1fr;gap:24px;padding:24px}}