/* ==========================================================================
   XtraPower Wash case study (case-study-2.html)
   Signature: "fresh wash" aqua-mint accent, a back-of-pack Launch Facts label,
   an exploded launch stack, a homepage line-up chart and a storefront minimap.
   Accent colours are decorative only (glows, borders, kickers), never data marks.
   ========================================================================== */
.cs--xtrapower {
  --xp: #3ee6c8;
  --xp-2: #6fd3ff;
  --xp-text: #3ee6c8;            /* accent used as TEXT (passes AA on the dark surfaces) */
  --xp-glow: rgba(62, 230, 200, .34);
  --xp-line: rgba(62, 230, 200, .34);
  --xp-wash: linear-gradient(125deg, rgba(62, 230, 200, .14), rgba(111, 211, 255, .08) 55%, transparent);
  --xp-paper: #f6fbfa;
  --xp-ink: #0b1d22;
  --xp-ink-2: #3c5257;
  --xp-wire: rgba(var(--ink), .13);
  --xp-wire-2: rgba(var(--ink), .22);
  /* serif accents + eyebrow dots: aqua to mint to sky (all >= 9:1 on the dark page) */
  --xp-grad: linear-gradient(115deg, #3ee6c8 0%, #8ff3de 42%, #6fd3ff 78%, #3ee6c8 100%);
}
[data-theme="light"] .cs--xtrapower {
  --xp: #08957f;
  --xp-2: #1683c9;
  --xp-text: #067566;            /* 4.9:1 on --bg-2, 5.2:1 on --bg */
  --xp-glow: rgba(8, 149, 127, .2);
  --xp-line: rgba(8, 149, 127, .34);
  --xp-wash: linear-gradient(125deg, rgba(8, 149, 127, .1), rgba(22, 131, 201, .06) 55%, transparent);
  --xp-paper: #f2fbf8;
  /* every stop >= 4.5:1 on --bg #f3f6fc */
  --xp-grad: linear-gradient(115deg, #067566 0%, #077a72 42%, #0b6aa6 78%, #067566 100%);
}

/* ---------- Accent rule: serif accents, eyebrow dots and kickers take the aqua wash.
   The shared CTA band keeps the default ZidTech blue (excluded, not overridden). ---------- */
.cs--xtrapower :is(h1, h2) .grad-text:not(.cta-final *) { background-image: var(--xp-grad); }
.cs--xtrapower .eyebrow:not(.cta-final *)::before { background: var(--xp-grad); box-shadow: 0 0 12px var(--xp-glow); }
.cs--xtrapower .kicker-num { color: var(--xp-text); }

/* ---------- Hero ---------- */
.cs--xtrapower .xp-hero::before {
  background: conic-gradient(from 200deg, rgba(62, 230, 200, 0), rgba(62, 230, 200, .3), rgba(111, 211, 255, .3), rgba(0, 156, 255, .28), rgba(62, 230, 200, 0));
}
.cs--xtrapower .xp-hero-grid { display: grid; gap: clamp(44px, 6vw, 80px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1080px) { .cs--xtrapower .xp-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
.cs--xtrapower .work-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.cs--xtrapower .page-hero .xp-title { font-size: clamp(2.5rem, 1rem + 3.7vw, 4.7rem); max-width: 14ch; }

/* bubbles: decorative, slow and soft; clear soap film with an iridescent rim */
.cs--xtrapower .xp-bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cs--xtrapower .xp-bubbles i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background:
    radial-gradient(circle at 70% 74%, rgba(255, 255, 255, .38) 0 5%, transparent 13%),
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .92) 0 8%, rgba(255, 255, 255, .14) 19%, rgba(170, 245, 255, .05) 52%, rgba(111, 211, 255, .2) 82%, rgba(62, 230, 200, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(190, 250, 255, .6), inset -3px -4px 9px -4px rgba(255, 150, 230, .45), inset 4px 3px 8px -5px rgba(120, 255, 210, .5), 0 0 18px -5px rgba(62, 230, 200, .45);
  opacity: .9; animation: xpFloat var(--t) ease-in-out var(--d) infinite alternate;
}
[data-theme="light"] .cs--xtrapower .xp-bubbles i {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 10%, rgba(22, 131, 201, .05) 30%, rgba(22, 131, 201, .16) 100%);
  box-shadow: inset 0 0 0 1px rgba(22, 131, 201, .28);
}
@keyframes xpFloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(6px, -28px, 0); } }
html.no-anim .cs--xtrapower .xp-bubbles i { animation: none; }
@media (max-width: 1079px) { .cs--xtrapower .xp-bubbles i:nth-child(3), .cs--xtrapower .xp-bubbles i:nth-child(4) { display: none; } }

/* the pack: launch artwork (cropped above its own tagline so no word is cut) + back-of-pack label */
.cs--xtrapower .xp-pack { position: relative; }
.cs--xtrapower .xp-shot {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: #0b4f96;
  border: 1px solid var(--xp-line); box-shadow: var(--shadow-l), 0 0 90px -30px var(--xp-glow);
}
@media (max-width: 1079px) { .cs--xtrapower .xp-pack { max-width: 720px; width: 100%; margin-inline: auto; } }
.cs--xtrapower .xp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.cs--xtrapower .xp-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }

.cs--xtrapower .xp-facts {
  position: relative; z-index: 2; width: min(100% - 24px, 330px); margin: -44px auto 0; padding: 16px 18px 14px;
  background: var(--xp-paper); color: var(--xp-ink); border-radius: var(--r-s); rotate: -1.5deg;
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .7), 0 0 0 1px rgba(11, 29, 34, .08);
}
[data-theme="light"] .cs--xtrapower .xp-facts { box-shadow: 0 30px 60px -28px rgba(20, 45, 110, .45), 0 0 0 1px rgba(11, 29, 34, .12); }
@media (min-width: 1080px) {
  .cs--xtrapower .xp-shot { margin-left: clamp(24px, 3vw, 44px); }
  /* the label tucks under the artwork's bottom-left corner and hangs below it, clear of the bottles */
  .cs--xtrapower .xp-facts { margin: -40px 0 0; width: clamp(256px, 22vw, 300px); }
}
@media (min-width: 1080px) and (max-width: 1299px) { .cs--xtrapower .xp-facts .xp-f-sub { display: none; } }
.cs--xtrapower .xp-facts-t { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cs--xtrapower .xp-facts-sub { margin-top: 4px; padding-bottom: 8px; font-size: 12px; color: var(--xp-ink-2); border-bottom: 7px solid var(--xp-ink); }
.cs--xtrapower .xp-facts dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(11, 29, 34, .22); font-size: 13.5px; line-height: 1.3; }
.cs--xtrapower .xp-facts dt { font-weight: 700; }
.cs--xtrapower .xp-facts dd { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs--xtrapower .xp-facts .xp-f-big { border-bottom: 4px solid var(--xp-ink); align-items: center; }
.cs--xtrapower .xp-facts .xp-f-big dd { font-size: 28px; letter-spacing: -.04em; line-height: 1; }
.cs--xtrapower .xp-facts .xp-f-sub { padding-left: 14px; font-size: 12.5px; }
.cs--xtrapower .xp-facts .xp-f-sub dt { font-weight: 500; color: var(--xp-ink-2); }
.cs--xtrapower .xp-facts .xp-f-sub dd svg { width: 15px; height: 15px; color: #067566; stroke-width: 3; }
.cs--xtrapower .xp-facts .xp-f-last { border-bottom: 7px solid var(--xp-ink); }
.cs--xtrapower .xp-facts sup { font-size: .72em; font-weight: 700; margin-left: 1px; vertical-align: .45em; line-height: 0; }
.cs--xtrapower .xp-facts-fn { margin-top: 7px; font-size: 12px; line-height: 1.35; color: var(--xp-ink-2); }
.cs--xtrapower .xp-facts-fn sup { margin: 0 2px 0 0; }
.cs--xtrapower .xp-barcode { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cs--xtrapower .xp-barcode svg { width: 84px; height: 26px; fill: var(--xp-ink); flex: none; }
.cs--xtrapower .xp-barcode span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--xp-ink-2); }
/* phone: a short label (headline numbers only) so the hero stays about one screen */
@media (max-width: 600px) {
  .cs--xtrapower .xp-facts { margin-top: -32px; padding: 14px 16px 10px; }
  .cs--xtrapower .xp-facts-t { font-size: 24px; }
  .cs--xtrapower .xp-facts .xp-f-sub, .cs--xtrapower .xp-barcode { display: none; }
  .cs--xtrapower .xp-facts .xp-f-big dd { font-size: 24px; }
}

/* section rhythm: the shared .section / .section--tight values (same as the homepage and the
   sibling case pages). One exception: the launch stack ends on its small flow chips, so it
   hands over to the range with less air below. */
.cs--xtrapower .xp-stack-sec { padding-bottom: calc(var(--section) * .4); }

/* ---------- Launch stack ---------- */
.cs--xtrapower .xp-stack { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .cs--xtrapower .xp-stack { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.cs--xtrapower .xp-iso-wrap { position: relative; display: grid; place-items: center; height: clamp(330px, 34vw, 480px); }
/* below 1024px the cards stack full width and each carries its own mini plate, so the big
   exploded view (which would sit above the cards, not beside them) is not shown */
@media (max-width: 1023px) { .cs--xtrapower .xp-iso-wrap { display: none; } }
.cs--xtrapower .xp-iso-wrap::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--xp-glow), transparent 65%); filter: blur(30px); opacity: .8; }
.cs--xtrapower .xp-iso {
  --gap: clamp(48px, 5.4vw, 74px);
  position: relative; width: clamp(200px, 23vw, 300px); aspect-ratio: 3 / 2; margin-top: calc(var(--gap) * 1.6);
  transform: rotateX(58deg) rotateZ(-40deg); transform-style: preserve-3d;
}
html.js:not(.no-anim) .cs--xtrapower .xp-iso:not(.is-in) { --gap: 12px; }
.cs--xtrapower .xp-plate {
  position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: #0b1324;
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: -22px 26px 40px -16px rgba(0, 0, 0, .6);
  transform: translateZ(calc(var(--i) * var(--gap))); transition: transform .8s var(--ease), opacity .45s, filter .45s;
}
[data-theme="light"] .cs--xtrapower .xp-plate { border-color: rgba(255, 255, 255, .9); box-shadow: -20px 24px 36px -18px rgba(20, 45, 110, .45); }
.cs--xtrapower .xp-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cs--xtrapower .xp-plate b { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #fff; background: rgba(5, 8, 16, .72); }
/* active layer card (hover, or the card mid-screen on touch): the other plates fade right
   back and its plate lifts clear above the stack. Wide screens only, where the stack is shown. */
@media (min-width: 1024px) {
  .cs--xtrapower .xp-stack[data-active] .xp-plate { opacity: .14; filter: saturate(.4); }
  .cs--xtrapower .xp-stack[data-active="1"] .xp-plate[data-layer="1"],
  .cs--xtrapower .xp-stack[data-active="2"] .xp-plate[data-layer="2"],
  .cs--xtrapower .xp-stack[data-active="3"] .xp-plate[data-layer="3"] { opacity: 1; filter: none; transform: translateZ(calc(2 * var(--gap) + 40px)); border-color: var(--xp); z-index: 2; }
}
.cs--xtrapower .xp-iso-cap { position: absolute; bottom: 0; left: 50%; translate: -50% 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }

/* story order (01 Web, 02 Brand, 03 Ads) in the markup and on narrow screens; beside the
   exploded view the list is shown top layer first so each card lines up with its plate */
.cs--xtrapower .xp-layers { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .cs--xtrapower .xp-layers { flex-direction: column-reverse; justify-content: flex-end; } }
.cs--xtrapower .xp-layer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.2vw, 24px); transition: border-color .4s, background-color .4s; }
.cs--xtrapower .xp-layer .icon-tile { background: linear-gradient(145deg, rgba(62, 230, 200, .2), rgba(111, 211, 255, .1)); border-color: var(--xp-line); color: var(--xp); box-shadow: 0 8px 30px -12px var(--xp-glow); }
.cs--xtrapower .xp-layer h3 { margin-top: 6px; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.cs--xtrapower .xp-layer p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.cs--xtrapower .xp-layer .tags { margin-top: 14px; gap: 6px; }
.cs--xtrapower .xp-layer.is-active { border-color: var(--xp-line); background: var(--xp-wash), linear-gradient(180deg, var(--card-a), var(--card-b)); }
.cs--xtrapower .xp-layer .kicker-num { display: block; line-height: 1.5; }
/* "Before" line (client copy): a small mono label, then the line in the quiet text colour */
.cs--xtrapower .xp-layer .xp-layer-before { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.cs--xtrapower .xp-lb-k { flex: none; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--text-2); }
.cs--xtrapower .xp-lb-c { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* touch + narrow screens: each card carries its own plate from the stack, which lifts
   out of a ghost stack as the card crosses the middle of the screen (cs-xtrapower.js) */
.cs--xtrapower .xp-mini { display: none; }
@media (max-width: 1023px) {
  .cs--xtrapower .xp-layer { grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; }
  .cs--xtrapower .xp-layer .icon-tile { display: none; }
  .cs--xtrapower .xp-layer-body { display: contents; }
  .cs--xtrapower .xp-layer-body > * { grid-column: 1 / -1; }
  .cs--xtrapower .xp-layer-body > .kicker-num { grid-column: 1; grid-row: 1; align-self: end; }
  .cs--xtrapower .xp-layer-body > h3 { grid-column: 1; grid-row: 2; align-self: start; }
  .cs--xtrapower .xp-layer p { font-size: 16px; }
  .cs--xtrapower .xp-mini { display: block; position: relative; grid-column: 2; grid-row: 1 / span 2; width: 96px; height: 70px; margin: -4px 4px 0 0; }
  .cs--xtrapower .xp-mini::before, .cs--xtrapower .xp-mini::after, .cs--xtrapower .xp-mini-plate {
    content: ""; position: absolute; left: 16px; top: 4px; width: 64px; height: 44px; border-radius: 7px;
    transform: translateY(var(--y, 0)) rotateX(56deg) rotateZ(-40deg); transform-origin: 50% 50%;
  }
  .cs--xtrapower .xp-mini::before { --y: 18px; border: 1px dashed var(--xp-wire-2); background: rgba(var(--ink), .03); }
  .cs--xtrapower .xp-mini::after { --y: 10px; border: 1px dashed var(--xp-wire-2); background: rgba(var(--ink), .04); }
  .cs--xtrapower .xp-mini-plate {
    --y: 2px; z-index: 1; overflow: hidden; background: #0b1324; border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: -8px 10px 16px -8px rgba(0, 0, 0, .55);
    transition: transform .7s var(--spring, var(--ease)), border-color .4s, box-shadow .7s var(--ease), filter .4s;
  }
  [data-theme="light"] .cs--xtrapower .xp-mini-plate { border-color: rgba(255, 255, 255, .9); box-shadow: -8px 10px 16px -10px rgba(20, 45, 110, .5); }
  .cs--xtrapower .xp-mini-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .cs--xtrapower .xp-mini-plate b { position: absolute; left: 4px; top: 4px; padding: 1px 4px; border-radius: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; line-height: 1.3; color: #fff; background: rgba(5, 8, 16, .72); }
  .cs--xtrapower .xp-layer.is-active .xp-mini-plate { --y: -10px; border-color: var(--xp); box-shadow: -14px 22px 22px -10px rgba(0, 0, 0, .5), 0 0 22px -6px var(--xp-glow); }
  html.no-anim .cs--xtrapower .xp-mini-plate { transition: none; }
}
@media (max-width: 600px) {
  .cs--xtrapower .xp-layer { padding: 18px 16px 18px 18px; }
  .cs--xtrapower .xp-layer h3 { font-size: 1.3rem; }
  .cs--xtrapower .xp-flow { flex-direction: column; gap: 6px; }
  .cs--xtrapower .xp-flow-arrow svg { rotate: 90deg; }
}

.cs--xtrapower .xp-flow-wrap { margin-top: clamp(28px, 4vw, 48px); }
.cs--xtrapower .xp-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.cs--xtrapower .xp-flow-node { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; color: var(--text-2); text-align: center; }
.cs--xtrapower .xp-flow-node b { color: var(--text); font-weight: 600; }
.cs--xtrapower .xp-flow-end { color: var(--text); border-color: var(--xp-line); background: var(--xp-wash); }
.cs--xtrapower .xp-flow-arrow svg { width: 18px; height: 18px; color: var(--xp); }
.cs--xtrapower .xp-flow-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ---------- Range ---------- */
/* photo + data card: stacked below 1100px, side by side above it (the photo column is
   ~500px wide there, so the 864px source is never upscaled) */
.cs--xtrapower .xp-range-body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .cs--xtrapower .xp-range-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; } }
.cs--xtrapower .xp-fig { display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.cs--xtrapower .xp-fig-img { position: relative; flex: 1; overflow: hidden; }
.cs--xtrapower .xp-fig-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .cs--xtrapower .xp-fig:hover .xp-fig-img img { transform: scale(1.03); } }
/* keeps every bottle label in frame: the three containers' labels and the dishwash + tub wordmarks */
.cs--xtrapower .xp-fig--range .xp-fig-img { aspect-ratio: 4 / 3; }
.cs--xtrapower .xp-fig--range .xp-fig-img img { object-position: 50% 72%; }
@media (min-width: 1100px) {
  .cs--xtrapower .xp-fig--range .xp-fig-img { aspect-ratio: 1 / 1; }
  .cs--xtrapower .xp-fig--range .xp-fig-img img { object-position: 50% 60%; }
}
.cs--xtrapower .xp-fig figcaption { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 13px 17px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.cs--xtrapower .xp-fig figcaption .kicker-num { color: var(--xp-text); }

.cs--xtrapower .xp-range-data { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) and (max-width: 1099px) { .cs--xtrapower .xp-range-data { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (min-width: 1100px) { .cs--xtrapower .xp-range-data { align-content: center; gap: 28px; } }
.cs--xtrapower .xp-range-data::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 0% 0%, var(--xp-glow), transparent 70%); opacity: .35; pointer-events: none; }
.cs--xtrapower .xp-range-side .kicker-num { display: block; color: var(--xp-text); }
.cs--xtrapower .xp-range-h { margin-top: 10px; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.cs--xtrapower .xp-range-p { margin-top: 10px; max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--text-2); }

/* ---------- Storefront: hero shot + homepage map. The map doubles as the unit chart of the
   page's contact buttons, links and forms (one square each; slot 0 = the emphasised row). ---------- */
.cs--xtrapower .xp-store { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .cs--xtrapower .xp-store { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* wide screens only: the hero shot stays in view beside the long map (never pinned on phones) */
  .cs--xtrapower .xp-store-shot { position: sticky; top: 120px; }
}
.cs--xtrapower .xp-store-shot .browser { box-shadow: var(--shadow-l), 0 0 80px -34px var(--xp-glow); }
.cs--xtrapower .xp-store-shot .browser img { aspect-ratio: 3 / 2; }
.cs--xtrapower .xp-store-shot .browser-bar span { color: var(--text-2); }
.cs--xtrapower .xp-store-note { margin-top: 14px; color: var(--text-3); font-size: 14px; line-height: 1.5; }

/* dated source links: identifiable without relying on colour */
.cs--xtrapower .xp-src-link { color: inherit; text-decoration: underline; text-decoration-color: var(--xp-line); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cs--xtrapower .xp-src-link:hover, .cs--xtrapower .xp-src-link:focus-visible { color: var(--xp-text); text-decoration-color: currentColor; }

.cs--xtrapower .xp-map { gap: 16px; }
.cs--xtrapower .xp-map .zc-title { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.cs--xtrapower .xp-map .zc-sub { font-size: 15px; }
.cs--xtrapower .xp-map .zc-note { font-size: 13px; color: var(--text-2); }
.cs--xtrapower .xp-minimap { list-style: none; margin: 0; padding: 0; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.cs--xtrapower .xp-mm-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 146px; gap: 18px; align-items: center; padding-right: 18px; border-top: 1px solid var(--line); }
.cs--xtrapower .xp-mm-row:first-child { border-top: 0; }
.cs--xtrapower .xp-mm-text { padding: 14px 0; }
.cs--xtrapower .xp-mm-text h4 { margin-top: 3px; font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.cs--xtrapower .xp-mm-text p { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.cs--xtrapower .xp-mm-row.is-menu .xp-mm-text { padding: 10px 0; }
.cs--xtrapower .xp-mm-row.is-menu { background: rgba(var(--ink), .025); }
/* unit cell: the count, then one square per contact button, link or form */
.cs--xtrapower .xp-mm-u { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; }
.cs--xtrapower .xp-u-n { order: -1; justify-self: end; font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.cs--xtrapower .xp-u-sq { display: flex; flex-wrap: wrap; gap: 3px; }
.cs--xtrapower .xp-u-sq i { width: 11px; height: 11px; border-radius: 3px; background: var(--zc-mute); }
.cs--xtrapower .xp-mm-u.is-focus .xp-u-sq i { background: var(--zc-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.cs--xtrapower .xp-mm-u.is-focus .xp-u-n { font-weight: 600; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .cs--xtrapower .xp-mm-row { grid-template-columns: 92px minmax(0, 1fr) 136px; gap: 14px; padding-right: 14px; }
}
@media (max-width: 1023px) { .cs--xtrapower .xp-mm-text p { font-size: 14.5px; } }

/* wireframes of each homepage section: one continuous page strip on the left */
.cs--xtrapower .xp-mm-wire { position: relative; align-self: stretch; min-height: 76px; padding: 12px; display: grid; gap: 5px; align-content: center; background: var(--bg-2); border-right: 1px solid var(--line); }
.cs--xtrapower .xp-mm-wire > * { display: block; border-radius: 3px; background: var(--xp-wire); text-decoration: none; font-style: normal; }
.cs--xtrapower .xp-mm-wire em { height: 5px; }
.cs--xtrapower .xp-w-hero { grid-template-columns: 1fr 1fr 26px; grid-auto-rows: min-content; background: linear-gradient(160deg, rgba(62, 230, 200, .16), rgba(111, 211, 255, .06)), var(--bg-2); }
.cs--xtrapower .xp-w-hero em { grid-column: 1 / 3; height: 7px; background: var(--xp-wire-2); }
.cs--xtrapower .xp-w-hero em + em { width: 70%; }
.cs--xtrapower .xp-w-hero u { height: 9px; border-radius: 99px; margin-top: 3px; }
.cs--xtrapower .xp-w-hero u:first-of-type { background: var(--xp); opacity: .85; }
.cs--xtrapower .xp-w-hero s { grid-column: 3; grid-row: 1 / 4; border-radius: 6px; background: linear-gradient(180deg, var(--xp-2), var(--xp)); opacity: .55; }
.cs--xtrapower .xp-w-nav { grid-template-columns: 1fr repeat(4, 9px); align-items: center; min-height: 0; background: rgba(var(--ink), .07); }
.cs--xtrapower .xp-w-nav em { height: 6px; width: 70%; background: var(--xp-wire-2); }
.cs--xtrapower .xp-w-nav u { height: 4px; }
.cs--xtrapower .xp-w-nav u:last-child { background: var(--xp); opacity: .8; }
.cs--xtrapower .xp-w-tiles { grid-template-columns: repeat(3, 1fr); }
.cs--xtrapower .xp-w-tiles i { aspect-ratio: 1; }
.cs--xtrapower .xp-w-story { grid-template-columns: 30px 1fr; }
.cs--xtrapower .xp-w-story s { grid-row: 1 / 4; height: 30px; }
.cs--xtrapower .xp-w-story em:last-child { width: 60%; }
.cs--xtrapower .xp-w-deal { grid-template-columns: 1fr; }
.cs--xtrapower .xp-w-deal s { height: 18px; background: var(--xp-wash), var(--xp-wire-2); border: 1px solid var(--xp-line); }
.cs--xtrapower .xp-w-deal em:last-child { width: 55%; }
.cs--xtrapower .xp-w-cards { grid-template-columns: repeat(3, 1fr); }
.cs--xtrapower .xp-w-cards i { height: 14px; }
.cs--xtrapower .xp-w-steps { grid-template-columns: repeat(3, 1fr); justify-items: center; }
.cs--xtrapower .xp-w-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-2); background: transparent; border: 1px solid var(--xp-wire-2); }
.cs--xtrapower .xp-w-range { grid-template-columns: repeat(4, 1fr); }
.cs--xtrapower .xp-w-range i { height: 18px; position: relative; }
.cs--xtrapower .xp-w-range i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 3px; bottom: 5px; border-radius: 3px 3px 2px 2px; background: var(--xp); opacity: .45; }
/* newsletter band: a heading line over an email bar with a send pill */
.cs--xtrapower .xp-w-form { background: linear-gradient(160deg, rgba(62, 230, 200, .12), rgba(111, 211, 255, .05)), var(--bg-2); justify-items: center; }
.cs--xtrapower .xp-w-form em { width: 62%; height: 6px; background: var(--xp-wire-2); }
.cs--xtrapower .xp-w-form > span { display: flex; gap: 4px; width: 100%; background: none; }
.cs--xtrapower .xp-w-form u { flex: 1; height: 13px; border-radius: 99px; border: 1px solid var(--xp-wire-2); background: rgba(var(--ink), .04); }
.cs--xtrapower .xp-w-form s { width: 20px; height: 13px; border-radius: 99px; background: var(--xp); opacity: .8; }
.cs--xtrapower .xp-w-foot { background: rgba(var(--ink), .07); }
.cs--xtrapower .xp-w-foot em:nth-child(even) { width: 70%; }
@media (max-width: 600px) {
  .cs--xtrapower .xp-mm-row { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; padding-right: 12px; }
  .cs--xtrapower .xp-mm-wire { padding: 9px; gap: 4px; }
  .cs--xtrapower .xp-w-hero { grid-template-columns: 1fr 1fr 18px; }
  .cs--xtrapower .xp-w-steps i { width: 16px; height: 16px; font-size: 8px; }
  .cs--xtrapower .xp-w-form s { width: 14px; }
  .cs--xtrapower .xp-w-nav { grid-template-columns: 1fr repeat(4, 6px); }
  /* a compact strip on phones: section titles, with the contact squares under the title */
  .cs--xtrapower .xp-mm-row { grid-template-columns: 78px minmax(0, 1fr); gap: 0 12px; }
  .cs--xtrapower .xp-mm-wire { grid-row: 1 / span 2; min-height: 58px; }
  .cs--xtrapower .xp-mm-text { padding: 11px 0; }
  .cs--xtrapower .xp-mm-row.has-u .xp-mm-text { padding-bottom: 6px; }
  .cs--xtrapower .xp-mm-text h4 { font-size: 16px; }
  .cs--xtrapower .xp-mm-text p, .cs--xtrapower .xp-mm-u.is-empty { display: none; }
  .cs--xtrapower .xp-mm-u { grid-column: 2; grid-template-columns: auto minmax(0, 1fr); padding-bottom: 12px; }
  .cs--xtrapower .xp-u-n { justify-self: start; min-width: 14px; font-size: 18px; }
  .cs--xtrapower .xp-u-sq { gap: 4px; }
  .cs--xtrapower .xp-u-sq i { width: 14px; height: 14px; border-radius: 4px; }
  .cs--xtrapower .xp-map .zc-note { font-size: 14px; }
  .cs--xtrapower .xp-store-note { font-size: 14.5px; }
}

/* ---------- Outcome band: the client's outcome (credited to the client) + a verified-facts
   card. Same proportions as the Ant-Hive band; stacks on narrow screens. ---------- */
.cs--xtrapower .xp-band {
  display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr);
  background: radial-gradient(70% 120% at 100% 0%, var(--xp-glow), transparent 60%), var(--xp-wash), linear-gradient(140deg, rgba(0, 156, 255, .1), rgba(155, 123, 255, .05));
  border-color: var(--xp-line);
}
@media (min-width: 992px) { .cs--xtrapower .xp-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; } }
.cs--xtrapower .xp-band p.xp-band-p { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.4; max-width: 34ch; }
.cs--xtrapower .xp-band p.xp-band-src { margin-top: 14px; font-size: 13px; letter-spacing: 0; line-height: 1.4; color: var(--text-2); }
.cs--xtrapower .xp-verify { padding: 22px; border-radius: var(--r-l); border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cs--xtrapower .xp-verify-h { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); line-height: 1.4; }
.cs--xtrapower .xp-verify-h svg { width: 14px; height: 14px; margin-top: 1px; flex: none; color: var(--xp-text); }
.cs--xtrapower .xp-verify-d { white-space: nowrap; }
.cs--xtrapower .xp-verify-h .xp-src-link { text-decoration-color: currentColor; }
.cs--xtrapower .xp-verify ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.cs--xtrapower .xp-verify li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.cs--xtrapower .xp-verify li:first-child { border-top: 0; }
.cs--xtrapower .xp-verify li > svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--xp-text); }
.cs--xtrapower .xp-verify li b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.cs--xtrapower .xp-verify li span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
@media (max-width: 600px) {
  .cs--xtrapower .xp-band { padding: 26px 20px; gap: 22px; border-radius: var(--r-l); }
  .cs--xtrapower .xp-verify { padding: 16px 16px 8px; }
  .cs--xtrapower .xp-verify-h { font-size: 10.5px; letter-spacing: .1em; }
  .cs--xtrapower .xp-verify-sep { display: none; }
  .cs--xtrapower .xp-verify-c { display: block; margin-top: 2px; }
  .cs--xtrapower .xp-verify li b { font-size: 16px; }
  .cs--xtrapower .xp-verify li span { font-size: 15px; }
}

/* ---------- touch + phones: 44px tap targets (same treatment as the Ant-Hive page) ---------- */
.cs--xtrapower .crumbs a { display: inline-block; min-width: 44px; padding: 13px 4px; margin: -13px -4px; text-align: center; }
.cs--xtrapower .zc-table summary { display: inline-flex; align-items: center; min-height: 44px; }
/* inline source links: vertical padding on an inline box widens the hit area to ~44px
   without moving the text around it */
.cs--xtrapower .xp-src-link { padding-block: 14px; }
.cs--xtrapower .xp-verify-h .xp-src-link { padding-block: 15px; }
@media (max-width: 600px) {
  .cs--xtrapower .xp-facts dl > div { font-size: 14.5px; }
  .cs--xtrapower .xp-facts-fn { font-size: 13px; }
  .cs--xtrapower .zc-note { font-size: 14px; }
  .cs--xtrapower .zc-table summary { font-size: 14px; }
  .cs--xtrapower .xp-fig figcaption { font-size: 15px; }
  .cs--xtrapower .xp-flow-node { font-size: 15px; }
  .cs--xtrapower .xp-flow-note, .cs--xtrapower .xp-band p.xp-band-src { font-size: 14px; }
  .cs--xtrapower .xp-layer .xp-layer-before { font-size: 15px; }
}