/* ==========================================================
   DannyBuiltIt.com
   Vanilla CSS. No framework, no build step.
   Self-hosted variable fonts, same pair as danieljruiz.com.
   Sora for headlines, Inter for everything else.

   1. Fonts
   2. Tokens
   3. Base
   4. Header
   5. Hero, the 3x3 grid
   6. Everything below the hero  (provisional, being rebuilt)
   ========================================================== */


/* -- 1. Fonts ------------------------------------------------ */
@font-face{
  font-family:'Sora';
  src:url('../fonts/sora-latin.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:optional;
}
@font-face{
  font-family:'Clash';
  src:url('../fonts/clash-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Clash';
  src:url('../fonts/clash-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'InterVar';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:optional;
}


/* -- 2. Tokens ----------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --paper-2:#F4F4F2;
  --ink:#14161A;
  --ink-2:#52585F;
  --ink-3:#8A9098;
  --line:#E4E4E0;

  --accent:#3642EF;
  --accent-deep:#212CC4;
  --accent-light:#9BA2FF;      /* the accent, on dark */
  --orange:#E2571C;

  /* the dark hero */
  --night:#0A0B0F;
  --night-2:#12141B;
  --on-night:#F7F7FA;
  --on-night-2:rgba(247,247,250,.62);
  --sand:#F4C79B;              /* the warm half of the headline */
  --blk-a:#E2571C; --blk-b:#12855A; --blk-c:#1B6BE0; --blk-d:#E9A23B; --blk-e:#4E4BF0;

  --display:'Sora','InterVar',-apple-system,BlinkMacSystemFont,sans-serif;
  --huge:'Clash','Sora','InterVar',-apple-system,sans-serif;
  --text:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1240px;
  --wrap-wide:1560px;
  --pad:clamp(18px,3.4vw,34px);

  --s1:.5rem; --s2:1rem; --s3:1.75rem; --s4:2.75rem;
  --s5:4.5rem; --s6:7rem; --s7:10rem;

  --r:10px;          /* photo tiles and the centre panel */
  --r-btn:10px;
  --r-card:18px;

  --tile-gap:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:900px){ :root{ --tile-gap:10px; } }


/* -- 3. Base ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,.brand,.amt{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.038em;
  line-height:1.05;
}
h1{font-size:clamp(32px,3.1vw,46px);text-wrap:balance}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:clamp(20px,1.6vw,23px);letter-spacing:-.028em;line-height:1.2}
h4{font-family:var(--text);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink)}
p{color:var(--ink-2)}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.65}
.eyebrow{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:9px 16px 9px 17px;border-radius:999px;
  background:var(--accent);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;line-height:1;
}
.hl{color:var(--accent)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap--wide{width:100%;max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--pad)}
.sec{padding-top:var(--s6);padding-bottom:var(--s6)}
/* .sec used to be `padding:var(--s6) 0`, which wiped the horizontal padding off
   any element that is both .wrap and .sec, so those sections went edge to edge
   on phones. Longhand keeps .wrap's side padding. */
/* the FAQ and the contact panel sit closer than the rest */
#faq.sec{padding-bottom:clamp(52px,5.5vw,80px)}
#contact.sec{padding-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(26px,3vw,42px)}
.sec--line{border-top:1px solid var(--line)}
.head{display:flex;flex-direction:column;gap:var(--s2);max-width:52ch;margin-bottom:var(--s4)}
.head h2{text-wrap:balance}
.head--faq{max-width:none}
.head--faq h2{max-width:23ch}

/* -- buttons, same spec as danieljruiz.com -- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1.0625rem 1.9rem;
  border-radius:12px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--text);font-size:1rem;font-weight:600;letter-spacing:-.01em;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(54,66,239,.24),0 10px 24px rgba(54,66,239,.24);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,
             transform .12s ease,box-shadow .15s ease;
}
.btn:hover{
  background:var(--accent-deep);
  box-shadow:0 1px 2px rgba(33,44,196,.28),0 12px 30px rgba(33,44,196,.3);
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:.625rem 1.15rem;font-size:.9375rem;border-radius:10px;box-shadow:none}
.btn--quiet{
  background:transparent;color:#fff;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.42) inset;
}
.btn--quiet:hover{background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px #fff inset;transform:translateY(-2px)}

.tiers-cta{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(30px,3.4vw,44px);text-align:center;
}
.tiers-cta .btn{padding:17px 30px;font-size:16.5px}
.tiers-note{font-size:15px;color:var(--ink-3);margin:0;max-width:46ch;line-height:1.55}
.btn--ghost{
  background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:none;
}
.btn--ghost:hover{background:var(--paper-2);border-color:var(--ink);box-shadow:none}

:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:3px}


/* -- 4. Header ------------------------------------------------ */
/* Bare at the top of the page, where there is nothing to separate it
   from. The background and the hairline fade in once you scroll. */
/* ---- top band: three facts, ink, centred ---- */
.topband{
  background:var(--accent);
  color:#fff;
  padding:9px var(--pad);
}
.topband-facts{
  margin:0;
  color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 14px;
  font-family:var(--text);
  font-size:13px;font-weight:500;letter-spacing:.005em;line-height:1.35;
  text-align:center;
}
.topband-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.6);
  flex:0 0 auto;
}
@media (max-width:560px){
  .topband{padding:8px var(--pad)}
  .topband-facts{font-size:12px;gap:5px 10px}
}

.site-head{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),
             backdrop-filter .25s var(--ease),box-shadow .25s var(--ease);
}
.site-head.is-stuck{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -22px rgba(10,12,18,.5);
}
.site-head .wrap--wide{max-width:1320px}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.035em;
  text-decoration:none;color:var(--ink);
}
.brand .bdot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);vertical-align:.22em;margin:0 5px;
}
.nav-right{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav-right a{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-2);transition:color .16s var(--ease)}
.nav-right a:hover{color:var(--ink)}
.nav-right .btn{color:#fff}
.nav-right .btn--ghost{color:var(--ink)}
/* once the hero CTA is gone, the nav button becomes the only one -- go loud */
.site-head.cta-armed .nav-right .btn--ghost{
  background:var(--accent);color:#fff;border-color:transparent;
}
.site-head.cta-armed .nav-right .btn--ghost:hover{
  background:var(--accent-deep);color:#fff;border-color:transparent;
}
.nav-link{display:none}
@media (min-width:760px){ .nav-link{display:inline} }


/* -- 5. Hero --------------------------------------------------
   White. One very large line: "A real website for" and then a
   word that flips on its own. It opens on business owners, so
   nobody reads it as one trade only, then walks the trades.
   A slow reel of photographs runs along the bottom.
   ------------------------------------------------------------ */
.hero{position:relative;background:var(--paper);overflow:hidden;--i:0}

.hero-sticky{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(18px,2.4vw,28px);
  padding:clamp(58px,9vh,112px) 0 clamp(46px,7vh,84px);
  min-height:clamp(520px,78svh,860px);
}
.hero-copy{
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,1.8vw,24px);
  padding:0 var(--pad);width:100%;
}

.hero h1{
  font-family:var(--huge);font-weight:600;
  font-size:clamp(38px,7.4vw,104px);
  line-height:.98;letter-spacing:-.035em;
  text-align:center;color:var(--ink);
}
.hero h1 .fixed{display:block}

/* the word that flips */
.slot{display:block;height:1.04em;overflow:hidden;position:relative}
.slot ul{
  margin:0;padding:0;list-style:none;
  transform:translateY(calc(var(--i) * -1.04em));
  transition:transform .62s cubic-bezier(.66,0,.2,1);
}
.slot li{height:1.04em;line-height:1.04;color:var(--accent);white-space:nowrap}

.hero .lead{
  text-align:center;color:var(--ink-2);
  font-size:clamp(16.5px,1.35vw,19px);max-width:56ch;
}


/* The work carousel. One design in the middle at full size and in
   focus, the previous and next tucked behind it either side, smaller
   and blurred. It wraps, so there is always one on each side.
   Nothing is cut. Controls sit underneath.
   Real pages in /demos/, examples, never clients. */
.hero-work{
  position:relative;width:100%;margin-top:clamp(22px,3.8vh,50px);
  --cw:min(58vw,880px);
  --shot:.6429;                       /* 900 / 1400, the shot's aspect */
}

.reel{
  --off:calc(var(--cw) * .6);         /* how far the side ones sit out */
  position:relative;width:100%;overflow:hidden;
  height:calc(var(--cw) * var(--shot) + 10px);
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.reel.is-dragging{cursor:grabbing}
.reel.is-dragging .slide{transition:none}

.slide{
  position:absolute;top:50%;left:50%;margin:0;
  width:var(--cw);
  border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid rgba(20,22,26,.12);
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),
             opacity .6s cubic-bezier(.22,.61,.36,1),
             filter .6s cubic-bezier(.22,.61,.36,1),
             box-shadow .6s cubic-bezier(.22,.61,.36,1);
}
.slide img{width:100%;display:block;pointer-events:none}

/* controls */
.car{
  display:flex;justify-content:center;align-items:center;
  margin-top:clamp(18px,2.6vh,30px);
}
.arw{
  position:absolute;z-index:5;
  top:calc((var(--cw) * var(--shot) + 10px) / 2);
  transform:translate(-50%,-50%);
  width:48px;height:48px;padding:0;border:0;border-radius:999px;
  background:var(--ink);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 6px 18px -6px rgba(10,12,18,.45),0 2px 6px rgba(10,12,18,.12);
  transition:background .22s var(--ease),color .22s var(--ease),
             box-shadow .22s var(--ease),transform .22s var(--ease);
}
.arw.prev{left:calc(50% - var(--cw) / 2 - 40px)}
.arw.next{left:calc(50% + var(--cw) / 2 + 40px)}

.arw:hover{
  background:var(--accent);color:#fff;
  box-shadow:0 10px 26px -8px rgba(54,66,239,.68),0 2px 6px rgba(10,12,18,.14);
  transform:translate(-50%,-50%) scale(1.08);
}
.arw:active{transform:translate(-50%,-50%) scale(.94)}
.arw svg{display:block}

.dots{display:flex;gap:10px;align-items:center}
.dot{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;
  background:rgba(20,22,26,.18);cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.dot:hover{background:rgba(20,22,26,.4);transform:scale(1.2)}
.dot.on{
  background:var(--accent);transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(54,66,239,.16);
}
.dot.on:hover{background:var(--accent);transform:scale(1.25)}

@media (max-width:759px){
  .hero-work{--cw:84vw}
  .reel{--off:calc(var(--cw) * .52)}
  .arw{width:42px;height:42px}
  .arw.prev{left:calc(50% - var(--cw) / 2 - 22px)}
  .arw.next{left:calc(50% + var(--cw) / 2 + 22px)}
}

@media (prefers-reduced-motion:reduce){
  .slot ul{transition:none}
  .reel-track,.slide,.dot,.arw{transition:none}
}


/* -- 6. Everything below the hero ----------------------------
   Provisional. Carried over on the new tokens so the page
   still reads. Being rebuilt next.
   ------------------------------------------------------------ */
/* ---- pricing and what is included, one section ---- */
.head--wide{max-width:none;gap:10px;margin-bottom:clamp(28px,3.4vw,44px)}
.head-sub{max-width:62ch}
.terms{font-family:var(--display);font-weight:700;letter-spacing:-.028em;font-size:clamp(18px,1.6vw,22px);color:var(--ink)}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px)}
.tier{
  position:relative;background:var(--paper);border-radius:var(--r-card);
  padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--line);
  box-shadow:0 20px 44px -34px rgba(10,12,18,.42);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(10,12,18,.5)}
.tier--pick{
  background:linear-gradient(178deg,#EFECFF 0%,#FFFFFF 58%);
  border-color:rgba(54,66,239,.4);
  box-shadow:0 30px 60px -30px rgba(54,66,239,.6),0 0 0 1px rgba(54,66,239,.16);
}
@media (min-width:900px){ .tier--pick{transform:translateY(-10px)} .tier--pick:hover{transform:translateY(-14px)} }
/* out of the flow, so all three prices sit on one line */
.tag{
  position:absolute;top:16px;right:16px;
  background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:7px;
}
.tag--light{background:var(--accent-light);color:#14161A}
.tag--soft{background:var(--ink);color:#fff}
.tier .pages{font-size:15px;font-weight:600;color:var(--ink-3);min-height:24px}
.tier .amt{font-size:clamp(46px,4.6vw,60px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.tier--pick .amt{color:var(--accent)}
.tier p{font-size:16px;line-height:1.55}
.after{margin-top:clamp(18px,2vw,26px);font-size:16.5px;max-width:76ch}
.after b{color:var(--ink);font-weight:600}

/* the whole block sits in one band, so the heading is inside something */
.inc-band{
  margin-top:clamp(48px,6vw,84px);
  background:#FAFAF8;
  border:1px solid rgba(20,22,26,.07);
  border-radius:clamp(18px,2vw,28px);
  padding:clamp(26px,3.4vw,52px);
}
.inc-head{
  margin:0 0 clamp(24px,2.8vw,36px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
}
.inc-head h3{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.04em;max-width:20ch}
.inc-head p{font-size:17.5px;line-height:1.55;max-width:60ch}

.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,22px)}
.inc{gap:clamp(14px,1.6vw,20px)}
.inc-col{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border-radius:clamp(14px,1.4vw,18px);
  padding:clamp(22px,2.2vw,28px);
  box-shadow:0 18px 40px -28px rgba(10,12,18,.45);
}
.inc--a{background:#F0EDFE}
.inc--b{background:#E6F6F0}
.inc--c{background:#FDF0E4}
.inc-top{display:flex;align-items:center;gap:12px}
.inc-top{
  display:flex;align-items:center;gap:13px;
  padding-bottom:16px;margin-bottom:2px;
  border-bottom:1px solid rgba(20,22,26,.1);
}
.inc--a .inc-top{color:var(--accent)}
.inc--b .inc-top{color:#0F8F6C}
.inc--c .inc-top{color:#C0651B}
.ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  color:#fff;flex:none;box-shadow:0 8px 18px -10px rgba(10,12,18,.55);
}
.inc--a .ico{background:var(--accent)}
.inc--b .ico{background:#0F8F6C}
.inc--c .ico{background:#C0651B}
.inc-col h4{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.035em;color:var(--ink)}
.aside{margin-top:6px;font-size:15px;color:var(--ink-3)}

ul.ticks{display:flex;flex-direction:column;gap:9px}
ul.ticks{gap:11px}
ul.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.tick-c{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:999px;
  background:currentColor;color:var(--accent);
  box-shadow:0 6px 12px -7px rgba(10,12,18,.5);
}
.tick{display:block;color:#fff}
.inc--a .tick-c{color:var(--accent)}
.inc--b .tick-c{color:#0F8F6C}
.inc--c .tick-c{color:#C0651B}

.aside{margin-top:4px;font-size:15px;color:var(--ink-3)}

/* ---- the optional monthly, full width ---- */
.seo{
  display:grid;grid-template-columns:minmax(0,1fr);
  margin-top:clamp(20px,2.6vw,34px);
  background:var(--ink);color:#fff;
  border-radius:clamp(18px,2vw,28px);overflow:hidden;
}
@media (min-width:900px){ .seo{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)} }

.seo-copy{
  padding:clamp(28px,3vw,48px);
  display:flex;flex-direction:column;justify-content:center;gap:13px;
}
.seo-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-light);line-height:1;margin-bottom:6px;
}
.seo h3{font-size:clamp(25px,2.6vw,35px);letter-spacing:-.04em;color:#fff;max-width:20ch}
.seo p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.6;max-width:54ch}
.seo-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.seo-price{flex-wrap:wrap;gap:4px 10px}
.seo-price .amt{
  font-family:var(--display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(31px,3.2vw,44px);line-height:1;
}
.seo-price .per{font-size:18px;color:rgba(255,255,255,.5)}
.seo .btn{margin-top:8px;align-self:flex-start}


.seo-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:rgba(255,255,255,.1);aspect-ratio:1/1}
.sq{
  position:relative;margin:0;overflow:hidden;min-height:0;
}
.sq img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.06)}
.sq::after{
  content:"";position:absolute;inset:auto 0 0 0;height:66%;
  background:linear-gradient(to top,rgba(8,9,12,.94) 0%,rgba(8,9,12,.74) 24%,rgba(8,9,12,.34) 58%,rgba(8,9,12,0) 100%);
}
.sq figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(15px,1.6vw,22px);
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(16px,1.3vw,19px);line-height:1.2;color:#fff;text-wrap:balance;
}

/* ---- how it works: a line that draws itself as you scroll ---- */
.hw{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
@media (min-width:960px){ .hw{grid-template-columns:minmax(0,1fr) 420px;gap:var(--s4);align-items:start} }

.hw-cta{align-self:start}
@media (min-width:960px){ .hw-cta{position:sticky;top:104px;margin-top:var(--s4)} }

.hw-cta-in{
  position:relative;overflow:hidden;
  border-radius:clamp(16px,1.6vw,22px);
  padding:clamp(32px,3.6vw,46px);
  background:linear-gradient(158deg,#5B47FF 0%,var(--accent) 42%,#2E1FBE 100%);
  color:#fff;
  box-shadow:0 30px 60px -26px rgba(54,66,239,.8);
  opacity:0;transform:translateY(30px) scale(.965);
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1);
}
.hw-cta-in.in{opacity:1;transform:none}
.hw-cta-in::after{                       /* same dot texture as the who panel */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(78% 62% at 78% 8%,#000 10%,transparent 76%);
          mask-image:radial-gradient(78% 62% at 78% 8%,#000 10%,transparent 76%);
}
.hw-cta-in>*{position:relative;z-index:1}

.hw-cta-k{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 20px;
}
.hw-seven{display:flex;align-items:flex-start;gap:12px}
.hw-num{
  font-family:var(--display);font-weight:700;letter-spacing:-.06em;
  font-size:clamp(92px,7.6vw,116px);line-height:.8;color:#fff;font-variant-numeric:tabular-nums;
}
.hw-unit{
  display:flex;flex-direction:column;padding-top:7px;
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:30px;line-height:1;color:#fff;
}
.hw-unit i{
  font-style:normal;font-family:var(--text);font-weight:400;letter-spacing:0;
  font-size:13px;color:rgba(255,255,255,.68);margin-top:5px;line-height:1.3;
}

.hw-week{list-style:none;display:flex;gap:7px;margin:30px 0 0;padding:0}
.hw-week li{
  flex:1 1 0;height:6px;border-radius:999px;background:rgba(255,255,255,.28);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
}
.hw-cta-in.in .hw-week li{transform:scaleX(1)}
.hw-cta-in.in .hw-week li:nth-child(1){transition-delay:.46s}
.hw-cta-in.in .hw-week li:nth-child(2){transition-delay:.59s}
.hw-cta-in.in .hw-week li:nth-child(3){transition-delay:.72s}
.hw-cta-in.in .hw-week li:nth-child(4){transition-delay:.85s}
.hw-cta-in.in .hw-week li:nth-child(5){transition-delay:.98s}
.hw-cta-in.in .hw-week li:nth-child(6){transition-delay:1.11s}
.hw-cta-in.in .hw-week li:nth-child(7){transition-delay:1.24s}
.hw-week li.last{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.75)}

.hw-cta-h{
  font-family:var(--display);font-weight:700;letter-spacing:-.038em;
  font-size:25px;line-height:1.15;color:#fff;
  margin:32px 0 0;padding-top:30px;border-top:1px solid rgba(255,255,255,.24);
}
.hw-cta-p{
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);
  margin:12px 0 0;
}
.btn--on-accent{
  background:#fff;color:var(--accent);margin-top:28px;align-self:flex-start;padding:17px 26px;font-size:16px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.5);
}
.btn--on-accent:hover{background:#fff;color:var(--accent-deep);transform:translateY(-2px)}
.hw-cta .btn{display:inline-flex;width:100%;justify-content:center}

.flow{
  list-style:none;position:relative;margin:var(--s4) 0 0;padding:0;
}
.flow-track,.flow-fill{position:absolute;left:19px;width:2px;border-radius:2px}
.flow-track{top:22px;height:0;background:var(--line)}
.flow-fill{
  top:22px;height:0;background:var(--accent);
  transition:height .5s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 0 12px rgba(54,66,239,.5);
}

.fstep{
  position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);
  gap:0 22px;padding-bottom:var(--s4);
}
.fstep:last-child{padding-bottom:0}

.fnum{
  position:relative;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;
  background:var(--paper);color:var(--ink-3);
  box-shadow:0 0 0 2px var(--line) inset;
  transition:background .4s var(--ease),color .4s var(--ease),
             box-shadow .4s var(--ease),transform .4s var(--ease);
}
.fstep.on .fnum{
  background:var(--accent);color:#fff;
  box-shadow:0 0 0 2px var(--accent) inset,0 0 0 6px rgba(54,66,239,.16),
             0 10px 24px -10px rgba(54,66,239,.9);
  transform:scale(1.06);
}

.fbody{padding-top:5px}
.fbody h3{
  font-size:clamp(19px,1.7vw,22px);letter-spacing:-.035em;margin:0 0 7px;
  color:var(--ink-3);transition:color .4s var(--ease);
}
.fstep.on .fbody h3{color:var(--ink)}
.fbody p{font-size:16px;line-height:1.6;margin:0;max-width:58ch;color:var(--ink-3);transition:color .4s var(--ease)}
.fstep.on .fbody p{color:var(--ink-2)}

@media (max-width:560px){
  .fstep{grid-template-columns:34px minmax(0,1fr);gap:0 16px}
  .fnum{width:34px;height:34px;font-size:14px}
  .flow-track,.flow-fill{left:16px}
}
@media (prefers-reduced-motion:reduce){
  .fnum,.fbody h3,.fbody p,.flow-fill,.hw-cta-in,.hw-week li{transition:none}
  .hw-cta-in{opacity:1;transform:none}
  .hw-week li{transform:scaleX(1)}
}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--s4);margin-top:var(--s5)}
.duo>div{display:flex;flex-direction:column;gap:12px;padding-top:var(--s2);border-top:1.5px solid var(--ink)}

.who{
  display:grid;grid-template-columns:minmax(0,1fr);
  background:var(--ink);color:#fff;
  border-radius:clamp(18px,2vw,28px);overflow:hidden;
}
@media (min-width:920px){ .who{grid-template-columns:minmax(0,424px) minmax(0,1fr)} }

.who-copy{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(28px,3.2vw,52px);
}
.who-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-light);line-height:1;margin-bottom:6px;
}
.who h2{color:#fff;max-width:18ch}
.who-copy p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.6;max-width:52ch}
.who-punch{color:#fff !important;font-weight:600}

/* ---- the visual side: phone on a lit backdrop ---- */
.who-visual{
  position:relative;display:grid;place-items:center;overflow:hidden;
  padding:clamp(32px,3.4vw,46px) clamp(26px,2.6vw,40px);
}
.who-visual::before{                       /* accent wash, angled */
  content:"";position:absolute;left:-12%;right:-12%;top:-8%;bottom:-8%;
  background:
    radial-gradient(52% 42% at 50% 46%,rgba(124,104,255,.85),transparent 72%),
    linear-gradient(158deg,#2A1CA8 0%,#3642EF 46%,#1a1350 100%);
  transform:rotate(-7deg);
}
.who-visual::after{                        /* fine dot grid for texture */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.17) 1px,transparent 1px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(72% 64% at 50% 44%,#000 36%,transparent 80%);
          mask-image:radial-gradient(72% 64% at 50% 44%,#000 36%,transparent 80%);
  pointer-events:none;
}

.phone{
  position:relative;z-index:2;width:min(100%,248px);
  aspect-ratio:9 / 18.6;
  padding:3px;border-radius:24px;
  background:linear-gradient(150deg,#f2f3f5 0%,#9aa0a8 26%,#e9ebee 52%,#7f858d 78%,#d6d9dd 100%);
  box-shadow:
    0 2px 3px rgba(255,255,255,.5) inset,
    0 50px 90px -34px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.35);
}
.phone-screen{
  position:relative;background:#fff;border-radius:21px;overflow:hidden;
  color:#14161A;height:100%;display:flex;flex-direction:column;
}
.status{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 15px 3px;flex:0 0 auto;color:#14161A;
}
.status-t{font-size:11px;font-weight:700;letter-spacing:-.02em}
.status-r{display:flex;align-items:center;gap:4.5px}
.status-r svg{display:block}

.post-top{display:flex;align-items:center;gap:8px;padding:7px 10px;flex:0 0 auto}
.post-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.post-who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.post-who b{font-size:11.5px;font-weight:700;letter-spacing:-.01em}
.post-who span{font-size:9.5px;color:#8A9098}
.post-dots{margin-left:auto;display:flex;gap:2.5px}
.post-dots i{width:3px;height:3px;border-radius:50%;background:#8A9098;display:block}
.post-img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover;object-position:50% 38%}
.post-acts{display:flex;gap:13px;padding:9px 11px 3px;flex:0 0 auto}
.post-acts svg{display:block}
.post-cap{margin:0;padding:2px 11px 9px;font-size:10.5px;line-height:1.42;color:#52585F;flex:0 0 auto}
.post-cap b{color:#14161A;font-weight:700;margin-right:4px}
.home-bar{width:80px;height:3.5px;border-radius:999px;background:#14161A;opacity:.85;margin:0 auto 7px;flex:0 0 auto}

/* ---- the two side projects ---- */
.jobs{margin-top:10px}
.jobs-title{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-light);opacity:.85;margin:0 0 4px !important;
}
.jobs-list{list-style:none;margin:0;padding:0}
.job{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 18px;align-items:start;
  padding:20px 0;border-top:1px solid rgba(124,104,255,.26);
}
.job:last-child{border-bottom:1px solid rgba(124,104,255,.26)}

.job-ico{
  width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:#fff;display:grid;place-items:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
a.job-ico{cursor:pointer}
a.job-ico:hover{transform:translateY(-2px) scale(1.04)}
a.job-ico:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
.job-ico--cream{background:#FBF9F5}
.job-ico img{width:100%;height:100%;object-fit:cover;display:block}
.job-ico{box-shadow:0 0 0 1.5px rgba(124,104,255,.55),0 10px 26px -12px rgba(54,66,239,.85)}

.job-txt{min-width:0;padding-top:2px}
.job-txt h3{
  font-size:19px;color:#fff;margin:0;letter-spacing:-.035em;line-height:1.1;
}
.job-txt h3 a{
  display:inline-flex;align-items:center;gap:5px;
  color:inherit;text-decoration:none;
  transition:color .2s var(--ease);
}
.job-txt h3 a svg{opacity:0;transform:translate(-3px,3px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.job-txt h3 a:hover{color:var(--accent-light)}
.job-txt h3 a:hover svg{opacity:1;transform:translate(0,0)}
.job-txt h3 a:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:3px}
.job-role{
  display:inline-block;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin:6px 0 8px !important;
}
.job-role{color:var(--accent-light)}
.job-desc{color:rgba(255,255,255,.55) !important;font-size:13.5px;line-height:1.55;margin:0 !important;max-width:50ch}
.job-desc .lead-in{color:#fff}

@media (max-width:560px){
  .job{gap:0 14px}
  .job-ico{width:46px;height:46px}
  .job-txt h3{font-size:17px}
}

.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:26px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:26px;
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(19px,1.85vw,25px);line-height:1.25;color:var(--ink);
  transition:color .2s var(--ease);
}
.qa summary:hover{color:var(--accent)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:36px;height:36px;border-radius:50%;
  background:
    linear-gradient(#fff,#fff) center/14px 2.2px no-repeat,
    linear-gradient(#fff,#fff) center/2.2px 14px no-repeat,
    var(--accent);
  box-shadow:0 6px 16px -8px rgba(54,66,239,.85);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),background-color .25s var(--ease);
}
.qa summary:hover::after{background-color:var(--accent-deep)}
.qa[open] summary::after{transform:rotate(135deg)}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

.qa .a{padding:0 0 28px;max-width:68ch}
.qa .a p{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.qa .a p + p{margin-top:14px}

@media (max-width:560px){
  .qa summary{gap:16px;padding:22px 0}
  .qa summary::after{width:30px;height:30px;background-size:12px 2px,2px 12px,auto}
}
@media (prefers-reduced-motion:reduce){ .qa summary::after{transition:none} }

.close{
  background:var(--ink);color:#fff;border-radius:var(--r-card);
  padding:clamp(34px,4.6vw,64px) clamp(26px,4vw,58px) clamp(28px,3.2vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,58px);
}
@media (min-width:900px){ .close{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center} }

.close-copy{display:flex;flex-direction:column;align-items:flex-start}
.close h2{color:#fff;max-width:14ch;margin:0 0 12px}
.close-lead{color:rgba(255,255,255,.72);font-size:17px;line-height:1.6;max-width:40ch;margin:0}
.close-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.close-list li{
  position:relative;padding-left:40px;min-height:26px;
  display:flex;align-items:center;
  font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.78);
}
.close-list li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--accent);
  box-shadow:0 4px 12px -6px rgba(54,66,239,.9);
}
.close-list li::after{
  content:"";position:absolute;left:8.5px;top:50%;
  width:9px;height:5px;
  border-left:2.1px solid #fff;border-bottom:2.1px solid #fff;
  transform:translateY(-72%) rotate(-45deg);
}
.close-alt{margin:34px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.13);width:100%}
.close-alt p{margin:0 0 14px;font-size:14px;color:rgba(255,255,255,.5)}
.li-btn{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;padding:4px 2px;
  transition:transform .22s var(--ease);
}
.li-mark{
  flex:none;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#1B82DE,#0A66C2 60%,#064F97);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .22s var(--ease);
}
.li-btn:hover .li-mark{transform:translateY(-1px)}

.li-txt{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  font-family:var(--display);font-weight:700;letter-spacing:-.028em;
  font-size:16.5px;color:#fff;line-height:1.2;
  transition:color .22s var(--ease);
}
.li-txt i{
  font-style:normal;font-family:var(--text);font-weight:400;letter-spacing:0;
  font-size:13px;color:rgba(255,255,255,.5);
}

.li-go{
  flex:none;width:32px;height:32px;border-radius:50%;margin-left:6px;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  transition:transform .22s var(--ease),background .22s var(--ease);
}
.li-btn:hover .li-go{background:var(--accent-deep);transform:translateX(4px)}
.li-btn:focus-visible{outline:2px solid var(--accent-light);outline-offset:5px;border-radius:6px}

/* ---- the form ---- */
/* the form sits in a light card inside the dark panel */
.cform{
  display:flex;flex-direction:column;gap:15px;
  background:var(--paper-2);
  border-radius:16px;
  padding:clamp(22px,2.2vw,28px);
}
.cf-row{display:grid;grid-template-columns:minmax(0,1fr);gap:15px}
@media (min-width:520px){ .cf-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cf-field{display:flex;flex-direction:column;gap:1px;min-width:0}

.cf-field label,.cf-lab{
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2);
}
.cf-field label i,.cf-lab i{font-style:normal;font-weight:400;font-size:13px;color:var(--ink-3)}

/* underline-only inputs: no boxes */
.cf-field input:not([type=hidden]),.cf-field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:transparent;
  border:0;border-bottom:1.5px solid #D8D8D4;
  border-radius:0;padding:3px 2px;line-height:1.25;
  transition:border-color .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.cf-field textarea{resize:vertical;min-height:56px;line-height:1.5;margin-top:9px}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--ink-3)}
.cf-field input:hover,.cf-field textarea:hover{border-bottom-color:var(--ink-3)}
.cf-field input:focus,.cf-field textarea:focus{
  outline:none;border-bottom-color:var(--accent);border-bottom-width:2px;
}
.cf-field:focus-within label,.cf-field:focus-within .cf-lab{color:var(--accent)}
.cf-field.bad input,.cf-field.bad textarea{border-bottom-color:#C62828}

.cf-select{position:relative;display:flex}
.cf-select select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid #D8D8D4;
  border-radius:0;padding:3px 40px 11px 2px;cursor:pointer;line-height:1.25;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease);
}
.cf-select select:hover{border-bottom-color:var(--ink-3)}
.cf-select select:focus{outline:none;border-bottom-color:var(--accent);border-bottom-width:2px}
/* the chevron gets an accent disc so the field reads as a dropdown */
.cf-select svg{
  position:absolute;right:2px;top:2px;
  width:24px;height:24px;padding:5px;
  background:var(--accent);color:#fff;border-radius:50%;
  pointer-events:none;
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.cf-select:hover svg{background:var(--accent-deep)}
.cf-select:focus-within svg{background:var(--accent-deep);transform:rotate(180deg)}

.cf-err{font-size:12.5px;color:#C62828;min-height:0}
.cf-field.bad .cf-err{min-height:16px}

/* the honeypot must never be seen or focused */
.cf-pot{
  position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
  opacity:0 !important;pointer-events:none !important;
}

.cf-submit{
  margin-top:4px;align-self:flex-start;padding:15px 28px;font-size:15.5px;
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
}
.cf-submit[disabled]{opacity:.62;cursor:default;transform:none}
.cf-plane{flex:none;transform:translateY(-.5px)}
.cform.sending .cf-plane{display:none}
.cf-spin{
  display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:cfspin .7s linear infinite;
}
.cform.sending .cf-spin{display:block}
@keyframes cfspin{to{transform:rotate(360deg)}}

.cf-status{margin:2px 0 0;font-size:14.5px;line-height:1.55;min-height:0;color:var(--ink-2)}
.cf-status.ok{color:#0F7A4F}
.cf-status.err{color:#C62828}
.cform.done .cf-row,.cform.done .cf-field,.cform.done .cf-submit{display:none}
.cform.done .cf-status{font-size:17px;margin-top:0}

@media (prefers-reduced-motion:reduce){ .cf-spin{animation-duration:2s} }

footer{
  border-top:1px solid var(--line);margin-top:clamp(34px,3.8vw,54px);
  padding:var(--s3) 0 var(--s5);
  display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between;
}
footer p{font-size:15px;color:var(--ink-3)}
.foot-l{display:flex;flex-direction:column;gap:6px}
footer .brand{text-decoration:none}

/* socials in the corner */
.foot-social{display:flex;align-items:center;gap:10px}
.foot-social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--ink-2);border:1px solid var(--line);background:var(--paper);
  transition:background .16s var(--ease),color .16s var(--ease),
             border-color .16s var(--ease),transform .16s var(--ease);
}
.foot-social a:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);
}
@media (max-width:560px){
  footer{gap:20px}
  .foot-social{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
}

/* the delivery terms, moved out of the hero */
.terms{font-family:var(--display);font-weight:700;letter-spacing:-.028em;font-size:clamp(18px,1.5vw,21px);color:var(--ink)}

.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}


/* ==========================================================
   7. The SEO page  (/seo/)
   Same tokens, same buttons, same section rhythm as the
   homepage. Everything is scoped to .page-seo or to a class
   the homepage never uses, so nothing above moves.

   7.1  page hero
   7.2  the search result and AI answer mock
   7.3  what you are paying for
   7.4  what happens every month
   7.5  answer engines, dark
   7.6  the chart
   7.7  what I will not promise
   7.8  price, two cards
   7.9  small screens
   ========================================================== */

.nav-link--here{color:var(--ink) !important;font-weight:600 !important}


/* -- 7.1 page hero -------------------------------------------- */
.phero{background:var(--paper);padding:clamp(24px,3vw,44px) 0 clamp(44px,5.6vw,82px)}
.phero-in{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,4vw,58px);align-items:center;
}
@media (min-width:960px){ .phero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)} }

/* .hero-copy is reused so main.js still arms the nav CTA on scroll.
   Undo the homepage centring, keep the hook. */
.phero .hero-copy{
  align-items:flex-start;text-align:left;
  padding:0;gap:clamp(15px,1.6vw,21px);
}
.phero h1{
  font-family:var(--huge);font-weight:600;
  font-size:clamp(37px,5.3vw,72px);line-height:1;letter-spacing:-.04em;
  color:var(--ink);max-width:15ch;
}
.phero h1 .hl{display:block;color:var(--accent)}
.phero .lead{max-width:47ch;color:var(--ink-2)}

/* The price, treated as a small product panel instead of a number
   floating on its own. It is also what gives the left column its height. */
.pbox{
  width:100%;max-width:430px;margin-top:4px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:18px 20px 16px;
}
.pbox-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.pbox-amt{
  font-family:var(--display);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(38px,3.6vw,50px);line-height:1;color:var(--accent);
}
.pbox-per{font-size:16.5px;font-weight:600;color:var(--ink)}
.pbox-list{
  display:flex;flex-direction:column;gap:9px;
  margin-top:15px;padding-top:15px;border-top:1px solid rgba(20,22,26,.09);
}
.pbox-list li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;line-height:1.4;color:var(--ink-2);
}
.pk{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--accent);color:#fff;flex:none;
}

.phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

.creds{
  display:flex;flex-wrap:wrap;gap:7px 20px;width:100%;
  margin-top:14px;
}
.creds li{
  display:flex;align-items:center;gap:10px;
  font-size:15.5px;font-weight:500;color:var(--ink-2);line-height:1.45;
}
.creds li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex:none;
}



/* -- 7.2 the mock: a search result, and an AI answer over it --- */
.phero-visual{
  position:relative;border-radius:clamp(16px,1.8vw,24px);
  background:var(--paper-2);
  border:1px solid rgba(20,22,26,.07);
  padding:clamp(12px,1.2vw,16px);
}
.mock{position:relative;max-width:540px;margin:0 auto}

/* A real looking Google local pack. Search bar, tabs, a stylised map and
   three results with your business sitting at the top of them. */
.gcard{
  background:#fff;border:1px solid rgba(20,22,26,.1);border-radius:14px;
  overflow:hidden;padding-bottom:16px;
  box-shadow:0 30px 60px -40px rgba(10,12,18,.6),0 2px 6px rgba(10,12,18,.04);
}

.gbar{
  display:flex;align-items:center;gap:11px;
  margin:15px 16px 0;padding:9px 14px;
  border:1px solid #DFE1E5;border-radius:999px;
}
.glogo{display:flex;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.045em;line-height:1;flex:none}
.glogo b:nth-child(1){color:#4285F4}
.glogo b:nth-child(2){color:#EA4335}
.glogo b:nth-child(3){color:#FBBC05}
.glogo b:nth-child(4){color:#4285F4}
.glogo b:nth-child(5){color:#34A853}
.glogo b:nth-child(6){color:#EA4335}
.gq{flex:1;min-width:0;font-size:13.5px;color:#3C4043;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmic{flex:none;display:block}

.gtabs{
  display:flex;gap:22px;margin:13px 16px 0;
  border-bottom:1px solid #EBECEF;font-size:12.5px;
}
.gtabs span{padding-bottom:9px;color:#5F6368;line-height:1}
.gtabs .on{color:#1A73E8;box-shadow:inset 0 -3px 0 #1A73E8}

.gshot{margin:14px 16px 0;border-radius:10px;overflow:hidden;line-height:0}
.gshot img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block}

.gyou{margin:12px 16px 0;padding-bottom:13px;border-bottom:1px solid #EBECEF}
.gres-name--big{font-size:17px;font-weight:600;letter-spacing:-.02em}

/* the action row Google puts under a business profile */
.gacts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.gacts li{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px 6px 9px;border:1px solid #DADCE0;border-radius:999px;
  font-size:11.5px;font-weight:500;color:#1A73E8;line-height:1.4;white-space:nowrap;
}
.gact-i{display:grid;place-items:center;color:#1A73E8;flex:none}

.gpack{margin:0 16px}
.gres{padding:12px 0;border-bottom:1px solid #EBECEF}
.gres:last-child{border-bottom:0}
.gres-top{display:flex;align-items:center;gap:10px}
.gres-name{font-size:15px;font-weight:500;color:#202124;letter-spacing:-.012em;line-height:1.25}
.gres--you .gres-name{font-weight:600}
.gbadge{
  margin-left:auto;flex:none;padding:3px 8px;border-radius:5px;
  background:#E6F4EA;color:#137333;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
}
.grate{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:12.5px;color:#70757A}
.grate b{color:#202124;font-weight:400;font-size:13px}
.gstars{display:block;flex:none}
.gstars .st{fill:#F5A623}
.gstars .st--o{fill:none;stroke:#F5A623;stroke-width:1.1}
.gmeta{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:#70757A}
.gopen{color:#137333}
.gsep{color:#BDC1C6;margin:0 1px}

/* The AI answer sits inside the same card, under the results,
   the way an AI Overview actually appears. */
.aiblock{
  margin:14px 16px 0;padding:14px 16px 15px;
  background:var(--night);color:var(--on-night);border-radius:12px;
}
.aicard-top{
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-light);
}
.aicard-mark{
  display:grid;place-items:center;width:23px;height:23px;border-radius:7px;
  background:rgba(155,162,255,.16);color:var(--accent-light);flex:none;
}
.aicard-body{
  margin:0;font-size:14px;line-height:1.6;
  color:rgba(247,247,250,.78) !important;
}
.aicard-body mark{
  background:rgba(155,162,255,.22);color:#fff;
  padding:1px 5px;border-radius:5px;font-weight:600;
}
.aicard-cite{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:5px 12px 5px 6px;border-radius:999px;
  background:rgba(255,255,255,.07);
  font-size:12px;color:rgba(247,247,250,.72);
}
.aicard-num{
  display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;
}

/* -- 7.3 what you are actually paying for --------------------
   Full bleed dark band. Copy across the top, then four equal
   photographs edge to edge underneath. */
.wband{background:var(--ink);color:#fff}
.wband-in{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){
  .wband-in{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    align-items:stretch;                 /* photographs run the full height */
  }
}

/* the copy lines up with .wrap on the left while the photographs
   run off the right edge of the screen */
.wband-copy{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:15px;
  padding:clamp(34px,3.6vw,54px) var(--pad);
}
@media (min-width:960px){
  /* This band is full bleed, so the copy sits near the edge of the screen
     rather than lining up with the .wrap column. */
  .wband-copy{
    padding-left:clamp(28px,7vw,104px);
    padding-right:clamp(28px,7vw,104px);
  }
}
.wband-copy h2{color:#fff;max-width:none}
.wband-copy p{color:rgba(255,255,255,.7);font-size:16.5px;line-height:1.62;max-width:none;margin:0}


.why-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:8px}
.why-link{
  display:inline-flex;align-items:center;gap:7px;
  padding-bottom:4px;border-bottom:1.5px solid var(--accent-light);
  font-size:15px;font-weight:600;color:#fff;text-decoration:none;
  transition:gap .16s var(--ease),border-color .16s var(--ease);
}
.why-link:hover{gap:11px;border-bottom-color:#fff}

/* four equal photographs, edge to edge */
.wstrip{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:2px;background:rgba(255,255,255,.12);
}
.wsq{position:relative;margin:0;overflow:hidden;aspect-ratio:1/1;min-width:0}
@media (min-width:960px){
  /* height:0 stops the photographs from driving the band height, so the copy
     sets it. min-height:100% then stretches them back to fill it. Without the
     height:0 each 700px source image sizes its own row and the band balloons. */
  .wstrip{height:0;min-height:100%;overflow:hidden}
  .wsq{aspect-ratio:auto;min-height:0}
}
.wsq img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
.wsq::after{
  content:"";position:absolute;inset:auto 0 0 0;height:70%;
  background:linear-gradient(to top,rgba(8,9,12,.94) 0%,rgba(8,9,12,.72) 26%,rgba(8,9,12,.3) 60%,rgba(8,9,12,0) 100%);
}
.wsq figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(15px,1.5vw,22px);
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(16px,1.25vw,19px);line-height:1.2;color:#fff;text-wrap:balance;
}

/* -- 7.4 what happens every month ----------------------------- */
.mgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px)}
@media (min-width:780px){ .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mcard{
  --c:var(--accent);
  display:flex;gap:19px;align-items:flex-start;
  padding:clamp(22px,2.4vw,30px);
  background:var(--paper);border:1px solid rgba(20,22,26,.07);
  border-radius:16px;
  /* these sit still. The depth comes from a layered resting shadow,
     not from lifting on hover. */
  box-shadow:
    0 1px 2px rgba(10,12,18,.05),
    0 6px 14px -8px rgba(10,12,18,.12),
    0 22px 38px -22px rgba(10,12,18,.24);
}
/* one colour each, so the grid does not read as six blue tiles */
.mcard--a{--c:#3642EF}   /* blue   */
.mcard--b{--c:#D92D20}   /* red    */
.mcard--c{--c:#EE7514}   /* orange */
.mcard--d{--c:#6E45C9}   /* violet */
.mcard--e{--c:#12855A}   /* green  */
.mcard--f{--c:#D9A21B}   /* yellow */
.mico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--c);color:#fff;flex:none;
  box-shadow:0 12px 22px -12px var(--c);
}
.mbody{display:flex;flex-direction:column;gap:6px;min-width:0}
.mcard h3{font-size:18.5px;letter-spacing:-.03em}
.mcard p{font-size:15.5px;line-height:1.55;margin:0}


/* -- 7.5 answer engines, dark --------------------------------- */
.aeo{
  display:grid;grid-template-columns:minmax(0,1fr);
  background:var(--ink);color:#fff;
  border-radius:clamp(18px,2vw,28px);overflow:hidden;
}
@media (min-width:920px){ .aeo{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)} }
.aeo-copy{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(28px,3.2vw,52px);
}
.aeo-copy h2{color:#fff;max-width:17ch}
.aeo-copy p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.6;max-width:52ch}
.aeo-copy .btn{margin-top:8px;align-self:flex-start}

.aeo-side{
  display:flex;align-items:center;
  padding:clamp(24px,2.8vw,44px);
  background:rgba(255,255,255,.035);
  border-top:1px solid rgba(255,255,255,.08);
}
@media (min-width:920px){ .aeo-side{border-top:0;border-left:1px solid rgba(255,255,255,.08)} }
.engines{display:flex;flex-direction:column;width:100%}
.engines li{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.engines li:last-child{border-bottom:0}
.eng-k{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.02em;
  color:var(--accent-light);flex:none;width:24px;
}
.engines li div{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.engines b{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.015em}
.engines span{font-size:13.5px;color:rgba(255,255,255,.52)}


/* -- 7.6 the chart -------------------------------------------- */
.chart{
  margin:0;background:var(--paper);
  border:1px solid var(--line);border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(22px,2.6vw,34px);
  box-shadow:0 26px 60px -44px rgba(10,12,18,.5);
}
.chart-head{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:12px 24px;margin-bottom:clamp(18px,2vw,26px);
}
.chart-k{
  margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(19px,1.7vw,23px);color:var(--ink);line-height:1.2;
}
.chart-sub{margin:5px 0 0;font-size:14.5px;color:var(--ink-3)}
.chart-delta{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  padding:7px 14px;border-radius:999px;
  background:#E6F6F0;color:#0F8F6C;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
}

.charts{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px)}
@media (min-width:900px){ .charts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chart-delta--calm{background:var(--paper-2);color:var(--ink-3)}
.chart-plot{width:100%}
.chart-plot svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .ylab text,.chart .xlab text{
  font-family:var(--text);font-size:11px;font-weight:500;
  fill:var(--ink-3);
}
.chart .ylab text{text-anchor:end}
.chart .xlab text{text-anchor:middle}
.chart .line{
  fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.chart .pts circle{fill:#fff;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke}
.chart .pt-last{fill:var(--accent);stroke:#fff;stroke-width:2.4;vector-effect:non-scaling-stroke}
.chart-note{
  margin:clamp(14px,1.6vw,18px) 0 0;
  font-size:14px;line-height:1.55;color:var(--ink-3);
}



/* -- 7.9 small screens ---------------------------------------- */
@media (max-width:640px){
  .phero-visual{padding:10px}
  .serp-bar{font-size:12.5px;padding:8px 12px}
  .chart-head{flex-direction:column}
  .why-nums li{padding-left:18px}
}

/* Section labels on this page are plain uppercase, not filled pills.
   Scoped to .page-seo so the homepage keeps its own. */
.page-seo .eyebrow{
  padding:0;border-radius:0;background:none;
  color:var(--accent);
  font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  line-height:1;margin-bottom:2px;
}

/* -- 7.10 how an article gets made ---------------------------- */
.proc{display:flex;flex-direction:column;gap:clamp(34px,4vw,56px)}

/* the steps run two up, so the spreadsheet below gets the full width */
.psteps.psteps--two{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
@media (min-width:820px){
  .psteps.psteps--two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)}
  .psteps--two .pstep:nth-child(2){padding-top:0}
  .psteps--two .pstep{padding-right:0}
  .psteps--two .pstep:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
}

.psteps{display:flex;flex-direction:column}
.pstep{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.pstep:first-child{padding-top:0}
.pstep:last-child{border-bottom:0;padding-bottom:0}
.pnum{
  display:grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;
  background:var(--accent);color:#fff;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.03em;
  box-shadow:0 8px 16px -10px rgba(54,66,239,.95);
}
.pbody{display:flex;flex-direction:column;gap:5px;min-width:0}
.pbody h3{font-size:19px;letter-spacing:-.03em}
.pbody p{font-size:15.5px;line-height:1.55;margin:0;max-width:58ch}

/* the plan card, built to read like a spreadsheet */
/* full width, and not sticky. It was detaching from the steps and reading
   as something floating next to the page rather than part of it. */
.plan-wrap{width:100%}
.plan{
  background:var(--paper);
  border:1px solid rgba(20,22,26,.13);
  border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,12,18,.05),0 18px 40px -26px rgba(10,12,18,.45);
}
.plan-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;background:var(--ink);
}
.plan-k{
  margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:15.5px;color:#fff;line-height:1.2;
}
.plan-tag{
  flex:none;padding:4px 8px;border-radius:4px;
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.7);
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.4;
}

.plan-t8{width:100%;border-collapse:collapse;table-layout:fixed}
.plan-t8 th{
  padding:10px 16px;background:var(--paper-2);
  border-bottom:1px solid rgba(20,22,26,.13);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;
}
.plan-t8 th.pn,.plan-t8 td.pn{width:64px;text-align:right}
.plan-t8 th:nth-child(1){width:29%}
.plan-t8 th:nth-child(2){width:19%}
.plan-t8 th:nth-child(5){width:auto}
@media (max-width:819px){
  .plan-t8 th:nth-child(2),.plan-t8 td.pcol-kw,
  .plan-t8 th:nth-child(5),.plan-t8 td.pw{display:none}
  .plan-t8 th:nth-child(1){width:auto}
}
.plan-t8 td{
  padding:14px 16px;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.plan-t8 tr:last-child td{border-bottom:0}
.pt-t{display:block;font-size:15px;line-height:1.4;color:var(--ink);font-weight:500}
td.pcol-kw{vertical-align:top}
.pt-kw{
  display:inline-block;padding:3px 9px;border-radius:4px;white-space:nowrap;
  background:#EDEFFE;color:var(--accent-deep);
  font-size:11.5px;font-weight:600;line-height:1.4;
}
td.pw{font-size:13px;line-height:1.45;color:var(--ink-3)}
.pt-none{color:var(--ink-3)}
/* zebra, so a row reads across 1240px without losing its place */
.plan-t8 tbody tr:not(.pr--grp):nth-of-type(even) td{background:#FCFCFB}
td.pn{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
/* group rows are solid colour bars, the way a spreadsheet flags a block */
.pr--grp td{
  padding:10px 16px;border-bottom:0;
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;
}
.grp--go td{background:#0E8F55}
.grp--no td{background:#C93A2D}
/* ink on the amber, because white on it is unreadable */
.grp--wait td{background:#D89417;color:var(--ink)}
.pr--out .pt-t{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(138,144,152,.55)}
.pr--out td.pn{color:var(--ink-3)}
.pr--wait .pt-t{color:var(--ink-2)}
.pr--wait td.pn{color:var(--ink-3)}

.plan-foot{
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding:13px 16px;background:var(--paper-2);
  border-top:1px solid rgba(20,22,26,.11);
  font-size:12.5px;line-height:1.45;color:var(--ink-3);
}
.plan-link{
  display:grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:none;
  background:rgba(20,22,26,.07);color:var(--ink-2);margin-top:-1px;
}

/* the per-article price, under the monthly figure */
.tier-unit{
  margin:-4px 0 0;font-size:14.5px;line-height:1.5;
  color:var(--ink-3);max-width:34ch;
}
.tier--pick .tier-unit{color:var(--ink-2)}
.plan-also{margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}
.plan-also-k{
  margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42) !important;
}
.plan-also ul{display:flex;flex-direction:column;gap:8px}
.plan-also li{
  position:relative;padding-left:16px;
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.72);
}
.plan-also li::before{
  content:"";position:absolute;left:0;top:7px;
  width:5px;height:5px;border-radius:50%;background:var(--accent-light);
}

/* -- 7.11 the full bleed photo band --------------------------- */
.band{
  position:relative;width:100%;
  min-height:clamp(300px,40vw,520px);
  display:grid;place-items:center;
  overflow:hidden;background:var(--night);
}
.band-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,9,.72) 0%,rgba(6,7,9,.8) 50%,rgba(6,7,9,.88) 100%);
}
.band-in{
  position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:clamp(56px,8vw,110px) var(--pad);
}
.band-in--mid{display:flex;justify-content:center;text-align:center}
.band-line{
  margin:0;max-width:20ch;
  font-family:var(--huge);font-weight:600;
  font-size:clamp(30px,4.4vw,62px);line-height:1.04;letter-spacing:-.035em;
  color:#fff !important;text-wrap:balance;
}

/* -- 7.12 what decides who shows up --------------------------- */
.rank-shot{
  margin:0 0 clamp(28px,3.4vw,46px);
  border-radius:clamp(16px,1.8vw,24px);overflow:hidden;line-height:0;
}
.rank-shot img{
  width:100%;height:auto;display:block;
  aspect-ratio:2.6/1;object-fit:cover;object-position:50% 42%;
}

.rfacts{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:860px){ .rfacts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)} }
.rfact{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid var(--line);
}
@media (min-width:860px){
  .rfact:nth-last-child(-n+2){border-bottom:0}
  .rfact:nth-child(-n+2){padding-top:0}
}
@media (max-width:859px){
  .rfact:first-child{padding-top:0}
  .rfact:last-child{border-bottom:0}
}
/* editorial numerals, not badges */
.rnum{
  flex:none;width:auto;min-width:2.2ch;
  font-family:var(--display);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(28px,2.6vw,36px);line-height:.86;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

.rfact div{display:flex;flex-direction:column;gap:5px;min-width:0}
.rfact h3{font-size:18px;letter-spacing:-.03em;margin-top:-2px}
.rfact p{font-size:15px;line-height:1.55;margin:0}
.amt-from,.pbox-from{
  font-family:var(--text);font-size:16px;font-weight:600;letter-spacing:0;
  color:var(--ink-3);margin-right:7px;vertical-align:middle;
}
.pbox-from{font-size:15px;align-self:center;color:var(--ink-3)}


/* four charts, two up */
@media (min-width:900px){ .charts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chart .bars rect{opacity:.92}
.chart .barv{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.03em;
  fill:var(--ink);text-anchor:middle;
}
.chart-delta{white-space:nowrap}
.lead-link{
  display:inline-flex;align-items:center;gap:3px;
  color:var(--accent);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(54,66,239,.35);
}
.lead-link:hover{border-bottom-color:var(--accent)}

/* a centred section header */
.head--mid{
  align-items:center;text-align:center;
  max-width:64ch;margin-left:auto;margin-right:auto;
}
.head--mid .eyebrow{align-self:center}
.head--mid h2{max-width:20ch}

/* the window and the source, under a centred header */
.head-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  margin:4px 0 0;font-size:13.5px;font-weight:500;color:var(--ink-3);
}
.head-dot{width:4px;height:4px;border-radius:50%;background:var(--line);flex:none}


/* One continuous colour bar across the whole strip. The four blocks butt
   against each other, square corners, no gaps, flush left and right. */
.chart-stats{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;margin-top:clamp(26px,3vw,40px);
}
@media (min-width:620px){ .chart-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1020px){ .chart-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.chart-stats li{display:flex;flex-direction:column;gap:0;padding:0;border:0;--c:var(--accent)}
.chart-stats li:nth-child(1){--c:#3642EF}
.chart-stats li:nth-child(2){--c:#EE7514}
.chart-stats li:nth-child(3){--c:#12855A}
.chart-stats li:nth-child(4){--c:#6E45C9}
.chart-stats b{
  display:flex;align-items:center;
  padding:clamp(16px,1.7vw,22px) clamp(16px,1.7vw,22px) clamp(18px,1.9vw,24px);
  background:var(--c);color:#fff;border-radius:0;
  font-family:var(--display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(30px,3.1vw,42px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.chart-stats span{
  padding:clamp(14px,1.5vw,18px) clamp(16px,1.7vw,22px) 0 0;
  font-size:16px;line-height:1.5;color:var(--ink-2);max-width:28ch;
}

/* the results headline carries the section on its own, so it runs bigger */
.h2--big{
  font-family:var(--huge);font-weight:600;
  font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.035em;
}
.head--mid .h2--big{max-width:16ch}

/* Interior pages get a proper nav bar: solid, with a hairline under it at all
   times. Only the homepage starts bare and fades its background in on scroll. */
.page-seo .site-head{
  background:var(--paper);
  border-bottom-color:var(--line);
}
/* two lines, deliberately different sizes so the top line runs wider */
.h2--big .hb-1{display:block;font-size:1.2em;color:var(--ink)}
.h2--big .hb-2{display:block;color:var(--accent)}
.head--mid .h2--big{max-width:none}
.chart .vgrid line{stroke:var(--line)}
.chart .barv--r{text-anchor:start;font-size:12px;fill:var(--ink-2)}
.chart .rowlab{
  font-family:var(--text);font-size:12.5px;font-weight:500;
  fill:var(--ink);text-anchor:end;
}
.chart-src{
  margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
.chart-src::before{content:"Source: ";color:var(--line)}

/* a head with no eyebrow does not need the eyebrow's gap under it */
.head:not(:has(.eyebrow)){gap:14px;margin-bottom:clamp(24px,2.8vw,36px)}
#monthly.sec,#process.sec{padding-top:clamp(44px,5vw,76px)}

/* the plan card: what got written, and what got killed */
.plan-grp + .plan-grp{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.plan-grp-k{
  margin:0 0 12px;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;
}
.plan-grp-k--in{color:#6FE0B8 !important}
.plan-grp-k--out{color:rgba(255,255,255,.4) !important}
.plan-list--out li{padding:11px 0}
.plan-t--out{
  color:rgba(255,255,255,.5) !important;font-weight:400;
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3);
  margin-bottom:4px;
}
.plan-why{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.38) !important}

/* answer engines: a coloured mark each, lit from behind */
.engines li{--c:var(--accent-light);gap:15px;padding:15px 0}
.engines .eng--a{--c:#EE7514}
.engines .eng--b{--c:#3642EF}
.engines .eng--c{--c:#12A594}
.engines .eng--d{--c:#D92D20}
.eng-i{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--c);color:#fff;
  box-shadow:0 8px 26px -6px var(--c);
}
.engines li{align-items:flex-start}
.engines li div{gap:4px}
.engines b{font-size:16.5px;line-height:1.3}
.engines span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.55)}
.eng-i{margin-top:2px}
/* the local search lead runs wide, it was stranded at 52ch on a 1240px row */
#ranking .head--wide .lead{max-width:none}
#ranking .head--wide h2{max-width:14ch}