/* Shared across every page on xpatic.com. Extracted from index.html so a
   token change is one edit rather than twenty.

   Self-hosted throughout: nothing here is fetched from a shared CDN,
   because Spanish ISPs blackhole those ranges during LaLiga windows. */
/* Self-hosted. Nothing on this page is fetched from a shared CDN, because
   Spanish ISPs blackhole those ranges during LaLiga match windows and the
   page would render in a fallback font every Saturday evening. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/poppins-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/red-hat-text-latin-wght-normal.woff2') format('woff2-variations')}

:root{
  --ink:#191932;
  --paper:#FBFBFD;
  --card:#FFFFFF;
  --tint:#F3F2FA;
  --line:#E3E2EF;
  --blue:#4C5BF5;
  --blue-dark:#3947C9;
  --pink:#E545BE;
  --grad:linear-gradient(90deg,#4C5BF5,#E545BE);
  --red:#E545BE;
  --muted:#5D5D78;
  --dark:#131327;
  --muted-inv:#9D9DBC;
  --max:1120px;
}
/* Cookie consent. Accept and Reject are identical in size, weight and
   colour and sit on the same layer: AEPD guidance is explicit that
   refusing must be as easy as accepting, and a grey text reject beside a
   solid accept is the most commonly enforced failure. */
.xc{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:14px;display:flex;justify-content:center}
.xc-box{
  width:100%;max-width:720px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;box-shadow:0 16px 44px rgba(25,25,50,.16);
}
.xc-text{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.xc-text a{color:var(--blue)}
.xc-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.xc-btn{
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:11px 22px;border-radius:9px;border:1px solid var(--blue);
  background:var(--blue);color:#fff;
}
/* Same size and weight as Accept, distinguished only by fill. */
.xc-btn.xc-reject{background:var(--card);color:var(--blue)}
.xc-btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.xc-link{
  font:inherit;font-size:14.5px;background:none;border:0;cursor:pointer;
  color:var(--muted);text-decoration:underline;padding:11px 4px;
}
.xc-link:hover{color:var(--ink)}
.xc-detail{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.xc-cat{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:13.5px;color:var(--muted);line-height:1.45}
.xc-cat input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--blue)}
.xc-cat b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@media (max-width:560px){
  .xc{padding:10px}
  .xc-box{padding:15px 16px;border-radius:12px}
  .xc-text{font-size:13.5px;line-height:1.45;margin-bottom:12px}
  /* Two across, not stacked. Equal width so neither reads as the default. */
  .xc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .xc-btn{padding:12px 8px;font-size:14.5px;width:100%}
  .xc-link{grid-column:1 / -1;text-align:center;padding:6px 4px;font-size:13.5px}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Red Hat Text',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Poppins',sans-serif;line-height:1.1;letter-spacing:-0.02em}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:20px}
section{padding:96px 0}
.section-head{max-width:840px;margin-bottom:56px}
.section-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;text-wrap:balance}
.section-head p{margin-top:16px;color:var(--muted);font-size:18px;max-width:660px}

/* ---------- nav ---------- */
/* Sticky nav is 64px plus a 2px border, so anything scrolled to by
   anchor needs to clear 66px. */
section[id],div[id].stats{scroll-margin-top:84px}
nav{position:sticky;top:0;z-index:50;background:rgba(251,251,253,.94);backdrop-filter:blur(8px);border-bottom:2px solid transparent;border-image:var(--grad) 1}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--ink)}
.brand svg{height:34px;width:34px;flex-shrink:0}
.brand-img{height:38px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .15s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a.btn-blue,.nav-links a.btn-blue:hover{color:#fff}
.btn{display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border-radius:3px;transition:background .15s,border-color .15s,color .15s}
.btn-blue{background-image:var(--grad);color:#fff}
.btn-blue:hover{filter:brightness(.9)}
.btn-line{border:2px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.nav-cta{padding:9px 18px;font-size:12.5px}
@media(max-width:980px){.nav-links a:not(.btn-blue){font-size:13.5px}.nav-links{gap:20px}}

/* Below 860px the links do not fit, and a long page with no navigation at
   all on mobile is worse than a drawer. */
.nav-toggle{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  padding:9px 8px;flex-direction:column;justify-content:space-between;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;height:2px;width:100%;border-radius:2px;background:var(--ink);
  transition:transform .22s ease,opacity .16s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.nav-drawer{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px 24px 24px}
.nav-drawer ul{list-style:none}
.nav-drawer li a{display:block;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none}
.nav-drawer .btn{display:block;text-align:center;margin-top:20px}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-drawer{display:block}
  .nav-drawer[hidden]{display:none}
}
@media(prefers-reduced-motion:reduce){.nav-toggle span{transition:none}}

/* ---------- hero ---------- */
.hero{padding:112px 0 96px;border-bottom:2px solid transparent;border-image:var(--grad) 1;background:linear-gradient(115deg,rgba(251,251,253,.97) 0%,rgba(251,251,253,.9) 38%,rgba(251,251,253,.7) 68%,rgba(243,242,250,.5) 100%),url('hero-bg.jpg') center/cover no-repeat,var(--paper);color:var(--ink)}
.hero .eyebrow{color:var(--blue)}
.hero h1{color:var(--ink)}
.hero-sub{color:var(--ink)}
.hero .btn-line{border-color:var(--ink);color:var(--ink)}
.hero .btn-line:hover{background:var(--ink);color:var(--paper)}
.hero-grid{max-width:860px}
.hero h1{font-size:clamp(38px,5.2vw,62px);font-weight:800;line-height:1.14;text-wrap:balance}
.hero h1 em{font-style:normal;padding-bottom:.08em;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:26px;font-size:19px;max-width:560px}
.hero-ctas{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}


/* ---------- stats ---------- */
.stats{padding:72px 0;border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{border-left:3px solid;border-image:linear-gradient(180deg,#4C5BF5,#E545BE) 1;padding-left:22px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.stat-body{flex:1;min-width:0}
.stat-icon{flex:none;width:66px;height:66px;margin-top:2px}
.stat-icon svg{width:100%;height:100%;display:block}
@media(max-width:1000px) and (min-width:761px){.stat-icon{width:54px;height:54px}}
@media(max-width:420px){.stat-icon{width:54px;height:54px}}
.stat .num{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(36px,4vw,52px);letter-spacing:-0.02em}
.stat p{color:var(--muted);font-size:15.5px;margin-top:6px}
.stats-note{margin-top:30px;font-size:12px;color:var(--muted);font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.02em}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr}}

/* ---------- audience cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:30px 28px;transition:border-color .15s}
.card:hover{border-color:var(--ink)}
.card h3{font-size:19px;font-weight:700;margin-bottom:10px}
.card p{color:var(--muted);font-size:15.5px}
.card .tag{font-family:'Poppins',sans-serif;font-weight:600;font-size:10px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;display:block;margin-bottom:16px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* ---------- journey ---------- */
.journey{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Two by two rather than four across: at 1120px wide, four columns left
   each step about 250px, which is narrower than the mockup wants and
   narrower than the copy reads well at. */
.jn-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 38px}
.jn{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
/* Fixed panel so a portrait phone and a landscape portal sit at the same
   visual weight instead of one dwarfing the other. */
.jn-screen{flex:none;width:228px;height:242px;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:18px 16px;display:flex;align-items:center;justify-content:center}
.jn-screen svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.jn .no{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--blue);display:block;margin-bottom:9px}
.jn h3{font-size:19px;font-weight:700;margin-bottom:10px;text-wrap:balance}
.jn p{font-size:15px;color:var(--muted)}
@media(max-width:1000px){.jn-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){
  .jn{grid-template-columns:1fr;gap:20px}
  /* Height stays definite so max-height:100% on the SVG has something
     to resolve against. */
  .jn-screen{width:100%;height:262px;padding:22px 16px}
}

/* ---------- method ---------- */
.steps{border-top:2px solid var(--ink)}
.step{display:grid;grid-template-columns:90px 300px 1fr;gap:32px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step .no{font-family:'Poppins',sans-serif;font-weight:600;color:var(--blue);font-size:13px}
.step h3{font-size:20px;font-weight:700}
.step p{color:var(--muted);font-size:15.5px}
@media(max-width:860px){.step{grid-template-columns:56px 1fr;gap:16px}.step p{grid-column:2}}

/* ---------- platforms ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plat{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:28px 26px;transition:border-color .15s}
.plat:hover{border-color:var(--ink)}
/* Logo files rather than inline paths, so swapping in each platform's
   official artwork is a file drop and not an edit to this page. */
.plat-icon{display:block;width:34px;height:34px;margin-bottom:22px}
.plat-icon img{width:100%;height:100%;display:block;object-fit:contain}
.plat h3{font-size:18.5px;font-weight:700;margin-bottom:10px}
.plat p{font-size:15px;color:var(--muted)}
@media(max-width:900px){.plat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.plat-grid{grid-template-columns:1fr}}

/* ---------- verticals ---------- */
.vert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vert{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px 22px;transition:border-color .15s}
.vert:hover{border-color:var(--blue)}
.vert h3{font-size:16.5px;font-weight:700;margin-bottom:6px}
.vert p{font-size:14px;color:var(--muted)}
@media(max-width:960px){.vert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vert-grid{grid-template-columns:1fr}}

/* ---------- markets ---------- */
.markets{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mkt{border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden;
  transition:border-color .15s}
.mkt:hover{border-color:var(--ink)}
/* height:auto is load-bearing. The width/height attributes on the tag
   reserve the box against layout shift, but they also apply as
   presentational hints, and a definite height:500px beats aspect-ratio.
   Without this the box renders 500px tall and cover crops a portrait
   slice out of a landscape photo. */
.mkt-img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;
  background:var(--tint);border-bottom:1px solid var(--line)}
.mkt-body{padding:24px 26px 28px}
.mkt h3{font-size:19px;font-weight:700;margin-bottom:9px}
.mkt p{font-size:15px;color:var(--muted)}
.mkt-any{margin-top:32px;font-size:16px;color:var(--muted);max-width:640px}
@media(max-width:900px){.mkt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mkt-grid{grid-template-columns:1fr}}

/* ---------- track record ---------- */
.record-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.record-grid h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-bottom:24px;text-wrap:balance}
.record-copy p{color:var(--muted);margin-bottom:18px}
.own-list{list-style:none;border-top:2px solid var(--ink)}
.own-list li{padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.own-list b{color:var(--ink);font-weight:600}
@media(max-width:820px){.record-grid{grid-template-columns:1fr}}

/* ---------- engagement ---------- */
.eng-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.eng{border:1px solid var(--line);border-radius:4px;padding:38px 34px;background:var(--card)}
.eng.feature{border:2px solid var(--ink)}
.eng .phase{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:16px}
.eng h3{font-size:24px;font-weight:800;margin-bottom:12px}
.eng>p{color:var(--muted);font-size:15.5px;margin-bottom:22px}
.eng ul{list-style:none}
.eng li{padding:10px 0;border-top:1px solid var(--line);font-size:15px}
@media(max-width:760px){.eng-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{background:var(--dark);color:#F4F4FF;text-align:center;padding:110px 0}
.contact .eyebrow{color:#8E97FF}
.contact h2{font-size:clamp(32px,4.6vw,52px);font-weight:800;max-width:760px;margin:0 auto;text-wrap:balance}
.contact p{color:var(--muted-inv);margin:22px auto 38px;max-width:520px;font-size:18px}

/* ---- Qualifying funnel -------------------------------------------- */
.xf{position:relative}
.xf-progress{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:30px}
.xf-progress i{display:block;height:100%;width:0;background-image:var(--grad);transition:width .35s cubic-bezier(.4,0,.2,1)}

.xf-screen{animation:xfIn .26s ease-out}
@keyframes xfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.xf-title{font-family:'Poppins',sans-serif;font-weight:800;font-size:27px;line-height:1.2;
  color:var(--ink);margin:0 0 8px;text-align:center}
.xf-title-sm{font-size:23px}
.xf-title-xs{font-size:19px;line-height:1.25;margin-bottom:8px}
.xf-sub{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 22px;text-align:center}

.xf-val{display:none;margin:0 0 14px;text-align:center;font-size:13.5px;font-weight:600;color:#C0392B}
.xf-val.show{display:block}

.xf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.xf-card{-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;
  padding:18px 10px;cursor:pointer;background:var(--card);border:1.5px solid var(--line);
  border-radius:6px;font-family:'Red Hat Text',system-ui,sans-serif;font-size:14px;line-height:1.3;
  color:var(--ink);text-align:center;transition:border-color .13s,background .13s,transform .13s}
.xf-card-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--muted);transition:color .13s}
.xf-card-icon svg{width:26px;height:26px}
@media (hover:hover) and (pointer:fine){
  .xf-card:hover{border-color:var(--blue);background:var(--tint)}
  .xf-card:hover .xf-card-icon{color:var(--blue)}
}
.xf-card.picked{border-color:var(--blue);border-width:2px;background:var(--tint);
  box-shadow:0 0 0 3px rgba(76,91,245,.14)}
.xf-card.picked .xf-card-icon{color:var(--blue)}

.xf-opts{display:grid;gap:9px;margin-bottom:24px}
/* Numeric ranges are short enough to sit two across, which turns eight
   rows of scrolling into four. Tighter padding and type because the box
   is half the width, and the tick needs less room to clear the label. */
.xf-opts-2{grid-template-columns:1fr 1fr;gap:8px}
.xf-opts-2 .xf-opt{padding:14px 10px;font-size:15px}
.xf-opts-2 .xf-opt.picked{padding-right:10px;padding-top:18px}
.xf-opts-2 .xf-opt.picked::after{top:5px;right:5px;width:15px;height:15px;background-size:15px 15px}
.xf-opts-2 .xf-opt.picked::before{top:9px;right:9px;width:7px;height:4px}
.xf-opt-wide{grid-column:1/-1}
@media(max-width:340px){.xf-opts-2{grid-template-columns:1fr}}
/* Selected state carries a mark, not just a tint, so it cannot be confused
   with a hover or focus ring. */
.xf-opt,.xf-card{position:relative}
.xf-opt:active,.xf-card:active{transform:scale(.99)}
.xf-opt.picked::after,.xf-card.picked::after{
  content:'';position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;
  background-image:var(--grad);
  background-repeat:no-repeat;background-position:center;background-size:19px 19px;
  box-shadow:inset 0 0 0 19px transparent}
.xf-opt.picked::before,.xf-card.picked::before{
  content:'';position:absolute;top:14px;right:14px;width:9px;height:5px;z-index:1;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.xf-opt.picked{padding-right:38px}
.xf-opt{padding:15px 17px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:center;background:var(--card);
  border:1.5px solid var(--line);border-radius:6px;
  font-family:'Red Hat Text',system-ui,sans-serif;font-size:16px;color:var(--ink);
  transition:border-color .13s,background .13s,transform .13s}
@media (hover:hover) and (pointer:fine){
  .xf-opt:hover{border-color:var(--blue);background:var(--tint)}
}
.xf-opt.picked{border-color:var(--blue);border-width:2px;background:var(--tint);font-weight:600;
  box-shadow:0 0 0 3px rgba(76,91,245,.14)}

.shake{animation:xfShake .5s}
@keyframes xfShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.xf-bar{display:flex;gap:10px;align-items:stretch}
.xf-bar-left{justify-content:flex-start;margin-top:20px}
.xf-back{flex:none;width:48px;cursor:pointer;background:var(--card);border:1.5px solid var(--line);
  border-radius:6px;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:border-color .13s,color .13s}
.xf-back svg{width:19px;height:19px}
.xf-back:hover{border-color:var(--ink);color:var(--ink)}
.xf-next{flex:1;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:15px 26px;border-radius:6px;
  background-image:var(--grad);color:#fff;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.xf-next:hover{filter:brightness(.92)}
.xf-next:disabled{opacity:.55;cursor:default}

.xf-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 16px;margin-top:20px}
.xf-trust span{font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.xf-trust span+span::before{content:'';display:inline-block;width:1px;height:10px;
  background:var(--line);margin-right:16px;vertical-align:-1px}

.xf-eval{max-width:290px;margin:6px auto 8px;text-align:left}
.xf-eval-item{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15px;color:var(--muted);opacity:.45;transition:opacity .25s,color .25s}
.xf-eval-item.doing{opacity:1}
.xf-eval-item.done{opacity:1;color:var(--ink)}
.xf-eval-icon{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--blue)}
.xf-eval-icon svg{width:19px;height:19px}
.xf-spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--blue);
  border-radius:50%;animation:xfSpin .7s linear infinite}
@keyframes xfSpin{to{transform:rotate(360deg)}}

.xf-verdict{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.xf-verdict-tick{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background-image:var(--grad);color:#fff;margin-bottom:14px}
.xf-verdict-tick svg{width:24px;height:24px}

.xf-form{margin-top:16px}
.xf-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xf-form label{display:block;margin-bottom:12px;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left}
.xf-form input,.xf-form textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;
  font-family:'Red Hat Text',system-ui,sans-serif;font-size:16px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:6px;transition:border-color .13s}
.xf-form input:focus,.xf-form textarea:focus{outline:none;border-color:var(--blue)}
.xf-form textarea{resize:vertical}
.xf-form label.xf-consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 18px;
  font-family:'Red Hat Text',system-ui,sans-serif;font-size:13.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted);line-height:1.45;text-align:left}
.xf-form label.xf-consent input{width:auto;margin:3px 0 0;flex:none}
.xf-submit{width:100%}
/* Budget slider. Banded stops rather than free numbers, so the control
   stays easy to land on with a thumb. */
.xf-slider{margin:6px 0 26px}
.xf-slider-val{display:block;text-align:center;margin-bottom:18px;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:27px;line-height:1.2;
  background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.xf-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:var(--line);background-image:var(--grad);background-repeat:no-repeat;
  background-size:var(--pct,28%) 100%;outline:none;cursor:pointer}
.xf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:50%;background-image:var(--grad);border:3px solid var(--card);cursor:grab;
  box-shadow:0 2px 10px rgba(76,91,245,.4)}
.xf-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08)}
.xf-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background-image:var(--grad);
  border:3px solid var(--card);cursor:grab;box-shadow:0 2px 10px rgba(76,91,245,.4)}
.xf-range:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.xf-slider-ends{display:flex;justify-content:space-between;margin-top:10px;
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.xf-phone{display:flex;gap:8px;margin-top:6px}
.xf-dial{flex:none;width:150px;padding:12px 8px;cursor:pointer;
  font-family:'Red Hat Text',system-ui,sans-serif;font-size:15px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:6px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D5D78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;padding-right:28px}
.xf-dial:focus{outline:none;border-color:var(--blue)}
.xf-phone input{flex:1;margin-top:0}
@media(max-width:420px){.xf-dial{width:118px;font-size:14px}}
.xf-consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.xf-consent a:hover{color:var(--pink)}
.xf-req{color:#C0392B;margin-left:3px;font-weight:700}
.xf-opt-mark{margin-left:5px;font-weight:400;letter-spacing:0;text-transform:none;
  font-family:'Red Hat Text',system-ui,sans-serif;font-size:12px;opacity:.75}
.xf-legend{margin:0 0 14px;font-size:12px;color:var(--muted);text-align:left}
.xf-spin-lg{display:block;width:34px;height:34px;border-width:3px;margin:8px auto 20px}
.xf-err{margin:12px 0 0;min-height:20px;font-size:14px;color:#C0392B;text-align:center}
.xf-done{text-align:center;padding:20px 0 10px}

.xf :focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* inline mount, sits as a light card on the dark contact section */
.flow-inline{max-width:560px;margin:0 auto;background:var(--paper);border-radius:8px;padding:36px 34px 30px}

/* modal mount */
.flow-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(19,19,39,.74);backdrop-filter:blur(3px);padding:20px}
.flow-overlay.active{display:flex}
.flow-card{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
  background:var(--paper);border-radius:8px;padding:44px 38px 34px;box-shadow:0 24px 70px rgba(19,19,39,.42)}
.flow-close{position:absolute;top:13px;right:13px;width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;z-index:2}
.flow-close:hover{background:var(--tint);color:var(--ink)}

.xf-exit{position:absolute;inset:0;z-index:20;display:flex;align-items:center;
  justify-content:center;padding:30px;border-radius:8px;
  background:rgba(251,251,253,.965);backdrop-filter:blur(2px);animation:xfIn .18s ease-out}
.xf-exit[hidden]{display:none}
.xf-exit-box{text-align:center;max-width:340px}
.xf-exit-icon{width:50px;height:50px;border-radius:50%;background:rgba(76,91,245,.11);
  color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.xf-exit-icon svg{width:25px;height:25px}
.xf-exit-title{font-family:'Poppins',sans-serif;font-size:21px;font-weight:800;
  color:var(--ink);margin:0 0 8px}
.xf-exit-text{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0 0 24px}
.xf-exit-btns{display:flex;flex-direction:column;gap:9px}
.xf-exit-stay{padding:14px;border:0;border-radius:6px;cursor:pointer;background-image:var(--grad);
  color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.xf-exit-leave{padding:12px;border:1.5px solid var(--line);border-radius:6px;cursor:pointer;
  background:transparent;color:var(--muted);
  font-family:'Red Hat Text',system-ui,sans-serif;font-size:14px;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){
  .xf-exit-stay:hover{filter:brightness(.92)}
  .xf-exit-leave:hover{border-color:var(--ink);color:var(--ink)}
}
.flow-float{position:fixed;right:22px;bottom:22px;z-index:150;opacity:0;pointer-events:none;
  transform:translateY(10px);transition:opacity .22s,transform .22s;border:0;cursor:pointer;
  box-shadow:0 10px 30px rgba(76,91,245,.36)}
.flow-float.visible{opacity:1;pointer-events:auto;transform:none}

@media(max-width:560px){
  .flow-card{padding:40px 20px 26px;border-radius:6px}
  .flow-inline{padding:30px 18px 24px}
  .xf-title{font-size:22px}
  .xf-title-sm{font-size:20px}
  .xf-cards{grid-template-columns:repeat(2,1fr)}
  .xf-pair{grid-template-columns:1fr}
  .flow-float{right:14px;bottom:14px;left:14px}
}

.section-cta{text-align:center;margin-top:64px}
@media(max-width:640px){.section-cta{margin-top:44px}}
.section-cta .btn{cursor:pointer}
.contact .email{display:block;margin-top:26px;font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--muted-inv);text-decoration:none}
.contact .email:hover{color:#fff}

/* ---------- footer ---------- */
footer{background:var(--dark);color:var(--muted-inv);padding:34px 0;font-size:13.5px;border-top:1px solid #26264A}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted-inv);text-decoration:none}
footer a:hover{color:#fff}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ===================================================================
   Sub-page layer. Everything below is used by the location, platform
   and vertical pages, not by the home page.
   =================================================================== */

/* Home nav anchors are #fragments; sub-pages need real paths, and a
   "Services" style dropdown rather than a jump list. */
.nav-links .has-sub{position:relative}
.nav-links .has-sub>a::after{content:'';display:inline-block;margin-left:6px;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:270px;background:var(--card);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 18px 46px rgba(25,25,50,.13);padding:8px;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .14s,transform .14s;z-index:60}
.nav-links .has-sub:hover .nav-sub,.nav-links .has-sub:focus-within .nav-sub{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-sub li a{display:block;padding:10px 13px;border-radius:4px;font-size:14px;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-sub li a:hover{background:var(--tint);color:var(--blue)}
.nav-drawer .sub-head{font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 0 4px}
.nav-drawer .sub-item a{padding-left:14px;font-weight:500;font-size:14.5px}

/* Page header. Shorter than the home hero: these pages are read, not
   landed on cold, so the fold belongs to the argument not the image. */
.phead{background:var(--tint);border-bottom:1px solid var(--line);padding:56px 0 52px}
.crumb{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb span{margin:0 7px;opacity:.5}
.phead h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(32px,4.6vw,50px);
  line-height:1.08;max-width:880px;text-wrap:balance;margin-bottom:20px}
.phead .lede{font-size:19px;color:var(--muted);max-width:660px}
.phead .btn{margin-top:30px}

/* Body copy column. 68ch is the measure long-form actually reads at. */
.prose{max-width:68ch}
.prose h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(25px,3vw,33px);
  line-height:1.16;margin:52px 0 16px;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;margin:32px 0 10px}
.prose p{margin-bottom:17px;color:var(--muted);font-size:17px}
.prose p strong{color:var(--ink);font-weight:600}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding:0 0 11px 22px;color:var(--muted);font-size:16.5px}
.prose ul li::before{content:'';position:absolute;left:2px;top:10px;width:7px;height:1.5px;
  background:var(--muted);opacity:.55}
.prose a{color:var(--blue)}

/* Pull-out for the one fact per page worth stopping on. */
.note{border-left:3px solid;border-image:linear-gradient(180deg,#4C5BF5,#E545BE) 1;
  padding:4px 0 4px 22px;margin:30px 0 34px}
.note p{font-size:18px;color:var(--ink);margin:0}

/* FAQ. Plain details/summary: no JS, and it stays open for crawlers
   that do not run scripts. */
.faq{border-top:1px solid var(--line);max-width:68ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 34px 20px 0;cursor:pointer;list-style:none;position:relative;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:27px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .16s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq details p{padding:0 0 22px;color:var(--muted);font-size:16.5px;margin:0}
.faq details p+p{padding-top:0;margin-top:-6px}

/* Related links. Every page hands the reader two or three others. */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel{display:block;padding:24px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);text-decoration:none;transition:border-color .15s}
.rel:hover{border-color:var(--ink)}
.rel .k{font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:9px}
.rel h3{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:7px}
.rel p{font-size:14.5px;color:var(--muted)}
@media(max-width:860px){.rel-grid{grid-template-columns:1fr}}

/* Fact tiles. Separate cards with real gaps: the previous version shared
   hairlines and read as one welded block. */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.facts-stack{grid-template-columns:1fr;gap:12px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:24px 22px}
/* line-height must clear the descenders. With background-clip:text the
   glyph IS the painted background, and the background only paints inside
   the element box, so at line-height:1 every g, y, p and j gets sliced at
   the baseline. */
.fact .n{font-family:'Poppins',sans-serif;font-weight:800;font-size:26px;line-height:1.18;
  padding-bottom:2px;margin-bottom:8px;background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fact p{font-size:14.5px;color:var(--muted);margin:0}
@media(max-width:760px){.facts{grid-template-columns:1fr}}

/* Banded sections, so the page has a rhythm rather than one long column. */
.band{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band+.band{border-top:0}

/* Two-column intro: argument on the left, tiles on the right. */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}

/* Card grid for the "what separates them" and "who it suits" blocks. */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:26px 24px;
  transition:border-color .15s}
.pcard:hover{border-color:var(--ink)}
.pcard .k{font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:11px}
.pcard h3{font-size:17.5px;font-weight:700;margin-bottom:9px;line-height:1.25}
.pcard p{font-size:14.5px;color:var(--muted)}
@media(max-width:900px){.pcards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pcards{grid-template-columns:1fr}}

/* Numbered steps, for the "how it runs here" block. */
.plist{counter-reset:pl;max-width:72ch}
.plist li{counter-increment:pl;position:relative;padding:0 0 22px 52px;list-style:none;
  color:var(--muted);font-size:16.5px}
.plist li::before{content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;color:var(--blue)}
.plist li strong{display:block;color:var(--ink);font-weight:700;font-size:17px;margin-bottom:5px;
  font-family:'Poppins',sans-serif}

/* Sub-regions sit indented under their parent country, so a region never
   reads as a standalone market in the dropdown. */
.nav-sub .nav-sub-region a{padding-left:28px;font-size:13.5px;color:var(--muted);position:relative}
.nav-sub .nav-sub-region a::before{content:'';position:absolute;left:15px;top:50%;width:6px;height:1px;
  background:var(--line)}
.nav-sub .nav-sub-region a:hover{color:var(--blue)}
.nav-drawer .sub-item.sub-region a{padding-left:30px;font-size:14px;color:var(--muted)}

/* Closing CTA on sub-pages. The inline funnel was replaced by a button that
   opens the same modal as every other CTA, so behaviour is identical
   wherever it is clicked. */
.contact-cta{margin:34px auto 0;display:inline-block;padding:16px 34px;font-size:14px;border:0;cursor:pointer}

/* Hub pages. A grid of everything beneath them, grouped where the group
   means something (Spain and its regions). */
.hub-group{margin-bottom:46px}
.hub-group:last-child{margin-bottom:0}
.hub-group>h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:23px;margin-bottom:6px}
.hub-group>p{color:var(--muted);font-size:16px;margin-bottom:24px;max-width:66ch}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hub{display:block;padding:24px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  text-decoration:none;transition:border-color .15s}
.hub:hover{border-color:var(--ink)}
.hub .k{font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:9px}
.hub h3,.hub h2{font-size:17.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.hub p{font-size:14.5px;color:var(--muted)}
.hub.sub{background:var(--tint)}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hub-grid{grid-template-columns:1fr}}

/* A card with a destination. Chevron so it reads as clickable without
   needing a separate link line. */
a.pcard-link{text-decoration:none;display:block;position:relative;padding-right:44px}
a.pcard-link::after{content:'';position:absolute;right:24px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg);transition:border-color .15s,right .15s}
a.pcard-link:hover::after{border-color:var(--blue);right:20px}

/* Market tiles are a single link. Previously the image and the heading were
   two separate links to the same place and the paragraph was dead, so on a
   card that is mostly text there was nothing to suggest it went anywhere. */
a.mkt{text-decoration:none;color:inherit}
.mkt-body{display:flex;flex-direction:column;flex:1}
.mkt-go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--blue)}
.mkt-go::after{content:'';width:7px;height:7px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
a.mkt:hover .mkt-go::after{transform:rotate(45deg) translate(2px,-2px)}

/* Same affordance on the hub page cards. */
.hub{position:relative;padding-right:44px}
.hub::after{content:'';position:absolute;right:24px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg);transition:border-color .15s,right .15s}
.hub:hover::after{border-color:var(--blue);right:20px}

/* Platform and vertical cards on the home page: whole card is the link. */
a.plat,a.vert{text-decoration:none;color:inherit;display:block}
a.vert h3{margin-bottom:0}
a.vert{position:relative;padding-right:38px}
a.vert::after{content:'';position:absolute;right:20px;top:50%;width:7px;height:7px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg);transition:border-color .15s,right .15s}
a.vert:hover::after{border-color:var(--blue);right:16px}
.card-go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--blue)}
.card-go::after{content:'';width:7px;height:7px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
a.plat:hover .card-go::after{transform:rotate(45deg) translate(2px,-2px)}

/* Skip link. Hidden until focused, so a keyboard user can jump past a
   sixteen-item nav that otherwise repeats on all 34 pages. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--ink);
  color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;text-decoration:none}
.skip:focus{left:8px;top:8px}
/* Visible focus everywhere. The browser default is easy to lose against
   the pale palette. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}

/* ===================================================================
   Paid landing page. No nav, no outbound links, CTA every screen.
   =================================================================== */
.lp-nav{background:var(--paper);border-bottom:1px solid var(--line);padding:18px 0}
.lp-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-hero{background:var(--tint);border-bottom:1px solid var(--line);padding:64px 0 60px}
.lp-hero h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(32px,5vw,54px);
  line-height:1.08;max-width:17ch;text-wrap:balance;margin-bottom:22px}
.lp-hero h1 em{font-style:normal;padding-bottom:.08em;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lp-hero .lede{font-size:19.5px;color:var(--muted);max-width:56ch;margin-bottom:32px}
.lp-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
.lp-trust span{display:flex;align-items:center;gap:8px}
.lp-trust span::before{content:'';width:15px;height:15px;border-radius:50%;
  background-image:var(--grad);flex:none}
.lp-band{background:var(--dark);color:#F4F4FF;padding:44px 0}
.lp-band .lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.lp-band .n{font-family:'Poppins',sans-serif;font-weight:800;font-size:34px;line-height:1.15;
  padding-bottom:2px;margin-bottom:6px}
.lp-band p{font-size:14.5px;color:var(--muted-inv);margin:0}
.lp-points{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
.lp-point h3{font-family:'Poppins',sans-serif;font-size:17.5px;font-weight:700;margin-bottom:7px}
.lp-point p{font-size:15.5px;color:var(--muted)}
.lp-steps{counter-reset:lp;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none}
.lp-steps li{counter-increment:lp;padding-top:20px;border-top:2px solid var(--line);position:relative}
.lp-steps li::before{content:counter(lp,decimal-leading-zero);position:absolute;top:-13px;left:0;
  background:var(--paper);padding-right:10px;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:12px;color:var(--blue)}
.lp-steps strong{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:16.5px;
  margin-bottom:7px}
.lp-steps p{font-size:14.5px;color:var(--muted);margin:0}
.lp-mkts{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.lp-mkts span{border:1px solid var(--line);border-radius:3px;padding:9px 15px;background:var(--card);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px}
.lp-cta{text-align:center;padding:16px 0 0}
.lp-cta .btn{padding:17px 38px;font-size:14.5px;border:0;cursor:pointer}
.lp-foot{background:var(--dark);color:var(--muted-inv);padding:28px 0;font-size:13px;text-align:center}
@media(max-width:820px){
  .lp-band .lp-stats{grid-template-columns:1fr;gap:22px}
  .lp-points{grid-template-columns:1fr}
  .lp-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.lp-steps{grid-template-columns:1fr}}

/* Legal pages. Narrow measure and generous spacing: these are read when
   somebody is checking something specific, not skimmed. */
.legal{max-width:70ch}
.legal h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(21px,2.4vw,26px);
  margin:46px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:15px;color:var(--muted);font-size:16.5px;line-height:1.62}
.legal p strong{color:var(--ink);font-weight:600}
.legal a{color:var(--blue)}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
  background:var(--tint);padding:2px 6px;border-radius:3px}
.legal-entity{background:var(--tint);border:1px solid var(--line);border-radius:6px;
  padding:24px 26px;margin:0 0 26px}
.legal-entity p:last-child{margin-bottom:0}
.legal-date{font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--muted);
  margin-top:22px}
.legal-nav{display:flex;gap:20px}
.legal-nav a{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--muted);text-decoration:none}
.legal-nav a:hover{color:var(--blue)}

/* Stat tile icons. Small, outlined and in the brand blue: enough to give
   the tile a focal point without competing with the number, which is the
   thing being read. A tile whose stat has no honest match gets none. */
/* Icon and number share a row; the description spans beneath both. Grid
   rather than flex so a tile with no icon still lays out correctly: the
   number simply auto-places into the first column. */
.fact{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 13px}
.fact .n{grid-row:1;margin-bottom:0}
.fact p{grid-column:1 / -1;margin-top:10px}
.fact-i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:8px;background:var(--tint);border:1px solid var(--line);
  color:var(--blue);grid-row:1;grid-column:1}
.fact-i svg{width:18px;height:18px}
.fact{transition:border-color .15s,background .15s}
.fact:hover{border-color:var(--blue)}
.fact:hover .fact-i{background:#fff}

/* Contact field state: one icon per field, right-aligned inside the box.
   The person never learns whether the tick came from a confirmed live
   check, an inconclusive one, or local rules alone. */
.xf-wrap{position:relative;display:block}
.xf-state{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;pointer-events:none}
.xf-phone{position:relative}
.xf-phone .xf-state{right:12px}
.xf-state.is-busy{border:2px solid var(--line);border-top-color:var(--blue);
  border-radius:50%;animation:xfspin .7s linear infinite}
@keyframes xfspin{to{transform:translateY(-50%) rotate(360deg)}}
.xf-state.is-ok::after{content:'';position:absolute;left:4px;top:1px;width:6px;height:11px;
  border:solid #1E9E5A;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.xf-state.is-bad::after,.xf-state.is-bad::before{content:'';position:absolute;left:8px;top:2px;
  width:2.5px;height:14px;background:#D42A6B;border-radius:2px}
.xf-state.is-bad::after{transform:rotate(45deg)}
.xf-state.is-bad::before{transform:rotate(-45deg)}
.xf-hint{display:block;font-size:13.5px;line-height:1.4;margin-top:6px}
.xf-hint.is-err{color:#D42A6B}
.xf-hint.is-tip{color:var(--muted)}
.xf-fix{background:none;border:0;padding:0;font:inherit;color:var(--blue);
  text-decoration:underline;cursor:pointer}
/* Room for the status icon, so it never sits on top of what they typed. */
.xf-wrap input,.xf-phone input{padding-right:40px}

/* A field that was left empty on submit. Every one is marked at once, so
   somebody with four gaps sees four, not one browser tooltip at a time.
   The mark clears itself the moment the field is filled in. */
.xf-form label.is-wrong > input,
.xf-form label.is-wrong > textarea,
.xf-form label.is-wrong .xf-phone,
.xf-form label.is-wrong .xf-wrap > input{border-color:#D42A6B;background:#FFF7FA}
.xf-form label.is-wrong{color:#D42A6B}
.xf-form label.xf-consent.is-wrong{color:#D42A6B}
.xf-form label.xf-consent.is-wrong input{outline:2px solid #D42A6B;outline-offset:2px}
.xf-form label.shake{animation:xfnudge .4s}
@keyframes xfnudge{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.xf-reassure{margin-top:12px;font-size:13.5px;color:var(--muted);text-align:center}

/* Five steps in a two-column grid leaves one on its own. The last spans
   both columns and centres, so the row reads as a conclusion rather than
   as a gap where a sixth should be. */
.jn-grid > .jn:last-child{grid-column:1 / -1;max-width:560px;margin:0 auto}
.jn-cta{margin-top:40px;text-align:center}
.jn-cta .btn{border:0;cursor:pointer}
@media(max-width:900px){.jn-grid > .jn:last-child{max-width:none}}

/* The offer screen. Sits between the questions and the form so the form is
   not a surprise: they have already agreed to a call before anything asks
   for a phone number. */
.xf-offer{margin-top:20px;text-align:center}
.xf-offer .xf-sub{max-width:40ch;margin:10px auto 22px}
.xf-offer-points{list-style:none;padding:0;margin:0 auto 26px;display:inline-flex;
  flex-direction:column;gap:9px;text-align:left}
.xf-offer-points li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--muted)}
.xf-offer-points svg{width:15px;height:15px;color:#1E9E5A;flex:none}
.xf-offer-yes{display:block;width:100%;max-width:340px;margin:0 auto;border:0;cursor:pointer;
  padding:17px 28px;font-size:14.5px}
/* Deliberately quiet. It is a way out, not a choice being offered equally. */
.xf-offer-no{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:'Red Hat Text',sans-serif;font-size:14.5px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.xf-offer-no:hover{color:var(--ink)}
@media(max-width:560px){.xf-offer-points li{font-size:15px}}
.xf-offer-thanks{font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}

/* Line breaking, everywhere rather than on the few headings that had it.
   A heading that drops one short word onto its own line looks like a
   mistake, and the funnel headings do it often because they are short and
   the modal is narrow.

   balance evens the lines of a heading; pretty only stops a single word
   being orphaned on the last line, which is what body copy needs. Both
   degrade to normal wrapping where unsupported. */
h1,h2,h3,h4,h5,
.xf-title,.xf-sub,.xf-contact .xf-title,.xf-offer .xf-title,
.section-head h2,.hero h1,.jn h3,.fact .n,
.xf-card span,.xf-opt{text-wrap:balance}

p,.hero-sub,.section-head p,.jn p,.fact p,
.xf-offer .xf-sub,.xf-contact .xf-sub,.xc-text{text-wrap:pretty}