/* ============================================================
   HUB (index.html) — page-only styles.
   Load order: core.css → components.css (shared .hiw timeline + .cmp table,
   copied from /ad-accounts — never restyled here) → hub.css.
   Sections (the /ad-accounts scheme): hero · services (live mini previews) ·
   partner strip · journey (.hiw, step art below) · comparison (.cmp) ·
   results (core [data-stats] gate, hidden at launch).
   ============================================================ */

.tnum { font-variant-numeric: tabular-nums; }

/* ============ HERO (same fold as ad-accounts: title + 2 buttons, no sub) ============ */
.hub-hero {
  position: relative;
  z-index: 2;
  overflow: clip;
}
.hub-hero .hero-bars {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  background: #050608;
}
.hub-hero .hero-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(8,9,11,0.55) 55%, var(--bg) 100%);
}
.hub-hero .hero-inner { position: relative; z-index: 2; width: 100%; max-width: calc(var(--grid) + 320px); }
.hub-hero .hero-fold {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(96px, 13vh, 140px) 0 clamp(40px, 6vh, 72px);
}
.hero-eyebrow { margin: 0 0 clamp(24px, 4.2vh, 40px); }
.hero-eyebrow.reveal { transform: translateY(12px); }
.hero-eyebrow.reveal.in { transform: none; }
/* "Accounts, Copy, Creative." is longer than the live hero line — 7.8vw keeps
   it on one row from 600px up while it types; the hero wrap is --grid + 320px
   and the big-screen caps below track it (core's caps assume shorter lines). */
.hub-hero h1.hero-title {
  font-size: clamp(44px, min(7.8vw, 14vh), 132px);
  text-align: center;
}
/* Line 2 = the AutoLink signature (same strokes as the preloader + table).
   Sequence: line 1 types → signature draws stroke by stroke (its last stroke is
   the underline flourish) → buttons rise as it finishes. Drawn with pathLength=1 +
   a transition to a resting class (iOS-safe, see DESIGN-LESSONS §1). */
.hero-title .ln-sig { display: block; min-height: 0; padding-bottom: 0; line-height: 1; }
.hero-sig {
  display: inline-block;
  height: 1.32em;
  width: auto;
  aspect-ratio: 356 / 90;
  margin: 0.02em 0 -0.06em;
  overflow: visible;
  vertical-align: top;
}
.hero-sig .stroke {
  fill: none;
  stroke: url(#heroSigInk);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset var(--dur) cubic-bezier(0.45, 0.05, 0.4, 1) var(--d), opacity 0s linear var(--d);
}
.hero-sig .dot { fill: #FFFFFF; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6);
  transition: opacity 0.16s var(--ease-snappy) 0.9s, transform 0.16s var(--ease-snappy) 0.9s; }
.hero-title.tw-done .hero-sig .stroke { stroke-dashoffset: 0; opacity: 1; }
.hero-title.tw-done .hero-sig .dot { opacity: 1; transform: scale(1); }
/* Preloader timing × 0.8 → ~1.55s signature */
.hero-sig .stroke[data-i="0"] { --dur: 0.16s; --d: 0.04s; }
.hero-sig .stroke[data-i="1"] { --dur: 0.06s; --d: 0.21s; }
.hero-sig .stroke[data-i="2"] { --dur: 0.32s; --d: 0.28s; }
.hero-sig .stroke[data-i="3"] { --dur: 0.05s; --d: 0.62s; }
.hero-sig .stroke[data-i="4"] { --dur: 0.18s; --d: 0.69s; }
.hero-sig .stroke[data-i="5"] { --dur: 0.27s; --d: 0.88s; }
.hero-sig .stroke[data-i="6"] { --dur: 0.11s; --d: 1.17s; }
.hero-sig .stroke[data-i="7"] { --dur: 0.26s; --d: 1.30s; }
/* Buttons arrive with the flourish, not before the signature exists. */
html.al-ready body.site .hub-hero .hero-actions { animation: none; }
html.al-ready body.site .hub-hero .hero-title.tw-done ~ .hero-actions { animation: heroFadeUp 0.7s var(--ease-out) 1.2s forwards; }
html.reduced .hero-sig .stroke, html.reduced .hero-sig .dot { stroke-dashoffset: 0; opacity: 1; transform: none; transition: none; }

/* Phrase-level break on phones only: "Accounts, Copy," / "Creative." / signature */
.br-m { display: none; }
/* Same title → buttons gap as ad-accounts (its H1 carries clamp(56px, 9vh, 110px) below). */
.hub-hero .hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(44px, 9vh, 104px);
}
.btn-primary .arr-down { transition: transform 0.4s var(--ease-out); }
.btn-primary:hover .arr-down { transform: translateY(2px); }

/* ============ SERVICES (sits where ad-accounts has its live dashboard) ============ */
.svc { position: relative; z-index: 2; padding: clamp(8px, 2vh, 24px) 0 clamp(40px, 5vw, 64px); }
/* Caption = ad-accounts .hero-dash-cap: centred "X. Y." title over a hairline. */
.svc-cap {
  display: flex; justify-content: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.svc-title-h {
  margin: 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.svc-title-h .em {
  font-weight: 400;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8BAC0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.svc-card { display: flex; min-width: 0; }
.svc-card.reveal { transform: translateY(28px); }
.svc-card.reveal.in { transform: none; }
.svc-card:nth-child(2) { transition-delay: 0.1s; }
.svc-card:nth-child(3) { transition-delay: 0.2s; }

.svc-card-in {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0E0F13 0%, #0B0C0F 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.svc-card-in.is-tilting {
  transition: transform 0.2s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
/* Cursor-follow light (position from hub.js via --mx/--my). */
.svc-glow {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.06), transparent 62%);
  transition: opacity 0.5s var(--ease-out);
}
.svc-preview {
  position: relative;
  height: 272px;
  padding: 20px 20px 0;
  overflow: hidden;
}
/* The window sits on the card's divider line; content is centred so short
   mocks don't leave a dead band at the bottom. */
.svc-preview .win {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.svc-preview .mk-body { flex: 1; justify-content: center; align-content: center; }
.svc-preview .winbar { padding: 10px 12px; }
.svc-preview .winbar b { width: 7px; height: 7px; }
.svc-preview .winbar .url { margin-left: 8px; font-size: 10px; padding: 4px 10px; }

.svc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 26px;
  border-top: 1px solid var(--line);
}
.svc-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svc-meta .mono { margin: 0; }
.svc-title { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.svc-copy { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.svc-link {
  align-self: flex-start;
  margin-top: auto;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
/* Whole card is the hit area. */
.svc-link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 22px; }
.svc-link .arr { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.svc-card-in:has(.svc-link:focus-visible) { border-color: rgba(255,255,255,0.4); }

/* ---- Mini previews (shared) ---- */
.mk { font-size: 12px; color: var(--text); }
.mk .mono { margin: 0; font-size: 9px; }
.mk-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-pill { font-size: 9px; padding: 3px 8px; gap: 6px; }
.mk-tag { font-size: 9px; padding: 3px 8px; transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out); }

/* (a) Ads dashboard */
.mk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-kpi { min-width: 0; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 12px; }
.mk-num {
  margin: 6px 0 0;
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-spark { width: 100%; height: 60px; display: block; overflow: visible; }
.mk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.mk-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
html:not(.reduced) .mk-ads[data-armed] .spark-line {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-out) 0.15s;
}
html:not(.reduced) .mk-ads[data-armed] .spark-area { opacity: 0; transition: opacity 1s var(--ease-out) 0.9s; }
html:not(.reduced) .mk-ads[data-armed].is-on .spark-line { stroke-dashoffset: 0; }
html:not(.reduced) .mk-ads[data-armed].is-on .spark-area { opacity: 1; }

/* (b) Copy editor */
.mk-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mk-hook {
  margin: 0;
  min-height: 2.6em;
  font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em;
}
.mk-caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.18em;
  background: #FFFFFF;
  animation: twBlink 0.7s step-end infinite;
}
.mk.is-paused .mk-caret { animation-play-state: paused; }
.mk-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-meter { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.mk-meter-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-2); }
.mk-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.mk-bar-fill {
  display: block; height: 100%;
  background: #FFFFFF; border-radius: 3px;
  transform-origin: left center;
  transition: transform 0.18s var(--ease-out);
}

/* (c) Video timeline */
.mk-vid { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 14px; }
.mk-frame {
  position: relative;
  height: 152px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #23252C 0%, #121318 70%);
  border: 1px solid rgba(255,255,255,0.08);
}
.mk-ratio { position: absolute; top: 6px; left: 6px; font-size: 8px; color: #C9CBD1; letter-spacing: 0.08em; }
.mk-cap {
  position: absolute; left: 6px; right: 6px; bottom: 22px;
  padding: 3px 4px;
  border-radius: 3px;
  background: #FFFFFF; color: #08090B;
  font-size: 9px; font-weight: 500; line-height: 1.25; text-align: center;
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}
.mk-cap.is-swap { opacity: 0; transform: translateY(4px); }
.mk-tl { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mk-tl-head { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--text-2); }
.mk-tracks { position: relative; display: flex; flex-direction: column; gap: 7px; }
.mk-track { display: flex; gap: 3px; }
.mk-track span { display: block; border-radius: 3px; }
.t-v { height: 18px; }
.t-v span { background: #3A3D46; }
.t-v span:nth-child(2) { background: #4A4E59; }
.t-b { height: 18px; }
.t-b span { background: #2B2E36; }
.t-c { height: 10px; }
.t-c span { background: rgba(255,255,255,0.75); border-radius: 2px; }
.mk-wave { width: 100%; height: 24px; display: block; }
.mk-ph-track { position: absolute; top: -4px; bottom: -2px; left: 0; right: 0; pointer-events: none; }
.mk-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; will-change: transform; }
.mk-ph::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px; background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255,255,255,0.7);
}
.mk-ph::after {
  content: ""; position: absolute; top: -3px; left: -3px;
  width: 7px; height: 7px; border-radius: 2px;
  background: #FFFFFF;
}

/* ============ PARTNER STRIP (same as ad-accounts .partners) ============ */
.partners {
  position: relative;
  z-index: 2;
  padding: 28px 0 56px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
  overflow: hidden;
}
.partners-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.partners-row .partner-logo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 56px;
  opacity: 0.78;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.partners-row .partner-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  filter: brightness(1.4);
}
/* Google's artwork fills its canvas edge to edge (Meta/TikTok have ~35%
   padding baked in) — scale it to the same optical height. */
.partners-row .partner-logo.p-google img { max-height: 64%; }
.partners-row .partner-logo.text-only {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.85);
}

/* ============ RESULTS (core .results; hidden unless [data-stats] is shown) ============ */
.hub-results { position: relative; z-index: 2; padding: 24px 0 96px; }
.results-h { margin-bottom: clamp(28px, 3.4vw, 48px); }
.result:nth-child(2) { transition-delay: 0.08s; }
.result:nth-child(3) { transition-delay: 0.16s; }
.result:nth-child(4) { transition-delay: 0.24s; }

/* Footer: Telegram handle drops to its own line on narrow phones. */
.ft-handle { white-space: nowrap; }

/* ============================================================
   JOURNEY STEP ART — 480×320 cards (components.css owns .hiw-art itself).
   Everything animates off `.hiw-step.is-active`, like ad-accounts.
   ============================================================ */
/* shared bits */
.art-lbl, .pick-label, .camp-label, .camp-k {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Step 01 art: pick a service (toggles) --- */
.pick { height: 100%; display: flex; flex-direction: column; }
.pick-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.pick-count {
  font-size: 9px; color: #08090B; background: #FFFFFF;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.4s var(--ease-snappy) 1.75s, transform 0.4s var(--ease-snappy) 1.75s;
}
.hiw-step:is(.is-active, .is-played) .pick-count { opacity: 1; transform: scale(1); }
.pick-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  transform: translateX(-12px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .pick-row { transform: translateX(0); opacity: 1; }
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(2) { transition-delay: 0.4s; }
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(3) { transition-delay: 0.5s; }
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(4) { transition-delay: 0.6s; }
.pick-ix { font-size: 10px; color: var(--text-3); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.pick-name { font-weight: 500; letter-spacing: -0.005em; }
.pick-tg {
  position: relative;
  width: 36px; height: 20px;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.pick-tg i {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-3);
  transition: transform 0.4s var(--ease-snappy), background 0.35s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .pick-tg.is-on { background: #FFFFFF; border-color: #FFFFFF; }
.hiw-step:is(.is-active, .is-played) .pick-tg.is-on i { transform: translateX(16px); background: #08090B; }
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(2) .pick-tg,
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(2) .pick-tg i { transition-delay: 1.05s; }
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(3) .pick-tg,
.hiw-step:is(.is-active, .is-played) .pick-row:nth-child(3) .pick-tg i { transition-delay: 1.4s; }
.pick-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: #15171C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out) 0.85s, transform 0.6s var(--ease-out) 0.85s;
}
.hiw-step:is(.is-active, .is-played) .pick-cta { opacity: 1; transform: none; }

/* --- shared pieces for steps 02–04 (same language as the ad-accounts form art) --- */
.art-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* White status pill that pops in once (same as .pick-count / .camp-raise). */
.art-pop {
  font-size: 9px; color: #08090B; background: #FFFFFF;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.4s var(--ease-snappy), transform 0.4s var(--ease-snappy);
}
.art-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, #1A1C22, #0E0F13);
  font-size: 13px; font-weight: 500;
}
/* Dark in-mock button (ad-accounts .hiw-form-cta look). */
.art-btn {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  min-height: 48px;
  background: #15171C;
  color: #F4F4F4;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out) 0.85s, transform 0.6s var(--ease-out) 0.85s,
              background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .art-btn { opacity: 1; transform: none; }
.art-btn-icon { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; }
@keyframes hubBtnPress {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  35%      { transform: scale(0.965); box-shadow: 0 0 0 6px rgba(255,255,255,0.16); }
}
/* One label, text swapped by hub.js with a quick opacity dip — never two stacked labels. */
.art-swap { transition: opacity 0.16s var(--ease-out); }
.art-swap.is-dip { opacity: 0; }
/* Check mark: ring then tick (pathLength=1, drawn by transition — iOS-safe). */
.art-check { display: block; overflow: visible; }
.art-check-ring, .art-check-tick {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.art-check-ring { stroke-width: 1.4; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; }
.art-check-tick { stroke-width: 2; }

/* --- Step 02 art: wallet fills --- */
.wal { height: 100%; display: flex; flex-direction: column; gap: 16px; }
.wal-panel {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out) 0.35s, transform 0.6s var(--ease-out) 0.35s;
}
.hiw-step:is(.is-active, .is-played) .wal-panel { opacity: 1; transform: none; }
.wal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wal-note { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wal-meter { height: 10px; border-radius: 10px; background: rgba(255,255,255,0.06); overflow: hidden; }
.wal-fill {
  display: block; height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.55), #FFFFFF);
  box-shadow: 0 0 14px rgba(255,255,255,0.35);
  transform-origin: left center;
  transform: scaleX(0.14);
  transition: transform 1.2s var(--ease-out) 1.55s;
}
.hiw-step:is(.is-active, .is-played) .wal-fill { transform: scaleX(0.88); }
.wal-methods {
  display: flex; gap: 6px; flex-wrap: wrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s var(--ease-out) 0.55s, transform 0.5s var(--ease-out) 0.55s;
}
.wal-methods .tag { font-size: 9px; padding: 4px 10px; transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out); }
.hiw-step:is(.is-active, .is-played) .wal-methods { opacity: 1; transform: none; }
.hiw-step:is(.is-active, .is-played) .wal-pick { color: var(--text); border-color: rgba(255,255,255,0.4); transition-delay: 0.95s; }
.hiw-step.is-active .wal-cta { animation: hubBtnPress 0.5s var(--ease-snappy) 1.3s; }
.hiw-step:is(.is-active, .is-played) .wal-added { opacity: 1; transform: scale(1); transition-delay: 2.6s; }

/* --- Step 03 art: cart → paid from wallet --- */
.cart { height: 100%; display: flex; flex-direction: column; }
.cart-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transform: translateX(14px); opacity: 0;
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .cart-row { transform: none; opacity: 1; }
.hiw-step:is(.is-active, .is-played) .cart-row:nth-child(2) { transition-delay: 0.45s; }
.hiw-step:is(.is-active, .is-played) .cart-row:nth-child(3) { transition-delay: 0.8s; }
.hiw-step:is(.is-active, .is-played) .cart-row:nth-child(4) { transition-delay: 1.15s; }
.cart-name { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; min-width: 0; }
.cart-qty { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.art-cart .art-btn { transition-delay: 1.5s, 1.5s, 2.35s, 2.35s, 2.35s; }
.hiw-step.is-active .cart-pay { animation: hubBtnPress 0.5s var(--ease-snappy) 2.1s; }
.hiw-step:is(.is-active, .is-played) .cart-pay { background: #FFFFFF; color: #08090B; border-color: #FFFFFF; }
.cart-arrow { position: absolute; transition: opacity 0.2s var(--ease-out) 2.25s; }
.hiw-step:is(.is-active, .is-played) .cart-arrow { opacity: 0; }
.cart-icon .art-check-ring { transition: stroke-dashoffset 0.45s cubic-bezier(0.5, 0, 0.2, 1) 2.45s; }
.cart-icon .art-check-tick { transition: stroke-dashoffset 0.32s cubic-bezier(0.65, 0, 0.35, 1) 2.8s; }
.hiw-step:is(.is-active, .is-played) .cart-icon :is(.art-check-ring, .art-check-tick) { stroke-dashoffset: 0; }

/* --- Step 04 art: delivered → request changes → approve --- */
.rev { height: 100%; display: flex; flex-direction: column; gap: 12px; }
.rev-status {
  font-size: 9px; color: var(--text-2);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--line-2);
  transition: opacity 0.16s var(--ease-out), color 0.4s var(--ease-out), background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.hiw-step:is(.is-active, .is-played) .rev-status { color: #08090B; background: #FFFFFF; border-color: #FFFFFF; transition-delay: 0s, 2.3s, 2.3s, 2.3s; }
.rev-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.6s var(--ease-out) 0.35s, transform 0.6s var(--ease-out) 0.35s;
}
.hiw-step:is(.is-active, .is-played) .rev-item { opacity: 1; transform: none; }
.rev-text { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; }
.rev-note {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-left: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.025);
  border-radius: 0 8px 8px 0;
  font-size: 12px; color: var(--text-2);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.5s var(--ease-out) 0.75s, transform 0.5s var(--ease-out) 0.75s;
}
.hiw-step:is(.is-active, .is-played) .rev-note { opacity: 1; transform: none; }
.rev-note-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-done {
  flex-shrink: 0;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
  opacity: 0; transition: opacity 0.4s var(--ease-out) 1.3s;
}
.hiw-step:is(.is-active, .is-played) .rev-done { opacity: 1; }
.rev-actions {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out) 1.05s, transform 0.6s var(--ease-out) 1.05s;
}
.hiw-step:is(.is-active, .is-played) .rev-actions { opacity: 1; transform: none; }
.rev-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.rev-ghost { border: 1px solid var(--line-2); color: var(--text-2); }
.rev-approve { background: #FFFFFF; color: #08090B; }
.hiw-step.is-active .rev-approve { animation: hubBtnPress 0.5s var(--ease-snappy) 1.95s; }
.rev-approve .art-check { opacity: 0; transition: opacity 0.2s var(--ease-out) 2.2s; }
.hiw-step:is(.is-active, .is-played) .rev-approve .art-check { opacity: 1; }
.rev-approve .art-check-tick { transition: stroke-dashoffset 0.32s cubic-bezier(0.65, 0, 0.35, 1) 2.35s; }
.hiw-step:is(.is-active, .is-played) .rev-approve .art-check-tick { stroke-dashoffset: 0; }

/* --- Step 05 art: one campaign — accounts + copy + creative, spend rising --- */
.camp { height: 100%; display: flex; flex-direction: column; gap: 14px; }
.camp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.camp-raise {
  font-size: 9px; color: #08090B; background: #FFFFFF;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.4s var(--ease-snappy) 2.2s, transform 0.4s var(--ease-snappy) 2.2s;
}
.hiw-step:is(.is-active, .is-played) .camp-raise { opacity: 1; transform: scale(1); }
.camp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.camp-kpi {
  min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transform: translateY(10px); opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.camp-kpi .camp-k { font-size: 9px; }
.hiw-step:is(.is-active, .is-played) .camp-kpi { transform: none; opacity: 1; }
.hiw-step:is(.is-active, .is-played) .camp-kpi:nth-child(1) { transition-delay: 0.4s; }
.hiw-step:is(.is-active, .is-played) .camp-kpi:nth-child(2) { transition-delay: 0.5s; }
.hiw-step:is(.is-active, .is-played) .camp-kpi:nth-child(3) { transition-delay: 0.6s; }
.camp-v { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.camp-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.camp-svg { flex: 1; min-height: 0; width: 100%; display: block; overflow: visible; }
.camp-limit line { stroke: rgba(255,255,255,0.25); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.camp-limit { transition: transform 0.8s var(--ease-out) 1.7s; }
.hiw-step:is(.is-active, .is-played) .camp-limit { transform: translateY(-38px); }
.camp-line {
  fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-in-out) 0.6s;
}
.hiw-step:is(.is-active, .is-played) .camp-line { stroke-dashoffset: 0; }
.camp-area { opacity: 0; transition: opacity 0.9s var(--ease-out) 1.4s; }
.hiw-step:is(.is-active, .is-played) .camp-area { opacity: 1; }

/* ============ Hover (fine pointers only) ============ */
@media (hover: hover) and (pointer: fine) {
  .svc-card-in:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 30px 60px -34px rgba(0,0,0,0.9);
  }
  .svc-card-in:hover .svc-glow { opacity: 1; }
  .svc-card-in:hover .svc-link .arr { transform: translateX(3px); }
  .partners-row .partner-logo:hover { opacity: 1; transform: translateY(-2px); }
}

/* ============ Scroll-linked entry (services grid rises in) ============ */
@supports (animation-timeline: view()) {
  html:not(.reduced) .svc-grid {
    animation: hubGridEnter linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 30%;
  }
  @keyframes hubGridEnter {
    from { transform: translateY(6vh) scale(0.975); }
    to   { transform: none; }
  }
}

/* ============ Reduced motion — every mock in its finished state ============ */
html.reduced .svc-card-in, html.reduced .svc-glow,
html.reduced .mk-cap, html.reduced .mk-bar-fill { transition: none; }
html.reduced .mk-caret { display: none; }
html.reduced .hiw-art * { transition: none !important; animation: none !important; }
html.reduced :is(.pick-row, .pick-cta, .pick-count, .camp-kpi, .camp-raise, .camp-area, .art-pop, .art-btn,
  .wal-panel, .wal-methods, .cart-row, .rev-item, .rev-note, .rev-done, .rev-actions) { opacity: 1; transform: none; }
html.reduced :is(.art-check-ring, .art-check-tick, .camp-line) { stroke-dashoffset: 0; }
html.reduced .pick-tg.is-on { background: #FFFFFF; border-color: #FFFFFF; }
html.reduced .pick-tg.is-on i { transform: translateX(16px); background: #08090B; }
html.reduced .wal-fill { transform: scaleX(0.88); }
html.reduced .wal-pick { color: var(--text); border-color: rgba(255,255,255,0.4); }
html.reduced .cart-pay { background: #FFFFFF; color: #08090B; border-color: #FFFFFF; }
html.reduced .cart-arrow { opacity: 0; }
html.reduced .rev-status { color: #08090B; background: #FFFFFF; border-color: #FFFFFF; }
html.reduced .rev-approve .art-check { opacity: 1; }
html.reduced .camp-limit { transform: translateY(-38px); }

/* ============================================================
   Responsive — kept last so it wins.
   ============================================================ */
@media (max-width: 960px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* tablets: preview beside the copy instead of a wide, empty mock */
  .svc-card-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .svc-preview { height: auto; min-height: 272px; padding: 20px 0 0 20px; }
  .svc-preview .win { position: absolute; top: 20px; left: 20px; right: 0; bottom: 0; height: auto; border-right: 0; border-top-right-radius: 0; }
  .svc-body { border-top: 0; border-left: 1px solid var(--line); justify-content: center; }
  .svc-link { margin-top: 4px; }
  /* Partners: one row on phones & tablets (copied from ad-accounts). */
  .partners-row { flex-wrap: nowrap; gap: clamp(8px, 2vw, 28px); }
  .partners-row .partner-logo { flex: 1 1 0; min-width: 0; height: clamp(30px, 4.4vw, 48px); }
  .partners-row .partner-logo img { max-width: 100%; max-height: 100%; }
  .partners-row .partner-logo.p-google img { max-height: 64%; }
  .partners-row .partner-logo.text-only { font-size: clamp(13px, 3.6vw, 26px); white-space: nowrap; }
}
@media (max-width: 680px) {
  .svc-card-in { display: flex; }
  .svc-preview { height: 268px; min-height: 0; padding: 16px 16px 0; }
  .svc-preview .win { position: static; height: 100%; border-right: 1px solid rgba(255,255,255,0.09); border-top-right-radius: 14px; }
  .svc-body { border-left: 0; border-top: 1px solid var(--line); padding: 22px 22px 20px; }
}
@media (max-width: 600px) {
  .site .wrap { padding: 0 20px; }
  /* One fluid size for every phone; the break is phrase-level, never a lone word.
     'Accounts, Copy,' is 7.27em wide: size = (viewport - gutters) / ~7.4em. */
  .br-m { display: inline; }
  .hub-hero h1.hero-title { font-size: clamp(30px, calc(13.4vw - 6px), 56px); }
  .svc-title { font-size: 24px; }
}
/* Phones: buttons side by side like ad-accounts; stacked full-width only when they can't fit. */
@media (max-width: 520px) {
  .hub-hero .hero-actions { gap: 12px; }
  .hub-hero .hero-actions .btn-lg { padding: 15px 22px; font-size: 15px; min-height: 48px; }
}
@media (max-width: 370px) {
  .hub-hero .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 400px; gap: 10px; }
  .hub-hero .hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 412px) {
  .footer-col a.ft-tg { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.4; }
  .ft-sep { display: none; }
}
@media (max-width: 400px) {
  .mk-row-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .svc-preview { padding: 14px 12px 0; }
  .mk-vid { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .mk-frame { height: 140px; }
  .mk-hook { font-size: 17px; }
  .mk-num { font-size: 20px; }
  .svc-body { padding: 20px 18px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.1em; }
}
@media (max-width: 340px) {
  .hero-eyebrow { font-size: 9.5px; letter-spacing: 0.08em; }
  .hero-eyebrow.mono.dot::before { margin-right: 7px; }
}
/* Short / landscape viewports (phone landscape): compact the fold so the
   title and both CTAs fit without scrolling. */
@media (max-height: 600px) and (min-width: 521px) {
  .hub-hero .hero-fold { padding: 84px 0 14px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hub-hero h1.hero-title { font-size: clamp(34px, min(7.8vw, 12vh), 132px); }
  .hub-hero .hero-actions { margin-top: 22px; }
  .hub-hero .hero-actions .btn-lg { padding: 13px 24px; font-size: 15px; }
}
/* Short phones (SE-class portrait): tighter stack, same type size. */
@media (max-height: 700px) and (max-width: 520px) {
  .hub-hero .hero-fold { padding: 88px 0 20px; }
  .hero-eyebrow { margin-bottom: 14px; }
  .hub-hero .hero-actions { margin-top: 32px; }
}

/* ============ Big screens (core grows --grid: 1440 / 1720 / 2240) ============ */
@media (min-width: 1800px) {
  .hub-hero h1.hero-title { font-size: clamp(44px, min(7.8vw, 14vh), 148px); }
}
@media (min-width: 2400px) {
  .hub-hero h1.hero-title { font-size: clamp(44px, min(7.8vw, 14vh), 172px); }
  .hero-eyebrow { font-size: 13px; }
  .svc-title-h { font-size: 62px; max-width: none; }
  .svc-copy { font-size: 17px; }
  .svc-title { font-size: 30px; }
  .mk-pill { font-size: 10.5px; padding: 4px 10px; }
  /* Mock windows scale as a unit (transform inside a sized slot), not via zoom. */
  .svc-preview { --mk-s: 1.3; height: calc(272px * var(--mk-s)); }
  .svc-preview .win {
    width: calc(100% / var(--mk-s));
    height: calc(100% / var(--mk-s));
    transform: scale(var(--mk-s));
    transform-origin: top left;
  }
  .partners-row .partner-logo { height: 68px; }
  .partners-row .partner-logo.text-only { font-size: 36px; }
}
@media (min-width: 3200px) {
  .hub-hero h1.hero-title { font-size: clamp(44px, min(7.8vw, 14vh), 218px); }
  .hero-eyebrow { font-size: 15px; }
  .svc-title-h { font-size: 72px; }
  .svc-copy { font-size: 20px; }
  .svc-title { font-size: 38px; }
  .svc-meta .mono, .result-label { font-size: 13px; }
  .svc-link { font-size: 18px; }
  .svc-preview { --mk-s: 1.7; }
  .result-val { font-size: 96px; }
  .partners-row .partner-logo { height: 88px; }
  .partners-row .partner-logo.text-only { font-size: 46px; }
}