/* ===== Ami AI – Lead Magnet (complete stylesheet) ===== */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;700;800&family=Poppins:wght@600;700&display=swap');

/* Reset / base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  display: flex;               /* keep footer at bottom on short pages */
  flex-direction: column;
  min-height: 100vh;
font-family: "Figtree", sans-serif;
  color: #0C0D11;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* Design tokens */
:root{
  --ami-blue:#2772F9;
  --ami-pink:#FF2585;
  --ami-muted:#6B7180;
  --border:#E9EAF0;
  --dark:#0B0C0F;
  --grad:linear-gradient(90deg,#2772F9,#FF2585);
  --r-lg:20px;
  --r-xl:28px;
  --shadow-md:0 6px 18px rgba(10,12,17,.08);
  --shadow-sm:0 1px 2px rgba(10,12,17,.05), 0 2px 6px rgba(10,12,17,.06);
}

/* Layout container */
.wrapper{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* Header */
/* Header — grid so the logo is always left-aligned like the hero text */
.header{
  display:grid !important;
  grid-template-columns:auto 1fr !important; /* logo | flexible space */
  align-items:center !important;
  justify-items:start !important;            /* puts the logo on the left edge */
  gap:16px !important;
  padding:18px 0 6px !important;
  text-align:left !important;
}
.header .logo{
  height:28px; width:auto;
  margin:0 !important;
  justify-self:start !important;            /* beats any text-align center */
}
.header .spacer{ display:block; }           /* harmless placeholder */

.header .logo{ height:28px; width:auto; margin:0 !important; }  /* kill any auto-centre */


/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:48px;
  align-items:start;
  padding:40px 40px 56px;
}
.hero-left h1{
  /* margin:0 0 12px; */
  font-size:clamp(32px,3.6vw,44px);
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:800;
}
.hero-left h1 .gradient{
  /* inline + bottom padding (not inline-block): the clip box otherwise ends
     at the line box and cuts descenders - the g in "losing" lost its tail.
     Vertical padding on an inline element paints the gradient under the
     descender without moving the line. */
  display:inline;
  padding-bottom:0.14em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-left .lede{
  color:var(--ami-muted);
  font-size:16px;
  line-height:1.6;
  max-width:48ch;
  margin:8px 0 0;
}

/* Form card (right) */
.form-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:24px;
  box-shadow:var(--shadow-md);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .span-2{ grid-column: span 2; }
.input{
  width:100%;
  height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#F7F8FA;
  font-size:15px;
}
.input:focus{
  outline:none; border-color:#C9D4FE; background:#fff;
  box-shadow:0 0 0 4px rgba(39,114,249,.12);
}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:46px; gap:10px;
  border:0; border-radius:14px;
  background:var(--grad); color:#fff; font-weight:600; cursor:pointer;
  box-shadow:0 10px 20px rgba(39,114,249,.15), 0 10px 20px rgba(255,37,133,.12);
  transition: transform 0.2s ease-in-out;
  font-size: 15px;
}
.button:hover {
 transform: scale(0.98); /* only 2% smaller */
}

.button:active {
transform: scale(0.96); /* just a little smaller when clicked */
}



#progressContainer{ grid-column: span 2; width:100%; height:8px; border-radius:999px; /* background:#EEF0F5; */ margin-top:12px; overflow:hidden; }
#progressFill{ height:100%; width:0%; background:var(--grad); border-radius:inherit; transition:width .25s ease; }
.error{ color:#D92D20; font-size:12px; grid-column: span 2; }

.form-note{
  grid-column: span 2;
  font-size:12px;
  color:#C4C8CF;
  margin-top:8px;
  line-height:1.4;
}

/* How it works */
.section{ padding:30px 0 96px; }  /* matches design spacing */
.section h2{
  text-align:center;
  font-size:clamp(26px,3vw,32px);
  margin:0 0 22px;
  font-weight:800;
  letter-spacing:-.01em;
}
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    padding: 40px 40px 56px;
 }
.card{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:#fff;
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.card .icon{ width:32px; height:32px; border-radius:10px; background:var(--grad); margin-bottom:10px; }
.card h3{ margin:4px 0 6px; font-size:16px; }
.card p{ margin:0; font-size:14px; color:var(--ami-muted); line-height:1.5; }

/* Optional old ticker (safe to keep hidden by default) */
.ticker-wrap{ display:none; }

/* FOOTER */
.footer{
  background:var(--dark);
  color:#D4D7DE;
  border-top-left-radius:36px;
  border-top-right-radius:36px;
  padding:80px 0 56px;     /* deeper top & bottom */
  margin-top:auto;
}

.footer .wrapper{ padding-top:6px; }

.footer .strap{
  font-family:"Figtree", sans-serif;
  font-size:28px;
  line-height:1.45;
  letter-spacing:-0.01em;
  text-align:center;
  max-width:700px;
  font-weight: 800;
  margin:0px auto 50px;           /* more air before carousel */
}
.footer .strap .accent{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Scrolling logo carousel (below strapline) */
.footer .client-logos{
  --speed:32s;                  /* slower glide */
  --gap:3.8rem;
  padding:24px 0 56px;          /* extra vertical spacing */
  margin: 30px auto 70px;
  max-width: 800px;
}
.footer .client-logos .mask{
  overflow:hidden; width:100%; position:relative; background:#0B0C0F;
  -webkit-overflow-scrolling: touch;
}
.footer .client-logos .mask::before,
.footer .client-logos .mask::after{
  content:""; position:absolute; top:0; bottom:0; width:96px; pointer-events:none;
  background:linear-gradient(to right,#0B0C0F,rgba(11,12,15,0));
}
.footer .client-logos .mask::after{ right:0; transform:scaleX(-1); }
.footer .client-logos .mask::before{ left:0; }


.footer .client-logos .track {
  display: flex;
  align-items: center;
  gap: 3.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: max-content;
    animation: scroll-logos var(--speed,32s) linear infinite;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.footer .client-logos .track li {
  flex: 0 0 auto;
}

.footer .client-logos img{
  height:clamp(18px, 1.8vw, 28px);   /* a shade smaller again for consistency */
  width:auto;
  filter:none !important;                /* use native white/transparency */
  mix-blend-mode:normal !important;
  opacity:.95; transition:opacity .2s ease;
}
.footer .client-logos img:hover{ opacity:1; }
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* because you duplicated the logo set */
}
@media (prefers-reduced-motion: reduce){
  .footer .client-logos .track{ animation:none !important; }
  /* add body.force-animate to bypass for demos */
  body.force-animate .footer .client-logos .track{
    animation: marquee var(--speed) linear infinite !important;
  }
}
/* Footer link columns */
.footer-cols{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap:56px;                     /* wider column spacing */
  align-items:start;
  row-gap:36px;                 /* more vertical rhythm on wrap */
}

.footer h4{
 font-family:"Figtree", sans-serif;
  font-size:17px;
  font-weight:700;
  color:#fff;
  margin:0 0 22px;              /* clearer separation from links */
}
.footer a{
  color:#B9BEC7;
  text-decoration:none;
  font-size:15px;
  line-height:1.9;
  transition:color .2s ease;
}
.footer a:hover{ color:#E3E6EC; }

/* Brand cell (Ami logo) */
.footer-brand img{
  height:20px; width:auto; display:block;
  filter:none !important;      /* keep in colour */
  opacity:1;
  margin-top:4px;
}

/* Legal line */
.footer-text{
  max-width:1200px;
  margin:44px auto 0;           /* more gap like the design */
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#A7ABB5;
  text-align:center;
  font-size:12.5px;
  line-height:1.55;
  opacity:.95;
  text-wrap:pretty;
}

/* Hide any legacy widgets on this page */
.dial, .dial-box, .meter-wrap, .gauge, .score-box, .reviews-wrapper{ display:none !important; }

/* Responsive */
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; gap:24px; }
  .form-card{ position:relative; top:auto; }
  .cards{ grid-template-columns:1fr 1fr; }
  .footer-cols{ grid-template-columns:1fr 1fr 1fr; gap:28px; }
  .footer-brand{ grid-column:1 / -1; }    /* brand on its own row */
}
@media (max-width:640px){
  .wrapper{ padding:0 18px; }
  .cards{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr; gap:22px; }
 .footer .client-logos{ --speed:24s; --gap:2.6rem; }  /* keep the 50% slower feel */
  .footer .client-logos img{ height:clamp(18px, 6vw, 26px); }
  .footer-text{ font-size:12px; margin-top:22px; }
}

/* ——— Force the top logo to the hard-left on desktop ——— */
@media (min-width: 1024px){
  .header{ 
    justify-content: flex-start !important; 
    text-align: left !important;
  }
  .header .logo{
    display:block;
    margin: 0 !important;           /* neutralise “margin:0 auto” from any global img rule */
    margin-right: auto !important;  /* push any stray siblings to the right */
  }
}

/* If your theme is centring via the container itself and you want the logo flush to the viewport edge,
   make the header full-width but keep the page padding: */

/* Align header logo with hero text (same container as .wrapper) */
@media (min-width: 1024px){
  /* ensure the header itself uses the same centred container as the hero */
  .header.wrapper{
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;   /* same gutter as .wrapper */
    padding-right: 24px !important;
  }

  /* then left-justify the logo inside that container */
  .header{
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .header .logo{
    display: block;
    margin: 0 !important;            /* neutralise any global img centring */
    margin-right: auto !important;   /* push any siblings (spacer) to the right */
  }
}

/* Hard-fix: align the top logo with the hero text (desktop) */
@media (min-width: 900px){
  header.header{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:left !important;
  }
  header.header.wrapper{
    max-width:1200px !important;          /* same as .wrapper */
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:24px !important;         /* same gutter as .wrapper */
    padding-right:24px !important;
  }
  header.header .logo{
    display:block !important;
    margin-left:0 !important;             /* kill any global centring */
    margin-right:auto !important;         /* eats remaining space → flush left */
    float:none !important;                /* guard against theme floats */
  }
}


/* Final override to prevent any image-centering utilities re-applying */
body > header.header.wrapper{ justify-content:flex-start !important; }
body > header.header.wrapper > img.logo{
  display:block !important;
  margin-left:0 !important;
  margin-right:auto !important;
  float:none !important;
}

/* isolate from any theme styles */
.site-header { width:100%; }
.site-header .wrapper { max-width:1200px; margin:0 auto; padding:0 24px; }

/* one full-width row, logo locked left and aligned with hero text */
.logo-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:18px 0 6px;
}

/* kill any global centering on images */
.site-logo{
  display:block !important;
  margin:0 !important;
  height:28px; width:auto;
}

/* --- Align brand with form top (desktop) --- */
@media (min-width:1024px){
  .hero{ padding-top:56px !important; }            /* top whitespace for BOTH logo & form */
  .hero-logo{ height:28px; width:auto; display:block; margin-bottom:16px; }
}

@media (max-width:1024px){
  .hero-logo {
    height:20px !important;
    width:auto !important;
    display:block !important;
    margin-bottom:16px !important;
  }
}

@media (max-width:640px){
  .hero {
    padding-top:40px !important; /* keeps 40px margin above logo */
  }
  .footer .strap { 

    font-size: 20px;
  }
  .section h2 {
  margin-top: 50px;
  }
}


@media (max-width:640px){
  .form-grid {
    grid-template-columns: 1fr !important; /* single column */
  }

  .form-grid .span-2 {
    grid-column: span 1 !important; /* override span-2 so they don’t try to span */
  }
}

.logo-link {
  text-decoration: none;
  border: none;
}

.logo-link img {
  border: none;
  outline: none;
}