/* The How we work cards (src/components/home/HowCard.astro; motion: public/scripts/home/how-timelines.js), shared by the
   homepage, /how-we-work/ and /services/. The tiles and pinned stage around them stay with each page. */
/* ======================================================================
   v85: the How we work cards in the Polar look (Dylan, 23 Oct 2026: "refined, quieter and smoother", then "show animations
   that are relevant for that point but just the refined and simple look"). One recipe for all three (.hw, HowCard.astro):
   - A near black card (8px padding, 20px corners) with a 48px header (icon and name left, a status that rolls when the step is
     done right) over two #141414 panels 8px apart (16px padding, 12px corners).
   - Each panel: a title row (18px title, muted tag), then that step's own picture: Position's map and bars, Build's product
     page and section checklist (pending dot, spinner, white tick), Test's A and B tiles and conversion lines. A result row
     under a hairline rolls to its done word.
   - Motion (the timeline script, one 11.2s loop per card): everything rises 8px and fades in on the site ease; each step plays
     its picture once, calmly; nothing overshoots. Transforms, opacity and text colour only. The CSS below is the FINAL state (reduced
     motion and no JS show it, still); the timelines hold the empty start state.
   - Colour: white and greys; lime only on the status dot when done.
   ====================================================================== */
.hw { position: relative; width: 384px; padding: 8px; border-radius: 20px; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: #fff; text-align: left; }
.hw-sd { position: absolute; inset: 12px 8px 8px; z-index: -1; border-radius: 20px; pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 16px -4px rgba(0, 0, 0, .3), 0 24px 48px -8px rgba(0, 0, 0, .45), 0 48px 96px -24px rgba(0, 0, 0, .4);
  transform: translate3d(0, var(--sd, 0px), 0); }
.hw svg { display: block; }
.hw i { display: block; font-style: normal; }
:where(.hw) p, :where(.hw) ul { margin: 0; padding: 0; list-style: none; }
.hw-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; padding: 0 16px; }
.hw-tl { display: flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.hw-tl svg { width: 16px; height: 16px; flex: none; }
.hw-dt { width: 6px; height: 6px; flex: none; border-radius: 999px; background: #8f8f8f; }
.hw .hw-dl { background: #A3E635; }
.hw-sw { display: grid; justify-items: end; height: 20px; overflow: hidden; font-size: 14px; line-height: 20px; }
.hw-sw > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; height: 20px; white-space: nowrap; color: var(--muted); }
.hw-sw > span:first-child { opacity: 0; transform: translate3d(0, -20px, 0); }
.hw-sw > span + span { color: #e6e6e6; }
.hw-pns { display: grid; gap: 8px; }
.hw-pn { padding: 16px; border-radius: 12px; background: #141414; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.hw-pt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hw-pt > span:first-child { font-size: 18px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.hw-pt > span + span { min-width: 0; font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-rw { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; color: var(--muted); white-space: nowrap; }
.hw-rw > span + span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hw-dv { height: 1px; margin: 16px 0 8px; background: rgba(255, 255, 255, .08); }
.hw-dv + .hw-rw { margin-top: 0; }
.hw-fn > span:first-child { color: #d6d6d6; }
.hw-rl { display: grid; justify-items: end; height: 24px; overflow: hidden; }
.hw-rl > span { grid-area: 1 / 1; height: 24px; }
.hw-rl > span:first-child { opacity: 0; transform: translate3d(0, -24px, 0); }
.hw-rl > span + span { color: #fff; font-weight: 500; }
.hw-ck { display: grid; gap: 4px; margin-top: 16px; }
.hw-ck li { display: flex; align-items: center; gap: 12px; height: 28px; color: #fff; white-space: nowrap; }
.hw-ic { position: relative; flex: none; width: 16px; height: 16px; }
.hw-ic > * { position: absolute; inset: 0; }
.hw-ic > i { inset: 6px; border-radius: 999px; background: #5c5c5c; opacity: 0; }
.hw-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.hw-sp { opacity: 0; color: #a8a8a8; } .hw-sp svg { stroke-width: 1.6; }
.hw-tk { color: #fff; } .hw-tk svg { stroke-width: 1.8; }
.hw-pt + * { margin-top: 16px; }
/* 01 Position (v86): a market map. Two hairline axes and their four labels; competitors (grey dots) crowd the generic,
   price led corner; your brand (a white dot) starts in the middle and moves into the empty distinct, value led corner,
   which lights faintly; a ring spreads once and its name comes in. */
.pm { position: relative; height: 200px; }
.hw .pm-ax { position: absolute; background: rgba(255, 255, 255, .1); }
.pm-x { left: 0; right: 0; top: 50%; height: 1px; }
.pm-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.hw .pm-q { position: absolute; left: 50%; right: 0; top: 0; bottom: 50%; border-radius: 0 8px 0 0; background: rgba(255, 255, 255, .04); }
.pm-l { position: absolute; z-index: 1; padding: 0 8px; background: #141414; font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.pm-lt { top: 0; left: 50%; transform: translate3d(-50%, 0, 0); }
.pm-lb { bottom: 0; left: 50%; transform: translate3d(-50%, 0, 0); }
.pm-ll { left: 0; top: 50%; padding-left: 0; transform: translate3d(0, -50%, 0); }
.pm-lr { right: 0; top: 50%; padding-right: 0; transform: translate3d(0, -50%, 0); }
.hw .pm-d { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 999px; background: #4a4a4a; }
.pm-me { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 0; height: 0; }
.hw .pm-me > i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 999px; background: #fff; }
.hw .pm-me > b { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); opacity: 0; }
.pm-me > span { position: absolute; left: 0; top: 12px; transform: translate3d(-50%, 0, 0); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
/* 02 Build (v86): a phone in the panel; inside it the page stacks up (hero, offer and buy button, reviews, FAQ), each as its
   line in the list beside it ticks off; then the screen scrolls a little, as if checking the build. */
.bd { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 24px; }
.bd-ph { position: relative; height: 240px; padding: 6px; border-radius: 22px; background: #1c1c1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hw .bd-sp { position: absolute; z-index: 1; left: 50%; top: 12px; width: 36px; height: 6px; margin-left: -18px; border-radius: 999px; background: #0b0b0b; }
.bd-scr { height: 100%; border-radius: 16px; background: #101010; overflow: hidden; }
.bd-sc { display: grid; gap: 12px; padding: 26px 10px 10px; }
.bd-s { display: grid; gap: 6px; }
.hw .bd-img { position: relative; height: 72px; border-radius: 6px; background: #222; }
.hw .bd-img > i { position: absolute; left: 40%; right: 40%; top: 22%; bottom: 14%; border-radius: 6px 6px 4px 4px; background: #3a3a3a; }
.hw .bd-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .8); }
.hw .bd-dim { background: rgba(255, 255, 255, .28); }
.hw .bd-w30 { width: 30%; } .hw .bd-w50 { width: 50%; } .hw .bd-w70 { width: 70%; } .hw .bd-w80 { width: 80%; } .hw .bd-w90 { width: 90%; }
.hw .bd-btn { height: 20px; border-radius: 999px; background: #f2f2f2; }
.bd-st { display: flex; gap: 3px; }
.hw .bd-st i { width: 8px; height: 8px; background: rgba(255, 255, 255, .55);
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 78%, 19% 100%, 29% 61%, 0 38%, 37% 35%); }
.bd-faq { gap: 0; }
.hw .bd-faq i { height: 16px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.bd .hw-ck { margin-top: 0; gap: 12px; }
/* 03 Test */
.ab-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: 120px; }
.ab-v { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border-radius: 8px; background: #1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-size: 14px; line-height: 20px; color: var(--muted); }
.ab-vb > span:first-child { color: #fff; }
.ab-va { opacity: .5; }
.ab-cols { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.hw .ab-cols i { flex: 1 1 0; height: 100%; border-radius: 2px; background: #5c5c5c; transform-origin: bottom; transform: scaleY(var(--h)); }
.hw .ab-vb .ab-cols i { background: rgba(255, 255, 255, .9); }
.ab-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
.ab-wk { position: absolute; right: 12px; top: 14px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #fff; color: #0b0b0b; }
.ab-wk svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-chh { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.ab-lg { display: flex; gap: 16px; }
.ab-lg > span { display: flex; align-items: center; gap: 8px; }
.hw .ab-lg i { width: 12px; height: 2px; border-radius: 1px; background: #6a6a6a; }
.hw .ab-lg > span + span i { background: #fff; }
.ab-ch { position: relative; height: 64px; }
.hw .ab-ch > i { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .06); }
.ab-ch > i:nth-child(1) { top: 0; } .ab-ch > i:nth-child(2) { top: 50%; } .ab-ch > i:nth-child(3) { bottom: 0; }
.ab-ch svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ab-ch path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ab-la { stroke: #6a6a6a; stroke-width: 1.5; } .ab-lb { stroke: #fff; stroke-width: 2; }
.ab-e { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: #6a6a6a; }
.ab-eb { background: #fff; }