/* One face per family (the files are variable fonts): every weight loads together, so text never swaps twice. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fynl.io — "flight path" design system.
   Built from the Fynl hummingbird: sky blue → leaf green → sun yellow,
   light iridescent glass, and curved flight trails that draw themselves. */
:root{
  --sky:#0A8FD0; --leaf:#23A87A; --sun:#D9A514;
  --ink:#0E1B24; --ink2:#3C4B55; --mut:#4F5E68;
  --bg:#F7FBFD; --bg2:#FFFFFF; --glass:rgba(255,255,255,.62); --line:rgba(14,27,36,.10);
  --grad:linear-gradient(115deg,var(--sky) 0%,var(--leaf) 52%,var(--sun) 100%);
  --r:22px; --wrap:1160px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* metric-matched fallbacks so text doesn't re-wrap (layout shift) when the web fonts arrive */
@font-face{font-family:"Bricolage Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:90.4%}
@font-face{font-family:"DM Sans Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:103.5%}
body{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Bricolage Grotesque","Bricolage Fallback",sans-serif;line-height:1.08;letter-spacing:-.02em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:#fff;padding:10px 14px;border-radius:10px;z-index:100}
.skip:focus{inset-inline-start:12px;top:12px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}

/* page-load flight: the bird crosses the screen once */
.loader{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.loader img{width:92px;height:92px;animation:fly-in 1.4s var(--ease) both}
.loader.done{opacity:0;visibility:hidden}
@keyframes fly-in{0%{transform:translate(-40vw,18vh) rotate(-14deg) scale(.6);opacity:0}60%{opacity:1}100%{transform:none}}

/* drifting iridescent glows */
.aura{position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;overflow:hidden}
.aura i{position:absolute;width:48vmax;height:48vmax;border-radius:50%;filter:blur(70px);opacity:.34;animation:drift 26s ease-in-out infinite alternate}
.aura i:nth-child(1){background:#7ED3F7;left:5%;top:0}
.aura i:nth-child(2){background:#9BE3C3;right:0;top:25%;animation-duration:31s;animation-delay:-8s}
.aura i:nth-child(3){background:#FFE59A;left:30%;bottom:-5%;animation-duration:36s;animation-delay:-15s;opacity:.28}
@keyframes drift{to{transform:translate(8vmax,-6vmax) scale(1.15)}}

.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:60}

/* header */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);background:rgba(247,251,253,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.02em}
.brand img{width:36px;height:36px}
.nav ul{display:flex;gap:22px;list-style:none;margin-left:auto}
.nav ul a{text-decoration:none;color:var(--ink2);font-weight:500;font-size:15.5px}
.nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;border:0;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px -12px rgba(10,143,208,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(35,168,122,.6)}
.btn-glass{background:var(--glass);border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(10px)}
.btn-glass:hover{transform:translateY(-2px);background:#fff}
.nav .login{font-weight:600;text-decoration:none;color:var(--ink2)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:12px;width:46px;height:46px;cursor:pointer}

/* hero */
.hero{position:relative;padding:84px 0 40px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink2)}
.hero .eyebrow b{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 0 rgba(35,168,122,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(35,168,122,0)}100%{box-shadow:0 0 0 0 rgba(35,168,122,0)}}
.hero-h1 .grad-text{background-size:200% 100%;animation:shimmer 6s ease-in-out infinite alternate}
@keyframes shimmer{to{background-position:100% 0}}
.hero h1{font-size:clamp(42px,6.6vw,84px);margin:22px 0 18px;max-width:14ch}
.hero p.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:58ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .note{margin-top:14px;font-size:14px;color:var(--mut)}
.flight{position:absolute;inset:0;pointer-events:none;z-index:-1}
.flight path{fill:none;stroke:url(#fg);stroke-width:3;stroke-linecap:round;stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3.6s var(--ease) .9s forwards;opacity:.6}
@keyframes draw{to{stroke-dashoffset:0}}

/* product mock (demo data only) */
.mock{margin-top:56px;border-radius:26px;background:var(--glass);border:1px solid rgba(255,255,255,.8);box-shadow:0 40px 90px -40px rgba(14,27,36,.35);backdrop-filter:blur(18px);padding:14px;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.mock-inner{display:grid;grid-template-columns:190px 1fr;border-radius:18px;overflow:hidden;background:#0F1720;color:#DDE6EC;min-height:340px}
.mock-side{padding:18px 14px;border-right:1px solid rgba(255,255,255,.07);font-size:13px}
.mock-side .m-brand{display:flex;gap:8px;align-items:center;font-weight:700;color:#fff;margin-bottom:18px}
.mock-side .m-brand span{width:22px;height:22px;border-radius:7px;background:var(--grad)}
.mock-side li{list-style:none;padding:7px 10px;border-radius:8px;color:#C3CFD7}
.mock-side li.on{background:rgba(35,168,122,.16);color:#fff}
.mock-main{padding:20px;display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-content:start}
.m-card{background:#16212C;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
.m-card small{color:#B4C2CB;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.m-card strong{display:block;font-size:26px;color:#fff;margin-top:4px}
.m-wide{grid-column:span 3;display:grid;gap:8px}
.m-row{display:flex;justify-content:space-between;align-items:center;background:#16212C;border-radius:10px;padding:10px 12px;font-size:13px}
.m-row em{font-style:normal;font-size:11.5px;padding:3px 9px;border-radius:999px;background:rgba(10,143,208,.18);color:#B5E3F8}
.m-row em.won{background:rgba(35,168,122,.2);color:#BDEFD8}
.m-row em.new{background:rgba(217,165,20,.2);color:#FBE6A8}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:70px 0 10px}
.stat{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);text-align:center}
.stat b{display:block;font-family:"Bricolage Grotesque","Bricolage Fallback",sans-serif;font-size:42px;line-height:1}
.stat span{font-size:14.5px;color:var(--ink2)}

/* marquee of tools */
.marquee{overflow:hidden;border-block:1px solid var(--line);margin:60px 0;padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee div{display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite;font-weight:600;color:var(--ink2)}
.marquee span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grad);margin-right:12px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section{padding:84px 0}
.sec-head{max-width:720px;margin-bottom:42px}
.sec-head .kick{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.sec-head h2{font-size:clamp(32px,4.4vw,54px);margin:10px 0 14px}
.sec-head p{color:var(--ink2);font-size:18px}
.rule{height:3px;width:0;border-radius:3px;background:var(--grad);margin-top:18px;transition:width 1.6s var(--ease) .3s}
.in .rule{width:120px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;padding:28px;border-radius:var(--r);background:var(--glass);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px -34px rgba(14,27,36,.4);backdrop-filter:blur(12px);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{box-shadow:0 30px 70px -34px rgba(10,143,208,.45)}
.card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;margin-bottom:18px}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:22px;margin-bottom:8px}
.card p{color:var(--ink2);font-size:16px}
.card .tag{position:absolute;top:18px;right:18px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#FFF4D6;color:#8A6400}

/* split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.checks{list-style:none;display:grid;gap:12px;margin-top:22px}
.checks li{display:flex;gap:12px;color:var(--ink2)}
.checks li::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--grad) center/12px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),var(--grad);margin-top:2px}
.panel{border-radius:26px;padding:26px;background:var(--glass);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 80px -40px rgba(14,27,36,.4)}
.bubble{max-width:82%;padding:12px 15px;border-radius:18px;margin:10px 0;font-size:15px}
.bubble.them{background:#EEF3F6}
.bubble.us{margin-left:auto;background:var(--ink);color:#fff}
.bubble small{display:block;opacity:.6;font-size:11.5px;margin-top:4px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:920px}
.plan{padding:34px;border-radius:28px;background:var(--glass);border:1px solid var(--line);position:relative}
.plan.feat{background:var(--ink);color:#EAF2F6;border:0;box-shadow:0 40px 90px -40px rgba(10,143,208,.7)}
.plan.feat .price small,.plan.feat li{color:#B9C8D1}
.plan h3{font-size:26px}
.plan .price{font-family:"Bricolage Grotesque","Bricolage Fallback",sans-serif;font-size:58px;font-weight:800;margin:12px 0 4px}
.plan .price small{font-family:"DM Sans","DM Sans Fallback",sans-serif;font-size:16px;font-weight:500;color:var(--mut)}
.plan ul{list-style:none;display:grid;gap:9px;margin:20px 0 28px;font-size:15.5px}
.plan li::before{content:"✓";margin-right:9px;font-weight:800;color:var(--leaf)}
.plan .badge{position:absolute;top:22px;right:22px;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--grad);color:#fff}
.plan .btn{width:100%}
.plan.feat .btn-primary{background:#fff;color:var(--ink)}

/* compare table */
.table-wrap{overflow-x:auto;border-radius:22px;border:1px solid var(--line);background:var(--glass)}
table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:620px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
tbody th{font-size:15.5px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
tr:last-child td{border-bottom:0}
td.us{font-weight:700}

/* faq */
.faq{max-width:820px;display:grid;gap:12px}
details.q{border-radius:18px;background:var(--glass);border:1px solid var(--line);padding:4px 22px}
details.q summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:17.5px;display:flex;justify-content:space-between;gap:16px}
details.q summary::after{content:"+";font-size:24px;line-height:1;transition:transform .35s var(--ease)}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{padding:0 0 18px;color:var(--ink2)}

/* final cta */
.final{border-radius:34px;padding:64px 40px;text-align:center;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(10,143,208,.35),rgba(35,168,122,.35),rgba(217,165,20,.3),rgba(10,143,208,.35));animation:spin 18s linear infinite;filter:blur(40px)}
.final>*{position:relative}
.final h2{font-size:clamp(32px,4.6vw,56px);margin-bottom:14px}
.final p{color:#C9D6DE;max-width:56ch;margin:0 auto 28px}
.final .btn-primary{background:#fff;color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

.crumbs{font-size:14px;color:var(--ink2);margin-bottom:18px}
.crumbs a{color:var(--ink2)}

footer{padding:50px 0 60px;border-top:1px solid var(--line);font-size:15px;color:var(--mut)}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{text-decoration:underline}

.to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;opacity:0;transform:translateY(12px);transition:.4s var(--ease);z-index:40}
.to-top.show{opacity:1;transform:none}

/* reveal choreography */
/* above the fold: move in, never hidden, so the first paint is instant */
.rise{animation:rise 1.2s var(--ease) both}
@keyframes rise{from{transform:translateY(28px)}to{transform:none}}
.hero-h1{animation:rise 1.3s var(--ease) both}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease) .15s}
.in .wipe,.wipe.in{clip-path:inset(0 0 0 0)}
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.12s}.stagger.in>*:nth-child(3){transition-delay:.24s}
.stagger.in>*:nth-child(4){transition-delay:.36s}.stagger.in>*:nth-child(5){transition-delay:.48s}.stagger.in>*:nth-child(6){transition-delay:.6s}

@media (max-width:980px){
  .grid{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}
  .nav ul,.nav .login{display:none}.menu-btn{display:grid;place-items:center}
  .nav.open ul{display:grid;position:absolute;top:70px;left:0;right:0;background:#fff;padding:18px 20px;border-bottom:1px solid var(--line);gap:14px}
  .nav .btn-primary.top{display:none}
}
@media (max-width:640px){
  .grid,.plans{grid-template-columns:1fr}.mock-inner{grid-template-columns:1fr}.mock-side{display:none}
  .mock-main{grid-template-columns:1fr 1fr}.m-wide{grid-column:span 2}section{padding:64px 0}.final{padding:48px 22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.stagger>*{opacity:1;transform:none}.wipe{clip-path:none}.flight path{stroke-dashoffset:0}.loader{display:none}
}
/* phones: the comparison table fits the screen instead of scrolling sideways; footer links clear the back-to-top button */
@media (max-width:640px){table{min-width:0;font-size:13px}th,td{padding:10px 8px!important}footer{padding-bottom:84px}}

/* ───────── dark theme: follows the device, or the moon/sun switch in the menu ───────── */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#EAF2F6; --ink2:#B9C8D2; --mut:#98A9B4;
  --bg:#071118; --bg2:#0D1A23; --glass:rgba(18,32,43,.66); --line:rgba(255,255,255,.10);
}
:root[data-theme="dark"] header.site{background:rgba(7,17,24,.72)}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .final .btn-primary{background:#fff;color:#0E1B24}
:root[data-theme="dark"] .btn-glass:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .plan.feat,:root[data-theme="dark"] .final{background:#0F2433;color:#EAF2F6}
:root[data-theme="dark"] .plan.feat .btn-primary{background:#fff;color:#0E1B24}
:root[data-theme="dark"] .bubble.them{background:#16262F;color:#EAF2F6}
:root[data-theme="dark"] .bubble.us{background:#1E5C7C;color:#fff}
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .card,:root[data-theme="dark"] .panel,:root[data-theme="dark"] details.q,:root[data-theme="dark"] .table-wrap,:root[data-theme="dark"] .mock{background:var(--glass);border-color:var(--line)}
:root[data-theme="dark"] .to-top,:root[data-theme="dark"] .menu-btn{background:#12222C;color:#EAF2F6;border-color:var(--line)}
:root[data-theme="dark"] .hero .eyebrow{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .aura i{opacity:.35}
:root[data-theme="dark"] .nav.open ul{background:#0D1A23}
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--ink2);cursor:pointer;flex:none}
.theme-btn:hover{color:var(--ink)}
.theme-btn .moon{display:none}:root[data-theme="dark"] .theme-btn .sun{display:none}:root[data-theme="dark"] .theme-btn .moon{display:block}

/* smooth fade between pages (browsers that support it; others just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
@media (max-width:980px){.theme-btn{margin-left:auto}.theme-btn+.menu-btn{margin-left:0}}

/* === MOBILE: centered, tight === */
/* Connery, 2026-10-01: phone layout is centered and tight, and section titles rotate
   through the brand colours instead of all being the same white.
   Specificity is deliberately high — build.sh inlines this file ABOVE each page's own
   <style> block, so a plain selector would lose to it. */

/* ── title colours (both breakpoints) ───────────────────────────────────
   Connery, 2026-10-01: titles are yellow or white only — no blues or greens.
   "White" is the page's ink, so it reads as near-black on the light theme.
   The yellow is darkened on light backgrounds; #D9A514 on white fails contrast. */
:root{ --t-white:#0E1B24; --t-yellow:#8A6410 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --t-white:#EAF2F6; --t-yellow:#F6CC48 } }
:root[data-theme="dark"]{ --t-white:#EAF2F6; --t-yellow:#F6CC48 }

body main h2{ color:var(--t-white) }
body main section:nth-of-type(2n) h2{ color:var(--t-yellow) }
/* an article keeps all its h2s in one section, so alternate within the column too */
body main .tut h2:nth-of-type(2n), body main .post h2:nth-of-type(2n){ color:var(--t-yellow) }
body main .tut h2:nth-of-type(2n+1), body main .post h2:nth-of-type(2n+1){ color:var(--t-white) }
body main .tut h3, body main .post h3{ color:var(--t-yellow) }
body main .final h2, body main .what h2, body main section .final h2, body main section .what h2{ color:inherit }

@media (max-width: 760px){
  body main, body main section, body main .wrap,
  body main h1, body main h2, body main h3, body main h4,
  body main p, body main li, body main figcaption, body main .dek, body main .lede,
  body main .crumbs, body main .sec-head, body main .final, body main .take,
  body main .postcard, body main .card, body main details, body main summary,
  body main th, body main td{ text-align:center }
  body main ul, body main ol{ list-style-position:inside; margin-left:0; padding-left:0 }
  body main .sec-head .rule, body main .rule-u, body main .rule{ margin-left:auto; margin-right:auto }
  body main .kick, body main .chip, body main .badge, body main .stepno,
  body main .kicker-line, body main .getpdf, body main .pricerow,
  body main .whatgrid div{ justify-content:center; align-self:center; text-align:center }
  body main .whatgrid div{ flex-direction:column; align-items:center; gap:4px }
  body main .vidrow, body main .grid, body main .plans, body main .split{ justify-items:center }
  body main .c-pricing{ overflow-x:clip }
  body main .post table, body main .tut table{ display:block; max-width:100%; overflow-x:auto }

  /* ── spacing: one cap beats the pile of stacked paddings ── */
  body main > section, body main > div > section{ padding-top:18px !important; padding-bottom:18px !important }
  body main > section.hero{ padding-top:14px !important; padding-bottom:2px !important }
  body main .hero .btn{ margin-bottom:2px }
  body main > section.lp-next, body main .hero + section{ padding-top:10px !important }
  body main .hero > .wrap > *:last-child{ margin-bottom:0 !important }
  body main .wrap{ padding-left:18px; padding-right:18px }
  body main .sec-head{ margin-bottom:12px }
  body main h1{ margin-bottom:8px }
  body main h2{ margin-top:18px; margin-bottom:8px }
  body main h3{ margin-top:14px; margin-bottom:6px }
  body main p{ margin-bottom:10px }
  body main p:last-child{ margin-bottom:0 }
  body main .lede, body main .dek{ margin-bottom:10px }
  body main .final{ padding:20px 16px }
  body main .what{ margin-top:22px; padding:18px 16px }
  body main .take{ margin:14px 0; padding:13px 15px }
  body main .vidrow{ gap:14px; margin:14px 0 }
  body main .grid{ gap:12px }
  body main .getpdf{ margin:16px 0; padding:15px 16px; gap:11px }
  body main .crumbs{ margin-bottom:8px }
  body main .postcard, body main .card{ padding:15px 15px }
  body main table{ margin:12px 0 }
  body main .tut, body main .post{ max-width:100% }
  /* the cinematic home sections carry their own large paddings */
  body main .c-ride, body main .c-merge, body main .c-stats, body main .c-marquee{
    padding-top:18px !important; padding-bottom:18px !important }
  body main .ride-head, body main .stats, body main .mock, body main .mock-inner{ margin-top:0 !important }
  body main .ride-head{ margin-bottom:14px !important }
  body main .ride-track{ padding-bottom:0 !important }
  body main .ride-track > *:last-child{ margin-bottom:0 !important }
  body main .c-ride{ padding-bottom:8px !important }
  body main .c-stats{ padding-top:8px !important }
  body main .c-ride img, body main .c-ride .mock{ margin-bottom:0 !important }
}

/* === DESKTOP: close the section seams === */
/* Measured 144-168px voids between sections at 1280px. Same cause as the mobile ones:
   a section's bottom padding plus the next one's top padding plus an inner margin. */
@media (min-width: 761px){
  body main > section{ padding-top:42px; padding-bottom:42px }
  body main > section.hero{ padding-bottom:14px }
  body main .hero + section{ padding-top:26px }
  body main .sec-head{ margin-bottom:18px }
  body main .final{ padding:40px 36px }
  body main > section > .wrap > *:last-child{ margin-bottom:0 }
}

/* 2026-10-17: the nav gained "AI agents" and wrapped to two lines between 981 and ~1150px (it already did below ~1050px
   on the pages that also carry "vs GoHighLevel"). A little less gap and a slightly smaller link keeps it on one line. */
@media (min-width: 981px) and (max-width: 1240px){
  .nav{gap:14px}
  .nav ul{gap:13px}
  .nav ul a,.nav .login{font-size:14.5px}
  .nav .btn.top{padding:0 16px;min-height:42px;font-size:14.5px}
}
/* nine nav items (the pages that carry "vs GoHighLevel", or "Inbox", plus "AI agents") do not fit the 1160px container at full size */
@media (min-width: 981px){
  .nav:has(> ul > li:nth-child(9)){gap:14px}
  .nav ul:has(> li:nth-child(9)){gap:13px}
  .nav ul:has(> li:nth-child(9)) a{font-size:14.5px}
}