/* The Visa Agentic Commerce Benchmark as a Visa Payments Frontier article. Anatomy and values follow
   the live Frontier research articles, measured October 17, 2026:
   - a card-face hero with four edge labels;
   - an "On this page" topnav with a gold scroll-spy bar;
   - an opener;
   - grey and black comp sections with corner eyebrows;
   - a KEY FINDINGS panel;
   - a closer with credits.
   Titles and copy are white and take emphasis from weight. Gold is kept for
   the KEY FINDINGS label, the topnav bar and one highlight per figure.
   The standalone footer hides when the Frontier host marks the page with
   html.vf-host. */

:root{
  --fx-ground:#1e1e1e;--fx-grey:#303030;--fx-panel:#141414;--fx-edge:#303030;--fx-dot:#525252;
  --fx-ink:#b9b4ae;--fx-caption:#96918c;--fx-hair:rgba(150,145,140,.16);--fx-hair-strong:rgba(150,145,140,.22);
  --fx-blue:#1434cb;--fx-blue-hover:#2b3fe0;--fx-light-blue:#c7edff;--fx-gold:#f2cf7a;--fx-accent:#c7edff;
  --fx-plane:1296px;--fx-margin:clamp(24px,5vw,72px);--fx-pad:88px;--fx-band:64px;--fx-nav:68px;
  --fx-hero-title:calc(max(30px,1.304px + 3.4396vw) / .88);--fx-hero-sub:clamp(17px,3.066px + 1.2414vw,21px);--fx-title:clamp(28px,3.06vw,44px);
  --fx-body:17px;--fx-eyebrow:14px;--fx-aud:20px;--fx-kf:20px;--fx-thumb-radius:12px;
}

body.article{background:var(--fx-ground);color:#fff;font:400 var(--fx-body)/1.35 var(--display)}
.article main{display:block}

/* Card-face hero (page view). The picture and its clarity lens stand in for
   Frontier's generative backgrounds; the oval veil keeps the question legible,
   and the bottom edge feathers into the topnav's panel, so no rectangle shows
   (designer's simplification, Kyle 19 Oct). */
.article .hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:max(520px,62vh);padding:88px var(--fx-margin) 104px;background:#06121e;text-align:center}
.article .hero-art{position:absolute;inset:-32px 0;z-index:0;margin:0;pointer-events:none}
.article .intent-media{position:absolute;inset:0;overflow:hidden}
/* The hero picture (Kyle, 19 Oct: the shopper at the window, round 3 view D, the towers). The lens frames it with the same focus as the
   plain image, and rests on the person at the laptop; on phones the frame moves onto them. */
:root{--lens-image-x:.5;--lens-image-y:.5;--lens-idle-x:.25;--lens-idle-y:.5}
.article .intent-media img{width:100%;height:100%;object-fit:cover;object-position:calc(var(--lens-image-x) * 100%) calc(var(--lens-image-y) * 100%)}
.article .intent-media canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.article .intent-ready .intent-media canvas{opacity:1}
.article .intent-ready .intent-media img{opacity:0}
.article .hero::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:clamp(72px,18%,200px);background:linear-gradient(rgba(20,20,20,0),var(--fx-panel));pointer-events:none}
.article .hero::after{content:"";position:absolute;left:50%;top:52%;z-index:1;width:min(1400px,96%);height:min(64%,480px);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.28) 62%,transparent 100%);pointer-events:none}
.article #h0 .lab{position:absolute;z-index:3;margin:0;font:400 14px/1.5 var(--mono);letter-spacing:2px;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap}
.article #h0 .p-top{top:28px;left:50%;transform:translateX(-50%)}
.article #h0 .p-bottom{bottom:26px;left:50%;transform:translateX(-50%)}
/* Kyle, 4 Nov: the button and "scroll to explore" sat too close. The hero's foot (104px, was 80) holds the cue 57px under
   the button. Opened in Frontier the hero is a fixed 65vh, too short for both (14px apart at 1440x900, overlapping at
   1280x720), so the cue fades as the article opens, as Frontier's own do (agent-score.html: html.vpf-settled .hero
   .p-bottom{display:none}, its click cue fading at .5s). */
html.vpf-sheet .article #h0 .p-bottom{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
/* The open sheet hides the cue, so its hero keeps the 80px foot: 104 lifted the content into the label above it (the
   review, 4 Nov). */
html.vpf-sheet .article .hero{padding-bottom:80px}
/* Kyle, 4 Nov: "instead of 'scroll to explore' can we say 'click to explore' like the other tiles in the site". Inside
   the Frontier host the card opens on a click, so the cue reads as the other tiles' do (their .t-click, word for
   word); standalone the page scrolls, so it says that. */
.article #h0 .p-bottom .t-click,html.vf-host .article #h0 .p-bottom .t-scroll{display:none}
html.vf-host .article #h0 .p-bottom .t-click{display:inline}
.article #h0 .p-right{top:50%;right:26px;writing-mode:vertical-rl;transform:translateY(-50%)}
.article #h0 .p-left{top:50%;left:26px;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.article #h0 a.lab:hover{color:var(--fx-gold)}
.article #h0 .hero-head{position:relative;z-index:3;display:grid;justify-items:center;gap:14px;margin:0 0 24px}
/* The shopping orb: Frontier's agent orb with a bag at its centre (orb.js); it says AI shops for us before a word does. */
.article #h0 .hero-orb{display:block;width:112px;aspect-ratio:1;filter:drop-shadow(0 0 22px rgba(242,207,122,.18))}
.article #h0 .hero-orb canvas{display:block;width:100%;height:100%}
.article #h0 .hero-eyebrow{margin:0;font:400 14px/1.5 var(--mono);letter-spacing:2.4px;text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.article #h0 .q{position:relative;z-index:3;margin:0;max-width:min(1120px,88%);font:700 var(--fx-hero-title)/1.1 var(--display);letter-spacing:-1.64px;color:#fff;text-wrap:balance;text-shadow:0 2px 28px rgba(0,0,0,.4)}
.article #h0 .q .em{color:#fff}
/* "We tested the world's leading AI models in realistic shopping scenarios." on one line wherever it fits (Kyle, 30 Oct:
   from tablet width up), and in two even lines where it can't (phones). */
.article #h0 .sub{position:relative;z-index:3;margin:22px 0 0;max-width:58ch;font:400 var(--fx-hero-sub)/1.25 var(--display);color:#fff;text-wrap:balance;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.article #h0 .cta-row{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;margin-top:40px}

/* Frontier actions: blue pills with a chevron, and mono text links. */
.pill{display:inline-flex;align-items:center;gap:.55em;padding:.538em 1.4em;border:0;border-radius:999px;background:var(--fx-blue);color:#fff;font:600 16px/1.6 var(--display);text-decoration:none;cursor:pointer;transition:background .2s}
.pill::after{content:"";flex:none;width:.42em;height:.42em;border-right:.14em solid #fff;border-top:.14em solid #fff;transform:rotate(45deg)}
.pill:hover{background:var(--fx-blue-hover)}
.pill:focus-visible,.rlink:focus-visible,.gt-card:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
.rlink{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:400 12px/1.5 var(--mono);letter-spacing:1.2px;color:var(--fx-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(150,145,140,.45);cursor:pointer;transition:color .2s,text-decoration-color .2s}
.rlink:hover{color:var(--fx-gold);text-decoration-color:var(--fx-gold)}
.rlink.is-pending{cursor:default;color:var(--fx-caption);text-decoration-style:dotted}
.rlink.is-pending:hover{color:var(--fx-caption);text-decoration-color:rgba(150,145,140,.45)}
.rlink.is-pending::after{content:" · link pending";white-space:pre}

/* Sheet and On this page topnav. In standalone view the sheet is static; the
   Frontier host owns its open, close and morph behaviour. */
.article .ov{position:static;display:block}
.article .x,.article .hband{display:none}
.article .topnav{position:sticky;top:0;z-index:30;display:flex;flex-wrap:nowrap;gap:4px;padding:12px 20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:rgba(20,20,20,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--fx-hair)}
.article .topnav::-webkit-scrollbar{display:none}
/* Auto margins centre the links while they fit and fall to zero when the bar
   scrolls, so the first link stays reachable. The fade shows only then. */
.article .topnav a:first-child{margin-left:auto}
.article .topnav a:last-of-type{margin-right:auto}
.article .topnav.is-scrollable{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.article .topnav a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;font:400 14px/1.5 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap}
.article .topnav a:hover,.article .topnav a[aria-current=true]{color:#fff}
.article .topnav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.4)}
.article .topnav .tn-ind{position:absolute;bottom:0;left:0;width:0;height:2px;border-radius:1px;background:var(--fx-gold);transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1);pointer-events:none}

/* Opener: one audience line on Frontier's dot grid. */
.article .opener{background-image:radial-gradient(circle,rgba(82,82,82,.5) 0 .65px,transparent .9px);background-size:222px 240px;background-position:center top}
.article .opener-in{max-width:calc(900px + 2 * var(--fx-margin));margin:0 auto;padding:40px var(--fx-margin) 44px}
.article .aud{margin:0;max-width:60ch;font:400 var(--fx-aud)/1.65 var(--display);color:var(--fx-ink)}
.article .aud b{font-weight:600;color:#fff}

/* Comp sections, alternating grey and black. */
.article .comp{position:relative;isolation:isolate;overflow:clip;padding:var(--fx-pad) 0;background:var(--fx-ground);scroll-margin-top:var(--fx-nav)}
.article .comp[data-bg=grey]{background:var(--fx-grey)}
.article .c-plane{position:relative;z-index:2;max-width:calc(var(--fx-plane) + 2 * var(--fx-margin));margin:0 auto;padding:0 var(--fx-margin)}
.article .c-eyebrow{width:fit-content;margin:0 0 28px;font:400 var(--fx-eyebrow)/1.74 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--fx-ink)}
/* Every section's name in the page's metallic gold, as the six objectives' names (Kyle, 29 Oct: "use the gold
   highlights more"). */
@supports ((background-clip:text) or (-webkit-background-clip:text)){.article .c-eyebrow{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}}
@media(forced-colors:active){.article .c-eyebrow{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
.article .c-title{margin:0;max-width:24ch;font:700 var(--fx-title)/1.1 var(--display);letter-spacing:-.024em;color:#fff;text-wrap:balance}
.article .c-title .em{color:#fff}
.article .c-sub{margin:30px 0 0;max-width:64ch;font:400 var(--fx-body)/1.35 var(--display);color:#fff}
.article .c-read p{margin:0;max-width:54ch;font:400 var(--fx-body)/1.4 var(--display);color:#fff}
.article .c-read p+p{margin-top:14px}
.article .fx-hedge{margin:0;font:400 12px/1.66 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--fx-caption)}
/* A source line stands the same distance off whatever it follows, on both pages (design review, 22 Oct). */
.article *+.fx-hedge{margin-top:18px}
.article .fx-hedge i{display:inline-block;width:7px;height:7px;margin:0 10px 1px 0;border-radius:50%;background:var(--fx-gold)}

/* Framecards: the three phases of commerce in the story's last scene. Intent,
   where this version starts, takes the gold in the discovery sequence. */
.fcard{position:relative;margin:0;padding:14px 14px 18px;border:1px solid rgba(150,145,140,.18)}
.fcard .cdot{position:absolute;width:6px;height:6px;background:var(--fx-dot)}
.fcard .d1{top:-3px;left:-3px}.fcard .d2{top:-3px;right:-3px}.fcard .d3{bottom:-3px;left:-3px}.fcard .d4{bottom:-3px;right:-3px}
.fcard .num{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font:400 16px/1 var(--mono);letter-spacing:1px;color:var(--fx-accent)}
.fcard .num small{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--fx-caption)}
.fcard .fdia{position:relative;height:92px;margin:12px 0 14px;overflow:hidden;background:var(--fx-panel)}
.fcard .fdia img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85)}
.fcard h3{margin:0 0 6px;font:700 20px/1.15 var(--display);letter-spacing:-.02em;color:#fff}
.fcard .fw-text>p:not(.num){margin:0;font:400 14px/1.4 var(--display);color:var(--fx-ink)}

/* 04 Episodes (Kyle, 19 Oct: starting a game, not playing a video). Episode 1
   is the game's title screen across the plane: its art, a HUD with the store
   and the par, the episode's question and a start button. Under it, the locked
   slot for more episodes (the line on how a round goes went, Kyle 27 Oct).
   Opening morphs the art into the game; closing comes back to it. */
.article .gt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:24px 40px;align-items:center;margin:36px 0 0;padding:0;list-style:none}
.article .gt-tile{min-width:0}
.article .gt-tile--play{grid-column:1 / -1;grid-row:1 / span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;align-items:center}
.article .gt-tile--play>.gt-card{grid-column:1 / -1;grid-row:1}
/* "See how other models did" sits on the art beside the start button (research team's note D1, Kyle 19 Oct).
   It is the art button's sibling placed in the art's own grid cell, so it lies over the art's foot. */
.article .gt-tile--play>.gt-watch{grid-column:1 / -1;grid-row:1;justify-self:end;align-self:end;position:relative;z-index:2;margin:0 calc(28px + var(--gt-start-w) + 12px) 28px 0}
.article .gt-tile--next{grid-column:2;grid-row:2}
.gt-card{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left}
button.gt-card{cursor:pointer;transition:transform .26s var(--cb-motion-ease,ease)}
.gt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--fx-thumb-radius);background:var(--fx-panel)}
.gt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--cb-motion-ease,ease),filter .4s ease}
.gt-shade{position:absolute;inset:0;pointer-events:none}
.gt-tile--play .gt-thumb{aspect-ratio:2.2/1;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.gt-tile--play .gt-thumb img{object-position:50% 40%}
.gt-tile--play .gt-shade{background:linear-gradient(0deg,rgba(6,17,31,.9),rgba(6,17,31,.3) 40%,transparent 62%),linear-gradient(180deg,rgba(6,17,31,.5),transparent 24%)}
:root{--gt-start-w:190px;--gt-watch-w:252px}
.gt-title{position:absolute;left:28px;right:calc(28px + var(--gt-start-w) + 12px + var(--gt-watch-w) + 28px);bottom:28px;display:grid;gap:10px}
.gt-title small{font:400 13px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.8)}
.gt-title b{font:700 clamp(30px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);text-wrap:balance}
.gt-start{position:absolute;right:28px;bottom:28px;box-sizing:border-box;width:var(--gt-start-w);display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 26px 0 30px;border-radius:999px;background:var(--fx-blue);font:600 18px/1 var(--display);color:#fff;box-shadow:0 10px 36px rgba(20,52,203,.45);transition:background .2s ease}
.gt-start svg{width:14px;height:14px;transition:transform .26s var(--cb-motion-ease,ease)}
.gt-watch{box-sizing:border-box;min-width:var(--gt-watch-w);display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border:0;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 16px/1 var(--display);color:#fff;cursor:pointer;transition:background .2s ease,transform .26s var(--cb-motion-ease,ease)}
.gt-watch:hover{background:rgba(255,255,255,.26)}
.gt-watch:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
/* Episode 1's hover preview draws over the art, under the HUD, the question and the start button. */
.gt-preview{position:absolute;inset:0;width:100%;height:100%;background:#151515;opacity:0;transition:opacity .3s ease;pointer-events:none}
.is-previewing .gt-preview{opacity:1}
/* More episodes: a locked slot, its art dimmed. */
.gt-tile--next .gt-card{display:grid;grid-template-columns:112px auto;gap:14px;align-items:center}
.gt-tile--next .gt-thumb{border-radius:10px}
.gt-tile--next .gt-thumb img{filter:grayscale(.6) brightness(.45)}
.gt-lock{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.gt-lock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gt-meta{display:grid;gap:2px}
.gt-meta strong{font:600 15px/1.3 var(--display);color:var(--fx-ink)}
.gt-meta small{font:400 13px/1.4 var(--display);color:var(--fx-ink)}
@media(hover:hover) and (pointer:fine){
  button.gt-card:hover{transform:translateY(-4px)}
  button.gt-card:hover .gt-thumb img{transform:scale(1.04)}
  button.gt-card:hover .gt-start{background:var(--fx-blue-hover)}
  button.gt-card:hover .gt-start svg{transform:translateX(4px)}
  /* The art and its second button lift together, whichever the pointer is on. */
  .gt-tile--play:has(> .gt-card:hover) > .gt-watch,.gt-watch:hover{transform:translateY(-4px)}
  .gt-tile--play:has(> .gt-watch:hover) > button.gt-card{transform:translateY(-4px)}
}
button.gt-card:focus-visible .gt-start svg{transform:translateX(4px)}
button.gt-card:active,button.gt-card.cb-launching{transform:translateY(-1px) scale(.985)}
.article #episodes .episode-stage{margin:56px 0 0}
.article #episodes .episode-stage[data-state=idle]{margin:0}

/* The closer, at the end of What's next: the credits and "Discover more". */
.article .sign-off{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px;margin-top:40px;padding-top:24px;border-top:1px solid var(--fx-hair-strong)}
.article .credits{margin:0;max-width:80ch;font:400 12px/1.5 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-ink)}
.article .vf-discover{font:400 18px/1.4 var(--display);color:#fff;text-decoration:underline;text-underline-offset:6px}
.article .vf-discover:hover{color:var(--fx-gold)}

/* Standalone chrome hides inside the Frontier host, the footer whole: the host shows no footer under an article, so
   legal's panel (about-xp, 5 Nov) closes the page there, as their trademark line did from 3 Nov. */
html.vf-host .site-footer,html.vf-host .vf-discover{display:none}
html.vf-host .about-xp{padding:28px 0 36px}
/* The panel sits outside the sheet, so while the sheet morphs it would ride up under the hero: it shows once the
   sheet has settled (the review, 5 Nov). */
html.vpf-card:not(.vpf-settled) .about-xp{visibility:hidden}
/* The host declares no color-scheme. A frame whose root scheme differs from
   its host's gets an opaque canvas, which covered the whole spiral in #121212.
   Match the host at the root and keep the page dark below it. */
html.vf-host{color-scheme:normal}
html.vf-host body{color-scheme:dark}

/* The page as a Frontier card and sheet (frontier-embed.js, which sets these
   classes only inside the host). As a card the sheet is hidden and the hero
   fills the card box. Open, the article fades in under the hero and the close
   button shows at once. */
html.vpf-card #vcl-cardwrap{z-index:1;background:var(--fx-ground);box-shadow:0 40px 140px -20px rgba(5,8,40,.375),0 0 0 1px rgba(255,255,255,.07)}
html.vpf-card [data-card-sheet]{display:none}
html.vpf-cardrest [data-card-face]{min-height:0!important;height:var(--vcl-cardh,100vh)}
html.vpf-card .ov.vpf-ovkfade>:not(.x){opacity:0;transition:opacity 1.3s cubic-bezier(0,0,.2,1)}
html.vpf-card .ov.vpf-ovkfade.vpf-ovkin>:not(.x){opacity:1}
/* Frontier's close button: a square X centred on the sheet's right edge,
   15px below the pinned topnav (agent-score.html 332-353, 5717, 5755). */
html.vpf-card .article button.x{display:block;position:fixed;z-index:50;top:84px;right:max(8px,calc(max(5vw,(100vw - 1440px)/2) - 24px));width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:0;background:rgba(26,26,26,.85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:0;color:transparent;cursor:pointer}
html.vpf-card .article button.x::before,html.vpf-card .article button.x::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1.5px;background:#fff}
html.vpf-card .article button.x::before{transform:translate(-50%,-50%) rotate(45deg)}
html.vpf-card .article button.x::after{transform:translate(-50%,-50%) rotate(-45deg)}
html.vpf-card .article button.x:hover{background:var(--fx-blue)}
html.vpf-card .article button.x:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
@media(max-width:1000px){
  html.vpf-card .article button.x{width:40px;height:40px;right:max(8px,calc(5vw - 20px))}
  html.vpf-card .article button.x::before,html.vpf-card .article button.x::after{width:16px}
}
/* The hover band, as Frontier's cards draw theirs (agent-score.html .hband, with
   the long-name size of large-transaction-models.html .pn-l): a Visa-blue bar
   along the card's foot with the name, one line and the cue. Only the resting
   card shows it. The host's injected CSS reveals it on vf-hover with its own
   opacity and slide, so neither is set here. The wrap's transform makes
   position:fixed sit on the card, not the window (Kyle, 2 Nov). */
html.vpf-cardrest .article .hband{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:0 5vw;background:var(--fx-blue);color:#eef1ff;cursor:pointer}
html.vpf-cardrest .article .hband .in{display:grid;grid-template-columns:auto 1fr auto;gap:60px;align-items:center;padding:30px 0}
html.vpf-cardrest .article .hband .pn{max-width:11ch;font:700 clamp(26px,2.5vw,38px)/1 var(--display);letter-spacing:-.02em;color:#fff}
html.vpf-cardrest .article .hband .a{max-width:56ch;font:400 20.7px/1.45 var(--display);color:#c7edff}
html.vpf-cardrest .article .hband .cue{font:700 max(14.113px,1.3075vw)/1 var(--mono);letter-spacing:.1em;white-space:nowrap;color:#fff;text-decoration:underline;text-underline-offset:4px}
@media(max-width:767px){
  html.vpf-cardrest .article .hband .in{grid-template-columns:1fr;gap:9px;padding:14px 0}
  html.vpf-cardrest .article .hband .pn{max-width:none;font-size:clamp(20px,5.6vw,28px);line-height:1.06}
  html.vpf-cardrest .article .hband .a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none;font-size:13px}
  html.vpf-cardrest .article .hband .cue{font-size:13.5px}
}
/* The tile's button (Kyle, 4 Nov: "smaller than equivalent CTAs on the other tiles"). Frontier's cards size theirs
   by one rule (agent-score.html 5764-5772, Mike's 188gd): 1.475% of the width above 1024px and 2.5813% at 800px and
   below, with their floors, at rest and while closing (neither class). Between those bands theirs comes to 15-16px,
   as ours is. Open, it is the page's 16px, and the size eases with the morph (--vcl-fk-tspec, as their #h0 .rlink). */
@media(min-width:1025px){html.vpf-cardrest .article #h0 .cta-row .pill,html.vpf-card:not(.vpf-sheet):not(.vpf-cardrest) .article #h0 .cta-row .pill{font-size:max(12.9px,1.475vw)}}
@media(max-width:800px){html.vpf-cardrest .article #h0 .cta-row .pill,html.vpf-card:not(.vpf-sheet):not(.vpf-cardrest) .article #h0 .cta-row .pill{font-size:max(15.91px,2.5813vw)}}
html.vpf-morph .article #h0 .cta-row .pill{transition:font-size var(--vcl-fk-tspec,0ms),padding var(--vcl-fk-tspec,0ms),background .2s}
/* The host clips the open sheet with overflow:hidden (index.html 3038). That
   makes the wrap a scroll container, so position:sticky pins to the wrap,
   which never scrolls, and the topnav and the story stage scroll away.
   overflow:clip draws the same rounded edge without a scroll container.
   Three ids outrank the host's two. */
html.vpf-settled #vcl-cardwrap#vcl-cardwrap#vcl-cardwrap{overflow:clip!important}

@media(min-width:768px){
  /* Landing on Episodes from the topnav, the question and the start button stay
     in a laptop window (1366×768, 1280×720); the art crops rather than push them
     below the fold (review, 19 Oct). The title and the lead over the tile take
     about 360px since "Can you beat the AI?". The thumb keeps the card's full
     width, so the start button stays on the art. */
  .gt-tile--play .gt-thumb{width:100%;max-height:max(360px,calc(100svh - 360px))}
}
@media(max-width:1365px){
  /* Narrower art: the two buttons stack at its right, so the question keeps its width. */
  .article .gt-tile--play>.gt-watch{margin:0 28px calc(28px + 56px + 10px) 0}
  .gt-title{right:calc(28px + var(--gt-watch-w) + 28px)}
}
@media(max-width:1000px){
  .gt-tile--play .gt-thumb{aspect-ratio:16/9}
  :root{--gt-start-w:172px;--gt-watch-w:232px}
  .gt-start{min-height:50px;padding:0 22px 0 26px;font-size:17px}
  .gt-watch{min-height:50px;padding:0 20px;font-size:15px}
  .article .gt-tile--play>.gt-watch{margin-bottom:calc(28px + 50px + 10px)}
}
@media(max-width:767px){
  /* Phones keep the mosaic (Kyle, 19 Oct); the spotlight rests on the person at the laptop, a little wider. */
  :root{--lens-image-x:.2;--lens-idle-x:.2;--lens-idle-y:.62;--lens-radius:.34}
  /* Intent is the study's focus, so its line stays on phones (designer's notes, 19 Oct). */
  .article #h0 .sub{margin-top:16px;font-size:15px}
  .article #h0 .hero-orb{width:84px}
  .article #h0 .hero-eyebrow{font-size:11px;letter-spacing:1.8px}
  .article #h0 .lab{font-size:10px;letter-spacing:1.6px}
  .article #h0 .p-left,.article #h0 .p-right{display:none}
  /* The veil reaches down to the hero line, which sits on lit shelves on phones. */
  .article .hero::after{top:54%;width:170%;height:84%;background:radial-gradient(closest-side,rgba(0,0,0,.64),rgba(0,0,0,.44) 66%,transparent 100%)}
  /* Inside the Frontier host the card face has a fixed height, and the buttons reach its foot. */
  html.vpf-card .article #h0 .p-bottom{display:none}
  .article .topnav{padding:12px}
  .article .topnav a{font-size:12px;padding:8px 10px}
  /* Phones: the start button leaves the art for a full-width bar under it. */
  .article .gt-row,.article .gt-tile--play{display:block}
  .gt-tile--play .gt-thumb{aspect-ratio:4/3}
  .gt-tile--play .gt-shade{background:linear-gradient(0deg,rgba(6,17,31,.94),rgba(6,17,31,.6) 42%,transparent 72%),linear-gradient(180deg,rgba(6,17,31,.5),transparent 24%)}
  .gt-title{left:16px;right:16px;bottom:16px;gap:6px}
  .gt-title small{font-size:11px}
  .gt-title b{font-size:26px}
  .gt-start{position:static;display:flex;width:100%;margin-top:12px}
  /* Phones: the second button follows the start bar, full width, in a quieter fill. */
  .article .gt-tile--play>.gt-watch{display:flex;width:100%;min-width:0;margin:10px 0 0;background:#2b2b2b;-webkit-backdrop-filter:none;backdrop-filter:none}
  .article .gt-tile--next{margin-top:20px}
}
@media(max-width:479px){
}
@media(max-width:640px){
  :root{--fx-pad:64px;--fx-band:40px;--fx-aud:17px;--fx-kf:16px;--fx-body:16px}
  .article .hero{min-height:max(520px,78svh);padding:88px 24px 80px}
  .article .opener-in{padding:36px 24px 40px}
}