/* ============================================================
   SimpleChange · Remote by Modula look + ReadyLaunch motion
   ============================================================ */

:root {
  --ink:        #1d2020;   /* warm near-black */
  --ink-soft:   #3a4040;
  --muted:      #5a6d77;   /* cool muted text */
  --line:       #eceeeb;   /* hairlines */
  --line-2:     #e3e6e2;
  --bg:         #ffffff;
  --bg-soft:    #fafbf9;
  --card:       #ffffff;
  --accent:     #e3ff8f;   /* pale lime highlight (pulled from live site) */
  --accent-2:   #d4f95f;   /* deeper lime for solid touches */
  --accent-ink: #6b7d1a;   /* readable lime-on-white for small marks */

  --radius:     22px;
  --radius-sm:  14px;
  --radius-pill:999px;

  --shadow-sm:  0 1px 2px rgba(29,32,32,.04), 0 4px 12px rgba(29,32,32,.04);
  --shadow-md:  0 2px 6px rgba(29,32,32,.05), 0 18px 40px rgba(29,32,32,.07);
  --shadow-lg:  0 30px 70px rgba(29,32,32,.12);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);

  --maxw:       1160px;
  --pad:        24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 820px; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Typography ---------- */
.h2 {
  font-size: clamp(2rem, 1.2rem + 3.1vw, 3.35rem);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
  color: var(--muted);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 640px;
}
.eyebrow {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 22px;
}

/* Hero eyebrow pill (Remote's "New · Announcing…" pill). On hover the lime
   fill wipes in softly from the left and the chip flips to black. */
.hero__pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 15px 5px 6px;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: var(--radius-pill);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 auto 24px;
  box-shadow: 0 1px 2px rgba(29,32,32,.04);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.hero__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.45,0,.15,1);
}
.hero__pill:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(199,242,75,.35); }
.hero__pill:hover::before { transform: scaleX(1); }
.hero__pill > * { position: relative; z-index: 1; }
.hero__pill-chip {
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  font-size: .8rem;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  line-height: 1.35;
  transition: background .4s var(--ease) .08s, color .4s var(--ease) .08s;
}
.hero__pill:hover .hero__pill-chip { background: var(--ink); color: var(--accent); }
.hero__pill-text { color: var(--ink-soft); }
.hero__pill-arrow { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .3s var(--ease-out); }
.hero__pill:hover .hero__pill-arrow { transform: translateX(3px); }
.pill {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

/* ---------- Marker highlight (draws in on reveal) ---------- */
/* Uses a clipped background so it wraps per line and never overflows. */
.mark {
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 48%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .05em;
  transition: background-size .75s var(--ease-out);
}
.mark--soft { background-position: 0 90%; background-size: 0% 38%; }
/* reveal state grows the highlight left to right */
.reveal.is-in .mark,
.is-in .mark,
.mark.is-in { background-size: 100% 48%; }
.reveal.is-in .mark--soft,
.is-in .mark--soft,
.mark--soft.is-in { background-size: 100% 38%; }

/* ---------- Buttons ---------- */
/* Buttons: rounded-rectangle (12px, ~44px) with a Remote-style text-roll on hover */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.btn--lg { padding: 13px 22px; min-height: 48px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--dark { background: #1f2223; color: #fff; }
.btn--dark:hover { background: #2c3131; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: #cbcfca; background: #fafbf9; }
/* text roll: a second identical copy sits exactly one line below; on hover the
   pair rolls up by exactly one line so it always settles on readable text. */
.btn__txt { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.btn__txt-in { display: block; position: relative; transition: transform .42s cubic-bezier(.45,0,.15,1); }
.btn__txt-in > span { display: block; height: 1.3em; line-height: 1.3em; white-space: nowrap; }
.btn__txt-in > span + span { position: absolute; top: 100%; left: 0; width: 100%; }
.btn:hover .btn__txt-in { transform: translateY(-100%); }
.btn__ic { width: 18px; height: 18px; flex: none; }

/* ---------- Dot grid background ---------- */
.dot-grid {
  background-image: radial-gradient(rgba(29,32,32,.07) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  background-position: center top;
}
.dot-grid--dark {
  background-image: radial-gradient(rgba(29,32,32,.10) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-stuck { border-color: var(--line); box-shadow: 0 1px 0 rgba(29,32,32,.02); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em; }
.brand__mark { display: inline-flex; color: var(--ink); }
/* the sc mark is a raster icon; size it here so the global img guard's
   height:auto keeps it square rather than letting the 800px source through */
.brand__mark img { width: 26px; height: 26px; display: block; border-radius: 6px; }
.footer .brand__mark img { width: 24px; height: 24px; }
.brand__name { color: var(--ink); }
.nav__links { display: flex; gap: 30px; }
.nav__links a { color: var(--ink-soft); font-weight: 500; font-size: .98rem; position: relative; }
.nav__links a::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--accent-2); transition:right .3s var(--ease); }
.nav__links a:hover::after { right: 0; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__cta-secondary { display: none; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--pad) 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav__mobile a { padding: 12px 4px; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.nav__mobile a.btn { border-bottom: 0; color: #fff; margin-top: 12px; }
.nav__mobile.is-open { display: flex; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(56px, 8vw, 96px) 0 40px; position: relative; }
.hero::after { /* fade the dot grid at the bottom */
  content: ""; position: absolute; inset: auto 0 0 0; height: 220px;
  background: linear-gradient(transparent, var(--bg)); pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero__title {
  font-size: clamp(2.7rem, 1.4rem + 5.2vw, 5rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}
.hero__title > span { display: block; }
.hero__sub { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--muted); max-width: 620px; margin: 0 auto 34px; }
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; margin-bottom: clamp(40px, 6vw, 70px); }
/* compact auto-width buttons, matching Remote (44px tall, 16px side padding, 14px/500) */
.hero__cta .btn { flex: 0 0 auto; width: auto; padding: 0 16px; min-height: 44px; font-size: .875rem; font-weight: 500; }

/* Hero stage: floating cards flowing into a phone */
.hero__stage {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- the phone: front-on, top half visible then faded out ---- */
.phone {
  position: relative;
  width: 340px;
  background: #101313;
  border-radius: 46px;
  padding: 11px 11px 0;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
  z-index: 3;
  align-self: flex-start;
  /* 3D tilt matching mob-preview.webp; --ph-scale is set per breakpoint */
  --ph-scale: 1;
  --ph-rx: 6deg;
  --ph-ry: -16deg;
  --ph-rz: 12deg;
  transform: perspective(1800px) rotateX(var(--ph-rx)) rotateY(var(--ph-ry)) rotateZ(var(--ph-rz)) scale(var(--ph-scale));
  transform-origin: 50% 30%;
  backface-visibility: hidden;
  /* the faded tail is invisible, so keep it out of the layout */
  margin-bottom: -150px;
  /* only the top portion reads; the rest dissolves into the page */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.72) 64%, rgba(0,0,0,.28) 82%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.72) 64%, rgba(0,0,0,.28) 82%, transparent 97%);
}
.phone__screen {
  /* the hero is centre-aligned, and the dashboard was silently inheriting it:
     the location line and the stat values were both centred in their boxes.
     Reset here once; .ph-app__lbl re-centres itself deliberately. */
  text-align: left;
  background: #fff;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  height: 560px;
  padding: 14px 15px 0;
  color: #10151c;
  font-size: 13px;
}

/* status bar */
.ph-status { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 4px 0 8px; color: #10151c; }
.ph-status__time { font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }
.ph-island { width: 84px; height: 25px; border-radius: 20px; background: #101313; }
.ph-status__icons { display: inline-flex; align-items: center; gap: 5px; }
.ph-sig { width: 17px; height: 11px; }
.ph-wifi { width: 15px; height: 11px; }
.ph-batt { width: 25px; height: 12px; }

/* app header */
.ph-head { display: flex; align-items: center; gap: 9px; padding: 12px 2px 11px; border-bottom: 1px solid #eef0f3; }
.ph-avatar { flex: 0 0 33px; width: 33px; height: 33px; border-radius: 50%; background: #f1f3f6; color: #5b6470; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; letter-spacing: .3px; }
.ph-head__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ph-head__txt strong { font-size: 13.5px; font-weight: 700; letter-spacing: -.35px; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.ph-head__txt > span { font-size: 11.5px; color: #8a929c; }
/* soft cross-fade as the mockup alternates between the two trade examples
   (class-based so the hero phone and the cloned one-app phone both animate) */
.js-ph-name, .js-ph-loc, .js-ph-ava { transition: opacity .3s var(--ease); }
.js-ph-name.is-swapping, .js-ph-loc.is-swapping, .js-ph-ava.is-swapping { opacity: 0; }
.ph-chev { width: 13px; height: 13px; color: #10151c; flex: 0 0 13px; }
.ph-head__act { display: inline-flex; align-items: center; gap: 11px; color: #10151c; }
.ph-bell { position: relative; display: inline-flex; }
.ph-bell svg { width: 19px; height: 19px; }
.ph-bell__dot { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 1.5px solid #fff; }
.ph-gear { width: 19px; height: 19px; }

/* section label rows */
.ph-sect { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px 9px; }
.ph-sect__label { font-size: 13px; font-weight: 500; color: #79828d; }
.ph-sect__ic { width: 18px; height: 18px; color: #1a73e8; }

/* 2x2 stat cards */
.ph-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ph-stat { display: flex; flex-direction: column; background: #fff; border: 1px solid #edeff2; border-radius: 14px; padding: 11px 11px 12px; box-shadow: 0 1px 3px rgba(16,21,28,.05); min-width: 0; }
.ph-stat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.ph-stat__label { font-size: 10px; letter-spacing: -.1px; white-space: nowrap; color: #6d7681; line-height: 1.3; }
.ph-stat__ic { flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; }
.ph-stat__ic svg { width: 14px; height: 14px; }
.ph-stat__ic--blue   { background: #e3edfd; color: #1a73e8; }
.ph-stat__ic--green  { background: #dcf5e6; color: #16a34a; }
.ph-stat__ic--indigo { background: #e6e9fd; color: #4f5fe0; }
.ph-stat__ic--amber  { background: #fdf0d9; color: #e09b25; }
/* margin-top:auto keeps every value on the same baseline even if a label wraps */
.ph-stat__val { display: block; margin-top: auto; padding-top: 8px; font-size: 25px; font-weight: 700; letter-spacing: -.9px; line-height: 1; }

/* pinned apps */
.ph-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ph-app { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ph-app__ic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e6e9ed; display: grid; place-items: center; color: #10151c; }
.ph-app__ic svg { width: 21px; height: 21px; }
.ph-app__lbl { font-size: 10.5px; color: #4b535d; text-align: center; line-height: 1.25; }

/* ---- ultra-modern overlays floating flat above the tilted phone ---- */
.ov {
  position: absolute;
  z-index: 6;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(16,21,28,.07);
  border-radius: 22px;
  box-shadow: 0 28px 64px -20px rgba(16,21,28,.32), 0 4px 14px rgba(16,21,28,.06);
  padding: 15px 16px 16px;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
}
.hero__stage.is-in .ov { opacity: 1; }
.ov__head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
/* icon circles use the app's blue, not the site lime, so the overlays read as part of the product */
/* each overlay takes the colour of the thing it represents: amber for reviews
   (matching the star rating), blue for enquiries (matching the sparkline) */
/* same system as the dashboard stat icons: a pale tinted disc with a SOLID
   coloured glyph, not a white glyph on a saturated fill. Amber for reviews
   (mirrors the Quotes sent calendar), blue for enquiries (mirrors New enquiries). */
.ov__ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.ov--reviews .ov__ic { background: linear-gradient(150deg,#fef6e6,#fdf0d9); color: #e09b25; }
.ov--enquiries .ov__ic { background: linear-gradient(150deg,#eef4fe,#e3edfd); color: #1a73e8; }
.ov__ic svg { width: 17px; height: 17px; }
.ov__title { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }

/* reviews overlay */
.ov--reviews { top: 16px; right: 46px; width: 280px; animation: bobB 7s ease-in-out infinite; transition-delay: .45s; }
.ov__tabs { display: flex; gap: 2px; background: #f1f3f6; border-radius: 999px; padding: 3px; margin-bottom: 10px; }
.ov__tab { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: #79828d; padding: 6px 0; border-radius: 999px; }
/* plain segmented-control pill, not colour-coded */
.ov__tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,21,28,.14); }
.ov__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ov__row + .ov__row { border-top: 1px solid #eff1f4; }
.ov__av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ov__av--a { background: #f1f3f6; color: #5b6470; }
.ov__av--b { background: #1a73e8; color: #fff; }
.ov__rowtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* name + stars sit together on the left, timestamp pushed right */
.ov__rowtop { display: flex; align-items: baseline; gap: 0; }
/* The 10px fade sits exactly over the right padding. A short name stops before
   that padding so nothing fades; only an overflowing name runs into it and
   dissolves, which keeps the stars visible without ever clipping them. */
.ov__name { font-size: 12.8px; font-weight: 700; color: #10151c; min-width: 0; overflow: hidden; white-space: nowrap;
  padding-right: 10px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent); }
.ov__stars { flex: 0 0 auto; color: #f5b301; letter-spacing: .5px; font-size: 10px; }
.ov__time { flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-size: 10.5px; color: #98a0a8; white-space: nowrap; }
.ov__rowsub { font-size: 11.5px; color: #6d7681; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov__unread { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #1a73e8; }
.ov__unread.is-off { visibility: hidden; }

/* enquiries overlay */
.ov--enquiries { bottom: 78px; left: 38px; width: 266px; animation: bobA 6.2s ease-in-out infinite; transition-delay: .7s; }
.ov__panel { display: flex; align-items: flex-end; gap: 10px; background: #f7f8fa; border-radius: 16px; padding: 12px 13px; }
.ov__metric { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ov__label { font-size: 11px; color: #6d7681; }
/* value and delta share a line, flush left; the delta rides at the TOP of the
   number rather than sitting on its baseline */
.ov__figures { display: flex; align-items: flex-start; gap: 7px; }
.ov__val { font-size: 30px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.05; color: #10151c; }
.ov__delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: #17a34a; }
.ov__delta svg { width: 11px; height: 11px; }
.ov__spark { flex: 1; height: 52px; min-width: 0; }
.ov__spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .6s; }
.ov__spark-fill { opacity: 0; transition: opacity .9s var(--ease-out) 1.15s; }
.hero__stage.is-in .ov__spark-line { stroke-dashoffset: 0; }
.hero__stage.is-in .ov__spark-fill { opacity: 1; }

@keyframes bobA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bobB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { padding: 8px 0 44px; text-align: center; }
.trust__line { color: var(--muted); font-size: .98rem; margin: 0 0 18px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(64px, 8vw, 110px) 0; }
.section__head { max-width: 720px; margin: 0 auto clamp(38px, 5vw, 60px); }
.problem .h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); }
.problem .lead { margin-top: 22px; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--ink-soft); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 18px; }
/* grid/flex items must be allowed to shrink below their content's intrinsic
   width, or the fixed-width animations force the track (and viewport) wider */
.card, .whocard, .step, .plancard, .feature__viz { min-width: 0; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--stack { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.feature__ic {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--accent); color: var(--ink);
  display: grid; place-items: center; margin-bottom: 20px;
}
.feature h3 { font-size: 1.32rem; font-weight: 600; margin: 0 0 10px; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--muted); }

.who { padding: 30px; }
.who__tag {
  display: inline-block; font-weight: 600; font-size: 1.12rem;
  padding-bottom: 12px; margin-bottom: 6px; position: relative;
}
.who__tag::after { content:""; position:absolute; left:0; bottom:4px; width:34px; height:8px; background:var(--accent); border-radius:4px; z-index:-1; }
.who p { margin: 0; color: var(--muted); }

/* ============================================================
   COMPOUND (panel + chart)
   ============================================================ */
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(32px, 5vw, 64px);
}
.compound__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.compound__copy .h2 { text-align: left; }
.compound__copy .lead { text-align: left; margin-left: 0; }
.compound__chart { position: relative; }
.chart { width: 100%; height: 200px; overflow: visible; }
.chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart__area { opacity: 0; transition: opacity 1s ease .3s; }
.chart__dot { fill: var(--ink); opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
.is-in .chart__line { animation: draw 1.6s var(--ease-out) forwards; }
.is-in .chart__area { opacity: 1; }
.is-in .chart__dot { animation: pop .4s var(--ease-out) 1.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
.chart__labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: .82rem; color: var(--muted); font-weight: 500; }
/* the chart line needs a real dash length; set via JS-friendly large value */
.chart__line { stroke-dasharray: 520; stroke-dashoffset: 520; }
.is-in .chart__line { animation: draw2 1.7s var(--ease-out) forwards; }
@keyframes draw2 { to { stroke-dashoffset: 0; } }

/* ============================================================
   COMPARE
   ============================================================ */
.compare { max-width: 900px; margin: 0 auto; }
.compare__table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: #fff;
}
/* each row is its own grid, so without min-width:0 a long word like
   "SimpleChange" widens that column and the header stops lining up with the body */
.compare__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--line); }
.compare__cell { min-width: 0; overflow-wrap: anywhere; }
.compare__row:first-child { border-top: 0; }
.compare__cell { padding: 18px 22px; font-size: 1rem; display: flex; align-items: center; }
.compare__cell--label { font-weight: 600; color: var(--ink); background: var(--bg-soft); }
.compare__cell--them { color: var(--muted); }
.compare__cell--us { font-weight: 600; background: linear-gradient(180deg, rgba(227,255,143,.35), rgba(227,255,143,.18)); border-left: 1px solid var(--line); }
.compare__row--head .compare__cell { font-weight: 700; font-size: 1.02rem; padding-top: 22px; padding-bottom: 22px; }
.compare__row--head .compare__cell--them { color: var(--ink-soft); }
.compare__row--head .compare__cell--us { color: var(--ink); }
.compare__row--head .compare__cell--us { display: flex; align-items: center; gap: 8px; }
.compare__logo { width: 20px; height: 20px; flex: none; }

/* ============================================================
   MEET JOE
   ============================================================ */
.meet { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: center; }
.meet__frame {
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(227,255,143,.5), transparent 60%),
    linear-gradient(160deg, #f4f6f1, #eef1ea);
  box-shadow: var(--shadow-md);
}
.meet__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-weight: 600; }
.meet__placeholder::before { content:"📷"; position:absolute; font-size:2rem; transform: translateY(-30px); }
.meet__placeholder { position: relative; }
.meet__photo { position: relative; }
/* square source, 4/5 frame: fill and crop rather than squash */
.meet__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.meet__sig { width: 168px; height: auto; margin-top: 20px; }
@media (max-width: 620px) {
  .meet__sig { width: 208px; margin-top: 22px; }
  /* 224% was tuned while the global img guard was silently capping .ann-img at
     100%, so once that cap was lifted the circle ballooned. This is the real size. */
  .mark--circle-img .ann-img { left: 46%; top: 45%; width: 132%; }
}
.meet__sign { margin-top: 16px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.meet__copy .h2 { text-align: left; }
.meet__copy p { color: var(--ink-soft); margin: 0 0 16px; }
.meet__stats { display: flex; gap: 34px; margin-top: 28px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat__num { font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat__label { font-size: .92rem; color: var(--muted); margin-top: 6px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 30px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step__num {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--ink); color: var(--accent);
  font-weight: 700; font-size: 1.05rem; margin-bottom: 20px;
}
.step h3 { font-size: 1.28rem; font-weight: 600; margin: 0 0 9px; }
.step p { margin: 0; color: var(--muted); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 800px; margin: 0 auto; }
.price {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 34px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price--feature { background: linear-gradient(180deg, #fff, #fcfef4); border-color: var(--accent-2); box-shadow: var(--shadow-md); }
.price__tag { font-weight: 600; color: var(--muted); font-size: 1rem; }
.price__amount { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.price__from { font-size: 1rem; color: var(--muted); }
.price__big { font-size: 2.8rem; font-weight: 700; letter-spacing: -.03em; }
.price__per { font-size: 1rem; color: var(--muted); }
.price p { color: var(--muted); margin: 4px 0 24px; flex: 1; }
.price__foot { text-align: center; color: var(--muted); margin-top: 22px; font-size: .96rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq__item.is-open { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; font-family: inherit; font-size: 1.1rem; font-weight: 600; color: var(--ink);
  text-align: left;
}
.faq__plus { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
.faq__plus::before, .faq__plus::after { content:""; position:absolute; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
.faq__plus::before { left: 0; right: 0; top: 9px; height: 2px; }
.faq__plus::after { top: 0; bottom: 0; left: 9px; width: 2px; }
.faq__item.is-open .faq__plus::after { transform: scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a p { margin: 0; padding: 0 24px 24px; color: var(--muted); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { padding-bottom: clamp(70px, 9vw, 120px); }
.finalcard {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 60px);
  background-color: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.finalcard::before {
  content:""; position:absolute; inset:auto 0 -40% 0; height: 80%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(227,255,143,.55), transparent 70%);
  pointer-events: none;
}
.finalcard .h2, .finalcard .lead { position: relative; }
.finalcard .lead { margin-top: 18px; }
.final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; position: relative; }

/* the CTA illustration. Both children need position:relative so they paint above
   the absolutely-positioned ::before glow. */
.finalcard__art, .finalcard__body { position: relative; }
.finalcard__art img { width: 100%; height: auto; margin: 0 auto; }
/* Stacked by default: the ask first, illustration beneath it, both centred as the
   card always was. Source order keeps the art first so it lands in the left grid
   column at desktop, so the stacked order is flipped with flex order instead.
   Art grows with the card so it doesn't look marooned on a wide tablet. */
.finalcard { display: flex; flex-direction: column; }
.finalcard__body { order: 1; }
/* width:100% because a flex item with auto side margins otherwise shrinks to
   content, and the image inside is sized in percentages so it collapses to 0 */
.finalcard__art { order: 2; width: 100%; max-width: clamp(260px, 55%, 360px); margin: 34px auto 0; }

@media (min-width: 861px) {
  .finalcard {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
    text-align: left;
  }
  /* order would otherwise carry into the grid and swap the columns */
  .finalcard__body, .finalcard__art { order: 0; }
  .finalcard__art { max-width: 400px; margin: 0; }
  .final__cta { justify-content: flex-start; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 62px 0 30px; background: var(--bg-soft); }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand .brand { margin-bottom: 14px; }
.footer__brand p { color: var(--muted); font-size: .95rem; line-height: 1.7; margin: 0; }
.footer__brand a { color: var(--ink-soft); }
.footer__brand a:hover { color: var(--ink); text-decoration: underline; }
.footer__col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 16px; font-weight: 600; }
.footer__col a { display: block; color: var(--ink-soft); font-size: .96rem; padding: 6px 0; }
.footer__col a:hover { color: var(--ink); }
.footer__base { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

/* ============================================================
   REVEAL MOTION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .05s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .28s; }
.reveal[data-d="4"] { transition-delay: .40s; }
.reveal[data-d="5"] { transition-delay: .52s; }

/* stacked / overlapping card entrance */
.reveal-card { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-card.is-in { opacity: 1; transform: none; }
.cards--stack .reveal-card.is-in:nth-child(1) { transition-delay: .04s; }
.cards--stack .reveal-card.is-in:nth-child(2) { transition-delay: .14s; }
.cards--stack .reveal-card.is-in:nth-child(3) { transition-delay: .24s; }
.cards--stack .reveal-card.is-in:nth-child(4) { transition-delay: .34s; }
.cards--stack .reveal-card.is-in:nth-child(5) { transition-delay: .44s; }
.cards--3 .reveal-card.is-in:nth-child(2), .steps .reveal-card.is-in:nth-child(2), .pricing .reveal-card.is-in:nth-child(2) { transition-delay: .12s; }
.cards--3 .reveal-card.is-in:nth-child(3), .steps .reveal-card.is-in:nth-child(3) { transition-delay: .24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__cta-secondary { display: none; }
  .nav__burger { display: flex; }
  .nav__actions .btn--dark { display: none; }
  .cards--3, .cards--stack, .steps, .pricegrid { grid-template-columns: 1fr; }
  .compound__grid { grid-template-columns: 1fr; gap: 32px; }
  .meet { grid-template-columns: 1fr; gap: 34px; }
  .meet__frame { max-width: 360px; }
  .pricing { grid-template-columns: 1fr; }
}
/* mid widths: the stage is too narrow for full-size phone + both float cards,
   so scale the phone (keeping the dashboard's proportions) and trim the cards */
@media (min-width: 621px) and (max-width: 1040px) {
  .phone { --ph-scale: .86; margin: 0 -24px -220px; }
  .ov--reviews { width: 248px; right: 6px; top: 10px; }
  .ov--enquiries { width: 236px; left: 2px; bottom: 62px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding-top: 34px; }
  .hero__stage { min-height: 420px; }
  /* scale the whole phone so the dashboard keeps its proportions instead of
     reflowing; negative side margins shrink the layout box to match the
     scaled width so it can't force horizontal overflow */
  .phone { --ph-scale: .72; margin: 0 -48px -280px; }
  /* these sit ABOVE the phone (z-index 6) and are opaque, so overlapping it is
     fine and they stay fully readable — unlike the old floatcards, which sat
     behind the phone and got clipped */
  .ov { padding: 11px 12px 12px; border-radius: 18px; }
  .ov--reviews { width: 206px; right: 0; top: 0; }
  .ov--enquiries { width: 192px; left: 0; bottom: 40px; }
  .ov__title { font-size: 13.5px; }
  .ov__ic { flex: 0 0 28px; width: 28px; height: 28px; }
  .ov__ic svg { width: 14px; height: 14px; }
  /* the timestamp is the least useful bit here, and dropping it gives the name
     enough room to render in full instead of fading to "Sara" */
  .ov__time { display: none; }
  .ov__av { flex: 0 0 26px; width: 26px; height: 26px; font-size: 11px; }
  .ov__tab { font-size: 11px; padding: 5px 0; }
  .ov__rowsub { font-size: 11px; }
  .ov__val { font-size: 24px; }
  .ov__label { font-size: 10.5px; }
  .ov__spark { height: 40px; }
  .compare__cell { padding: 14px 14px; font-size: .92rem; }
  .compare__row { grid-template-columns: 1.1fr 1fr 1fr; }
  .btn--lg { width: 100%; }
  /* hero CTAs stay on one line, compact (like Remote); never full width */
  .hero__cta { flex-wrap: nowrap; gap: 10px; }
  .hero__cta .btn { flex: 0 0 auto; width: auto; padding: 0 14px; min-height: 44px; font-size: .84rem; white-space: nowrap; }
  .final__cta .btn { width: 100%; }
  .meet__stats { gap: 24px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ============================================================
   SYSTEM-CARD ANIMATIONS (ported from simplechange.co.uk)
   Google search · Google Business Profile · receptionist/SMS · chatbot
   Re-themed onto SimpleChange's light + lime palette.
   ============================================================ */
.feature__viz {
  --accent: #1d2020;            /* remap the source brand-blue to SimpleChange ink */
  --divider: var(--line);
  position: relative;
  height: 236px;
  margin-bottom: 26px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(227,255,143,.22), transparent 60%),
    var(--bg-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the animation is the visual now, so the feature title sits directly under it */
.feature h3 { margin-top: 0; }

@keyframes caret { 50% { opacity: 0; } }

/* ---------- Card 1 · Google search ranking ---------- */
.gsearch-art { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.gcard { background: #fff; border-radius: 16px; padding: 15px 18px; width: 100%; max-width: 350px; box-shadow: 0 14px 34px rgba(29,32,32,.10); text-align: left; }
.glogo { display: block; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 9px; }
.glogo i { font-style: normal; }
.glogo .b { color: #4285f4; } .glogo .r { color: #ea4335; } .glogo .y { color: #fbbc05; } .glogo .g { color: #34a853; }
.gsearch { display: flex; align-items: center; border: 1px solid rgba(29,32,32,.08); border-radius: 24px; height: 36px; padding: 0 14px; font-size: 12.5px; color: var(--ink); box-shadow: 0 4px 12px rgba(29,32,32,.05); }
.gsearch #typed { white-space: nowrap; overflow: hidden; }
.gsearch svg { width: 13px; height: 13px; color: #4285f4; flex: none; margin-left: auto; }
.gsearch .caret { display: inline-block; width: 1.5px; height: 13px; background: #4285f4; vertical-align: -2px; margin-left: 1px; animation: caret 1.1s steps(1) infinite; }
.rankstack { position: relative; margin-top: 16px; margin-bottom: 30px; }
.rank { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(29,32,32,.08); border-radius: 14px; padding: 11px 12px; box-shadow: 0 10px 26px rgba(29,32,32,.08); position: relative; }
.rank .r-ava { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; background: #2e9e63; }
.rank .r-main { flex: 1; min-width: 0; text-align: left; }
.rank .r-main b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.rank .r-rate { display: flex; align-items: center; gap: 5px; font-size: 10.5px; margin-top: 2px; }
.rank .r-rate .stars { color: #f0a92e; letter-spacing: 1px; font-size: 10px; }
.rank .r-rate span { color: var(--muted); font-size: 10.5px; }
.rank .pos { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #2e9e63; flex: none; }
.rank .pos .trophy { font-size: 12px; }
.rank.r1 { z-index: 3; border: 2px solid var(--accent-2); background: linear-gradient(#fff, #fcffee); box-shadow: 0 0 0 3px rgba(227,255,143,.45), 0 12px 30px rgba(29,32,32,.10); }
.rank.r2 { position: absolute; left: 0; right: 0; bottom: -26px; transform: scale(.95); opacity: .7; z-index: 2; }
.rank.r2 .pos { color: var(--muted); }
.rank.r2 .r-ava { background: #c9c6c2; }

/* ---------- Card 2 · Google Business Profile + review chips ---------- */
.chips-anim { position: relative; height: 100%; width: 100%; overflow: hidden; display: grid; place-items: center; }
.gmb { position: relative; z-index: 4; width: 224px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 28px rgba(29,32,32,.10); padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.gmb__top { display: flex; justify-content: space-between; gap: 12px; }
.gmb__lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.bar { display: block; height: 8px; border-radius: 5px; background: #e7e7ec; }
.bar--name { width: 78%; } .bar--sub { width: 52%; }
.gmb__stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; line-height: 1; }
.gmb__photo { width: 46px; height: 40px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg,#cdd8f5,#9fb4ef); }
.gmb__tabs { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.tab { height: 5px; width: 26px; border-radius: 3px; background: #e7e7ec; }
.tab--active { background: #4285f4; width: 40px; }
.gmb__actions { display: flex; gap: 10px; }
.gmb__act { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #4285f4; color: #4285f4; display: grid; place-items: center; }
.gmb__act svg { width: 12px; height: 12px; }

/* The reviews land inside the profile card rather than scrolling past beneath it.
   Fixed row height + px keyframe steps (not var(), which Chrome ignores inside
   @keyframes) so the track wraps seamlessly on the duplicated second set. */
.gmb__feed { height: 68px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0,#000 72%,transparent 100%); }
.gmb__feed-track { display: flex; flex-direction: column; animation: gmbFeed 12s ease-in-out infinite; will-change: transform; }
.chips-anim:hover .gmb__feed-track { animation-play-state: paused; }
@keyframes gmbFeed {
  0%, 18%   { transform: translateY(0); }
  22%, 43%  { transform: translateY(-34px); }
  47%, 68%  { transform: translateY(-68px); }
  72%, 93%  { transform: translateY(-102px); }
  97%, 100% { transform: translateY(-136px); }
}
.gmb__rv { height: 34px; display: flex; align-items: center; gap: 9px; flex: none; }
.gmb__rv-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: linear-gradient(135deg,#e9e5ff,#d9d3f7); }
.gmb__rv-body { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gmb__rv-name { font-weight: 600; color: var(--ink); font-size: 12px; white-space: nowrap; }
.gmb__rv-stars { color: #f5a623; font-size: 9.5px; letter-spacing: .5px; }
.gmb__new {
  margin-left: 1px; flex: none;
  font-size: 7.6px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .5px;
  color: #202124; background: #fff;
  border: 1px solid #dadce0; border-radius: 4px;
  padding: 3.5px 5px 3px;
}

/* ---------- Card 3 + 4 · shared card + rise animation ---------- */
.nm-card { position: absolute; background: #fff; border: 1px solid rgba(29,32,32,.07); border-radius: 16px; box-shadow: 0 18px 44px rgba(29,32,32,.13); text-align: left; --rot: 0deg; animation: nmpop 4.4s ease-in-out infinite both; }
@keyframes nmpop {
  0%   { transform: rotate(var(--rot)) translateY(300px); animation-timing-function: cubic-bezier(.3,1.35,.5,1); }
  42%  { transform: rotate(var(--rot)) translateY(0); }
  80%  { transform: rotate(var(--rot)) translateY(0); animation-timing-function: cubic-bezier(.5,0,.85,.4); }
  100% { transform: rotate(var(--rot)) translateY(300px); }
}
.nm-b { font-size: 12px; line-height: 1.3; padding: 8px 11px; border-radius: 13px; margin-bottom: 6px; max-width: 92%; width: fit-content; }
.nm-b.in { background: #f0f0f3; color: var(--ink); border-bottom-left-radius: 4px; }
.nm-b.out { background: var(--accent); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }

/* Card 3 · montage frame (receptionist + text-back + chatbot), scaled to fit */
.viz--miss { overflow: hidden; }

/* ---- Pillar 3: they ask -> we reply -> cursor pays -> receipt, looping ----
   Phase 1 reuses the step-1 `.cw-*` bubble system, same as the win-back card,
   so every conversation on the page reads as the same product. 7.5s loop, with the
   both messages holding ~1.4s before the pay button, and the receipt held ~1.2s. */
.viz--pay { overflow: hidden; }
.pay-art { position: relative; width: 284px; height: 208px; margin: 0 auto; text-align: left; }

/* phase 1: the conversation */
.pay-chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 4px; animation: payChat 7.5s ease-in-out infinite; }
.pay-reply { display: flex; align-items: flex-end; gap: 7px; }
.pay-reply__av { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; opacity: 0; animation: payAv 7.5s ease-in-out infinite; }
.pay-reply__msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pay-m1 .cw-bub { animation: payB1 7.5s ease-in-out infinite; }
.pay-m2 .cw-bub { animation: payB2 7.5s ease-in-out infinite; }

/* phase 2: the pay button, with a cursor that travels in and clicks it */
.pay-scene { position: absolute; inset: 0; display: grid; place-items: center; animation: payScene 7.5s ease-in-out infinite; }
.pay-btn2 { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; padding: 13px 26px; border-radius: 999px; animation: payBtn 7.5s ease-in-out infinite; }
/* an expanding ring, not a filled disc: a solid disc sat over the button and
   blotted out "Pay £235.00" */
.pay-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: transparent; border: 2.5px solid rgba(30,142,62,.5); opacity: 0; pointer-events: none; animation: payRing 7.5s ease-in-out infinite; }
.pay-cursor { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; opacity: 0; animation: payCursor 7.5s cubic-bezier(.32,0,.24,1) infinite; }
.pay-cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(16,21,28,.3)); }

/* phase 3: the receipt */
.pay-receipt {
  position: absolute; left: 50%; top: 50%; width: 238px; margin: -53px 0 0 -119px;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 46px rgba(29,32,32,.2);
  animation: payReceipt 7.5s ease-in-out infinite;
}
.pay-receipt__hd { display: flex; justify-content: space-between; padding: 12px 22px 11px; border-bottom: 1px solid #eef0f3; font-size: .8rem; color: #6d7681; }
.pay-receipt__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 16px; }
.pay-receipt__amt { font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; }
.pay-receipt__pill { border: 1.5px solid #34a853; color: #1e8e3e; font-size: .82rem; font-weight: 600; padding: 5px 16px; border-radius: 999px; }

@keyframes payChat {
  0%, 44%  { opacity: 1; transform: scale(1) translateY(0); }
  48%, 96% { opacity: 0; transform: scale(.96) translateY(-8px); }
  100%     { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes payAv {
  0%, 2%   { opacity: 0; transform: scale(.7); }
  8%, 44%  { opacity: 1; transform: scale(1); }
  48%, 96% { opacity: 0; transform: scale(.7); }
  100%     { opacity: 0; transform: scale(.7); }
}
/* their message */
@keyframes payB1 {
  0%, 3%   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: scale(.85); }
  9%       { opacity: 1; max-height: 120px; padding-top: 9px; padding-bottom: 9px; transform: scale(1); }
  44%      { opacity: 1; max-height: 120px; padding-top: 9px; padding-bottom: 9px; transform: scale(1); }
  48%,100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: scale(.85); }
}
/* our reply, then a proper beat before anything moves */
@keyframes payB2 {
  0%, 19%  { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: scale(.85); }
  25%      { opacity: 1; max-height: 120px; padding-top: 9px; padding-bottom: 9px; transform: scale(1); }
  44%      { opacity: 1; max-height: 120px; padding-top: 9px; padding-bottom: 9px; transform: scale(1); }
  48%,100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: scale(.85); }
}
@keyframes payScene {
  0%, 46%   { opacity: 0; transform: scale(.97) translateY(10px); }
  51%, 69%  { opacity: 1; transform: scale(1) translateY(0); }
  73%, 100% { opacity: 0; transform: scale(.97) translateY(-6px); }
}
@keyframes payCursor {
  0%, 48%   { opacity: 0; transform: translate(62px, 50px); }
  51%       { opacity: 1; transform: translate(62px, 50px); }
  59%       { opacity: 1; transform: translate(8px, 10px); }
  60.5%     { opacity: 1; transform: translate(8px, 10px) scale(.84); }
  62%       { opacity: 1; transform: translate(8px, 10px) scale(1); }
  70%, 100% { opacity: 0; transform: translate(8px, 10px); }
}
@keyframes payBtn {
  0%, 59%   { transform: scale(1); background-color: #1D2020; }
  60.5%     { transform: scale(.94); background-color: #1e8e3e; }
  62%       { transform: scale(1.03); background-color: #1e8e3e; }
  64%, 70%  { transform: scale(1); background-color: #1e8e3e; }
  73%, 100% { transform: scale(1); background-color: #1D2020; }
}
@keyframes payRing {
  0%, 59%   { opacity: 0; transform: scale(.35); }
  61%       { opacity: 1; transform: scale(1); }
  69%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes payReceipt {
  0%, 71%  { opacity: 0; transform: scale(.9); }
  76%, 94% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.94); }
}

/* ---- Pillar 5: a radar scanning past customers, with cards cycling through ----
   Recreated from omniagent.framer.website's `framer-eoa1xr` (pulsing radar +
   stacked lead cards), reworked for win-backs. 12s loop; the three cards share
   one keyframe set and are offset by a third each, so at any moment one is at
   the front, one mid-stack and one at the back. */
.viz--return { overflow: hidden; }
.rtn-art { position: relative; width: 300px; height: 200px; margin: 0 auto; text-align: left; }

/* the radar */
.rad { position: absolute; left: 50%; top: 6px; width: 54px; height: 54px; margin-left: -27px; display: block; }
.rad i, .rad b { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.rad i { width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 1.5px solid var(--accent-2); opacity: 0; animation: radPulse 3s ease-out infinite; }
.rad i:nth-child(2) { animation-delay: 1s; }
.rad i:nth-child(3) { animation-delay: 2s; }
.rad b { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--ink); box-shadow: 0 0 0 4px rgba(227,255,143,.55); }
@keyframes radPulse {
  0%   { opacity: 0; transform: scale(.24); }
  12%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1); }
}

/* the card stack */
.rcards { position: absolute; left: 0; right: 0; top: 68px; height: 120px; }
.rcard {
  position: absolute; left: 4px; right: 4px; top: 0;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid rgba(29,32,32,.08); border-radius: 15px;
  padding: 12px 14px 11px;
  box-shadow: 0 14px 34px rgba(29,32,32,.14);
  opacity: 0;
  animation: rcardCycle 12s ease-in-out infinite;
}
.rcard--2 { animation-delay: -4s; }
.rcard--3 { animation-delay: -8s; }
.rcard__name { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.rcard__sub { font-size: .76rem; color: var(--muted); }
.rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #f0f2f4; }
.rcard__meta { font-size: .72rem; color: var(--muted); }
.rcard__meta b { color: var(--ink); font-weight: 600; }
/* the two states sit on top of each other and cross-fade, so the card ends on
   the outcome (rebooked) rather than on us having sent something */
.rcard__tags { position: relative; flex: none; min-width: 122px; height: 18px; }
.rcard__tag { position: absolute; right: 0; top: 0; height: 18px; display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: #1e8e3e; white-space: nowrap; }
.rcard__tag--sent { animation: rtagSent 12s ease-in-out infinite; }
.rcard__tag--booked { padding: 0 8px; border-radius: 999px; background: #e8f6ec; animation: rtagBooked 12s ease-in-out infinite; }
.rcard--2 .rcard__tag--sent, .rcard--2 .rcard__tag--booked { animation-delay: -4s; }
.rcard--3 .rcard__tag--sent, .rcard--3 .rcard__tag--booked { animation-delay: -8s; }
@keyframes rtagSent {
  0%, 2%    { opacity: 0; }
  6%, 76%   { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes rtagBooked {
  0%, 77%  { opacity: 0; }
  81%, 96% { opacity: 1; }
  100%     { opacity: 0; }
}
.rcard__tag svg { width: 11px; height: 11px; }

/* back -> middle -> front -> out */
@keyframes rcardCycle {
  0%   { opacity: 0; transform: translateY(26px) scale(.86); z-index: 1; }
  5%   { opacity: .32; transform: translateY(26px) scale(.86); z-index: 1; }
  30%  { opacity: .32; transform: translateY(26px) scale(.86); z-index: 1; }
  38%  { opacity: .62; transform: translateY(13px) scale(.93); z-index: 2; }
  63%  { opacity: .62; transform: translateY(13px) scale(.93); z-index: 2; }
  71%  { opacity: 1;   transform: translateY(0) scale(1);     z-index: 3; }
  93%  { opacity: 1;   transform: translateY(0) scale(1);     z-index: 3; }
  100% { opacity: 0;   transform: translateY(-24px) scale(.97); z-index: 3; }
}

/* wide pillar: mockup beside the copy instead of above it */
.cards--stack .feature--wide { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .feature--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
  .feature--wide .feature__viz { margin-bottom: 0; }
  .feature--wide .feature__txt { text-align: left; }
}

/* capstone + the one-app line that closes the system section */
.sysend { margin-top: 30px; text-align: center; }
.sysend__cap { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.sysend__sub { margin: 6px auto 0; max-width: 46ch; color: var(--muted); }
@media (max-width: 620px) { .sysend__cap { font-size: 1.28rem; } }

/* "one app" panel: copy on the left, a smaller clone of the hero phone on the
   right, cropped by the panel edge so it reads as a product shot */
.oneapp {
  position: relative;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 24px;
  padding: 42px 0 42px 48px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: radial-gradient(120% 130% at 3% 0%, rgba(227,255,143,.34), transparent 58%), var(--bg-soft);
  overflow: hidden;
  text-align: left;
}
.oneapp__title { font-size: 1.6rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.2; margin: 0 0 9px; }
.oneapp__sub { margin: 0; color: var(--muted); }
.oneapp__device { position: relative; align-self: stretch; min-height: 258px; }
.oneapp__device .phone {
  /* anchored past the right edge so the panel crops it, like a product shot */
  position: absolute; right: -38px; top: 22px; margin: 0;
  --ph-scale: .72;
  /* no fade here: the panel's own edge does the cropping */
  -webkit-mask-image: none; mask-image: none;
  box-shadow: 0 30px 62px -22px rgba(16,21,28,.42), inset 0 0 0 2px rgba(255,255,255,.06);
}
@media (max-width: 860px) {
  .oneapp { grid-template-columns: 1fr; gap: 4px; padding: 34px 26px 0; text-align: center; }
  .oneapp__title { font-size: 1.35rem; }
  .oneapp__device { min-height: 216px; }
  /* extra offset because the tilt throws the phone's visual mass to the right,
     so centring the box alone leaves it looking off-centre */
  .oneapp__device .phone { right: auto; left: 50%; margin-left: -172px; top: 14px; --ph-scale: .68; }
}
.nmiss-art { position: relative; width: 600px; height: 300px; flex: none; transform: scale(.8); transform-origin: center; }
.nmiss-art .nm-sms { left: 150px; top: 40px; width: 260px; --rot: -2deg; z-index: 3; padding: 15px 16px; animation-delay: 0s; }
.nm-sms__hd { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.nm-dot { width: 15px; height: 15px; border-radius: 50%; background: #2e9e63; flex: none; }
.nm-sms .nm-b.out { background: #2e9e63; }
.nmiss-art .nm-call { left: 8px; top: 126px; width: 170px; background: #17151f; border-color: #17151f; color: #fff; --rot: -7deg; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 17px 15px; animation-delay: .22s; }
.nmiss-art .nm-chat { right: 2px; top: 14px; width: 214px; --rot: 5deg; transform-origin: top center; z-index: 2; animation-delay: .1s; }
.nm-chat.botw { padding: 0; overflow: hidden; background: #fff; border-radius: 18px; }
.nm-call__ic { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #2e9e63; flex: none; }
.nm-call__ic img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block; }
.nm-call__label { font-size: 14px; font-weight: 600; }
.nm-call__timer { font-size: 11px; color: #a7a4b3; }
.nm-wave { display: flex; align-items: center; gap: 3px; height: 18px; margin-top: 2px; }
.nm-wave i { width: 3px; border-radius: 2px; background: #4c86d6; animation: nmwave 1s ease-in-out infinite; }
.nm-wave i:nth-child(3n) { background: #2e9e63; }
.nm-wave i:nth-child(1) { height: 7px; animation-delay: 0s; } .nm-wave i:nth-child(2) { height: 15px; animation-delay: .09s; }
.nm-wave i:nth-child(3) { height: 18px; animation-delay: .18s; } .nm-wave i:nth-child(4) { height: 11px; animation-delay: .27s; }
.nm-wave i:nth-child(5) { height: 17px; animation-delay: .36s; } .nm-wave i:nth-child(6) { height: 9px; animation-delay: .45s; }
.nm-wave i:nth-child(7) { height: 16px; animation-delay: .54s; } .nm-wave i:nth-child(8) { height: 18px; animation-delay: .63s; }
.nm-wave i:nth-child(9) { height: 12px; animation-delay: .72s; } .nm-wave i:nth-child(10) { height: 17px; animation-delay: .81s; }
.nm-wave i:nth-child(11) { height: 8px; animation-delay: .9s; }
@keyframes nmwave { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.nm-logo__mark { color: #8fae2b; font-size: 24px; line-height: 1; }

/* Card 4 · AI chatbot widget (static, gentle float) */
.viz--chat .botw { position: relative; width: 212px; margin: 0 auto; background: #fff; border: 1px solid rgba(29,32,32,.08); border-radius: 18px; box-shadow: 0 18px 44px rgba(29,32,32,.14); overflow: hidden; text-align: left; animation: botFloat 6s ease-in-out infinite; }
@keyframes botFloat { 0%,100% { transform: translateY(0) scale(.9); } 50% { transform: translateY(-7px) scale(.9); } }
.botw__hd { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid rgba(29,32,32,.09); }
.botw__logo { position: relative; width: 25px; height: 25px; border-radius: 50%; background: #141019; display: grid; place-items: center; flex: none; }
.botw__logo svg { width: 17px; height: 17px; }
.botw__online { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.botw__title { font-size: 12px; font-weight: 700; color: var(--ink); flex: 1; letter-spacing: -.01em; }
.botw__ctrls { display: flex; align-items: center; gap: 5px; color: #a3a2ab; }
.botw__ctrls svg { width: 11px; height: 11px; display: block; }
.botw__body { padding: 9px 10px 6px; }
.botw__user { width: fit-content; max-width: 88%; margin: 0 0 9px auto; background: #fff; border: 1.5px solid var(--ink); color: var(--ink); font-size: 10.5px; font-weight: 600; padding: 6px 12px; border-radius: 14px; }
.botw__botname { font-size: 10px; font-weight: 700; color: #8b8a93; margin: 0 0 4px 32px; }
.botw__botrow { display: flex; align-items: flex-end; gap: 7px; }
.botw__ava { width: 25px; height: 25px; border-radius: 50%; background: #141019; display: grid; place-items: center; flex: none; }
.botw__ava svg { width: 17px; height: 17px; }
.botw__botmsg { background: #eff0f3; color: var(--ink); font-size: 10.5px; line-height: 1.35; padding: 7px 10px; border-radius: 12px; border-bottom-left-radius: 4px; max-width: 82%; }
.botw__time { font-size: 9px; color: #a8a7af; margin: 4px 0 0 32px; }
.botw__input { margin: 2px 10px 0; background: #f1f1f4; color: #a2a1a9; font-size: 10.5px; padding: 9px 12px; border-radius: 20px; }
.botw__footer { text-align: center; font-size: 9.5px; color: #8b8a93; padding: 8px 10px 10px; font-weight: 500; }
.botw__brand { color: var(--ink); font-weight: 700; }
.botw__brand .nm-logo__mark { font-size: 10px; margin-right: 1px; color: #8fae2b; }
.botw__fab { position: absolute; right: 9px; bottom: 9px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(29,32,32,.35); }
.botw__fab svg { width: 15px; height: 15px; }

/* mobile: keep the framed animations tidy in a single column */
@media (max-width: 600px) {
  .feature__viz { height: 214px; }
  .gcard { max-width: 300px; padding: 13px 15px; }
  /* the reviews now sit inside the card, so mobile only needs to shrink it */
  /* wide enough that the NEW chip clears the card edge on the longest name */
  .gmb { width: 216px; padding: 11px; gap: 8px; }
  .gmb__photo { width: 40px; height: 36px; } .gmb__stars { font-size: 12px; letter-spacing: 1px; }
  /* Never lose a lead. This frame must match the other animation frames (214px),
     and three full-size app cards do not fit in one at legible scale, so they
     overlap like a hand of cards: chatbot front-left, receptionist front-centre,
     SMS tucked behind showing its header and first message. The chat widget's
     chrome (input, footer, timestamp, fab) is hidden here purely to buy height.
     Anchored top-centre so the local coordinates map predictably to the frame. */
  .nmiss-art {
    position: absolute; left: 50%; top: 0; margin-left: -165px;
    width: 330px; height: 275px;
    transform: scale(.778); transform-origin: top center;
  }
  .nmiss-art .nm-sms { left: 152px; top: 0; width: 178px; right: auto; z-index: 1; }
  .nmiss-art .nm-chat { left: 0; top: 26px; width: 168px; right: auto; z-index: 2; }
  .nmiss-art .nm-call { left: 132px; top: 104px; width: 148px; right: auto; z-index: 3; }
  .nmiss-art .botw__input,
  .nmiss-art .botw__footer,
  .nmiss-art .botw__time,
  .nmiss-art .botw__fab { display: none; }
  /* at 168px the header would otherwise break "My AI Chatbot" onto two lines */
  .nmiss-art .botw__title { white-space: nowrap; }
}

/* ============================================================
   HOW-IT-WORKS + COMPOUND animations (from simplechange.co.uk)
   ============================================================ */
/* framed viz for step cards (chat thread + lottie) */
.step__viz {
  position: relative; height: 212px; margin-bottom: 22px;
  border-radius: 16px; border: 1px solid var(--line);
  background: radial-gradient(120% 80% at 50% -10%, rgba(227,255,143,.20), transparent 60%), var(--bg-soft);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.step__viz .lottie-animation { height: 188px; width: auto; max-width: 88%; }
.step__viz .lottie-animation svg { display: block; }

/* chat thread — step 1 "you message me" */
.chatanim { width: 100%; padding: 0 16px; display: flex; align-items: center; justify-content: center; }
.chatanim__thread { width: 100%; max-width: 300px; display: flex; flex-direction: column; }
.cw-slot { display: flex; flex-direction: column; }
.cw-slot.in { align-items: flex-start; }
.cw-slot.out { align-items: flex-end; }
.cw-pill, .cw-bub { width: fit-content; max-width: 88%; box-sizing: border-box; overflow: hidden; max-height: 0; opacity: 0; will-change: max-height, padding, opacity, transform; }
.cw-slot.in .cw-pill, .cw-slot.in .cw-bub { background: #fff; color: var(--ink); border-radius: 16px 16px 16px 5px; transform-origin: left bottom; box-shadow: 0 1px 3px rgba(29,32,32,.07), 0 0 0 1px var(--line); }
.cw-slot.out .cw-pill, .cw-slot.out .cw-bub { background: var(--ink); color: #fff; border-radius: 16px 16px 5px 16px; transform-origin: right bottom; }
.cw-pill { padding: 0 14px; }
.cw-d { display: flex; gap: 5px; align-items: center; height: 7px; }
.cw-d i { width: 6px; height: 6px; border-radius: 50%; display: block; animation: cwDot 1.3s ease-in-out infinite; }
.cw-d i:nth-child(2) { animation-delay: .16s; } .cw-d i:nth-child(3) { animation-delay: .32s; }
.cw-slot.in .cw-d i { background: #b6b6bd; }
.cw-slot.out .cw-d i { background: #8b8f8f; }
.cw-bub { padding: 0 14px; font-size: 13.5px; line-height: 1.4; }
.cw-m1 { margin-bottom: 3px; } .cw-m2 { margin-bottom: 12px; }
.cw-m1 .cw-pill { animation: cwP1 9s ease-in-out infinite; } .cw-m1 .cw-bub { animation: cwB1 9s ease-in-out infinite; }
.cw-m2 .cw-pill { animation: cwP2 9s ease-in-out infinite; } .cw-m2 .cw-bub { animation: cwB2 9s ease-in-out infinite; }
.cw-m3 .cw-pill { animation: cwP3 9s ease-in-out infinite; } .cw-m3 .cw-bub { animation: cwB3 9s ease-in-out infinite; }
@keyframes cwDot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cwP1 { 0%,4% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.8); } 6% { opacity:1;max-height:38px;padding-top:11px;padding-bottom:11px;transform:scale(1); } 13% { opacity:1;max-height:38px;padding-top:11px;padding-bottom:11px; } 17%,100% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.8); } }
@keyframes cwB1 { 0%,13% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.85); } 19% { opacity:1;max-height:120px;padding-top:9px;padding-bottom:9px;transform:scale(1); } 96% { opacity:1;max-height:120px;padding-top:9px;padding-bottom:9px;transform:scale(1); } 100% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.85); } }
@keyframes cwP2 { 0%,25% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.8); } 27% { opacity:1;max-height:38px;padding-top:11px;padding-bottom:11px;transform:scale(1); } 34% { opacity:1;max-height:38px;padding-top:11px;padding-bottom:11px; } 38%,100% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.8); } }
@keyframes cwB2 { 0%,34% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.85); } 40% { opacity:1;max-height:110px;padding-top:9px;padding-bottom:9px;transform:scale(1); } 96% { opacity:1;max-height:110px;padding-top:9px;padding-bottom:9px;transform:scale(1); } 100% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.85); } }
@keyframes cwP3 { 0%,45% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.8); } 47% { opacity:1;max-height:38px;padding-top:11px;padding-bottom:11px;transform:scale(1); } 54% { opacity:1;max-height:38px;padding-top:11px;padding-bottom:11px; } 58%,100% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.8); } }
@keyframes cwB3 { 0%,54% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.85); } 60% { opacity:1;max-height:110px;padding-top:9px;padding-bottom:9px;transform:scale(1); } 96% { opacity:1;max-height:110px;padding-top:9px;padding-bottom:9px;transform:scale(1); } 100% { opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:scale(.85); } }

/* growth / enquiries card — compound "it only gets better" */
.compound__viz { display: flex; align-items: center; justify-content: center; }
/* ---- "And it only gets better": the flywheel ----
   The copy is literally a loop (reviews -> rankings -> customers -> reviews),
   so the visual draws that loop rather than a generic rising bar chart. A dot
   orbits the ring and each node's figure steps up on every lap: 3s per lap,
   3 laps, so the whole thing is a 9s loop that ends where it began. */
.fly { position: relative; width: 260px; height: 260px; margin: 0 auto; }
/* the figures have to snap back at the loop point (96 -> 12, #1 -> #8). Dip the
   whole wheel briefly so the reset happens while it is faded, not in plain sight. */
.fly { animation: flyReset 12s ease-in-out infinite; }
@keyframes flyReset {
  0%, 90%   { opacity: 1; }
  94%, 97%  { opacity: .14; }
  100%      { opacity: 1; }
}
.fly__ring { position: absolute; inset: 0; width: 100%; height: 100%; }

.fly__orbit { position: absolute; inset: 0; animation: flySpin 3s linear infinite; }
/* top 13.08% = the ring's topmost point (r96 in a 260 box) at any scale;
   the negative margins put the dot's CENTRE on the line rather than above it */
.fly__dot { position: absolute; left: 50%; top: 13.08%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px rgba(227,255,143,.6); }
@keyframes flySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.fly__node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 84px; padding: 9px 12px 10px;
  background: #fff; border: 1px solid rgba(29,32,32,.09); border-radius: 14px;
  box-shadow: 0 10px 26px rgba(29,32,32,.12);
}
.fly__node--a { left: 50%; top: 13%; }
.fly__node--b { left: 82%; top: 65%; }
.fly__node--c { left: 18%; top: 65%; }
.fly__num { position: relative; display: block; height: 25px; width: 100%; }
.fly__num i { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-style: normal; font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; line-height: 25px; opacity: 0; }
.fly__lbl { font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* gamified gain badge: pops as the dot passes and the figure steps up. Fires
   only on the two improvements, never on the loop reset. */
.fly__pop {
  position: absolute; top: -9px; right: -15px;
  padding: 2px 7px; border-radius: 999px;
  background: #1e8e3e; color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap; opacity: 0; pointer-events: none;
  box-shadow: 0 4px 11px rgba(30,142,62,.34);
}
.fly__node--a .fly__pop--1 { animation: flyPopA1 12s ease-out infinite; }
.fly__node--a .fly__pop--2 { animation: flyPopA2 12s ease-out infinite; }
.fly__node--b .fly__pop--1 { animation: flyPopB1 12s ease-out infinite; }
.fly__node--b .fly__pop--2 { animation: flyPopB2 12s ease-out infinite; }
.fly__node--c .fly__pop--1 { animation: flyPopC1 12s ease-out infinite; }
.fly__node--c .fly__pop--2 { animation: flyPopC2 12s ease-out infinite; }

/* reviews step at 33% and 67% */
@keyframes flyPopA1 {
  0%, 23% { opacity: 0; transform: translateY(5px) scale(.6); }
  27%      { opacity: 1; transform: translateY(-5px) scale(1.06); }
  30%      { opacity: 1; transform: translateY(-8px) scale(1); }
  36%, 100% { opacity: 0; transform: translateY(-17px) scale(.92); }
}
@keyframes flyPopA2 {
  0%, 48% { opacity: 0; transform: translateY(5px) scale(.6); }
  52%      { opacity: 1; transform: translateY(-5px) scale(1.06); }
  55%      { opacity: 1; transform: translateY(-8px) scale(1); }
  61%, 100% { opacity: 0; transform: translateY(-17px) scale(.92); }
}
@keyframes flyPopB1 {
  0%, 31% { opacity: 0; transform: translateY(5px) scale(.6); }
  35%      { opacity: 1; transform: translateY(-5px) scale(1.06); }
  38%      { opacity: 1; transform: translateY(-8px) scale(1); }
  44%, 100% { opacity: 0; transform: translateY(-17px) scale(.92); }
}
@keyframes flyPopB2 {
  0%, 56% { opacity: 0; transform: translateY(5px) scale(.6); }
  60%      { opacity: 1; transform: translateY(-5px) scale(1.06); }
  63%      { opacity: 1; transform: translateY(-8px) scale(1); }
  69%, 100% { opacity: 0; transform: translateY(-17px) scale(.92); }
}
@keyframes flyPopC1 {
  0%, 40% { opacity: 0; transform: translateY(5px) scale(.6); }
  44%      { opacity: 1; transform: translateY(-5px) scale(1.06); }
  47%      { opacity: 1; transform: translateY(-8px) scale(1); }
  53%, 100% { opacity: 0; transform: translateY(-17px) scale(.92); }
}
@keyframes flyPopC2 {
  0%, 65% { opacity: 0; transform: translateY(5px) scale(.6); }
  69%      { opacity: 1; transform: translateY(-5px) scale(1.06); }
  72%      { opacity: 1; transform: translateY(-8px) scale(1); }
  78%, 100% { opacity: 0; transform: translateY(-17px) scale(.92); }
}

/* each node's figure steps up just after the dot passes it, so the three read
   as causing one another rather than all jumping at once */
.fly__node--a .n1 { animation: flyA1 12s ease-in-out infinite; }
.fly__node--a .n2 { animation: flyA2 12s ease-in-out infinite; }
.fly__node--a .n3 { animation: flyA3 12s ease-in-out infinite; }
.fly__node--b .n1 { animation: flyB1 12s ease-in-out infinite; }
.fly__node--b .n2 { animation: flyB2 12s ease-in-out infinite; }
.fly__node--b .n3 { animation: flyB3 12s ease-in-out infinite; }
.fly__node--c .n1 { animation: flyC1 12s ease-in-out infinite; }
.fly__node--c .n2 { animation: flyC2 12s ease-in-out infinite; }
.fly__node--c .n3 { animation: flyC3 12s ease-in-out infinite; }

@keyframes flyA1 { 0%, 22% { opacity: 1; } 26%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes flyA2 { 0%, 22% { opacity: 0; } 26%, 47% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes flyA3 { 0%, 47% { opacity: 0; } 51%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

@keyframes flyB1 { 0%, 30% { opacity: 1; } 34%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes flyB2 { 0%, 30% { opacity: 0; } 34%, 55% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes flyB3 { 0%, 55% { opacity: 0; } 59%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

@keyframes flyC1 { 0%, 39% { opacity: 1; } 43%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes flyC2 { 0%, 39% { opacity: 0; } 43%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes flyC3 { 0%, 64% { opacity: 0; } 68%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

@media (max-width: 620px) {
  .fly { width: 236px; height: 236px; }
  .fly__node { min-width: 74px; padding: 8px 10px 9px; }
  .fly__num i { font-size: 1.05rem; }
}

/* ============================================================
   WHO IT'S FOR — Remote-style tall cards
   ============================================================ */
/* image sits at the top of the card, copy drops beneath it with the heading
   resting directly on its description; the arrow stays pinned top-right */
.whocard { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 0 24px; min-height: 336px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.whocard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.whocard__media {
  position: relative; height: 168px; flex: none; overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(227,255,143,.55), transparent 62%),
    linear-gradient(150deg, #f2f4ee, #e7ebe1);
  border-bottom: 1px solid var(--line);
}
.whocard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.whocard:hover .whocard__media img { transform: scale(1); }
.whocard__arrow { position: absolute; top: 16px; right: 16px; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.86); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--ink); transition: transform .3s var(--ease-out), background .3s, border-color .3s; }
.whocard__arrow svg { width: 17px; height: 17px; }
.whocard:hover .whocard__arrow { background: var(--accent); border-color: var(--accent); transform: translate(2px,-2px); }
.whocard__body { padding: 24px 26px 0; display: flex; flex-direction: column; gap: 10px; }
.whocard__title { font-size: 1.42rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 0; color: var(--ink); }
.whocard__desc { color: var(--muted); margin: 0; font-size: .98rem; }
@media (max-width: 620px) {
  .whocard { min-height: 0; }
  .whocard__media { height: 148px; }
  .whocard__title { font-size: 1.28rem; }
}

/* ============================================================
   Highlight annotation variants — underline + circle (draw in)
   ============================================================ */
/* Same pale lime as the marker highlight, drawn loose + hand-held. */
.mark--squiggle, .mark--circle { position: relative; z-index: 0; background: none; padding: 0 .06em; color: var(--ink); white-space: nowrap; }
.ann { position: absolute; pointer-events: none; overflow: visible; z-index: -1; }
.ann path { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ann--squiggle { left: -3%; width: 106%; bottom: -.26em; height: .58em; }
.ann--squiggle path { stroke-width: 9; }
.ann--circle { left: -15%; top: -32%; width: 130%; height: 166%; }
.ann--circle path { stroke-width: 6; }
.reveal.is-in .ann path, .is-in .ann path { animation: drawAnn .9s var(--ease-out) .15s forwards; }
@keyframes drawAnn { to { stroke-dashoffset: 0; } }

/* image-based hand-drawn text annotations (Joe's brush marks, recoloured to lime) */
.mark--circle-img, .mark--brush, .mark--marker, .mark--uline, .mark--scribble {
  position: relative; z-index: 0; white-space: nowrap; color: var(--ink);
}
/* max-width:none opts out of the global img guard; these marks are deliberately
   wider than the word they underline (112%) so the stroke overhangs it */
.ann-img { position: absolute; pointer-events: none; z-index: -1; clip-path: inset(0 100% 0 0); max-width: none; }
.reveal.is-in .ann-img, .is-in .ann-img { animation: drawWipe 1s var(--ease-out) .2s forwards; }
@keyframes drawWipe { to { clip-path: inset(0 0 0 0); } }

/* circle around a word */
.mark--circle-img .ann-img { left: 48%; top: 47%; width: 138%; height: auto; transform: translate(-50%,-50%) rotate(-3deg); }
/* thick brush highlight behind text */
.mark--brush .ann-img { left: -7%; width: 114%; top: 54%; height: 1.12em; transform: translateY(-50%); }
/* marker highlight behind text */
.mark--marker .ann-img { left: -6%; width: 112%; top: 54%; height: 1.05em; transform: translateY(-50%); }
/* tapered brush underline — sits behind the lower part of the word */
.mark--uline .ann-img { left: -4%; width: 108%; bottom: -.02em; height: .42em; }
/* wavy squiggle underline — sits behind the lower part of the word */
.mark--scribble .ann-img { left: -6%; width: 112%; bottom: -.14em; height: .72em; }

/* ============================================================
   Hand-drawn doodle (above the features section)
   ============================================================ */
/* framer-1k90ihu recreation: 3 hand-drawn marks radiating from centre that
   pop/scale in with a staggered spring as the section scrolls into view */
.burst { position: relative; width: 96px; height: 96px; margin: 0 auto 12px; color: var(--ink); }
.burst__s { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease), transform .55s cubic-bezier(.34,1.55,.5,1); }
.burst__s svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* each doodle pops in from its own centre within the 56-box */
.burst__s1 { transform-origin: 29% 25%; transform: scale(0) rotate(-14deg); }
.burst__s2 { transform-origin: 39% 75%; transform: scale(0) rotate(12deg); }
.burst__s3 { transform-origin: 72% 43%; transform: scale(0) rotate(-10deg); }
.reveal.is-in .burst__s1 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: .05s; }
.reveal.is-in .burst__s2 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: .17s; }
.reveal.is-in .burst__s3 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: .29s; }

/* small hand-drawn rising-arrow doodle before "And it only gets better" */
.doodle-inline { display: flex; justify-content: center; margin: 0 auto 14px; color: var(--ink); line-height: 0; }
/* matches the .burst cluster's overall 96px footprint, not one burst shape */
.doodle-inline svg { width: 96px; height: auto; overflow: visible; }
.doodle-inline svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.is-in.doodle-inline svg path { animation: drawAnn .55s var(--ease-out) forwards; }
.doodle-inline svg path:nth-child(1) { animation-delay: .1s; }
.doodle-inline svg path:nth-child(2) { animation-delay: .4s; }
.doodle-inline svg path:nth-child(3) { animation-delay: .55s; }
.doodle-inline svg path:nth-child(4) { animation-delay: .62s; }
.doodle-inline svg path:nth-child(5) { animation-delay: .69s; }

/* ============================================================
   PRICING — tabbed (The Build / The Monthly Plan)
   ============================================================ */
.pricing-toggle {
  display: flex; width: fit-content; gap: 4px; margin: 4px auto 40px;
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 4px;
}
.pricing-toggle__opt {
  font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: 9px 20px; border-radius: var(--radius-pill);
  transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.pricing-toggle__opt.is-active { background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(29,32,32,.16); }
.price-tab[hidden] { display: none; }
.pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; max-width: 1060px; margin: 0 auto; }
@media (max-width: 860px) { .pricegrid { grid-template-columns: 1fr; max-width: 460px; } }
.plancard {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 28px; display: flex; flex-direction: column; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.plancard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plancard--featured { border-color: var(--accent-2); background: linear-gradient(180deg,#fff,#fcfef4); box-shadow: var(--shadow-md); }
.plan-name { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
.plan-badge { font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 4px 9px; border-radius: var(--radius-pill); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.plan-price .amount { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan-price .per, .plan-price del { font-size: 1rem; color: var(--muted); font-weight: 500; }
.plan-price del { text-decoration: line-through; }
.plan-desc { color: var(--muted); margin: 0 0 20px; font-size: .96rem; }
.plan-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--ink-soft); line-height: 1.4; }
.plan-list li svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: #6b8f1d; }
/* monthly plans: carried-over features are muted, this tier's new ones stay lime */
.plan-list li.is-inherited { color: var(--muted); }
.plan-list li.is-inherited svg { color: #c9cdc6; }
.plan-list li.is-new { color: var(--ink); font-weight: 500; }
.plan-group-label { font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-ink); margin: 4px 0 -2px; }
/* add-on table inside a plan card (ported from the simplechange.co.uk .box-cms
   block; kept its icon column + rule dividers, recoloured lime/ink). The white
   rules read as cut-outs against the tinted panel, same trick as the original. */
.addon { background: #f3f8e4; border: 1px solid #e7f1cd; border-radius: 14px; padding: 14px; margin: 4px 0 22px; }
.addon__row { display: flex; gap: 14px; border-bottom: 2px solid #fff; margin-bottom: 12px; padding-bottom: 12px; }
.addon__row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.addon__ic { flex: none; min-width: 42px; padding-right: 14px; border-right: 2px solid #fff; color: #5f7f19; display: grid; align-content: center; justify-items: center; }
.addon__ic svg { width: 25px; height: 25px; }
/* now every icon is filled, the robot no longer needs the big size bump it had
   when it was the only solid glyph among outlines; this just evens them up */
.addon__ic--bot svg { width: 27px; height: 27px; }
.addon__body { min-width: 0; }
.addon__title { font-size: .94rem; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 0 0 2px; }
.addon__text { font-size: .84rem; color: var(--muted); line-height: 1.45; margin: 0; }

.plan-note { margin: -14px 0 18px; font-size: .78rem; line-height: 1.45; color: var(--muted); }

.plancard .btn { margin-top: auto; }
.price-tab .price-foot { text-align: center; color: var(--muted); margin: 28px auto 0; font-size: .96rem; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .001ms !important; }
  .reveal, .reveal-card { opacity: 1 !important; transform: none !important; }
  .mark { background-size: 100% 48% !important; }
  .ov { opacity: 1 !important; }
  .ov__spark-line { stroke-dashoffset: 0 !important; }
  .ov__spark-fill { opacity: 1 !important; }
  .chart__line { stroke-dashoffset: 0 !important; }
  .chart__area, .chart__dot { opacity: 1 !important; transform: none !important; }
  .cw-bub { max-height: none !important; opacity: 1 !important; padding-top: 9px; padding-bottom: 9px; transform: none !important; }
  .cw-pill { display: none; }
  .fly__orbit { animation: none !important; }
  .fly__num .n1 { opacity: 1 !important; }
  .fly__num .n2, .fly__num .n3 { opacity: 0 !important; }
  .fly__pop { opacity: 0 !important; }
  .ann path { stroke-dashoffset: 0 !important; }
  .doodle-inline svg path { stroke-dashoffset: 0 !important; }
  .burst__s { opacity: 1 !important; transform: scale(1) rotate(0deg) !important; }
  .ann-img { clip-path: inset(0 0 0 0) !important; }
  html { scroll-behavior: auto; }
}

/* the win-back list needs its full height at every width, otherwise the shorter
   mobile .feature__viz clips the last customer row */
@media (max-width: 620px) {
  .viz--return { height: 236px; }
}

/* ============================================================
   PRICING PAGE (/pricing)
   ============================================================ */
.crumbs { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: .84rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); font-weight: 500; }

.pricing-hero { padding-top: 34px; }
/* the answer paragraph is written to survive being lifted out of the page,
   because that is exactly what a snippet or an AI answer does with it */
.answer {
  margin: 22px auto 0; max-width: 60ch;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  border-radius: 0 14px 14px 0; padding: 18px 22px;
  font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); text-align: left;
}
.answer strong { color: var(--ink); font-weight: 650; }
.pricing-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

.ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.ptable { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .93rem; }
.ptable caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ptable th, .ptable td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--bg-soft); }
.ptable tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ptable td { color: var(--muted); }
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom: none; }
/* our column is highlighted, but the row content stays honest */
.ptable .is-us { background: rgba(227,255,143,.16); color: var(--ink); font-weight: 500; }
.ptable thead .is-us { background: var(--accent); color: var(--ink); }

.honest { max-width: 62ch; margin: 26px auto 0; text-align: center; }
.honest h3 { font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.honest p { color: var(--muted); margin: 0; }

.never { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.never li {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; color: var(--muted); line-height: 1.55;
}
.never strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }

@media (max-width: 620px) {
  .answer { font-size: .99rem; padding: 15px 17px; }
  .ptable th, .ptable td { padding: 12px 13px; }
}

/* ============================================================
   ANNOUNCEMENT TICKER + WHO-LINE
   ============================================================ */
.ticker {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  font-size: .8rem; font-weight: 500; letter-spacing: -.01em;
  padding: 9px 0;
}
/* the track holds two identical runs, so translating by exactly -50% loops seamlessly */
.ticker__track { display: flex; align-items: center; width: max-content; animation: tickerScroll 34s linear infinite; }
.ticker__item { padding: 0 4px; white-space: nowrap; }
.ticker__sep { padding: 0 14px; color: var(--accent); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

.wholine {
  margin: 26px auto 0; max-width: 68ch; text-align: center;
  color: var(--muted); font-size: 1.02rem; line-height: 1.6;
}

@media (max-width: 620px) {
  .ticker { font-size: .74rem; padding: 8px 0; }
  .ticker__sep { padding: 0 10px; }
  .wholine { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none !important; }
}

/* ============================================================
   Trades ticker (who it's for) — full-bleed pill marquee
   ============================================================ */
/* Breaks out of .container to the full viewport so the pills run off both
   edges. The track holds two identical runs and shifts by exactly -50%, so the
   second run is in the first's place when the loop restarts. */
.tradeticker {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  overflow: hidden; padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tradeticker__track { display: flex; width: max-content; animation: tradeScroll 46s linear infinite; }
.tradeticker__run { display: flex; align-items: center; gap: 12px; padding-right: 12px; }
.tradeticker:hover .tradeticker__track { animation-play-state: paused; }
@keyframes tradeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tpill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 24px 8px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-soft);
  font-size: .98rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(29,32,32,.06);
}
.tpill__ic { width: 19px; height: 19px; flex: none; color: var(--ink); }

@media (max-width: 620px) {
  .tradeticker__run { gap: 9px; padding-right: 9px; }
  .tpill { font-size: .88rem; padding: 7px 18px 7px 13px; gap: 7px; }
  .tpill__ic { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tradeticker__track { animation: none; }
}