/* The 100 ads pages (100-ads.html, 100-ads-bf.html). Section order follows
   growth.ecomrepublic.com/100-ads; the look is Something New's own V8 tokens
   from lm-v8.css (blue band, yellow CTA, Satoshi/Switzer). */
:root{ --k-gutter:24px; --k-band-rgb:52,88,230; }
@media (max-width:639.98px){ :root{ --k-gutter:16px; } }
html{ background:var(--paper); scroll-behavior:smooth; }
body.vslp{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--text); -webkit-font-smoothing:antialiased; overflow-x:clip; }
.vslp *{ box-sizing:border-box; }
.vslp a{ color:inherit; text-decoration:none; }
.k-wrap{ margin:0 auto; width:100%; }
.k-900{ max-width:900px; } .k-1160{ max-width:1160px; }
.k-center{ text-align:center; margin-left:auto; margin-right:auto; }

/* nav */
.k-nav{ position:sticky; top:0; z-index:60; background:rgba(249,251,253,.84); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid var(--line); }
.k-nav__in{ padding:0 var(--k-gutter); height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.k-logo{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.k-logo i{ font-style:normal; color:var(--band); }
@media (max-width:519.98px){ .k-nav .k-btn{ display:none; } .k-nav__in{ justify-content:center; } }

/* buttons */
.k-btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center; border-radius:14px; cursor:pointer; font-family:var(--text); font-weight:700; letter-spacing:-.01em;
  background:var(--cta); color:#12121A; border:0; box-shadow:0 22px 50px -18px rgba(16,24,60,.45); transition:transform .18s var(--ease), background-color .18s var(--ease); }
.k-btn:hover{ background:#FFE873; transform:translateY(-1px); }
.k-btn:active{ transform:translateY(1px); }
.k-btn--lg{ min-height:60px; padding:14px 34px; font-size:clamp(17px, 1.6vw, 21px); }
.k-btn--sm{ height:40px; padding:0 18px; border-radius:10px; font-size:15px; white-space:nowrap; box-shadow:0 10px 24px -12px rgba(16,24,60,.35); }
.k-cta{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px; text-align:center; }
.k-cta__sub{ margin:0; font-size:14px; color:var(--muted); }
.k-cta--light .k-cta__sub{ color:rgba(255,255,255,.75); }
@media (max-width:519.98px){ .k-cta .k-btn{ width:100%; } }

/* type */
.k-eyebrow{ font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--royal); }
.k-eyebrow--light{ color:#fff; opacity:.8; }
.k-h1{ margin:0; color:var(--ink); font-family:var(--display); font-weight:700; font-size:clamp(36px, 6.2vw, 76px); line-height:.98; letter-spacing:-.03em; text-wrap:balance; }
.k-h1 em,.k-h2 em{ font-style:italic; color:var(--band); }
.k-h1 .k-line{ display:block; }
.k-h2{ margin:10px 0 0; color:var(--ink); font-family:var(--display); font-weight:700; font-size:clamp(30px, 4.2vw, 50px); line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
.k-lead{ margin:16px 0 0; font-size:17px; line-height:1.6; color:var(--body); max-width:780px; }
.k-close{ margin:32px 0 0; font-size:16.5px; line-height:1.6; color:var(--ink); font-weight:600; max-width:780px; }
.k-sec{ padding:88px var(--k-gutter); }
.k-tint{ background:var(--tint); }
@media (max-width:759.98px){ .k-sec{ padding:60px var(--k-gutter); } }

/* hero */
.k-hero{ position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%); padding:64px var(--k-gutter) 72px; }
.k-hero::after{ content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%; width:66vw; max-width:820px; aspect-ratio:1/1; bottom:-40%; right:-14%;
  background:radial-gradient(closest-side, rgba(var(--k-band-rgb),.22), rgba(var(--k-band-rgb),.07) 55%, transparent 76%); filter:blur(34px); }
.k-hero__in{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.k-sub{ margin:0; font-size:clamp(16px, 1.5vw, 19px); line-height:1.55; color:var(--body); max-width:720px; }
.k-count{ margin:0; display:inline-block; line-height:1.45; text-align:center; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:700; font-size:14px; color:var(--ink); box-shadow:0 8px 24px -14px rgba(16,24,60,.25); }
.k-count b{ color:var(--band); }
.k-hero .k-cta{ margin-top:6px; }

/* the wall */
.k-wallsec{ padding-left:0; padding-right:0; overflow:hidden; }
.k-wallsec > .k-wrap{ padding:0 var(--k-gutter); }
.k-wall{ margin:40px auto 0; max-width:1040px; padding:0 var(--k-gutter); display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; }
.k-wall img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--line); }
@media (max-width:519.98px){ .k-wall{ gap:3px; padding:0 12px; } .k-wall img{ border-radius:4px; } }
.k-wall img{ border-radius:6px; }
.k-stats{ margin-top:48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.k-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px 20px; display:flex; flex-direction:column; gap:6px; }
.k-stat__n{ font-family:var(--display); font-weight:700; font-size:clamp(32px, 3.4vw, 44px); letter-spacing:-.03em; line-height:1; color:var(--band); }
.k-stat__l{ font-size:14px; line-height:1.4; color:var(--body); }
@media (max-width:859.98px){ .k-stats{ grid-template-columns:repeat(2, 1fr); } }
.k-platforms{ margin-top:32px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px; }
.k-platforms span{ width:100%; text-align:center; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.k-platforms b{ font-family:var(--display); font-size:22px; letter-spacing:-.02em; color:var(--ink); opacity:.7; }

/* timeline (B) */
.k-tl{ background:var(--navy); color:#fff; }
.k-tl .k-h2{ color:#fff; } .k-tl .k-h2 em{ color:var(--cta); } .k-tl .k-lead{ color:rgba(255,255,255,.75); } .k-tl .k-eyebrow{ color:var(--cta); }
.k-tl__list{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.k-tl__list li{ border-top:3px solid var(--cta); padding-top:16px; }
.k-tl__when{ display:block; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--cta); }
.k-tl__list b{ display:block; margin-top:8px; font-family:var(--display); font-size:21px; letter-spacing:-.015em; }
.k-tl__list p{ margin:8px 0 0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.75); }
.k-tl .k-cta__sub{ color:rgba(255,255,255,.7); }
@media (max-width:859.98px){ .k-tl__list{ grid-template-columns:1fr 1fr; } }
@media (max-width:519.98px){ .k-tl__list{ grid-template-columns:1fr; } }

/* guarantee */
.k-guarantee{ position:relative; overflow:hidden; padding:88px var(--k-gutter); background:var(--band); color:#fff; text-align:center; }
.k-guarantee::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(760px 420px at 18% 108%, rgba(14,16,22,.45), transparent 62%); }
.k-guarantee > .k-wrap{ position:relative; }
.k-guarantee .k-h2{ color:#fff; }
.k-seal{ width:112px; height:112px; margin:0 auto 22px; border-radius:50%; border:3px solid var(--cta); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.k-seal b{ font-family:var(--display); font-size:40px; line-height:1; color:var(--cta); }
.k-seal span{ font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.k-g__body{ max-width:680px; margin:22px auto 0; }
.k-g__body p{ margin:0 0 14px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.88); }
@media (max-width:759.98px){ .k-guarantee{ padding:60px var(--k-gutter); } }

/* case studies */
.k-cases{ margin-top:40px; display:grid; gap:24px; }
.k-cs{ min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.k-cs__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; }
.k-cs__head h3{ margin:0; font-family:var(--display); font-size:26px; letter-spacing:-.02em; }
.k-cs__head a{ font-weight:700; font-size:15px; color:var(--band); }
.k-cs__stats{ margin-top:18px; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.k-cs__stat{ background:var(--tint); border-radius:12px; padding:14px 16px; }
.k-cs__stat b{ display:block; font-family:var(--display); font-size:30px; letter-spacing:-.03em; color:var(--band); }
.k-cs__stat span{ font-size:13.5px; color:var(--body); }
@media (max-width:639.98px){ .k-cs{ padding:20px; } .k-cs__stats{ grid-template-columns:1fr; } }
.k-rail{ margin-top:18px; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.k-shot{ flex:0 0 auto; width:180px; padding:0; border:0; background:none; cursor:zoom-in; scroll-snap-align:start; }
.k-shot img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; display:block; transition:transform .2s var(--ease); }
.k-shot:hover img{ transform:scale(1.02); }
.k-more__h{ margin:48px 0 0; font-family:var(--display); font-size:22px; letter-spacing:-.015em; }
.k-more__names{ margin:6px 0 0; color:var(--muted); font-size:15px; }
.k-rail--more .k-shot{ width:150px; }

/* pains, services, test drive */
.k-pains{ margin-top:40px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.k-pain,.k-svc,.k-step{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px; }
.k-pain__n,.k-step__n{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--band); color:#fff; font-weight:700; font-size:15px; }
.k-pain h3,.k-step h3,.k-svc h3{ margin:14px 0 0; font-family:var(--display); font-size:20px; line-height:1.2; letter-spacing:-.015em; }
.k-pain p,.k-step p{ margin:8px 0 0; font-size:15.5px; line-height:1.55; color:var(--body); }
.k-svcs{ margin-top:40px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.k-svc h3{ margin:0; color:var(--band); }
.k-svc ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.k-svc li{ font-size:15.5px; color:var(--ink); padding-left:18px; position:relative; }
.k-svc li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--cta); box-shadow:0 0 0 1px rgba(0,0,0,.12); }
@media (max-width:959.98px){ .k-pains{ grid-template-columns:1fr 1fr; } .k-svcs{ grid-template-columns:1fr 1fr; } }
@media (max-width:599.98px){ .k-pains,.k-svcs{ grid-template-columns:1fr; } }
.k-drive{ background:var(--navy); color:#fff; }
.k-drive .k-h2{ color:#fff; } .k-drive .k-lead{ color:rgba(255,255,255,.78); } .k-drive .k-close{ color:#fff; }
.k-steps{ margin-top:40px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.k-drive .k-step{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.k-drive .k-step h3{ color:#fff; }
.k-drive .k-step p{ color:rgba(255,255,255,.75); }
.k-drive .k-step__n{ background:var(--cta); color:#12121A; }
.k-badges{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.k-badges span{ padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25); font-weight:700; font-size:14px; }
@media (max-width:859.98px){ .k-steps{ grid-template-columns:1fr; } }

/* footer, sticky bar */
.k-foot{ background:var(--tail); padding:40px var(--k-gutter) 110px; }
.k-foot__in{ display:flex; flex-direction:column; gap:16px; font-size:13px; color:rgba(255,255,255,.55); }
.k-foot .k-logo{ color:#fff; }
.k-foot a:hover{ color:#fff; }
.k-legal{ margin:0; max-width:900px; line-height:1.6; }
.k-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:50; padding:12px var(--k-gutter); background:rgba(249,251,253,.9); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  border-top:1px solid var(--line); transform:translateY(120%); transition:transform 260ms cubic-bezier(.2,.6,.2,1); }
.k-sticky.is-visible{ transform:none; }
.k-sticky__in{ display:flex; justify-content:center; }
.k-sticky .k-btn{ height:48px; padding:0 26px; font-size:17px; }
@media (max-width:759.98px){ .k-sticky .k-btn{ flex:1 1 100%; } }

/* form modal and lightbox */
.k-modal,.k-lightbox{ border:0; padding:0; border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(10,15,30,.6); }
.k-modal::backdrop,.k-lightbox::backdrop{ background:rgba(10,15,30,.72); backdrop-filter:blur(4px); }
.k-modal{ width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; background:#fff; }
.k-modal .k-col-r{ padding:36px 32px 28px; text-align:left; }
.k-modal.is-booking{ width:min(1000px, calc(100vw - 32px)); }
.k-modal .k-col-r.is-booking > :not(#auditdone){ display:none; }
.k-modal .k-col-r [hidden]{ display:none !important; }
.k-col-r.is-booking .cal-frame,.k-col-r.is-booking .cal-frame iframe{ min-height:780px; width:100%; border:0; }
.k-title{ margin:0 0 8px; font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.015em; color:var(--ink); padding-right:32px; }
.k-lede{ margin:0 0 22px; font-size:15.5px; line-height:1.55; color:var(--body); }
.k-modal__x{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:0; background:var(--tint); font-size:24px; line-height:1; cursor:pointer; color:var(--ink); z-index:2; }
.k-lightbox{ background:transparent; max-width:min(560px, calc(100vw - 32px)); overflow:visible; }
.k-lightbox img{ display:block; max-width:100%; max-height:calc(100dvh - 64px); border-radius:14px; }
.k-lightbox .k-modal__x{ top:-14px; right:-14px; background:#fff; }
@media (max-width:519.98px){ .k-modal .k-col-r{ padding:28px 20px 22px; } }

/* quotes and case tags */
.k-quotes{ margin-top:16px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.k-quote{ margin:0; background:var(--tint); border-radius:var(--r-card); padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.k-quote blockquote{ margin:0; font-family:var(--display); font-weight:500; font-size:19px; line-height:1.4; letter-spacing:-.01em; color:var(--ink); }
.k-quote figcaption{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--muted); }
.k-quote figcaption b{ color:var(--ink); }
@media (max-width:859.98px){ .k-quotes{ grid-template-columns:1fr; } }
.k-cs__tag{ display:block; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--royal); margin-bottom:4px; }

/* .k-lead sets its own margin, which undid .k-center */
.k-lead.k-center{ margin-left:auto; margin-right:auto; }
