/* Fonts are self-hosted (SIL Open Font License, see fonts/OFL-*.txt). */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage.woff) format("woff");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans.woff) format("woff");font-weight:400 700;font-display:swap}
/* PageLift funnel, ForgeCove Labs. One stylesheet for every page of the funnel. */
:root{
  --paper:#f7f8fc; --paper-2:#eef0fa; --white:#fff;
  --ink:#141a33; --ink-2:#3a4166; --muted:#5d6488;
  --lift:#4f46e5; --lift-d:#3c34c4; --lift-soft:#e7e6ff;
  --outline:#a78bfa;
  --buy:#f2a21c; --buy-d:#c77e08;
  --ok:#0f9f6e; --line:#dfe2f1;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:10px; --r:16px; --r-lg:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:var(--lift)}
:focus-visible{outline:3px solid var(--outline);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:8px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(247,248,252,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 20px/1 var(--display);letter-spacing:-.01em}
.brand svg{flex:none}
.brand small{font:500 13px/1 var(--body);color:var(--muted);margin-left:2px}
.top nav{margin-left:auto;display:flex;gap:24px}
.top nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px}
.top nav a:hover{color:var(--lift)}
@media (max-width:860px){.top nav{display:none}.top .buy{margin-left:auto}}

/* ---------- buttons ---------- */
.buy,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:700 17px/1 var(--body);border-radius:12px;padding:17px 26px;cursor:pointer;border:0;transition:transform .12s ease,filter .12s ease}
.buy{background:var(--buy);color:#2b1d00;box-shadow:0 4px 0 var(--buy-d)}
.buy:hover{filter:brightness(1.05)}
.buy:active{transform:translateY(2px);box-shadow:0 2px 0 var(--buy-d)}
.buy.small{padding:11px 16px;font-size:15px;box-shadow:0 3px 0 var(--buy-d)}
.btn{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn:hover{box-shadow:inset 0 0 0 2px var(--lift)}
.buy-note{font-size:14px;color:var(--muted);margin:12px 0 0}

/* ---------- hero ---------- */
.hero{padding:76px 0 40px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.hero h1{font:800 clamp(40px,6vw,70px)/1.1 var(--display);letter-spacing:-.035em;margin:0 0 24px}
/* The product's own editing outline, used once: around the words being edited. */
.editing{position:relative;display:inline;outline:2.5px dashed var(--outline);outline-offset:2px;border-radius:4px;color:var(--lift);padding:0 .08em}
.editing:after{content:"";display:inline-block;width:3px;height:.9em;background:var(--lift);margin-left:4px;vertical-align:-.08em;animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.editing:after{animation:none}}
.hero .lead{font-size:21px;color:var(--ink-2);margin:0 0 30px;max-width:34em}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.works-with{margin:34px 0 0;font-size:15px;color:var(--muted)}
.works-with b{color:var(--ink-2);font-weight:600}

/* ---------- screenshots ---------- */
.shot{background:var(--white);border-radius:var(--r);box-shadow:0 1px 0 var(--line),0 30px 60px -20px rgba(20,26,51,.28),0 0 0 1px rgba(20,26,51,.06);overflow:hidden}
.shot .chrome{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#eceef8;border-bottom:1px solid var(--line)}
.shot .chrome i{width:11px;height:11px;border-radius:50%;background:#cfd3e6}
.shot .chrome span{margin-left:12px;font-size:12px;color:var(--muted);background:var(--white);border-radius:6px;padding:3px 10px;flex:1;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{width:100%;height:auto}
.hero .shot{transform:rotate(.6deg)}
figure{margin:0}
.zoom{border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(20,26,51,.08),0 24px 50px -22px rgba(20,26,51,.35);background:var(--white)}
.zoom img{width:100%;height:auto}
.zoom.tall{max-width:420px;justify-self:center;width:100%}
.shot.tall img{max-height:520px;object-fit:cover;object-position:top}
figcaption{font-size:14px;color:var(--muted);margin-top:12px}

/* ---------- sections ---------- */
section{padding:88px 0}
section.tint{background:var(--white);border-block:1px solid var(--line)}
h2{font:800 clamp(32px,4vw,46px)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 18px}
h3{font:700 22px/1.25 var(--display);letter-spacing:-.01em;margin:0 0 8px}
.intro{font-size:20px;color:var(--ink-2);max-width:36em;margin:0 0 44px}

/* the three bad options */
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:40px}
.option{border-top:3px solid var(--line);padding-top:20px}
.option .cost{font:700 15px/1.3 var(--body);color:#b4312f;margin:0 0 10px}
.option p{margin:0;color:var(--ink-2)}
.option .tag{font:700 15px/1.3 var(--body);color:var(--lift);margin:0 0 10px}
.sources .option{border-top-color:var(--outline)}
.works-with a{color:inherit;text-decoration:underline;text-decoration-color:var(--outline);text-underline-offset:3px}
.fourth{background:var(--ink);color:#eef0ff;border-radius:var(--r-lg);padding:34px 38px;display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fourth p{margin:0;font:600 24px/1.35 var(--display);max-width:30em}
.fourth p span{color:#c9c5ff}

/* steps (a real sequence, so numbered) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:step}
.step{counter-increment:step;display:flex;flex-direction:column}
.step .shot{margin-top:auto}
.step h3:before{content:counter(step);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lift);color:#fff;font:700 16px/1 var(--body);margin-right:12px;vertical-align:2px}
.step p{color:var(--ink-2);margin:0 0 18px}

/* feature rows */
.feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:44px 0;border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:0}
.feature.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.feature.flip .text{order:2}
.feature p{color:var(--ink-2);margin:0 0 14px}
.feature ul{margin:0;padding:0;list-style:none}
.feature li{padding:5px 0 5px 30px;position:relative;color:var(--ink-2)}
.ticks li:before,.feature li:before{content:"";position:absolute;left:4px;top:14px;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.tag{display:inline-block;font:700 13px/1 var(--body);color:var(--lift);background:var(--lift-soft);border-radius:999px;padding:6px 11px;margin-bottom:14px}

/* same on every screen */
.devices{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:end}
.phone{height:auto;width:100%;border-radius:34px;overflow:hidden;border:10px solid var(--ink);box-shadow:0 30px 60px -20px rgba(20,26,51,.4)}

/* comparison */
.compare{width:100%;border-collapse:collapse;font-size:16px;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.compare th,.compare td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font:700 15px/1.3 var(--body);color:var(--ink-2);background:var(--paper-2)}
.compare thead th.us{background:var(--lift);color:#fff}
.compare td.us{background:#f6f5ff;font-weight:600}
.compare tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* pricing */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.price{background:var(--white);border-radius:var(--r-lg);padding:34px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column}
.price.best{box-shadow:0 0 0 3px var(--lift),0 30px 60px -24px rgba(79,70,229,.45)}
.price .name{font:700 22px/1.2 var(--display);margin:0 0 4px}
.price .who{color:var(--muted);margin:0 0 18px;font-size:16px}
.price .amount{font:800 56px/1 var(--display);letter-spacing:-.03em;margin:0}
.price .amount s{font-size:24px;color:var(--muted);font-weight:600;margin-left:10px}
.price .terms{color:var(--muted);font-size:15px;margin:6px 0 22px}
.price ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.price li{padding:6px 0 6px 30px;position:relative}
.price li:before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.price li.plus{font-weight:600}
.price .buy{width:100%}
.flag{align-self:flex-start;font:700 13px/1 var(--body);color:#fff;background:var(--lift);border-radius:999px;padding:7px 12px;margin-bottom:16px}

/* guarantee */
.guarantee{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;background:var(--white);border-radius:var(--r-lg);padding:32px;box-shadow:0 0 0 1px var(--line);margin-top:36px}
.guarantee p{margin:0;color:var(--ink-2)}
.nosurprise{background:var(--white);border-radius:var(--r-lg);padding:28px 32px;box-shadow:0 0 0 1px var(--line);margin-top:28px}
.nosurprise h3{margin:0 0 8px}
.nosurprise p{margin:0;color:var(--ink-2)}
.seal{width:120px;height:120px}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font:700 19px/1.35 var(--display);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 26px/1 var(--body);color:var(--lift);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0;color:var(--ink-2)}

/* ps + footer */
.ps{font-size:19px;color:var(--ink-2)}
.ps strong{color:var(--ink)}
.legal{font-size:13px;color:var(--muted);line-height:1.55}
footer{background:var(--ink);color:#b9bedb;padding:44px 0;font-size:14px}
footer .wrap{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;align-items:center}
footer a{color:#e8eaff;text-decoration:none;margin-right:20px}
footer a:hover{text-decoration:underline}

/* upsell pages */
.oto-bar{background:var(--ink);color:#fff;text-align:center;padding:12px 16px;font-size:15px}
.oto-bar b{color:#ffd27a}
.progress{display:flex;gap:6px;justify-content:center;margin-top:8px}
.progress i{width:44px;height:5px;border-radius:3px;background:#3b4270}
.progress i.on{background:#ffd27a}
.decision{background:var(--white);border-radius:var(--r-lg);box-shadow:0 0 0 3px var(--lift),0 30px 60px -24px rgba(79,70,229,.45);padding:36px;text-align:center;max-width:620px;margin:0 auto}
.decision .amount{font:800 60px/1 var(--display);letter-spacing:-.03em}
.decision .terms{color:var(--muted);margin:6px 0 24px}
.decision .buy{width:100%;font-size:19px;padding:20px}
.no-thanks{display:inline-block;margin-top:18px;color:var(--muted);font-size:15px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:26px;text-align:center}
.tier.best{box-shadow:0 0 0 3px var(--lift)}
.tier .sites{font:800 40px/1 var(--display)}
.tier .amount{font:700 30px/1 var(--display);margin:14px 0 4px}
.tier .buy{width:100%;margin-top:16px}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{padding:8px 0 8px 32px;position:relative;color:var(--ink-2)}
.check-list li:before{content:"";position:absolute;left:4px;top:16px;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.steps-v{counter-reset:s;list-style:none;padding:0;margin:0}
.steps-v li{counter-increment:s;position:relative;padding:0 0 28px 62px}
.steps-v li:before{content:counter(s);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;background:var(--lift);color:#fff;display:grid;place-items:center;font:700 18px/1 var(--body)}
.steps-v h3{margin-bottom:4px}
.steps-v p{margin:0;color:var(--ink-2)}
.note{background:var(--lift-soft);border-radius:var(--r);padding:18px 22px;color:var(--ink-2)}

@media (max-width:900px){
  body{font-size:17px}
  .hero{padding-top:44px}
  .hero .grid,.feature,.feature.flip,.devices,.prices,.guarantee{grid-template-columns:1fr}
  .feature.flip .text{order:0}
  .options,.steps,.tiers{grid-template-columns:1fr}
  .hero .shot{transform:none}
  .phone{max-width:300px}
  section{padding:64px 0}
  .guarantee{text-align:left}
  .fourth{padding:28px}
}