/* =====================================================================
   LABEL REWORK: the page and its hero animation

   THE ANIMATION IS A SET OF STATES, NOT A TIMELINE. Every moving part in
   the hero carries `data-at` (the step it appears on) and/or `data-out`
   (the step it leaves on). label-rework.js walks a step counter from 0
   (the "before" label) to 10 (design checked) and toggles `.off` on
   each part; the transitions below do the rest. Only opacity and
   transform ever change, so nothing reflows and nothing repaints beyond
   the part itself.

   THE MARKUP IS THE FINAL STATE. With no script, or with
   prefers-reduced-motion, the page shows step 10 exactly as authored:
   the redesigned label, every check ticked, "Design checked" and the
   go-live date. The script only rewinds it to play it.

   COLOUR. Leaf is spent on one thing here, a check that passed, which
   is what it means in the product. The "working" sweep and the panel
   rings are Bridge Teal because they are information about the run,
   not a status on a fact. Pollen and Coral appear only in the status
   legend further down the page, carrying their product meanings.

   The stage sits on a dark band, where the theme turns --t-paper
   translucent, so it pins its own light surface tokens rather than
   inheriting the band's.
   ===================================================================== */

.rw {
  --rw-paper: #FFFFFF; --rw-mist: #F5FAF7; --rw-ink: #0A2E28; --rw-ink-2: #4A6B61;
  --rw-ink-3: #7B9A91; --rw-line: #DCEAE2; --rw-grey: #C9D8D1; --rw-grey-2: #E3ECE7;
  --rw-leaf: #00C878; --rw-leaf-deep: #00854F; --rw-teal: #2FC8C2; --rw-kelp: #0A2E28;
  margin: 0; border-radius: 20px; overflow: hidden; background: var(--rw-paper);
  color: var(--rw-ink); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 40px 80px -40px rgba(0, 0, 0, .6);
}
/* on a light band the stage needs a visible edge and a softer shadow */
.t-mist .rw, .t-paper .rw { border-color: var(--rw-line);
  box-shadow: 0 1px 2px rgba(10, 46, 40, .05), 0 30px 60px -38px rgba(10, 46, 40, .45); }
.rw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--rw-line); background: var(--rw-mist); }
.rw-bar .dots { display: inline-flex; gap: 5px; }
.rw-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rw-line); display: block; }
.rw-bar b { font-family: var(--t-mono); font-size: .7rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--rw-ink-2); }
.rw-inputs { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rw-chip { font-family: var(--t-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rw-line); color: var(--rw-ink-2);
  background: var(--rw-paper); white-space: nowrap; }

/* the hero gives the stage the wider column, so the pack reads at size */
@media (min-width: 981px) {
  .ob-root .rw-hero.t-split { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
}
.rw-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px); padding: clamp(14px, 2vw, 22px); align-items: center; }
.rw-art svg { display: block; width: 100%; height: auto; }

.rw-side { display: grid; gap: 12px; align-content: start; }
.rw-side-head { margin: 0; font-family: var(--t-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rw-ink-3); }
.rw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rw-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px;
  align-items: start; font-size: .86rem; line-height: 1.35; color: var(--rw-ink-3);
  transition: color .35s ease; }
.rw-checks li.done { color: var(--rw-ink); }
.rw-tick { position: relative; width: 20px; height: 20px; }
.rw-tick::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--rw-grey); }
.rw-tick svg { position: absolute; inset: 0; width: 20px; height: 20px; opacity: 0;
  transform: scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.5, .64, 1); }
.rw-checks li.done .rw-tick svg { opacity: 1; transform: none; }
/* the check being worked on: a soft teal pulse on its ring */
.rw-tick::after { content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--rw-teal); opacity: 0; }
.rw-checks li.now .rw-tick::after { animation: rw-pulse 1s ease-in-out infinite; }
@keyframes rw-pulse { 0%, 100% { opacity: 0; transform: scale(.85); } 50% { opacity: 1; transform: none; } }

.rw-result { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px;
  padding-top: 12px; border-top: 1px solid var(--rw-line); }
.rw-done { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ob-font-display);
  font-weight: 800; font-size: .98rem; color: var(--rw-leaf-deep); }
.rw-done::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--rw-leaf);
  box-shadow: 0 0 0 3px rgba(0, 200, 120, .18); }
.rw-date { border-color: var(--rw-kelp); color: var(--rw-kelp); }

.rw-cap { padding: 10px 18px 12px; border-top: 1px solid var(--rw-line); background: var(--rw-mist);
  font-size: .78rem; line-height: 1.45; color: var(--rw-ink-2); }

/* ---- the states ---------------------------------------------------- */
.rw [data-at], .rw [data-out] {
  transition: opacity .45s var(--t-ease, ease), transform .5s var(--t-ease, ease); }
.rw .off { opacity: 0; }
.rw svg .pop { transform-box: fill-box; transform-origin: center; }
.rw svg .pop.off { transform: scale(.55); }
.rw svg .rise.off { transform: translateY(8px); }
.rw .rw-result.off { transform: translateY(4px); }

.rw svg .ring { fill: none; stroke: var(--rw-teal); stroke-width: 2; stroke-dasharray: 5 4; }

/* the working sweep: a band of teal travelling down the panel */
.rw svg .scan { transform-box: view-box; animation: rw-scan 1s linear infinite; }
.rw svg .scan.off { animation-play-state: paused; }
@keyframes rw-scan { from { transform: translateY(0); } to { transform: translateY(var(--rw-travel, 180px)); } }

/* the peel label lifts while it is being reworked, and lies back after */
.rw svg .peel { transform-box: fill-box; transform-origin: 0% 100%;
  transition: transform .5s cubic-bezier(.34, 1.3, .64, 1); }
.rw[data-step="6"] svg .peel { transform: translate(-2px, -7px) rotate(-4deg); }
.rw svg .peel-shadow { opacity: 0; transition: opacity .4s ease; }
.rw[data-step="6"] svg .peel-shadow { opacity: 1; }

@media (max-width: 560px) {
  .rw-body { grid-template-columns: minmax(0, 1fr); }
  .rw-inputs { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rw [data-at], .rw [data-out], .rw-checks li, .rw-tick svg, .rw svg .peel { transition: none; }
  .rw svg .scan, .rw-checks li.now .rw-tick::after { animation: none; }
}

/* ---- the page ------------------------------------------------------ */
/* Tier cards: the same .plan component as the price list, restated
   here because the price list keeps its rules in its own page block. */
.rw-page .plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 30px 0 10px; align-items: stretch; }
.rw-page .plan { display: flex; flex-direction: column; gap: 14px; }
.rw-page .plan .price { font-family: var(--ob-font-display); font-size: 40px; font-weight: 800; }
.rw-page .plan .price span { font-size: 15px; color: var(--ob-ink-2); font-weight: 600; }
.rw-page .plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px;
  color: var(--ob-ink-2); font-size: 14.5px; }
.rw-page .plan li { padding-left: 24px; position: relative; }
.rw-page .plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--ob-accent-ink);
  font-weight: 800; }
.rw-page .plan .ob-btn { margin-top: auto; }

.rw-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rw-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 620px) { .rw-vs { grid-template-columns: minmax(0, 1fr); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }