/* THE WARRANTY BRAIN(TM), version two: thin streaks of light into a holographic brain.
   Namespace .wb-*. One entry point: initWarrantyBrain(rootEl) in brain.js.

   Re-skinning is a token swap: every colour the piece uses is a custom property in the
   first block below (a second block holds the section's own colours).

   Flat colour only: no gradients anywhere. Each streak tapers and fades with stepped
   width and stepped opacity (brain.js). Motion is transform, opacity and stroke offsets
   only, driven by one JS playhead (no CSS keyframe loops), so a pause stops everything. */

/* ---------- tokens: every colour in the piece ---------- */
.wb-artifact {
  --wb-stage-bg: transparent;                 /* the page canvas and its grid show through */
  --wb-ink: #14151C;
  --wb-ink-2: #494C59;
  --wb-line: rgba(20, 21, 28, .10);

  --wb-streak: #5B53E8;                       /* the streaks; brain.js steps their width and opacity */
  --wb-ripple: #5B53E8;                       /* the one ring where a streak lands */

  --wb-card-bg: #FFFFFF;
  --wb-card-line: rgba(20, 21, 28, .07);
  --wb-card-title: #14151C;
  --wb-card-sub: #6B6F7C;
  --wb-card-shadow: 0 1px 2px rgba(20, 21, 28, .05), 0 16px 36px -16px rgba(20, 21, 28, .24);
  --wb-check: #5B53E8;
  --wb-check-bg: rgba(91, 83, 232, .12);

  --wb-label: #14151C;                        /* "Warranty Brain(TM)" */
  --wb-focus: #5B53E8;
}

/* ---------- tokens: section scaffolding ---------- */
.wb-section {
  --wb-copy-2: var(--ink-2, #494C59);         /* supporting point text */
  --wb-rule: var(--line, rgba(20, 21, 28, .10));
  --wb-marker: var(--indigo, #5B53E8);
}

/* ---------- section layout (travels with the section) ----------
   Wide screens: the eyebrow and heading run across the top, then two columns, the text on
   the left (lede, then the three points) and the visual on the right. Under 980px it stacks:
   lede, visual, points. */
.wb-section { overflow: hidden; }                      /* streaks may run past the visual; the section clips at the viewport */
.wb-intro h2 { margin-top: 20px; }
.wb-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: clamp(40px, 5vw, 76px); align-items: center; margin-top: 44px;
}
.wb-text .lede { margin: 0; }
.wb-points { list-style: none; margin: 34px 0 0; padding: 0; border-bottom: 1px solid var(--wb-rule); }
.wb-point { position: relative; padding: 17px 0 18px 22px; border-top: 1px solid var(--wb-rule); }
.wb-point::before { content: ""; position: absolute; left: 1px; top: 25px; width: 7px; height: 7px; background: var(--wb-marker); }
.wb-point h3 { font-size: 1.04rem; line-height: 1.3; }
.wb-point p { margin: 5px 0 0; color: var(--wb-copy-2); font-size: .92rem; line-height: 1.6; }
@media (max-width: 979px) {
  .wb-body { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 26px; }
  .wb-text { display: contents; }                      /* lets the lede, the visual and the points stack in that order */
  .wb-text .lede { order: 1; max-width: 44rem; }
  .wb-artifact { order: 2; }
  .wb-points { order: 3; margin-top: 30px; }
}

/* ---------- the artifact ---------- */
.wb-artifact { margin: 0; color: var(--wb-ink); font: 400 14px/1.5 "Inter", sans-serif; }
.wb-artifact *, .wb-artifact *::before, .wb-artifact *::after { box-sizing: border-box; }
.wb-artifact p { margin: 0; }
.wb-artifact svg { display: block; max-width: none; }
.wb-artifact button { font: inherit; }
.wb-instant, .wb-instant * { transition: none !important; }

/* The stage. --wb-layout tells brain.js which composition to draw; --wb-roam-left is how far a
   streak may run past the stage's left edge: a px value beside the text column (only into the
   gap between the columns), or "screen" when stacked (out to the screen edge). */
.wb-stage {
  --wb-layout: column; --wb-roam-left: 24px;
  position: relative; aspect-ratio: 6 / 5;
  background: var(--wb-stage-bg);
  clip-path: inset(0 -100vw 0 -24px);         /* top, bottom and the text side clip; the right may run to the page edge */
}
.wb-scene { position: absolute; inset: 0; }

/* layers, back to front: far-side streaks, brain, near-side streaks, card and label */
.wb-orbits { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wb-orbits-back { z-index: 2; }
.wb-orbits-front { z-index: 4; }
.wb-brain { position: absolute; z-index: 3; left: 22%; top: 27%; width: 56%; aspect-ratio: 1000 / 808; will-change: transform; }
.wb-brain-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* streaks (built by brain.js): SVG strokes, butt ends, so nothing round anywhere */
.wb-tail { fill: none; stroke: var(--wb-streak); stroke-linecap: butt; stroke-linejoin: round; }
/* the landing ripple: one flat ring on the brain's surface (floats with the brain) */
.wb-ripple {
  position: absolute; left: 0; top: 0; width: 24px; height: 8px; margin: -4px 0 0 -12px;
  border: 1.5px solid var(--wb-ripple); border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity;
}

/* the approval card */
.wb-card {
  position: absolute; z-index: 5; left: 44%; top: 10%;
  display: flex; align-items: center; gap: 11px; padding: 10px 18px 11px 11px;
  background: var(--wb-card-bg); border: 1px solid var(--wb-card-line); border-radius: 13px;
  box-shadow: var(--wb-card-shadow); white-space: nowrap; will-change: transform, opacity;
}
.wb-live .wb-card { left: 0; top: 0; opacity: 0; visibility: hidden; }
.wb-card-ring { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wb-check-bg); will-change: transform; }
.wb-card-ring svg { width: 18px; height: 18px; fill: none; stroke: var(--wb-check); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.wb-card-text { display: flex; flex-direction: column; }
.wb-card-title { font: 600 16px/1.2 "Space Grotesk", sans-serif; letter-spacing: -.02em; color: var(--wb-card-title); }
.wb-card-sub { margin-top: 2px; font: 500 12.5px/1.3 "Inter", sans-serif; color: var(--wb-card-sub); }
.wb-card-ptr {
  position: absolute; left: -6px; bottom: -6.5px; width: 12px; height: 12px;
  background: var(--wb-card-bg); border-right: 1px solid var(--wb-card-line); border-bottom: 1px solid var(--wb-card-line);
  border-bottom-right-radius: 2px; transform: translateX(28px) rotate(45deg);
}

/* the static label, top right of the visual */
.wb-label {
  position: absolute; z-index: 5; right: 2px; top: 3%;
  font: 500 17px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.015em; color: var(--wb-label); white-space: nowrap;
}
/* the TM mark. Space Grotesk draws its TM glyph small and already raised, so the sup is set larger than
   the label and nudged down: the mark reads at about half the cap height, its top just above the capitals. */
.wb-label sup { font-size: 1.4em; font-weight: 500; line-height: 0; vertical-align: -.16em; margin-left: 1px; letter-spacing: 0; color: var(--wb-label); }

/* ---------- caption and the pause control ---------- */
.wb-caption { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--wb-line); padding: 18px 2px 0; margin: 8px 0 0; }
.wb-caption-copy { font: 500 17px/1.35 "Space Grotesk", sans-serif; letter-spacing: -.025em; color: var(--wb-ink); }
.wb-motion-button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--wb-line); border-radius: 50%; color: var(--wb-ink-2); background: transparent; cursor: pointer; }
.wb-motion-button[hidden] { display: none; }
.wb-motion-button:hover { border-color: var(--wb-focus); color: var(--wb-focus); }
.wb-motion-button:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 4px; border-radius: 50%; }
.wb-motion-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wb-motion-button .wb-play-icon { display: none; }
.wb-motion-button[aria-pressed="true"] .wb-pause-icon { display: none; }
.wb-motion-button[aria-pressed="true"] .wb-play-icon { display: block; }

/* ---------- responsive ---------- */
/* stacked: the visual takes the full width, streaks may run to both screen edges */
@media (max-width: 979px) {
  .wb-artifact { margin-top: 30px; }
  .wb-stage { --wb-layout: wide; --wb-roam-left: screen; aspect-ratio: 16 / 10; clip-path: inset(0 -100vw); }
  .wb-label { right: 2.5%; top: 6%; font-size: 18px; }
}
@media (max-width: 760px) {
  .wb-stage { margin: 0 -28px; aspect-ratio: 16 / 11; }
  .wb-caption-copy { font-size: 16.5px; }
}
@media (max-width: 699px) {
  .wb-stage { --wb-layout: narrow; aspect-ratio: 39 / 37; max-height: 600px; }
  .wb-label { top: 4.5%; right: 20px; font-size: 16px; }
  .wb-card { gap: 10px; padding: 8px 15px 9px 9px; border-radius: 11px; }
  .wb-card-ring { width: 28px; height: 28px; }
  .wb-card-ring svg { width: 16px; height: 16px; }
  .wb-card-title { font-size: 14.5px; }
  .wb-card-sub { font-size: 11.5px; margin-top: 1px; }
  .wb-card-ptr { width: 10px; height: 10px; left: -5px; bottom: -5.5px; }
}
@media (max-width: 640px) {
  .wb-stage { margin: 0 -20px; }
}

/* ---------- reduced motion: brain.js draws the still; nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .wb-motion-button { display: none; }
}

/* ======================================================================================
   THE MINI BRAIN (home page, dark warranty band). Namespace .wbm, on top of .wb-artifact.
   Same engine as the section (brain.js, layout "mini"): two thin streaks, a slower beat,
   a gentle float, an optional tiny chip. Every rule below is scoped to .wbm, so the big
   section is untouched. Flat colour only; the indigo stays #5B53E8.
   ====================================================================================== */
.wbm {
  --wb-ink: #F5F3EE;
  --wb-ink-2: rgba(245, 243, 238, .72);       /* same as .band-dark p */
  --wb-line: rgba(250, 248, 244, .12);        /* same as --dark-line */
  --wb-streak: #A7A2F5;                       /* light lavender: the site's indigo tint for dark */
  --wb-ripple: #A7A2F5;
  --wb-card-bg: #1A1B25;                      /* --dark-2, like the band's cards */
  --wb-card-line: rgba(250, 248, 244, .16);
  --wb-card-title: #FFFFFF;
  --wb-card-sub: rgba(245, 243, 238, .66);
  --wb-card-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7);
  --wb-check: #FFFFFF;
  --wb-check-bg: #5B53E8;                     /* the check stays indigo */
  --wb-focus: #A7A2F5;
  --wbm-link: #A7A2F5;                        /* 8:1 on the band */
}

/* the band: two columns on desktop. The text column keeps its 680px measure exactly. */
.wbm-band { overflow: hidden; }               /* a streak may drift in from the screen edge; never a sideways scroll */
.wbm-head { display: grid; grid-template-columns: minmax(0, 680px) minmax(200px, 1fr); column-gap: clamp(28px, 3vw, 40px); align-items: center; }
.wbm.wb-artifact { margin: 0; justify-self: center; width: 100%; max-width: 340px; }

/* the stage (the picture is a mouse shortcut to the section; the text link is the real link) */
.wbm-stage-link { display: block; color: inherit; text-decoration: none; }
.wbm .wb-stage {
  --wb-layout: mini; --wb-roam-left: 24px;
  aspect-ratio: 34 / 25; margin: 0; max-height: none;
  clip-path: inset(-44px -100vw -18px -24px);     /* the right may run to the page edge, like the section */
}
.wbm .wb-brain-img { transition: filter .25s ease; }
.wbm-stage-link:hover .wb-brain-img { filter: brightness(1.14); }

/* the chip: one line, "+ Water Pump · OEM Approved" */
.wbm .wb-card { gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; }
.wbm .wb-card-ring { width: 20px; height: 20px; }
.wbm .wb-card-ring svg { width: 12px; height: 12px; stroke-width: 2.6; }
.wbm .wb-card-text { flex-direction: row; align-items: baseline; gap: 5px; }
.wbm .wb-card-title { font-size: 12.5px; letter-spacing: -.01em; }
.wbm .wb-card-sub { margin: 0; font-size: 11px; }
.wbm-sep { font: 500 11px/1 "Inter", sans-serif; color: var(--wb-card-sub); }
.wbm .wb-card-ptr { width: 8px; height: 8px; left: -4px; bottom: -4.5px; }

/* the blurb, the link and the pause control */
.wbm-cap { position: relative; margin: 6px 0 0; padding: 14px 40px 0 2px; border-top: 1px solid var(--wb-line); }
.wbm .wbm-blurb { font: 500 15px/1.45 "Space Grotesk", sans-serif; letter-spacing: -.015em; color: var(--wb-ink-2); text-wrap: balance; }
.wbm-more {
  display: inline-block; margin-top: 8px;
  font: 500 14px/1.4 "Space Grotesk", sans-serif; color: var(--wbm-link); text-decoration: none;
}
.wbm-more .arr { display: inline-block; margin-left: 4px; }
.wbm-more:hover, .wbm-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wbm-more .arr { transition: transform .18s ease; }
.wbm-more:hover .arr, .wbm:has(.wbm-stage-link:hover) .wbm-more .arr { transform: translateX(3px); }
.wbm .wb-motion-button { position: absolute; top: 12px; right: 0; width: 30px; height: 30px; }
.wbm .wb-motion-button svg { width: 13px; height: 13px; }

/* narrow desktops: the column is under 340px, so the chip stacks onto two short lines */
@media (min-width: 981px) and (max-width: 1100px) {
  .wbm .wb-card { padding: 5px 12px 6px 5px; border-radius: 11px; }
  .wbm .wb-card-text { flex-direction: column; align-items: flex-start; gap: 0; }
  .wbm-sep { display: none; }
}

/* tablet and phone: a compact row under the lede, a small live brain beside the blurb */
@media (max-width: 980px) {
  .wbm-head { grid-template-columns: minmax(0, 1fr); }
  .wbm.wb-artifact {
    justify-self: start; max-width: 540px; margin-top: 30px;
    display: grid; grid-template-columns: clamp(118px, 30vw, 180px) minmax(0, 1fr); column-gap: 18px; align-items: center;
  }
  .wbm-stage-link { margin-left: -14px; }       /* the brain's left edge lines up with the text */
  .wbm .wb-stage { clip-path: inset(-14px -12px); }
  .wbm .wb-card { display: none; }            /* too small for the chip; the blurb says it */
  .wbm-cap { margin: 0; padding: 0 40px 0 0; border-top: 0; }
  .wbm .wbm-blurb { font-size: 14.5px; }
  .wbm .wb-motion-button { top: -2px; }
}