/* =====================================================================
   GOOGLE PPC AGENCY — DESIGN ENHANCEMENT LAYER
   Loaded AFTER each page's own <style>, so it only adds / overrides
   visuals. No page text is changed by this file.
   To undo everything: delete the <link> to this file from a page.
   ===================================================================== */

:root{
  --x-ease:cubic-bezier(.2,.7,.2,1);
  --x-orange-glow:rgba(242,118,12,.16);
  --x-green-glow:rgba(28,92,67,.14);
  --x-white:#fff;
}
::selection{background:var(--orange);color:#fff;}
html{scroll-padding-top:96px;scrollbar-color:var(--green) var(--bg-alt);}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;}

/* ---------------------------------------------------------------
   1. WIDER LAYOUT ON BIG SCREENS  (fixes the empty side gaps)
   --------------------------------------------------------------- */
@media (min-width:1200px){
  .wrap,.nav-inner{max-width:1320px;padding-left:40px;padding-right:40px;}
}
@media (min-width:1700px){
  .wrap,.nav-inner{max-width:1480px;}
}
.wrap{position:relative;z-index:1;}
.section-head.center{max-width:780px;}

/* ---------------------------------------------------------------
   2. AMBIENT SIDE DECOR (dot-grid edges + soft colour orbs)
   --------------------------------------------------------------- */
section{position:relative;overflow-x:clip;}
section:not(.auction-section):not(.hero):not(.page-hero):not(.why-section)::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(28,92,67,.20) 1.1px,transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 19%,transparent 81%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,transparent 19%,transparent 81%,#000 100%);
  opacity:.8;
}
section:not(.auction-section):not(.hero):not(.page-hero):not(.why-section)::after{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  pointer-events:none;z-index:0;top:8%;filter:blur(40px);
}
section:nth-of-type(odd):not(.auction-section):not(.hero):not(.page-hero):not(.why-section)::after{
  left:-300px;background:radial-gradient(circle,var(--x-orange-glow),transparent 68%);
}
section:nth-of-type(even):not(.auction-section):not(.hero):not(.page-hero):not(.why-section)::after{
  right:-300px;background:radial-gradient(circle,var(--x-green-glow),transparent 68%);
}
/* dark "why" sections */
.why-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 10% 12%,rgba(242,118,12,.10),transparent 30%),
    radial-gradient(circle at 92% 82%,rgba(74,170,128,.22),transparent 40%),
    radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.3px);
  background-size:auto,auto,26px 26px;
}

/* ---------------------------------------------------------------
   3. SECTION HEADS  →  title left / text right on desktop
   --------------------------------------------------------------- */
@media (min-width:1024px){
  .section-head:not(.center){
    max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:80px;align-items:center;
  }
  .section-head:not(.center) .eyebrow{grid-column:1 / -1;justify-self:start;}
  .section-head:not(.center) h2{grid-column:1;}
  .section-head:not(.center) p{grid-column:2;margin:0 0 6px;max-width:none;}
}

/* ---------------------------------------------------------------
   4. HEADER, PROGRESS BAR, BACK-TO-TOP
   --------------------------------------------------------------- */
.x-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:10000;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--orange));}
header{transition:box-shadow .25s ease,background .25s ease;}
header.is-scrolled{box-shadow:0 12px 30px -20px rgba(18,42,34,.45);background:rgba(245,244,240,.96);}
@media (min-width:761px){
  .nav-inner{transition:height .25s ease;}
  header.is-scrolled .nav-inner{height:64px;}
}
.x-top{position:fixed;left:24px;bottom:24px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--green-deep);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow);z-index:9998;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s,color .2s;}
.x-top.show{opacity:1;visibility:visible;transform:none;}
.x-top:hover{background:var(--green);color:#fff;border-color:var(--green);}
.x-top svg{width:18px;height:18px;}

/* logo fallback (shown only while the logo <img> has no src / fails) */
.x-logo-fb{display:none;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:20px;color:var(--green-deep);letter-spacing:-.01em;}
.x-logo-fb i{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  font-style:normal;font-size:18px;color:#fff;background:linear-gradient(145deg,var(--green),var(--green-deep));
  box-shadow:0 8px 18px -8px rgba(18,42,34,.55);}
img[src=""]+.x-logo-fb,img.x-broken+.x-logo-fb{display:inline-flex;}
img.logo-img[src=""],img.logo-img.x-broken,.footer-logo-wrap img[src=""],.footer-logo-wrap img.x-broken{display:none;}

/* ---------------------------------------------------------------
   5. SCROLL REVEAL  (uses `translate` so it never fights hover transforms)
   --------------------------------------------------------------- */
.x-anim .rv{opacity:0;translate:0 28px;}
.x-anim .rv.rv-in{opacity:1;translate:0 0;animation:xRise .85s var(--x-ease) both;animation-delay:var(--rv-delay,0s);}
@keyframes xRise{from{opacity:0;translate:0 28px;}to{opacity:1;translate:0 0;}}

/* ---------------------------------------------------------------
   6. CARDS: spotlight follows the cursor, icon tiles flip colour
   --------------------------------------------------------------- */
.x-spot{position:relative;isolation:isolate;}
.x-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:0;
  transition:opacity .3s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(242,118,12,.11),transparent 62%);}
.x-spot:hover::after{opacity:1;}
.why-card.x-spot::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(242,118,12,.20),transparent 62%);}
.service-card .ic,.why-card .ic{transition:background .25s ease,transform .25s ease;}
.service-card:hover .ic{background:var(--green);transform:rotate(-6deg) scale(1.06);}
.service-card:hover .ic svg [stroke]{stroke:#fff;}
.why-card:hover .ic{background:var(--orange);transform:rotate(6deg) scale(1.06);}
.why-card:hover .ic svg [stroke]{stroke:#fff;}
.why-card:hover .ic svg [fill]:not([fill="none"]){fill:#fff;}
.why-card{transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.why-card:hover{transform:translateY(-5px);border-color:rgba(242,118,12,.45);background:rgba(255,255,255,.07);}
.kpi-card{transition:transform .2s ease,box-shadow .2s ease;}
.kpi-card:hover{transform:translateY(-5px);}
.type-card,.platform-card,.result-card,.ba-card{transition:transform .2s ease,box-shadow .2s ease;}
.result-card:hover,.ba-card:hover{box-shadow:var(--shadow);}
.blog-card img,.type-card img,.platform-card img,.feature-visual img{transition:transform .6s var(--x-ease);}
.blog-card:hover img,.type-card:hover img,.platform-card:hover img{transform:scale(1.05);}
.feature-visual img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);}
.blog-card__cover{transition:background .3s ease,font-size .3s ease;}
.blog-card:hover .blog-card__cover{background:linear-gradient(135deg,var(--green-soft),#f6e3d0);}

/* process steps: circles get a soft pulse ring on hover */
.process-card:hover .circle::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(28,92,67,.18);}

/* ---------------------------------------------------------------
   7. BUTTONS
   --------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn-orange{background:linear-gradient(180deg,#f8862a,var(--orange));}
.btn-orange::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);
  transition:left .7s ease;}
.btn-orange:hover::after{left:150%;}
.btn svg{transition:transform .2s ease;}
.btn:hover svg{transform:translateX(3px);}
.hero .hero-ctas .btn-orange{animation:xPulse 3s ease-in-out infinite;}
@keyframes xPulse{0%,100%{box-shadow:0 10px 22px -8px rgba(242,118,12,.55),0 0 0 0 rgba(242,118,12,.32);}
  55%{box-shadow:0 10px 22px -8px rgba(242,118,12,.55),0 0 0 12px rgba(242,118,12,0);}}

/* ---------------------------------------------------------------
   8a. HOME HERO
   --------------------------------------------------------------- */
.hero{background:
  radial-gradient(880px 520px at 88% 8%,rgba(28,92,67,.12),transparent 62%),
  radial-gradient(700px 440px at 4% 96%,rgba(242,118,12,.11),transparent 62%);}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(18,42,34,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(18,42,34,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 78%);}
.hero .wrap{position:relative;z-index:1;}
.hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:11px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 17 1 32 6 T 62 5 T 92 5 T 118 4' fill='none' stroke='%23f2760c' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  -webkit-text-fill-color:initial;clip-path:inset(0 100% 0 0);animation:xDraw 1.1s .5s var(--x-ease) forwards;}
@keyframes xDraw{to{clip-path:inset(0 0 0 0);}}
.auction-board{transition:transform .25s ease,box-shadow .25s ease;will-change:transform;}
.hero-visual{perspective:1200px;}

/* floating chips (hero + inner heroes) */
.x-chip{position:absolute;z-index:3;display:none;align-items:center;gap:12px;padding:12px 16px 12px 12px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px -20px rgba(18,42,34,.42);animation:xFloat 7s ease-in-out infinite;
  backdrop-filter:blur(8px);}
.x-chip .ico{width:38px;height:38px;border-radius:11px;background:var(--green-soft);display:grid;place-items:center;flex-shrink:0;}
.x-chip .ico svg{width:19px;height:19px;}
.x-chip b{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--green-deep);line-height:1.15;}
.x-chip span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;}
.x-chip.orange .ico{background:rgba(242,118,12,.13);}
@keyframes xFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@media (min-width:1100px){
  .hero-visual .x-chip{display:flex;}
  .hero-visual .x-chip--a{top:-62px;left:6%;}
  .hero-visual .x-chip--b{bottom:-62px;right:4%;animation-delay:-3.2s;}
}

/* ---------------------------------------------------------------
   8b. INNER-PAGE HEROES: mesh background + floating side cards
   --------------------------------------------------------------- */
.page-hero,.post-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(640px 320px at 12% 0%,rgba(242,118,12,.10),transparent 65%),
    radial-gradient(700px 340px at 90% 100%,rgba(28,92,67,.13),transparent 65%);}
.page-hero::before,.post-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(18,42,34,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,42,34,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 60% 95% at 50% 40%,#000 15%,transparent 75%);
          mask-image:radial-gradient(ellipse 60% 95% at 50% 40%,#000 15%,transparent 75%);}
@media (min-width:1024px){.page-hero{padding:72px 0 56px;}}
@media (min-width:1360px){
  .page-hero > .x-chip,.post-hero > .x-chip{display:flex;}
  .x-chip--l{left:clamp(32px,calc(50% - 640px),260px);top:34%;}
  .x-chip--r{right:clamp(32px,calc(50% - 640px),260px);top:52%;animation-delay:-3.5s;}
}

/* ---------------------------------------------------------------
   9. DARK BLOCKS: glowing orbs + grid on CTA bands, animated pricing border
   --------------------------------------------------------------- */
.cta-band{isolation:isolate;}
.cta-band::before{content:"";position:absolute;z-index:-1;width:460px;height:460px;right:-130px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,118,12,.42),transparent 66%);animation:xDrift 11s ease-in-out infinite alternate;}
.cta-band::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px),radial-gradient(circle at 8% 100%,rgba(74,170,128,.30),transparent 40%);
  background-size:26px 26px,auto;}
@keyframes xDrift{to{transform:translate(-70px,50px) scale(1.15);}}
.price-card{transition:transform .2s ease,box-shadow .2s ease;}
.price-card:not(.featured):hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.price-card.featured{border:1.5px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,var(--green),var(--orange),var(--green)) border-box;
  background-size:auto,300% 300%;animation:xBorder 7s linear infinite;
  box-shadow:0 30px 60px -28px rgba(28,92,67,.45);}
@keyframes xBorder{0%{background-position:0 0,0% 50%;}100%{background-position:0 0,300% 50%;}}
.stats-ticker{background:linear-gradient(90deg,var(--bg-alt),#f4efe4,var(--bg-alt));}

/* ---------------------------------------------------------------
   10. IMAGE PLACEHOLDERS: look intentional until real images go in
   --------------------------------------------------------------- */
.img-placeholder,.result-img{
  background:linear-gradient(135deg,rgba(28,92,67,.07),rgba(242,118,12,.09)),var(--bg-alt);}
.img-placeholder{position:relative;flex-direction:column;gap:10px;border-color:rgba(28,92,67,.28);}
.img-placeholder::before{content:"";width:36px;height:36px;opacity:.55;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c5c43' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E") center/contain no-repeat;}
.result-card{border-radius:var(--radius);}

/* ---------------------------------------------------------------
   11. FAQ  →  two columns with a sticky help card (desktop)
   --------------------------------------------------------------- */
.x-faq-cta{margin-top:26px;padding:22px;border-radius:16px;background:var(--green-deep);color:#fff;position:relative;overflow:hidden;
  text-align:left;}
.x-faq-cta::before{content:"";position:absolute;right:-60px;top:-70px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,118,12,.45),transparent 68%);}
.x-faq-cta b{display:block;position:relative;font-family:'Space Grotesk',sans-serif;font-size:17px;margin-bottom:6px;}
.x-faq-cta span{display:block;position:relative;font-size:14px;color:#b9cbc1;margin-bottom:16px;line-height:1.55;}
.x-faq-cta .btn{position:relative;padding:11px 18px;font-size:14px;background:#25D366;box-shadow:0 10px 22px -8px rgba(37,211,102,.55);color:#fff;}
@media (min-width:1024px){
  #faq .wrap{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.5fr);gap:76px;align-items:start;}
  #faq .section-head,#faq .section-head.center{position:sticky;top:110px;text-align:left;margin:0;max-width:none;}
  #faq .section-head p{max-width:none;}
  #faq .faq-list{max-width:none;margin:0;}
}
@media (max-width:1023px){.x-faq-cta{max-width:460px;margin-left:auto;margin-right:auto;text-align:center;}}
.faq-item{transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;}
.faq-item:hover{border-color:rgba(28,92,67,.35);}
.faq-item.open{border-color:var(--green);box-shadow:0 20px 40px -24px rgba(28,92,67,.4);}

/* ---------------------------------------------------------------
   12. NEW HOME SECTIONS: stats band · industries · comparison
   --------------------------------------------------------------- */
.x-band{padding:72px 0;background:linear-gradient(120deg,var(--green-deep) 0%,#17402f 55%,var(--green) 130%);color:#fff;}
.x-band::before,.x-band::after{display:none !important;}
.x-band .wrap{position:relative;z-index:1;}
.x-band__glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 8% 15%,rgba(242,118,12,.13),transparent 28%),
             radial-gradient(circle at 95% 90%,rgba(74,170,128,.25),transparent 36%),
             radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.3px);
  background-size:auto,auto,26px 26px;}
.x-band__label{text-align:center;font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#ffb27a;margin-bottom:34px;font-weight:600;}
.x-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.x-stat{text-align:center;padding:8px 22px;position:relative;}
.x-stat + .x-stat::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.22),transparent);}
.x-stat__num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,4vw,54px);line-height:1.05;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#cfe3d8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.x-stat__lbl{margin-top:10px;font-size:13.5px;color:#a9bcb2;line-height:1.45;}
@media (max-width:980px){
  .x-stats{grid-template-columns:repeat(2,1fr);row-gap:34px;}
  .x-stat:nth-child(odd)::before{display:none;}
}

.x-industries{background:var(--bg);}
.x-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.x-ind{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.x-ind:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;}
.x-ind .ic{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;background:var(--green-soft);transition:background .25s,transform .25s;}
.x-ind:hover .ic{background:var(--green);transform:rotate(-6deg) scale(1.06);}
.x-ind:hover .ic svg [stroke]{stroke:#fff;}
.x-ind h3{font-size:17.5px;font-weight:600;margin-bottom:6px;}
.x-ind p{font-size:14.5px;color:var(--ink-soft);}
.x-ind-foot{text-align:center;margin-top:40px;font-size:15.5px;color:var(--ink-soft);}
.x-ind-foot a{color:var(--orange);font-weight:700;font-family:'Space Grotesk',sans-serif;margin-left:6px;}
@media (max-width:980px){.x-ind-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.x-ind-grid{grid-template-columns:1fr;}}

.x-compare-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.x-compare{max-width:1040px;margin:0 auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);}
.x-compare__row{display:grid;grid-template-columns:1.05fr 1.2fr 1.4fr;align-items:stretch;}
.x-compare__row > div{padding:19px 24px;font-size:15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;}
.x-compare__row:last-child > div{border-bottom:none;}
.x-compare__row.head > div{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--bg-alt);padding-top:22px;padding-bottom:22px;}
.x-compare__row.head > div:last-child{background:var(--green-deep);color:#fff;}
.x-compare__row > div:first-child{font-weight:700;color:var(--green-deep);font-family:'Space Grotesk',sans-serif;}
.x-compare__row > div:nth-child(2){color:var(--ink-soft);}
.x-compare__row > div:nth-child(3){background:linear-gradient(90deg,rgba(226,235,228,.75),rgba(226,235,228,.35));color:var(--green-deep);font-weight:600;}
.x-compare__row.head > div:nth-child(3){background:var(--green-deep);}
.x-compare__row .no,.x-compare__row .yes{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;}
.x-compare__row .no{background:rgba(92,102,95,.13);}
.x-compare__row .yes{background:var(--green);}
.x-compare__row .no svg,.x-compare__row .yes svg{width:11px;height:11px;}
@media (max-width:760px){
  .x-compare__row{grid-template-columns:1fr;}
  .x-compare__row > div{padding:12px 20px;border-bottom:none;}
  .x-compare__row > div:first-child{padding-top:18px;background:var(--bg-alt);}
  .x-compare__row:not(.head){border-bottom:1px solid var(--line);}
  .x-compare__row.head{display:none;}
}

/* ---------------------------------------------------------------
   13. ARTICLE PAGES: reading column + sticky CTA sidebar on wide
   screens, single stacked column on mobile/tablet so the reading
   column never gets squeezed narrow.
   --------------------------------------------------------------- */
.x-article-shell{width:min(1180px,100% - 48px);margin:0 auto;padding:44px 0 0;}
.x-article-main{min-width:0;}
.x-article-shell > .x-toc{display:none;}
@media (min-width:1100px){
  .x-article-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;}
}
/* Wide screens + a post that actually has H2 headings: bring back the
   left "On this page" rail so the reading column sits between two
   sticky sidebars instead of floating in a sea of empty margin.
   Gated on .has-toc (only added server-side when $toc_items isn't
   empty) so a post with no H2s never reserves an empty 260px grid
   track — that reserved-but-unfilled track was the previous bug: with
   only 2 grid children present, the browser auto-placed them into the
   first 2 explicit tracks (260px + 1fr) instead of the intended
   (1fr + 320px), squeezing the article text into ~260px. Below 1340px
   we fall back to the inline dropdown TOC (.x-toc-m) above the body. */
@media (min-width:1340px){
  .x-article-shell.has-toc{width:min(1440px,100% - 48px);grid-template-columns:260px minmax(0,1fr) 320px;gap:48px;}
  .x-article-shell.has-toc > .x-toc{display:block;position:sticky;top:104px;align-self:start;order:-1;
    max-height:calc(100vh - 130px);overflow-y:auto;}
  .x-article-shell.has-toc .x-toc-m{display:none;}
}
/* The reading column itself gets a fixed, centered max-width instead of
   stretching to fill whatever space happens to be left between the two
   sidebars. That leftover space isn't symmetric (the left TOC is 260px,
   the right sidebar is 320px), so a full-width text column would sit
   visually off-center even though it's technically "the middle grid
   track". Capping + centering it here keeps the text itself balanced
   and at a consistent, comfortable line-length on every screen size —
   with or without the left TOC, and on mobile it just becomes 100%
   width (nothing to center against) so nothing changes there. */
.x-article-main .article-cover{max-width:none;padding:0;margin:0;}
.x-article-main .article-body{max-width:740px;margin:0 auto;padding:38px 0 0;}
.x-article-main .article-back{max-width:740px;margin:34px auto 0;padding:24px 0 0;}
.x-article-main .x-toc-m,.x-article-main .x-share{max-width:740px;margin-left:auto;margin-right:auto;}
.x-article-main .article-body > p:first-child{font-size:20.5px;line-height:1.75;color:var(--green-deep);font-weight:500;}
.x-article-main .article-body h2{scroll-margin-top:104px;position:relative;}
.x-article-main .article-body h2::before{content:"";display:block;width:44px;height:4px;border-radius:4px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--orange),rgba(242,118,12,.15));}
.x-article-main .article-body li{transition:transform .2s ease;}
.x-article-main .article-body li:hover{transform:translateX(4px);}
.x-toc{display:none;}
.x-aside{display:flex;flex-direction:column;gap:18px;margin-top:38px;}
/* No align-items/align-self overrides here on purpose: grid's default
   "stretch" makes the aside's own box the same height as the (taller)
   reading column, which gives position:sticky room to keep the card
   pinned for the whole article and release it again near the end. */
@media (min-width:1100px){
  .x-aside{margin-top:0;position:sticky;top:104px;}
}
.x-toc__title,.x-share__title{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
.x-toc ol{list-style:none;border-left:2px solid var(--line);}
.x-toc a{display:block;padding:9px 0 9px 18px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--ink-soft);transition:color .2s,border-color .2s,padding .2s;}
.x-toc a:hover{color:var(--green);}
.x-toc a.active{color:var(--green-deep);border-left-color:var(--orange);font-weight:600;padding-left:22px;}
.x-side-card{border-radius:18px;padding:26px;position:relative;overflow:hidden;}
.x-side-card.dark{background:linear-gradient(160deg,var(--green-deep),#173f30);color:#fff;box-shadow:0 26px 50px -26px rgba(18,42,34,.7);}
.x-side-card.dark::before{content:"";position:absolute;right:-70px;top:-80px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(242,118,12,.5),transparent 68%);}
.x-side-card.dark h4{position:relative;font-family:'Space Grotesk',sans-serif;font-size:19px;line-height:1.25;margin-bottom:10px;color:#fff;}
.x-side-card.dark p{position:relative;font-size:14px;line-height:1.6;color:#b9cbc1;margin-bottom:18px;}
.x-side-card.dark .btn{position:relative;width:100%;padding:13px 18px;font-size:14.5px;}
.x-side-card.dark .btn + .btn{margin-top:10px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none;}
.x-side-card.dark .btn + .btn:hover{background:#25D366;border-color:#25D366;}
.x-side-card.light{background:var(--card);border:1px solid var(--line);display:flex;align-items:center;gap:14px;
  box-shadow:0 20px 40px -32px rgba(18,42,34,.35);transition:transform .25s ease,box-shadow .25s ease;}
.x-side-card.light:hover{transform:translateY(-3px);box-shadow:0 26px 48px -28px rgba(18,42,34,.4);}
.x-side-card.light .avatar{width:50px;height:50px;font-size:16px;flex-shrink:0;}
.x-side-card.light strong{display:flex;align-items:center;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:15.5px;color:var(--green-deep);}
.x-side-card.light strong .verified{width:15px;height:15px;flex-shrink:0;color:var(--green);}
.x-side-card.light span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
.x-share{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
.x-share__row{display:flex;flex-wrap:wrap;gap:10px;}
.x-share__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--green-deep);cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:background .2s,color .2s,border-color .2s,transform .2s;}
.x-share__btn:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px);}
.x-share__btn svg{width:15px;height:15px;}

/* privacy / legal: contents on the left */
.x-legal-shell{display:grid;gap:36px;}
@media (min-width:1100px){.x-legal-shell{grid-template-columns:270px minmax(0,800px);justify-content:center;gap:64px;}}
.x-legal-shell .prose{max-width:none;margin:0;}
.x-legal-shell .x-toc{display:none;}
@media (min-width:1100px){.x-legal-shell .x-toc{display:block;position:sticky;top:104px;align-self:start;}}
.x-legal-shell .prose h2{scroll-margin-top:104px;}

/* ---------------------------------------------------------------
   14. BLOG INDEX: working filters, search, featured first post
   --------------------------------------------------------------- */
.x-pill{transition:background .2s,color .2s,border-color .2s,transform .2s;user-select:none;}
.x-pill:hover{transform:translateY(-2px);border-color:var(--green) !important;}
.x-pill.is-active{background:var(--green) !important;color:#fff !important;border-color:var(--green) !important;}
.x-pill.is-active::before{background:#fff;}
.x-search{max-width:460px;margin:18px auto 0;position:relative;}
.x-search svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--ink-soft);pointer-events:none;}
.x-search input{width:100%;padding:14px 18px 14px 46px;border-radius:100px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;}
.x-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(28,92,67,.12);}
.blog-card.is-hidden{display:none;}
.x-empty{grid-column:1 / -1;text-align:center;padding:40px 0;color:var(--ink-soft);}
@media (min-width:900px){
  .blog-card.x-feat{grid-column:1 / -1;display:grid;grid-template-columns:1fr;}
  .blog-card.x-feat:has(> .img-placeholder),.blog-card.x-feat:has(> img),.blog-card.x-feat:has(> .blog-card__cover){grid-template-columns:1.1fr 1fr;}
  .blog-card.x-feat:not(:has(> .img-placeholder)):not(:has(> img)):not(:has(> .blog-card__cover)) .blog-card__body{padding:40px 44px;}
  .blog-card.x-feat:not(:has(> .img-placeholder)):not(:has(> img)):not(:has(> .blog-card__cover)) p{max-width:720px;}
  .blog-card.x-feat > .img-placeholder,.blog-card.x-feat > img{height:100%;aspect-ratio:auto !important;min-height:340px;object-fit:cover;}
  .blog-card.x-feat .blog-card__body{padding:44px;justify-content:center;}
  .blog-card.x-feat h3{font-size:28px;line-height:1.25;}
  .blog-card.x-feat p{font-size:16px;flex:0 0 auto;}
  .blog-card.x-feat .blog-card__cover{aspect-ratio:auto;min-height:340px;font-size:64px;}
}

/* ---------------------------------------------------------------
   16. MOBILE ACTION BAR
   --------------------------------------------------------------- */
.x-mbar{display:none;}
@media (max-width:760px){
  .x-mbar{position:fixed;left:0;right:0;bottom:0;z-index:9990;display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -14px 30px -20px rgba(18,42,34,.45);}
  .x-mbar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 6px;border-radius:11px;font-size:13.5px;font-weight:700;
    font-family:'Space Grotesk',sans-serif;border:1px solid var(--line);color:var(--green-deep);background:#fff;}
  .x-mbar a.wa{background:#25D366;border-color:#25D366;color:#fff;}
  .x-mbar a.book{background:var(--orange);border-color:var(--orange);color:#fff;}
  .x-mbar svg{width:16px;height:16px;flex-shrink:0;}
  .whatsapp-float{display:none !important;}
  body{padding-bottom:78px;}
  .x-top{left:14px;bottom:90px;width:42px;height:42px;}
  .x-band{padding:56px 0;}
}

/* ---------------------------------------------------------------
   17. RESPECT "reduce motion"
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .x-anim .rv{opacity:1 !important;translate:none !important;animation:none !important;}
  .x-chip,.cta-band::before,.price-card.featured,.hero .hero-ctas .btn-orange{animation:none !important;}
  .hero h1 .accent::after{animation:none;clip-path:none;}
}

/* small helpers added after first review */
.x-av{width:50px;height:50px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:16px;background:linear-gradient(145deg,var(--green),var(--green-deep));}

.marquee-section{padding:52px 0 64px;}

/* blog: give the filter pills room below the hero line */
.page-hero + section[style*="padding:0"]{padding-top:34px !important;}

/* =====================================================================
   MOBILE / TABLET FIXES  (added after the mobile audit)
   ===================================================================== */

/* --- A. Hamburger menu up to 1100px (desktop nav does not fit below that) --- */
@media (max-width:1120px){
  nav.main-nav{position:fixed;top:76px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:10px 20px 20px;display:none;
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;
    box-shadow:0 24px 40px -24px rgba(18,42,34,.35);}
  nav.main-nav.open{display:flex;}
  nav.main-nav > ul{flex-direction:column;align-items:stretch;width:100%;gap:2px;}
  .menu-toggle{display:block;padding:10px;}
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    background:transparent;padding:2px 0 6px 16px;display:none;min-width:0;}
  .nav-item.has-dropdown.open .dropdown-menu{display:block;}
  .nav-item.has-dropdown .chevron{margin-left:auto;}
  nav.main-nav a.nav-link{padding:13px 15px;}
  .dropdown-menu a{padding:13px 12px;}
  header.is-scrolled nav.main-nav{top:64px;max-height:calc(100dvh - 64px);}
}
@media (max-width:760px){ header.is-scrolled nav.main-nav{top:76px;} }
.x-nav-cta{display:none;}
@media (max-width:760px){
  .x-nav-cta{display:block;margin-top:10px;}
  .x-nav-cta .btn{width:100%;}
}
/* bottom action bar steps aside while the menu is open */
body.x-menu-open .x-mbar,body.x-menu-open .x-top{display:none;}

/* --- B. inline 3-column grids that ignored the responsive rules --- */
@media (max-width:980px){ .services-grid[style*="repeat(3"]{grid-template-columns:repeat(2,1fr) !important;} }
@media (max-width:640px){ .services-grid[style*="repeat(3"]{grid-template-columns:1fr !important;} }

/* --- C. forms: stack two-up rows on small phones, stop iOS zoom-on-focus --- */
@media (max-width:520px){ div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:16px 0 !important;} }
@media (max-width:760px){
  input,select,textarea{font-size:16px !important;}
}

/* --- D. comfortable tap targets --- */
@media (max-width:760px){
  .footer-col li{margin-bottom:2px;}
  .footer-col a{display:inline-block;padding:9px 0;}
  .footer-col .contact-line{padding:4px 0;}
  .breadcrumb a,.article-back a{padding:8px 4px;}
  .link-arrow{padding:10px 0;}
  .social-row a{width:44px;height:44px;}
}

/* Real photos dropped into img-placeholder slots */
.img-placeholder.real-photo{
  background:none;border:none;padding:0;display:block;
  object-fit:cover;
}
.blog-card__cover img.real-photo{border-radius:inherit;}

@media (max-width:600px){
  .legal-updated{padding-top:4px;}
}

/* --- E. things that were desktop-only now have a mobile form --- */
/* hero chips become a tidy row of pills under the hero on tablets/phones */
@media (max-width:1359px){
  .page-hero{text-align:center;}
  .page-hero > .x-chip{position:static;display:inline-flex;animation:none;margin:6px 5px 0;text-align:left;padding:8px 14px 8px 8px;}
  .page-hero > .x-chip .ico{width:32px;height:32px;border-radius:9px;}
  .page-hero > .x-chip b{font-size:14px;}
  .page-hero > .x-chip span{font-size:11.5px;}
  .page-hero > .x-chip--l{margin-top:26px;}
  .page-hero > .x-chip--r{margin-top:26px;}
}
@media (max-width:1099px){
  .hero-visual .x-chip{position:static;display:inline-flex;animation:none;margin:14px 5px 0;}
}
@media (max-width:760px){
  .hero-visual{flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:0 !important;}
  .hero-visual > .auction-board,.hero-visual > .channel-card,.hero-visual > *:not(.x-chip){flex:0 0 100%;}
  .hero-visual .x-chip{padding:8px 14px 8px 8px;}
  .hero-visual .x-chip .ico{width:32px;height:32px;}
}

/* article: collapsible contents box, always shown above the article */
.x-toc-m{display:block;margin:0 0 26px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.x-toc-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);}
.x-toc-m summary::-webkit-details-marker{display:none;}
.x-toc-m summary::after{content:"+";width:24px;height:24px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:17px;line-height:1;}
.x-toc-m[open] summary::after{content:"\2212";background:var(--orange);color:#fff;}
.x-toc-m ol{list-style:none;padding:0 18px 12px;}
.x-toc-m a{display:block;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--ink);}
.x-side-card.dark .btn{padding:14px 18px;}


/* --- F. last small-screen polish --- */
@media (max-width:380px){
  .hero h1{font-size:29px;}
  .hero h1 .accent{white-space:normal;}
  .hero h1 .accent::after{display:none;}
  .wrap{padding-left:18px;padding-right:18px;}
}
@media (max-width:760px){
  .footer-bottom a,.footer-col .contact-line a{display:inline-block;padding:9px 4px;}
  /* bigger touch area for the tiny testimonial dots */
  .slider-dots button{position:relative;}
  .slider-dots button::after{content:"";position:absolute;inset:-10px;}
  /* wide tables scroll inside their box, with edge shadows as a hint */
  .compare-wrap{background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(18,42,34,.22),transparent) 0 0/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(18,42,34,.22),transparent) 100% 0/14px 100% no-repeat scroll,
    var(--card);}
}
body.x-menu-open .whatsapp-float{display:none !important;}

/* ---------------------------------------------------------------
   Cover art inside formerly-empty image slots
   --------------------------------------------------------------- */
.img-placeholder.has-art,.blog-card__cover.has-art{position:relative;overflow:hidden;border-style:solid;border-color:transparent;background:#123a2b;}
.img-placeholder.has-art > span,.img-placeholder.has-art::before{display:none;}
.blog-card__cover.has-art{font-size:0;}
.x-art{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .7s var(--x-ease);}
.blog-card:hover .x-art,.type-card:hover .x-art,.platform-card:hover .x-art{transform:scale(1.06);}
figure.has-art-fig figcaption{display:none;}
figure.has-art-fig .img-placeholder{border-radius:16px;}
.article-cover .img-placeholder.has-art{box-shadow:0 30px 60px -34px rgba(18,42,34,.6);}

/* bug fix (existed in the original): the image box was taller than its card, hiding the card's title + text */
.type-card .img-placeholder,.platform-card .img-placeholder{min-height:0;}

/* ---------------------------------------------------------------
   Founder photo: small, logo-sized, same on desktop and mobile
   --------------------------------------------------------------- */
.x-fphoto,.x-av{position:relative;overflow:hidden;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;background:linear-gradient(145deg,var(--green),var(--green-deep));}
.x-fphoto{width:72px;height:72px;font-size:24px;border:3px solid #fff;box-shadow:0 0 0 1px var(--line),0 12px 24px -12px rgba(18,42,34,.55);}
.x-fphoto img,.x-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;color:transparent;font-size:0;}
.x-fphoto img.x-broken,.x-av img.x-broken{display:none;}
.founder-card{text-align:left !important;}
.founder-card .founder-body{text-align:left;}
.founder-card .founder-body .eyebrow{margin-left:0;margin-right:0;}
.founder-card .founder-body p{margin-left:0 !important;margin-right:0 !important;max-width:none !important;}
.founder-card .founder-body ul{margin-left:0 !important;max-width:none !important;}
@media (min-width:761px){
  .founder-card{max-width:960px !important;display:grid !important;grid-template-columns:72px minmax(0,1fr);column-gap:34px;align-items:start;padding:46px 52px !important;}
}
@media (max-width:760px){
  .founder-card{padding:26px 22px !important;}
  .x-fphoto{width:60px;height:60px;font-size:20px;border-width:2px;margin-bottom:16px;}
}


/* Testimonial marquee: seamless loop of exactly one set (see enhance.js) */
@keyframes xTestScroll{from{transform:translateX(0);}to{transform:translateX(var(--x-shift,-50%));}}
.test-marquee-track[data-x-fit]{animation:xTestScroll var(--x-dur,60s) linear infinite;}
@media (prefers-reduced-motion:reduce){.test-marquee-track[data-x-fit]{animation:none;}}


/* Rows whose picture was removed (about / contact) */
.feature-row--text{align-items:start;}
.feature-row--solo{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto;text-align:center;}
.feature-row--solo .feature-copy ul{display:inline-flex;align-items:flex-start;}
.feature-row--solo .feature-copy li{text-align:left;}

.cov-a{background:linear-gradient(135deg,var(--green-soft) 0%,#cfe3d6 100%);}
.cov-b{background:linear-gradient(135deg,#fde3cd 0%,#f8cfa3 100%);}
.cov-c{background:linear-gradient(135deg,var(--green-soft) 0%,#b9d6c4 100%);}
.cov-d{background:linear-gradient(135deg,#fde3cd 0%,#f2c398 100%);}

/* Article cover banner (blog post hero image) */
.article-banner{
  max-width:980px;margin:36px auto 0;padding:0 24px;
}
.article-banner .cov-inner{
  aspect-ratio:1.91/1;border-radius:18px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;box-shadow:0 30px 60px -34px rgba(18,42,34,.45);
}
.article-banner .cov-inner::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 1.5px,transparent 1.5px);
  background-size:20px 20px;}
.article-banner svg{position:relative;z-index:1;width:88px;height:88px;}
@media (max-width:600px){
  .article-banner{margin-top:24px;}
  .article-banner svg{width:64px;height:64px;}
}