/* ==========================================================================
   Version B: "cut-out" variant (body.variant-cutout). Loaded only by
   `python build.py --variant cutout`, after styles.css and motion.css.
   Hand-drawn objects float on cream, with no frames. Ink bands are the meter
   and the footer only. Gold is used as fills and markers, never as text on
   cream. No side stripes, no eyebrows.
   ========================================================================== */

:root:has(body.variant-cutout) { color-scheme: light; }
.variant-cutout { background: var(--cream); }

/* soft lift for every floating object: offset + blur, never a halo */
.variant-cutout {
  --cut-drop: drop-shadow(0 14px 14px rgba(20, 58, 30, 0.16));
  --cut-drop-dark: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.38));
}

/* ------------------------------------------------------------ topbar: cream, ink type */
.variant-cutout .pfw-topbar::before { display: none; }
.variant-cutout .pfw-topbar.is-scrolled { background: rgba(255, 252, 240, 0.95); border-bottom-color: var(--hairline-cream); }
@supports (backdrop-filter: blur(8px)) {
  .variant-cutout .pfw-topbar.is-scrolled { background: rgba(255, 252, 240, 0.86); }
}
.variant-cutout .pfw-topbar__brand { color: var(--ink); }
.variant-cutout .pfw-topbar__brand span { color: var(--teal-mid); }
.variant-cutout .pfw-topbar__link { color: var(--text-on-cream); }
.variant-cutout .pfw-topbar__link:hover { color: var(--ink); background: rgba(20, 58, 30, 0.06); }
.variant-cutout .pfw-topbar :focus-visible { outline-color: var(--teal); }

/* ------------------------------------------------------------ hero: headline left, one scene right */
.variant-cutout .pfw-hero {
  overflow: visible; z-index: 2;
  min-height: min(100dvh, 860px);
  padding: calc(var(--topbar-h) + 40px) 0 64px;
}
.variant-cutout .pfw-hero__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center; column-gap: clamp(16px, 3vw, 40px);
}
.variant-cutout .pfw-h1 { color: var(--ink); }
.variant-cutout .pfw-h1 span {
  display: table; color: var(--ink);
  background: linear-gradient(transparent 60%, var(--gold) 60%, var(--gold) 90%, transparent 90%);
  padding: 0 0.06em; margin-left: -0.06em;
}
.variant-cutout .pfw-hero__sub { color: var(--text-on-cream); }
.variant-cutout .pfw-hero .pfw-btn--ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.variant-cutout .pfw-hero .pfw-btn--ghost:hover { background: rgba(20, 58, 30, 0.06); }

/* One composed scene (MarkUp r1 #1, round 3): wide screens lay it across the whole hero,
   right-aligned, its calm left ~40% under the headline; phones pull the 4:5 crop up under
   the copy (its top is calm). The box is fixed by the hero or the width/height attributes,
   so nothing shifts when it lands. Entrance: a gentle fade and settle, no motion if reduced. */
.variant-cutout .pfw-hero--scene { isolation: isolate; }
.variant-cutout .pfw-hero--scene .pfw-hero__inner { position: relative; z-index: 1; }
.pfw-scene {
  position: absolute; z-index: 0; pointer-events: none;
  top: calc(var(--topbar-h) + 8px); bottom: 12px; left: 0; right: 0;
}
.pfw-scene__img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 50%; }
@media (min-width: 1500px) {
  /* very wide: keep the scene inside a sensible stage instead of the far right edge */
  .pfw-scene { left: calc(50% - 760px); right: calc(50% - 760px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .pfw-scene__img { animation: pfw-scene-in 1100ms var(--ease-out) 120ms both; }
}
@keyframes pfw-scene-in { from { opacity: 0; transform: scale(0.97) translateY(12px); } }
@media (max-width: 767px) {
  .variant-cutout .pfw-hero--scene { display: flex; flex-direction: column; }
  .variant-cutout .pfw-hero--scene .pfw-hero__inner { order: 1; }
  .pfw-scene { position: relative; order: 2; top: auto; bottom: auto; width: 100%; margin: -34vw 0 -8px; }
  .pfw-scene__img { height: auto; aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------ ticker: paper, gold markers */
.variant-cutout .pfw-ticker { border-top: 1px solid var(--hairline-cream); border-bottom: 1px solid var(--hairline-cream); }
.variant-cutout .pfw-ticker__item { color: var(--text-on-cream); }
.variant-cutout .pfw-ticker__item b { color: var(--ink); }
.variant-cutout .pfw-ticker__item::after { background: var(--gold); box-shadow: 0 0 0 1.5px var(--ink); }

/* ------------------------------------------------------------ meter (ink): the money ship floats */
.variant-cutout .pfw-meter__art { max-width: 640px; transform: rotate(-2deg); }
.variant-cutout.js .pfw-meter__art.sr.vis, .js .variant-cutout .pfw-meter__art.sr.vis { transform: rotate(-2deg); }
.variant-cutout .pfw-meter__art img { border-radius: 0 !important; box-shadow: none !important; filter: var(--cut-drop-dark); }
.variant-cutout .pfw-sea { --ship-w: clamp(110px, 12vw, 170px); }
.variant-cutout .pfw-sea__note { left: 38%; bottom: 62%; width: 20%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); }

/* ------------------------------------------------------------ pillars: each object large beside its copy */
.variant-cutout .pfw-pillar__art img,
.variant-cutout .pfw-pillar--art-lead .pfw-pillar__art img {
  width: 100%; max-height: 440px; object-fit: contain; aspect-ratio: auto;
  border-radius: 0; box-shadow: none;
  transform: rotate(var(--tilt, -2deg)) !important;
  filter: var(--cut-drop);
}
.variant-cutout .pfw-pillar--flip { --tilt: 2deg; }
.variant-cutout .pfw-pillar__art--small,
.variant-cutout .pfw-pillar__art--quote { max-width: none; margin: 8px 0 0; z-index: auto; }

/* stat-lead: the figure is type on paper, not a dark card */
.variant-cutout .pfw-pillars .pfw-pillar__statlead {
  background: none; border: 0; box-shadow: none; transform: none; padding: 0;
}
.variant-cutout .pfw-pillar__bigstat { color: var(--ink); }
.variant-cutout .pfw-pillar__bigstat::after {
  content: ""; display: block; width: 72px; height: 8px; margin-top: 10px;
  background: var(--gold); border-radius: 4px 8px 4px 8px;
}
.variant-cutout .pfw-pillar__statlabel { color: var(--text-on-cream); }
.variant-cutout .pfw-pillars .pfw-pillar__statlead .pfw-ref { color: var(--muted-on-cream); }

@media (min-width: 1101px) {
  /* one composition for all six: copy on one side, the object big on the other */
  .variant-cutout .pfw-pillars .pfw-pillar,
  .variant-cutout .pfw-pillars .pfw-pillar--art-lead,
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead,
  .variant-cutout .pfw-pillars .pfw-pillar--stat-lead {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "head visual" "text visual";
    align-content: center; row-gap: 28px; min-height: 80vh;
  }
  .variant-cutout .pfw-pillars .pfw-pillar--flip,
  .variant-cutout .pfw-pillars .pfw-pillar--art-lead.pfw-pillar--flip,
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead.pfw-pillar--flip,
  .variant-cutout .pfw-pillars .pfw-pillar--stat-lead.pfw-pillar--flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "visual head" "visual text";
  }
  .variant-cutout .pfw-pillars .pfw-pillar__head { align-self: end; display: block; }
  .variant-cutout .pfw-pillars .pfw-pillar__numeral,
  .variant-cutout .pfw-pillars .pfw-pillar--art-lead .pfw-pillar__numeral,
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead .pfw-pillar__numeral {
    margin: 0 0 18px; color: transparent; text-shadow: none;
    -webkit-text-stroke: 2px rgba(26, 60, 60, 0.4);
  }
  .variant-cutout .pfw-pillars .pfw-pillar__visual,
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead .pfw-pillar__visual,
  .variant-cutout .pfw-pillars .pfw-pillar--stat-lead .pfw-pillar__visual {
    display: flex; flex-direction: column; gap: 28px; align-self: center; padding-top: 0;
  }
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead .pfw-pillar__text { display: block; }
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead .pfw-pillar__proofs { margin-top: var(--s-5); }
  .variant-cutout .pfw-pillars .pfw-pillar--quote-lead .pfw-pillar__art--quote { order: 0; }
  .variant-cutout .pfw-pillars .pfw-pillar--art-lead .pfw-pillar__text { padding-top: 0; }
  /* objects lean out past their column, towards the page edge */
  .variant-cutout .pfw-pillar:not(.pfw-pillar--flip) .pfw-pillar__art { margin-right: -40px; }
  .variant-cutout .pfw-pillar__art { margin-left: 0; }
}

/* ------------------------------------------------------------ value (pillar 7), now on cream */
.variant-cutout .pfw-value__art img {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: var(--cut-drop);
}
.variant-cutout .pfw-value__art { margin-bottom: -8px; transform: rotate(-3deg); }
.variant-cutout .pfw-value__stat { box-shadow: var(--shadow-cream); }
.variant-cutout .pfw-value__kicker { color: var(--muted-on-cream); opacity: 1; }
.variant-cutout .pfw-value__ghost { color: var(--teal); opacity: 0.06; }

/* ------------------------------------------------------------ reserve: the tank */
.variant-cutout .pfw-reserve__art img {
  aspect-ratio: auto; object-fit: contain; max-height: 340px; width: auto; margin: 0 auto;
  border-radius: 0 !important; box-shadow: none !important; filter: var(--cut-drop);
}
.variant-cutout .pfw-reserve__art { transform: rotate(2deg); }

/* ------------------------------------------------------------ flow vs stock: drawn drum and panel */
.variant-cutout .is-anim .pfw-flowstock__lane[data-lane="stock"] .pfw-flowstock__sprite {
  width: 88px; aspect-ratio: 790 / 651;
}
.variant-cutout .is-anim .pfw-flowstock__lane .pfw-drum { width: 36px; height: 60px; }
.variant-cutout .pfw-flowstock__lane img { filter: drop-shadow(0 4px 4px rgba(20, 58, 30, 0.18)); }
/* with no motion the lanes collapse, so the two objects stand still above their columns */
@media (prefers-reduced-motion: reduce) {
  .variant-cutout .pfw-flowstock__lane { height: auto; margin-bottom: 18px; }
  .variant-cutout .pfw-flowstock__sprite { position: static; opacity: 1; width: auto; height: 84px; }
}

/* ------------------------------------------------------------ timeline, now on paper */
.variant-cutout .pfw-timeline__rail::before {
  background: linear-gradient(90deg, var(--gold) 0 20%, rgba(26, 60, 60, 0.22) 20% 100%);
}
.variant-cutout .pfw-stop__node { background: var(--paper); border-color: var(--ink); }
.variant-cutout .pfw-stop--now .pfw-stop__node { background: var(--gold); border-color: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
.variant-cutout .pfw-stop__horizon { color: var(--muted-on-cream); }
.variant-cutout .pfw-stop--now .pfw-stop__horizon { color: var(--ink); }
.variant-cutout .pfw-stop__title { color: var(--ink); }
.variant-cutout .pfw-stop__summary { color: var(--text-on-cream); }

/* ------------------------------------------------------------ cta: the kiwi steps in front of the PDF */
.variant-cutout .pfw-cta__art {
  left: -14%; right: auto; bottom: -6%; width: 48%; z-index: 2; opacity: 1; rotate: -4deg;
}
.variant-cutout .pfw-cta__art img { filter: var(--cut-drop); }
.variant-cutout .pfw-pdfcard { box-shadow: var(--shadow-cream); }
.variant-cutout .pfw-pdfcard:hover { box-shadow: 0 20px 36px rgba(20, 58, 30, 0.18); }

/* ------------------------------------------------------------ phones */
@media (max-width: 1100px) {
  .variant-cutout .pfw-pillar__visual { max-width: 520px; }
}
@media (max-width: 900px) {
  .variant-cutout .pfw-timeline__rail::before { background: none; }
}
@media (max-width: 767px) {
  .variant-cutout .pfw-hero { min-height: 0; padding: calc(var(--topbar-h) + 28px) 0 40px; }
  .variant-cutout .pfw-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .variant-cutout .pfw-hero__ctas { flex-direction: column; align-items: stretch; }


  .variant-cutout .pfw-rail { background: rgba(255, 252, 240, 0.97); border-top-color: var(--hairline-cream); }
  .variant-cutout .pfw-rail__chip { color: var(--text-on-cream); border-color: rgba(26, 60, 60, 0.28); }
  .variant-cutout .pfw-rail__chip.is-here { background: var(--gold); color: var(--ink); border-color: var(--ink); }
  .variant-cutout .pfw-rail :focus-visible { outline-color: var(--teal); }

  .variant-cutout .pfw-timeline__rail::before {
    background: linear-gradient(180deg, var(--gold) 0 18%, rgba(26, 60, 60, 0.22) 18% 100%);
  }
  .variant-cutout .pfw-cta__art { left: -6%; bottom: -8%; width: 44%; }
  .variant-cutout .pfw-pillar:not(.pfw-pillar--flip) .pfw-pillar__art { margin-right: 0; }
}

/* ------------------------------------------------------------ review pass */
/* headline: "Powered" on its own line, the gold swipe under each line of "from Within" */
.variant-cutout .pfw-h1 span {
  display: table; background: none; padding: 0; margin: 0;
  text-decoration: underline var(--gold); text-decoration-thickness: 0.3em;
  text-underline-offset: -0.2em; text-decoration-skip-ink: none;
}
/* the money ship keeps its hull clear of the stat cards */
.variant-cutout .pfw-meter__art + .pfw-meter__stats { margin-top: var(--s-6); }
.variant-cutout .pfw-value__ghost { display: none; }
/* the kiwi stands beside the PDF, one foot over its edge */
.variant-cutout .pfw-cta__art { left: -12%; bottom: -4%; width: 34%; }
@media (max-width: 767px) {
  /* phones: the card fills the column, so the kiwi stands on top of it instead of over its text */
  .variant-cutout .pfw-cta__visual { flex-direction: column; align-items: center; }
  .variant-cutout .pfw-cta__art {
    position: relative; left: auto; bottom: auto; right: auto; width: 40%;
    align-self: flex-start; margin: 0 0 -34px 4%;
  }
}

/* ------------------------------------------------------------ mobile pass (2026-09-29) */
/* cut-outs that size themselves keep the attribute ratio (--ar from build.py) so the box
   is reserved before the file lands; `aspect-ratio: auto` alone collapsed it to 0px */
.variant-cutout .pfw-pillar__art img,
.variant-cutout .pfw-pillar--art-lead .pfw-pillar__art img { aspect-ratio: var(--ar, auto); }
.variant-cutout .pfw-reserve__art img { aspect-ratio: var(--ar, auto); width: 100%; height: auto; }

/* hero marker: one swipe per line, cut to the words (the old underline ran on past the
   last letter and could leave a stray block on the "Powered" line) */
.variant-cutout .pfw-h1 > span { display: block; text-decoration: none; }
.variant-cutout .pfw-h1 .pfw-h1__mark {
  display: inline; text-decoration: none;
  background: linear-gradient(transparent 60%, var(--gold) 60%, var(--gold) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.02em 0 0.07em; margin-left: -0.07em;
}


/* ==================================================================== MarkUp round 1 (OJ, 2026-09-30)
   Art, colour and size notes on version B. Shared structure changes are in styles.css. */

/* #11: more dark bands. Pillar 7 (ink), one government (teal) and the timeline (deep)
   join the meter and footer; the light bands between them alternate cream and paper
   (variants/cutout.json "bands") */

/* pillar 7 on ink */
.variant-cutout .pfw-value .pfw-h2 { color: var(--cream); }
.variant-cutout .pfw-value__body { color: var(--text-on-dark); }
.variant-cutout .pfw-value__stat { background: var(--gold); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32); }
.variant-cutout .pfw-value__num, .variant-cutout .pfw-value__label,
.variant-cutout .pfw-value__stat .pfw-ref { color: var(--ink); }
.variant-cutout .pfw-value__stat :focus-visible { outline-color: var(--ink); }
.variant-cutout .pfw-value__art img { filter: var(--cut-drop-dark); }

/* one government on teal; #12: the quote card sits centred under the three fixes */
.variant-cutout .pfw-onegov .pfw-lever__dot { box-shadow: 0 0 0 6px var(--teal); }
.variant-cutout .pfw-onegov .pfw-lever__title { color: var(--cream); }
.variant-cutout .pfw-onegov .pfw-lever__body { color: var(--text-on-dark); }
.variant-cutout .pfw-onegov .pfw-quote {
  margin-inline: auto; text-align: center;
  background: var(--cream); color: var(--teal); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
}
.variant-cutout .pfw-onegov .pfw-quote__cite,
.variant-cutout .pfw-onegov .pfw-quote .pfw-ref { color: var(--muted-on-cream); }
.variant-cutout .pfw-onegov .pfw-quote :focus-visible { outline-color: var(--teal); }

/* timeline back on deep ink */
.variant-cutout .pfw-timeline__rail::before {
  background: linear-gradient(90deg, var(--gold) 0 20%, var(--hairline-dark) 20% 100%);
}
.variant-cutout .pfw-stop__node { background: var(--ink-deep); border-color: var(--gold); }
.variant-cutout .pfw-stop--now .pfw-stop__node { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 6px var(--ink-deep); }
.variant-cutout .pfw-stop__horizon { color: var(--muted-on-dark); }
.variant-cutout .pfw-stop--now .pfw-stop__horizon { color: var(--gold); }
.variant-cutout .pfw-stop__title { color: var(--cream); }
.variant-cutout .pfw-stop__summary { color: var(--text-on-dark); }

/* precedent cards: cream cards on the paper band */
.variant-cutout .pfw-prec .pfw-precedent { background: var(--cream); border-style: solid; border-color: rgba(26, 60, 60, 0.2); box-shadow: var(--shadow-cream); }

/* #2: the why-now numbers answer the pointer: the card lifts and straightens, a gold
   swipe runs under the figure */
@media (hover: hover) and (pointer: fine) {
  .js .variant-cutout .pfw-stat--onCream.sr.vis {
    transition: opacity 600ms var(--ease-out), transform 320ms var(--ease-out),
                box-shadow 320ms var(--ease-out), border-color 200ms ease, background-color 200ms ease;
    transition-delay: 0s !important;
  }
  .js .variant-cutout .pfw-stat--onCream.sr.vis:hover {
    transform: translateY(-6px) rotate(0deg);
    border-style: solid; border-color: var(--ink); background-color: var(--cream);
    box-shadow: 0 18px 30px rgba(20, 58, 30, 0.16);
  }
  .variant-cutout .pfw-stat--onCream .pfw-stat__value {
    align-self: flex-start;
    background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 92% / 0% 0.26em;
    transition: background-size 420ms var(--ease-out);
  }
  .variant-cutout .pfw-stat--onCream:hover .pfw-stat__value { background-size: 100% 0.26em; }
}

/* #4: a bigger tanker sails on the green, its hull in the water at the top edge of the meter */
.variant-cutout .pfw-meter { overflow: visible; }
.variant-cutout .pfw-sea {
  --ship-w: clamp(170px, 19vw, 290px);
  --ship-h: calc(var(--ship-w) * 0.477);
  top: calc(var(--ship-h) * -0.8 - 60px);
  height: calc(var(--ship-h) * 0.92 + 60px);
}
.variant-cutout .pfw-sea__ship { bottom: calc(var(--ship-h) * -0.1); }
.variant-cutout .pfw-sea__hull { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3)); }
/* the band's top edge is water: a low swell in the band colour, drawn over the hull */
.variant-cutout .pfw-meter::after {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='10' viewBox='0 0 64 10'%3E%3Cpath d='M0 6 C 8 1, 24 1, 32 6 S 56 11, 64 6 V10 H0Z' fill='%230d2814'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .variant-cutout .pfw-meter.is-inview:not(.is-paused)::after { animation: pfw-swell 5s linear infinite; }
}
@keyframes pfw-swell { to { background-position-x: 64px; } }

/* #5: the fuel-bill footnote reads at body size */
.variant-cutout .pfw-meter__foot {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--text-on-dark);
  max-width: 54ch; margin: var(--s-4) auto 0; text-wrap: balance;
}

/* #10: the scales cut-out, larger */
@media (min-width: 901px) {
  .variant-cutout .pfw-value__copy { grid-column: 1 / span 6; }
  .variant-cutout .pfw-value__side { grid-column: 7 / span 6; align-items: center; }
  .variant-cutout .pfw-value__art { width: 100%; max-width: 560px; margin: -32px auto -28px; }
  .variant-cutout .pfw-value__art + .pfw-value__stat { margin-left: 18%; max-width: 380px; align-self: flex-start; }
}
@media (max-width: 900px) {
  .variant-cutout .pfw-value__side { max-width: 560px; }
}

/* #15: the kiwi at twice the size, stepping off the PDF towards the copy */
.variant-cutout .pfw-cta__visual { justify-content: flex-end; }
.variant-cutout .pfw-cta__art { left: -20%; bottom: -10%; width: 68%; }

/* pillars: one spread at a time now, so no 80vh stage per spread */
.variant-cutout .pfw-pillars .pfw-pillar.pfw-pillar { min-height: 0; }

@media (max-width: 767px) {
  .variant-cutout .pfw-timeline__rail::before {
    background: linear-gradient(180deg, var(--gold) 0 18%, var(--hairline-dark) 18% 100%);
  }
  .variant-cutout .pfw-cta__visual { justify-content: center; }
  .variant-cutout .pfw-cta__art { left: auto; bottom: auto; width: 72%; margin: 0 0 -64px 0; }
}
/* phones: the band above the meter keeps clear water for the tanker and its notes */
@media (max-width: 767px) {
  .variant-cutout .pfw-why { padding-bottom: calc(var(--pad-section) + 90px); }
}

/* ------------------------------------------------ MarkUp round 1, late notes (#23-#25) */
/* #23: figure cards are plain white cards: no dashed wonky outline, no tilt, a soft lift */
.variant-cutout {
  --card-white: #ffffff;
  --card-radius: 16px;
  --card-shadow: 0 10px 26px rgba(20, 58, 30, 0.09), 0 1px 2px rgba(20, 58, 30, 0.06);
}
.variant-cutout .pfw-band--cream .pfw-stat,
.variant-cutout .pfw-band--cream .pfw-stat:nth-child(even),
.variant-cutout .pfw-reserve .pfw-reserve__eq,
.variant-cutout .pfw-prec .pfw-precedent,
.variant-cutout .pfw-pcard,
.variant-cutout .pfw-pcard__item:nth-child(even) .pfw-pcard,
.variant-cutout .pfw-band--cream .pfw-asks--cards .pfw-ask {
  background: var(--card-white); border: 1px solid rgba(26, 60, 60, 0.1);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.js .variant-cutout .pfw-band--cream .pfw-stat.sr.vis,
.js .variant-cutout .pfw-band--cream .pfw-stat.sr.vis:nth-child(even) { transform: none; }
.variant-cutout .pfw-prec .pfw-precedent:nth-child(n) { transform: none; }
.variant-cutout .pfw-pcard--jump { background: transparent; border: 1.5px dashed rgba(26, 60, 60, 0.3); box-shadow: none; }
.variant-cutout .pfw-pcard.is-open { background: var(--ink); border-color: var(--ink); box-shadow: 0 6px 0 var(--gold); }
.variant-cutout .pfw-precedent__place { border-top-style: solid; border-top-color: rgba(26, 60, 60, 0.12); }
@media (hover: hover) and (pointer: fine) {
  .js .variant-cutout .pfw-stat--onCream.sr.vis:hover {
    transform: translateY(-6px); border-style: solid; border-color: rgba(26, 60, 60, 0.1);
    background-color: var(--card-white); box-shadow: 0 20px 36px rgba(20, 58, 30, 0.14);
  }
  .variant-cutout .pfw-prec .pfw-precedent:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(20, 58, 30, 0.14); }
  .variant-cutout .pfw-pcard:not(.is-open):hover { border-color: rgba(26, 60, 60, 0.35); background: var(--card-white); }
}

/* #24: the reserve closer and tank sit tight under the figures, no empty stage below */
.variant-cutout .pfw-reserve { padding-bottom: calc(var(--pad-section) * 0.6); }
.variant-cutout .pfw-reserve__end { margin-top: var(--s-6); grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; }
.variant-cutout .pfw-reserve__closer { font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.3; max-width: 26ch; }
.variant-cutout .pfw-reserve__art img { max-height: 250px; }

/* #25: the funding lede runs the full width of the section */
.variant-cutout .pfw-fund .pfw-head, .variant-cutout .pfw-fund .pfw-lede { max-width: none; }

/* ==================================================================== MarkUp round 2 (OJ, 2026-10-01) */
/* #26: an open pillar card reads the same whichever card it is (even cards kept the white fill) */
.variant-cutout .pfw-pcards .pfw-pcard.is-open,
.variant-cutout .pfw-pcards .pfw-pcard__item:nth-child(even) .pfw-pcard.is-open {
  background: var(--ink); border-color: var(--ink); box-shadow: 0 6px 0 var(--gold);
}

/* #29: the stock-side solar panel, larger; both lanes grow so the columns stay level */
@media (prefers-reduced-motion: no-preference) {
  .js .variant-cutout .pfw-flowstock__lane { height: 128px; }
}
.variant-cutout .is-anim .pfw-flowstock__lane[data-lane="stock"] .pfw-flowstock__sprite { width: 150px; }
.variant-cutout .pfw-ground { width: 160px; }
@media (prefers-reduced-motion: reduce) {
  .variant-cutout .pfw-flowstock__sprite { height: 120px; }
}

/* #31: the swell sits behind the tanker, so the whole hull rides on the water, unclipped */
.variant-cutout .pfw-sea { z-index: 1; height: calc(var(--ship-h) * 0.8 + 60px + var(--ship-h) * 0.22); }
.variant-cutout .pfw-sea__ship { bottom: 0; }

/* MarkUp r4 #40 / r5 #66: a cut-out sits in the top corner of each prize tile, in the flow so it can
   never sit on the text; only the wide outline tile floats it beside the copy, and only when there's room */
.variant-cutout .pfw-bento__pic { align-self: flex-end; margin: -10px -8px 4px 0; pointer-events: none; }
.variant-cutout .pfw-bento__pic img { display: block; height: 104px; width: auto; max-width: 180px; object-fit: contain; }
.variant-cutout .pfw-bento__tile--wide .pfw-bento__pic img { height: 132px; max-width: 240px; }
.variant-cutout .pfw-bento__tile--gold .pfw-bento__pic img { height: 150px; max-width: 220px; }
@media (min-width: 1100px) {
  .variant-cutout .pfw-bento__tile--outline.has-pic .pfw-bento__pic { position: absolute; top: 22px; right: 24px; margin: 0; }
  .variant-cutout .pfw-bento__tile--outline.has-pic .pfw-bento__body { max-width: 60%; }
}
/* MarkUp r4 #53: the "not new spending" note under the pillars lede */
.pfw-pillars__note { margin-top: 14px; font-weight: 600; max-width: 62ch; }
.variant-cutout .pfw-bento__tile--square .pfw-bento__value { white-space: nowrap; font-size: clamp(2.4rem, 3.6vw, 3.4rem); }

/* MarkUp r5: the kiwi stands in front of the card, so its title sits right, clear of him */
.variant-cutout .pfw-pdfcard__meta { align-items: flex-end; text-align: right; }
@media (min-width: 768px) { .variant-cutout .pfw-pdfcard__meta { padding-left: 30%; } }