/* ==========================================================================
   WESTON CLICK — how-it-works.css
   Page-specific styles for how-it-works.html only.

   Layout DNA — no two steps share a shape:
     1  Hero .............. own hero, see HERO below
     1b Journey rail ...... 5 floating cards on one drawn track
     2  Step 1 Discovery .. light, centred, 4-card diagnostic scan
     3  Step 2 Roadmap .... dark band, split, sequencing bars
     4  Step 3 Build ...... tinted, full-width Gantt over a two-column body
     5  Step 4 Launch ..... light, centred calendar with floating chips
     6  Step 5 Optimize ... dark band, reversed split, trend banner
     7  Final CTA ......... framed card with a ghost numeral
   ========================================================================== */

/* ==========================================================================
   HERO — promise + winding roadmap (.whero)
   Tinted canvas with masked diagonal stripes; a glass card holding an SVG
   road that draws itself, with five linked milestones along it.
   ========================================================================== */
.whero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-50) 0%, #fff 55%, var(--bone) 100%);
  border-bottom: 1px solid var(--line);
}
.whero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.whero__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), .07) 0 1px, transparent 1px 18px);
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 78% 50%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 75% at 78% 50%, #000 15%, transparent 75%);
}
.whero__glow {
  position: absolute;
  right: 4%; top: 12%;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-bright-rgb), .25), transparent 65%);
  filter: blur(40px);
  animation: whero-breathe 8s var(--ease-soft) infinite alternate;
}
@keyframes whero-breathe { to { scale: 1.18; opacity: .7; } }

.whero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  padding-top: calc(var(--header-space) + clamp(44px, 4.6vw, 80px));
  padding-bottom: clamp(56px, 6vw, 96px);
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.whero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.whero__badge-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-on-dark) 0 40%, rgba(255, 255, 255, .18) 40% 100%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px);
  mask: radial-gradient(circle, transparent 5px, #000 5.5px);
}

.whero__title {
  margin-top: clamp(18px, 2vw, 24px);
  font-size: clamp(2.1rem, 1.15rem + 2.8vw, 3.55rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--ink-900);
}
/* Wavy hand-underline done entirely with text-decoration. */
.whero__accent {
  display: block;
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent-bright);
  text-decoration-thickness: .06em;
  text-underline-offset: .2em;
  text-decoration-skip-ink: none;
}

.whero__sub {
  margin-top: clamp(20px, 2vw, 26px);
  max-width: 46ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink-500);
}
.whero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 2.8vw, 34px);
}
.whero__actions .btn--primary { box-shadow: 0 14px 34px -14px rgba(var(--accent-rgb), .8); }

/* Segmented fact bar */
.whero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(30px, 3.4vw, 44px);
  max-width: 500px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.wfact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: 14px 16px;
}
.wfact + .wfact { border-left: 1px solid var(--line); }
.wfact dd {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.wfact dt { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   The road card
   -------------------------------------------------------------------------- */
.wroad {
  position: relative;
  aspect-ratio: 400 / 500;
  width: min(100%, 460px);
  justify-self: center;
  padding: 44px 28px 34px;
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(var(--accent-rgb), .06);
}
.wroad__label {
  position: absolute;
  top: 16px; left: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.wroad__svg,
.wroad__stops {
  position: absolute;
  inset: 44px 28px 34px;
  width: calc(100% - 56px);
  height: calc(100% - 78px);
}
.wroad__svg path {
  stroke-width: 10;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.wroad__track {
  stroke: var(--ink-100);
}
/* pathLength="1" lets the dash maths stay unit-less. */
.wroad__progress {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: whero-draw 3.2s .5s var(--ease-out) forwards;
  filter: drop-shadow(0 6px 10px rgba(var(--accent-rgb), .3));
}
@keyframes whero-draw { to { stroke-dashoffset: .12; } }

.wroad__stops { list-style: none; }
.wstop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -21px -50%;
}
.wstop a { display: flex; align-items: center; gap: 10px; color: var(--ink-900); }
.wstop--left { translate: calc(-100% + 21px) -50%; }
.wstop--left a { flex-direction: row-reverse; text-align: right; }
.wstop__dot {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  background: #fff;
  border: 2px solid var(--brand-200);
  box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), .5);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast), color var(--dur-fast);
}
.wstop a:hover .wstop__dot,
.wstop a:focus-visible .wstop__dot {
  transform: scale(1.14);
  background: var(--accent);
  color: #fff;
}
/* The first stop is "you are here": a pulsing ring. */
.wstop:first-child .wstop__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: whero-pulse 2.2s var(--ease-soft) infinite;
}
@keyframes whero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-bright-rgb), .55); }
  100% { box-shadow: 0 0 0 14px rgba(var(--accent-bright-rgb), 0); }
}
.wstop__text {
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-500);
  white-space: nowrap;
}
.wstop__text strong { font-size: var(--fs-sm); color: var(--ink-900); }

/* The person, pinned to the bottom corner of the card. */
.wroad__you {
  position: absolute;
  right: -22px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--brand-900));
  box-shadow: 0 20px 44px -18px rgba(var(--accent-rgb), .75);
  rotate: -3deg;
}
.wroad__you img {
  width: 48px; height: 48px;
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 14%;
  background: var(--brand-100);
  filter: grayscale(1);
}
.wroad__you span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.wroad__you strong { font-size: var(--fs-sm); color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .whero__inner { grid-template-columns: minmax(0, 1fr); }
  .wroad { width: min(100%, 440px); }
  .wroad__you { right: 8px; }
}
@media (max-width: 520px) {
  .wroad { padding-inline: 16px; }
  .wroad__svg, .wroad__stops { inset-inline: 16px; width: calc(100% - 32px); }
  .wstop__dot { width: 36px; height: 36px; }
  .wstop { translate: -18px -50%; }
  .wstop--left { translate: calc(-100% + 18px) -50%; }
  .wstop__text { padding: 4px 8px; font-size: 11px; }
  .wstop__text strong { font-size: 13px; }
  .whero__facts { grid-template-columns: minmax(0, 1fr); }
  .wfact + .wfact { border-left: 0; border-top: 1px solid var(--line); }
  .wfact { flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .whero__actions .btn--lg { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .whero__glow, .wstop:first-child .wstop__dot { animation: none; }
  .wroad__progress { animation: none; stroke-dashoffset: .12; }
}


/* --------------------------------------------------------------------------
   SHARED: the card treatment used across this page
   -------------------------------------------------------------------------- */
.hcard {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft);
}
.hcard:hover {
  transform: translateY(-6px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-xl);
}
.hcard--ink {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hcard--ink:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(var(--accent-rgb), .6);
}

/* Dark section shell */
.ink-section {
  position: relative;
  overflow: hidden;
  background: var(--surface-ink);
  color: rgba(255, 255, 255, .62);
  padding-block: var(--section-y);
}
.ink-section h2, .ink-section h3 { color: #fff; }
.ink-section .lead { color: rgba(255, 255, 255, .6); }
.ink-section > .container { position: relative; z-index: 1; }

/* Outcome pair, inverted for dark bands */
.outcomes--ink .outcomes__block {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .09);
}
.outcomes--ink .outcomes__title { color: var(--accent-on-dark); }
.outcomes--ink .outcomes__list > li { color: rgba(255, 255, 255, .66); }
.outcomes--ink .outcomes__list > li::before { background: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   SECTION 1b — JOURNEY RAIL
   -------------------------------------------------------------------------- */
.journey { padding-block: var(--section-y); }
.journey__intro { margin-bottom: clamp(38px, 4.5vw, 58px); }

.rail { position: relative; }

/* The single track every card sits on */
.rail__track {
  position: absolute;
  top: 34px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-100);
  overflow: hidden;
}
.rail__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--brand-400));
  transition: width 1.6s var(--ease-out) .2s;
}
.rail.is-drawn .rail__fill { width: 100%; }

.rail__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.rail__item { display: flex; }
.rail__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: clamp(16px, 1.9vw, 22px) clamp(10px, 1.4vw, 16px) clamp(18px, 2.2vw, 24px);
  text-align: center;
  color: inherit;
}
.rail__card:hover { color: inherit; }

.rail__node {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-top: -46px;           /* lifts the node onto the track */
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand-200);
  color: var(--accent);
  box-shadow: 0 0 0 6px var(--white), var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}
.rail__node svg { width: 20px; height: 20px; }
.rail__card:hover .rail__node {
  transform: translateY(-3px) scale(1.06);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.rail__item--end .rail__node { border-color: var(--accent); }

.rail__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.rail__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.rail__note { font-size: var(--fs-xs); color: var(--ink-400); }

/* The rail needs headroom for the lifted nodes */
.rail__list { margin-top: 46px; }

@media (max-width: 940px) {
  .rail__track { display: none; }
  .rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; gap: var(--sp-4); }
  .rail__card { flex-direction: row; align-items: center; text-align: left; flex-wrap: wrap; padding: var(--sp-5); }
  .rail__node { margin: 0 12px 0 0; box-shadow: var(--shadow-sm); width: 42px; height: 42px; }
  .rail__num { width: 100%; order: -1; margin-left: 54px; }
  .rail__name { flex: 1; }
  .rail__note { width: 100%; margin-left: 54px; }
}
@media (max-width: 520px) { .rail__list { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   SHARED STEP SCAFFOLDING
   -------------------------------------------------------------------------- */
.step { scroll-margin-top: calc(var(--header-space) + 16px); }
.step__head { margin-bottom: clamp(30px, 3.6vw, 46px); }

.step__split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 4.5vw, 68px);
  align-items: center;
}
.step__split--visual-first > :first-child { order: 1; }
.step__split--visual-first > :last-child  { order: 2; }

.step__copy h2 { margin-top: var(--sp-4); }
.step__copy .body-copy { margin-top: var(--sp-5); }
.step__cta { margin-top: clamp(26px, 3vw, 36px); }

.step__copy-center { margin-top: clamp(32px, 4vw, 48px); }
.step__copy-center .outcomes { margin-top: clamp(24px, 3vw, 34px); }

.step__twocol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(26px, 3.5vw, 52px);
  align-items: start;
  margin-top: clamp(30px, 3.6vw, 46px);
}
.step__twocol .outcomes { margin-top: 0; }

.step__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.step__tag span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  letter-spacing: .08em;
}
.step__tag--center { justify-content: center; }
.ink-section .step__tag { color: rgba(255, 255, 255, .5); }

@media (max-width: 960px) {
  .step__split { grid-template-columns: minmax(0, 1fr); }
  /* Copy always leads on mobile, whichever side it sits on at desktop */
  .step__split--visual-first > :first-child { order: 2; }
  .step__split--visual-first > :last-child  { order: 1; }
  .step__twocol { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   SECTION 2 — STEP 1: DISCOVERY  (diagnostic scan grid)
   -------------------------------------------------------------------------- */
.step--diagnose { background: var(--surface-alt); }

.scan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.scan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 26px);
  overflow: hidden;
}
/* Scanning sweep that runs once the card is revealed */
.scan__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .1), transparent);
  transform: translateY(-100%);
}
.scan__card.is-revealed::before { animation: scan-sweep 1.3s var(--ease-out) .2s; }
@keyframes scan-sweep {
  to { transform: translateY(100%); }
}

.scan__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--accent-tint);
  border: 1px solid var(--brand-100);
  color: var(--accent);
}
.scan__icon svg { width: 22px; height: 22px; }
.scan__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-800);
}
.scan__check {
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(20px, 2.4vw, 26px);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(20, 184, 124, .14);
  color: var(--mint-500);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s var(--ease-out) .9s, transform .4s var(--ease-spring) .9s;
}
.scan__check svg { width: 13px; height: 13px; }
.scan__card.is-revealed .scan__check { opacity: 1; transform: none; }

/* The fourth card is the one that finds the problem */
.scan__card--leak { border-color: var(--brand-200); }
.scan__card--leak .scan__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.scan__check--found { background: rgba(var(--accent-rgb), .14); color: var(--accent); }

@media (max-width: 900px) { .scan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .scan { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   SECTION 3 — STEP 2: ROADMAP  (sequencing bars)
   -------------------------------------------------------------------------- */
.roadmap { margin: 0; padding: clamp(24px, 3vw, 34px); }
.roadmap__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--sp-6);
}
.roadmap__dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-on-dark);
  box-shadow: 0 0 0 4px rgba(var(--accent-bright-rgb), .2);
}

.roadmap__rows { display: grid; gap: 14px; }
.roadmap__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.roadmap__phase {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
}
.roadmap__track {
  position: relative;
  height: 32px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.roadmap__track i {
  position: absolute;
  top: 4px; bottom: 4px;
  left: var(--start, 0%);
  width: var(--len, 40%);
  border-radius: 6px;
  background: var(--accent);
  opacity: .55;
  transform-origin: left;
  transition: transform .9s var(--ease-out);
}
.roadmap__row--priority .roadmap__track i {
  opacity: 1;
  background: var(--accent-on-dark);
  box-shadow: 0 6px 18px -6px rgba(var(--accent-bright-rgb), .8);
}
.roadmap__flag {
  grid-column: 2;
  justify-self: start;
  margin-top: -6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-bright-rgb), .18);
  border: 1px solid rgba(var(--accent-bright-rgb), .4);
  color: var(--accent-on-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Bars grow in when the figure is revealed */
.roadmap:not(.is-revealed) .roadmap__track i { transform: scaleX(0); }

.roadmap__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 420px) {
  .roadmap__row { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
}

/* --------------------------------------------------------------------------
   SECTION 4 — STEP 3: BUILD  (full-width time-investment Gantt)
   -------------------------------------------------------------------------- */
.step--build { background: linear-gradient(180deg, var(--accent-tint), var(--white)); }

.gantt { margin: 0; padding: clamp(24px, 3vw, 36px); }
.gantt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.gantt__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.gantt__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-xs); color: var(--ink-500); }
.gantt__legend > li { display: inline-flex; align-items: center; gap: 8px; }
.gantt__key { width: 14px; height: 8px; border-radius: 3px; flex: none; }
.gantt__key--ours  { background: var(--accent); }
.gantt__key--yours { background: var(--ink-900); }

.gantt__row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 14px;
}
.gantt__row + .gantt__row { margin-top: 14px; }
.gantt__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-600); }
.gantt__track {
  position: relative;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
.gantt__bar {
  position: absolute;
  top: 5px; bottom: 5px;
  left: var(--start, 0%);
  width: var(--len, 20%);
  border-radius: 6px;
  transform-origin: left;
  transition: transform .9s var(--ease-out);
  transition-delay: var(--gantt-delay, 0ms);
}
.gantt__bar--ours  { background: var(--accent); opacity: .85; }
.gantt__bar--yours { background: var(--ink-900); }
.gantt__bar--yours:nth-of-type(2) { --gantt-delay: 130ms; }
.gantt__bar--yours:nth-of-type(3) { --gantt-delay: 260ms; }
.gantt:not(.is-revealed) .gantt__bar { transform: scaleX(0); }

.gantt__share {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-700);
  text-align: right;
}
.gantt__share--small { font-size: var(--fs-xs); color: var(--ink-400); }

.gantt__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-400);
}

@media (max-width: 620px) {
  .gantt__row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .gantt__share { display: none; }
}

/* --------------------------------------------------------------------------
   SECTION 5 — STEP 4: LAUNCH  (calendar + floating chips)
   -------------------------------------------------------------------------- */
.launch { position: relative; max-width: 620px; margin-inline: auto; }

.minical { margin: 0; padding: clamp(22px, 2.8vw, 32px); }
.minical__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.minical__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.minical__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mint-500);
}
.minical__live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.minical__dow,
.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.minical__dow {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-300);
  text-align: center;
}
.minical__cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-300);
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.minical__cell--muted { opacity: .45; }
.minical__cell--booked {
  border-color: var(--brand-200);
  background: linear-gradient(155deg, var(--accent-tint), var(--white));
  color: var(--accent);
  box-shadow: 0 2px 8px -5px rgba(var(--accent-rgb), .7);
}
.minical__cell--booked::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 5px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
.minical__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  text-align: center;
}

/* Floating result chips around the calendar */
.launch__chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -12px rgba(15, 26, 22, .3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-800);
  white-space: nowrap;
  animation: launch-float 6.5s var(--ease-soft) infinite;
}
.launch__chip svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.launch__chip--1 { top: 12%; left: -46px; }
.launch__chip--2 { top: 52%; right: -52px; animation-delay: -2.2s; }
.launch__chip--3 { bottom: 16%; left: -38px; animation-delay: -4.4s; }
@keyframes launch-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 820px) {
  .launch__chip--1 { left: 4px;  top: -14px; }
  .launch__chip--2 { right: 4px; top: -14px; }
  .launch__chip--3 { left: 4px;  bottom: -14px; }
}
@media (max-width: 520px) {
  .launch__chip { font-size: 10px; padding: 7px 12px 7px 9px; }
  .launch__chip--3 { display: none; }
}

/* --------------------------------------------------------------------------
   SECTION 6 — STEP 5: OPTIMIZE & SCALE  (trend banner + tuning chips)
   -------------------------------------------------------------------------- */
.trend { margin: 0; padding: clamp(24px, 3vw, 34px); }
.trend__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--sp-5);
}
.trend__svg { width: 100%; height: auto; overflow: visible; }

.trend__area { opacity: 0; transition: opacity .9s var(--ease-out) .5s; }
.trend.is-revealed .trend__area { opacity: 1; }

.trend__dot,
.trend__dot-ring { opacity: 0; transition: opacity .4s var(--ease-soft) 1.2s; }
.trend.is-revealed .trend__dot,
.trend.is-revealed .trend__dot-ring { opacity: 1; }
.trend.is-revealed .trend__dot-ring { animation: trend-ping 2.4s var(--ease-soft) 1.4s infinite; }
@keyframes trend-ping {
  0%   { transform-origin: 316px 20px; transform: scale(1);   opacity: .7; }
  70%  { transform-origin: 316px 20px; transform: scale(2.6); opacity: 0; }
  100% { transform-origin: 316px 20px; transform: scale(2.6); opacity: 0; }
}

.trend__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .42);
}

/* What we keep tuning */
.tune { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-6); }
.tune__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  transition: border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}
.tune__item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-bright-rgb), .5);
  background: rgba(var(--accent-rgb), .25);
}
.tune__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(var(--accent-bright-rgb), .22);
  color: var(--accent-on-dark);
}
.tune__icon svg { width: 14px; height: 14px; }

.step--optimize .outcomes { margin-top: clamp(24px, 3vw, 32px); }

/* --------------------------------------------------------------------------
   SECTION 7 — FINAL CTA  (framed card with a ghost numeral)
   -------------------------------------------------------------------------- */
.hiw-cta { padding-block: var(--section-y); }
.hiw-cta__card {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 62px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-2xl);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(120% 130% at 50% 0%, var(--accent-tint), var(--white) 62%);
  border: 1px solid var(--brand-200);
  box-shadow: var(--shadow-xl);
}
/* Oversized "01" anchoring the closing ask back to Step 1 */
.hiw-cta__step {
  position: absolute;
  right: -14px; bottom: -46px;
  font-family: var(--font-display);
  font-size: clamp(8rem, 5rem + 10vw, 15rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: .8;
  color: var(--brand-100);
  pointer-events: none;
  user-select: none;
}
.hiw-cta__inner { position: relative; z-index: 1; }
.hiw-cta__inner .eyebrow { justify-content: center; }
.hiw-cta__inner h2 { font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.6rem); }
.hiw-cta__inner .lead { margin-top: var(--sp-5); margin-inline: auto; max-width: 48ch; }
.hiw-cta__inner .btn-row { margin-top: var(--sp-7); }
.hiw-cta__inner .cta-note { margin-top: var(--sp-5); }