:root {
  --primary: #3847fe;
  --primary-dark: #2634da;
  --ink: #121212;
  --muted: #626268;
  --paper: #f7f7f8;
  --surface: #ffffff;
  --line: #e3e3e7;
  --soft: #eef0ff;
  --overgrow: #193928;
  --overgrow-light: #28533d;
  --overgrow-gold: #dfa357;
  --ugcworld: #2a0f4a;
  --ugcworld-light: #4c247a;
  --ugcworld-gold: #ffc44d;
  --shell: min(1160px, calc(100% - 40px));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent calc(50% - 581px), rgba(18, 18, 18, .035) calc(50% - 580px), transparent calc(50% - 579px)),
    linear-gradient(90deg, transparent calc(50% + 579px), rgba(18, 18, 18, .035) calc(50% + 580px), transparent calc(50% + 581px)),
    var(--paper);
  font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.customer-shell {
  width: var(--shell);
  margin-inline: auto;
}

.site-nav-link.is-current {
  color: var(--ink);
  font-weight: 600;
}

.site-nav-mobile-link.is-current {
  color: var(--ink);
  font-weight: 800;
}

.customer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.customer-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(56, 71, 254, .1);
}

.customer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.customer-button:hover,
.customer-button:focus-visible {
  transform: translateY(-2px);
  background: #2a2a2a;
}

.customer-button.light {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.customer-button.ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

/* Customers index */
.customers-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 78% 20%, rgba(129, 139, 255, .38), transparent 28%),
    linear-gradient(145deg, #2534e7 0%, #3847fe 55%, #6873ff 100%);
  color: #fff;
}

.customers-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.customers-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .7fr);
  gap: 76px;
  align-items: center;
  min-height: 480px;
  padding: 76px 0 82px;
}

.customers-hero .customer-eyebrow { color: rgba(255,255,255,.8); }
.customers-hero .customer-eyebrow::before { box-shadow: 0 0 0 5px rgba(255,255,255,.12); }

.customers-hero h1 {
  max-width: 800px;
  margin: 22px 0 0;
  font-size: clamp(3.2rem, 5.8vw, 5.8rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .94;
}

.customers-hero-copy > p {
  max-width: 690px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}

.hero-receipt {
  position: relative;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: 0 34px 100px -50px rgba(5,8,70,.8);
  transform: rotate(2deg);
}

.hero-receipt::before {
  content: "";
  position: absolute;
  inset: 8px -10px -10px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: rgba(255,255,255,.1);
  z-index: -1;
}

.hero-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.hero-receipt-head span { color: #77777e; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hero-receipt-head i { width: 9px; height: 9px; border-radius: 50%; background: #28a56a; box-shadow: 0 0 0 5px rgba(40,165,106,.1); }

.hero-receipt strong {
  display: block;
  margin-top: 22px;
  font-size: 56px;
  letter-spacing: -.055em;
  line-height: 1;
}

.hero-receipt > span { display: block; margin-top: 6px; color: #5e5e64; font-size: 15px; font-weight: 700; }

.receipt-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 24px;
}

.receipt-flow span {
  padding: 11px 8px;
  border-radius: 10px;
  background: #f0f0f3;
  color: #626268;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.receipt-flow span:nth-child(2) { background: var(--soft); color: var(--primary-dark); }

.customers-library { padding: 76px 0 96px; }

.library-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.55fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 34px;
}

.library-heading h2 {
  max-width: 760px;
  margin: 14px 0 0;
  font-size: clamp(2.2rem, 3.8vw, 3.7rem);
  letter-spacing: -.05em;
  line-height: 1;
}

.library-heading p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

.customer-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(298px, 1fr));
  gap: 16px;
}

.customer-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 392px;
  padding: 30px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(158deg, var(--overgrow-light), var(--overgrow));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 30px 70px -50px rgba(12,40,25,.7);
  isolation: isolate;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}

.customer-story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.15), transparent 46%),
    linear-gradient(118deg, rgba(255,255,255,.14), transparent 40%),
    repeating-linear-gradient(122deg, transparent 0 26px, rgba(255,255,255,.03) 27px 29px);
}

.customer-story-card:hover,
.customer-story-card:focus-visible {
  outline: none;
  transform: translateY(-5px);
  box-shadow: 0 44px 96px -52px rgba(12,40,25,.8);
}

.customer-story-logo {
  width: 54px;
  height: 54px;
  padding: 7px;
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 32px -20px rgba(0,0,0,.6);
}

.customer-story-copy {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 40px;
}

.customer-story-copy h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  letter-spacing: -.035em;
  line-height: 1.02;
}

.customer-story-copy > p { margin: 12px 0 0; max-width: 46ch; color: rgba(255,255,255,.78); font-size: 14.5px; line-height: 1.55; }

.story-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 22px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.story-link svg { width: 13px; transition: transform .18s ease; }
.customer-story-card:hover .story-link svg { transform: translateX(3px); }

.library-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 32px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.library-footnote strong { display: block; font-size: 16px; }
.library-footnote p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.library-footnote a { color: var(--primary-dark); font-size: 14px; font-weight: 850; white-space: nowrap; }

.story-standards {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.story-standards-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
  gap: 50px;
  align-items: end;
}

.story-standards h3 {
  max-width: 680px;
  margin: 12px 0 0;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -.04em;
  line-height: 1.05;
}

.story-standards-head > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.story-standards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.story-standards-grid article { padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.story-standards-grid strong { display: block; font-size: 15px; }
.story-standards-grid p { margin: 8px 0 0; color: #67676d; font-size: 14px; line-height: 1.55; }

/* Overgrow case study */
.case-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 76px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.78);
}

.case-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 68px;
  color: #77777e;
  font-size: 13px;
}

.case-breadcrumb a { text-decoration: none; }
.case-breadcrumb a:hover { color: var(--primary-dark); }

.case-article-head { width: min(1040px, 100%); margin: 0 auto; }

.case-customer {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 30px;
}

.case-customer img { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 14px 32px -22px rgba(0,0,0,.5); }
.case-customer strong { display: block; font-size: 16px; }
.case-customer span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }

.case-article-head h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3rem, 4.45vw, 4.15rem);
  font-weight: 900;
  letter-spacing: -.052em;
  line-height: 1.025;
}

.case-author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 28px;
}

.case-author-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 10px 24px -15px rgba(56,71,254,.8);
}

.case-author-copy { display: grid; gap: 3px; min-width: 0; }
.case-author-copy > strong { font-size: 14px; }
.case-author-copy a { text-decoration: none; }
.case-author-copy a:hover { color: var(--primary-dark); }
.case-author-copy > span { color: #77777e; font-size: 13px; line-height: 1.4; }
.case-author-copy i { margin: 0 6px; font-style: normal; }

.case-intro {
  display: grid;
  gap: 20px;
  margin-top: 54px;
}

.case-intro p {
  margin: 0;
  color: #505056;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.7;
}

.case-result-figure { width: min(1040px, 100%); margin: 48px auto 0; }

.case-product-shot {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #121212;
  box-shadow: 0 34px 74px -48px rgba(18,18,18,.55);
}

.case-result-figure figcaption { margin: 13px 4px 0; color: #77777e; font-size: 12px; line-height: 1.55; }

.case-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 740px);
  justify-content: center;
  gap: 72px;
  align-items: start;
  padding: 76px 0 94px;
}

.case-aside { position: sticky; top: 100px; }
.case-aside > strong { display: block; margin-bottom: 15px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.case-aside nav { display: grid; gap: 4px; }
.case-aside nav a { padding: 7px 0; color: #6a6a71; font-size: 13px; line-height: 1.35; text-decoration: none; }
.case-aside nav a:hover { color: var(--primary-dark); }

.case-evidence-note { margin-top: 25px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: #74747a; font-size: 12px; line-height: 1.5; }

.case-content { min-width: 0; }
.case-content > p,
.case-section > p,
.case-section li { color: #45454b; font-size: 18px; line-height: 1.78; }
.case-content > p { margin: 0 0 22px; }

.case-summary {
  margin-bottom: 44px;
  padding: 25px 26px;
  border: 1px solid rgba(25,57,40,.2);
  border-radius: 17px;
  background: #edf3ed;
}
.case-summary strong { color: var(--overgrow); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.case-summary p { margin: 8px 0 0; color: #34473b; font-size: 17px; line-height: 1.65; }

.case-section { scroll-margin-top: 100px; padding: 44px 0 18px; border-top: 1px solid var(--line); }
.case-section h2 { margin: 0 0 20px; font-size: clamp(1.8rem,3vw,2.55rem); letter-spacing: -.038em; line-height: 1.12; }
.case-section h3 { margin: 32px 0 10px; font-size: 21px; line-height: 1.3; }
.case-section p { margin: 0 0 20px; }
.case-section ul { display: grid; gap: 10px; padding-left: 24px; }
.case-section a { color: var(--primary-dark); font-weight: 750; }

.case-evidence-figure {
  margin: 30px 0 34px;
}

.case-evidence-media {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 24px 58px -44px rgba(18,18,18,.55);
}

.case-founder-photo {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 42%;
}

.case-evidence-figure figcaption {
  margin: 11px 4px 0;
  color: #77777e;
  font-size: 12px;
  line-height: 1.55;
}

.founder-quote {
  position: relative;
  margin: 30px 0 34px;
  padding: 30px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--overgrow);
  color: #fff;
}
.founder-quote::before { content: "“"; position: absolute; top: -18px; right: 20px; color: rgba(223,163,87,.16); font: 900 150px/1 Georgia,serif; }
.founder-quote blockquote { position: relative; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.55; }
.founder-quote footer { position: relative; display: flex; align-items: center; gap: 11px; margin-top: 23px; color: rgba(255,255,255,.65); font-size: 13px; }
.founder-quote footer img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; object-position: center 35%; }
.founder-quote footer strong { display: block; color: #fff; }

.result-table {
  display: grid;
  gap: 8px;
  margin: 28px 0 32px;
}
.result-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.result-row span { color: #626268; font-size: 15px; }
.result-row strong { color: var(--overgrow); font-size: 21px; font-variant-numeric: tabular-nums; }

.case-callout { margin: 28px 0 32px; padding: 21px 23px; border-left: 4px solid var(--overgrow-gold); border-radius: 0 14px 14px 0; background: #fff8ed; color: #594a35; font-size: 16px; line-height: 1.6; }

/* Embedded testimonial video */
.case-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #0c0713;
  box-shadow: 0 34px 74px -48px rgba(18,18,18,.55);
}
.case-video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #0c0713; }

/* UGC World theme (scoped so Overgrow keeps its own colors) */
.theme-ugcworld.customer-story-card { background: linear-gradient(158deg, var(--ugcworld-light), var(--ugcworld)); box-shadow: 0 30px 70px -50px rgba(30,10,60,.7); }
.theme-ugcworld.customer-story-card:hover,
.theme-ugcworld.customer-story-card:focus-visible { box-shadow: 0 44px 96px -52px rgba(30,10,60,.8); }

.case-ugcworld .founder-quote { background: var(--ugcworld); }
.case-ugcworld .founder-quote::before { color: rgba(255,196,77,.18); }
.case-ugcworld .result-row strong { color: var(--ugcworld-light); }
.case-ugcworld .case-callout { border-left-color: var(--ugcworld-gold); background: #faf5ff; color: #4a3a63; }
.case-ugcworld .case-author-mark { background: var(--ugcworld-light); box-shadow: 0 10px 24px -15px rgba(76,36,122,.8); }

.customer-cta {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: #11131b;
  color: #fff;
}
.customer-cta::after { content: ""; position: absolute; width: 580px; height: 580px; right: -190px; top: -260px; border: 76px solid rgba(56,71,254,.2); border-radius: 50%; }
.customer-cta-inner { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.customer-cta h2 { max-width: 790px; margin: 12px 0 0; font-size: clamp(2.2rem,4vw,4.2rem); letter-spacing: -.052em; line-height: .98; }
.customer-cta p { max-width: 690px; margin: 18px 0 0; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.55; }
.customer-cta .customer-eyebrow { color: rgba(255,255,255,.64); }
.customer-cta .customer-eyebrow::before { box-shadow: 0 0 0 5px rgba(255,255,255,.1); }

/* Footer */
.customers-footer { border-top: 1px solid var(--line); background: #fff; }
.customers-footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 32px; padding: 52px 0; }
.customers-footer-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 850; text-decoration: none; }
.customers-footer-brand svg { width: 25px; color: var(--primary); }
.customers-footer p { max-width: 330px; color: #67676d; font-size: 14px; line-height: 1.55; }
.customers-footer h3 { margin: 0 0 14px; font-size: 13px; }
.customers-footer nav { display: grid; gap: 9px; }
.customers-footer nav a { color: #67676d; font-size: 13px; text-decoration: none; }
.customers-footer nav a:hover { color: var(--ink); }

@media (max-width: 980px) {
  .customers-hero-inner { grid-template-columns: 1fr; }
  .customers-hero-inner { gap: 50px; }
  .hero-receipt { width: min(420px,100%); }
  .library-heading { grid-template-columns: 1fr; gap: 18px; }
  .story-standards-head { grid-template-columns: 1fr; gap: 18px; }
  .case-layout { grid-template-columns: 1fr; gap: 44px; }
  .case-aside { position: static; }
  .case-aside nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .case-evidence-note { max-width: 640px; }
}

@media (max-width: 1120px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .site-nav-links { display: none; }
  .site-nav-mobile { display: block; }
}

@media (max-width: 720px) {
  :root { --shell: min(1160px, calc(100% - 28px)); }
  body { background: var(--paper); }
  .customers-hero-inner { min-height: auto; padding: 58px 0 64px; }
  .customers-hero h1 { font-size: clamp(3rem,14vw,4.5rem); }
  .customers-library { padding: 56px 0 72px; }
  .customer-story-card { padding: 24px; min-height: 340px; }
  .story-standards-grid { grid-template-columns: 1fr; }
  .library-footnote { align-items: flex-start; flex-direction: column; }
  .case-hero { padding: 24px 0 56px; }
  .case-breadcrumb { margin-bottom: 44px; }
  .case-article-head h1 { font-size: clamp(2.65rem,12.2vw,3.7rem); }
  .case-intro { margin-top: 42px; }
  .case-result-figure { margin-top: 38px; }
  .case-product-shot { border-radius: 16px; }
  .case-layout { padding: 54px 0 72px; }
  .case-aside nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-content > p,
  .case-section > p,
  .case-section li { font-size: 17px; }
  .founder-quote { padding: 24px; }
  .founder-quote blockquote { font-size: 18px; }
  .customer-cta-inner { align-items: flex-start; flex-direction: column; }
  .customers-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .receipt-flow { grid-template-columns: 1fr; }
  .case-customer { align-items: flex-start; }
  .case-customer img { width: 44px; height: 44px; }
  .case-author { align-items: flex-start; }
  .case-author-copy i { display: none; }
  .case-author-copy > span { display: grid; gap: 2px; }
  .case-aside nav { grid-template-columns: 1fr; }
  .result-row { grid-template-columns: 1fr; gap: 6px; }
  .customers-footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}