/**
 * The product banner — the opening of every product page an investor can use
 * before signing in: VestFolio, VestCall, VestFire and Vestmind Lens, and of
 * Vestmind Research, which the API renders and which loads this sheet too.
 *
 * It restates the landing page's opening frame without its photograph, so
 * arriving on a product from the home page feels like the same place: a sky
 * wash that deepens to the right, one wide amber band across the middle, a
 * white outlined frame standing in the band, a product view inside the frame
 * and white cards floating off its edge. The copy sits on the left in the
 * landing's ink, under the same tinted pill.
 *
 * The banner runs edge to edge and slides up under the sticky primary menu, as
 * the landing artwork does, so the menu's glass reads against the sky rather
 * than against a strip of white.
 *
 * Markup:
 *
 *   <section class="pb-banner">
 *     <div class="pb-banner__copy">
 *       <div class="pb-kicker"><svg>…</svg>VestFolio</div>
 *       <h1>…</h1>
 *       <p class="pb-lede">…</p>
 *       <div class="pb-actions">…</div>
 *     </div>
 *     <div class="pb-banner__visual" aria-hidden="true">
 *       <span class="pb-frame"></span>
 *       <div class="pb-phone">…</div>
 *       <div class="pb-float pb-float--stat">…</div>
 *       <div class="pb-float pb-float--note">…</div>
 *     </div>
 *   </section>
 *
 * Everything inside the visual is illustration. It never carries a figure the
 * page would otherwise compute for the investor, and where it shows a number it
 * says so.
 */

:root {
  --pb-ink: #080b1a;
  --pb-text: #344260;
  --pb-blue: #0758e8;
  --pb-blue-deep: #0547c2;
  --pb-band: #e9a23b;
  --pb-pill: rgba(255, 255, 255, .82);
  /* One flat sky. The banner paints in flat colour only: no washes, glows or
     fades anywhere in it. */
  --pb-sky: #a9dcf6;
  /* Accent text is amber, never blue: headline emphasis in the amber the
     landing's own headline uses, and the small pill text in the deeper gold
     of the logo's wordmark, which holds up better at that size. */
  --pb-amber-text: #e0a13a;
  --pb-amber-small: #c58c35;
  --pb-glass: rgba(255, 255, 255, .82);
  --pb-glass-line: rgba(215, 222, 233, .9);
  --pb-card-shadow: 0 22px 48px rgba(7, 42, 94, .16);
  /* The public menu is sticky and 88px tall with its gutter; the banner starts
     underneath it. */
  --pb-menu: 88px;
}

/* The banner is full-bleed from inside a centred column, which takes 100vw —
   a width that includes a classic scrollbar. Clipping the overflow on the body
   keeps that from becoming a sideways scroll without making the body a scroll
   container, so the sticky menu keeps working. */
body:has(.pb-banner) { overflow-x: clip; }

.pb-banner {
  background: var(--pb-sky);
  box-sizing: border-box;
  color: var(--pb-ink);
  display: grid;
  gap: 0 clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  isolation: isolate;
  margin: calc(var(--pb-menu) * -1) calc(50% - 50vw) 0;
  min-height: clamp(660px, 92vh, 820px);
  /* Sideways only: the band and the cards are clipped at the viewport's edges,
     while anything the copy opens downward — VestCall's search suggestions —
     may still hang over the content below. */
  overflow-x: clip;
  padding: var(--pb-menu) max(24px, var(--public-hero-copy-left, 7vw)) 0;
  position: relative;
  text-align: left;
}

/*
 * The backdrop. The landing artwork's amber band is one motif of five rather
 * than the banner's only one: on every page it would stop being a signature
 * and become wallpaper. Each product draws its own from the same four things
 * — the sky, one amber gesture, white hairlines and the white frame — and the
 * gesture is the product's own idea:
 *
 *   band     the landing's strip, for anything without a motif of its own
 *   orbit    VestFolio — an allocation ring, the portfolio drawn as a gauge
 *   signal   VestCall — a price line climbing a chart grid, the Street's
 *            consensus dotted beside it
 *   horizon  VestFire — a sun rising behind an arched window
 *   focus    Lens — a magnifier whose glass enlarges the dot field beneath it
 *   folio    Research — the landing's band across a broadsheet: column rules
 *            under a double masthead rule, the frame as the top sheet of a
 *            stack of pages, and an amber bookmark ribbon hanging from its edge
 *
 * A page chooses with `data-motif` on the banner. Both layers paint inside
 * the banner's own box, so nothing they draw can run into the page below.
 * Everything is flat colour with hard edges: where a motif must stay clear of
 * the copy it stops at a line or a circle, never by fading out.
 */
.pb-banner::before,
.pb-banner::after {
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

/* band — the landing's strip. */
.pb-banner:not([data-motif])::before,
.pb-banner[data-motif="band"]::before {
  background: linear-gradient(180deg, transparent 47%, var(--pb-band) 47%, var(--pb-band) 74%, transparent 74%);
}

/* folio — the right half laid out as a broadsheet: hairline column rules
   under a double masthead rule. The frame becomes the top sheet of a small
   stack, with a second sheet offset behind it, and a bookmark ribbon with a
   swallowtail end hangs from the frame's top edge in the gutter beside the
   phone. Across it all runs the landing's amber band. A page may move the
   band with --pb-band-top and --pb-band-bottom, so that it runs behind the
   copy's lede and search rather than behind the headline's amber emphasis,
   and should end the ribbon above it, where amber would meet amber. */
.pb-banner[data-motif="folio"]::before {
  background:
    linear-gradient(180deg,
      transparent calc(var(--pb-menu) + 14px), rgba(255, 255, 255, .75) calc(var(--pb-menu) + 14px),
      rgba(255, 255, 255, .75) calc(var(--pb-menu) + 15px), transparent calc(var(--pb-menu) + 15px),
      transparent calc(var(--pb-menu) + 19px), rgba(255, 255, 255, .75) calc(var(--pb-menu) + 19px),
      rgba(255, 255, 255, .75) calc(var(--pb-menu) + 20px), transparent calc(var(--pb-menu) + 20px)),
    repeating-linear-gradient(90deg, transparent 0 147px, rgba(255, 255, 255, .34) 147px 148px);
  left: 46%;
}
/* The band, under the broadsheet's rules. */
.pb-banner[data-motif="folio"]::after {
  background: linear-gradient(180deg,
    transparent var(--pb-band-top, 47%), var(--pb-band) var(--pb-band-top, 47%),
    var(--pb-band) var(--pb-band-bottom, 74%), transparent var(--pb-band-bottom, 74%));
  z-index: -2;
}
/* The sheet beneath: the frame's outline again, set up and to the right. */
.pb-banner[data-motif="folio"] .pb-frame::before {
  border: 2px solid rgba(255, 255, 255, .5);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  bottom: 0;
  content: '';
  left: 14px;
  position: absolute;
  right: -20px;
  top: -20px;
}
/* The ribbon, stitched along both edges. */
.pb-banner[data-motif="folio"] .pb-frame::after {
  background:
    linear-gradient(90deg,
      transparent 5px, rgba(255, 255, 255, .6) 5px 6px, transparent 6px calc(100% - 6px),
      rgba(255, 255, 255, .6) calc(100% - 6px) calc(100% - 5px), transparent calc(100% - 5px)),
    var(--pb-band);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 22px), 0 100%);
  content: '';
  height: clamp(220px, 46%, 340px);
  left: 14px;
  position: absolute;
  top: -3px;
  width: 34px;
}

/* orbit — a ring cut into the allocation gauge's segments around one
   off-canvas centre, with concentric hairlines inside it. */
.pb-banner[data-motif="orbit"] { --pb-cx: 74%; --pb-cy: 118%; --pb-r: 620px; --pb-w: 54px; }
.pb-banner[data-motif="orbit"]::before {
  background: repeating-radial-gradient(circle at var(--pb-cx) var(--pb-cy),
    transparent 0 79px, rgba(255, 255, 255, .4) 79px 80px);
  -webkit-mask-image: radial-gradient(circle at var(--pb-cx) var(--pb-cy), #000 calc(var(--pb-r) - var(--pb-w)), transparent calc(var(--pb-r) - var(--pb-w)));
  mask-image: radial-gradient(circle at var(--pb-cx) var(--pb-cy), #000 calc(var(--pb-r) - var(--pb-w)), transparent calc(var(--pb-r) - var(--pb-w)));
}
.pb-banner[data-motif="orbit"]::after {
  background: conic-gradient(from 270deg at var(--pb-cx) var(--pb-cy),
    var(--pb-band) 0 27%, transparent 27% 28%,
    rgba(255, 255, 255, .92) 28% 34%, transparent 34% 35%,
    var(--pb-blue) 35% 41.5%, transparent 41.5% 42.5%,
    #14968a 42.5% 47%, transparent 47%);
  -webkit-mask-image: radial-gradient(circle at var(--pb-cx) var(--pb-cy),
    transparent calc(var(--pb-r) - var(--pb-w)), #000 calc(var(--pb-r) - var(--pb-w) + 1px),
    #000 var(--pb-r), transparent calc(var(--pb-r) + 1px));
  mask-image: radial-gradient(circle at var(--pb-cx) var(--pb-cy),
    transparent calc(var(--pb-r) - var(--pb-w)), #000 calc(var(--pb-r) - var(--pb-w) + 1px),
    #000 var(--pb-r), transparent calc(var(--pb-r) + 1px));
}

/* signal — a chart grid beside the copy, and over it the price line with the
   latest print ringed at its end. The line is drawn in
   a stretched box with a stroke that does not stretch; the glow shares the
   box, so the two stay together at any size. */
.pb-banner[data-motif="signal"]::before {
  left: 46%;
  background:
    repeating-linear-gradient(180deg, transparent 0 63px, rgba(255, 255, 255, .3) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 127px, rgba(255, 255, 255, .2) 127px 128px);
}
.pb-banner[data-motif="signal"]::after {
  background:
    radial-gradient(circle at 99.4% 19%, #fff 0 7px, var(--pb-band) 7px 12px, rgba(255, 255, 255, .5) 12px 24px, transparent 24px),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E %3Cpath d=%22M46,72 C64,64 80,50 100,30%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-dasharray=%222 9%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E %3Cpath d=%22M46.0,86 L49.78,80 L52.48,84 L56.26,72 L59.5,76 L63.28,64 L66.52,68 L70.3,55 L73.0,59 L76.78,47 L79.48,51 L83.26,40 L85.96,43 L89.2,33 L91.9,36 L95.14,26 L100.0,19%22 fill=%22none%22 stroke=%22%23e9a23b%22 stroke-width=%2210%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E %3C/svg%3E");
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* horizon — a sun rising at the foot of the banner, ringed in hairlines; the
   frame becomes an arched window onto it. */
.pb-banner[data-motif="horizon"] { --pb-cx: 63%; --pb-sun: 230px; }
.pb-banner[data-motif="horizon"]::before {
  background: radial-gradient(circle at var(--pb-cx) 100%, var(--pb-band) 0 var(--pb-sun), transparent var(--pb-sun));
}
.pb-banner[data-motif="horizon"]::after {
  /* Four rings, each a hairline, widening as they go out. */
  --pb-ring: rgba(255, 255, 255, .6);
  background: radial-gradient(circle at var(--pb-cx) 100%,
    transparent calc(var(--pb-sun) + 34px), var(--pb-ring) calc(var(--pb-sun) + 34px) calc(var(--pb-sun) + 36px),
    transparent calc(var(--pb-sun) + 36px) calc(var(--pb-sun) + 84px), var(--pb-ring) calc(var(--pb-sun) + 84px) calc(var(--pb-sun) + 86px),
    transparent calc(var(--pb-sun) + 86px) calc(var(--pb-sun) + 150px), var(--pb-ring) calc(var(--pb-sun) + 150px) calc(var(--pb-sun) + 152px),
    transparent calc(var(--pb-sun) + 152px) calc(var(--pb-sun) + 232px), var(--pb-ring) calc(var(--pb-sun) + 232px) calc(var(--pb-sun) + 234px),
    transparent calc(var(--pb-sun) + 234px));
}
.pb-banner[data-motif="horizon"] .pb-frame { border-radius: 999px 999px 0 0; }

/* focus — a field of white dots beside the copy, and the magnifier over it. */
.pb-banner[data-motif="focus"]::before {
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.8px, transparent 1.8px) 0 0 / 22px 22px;
  left: 46%;
}
.pb-banner[data-motif="focus"]::after {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22%3E %3Cdefs%3E %3Cpattern id=%22d%22 width=%2244%22 height=%2244%22 patternUnits=%22userSpaceOnUse%22%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%223.4%22 fill=%22%23ffffff%22 fill-opacity=%22.85%22/%3E%3C/pattern%3E %3CclipPath id=%22g%22%3E%3Ccircle cx=%22250%22 cy=%22250%22 r=%22205%22/%3E%3C/clipPath%3E %3C/defs%3E %3Ccircle cx=%22250%22 cy=%22250%22 r=%22205%22 fill=%22%23ffffff%22 fill-opacity=%22.16%22/%3E %3Crect width=%22600%22 height=%22600%22 fill=%22url(%23d)%22 clip-path=%22url(%23g)%22/%3E %3Cpath d=%22M398 398 L560 560%22 stroke=%22%23e9a23b%22 stroke-width=%2258%22 stroke-linecap=%22round%22/%3E %3Ccircle cx=%22250%22 cy=%22250%22 r=%22205%22 fill=%22none%22 stroke=%22%23e9a23b%22 stroke-width=%2234%22/%3E %3Cpath d=%22M120 170 A150 150 0 0 1 200 98%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.8%22 stroke-width=%2210%22 stroke-linecap=%22round%22/%3E %3C/svg%3E") right -40px top 52% / clamp(420px, 40vw, 600px) no-repeat;
}

/* ── The copy ─────────────────────────────────────────────────────────── */

.pb-banner__copy {
  align-self: center;
  max-width: 600px;
  padding: clamp(36px, 6vh, 64px) 0 clamp(48px, 8vh, 80px);
  position: relative;
  z-index: 2;
}

.pb-kicker {
  align-items: center;
  background: var(--pb-pill);
  border-radius: 12px;
  color: var(--pb-amber-small);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 15px;
  gap: 10px;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 22px;
  padding: 8px 12px;
  width: fit-content;
}
.pb-kicker > svg {
  fill: none; flex: none; height: 20px; stroke: currentColor; stroke-linecap: round;
  stroke-linejoin: round; stroke-width: 2; width: 20px;
}
/* The product's own wordmark inside the pill: its light half and its bold half
   both take the pill's blue. */
.pb-kicker :where(div, span) { color: inherit; font: inherit; letter-spacing: inherit; }
.pb-kicker b { font-weight: 800; }
.pb-kicker .pb-badge {
  background: rgba(255, 255, 255, .8);
  border-radius: 6px;
  color: var(--pb-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 4px 7px;
  text-transform: uppercase;
}

.pb-banner h1 {
  color: var(--pb-ink);
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -.045em;
  line-height: 1;
  margin: 0 0 20px;
}
/* The landing headline is ink, its emphasis amber — the amber the landing's
   own headline marks its phrase in. */
.pb-banner h1 mark { background: none; color: var(--pb-amber-text); padding: 0; }

.pb-lede {
  color: var(--pb-text);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 470px;
}

.pb-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.pb-cta,
.pb-ghost {
  align-items: center;
  border-radius: 14px;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 15px;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.pb-cta {
  background: var(--pb-blue);
  box-shadow: 0 10px 24px rgba(7, 88, 238, .28);
  color: #fff;
}
.pb-cta:hover { background: var(--pb-blue-deep); box-shadow: 0 14px 30px rgba(7, 88, 238, .36); transform: translateY(-1px); }
.pb-ghost {
  background: var(--pb-glass);
  border: 1px solid var(--pb-glass-line);
  color: var(--pb-ink);
}
.pb-ghost:hover { background: #fff; border-color: #b9c8dc; }
.pb-cta:focus-visible,
.pb-ghost:focus-visible { outline: 3px solid rgba(7, 42, 94, .35); outline-offset: 3px; }

/* A quiet line of reassurance under the actions. */
.pb-fineprint { color: var(--pb-text); font-size: 12.5px; margin: 12px 0 0 2px; }

/* ── The visual ───────────────────────────────────────────────────────── */

.pb-banner__visual {
  margin: 0;
  min-height: 560px;
  /* The phone may run out through the foot of the banner, as on the landing
     artwork, but never over what follows it. */
  overflow-y: clip;
  position: relative;
  z-index: 1;
}

/* The white frame, open at the foot: it has no lower edge and meets the bottom
   of the banner, which is what makes it read as a window rather than a card. */
.pb-frame {
  border: 3px solid rgba(255, 255, 255, .95);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  bottom: 0;
  left: 4%;
  pointer-events: none;
  position: absolute;
  right: 30%;
  top: clamp(28px, 6vh, 56px);
}

/* The phone. A bezel, a white screen, a slight turn — the landing's device. */
.pb-phone {
  background: #fff;
  border: 9px solid #161b27;
  border-radius: 42px;
  box-shadow:
    0 40px 70px rgba(7, 42, 94, .3),
    0 0 0 1px rgba(255, 255, 255, .5),
    inset 0 0 0 1px #e3e8ef;
  box-sizing: border-box;
  color: var(--pb-ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  left: calc(4% + (66% - 280px) / 2);
  padding: 26px 16px 18px;
  position: absolute;
  top: clamp(64px, 11vh, 100px);
  transform: rotate(-4deg);
  width: 280px;
}

.pb-phone__menu {
  align-self: flex-end;
  border-bottom: 2px solid var(--pb-ink);
  border-top: 2px solid var(--pb-ink);
  height: 10px;
  position: relative;
  width: 16px;
}
.pb-phone__menu::after {
  background: var(--pb-ink); content: ''; height: 2px; left: 0; position: absolute; right: 0; top: 2px;
}

.pb-phone__title {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: -6px 0 0;
}
.pb-phone__sub { color: #5c6e88; font-size: 10.5px; margin: -6px 0 0; }

.pb-phone__tiles { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.pb-phone__tiles > span,
.pb-phone__panel {
  background: #fff;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(7, 42, 94, .06);
}
.pb-phone__tiles > span { display: grid; gap: 2px; justify-items: center; padding: 9px 6px; text-align: center; }
.pb-phone__tiles small { color: #344260; font-size: 8.5px; line-height: 1.2; }
.pb-phone__tiles b {
  align-items: center; color: var(--pb-ink); display: flex; font-family: var(--font-display);
  font-size: 22px; font-weight: 600; gap: 4px; letter-spacing: -.02em; line-height: 1.1;
}
.pb-phone__tiles b i { color: var(--pb-amber-text); font-size: 14px; font-style: normal; }
.pb-phone__tiles em { color: #8494aa; font-size: 8px; font-style: normal; }

.pb-phone__panel { display: grid; gap: 8px; padding: 11px 12px 12px; }
.pb-phone__panel > small { color: var(--pb-ink); font-size: 11px; font-weight: 700; }

/* The half-ring gauge. Each arc is drawn on a path of length 100, so a segment
   is its share and its start. */
.pb-gauge { display: block; margin: 0 auto; overflow: visible; width: 150px; }
.pb-gauge path { fill: none; stroke-linecap: butt; stroke-width: 16; }
.pb-gauge-wrap { position: relative; }
.pb-gauge-label {
  bottom: 0; color: var(--pb-ink); font-family: var(--font-display); font-size: 12px; left: 0;
  line-height: 1.2; position: absolute; right: 0; text-align: center;
}

.pb-legend { display: grid; gap: 5px; list-style: none; margin: 2px 0 0; padding: 0; }
.pb-legend li { align-items: center; display: flex; font-size: 10.5px; gap: 7px; }
.pb-legend li::before { background: var(--dot, #1572e8); border-radius: 50%; content: ''; height: 8px; width: 8px; }
.pb-legend li b { font-weight: 600; margin-left: auto; }

/* Four valuation zones on one rail, with today's price pinned to them. */
.pb-zones { display: grid; gap: 3px; grid-template-columns: 1fr 1.2fr 1.2fr 1fr; margin-top: 16px; position: relative; }
.pb-zones i { border-radius: 3px; display: block; height: 10px; }
.pb-zones i:nth-child(1) { background: #14968a; }
.pb-zones i:nth-child(2) { background: #7cc6a8; }
.pb-zones i:nth-child(3) { background: #f5b525; }
.pb-zones i:nth-child(4) { background: #e2734a; }
.pb-zones b {
  background: var(--pb-ink); border-radius: 6px; color: #fff; font-size: 8.5px; font-weight: 700; left: 42%;
  padding: 2px 6px; position: absolute; top: -16px; transform: translateX(-50%);
}
.pb-zones b::after {
  background: var(--pb-ink); content: ''; height: 10px; left: 50%; position: absolute; top: 100%; width: 2px;
}
.pb-zones__legend { color: #5c6e88; display: flex; font-size: 8.5px; justify-content: space-between; }
/* The legend follows the gauge's arcs, in order. */
.pb-legend li:nth-child(2) { --dot: #4aa3f0; }
.pb-legend li:nth-child(3) { --dot: #f5b525; }
.pb-legend li:nth-child(4) { --dot: #14968a; }

/* Bars for a scored list: one row per dimension, length only. */
.pb-bars { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pb-bars li { align-items: center; display: grid; font-size: 9.5px; gap: 8px; grid-template-columns: 62px 1fr; }
.pb-bars li i {
  background: linear-gradient(90deg, var(--pb-blue) var(--v, 60%), #e8eef6 var(--v, 60%));
  border-radius: 4px; display: block; height: 7px;
}

/* A numbered checklist inside the phone. */
.pb-checklist { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.pb-checklist li { align-items: center; display: flex; font-size: 10.5px; gap: 8px; }
.pb-checklist li span {
  align-items: center; background: #eef3f9; border-radius: 50%; color: #5c6e88; display: inline-flex;
  flex: none; font-size: 9px; font-weight: 700; height: 18px; justify-content: center; width: 18px;
}
.pb-checklist li.is-done span { background: var(--pb-blue); color: #fff; }

.pb-phone__foot {
  align-items: center; border-top: 1px solid #edf1f6; display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr; padding-top: 10px;
}
.pb-phone__foot span { align-items: center; color: var(--pb-ink); display: flex; font-size: 9px; gap: 6px; line-height: 1.2; }
.pb-phone__foot svg {
  color: var(--pb-blue); fill: none; flex: none; height: 16px; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 16px;
}

/* The floating cards, off the frame's right edge. */
.pb-float {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--pb-card-shadow);
  box-sizing: border-box;
  color: var(--pb-ink);
  position: absolute;
}
.pb-float--stat {
  align-items: center;
  display: grid;
  gap: 2px 16px;
  grid-template-columns: auto 1fr;
  padding: 18px 22px;
  right: 0;
  top: 25%;
  width: clamp(190px, 16vw, 232px);
}
.pb-float--stat .pb-float__icon { grid-row: span 2; }
.pb-float--stat small { color: #344260; font-size: 12px; }
.pb-float--stat b {
  font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1;
}

.pb-float--note {
  display: grid;
  gap: 4px 14px;
  grid-template-columns: auto 1fr;
  padding: 18px 20px;
  right: -6px;
  top: 52%;
  width: clamp(220px, 18vw, 260px);
}
.pb-float--note .pb-float__icon { grid-row: span 3; }
.pb-float--note p {
  color: var(--pb-ink); font-family: var(--font-display); font-size: 14px; font-style: normal;
  line-height: 1.4; margin: 0;
}
.pb-float--note svg:not(.pb-float__glyph) {
  color: var(--pb-band); display: block; height: 10px; margin: 2px 0 0; width: 120px;
}
.pb-float--note svg:not(.pb-float__glyph) path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 3; }

.pb-float__icon {
  align-items: center;
  background: var(--pb-blue);
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(7, 88, 238, .3);
  color: #fff;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.pb-float__icon.is-soft { background: #d9ecfd; box-shadow: none; color: var(--pb-blue); }
.pb-float__icon svg {
  fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  stroke-width: 2.2; width: 20px;
}

/* ── Smaller screens ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pb-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pb-frame { right: 22%; }
  .pb-phone { left: calc(4% + (74% - 260px) / 2); width: 260px; }
}

@media (max-width: 900px) {
  :root { --pb-menu: 72px; }
  .pb-banner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: var(--pb-menu) 20px 0;
  }
  /* The motifs move down to sit behind the frame, now under the copy. */
  .pb-banner:not([data-motif])::before,
  .pb-banner[data-motif="band"]::before,
  .pb-banner[data-motif="folio"]::after {
    background: linear-gradient(0deg, transparent 150px, var(--pb-band) 150px, var(--pb-band) 320px, transparent 320px);
  }
  .pb-banner[data-motif="orbit"] { --pb-cx: 50%; --pb-cy: 104%; --pb-r: 380px; --pb-w: 40px; }
  /* The grid and the dot field start below the copy instead of beside it. */
  .pb-banner[data-motif="signal"]::before,
  .pb-banner[data-motif="focus"]::before { left: 0; top: 54%; }
  /* The broadsheet keeps its columns behind the frame and drops the
     masthead, which has no top edge to hang from once the copy is above. */
  .pb-banner[data-motif="folio"]::before {
    background: repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, .34) 95px 96px);
    left: 0;
    top: 54%;
  }
  .pb-banner[data-motif="folio"] .pb-frame::after { height: 190px; left: 12px; width: 28px; }
  .pb-banner[data-motif="signal"]::after { background-size: 100% 46%; }
  .pb-banner[data-motif="horizon"] { --pb-cx: 50%; --pb-sun: 150px; }
  .pb-banner[data-motif="focus"]::after { background-position: right -60px bottom 40px; background-size: 360px; }
  .pb-banner__copy { max-width: 620px; padding: 40px 0 8px; }
  .pb-banner h1 { font-size: clamp(36px, 9vw, 52px); }
  .pb-banner__visual { margin: 0 auto; max-width: 520px; min-height: 500px; width: 100%; }
  .pb-frame { left: 6%; right: 6%; top: 24px; }
  .pb-phone { left: calc(50% - 125px); top: 56px; width: 250px; }
  .pb-float--stat { right: 0; top: 34%; width: 176px; }
  .pb-float--note { left: 0; padding: 14px 16px; right: auto; top: 64%; width: 250px; }
  .pb-float--note .pb-float__icon { height: 34px; width: 34px; }
}

@media (max-width: 480px) {
  .pb-kicker { font-size: 14px; }
  .pb-lede { font-size: 14.5px; }
  .pb-actions > * { flex: 1 1 auto; justify-content: center; }
  .pb-banner__visual { min-height: 470px; }
  .pb-phone { left: calc(50% - 115px); width: 230px; }
  .pb-float { transform: scale(.9); }
  .pb-float--stat { right: -10px; transform-origin: right center; }
  .pb-float--note { left: -10px; transform-origin: left center; }
}