*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg,iframe,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}
ul{list-style:none}

:root{
  color-scheme:light;
  --bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-elevated:#FFFFFF;--bg-code:#F6F8FA;
  --surface:#FFFFFF;--surface-2:#F8F9FA;--surface-3:#F1F3F4;
  --line:rgba(32,33,36,.08);--line-strong:#DADCE0;
  --border:rgba(0,0,0,.08);--border-strong:rgba(0,0,0,.14);
  --text:#202124;--text-2:#3C4043;--text-3:#80868B;--text-4:#B5B5B5;
  --text-muted:#5F6368;--text-faint:#80868B;
  --fill-1:rgba(32,33,36,.04);--fill-2:rgba(32,33,36,.07);
  --hover:rgba(32,33,36,.05);
  --accent:#0A0A0A;--accent-fg:#FFFFFF;
  --brand:#000000;--brand-hover:rgba(0,0,0,0.85);--on-brand:#FFFFFF;
  --success:#188038;--positive:#188038;--warn:#B45309;--danger:#B91C1C;
  --logo-filter:none;
  --shadow-card:0 1px 2px rgba(60,64,67,.06),0 4px 16px rgba(60,64,67,.08);
  --shadow-card-hover:0 2px 6px rgba(60,64,67,.08),0 20px 50px rgba(60,64,67,.16);
  --card-lift:0 1px 2px rgba(60,64,67,.06),0 4px 16px rgba(60,64,67,.10);
  --card-lift-hover:0 2px 6px rgba(60,64,67,.08),0 20px 50px rgba(60,64,67,.16);
  --side-bg:#FAFAFA;--side-border:rgba(0,0,0,.10);
  --side-shadow:0 1px 2px rgba(60,64,67,.04),0 4px 16px rgba(60,64,67,.06);
  --side-active-bg:#FFFFFF;
  --cta-bg:#0A0A0F;--cta-ink:#F5F5F7;--cta-mut:#A1A4AD;
  --cta-btn-bg:#FFFFFF;--cta-btn-ink:#0A0A0F;--cta-btn-hover:rgba(255,255,255,.85);
  --pad:20px;--max:1200px;
  --r-sm:6px;--r:10px;--r-lg:16px;--r-xl:24px;
  --radius-sm:10px;--radius:14px;--radius-card:20px;
  --btn-h:48px;--btn-radius:12px;
  --sec:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-oil:cubic-bezier(.16,1,.3,1);
  --ease-silk:cubic-bezier(.65,0,.35,1);
  --ease-drift:cubic-bezier(.45,.05,.55,.95);
  --dur-theme:3.2s;
  --grad-1:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --grad-2:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
  --grad-3:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
  --grad-4:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);
  --grad-5:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
  --grad-6:linear-gradient(135deg,#30cfd0 0%,#330867 100%);
}
@media(min-width:768px){:root{--pad:32px;--sec:96px}}
@media(min-width:1200px){:root{--pad:56px}}
@media(min-width:1440px){:root{--pad:72px}}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0A0F;--bg-subtle:#121218;--bg-elevated:#121218;--bg-code:#0F1419;
  --surface:#121218;--surface-2:#181820;--surface-3:#1F1F28;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.16);
  --text:#F5F5F7;--text-2:#D2D3D8;--text-3:#A1A4AD;--text-4:#525252;
  --text-muted:#A1A4AD;--text-faint:#70737C;
  --fill-1:rgba(255,255,255,.04);--fill-2:rgba(255,255,255,.08);
  --hover:rgba(255,255,255,.06);
  --accent:#FAFAFA;--accent-fg:#0A0A0F;
  --brand:#FFFFFF;--brand-hover:rgba(255,255,255,0.85);--on-brand:#0A0A0F;
  --success:#57C28A;--positive:#57C28A;--warn:#FBBF24;--danger:#F87171;
  --logo-filter:invert(1) brightness(2);
  --shadow-card:0 0 0 1px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.35);
  --shadow-card-hover:0 0 0 1px rgba(255,255,255,.12),0 18px 48px rgba(0,0,0,.5);
  --card-lift:0 0 0 1px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.35);
  --card-lift-hover:0 0 0 1px rgba(255,255,255,.12),0 18px 48px rgba(0,0,0,.5);
  --side-bg:#141418;--side-border:rgba(255,255,255,.10);
  --side-shadow:0 0 0 1px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.5);
  --side-active-bg:rgba(255,255,255,.05);
  --cta-bg:#FFFFFF;--cta-ink:#0A0A0F;--cta-mut:#5F6368;
  --cta-btn-bg:#0A0A0F;--cta-btn-ink:#FFFFFF;--cta-btn-hover:rgba(0,0,0,.85);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden;
  transition:background-color var(--dur-theme) var(--ease-silk),color var(--dur-theme) var(--ease-silk);
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--line-strong)}

.wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.container-narrow{max-width:820px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.section{padding:80px 0;position:relative;z-index:1}
.section-alt{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:768px){.section{padding:var(--sec) 0}}

.mesh{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mesh::before{content:"";position:absolute;top:-30%;left:-10%;width:70%;height:70%;background:radial-gradient(circle,rgba(100,130,255,.10),transparent 60%);filter:blur(60px)}
.mesh::after{content:"";position:absolute;top:-20%;right:-15%;width:60%;height:60%;background:radial-gradient(circle,rgba(255,120,180,.08),transparent 60%);filter:blur(80px)}
[data-theme="dark"] .mesh::before{background:radial-gradient(circle,rgba(100,130,255,.16),transparent 60%)}
[data-theme="dark"] .mesh::after{background:radial-gradient(circle,rgba(255,120,180,.12),transparent 60%)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}



/* ==================================================================
   HOME PAGE — shrink to fit like inner pages (no horizontal overflow)
   ================================================================== */
main {
  max-width: 100%;
  overflow-x: hidden;
}

.section, .section-alt,
.home-hero, .home-hero-logos,
.sec-head,
.feature-grid, .showcase-grid, .steps-grid, .plan-grid,
.blog-wrap, .related, .helpful, .cta-sec,
.tbl-wrap, .faq-accordion, .stat-grid {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Force all card grids to use minmax(0,1fr) so they can shrink */
.feature-grid,
.showcase-grid,
.steps-grid,
.plan-grid,
.blog-grid,
.related-grid,
.stat-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .feature-grid, .showcase-grid, .blog-grid, .stat-grid, .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-grid, .steps-grid, .plan-grid, .blog-grid, .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}