/* Bold poster: after instalanding.ai's notched-panel-catalog-page (MIT). A cobalt-and-yellow
   poster made of large-radius panels that interlock: every panel paints a square of its
   neighbour's colour behind its rounded corner (the "notch"), no clip-path. Controls are
   moulded with one six-shadow stack. Anton for display, Inter for body.
   Suits gyms, barbers, food trucks, streetwear, creative studios.
   Five colours on ink: cobalt #183fad, mid #4565bc, pale #abb9de, chip #e9ecf6, yellow #f1bf0a. */

:root[data-theme="bold-poster"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 22px; --reveal-ease: cubic-bezier(0.23, 1, 0.32, 1); --nav-lift: 0 6px 0 var(--bp-ink); --hero-in: slam; --reveal-in: flip;
  --bp-cobalt: #183fad;
  --bp-mid: #4565bc;
  --bp-pale: #abb9de;
  --bp-chip: #e9ecf6;
  --bp-yellow: #f1bf0a;
  --bp-ink: #090909;
  --bp-deep: #0f2a7d;

  /* the page is cobalt; panels that sit on it are light and re-point the text tokens (see .on-light below) */
  --bg: #183fad;
  --bg-soft: #4565bc;
  --surface: #e9ecf6;
  --ink: #ffffff;
  --ink-2: #e9ecf6;
  --muted: #d3dbf0;
  --line: rgb(171 185 222 / 0.45);
  --accent: #f1bf0a;
  --primary: #f1bf0a;
  --primary-ink: #090909;
  --eyebrow: #f1bf0a;
  --glass: #e9ecf6;
  --glass-border: #090909;

  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Inter", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --display-leading: 0.98;

  --radius-sm: 14px;
  --radius: 26px;
  --radius-lg: 40px;
  --radius-pill: 999px;
  --shadow: none;
  --card-border: 0;

  --slab-bg: #4565bc;
  --slab-ink: #ffffff;
  --footer-bg: #090909;
  --footer-ink: #ffffff;

  --ph-1: radial-gradient(70% 70% at 25% 20%, #abb9de, transparent 62%), linear-gradient(150deg, #4565bc, #183fad);
  --ph-2: repeating-linear-gradient(135deg, rgb(9 9 9 / 0.1) 0 10px, transparent 10px 20px), linear-gradient(160deg, #f1bf0a, #e0a800);
  --ph-3: radial-gradient(60% 60% at 75% 75%, #f1bf0a, transparent 60%), linear-gradient(200deg, #183fad, #0f2a7d);
  --ph-4: linear-gradient(90deg, rgb(255 255 255 / 0.14) 50%, transparent 50%) 0 0 / 40px 100%, linear-gradient(160deg, #abb9de, #4565bc);
  --ph-5: radial-gradient(circle at 70% 30%, #e9ecf6 0 14%, transparent 15%), linear-gradient(160deg, #183fad, #4565bc);
  --ph-6: repeating-linear-gradient(45deg, rgb(9 9 9 / 0.14) 0 8px, transparent 8px 16px), linear-gradient(150deg, #e9ecf6, #abb9de);

  /* the material: six shadows in a fixed order, scaled for the 48px capsule */
  --mould:
    0 9px 14px -4px rgb(0 0 0 / 0.5),
    inset 0 -3px 4px -1px rgb(0 0 0 / 0.2),
    0 -6px 10px -1px rgb(255 255 255 / 0.55),
    inset 0 3px 4px -1px rgb(255 255 255 / 0.2),
    inset 0 0 5px 1px rgb(255 255 255 / 0.8),
    inset 0 18px 24px 0 rgb(255 255 255 / 0.2);
  --mould-sm:
    0 6px 10px -3px rgb(0 0 0 / 0.5),
    inset 0 -2px 3px -1px rgb(0 0 0 / 0.2),
    0 -5px 8px -1px rgb(255 255 255 / 0.5),
    inset 0 2px 3px -1px rgb(255 255 255 / 0.2),
    inset 0 0 4px 1px rgb(255 255 255 / 0.8),
    inset 0 14px 18px 0 rgb(255 255 255 / 0.2);
  --mould-press:
    0 2px 4px -2px rgb(0 0 0 / 0.5),
    inset 0 8px 12px -2px rgb(0 0 0 / 0.4),
    inset 0 -3px 4px -1px rgb(255 255 255 / 0.2),
    inset 0 0 5px 1px rgb(255 255 255 / 0.5),
    inset 0 -18px 24px 0 rgb(255 255 255 / 0.25);

  color-scheme: dark;

  & body { background: var(--bg); }
  & h1, & h2, & h3, & h4 { text-transform: uppercase; }
  & h2 { font-size: clamp(40px, 6vw, 80px); max-width: 16ch; }
  & h3 { font-size: 26px; }
  & h4 { font-size: 24px; }
  & .eyebrow { color: var(--eyebrow); font-weight: 800; letter-spacing: 0.14em; font-size: 12px; }
  & .lead { color: var(--ink-2); }
  & a:not(.btn):not([class]) { text-decoration-thickness: 2px; text-underline-offset: 3px; }
  & :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

  /* light panels sitting on the cobalt page: dark text, cobalt accents, with the notch behind
     the bottom-right corner (a mid-blue square showing through the rounded corner) */
  & .card, & .plan, & .poster, & .nav-menu ul, & .map, & .chips .pill, & .stat {
    --ink: #090909;
    --ink-2: #1e2030;
    --muted: #444a66;
    --line: rgb(9 9 9 / 0.16);
    --accent: #183fad;
    --eyebrow: #183fad;
    --glass: #ffffff;
    color: var(--ink);
  }
  /* the panel's own colour is painted by ::before (--card-bg), so the notch square in ::after can sit behind it */
  & .card, & .plan, & .poster, & .pricing-slab { position: relative; isolation: isolate; background: none; --card-bg: var(--bp-chip); }
  & .card { border-radius: 30px; }
  & .card::before, & .plan::before, & .poster::before, & .pricing-slab::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--card-bg);
  }
  & .card::after, & .pricing-slab::after, & .plan::after, & .poster::after {
    content: ""; position: absolute; z-index: -5; width: 50%; height: 50%; bottom: -4px; right: -4px;
    background: var(--bp-mid);
  }
  & .pricing-slab { --card-bg: var(--bp-mid); }
  & .pricing-slab::after { background: var(--bp-yellow); }

  /* ---------- controls: moulded, one material ---------- */
  & .btn {
    font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
    border: 0; box-shadow: var(--mould);
  }
  & .btn-sm { box-shadow: var(--mould-sm); font-size: 13px; }
  & .btn-primary { background: var(--bp-yellow); color: var(--bp-ink); }
  & .btn-ghost { background: var(--bp-chip); color: var(--bp-ink); }
  & .card .btn-ghost, & .plan .btn-ghost, & .poster .btn, & .nav-menu .btn-ghost { background: var(--bp-ink); color: #fff; }
  & .btn:hover { transform: translateY(-2px); }
  & .btn:active, & .btn:disabled {
    box-shadow: var(--mould-press); filter: blur(0.5px); font-size: 13px; transform: none;
  }
  & .btn:disabled { opacity: 1; filter: none; background: var(--bp-pale); color: #1e2030; }
  & .btn-sm:active { font-size: 12px; }
  & .btn .plus { font-size: 18px; line-height: 1; }

  & .pill {
    background: #fff; color: var(--bp-ink); border: 2px solid var(--bp-ink);
    font: 800 11px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  }
  & .chips .pill { font-size: 13px; padding: 8px 16px; background: var(--bp-chip); }

  /* ---------- nav: a white logo block biting into a cobalt bar ---------- */
  & .nav { background: var(--bp-cobalt); border-bottom: 4px solid var(--bp-ink); }
  & .nav-inner { gap: 16px; }
  & .brand {
    padding: 6px 18px 6px 6px; border-radius: 999px; background: #fff; color: var(--bp-ink);
    box-shadow: 4px 4px 0 var(--bp-ink);
  }
  & .brand-mark { background: var(--bp-cobalt); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 18px; }
  & .brand-name { font: 400 22px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; padding-top: 2px; }
  & .nav-links a { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 2px; border-bottom: 3px solid transparent; }
  & .nav-links a:hover { color: #fff; border-bottom-color: var(--bp-yellow); }
  & .nav-phone { color: #fff; font-weight: 700; padding: 8px 14px; border: 2px solid var(--bp-pale); border-radius: 999px; }
  & .nav-phone:hover { color: var(--bp-ink); background: var(--bp-yellow); border-color: var(--bp-yellow); }
  & .nav-menu summary {
    border: 0; background: var(--bp-chip); color: var(--bp-ink); box-shadow: var(--mould-sm);
  }
  & .nav-menu[open] summary { box-shadow: var(--mould-press); }
  & .nav-menu ul { background: var(--bp-pale); border: 3px solid var(--bp-ink); border-radius: 26px 8px 26px 26px; }
  & .nav-menu a { font-weight: 700; }
  & .nav-menu a:hover { background: var(--bp-yellow); }

  /* ---------- signature hero: the poster ---------- */
  & .bp-hero { padding-block: clamp(20px, 3.4vw, 44px) clamp(36px, 5vw, 64px); }
  & .bp-poster { --r: clamp(26px, 3.6vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); }
  & .bp-panel {
    position: relative; isolation: isolate; min-width: 0;
    padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r);
    color: var(--p-ink);
    --ink: var(--p-ink); --muted: var(--p-ink);
  }
  /* the notch: one layer, four optional squares of the neighbour's colour behind the corners */
  & .bp-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--p-bg); }
  & .bp-panel::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
      linear-gradient(var(--n-tl, transparent), var(--n-tl, transparent)) 0 0 / 50% 50% no-repeat,
      linear-gradient(var(--n-tr, transparent), var(--n-tr, transparent)) 100% 0 / 50% 50% no-repeat,
      linear-gradient(var(--n-bl, transparent), var(--n-bl, transparent)) 0 100% / 50% 50% no-repeat,
      linear-gradient(var(--n-br, transparent), var(--n-br, transparent)) 100% 100% / 50% 50% no-repeat;
  }
  & .bp-label { margin: 0 0 14px; font: 800 12px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }

  & .bp-title { --p-bg: var(--bp-yellow); --p-ink: var(--bp-ink); --n-bl: var(--bp-mid); --n-br: var(--bp-mid); --accent: var(--bp-ink); --eyebrow: var(--bp-ink); }
  & .bp-title h1 { font-size: clamp(46px, 9.4vw, 124px); line-height: 0.92; max-width: 15ch; color: var(--bp-ink); }
  & .bp-title .eyebrow { margin-bottom: 16px; }
  & .bp-sticker {
    display: inline-block; margin-top: 22px; padding: 8px 18px 6px; rotate: -3deg;
    background: var(--bp-ink); color: var(--bp-yellow); border-radius: 999px;
    font: 400 18px/1.1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  }

  & .bp-copy { --p-bg: var(--bp-mid); --p-ink: #fff; --n-tl: var(--bp-yellow); --n-tr: var(--bp-yellow); --n-bl: var(--bp-pale); --n-br: var(--bp-pale); }
  & .bp-copy .lead { margin: 0; color: #fff; font-size: clamp(18px, 1.7vw, 23px); max-width: 44ch; }
  & .bp-copy .actions { margin-top: 26px; }

  & .bp-phone {
    --p-bg: var(--bp-pale); --p-ink: var(--bp-ink); --accent: var(--bp-cobalt);
    --n-tl: var(--bp-mid); --n-tr: var(--bp-mid); --n-bl: var(--bp-chip); --n-br: var(--bp-chip);
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  & .bp-phone .bp-label { max-width: 28ch; }
  & .bp-number { font: 400 clamp(38px, 5.2vw, 68px)/1 var(--font-display); text-decoration: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }
  & .bp-number:hover { color: var(--bp-cobalt); }

  & .bp-feat { --p-bg: var(--bp-chip); --p-ink: var(--bp-ink); --accent: var(--bp-cobalt); --n-tl: var(--bp-pale); --n-tr: var(--bp-pale); --n-bl: var(--bp-ink); --n-br: var(--bp-ink); }
  & .bp-feat ul { display: grid; }
  & .bp-feat li + li { border-top: 2px solid rgb(9 9 9 / 0.16); }
  & .bp-feat a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; text-decoration: none; }
  & .bp-feat-name { font-weight: 700; font-size: 17px; line-height: 1.3; min-width: 0; }
  & .bp-feat-price { font: 400 24px/1 var(--font-display); color: var(--bp-cobalt); white-space: nowrap; letter-spacing: 0.02em; }
  & .bp-feat a:hover .bp-feat-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

  & .bp-hours { --p-bg: var(--bp-ink); --p-ink: #fff; --n-tl: var(--bp-chip); --n-tr: var(--bp-chip); }
  & .bp-hours .bp-label { color: var(--bp-pale); }
  & .bp-hours dl { margin: 0; display: grid; }
  & .bp-hours dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgb(171 185 222 / 0.3); flex-wrap: wrap; }
  & .bp-hours dl div:last-child { border-bottom: 0; }
  & .bp-hours dt { font-weight: 600; }
  & .bp-hours dd { margin: 0; font: 400 20px/1.2 var(--font-display); letter-spacing: 0.03em; color: var(--bp-yellow); font-variant-numeric: tabular-nums; }

  @media (min-width: 860px) {
    & .bp-poster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    & .bp-title { grid-column: 1 / -1; --n-bl: var(--bp-mid); --n-br: var(--bp-pale); }
    & .bp-copy { --n-tl: var(--bp-yellow); --n-tr: var(--bp-pale); --n-bl: var(--bp-chip); --n-br: var(--bp-chip); }
    & .bp-phone { --n-tl: var(--bp-mid); --n-tr: var(--bp-yellow); --n-bl: var(--bp-ink); --n-br: var(--bp-ink); }
    & .bp-feat { --n-tl: var(--bp-mid); --n-tr: var(--bp-ink); --n-bl: transparent; --n-br: var(--bp-ink); }
    & .bp-hours { --n-tl: var(--bp-chip); --n-tr: var(--bp-pale); --n-bl: var(--bp-chip); --n-br: transparent; }
  }

  /* ---------- sections ---------- */
  /* highlights: a yellow strip between ink rules */
  & .highlights { background: var(--bp-yellow); border-block: 4px solid var(--bp-ink); padding-block: 14px; }
  & .marquee-track { color: var(--bp-ink); font: 400 24px/1.2 var(--font-display); letter-spacing: 0.05em; }
  & .marquee-track li { padding-top: 3px; }
  & .marquee-track li::after { content: "●"; color: var(--bp-cobalt); font-size: 14px; }

  & .group-title { border-top: 0; padding-top: 0; font-size: 34px; display: inline-block; border-bottom: 6px solid var(--bp-yellow); padding-bottom: 6px; }
  & .service { padding: 28px 26px 26px; }
  & .service-name { font-size: 28px; }
  & .service-foot { border-top: 2px solid rgb(9 9 9 / 0.16); }
  & .index { background: var(--bp-cobalt); color: #fff; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
  & .price { font: 400 30px/1 var(--font-display); color: var(--bp-cobalt); letter-spacing: 0.02em; }
  & .services-grid > li:nth-child(4n+2) { --card-bg: var(--bp-pale); }
  & .services-grid > li:nth-child(4n+3) { --card-bg: var(--bp-yellow); }

  & .about-media, & .gallery-item, & .hero-media { border: 4px solid var(--bp-ink); }
  & .about-media { border-radius: 56px 56px 56px 10px; }
  & .about-copy p { color: #fff; }
  & .ph-label { background: var(--bp-ink); color: var(--bp-yellow); font: 700 11px/1.4 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }
  & .stat { background: var(--bp-chip); border: 0; border-radius: 22px 22px 22px 6px; padding: 14px 16px 16px; }
  & .stat dt { color: var(--muted); font-weight: 600; }
  & .stat dd { font: 400 40px/1.1 var(--font-display); color: var(--bp-cobalt); }

  & .gallery-item { border-radius: 36px; }
  & .gallery-grid li:nth-child(odd) .gallery-item { border-radius: 36px 36px 8px 36px; }
  & .gallery-grid li:nth-child(even) .gallery-item { border-radius: 8px 36px 36px 36px; }

  & .stars { color: var(--bp-cobalt); }
  & .reviews-grid > li:nth-child(3n+2) { --card-bg: var(--bp-yellow); }
  & .reviews-grid > li:nth-child(3n+2) .stars { color: var(--bp-ink); }
  & .reviews-grid > li:nth-child(3n) { --card-bg: var(--bp-pale); }
  & .review blockquote { font-size: 18px; font-weight: 500; }
  & .review-author { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; }
  & .review-source { color: var(--muted); font-weight: 600; }

  & .pricing-slab { position: relative; isolation: isolate; border-radius: 48px; }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { opacity: 1; color: #fff; }
  & .plan { border: 0; padding: 30px 28px; border-radius: 32px; }
  & .plan::after { background: var(--bp-pale); }
  & .plan.featured { --card-bg: var(--bp-yellow); box-shadow: none; }
  & .plan.featured::after { background: var(--bp-ink); }
  & .plan-flag { background: var(--bp-ink); color: var(--bp-yellow); border-color: var(--bp-ink); }
  & .plan-price .mono { font: 400 54px/1 var(--font-display); letter-spacing: 0.01em; }
  & .plan-period { opacity: 1; color: var(--muted); font-weight: 600; }
  & .plan-features li::before { content: "■"; font-size: 11px; vertical-align: 2px; color: var(--bp-cobalt); }
  & .plan.featured .plan-features li::before { color: var(--bp-ink); }
  & .plan.featured .btn-ghost { background: var(--bp-ink); }

  /* faq: the marker is a round moulded control */
  & .faq-item, & .faq-item:first-child { border-color: rgb(171 185 222 / 0.5); border-width: 0 0 2px; }
  & .faq-item:first-child { border-top: 2px solid rgb(171 185 222 / 0.5); }
  & .faq-item summary { color: #fff; font: 700 19px/1.35 var(--font-body); }
  & .faq-item summary::after {
    content: "+"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--bp-yellow); color: var(--bp-ink); font: 800 22px/1 var(--font-body);
    box-shadow: var(--mould-sm);
  }
  & .faq-item[open] summary::after { box-shadow: var(--mould-press); }
  & .faq-item p { color: #fff; }

  & .map { border: 4px solid var(--bp-ink); border-radius: 56px 56px 56px 10px; background: var(--bp-pale); }
  & .visit-card { border-radius: 10px 56px 56px 56px; }
  & .hours th, & .hours td { border-bottom: 2px solid rgb(9 9 9 / 0.14); }
  & .hours th { font-weight: 700; }
  & .hours td { font: 400 20px/1.2 var(--font-display); letter-spacing: 0.03em; color: var(--bp-cobalt); }
  & .hours caption { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
  & .contact-direct { color: #fff; }
  & .contact-direct a { text-decoration-color: var(--bp-yellow); }
  & .form { border-radius: 56px 10px 56px 56px; }
  & .field label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
  & .field input, & .field textarea {
    background: #fff; color: var(--bp-ink); border: 2px solid var(--bp-ink); border-radius: 22px;
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 0.18);
  }
  & .field input { border-radius: 999px; padding-inline: 20px; }
  & .field input:focus, & .field textarea:focus { outline: 3px solid var(--bp-cobalt); outline-offset: 2px; }

  & .footer-card { border-radius: 56px 56px 56px 10px; padding-bottom: 0; border-bottom: 0; }
  & .footer-name { font: 400 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
  & .footer-title { color: var(--bp-yellow); opacity: 1; font-weight: 800; letter-spacing: 0.14em; }
  & .footer-base { border-top-color: rgb(171 185 222 / 0.35); opacity: 1; color: var(--bp-pale); }
  & .footer a:hover { color: var(--bp-yellow); }
  & .wordmark {
    display: block; margin: 24px 0 -0.1em; color: var(--bp-yellow);
    font: 400 clamp(64px, 16vw, 240px)/0.9 var(--font-display); text-transform: uppercase; white-space: nowrap;
    user-select: none;
  }

  & .callbar { background: var(--bp-ink); border-top: 4px solid var(--bp-yellow); backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ---------- page "stack": the sections are panels piled like posters (base.css), cobalt and
     deep blue by turns, an ink rule along each rounded top edge; the overlap lets each corner
     show the colour of the panel beneath, which is the notch ---------- */
  & .page-stack > .section, & .page-stack > .highlights-blocks { background: var(--bp-cobalt); border-top: 4px solid var(--bp-ink); }
  & .page-stack > .section:nth-child(odd), & .page-stack > .highlights-blocks:nth-child(odd) { background: var(--bp-deep); }
  & .page-stack > :last-child { padding-bottom: var(--section-pad); }

  /* highlights "blocks": giant Anton word-blocks that interlock; each paints a square of its
     neighbours' colour behind its rounded corners (neighbours above and below on a phone,
     beside it from 900px where the blocks sit two to a row) */
  & .highlights-blocks { border-bottom: 0; }
  & .block {
    position: relative; isolation: isolate; border: 0; border-radius: 40px;
    color: var(--b-ink); text-transform: uppercase;
    --n-tl: var(--n-prev); --n-tr: var(--n-prev); --n-bl: var(--n-next); --n-br: var(--n-next);
  }
  & .block:first-child { --n-tl: transparent; --n-tr: transparent; }
  & .block:last-child { --n-bl: transparent; --n-br: transparent; }
  & .block::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--b-bg); }
  & .block::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
      linear-gradient(var(--n-tl), var(--n-tl)) 0 0 / 50% 50% no-repeat,
      linear-gradient(var(--n-tr), var(--n-tr)) 100% 0 / 50% 50% no-repeat,
      linear-gradient(var(--n-bl), var(--n-bl)) 0 100% / 50% 50% no-repeat,
      linear-gradient(var(--n-br), var(--n-br)) 100% 100% / 50% 50% no-repeat;
  }
  & .block:nth-child(4n + 1) { --b-bg: var(--bp-yellow); --b-ink: var(--bp-ink); --n-prev: var(--bp-mid); --n-next: var(--bp-chip); }
  & .block:nth-child(4n + 2) { --b-bg: var(--bp-chip); --b-ink: var(--bp-ink); --n-prev: var(--bp-yellow); --n-next: var(--bp-pale); }
  & .block:nth-child(4n + 3) { --b-bg: var(--bp-pale); --b-ink: var(--bp-ink); --n-prev: var(--bp-chip); --n-next: var(--bp-mid); }
  & .block:nth-child(4n) { --b-bg: var(--bp-mid); --b-ink: #fff; --n-prev: var(--bp-pale); --n-next: var(--bp-yellow); }
  & .block-n { font: 800 12px/1 var(--font-body); letter-spacing: 0.14em; color: inherit; }
  & .block-text { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }
  @media (min-width: 900px) {
    & .block:nth-child(odd) { --n-tl: transparent; --n-bl: transparent; --n-tr: var(--n-next); --n-br: var(--n-next); }
    & .block:nth-child(even) { --n-tr: transparent; --n-br: transparent; --n-tl: var(--n-prev); --n-bl: var(--n-prev); }
    & .block:last-child:nth-child(odd) { --n-tr: transparent; --n-br: transparent; }
  }

  /* pricing "posters": tall light panels with the notch, the price in Anton at poster size */
  & .poster { --card-bg: var(--bp-chip); border: 0; border-radius: 40px; }
  & .poster-2 { --card-bg: var(--bp-pale); }
  & .poster.featured { --card-bg: var(--bp-yellow); }
  & .poster.featured::after { background: var(--bp-ink); }
  & .poster-flag { background: var(--bp-ink); color: var(--bp-yellow); border-color: var(--bp-ink); }
  & .poster-name { font-size: clamp(28px, 3vw, 44px); }
  & .poster-amount { font-family: var(--font-display); font-weight: 400; color: var(--bp-cobalt); letter-spacing: 0.01em; }
  & .poster.featured .poster-amount { color: var(--bp-ink); }
  & .poster-period { opacity: 1; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
  & .poster-includes li::before { color: var(--bp-cobalt); }
  & .poster.featured .poster-includes li::before { color: var(--bp-ink); }

  /* ---------- motion: panels slam in, buttons spring ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .btn { transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), filter 0.3s cubic-bezier(0.23, 1, 0.32, 1), font-size 0.3s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s ease; }
      & .faq-item summary::after { transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
      & .card { transition: translate 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
      & .card:hover { translate: 0 -4px; }
      & .bp-panel { animation: bp-pop 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }
      & .bp-copy { animation-delay: 0.08s; }
      & .bp-phone { animation-delay: 0.16s; }
      & .bp-feat { animation-delay: 0.24s; }
      & .bp-hours { animation-delay: 0.32s; }
    }
    &[data-motion="showpiece"] .bp-sticker { animation: bp-wobble 3.2s ease-in-out infinite; }
  }
}

@keyframes bp-pop { from { opacity: 0; translate: 0 22px; } }
@keyframes bp-wobble { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }