/* ClientFlow — shared styles.
   One external stylesheet rather than inlining per page: it is fetched once and
   then served from cache on every other page, which is the faster trade for a
   multi-page site. */

:root{
  --ink:#07090D; --ink-2:#0C1017; --panel:#11161F; --panel-2:#161C27; --panel-3:#1B2331;
  --line:#1E2634; --line-soft:#171E29;
  --fg:#EEF2F7; --fg-2:#9AA7B8; --fg-3:#6B7787;
  --blue:#2E6BFF; --blue-soft:rgba(46,107,255,.14); --blue-dim:rgba(46,107,255,.4);
  --amber:#FFB443; --amber-soft:rgba(255,180,67,.13);
  --hot:#FF5C5C; --warm:#FFB020; --good:#3ECF8E;
  --max:1160px;
  --sans:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:0;top:-80px;background:var(--amber);color:#000;padding:10px 16px;font-weight:700;z-index:200}
.skip:focus{top:0}
/* Spam trap: invisible to people, still in the page for bots. Clipped rather than
   pushed off to the left, which read as "content off the screen". */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.tnum{font-variant-numeric:tabular-nums}

h1,h2,h3{line-height:1.08;letter-spacing:-.03em;font-weight:680;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.6vw,4rem)}
h2{font-size:clamp(1.85rem,4vw,2.8rem)}
h3{font-size:1.14rem;letter-spacing:-.015em;line-height:1.3}
p{text-wrap:pretty}
.lede{font-size:clamp(1.04rem,1.6vw,1.2rem);color:var(--fg-2);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--blue)}
.center{margin-left:auto;margin-right:auto;text-align:center}
.center .eyebrow::before{display:none}

section{padding:clamp(60px,7.5vw,104px) 0;position:relative}
.sec-head{max-width:62ch;margin-bottom:clamp(30px,4.2vw,50px)}
.sec-head p{margin-top:14px}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.stuck{background:rgba(7,9,13,.85);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.bar{display:flex;align-items:center;gap:22px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;min-height:44px}
.brand svg{width:26px;height:26px;flex:0 0 auto}
.brand .brand-mark{width:36px;height:36px;flex:0 0 auto;object-fit:contain}
nav.main{display:flex;gap:22px;margin-left:12px}
nav.main a{font-size:14.5px;color:var(--fg-2);font-weight:500;transition:color .18s;padding:4px 0;border-bottom:1.5px solid transparent}
nav.main a:hover{color:var(--fg)}
nav.main a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--amber)}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.login-link{font-size:14.5px;color:var(--fg-2);font-weight:550;padding:9px 13px;border-radius:8px;transition:.18s;white-space:nowrap}
.login-link:hover{color:var(--fg);background:var(--panel)}
/* Below 460px the header Log in is dropped for space, so it reappears inside the
   mobile menu. Without it an existing customer on a phone has no way to sign in. */
.nav-login{display:none!important}
@media(max-width:460px){
  .login-link{display:none}
  nav.main.open .nav-login{display:block!important;color:var(--amber)}
}

/* Mobile navigation. Hiding nav.main below 940px without a replacement left
   phone users with no way off the page they landed on, which is the majority
   of this site's audience. */
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  width:38px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex:0 0 auto}
.nav-toggle:hover{border-color:var(--blue)}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--fg);position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--fg);transition:transform .22s}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:940px){
  header{position:fixed}
  .bar{position:relative}
  /* order pushes the toggle past .right, which carries margin-left:auto -
     without it the button sits stranded next to the logo. */
  .nav-toggle{display:flex;order:9;margin-left:8px}
  nav.main{
    position:absolute;top:calc(100% + 1px);left:-24px;right:-24px;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;margin:0;padding:6px 24px 14px;
    display:none;
  }
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;font-size:16px;border-bottom:1px solid var(--line-soft)}
  nav.main a:last-child{border-bottom:none}
  nav.main a[aria-current="page"]{border-bottom-color:var(--line-soft);color:var(--amber)}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:#0A0A0A;font-weight:700;font-size:15px;padding:12px 20px;border-radius:100px;border:none;cursor:pointer;font-family:inherit;transition:transform .18s,box-shadow .18s;box-shadow:0 6px 22px rgba(255,180,67,.18);white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,180,67,.28)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-line{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn-line:hover{border-color:var(--blue);box-shadow:none}

/* ---------- Page hero (inner pages) ---------- */
.phero{padding-top:124px;padding-bottom:clamp(42px,5vw,64px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:520px;
  background:radial-gradient(ellipse at center,rgba(46,107,255,.13),transparent 68%);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero h1 em{font-style:normal;color:var(--amber)}
.phero .lede{margin-top:18px}

/* On-page section nav. Used where one page carries several distinct topics,
   so a visitor can reach the one they came for without scrolling past the rest. */
.jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.jump a{font-size:13.5px;font-weight:550;color:var(--fg-2);background:var(--panel);
  border:1px solid var(--line-soft);border-radius:999px;padding:7px 15px;
  transition:border-color .2s,color .2s,background .2s}
.jump a:hover{color:var(--fg);border-color:var(--blue);background:var(--panel-2)}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:13px}
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:24px 22px;transition:border-color .22s,transform .22s}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card .ico,.bento .ico{width:36px;height:36px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ico svg,.bento .ico svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px;color:var(--fg-2)}

/* ---------- Steps ---------- */
.steps{display:grid;gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.step{background:var(--panel);padding:26px 24px;display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
@media(max-width:640px){.step{grid-template-columns:1fr;gap:10px}}
.step .num{font-size:12.5px;font-weight:750;color:var(--blue);letter-spacing:.1em;padding-top:4px}
.step h3{margin-bottom:7px}
.step p{font-size:14.5px;color:var(--fg-2);max-width:64ch}
.step code{font-family:var(--mono);font-size:12.5px;background:var(--ink);border:1px solid var(--line-soft);border-radius:6px;padding:2px 7px;color:var(--blue)}

/* ---------- Stat strip ---------- */
.strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:32px;padding-bottom:32px}
@media(max-width:720px){.strip .wrap{grid-template-columns:repeat(2,1fr);gap:24px}}
.stat .n{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.stat .n .u{color:var(--blue)}
.stat .l{font-size:13px;color:var(--fg-3);margin-top:6px}

/* A lead sliding into the hero dashboard. .fresh is the pre-animation state,
   removed on the next frame so the row animates to its resting position. */
.sr{transition:opacity .45s,transform .45s}
.sr.fresh{opacity:0;transform:translateY(-12px)}
@media(prefers-reduced-motion:reduce){.sr,.sr.fresh{transition:none;opacity:1;transform:none}}

/* ---------- Bento grid ----------
   Asymmetric modules so a visitor can scan several value propositions at once
   instead of scrolling a stack of equal-weight feature cards. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.bento>*{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;
  padding:24px 22px;transition:border-color .22s,transform .22s}
.bento>*:hover{border-color:var(--line);transform:translateY(-2px)}
.b-demo{grid-column:span 4;grid-row:span 2;display:flex;flex-direction:column}
.b-sm{grid-column:span 2}
.b-md{grid-column:span 3}
.bento h3{font-size:1.02rem;margin-bottom:7px;letter-spacing:-.01em}
.bento p{font-size:14px;color:var(--fg-2)}
.bento .ico{margin-bottom:13px;flex:0 0 auto}
@media(max-width:900px){
  .bento{grid-template-columns:1fr}
  .b-demo,.b-sm,.b-md{grid-column:auto;grid-row:auto}
}

/* Live scorer. The same arithmetic the product runs, put on the marketing page
   so the visitor can test the claim instead of being asked to believe it. */
.tryit{display:flex;flex-direction:column;gap:18px;flex:1}
.tryit .chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.8px;font-weight:550;color:var(--fg-2);background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:999px;padding:7px 13px;cursor:pointer;
  transition:.16s;font-family:inherit;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--line);color:var(--fg)}
.chip .p{font-variant-numeric:tabular-nums;color:var(--fg-3);font-weight:700;font-size:11.5px}
.chip[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue);color:var(--fg)}
.chip[aria-pressed="true"] .p{color:var(--good)}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tryit .out{display:flex;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line-soft);margin-top:auto}
.tryit .big{font-size:2.9rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;min-width:2.6ch;transition:color .3s}
.tryit .band b{display:block;font-size:1rem;letter-spacing:-.02em}
.tryit .band span{font-size:12.5px;color:var(--fg-3)}
.tryit .meter{height:5px;border-radius:3px;background:var(--ink-2);overflow:hidden;margin-top:11px}
.tryit .meter i{display:block;height:100%;border-radius:3px;transition:width .38s cubic-bezier(.4,0,.2,1),background .3s}

/* ---------- Project cards ----------
   Shared so case studies can sit next to the service that produced them,
   not only on the Work page. */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px}
.proj{border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--panel);transition:border-color .22s,transform .22s}
.proj:hover{border-color:var(--line);transform:translateY(-3px)}
.proj .sh{aspect-ratio:16/10;border-bottom:1px solid var(--line-soft)}
.proj .sh svg{width:100%;height:100%}
.proj .meta{padding:18px 20px}
.proj .cat{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3);font-weight:700;margin-bottom:5px}
.proj h3{margin-bottom:6px}
.proj p{font-size:13.8px;color:var(--fg-2)}
.proj .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.proj .tags span{font-size:11px;color:var(--fg-3);background:var(--ink-2);border:1px solid var(--line-soft);padding:3px 9px;border-radius:20px}

/* ---------- Case studies ---------- */
.case{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;
  padding:26px 24px;margin-bottom:14px}
.case-head{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.case-head h3{font-size:1.22rem;letter-spacing:-.02em}
.case-head .cat{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg-3);font-weight:700}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.case-grid h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--amber);font-weight:700;margin-bottom:8px}
.case-grid p{font-size:14px;color:var(--fg-2)}
.case-grid p.pending{color:var(--fg-3);font-style:italic}

/* ---------- Comparison table ---------- */
.ctable-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:16px;background:var(--panel)}
.ctable{width:100%;border-collapse:collapse;min-width:560px}
.ctable th,.ctable td{padding:14px 18px;text-align:left;font-size:14px;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
.ctable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--fg-3);font-weight:700;background:var(--ink-2);white-space:nowrap}
.ctable thead th:nth-child(2){color:var(--blue)}
.ctable tbody th{font-weight:600;color:var(--fg);width:30%}
.ctable td{color:var(--fg-2)}
.ctable td.yes{color:var(--fg)}
.ctable td.yes::before{content:"✓ ";color:var(--good);font-weight:700}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:none}
.ctable tbody tr:hover{background:var(--ink-2)}

/* ---------- Verdict split ---------- */
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.verdict{grid-template-columns:1fr}}
.v-col{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:26px 24px}
.v-col.mine{border-color:var(--blue-dim);background:var(--ink-2)}
.v-col h2{font-size:1.12rem;margin-bottom:16px;letter-spacing:-.02em}
.v-col ul{list-style:none;margin:0 0 20px}
.v-col li{position:relative;padding-left:22px;margin-bottom:11px;font-size:14.2px;color:var(--fg-2)}
.v-col li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--fg-3)}
.v-col.mine li::before{background:var(--blue)}
.v-price{font-size:14px;color:var(--fg-3);padding-top:16px;border-top:1px solid var(--line-soft)}
.v-price b{color:var(--fg);font-size:16px}

/* ---------- Quotes / placeholders ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:13px}
.quote{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column}
.quote .mark{font-size:34px;line-height:1;color:var(--blue);font-weight:700;margin-bottom:6px}
.quote p{font-size:15px;flex:1}
.quote .who{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft)}
.quote .av{width:34px;height:34px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--fg-3)}
.quote .who b{display:block;font-size:13.5px;font-weight:640}
.quote .who span{font-size:12px;color:var(--fg-3)}
.placeholder{border-style:dashed;border-color:var(--line)}
.placeholder p{color:var(--fg-3);font-style:italic}
.todo{display:inline-block;font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);background:var(--amber-soft);padding:3px 9px;border-radius:5px;margin-bottom:11px}

/* ---------- Product shot ---------- */
.shot{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 -1px 0 rgba(255,255,255,.05),0 40px 100px -30px rgba(0,0,0,.9)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#2B3340;display:block}
.shot-bar .url{margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--fg-3);background:var(--ink-2);padding:4px 12px;border-radius:5px}
.shot-body{display:grid;grid-template-columns:172px 1fr;min-height:380px}
@media(max-width:760px){.shot-body{grid-template-columns:1fr}.shot-side{display:none}}
.shot-side{background:var(--panel-2);border-right:1px solid var(--line-soft);padding:14px 10px}
.shot-side .sb{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;font-size:12.5px;color:var(--fg-3);margin-bottom:2px}
.shot-side .sb.on{background:var(--blue-soft);color:var(--blue);font-weight:600}
.shot-side .sb span.d{width:13px;height:13px;border-radius:3px;background:currentColor;opacity:.35;flex:0 0 auto}
.shot-main{padding:18px 20px}
.shot-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.shot-h b{font-size:14px;font-weight:640}
.shot-h span{font-size:11.5px;color:var(--fg-3)}
.shot-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
@media(max-width:560px){.shot-tiles{grid-template-columns:repeat(2,1fr)}}
.st{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:9px;padding:11px 12px}
.st .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.st .k i{width:5px;height:5px;border-radius:50%;display:block}
.st .v{font-size:20px;font-weight:660;letter-spacing:-.02em;line-height:1}
.shot-rows{display:grid;gap:7px}
.sr{display:flex;align-items:center;gap:11px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px}
.sr .sc{width:34px;height:34px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;line-height:1;flex:0 0 auto}
.sr .sc small{font-size:6.5px;text-transform:uppercase;letter-spacing:.04em;margin-top:1.5px;font-weight:700}
.sc.hot{background:rgba(255,92,92,.14);color:var(--hot)}
.sc.warm{background:rgba(255,176,32,.13);color:var(--warm)}
.sc.cold{background:var(--panel-3);color:var(--fg-3)}
.sr .info{min-width:0;flex:1}
.sr .info b{display:block;font-size:12.5px;font-weight:620;margin-bottom:1px}
.sr .info span{font-size:11px;color:var(--fg-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr .t{font-size:10.5px;color:var(--fg-3);flex:0 0 auto}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.cta-band .inner{text-align:center;max-width:660px;margin:0 auto}
.cta-band h2{margin-bottom:14px}
.cta-band .row{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- Forms ---------- */
form.lead{background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;padding:24px}
.f{margin-bottom:13px}
.f label{display:block;font-size:12.5px;color:var(--fg-2);margin-bottom:6px;font-weight:550}
form.lead input,form.lead textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--fg);font-size:15px;font-family:inherit}
form.lead input::placeholder,form.lead textarea::placeholder{color:var(--fg-3)}
form.lead input:focus,form.lead textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
form.lead textarea{min-height:96px;resize:vertical}
form.lead .btn{width:100%;margin-top:5px}
.fnote{font-size:12.5px;color:var(--fg-3);margin-top:12px;text-align:center}

/* ---------- FAQ ---------- */
.faq{max-width:800px}
details{border-bottom:1px solid var(--line-soft)}
summary{padding:19px 0;cursor:pointer;font-weight:620;font-size:1.02rem;list-style:none;display:flex;align-items:center;gap:14px;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--fg-3);border-bottom:2px solid var(--fg-3);transform:rotate(45deg) translateY(-3px);transition:transform .22s;flex:0 0 auto}
details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details p{padding:0 0 20px;color:var(--fg-2);font-size:15.2px;max-width:68ch}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:40px 0 32px}
.fgrid{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer .brand{margin-right:auto}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer nav a{font-size:14px;color:var(--fg-2);display:inline-flex;align-items:center;min-height:44px}
footer nav a:hover{color:var(--fg)}
.legal{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--fg-3)}
.legal a{display:inline-flex;align-items:center;min-height:44px}
/* Links inside running text (terms, privacy, "Log in", "Start here") get a taller
   tap area without changing how the line looks. */
main p a,main li a,.fnote a,.f-check a,.buy-note a{padding:14px 0;margin:-14px 0}
.dos-link{display:inline-flex;align-items:center;min-height:44px}
/* Small labels and helper lines: 13px is the floor on a phone. */
.eyebrow,.fnote,label .sub{font-size:13px}

/* ---------- Shared page parts (were inline per page; now used in both languages) ---------- */
.hero{padding-top:128px;padding-bottom:0;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:1000px;height:600px;
  background:radial-gradient(ellipse at center,rgba(46,107,255,.16),transparent 66%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero-top{max-width:820px;margin:0 auto;text-align:center}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{margin:22px auto 30px}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.hero-note{font-size:13.5px;color:var(--fg-3);margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.hero-note svg{width:15px;height:15px;stroke:var(--good);fill:none;stroke-width:2.4}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.cbox{border-radius:16px;padding:24px 22px;border:1px solid var(--line-soft);background:var(--panel)}
.cbox.bad{border-color:rgba(255,92,92,.24)}
.cbox.good{border-color:rgba(62,207,142,.26)}
.cbox h3{margin-bottom:14px;display:flex;align-items:center;gap:9px;font-size:1.05rem}
.cbox h3 span{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto}
.cbox.bad h3 span{background:rgba(255,92,92,.15);color:var(--hot)}
.cbox.good h3 span{background:rgba(62,207,142,.15);color:var(--good)}
.cbox ul{list-style:none;display:grid;gap:11px}
.cbox li{font-size:14.6px;color:var(--fg-2);padding-left:16px;position:relative}
.cbox li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--fg-3)}

/* Plan cards */
.price{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,4vw,44px);
  display:grid;grid-template-columns:1fr 1px 320px;gap:clamp(26px,4vw,46px);align-items:center}
.price.top{border-color:rgba(255,180,67,.45);box-shadow:0 0 0 1px rgba(255,180,67,.12),0 30px 80px -40px rgba(255,180,67,.35)}
@media(max-width:880px){.price{grid-template-columns:1fr;gap:26px}.price .divider{display:none}}
.price .divider{background:var(--line-soft);align-self:stretch}
.price h2{font-size:1.6rem;margin-bottom:10px}
.price ul{list-style:none;display:grid;gap:10px;margin-top:20px}
.price li{display:flex;gap:10px;align-items:flex-start;font-size:14.8px;color:var(--fg-2)}
.price li svg{width:16px;height:16px;stroke:var(--good);fill:none;stroke-width:2.6;flex:0 0 auto;margin-top:4px}
.pb{text-align:center}
.pb .amt{font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.pb .per{font-size:13.5px;color:var(--fg-3);margin-top:5px}
.pb .then{margin-top:17px;padding-top:17px;border-top:1px solid var(--line-soft);font-size:14.8px;color:var(--fg-2)}
.pb .then b{color:var(--fg);font-size:1.45rem;font-weight:700;letter-spacing:-.02em}
.pb .btn{margin-top:20px;width:100%}
.pb .fine{font-size:12px;color:var(--fg-3);margin-top:11px}
.ribbon{display:inline-block;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:#0A0A0A;background:var(--amber);padding:4px 10px;border-radius:999px;margin-bottom:12px}
.split-note{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
@media(max-width:760px){.split-note{grid-template-columns:1fr}}
.sn{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:20px}
.sn h3{font-size:1rem;margin-bottom:7px}
.sn p{font-size:14.3px;color:var(--fg-2)}

/* Which plan a feature belongs to */
.tag99,.tagcu{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.tag99{color:var(--good);background:rgba(62,207,142,.12)}
.tagcu{color:var(--amber);background:var(--amber-soft)}

/* A call to action after a section, so the next step is never a scroll away */
.cta-row{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:30px}
.cta-row .hint{font-size:13.5px;color:var(--fg-3)}

/* Contact page */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,58px);align-items:start}
@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
.cinfo a{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:15px;transition:color .18s}
.cinfo a:hover{color:var(--amber)}
.cinfo a svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.9;flex:0 0 auto}
.expect{display:grid;gap:11px;margin-top:26px;list-style:none}
.expect li{display:flex;gap:11px;align-items:flex-start;font-size:14.6px;color:var(--fg-2)}
.expect svg{width:16px;height:16px;stroke:var(--good);fill:none;stroke-width:2.6;flex:0 0 auto;margin-top:4px}
.f small{font-weight:400;color:var(--fg-3)}

/* Language switch in the header */
.lang{font-size:13px;font-weight:650;color:var(--fg-2);border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap;transition:.18s;display:inline-flex;align-items:center;min-height:44px}
.lang:hover{color:var(--fg);border-color:var(--blue)}

/* Phone action bar: the audit and a call stay one tap away while reading */
.mbar{display:none}
@media(max-width:760px){
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,9,13,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a{flex:1;justify-content:center;padding:13px 10px;font-size:15px}
  .mbar .call{flex:0 0 auto;background:var(--panel-2);color:var(--fg);border:1px solid var(--line);box-shadow:none}
  body{padding-bottom:78px}
  /* The bar already carries the audit button; in the header it pushed the
     menu toggle off a 390px screen. */
  .bar .right .btn{display:none}
  .hero-note svg{display:none}
}

/* ---------- Polish pass (layout audit, 2026-10-03) ---------- */
/* Secondary grey was 4.4:1 on the page and under 4:1 on panels; this clears
   4.5:1 on both so hints and fine print stay readable in sunlight on a phone. */
:root{--fg-3:#8592A3;--blue-text:#6F96FF}
/* Brand blue is for fills and lines; as small text on the dark panels it sat
   near 4:1, so text that is blue uses a lighter step of the same hue. */
.step .num,.ctable thead th:nth-child(2),.shot-side .sb.on{color:var(--blue-text)}
.shot-rows,.shot-tiles{grid-template-columns:minmax(0,1fr)}
.shot-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:560px){.shot-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nav-toggle{width:44px;height:44px}
/* minmax(0,…) lets the mock dashboard shrink; plain 1fr grew to fit the longest
   lead message and pushed the tiles out of the frame on 360px phones. */
.shot-body{grid-template-columns:172px minmax(0,1fr)}
@media(max-width:760px){.shot-body{grid-template-columns:minmax(0,1fr)}}
.shot-main{min-width:0}
/* No label under 12px. */
.proj .cat,.proj .tags span,.case-head .cat,.case-grid h4,.tag99,.tagcu,.ribbon,.todo,.chip .p{font-size:12px}
.f small{font-size:12.5px}
/* The note under a row of buttons gets its own line instead of trailing the
   last button, so it never reads as part of a button. */
.cta-row .hint{flex-basis:100%;margin-top:6px}
/* On phones every action button is full width: same size, easy to tap. */
@media(max-width:600px){
  .cta-row .btn,.hero-cta .btn,.cta-band .row .btn{width:100%}
  .cta-row,.hero-cta,.cta-band .row{gap:14px}
  .cta-row .hint{text-align:center}
}
/* Plan badges sit on their own line under a card title, so a long title never
   wraps around the badge. */
.card h3 .tag99,.card h3 .tagcu{display:table;margin:8px 0 0}
.cta-band h2 + .lede{margin-top:16px}
/* On phones the comparison table used to scroll sideways and hide the
   GoHighLevel column; it now fits the screen with all three columns. */
@media(max-width:640px){
  .ctable{min-width:0;table-layout:fixed}
  .ctable th,.ctable td{padding:12px 9px;font-size:13px;overflow-wrap:anywhere}
  .ctable thead th{font-size:12px;letter-spacing:.03em;white-space:normal}
  .ctable tbody th{width:31%}
}

/* ---------- Colour roles (2026-10-03) ----------
   Amber means "do this": it is kept for the action buttons only, so the eye
   finds them first (isolation effect: the one item that differs from its
   surroundings is the one noticed and remembered). Everything else that used
   amber moves to the trust colour (blue) or the reassurance colour (green).
     amber = act   ·   blue = trust, information   ·   green = safe, included
     red   = the problem / what they lose today                               */
.hero h1 em,.phero h1 em{color:var(--blue-text)}
nav.main a[aria-current="page"]{border-bottom-color:var(--blue)}
@media(max-width:940px){nav.main a[aria-current="page"]{color:var(--blue-text)}}
.case-grid h4{color:var(--blue-text)}
.tagcu{color:var(--blue-text);background:var(--blue-soft)}
.ribbon{background:var(--good);color:#04140C}
.price.top{border-color:rgba(62,207,142,.45);box-shadow:0 0 0 1px rgba(62,207,142,.12),0 30px 80px -40px rgba(62,207,142,.35)}
.cinfo a:hover{color:var(--blue-text)}
@media(max-width:460px){nav.main.open .nav-login{color:var(--blue-text)}}
/* Reassurance right where the decision happens: the note under each row of
   buttons reads as a green "safe" signal, which lowers the risk of clicking. */
.cta-row .hint{color:var(--fg-2)}
.cta-row .hint::before{content:"✓";color:var(--good);font-weight:800;margin-right:7px}

/* ---------- Short-copy layout (2026-10-03) ----------
   The copy was cut by ~60%, so the old spacing left big empty gaps. Sections sit
   closer, and six cards make two even rows of three instead of 4 + 2. */
section{padding:clamp(48px,5.5vw,76px) 0}
.cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.cards:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards:has(> :nth-child(6):last-child){grid-template-columns:1fr}}

/* ---------- Log in / Sign up in the header ---------- */
.signup-link{border:1px solid var(--line)}
.signup-link:hover{border-color:var(--blue)}
/* Once the menu button appears, Sign up moves into the menu with Log in. */
@media(max-width:940px){.bar .right .signup-link{display:none}nav.main.open .nav-signup{display:block!important}}
nav.main a{white-space:nowrap}
@media(min-width:941px) and (max-width:1100px){
  nav.main{gap:13px;margin-left:4px}.bar{gap:12px}.bar .right{gap:6px}
  nav.main a,.login-link{font-size:13.5px}.login-link{padding:8px 10px}
  .lang{padding:5px 9px}.bar .right .btn-sm{padding:10px 14px;font-size:14px}
}

/* ---------- Use the full width (2026-10-03) ----------
   After the copy was cut, sections kept their old spacing and narrow headings,
   leaving big empty bands and an empty right half. */
section{padding:clamp(34px,3.8vw,54px) 0}
.sec-head{max-width:860px;margin-bottom:clamp(22px,2.6vw,32px)}
/* FAQ: heading on the left, questions on the right. */
@media(min-width:900px){
  .wrap:has(> .faq){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:56px;align-items:start}
  .wrap:has(> .faq) > .sec-head{position:sticky;top:96px;margin-bottom:0}
  .wrap:has(> .faq) > .faq{max-width:none}
}
.faq details p{max-width:none}
/* Short "statement + button" sections become one wide band. */
.wrap:has(> .sec-head + .cta-row:last-child){display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px 48px;align-items:center;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;padding:clamp(24px,3vw,40px);
  /* Same outer edges as the rest of the content (the .wrap's own 24px gutter). */
  max-width:calc(var(--max) - 48px);width:calc(100% - 48px)}
.wrap:has(> .sec-head + .cta-row:last-child) > .sec-head{margin-bottom:0}
.wrap:has(> .sec-head + .cta-row:last-child) > .cta-row{margin-top:0;justify-content:flex-end}
.wrap:has(> .sec-head + .cta-row:last-child) > .cta-row .hint{text-align:right}
@media(max-width:760px){
  .wrap:has(> .sec-head + .cta-row:last-child){grid-template-columns:1fr;width:calc(100% - 32px)}
  .wrap:has(> .sec-head + .cta-row:last-child) > .cta-row{justify-content:flex-start}
  .wrap:has(> .sec-head + .cta-row:last-child) > .cta-row .hint{text-align:left}
}
/* Lone heading sections (e.g. "Where we work") don't need a full section of air. */
.wrap:has(> .sec-head:only-child) > .sec-head{margin-bottom:0}

/* No single word left alone on the last line of a heading or paragraph. */
h1,h2,h3,h4,.lede,.hint,summary,.card p,.dos-card p{text-wrap:balance}
p,li{text-wrap:pretty}

/* Hero: room for a two-line headline in both languages, and no lone word at
   the end of the subtitle. */
.hero-top{max-width:1000px}
.hero .lede{max-width:640px;margin-left:auto;margin-right:auto;text-wrap:balance}

/* ---------- Two ways to use ClientFlow (home) ---------- */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.dos{grid-template-columns:1fr}}
.dos-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;align-items:flex-start}
.dos-card.top{border-color:rgba(62,207,142,.45)}
.dos-card .tag99,.dos-card .tagcu{margin:0 0 12px}
.dos-card h3{font-size:1.35rem;margin-bottom:8px}
.dos-card p{color:var(--fg-2);font-size:15px;margin-bottom:12px}
.dos-card ul{list-style:none;display:grid;gap:9px;margin-bottom:22px}
.dos-card li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.dos-card li svg{width:16px;height:16px;stroke:var(--good);fill:none;stroke-width:2.6;flex:0 0 auto;margin-top:4px}
.dos-card .btn{margin-top:auto}
.dos-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto}
.dos-link{color:var(--blue-text);font-weight:600;font-size:15px;text-decoration:underline}
@media(max-width:600px){.dos-card .btn{width:100%}.dos-acts{width:100%}.dos-acts .btn{width:100%}}

/* Local SEO page: $99 plan vs Custom plan, side by side. */
.planes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.planes{grid-template-columns:1fr}}
.planes .dos-card li span{display:flex;flex-direction:column;gap:2px;color:var(--fg-2);font-size:14.5px}
.planes .dos-card li b{color:var(--fg);font-size:15.5px;font-weight:650}
@media(max-width:600px){.planes .dos-card .btn{width:100%}}

/* ---------- Founder (About / Nosotros) ---------- */
.founder{display:grid;grid-template-columns:360px 1fr;gap:clamp(24px,4vw,48px);align-items:center;max-width:980px}
.founder img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line-soft);box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.founder h2{margin:6px 0 4px}
.founder-role{color:var(--fg-3);font-size:14.5px;margin-bottom:16px}
@media(max-width:760px){.founder{grid-template-columns:1fr}.founder img{max-width:420px}}

/* ---------- Checkout page (empezar.html / en/start.html) ---------- */
.buy-sum{background:var(--panel);border:1px solid rgba(62,207,142,.4);border-radius:16px;padding:24px 22px}
.buy-price{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.buy-price .amt{font-size:3rem;font-weight:720;letter-spacing:-.04em;line-height:1}
.buy-price .per{color:var(--fg-2);font-size:15px}
.buy-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.buy-tags .tag99{margin-left:0;font-size:12.5px;padding:4px 10px}
.buy-steps{list-style:none;counter-reset:paso;display:grid;gap:14px}
.buy-steps li{counter-increment:paso;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start}
.buy-steps li::before{content:counter(paso);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue-text);font-weight:750;font-size:14px;display:flex;align-items:center;justify-content:center}
.buy-steps b{font-size:15.5px}
.buy-steps span{font-size:14.5px;color:var(--fg-2)}
.buy-alt{margin-top:26px;font-size:14.5px;color:var(--fg-2)}
.buy-alt a,.buy-note a{color:var(--blue-text);text-decoration:underline;font-weight:600}
.buy-note{margin-top:22px;padding:14px 16px;border:1px solid rgba(62,207,142,.4);background:rgba(62,207,142,.07);border-radius:12px;font-size:15px;color:var(--fg);max-width:62ch}
/* On a phone the form comes first: the hero already says $99 and 24-48 h, and
   the plan details below it are for whoever wants to read before typing. */
@media(max-width:860px){.cgrid #buy-form{order:-1}}
#buy-form{scroll-margin-top:84px}
form.lead .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){form.lead .f2{grid-template-columns:1fr;gap:0}}
.form-err{background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.45);color:#FFC2C2;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.form-err a{text-decoration:underline;color:#fff}
form.lead [aria-invalid="true"]{border-color:var(--hot)}

/* ---------- Reveal ---------- */
/* Visually hidden but read by screen readers and crawlers. Used where a heading
   is needed for correct document structure but would be redundant on screen. */
.sr-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Glassmorphism (2026-10-03, Mario's ask) ----------
   Glass needs something behind it: a fixed, soft colour field sits under the
   whole page (to be replaced by the background photos later). Panels are
   translucent with a light edge and a top highlight. Following accessibility
   and performance guidance: text keeps a dark tinted base (contrast stays
   above 4.5:1), blur stays at 12-16px, phones get the look without live blur
   (scroll stays smooth), and users who ask for less transparency get solid
   panels. */
:root{
  --glass:rgba(20,26,38,.56);
  --glass-strong:rgba(16,21,31,.74);
  --glass-brd:rgba(255,255,255,.085);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --glass-shadow:0 24px 60px -34px rgba(0,0,0,.85);
}
body{background:var(--ink)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42rem 32rem at 12% 8%, rgba(46,107,255,.22), transparent 62%),
    radial-gradient(36rem 28rem at 92% 30%, rgba(124,92,255,.14), transparent 64%),
    radial-gradient(40rem 30rem at 18% 78%, rgba(62,207,142,.10), transparent 64%),
    radial-gradient(34rem 26rem at 88% 92%, rgba(255,180,67,.10), transparent 66%),
    var(--ink)}
main,footer{position:relative}

.card,.dos-card,.cbox,.price,.case,.sn,.ctable-wrap,.buy-sum,form.lead,.step,
.calc-in,.headline,.ob,.maths,
.wrap:has(> .sec-head + .cta-row:last-child){
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--glass-hi),var(--glass-shadow)}
.card,.dos-card:not(.top),.case,.sn,.ctable-wrap,form.lead,.calc-in,.headline,.ob,.maths,
.wrap:has(> .sec-head + .cta-row:last-child){border-color:var(--glass-brd)}
.price:not(.top){border-color:rgba(255,255,255,.11)}
.price.top{box-shadow:var(--glass-hi),0 0 0 1px rgba(62,207,142,.12),0 30px 80px -40px rgba(62,207,142,.35)}
.card:hover{border-color:rgba(255,255,255,.16)}
/* Steps: one glass panel, the rows separated by hairlines. */
.steps{background:rgba(255,255,255,.06);border-color:var(--glass-brd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.step{background:rgba(16,21,31,.62);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* Full-width bands. */
.strip,.cta-band{background:rgba(12,16,24,.55);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-color:var(--glass-brd)}
footer{background:rgba(7,9,13,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
header.stuck{background:rgba(9,12,18,.62);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--glass-brd)}
/* Form fields read as glass too, with solid enough fill for typed text. */
form.lead input,form.lead textarea,form.lead select,.calc-in input[type=number]{background:rgba(7,9,13,.55);border-color:rgba(255,255,255,.1)}
.lang,.btn-line,.signup-link{background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Phones: keep the glass look, drop the live blur (smooth scrolling). */
@media(max-width:760px){
  .card,.dos-card,.cbox,.price,.case,.sn,.ctable-wrap,.buy-sum,form.lead,.step,.steps,.calc-in,.headline,.ob,.maths,
  .wrap:has(> .sec-head + .cta-row:last-child),.strip,.cta-band,footer,.lang,.btn-line,.signup-link{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .card,.dos-card,.cbox,.price,.case,.sn,.ctable-wrap,.buy-sum,form.lead,.calc-in,.headline,.ob,.maths,
  .wrap:has(> .sec-head + .cta-row:last-child){background:var(--glass-strong)}
  .mbar{background:rgba(9,12,18,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
/* People who ask the system for less transparency get solid panels. */
@media(prefers-reduced-transparency:reduce){
  body::before{display:none}
  .card,.dos-card,.cbox,.price,.case,.sn,.ctable-wrap,.buy-sum,form.lead,.step,.steps,.calc-in,.headline,.ob,.maths,
  .wrap:has(> .sec-head + .cta-row:last-child),.strip,.cta-band,footer,header.stuck,.mbar{
    background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- Section background photos (2026-10-03) ----------
   Real-looking Tucson photos behind key sections (psychology: local and
   authentic beats stock; text sits on calm space with a dark gradient for
   contrast). Each photo fades into the page at its top and bottom edge.
   Phones load a smaller portrait crop. Files: assets/fondos/*.webp */
.hero,section:has(> .wrap > .compare),section:has(> .wrap > .dos),section:has(> .wrap > .steps),.cta-band,.phero{position:relative;isolation:isolate}
.hero::after,section:has(> .wrap > .compare)::after,section:has(> .wrap > .dos)::after,section:has(> .wrap > .steps)::after,.cta-band::after,.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* Hero: the Catalinas at dusk; the headline sits on the sky, the mountains below it. */
.hero{padding-bottom:clamp(120px,13vw,190px)}
.hero + .strip{margin-top:0!important}
.hero::after{background-image:linear-gradient(to bottom,rgba(7,9,13,.72) 0%,rgba(7,9,13,.55) 45%,rgba(7,9,13,.25) 80%,rgba(7,9,13,.6) 100%),url(fondos/hero.webp);
  background-position:center bottom;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 85%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 85%,transparent 100%)}
/* Inner pages: the same sky, much quieter. */
.phero::after{background-image:linear-gradient(to bottom,rgba(7,9,13,.82),rgba(7,9,13,.7)),url(fondos/hero.webp);background-position:center 70%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 70%,transparent 100%)}
/* "They find your competitor": a phone with a map search. */
section:has(> .wrap > .compare)::after{background-image:linear-gradient(90deg,rgba(7,9,13,.93) 0%,rgba(7,9,13,.78) 50%,rgba(7,9,13,.5) 100%),url(fondos/busqueda.webp);background-position:right center}
/* Two ways: a local owner at his counter. */
section:has(> .wrap > .dos)::after{background-image:linear-gradient(90deg,rgba(7,9,13,.9) 0%,rgba(7,9,13,.72) 55%,rgba(7,9,13,.45) 100%),url(fondos/dueno.webp);background-position:right 30%}
/* How it works: warm street lights at night. */
section:has(> .wrap > .steps)::after{background-image:linear-gradient(rgba(7,9,13,.7),rgba(7,9,13,.7)),url(fondos/calle.webp);background-position:center}
/* Final call to action: an open door at golden hour. */
.cta-band::after{background-image:linear-gradient(rgba(7,9,13,.72),rgba(7,9,13,.72)),url(fondos/abierto.webp);background-position:center 40%;-webkit-mask-image:none;mask-image:none}
.cta-band{background:transparent}
@media(max-width:760px){
  .hero::after{background-image:linear-gradient(to bottom,rgba(7,9,13,.74) 0%,rgba(7,9,13,.6) 50%,rgba(7,9,13,.35) 85%,rgba(7,9,13,.65) 100%),url(fondos/hero-m.webp)}
  .phero::after{background-image:linear-gradient(to bottom,rgba(7,9,13,.84),rgba(7,9,13,.72)),url(fondos/hero-m.webp)}
  section:has(> .wrap > .compare)::after{background-image:linear-gradient(rgba(7,9,13,.82),rgba(7,9,13,.82)),url(fondos/busqueda-m.webp)}
  section:has(> .wrap > .dos)::after{background-image:linear-gradient(rgba(7,9,13,.8),rgba(7,9,13,.8)),url(fondos/dueno-m.webp);background-position:center top}
  section:has(> .wrap > .steps)::after{background-image:linear-gradient(rgba(7,9,13,.76),rgba(7,9,13,.76)),url(fondos/calle-m.webp)}
  .cta-band::after{background-image:linear-gradient(rgba(7,9,13,.76),rgba(7,9,13,.76)),url(fondos/abierto-m.webp)}
}
@media(prefers-reduced-transparency:reduce){
  .hero::after,section:has(> .wrap > .compare)::after,section:has(> .wrap > .dos)::after,section:has(> .wrap > .steps)::after,.cta-band::after,.phero::after{display:none}
}
/* ---------- Button interactions, everywhere (2026-10-03) ----------
   Every clickable thing answers: hover (mouse only, so touch never sticks),
   a press on tap/click, and a clear keyboard focus ring. Motion is skipped for
   people who ask for less of it. */
a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent}
.btn,.btn-sm,.btn-lg,.btn-line,.lang,.login-link,.nav-toggle,.mbar a,nav.main a,.dos-link,.buy-alt a,.buy-note a,
summary,a.card,.cinfo a,footer nav a,.fgrid .brand,.brand,form.lead button{
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .2s,background-color .2s,border-color .2s,color .2s,filter .2s}
/* Primary (amber): lift, glow and a soft light sweep. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%)}
.btn-line::after,.lang::after{display:none}
@media(hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,180,67,.34);filter:saturate(1.08)}
  .btn:hover::after{transform:translateX(120%);transition:transform .7s ease}
  .btn-line:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:var(--blue);box-shadow:0 10px 26px -12px rgba(46,107,255,.6)}
  .lang:hover,.signup-link:hover{background:rgba(46,107,255,.14);border-color:var(--blue);color:var(--fg)}
  .login-link:hover{background:rgba(255,255,255,.07)}
  nav.main a:hover{color:var(--fg);border-bottom-color:rgba(46,107,255,.6)}
  .nav-toggle:hover{border-color:var(--blue);background:rgba(255,255,255,.05)}
  a.card:hover{transform:translateY(-4px);border-color:rgba(46,107,255,.45);box-shadow:var(--glass-hi),0 22px 50px -26px rgba(46,107,255,.55)}
  summary:hover{color:var(--blue-text)}
  .dos-link:hover,.buy-alt a:hover,.buy-note a:hover,.cinfo a:hover{color:var(--fg)}
  footer nav a:hover{color:var(--fg)}
  .brand:hover{opacity:.85}
  .mbar a:hover{filter:brightness(1.06)}
}
/* Portfolio (real client sites, filled by site.js) */
.porta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-bottom:28px}
.porta-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--fg);transition:transform .2s,border-color .2s}
.porta-card:hover{transform:translateY(-3px);border-color:var(--fg-3)}
.porta-card img,.porta-ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;background:var(--panel-2)}
.porta-txt{padding:14px 16px}
.porta-txt h3{font-size:1.05rem;margin-bottom:2px}
.porta-txt p{font-size:13.5px;color:var(--fg-2);margin-bottom:8px}
.porta-txt span{font-size:13.5px;font-weight:600;color:#7fb2ff}
.porta-vacio{grid-column:1/-1;font-size:16px;color:var(--fg-2);background:var(--panel);border:1px dashed var(--line);border-radius:16px;padding:22px}
/* Terms checkbox on the $99 form */
.f-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fg-2);margin:4px 0 14px;cursor:pointer;line-height:1.45}
/* The form's own input rule (full width, padding) outranked this one and pushed
   the $99 page sideways on every phone (review 2026-10-09). */
form .f-check input[type=checkbox]{width:18px!important;height:18px;min-width:0;padding:0!important;margin:2px 0 0;flex:0 0 auto;accent-color:#3987e5}
.f-check span{min-width:0;flex:1 1 auto}
.f-check a{text-decoration:underline}
/* Press: works on touch too. */
.btn:active,.btn-line:active,.lang:active,.login-link:active,.nav-toggle:active,.mbar a:active,a.card:active,form.lead button:active{
  transform:translateY(0) scale(.97);transition-duration:.08s}
summary:active{opacity:.8}
/* Keyboard focus: visible ring on every control. */
.btn:focus-visible,.btn-line:focus-visible,.lang:focus-visible,.login-link:focus-visible,nav.main a:focus-visible,
summary:focus-visible,a.card:focus-visible,.mbar a:focus-visible,.nav-toggle:focus-visible,footer a:focus-visible,
form.lead input:focus-visible,form.lead textarea:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px}
form.lead input,form.lead textarea,.calc-in input{transition:border-color .2s,box-shadow .2s}
form.lead input:focus,form.lead textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,255,.2);outline:none}
.btn:disabled,button:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn-line:hover,a.card:hover,.btn:active,.btn-line:active,a.card:active{transform:none}
  .btn::after{display:none}
}
/* Band sections: the button column takes the width its buttons need, so no
   button is ever cut (buttons clip their light sweep with overflow:hidden). */
.wrap:has(> .sec-head + .cta-row:last-child){grid-template-columns:minmax(0,1fr) auto}
@media(max-width:900px){.wrap:has(> .sec-head + .cta-row:last-child){grid-template-columns:1fr}
  .wrap:has(> .sec-head + .cta-row:last-child) > .cta-row{justify-content:flex-start}
  .wrap:has(> .sec-head + .cta-row:last-child) > .cta-row .hint{text-align:left}}
/* ---- "Send a message" dialog and the third button in the phone bar ---- */
.msg-dlg{padding:0;border:0;background:transparent;color:var(--fg);width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.msg-dlg::backdrop{background:rgba(4,6,10,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.msg-dlg form.lead{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.msg-dlg h3{font-size:1.3rem;margin:0 34px 6px 0}
.msg-dlg .msg-p{color:var(--fg-2);font-size:14.5px;line-height:1.55;margin:0 0 16px}
.msg-dlg .msg-err{color:var(--hot,#ff6b6b);font-size:14px;margin:2px 0 8px}
.msg-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg-2);font-size:22px;line-height:1;cursor:pointer;transition:background .18s,color .18s,transform .12s}
.msg-x:hover{background:var(--panel-3);color:var(--fg)}
.msg-x:active{transform:scale(.94)}
.msg-x:focus-visible{outline:2px solid var(--blue-text);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.msg-dlg[open]{animation:msgIn .22s ease-out}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){.mbar .call{padding:13px 12px;font-size:14.5px}}
.msg-dlg{position:fixed;inset:0;margin:auto;height:fit-content}

/* ---- AI models page ---- */
.ia-cuentas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ia-cuenta{background:var(--glass,rgba(17,22,31,.6));border:1px solid var(--glass-brd,var(--line-soft));border-radius:16px;padding:18px 16px;display:flex;flex-direction:column;gap:4px}
.ia-cuenta b{font-size:1.9rem;font-weight:800;line-height:1;color:var(--fg)}
.ia-cuenta span{font-size:13.5px;color:var(--fg-2)}
.ia-cat{font-size:1.1rem;margin:30px 0 12px;color:var(--fg)}
.ia-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ia-modelo{background:var(--glass,rgba(17,22,31,.6));border:1px solid var(--glass-brd,var(--line-soft));border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:3px}
.ia-modelo b{font-size:15px;color:var(--fg)}
.ia-marca{font-size:12px;color:var(--fg-3)}
.ia-modelo p{font-size:13.5px;color:var(--fg-2);line-height:1.5;margin:6px 0 10px;flex:1}
.ia-desde{font-size:12.5px;color:var(--fg-2)}
.ia-desde b{font-size:13.5px}
.ia-filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ia-filtros input,.ia-filtros select{background:rgba(7,9,13,.55);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 13px;color:var(--fg);font:inherit;font-size:15px}
.ia-filtros input{flex:1;min-width:220px}
.ia-filtros input:focus,.ia-filtros select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,255,.2)}
.ia-lista{border-top:1px solid var(--line-soft);margin-bottom:16px}
.ia-row{display:flex;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line-soft)}
.ia-row-main{min-width:0}
.ia-row-main b{font-size:14.5px;color:var(--fg)}
.ia-row-main p{font-size:13px;color:var(--fg-2);margin:3px 0 0;line-height:1.45}
.ia-row-cat{font-size:12px;color:var(--fg-3);margin-left:8px}
.ia-row-prov{font-size:12.5px;color:var(--fg-3);white-space:nowrap}
.ia-ok{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px;background:rgba(31,157,85,.16);color:#5fd896;margin-left:8px}
.ia-nada{color:var(--fg-2);padding:18px 0}
@media(max-width:760px){.ia-cuentas{grid-template-columns:repeat(2,minmax(0,1fr))}.ia-row{flex-direction:column;gap:4px}}

/* Example text in forms: faint, and gone as soon as the field is clicked. */
input::placeholder,textarea::placeholder{opacity:.6;font-style:italic}
input:focus::placeholder,textarea:focus::placeholder{color:transparent!important;opacity:0}

/* iPhone zooms into fields under 16px when focused; 16px keeps the page still. */
@media(max-width:640px){input,select,textarea{font-size:16px!important}}