/* ==========================================================================
   ATOMIC REACH — landing page
   Structure follows AnimaTech. Visual system follows Sprout Social:
   near-black on white, ONE brand accent, heavy grotesque headlines,
   two radii, gradient washes behind product mockups.

   Colour mostly comes from CONTENT — platform logos, avatars, product
   mockups — not from painting the page. That is how Sprout and AnimaTech
   feel lively without looking like a carnival.

   >>> TO REBRAND: change --brand / --brand-2 below. Nothing else.
   ========================================================================== */

:root{
  /* ---- BRAND ---- */
  --brand:       #0B63E5;   /* primary CTA fill — white text reads at 5.4:1 */
  --brand-hover: #0A54C2;
  --brand-2:     #0E9457;   /* green gradient partner — dark enough to pass as large text */
  --brand-mid:   #0C86A8;   /* teal midpoint of the blue→green gradient */
  --accent-inv:  #5EE9A0;   /* bright mint — for accents on DARK backgrounds only */
  --brand-soft:  #E8F1FE;   /* tinted surfaces */
  --on-brand:    #FFFFFF;

  --success:     #0A7D43;   /* growth, ticks, rating-up — dark enough for text on white (5.2:1) */
  --success-soft:#E6F7EF;
  --danger:      #C42D2D;
  --star:        #C77800;   /* star GLYPHS only — 3:1 graphic contrast; numerals stay ink */

  /* ---- NEUTRALS ---- */
  --ink:    #0A0A0B;
  --slate:  #232A2E;
  --pewter: #5E696A;        /* muted text on LIGHT — WCAG AA on white and --tint */
  --pewter-inv:#9BA6A6;     /* muted text on DARK */
  --smoke:  #CBCECE;
  --ash:    #E3E6E6;
  --paper:  #FFFFFF;
  --tint:   #F6F7F9;
  --night:  #0A0A0B;
  --night-2:#14161A;

  /* ---- TYPE ---- */
  --font-head: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- SHAPE ---- */
  --r-btn:  8px;
  --r-card: 18px;

  /* ---- SPACE (4px grid) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:40px; --s-8:56px; --s-9:80px; --s-10:112px;

  --wrap:1200px;
  --nav-h:70px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-family:var(--font-head); font-weight:800; letter-spacing:-0.025em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:3px; }
.section--dark :focus-visible{ outline-color:var(--accent-inv); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--paper); padding:var(--s-3) var(--s-5);
  border-radius:var(--r-btn); font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:var(--s-4); top:var(--s-4); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

section[id], span#top{ scroll-margin-top:calc(var(--nav-h) + 16px); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s-5); }
.wrap--narrow{ max-width:800px; }
.measure{ max-width:62ch; }
.center{ text-align:center; }
.center .measure{ margin-inline:auto; }
.muted{ color:var(--pewter); }

/* ==========================================================================
   TYPE
   ========================================================================== */
.h-display{ font-size:clamp(40px,6.4vw,74px); line-height:1.02; font-weight:900; }
.h2{ font-size:clamp(29px,4.2vw,54px); line-height:1.08; font-weight:800; }
.h3{ font-size:clamp(21px,2.5vw,31px); line-height:1.22; }
.h2--inv,.h3--inv{ color:var(--paper); }

/* Gradient text. Both endpoints and the midpoint are dark enough to clear
   3:1 on white, which is what large display text needs. */
.grad{
  background:linear-gradient(100deg,var(--brand),var(--brand-mid) 45%,var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* on dark grounds the same idea inverted — both ends light */
.grad--bright{
  background:linear-gradient(100deg,#7FC4FF,var(--accent-inv));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* highlighter underline — painted as a background so it never stacks
   behind the section background the way a negative z-index would */
.mark{
  background-image:linear-gradient(90deg,#CBE0FF,#C4F1DC);
  background-repeat:no-repeat;
  background-size:100% .30em;
  background-position:0 92%;
  padding-inline:2px;
}

.lede{ font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--slate); max-width:56ch; margin-top:var(--s-5); }
.body-lg{ font-size:clamp(16px,1.25vw,18px); color:var(--slate); margin-top:var(--s-4); }
.body-lg--inv{ color:var(--smoke); }

.eyebrow{
  font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pewter); margin:0 0 var(--s-4);
}
.eyebrow--inv{ color:var(--accent-inv); }

.label-sm{ font-size:15px; font-weight:700; margin:var(--s-6) 0 var(--s-3); }

.pull{
  font-family:var(--font-head); font-size:clamp(18px,1.9vw,23px); font-weight:700;
  line-height:1.35; color:var(--pewter); margin-bottom:var(--s-5);
  border-left:3px solid var(--brand); padding-left:var(--s-4);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:50px; padding:var(--s-3) var(--s-5);
  background:var(--bg); color:var(--fg); border:2px solid var(--bd);
  border-radius:var(--r-btn);
  font-family:var(--font-body); font-size:16px; font-weight:700; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  --bg:var(--brand); --fg:var(--on-brand); --bd:var(--brand);
  box-shadow:0 6px 20px -6px rgba(11,99,229,.50);
}
.btn--primary:hover{ --bg:var(--brand-hover); --bd:var(--brand-hover); box-shadow:0 10px 26px -8px rgba(11,99,229,.55); }

.btn--dark{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn--dark:hover{ --bg:var(--slate); --bd:var(--slate); }

.btn--ghost:hover{ --bg:var(--ink); --fg:var(--paper); }
.section--dark .btn--ghost{ --fg:var(--paper); --bd:rgba(255,255,255,.4); }
.section--dark .btn--ghost:hover{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }

.btn--lg{ min-height:58px; padding:var(--s-4) var(--s-6); font-size:17px; }
.btn--sm{ min-height:44px; padding:var(--s-2) var(--s-4); font-size:14px; }
.btn--block{ display:flex; width:100%; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ash); transition:box-shadow .2s;
}
.nav.is-stuck{ box-shadow:0 2px 18px rgba(10,10,11,.09); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--s-5);
  height:var(--nav-h); display:flex; align-items:center; gap:var(--s-5);
}
.brand{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  text-decoration:none; color:var(--ink); flex-shrink:0;
  font-family:var(--font-head); font-weight:900; font-size:17px; letter-spacing:-.01em;
}
.brand__mark{ width:28px; height:28px; }
.brand--footer{ color:var(--paper); font-size:19px; }

/* Real logo. The image carries the wordmark, so when it loads the SVG sphere
   and the text wordmark are hidden to avoid showing the name twice.
   A missing file removes the <img>, :has() stops matching, placeholder returns. */
/* Sphere-behind-wordmark lockup: the sphere runs taller than the text, so this
   renders at 32px to keep the wordmark the same size the sphere-left lockup had
   at 28px. Both wordmarks measure 62px in the source files. */
.brand__img{ height:32px; width:auto; display:block; }
.brand--footer .brand__img{ height:36px; }
.brand:has(.brand__img) .brand__fallback{ display:none; }

/* Both logo PNGs carry a real alpha channel (the supplied files had solid
   white / black rectangles baked in; the background was flood-filled out from
   the edges). No blend mode needed — they sit correctly on any background,
   including the translucent nav when dark content scrolls underneath it. */

.nav__links{ display:flex; gap:var(--s-5); margin-left:auto; }
.nav__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:15px; font-weight:600; color:var(--slate); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .18s, color .18s;
}
.nav__links a:hover{ color:var(--brand); border-bottom-color:var(--brand); }

.nav__toggle{
  display:none; width:44px; height:44px; margin-left:auto;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav__toggle span{ display:block; height:2px; width:24px; background:var(--ink); margin-inline:auto; transition:transform .2s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-4) var(--s-5) var(--s-6);
  border-top:1px solid var(--ash); background:var(--paper);
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav a:not(.btn){ padding:var(--s-3) 0; font-size:17px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--ash); }
.mobile-nav .btn{ margin-top:var(--s-3); }

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */
.section{ padding-block:clamp(56px,8.5vw,108px); position:relative; }
.section--tint{ background:var(--tint); }
.section--dark{ background:var(--night); color:var(--paper); overflow:hidden; }
.section--cta{
  background:linear-gradient(160deg,var(--brand-soft),#E4F7EE 60%,#EDF6FF);
  border-top:1px solid var(--ash);
}
.section__aura{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46rem 26rem at 15% 0%, rgba(11,99,229,.34), transparent 65%),
    radial-gradient(38rem 22rem at 88% 92%, rgba(14,148,87,.26), transparent 65%);
}
.section--dark .wrap{ position:relative; z-index:1; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split--reverse > *:first-child{ order:2; }
.split--reverse > *:last-child{ order:1; }

/* ==========================================================================
   SHARED BITS: avatars, badges, ratings, icons
   ========================================================================== */
/* sprite host: hidden without display:none so its gradients still resolve */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ic{ width:18px; height:18px; flex-shrink:0; }
.ic--xs{ width:15px; height:15px; }

.av{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:inline-grid; place-items:center;
  font-family:var(--font-head); font-size:14px; font-weight:800; color:#fff;
  letter-spacing:.02em;
}
.av--sm{ width:34px; height:34px; font-size:12px; }
.av--xs{ width:26px; height:26px; font-size:10px; }
/* placeholder people — swap for real photos if you have permission.
   Varied hues so a list of avatars reads as different people, kept inside
   the blue/green/warm family so none of them competes with the brand. */
.av--a{ background:linear-gradient(135deg,#FF8A3D,#F2545B); }
.av--b{ background:linear-gradient(135deg,#0B63E5,#22B8E0); }
.av--c{ background:linear-gradient(135deg,#0E9457,#8FD14F); }
.av--d{ background:linear-gradient(135deg,#F5A623,#E8705A); }
.av--e{ background:linear-gradient(135deg,#0C86A8,#14B8A6); }
.av--f{ background:linear-gradient(135deg,#0EA5E9,#1D4ED8); }
.av--biz{ background:linear-gradient(135deg,#4A5159,#B9BFC6); color:#0A0A0B; }

.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-head); font-size:10px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.badge--new{ background:var(--success-soft); color:var(--success); }
.badge--sample{ background:var(--ink); color:var(--paper); }
.badge--alert{ background:#FEE9E9; color:var(--danger); }

.blip{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.rating__stars{ color:var(--star); letter-spacing:2px; font-size:15px; }
.rating__stars--sm{ font-size:13px; }
.rating__stars--inv{ font-size:18px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding-top:clamp(36px,5vw,72px); overflow:hidden; }
.hero__glow{
  position:absolute; inset:0 0 auto; height:70%; pointer-events:none;
  background:
    radial-gradient(40rem 22rem at 12% 8%, rgba(11,99,229,.13), transparent 60%),
    radial-gradient(34rem 20rem at 82% 10%, rgba(14,148,87,.13), transparent 60%),
    radial-gradient(30rem 18rem at 60% 0%, rgba(12,134,168,.10), transparent 60%);
}
.hero__grid{
  position:relative; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,4.5vw,60px); align-items:center;
  padding-bottom:clamp(40px,5vw,64px);
}

.pill{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--paper); border:1px solid var(--ash); border-radius:999px;
  padding:7px var(--s-4); font-size:13px; font-weight:600; color:var(--slate);
  box-shadow:0 2px 10px rgba(10,10,11,.05);
}
.pill__dot{ width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 2s ease-in-out infinite; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.hero__actions--center{ justify-content:center; }
.hero__micro{ font-size:14px; color:var(--pewter); margin-top:var(--s-4); }

.chips{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-5); }
.chip{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:14px; font-weight:600; color:var(--slate); }
.chip .ic{ color:var(--success); }

/* hero stage */
.hero__stage{ position:relative; display:grid; gap:var(--s-3); padding:var(--s-5); }
.stage__wash{
  position:absolute; inset:0; border-radius:var(--r-card);
  background:linear-gradient(150deg,#E6F0FE,#E2F6EC 55%,#E9F5FF);
}
.hero__stage > *:not(.stage__wash){ position:relative; z-index:1; }

.card{
  background:var(--paper); border:1px solid var(--ash);
  border-radius:var(--r-card); padding:var(--s-4);
  box-shadow:0 4px 16px rgba(10,10,11,.06);
}
.card__top{ display:flex; align-items:center; gap:var(--s-3); }
.card__who{ flex:1; min-width:0; }
.card__name{ font-weight:700; font-size:15px; }
.card__sub{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--pewter); }
.card__quote{ font-size:14px; color:var(--slate); margin-top:var(--s-2); }
.card--review .rating{ margin-top:var(--s-3); }

.flow{ display:flex; justify-content:center; gap:var(--s-5); }
.flow__line{ width:2px; height:18px; background:linear-gradient(var(--brand),transparent); border-radius:2px; }

.stage__out{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); }
.card--mini{ padding:var(--s-3); }
.card__kicker{
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--pewter);
  text-transform:uppercase;
}
.card__mini-body{ font-size:12px; color:var(--slate); margin-top:5px; line-height:1.45; }
.post-thumb{
  margin-top:6px; height:52px; border-radius:10px; display:grid; place-items:center; padding:4px;
  /* scrim over the Instagram gradient so white text stays legible on the yellow end */
  background:
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.50)),
    linear-gradient(135deg,#FFD521,#F50000 40%,#B900B4 75%,#4C68D7);
}
.post-thumb__q{ font-size:9px; font-weight:700; color:#fff; text-align:center; line-height:1.3; }

.card--score{ text-align:center; }
.score{
  font-family:var(--font-head); font-size:42px; font-weight:900; line-height:1;
  margin:var(--s-2) 0 var(--s-1); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; justify-content:center; gap:var(--s-2);
}
.score__up{
  display:inline-flex; align-items:center; gap:2px;
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--success);
}
.spark{ width:100%; height:30px; margin-top:var(--s-2); }

/* platforms strip */
.platforms{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-4) var(--s-6);
  border-block:1px solid var(--ash); padding-block:var(--s-5); margin-top:var(--s-4);
}
.platforms__label{
  font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pewter);
}
.platforms__list{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5) var(--s-6); }
.platforms__list li{ display:inline-flex; align-items:center; gap:var(--s-2); font-weight:700; font-size:15px; color:var(--slate); }
.plogo{ width:24px; height:24px; }
.plogo--sm{ width:20px; height:20px; }
.plogo--word{ font-family:var(--font-head); font-weight:900; font-size:20px; width:auto; height:auto; }

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.ticks{ display:grid; gap:var(--s-3); margin-block:var(--s-4) var(--s-6); }
.ticks li{ position:relative; padding-left:30px; font-size:16px; color:var(--slate); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em; width:14px; height:2px; background:var(--smoke);
}
.ticks--good li::before{
  content:""; top:.36em; left:3px; width:8px; height:14px; background:none;
  border:solid var(--success); border-width:0 2.5px 2.5px 0; transform:rotate(40deg);
}

.compare{ display:grid; gap:var(--s-4); }

/* Google Business Profile mockups */
.gbp{
  background:var(--paper); border:1px solid var(--ash); border-radius:var(--r-card);
  overflow:hidden; box-shadow:0 4px 18px rgba(10,10,11,.06);
}
.gbp--active{ border:2px solid var(--ink); box-shadow:0 10px 30px rgba(10,10,11,.12); }
.gbp__shots{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2px; height:78px; }
/* placeholder "photos" — swap for real client images */
.shot{ display:block; }
.shot--a{ background:linear-gradient(135deg,#F6B26B,#C2703A); }
.shot--b{ background:linear-gradient(135deg,#7FB3D5,#3E6E8E); }
.shot--c{ background:linear-gradient(135deg,#A3C86D,#5E8C3F); }
.shot--dim{ filter:grayscale(.85) brightness(.92); }
.gbp__body{ padding:var(--s-4); }
.gbp__name{ font-family:var(--font-head); font-weight:800; font-size:17px; }
.gbp__meta{ display:flex; align-items:center; gap:6px; font-size:14px; margin-top:3px; }
.gbp__meta strong{ font-weight:800; }
.gbp__cat{ font-size:13px; color:var(--pewter); margin-top:2px; }
.gbp__flags{ display:grid; gap:6px; margin-top:var(--s-3); }
.gbp__flags li{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; }
.gbp__flags .bad{ color:var(--pewter); }
.gbp__flags .good{ color:var(--success); }
.gbp__btns{ display:flex; gap:var(--s-2); margin-top:var(--s-4); }
.gbp__btns span{
  flex:1; text-align:center; font-size:12px; font-weight:700; color:var(--pewter);
  border:1px solid var(--ash); border-radius:999px; padding:6px 4px;
}
.gbp__btns .on{ color:#1A73E8; border-color:#1A73E8; background:#F0F6FE; }
.gbp__tagline{
  font-family:var(--font-head); font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:var(--s-3) var(--s-4); border-top:1px solid var(--ash);
}
.gbp__tagline--bad{ color:var(--pewter); }
.gbp__tagline--good{ color:var(--success); background:var(--success-soft); }

/* ==========================================================================
   RESULTS
   ========================================================================== */
.notice{
  border:2px dashed var(--ink); border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5); margin-block:var(--s-6);
  font-size:15px; color:var(--slate); background:#FFFBEB;
}
.notice code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }

.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-6); }
.result{
  border:1px solid var(--ash); border-radius:var(--r-card); padding:var(--s-5);
  background:var(--paper); box-shadow:0 4px 16px rgba(10,10,11,.05);
}
.result__head{ display:flex; align-items:center; gap:var(--s-3); }
.result__head > div{ flex:1; min-width:0; }
.result__name{ font-size:17px; font-weight:800; }
.result__meta{ font-size:13px; color:var(--pewter); }
.result__ba{
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s-3); align-items:center;
  margin-block:var(--s-5) var(--s-4); border-block:1px solid var(--ash); padding-block:var(--s-4);
}
.ba{ text-align:center; }
.ba__label{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pewter); }
.ba__num{ font-family:var(--font-head); font-size:32px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; }
.ba__star{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.ba__star .glyph{ color:var(--star); margin-right:2px; }
.ba--now .ba__num{ color:var(--success); }
.ba__arrow{ width:22px; height:22px; color:var(--brand); }

.bar{ height:7px; background:var(--ash); border-radius:999px; overflow:hidden; }
.bar__fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.result__since{ font-size:12px; color:var(--pewter); margin-top:var(--s-3); }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-8); padding-top:var(--s-6); border-top:2px solid var(--ink); }
.stat__num{ font-family:var(--font-head); font-size:clamp(34px,4vw,50px); font-weight:900; line-height:1; letter-spacing:-.035em; }
.stat__cap{ font-size:15px; color:var(--pewter); margin-top:var(--s-3); max-width:26ch; }

/* ==========================================================================
   AGENTS (dark)
   ========================================================================== */
.collect{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.collect li{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--paper);
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05);
  border-radius:999px; padding:8px var(--s-4);
}

.agents{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); margin-top:var(--s-8); }
.agent{
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-card);
  padding:var(--s-6); background:var(--night-2);
  display:flex; flex-direction:column;
}
.agent--feature{ border-color:rgba(94,233,160,.42); background:linear-gradient(165deg,#0E1F1B,var(--night-2)); }
.agent__kicker{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-inv); margin-bottom:var(--s-3);
}
.agent__title{ font-size:clamp(19px,1.9vw,25px); color:var(--paper); line-height:1.22; }
.agent__body{ font-size:15px; color:var(--smoke); margin-top:var(--s-3); }
.agent__demo{ margin-top:var(--s-5); }
.agent__in{
  font-family:var(--font-head); font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pewter-inv);
  margin-top:auto; padding-top:var(--s-4);
}

/* review thread */
.thread{ display:grid; gap:var(--s-3); }
.thread__row{ display:flex; gap:var(--s-3); align-items:flex-start; }
.thread__row--out{ padding-left:var(--s-5); }
.bubble{
  background:var(--paper); color:var(--ink); border-radius:14px;
  padding:var(--s-3) var(--s-4); font-size:13.5px; line-height:1.45; flex:1;
}
.bubble--owner{ background:var(--brand-soft); }
.bubble__lbl{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pewter); margin-bottom:3px; }
.bubble .rating__stars{ display:block; margin-bottom:4px; }
/* light-section variant */
.section--tint .bubble{ border:1px solid var(--ash); }

/* instagram post */
.igpost{ background:var(--paper); border-radius:14px; overflow:hidden; max-width:260px; }
.igpost__bar{ display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-3); }
.igpost__handle{ font-size:12px; font-weight:700; color:var(--ink); flex:1; }
.igpost__more{ color:var(--pewter); }
.igpost__img{
  aspect-ratio:1/1; display:grid; place-content:center; gap:6px; padding:var(--s-4); text-align:center;
  /* scrim over the Instagram gradient so white text stays legible on the yellow end */
  background:
    linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.52)),
    linear-gradient(135deg,#FFD521,#F50000 38%,#B900B4 72%,#4C68D7);
}
.igpost__quote{ font-family:var(--font-head); font-size:15px; font-weight:800; color:#fff; line-height:1.25; }
.igpost__by{ font-size:11px; color:rgba(255,255,255,.92); font-weight:600; }
.rating__stars--inv{ color:#FFD86E; }
.igpost__acts{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3); color:var(--ink); }
.igpost__likes{ font-size:11px; font-weight:700; color:var(--pewter); margin-left:auto; }

/* search result */
.serp{ background:var(--paper); border-radius:14px; padding:var(--s-4); }
.serp__url{ font-size:11px; color:#0F7B3E; }
.serp__title{ font-size:15px; font-weight:700; color:#1A0DAB; margin-top:3px; line-height:1.3; }
.serp__desc{ font-size:12px; color:var(--pewter); margin-top:4px; line-height:1.45; }
.serp__rank{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--success); margin-top:var(--s-3); }
.serp__chip{ background:var(--success-soft); border-radius:999px; padding:2px 7px; }

/* AI answer */
.ai{ background:var(--paper); border-radius:14px; padding:var(--s-4); }
.ai__q{ font-size:13px; font-weight:700; color:var(--ink); }
.ai__a{ display:flex; gap:var(--s-3); margin-top:var(--s-3); font-size:12.5px; color:var(--slate); line-height:1.5; }
.ai__a strong{ color:var(--brand); }
.ai__dot{ width:18px; height:18px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.ai__srcs{ display:flex; gap:6px; margin-top:var(--s-3); }
.ai__srcs li{ font-size:10px; font-weight:700; color:var(--pewter); border:1px solid var(--ash); border-radius:999px; padding:3px 8px; }

.result-band{ margin-top:var(--s-8); border-top:1px solid rgba(255,255,255,.12); padding-top:var(--s-7); }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-8); }
.step{
  border:1px solid var(--ash); border-radius:var(--r-card); padding:var(--s-6);
  background:var(--paper); box-shadow:0 4px 16px rgba(10,10,11,.05);
}
.step__n{ font-family:var(--font-head); font-size:34px; font-weight:900; line-height:1; margin-bottom:var(--s-4); background:linear-gradient(140deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.step__title{ font-size:20px; }
.step__body{ font-size:15px; color:var(--slate); margin-top:var(--s-3); }
.step__tags{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
.step__tags li{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--slate);
  background:var(--tint); border:1px solid var(--ash); border-radius:999px; padding:5px var(--s-3);
}
.step__tags .tag-live{ color:var(--success); border-color:#BFE8D2; background:var(--success-soft); }
.step__tags .tag-ok{ color:var(--brand); border-color:#C2DAFB; background:var(--brand-soft); }

/* ==========================================================================
   PRIVATE FEEDBACK
   ========================================================================== */
.private{
  border:2px solid var(--ink); border-radius:var(--r-card); padding:var(--s-5);
  background:var(--paper); box-shadow:0 10px 30px rgba(10,10,11,.1);
}
.private__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }
.private__time{ font-size:12px; color:var(--pewter); }
.private__foot{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--pewter); margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--ash); }
.private__cta{ margin-top:var(--s-4); }

/* ==========================================================================
   RANK
   ========================================================================== */
.rank{ border:1px solid var(--ash); border-radius:var(--r-card); padding:var(--s-5); background:var(--paper); box-shadow:0 6px 22px rgba(10,10,11,.07); }
.rank__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }
.rank__cap{ font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pewter); }
.rank__list{ display:grid; gap:var(--s-2); }
.rank__row{
  display:grid; grid-template-columns:22px 26px 1fr auto auto; gap:var(--s-3); align-items:center;
  padding:var(--s-2) var(--s-3); border:1px solid var(--ash); border-radius:12px; font-size:14px;
}
.rank__row--you{ border:2px solid var(--brand); background:var(--brand-soft); font-weight:800; }
.rank__pos{ font-family:var(--font-head); font-weight:800; color:var(--pewter); font-variant-numeric:tabular-nums; }
.rank__biz{ font-weight:600; }
.rank__row--you .rank__biz{ font-weight:800; }
.rank__star{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.rank__star .glyph{ color:var(--star); margin-right:2px; }
.rank__score{ font-family:var(--font-head); font-weight:800; font-variant-numeric:tabular-nums; }
.rank__row--you .rank__score{ color:var(--brand); }
.rank__gap{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--success); margin-top:var(--s-4); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.toggle{ display:inline-flex; gap:var(--s-1); margin-top:var(--s-6); border:2px solid var(--ink); border-radius:999px; padding:var(--s-1); }
.toggle__btn{
  min-height:44px; padding:var(--s-2) var(--s-5); background:transparent; border:0; border-radius:999px;
  font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--slate); cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--s-2); transition:background-color .18s, color .18s;
}
.toggle__btn.is-active{ background:var(--ink); color:var(--paper); }
.toggle__save{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--success); color:#fff; border-radius:999px; padding:3px 7px; }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-7); align-items:start; }
.plan{
  border:1px solid var(--ash); border-radius:var(--r-card); padding:var(--s-6);
  background:var(--paper); position:relative; box-shadow:0 4px 16px rgba(10,10,11,.05);
}
.plan--featured{
  border:2px solid var(--brand);
  box-shadow:0 16px 40px -12px rgba(11,99,229,.32);
}
.plan__badge{
  position:absolute; top:-13px; left:var(--s-6);
  background:var(--brand); color:#fff;   /* solid, not gradient — guarantees 6.1:1 on the label */
  font-family:var(--font-head); font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px;
}
.plan__name{ font-size:23px; }
.plan__for{ font-size:14px; color:var(--pewter); margin-top:var(--s-2); min-height:44px; }
.plan__price{ display:flex; align-items:baseline; gap:2px; margin-top:var(--s-5); }
.plan__cur{ font-family:var(--font-head); font-size:22px; font-weight:800; }
.plan__amt{ font-family:var(--font-head); font-size:50px; font-weight:900; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.plan__per{ font-size:14px; color:var(--pewter); font-weight:700; margin-left:var(--s-2); }
.plan__billed{ font-size:12px; color:var(--pewter); margin-block:var(--s-2) var(--s-5); }
.plan__alt{ font-size:13px; text-align:center; margin-top:var(--s-2); }
.plan__alt a{ color:var(--pewter); }
.plan__inc{ font-family:var(--font-head); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pewter); margin-top:var(--s-5); border-top:1px solid var(--ash); padding-top:var(--s-4); }
.plan__list{ display:grid; gap:var(--s-3); margin-top:var(--s-4); }
.plan__list li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--slate); }
.plan__list li::before{
  content:""; position:absolute; left:3px; top:.36em; width:8px; height:13px;
  border:solid var(--success); border-width:0 2.5px 2.5px 0; transform:rotate(40deg);
}
.plans__foot{ font-size:14px; color:var(--pewter); margin-top:var(--s-6); text-align:center; }

/* ==========================================================================
   FORM
   ========================================================================== */
.form{ margin-top:var(--s-7); display:grid; gap:var(--s-5); }
.field{ display:grid; gap:var(--s-2); }
.field label{ font-size:14px; font-weight:700; color:var(--paper); }
.req{ color:var(--accent-inv); }
.field input{
  min-height:54px; padding:var(--s-3) var(--s-4);
  background:var(--paper); color:var(--ink);
  border:2px solid transparent; border-radius:var(--r-btn);
  font-family:inherit; font-size:16px;
}
.field input[aria-invalid="true"]{ border-color:#FF8A8A; }
.field__hint{ font-size:12.5px; color:var(--pewter-inv); }
.field__err{ font-size:13px; font-weight:700; color:#FFAFAF; }
.form__status{ font-size:15px; font-weight:700; color:var(--accent-inv); text-align:center; min-height:24px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ margin-top:var(--s-7); border-top:1px solid var(--ash); }
.faq__item{ border-bottom:1px solid var(--ash); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:var(--s-5) 44px var(--s-5) 0;
  position:relative; font-family:var(--font-head); font-size:clamp(16px,1.4vw,18px); font-weight:700;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:var(--s-4); top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg); transition:transform .2s;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq__item summary:hover{ color:var(--brand); }
.faq__item p{ font-size:15.5px; color:var(--slate); padding-bottom:var(--s-5); max-width:70ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--night); color:var(--paper); padding-top:var(--s-9); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s-7); padding-bottom:var(--s-8); }
.footer__blurb{ font-size:15px; color:var(--smoke); margin-top:var(--s-4); max-width:42ch; }
.footer__plats{ display:flex; gap:var(--s-3); margin-top:var(--s-5); }
.footer__links{ display:grid; gap:var(--s-2); align-content:start; }
.footer__links a{ display:inline-block; padding-block:var(--s-3); font-size:15px; color:var(--smoke); text-decoration:none; }
.footer__links a:hover{ color:var(--accent-inv); text-decoration:underline; }
.footer__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3);
  border-top:1px solid rgba(255,255,255,.12); padding-block:var(--s-5) var(--s-7);
  font-size:14px; color:var(--pewter-inv);
}
.footer__legal a{ display:inline-block; padding:13px 6px; color:var(--pewter-inv); }
.plan__alt a{ display:inline-block; padding:12px var(--s-2); }

/* ==========================================================================
   PLAN NAMES — Bronze / Silver / Gold with a descriptive subtitle
   ========================================================================== */
.plan__name{ display:flex; align-items:center; gap:10px; }
.plan__sub{ font-size:14px; font-weight:600; color:var(--pewter); margin-top:2px; }
.medal{
  display:inline-block; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.20), inset 0 2px 3px rgba(255,255,255,.55);
}
.medal--bronze{ background:linear-gradient(135deg,#E3A46F,#9C5A2B); }
.medal--silver{ background:linear-gradient(135deg,#F1F3F6,#98A1AB); }
.medal--gold{ background:linear-gradient(135deg,#FBE08A,#C8961E); }
.plan__save{ color:var(--success); font-weight:700; }
.plan__trial{ font-size:13px; color:var(--pewter); text-align:center; margin-top:var(--s-3); }
.plan__alt{ margin-top:0; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.compare-block{ margin-top:var(--s-9); }
.compare-block__title{ text-align:center; text-wrap:balance; }
.compare-block__lede{ text-align:center; font-size:15px; color:var(--pewter); margin-top:var(--s-2); }
/* position:relative makes this box the containing block for the absolutely
   positioned .sr-only labels in the table. Without it those labels escape the
   overflow clip and stretch the whole page sideways on phones. */
.compare-scroll{
  position:relative;
  margin-top:var(--s-6); overflow-x:auto; background:var(--paper);
  border:1px solid var(--ash); border-radius:var(--r-card);
}
.compare-table{ width:100%; min-width:640px; border-collapse:collapse; font-size:15px; }
.compare-table th, .compare-table td{
  padding:14px 18px; border-bottom:1px solid var(--ash); text-align:center; vertical-align:middle;
}
.compare-table thead th{ padding-block:20px 16px; vertical-align:bottom; }
.compare-table thead th:first-child{ width:46%; }
.th-name{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--ink);
}
.th-sub{ display:block; font-size:12px; font-weight:600; color:var(--pewter); margin-top:3px; }
.compare-table tbody th[scope="row"]{ text-align:left; font-weight:500; color:var(--slate); }
.compare-table tr.grp th{
  text-align:left; background:var(--tint); padding-block:10px;
  font-family:var(--font-head); font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pewter);
}
/* tint the Silver column to match the featured card above */
.compare-table thead th:nth-child(3),
.compare-table td:nth-child(3){ background:rgba(11,99,229,.05); }
.compare-table .yes{ width:19px; height:19px; color:var(--success); vertical-align:middle; }
/* "not included" dash carries meaning, so it needs 3:1 against white — smoke grey was 1.6:1 */
.compare-table .no{ color:var(--pewter); font-weight:700; }
.compare-table tbody tr:last-child > *{ border-bottom:0; }
.compare-table.is-collapsed .extra{ display:none; }

.compare-toggle{
  display:flex; align-items:center; gap:10px; margin:var(--s-5) auto 0;
  min-height:46px; padding:var(--s-2) var(--s-5);
  background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:999px;
  font-family:var(--font-body); font-size:15px; font-weight:700; cursor:pointer;
  transition:background-color .18s, color .18s;
}
.compare-toggle[hidden]{ display:none; }
.compare-toggle:hover{ background:var(--ink); color:var(--paper); }
.compare-toggle::after{
  content:""; width:8px; height:8px; margin-top:-4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s;
}
.compare-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:4px; }

/* ==========================================================================
   EXAMPLE RESULT CARDS — photo header, gradient shows if a photo is missing
   ========================================================================== */
.results-note{ font-size:13px; color:var(--pewter); margin-top:var(--s-3); }
.result{ padding:0; overflow:hidden; }
.result__photo{
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg,#CFC8BE,#8A8378);
}
.result__photo--fencing{ background:linear-gradient(135deg,#A9C79A,#4F7A45); }
.result__photo--restaurant{ background:linear-gradient(135deg,#E39A6B,#9A3A2A); }
.result__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.result__photo .badge{ position:absolute; top:12px; left:12px; }
.badge--example{ background:rgba(255,255,255,.95); color:var(--ink); }
.result__body{ padding:var(--s-5); }

/* real photos inside the active Google profile mockup */
.shot{ position:relative; overflow:hidden; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ==========================================================================
   WHATSAPP — free check, FAQ prompt, footer contact
   WhatsApp's own green (#25D366) only gives white text 2:1, so the button uses
   the deeper --success green, which clears 5.2:1 and still reads as WhatsApp.
   ========================================================================== */
.btn--whatsapp{ --bg:var(--success); --fg:#fff; --bd:var(--success); }
.btn--whatsapp:hover{ --bg:#086A38; --bd:#086A38; }
.form__hint{ font-size:13px; color:var(--pewter-inv); text-align:center; }
.field__opt{ font-weight:500; color:var(--pewter-inv); }
.form__status a{ color:var(--accent-inv); }
.wa-direct{ margin-top:var(--s-6); text-align:center; font-size:15px; color:var(--smoke); }
.wa-direct a{ color:var(--accent-inv); font-weight:700; }

.faq__more{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4);
  margin-top:var(--s-7); padding:var(--s-5) var(--s-6);
  background:var(--tint); border:1px solid var(--ash); border-radius:var(--r-card);
}
.faq__more-title{ font-family:var(--font-head); font-size:19px; font-weight:800; }
.faq__more-sub{ font-size:15px; color:var(--pewter); }

.footer__contact{ margin-top:var(--s-4); }
.footer__contact a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:15px; font-weight:600; color:var(--smoke); text-decoration:none;
}
.footer__contact a:hover{ color:var(--accent-inv); text-decoration:underline; }

/* Instagram mockup photo — the scrim is added only once a photo has actually
   loaded (script sets .has-photo from the img's onload), not merely when the <img>
   exists. Keying off existence would darken the gradient fallback while a missing
   lazy-loaded image is still waiting to fail. */
.igpost__img{ position:relative; overflow:hidden; }
.igpost__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.igpost__img.has-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.62));
}
.igpost__img > :not(.igpost__photo){ position:relative; z-index:1; }

/* ==========================================================================
   SECTION CTAs — a button at the end of each section that had none
   ========================================================================== */
.cta-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4);
  margin-top:var(--s-7);
}
.cta-note{ font-size:14px; color:var(--pewter); }
.result-band .cta-row{ margin-top:var(--s-6); }
#safety .ticks + .btn{ margin-top:0; }

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.sticky-cta{ display:none; }

@media (max-width:680px){
  .cta-row .btn{ width:100%; }
  .cta-note{ width:100%; text-align:center; }

  .sticky-cta{
    display:flex; gap:var(--s-2);
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:10px var(--s-4) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--ash);
    box-shadow:0 -6px 20px rgba(10,10,11,.08);
    transform:translateY(110%);
    transition:transform .25s ease-out;
  }
  .sticky-cta.is-shown{ transform:none; }
  .sticky-cta .btn{ min-height:48px; padding-inline:var(--s-3); font-size:15px; }
  .sticky-cta .btn--primary{ flex:2; box-shadow:none; }
  .sticky-cta .btn--ghost{ flex:1; }
  .sticky-cta .btn:hover{ transform:none; }
}

/* Instagram caption under the post mockup */
.igpost__cap{ font-size:12px; line-height:1.45; color:var(--ink); padding:0 var(--s-3) var(--s-3); }
.igpost__cap strong{ font-weight:700; margin-right:4px; }

/* The quiet profile now uses real photos, so it only needs to look duller than
   the active one — full greyscale made the photos unreadable as photos. */
.shot--dim{ filter:grayscale(.55) brightness(.95); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .55s ease-out, transform .55s ease-out; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .results-grid,.steps,.plans{ grid-template-columns:1fr 1fr; }
  .plan--featured{ grid-column:span 2; }
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
}
@media (max-width:900px){
  .hero__grid,.split{ grid-template-columns:1fr; }
  .split--reverse > *:first-child{ order:1; }
  .split--reverse > *:last-child{ order:2; }
  .compare{ grid-template-columns:1fr 1fr; }
  .agents{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .results-grid,.steps,.plans,.stat-row{ grid-template-columns:1fr; }
  .plan--featured{ grid-column:auto; }
  .compare{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; }
  .footer__grid{ grid-template-columns:1fr; }
  .stage__out{ grid-template-columns:1fr; }
  .rank__row{ grid-template-columns:20px 24px 1fr auto; }
  .rank__score{ display:none; }
  .toggle{ width:100%; }
  .toggle__btn{ flex:1; justify-content:center; }
  .platforms{ gap:var(--s-4); }
  .platforms__list{ gap:var(--s-4); }
  .igpost{ max-width:100%; }
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .nav,.section--cta{ display:none; }
  .section--dark{ background:#fff; color:#000; }
}