/* ==== fonts: self-hosted, same source as every other clique.agency page ====
   Replaces a Google Fonts request, so there is no third-party render-blocking
   stylesheet and the landers use the identical files the rest of the site does.
   Fraunces italic is the one face prod did not already carry; it sits in its
   own new directory so nothing existing is touched. */
/* Fraunces roman is deliberately absent: every Fraunces use on these pages is
   italic (accents, kickers, the seal), verified across all 13. Declaring the
   roman would download 65K that never paints a glyph. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/wp-content/fonts/clique-landers/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/wp-content/fonts/clique-landers/inter-tight-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/wp-content/fonts/clique-landers/jetbrains-mono-latin.woff2) format('woff2')}




/* ==== the guarantee seal: prod's treatment, matched ==========================
   clique.agency renders this as 80px laurels at a 20px gap with the whole
   label in Fraunces italic 500 / 20px / oxblood, and splits the promise into a
   headline sentence plus a following line. Reproduced rather than reinvented,
   because this is guarantee wording and it has to read the same everywhere. */
.promise-hd{display:flex;align-items:center;justify-content:center;gap:20px;
  margin:0 0 40px}
.promise-hd img{width:80px;height:auto;display:block;flex:0 0 auto}
.promise-hd .seal-t{margin:0;font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:20px;color:var(--red);letter-spacing:.02em;
  white-space:nowrap}
.promise .pquote{font-size:clamp(26px,3.2vw,38px);line-height:1.18;
  letter-spacing:-.02em;font-weight:600;color:var(--ink);max-width:900px;
  margin:0 auto 26px}
.promise .pquote em{font-family:var(--serif);font-style:italic;
  font-weight:400;color:var(--red)}
.promise .pthen{font-size:20px;line-height:1.55;color:var(--body);
  max-width:760px;margin:0 auto 34px}
.promise .pthen strong{color:var(--ink);font-weight:600}
.promise .pnote{max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:760px){
  .promise-hd{gap:12px}
  .promise-hd img{width:56px}
  .promise-hd .seal-t{font-size:16px;white-space:normal}
  .promise .pthen{font-size:17px}
}



/* --- stripped landing-page chrome: logo + one CTA --- */
.lp-hd{background:var(--ink);border-bottom:1px solid rgba(245,241,236,.10)}
.lp-hd-in{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.lp-logo{font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;letter-spacing:-.03em;
  font-size:19px;color:#F5F1EC;text-decoration:none}
.lp-navcta{font-family:'Inter Tight',system-ui,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:#F5F1EC;background:#8A2A1E;
  padding:13px 20px;border-radius:3px;text-decoration:none;white-space:nowrap}
.lp-navcta:hover{background:#6B1E14;color:#fff}
.lp-ft{background:var(--ink);color:#6F6C63;font-family:'Inter Tight',system-ui,sans-serif}
.lp-ft-in{max-width:1160px;margin:0 auto;padding:26px 24px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px}
.lp-ft a{color:#9A958A;text-decoration:none}
.lp-ft a:hover{color:#C9C1AE}
@media(max-width:600px){.lp-hd-in{padding:14px 16px}.lp-navcta{font-size:11px;padding:11px 14px}}

:root{
  --red:#8A2A1E; --red-dk:#6B1E14; --ink:#1A1915; --body:#3A3933; --muted:#6F6C63;
  --cream:#F5F1EC; --warm:#EDE7DD; --sand:#E1D9CA; --stone:#C9C1AE; --gold:#B0894A;
  --sans:'Inter Tight',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
body{font-family:var(--sans);color:var(--body);background:var(--cream)}
*{box-sizing:border-box}
section{padding:96px 24px}
.wrap{max-width:1160px;margin:0 auto}
.narrow{max-width:800px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px}
/* hero eyebrow carries message match from the search query: make it read, not whisper */
.hero .eyebrow{font-size:12px;letter-spacing:.15em;color:var(--red);font-weight:500}
.hero:not(.light) .eyebrow{color:var(--gold)}
h2{font-weight:600;font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 20px}
h3{font-weight:600;font-size:21px;line-height:1.28;color:var(--ink);margin:0 0 12px}
em.acc{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red)}
em.gold{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
p{font-size:17px;line-height:1.65;margin:0 0 18px}
.lede{font-size:19px;line-height:1.6}
.kicker{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--red)}

/* --- CTA block: message-matched to /leak-finder/ --- */
.btn{display:inline-block;background:var(--red);color:#F5F1EC;font-weight:600;font-size:13.5px;
  letter-spacing:.09em;text-transform:uppercase;padding:19px 34px;border-radius:3px;
  text-decoration:none;transition:background .18s}
.btn:hover{background:var(--red-dk);color:#fff}
.cta{max-width:640px;margin:0 auto}
.cta-note{font-size:13.5px;color:var(--muted);margin:16px 0 0;line-height:1.55}
.close .cta-note{color:#9A958A}
.cta-band{background:var(--sand);text-align:center}
.cta-band .qual{font-size:16px;color:var(--body);margin:0 auto 26px;max-width:600px}
.scarce{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 18px}

/* --- engraving plates: multiply so paper is always exact brand cream --- */
/* The frame owns the ratio, not the file. Any plate Gemini returns slots in cleanly. */
.plate-wrap{background:var(--cream);border-radius:3px;overflow:hidden;
  aspect-ratio:4/5;                     /* desktop: portrait, balances the tall copy column */
  max-width:520px;margin:0 auto}
.plate{width:100%;height:100%;display:block;object-fit:cover;
  /* No filter and no mix-blend-mode here on purpose. Both used to sit on this
     one element, and WebKit renders a filtered element into its own layer and
     drops the blend, so on iOS Safari the plates showed raw near-white paper
     against the cream page and did not match the rest of the site. The paper
     correction is now baked into the files themselves, which every browser
     agrees on and which the homepage already does. */
  /* crop from the BOTTOM, never the top: the top of these plates carries the meaning */
  object-position:center 12%}
/* No mobile ratio override on purpose. The plate files are portrait 4:5 (966x1200),
   so the old landscape boxes here (4/3, then 3/2 under 520px) made object-fit:cover
   throw away more than half the image height, cutting the subject off at the knees.
   The 4/5 base box matches the files, so nothing is ever cropped at any width, and
   max-width:520px keeps it sane on tablet. A taller plate costs nothing above the
   fold because the CTA sits ABOVE it in source order once the hero stacks. */

/* --- cream hero (for pages carrying a plate) --- */
.hero.light{background:var(--cream);color:var(--body);border-bottom:1px solid var(--sand)}
.hero.light h1{color:var(--ink)}
.hero.light h1 em{color:var(--red)}
.hero.light p{color:var(--body)}
.hero.light .eyebrow{color:var(--muted)}
.hero.light .cta-note{color:var(--muted)}
.hero.light .chips li{color:var(--body)}
.hero.light .chips b{color:var(--ink)}
.hero.light .plate-wrap{background:transparent}

/* --- hero --- */
.hero{background:var(--ink);color:var(--cream);padding:0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;
  max-width:1160px;margin:0 auto;padding:104px 24px 96px}
.hero h1{font-weight:600;font-size:clamp(34px,4.7vw,56px);line-height:1.05;letter-spacing:-.025em;
  color:#F5F1EC;margin:0 0 22px}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.hero p{color:#C9C1AE;font-size:18px}
.hero .eyebrow{color:var(--gold)}
.hero .cta-note{color:#9A958A}
.chips{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 30px;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:9px;font-size:14px;color:#C9C1AE}
.chips b{color:#F5F1EC;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto}

/* --- sticky mobile CTA: he reads on a phone between jobs; the ask must always be reachable --- */
.pg-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(26,25,21,.97);backdrop-filter:blur(8px);
  border-top:1px solid rgba(245,241,236,.14);padding:11px 14px calc(11px + env(safe-area-inset-bottom))}
.pg-sticky a{display:block;text-align:center;background:var(--red);color:#F5F1EC;font-family:var(--sans);
  font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;padding:16px;
  border-radius:3px;text-decoration:none}
.pg-sticky small{display:block;text-align:center;color:#9A958A;font-family:var(--sans);
  font-size:11.5px;margin-top:7px}
@media(max-width:820px){ .pg-sticky{display:block} body{padding-bottom:96px} }

/* --- mobile hero: get the ask above the fold --- */
@media(max-width:820px){
  .hero h1{font-size:clamp(29px,7.4vw,38px);line-height:1.08;margin-bottom:16px}
  .hero-grid{padding:30px 20px 44px;gap:30px}
  .offer-sub{font-size:17px;margin-bottom:18px}
  .gets li{font-size:15px;margin-bottom:9px}
  .eyebrow{margin-bottom:14px;font-size:10.5px}
  .credline{display:none}
  /* plate below the ask on mobile, so it never pushes the button down */
  .hero-grid > div:last-child{order:2}
  .trust-in{gap:10px 20px;font-size:12.5px;padding:16px 20px}
}

/* --- hero offer block: the reason to click, above the fold --- */
.offer-sub{font-size:19.5px;line-height:1.5;color:var(--ink);margin:0 0 22px;font-weight:500}
.hero:not(.light) .offer-sub{color:#F5F1EC}
.gets{list-style:none;padding:0;margin:0 0 28px}
.gets li{position:relative;padding:0 0 0 30px;margin:0 0 11px;font-size:16px;line-height:1.45}
.gets li:before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:3px;
  background:var(--red)}
.gets li:after{content:"";position:absolute;left:5.5px;top:8.5px;width:4px;height:8px;
  border:solid #F5F1EC;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero:not(.light) .gets li{color:#E1D9CA}
.risk{font-size:14px;line-height:1.55;color:var(--muted);margin:14px 0 0;max-width:440px}
.hero:not(.light) .risk{color:#9A958A}
.risk b{color:var(--red);font-weight:600}
.hero:not(.light) .risk b{color:var(--gold)}
.credline{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 0;padding-top:18px;border-top:1px solid var(--sand)}
.hero:not(.light) .credline{color:#6F6C63;border-color:#3A3933}

/* --- signature feature section --- */
.feature{background:var(--warm)}

/* --- dockets (the four leaks) --- */
.leaks{background:var(--cream)}
.dockets{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px}
.docket{background:var(--warm);border:1px solid var(--sand);border-radius:4px;overflow:hidden}
.docket-hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 26px;background:var(--sand);color:var(--body);display:flex;justify-content:space-between;gap:10px}
.docket-hd b{color:var(--red);font-weight:500}
.docket-bd{padding:28px 26px 30px}
.docket-bd p{font-size:15.5px}
.docket-bd p:last-child{margin-bottom:0}
.punch{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--red);margin-top:14px}

/* --- dark band (second bespoke visual) --- */
.band{background:var(--ink);color:var(--cream)}
.band h2{color:#F5F1EC}
.band p{color:#C9C1AE}
.band-grid{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}

/* --- markets strip: served countries, stated once, under the trust bar --- */
.markets{background:var(--sand);padding:0}
.markets-in{max-width:1160px;margin:0 auto;padding:15px 24px;display:flex;flex-wrap:wrap;
  gap:8px 26px;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.markets-in b{color:var(--ink);font-weight:500}
.markets-in .sep{color:var(--stone)}
@media(max-width:600px){.markets-in{gap:6px 16px;font-size:10px;padding:13px 16px}}

/* --- trust bar --- */
.trust{background:var(--ink);border-top:1px solid rgba(245,241,236,.08);padding:0}
.trust-in{max-width:1160px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;
  gap:14px 44px;align-items:center;justify-content:center}
.trust-i{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#C9C1AE;white-space:nowrap}
.trust-i b{color:#F5F1EC;font-weight:600}
.stars{color:var(--gold);letter-spacing:1px;font-size:13px}

/* --- self-diagnosis checklist --- */
.diag{background:var(--cream)}
.diag-card{background:var(--warm);border:1px solid var(--sand);border-radius:4px;
  padding:40px 42px;max-width:800px;margin:40px auto 0}
.diag-card label{display:flex;gap:15px;align-items:flex-start;padding:15px 0;
  border-bottom:1px dotted var(--sand);cursor:pointer;font-size:16.5px;line-height:1.5}
.diag-card label:last-of-type{border-bottom:none}
.diag-card input{appearance:none;width:22px;height:22px;flex:0 0 auto;margin-top:2px;
  border:1.5px solid var(--stone);border-radius:3px;background:var(--cream);cursor:pointer;
  position:relative;transition:.15s}
.diag-card input:checked{background:var(--red);border-color:var(--red)}
.diag-card input:checked:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:11px;
  border:solid #F5F1EC;border-width:0 2px 2px 0;transform:rotate(45deg)}
.diag-out{margin-top:26px;padding-top:22px;border-top:1px solid var(--sand);
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--red)}

/* --- comparison table --- */
.vs-tbl{background:var(--warm)}
.vt{width:100%;border-collapse:collapse;margin-top:44px;background:var(--cream);
  border:1px solid var(--sand);font-size:15.5px}
.vt th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:16px 22px;background:var(--sand);color:var(--body);font-weight:500}
.vt th.us{background:var(--red);color:#F5F1EC}
.vt td{padding:16px 22px;border-top:1px solid var(--sand);vertical-align:top;line-height:1.5}
.vt td.them{color:var(--muted)}
.vt td.us{color:var(--ink);background:rgba(138,42,30,.04);font-weight:500}
@media(max-width:700px){.vt,.vt tbody,.vt tr,.vt td,.vt th{display:block}
  .vt td{border-top:none}.vt tr{border-top:1px solid var(--sand);padding:6px 0}}

/* --- faq --- */
.faq{background:var(--cream)}
.faq-l{max-width:800px;margin:40px auto 0}
.faq-i{border-top:1px solid var(--sand);padding:26px 0}
.faq-i:last-child{border-bottom:1px solid var(--sand)}
.faq-i h3{font-size:19px;margin-bottom:10px}
.faq-i p{font-size:16px;margin:0}

/* --- ps --- */
.ps{max-width:640px;margin:38px auto 0;text-align:left;font-size:15.5px;line-height:1.65;
  color:#C9C1AE;border-top:1px solid rgba(245,241,236,.14);padding-top:26px}
.ps b{color:var(--gold);font-family:var(--serif);font-style:italic;font-size:17px}

/* --- the offer block --- */
.offer{background:var(--warm)}
.offer-card{background:var(--cream);border:1px solid var(--sand);border-radius:4px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;overflow:hidden;margin-top:44px}
.offer-l{padding:44px 42px}
.offer-r{padding:44px 42px;background:var(--warm);border-left:1px solid var(--sand)}
.offer-l h3{font-size:25px;margin-bottom:16px}
.offer-list{list-style:none;padding:0;margin:20px 0 0}
.offer-list li{font-size:16px;line-height:1.5;padding:0 0 0 26px;margin:0 0 14px;position:relative}
.offer-list li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--red)}
.offer-r .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.offer-r p{font-size:15.5px}
.guarantee{border-top:1px solid var(--sand);margin-top:26px;padding-top:22px}
.guarantee b{display:block;font-family:var(--serif);font-style:italic;font-size:19px;
  color:var(--red);margin-bottom:8px}

.steps{list-style:none;counter-reset:st;padding:0;margin:0}
.steps li{counter-increment:st;position:relative;padding:0 0 0 52px;margin:0 0 26px}
.steps li:last-child{margin-bottom:0}
.steps li:before{content:counter(st);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--red);color:#F5F1EC;font-family:var(--serif);font-style:italic;
  font-size:17px;display:flex;align-items:center;justify-content:center}
.steps b{display:block;font-size:17.5px;color:var(--ink);margin-bottom:5px}
.steps span{display:block;font-size:15.5px;line-height:1.55;color:var(--body)}

/* --- testimonial --- */
.tm{background:var(--cream);border:1px solid var(--sand);border-left:3px solid var(--red);
  border-radius:3px;padding:28px 30px;max-width:720px;margin:0 auto}
.tm blockquote{margin:0 0 16px;font-family:var(--serif);font-style:italic;font-size:20px;
  line-height:1.45;color:var(--ink)}
.tm .who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.tm .who b{color:var(--red);font-weight:500}
.close .tm{background:#221E18;border-color:#3A3933;border-left-color:var(--gold);text-align:left}
.close .tm blockquote{color:#F5F1EC}
.close .tm .who{color:#9A958A}
.close .tm .who b{color:var(--gold)}

/* --- proof / engines / promise / fit / close --- */
.proof{background:var(--cream)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.stat .n{font-family:var(--serif);font-style:italic;font-size:clamp(34px,4.4vw,52px);
  color:var(--red);line-height:1;margin:0 0 10px}
.stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.stat p{font-size:15px;margin:0}
.gap{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--red);
  border:1px dashed rgba(138,42,30,.45);border-radius:3px;padding:14px 16px;margin:34px 0 0}
.engines{background:var(--warm)}
.eg{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--sand);margin-top:48px}
.egc{background:var(--warm);padding:34px 32px}
.egc .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 10px}
.egc p{font-size:15.5px;margin:0}
.promise{background:var(--warm);text-align:center;padding-top:0}
.pquote{font-weight:600;font-size:clamp(22px,2.9vw,34px);line-height:1.25;letter-spacing:-.015em;
  color:var(--ink);max-width:900px;margin:0 auto 18px}
.pquote em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red)}
.fit{background:var(--cream)}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--sand);margin-top:44px}
.fitcol{background:var(--cream);padding:34px 32px}
.fitcol h3{display:flex;align-items:center;gap:12px}
.rn{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--red);
  border:1px solid rgba(138,42,30,.4);border-radius:3px;padding:2px 9px}
.fitcol ul{list-style:none;padding:0;margin:18px 0 0}
.fitcol li{font-size:15.5px;line-height:1.55;padding:0 0 0 20px;margin:0 0 14px;position:relative}
.fitcol li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--red)}
.fitcol.no li:before{background:var(--stone)}
.close{background:var(--ink);color:var(--cream);text-align:center}
.close h2{color:#F5F1EC}
.close p{color:#C9C1AE}
.calllist{list-style:none;padding:0;margin:34px auto;max-width:640px;text-align:left}
.calllist li{font-size:16px;color:#C9C1AE;padding:0 0 0 26px;margin:0 0 12px;position:relative}
.calllist li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

@media(max-width:900px){
  .hero-grid,.dockets,.eg,.fit-grid,.band-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:36px}
  .eg,.fit-grid{gap:2px}
  .dockets{gap:24px}
  section{padding:68px 20px}
  .hero-grid{padding:76px 20px 68px;gap:44px}
}

.chart{background:var(--cream);border:1px solid var(--sand);border-radius:4px;padding:34px 30px}


/* ==== mobile fixes (audit 2026-08-07) ================================= */
@media(max-width:760px){
  /* 1. the offer card was clipping its right-hand panel: collapse it */
  .offer-card{grid-template-columns:1fr}
  .offer-l{padding:30px 24px}
  .offer-r{padding:28px 24px;border-left:none;border-top:1px solid var(--sand)}
  .offer-l h3{font-size:22px}

  /* 5. primary CTA fills the column: bigger target, no ambiguity */
  .hero .btn,.close .btn,.cta-band .btn{display:block;width:100%;
    text-align:center;padding-left:16px;padding-right:16px}

  /* 3. persistent header CTA to a 44px target */
  .lp-navcta{min-height:44px;display:inline-flex;align-items:center;
    padding:0 16px;font-size:11.5px}
  .lp-hd-in{padding:12px 18px}

  /* 4. micro-labels: legible on a phone without losing the engraved look.
        These are matched at the same depth as the rules that set them
        matched at the same depth as the rules that set them, otherwise they lose on specificity. */
  .eyebrow{font-size:11.5px;letter-spacing:.12em}
  .offer-r .lbl,.stat .lbl,.egc .lbl{font-size:11.5px;letter-spacing:.12em}
  .docket-hd b,.docket-hd span{font-size:11.5px;letter-spacing:.12em}
  .markets-in b,.markets-in span{font-size:11.5px;letter-spacing:.1em}
  .tm .who b{font-size:12.5px}
  .scarce{font-size:12px}

  /* footer legal links get a real tap area */
  .lp-ft a{display:inline-block;padding:13px 0}
  .lp-ft-in{padding:14px 24px}
  .lp-logo{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:700px){
  /* 2. thead was missing from the stacking rule, so the header cells
        shrink-wrapped instead of spanning the stacked table */
  .vt thead,.vt tfoot{display:block}
  .vt th{display:block;width:100%;box-sizing:border-box;font-size:11.5px;
    letter-spacing:.12em}
}

@media(max-width:700px){
  /* The stacked comparison table lost its meaning on a phone. Both headers
     collapsed into a legend at the very top, so from the second pair onward
     nothing on screen said which line was the old way and which was ours -
     the reader had only colour and weight to go on. Drop the detached legend
     and label every cell where it actually sits. */
  .vt thead{display:none}
  .vt tr{border-top:1px solid var(--sand);padding:10px 0 14px}
  .vt td{padding:10px 18px}
  .vt td::before{display:block;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-weight:500}
  .vt td.them::before{content:"What you have had before";color:var(--muted)}
  .vt td.us::before{content:"What we do instead";color:var(--red)}
}

/* ==== CTA arrow ============================================================
   Matches the treatment on the homepage and the 3x Pipeline Promise page: the
   glyph is a ::after, not a character in the label, so the button text stays
   clean, translations do not carry punctuation, and the arrow can nudge on
   hover. margin-left rather than a flex gap because .btn is inline-block here
   and becomes display:block at mobile, where gap would do nothing.
   Covers all three CTA types: in-page, header nav, and the sticky mobile bar. */
.btn::after,
.lp-navcta::after,
.pg-sticky a::after{content:"\2192";display:inline-block;margin-left:8px;
  font-weight:400;letter-spacing:0;transition:transform .2s}
.btn:hover::after,.btn:focus-visible::after,
.lp-navcta:hover::after,.lp-navcta:focus-visible::after,
.pg-sticky a:hover::after,.pg-sticky a:focus-visible::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .btn::after,.lp-navcta::after,.pg-sticky a::after{transition:none}
  .btn:hover::after,.lp-navcta:hover::after,.pg-sticky a:hover::after{transform:none}
}

/* --- sticky CTA reveal ------------------------------------------------------
   The floating ask stays out of the way until the reader has passed the trust
   bar. At the top of the page the hero already carries its own CTA, so a second
   one floating over it is redundant and costs a fifth of a phone screen.

   Driven by a rAF-throttled rect read rather than IntersectionObserver: an
   observer with threshold 0 only fires when the ratio CHANGES, so a jump that
   skips the element entirely (scroll restoration, an anchor, scroll-to-top)
   never fires and the bar sticks in its last state. Reading the rect is a pure
   function of where the page is now, so there is nothing to go stale. Also
   avoids scroll-driven CSS animations, which iOS support is not reliable for.

   It arms itself only when the script runs. With JS off the bar behaves exactly
   as before and stays visible, so the ask is never unreachable. */
.pg-sticky.is-armed{transform:translateY(115%);visibility:hidden;
  transition:transform .26s ease,visibility 0s linear .26s}
.pg-sticky.is-armed.is-past{transform:none;visibility:visible;
  transition:transform .26s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){
  .pg-sticky.is-armed,.pg-sticky.is-armed.is-past{transition:none}}

/* ==== front-end guard =====================================================
   The theme renders page content inside <main id="main" class="wrap cq-clear">.
   Unscoping this stylesheet from .pg made the lander's OWN .wrap rule
   (max-width:1160px) match that <main> as well, which capped the entire page
   and stopped the full-bleed section backgrounds from reaching the viewport
   edge. Every .wrap element the lander ships sits inside a <section>, and none
   are in the chrome, so re-widening main alone restores full-bleed while the
   inner wraps keep their 1160px measure. */
main.wrap{max-width:none;margin:0}
/* ==== editor canvas only ==================================================
   Gutenberg caps every block at max-width:840px inside a ~1745px canvas, so a
   section's background stopped short of the edge instead of running full width
   the way it does live. The older captured pages do not hit this because their
   row markup breaks out of the wrapper on its own; these sections are plain
   <section> elements and have no such trick.

   Lifting the cap off the section block is enough. Deliberately NOT the usual
   100vw + negative-margin full-bleed: the canvas has a vertical scrollbar, so
   100vw would overhang it and add a horizontal scrollbar. Measured in the live
   editor - sections go 840px -> 1729px in a 1745px canvas, no overflow. */
.editor-styles-wrapper .wp-block[data-type="clique/section"]{max-width:none}