/* =========================================================
   RankSharp — green / white / beige design system
   Layout: white canvas, beige bands, one deep-green accent,
           motion used to reveal structure (never decoration)
   ========================================================= */

:root{
  /* --- surfaces --- */
  --paper:      #ffffff;
  --paper-2:    #f7f4ea;   /* beige wash */
  --paper-3:    #ece5d5;
  --paper-ink:  #111111;   /* black band */

  /* --- ink --- */
  --ink:        #111111;
  --ink-2:      #4a4a46;
  --ink-3:      #86847c;

  --line:       #e7e1d3;
  --line-2:     #d4ccba;

  /* --- accent (deep green) --- */
  --accent:     #1f6b45;
  --accent-2:   #4e9e6d;
  --accent-ink: #15492f;
  --accent-soft:#e9f2ec;

  /* --- secondary data colour (warm beige-gold) --- */
  --gold:       #b0863c;
  --gold-soft:  #faf2e2;

  /* --- semantic --- */
  --good:       #2f7d4f;
  --good-soft:  #e9f3ec;
  --warn:       #b5801c;
  --warn-soft:  #faf1dd;
  --bad:        #c04a3c;
  --bad-soft:   #f9ece9;

  /* --- shape --- */
  --r-sm: 9px;
  --r:    15px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 4px 12px -6px color-mix(in srgb, var(--ink) 13%, transparent);
  --shadow:    0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 18px 42px -22px color-mix(in srgb, var(--ink) 28%, transparent);
  --shadow-lg: 0 3px 8px color-mix(in srgb, var(--ink) 7%, transparent), 0 40px 80px -34px color-mix(in srgb, var(--ink) 36%, transparent);

  --max: 1160px;
  --gut: 24px;

  --ff:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-d: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--ff);
  background:var(--paper);
  color:var(--ink);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
figure{ margin:0; }

::selection{ background:color-mix(in srgb, var(--accent) 88%, transparent); color:var(--paper); }

/* one focus treatment for everything; zero specificity so component
   rules (.btn:focus-visible) can still override it */
:where(a,button,summary,input,select,textarea,details,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* =========================================================
   AMBIENT BACKGROUND — four layers of light, all behind content
   ---------------------------------------------------------
   Paint order, back to front:
     -4  .bg-field          slow coloured light drifting down the page
     -3  body::before       the page-head stage (header + hero as one)
     -1  .bg-grain          film tooth over everything
   The moving parts (the scan sweep, the grid, the key light) live
   inside .hero, which actually clips them. Nothing animated hangs off
   body: body's overflow-x:hidden is propagated to the viewport, so
   body does NOT clip its own children and a translating layer there
   would widen the document and create a horizontal scrollbar.
   Everything that moves here animates transform/opacity only, has no
   layout impact, and stops dead under prefers-reduced-motion.
   ========================================================= */

.bg-field{
  position:fixed; inset:0; z-index:-4; pointer-events:none; overflow:hidden;
  contain:layout paint;
}
/* no filter:blur here — the radial gradients are already soft, and a
   blurred full-viewport fixed layer is expensive to composite */
.bg-field span{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;
}
/* the three lights are placed so the page is lit consistently from the
   top-left: green high, gold through the middle, green again low —
   one light source walking down the page, not three loose blobs */
.bg-field span:nth-child(1){
  width:58vw; height:58vw; left:-20vw; top:-20vw;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 66%);
  animation:drift-a 52s var(--ease) infinite alternate;
}
.bg-field span:nth-child(2){
  width:48vw; height:48vw; right:-18vw; top:30%;
  background:radial-gradient(circle, color-mix(in srgb, var(--gold) 7%, transparent), transparent 66%);
  animation:drift-b 68s var(--ease) infinite alternate;
}
.bg-field span:nth-child(3){
  width:62vw; height:62vw; left:12%; bottom:-30vw;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  animation:drift-a 86s var(--ease) infinite alternate-reverse;
}
@keyframes drift-a{ to{ transform:translate3d(4%, 3%, 0) scale(1.08); } }
@keyframes drift-b{ to{ transform:translate3d(-5%, -4%, 0) scale(1.06); } }

/* ---------- the page head ----------
   Anchored to the top of the document (absolute, not fixed) so it
   scrolls away with the hero, and drawn behind the sticky header too —
   that is what stops the nav reading as a separate white strip sitting
   on top of the page. Warm light from the top edge, a green key light
   high-left and a gold fill low-right. */
body::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:clamp(520px, 92vh, 940px);
  z-index:-3; pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper-2) 95%, transparent) 0%,
      color-mix(in srgb, var(--paper-2) 62%, transparent) 30%,
      color-mix(in srgb, var(--paper-2) 22%, transparent) 62%,
      transparent 100%),
    radial-gradient(64% 58% at 4% -8%,   color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
    radial-gradient(52% 56% at 86% 26%,  color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 68%),
    radial-gradient(56% 62% at 99% 6%,   color-mix(in srgb, var(--gold)     14%, transparent), transparent 68%),
    radial-gradient(70% 46% at 52% 104%, color-mix(in srgb, var(--accent)    7%, transparent), transparent 72%);
}

/* fine film grain — stops the white reading as flat screen-white */
.bg-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reading progress — a hairline across the very top */
.progress{
  position:fixed; left:0; top:0; height:2px; width:0; z-index:70;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  pointer-events:none;
}

h1,h2,h3,h4{
  font-family:var(--ff-d); line-height:1.1; margin:0 0 .5em;
  letter-spacing:-.02em; color:var(--ink);
  font-weight:700;
  text-wrap:balance;
}
h1{ font-size:clamp(2.2rem, 4.6vw, 3.5rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.7rem, 2.9vw, 2.35rem); letter-spacing:-.03em; line-height:1.14; }
h3{ font-size:clamp(1.05rem, 1.45vw, 1.2rem); }
p{ margin:0 0 1rem; color:var(--ink-2); }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:880px; }
.section{ padding-block:clamp(56px, 6.6vw, 98px); position:relative; }
.section-tight{ padding-block:clamp(34px, 4.2vw, 56px); }
.section-cta{ padding-top:0; }

/* =========================================================
   SECTION MATERIALS
   The page alternates two surfaces, and the whole point is that they
   should feel like different stock, not different paint. White
   sections are clean and lit from above the fold; beige bands are
   paper with a visible tooth. The light keeps falling the same way
   down the page, so every seam reads as a change of material.
   ========================================================= */

/* No seams, no hairlines, no hatch. A beige band is now a pool of warm
   paper that DISSOLVES into the white above and below it over ~150px,
   so the change of material happens as a fade rather than as a ruled
   edge. That also removes the hard beige-to-white step that used to
   appear at the top of the services section. */
.band{
  background:transparent;
  position:relative; isolation:isolate;
}
.band::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* the warm pool, feathered off both edges */
    linear-gradient(180deg,
      transparent 0,
      color-mix(in srgb, var(--paper-2) 55%, transparent) 70px,
      var(--paper-2) 160px,
      var(--paper-2) calc(100% - 160px),
      color-mix(in srgb, var(--paper-2) 55%, transparent) calc(100% - 70px),
      transparent 100%),
    /* and the same light as everywhere else, pooling out of the corners */
    radial-gradient(70% 56% at 94% 104%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%),
    radial-gradient(58% 48% at 2% -4%,   color-mix(in srgb, var(--gold)     6%, transparent), transparent 70%);
}
/* the proof band is short and opens on the opaque green ribbon, so its
   pool reaches full strength much sooner */
.proof.band::before{
  background:
    linear-gradient(180deg,
      var(--paper-2) 0,
      var(--paper-2) calc(100% - 110px),
      color-mix(in srgb, var(--paper-2) 52%, transparent) calc(100% - 48px),
      transparent 100%),
    radial-gradient(70% 70% at 94% 108%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 72%);
}

/* white sections are not bare, but nothing is allowed to collect along
   their top edge any more — that top wash is what read as a band of
   colour turning abruptly to white. The light now pools only at the
   far corners, well away from any section boundary. */
.section:not(.band){ isolation:isolate; }
.section:not(.band)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 38% at 96% 100%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 72%),
    radial-gradient(42% 34% at 2% 88%,   color-mix(in srgb, var(--gold)     4%, transparent), transparent 74%);
}
/* a dark band paints its own surface — it must not get the warm pool */
.band-dark::before{ display:none; }
.band-dark{ background:var(--paper-ink); color:#fff; }
.band-dark h2, .band-dark h3{ color:#fff; }
.band-dark p{ color:rgba(255,255,255,.72); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

.accent-text{ color:var(--accent); }

/* =========================================================
   MOTION
   ========================================================= */

/* staggered entrance for hero lines / words */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes scaleIn{
  from{ opacity:0; transform:scale(.96) translateY(18px); }
  to  { opacity:1; transform:none; }
}

.anim{ opacity:0; animation:riseIn .85s var(--ease) forwards; }
.anim-d1{ animation-delay:.08s } .anim-d2{ animation-delay:.16s }
.anim-d3{ animation-delay:.24s } .anim-d4{ animation-delay:.32s }
.anim-d5{ animation-delay:.42s } .anim-d6{ animation-delay:.52s }
.anim-scale{ opacity:0; animation:scaleIn 1s var(--ease) .3s forwards; }

/* scroll reveal — starts slightly offset, JS adds .in.
   If JS never runs, the no-js fallback below keeps it visible. */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1.in{ transition-delay:.09s } .rv-d2.in{ transition-delay:.18s }
.rv-d3.in{ transition-delay:.27s } .rv-d4.in{ transition-delay:.36s }

/* underline sweep on links */
.ul-sweep{ position:relative; }
.ul-sweep::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.ul-sweep:hover::after{ transform:scaleX(1); transform-origin:left; }

/* marquee */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee-item{
  display:flex; align-items:center; gap:11px;
  padding:0 clamp(18px,2.4vw,34px); white-space:nowrap;
  font-family:var(--ff); font-size:.82rem;
  font-weight:700; color:var(--ink-3); letter-spacing:.11em; text-transform:uppercase;
}
.marquee-item svg{ width:5px; height:5px; color:var(--accent-2); flex:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* `*` does not match pseudo-elements, and the ambient background
     layers ARE pseudo-elements — without this they would keep moving
     for exactly the people who asked them not to */
  *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero::before{ animation:none !important; opacity:0 !important; }
  .collage::after, .bg-field span{ animation:none !important; transform:none !important; }
  /* the rank line stops mid-climb and simply stays drawn — the picture
     is still "rankings going up", it just never redraws itself */
  .rank-path{
    animation:none !important;
    stroke-dashoffset:0 !important; opacity:1 !important;
  }
  .rank-area, .rank-tip{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .anim, .anim-scale, .rv{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   COMPONENTS
   ========================================================= */

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.69rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent-2); }
.band-dark .eyebrow{ color:var(--accent-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:999px;
  font-weight:700; font-size:.94rem; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
  white-space:nowrap;
}
.btn:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }
.btn:active{ transform:translateY(1px) scale(.99); }
/* the sheen is a background layer, so it passes under the label
   without needing a stacking context around the text */
.btn-primary{
  background-color:var(--accent); color:#fff;
  background-image:linear-gradient(100deg,
    transparent 38%,
    color-mix(in srgb, var(--paper) 20%, transparent) 50%,
    transparent 62%);
  background-size:230% 100%; background-position:148% 0; background-repeat:no-repeat;
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:transform .2s var(--ease), box-shadow .25s var(--ease),
             background-color .25s, background-position .8s var(--ease), color .25s;
}
.btn-primary:hover{
  background-color:var(--accent-ink); background-position:-48% 0;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{
  border-color:var(--accent); color:var(--accent); transform:translateY(-2px);
  background:color-mix(in srgb, var(--accent-soft) 60%, transparent);
}
.btn-wa{ background:#1fa855; color:#fff; }
.btn-wa:hover{ background:#178544; transform:translateY(-2px); }
.btn-sm{ padding:10px 19px; font-size:.86rem; }
.btn-block{ width:100%; }
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* ---------- header ---------- */
/* At rest the header is barely-there glass: the page-head light behind
   it shows straight through, so the nav and the hero read as one lit
   composition. Once you scroll it firms up to near-solid paper, which
   is what keeps the links legible over photographs and beige bands. */
.hdr{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 38%, transparent);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .3s, box-shadow .3s;
}
.hdr.scrolled{
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  border-bottom-color:transparent;
  box-shadow:0 1px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}
/* the seam under the header is a light, not a rule: green in the
   middle where the logo is, fading to nothing at both edges */
.hdr::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  pointer-events:none; opacity:0;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 38%, transparent) 22%,
    color-mix(in srgb, var(--line-2) 90%, transparent) 60%,
    transparent);
  transition:opacity .3s var(--ease);
}
.hdr.scrolled::after{ opacity:1; }
.hdr-in{ display:flex; align-items:center; gap:26px; height:72px; }

/* ---------- logo ----------
   The mark: three rising bars on a deep green tile, their tops cut
   along one sharp diagonal so together they read as a single upward
   edge ending in a point. Rank (the bars) + Sharp (the cut). The SVG
   carries its own brand colours so it renders the same everywhere,
   including the favicon. The wordmark is two weights of Outfit. */
.logo{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  font-family:var(--ff-d); font-size:1.28rem; letter-spacing:-.04em; line-height:1;
  color:var(--ink);
}
.logo-mark{
  width:34px; height:34px; flex:none; display:block;
  border-radius:11px;
  box-shadow:0 6px 14px -8px color-mix(in srgb, var(--accent-ink) 70%, transparent);
  transition:transform .35s var(--ease);
}
.logo-mark svg{ width:100%; height:100%; display:block; }
.logo:hover .logo-mark{ transform:translateY(-1px) rotate(-4deg); }
.logo-word{ font-weight:500; color:var(--ink); white-space:nowrap; }
.logo-word b{ font-weight:800; color:var(--accent); }

/* text that is read out by screen readers but not shown */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{
  position:relative;
  padding:9px 13px; border-radius:var(--r-sm); font-size:.92rem;
  color:var(--ink-2); font-weight:600; transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:1.5px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav a:hover{ color:var(--accent); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a.active{ color:var(--accent); }
.nav a.active::after{ transform:scaleX(1); }
.hdr-cta{ display:flex; align-items:center; gap:10px; }

/* WhatsApp in the header: the fastest way to reach a person, so it
   sits in plain view. WhatsApp's own green is a brand mark, not a
   palette colour, so it lives on the icon only. */
.hdr-wa{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 12px; border-radius:999px;
  font-size:.86rem; font-weight:700; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2);
  transition:border-color .2s, background .2s, transform .2s var(--ease);
  white-space:nowrap;
}
.hdr-wa svg{ width:17px; height:17px; flex:none; color:#1fa855; }
.hdr-wa:hover{ border-color:var(--accent-2); background:var(--accent-soft); transform:translateY(-1px); }
.hdr-wa-m{
  display:none; width:40px; height:40px; border-radius:var(--r-sm);
  place-items:center; flex:none;
  background:var(--paper); border:1px solid var(--line-2); color:#1fa855;
}
.hdr-wa-m svg{ width:20px; height:20px; }

.burger{
  display:none; width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--paper); border:1px solid var(--line-2);
  color:var(--ink); cursor:pointer; margin-left:auto;
  align-items:center; justify-content:center;
}

/* ---------- region pill ---------- */
.geo-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  font-size:.79rem; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s;
}
.geo-pill:hover{ border-color:var(--accent-2); background:var(--accent-soft); transform:translateY(-1px); }

.cur-toggle{
  display:inline-flex; padding:4px; gap:3px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
}
.cur-toggle button{
  padding:10px 22px; border-radius:999px; border:0; cursor:pointer;
  background:transparent; color:var(--ink-2); font-size:.86rem; font-weight:700;
  transition:all .3s var(--ease);
}
.cur-toggle button.on{ background:var(--accent); color:#fff; box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(24px,3vw,40px) clamp(30px,3.2vw,44px); position:relative; overflow:hidden; }

/* the scan sweep — one soft pass of light travelling across the hero,
   the way a crawler passes over a page. It lives inside .hero because
   .hero really does clip (unlike body, whose overflow is propagated to
   the viewport), so a translating layer here can never widen the page.
   Long rest between passes: it should register as ambient, never as a
   loop you can sit and watch. */
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:0; bottom:0; left:-52%; width:46%; opacity:0;
  background:linear-gradient(104deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 72%, transparent) 36%,
    color-mix(in srgb, var(--accent-2) 15%, transparent) 54%,
    transparent 100%);
  animation:hero-sweep 21s linear infinite;
  will-change:transform, opacity;
}
@keyframes hero-sweep{
  0%   { transform:translate3d(0,0,0);    opacity:0; }
  9%   { opacity:.9; }
  50%  { opacity:.9; }
  60%  { transform:translate3d(330%,0,0); opacity:0; }
  100% { transform:translate3d(330%,0,0); opacity:0; }
}

/* ---------- the rising rank line ----------
   This replaces the engraved grid. It is the only moving thing in the
   hero background: a performance line stepping upward across the page,
   drawn in with stroke-dashoffset, held, then faded out and redrawn.
   Everything about it is deliberately under-stated — a tint of the
   light green, a 2px stroke, and a mask that holds it right back over
   the headline column so it can never touch text contrast.
   Nothing here reflows: the layer is absolute inside .hero, which
   clips, so it can never widen the document. */
.rank-line{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  /* sits well back: the plot now climbs through the middle band of the
     hero, roughly level with the copy and the primary button, and the
     whole layer is held down so it only just registers */
  opacity:.5;
  /* two masks intersected: fade off the top and bottom, and keep the
     line fainter still across the left column where the copy sits */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%),
    linear-gradient(90deg,
      color-mix(in srgb,#000 16%,transparent) 0%,
      color-mix(in srgb,#000 34%,transparent) 30%,
      #000 62%, #000 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%),
    linear-gradient(90deg,
      color-mix(in srgb,#000 16%,transparent) 0%,
      color-mix(in srgb,#000 34%,transparent) 30%,
      #000 62%, #000 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* preserveAspectRatio="none" lets the plot stretch to whatever shape
   the hero is; vector-effect keeps the stroke an even 2px regardless */
.rank-line svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.rank-area{
  fill:color-mix(in srgb, var(--accent-2) 4%, transparent);
  opacity:0;
  animation:rank-wash 19s var(--ease) infinite;
}
.rank-path{
  fill:none;
  stroke:color-mix(in srgb, var(--accent-2) 26%, transparent);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:rank-draw 19s var(--ease) infinite;
}
/* the marker riding the top of the climb. An HTML dot rather than an
   SVG circle, because the stretched viewBox would turn a circle into
   an ellipse; the percentages map 1:1 onto the same viewBox. */
.rank-tip{
  position:absolute; left:95.83%; top:26.19%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:color-mix(in srgb, var(--accent-2) 34%, transparent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-2) 6%, transparent);
  opacity:0;
  animation:rank-tip 19s var(--ease) infinite;
}
@keyframes rank-draw{
  0%        { stroke-dashoffset:1000; opacity:0; }
  4%        { opacity:1; }
  42%, 86%  { stroke-dashoffset:0; opacity:1; }
  96%, 100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes rank-wash{
  0%, 12%   { opacity:0; }
  52%, 86%  { opacity:1; }
  96%, 100% { opacity:0; }
}
@keyframes rank-tip{
  0%, 42%   { opacity:0; transform:scale(.4); }
  52%, 86%  { opacity:1; transform:none; }
  96%, 100% { opacity:0; transform:none; }
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4.2vw,58px); align-items:center; }
.hero .eyebrow{ margin-bottom:13px; }
.hero h1{
  /* capped: the text column stops growing at --max, so the headline
     must stop too or it runs to a fourth line on wide screens */
  font-size:clamp(2.05rem, 4vw, 2.95rem);
  line-height:1.06; margin-bottom:16px;
  letter-spacing:-.042em;
}
/* the channels are the promise, so they carry the accent, with a soft
   highlighter stroke under them rather than a colour change alone */
.hero h1 .hl{
  color:var(--accent);
  background:linear-gradient(transparent 70%, color-mix(in srgb, var(--accent-2) 20%, transparent) 70%, color-mix(in srgb, var(--accent-2) 20%, transparent) 94%, transparent 94%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero-sub{
  font-size:clamp(1rem,1.08vw,1.08rem); line-height:1.58;
  max-width:54ch; margin-bottom:22px; text-wrap:pretty; color:var(--ink-2);
}
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; }
.hero-actions .btn{ padding:14px 25px; }

/* three plain facts under the buttons */
.hero-checks{
  list-style:none; margin:0; padding:15px 0 0;
  border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:8px 18px;
}
.hero-checks li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; color:var(--ink-2);
}
.hero-checks svg{
  width:18px; height:18px; flex:none; padding:3px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
}

/* ---------- hero collage ---------- */
.collage{ position:relative; }
/* a hairline frame stepped off the photo — gives the image a place to sit */
.collage::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  transform:translate(15px,15px);
}
/* the key light behind the photo. It breathes very slowly so the top
   of the page is never completely still, even between sweeps. */
.collage::after{
  content:""; position:absolute; z-index:-2; inset:-10% -8% -14% 4%;
  background:radial-gradient(58% 54% at 62% 46%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 72%);
  filter:blur(28px);
  animation:collage-key 30s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes collage-key{ to{ transform:translate3d(-3%, 3%, 0) scale(1.09); } }
/* ---------- hero scope: the outcome, built in HTML ----------
   This replaces the hero photograph. What makes the hero meaningful is
   text — a listing sitting at #1, a post with its engagement, the
   numbers that follow — and a generated photo cannot carry readable
   text. So the two floating readouts and the photo are folded into one
   designed object: what the customer sees on top, what the owner sees
   underneath. All real type, no image, no library. */
.scope{
  position:relative;
  background:var(--paper);
  border:1px solid color-mix(in srgb, var(--line-2) 92%, transparent);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--paper) inset, var(--shadow-lg);
  overflow:hidden;
}

/* the query line — the thing a customer actually types */
.scope-bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--paper-2), var(--paper));
}
.scope-search{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:9px;
  padding:8px 13px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line-2);
  color:var(--ink); font-size:.86rem; font-weight:600; letter-spacing:-.012em;
  white-space:nowrap; overflow:hidden;
}
.scope-search span{ overflow:hidden; text-overflow:ellipsis; }
.scope-search svg{ width:15px; height:15px; flex:none; color:var(--accent); }
.scope-chip{
  flex:none; font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line-2); border-radius:999px; padding:4px 9px;
  line-height:1.5;
}

.scope-body{ padding:11px 13px; display:grid; gap:8px; }

/* the result in first place — the whole point of the section */
.scope-hit{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--r);
  background:color-mix(in srgb, var(--accent-soft) 64%, var(--paper));
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.scope-rank{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-content:center;
  background:var(--accent); color:var(--paper);
  font-family:var(--ff-d); font-size:.98rem; font-weight:800; letter-spacing:-.04em;
}
.scope-hit strong{ display:block; font-size:.93rem; letter-spacing:-.022em; line-height:1.3; }
.scope-meta{ display:block; font-size:.74rem; color:var(--ink-3); margin-top:1px; }
.scope-meta b{ color:var(--ink-2); font-weight:700; }
.scope-stars{ color:var(--gold); letter-spacing:.04em; }

.scope-organic, .scope-post{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px;
  padding:9px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line);
}
.scope-organic b, .scope-post b{
  display:block; font-size:.83rem; font-weight:700; letter-spacing:-.018em; line-height:1.3;
}
.scope-organic i, .scope-post i{
  display:block; font-style:normal; font-size:.72rem; color:var(--ink-3); margin-top:1px;
}
.scope-pos{
  flex:none; font-size:.72rem; font-weight:800; letter-spacing:-.01em;
  color:var(--accent-ink); background:var(--accent-soft);
  border-radius:var(--r-sm); padding:5px 9px; line-height:1.2;
}
.scope-thumb{
  width:32px; height:32px; border-radius:9px; flex:none;
  background:linear-gradient(150deg, var(--accent), var(--accent-2) 58%, var(--gold));
}
.scope .tag{ flex:none; }

/* the owner's side of the same story */
.scope-foot{
  padding:11px 13px 9px;
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.scope-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.scope-kpis > div{ display:grid; gap:1px; align-content:start; }
.scope-kpis .stat-label{ margin:0; font-size:.58rem; letter-spacing:.13em; }
.scope-kpis b{
  font-family:var(--ff-d); font-size:1.2rem; font-weight:700; letter-spacing:-.045em;
  line-height:1.15; font-variant-numeric:tabular-nums;
}
.scope-kpis .tag{ justify-self:start; font-size:.66rem; padding:2px 8px; margin-top:2px; }
.scope-note{ margin:4px 0 0; font-size:.65rem; color:var(--ink-3); letter-spacing:.03em; }

/* the hero chart reads as a sparkline, not a full chart */
#heroChart{ margin:2px -5px -10px; color:var(--accent); }
#heroChart .ax, #heroChart .gl{ display:none; }

/* ---------- photos ---------- */
.photo{
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, var(--accent), var(--accent-2));
  background-size:cover; background-position:center;
  min-height:220px;
}
.photo-tall{ min-height:360px; }
.photo-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow);
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.photo-frame:hover img{ transform:scale(1.045); }
.photo-cap{
  position:absolute; inset:auto 0 0 0; padding:20px;
  background:linear-gradient(to top, color-mix(in srgb, var(--paper-ink) 90%, transparent), color-mix(in srgb, var(--paper-ink) 30%, transparent) 55%, transparent);
  color:#fff; font-weight:700; font-size:.95rem;
}

/* ---------- cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-4px); }
.card:hover::after{ transform:scaleX(1); }
.card-icon{
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; margin-bottom:17px;
  background:var(--accent-soft); color:var(--accent);
  transition:transform .4s var(--ease), background .3s;
}
.card:hover .card-icon{ transform:rotate(-6deg) scale(1.08); background:var(--accent); color:#fff; }
.card-icon svg{ width:21px; height:21px; }
.card h3{ margin-bottom:7px; }
.card p{ font-size:.93rem; margin:0; }

.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }

/* ---------- section head ---------- */
.shead{ max-width:600px; margin:0 auto 44px; text-align:center; }
/* the heading is inline-block (for its underline), so the eyebrow
   needs to be a block-level flex row or the two share a line */
.shead .eyebrow{ display:flex; justify-content:center; margin-bottom:14px; }
.shead h2{ margin-bottom:.46em; }
.shead p{ font-size:.98rem; line-height:1.62; margin:0; }

/* =========================================================
   HOME — editorial refinements (scoped, token-driven)
   ========================================================= */

/* --- proof band -----------------------------------------------------
   These are two different kinds of evidence and they must not read as
   one block of beige. They are now two materials stacked:

     1. the sector marquee  — a deep green ribbon. Inked, full-bleed,
        small caps, the darkest thing on the page so far. It also does
        the job of a seam: it closes the white hero cleanly.
     2. the numbers         — the beige band proper, paper, airy,
        large figures with room around them.

   Green ribbon over beige paper is a change of material, not a change
   of hue, so the hierarchy survives even in greyscale. --------------- */
.proof{ padding-block:0; }

.proof .marquee{
  position:relative; isolation:isolate;
  padding-block:15px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 13%, transparent) 0 1px,
      transparent 1px),
    linear-gradient(96deg,
      color-mix(in srgb, var(--accent) 88%, var(--accent-ink)) 0%,
      var(--accent) 52%,
      color-mix(in srgb, var(--accent) 86%, var(--accent-ink)) 100%);
  /* the global .marquee mask would eat the ribbon's own edges, so the
     ribbon fades its text with matched colour stops instead */
  -webkit-mask-image:none; mask-image:none;
  overflow:hidden;
}
/* a lit top edge, so the ribbon looks like a solid thing laid on the
   page rather than a rectangle filled with green */
.proof .marquee::before,
.proof .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(38px,5vw,76px);
  z-index:2; pointer-events:none;
}
.proof .marquee::before{ left:0;  background:linear-gradient(90deg,  var(--accent-ink), color-mix(in srgb, var(--accent-ink) 30%, transparent) 55%, transparent); }
.proof .marquee::after { right:0; background:linear-gradient(270deg, var(--accent-ink), color-mix(in srgb, var(--accent-ink) 30%, transparent) 55%, transparent); }

.proof .marquee-item{
  color:color-mix(in srgb, var(--paper) 86%, transparent);
  font-size:.75rem; letter-spacing:.2em;
}
.proof .marquee-item svg{ color:color-mix(in srgb, var(--gold) 72%, var(--paper)); width:6px; height:6px; }

/* the numbers get real air and a lifted paper surface */
.proof > .wrap{ padding-block:clamp(30px,3.8vw,46px); }
.proof .stat-strip .stat-num{ color:var(--ink); }
.proof .stat-strip .stat-label{ color:var(--accent); }

/* --- stat strip: hairline-ruled, no floating cards --- */
.stat-strip{ gap:0; }
.stat-strip .stat{
  padding:0 clamp(16px,2vw,26px);
  border-right:1px solid color-mix(in srgb, var(--line-2) 75%, transparent);
  border-radius:0;
}
.stat-strip .stat:first-child{ padding-left:0; }
.stat-strip .stat:last-child{ border-right:0; padding-right:0; }
.stat-strip .stat-label{ font-size:.67rem; letter-spacing:.15em; margin-bottom:9px; }
.stat-strip .stat-num{ font-size:clamp(1.8rem,2.7vw,2.2rem); }
.stat-strip .stat-delta{ margin-top:6px; font-size:.77rem; }
/* the unit is not the number — set it smaller and lighter so the
   figure keeps the weight */
.stat-num i{
  font-style:normal; font-size:.56em; font-weight:600;
  color:var(--ink-3); letter-spacing:0; margin-left:.06em;
}

/* --- problems: a black band of the owner's own words ----------------
   Each card is one complaint, quoted the way a shop owner would say
   it, and under it the fix in one sentence. Black is the strongest
   surface in the palette, so this is the moment the page changes
   gear: the visitor recognises their problem here. --------------- */
.pains{ overflow:hidden; }
.pains .shead{ max-width:720px; }
.pains .shead h2{ color:var(--paper); }
.pains .shead p{ color:color-mix(in srgb, var(--paper) 70%, transparent); }
.pains .eyebrow{ color:color-mix(in srgb, var(--accent-2) 80%, var(--paper)); }
/* one slow green light behind the cards, so the black reads as a lit
   surface rather than a hole in the page */
.pains::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(900px, 90vw); height:420px; left:50%; top:46%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  opacity:.7;
}
.pains > .wrap{ position:relative; z-index:1; }

.pain-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.pain{
  display:flex; flex-direction:column; gap:18px;
  padding:24px 22px 22px;
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--paper) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.pain:hover{
  border-color:color-mix(in srgb, var(--accent-2) 55%, transparent);
  background:color-mix(in srgb, var(--paper) 8%, transparent);
  transform:translateY(-3px);
}
.pains .pain-q{
  margin:0; color:var(--paper);
  font-family:var(--ff-d); font-size:1.12rem; font-weight:600;
  line-height:1.38; letter-spacing:-.02em; text-wrap:pretty;
}
.pains .pain-a{
  margin:auto 0 0; padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  font-size:.88rem; line-height:1.55;
  color:color-mix(in srgb, var(--paper) 74%, transparent);
}
.pain-a span{
  display:flex; align-items:center; gap:7px; margin-bottom:6px;
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent-2) 80%, var(--paper));
}
.pain-a span::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--accent-2);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

/* --- services: three full rows, one per service --------------------
   Photo on one side, the promise on the other, alternating. Each row
   leads with the result (the figcaption chip on the photo and the
   heading), then four plain lines of what we actually do. ---------- */
.svc-rows{ display:grid; gap:clamp(22px,3vw,34px); }
.svc{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:stretch;
  background:var(--paper);
  border:1px solid color-mix(in srgb, var(--line-2) 80%, transparent);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 1px 0 var(--paper) inset, var(--shadow-sm);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc:hover{ box-shadow:var(--shadow); border-color:var(--line-2); }
.svc-flip{ grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); }
.svc-flip .svc-media{ order:2; }

.svc-media{
  position:relative; margin:0; min-height:300px;
  background:linear-gradient(160deg, var(--accent), var(--accent-2));
  overflow:hidden;
}
.svc-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.svc:hover .svc-media img{ transform:scale(1.04); }
/* the result, pinned to the photo like a sticker on a shop window */
.svc-result{
  position:absolute; left:16px; bottom:16px; right:16px; width:fit-content; max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:9px;
  padding:10px 15px 10px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--ink) 60%, transparent);
  font-size:.86rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.3;
}
.svc-result svg{
  width:26px; height:26px; flex:none; padding:5px; border-radius:50%;
  background:var(--accent); color:var(--paper);
}

.svc-body{ padding:clamp(26px,3.6vw,46px); display:flex; flex-direction:column; align-items:flex-start; }
.svc-tag{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.svc-tag b{
  font-family:var(--ff-d); font-size:.78rem; letter-spacing:0;
  color:var(--paper); background:var(--accent);
  border-radius:999px; padding:3px 9px; line-height:1.4;
}
.svc-body h3{
  font-size:clamp(1.45rem,2.3vw,1.95rem); line-height:1.12; letter-spacing:-.03em;
  margin-bottom:12px; max-width:20ch;
}
.svc-lede{ font-size:1rem; line-height:1.6; max-width:52ch; margin-bottom:20px; }
.svc-list{
  list-style:none; margin:0 0 22px; padding:0;
  display:grid; gap:11px; max-width:56ch;
}
.svc-list li{
  position:relative; padding-left:30px;
  font-size:.93rem; line-height:1.5; color:var(--ink-2);
}
.svc-list li::before,
.svc-list li::after{
  content:""; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:50%;
}
.svc-list li::before{ background:var(--accent-soft); }
.svc-list li::after{
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.svc-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:.92rem; color:var(--accent);
}
.svc-link svg{ transition:transform .3s var(--ease); }
.svc-link:hover svg{ transform:translateX(3px); }
.svc-note{
  margin:auto 0 0; padding:12px 15px; border-radius:var(--r);
  background:var(--paper-2); border:1px solid var(--line);
  font-size:.86rem; color:var(--ink-2);
}
.svc-note a{ color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* the reporting promise closes the services, as a slim slab */
.svc-report{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:18px 22px; margin-top:clamp(22px,3vw,34px);
  padding:clamp(20px,2.6vw,28px) clamp(20px,3vw,34px);
  border-radius:var(--r-lg);
  background:linear-gradient(100deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 30%, var(--paper)));
  border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.svc-report-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--accent); color:var(--paper);
}
.svc-report-ic svg{ width:22px; height:22px; }
.svc-report h3{ margin:0 0 4px; font-size:1.15rem; }
.svc-report p{ margin:0; font-size:.92rem; max-width:70ch; }
.svc-report .btn-ghost{ background:var(--paper); }
.svc-no{
  margin:18px auto 0; text-align:center; max-width:70ch;
  font-size:.86rem; color:var(--ink-3);
}

/* --- promises: six plain commitments in a ruled grid --- */
.promise-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid color-mix(in srgb, var(--line-2) 80%, transparent);
  border-radius:var(--r-xl); overflow:hidden; background:var(--paper);
  box-shadow:0 1px 0 var(--paper) inset, var(--shadow-sm);
}
.promise{
  padding:clamp(24px,2.8vw,34px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.promise:nth-child(3n){ border-right:0; }
.promise:nth-last-child(-n+3){ border-bottom:0; }
.promise:hover{ background:color-mix(in srgb, var(--accent-soft) 45%, var(--paper)); }
.promise-ic{
  width:42px; height:42px; border-radius:12px; margin-bottom:16px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.promise:hover .promise-ic{ background:var(--accent); color:var(--paper); }
.promise-ic svg{ width:20px; height:20px; }
.promise h3{ font-size:1.08rem; margin-bottom:7px; }
.promise p{ font-size:.92rem; margin:0; line-height:1.58; }

/* --- how it works: the reassurance panel overlaps the photo,
       so the column reads as one object, not two stacked ones --- */
.how-grid{
  display:grid; grid-template-columns:1fr 1.02fr;
  gap:clamp(34px,4.6vw,62px); align-items:center;
}
.how-grid h2{ margin-bottom:14px; }
.how-lede{ margin-bottom:30px; max-width:44ch; }
.how-cta{ margin-top:30px; }
.how-media{ position:relative; }
.how-photo{ aspect-ratio:5/4; border-radius:var(--r-lg); }
.how-note{
  position:relative; z-index:1;
  width:min(92%, 450px); margin:-46px auto 0 0;
  border-radius:var(--r); line-height:1.56;
  background:var(--paper);
  border-color:color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow:0 24px 44px -28px color-mix(in srgb, var(--ink) 48%, transparent);
}

/* --- steps: the rules between them are gone. The three steps are now
       held together by a single soft green thread running down behind
       the counters — the same rising-line idea, turned vertical. --- */
.steps{ display:grid; gap:0; position:relative; }
.steps::before{
  content:""; position:absolute; left:18px; top:19px; bottom:30px; width:2px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent-2) 42%, transparent),
    color-mix(in srgb, var(--accent-2) 16%, transparent) 70%,
    transparent);
}
.steps .step{ padding:0 0 clamp(22px,2.6vw,30px) 58px; }
.steps .step:last-child{ padding-bottom:0; }
.steps .step::before{
  top:0; width:38px; height:38px; border-radius:50%;
  /* opaque, so the thread behind it passes between the counters
     instead of running through them */
  background:var(--paper); color:var(--accent);
  border:1px solid var(--line-2);
  font-size:.92rem; font-variant-numeric:tabular-nums;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.steps .step:first-child::before{ top:0; }
.steps .step:hover::before{
  transform:none; background:var(--accent); color:var(--paper); border-color:var(--accent);
}

/* ---------- pricing ----------
   The head is asymmetric (offer left, controls right) and the three
   plans share one slab, so the section reads like a rate card rather
   than three cards hoping to be picked. */
.price-top{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,48px); align-items:end;
  /* no rule under the heading any more — the gap does the separating */
  padding-bottom:clamp(22px,2.6vw,30px);
  margin-bottom:clamp(26px,3.2vw,40px);
}
.price-intro h2{ margin-bottom:.4em; }
.price-intro p{ font-size:.96rem; max-width:50ch; margin:0; text-wrap:pretty; }

.price-head{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin:0; }
.price-note{
  display:flex; align-items:center; gap:9px;
  font-size:.83rem; color:var(--ink-2); font-weight:500;
  background:var(--good-soft); border:1px solid color-mix(in srgb, var(--good) 26%, transparent);
  padding:8px 16px; border-radius:999px; white-space:nowrap;
}
.price-note svg{ color:var(--good); }
.price-note strong{ color:var(--ink); }

/* ---------- the pricing control rail ----------
   Two decisions, one unit, sitting on the slab it controls: what you
   are buying (the track) on the left, which currency you are buying it
   in on the right. The rail is the lid of the plans table — same
   width, same radius family, hairline of the same colour. */
.price-rail{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding:13px; margin-bottom:clamp(16px,2vw,22px);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.track-toggle{
  display:flex; flex:1 1 430px; gap:5px; min-width:0;
  padding:5px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r);
}
.track-toggle button{
  flex:1 1 0; min-width:0; cursor:pointer; text-align:left;
  display:grid; gap:1px;
  padding:9px 13px; border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.track-toggle button:hover{ background:var(--paper); border-color:var(--line); }
.track-toggle .tt-name{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-family:var(--ff-d); font-size:.97rem; font-weight:700; letter-spacing:-.028em;
  color:var(--ink); line-height:1.25;
}
.track-toggle .tt-from{
  font-size:.72rem; font-weight:600; color:var(--ink-3);
  font-variant-numeric:tabular-nums; letter-spacing:-.005em;
}
.track-toggle .tt-rec{
  font-family:var(--ff); font-size:.55rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; line-height:1.5; white-space:nowrap;
  background:var(--gold-soft); color:color-mix(in srgb, var(--gold) 76%, var(--ink));
  border-radius:999px; padding:3px 7px;
}
.track-toggle button[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 10px 22px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}
.track-toggle button[aria-selected="true"] .tt-name{ color:var(--paper); }
.track-toggle button[aria-selected="true"] .tt-from{ color:color-mix(in srgb, var(--paper) 76%, transparent); }
.track-toggle button[aria-selected="true"] .tt-rec{
  background:color-mix(in srgb, var(--paper) 24%, transparent); color:var(--paper);
}
.track-toggle button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.price-rail .cur-toggle{ margin-left:auto; flex:0 0 auto; }

/* the dashboard billing view reuses the same control, without the rail
   around it — it already sits inside a panel */
.billing-rail{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
.billing-rail .track-toggle{ flex:1 1 380px; }

.track-blurb{
  display:flex; align-items:flex-start; gap:9px;
  margin:0 0 clamp(16px,2vw,22px); font-size:.91rem; color:var(--ink-2);
  max-width:66ch;
}
.track-blurb svg{ width:16px; height:16px; flex:none; margin-top:4px; color:var(--accent-2); }

.plans{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; align-items:stretch;
  background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 2px 0 var(--paper) inset, var(--shadow);
}
.plan{
  background:transparent; border:0; border-radius:0;
  border-right:1px solid var(--line);
  padding:clamp(26px,2.9vw,34px) clamp(22px,2.4vw,30px);
  position:relative;
  transition:background .3s var(--ease);
}
.plan:last-child{ border-right:0; }
.plan:hover{
  transform:none; box-shadow:none;
  background:color-mix(in srgb, var(--paper-2) 62%, var(--paper));
}
.plan.popular{
  background:color-mix(in srgb, var(--accent-soft) 48%, var(--paper));
}
.plan.popular:hover{ background:color-mix(in srgb, var(--accent-soft) 70%, var(--paper)); }
.plan.popular::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

.plan-top{ display:flex; align-items:center; gap:10px; margin-bottom:3px; min-height:26px; }
/* flush with the name, not a sticker floating off the top edge */
.plan-badge{
  position:static; transform:none;
  background:var(--accent); color:var(--paper);
  font-size:.59rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; white-space:nowrap; line-height:1.5;
}
.plan-name{ font-family:var(--ff-d); font-size:1.26rem; font-weight:700; margin:0; letter-spacing:-.03em; }
.plan-for{ font-size:.83rem; color:var(--ink-3); margin-bottom:20px; min-height:2.6em; line-height:1.4; }
.plan-price{ display:flex; align-items:baseline; gap:4px; margin-bottom:3px; flex-wrap:wrap; }
.plan-price .cur{ font-size:.95rem; color:var(--ink-3); font-weight:700; letter-spacing:0; }
.plan-price .amt{
  font-family:var(--ff-d); font-size:clamp(2.1rem,3vw,2.5rem); font-weight:700;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums; line-height:1;
}
.plan-price .per{ font-size:.86rem; color:var(--ink-3); font-weight:500; }
.plan-from{ font-size:.76rem; color:var(--ink-3); margin-bottom:0; }
/* bundle only: what the same two tracks cost bought separately */
.plan-save{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:7px; font-size:.77rem; color:var(--ink-3);
}
.plan-save s{ font-variant-numeric:tabular-nums; text-decoration-thickness:1px; }
.plan-save b{
  font-size:.71rem; font-weight:800; letter-spacing:-.005em;
  background:var(--good-soft); color:color-mix(in srgb, var(--good) 78%, var(--ink));
  border:1px solid color-mix(in srgb, var(--good) 22%, transparent);
  border-radius:999px; padding:2px 9px;
}
.plan ul{
  list-style:none; padding:21px 0 0; margin:21px 0 24px;
  display:grid; gap:10px;
  border-top:1px solid color-mix(in srgb, var(--line-2) 72%, transparent);
}
.plan li{ display:flex; gap:10px; font-size:.885rem; color:var(--ink-2); line-height:1.5; }
.plan li svg{ width:15px; height:15px; flex:none; color:var(--good); margin-top:4px; }
.plan .btn-ghost{ border-color:var(--line-2); background:var(--paper); }
/* the plan a client is already on (dashboard billing view) */
.plan .btn[disabled]{ opacity:.5; cursor:default; pointer-events:none; }

.price-foot{
  text-align:center; margin:clamp(24px,3vw,34px) auto 0;
  font-size:.9rem; color:var(--ink-2); max-width:62ch;
}
.price-foot a{ color:var(--accent); font-weight:700; }

/* ---------- forms ---------- */
.audit-box{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(24px,4vw,42px);
  box-shadow:var(--shadow);
}
.field{ margin-bottom:17px; }
.field label{ display:block; font-size:.84rem; font-weight:700; margin-bottom:7px; color:var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:.94rem; font-family:inherit;
  transition:border-color .22s, box-shadow .22s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field-err{ color:var(--bad); font-size:.79rem; margin-top:5px; display:none; font-weight:600; }
.field.bad input, .field.bad select{ border-color:var(--bad); }
.field.bad .field-err{ display:block; }

/* ---------- gauge ---------- */
.gauge-wrap{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.gauge{ position:relative; width:180px; height:180px; max-width:100%; }
.gauge svg{ transform:rotate(-90deg); width:100%; height:100%; }
.gauge-val{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.gauge-val .num{
  font-family:var(--ff-d); font-size:2.8rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.gauge-val .of{ font-size:.75rem; color:var(--ink-3); font-weight:600; }

/* ---------- metric bars ---------- */
.metric{ margin-bottom:18px; }
.metric-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; gap:12px; }
.metric-name{ font-size:.89rem; font-weight:600; color:var(--ink); }
.metric-val{ font-size:.85rem; font-weight:800; font-variant-numeric:tabular-nums; }
.bar{ height:8px; border-radius:99px; background:var(--paper-3); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; width:0; transition:width 1.1s var(--ease); }
.metric-hint{ font-size:.77rem; color:var(--ink-3); margin-top:5px; }

/* ---------- stat tiles ---------- */
.stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.stat-flat{ border:0; background:transparent; padding:0; }
.stat-label{
  font-size:.74rem; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.09em; font-weight:800; margin-bottom:8px;
}
.stat-num{
  font-family:var(--ff-d); font-size:2.1rem; font-weight:700; line-height:1.1;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.stat-delta{ font-size:.81rem; font-weight:700; margin-top:5px; }
.up{ color:var(--good); } .down{ color:var(--bad); } .flat{ color:var(--ink-3); font-weight:500; }
.band-dark .stat-num{ color:#fff; }
.band-dark .stat-label{ color:rgba(255,255,255,.55); }
.band-dark .stat-delta.flat{ color:rgba(255,255,255,.5); }

/* ---------- steps ---------- */
.step{ position:relative; padding-left:58px; }
.step::before{
  content:attr(data-n);
  position:absolute; top:0; left:0;
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--ff-d); font-weight:700; font-size:1rem;
  background:var(--accent); color:#fff;
  transition:transform .4s var(--ease);
}
.step:hover::before{ transform:scale(1.1) rotate(-6deg); }
.step h3{ font-size:1.08rem; margin-bottom:6px; }
.step p{ font-size:.92rem; margin:0; }

/* ---------- table ---------- */
.tbl-wrap{ overflow-x:auto; min-width:0; border:1px solid var(--line); border-radius:var(--r); }
table{ width:100%; border-collapse:collapse; font-size:.89rem; min-width:540px; }
thead th{
  text-align:left; padding:12px 16px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-3); font-weight:800;
  background:var(--paper-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink-2); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background .2s; }
tbody tr:hover td{ background:var(--paper-2); }

.tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px; font-size:.74rem; font-weight:700; }
.tag-good{ background:var(--good-soft); color:color-mix(in srgb, var(--good) 76%, var(--ink)); }
.tag-warn{ background:var(--warn-soft); color:color-mix(in srgb, var(--warn) 74%, var(--ink)); }
.tag-bad{  background:var(--bad-soft);  color:color-mix(in srgb, var(--bad) 78%, var(--ink)); }
.tag-info{ background:var(--accent-soft); color:var(--accent-ink); }

/* ---------- faq ----------
   Heading parks on the left while the answers scroll past it. */
.faq-grid{
  display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(30px,5vw,76px); align-items:start;
}
.faq-aside{ position:sticky; top:98px; }
.faq-aside h2{ margin-bottom:.5em; }
.faq-aside p{ font-size:.94rem; max-width:32ch; margin-bottom:14px; text-wrap:pretty; }
.faq-ask{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--accent); font-weight:700; font-size:.92rem;
}
.faq-ask svg{ transition:transform .3s var(--ease); }
.faq-ask:hover svg{ transform:translateX(3px); }

.faq{ max-width:none; margin:0; }
.faq details{ border-bottom:1px solid color-mix(in srgb, var(--line) 76%, transparent); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  padding:19px 2px; cursor:pointer; font-weight:700; font-size:1rem; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center;
  transition:color .25s; letter-spacing:-.012em;
}
.faq summary:hover{ color:var(--accent); }
.faq details[open] summary{ color:var(--accent); }
.faq summary::-webkit-details-marker{ display:none; }
/* the marker is drawn from two bars, so the vertical one can retract
   on open instead of the whole glyph spinning */
.faq summary::after{
  content:""; flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-2); background-color:var(--paper);
  color:var(--accent);
  background-image:linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
  background-size:10px 1.5px, 1.5px 10px;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:background-size .35s var(--ease), background-color .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease);
}
.faq summary:hover::after{ border-color:var(--accent-2); }
.faq details[open] summary::after{
  background-color:var(--accent); border-color:var(--accent); color:var(--paper);
  background-size:10px 1.5px, 1.5px 0;
}
.faq .ans{
  padding:0 0 22px 2px; font-size:.93rem; color:var(--ink-2);
  max-width:62ch; animation:fadeIn .45s var(--ease);
  border-left:2px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding-left:16px; margin-left:0; text-wrap:pretty;
}

/* ---------- CTA band ---------- */
.cta-band{
  background-color:var(--accent-ink);
  background-image:
    radial-gradient(84% 130% at 16% 0%, color-mix(in srgb, var(--accent) 88%, transparent), transparent 60%),
    radial-gradient(62% 96% at 102% 104%, color-mix(in srgb, var(--accent-2) 52%, transparent), transparent 66%);
  color:var(--paper); border-radius:var(--r-lg);
  padding:clamp(38px,5.2vw,68px); text-align:center;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--paper) 15%, transparent),
    var(--shadow-lg);
}
/* the drafting grid is gone — the slab now gets a slow breath of light
   across it instead of ruled lines */
.cta-band::before{
  content:""; position:absolute; inset:-20%; z-index:-1;
  background:
    radial-gradient(42% 46% at 28% 24%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 70%),
    radial-gradient(38% 44% at 76% 82%, color-mix(in srgb, var(--paper)    13%, transparent), transparent 68%);
  animation:cta-breathe 26s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes cta-breathe{ to{ transform:translate3d(3%, -3%, 0) scale(1.1); } }
.cta-band > *{ position:relative; }
.cta-band h2{ color:var(--paper); margin-bottom:12px; }
.cta-band p{ color:color-mix(in srgb, var(--paper) 84%, transparent); }
.cta-lede{ max-width:52ch; margin:0 auto 28px; font-size:1.02rem; text-wrap:balance; }
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-ghost{ background:transparent; color:var(--paper); border-color:color-mix(in srgb, var(--paper) 46%, transparent); }
.cta-band .btn-ghost:hover{ background:color-mix(in srgb, var(--paper) 14%, transparent); border-color:var(--paper); color:var(--paper); }
.cta-band .btn-primary{
  background-color:var(--paper); color:var(--accent-ink);
  background-image:none;
  box-shadow:0 10px 26px -10px color-mix(in srgb, var(--ink) 42%, transparent);
}
.cta-band .btn-primary:hover{ background-color:var(--paper-2); color:var(--accent-ink); }
.cta-band .btn:focus-visible{ outline-color:var(--paper); }

/* ---------- footer ---------- */
.ftr{ border-top:1px solid var(--line); padding-block:54px 28px; background:var(--paper-2); position:relative; }
.ftr-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; margin-bottom:38px; }
.ftr-logo{ margin-bottom:14px; }
.ftr .ftr-logo, .ftr .ftr-logo:hover{ font-size:1.28rem; color:var(--ink); padding-left:0; }
.ftr-blurb{ font-size:.88rem; max-width:34ch; line-height:1.6; }
.ftr h4, .ftr .ftr-h{
  font-size:.73rem; text-transform:uppercase; letter-spacing:.11em; line-height:1.4;
  color:var(--ink-3); margin-bottom:14px; font-family:var(--ff); font-weight:800;
}
/* footer social icons: rendered only when config.js has a link */
.ftr-social{ display:flex; gap:10px; margin-top:16px; }
.ftr-social[hidden], .ftr-social a[hidden], .ftr .ftr-social a[hidden]{ display:none; }
.auth-social{ justify-content:center; margin-top:18px; }
.ftr-social a, .ftr .ftr-social a{
  width:40px; height:40px; border-radius:50%; padding:0;
  display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line-2); color:var(--ink);
  transition:color .2s, border-color .2s, transform .2s var(--ease);
}
.ftr-social a:hover, .ftr .ftr-social a:hover{ padding:0; transform:translateY(-2px); border-color:currentColor; }
.ftr-social a[data-social-link="facebook"]:hover, .ftr .ftr-social a[data-social-link="facebook"]:hover{ color:#1877f2; }   /* Facebook's own blue */
.ftr-social a[data-social-link="instagram"]:hover, .ftr .ftr-social a[data-social-link="instagram"]:hover{ color:#e4405f; }  /* Instagram's own pink */
.ftr-social svg{ width:18px; height:18px; }
/* the short footer on the inner pages: logo, one line, socials */
.ftr-slim{ padding-block:34px 24px; }
.ftr-slim-top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; margin-bottom:22px; }
.ftr-slim .ftr-logo{ margin:0; }
.ftr-slim .ftr-blurb{ margin:0; max-width:none; }
.ftr-slim .ftr-social{ margin:0 0 0 auto; }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.ftr a{ color:var(--ink-2); font-size:.89rem; transition:color .2s, padding-left .25s var(--ease); }
.ftr a:hover{ color:var(--accent); padding-left:4px; }
.ftr-bot{
  border-top:1px solid var(--line); padding-top:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-3);
}

/* ---------- app shell ---------- */
.app{ display:grid; grid-template-columns:244px 1fr; min-height:100vh; }
.side{
  background:var(--paper-2); border-right:1px solid var(--line);
  padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
}
.side .logo{ padding:6px 8px 20px; }
.side-label{
  font-size:.67rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); font-weight:800; padding:14px 12px 7px;
}
.side a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:.9rem; font-weight:600; transition:all .2s var(--ease);
}
.side a:hover{ background:var(--accent-soft); color:var(--accent); }
.side a.on{ background:var(--accent); color:#fff; }
.side a svg{ width:17px; height:17px; flex:none; }
.side-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }

.main{ padding:26px clamp(18px,3vw,36px) 56px; min-width:0; background:var(--paper); }
.topbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.topbar h1{ font-size:clamp(1.4rem,2.2vw,2rem); margin:0; }
.topbar .spacer{ margin-left:auto; }

.avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(145deg, var(--accent), var(--accent-2)); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none;
}

.panel{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px;
}
.panel-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.panel-head h3{ margin:0; font-size:1.04rem; }
.panel-head .spacer{ margin-left:auto; }

/* ---------- chart ---------- */
.chart{ width:100%; height:auto; overflow:visible; }
.chart .gl{ stroke:var(--line); stroke-width:1; }
.chart .ax{ fill:var(--ink-3); font-size:11px; font-family:var(--ff); font-weight:600; }
.legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:.83rem; color:var(--ink-2); font-weight:600; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; }

/* ---------- auth ---------- */
.auth{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-aside{
  padding:clamp(34px,5vw,60px); display:flex; flex-direction:column; justify-content:center;
  background:var(--paper-2); border-right:1px solid var(--line);
}
.auth-form-wrap{ padding:clamp(28px,5vw,60px); display:flex; flex-direction:column; justify-content:center; }
.auth-form{ width:100%; max-width:398px; margin-inline:auto; }
.auth-tabs{
  display:flex; gap:4px; padding:4px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:999px; margin-bottom:26px;
}
.auth-tabs button{
  flex:1; padding:10px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink-2); font-weight:700; font-size:.89rem;
  transition:all .25s var(--ease);
}
.auth-tabs button.on{ background:var(--accent); color:#fff; }

/* ---------- misc ---------- */
.note{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  padding:13px 16px; border-radius:var(--r-sm); font-size:.86rem; color:var(--ink-2);
}
.note svg{ width:17px; height:17px; color:var(--warn); flex:none; margin-top:2px; }
.note.info{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 22%, transparent); }
.note.info svg{ color:var(--accent); }
.note strong{ color:var(--ink); }

.hide{ display:none !important; }
.spin{
  width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:sp .7s linear infinite; display:inline-block;
}
@keyframes sp{ to{ transform:rotate(360deg); } }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 180%);
  background:var(--ink); color:#fff;
  padding:14px 24px; border-radius:999px; z-index:200;
  box-shadow:var(--shadow-lg); font-size:.89rem; font-weight:600;
  transition:transform .45s var(--ease); max-width:90vw;
}
.toast.show{ transform:translate(-50%, 0); }

.fab-wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:54px; height:54px; border-radius:50%; background:#1fa855;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 12px 28px -10px rgba(31,168,85,.8);
  transition:transform .3s var(--ease);
}
.fab-wa:hover{ transform:scale(1.1) rotate(6deg); }
.fab-wa svg{ width:26px; height:26px; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pain-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:42px; }
  .collage{ max-width:540px; margin-inline:auto; }
  .how-grid{ grid-template-columns:1fr; gap:38px; }
  .faq-grid{ grid-template-columns:1fr; gap:30px; }
  .faq-aside{ position:static; }
  .faq-aside p{ max-width:52ch; }
  .price-top{ grid-template-columns:1fr; align-items:start; gap:22px; }
  .price-head{ align-items:flex-start; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  /* the four facts fold to 2x2: outer gutters off, inner rules on */
  .stat-strip .stat{ padding-inline:0; }
  .stat-strip .stat:nth-child(2n+1){ padding-right:clamp(16px,2vw,26px); }
  .stat-strip .stat:nth-child(2n){ padding-left:clamp(16px,2vw,26px); border-right:0; }
  .stat-strip .stat:nth-child(-n+2){
    padding-bottom:18px;
    border-bottom:1px solid color-mix(in srgb, var(--line-2) 70%, transparent);
  }
  .stat-strip .stat:nth-child(n+3){ padding-top:18px; }
  .promise-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .promise, .promise:nth-child(3n), .promise:nth-last-child(-n+3){
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .promise:nth-child(2n){ border-right:0; }
  .promise:nth-last-child(-n+2){ border-bottom:0; }
  .ftr-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .auth{ grid-template-columns:1fr; }
  .auth-aside{ display:none; }
  .app{ grid-template-columns:1fr; }
  .side{
    position:fixed; left:0; top:0; width:250px; z-index:100;
    transform:translateX(-100%); transition:transform .3s var(--ease);
  }
  .side.open{ transform:none; box-shadow:var(--shadow-lg); }
}
/* the nav + CTA row runs out of room before the layout does, so it
   collapses to the burger while the links still fit on one line each.
   WhatsApp stays in the bar as an icon button. */
@media (max-width:1060px){
  .nav, .hdr-cta{ display:none; }
  .hdr-wa-m{ display:grid; margin-left:auto; }
  .burger{ display:flex; margin-left:0; }
  .hdr.nav-open .nav{
    display:flex; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; padding:12px 12px 6px;
    background:var(--paper); box-shadow:0 18px 22px -18px color-mix(in srgb, var(--ink) 30%, transparent);
  }
  .hdr.nav-open .hdr-cta{
    display:flex; position:absolute; top:calc(72px + 191px); left:0; right:0;
    padding:6px 12px 16px; background:var(--paper); flex-direction:column; align-items:stretch;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .hdr.nav-open .hdr-cta > *{ justify-content:center; }
}

@media (max-width:820px){
  /* single-column hero: the copy now runs the full width, so the rank
     line is pushed into the lower half of the section and dropped to a
     whisper. It stays behind the example card and the buttons, never
     the headline. */
  .rank-line{
    opacity:.42;
    -webkit-mask-image:linear-gradient(180deg, transparent 18%, color-mix(in srgb,#000 50%,transparent) 40%, color-mix(in srgb,#000 80%,transparent) 66%, transparent 92%);
    mask-image:linear-gradient(180deg, transparent 18%, color-mix(in srgb,#000 50%,transparent) 40%, color-mix(in srgb,#000 80%,transparent) 66%, transparent 92%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .plan{ border-right:0; border-bottom:1px solid var(--line); }
  .plan:last-child{ border-bottom:0; }
  .plan-for{ min-height:0; }
  .field-row{ grid-template-columns:1fr; }
  .collage::before{ transform:translate(10px,10px); }
  /* the rail stacks: track choice first, currency under it */
  .price-rail{ flex-direction:column; align-items:stretch; }
  .price-rail .cur-toggle{ margin-left:0; display:flex; }
  .price-rail .cur-toggle button{ flex:1 1 0; }
  .track-toggle{ flex:1 1 auto; }
  /* each service row stacks: photo on top as a short banner */
  .svc, .svc-flip{ grid-template-columns:1fr; }
  .svc-flip .svc-media{ order:0; }
  .svc-media{ min-height:0; aspect-ratio:16/9; }
  .svc-report{ grid-template-columns:auto minmax(0,1fr); }
  .svc-report .btn{ grid-column:1/-1; justify-self:start; }
  .how-note{ width:100%; margin:16px 0 0; }
}
@media (max-width:620px){
  .pain-grid{ grid-template-columns:1fr; gap:12px; }
  .promise-grid{ grid-template-columns:1fr; }
  .promise-grid .promise:nth-child(n){ border-right:0; border-bottom:1px solid var(--line); }
  .promise-grid .promise:last-child{ border-bottom:0; }
}
@media (max-width:520px){
  :root{ --gut:18px; }
  .hero .eyebrow{ font-size:.66rem; letter-spacing:.14em; gap:8px; }
  .hero .eyebrow::before{ width:16px; }
  .grid-4{ grid-template-columns:1fr; }
  .ftr-grid{ grid-template-columns:1fr; }
  .btn{ padding:14px 22px; }
  .hero-actions{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .hero-actions .btn{ width:100%; padding-inline:14px; }
  .hero-actions .btn-primary svg{ display:none; }
  .hero-checks{ gap:8px 16px; }
  .hero-checks li{ font-size:.82rem; }
  .hero-grid{ gap:30px; }
  /* the hero example at phone width: the three readouts go two-up with
     the third under them */
  .scope-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
  .scope-kpis > div:last-child{ grid-column:1/-1; }
  /* the three tracks stack, each one a row: name left, price right */
  .track-toggle{ flex-direction:column; }
  .track-toggle button{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .cur-toggle button{ padding:10px 10px; font-size:.8rem; text-align:center; }
  .stat-strip .stat{
    padding:14px 0; border-right:0;
    border-bottom:1px solid color-mix(in srgb, var(--line-2) 70%, transparent);
  }
  .stat-strip .stat:first-child{ padding-top:0; }
  .stat-strip .stat:last-child{ border-bottom:0; padding-bottom:0; }
  .grid-4.stat-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-strip .stat:nth-child(2n+1){ padding-right:12px; border-right:1px solid color-mix(in srgb, var(--line-2) 70%, transparent); }
  .stat-strip .stat:nth-child(2n){ padding-left:12px; }
  .stat-strip .stat:nth-child(-n+2){ padding-top:0; }
  .stat-strip .stat:nth-child(n+3){ border-bottom:0; padding-bottom:0; }
  .stat-strip .stat-num{ font-size:1.6rem; }
  .svc-body h3{ font-size:1.4rem; }
  .svc-result{ font-size:.8rem; left:12px; bottom:12px; }
  .pain-q{ font-size:1.04rem; }
}

/* pricing: pin the buttons to a common baseline across plans */
.plan{ display:flex; flex-direction:column; }
.plan ul{ flex:1 1 auto; }

/* footer contact: WhatsApp mark sitting with the number */
.ftr-wa{ display:inline-flex; align-items:center; gap:8px; }
.ftr-wa svg{
  width:16px; height:16px; flex:none;
  color:#1fa855;                 /* WhatsApp's own green — a brand mark, not a palette colour */
  transition:transform .2s var(--ease);
}
.ftr-wa:hover svg{ transform:scale(1.12); }

/* A grid column holding a table must be allowed to shrink. `1fr` keeps a
   min-content floor, and the table carries min-width:540px, so without
   this the column never drops below 540px and the page scrolls sideways
   on a phone. The table still scrolls inside its own .tbl-wrap. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .panel, .plans > *{ min-width:0; }

/* =========================================================
   HERO: one centred column (the split layout and its example
   panel are gone). Depth comes from soft light, the faint
   rank line across the full width, and four drifting chips.
   ========================================================= */
.hero{ text-align:center; isolation:isolate; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(48% 62% at 50% 38%, color-mix(in srgb, var(--paper) 92%, transparent) 0%, transparent 70%),
    radial-gradient(34% 46% at 12% 22%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 72%),
    radial-gradient(30% 42% at 88% 30%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 72%),
    radial-gradient(40% 40% at 50% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 75%);
}
.hero-center{ position:relative; max-width:860px; margin-inline:auto; }
.hero-center .eyebrow{ justify-content:center; }
.hero-center h1{ font-size:clamp(2.2rem, 4.6vw, 3.5rem); line-height:1.07; margin-inline:auto; max-width:22ch; }
.hero-center .hero-sub{ margin-inline:auto; max-width:58ch; }
.hero-center .hero-actions,
.hero-center .hero-checks{ justify-content:center; }

/* rank line spans the whole hero; strongest at the edges, faint behind the text */
.hero .rank-line{
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%),
    linear-gradient(90deg, #000 0%, color-mix(in srgb,#000 30%,transparent) 30%,
      color-mix(in srgb,#000 12%,transparent) 50%, color-mix(in srgb,#000 30%,transparent) 70%, #000 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%),
    linear-gradient(90deg, #000 0%, color-mix(in srgb,#000 30%,transparent) 30%,
      color-mix(in srgb,#000 12%,transparent) 50%, color-mix(in srgb,#000 30%,transparent) 70%, #000 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* drifting chips at the sides */
.hero-floats{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hf{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px; white-space:nowrap;
  font-size:.8rem; font-weight:600; color:var(--ink-2);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; animation:hfIn .9s var(--ease) forwards, hfFloat 9s ease-in-out infinite;
}
.hf-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.hf-1{ left:4%;  top:24%; animation-delay:.5s, 1.4s; }
.hf-2{ right:4%; top:18%; animation-delay:.7s, 0s; }
.hf-3{ left:7%;  bottom:20%; animation-delay:.9s, 2.6s; }
.hf-4{ right:6%; bottom:26%; animation-delay:1.1s, 1s; }
.hf-2 .hf-dot{ background:#1fa855; box-shadow:0 0 0 4px color-mix(in srgb, #1fa855 18%, transparent); }
.hf-3 .hf-dot, .hf-4 .hf-dot{ background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
@keyframes hfIn{ to{ opacity:1; } }
@keyframes hfFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* chips need room beside an 860px column; hide them where it is tight */
@media (max-width:1240px){ .hf-1,.hf-3{ left:1.5%; } .hf-2,.hf-4{ right:1.5%; } }
@media (max-width:1100px){ .hero-floats{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hf{ animation:none; opacity:1; } }

/* Pricing: buy now is the main action, the free trial a quiet link under it */
.plan-trial{display:block;text-align:center;margin-top:10px;font-size:.88rem;font-weight:600;color:var(--green,#1f6b45)}
.plan-trial:hover{text-decoration:underline}

/* Hero headline: lighter, like the Instagram posts. The channels keep
   a touch more weight so they still lead the eye. */
.hero h1{ font-weight:400; letter-spacing:-.03em; }
.hero h1 .hl{ font-weight:500; }

/* Hero rank line, stronger: visible right across the hero (only
   softened behind the headline, never hidden), a thicker stroke, and an
   arrow on the end of the climb. Sits through the middle of the hero. */
.hero .rank-line{
  opacity:.95;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%),
    linear-gradient(90deg, #000 0%, color-mix(in srgb,#000 70%,transparent) 30%,
      color-mix(in srgb,#000 50%,transparent) 50%, color-mix(in srgb,#000 70%,transparent) 70%, #000 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%),
    linear-gradient(90deg, #000 0%, color-mix(in srgb,#000 70%,transparent) 30%,
      color-mix(in srgb,#000 50%,transparent) 50%, color-mix(in srgb,#000 70%,transparent) 70%, #000 100%);
}
.hero .rank-path{
  stroke:color-mix(in srgb, var(--ink) 30%, transparent);
  stroke-width:2.2;
}
.hero .rank-area{ fill:color-mix(in srgb, var(--ink) 3%, transparent); }
.hero .rank-tip{
  top:33.33%; width:34px; height:34px; margin:-17px 0 0 -17px;
  background:none; box-shadow:none; border-radius:0;
}
.hero .rank-tip svg{
  width:100%; height:100%; display:block; transform:rotate(var(--tip-rot,-24deg));
  fill:none; stroke:color-mix(in srgb, var(--ink) 50%, transparent);
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ink) 12%, transparent));
}