/* ===== Fonts ===== */
/* Instrument Sans — used for headings, pills, and numbers */
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans-Variable.ttf') format('truetype-variations'),
    url('assets/fonts/InstrumentSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans-Italic-Variable.ttf') format('truetype-variations'),
    url('assets/fonts/InstrumentSans-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

/* Clash Grotesk — used for body copy, paragraphs, chips, buttons, and everything else */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('assets/fonts/clash/ClashGrotesk-Variable.woff2') format('woff2-variations'),
    url('assets/fonts/clash/ClashGrotesk-Variable.woff2') format('woff2'),
    url('assets/fonts/clash/ClashGrotesk-Variable.woff') format('woff');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Tokens ===== */
:root {
  --blue-60: #3385FF;
  --blue-65: #4D94FF;
  --blue-70: #66A4FF;
  --blue-75: #80B3FF;
  --blue-80: #99C2FF;
  --blue-90: #CCE1FF;
  --blue-95: #E5F0FF;
  --blue-97: #F0F6FF;
  --blue-98: #F5F9FF;
  --blue-99: #FAFCFF;
  --bg: #F5F8FC;
  --card: #FFFFFF;
  --border: #E7E9EF;
  --border-soft: #EEF0F4;
  --text: #0E1116;
  --muted: #5C6370;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 24px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 60px rgba(20, 40, 90, .08);
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  /* `clip` prevents horizontal overflow without creating a scrolling
     context — `hidden` here would break `position: sticky` descendants
     (e.g. .about-copy) in Chrome/Safari. */
  overflow-x: clip;
}

html {
  background: #EAF1FB
}

/* prevents white bar on overscroll */
body {
  font-family: 'Clash Grotesk', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Instrument Sans applied only to: headings, pills, and numerical values */
h1,
h2,
h3,
h4,
h5,
h6,
.pill,
.stat-num,
.about-big,
.founder-stats strong,
.creator-card h4,
.made-usa-text text,
.hero-title {
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
}

/* Editorial accent — italic serif phrase inside a sans heading.
   Pair Instrument Sans (sans display) with Instrument Serif italic
   for a Superside-style emphasis. Apply with class="accent" on a
   <span> or <em> inside an h1/h2/h3. */
.accent,
h1 .accent, h2 .accent, h3 .accent, h4 .accent {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px
}

/* Inline icon glyphs */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: -2px
}

[data-icon] svg {
  width: 100%;
  height: 100%;
  display: block
}

[data-icon] img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}

.pill [data-icon] {
  width: 14px;
  height: 14px
}

.chip [data-icon] {
  width: 16px;
  height: 16px;
  margin-right: 2px
}

.btn [data-icon] {
  width: 16px;
  height: 16px
}

h1,
h2,
h3,
h4 {
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0B0F19;
  margin: 0 0 .4em
}

h2 {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1
}

h3 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700
}

p {
  margin: 0 0 1em;
  color: var(--muted)
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--blue-60);
  color: #fff;
  box-shadow: 0 6px 16px rgba(51, 133, 255, .25)
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(51, 133, 255, .35)
}

.btn-ghost {
  background: #fff;
  color: #0B0F19;
  border: 1px solid var(--border)
}

.btn-ghost:hover {
  background: #F4F7FB
}

.btn-dark {
  background: #0B0F19;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px
}

.btn-dark:hover {
  background: #1A1F2C
}

.btn-block {
  display: flex;
  width: 100%;
  margin-top: 14px
}

.btn-pill {
  display: inline-flex;
  margin: 36px auto 0;
  background: #fff
}

.btn-sm {
  padding: 9px 14px;
  font-size: 13px
}

/* ===== HERO ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 56px;
  background: linear-gradient(180deg, #D4E7F6 0%, #E5EFF8 40%, #F0F5FA 80%, #F6F8FB 100%);
}
/* Tighter gap between hero and the first Projects section */
#projects.section { padding-top: 56px; }

.hero-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    url('assets/loved/grid.svg') center 24px / 540px auto no-repeat,
    radial-gradient(900px 500px at 50% 0%, rgba(180, 210, 255, .45), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 60%);
  opacity: .6;
}

/* HERO FLARE — bright cyan-blue glow.
   light-1.png is a soft white/blue radial flare. We tint it bright blue using a
   color overlay layer with `screen` blend so the source image LIGHTENS to blue
   instead of darkening (which is what `multiply` did). */
.hero-flare {
  position: absolute;
  top: -80px;
  width: 720px;
  height: 560px;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(135deg, rgba(102, 164, 255, .65) 0%, rgba(150, 200, 255, .45) 50%, rgba(180, 220, 255, .20) 100%),
    url('assets/light/light-1.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 25%, transparent 95%);
  mask-image: radial-gradient(closest-side at 50% 45%, #000 25%, transparent 95%);
  filter: saturate(1.5) brightness(1.10);
  opacity: .95;
}

.hero-flare-tl {
  left: -260px;
  transform: scaleX(-1)
}

.hero-flare-tr {
  right: -260px
}

/* Side clappers — V3 sizing (full clapper visible, no top crop).
   Source 700×2048, clapper occupies y=0-1031, x=164-699 (W=535).
   Displayed image width 380 → clapper renders ~290w × 560h. */
.hero-decor {
  position: absolute;
  top: 70px;
  width: 340px;
  height: 480px;
  pointer-events: none;
  z-index: 2;
}

.hero-decor::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(closest-side at 50% 35%, rgba(120, 175, 255, .30), transparent 75%);
  filter: blur(38px);
  z-index: -1;
}

.hero-decor-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 35%, #000 40%, transparent 95%);
  mask-image: radial-gradient(110% 100% at 50% 35%, #000 40%, transparent 95%);
}

.hero-decor img {
  width: 380px;
  height: auto;
  position: absolute;
  top: 0;
  display: block;
}

.hero-right {
  right: -60px
}

.hero-right img {
  right: 0
}

.hero-left {
  left: -60px
}

.hero-left img {
  left: 0;
  transform: scaleX(-1)
}

@media (max-width:1280px) {
  .hero-decor {
    width: 280px;
    height: 400px;
    top: 80px
  }

  .hero-decor img {
    width: 320px
  }

  .hero-left {
    left: -50px
  }

  .hero-right {
    right: -50px
  }
}

@media (max-width:980px) {
  .hero-decor {
    width: 200px;
    height: 300px;
    top: 90px
  }

  .hero-decor img {
    width: 240px
  }

  .hero-left {
    left: -40px
  }

  .hero-right {
    right: -40px
  }
}

@media (max-width:640px) {
  .hero-decor {
    display: none
  }
}

/* (legacy hero-decor — overridden below) */

.hero-rings {
  display: none
}

/* Nav inside hero */
.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 16px 16px 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  max-width: 1080px;
  width: 100%;
}

.brand img {
  height: 30px;
  width: auto;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0 auto;
  padding: 0
}

.nav-links a {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 15px;
  color: #3A3F4B
}

.nav-links a:hover {
  background: #F4F7FB;
  color: #0B0F19
}

.nav-cta {
  display: flex;
  gap: 6px
}

.nav-cta .btn {
  padding: 10px 18px;
  font-size: 14px
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  background: #F4F7FB;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #0B0F19;
  border-radius: 2px;
}

.nav-start-m { display: none; }

/* Mobile dropdown menu — hidden on desktop */
.mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: 16px;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  z-index: 30;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu a {
  padding: 12px 14px;
  font-size: 16px;
  color: #0B0F19;
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s ease;
}

.mobile-menu a:hover {
  background: #F4F7FB;
}

.mobile-menu .mobile-menu-login {
  margin-top: 8px;
  text-align: center;
  background: #F4F7FB;
  border: 1px solid var(--border);
  font-weight: 600;
}

@media (max-width:880px) {
  .nav-links {
    display: none
  }
  .nav-login {
    display: none;
  }
  .nav-cta {
    margin-left: auto;
  }
  .nav-hamburger {
    display: inline-flex;
  }
  .nav-start-d { display: none; }
  .nav-start-m { display: inline; }
  .brand img {
    height: 22px;
    width: auto;
  }
  .loved-wrap {
    padding: 16px 0 16px;
  }
  .hero {
    padding-top: 72px;
  }
  .portfolio-body {
    padding-top: 72px;
  }
  .brand-track {
    gap: 32px;
  }
  .brand-track img {
    height: 22px;
  }
}

.hero-inner {
  position: relative;
  text-align: center;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto
}

/* Loved-by pill with grid bg + side lines */
.loved-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0 24px;
  width: 100%;
  max-width: 880px;
  height: auto;
}

.loved-grid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 680px;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .22;
  z-index: 0;
  -webkit-mask-image: radial-gradient(40% 60% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(40% 60% at 50% 50%, #000 0%, transparent 100%);
}

/* The SVG path's pill-end is at y=4 within a 47-tall viewBox.
   Position so y=4 of the SVG aligns with pill vertical center. */
.loved-line {
  position: absolute;
  top: calc(50% - 4px);
  width: 230px;
  height: 47px;
  pointer-events: none;
  z-index: 1;
  opacity: .7
}

.loved-line-l {
  right: calc(50% + 130px)
}

.loved-line-r {
  left: calc(50% + 130px)
}

.loved-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 20px;
  font-size: 15px;
  font-weight: 400;
  color: #1F2530;
  box-shadow: var(--shadow-sm);
}

.loved-pill strong {
  color: var(--blue-60);
  font-weight: 700
}

.avatars {
  display: flex;
  align-items: center;
  padding-right: 6px
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: -8px;
  overflow: hidden;
  background: #DEE7F4;
  flex-shrink: 0
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.avatar:last-child {
  margin-right: 0
}

.hero-title {
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.04;
  max-width: 920px;
  margin: 8px auto 18px;
  color: #06080F;
  text-align: center;
  text-wrap: balance;
  white-space: nowrap;
}

.hero-title br {
  display: block
}

.hero-title-line {
  display: block
}

@media (max-width:880px) {
  .hero-title {
    white-space: normal
  }
}

.hero-sub {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: #3A3F4B;
  max-width: 700px;
  margin: 0 auto 34px
}

.hero-cta-row {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  width: min(100%, 440px);
}

.hero-cta-row .btn {
  min-width: 0;
  width: 100%;
  box-shadow: var(--shadow-md);
}

.hero-cta-form {
  display: flex;
  gap: 6px;
  width: min(100%, 480px);
  margin: 0 auto;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(15, 25, 50, .12), 0 0 0 1px rgba(15, 25, 50, .06);
}
.hero-cta-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 14px 18px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  color: var(--text);
}
.hero-cta-form input[type="email"]::placeholder {
  color: #98a0b3;
}
.hero-cta-form .btn {
  flex-shrink: 0;
  padding: 14px 22px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 480px) {
  .hero-cta-form {
    flex-direction: column;
    border-radius: 18px;
    padding: 8px;
    gap: 8px;
  }
  .hero-cta-form input[type="email"] {
    padding: 12px 14px;
    text-align: center;
  }
  .hero-cta-form .btn {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
  }
}

.trusted {
  margin-top: 64px
}

.trusted-label {
  font-weight: 500;
  color: #0B0F19;
  letter-spacing: .01em;
  margin-bottom: 18px
}

/* Brand logos marquee — JS-driven auto-scroll + drag */
.brand-marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.brand-marquee::-webkit-scrollbar {
  display: none
}

.brand-marquee.grabbing {
  cursor: grabbing
}

.brand-track {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  padding: 12px 4px;
  width: max-content;
  user-select: none;
  -webkit-user-select: none;
}

.brand-track img {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  display: block;
  filter: grayscale(.15);
  opacity: .92;
  pointer-events: none
}

.brand-track img:hover {
  filter: none;
  opacity: 1
}

/* Made in USA */
.made-usa {
  margin-top: 40px;
  display: flex;
  justify-content: center
}
/* Corner-positioned variant: top-right corner of the hero */
.made-usa-corner {
  position: absolute;
  top: 24px;
  right: 24px;
  margin: 0;
  z-index: 12;
  pointer-events: none;
}
.made-usa-corner .made-usa-circle {
  width: 96px;
  height: 96px;
}
.made-usa-corner .made-usa-circle .flag { font-size: 26px; }
@media (max-width: 1080px) {
  .made-usa-corner { top: 16px; right: 14px; }
  .made-usa-corner .made-usa-circle { width: 80px; height: 80px; }
  .made-usa-corner .made-usa-circle .flag { font-size: 22px; }
}
@media (max-width: 720px) {
  .made-usa-corner { display: none; }
}

.made-usa-circle {
  position: relative;
  width: 110px;
  height: 110px
}

.made-usa-text {
  position: absolute;
  inset: 0;
  animation: spin 18s linear infinite
}

.made-usa-text text {
  fill: #0B0F19;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700
}

.made-usa-circle .flag {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* ===== Sections ===== */
.section {
  padding: 96px 0
}

/* All sections share the same background — no per-section gradients so there
   are no visible lines/edges between sections. */
.section-light {
  background: transparent;
}

.section-head {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 140px;
}

.section-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  width: 680px;
  height: 300px;
  transform: translateX(-50%);
  background: url('assets/section-arcs/arcs.svg') center bottom / contain no-repeat;
  pointer-events: none;
  opacity: .85;
  z-index: 0;
}

.section-head>* {
  position: relative;
  z-index: 1
}

.section-head-tight {
  margin-bottom: 24px
}

.industries-card .section-head,
.how-works .section-head {
  padding-top: 50px
}

/* Industries: hide the global arc and use the side abstract decorations instead */
.industries-card .section-head::before {
  display: none
}

.industries-head {
  padding-top: 0;
  margin-bottom: 24px;
  position: relative;
  z-index: 1
}

.industries-sub {
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 15px;
  color: #5B6172;
  line-height: 1.55;
  text-align: center;
}

.industries-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 10px;
  position: relative;
}

/* Decorations wrap around the pill — match the pill height so the curves frame it */
.industries-deco {
  width: 240px;
  height: auto;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 1;
}

.industries-deco-l {
  margin-right: -60px
}

.industries-deco-r {
  margin-left: -60px
}

.industries-pill-row .pill {
  position: relative;
  z-index: 1;
  margin-bottom: 0
}

@media (max-width:880px) {
  .industries-deco {
    width: 130px
  }

  .industries-deco-l {
    margin-right: -14px
  }

  .industries-deco-r {
    margin-left: -14px
  }
}

@media (max-width:640px) {
  .industries-deco {
    display: none
  }
}

@media (max-width:640px) {
  .section-head {
    padding-top: 100px
  }

  .section-head::before {
    width: 480px;
    height: 220px
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  color: #1F2530;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.pill [data-icon] {
  width: 16px;
  height: 16px
}

/* ===== Chips ===== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #1F2530;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

.chip-light {
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.format-chips .chip-light {
  cursor: default;
}

.format-chips .chip-light:hover {
  transform: translateY(-2px);
  background: #F4F8FF;
  box-shadow: 0 6px 14px rgba(15, 25, 50, .12);
}

/* ===== Service cards ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.service-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.service-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px
}

.service-card p {
  font-size: 14px;
  color: #52596A
}

.meta {
  margin-top: 12px;
  border-top: 1px dashed #E7E9EF;
  padding-top: 12px;
  flex: 1
}

.meta-label {
  font-size: 13px;
  color: #0B0F19;
  font-weight: 600;
  display: block;
  margin-bottom: 8px
}

.ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}

.ico [data-icon] {
  width: 22px;
  height: 22px
}

.ico-blue {
  background: linear-gradient(180deg, #3385FF, #4D94FF);
  color: #fff;
  box-shadow: 0 4px 12px rgba(51, 133, 255, .25)
}

/* Service head icon with ring inside (linear mask makes ring appear to spin via slow CSS animation on the mask offset — disabled here to avoid overflow artifacts) */
.ico-svc .ico-glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  z-index: 2;
}

.ico-svc [data-icon] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ico-svc [data-icon] svg {
  width: 100%;
  height: 100%
}

.ico-svc .ico-ring {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(327deg, transparent 0%, transparent 35%, #000 65%, #000 100%);
  mask-image: linear-gradient(327deg, transparent 0%, transparent 35%, #000 65%, #000 100%);
  animation: spin 6s linear infinite;
}

.ico-blue img {
  display: block
}

.ico-blue [data-icon] {
  position: relative;
  z-index: 2
}

.ico-square {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3385FF, #4D94FF);
  color: #fff
}

.ico-square [data-icon] {
  width: 22px;
  height: 22px
}

.ico-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3385FF, #4D94FF);
  color: #fff
}

.ico-circle [data-icon] {
  width: 16px;
  height: 16px
}

/* ===== Projects ===== */
.projects-tabs {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 25, 50, .04);
  margin: 0 auto 32px;
}

.projects-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #0B0F19;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.projects-tab .tab-ico {
  width: 16px;
  height: 16px;
  display: block;
}

.projects-tab.is-active {
  background: #0B0F19;
  color: #fff;
}

.projects-tab.is-active .tab-ico {
  filter: brightness(0) invert(1);
}

.projects-pane {
  display: none;
}

.projects-pane.is-active {
  display: block;
}

.projects-grid-horizontal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.projects-grid-vertical {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

.project-card {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 25, 50, .04);
}

.project-card-horizontal {
  padding: 12px;
}

.project-card-vertical {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 18px;
}

.project-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0B0F19;
}

.project-card-vertical .project-thumb {
  aspect-ratio: 9 / 16;
  border-radius: 18px;
}

.project-thumb img,
.project-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: transform .18s ease;
}

.project-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.project-play img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}

.project-card.is-playing .project-play,
.project-card.is-playing .project-thumb > img {
  display: none;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 4px;
}

.project-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.project-meta h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0B0F19;
  margin: 0;
  line-height: 1.2;
}

.project-meta p {
  font-size: 12px;
  color: #5B6172;
  margin: 2px 0 0;
}

.projects-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 980px) {
  .projects-grid-horizontal { grid-template-columns: 1fr 1fr; }
  .projects-grid-vertical { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .projects-grid-horizontal,
  .projects-grid-vertical { grid-template-columns: 1fr; }
}

/* ===== Portfolio page ===== */
.portfolio-body {
  background: #F5F7FA;
}

.portfolio-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 16px 16px 0;
}

.portfolio-body {
  padding-top: 88px;
}

.portfolio-section {
  padding-top: 56px;
}

.portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 32px;
  max-width: 720px;
}

.portfolio-tab {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #0B0F19;
  background: #fff;
  border: 1px solid #E7ECF3;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .03);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.portfolio-tab:hover {
  transform: translateY(-1px);
}

.portfolio-tab.is-active {
  background: #0B0F19;
  color: #fff;
  border-color: #0B0F19;
}

.portfolio-pane {
  display: none;
}

.portfolio-pane.is-active {
  display: block;
}

/* Empty-circle avatar placeholder for portfolio entries with no avatar file */
.project-avatar-empty {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0B0F19;
  flex-shrink: 0;
}

/* Image-only horizontal tabs (Outros, Thumbnails) — no avatar/meta block */
.pf-card-bare {
  padding: 12px;
}

/* Vertical reel tab uses 4 columns at desktop */
.pf-grid-vertical {
  max-width: none;
}

/* Static-image cards (Thumbnails tab) — no play button, no interactivity */
.pf-card-static {
  cursor: default;
}

/* "View More on Drive" block — sits between panes and the final CTA */
.portfolio-view-more {
  margin: 40px auto 0;
  text-align: center;
  max-width: 540px;
}
.portfolio-view-more p {
  margin: 0 0 14px;
  color: #5B6172;
  font-size: 14.5px;
}
.portfolio-view-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.portfolio-view-more-btn i[data-icon] {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Final CTA block at the bottom of the portfolio page */
.portfolio-final-cta {
  position: relative;
  margin: 64px auto 0;
  text-align: center;
  padding: 56px 24px 48px;
  background: linear-gradient(180deg, #FFFFFF, #F4F7FC);
  border: 1px solid #E7ECF3;
  border-radius: 32px;
  max-width: 540px;
  box-shadow: 0 6px 18px rgba(15, 25, 50, .04);
  overflow: hidden;
}

.portfolio-final-cta::before {
  content: "";
  position: absolute;
  top: -6%;
  left: -6%;
  right: -6%;
  bottom: 0;
  background-image: url('/assets/team/decor-bg.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 112% auto;
  pointer-events: none;
  opacity: .9;
  z-index: 0;
}

.portfolio-final-cta > * {
  position: relative;
  z-index: 1;
}

.portfolio-final-cta h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0B0F19;
  margin: 0 0 8px;
}

.portfolio-final-cta p {
  font-size: 16px;
  color: #5B6172;
  margin: 0 0 24px;
}

/* ===== Industries ===== */
.industries-card {
  background: linear-gradient(180deg, #F2F7FD 0%, #EAF1FB 100%);
  border: 2px solid #FFFFFF;
  border-radius: var(--r-2xl);
  padding: 20px 0 40px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .04),
    0 0 0 3px rgba(255, 255, 255, 1),
    0 0 0 4px rgba(180, 195, 220, .55),
    var(--shadow-md);
}

.industries-art {
  display: none
}

/* Bright blue cloud/flare behind the heading — same screen-blend trick as hero-flare */
.industries-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -80px;
  width: 1000px;
  height: 540px;
  transform: translateX(-50%);
  background-image:
    linear-gradient(135deg, rgba(102, 164, 255, .65) 0%, rgba(150, 200, 255, .45) 50%, rgba(180, 220, 255, .20) 100%),
    url('assets/light/light-1.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-blend-mode: screen;
  opacity: .85;
  filter: saturate(1.5) brightness(1.10);
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 30%, transparent 90%);
  mask-image: radial-gradient(closest-side at 50% 45%, #000 30%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

.industries-card .section-head {
  position: relative;
  z-index: 2
}

.industries-card .pill {
  background: #fff
}

/* Marquee rows */
.industry-marquees {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ind-row {
  overflow: hidden
}

.ind-track {
  display: inline-flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
  /* Animation is now driven by JS (translate3d each frame) instead of CSS keyframes,
     so the scroll cannot drift / speed up over time. See app.js industriesMarquee(). */
}

.ind-track .chip {
  flex-shrink: 0;
  background: #fff;
  padding: 9px 16px;
  font-size: 14px;
}

.ind-track .chip [data-icon] {
  width: 20px;
  height: 20px
}

@keyframes scrollLeft {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

@keyframes scrollRight {
  from {
    transform: translateX(-50%)
  }

  to {
    transform: translateX(0)
  }
}

/* ===== Stats / Proven Record ===== */
.section-proven {
  position: relative;
  background: transparent;
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-md);
}

.stat-num {
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 38px;
  color: #0B0F19;
  letter-spacing: -.02em
}

.stat-num span {
  color: var(--blue-60)
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52596A;
  font-size: 13px;
  margin-top: 4px
}

.stat-label [data-icon] {
  width: 20px;
  height: 20px
}

.stats-copy h2 {
  margin-top: 14px
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px
}

.cta-row .btn [data-icon] {
  width: 18px;
  height: 18px
}

/* ===== Platform Features ===== */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px
}

.feature-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 25, 50, .08);
  border-color: #C9D7EA;
}

.feature-card .ico {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.feature-card:hover .ico {
  transform: scale(1.06) rotate(-3deg);
}

.feature-card .ico {
  width: 62px;
  height: 62px;
  margin-bottom: 8px
}

.feature-card .ico [data-icon] {
  padding: 6px
}

.feature-card .ico-svc [data-icon] img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18))
}

.feature-card h3 {
  margin-top: 6px
}

.feature-card p {
  font-size: 14px;
  margin: 0
}

/* Format dark card with corner ring SVGs */
.format-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #1A2238 0%, #0B0F19 60%);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: 54px 32px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.format-corner {
  position: absolute;
  width: 280px;
  pointer-events: none;
  opacity: .85
}

.format-tl {
  top: 0;
  left: 0
}

.format-tr {
  top: 0;
  right: 0
}

.format-bl {
  bottom: 0;
  left: 0
}

.format-br {
  bottom: 0;
  right: 0
}

.format-light {
  position: absolute;
  width: 520px;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: screen;
  filter: blur(2px);
  z-index: 0;
}

.format-light-l {
  top: -100px;
  left: -160px
}

.format-light-r {
  top: -100px;
  right: -160px
}

.format-card h3 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1
}

.format-card p {
  color: #A8B0C0;
  max-width: 680px;
  margin: 0 auto 18px;
  position: relative;
  z-index: 1
}

.format-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1
}

.format-chips .chip img {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 2px;
  vertical-align: -2px
}

.format-card .btn-primary {
  position: relative;
  z-index: 1
}

/* ===== Comprehensive offerings ===== */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.offer-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm)
}

.offer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px
}

.offer-card p {
  font-size: 13.5px;
  color: #52596A;
  margin: 0 0 10px
}

.offers-cta {
  text-align: center;
  max-width: 680px;
  margin: 36px auto 0
}

.offers-cta p {
  color: #52596A;
  margin-bottom: 14px
}

/* ===== Creators carousel (drag-scrollable) ===== */
.creators-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* scroll-behavior: smooth was the source of the laggy drag — every drag pixel
     update was being smoothly animated. JS handles smooth scroll explicitly for
     arrow buttons via scrollTo({behavior:'smooth'}); native drag stays instant. */
  padding: 24px 0 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.creators-scroll::-webkit-scrollbar {
  display: none
}

.creators-scroll.grabbing {
  cursor: grabbing
}

.creators-track {
  display: inline-flex;
  gap: 14px;
  padding: 0 32px;
  user-select: none;
  -webkit-user-select: none;
  will-change: scroll-position;
}

.creator-card {
  flex: 0 0 240px;
  background: linear-gradient(180deg, #EEF4FF, #F7F8FB);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.creator-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 25, 50, .12);
  border-color: #B7CFEE;
}

.creator-card .creator-photo {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.creator-card:hover .creator-photo {
  transform: scale(1.06);
}

/* "Active" highlight removed — was causing visual jiggle during drag because
   transform: scale forces layout/paint on every scroll frame for the centered
   card. All cards now render uniformly. */
.creator-card-active {
  /* no-op */
}

/* Smaller, thinner View Creator button inside creator cards */
.creator-card .btn-ghost {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}

.creator-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 14px;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  overflow: hidden;
  background: #DEE7F4;
}

.creator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.creator-card h4 {
  margin: 0 0 12px;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #0B0F19;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.creator-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #52596A;
  margin-bottom: 12px;
  text-align: left
}

.creator-meta div {
  flex: 1;
  min-width: 0
}

.creator-meta span {
  display: block;
  color: #8A8F99;
  font-size: 11px
}

.creator-meta strong {
  color: #0B0F19;
  font-size: 13px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.creator-meta strong img {
  width: 14px;
  height: 14px;
  flex-shrink: 0
}

.carousel-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 24px
}

.dots {
  display: flex;
  gap: 6px;
  align-items: center
}

.dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D7DCE5;
  cursor: pointer;
  transition: all .2s ease
}

.dots .dot-active {
  background: var(--blue-60);
  width: 24px;
  border-radius: 4px
}

.arrows {
  display: flex;
  gap: 10px
}

.arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-60);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(51, 133, 255, .3);
  cursor: pointer
}

.arrow [data-icon] {
  width: 18px;
  height: 18px;
  color: #fff
}

/* ===== How It Works ===== */
.how-works {
  position: relative;
  text-align: center
}

.rings-bg {
  position: absolute;
  inset: -30px 0 auto;
  height: 200px;
  background: url('assets/bg-rings.png') center top / contain no-repeat;
  opacity: .4;
  pointer-events: none
}

.works-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #52596A;
  font-size: 16px;
  margin: 8px 0 36px
}

.works-dash {
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8D2E2, transparent);
  width: 160px
}

.works-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1F2530;
  font-weight: 500
}

.works-text::before,
.works-text::after {
  content: "«";
  color: var(--blue-60)
}

.works-text::after {
  content: "»"
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 8px
}

.work-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2xl);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.work-illu {
  background: #FFFFFF url('assets/howworks/upload/Bg.svg') center / cover no-repeat;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  height: 340px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.work-card h3 {
  margin-bottom: 6px
}

.work-card p {
  font-size: 14px
}

/* Sign-in stack — main card centered, two side cards peek from behind its edges */
.signin-stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.signin-main {
  height: 270px;
  width: auto;
  position: relative;
  z-index: 3;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 16px;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .12))
}

.signin-side {
  height: 230px;
  width: auto;
  position: absolute;
  top: 50%;
  z-index: 1;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 14px;
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, .08))
}

.signin-side-l {
  left: -10%;
  transform: translateY(-50%) rotate(-10deg);
}

.signin-side-r {
  right: -10%;
  transform: translateY(-50%) rotate(10deg);
}

/* Upload illustration */
.work-illu-upload .upload-main {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 280px;
  height: auto;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 16px;
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, .10));
  z-index: 1;
}

.work-illu-upload .upload-pill {
  position: absolute;
  width: 220px;
  height: auto;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 12px;
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, .10))
}

.upload-pill-1 {
  left: 50%;
  bottom: 50px;
  transform: translateX(-65%) rotate(-4deg);
  z-index: 3
}

.upload-pill-2 {
  left: 50%;
  bottom: 30px;
  transform: translateX(-35%) rotate(6deg);
  z-index: 2;
}

/* Edit clapper card */
.work-illu-edit {
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-clapper {
  height: 270px;
  width: auto;
  position: relative;
  z-index: 3
}

/* Two sticks at the BOTTOM CORNERS — pushed all the way out so they sit on the
   outer edges, not behind the clapper. Z-index 5 keeps them on top. */
.edit-stick {
  height: 120px;
  width: auto;
  position: absolute;
  bottom: -8px;
  z-index: 5;
}

.edit-stick-l {
  left: -8%;
  transform: rotate(18deg);
}

.edit-stick-r {
  right: -8%;
  transform: scaleX(-1) rotate(18deg);
}

/* Film reels at the TOP CORNERS — pushed further out so the two strips don't overlap. */
.edit-reel {
  position: absolute;
  width: 280px;
  height: auto;
  z-index: 1;
  opacity: .95;
}

.edit-reel-l {
  top: 15px;
  left: -120px;
  transform: rotate(-32deg);
}

.edit-reel-r {
  top: 15px;
  right: -120px;
  transform: rotate(32deg);
}

/* === How It Works — per-card hover animations === */

@media (prefers-reduced-motion: no-preference) {
  /* Smooth transitions on all moving pieces (~.45s feels playful, not draggy) */
  .signin-main,
  .signin-side,
  .upload-main,
  .upload-pill,
  .edit-clapper,
  .edit-stick,
  .edit-reel {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  }

  /* Card 1 — sign-in side cards spread further behind, main card lifts */
  .work-card:hover .signin-side-l {
    transform: translateY(-50%) translateX(-22px) rotate(-16deg);
  }
  .work-card:hover .signin-side-r {
    transform: translateY(-50%) translateX(22px) rotate(16deg);
  }
  .work-card:hover .signin-main {
    transform: translateY(-4px);
  }

  /* Card 2 — upload pills float up + settle toward upright (footage uploaded) */
  .work-card:hover .upload-main {
    transform: translateX(-50%) translateY(-3px);
  }
  .work-card:hover .upload-pill-1 {
    transform: translateX(-65%) translateY(-14px) rotate(-2deg);
  }
  .work-card:hover .upload-pill-2 {
    transform: translateX(-35%) translateY(-14px) rotate(3deg);
  }

  /* Card 3 — clapper pops up + tilt, sticks shift out, film strips drift outward */
  .work-card:hover .edit-clapper {
    transform: translateY(-10px) rotate(-3deg);
  }
  .work-card:hover .edit-stick-l {
    transform: translate(-6px, -5px) rotate(18deg);
  }
  .work-card:hover .edit-stick-r {
    transform: scaleX(-1) translate(-6px, -5px) rotate(18deg);
  }
  .work-card:hover .edit-reel-l {
    transform: rotate(-32deg) translate(-8px, -4px);
  }
  .work-card:hover .edit-reel-r {
    transform: rotate(32deg) translate(8px, -4px);
  }
}

/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  position: relative;
}

.about-grid > * {
  min-width: 0;
}

/* Vertical timeline line down the middle of the grid gap.
   Fills with blue as the user scrolls through the section, driven by the
   --about-progress CSS variable (0 → 1) set in app.js. */
.about-grid {
  --about-progress: 0;
}
.about-grid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    #1A76FF 0%,
    #1A76FF calc(var(--about-progress) * 100%),
    #D7DCE5 calc(var(--about-progress) * 100%),
    #D7DCE5 100%
  );
  pointer-events: none;
  transform: translateX(-1px);
  z-index: 0;
  border-radius: 2px;
}

/* Bottom-of-line dot — anchored to grid bottom so it sits at the line's end
   regardless of how tall the (sticky) left column is. Goes from gray to blue
   when the line has fully filled. */
.about-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 19.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D7DCE5;
  box-shadow: 0 0 0 4px rgba(215, 220, 229, .35);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  transition: background .25s ease, box-shadow .25s ease;
}
.about-grid[data-progress="full"]::before {
  background: #5B9BFF;
  box-shadow: 0 0 0 4px rgba(91, 155, 255, .25);
}

.about-copy {
  position: sticky;
  top: 100px;
  align-self: start;
}

.about-h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  margin: 14px 0 0;
  font-weight: 800;
}

.about-big {
  font-size: clamp(56px, 7vw, 92px);
  font-weight: 800;
  letter-spacing: -.04em;
  display: block;
  line-height: 1;
  color: #06080F;
  margin-top: 6px;
}

.about-copy > p {
  font-size: 16px;
  color: #3A3F4B;
  margin: 18px 0 28px;
  max-width: 520px;
  line-height: 1.6;
}

.about-copy .pill-img {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

.btn-img {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.btn-img-dark {
  filter: brightness(0);
}

/* Right column — stacked cards with timeline dots */
.about-cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}

.about-card {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 6px 18px rgba(15, 25, 50, .04);
  position: relative;
}

/* Timeline dot — sits on the center line, aligned with each card's top */
.about-card {
  z-index: 1;
}

.about-card::before {
  content: "";
  position: absolute;
  left: -36.5px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D7DCE5;
  box-shadow: 0 0 0 4px rgba(215, 220, 229, .35);
  z-index: 2;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* When the line's progress has reached the card, its timeline dot turns blue. */
.about-card.is-reached::before {
  background: #5B9BFF;
  box-shadow: 0 0 0 4px rgba(91, 155, 255, .25);
  transform: scale(1.05);
}

/* Last card's per-card dot is hidden — replaced by the grid's bottom dot
   (.about-grid::before) which anchors to the actual end of the line. */
.services-card::before {
  display: none;
}

/* Founder card — light blue gradient at top */
.founder-card {
  background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 60%);
}

.founder-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.founder-photo {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #3385FF;
}

.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-info h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 2px;
  color: #0B0F19;
}

.founder-info > p {
  margin: 0 0 12px;
  color: #5B6172;
  font-size: 14px;
}

.socials {
  display: flex;
  gap: 6px;
}

.soc {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #0B0F19;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.soc img {
  width: 14px;
  height: 14px;
  display: block;
  filter: brightness(0) invert(1);
}

.rated-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}
@media (max-width: 720px) {
  .rated-row {
    flex-wrap: wrap;
  }
}

.rated-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
}

.rated-pill img {
  height: 14px;
  width: auto;
  display: block;
}

.fiverr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
  text-decoration: none;
  cursor: pointer;
}

.fiverr-btn img {
  height: 14px;
  width: auto;
  display: block;
}

.fiverr-btn [data-icon] {
  width: 12px;
  height: 12px;
  color: #0B0F19;
}

.founder-bio {
  font-size: 14px;
  color: #4A4F5C;
  border-top: 1px solid #ECEFF4;
  border-bottom: 1px solid #ECEFF4;
  padding: 18px 0;
  margin: 0 0 18px;
  line-height: 1.6;
}

.founder-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.visit-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
  text-decoration: none;
  cursor: pointer;
}

.visit-channel-btn img {
  height: 14px;
  width: auto;
  display: block;
}

.visit-channel-btn .ch-arrow {
  height: 10px;
}

.founder-stats {
  display: flex;
  gap: 28px;
}

.founder-stats div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.founder-stats strong {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0B0F19;
  line-height: 1.1;
}

.founder-stats span {
  font-size: 12px;
  color: #5B6172;
}

/* Commitment card */
.commitment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
}
.commitment-head .rated-pill {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .commitment-head {
    flex-wrap: wrap;
  }
}

.commitment-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #0B0F19;
}

.commitment-card > p {
  font-size: 14px;
  color: #4A4F5C;
  line-height: 1.6;
  margin: 0 0 18px;
}

.commit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.happy-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
}

.happy-faces {
  display: inline-flex;
}

.happy-faces img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -8px;
  display: block;
}

.happy-faces img:first-child {
  margin-left: 0;
}

/* Testimonials marquee inside commitment card */
.testimonials-marquee {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.testimonials-track {
  display: inline-flex;
  gap: 12px;
  padding: 4px 0;
  width: max-content;
  user-select: none;
  will-change: transform;
}

.testimonial-mini {
  flex: 0 0 240px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .03);
  pointer-events: none;
}

.testimonial-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.testimonial-head img.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-head .t-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
  margin-bottom: 2px;
}

.testimonial-head .t-meta img {
  height: 11px;
  width: auto;
  display: block;
}

.testimonial-mini p {
  font-size: 12px;
  color: #5B6172;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Comprehensive Services card */
.services-card .services-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.services-card .services-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(180deg, #4A8DFF, #2666E8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(38, 102, 232, .25);
}

.services-card .services-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.services-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0B0F19;
  margin: 0;
}

.services-card > p {
  font-size: 14px;
  color: #4A4F5C;
  line-height: 1.6;
  margin: 0;
}

/* ===== Why Us ===== */
/* Asymmetric grid: row 1 = 5/7 (Swift small, Cinematic wide),
   row 2 = 7/5 (Unlimited wide, Lightning small) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px
}

.why-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2xl);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  min-width: 0
}

.why-card:nth-child(1) { grid-column: span 5; }
.why-card:nth-child(2) { grid-column: span 7; }
.why-card:nth-child(3) { grid-column: span 7; }
.why-card:nth-child(4) { grid-column: span 5; }

.why-illu {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/dots-bg.png') center / cover;
  border-radius: var(--r-xl);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.why-illu [data-icon] {
  width: 140px;
  height: 140px;
}

/* Background SVG/JPG that fills the illu card */
.why-illu .why-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Card 1 — Swift Turnaround stopwatch.
   The SVG already includes its own dotted background, so the illu container
   is plain (no extra bg image) and the SVG fills the area via object-fit: contain. */
.why-illu-swift {
  background: #fff;
  padding: 0;
}

.why-img-stopwatch {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Card 2 — Cinematic Quality clapper with film strips peeking from the top corners.
   Same pattern as edit-reel-l/r in How It Works step 3. */
.cinematic-tape {
  position: absolute;
  top: 15px;
  width: 320px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
}

.cinematic-tape-l {
  left: -80px;
  transform: rotate(-32deg);
}

.cinematic-tape-r {
  right: -80px;
  transform: rotate(32deg);
}

.why-img-clapper {
  width: 280px;
  height: auto;
  position: relative;
  z-index: 2;
}

/* Card 3 — Unlimited Revisions marquee */
.why-illu-revisions {
  padding: 0;
  /* let rows fill height; bg layer uses object-fit: cover */
}

.rev-rows {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.rev-row {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  will-change: transform;
}

.rev-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: #0B0F19;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  flex-shrink: 0;
  height: 28px;
  box-sizing: border-box;
  line-height: 1;
}

.rev-tag::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("assets/whyus/card3-revision-icon.svg") center/contain no-repeat;
  flex-shrink: 0;
}

/* Empty placeholder pills — match the height of full pills */
.rev-blank {
  display: inline-block;
  width: 80px;
  height: 28px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  box-sizing: border-box;
}

/* Card 4 — Lightning-Fast Edits with spinning ring background */
.why-illu-lightning {
  background: url('assets/dots-bg.png') center / cover;
}

.lightning-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
}

.lightning-ring-big {
  width: 320px;
  height: 320px;
  margin-top: -160px;
  margin-left: -160px;
  animation: ring-spin 28s linear infinite;
}

.lightning-ring-medium {
  width: 220px;
  height: 220px;
  margin-top: -110px;
  margin-left: -110px;
  animation: ring-spin 22s linear infinite reverse;
  opacity: .5;
}

.lightning-ring-small {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
  animation: ring-spin 16s linear infinite;
  opacity: .65;
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.why-img-bolt {
  width: 320px;
  height: auto;
  position: relative;
  z-index: 2;
}

/* Mobile collapse: stack all 4 cards full-width (overrides 12-col spans) */
@media (max-width: 980px) {
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
  .why-card:nth-child(1),
  .why-card:nth-child(2),
  .why-card:nth-child(3),
  .why-card:nth-child(4) { grid-column: auto; }
}

/* === Why Us — per-card hover animations === */

@media (prefers-reduced-motion: no-preference) {
  /* Card-level: subtle lift across all 4 cards */
  .why-card {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s ease;
  }
  .why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 25, 50, .08);
  }

  /* Inner-illustration transitions */
  .why-img-clapper,
  .why-img-bolt,
  .cinematic-tape,
  .why-bg {
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }

  /* Card 2 — clapper lifts + tilts, film tapes drift outward */
  .why-card:hover .why-img-clapper {
    transform: translateY(-10px) rotate(-3deg);
  }
  .why-card:hover .cinematic-tape-l {
    transform: rotate(-32deg) translate(-10px, -5px);
  }
  .why-card:hover .cinematic-tape-r {
    transform: rotate(32deg) translate(10px, -5px);
  }

  /* Card 3 — bg subtly zooms; pills already loop via JS */
  .why-card:hover .why-illu-revisions .why-bg {
    transform: scale(1.04);
  }

  /* Card 4 — bolt scales + slight tilt; rings speed up dramatically */
  .why-card:hover .why-img-bolt {
    transform: scale(1.06) rotate(-3deg);
  }
  .why-card:hover .lightning-ring-big {
    animation-duration: 8s;
  }
  .why-card:hover .lightning-ring-medium {
    animation-duration: 6s;
  }
  .why-card:hover .lightning-ring-small {
    animation-duration: 4s;
  }
}

/* ===== Core Values ===== */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.value-card {
  background: linear-gradient(180deg, #FAFCFF, #F4F7FC);
  border: 1px solid #E7ECF3;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 4px 12px rgba(15, 25, 50, .03);
}

.value-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.value-ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}

.value-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0B0F19;
  margin: 0;
  line-height: 1.3;
}

.value-card p {
  font-size: 14px;
  color: #4A4F5C;
  line-height: 1.6;
  margin: 0
}

/* ===== CTA (mission) ===== */
.cta-mission {
  text-align: center;
  padding-top: 0;
}

.cta-mission .container {
  position: relative;
  padding-top: 0;
}

/* CTA stage — phones row + design-bg overlay (the curved wave PNG with
   curves between phones; logo sits BELOW the wave with horizontal lines
   flanking it). Image is at natural aspect, no transforms. */
.cta-stage {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}

.cta-phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  z-index: 1;
}

.cta-stage-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  display: block;
}

/* Blend strategy: wave is fully solid (no mask). Two gradient overlay divs
   painting the page bg color (#F5F7FA) outward from the logo center toward
   each side, with a vertical mask so only the lower half of each overlay
   is opaque. The result: the wave's sides stay solid, but the middle-bottom
   transitions smoothly into page bg right where the logo sits. */
.cta-blend {
  position: absolute;
  bottom: 0;
  height: 90px;
  z-index: 3;
  pointer-events: none;
}

.cta-blend-l {
  left: 50%;
  width: 50%;
  background: linear-gradient(90deg, transparent 0%, #F5F7FA 50%, #F5F7FA 100%);
  transform: translateX(-100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%);
}

.cta-blend-r {
  left: 50%;
  width: 50%;
  background: linear-gradient(90deg, #F5F7FA 0%, #F5F7FA 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%);
}

/* Each phone — iPhone frame SVG (170x343 → ~303px tall at 150px wide).
   Layering: video (z:2) sits ABOVE the frame (z:1) so it's visible through
   the frame's screen area; notch (z:3) goes on top of everything. */
.cta-phone {
  flex: 0 0 130px;
  width: 130px;
  height: 263px;
  position: relative;
  overflow: hidden;
}

.cta-phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(15, 25, 50, .15));
}

.cta-phone-video {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: cover;
  border-radius: 22px;
  z-index: 2;
  background: #0B0F19;
  display: block;
}

.cta-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* Logo row — flanked by horizontal divider lines on each side, sits BELOW
   the wave (negative top margin pulls it up just enough to overlap the
   wave's central dip). */
.cta-mark-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: -28px auto 22px;
  position: relative;
  z-index: 3;
  max-width: 720px;
}

.cta-line {
  flex: 1 1 0;
  height: 1px;
  background: #D7DCE5;
  display: block;
  max-width: 240px;
}

.cta-mark-img {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.cta-mission-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #0B0F19;
  margin: 0 auto 14px;
  max-width: 760px;
}

.cta-mission-sub {
  font-size: 14px;
  color: #5B6172;
  margin: 0 0 22px;
}

/* ===== FAQ ===== */
/* Two independent flex columns so when an item expands, only that column grows.
   align-items: start prevents columns from stretching to match each other. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.faq-item {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .18s ease;
}

.faq-item.is-open {
  box-shadow: 0 4px 16px rgba(15, 25, 50, .06);
}

.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: 'Clash Grotesk', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0B0F19;
  cursor: pointer;
}

.faq-q:hover {
  background: #F7F9FC;
}

.faq-q-toggle {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  background: #0B0F19;
  padding: 4px;
  box-sizing: border-box;
}

.faq-a {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
  font-size: 14px;
  color: #4A4F5C;
  line-height: 1.65;
}

.faq-a p {
  margin: 0;
}

.faq-item.is-open .faq-a {
  max-height: 600px;
  padding: 18px 22px 22px;
  border-top: 1px solid #EEF2F8;
}

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}

.contact-copy h2.contact-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 14px 0 16px;
  color: #0B0F19;
}

.contact-copy p {
  font-size: 14px;
  color: #4A4F5C;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 0 26px;
}

.contact-actions {
  display: flex;
  gap: 14px;
  border-top: 1px dashed #D7DCE5;
  padding-top: 22px;
  flex-wrap: wrap;
}

.contact-action {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  padding: 14px;
  width: 152px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 25, 50, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}

.contact-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 25, 50, .08);
}

.contact-action-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-action-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contact-action-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
}

.contact-action-label {
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
}

.contact-form {
  background: linear-gradient(180deg, #EAF2FB, #F8FBFE);
  border: 1px solid #DEE6F0;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 22px rgba(15, 25, 50, .06);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label > span {
  font-size: 13px;
  font-weight: 500;
  color: #0B0F19;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #0B0F19;
  background: #fff;
  border: 1px solid #DEE6F0;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #A5ABB8;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #3385FF;
}

.contact-form .form-full {
  margin-bottom: 18px;
}

.contact-form .form-submit {
  display: flex;
  justify-content: center;
}

@media (max-width: 980px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* CTA section — tablet/mobile style kicks in at iPad-Pro-portrait sizes
   so phones don't poke out below the wave with no gradient cover. */
@media (max-width: 1100px) {
  .cta-phone {
    flex: 0 0 56px;
    width: 56px;
    height: 113px;
  }
  .cta-phones {
    gap: 6px;
  }
  .cta-stage-bg {
    top: 60px;
  }
  .cta-blend {
    height: 50px;
  }
  /* Solid page-bg band painted across the full stage bottom — covers any
     iPhone chins the wave's curves miss on the outer edges. z:4 (above
     phones at z:1, wave at z:2, blend at z:3). */
  .cta-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: #F5F7FA;
    z-index: 4;
    pointer-events: none;
  }
  /* Bring logo row above the bottom band */
  .cta-mark-row {
    margin-top: -14px;
    gap: 14px;
    z-index: 10;
  }
  .cta-mark-img {
    height: 36px;
  }
  .cta-line {
    display: none;
  }
  .cta-phone-notch {
    width: 18px;
    top: 4px;
  }
  .cta-phone-video {
    top: 1px;
    left: 1.5px;
    width: calc(100% - 3px);
    height: calc(100% - 2px);
    border-radius: 11px;
  }
}

@media (max-width: 640px) {
  .cta-mark-row {
    gap: 8px;
  }
  .cta-mark-img {
    height: 32px;
  }
  .cta-line {
    display: block;
    max-width: 80px;
  }
}

@media (max-width: 640px) {
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Footer ===== */
.footer {
  background: #0B0F19;
  color: #A8B0C0;
  padding: 64px 0 24px;
  margin-top: 48px
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid #1A2238
}

.footer-brand img {
  height: 36px;
  width: auto;
  filter: invert(1) brightness(2);
  margin-bottom: 12px;
}

.footer-brand p {
  color: #7A8493;
  max-width: 320px
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.footer-cols h4 {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px
}

.footer-cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.footer-cols a {
  color: #A8B0C0;
  font-size: 14px
}

.footer-cols a:hover {
  color: #fff
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: #7A8493;
  flex-wrap: wrap;
  gap: 14px
}

.footer-bottom .soc {
  background: #1A2238;
  color: #fff
}

/* ===== Responsive ===== */
@media (max-width:980px) {

  .services-grid,
  .offers-grid {
    grid-template-columns: 1fr 1fr
  }

  .features-grid,
  .values-grid,
  .why-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr
  }

  .stats-row,
  .about-grid,
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .about-grid::after,
  .about-card::before {
    display: none
  }

  .about-copy {
    position: static
  }

  .works-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width:640px) {

  .services-grid,
  .offers-grid,
  .features-grid,
  .values-grid,
  .why-grid,
  .stats-grid {
    grid-template-columns: 1fr
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr
  }

  .hero {
    padding: 24px 0 40px
  }

  .hero-cta-row {
    gap: 8px;
    width: min(100%, 340px)
  }

  .hero-cta-row .btn {
    gap: 5px;
    padding: 10px 8px;
    font-size: 13px
  }

  .nav {
    padding: 6px 6px 6px 14px;
    gap: 8px
  }

  .nav-cta .btn {
    padding: 8px 14px;
    font-size: 13px
  }

  .section {
    padding: 64px 0
  }
}

/* ============================================================
   Blog index (Explore Our Blog)
   ============================================================ */
.blog-section {
  padding-top: 56px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 2px 8px rgba(15, 25, 50, .04);
  min-width: 0;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 25, 50, .08);
  border-color: #DCE3EE;
}

.blog-card-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #EAF1FB;
}

.blog-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 6px 8px;
}

.blog-card-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  margin: 0;
  color: #0B0F19;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}

.blog-card-meta .dot {
  color: #B6BCC8;
}

.blog-error {
  text-align: center;
  color: #6B7280;
  padding: 40px 0;
}

/* ============================================================
   Blog page controls (search / sort / filter / pagination)
   ============================================================ */
.blog-controls {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 auto 20px;
  max-width: 1200px;
  flex-wrap: wrap;
}
.blog-search {
  flex: 1 1 280px;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 10px 16px 10px 38px;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
  min-width: 0;
}
.blog-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}
.blog-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  color: #0B0F19;
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.blog-search input::placeholder { color: #8A92A3; }

.blog-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
}
.blog-sort-label {
  font-size: 13px;
  color: #5B6172;
  font-weight: 500;
}
.blog-sort select {
  border: 0;
  background: #F4F7FB;
  border-radius: 999px;
  padding: 8px 32px 8px 14px;
  font-size: 14px;
  color: #0B0F19;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230B0F19' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.blog-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 28px;
  max-width: 1200px;
}
.blog-filter-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #E7ECF3;
  color: #1F2530;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.blog-filter-chip:hover {
  border-color: #1A76FF;
  color: #1A76FF;
}
.blog-filter-chip.is-active {
  background: #0B0F19;
  border-color: #0B0F19;
  color: #fff;
}

.blog-empty {
  text-align: center;
  color: #8A92A3;
  padding: 40px 0;
  margin: 0;
}

.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
}
.blog-page-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E7ECF3;
  color: #0B0F19;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .04);
}
.blog-page-btn:hover:not(:disabled) {
  border-color: #1A76FF;
  color: #1A76FF;
  transform: translateY(-1px);
}
.blog-page-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.blog-page-info {
  font-size: 14px;
  color: #5B6172;
  font-weight: 500;
}

@media (max-width: 640px) {
  .blog-controls { flex-direction: column; align-items: stretch; }
  .blog-search { flex: 1 1 100%; }
  .blog-sort { width: 100%; justify-content: space-between; }
}

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog post (single article)
   ============================================================ */
.blog-post {
  padding: 32px 0 0;
}

.blog-post-inner {
  max-width: 820px;
}

.blog-post-cover {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 36px;
  background: #EAF1FB;
}

.blog-post-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-post-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0B0F19;
  margin: 0 0 24px;
}

.blog-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  color: #8A92A3;
  margin-bottom: 20px;
}

.blog-post-meta-l {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-post-meta .dot {
  color: #B6BCC8;
}

.blog-post-share {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #C7CBD3;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.share-btn:hover {
  background: #0B0F19;
  transform: translateY(-1px);
}

.share-btn.is-copied {
  background: #1A76FF;
}

.blog-post-body {
  font-size: 16.5px;
  line-height: 1.7;
  color: #2A2F3C;
}

.blog-post-body h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  color: #0B0F19;
  margin: 40px 0 16px;
}

.blog-post-body h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: #0B0F19;
  margin: 32px 0 12px;
}

.blog-post-body h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #0B0F19;
  margin: 24px 0 8px;
}

.blog-post-body p {
  margin: 0 0 18px;
}

.blog-post-body ul,
.blog-post-body ol {
  padding-left: 22px;
  margin: 0 0 18px;
}

.blog-post-body li {
  margin: 0 0 8px;
}

.blog-post-body strong { color: #0B0F19; font-weight: 600; }

.blog-post-body a {
  color: #1A76FF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-post-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid #1A76FF;
  background: #F2F7FD;
  border-radius: 0 12px 12px 0;
  color: #1F2530;
  font-style: italic;
}

.blog-post-body hr {
  border: 0;
  border-top: 1px solid #E7ECF3;
  margin: 32px 0;
}

.blog-post-body .bp-figure {
  margin: 28px 0;
  border-radius: 18px;
  overflow: hidden;
  background: #EAF1FB;
}

.blog-post-body .bp-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-post-body code {
  background: #F2F4F8;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.92em;
}

.blog-post-body pre.bp-codeblock {
  margin: 24px 0;
  padding: 18px 20px;
  background: #0F172A;
  color: #E2E8F0;
  border-radius: 14px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
}
.blog-post-body pre.bp-codeblock code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
  white-space: pre;
  display: block;
}

.blog-post-body .bp-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid #E7ECF3;
  border-radius: 12px;
  background: #fff;
}
.blog-post-body .bp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.blog-post-body .bp-table thead th {
  background: #F2F7FD;
  color: #0B0F19;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #E7ECF3;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-post-body .bp-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #F1F4F9;
  vertical-align: top;
  color: #2A2F3C;
  line-height: 1.5;
}
.blog-post-body .bp-table tbody tr:last-child td {
  border-bottom: 0;
}
.blog-post-body .bp-table tbody tr:hover {
  background: #F8FAFD;
}

.blog-post-loading {
  color: #8A92A3;
  text-align: center;
  padding: 40px 0;
}

.blog-post-next {
  margin: 24px 0 24px;
  text-align: center;
}

.blog-post-next-link {
  display: inline-block;
  padding: 12px 0;
  font-size: 16px;
  color: #0B0F19;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}

.blog-post-next-link:hover {
  border-bottom-color: #0B0F19;
}

@media (max-width: 640px) {
  .blog-post-title { font-size: 32px; }
  .blog-post-body { font-size: 16px; }
  .blog-post-body h2 { font-size: 24px; }
  .blog-post-body h3 { font-size: 19px; }
}

/* ============================================================
   Blog post SEO/UX additions: progress bar, breadcrumb, TOC, related
   ============================================================ */
.bp-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1A76FF, #5C9DFF);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
  transition: transform .05s linear;
}

.bp-breadcrumb {
  font-size: 13px;
  color: #8A92A3;
  margin: 0 0 24px;
}
.bp-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.bp-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bp-breadcrumb li + li::before {
  content: "/";
  color: #C7CBD3;
}
.bp-breadcrumb a {
  color: #5B6172;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bp-breadcrumb a:hover {
  color: #0B0F19;
  border-bottom-color: #0B0F19;
}
.bp-breadcrumb [aria-current="page"] {
  color: #0B0F19;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-toc {
  margin: 28px 0 36px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15, 25, 50, .04);
}
.bp-toc-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5B6172;
  margin: 0 0 12px;
  font-weight: 700;
}
.bp-toc-list {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-toc-list a {
  color: #1F2530;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid transparent;
}
.bp-toc-list a:hover {
  color: #1A76FF;
  border-bottom-color: #1A76FF;
}

.blog-post-author-bio {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  margin: 40px 0 24px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 16px;
}
.blog-post-author-bio img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.blog-post-author-bio strong {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  color: #0B0F19;
  display: block;
  margin-bottom: 4px;
}
.blog-post-author-bio strong a { color: inherit; text-decoration: none; }
.blog-post-author-bio strong a:hover { color: #1A76FF; }
.blog-post-author-bio p {
  font-size: 14px;
  color: #5B6172;
  line-height: 1.5;
  margin: 0;
}
.blog-post-author-bio a { color: #1A76FF; text-decoration: none; }
.blog-post-author-bio a:hover { text-decoration: underline; }

.bp-related {
  margin: 64px 0 24px;
  padding-top: 36px;
  border-top: 1px solid #E7ECF3;
}
.bp-related h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0B0F19;
  margin: 0 0 24px;
}
.bp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bp-related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
  min-width: 0;
}
.bp-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 25, 50, .06);
}
.bp-related-cover {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #EAF1FB;
}
.bp-related-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bp-related-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #0B0F19;
  margin: 0;
}
.bp-related-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
}
.bp-related-meta .dot { color: #B6BCC8; }

@media (max-width: 880px) {
  .bp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .bp-related-grid { grid-template-columns: 1fr; }
  .bp-breadcrumb [aria-current="page"] { max-width: 220px; }
}

/* ============================================================
   Author page (E-E-A-T)
   ============================================================ */
.author-page {
  padding: 32px 0 64px;
  background: linear-gradient(180deg, #F4F8FE 0%, #FAFBFE 320px, #FAFBFE 100%);
}
.author-inner { max-width: 880px; }
.author-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
  margin: 24px 0 36px;
  padding: 36px;
  background: #fff;
  border: 1px solid #E0E8F4;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(15, 25, 50, .06);
}
.author-hero-photo img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(15, 25, 50, .14);
}
.author-eyebrow {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1A76FF;
  margin: 0 0 6px;
  font-weight: 700;
}
.author-hero-meta h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  color: #0B0F19;
}
.author-tagline {
  font-size: 17px;
  color: #5B6172;
  margin: 0 0 18px;
}
.author-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.author-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 48px;
}
.author-stat {
  position: relative;
  background: #fff url('/assets/about/stat-bg.png') no-repeat center top / cover;
  border: 1px solid #DBE5F2;
  border-radius: 18px;
  padding: 28px 20px 22px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 25, 50, .05);
  overflow: hidden;
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease;
}
[data-stats-animate].author-stats .author-stat,
[data-stats-animate] .author-stat {
  opacity: 0;
  transform: translateY(8px);
}
[data-stats-animate].author-stats .author-stat.is-visible,
[data-stats-animate] .author-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.author-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 55%, #fff 100%);
  pointer-events: none;
}
.author-stat > * { position: relative; z-index: 1; }
.author-stat strong {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #0B0F19;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0B0F19 0%, #1A76FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.author-stat span {
  font-size: 13px;
  color: #5B6172;
  font-weight: 500;
  line-height: 1.4;
  display: block;
}
.author-section {
  margin: 36px 0;
}
.author-section h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0B0F19;
  margin: 0 0 12px;
}
.author-section p {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2F3C;
  margin: 0 0 12px;
}
.author-expertise,
.author-recent {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.author-expertise li {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #2A2F3C;
}
.author-recent li {
  padding: 10px 0;
  border-bottom: 1px solid #E7ECF3;
  font-size: 15px;
}
.author-recent li:last-child { border-bottom: 0; }
.author-recent a {
  color: #0B0F19;
  text-decoration: none;
  font-weight: 600;
}
.author-recent a:hover { color: #1A76FF; }
.author-recent span {
  color: #8A92A3;
  font-size: 13px;
}

@media (max-width: 720px) {
  .author-hero { grid-template-columns: 1fr; text-align: center; }
  .author-hero-photo img { width: 140px; height: 140px; margin: 0 auto; }
  .author-hero-actions { justify-content: center; }
  .author-stats { grid-template-columns: 1fr 1fr; }
  .author-hero-meta h1 { font-size: 32px; }
}

/* ---- Author page extras (timeline, honors, chips, clients, press) ---- */
.author-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.author-timeline > li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
}
.author-timeline > li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1A76FF;
  box-shadow: 0 0 0 4px rgba(26, 118, 255, .15);
}
.author-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 4px;
}
.author-timeline-role {
  font-weight: 700;
  font-size: 16px;
  color: #0B0F19;
}
.author-timeline-org {
  color: #1A76FF;
  font-weight: 600;
  font-size: 15px;
}
.author-timeline-meta {
  color: #8A92A3;
  font-size: 13px;
  margin-left: auto;
}
.author-timeline p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3A3F4B;
}

/* Career timeline with company logos */
.author-timeline-with-logos > li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.author-timeline-logo {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #F5F8FC;
  border: 1px solid #E7ECF3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.author-timeline-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}
.author-timeline-logo svg {
  width: 24px;
  height: 24px;
}
/* Mark Studios mark is dense and reads small — crop+zoom 3× so it actually reads at 52px */
.author-timeline-logo-markstudios img {
  padding: 0;
  transform: scale(3);
  transform-origin: center;
}
.author-timeline-logo-abstracta {
  background: #F7FAFF;
}
.author-timeline-logo-abstracta img {
  width: 118%;
  height: 118%;
  padding: 0;
}
.author-timeline-body {
  flex: 1 1 auto;
  min-width: 0;
}
.author-honors {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.author-honors li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 12px;
  padding: 12px 16px 12px 40px;
  font-size: 14px;
  line-height: 1.5;
  color: #2A2F3C;
  position: relative;
}
.author-honors li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #1A76FF;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15 8.5 22 9.3 17 14 18.5 21 12 17.5 5.5 21 7 14 2 9.3 9 8.5'/></svg>");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
}
.author-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}
.author-chips-group { flex: 1 1 240px; min-width: 220px; }
.author-chips-group h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #5B6172;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px;
}
.author-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.author-chips li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  color: #2A2F3C;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.author-chips li img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.author-chips li.author-chips-break {
  flex-basis: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.author-chips li .flag {
  font-size: 16px;
  line-height: 1;
}
.author-chips li small {
  color: #8A92A3;
  font-weight: 400;
  margin-left: 4px;
}
.author-clients {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.author-clients li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #0B0F19;
  text-align: center;
}
.author-press {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-left: 4px solid #1A76FF;
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin: 0;
  box-shadow: 0 4px 14px rgba(15, 25, 50, .04);
}
.author-press-quote {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: #0B0F19;
  font-weight: 600;
  margin: 0 0 12px;
  display: block;
}
.author-press a {
  color: #0B0F19;
  text-decoration: none;
}
.author-press a:hover { color: #1A76FF; }
.author-press-meta {
  font-size: 13px;
  color: #8A92A3;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.author-press-pub {
  font-weight: 700;
  color: #1A76FF;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Pull-quote in About section */
.author-pullquote {
  margin: 24px 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, #F4F8FE 0%, #fff 100%);
  border: 1px solid #DBE5F2;
  border-radius: 16px;
  border-left: 4px solid #1A76FF;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  line-height: 1.45;
  color: #0B0F19;
  font-weight: 600;
  font-style: italic;
  position: relative;
}
.author-pullquote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 18px;
  font-size: 64px;
  font-weight: 800;
  color: #1A76FF;
  opacity: .25;
  font-family: 'Instrument Sans', sans-serif;
  line-height: 1;
}

/* Areas of expertise — 2-col icon grid */
.author-expertise-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.author-expertise-grid li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.author-expertise-grid li:hover {
  border-color: #BDD3F4;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 118, 255, .08);
}
.author-expertise-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3385FF 0%, #4D94FF 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(26, 118, 255, .25);
}
.author-expertise-ico img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.author-expertise-grid h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0B0F19;
  margin: 0;
  line-height: 1.2;
}
.author-expertise-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3A3F4B;
}

/* Featured collaborations — logo grid + creator pill row */
.author-clients-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
.author-clients-logos li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 12px;
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  transition: border-color .2s;
}
.author-clients-logos li:hover { border-color: #BDD3F4; }
.author-clients-logos img {
  max-width: 100%;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(.85);
  opacity: .7;
  transition: filter .2s, opacity .2s;
}
.author-clients-logos li:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
.author-clients-creators {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}
.author-clients-creators-label {
  font-size: 13px;
  font-weight: 700;
  color: #5B6172;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 4px;
}
.author-clients-creators li {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  color: #2A2F3C;
  font-weight: 500;
}

@media (max-width: 720px) {
  .author-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .author-stat strong { font-size: 26px; }
  .author-expertise-grid { grid-template-columns: 1fr; }
  .author-clients-logos { grid-template-columns: repeat(3, 1fr); }
  .author-pullquote { font-size: 17px; padding: 20px 22px; }
}

/* ============================================================
   Pillar / Guide page
   ============================================================ */
.guide-page { padding: 32px 0 64px; }
.guide-inner { max-width: 920px; }
.guide-hero {
  text-align: center;
  margin: 24px 0 48px;
}
.guide-hero h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #0B0F19;
  margin: 0 0 16px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.guide-hero p {
  font-size: 18px;
  color: #5B6172;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 20px;
}
.guide-toc {
  margin: 0 0 48px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 18px;
}
.guide-toc h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5B6172;
  margin: 0 0 14px;
}
.guide-toc ol {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-toc a {
  color: #1F2530;
  text-decoration: none;
  font-size: 16px;
}
.guide-toc a:hover { color: #1A76FF; }
.guide-chapter {
  margin: 0 0 56px;
  scroll-margin-top: 100px;
}
.guide-chapter h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  color: #0B0F19;
  margin: 0 0 16px;
}
.guide-chapter > p {
  font-size: 17px;
  line-height: 1.7;
  color: #2A2F3C;
  margin: 0 0 22px;
}
.guide-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.guide-related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.guide-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 25, 50, .06);
}
.guide-related-cover {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #EAF1FB;
}
.guide-related-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guide-related-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #0B0F19;
  margin: 0;
}

/* Chapter banner image */
.guide-banner {
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E7ECF3;
  background: #EAF1FB;
}
.guide-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sub-sections within a chapter */
.guide-section {
  margin: 28px 0 0;
}
.guide-section h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: #0B0F19;
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.guide-section p,
.guide-chapter li {
  font-size: 16.5px;
  line-height: 1.7;
  color: #2A2F3C;
}
.guide-section p {
  margin: 0 0 14px;
}
.guide-chapter ul,
.guide-chapter ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.guide-chapter li {
  margin: 0 0 8px;
}
.guide-chapter a:not(.guide-related-card):not(.btn) {
  color: #1A76FF;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.guide-chapter a:not(.guide-related-card):not(.btn):hover {
  text-decoration-thickness: 2px;
}

/* Pull-quote callout */
.guide-callout {
  margin: 18px 0;
  padding: 18px 22px;
  background: #F5F8FC;
  border-left: 3px solid #3385FF;
  border-radius: 0 12px 12px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #2A2F3C;
}
.guide-callout strong { color: #0B0F19; }

/* Numbered checklist of action items */
.guide-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 22px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-checklist li {
  position: relative;
  padding: 12px 16px 12px 42px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #2A2F3C;
}
/* Bullet: bordered ring with a centered filled dot, drawn in one pseudo via radial-gradient */
.guide-checklist li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 1.5px solid #3385FF;
  background: radial-gradient(circle, #3385FF 0 3.5px, #fff 4px 100%);
  box-sizing: border-box;
}

/* Sources / further-reading list */
.guide-sources {
  margin: 18px 0 8px;
  padding: 14px 18px;
  background: #fff;
  border: 1px dashed #C9D7EA;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.guide-sources strong {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5B6172;
  margin: 0 0 6px;
}
.guide-sources ul {
  list-style: disc;
  padding-left: 18px !important;
  margin: 0 !important;
}
.guide-sources li { margin: 0 0 4px !important; font-size: 13.5px !important; }

/* Final CTA at bottom of guide */
.guide-final-cta {
  margin: 48px 0 32px;
  padding: 40px 32px;
  background: linear-gradient(135deg, #F5F8FC 0%, #EAF1FB 100%);
  border: 1px solid #DBE5F2;
  border-radius: 20px;
  text-align: center;
}
.guide-final-cta h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0B0F19;
  margin: 0 0 14px;
}
.guide-final-cta > p {
  max-width: 640px;
  margin: 0 auto 22px;
  font-size: 16px;
  line-height: 1.6;
  color: #2A2F3C;
}
.guide-final-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.guide-final-cta-meta {
  font-size: 13px;
  color: #5B6172;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .guide-hero h1 { font-size: 32px; }
  .guide-section h3 { font-size: 19px; }
  .guide-final-cta { padding: 28px 20px; }
}

/* ============================================================
   404 page
   ============================================================ */
.notfound-page {
  padding: 80px 16px;
  text-align: center;
}
.notfound-page h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 96px;
  font-weight: 800;
  color: #0B0F19;
  letter-spacing: -0.04em;
  margin: 0;
  line-height: 1;
}
.notfound-page h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 16px;
  color: #0B0F19;
}
.notfound-page p {
  font-size: 16px;
  color: #5B6172;
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.notfound-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.notfound-recent {
  max-width: 520px;
  margin: 24px auto 0;
  text-align: left;
}
.notfound-recent h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5B6172;
  margin: 0 0 12px;
  text-align: center;
}
.notfound-recent ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notfound-recent a {
  display: block;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 10px;
  color: #0B0F19;
  text-decoration: none;
  font-size: 15px;
}
.notfound-recent a:hover { border-color: #1A76FF; color: #1A76FF; }

/* ============================================================
   Legal / standards pages
   ============================================================ */
.legal-page { padding: 32px 0 64px; }
.legal-inner { max-width: 760px; }
.legal-page h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 40px;
  font-weight: 800;
  margin: 24px 0 8px;
  letter-spacing: -0.02em;
  color: #0B0F19;
}
.legal-page .legal-meta {
  color: #8A92A3;
  font-size: 14px;
  margin: 0 0 32px;
}
.legal-page h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0B0F19;
  margin: 32px 0 12px;
}
.legal-page p, .legal-page li {
  font-size: 16px;
  line-height: 1.7;
  color: #2A2F3C;
}
.legal-page p { margin: 0 0 16px; }
.legal-page ul, .legal-page ol {
  padding-left: 22px;
  margin: 0 0 18px;
}
.legal-page li { margin: 0 0 8px; }
.legal-page a { color: #1A76FF; text-decoration: underline; text-underline-offset: 3px; }
.legal-page strong { color: #0B0F19; }
@media (max-width: 640px) {
  .legal-page h1 { font-size: 30px; }
  .legal-page h2 { font-size: 19px; }
}

/* ============================================================
   Service pages — built on top of .legal-page
   ============================================================ */

/* Buttons keep correct text color on legal/service pages
   (overrides the default .legal-page a { color: #1A76FF; } rule) */
.legal-page a.btn,
.legal-page a.btn:hover,
.service-page a.btn,
.service-page a.btn:hover { text-decoration: none; }
.legal-page a.btn-primary,
.legal-page a.btn-primary:hover,
.service-page a.btn-primary,
.service-page a.btn-primary:hover { color: #fff; }
.legal-page a.btn-ghost,
.legal-page a.btn-ghost:hover,
.service-page a.btn-ghost,
.service-page a.btn-ghost:hover { color: #0B0F19; }
.legal-page a.btn-dark,
.legal-page a.btn-dark:hover,
.service-page a.btn-dark,
.service-page a.btn-dark:hover { color: #fff; }
.service-page .service-cta-box a.btn-primary,
.service-page .service-cta-box a.btn-primary:hover {
  background: #fff;
  color: #0B0F19;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Service hero icon — sits between breadcrumb and H1 */
.service-page .service-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}
.service-page .service-hero-ico {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3385FF, #4D94FF);
  box-shadow: 0 8px 22px rgba(51, 133, 255, .28);
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.service-page .service-hero-ico .ico-glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  z-index: 2;
}
.service-page .service-hero-ico .ico-ring {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(327deg, transparent 0%, transparent 35%, #000 65%, #000 100%);
  mask-image: linear-gradient(327deg, transparent 0%, transparent 35%, #000 65%, #000 100%);
  animation: spin 6s linear infinite;
}
.service-page .service-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26, 118, 255, 0.08);
  color: #1A76FF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.service-page h1 { margin-top: 0; }

/* Checkmark bullets for service-page top-level <ul> (excludes breadcrumb + related) */
.service-page .legal-inner > ul {
  list-style: none;
  padding-left: 0;
}
.service-page .legal-inner > ul > li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.service-page .legal-inner > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  background-color: #1A76FF;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 6px rgba(26, 118, 255, .25);
}

/* Numbered cards for process step <ol> */
.service-page .legal-inner > ol {
  list-style: none;
  padding-left: 0;
  counter-reset: step;
}
.service-page .legal-inner > ol > li {
  counter-increment: step;
  position: relative;
  padding: 16px 18px 16px 64px;
  margin-bottom: 12px;
  background: #FAFBFC;
  border: 1px solid #E6E8EE;
  border-radius: 12px;
  min-height: 40px;
}
.service-page .legal-inner > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0B0F19 0%, #1A76FF 100%);
  color: white;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 10px rgba(26, 118, 255, .22);
}

.service-page .service-lead {
  font-size: 18px;
  line-height: 1.65;
  color: #2A2F3C;
  margin: 0 0 24px;
}
.service-page .service-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 40px;
}
.service-page .service-cta-row .btn { font-size: 15px; }
.service-page .service-faq details {
  border: 1px solid #E6E8EE;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 10px;
  background: #FAFBFC;
}
.service-page .service-faq details[open] { background: #fff; }
.service-page .service-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #0B0F19;
  font-size: 16px;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.service-page .service-faq summary::-webkit-details-marker { display: none; }
.service-page .service-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 22px;
  color: #1A76FF;
  font-weight: 400;
  line-height: 1;
}
.service-page .service-faq details[open] summary::after { content: '−'; }
.service-page .service-faq details > p {
  margin: 12px 0 0;
  color: #2A2F3C;
  line-height: 1.7;
}
.service-page .service-cta-box {
  margin-top: 56px;
  padding: 36px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0B0F19 0%, #1A76FF 100%);
  color: #fff;
  text-align: center;
}
.service-page .service-cta-box h2 {
  color: #fff;
  font-size: 26px;
  margin: 0 0 10px;
}
.service-page .service-cta-box p {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  margin: 0 0 22px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.service-page .service-cta-box .btn { font-size: 15px; }
.service-page .related-services {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #E6E8EE;
}
.service-page .related-services h2 { margin-top: 0; }
.service-page .related-services ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.service-page .related-services li { margin: 0; }
.service-page .related-services a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 18px 20px;
  box-sizing: border-box;
  border: 1px solid #E6E8EE;
  border-radius: 12px;
  text-decoration: none;
  color: #0B0F19;
  font-weight: 600;
  font-size: 15px;
  background: #FAFBFC;
  transition: all 0.18s ease;
}
.service-page .related-services .rel-svc-name {
  display: flex;
  align-items: center;
  min-height: 36px;
  line-height: 1.25;
}
.service-page .related-services .rel-svc-ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #3385FF 0%, #4D94FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(26, 118, 255, .22);
  transition: transform 0.18s ease;
}
.service-page .related-services .rel-svc-ico img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.service-page .related-services a:hover {
  border-color: #1A76FF;
  background: #fff;
  color: #1A76FF;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26, 118, 255, .12);
}
.service-page .related-services a:hover .rel-svc-ico { transform: scale(1.05); }
@media (max-width: 600px) {
  .service-page .related-services ul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service-page .service-cta-box { padding: 28px 20px; }
  .service-page .service-cta-box h2 { font-size: 22px; }
}


/* ============================================================
   YouTube Strategy & Launch Package page
   ============================================================ */
.launch-package-page {
  padding-top: 24px;
}

.launch-package-page .legal-inner {
  max-width: 1120px;
}

.launch-package-page .bp-breadcrumb {
  margin-bottom: 22px;
}

.launch-package-page h1 {
  font-size: clamp(42px, 6vw, 76px);
  line-height: .96;
  letter-spacing: -0.045em;
  margin: 0 0 20px;
  max-width: 720px;
}

.launch-package-page h1 span {
  color: var(--blue-60);
}

.launch-package-page .service-lead {
  max-width: 660px;
  margin-bottom: 28px;
}

.launch-hero {
  position: relative;
  padding: 22px 0 54px;
}

.launch-hero::before {
  content: '';
  position: absolute;
  inset: -80px -8vw auto auto;
  width: min(620px, 70vw);
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(51, 133, 255, .16), rgba(51, 133, 255, 0) 68%);
  pointer-events: none;
  z-index: -1;
}

.launch-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .78fr);
  gap: 48px;
  align-items: center;
}

.launch-hero-copy .service-hero {
  margin-top: 0;
}

.launch-hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #DDE7F5;
  background: #0B0F19;
  box-shadow: 0 28px 70px rgba(20, 40, 90, .14);
}

.launch-hero-visual img {
  width: 100%;
  height: auto;
}

.launch-visual-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .68);
  box-shadow: 0 10px 28px rgba(11, 15, 25, .16);
}

.launch-visual-caption strong,
.launch-visual-caption span {
  display: block;
}

.launch-visual-caption strong {
  color: #0B0F19;
  font-weight: 700;
  line-height: 1.25;
}

.launch-visual-caption span {
  color: #5C6370;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 4px;
}

.launch-proof-grid,
.launch-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.launch-proof-grid {
  margin-top: 36px;
}

.launch-proof-grid div,
.launch-mini-stats div {
  padding: 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #E6E8EE;
  box-shadow: var(--shadow-sm);
}

.launch-proof-grid strong,
.launch-mini-stats strong {
  display: block;
  color: #0B0F19;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.launch-proof-grid span,
.launch-mini-stats span {
  display: block;
  margin-top: 8px;
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.launch-section {
  padding: 58px 0;
  border-top: 1px solid #E6E8EE;
}

.launch-section-head {
  max-width: 680px;
  margin-bottom: 28px;
}

.launch-section-head span,
.launch-final-cta > span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #1A76FF;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.launch-section-head h2 {
  margin-bottom: 12px;
}

.launch-section-head p {
  color: #5C6370;
  font-size: 17px;
  line-height: 1.65;
}

.launch-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.launch-grid {
  display: grid;
  gap: 16px;
}

.launch-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.launch-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.launch-card,
.launch-roi-card,
.launch-fit-card,
.launch-before-after article,
.launch-testimonial-grid article,
.launch-price-card {
  border: 1px solid #E6E8EE;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.launch-card,
.launch-roi-card {
  padding: 24px;
}

.launch-card-alert {
  background: linear-gradient(180deg, #fff, #FFF8F8);
  border-color: #F3D3D3;
}

.launch-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--blue-95);
  color: #1A76FF;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.launch-card h3,
.launch-roi-card h3,
.launch-fit-card h3,
.launch-before-after h3,
.launch-testimonial-grid cite {
  color: #0B0F19;
}

.launch-card p,
.launch-roi-card p {
  margin-bottom: 0;
}

.launch-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.launch-pain-grid div {
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #E6E8EE;
  background: #FAFBFC;
  color: #2A2F3C;
  font-weight: 650;
  line-height: 1.25;
}

.launch-roi-card {
  background: linear-gradient(180deg, var(--blue-98), #fff);
}

.launch-roi-card strong {
  display: block;
  color: #1A76FF;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: clamp(44px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}

.launch-timeline {
  display: grid;
  gap: 16px;
}

.launch-timeline article {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E6E8EE;
  background: #fff;
}

.launch-timeline article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(135deg, #0B0F19, #1A76FF);
  color: #fff;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.launch-timeline h3 {
  margin: 0 0 6px;
}

.launch-timeline p {
  margin-bottom: 10px;
}

.launch-timeline small {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26, 118, 255, .08);
  color: #1A76FF;
  font-size: 13px;
  font-weight: 650;
}

.launch-callout {
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid #BFD6FF;
  background: linear-gradient(135deg, var(--blue-97), #fff);
}

.launch-callout p {
  margin: 6px 0 0;
}

.launch-fit-grid,
.launch-before-after,
.launch-about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.launch-fit-card {
  padding: 26px;
}

.launch-fit-card ul,
.launch-before-after ul,
.launch-price-card ul {
  list-style: none;
  padding: 0;
}

.launch-fit-card li,
.launch-before-after li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: #2A2F3C;
}

.launch-fit-card li::before,
.launch-before-after li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.launch-fit-yes {
  background: linear-gradient(180deg, #F6FFF9, #fff);
  border-color: #CDEED8;
}

.launch-fit-no {
  background: linear-gradient(180deg, #FFF7F7, #fff);
  border-color: #F3D3D3;
}

.launch-fit-yes li::before,
.launch-before-after article:last-child li::before {
  content: '+';
  color: #17944C;
}

.launch-fit-no li::before,
.launch-before-after article:first-child li::before {
  content: '-';
  color: #D33B3B;
}

.launch-before-after {
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: stretch;
}

.launch-before-after article {
  padding: 26px;
}

.launch-before-after article:first-child {
  border-color: #F3D3D3;
}

.launch-before-after article:last-child {
  border-color: #CDEED8;
}

.launch-ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A76FF;
  font-size: 32px;
  font-weight: 800;
}

.launch-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.launch-testimonial-grid article {
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.launch-stars {
  color: #F5A524;
  letter-spacing: 2px;
  font-size: 13px;
  margin-bottom: 12px;
}

.launch-testimonial-grid blockquote {
  margin: 0 0 18px;
  color: #2A2F3C;
  font-size: 15px;
  line-height: 1.65;
  flex: 1;
}

.launch-testimonial-grid cite {
  display: block;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.launch-testimonial-grid cite span {
  display: block;
  color: #7A8493;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}

.launch-about {
  align-items: center;
}

.launch-about-photo {
  overflow: hidden;
  align-self: stretch;
  border-radius: 18px;
  border: 1px solid #E6E8EE;
  background: linear-gradient(135deg, var(--blue-95), #fff);
}

.launch-about-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center bottom;
}

.launch-mini-stats {
  margin-top: 22px;
}

.launch-mini-stats div {
  padding: 16px;
}

.launch-mini-stats strong {
  font-size: 28px;
}

.launch-pricing {
  padding-bottom: 70px;
}

.launch-price-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 34px;
  text-align: center;
  background: linear-gradient(180deg, #fff, var(--blue-98));
  border-color: #BFD6FF;
  box-shadow: 0 24px 64px rgba(20, 40, 90, .10);
}

.launch-price-card > span {
  display: block;
  color: #6B7280;
  font-size: 14px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.launch-price-card > strong {
  display: block;
  color: #0B0F19;
  font-family: 'Instrument Sans', 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: clamp(58px, 8vw, 86px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 8px 0 10px;
}

.launch-price-card ul {
  margin: 24px 0;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #E6E8EE;
}

.launch-price-card li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #EEF0F4;
  color: #2A2F3C;
  text-align: left;
}

.launch-price-card li:last-child {
  border-bottom: 0;
  font-weight: 800;
}

.launch-price-card b {
  color: #1A76FF;
  white-space: nowrap;
}

.launch-price-card small {
  display: block;
  color: #7A8493;
  margin-bottom: 18px;
}

.launch-price-card .btn {
  width: 100%;
}

.launch-faq {
  display: grid;
  gap: 10px;
}

.launch-final-cta {
  margin-top: 30px;
}

.launch-final-cta > span {
  color: #CCE1FF;
}

@media (max-width: 1040px) {
  .launch-hero-grid,
  .launch-about {
    grid-template-columns: 1fr;
  }

  .launch-testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .launch-grid-2,
  .launch-grid-3,
  .launch-fit-grid,
  .launch-proof-grid,
  .launch-mini-stats,
  .launch-pain-grid {
    grid-template-columns: 1fr;
  }

  .launch-before-after {
    grid-template-columns: 1fr;
  }

  .launch-ba-arrow {
    min-height: 44px;
    transform: rotate(90deg);
  }

  .launch-hero-visual {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .launch-package-page h1 {
    font-size: 40px;
    line-height: 1.02;
  }

  .launch-hero {
    padding-bottom: 38px;
  }

  .launch-section {
    padding: 42px 0;
  }

  .launch-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .launch-timeline article {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .launch-visual-caption {
    position: static;
    border-radius: 0;
    border-width: 1px 0 0;
  }

  .launch-price-card {
    padding: 26px 20px;
  }

  .launch-price-card li {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* ============================================================
   Blog post — Ready to stop editing & start scaling section
   ============================================================ */
.blog-scale {
  padding-top: 32px;
  text-align: center;
}

.blog-scale .cta-stage {
  margin-top: 0;
}

.scale-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: #0B0F19;
  margin: 8px 0 18px;
}

.scale-sub {
  max-width: 580px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.6;
  color: #5B6172;
}

.scale-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 32px;
}

.scale-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: #0B0F19;
  box-shadow: 0 2px 6px rgba(15, 25, 50, .03);
}

.scale-chip img {
  width: 18px;
  height: 18px;
}

.scale-foot {
  font-size: 16px;
  color: #5B6172;
  margin: 0 auto 24px;
  max-width: 540px;
  line-height: 1.55;
}

.scale-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.scale-btn-primary,
.scale-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.scale-btn-primary img,
.scale-btn-ghost img {
  width: 18px;
  height: 18px;
}

.scale-proven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  max-width: 1040px;
  margin: 32px auto 0;
  align-items: center;
  text-align: left;
}

.scale-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.scale-stat {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 2px 8px rgba(15, 25, 50, .04);
}

.scale-stat-num {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 38px;
  color: #0B0F19;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 18px;
}

.scale-stat-num span {
  color: #1A76FF;
}

.scale-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #5B6172;
  font-weight: 500;
}

.scale-stat-label img {
  width: 18px;
  height: 18px;
}

.scale-proof .pill {
  margin-bottom: 12px;
}

.scale-proof h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #0B0F19;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.scale-proof p {
  color: #5B6172;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.scale-proof-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .scale-proven {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }
  .scale-proof-actions { justify-content: center; }
  .scale-title { font-size: 30px; }
  .scale-proof h3 { font-size: 28px; }
}

@media (max-width: 480px) {
  .scale-stats { grid-template-columns: 1fr; }
}

/* ===================== Team page ===================== */
.team-hero {
  padding: 24px 0 48px;
  text-align: center;
}
.team-hero .pill { margin-bottom: 14px; }
.team-hero h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #0B0F19;
}
.team-hero p {
  color: #5B6172;
  font-size: 18px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}
.team-hero .section-head {
  margin-bottom: 24px;
}
.team-hero .section-head h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  color: #0B0F19;
  position: relative;
  z-index: 1;
}
.team-hero .section-head p {
  color: #5B6172;
  font-size: 18px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) {
  .team-hero .section-head h1 { font-size: 38px; }
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 36px auto 0;
  max-width: 880px;
}
.team-stat-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 20px 22px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-image: url('assets/team/decor-bg.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.team-stat-card strong {
  display: block;
  position: relative;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #0B0F19;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.team-stat-card span {
  display: block;
  position: relative;
  color: #5B6172;
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .team-stats { grid-template-columns: 1fr; max-width: 420px; }
}

.team-leader {
  margin: 32px 0 56px;
  background: linear-gradient(180deg, #EAF2FB, #F8FBFE);
  border: 1px solid #DEE6F0;
  border-radius: 28px;
  padding: 36px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
}
.team-leader .leader-photo {
  width: 220px;
  height: 220px;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
.team-leader .leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-leader-meta { display: flex; flex-direction: column; gap: 12px; }
.team-leader-meta .role-pill {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(51, 133, 255, .1);
  color: #3385FF;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}
.team-leader-meta h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  margin: 0;
  color: #0B0F19;
  letter-spacing: -0.02em;
}
.team-leader-meta p {
  color: #5B6172;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.team-card .team-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.team-card-photo {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: #F0F4FA;
  flex-shrink: 0;
}
.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.team-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 2px;
  color: #0B0F19;
  letter-spacing: -0.01em;
}
.team-card .team-role {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #3385FF;
  margin: 0 0 8px;
}
.team-card p {
  color: #5B6172;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 880px) {
  .team-hero { padding: 40px 0 24px; }
  .team-hero h1 { font-size: 38px; }
  .team-leader {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px;
  }
  .team-leader .leader-photo { width: 180px; height: 180px; margin: 0 auto; }
  .team-leader-meta { align-items: center; }
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .team-card { padding: 18px; gap: 14px; }
  .team-card .team-card-photo { flex: 0 0 72px; }
  .team-card-photo { width: 72px; height: 72px; }
}

/* ===================== Trust & Security page ===================== */
.trust-hero {
  padding: 64px 0 32px;
  text-align: center;
}
.trust-hero h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  color: #0B0F19;
}
.trust-hero p {
  color: #5B6172;
  font-size: 18px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 32px 0 48px;
}
.trust-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.trust-card .trust-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(51, 133, 255, .1);
  color: #3385FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 800;
}
.trust-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 10px;
  color: #0B0F19;
  letter-spacing: -0.01em;
}
.trust-card p {
  color: #5B6172;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 8px;
}
.trust-card ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: #5B6172;
  font-size: 14px;
  line-height: 1.7;
}
/* Team bench / extended contractors */
.team-bench {
  margin: 0 0 32px;
}
.team-bench-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.team-bench-card .bench-num {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  color: #3385FF;
  letter-spacing: -0.03em;
  padding: 0 14px 0 0;
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.team-bench-card .bench-copy h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #0B0F19;
  margin: 0 0 10px;
}
.team-bench-card .bench-copy p {
  color: #5B6172;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.team-bench-card .bench-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.team-bench-card .bench-tags li {
  background: #F5F8FC;
  border: 1px solid var(--border-soft);
  color: #2A2F3A;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
}
@media (max-width: 720px) {
  .team-bench-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
  }
  .team-bench-card .bench-num {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 12px;
    justify-content: center;
    font-size: 56px;
  }
  .team-bench-card .bench-tags { justify-content: center; }
}

.trust-cta {
  background: linear-gradient(180deg, #EAF2FB, #F8FBFE);
  border: 1px solid #DEE6F0;
  border-radius: 24px;
  padding: 36px;
  text-align: center;
  margin-bottom: 56px;
}
.trust-cta h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #0B0F19;
}
.trust-cta p {
  color: #5B6172;
  font-size: 16px;
  margin: 0 0 18px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 880px) {
  .trust-hero h1 { font-size: 36px; }
  .trust-grid { grid-template-columns: 1fr; }
}

/* ===================== Compare pages ===================== */
.compare-hero {
  position: relative;
  padding: 140px 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compare-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  width: 680px;
  height: 300px;
  transform: translateX(-50%);
  background: url('/assets/section-arcs/arcs.svg') center bottom / contain no-repeat;
  pointer-events: none;
  opacity: .85;
  z-index: 0;
}
.compare-hero > * {
  position: relative;
  z-index: 1;
}
.compare-hero h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  color: #0B0F19;
}
.compare-hero p {
  color: #5B6172;
  font-size: 18px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

.compare-logo-cloud,
.compare-brand-lockup,
.compare-scorecard,
.compare-data-section {
  position: relative;
  z-index: 1;
}
.compare-body main > .container {
  overflow-x: clip;
}
.compare-logo-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 36px;
}
.compare-logo-cloud span,
.compare-brand-tile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #E3EAF4;
  border-radius: 999px;
  color: #202635;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(23, 40, 68, .06);
}
.compare-logo-cloud span {
  padding: 9px 13px;
}
.compare-logo-cloud img,
.compare-company-cell img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;
}
.compare-brand-lockup {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 4px 0 24px;
}
.compare-brand-tile {
  min-width: 184px;
  min-height: 68px;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 15px;
}
.compare-brand-ms img {
  width: 92px;
  height: auto;
}
.compare-brand-logo,
.compare-mini-logo-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare-brand-logo img,
.compare-mini-logo-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.compare-mini-logo-row {
  gap: 8px;
}
.compare-logo-fallback {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EAF2FF;
  color: #1A76FF;
  font-weight: 800;
}
.compare-versus {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0B0F19;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(11, 15, 25, .16);
}
.compare-scorecard,
.compare-data-section {
  margin: 24px 0 32px;
  padding: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
  border: 1px solid #E0E8F3;
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(24, 43, 77, .07);
}
.compare-scorecard-head,
.compare-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.compare-score-eyebrow {
  display: inline-flex;
  align-items: center;
  color: #1A76FF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.compare-scorecard-head p,
.compare-section-head p,
.compare-research-note,
.compare-source-note {
  margin: 0;
  color: #5B6172;
  font-size: 14px;
  line-height: 1.55;
}
.compare-section-head h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0B0F19;
  margin: 0;
}
.compare-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.compare-metric {
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: 14px;
  padding: 16px;
  min-height: 108px;
}
.compare-metric span {
  display: block;
  color: #7A8394;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.compare-metric strong {
  color: #0B0F19;
  font-size: 15px;
  line-height: 1.35;
}
.compare-metric ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #0B0F19;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
.compare-research-note {
  margin-top: 14px;
}
.compare-data-wrap {
  margin: 0;
}
.compare-data-table {
  min-width: 1020px;
}
.compare-company-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.compare-source-note {
  margin-top: 12px;
  font-size: 13px;
}

.compare-methodology,
.compare-deep-dive,
.compare-source-panel {
  position: relative;
  z-index: 1;
  margin: 28px 0 34px;
}
.compare-methodology {
  display: grid;
  grid-template-columns: 1.05fr 1.95fr;
  gap: 18px;
  align-items: stretch;
}
.compare-methodology-intro,
.compare-deep-dive,
.compare-source-panel {
  background: #fff;
  border: 1px solid #E0E8F3;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(24, 43, 77, .07);
}
.compare-methodology-intro {
  padding: 24px;
}
.compare-methodology-intro h2,
.compare-deep-dive h2,
.compare-source-panel h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0B0F19;
  margin: 0 0 10px;
}
.compare-methodology-intro p,
.compare-deep-dive p,
.compare-source-panel p {
  color: #5B6172;
  line-height: 1.65;
  margin: 0;
}
.compare-methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.compare-method-card,
.compare-brief-card,
.compare-factor-card,
.compare-verdict-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
  border: 1px solid #E6ECF5;
  border-radius: 18px;
  padding: 18px;
}
.compare-method-card span,
.compare-brief-card span,
.compare-factor-card span,
.compare-verdict-card span,
.compare-source-panel span {
  display: inline-flex;
  color: #1A76FF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.compare-method-card strong,
.compare-brief-card strong,
.compare-factor-card strong,
.compare-verdict-card strong {
  display: block;
  color: #0B0F19;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 7px;
}
.compare-method-card p,
.compare-brief-card p,
.compare-factor-card p,
.compare-verdict-card p {
  color: #5B6172;
  font-size: 14px;
  line-height: 1.55;
}
.compare-deep-dive {
  padding: 26px;
}
.compare-deep-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1A76FF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.compare-brief-grid,
.compare-factor-grid,
.compare-verdict-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.compare-brief-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.compare-factor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compare-verdict-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compare-brief-card ul,
.compare-source-list {
  margin: 0;
  padding-left: 18px;
  color: #5B6172;
  font-size: 14px;
  line-height: 1.7;
}
.compare-factor-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: start;
}
.compare-factor-card span {
  margin: 0;
}
.compare-fit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.compare-fit-tags span {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1A5FCC;
  border: 1px solid #D5E7FF;
  font-size: 12px;
  font-weight: 800;
}
.compare-source-panel {
  padding: 22px 24px;
}
.compare-source-panel a {
  color: #1A76FF;
  font-weight: 700;
  text-decoration: none;
}
.compare-source-panel a:hover {
  text-decoration: underline;
}
.compare-source-list {
  padding-left: 20px;
}
.compare-verdict-card strong {
  font-size: 18px;
}

.compare-table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: auto;
  margin: 32px 0;
  box-shadow: var(--shadow-sm);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 720px;
}
.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.compare-table thead th {
  background: #F5F8FC;
  font-weight: 700;
  color: #0B0F19;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.compare-table tbody th {
  font-weight: 600;
  color: #0B0F19;
  background: #FAFCFF;
  white-space: nowrap;
}
.compare-table .ms-col {
  background: rgba(51, 133, 255, .04);
  color: #0B0F19;
  font-weight: 600;
}
.compare-table .yes { color: #1F9D55; font-weight: 700; }
.compare-table .no { color: #C53030; font-weight: 700; }
.compare-table .partial { color: #B7791F; font-weight: 700; }

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 56px;
}
.compare-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.compare-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #C9D7EA;
}
.compare-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: #0B0F19;
}
.compare-card p {
  color: #5B6172;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.compare-card .compare-arrow {
  color: #3385FF;
  font-weight: 600;
  font-size: 14px;
  margin-top: auto;
}

.compare-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 24px 0 32px;
}
.compare-summary .compare-pros,
.compare-summary .compare-cons {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.compare-summary h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 12px;
  color: #0B0F19;
}
.compare-summary ul {
  margin: 0;
  padding-left: 20px;
  color: #5B6172;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 880px) {
  .compare-hero h1 { font-size: 34px; }
  .compare-brand-lockup {
    gap: 10px;
  }
  .compare-brand-tile {
    min-width: 0;
    flex: 1 1 0;
    padding: 12px;
  }
  .compare-brand-ms img {
    width: 76px;
  }
  .compare-scorecard,
  .compare-data-section {
    padding: 18px;
  }
  .compare-scorecard-head,
  .compare-section-head {
    display: block;
  }
  .compare-scorecard-head p,
  .compare-section-head p {
    margin-top: 8px;
  }
  .compare-metric-grid {
    grid-template-columns: 1fr;
  }
  .compare-methodology,
  .compare-brief-grid,
  .compare-factor-grid,
  .compare-verdict-grid {
    grid-template-columns: 1fr;
  }
  .compare-factor-card {
    grid-template-columns: 1fr;
  }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-summary { grid-template-columns: 1fr; }
}
@media (min-width: 881px) and (max-width: 1100px) {
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== Featured testimonial (homepage subtle card) ===================== */
.featured-testimonial {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  margin: 18px auto 22px;
  max-width: 760px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  align-items: center;
}
.featured-testimonial .ft-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3385FF, #80B3FF);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(51, 133, 255, .2);
  justify-self: center;
}
@media (max-width: 600px) {
  .featured-testimonial { grid-template-columns: 1fr; padding: 24px; text-align: center; }
  .featured-testimonial .ft-avatar { margin: 0 auto; }
}
.featured-testimonial-cta {
  margin: 14px 0 0;
}
.featured-testimonial .ft-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A76FF;
  text-decoration: none;
  padding: 8px 14px;
  background: #F0F6FF;
  border: 1px solid #C9DDF8;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.featured-testimonial .ft-cta-link:hover {
  background: #E2EEFE;
  border-color: #A8C9F2;
  transform: translateY(-1px);
}
.featured-testimonial .ft-cta-link [data-icon] { width: 14px; height: 14px; display: inline-flex; }
.featured-testimonial .ft-cta-link [data-icon] svg { width: 100%; height: 100%; }

/* Video testimonial cell wrapper (card + CTA underneath) */
.video-testimonial-cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.video-testimonial-cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1A76FF;
  text-decoration: none;
  padding: 8px 14px;
  background: #F0F6FF;
  border: 1px solid #C9DDF8;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.video-testimonial-cta:hover {
  background: #E2EEFE;
  border-color: #A8C9F2;
  transform: translateY(-1px);
}
.video-testimonial-cta [data-icon] { width: 14px; height: 14px; display: inline-flex; }
.video-testimonial-cta [data-icon] svg { width: 100%; height: 100%; }
.featured-testimonial .ft-avatar.ft-avatar-photo {
  background: #F0F4FA;
  padding: 0;
}
.featured-testimonial .ft-avatar.ft-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-testimonial .ft-stars {
  color: #F5A623;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.featured-testimonial blockquote {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #2A2F3A;
  font-style: italic;
}
.featured-testimonial cite {
  font-style: normal;
  font-size: 13px;
  color: #5B6172;
}
.featured-testimonial cite strong { color: #0B0F19; font-weight: 700; }
.featured-testimonial .ft-link {
  color: #3385FF;
  text-decoration: none;
  font-weight: 600;
}
.featured-testimonial .ft-link:hover { text-decoration: underline; }

/* Review widgets — Fiverr & Google */
.reviews-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin: 22px auto 0;
  max-width: 720px;
}
.review-widget {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  min-width: 280px;
  flex: 1 1 280px;
  max-width: 340px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.review-widget:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #C9D7EA;
}
.review-widget .rw-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F8FC;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.review-widget .rw-logo svg {
  width: 28px;
  height: 28px;
}
.review-widget .rw-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.review-widget .rw-logo-fiverr {
  background: #fff;
  border: 1px solid var(--border-soft);
}
.review-widget .rw-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-widget .rw-stars {
  color: #F5A623;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}
.review-widget .rw-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0B0F19;
  letter-spacing: -0.01em;
}
.review-widget .rw-sub {
  font-size: 12.5px;
  color: #5B6172;
}
@media (max-width: 600px) {
  .review-widget { min-width: 100%; max-width: 100%; }
}

/* Video testimonials cards */
.video-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 18px 0 0;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .video-testimonials {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}
.video-test-card {
  position: relative;
  background: #0B0F19;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.video-test-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 25, 50, .18);
}

.video-test-placeholder .play-circle {
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.video-test-card:hover .play-circle {
  transform: scale(1.08);
  background: rgba(255, 255, 255, .32);
  border-color: rgba(255, 255, 255, .55);
}
.video-test-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-test-card video[src],
.video-test-card video.is-playing {
  z-index: 1;
}

/* Featured channel testimonial (third-party YouTube embed) */
.featured-channel-testimonial {
  margin: 36px auto 0;
  max-width: 720px;
  text-align: center;
}
.fct-header { margin: 0 0 18px; }
.fct-header .pill { margin: 0 0 12px; }
.fct-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -.01em;
}
.fct-header p {
  color: var(--muted);
  margin: 0 auto;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.5;
}
.fct-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0B0F19;
  box-shadow: 0 18px 40px rgba(15, 25, 50, .15);
}
.fct-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.fct-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.fct-link:hover { text-decoration: underline; }
.video-test-card video::-webkit-media-controls-fullscreen-button,
.case-study-testimonial-video video::-webkit-media-controls-fullscreen-button {
  display: none;
}
.video-test-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a3a6c 0%, #0B0F19 100%);
  cursor: pointer;
  transition: opacity .35s ease;
}
.video-test-card.is-active .video-test-placeholder,
.case-study-testimonial-video.is-active .video-test-placeholder {
  opacity: 0;
  pointer-events: none;
}
.video-test-card.is-active video,
.case-study-testimonial-video.is-active video {
  position: relative;
  z-index: 1;
}
.video-test-placeholder .play-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 2px solid rgba(255,255,255,.3);
}
.video-test-placeholder .play-circle::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.video-test-placeholder strong {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}
.video-test-placeholder span {
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
@media (max-width: 700px) {
  .featured-testimonial {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 24px;
    gap: 18px;
  }
  .featured-testimonial .ft-avatar {
    width: 96px;
    height: 96px;
  }
  .video-testimonials { grid-template-columns: 1fr; }
}

/* ===================== Turnaround / SLA section ===================== */
.sla-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.sla-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sla-card .sla-num {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #3385FF;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sla-card .sla-num.sla-infinity {
  font-size: 64px;
  line-height: 0.85;
  margin: 0 0 4px;
}
.sla-card h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 4px 0 0;
  color: #0B0F19;
}
.sla-card p {
  color: #5B6172;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 980px) {
  .sla-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sla-grid { grid-template-columns: 1fr; }
}

/* ===================== Cal.com booking section ===================== */
.book-call-section {
  background: linear-gradient(180deg, #EAF2FB, #F8FBFE);
}
.book-call-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 44px 40px;
  box-shadow: 0 12px 32px rgba(15, 25, 50, .06);
}
.book-call-card .pill {
  margin: 0 auto 14px;
}
.book-call-card h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #0B0F19;
}
.book-call-card > p {
  color: #5B6172;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 auto 22px;
  max-width: 560px;
}
.book-call-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.book-call-bullets li {
  font-size: 14px;
  color: #2A2F3A;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.book-call-bullets li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3385FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8L7 11.5L13 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.book-call-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .book-call-card { padding: 32px 24px; }
  .book-call-card h2 { font-size: 28px; }
}

/* ==================================================================
   Hover micro-anims for: value cards, stats cards, press citations,
   SLA cards, service cards. All gated under no-preference so reduce
   users see the static baseline.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Value cards — soft lift + icon scale + border tint */
  .value-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease,
                border-color .3s ease;
  }
  .value-ico {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 25, 50, .08);
    border-color: #C9D9F2;
  }
  .value-card:hover .value-ico {
    transform: scale(1.12) rotate(-3deg);
  }

  /* Stats cards — lift + icon nudge */
  .stat-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease;
  }
  .stat-label [data-icon] {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 25, 50, .08);
  }
  .stat-card:hover .stat-label [data-icon] {
    transform: translateX(2px) scale(1.1);
  }

  /* Press citations — lift + slide right + accent border thickens */
  .author-press {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease,
                border-left-width .25s ease,
                padding-left .25s ease;
  }
  .author-press:hover {
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(15, 25, 50, .08);
    border-left-width: 6px;
    padding-left: 22px; /* compensate for thicker border so content doesn't shift */
  }

  /* SLA cards — lift + number glow */
  .sla-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease,
                border-color .3s ease;
  }
  .sla-card .sla-num {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                text-shadow .35s ease;
  }
  .sla-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(51, 133, 255, .14);
    border-color: #C9D9F2;
  }
  .sla-card:hover .sla-num {
    transform: scale(1.06);
    text-shadow: 0 6px 18px rgba(51, 133, 255, .35);
  }

  /* Service cards — soft lift + icon nudge up (no 3D tilt this time) */
  .service-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s ease,
                border-color .3s ease;
  }
  .service-card .ico-svc {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 25, 50, .08);
    border-color: #C9D9F2;
  }
  .service-card:hover .ico-svc {
    transform: translateY(-2px) scale(1.08);
  }
}

/* ==================================================================
   Micro-animations (reveal-on-scroll handled inline in app.js).
   This block: sticky header shrink, image zoom, underline-draw,
   button shine sweep. All disabled under prefers-reduced-motion.
   ================================================================== */

/* Sticky header pill — tightens + stronger shadow on scroll */
.nav-wrap {
  transition: padding-top .25s ease;
}
.nav-wrap.is-scrolled {
  padding-top: 10px;
}
.nav {
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.nav-wrap.is-scrolled .nav {
  padding: 6px 6px 6px 14px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(15, 25, 50, .08);
}

/* Image zoom on thumbnail hover (home featured projects + portfolio cards) */
.project-thumb img {
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.project-card:hover .project-thumb img,
.pf-card-bare:hover .project-thumb img {
  transform: scale(1.04);
}

/* Underline-draw on inline content links — scoped so nav/CTA buttons are untouched */
.legal-page p a:not(.btn),
.legal-page li a:not(.btn),
.faq-a a:not(.btn),
.about-card p a:not(.btn),
.author-press-quote a:not(.btn),
.blog-content a:not(.btn) {
  background-image: linear-gradient(currentColor 0 0);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s cubic-bezier(.22, 1, .36, 1);
  text-decoration: none;
  padding-bottom: 1px;
}
.legal-page p a:not(.btn):hover,
.legal-page li a:not(.btn):hover,
.faq-a a:not(.btn):hover,
.about-card p a:not(.btn):hover,
.author-press-quote a:not(.btn):hover,
.blog-content a:not(.btn):hover {
  background-size: 100% 1px;
}
.legal-page.service-page .related-services a:not(.btn) {
  padding: 18px 20px;
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrap,
  .nav,
  .project-thumb img,
  .legal-page p a:not(.btn),
  .legal-page li a:not(.btn),
  .faq-a a:not(.btn),
  .about-card p a:not(.btn),
  .author-press-quote a:not(.btn),
  .blog-content a:not(.btn) {
    transition: none !important;
  }
  .project-card:hover .project-thumb img,
  .pf-card-bare:hover .project-thumb img {
    transform: none;
  }
}

/* Scroll progress bar — fixed top, fills as the page scrolls */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-60, #3385FF), #7AB3FF);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

/* Hero word-reveal: each word slides up + fades in, staggered via inline delay */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.word-reveal.is-shown {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .word-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scroll-progress {
    display: none;
  }
}

/* ==================================================================
   TIER 1: cursor follower, 3D tilt, gradient mesh drift, h2 underline
   ================================================================== */

/* Cursor trail — full-screen SVG overlay that follows the cursor with a fading line */
.ms-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
  overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
  .ms-trail { display: block; }
}
.ms-trail line {
  stroke: var(--blue-60, #3385FF);
  fill: none;
}

/* Hero gradient mesh drift — slow ambient motion on the existing flares */
.hero-flare-tl {
  animation: heroFlareDriftL 24s ease-in-out infinite alternate;
}
.hero-flare-tr {
  animation: heroFlareDriftR 28s ease-in-out infinite alternate;
}
@keyframes heroFlareDriftL {
  from { transform: scaleX(-1) translate(0, 0) scale(1); opacity: .85; }
  to   { transform: scaleX(-1) translate(60px, 36px) scale(1.08); opacity: 1; }
}
@keyframes heroFlareDriftR {
  from { transform: translate(0, 0) scale(1); opacity: .85; }
  to   { transform: translate(-50px, 42px) scale(1.06); opacity: 1; }
}

/* Section H2 underline draw — line grows under H2 when section enters view */
.section-head h2 {
  position: relative;
}
.section-head h2[data-reveal]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  height: 2px;
  width: 0;
  background: var(--blue-60);
  transform: translateX(-50%);
  transition: width .8s cubic-bezier(.22, 1, .36, 1) .35s;
  border-radius: 2px;
}
.section-head h2[data-reveal].is-revealed::after {
  width: 56px;
}

/* Generic scroll-reveal — fade + slight up on enter.
   Apply to long-content sections (case study sections, guide chapters, blog post bodies)
   so reading-flow pages don't feel static. The H2 underline rule above takes priority on h2s. */
[data-reveal]:not(.section-head h2) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
[data-reveal]:not(.section-head h2).is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Lazy-loaded images fade in once decoded. Gated by body.js-loaded so non-JS users
   never see invisible images. */
.js-loaded img[loading="lazy"] {
  opacity: 0;
  transition: opacity .4s ease;
}
.js-loaded img[loading="lazy"].is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal]:not(.section-head h2) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-loaded img[loading="lazy"] {
    opacity: 1;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-trail,
  .hero-flare-tl,
  .hero-flare-tr {
    animation: none !important;
    transition: none !important;
  }
  .ms-trail { display: none; }
  .section-head h2[data-reveal]::after {
    width: 0 !important;
    transition: none;
  }
}

/* ============================================================================
   New page styles — process, faq, reviews, contact, sitemap, glossary,
   careers, resources, case studies, industries, niche pages
   Added 2026-05-04
   ============================================================================ */

/* Shared page hero — same arc treatment as homepage section-head */
.page-hero {
  position: relative;
  text-align: center;
  padding: 140px 0 40px;
  margin-bottom: 24px;
}
.page-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  width: 680px;
  height: 300px;
  transform: translateX(-50%);
  background: url('/assets/section-arcs/arcs.svg') center bottom / contain no-repeat;
  pointer-events: none;
  opacity: .85;
  z-index: 0;
}
.page-hero > * {
  position: relative;
  z-index: 1;
}
.page-hero .pill {
  margin: 0 auto 18px;
}
.page-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 880px;
  margin: 0 auto 18px;
}
.page-hero .page-lead {
  max-width: 700px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}
.page-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
@media (max-width: 760px) {
  .page-hero { padding-top: 110px; }
  .page-hero::before { width: 520px; height: 240px; top: -20px; }
}

/* Card icon — small blue square with white SVG glyph (matches service-card style) */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-60), var(--blue-65));
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(51, 133, 255, .25);
}
.card-icon [data-icon] {
  width: 22px;
  height: 22px;
}
.card-icon-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-99);
  border: 1px solid var(--blue-95);
  margin-bottom: 14px;
}
.card-icon-soft [data-icon] {
  width: 22px;
  height: 22px;
}

/* ============== Process page ============== */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 56px 0;
}
.process-step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.process-step-num {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--blue-60);
  letter-spacing: -.04em;
}
.process-step-body h2 {
  font-size: 26px;
  margin: 0 0 8px;
}
.process-step-body p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 12px;
}
.process-step-meta {
  font-size: 13px;
  color: var(--blue-60);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px !important;
}
.process-step-body strong {
  color: var(--text);
  font-weight: 600;
}
.process-pillars {
  margin: 64px 0;
}
.process-pillars h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 28px;
}
.process-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.process-pillar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
}
.process-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(51, 133, 255, .08);
  margin-bottom: 14px;
}
.process-pillar-icon svg {
  width: 18px;
  height: 18px;
}
.process-pillar h3 {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--text);
}
.process-pillar p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.process-steps-aside {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin: 24px 0 0;
}
.process-steps-aside a {
  color: var(--blue-60);
  font-weight: 500;
}
.process-faq {
  margin: 56px 0;
}
.process-faq h2 {
  margin: 0 0 20px;
}
.process-faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 12px;
}
.process-faq summary {
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  font-size: 16px;
}
.process-faq p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}


/* ============== Contact page ============== */
.contact-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 0 0 56px;
}
.contact-path {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.contact-path-num {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-60);
  margin-bottom: 8px;
  letter-spacing: .05em;
}
.contact-path h2 {
  font-size: 20px;
  margin: 0 0 12px;
}
.contact-path p {
  flex: 1;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.contact-form-section {
  margin: 0 0 56px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 40px;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 760px) {
  .contact-form-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-section { padding: 28px; }
}
.contact-form-copy h2 {
  font-size: 28px;
  margin: 0 0 12px;
}
.contact-form-copy p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
}
.contact-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.contact-bullets li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 14.5px;
}
.contact-bullets li:last-child { border-bottom: 0; }
.contact-bullets strong { color: var(--text); font-weight: 600; }
.contact-pii {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.contact-pii a { color: var(--blue-60); text-decoration: underline; }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  transition: border-color .15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blue-60);
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}
.contact-info {
  margin: 0 0 56px;
}
.contact-info h2 {
  font-size: 28px;
  margin: 0 0 24px;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.contact-info-grid > div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
}
.contact-info-grid h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue-60);
  margin: 0 0 8px;
  font-weight: 700;
}
.contact-info-grid p {
  margin: 0;
  font-size: 15px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.contact-info-grid a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.contact-info-grid a:hover { color: var(--blue-60); }
.contact-info-meta {
  margin-top: 6px !important;
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 400 !important;
}
.contact-close {
  text-align: center;
  margin: 0 0 56px;
  padding: 32px;
  background: var(--blue-99);
  border-radius: var(--r-xl);
}
.contact-close h2 {
  font-size: 24px;
  margin: 0 0 12px;
}
.contact-close p {
  color: var(--muted);
  margin: 0;
}
.contact-close a {
  color: var(--blue-60);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contact hero — two-column variant with illustrative art */
.page-hero.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  text-align: left;
  align-items: center;
  padding: 120px 0 32px;
}
/* Arc sits over the left column (above the contact pill), not centered */
.page-hero.contact-hero::before {
  left: 0;
  transform: none;
  top: 40px;
  width: 520px;
  height: 240px;
  opacity: .9;
}
.contact-hero .contact-hero-copy { position: relative; z-index: 1; }
.contact-hero .contact-hero-copy .pill { margin: 0 0 18px; }
.contact-hero .contact-hero-copy h1 { margin: 0 0 18px; max-width: none; }
.contact-hero .contact-hero-copy .page-lead { margin: 0 0 24px; max-width: none; }
.contact-hero .page-hero-cta { justify-content: flex-start; margin-top: 0; }
.contact-hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-hero-art img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  border-radius: 24px;
  border: 1px solid #E7ECF3;
  box-shadow: 0 12px 36px rgba(15, 25, 50, .06);
  background: #fff;
}
@media (max-width: 880px) {
  .page-hero.contact-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    padding-top: 110px;
  }
  .page-hero.contact-hero::before {
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
    width: 520px;
  }
  .contact-hero .contact-hero-copy .pill,
  .contact-hero .contact-hero-copy h1 { margin-left: auto; margin-right: auto; }
  .contact-hero .page-hero-cta { justify-content: center; }
  .contact-hero-art { order: -1; }
  .contact-hero-art img { max-width: 360px; border-radius: 18px; }
}

/* Contact path: number + icon header row */
.contact-path-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.contact-path-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(51,133,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-path-icon [data-icon] {
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.contact-path-icon [data-icon] svg { width: 100%; height: 100%; }

/* Contact bullets — icons inline with text */
.contact-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-bullets li > [data-icon] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  display: inline-flex;
}
.contact-bullets li > [data-icon] svg { width: 100%; height: 100%; }
.contact-bullets li > span { flex: 1; }

/* Contact info — icon above heading in each card */
.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(51,133,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.contact-info-icon [data-icon] {
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.contact-info-icon [data-icon] svg { width: 100%; height: 100%; }

/* ============== Reviews page ============== */
.reviews-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0 0 56px;
}
.reviews-stat {
  background: #fff url('/assets/proven/proven-record-card-background.png') center top / 100% auto no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease;
}
[data-stats-animate] .reviews-stat {
  opacity: 0;
  transform: translateY(8px);
}
[data-stats-animate] .reviews-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reviews-stat-num {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
  margin-bottom: 6px;
}
.reviews-stat-label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.reviews-featured { margin: 0 0 56px; }
.reviews-featured h2 { font-size: 28px; margin: 0 0 24px; }
.featured-testimonial {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 36px;
  align-items: center;
  box-shadow: var(--shadow-md);
}
@media (max-width: 700px) {
  .featured-testimonial { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}
.featured-testimonial-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--blue-95);
}
.featured-testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-testimonial-body blockquote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 20px;
  letter-spacing: -.005em;
}
.featured-testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.featured-testimonial-meta strong {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}
.featured-testimonial-meta span {
  color: var(--muted);
  font-size: 14px;
}
.reviews-videos { margin: 0 0 56px; }
.reviews-videos h2 { font-size: 28px; margin: 0 0 24px; }
/* Reviews-page video cards use the homepage .video-testimonials / .video-test-card pattern (dark card, no frame). See styles around line 6469. */
.reviews-grid-section { margin: 0 0 56px; }
.reviews-grid-section h2 { font-size: 28px; margin: 0 0 8px; }
.reviews-section-lead {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 15px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.review-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.review-stars {
  color: #FFB800;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-tile blockquote {
  flex: 1;
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}
.review-meta {
  font-size: 13px;
  color: var(--muted);
}
.review-meta strong {
  color: var(--text);
  font-weight: 600;
}
.reviews-platforms { margin: 0 0 56px; }
.reviews-platforms h2 { font-size: 28px; margin: 0 0 24px; }
.reviews-platforms .reviews-widgets {
  margin: 0 auto;
  max-width: 760px;
  justify-content: center;
}

/* Featured testimonials — 3-card grid */
.featured-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.featured-testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.featured-testimonial-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-95);
  margin: 0 0 16px;
  flex-shrink: 0;
}
.featured-testimonial-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-testimonial-card-stars {
  color: #FFB800;
  font-size: 15px;
  letter-spacing: 2px;
  margin: 0 0 12px;
}
.featured-testimonial-card blockquote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 18px;
  flex: 1;
}
.featured-testimonial-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.featured-testimonial-card-meta strong {
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}
.featured-testimonial-card-meta span {
  color: var(--muted);
  font-size: 13px;
}

/* Review tile avatar (empty circle placeholder, fill in later) */
.review-tile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px dashed #C9D7EA;
  background: #F5F8FC;
  margin: 0 0 14px;
  flex-shrink: 0;
}

/* ============== Sitemap (HTML) page ============== */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin: 0 0 56px;
}
.sitemap-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.sitemap-section h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue-60);
  margin: 0 0 12px;
  font-weight: 700;
}
.sitemap-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sitemap-section li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sitemap-section li:last-child { border-bottom: 0; }
.sitemap-section a {
  color: var(--text);
  font-size: 14.5px;
  display: block;
}
.sitemap-section a:hover { color: var(--blue-60); }

/* ============== Glossary page ============== */
.glossary-h1 {
  max-width: none !important;
  font-size: clamp(28px, 4.4vw, 56px) !important;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .glossary-h1 { white-space: nowrap; }
}
.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin: 0 0 32px;
}
.glossary-nav a {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blue-99);
  color: var(--blue-60);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--blue-95);
}
.glossary-nav a:hover {
  background: var(--blue-60);
  color: #fff;
}
.glossary-section {
  margin: 0 0 48px;
}
.glossary-section h2 {
  font-size: 28px;
  margin: 0 0 20px;
  padding-top: 12px;
  scroll-margin-top: 80px;
}
.glossary-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 8px 24px;
  margin: 0;
}
.glossary-list dt {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  margin: 18px 0 6px;
}
.glossary-list dt:first-child { margin-top: 8px; }
.glossary-list dd {
  margin: 0 0 18px;
  padding: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 18px;
}
.glossary-list dd:last-child { border-bottom: 0; padding-bottom: 8px; }

/* ============== Careers page ============== */
.careers-why { margin: 0 0 56px; }
.careers-why h2 { font-size: 28px; margin: 0 0 8px; }
.careers-why .careers-section-lead { margin: 0 0 24px; }
.careers-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.careers-why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.careers-why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 25, 50, .06);
  border-color: #C9D7EA;
}
.careers-why-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(51,133,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
}
.careers-why-icon [data-icon] {
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.careers-why-icon [data-icon] svg { width: 100%; height: 100%; }
.careers-why-card h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.careers-why-card p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.careers-roles { margin: 0 0 56px; }
.careers-roles h2 { font-size: 28px; margin: 0 0 8px; }
.careers-section-lead {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 15px;
}
.careers-role {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  margin-bottom: 14px;
}
.careers-role-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.careers-role-head h3 {
  font-size: 20px;
  margin: 0;
}
.careers-role-tag {
  background: var(--blue-99);
  color: var(--blue-60);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.careers-role > p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 14px;
}
.careers-role-bullets {
  margin: 0 0 18px;
  padding: 0 0 0 20px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}
.careers-role-bullets li { margin: 4px 0; }
.careers-process { margin: 0 0 56px; }
.careers-process h2 { font-size: 28px; margin: 0 0 24px; }
.careers-process-list {
  list-style: none;
  counter-reset: cp;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.careers-process-list li {
  counter-increment: cp;
  position: relative;
  padding: 18px 24px 18px 64px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  line-height: 1.65;
}
.careers-process-list li:last-child { border-bottom: 0; }
.careers-process-list li::before {
  content: counter(cp, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 18px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  color: var(--blue-60);
  font-size: 15px;
  letter-spacing: .02em;
}
.careers-process-list strong { color: var(--text); font-weight: 600; }

/* ============== Resources page ============== */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 0 0 56px;
}
.resource-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease, border-color .25s ease;
}
.resource-card:hover {
  box-shadow: 0 12px 28px rgba(15, 25, 50, .07);
  border-color: #C9D7EA;
  transform: translateY(-2px);
}
[data-stats-animate] .resource-card {
  opacity: 0;
  transform: translateY(8px);
}
[data-stats-animate] .resource-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-stats-animate] .resource-card.is-visible:hover { transform: translateY(-2px); }
.resource-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(51,133,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
}
.resource-card-icon [data-icon] {
  width: 24px;
  height: 24px;
  display: inline-flex;
}
.resource-card-icon [data-icon] svg { width: 100%; height: 100%; }
.resource-card-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-60);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.resource-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.resource-card > p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 12px;
  flex: 1;
}
.resource-card-meta-line {
  font-size: 12.5px !important;
  color: var(--muted);
  margin: 0 0 16px !important;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-soft);
  flex: 0 0 auto !important;
}
.resource-card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.resource-card-secondary {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-60);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.resource-card-secondary:hover { text-decoration: underline; text-underline-offset: 3px; }
.resource-card-secondary:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 3px; border-radius: 4px; }
.resources-audit {
  background: var(--blue-99);
  border: 1px solid var(--blue-95);
  border-radius: var(--r-2xl);
  padding: 40px;
  margin: 0 0 56px;
}
.resources-audit h2 {
  font-size: 28px;
  margin: 0 0 18px;
}
.resources-audit-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 760px) {
  .resources-audit-grid { grid-template-columns: 1fr; gap: 24px; }
  .resources-audit { padding: 28px; }
}
.resources-audit-grid p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 14px;
}
.resources-audit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
}
.resources-audit-card h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--blue-60);
  margin: 0 0 12px;
}
.resources-audit-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.resources-audit-card li {
  padding: 6px 0;
  color: var(--muted);
  font-size: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.resources-audit-card li:last-child { border-bottom: 0; }

/* ============== Case studies hub ============== */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin: 0 0 56px;
}
.case-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-90);
}
.case-card-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-60);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.case-card h2 {
  font-size: 24px;
  margin: 0 0 12px;
  line-height: 1.2;
}
.case-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
.case-card-lead {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}
.case-card-meta {
  list-style: none;
  padding: 14px 0 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--muted);
}
.case-card-meta li { padding: 4px 0; }
.case-card-meta strong { color: var(--text); font-weight: 600; }
.case-card-cta {
  font-weight: 600;
  color: var(--blue-60);
  font-size: 14.5px;
}
.case-summary {
  background: var(--blue-99);
  border: 1px solid var(--blue-95);
  border-radius: var(--r-2xl);
  padding: 40px;
  margin: 0 0 56px;
}
.case-summary h2 {
  font-size: 28px;
  margin: 0 0 8px;
}
.case-summary-lead {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 15px;
}
.case-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
/* Stat cards reuse the .author-stat treatment (bg image + gradient text). See ~line 4628. */

/* ============== Case study detail ============== */
.case-study-container {
  max-width: 880px;
}
.case-study-head {
  position: relative;
  text-align: center;
  margin: 0 0 40px;
  padding: 100px 0 24px;
}
.case-study-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: 680px;
  height: 280px;
  transform: translateX(-50%);
  background: url('/assets/section-arcs/arcs.svg') center bottom / contain no-repeat;
  pointer-events: none;
  opacity: .85;
  z-index: 0;
}
.case-study-head > * { position: relative; z-index: 1; }
.case-study-head .pill { margin: 0 auto 18px; }
.case-study-head-portrait {
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: #F5F8FC;
  border: 1px solid #E7ECF3;
  box-shadow: 0 8px 22px rgba(15, 25, 50, .08);
}
.case-study-head-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-study-head h1 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 18px;
  letter-spacing: -.025em;
}
.case-study-sub {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}
.case-study-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 48px;
}
.case-study-stat {
  position: relative;
  background: #fff url('/assets/about/stat-bg.png') no-repeat center top / cover;
  border: 1px solid #DBE5F2;
  border-radius: 18px;
  padding: 28px 18px 22px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 25, 50, .05);
  overflow: hidden;
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease;
}
[data-stats-animate] .case-study-stat {
  opacity: 0;
  transform: translateY(8px);
}
[data-stats-animate] .case-study-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.case-study-stat:hover {
  box-shadow: 0 10px 28px rgba(15, 25, 50, .08);
}
.case-study-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 55%, #fff 100%);
  pointer-events: none;
}
.case-study-stat > * { position: relative; z-index: 1; }
.case-study-stat strong {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #0B0F19 0%, #1A76FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-study-stat span {
  font-size: 13px;
  color: #5B6172;
  line-height: 1.4;
  font-weight: 500;
}

/* Before/after side-by-side comparison */
.case-study-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 24px;
}
.case-study-compare-card {
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  overflow: hidden;
}
.case-study-compare-card header {
  padding: 14px 18px 8px;
  border-bottom: 1px solid #F1F4F9;
}
.case-study-compare-card header strong {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1A76FF;
  font-weight: 700;
  margin: 0 0 2px;
}
.case-study-compare-card header span {
  font-size: 13px;
  color: #5B6172;
}
.case-study-compare-card img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #0B0F19;
}
.case-study-compare-arrow {
  text-align: center;
  font-size: 14px;
  color: #5B6172;
  margin: 8px 0 18px;
}
.case-study-compare-arrow strong {
  display: inline-block;
  background: #F5F8FC;
  border: 1px solid #DBE5F2;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0B0F19;
}
@media (max-width: 720px) {
  .case-study-compare { grid-template-columns: 1fr; }
}

/* Embedded review screenshot */
.case-study-review-card {
  margin: 18px 0 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: 14px;
}
.case-study-review-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.case-study-review-card-caption {
  font-size: 13px;
  color: #5B6172;
  margin: 12px 0 0;
  text-align: center;
}

/* Testimonial video at top of case study (uses homepage video-test pattern) */
.case-study-testimonial-video {
  position: relative;
  background: #0B0F19;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 14px 0 24px;
}
.case-study-testimonial-video--vertical {
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.case-study-testimonial-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-study-testimonial-video .video-test-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a3a6c 0%, #0B0F19 100%);
  cursor: pointer;
}

/* Inline channel screenshot */
.case-study-screenshot {
  margin: 14px 0 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E7ECF3;
  background: #0B0F19;
}
.case-study-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}
.case-study-screenshot-caption {
  font-size: 13px;
  color: #5B6172;
  margin: 8px 0 0;
  text-align: center;
}
.case-study-section {
  margin: 0 0 36px;
}
.case-study-section h2 {
  font-size: 26px;
  margin: 0 0 14px;
  letter-spacing: -.015em;
}
.case-study-section p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 16.5px;
  margin: 0 0 14px;
}
.case-study-section strong {
  color: var(--text);
  font-weight: 600;
}
.case-study-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-study-section ul li {
  position: relative;
  padding: 12px 0 12px 24px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
}
.case-study-section ul li:last-child { border-bottom: 0; }
.case-study-section ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-60);
}
.case-study-section ul li strong { color: var(--text); }
.case-study-section a {
  color: var(--blue-60);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.case-study-quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.55;
  color: var(--text);
  background: #fff;
  border-left: 4px solid var(--blue-60);
  padding: 24px 28px;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  margin: 24px 0;
}
.case-study-quote footer {
  font-family: 'Clash Grotesk', sans-serif;
  font-style: normal;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 14px;
}
.case-study-quote cite {
  font-style: italic;
  color: var(--muted);
}
.case-study-services {
  background: var(--blue-99);
  border: 1px solid var(--blue-95);
  border-radius: var(--r-lg);
  padding: 12px 22px !important;
}
.case-study-services li {
  border-color: var(--blue-95) !important;
}
.case-study-services li::before {
  display: none;
}
.case-study-services li {
  padding-left: 0 !important;
}
.case-study-related {
  margin: 56px 0 32px;
}
.case-study-related h2 {
  font-size: 22px;
  margin: 0 0 18px;
}
.case-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ============== Industries hub & niche pages ============== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin: 0 0 56px;
}
.industry-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.industry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-90);
}
.industry-card-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-60);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.industry-card h2 {
  font-size: 24px;
  margin: 0 0 12px;
  line-height: 1.2;
}
.industry-card p {
  flex: 1;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.industry-card-cta {
  font-weight: 600;
  color: var(--blue-60);
  font-size: 14.5px;
}
.industries-not-listed {
  background: var(--blue-99);
  border: 1px solid var(--blue-95);
  border-radius: var(--r-2xl);
  padding: 36px;
  margin: 0 0 56px;
  text-align: center;
}
.industries-not-listed h2 {
  font-size: 24px;
  margin: 0 0 12px;
}
.industries-not-listed p {
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto 22px;
  line-height: 1.65;
}

/* ============== Niche pages (for-podcasters etc.) ============== */
.niche-section {
  margin: 0 0 40px;
}
.niche-section h2 {
  font-size: 28px;
  margin: 0 0 18px;
  letter-spacing: -.015em;
}
.niche-section > p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 16.5px;
  max-width: 820px;
  margin: 0 0 14px;
}
.niche-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.niche-list li {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  line-height: 1.65;
  font-size: 15.5px;
}
.niche-list li:last-child { border-bottom: 0; }
.niche-list strong { color: var(--text); font-weight: 600; }
.niche-list a {
  color: var(--blue-60);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============== Mobile adjustments ============== */
@media (max-width: 760px) {
  .process-step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
  }
  .process-step-num { font-size: 40px; }
  .case-study-stats { padding: 18px; }
  .case-study-stat strong { font-size: 24px; }
  .featured-testimonial-body blockquote { font-size: 18px; }
  .case-study-quote { font-size: 18px; padding: 20px 22px; }
}

/* ============== FAQ page section dividers ==============
   Multi-section FAQ page (/faq.html, niche pages) — sub-section headings
   that don't use the big section-head arc treatment. */
.faq-page-section {
  margin: 0 0 48px;
}
.faq-page-section:last-of-type {
  margin-bottom: 32px;
}
.faq-page-head {
  text-align: left;
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: 0;
}
.faq-page-head h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0B0F19;
  margin: 0;
}
/* Niche pages: smaller FAQ section using the same homepage faq-grid pattern */
.niche-faq {
  margin: 0 0 40px;
}
.niche-faq h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  color: #0B0F19;
}

/* ============== Case study videos & images ============== */
.case-study-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 12px 0 28px;
}
@media (min-width: 760px) {
  .case-study-videos { grid-template-columns: 1fr 1fr; }
}
.case-study-video {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.case-study-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0B0F19;
  box-shadow: var(--shadow-md);
}
.case-study-video-frame iframe,
.case-study-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.case-study-video-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 4px 0;
}
.case-study-video-meta strong {
  color: var(--text);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.35;
}
.case-study-video-meta span {
  color: var(--muted);
  font-size: 13.5px;
}
/* Case study YouTube thumbnail screenshots — for thumbnail-design engagements */
.case-study-thumbnails {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 12px 0 28px;
}
@media (min-width: 580px) {
  .case-study-thumbnails { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
  .case-study-thumbnails { grid-template-columns: repeat(3, 1fr); }
}
.case-study-thumbnail {
  margin: 0;
  display: block;
  background: #fff;
  border: 1px solid #E7ECF3;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 25, 50, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.case-study-thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 25, 50, .1);
}
.case-study-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.case-study-image {
  margin: 24px 0;
  padding: 0;
}
.case-study-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.case-study-image figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
}

/* Creator portrait on case-study detail page */
.case-study-portrait {
  display: block;
  width: 120px;
  height: 120px;
  margin: -10px auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-95);
  border: 4px solid #fff;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
}
.case-study-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Case-card photo (hub) */
.case-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: -28px -28px 18px;
  width: calc(100% + 56px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  background: var(--blue-95);
}
.case-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Desi G portrait has faint top/bottom edge artifacts in the source JPG — zoom 2% to crop them out */
.case-card[href*="/desi-g/"] .case-card-photo img {
  transform: scale(1.02);
  transform-origin: center;
}

/* ============== Industries hub additions ============== */
/* Stats now use individual .case-study-stat cards (bg-image + gradient text + count-up animation) */
.industries-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0 0 40px;
}
.industry-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 56px;
}
.industry-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.industry-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-90);
}
.industry-tile-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-99);
  border: 1px solid var(--blue-95);
  margin-bottom: 12px;
}
.industry-tile-ico [data-icon] {
  width: 20px;
  height: 20px;
}
.industry-tile h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}
.industry-tile p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.industries-why {
  margin: 0 0 56px;
}
.industries-why-title {
  font-size: clamp(24px, 2.8vw, 32px);
  margin: 0 0 24px;
  text-align: center;
}
.industries-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.industries-why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
}
.industries-why-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
.industries-why-card p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ============== Header dropdown navigation ==============
   Desktop: hover/click the trigger, dropdown panel appears below.
   Mobile: collapsed inside the .mobile-menu accordion (see mobile-menu-section). */
.nav-links { position: relative; }
.nav-dd {
  position: relative;
  list-style: none;
}
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0B0F19;
  cursor: pointer;
  position: relative;
}
.nav-dd-trigger:hover { color: var(--blue-60); }
.nav-dd-arrow {
  display: inline-block;
  font-size: 9px;
  margin-left: 2px;
  margin-top: 2px;
  transition: transform .15s ease;
  color: #5B6172;
}
.nav-dd.is-open .nav-dd-arrow {
  transform: rotate(180deg);
}
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(15, 25, 50, .12), 0 4px 12px rgba(15, 25, 50, .04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-dd-menu-wide {
  min-width: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 6px;
}
.nav-dd-menu-wide .nav-dd-all {
  grid-column: 1 / -1;
}
.nav-dd.is-open .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dd-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #0B0F19;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-dd-menu a:hover {
  background: var(--blue-99);
  color: var(--blue-60);
}
.nav-dd-menu .nav-dd-all {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-weight: 600;
  color: var(--blue-60);
}
.nav-dd-menu .nav-dd-all:hover {
  background: var(--blue-99);
}

/* Hover bridge — makes hover-out forgiving so the menu doesn't close
   when the cursor crosses the gap between trigger and panel */
.nav-dd::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
  pointer-events: none;
}
.nav-dd:hover::after {
  pointer-events: auto;
}

/* Desktop nav-links spacing — adjust for dropdown triggers */
@media (min-width: 901px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }
  .nav-links > li {
    list-style: none;
  }
  .nav-links > li:not(.nav-dd) > a {
    display: inline-flex;
    align-items: center;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 500;
    color: #0B0F19;
  }
  .nav-links > li:not(.nav-dd) > a:hover {
    color: var(--blue-60);
  }
}

/* Mobile menu nested sections */
.mobile-menu-section {
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu-section:last-of-type {
  border-bottom: 0;
}
.mobile-menu-section-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #0B0F19;
  cursor: pointer;
}
.mobile-menu-section-trigger::after {
  content: "▾";
  font-size: 11px;
  color: #5B6172;
  transition: transform .15s ease;
}
.mobile-menu-section.is-open .mobile-menu-section-trigger::after {
  transform: rotate(180deg);
}
.mobile-menu-section-content {
  display: none;
  padding: 0 0 12px 12px;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu-section.is-open .mobile-menu-section-content {
  display: flex;
}
.mobile-menu-section-content a {
  padding: 8px 0;
  font-size: 15px;
  color: #4A4F5C;
}
.mobile-menu-section-content a:hover {
  color: var(--blue-60);
}

/* Hide dropdown on mobile (collapsed into mobile menu instead) */
@media (max-width: 900px) {
  .nav-dd-menu { display: none !important; }
  .nav-dd-trigger { display: none; }
  /* The full nav-links list is replaced by the hamburger on mobile */
}

/* ============================================================
   Resource email-gate modal (used on /resources/)
   ============================================================ */
.resource-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  background: #fff;
  box-shadow: 0 24px 64px rgba(14, 26, 43, 0.18);
  color: var(--text, #0E1A2B);
}
.resource-modal::backdrop {
  background: rgba(14, 26, 43, 0.55);
  backdrop-filter: blur(4px);
}
.resource-modal-form {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.resource-modal-form h3 {
  font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.resource-modal-desc {
  margin: 0;
  color: var(--text-muted, #57667A);
  font-size: 15px;
  line-height: 1.5;
}
.resource-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0E1A2B);
}
.resource-modal-form input[type="email"],
.resource-modal-form input[type="text"] {
  padding: 12px 14px;
  border: 1.5px solid #DBE3EE;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s ease;
  background: #fff;
}
.resource-modal-form input[type="email"]:focus,
.resource-modal-form input[type="text"]:focus {
  outline: none;
  border-color: var(--blue-60, #3385FF);
}
.resource-modal-pii {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #57667A);
  line-height: 1.5;
}
.resource-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted, #57667A);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.resource-modal-close:hover {
  background: #F0F4FA;
  color: var(--text, #0E1A2B);
}
.resource-modal-form .btn-primary[disabled] {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 480px) {
  .resource-modal-form { padding: 24px; }
  .resource-modal-form h3 { font-size: 20px; }
}

/* ===== A11y: skip link ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--blue-60);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}
#main-content { scroll-margin-top: 80px; }
#main-content:focus { outline: none; }

/* ===== A11y: visible focus rings on interactive elements ===== */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-60);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.nav-dd-trigger:focus-visible,
.nav-hamburger:focus-visible,
.mobile-menu-section-trigger:focus-visible {
  outline: 2px solid var(--blue-60);
  outline-offset: 3px;
}
/* On dark/colored buttons, use a white inner ring for contrast */
.btn-primary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px var(--blue-60);
}
/* Don't leave default outlines on mouse click */
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   Mark Studios — Conversion features (10x lift bundle)
   ============================================================ */

/* 1. Floating sticky CTA pill (bottom-right) */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--blue-60, #3385FF);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(51, 133, 255, .25), 0 10px 28px rgba(15, 25, 50, .12);
  z-index: 80;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .15s ease;
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(31, 109, 255, .42), 0 6px 14px rgba(15, 25, 50, .18);
}
.floating-cta-arrow { transition: transform .25s ease; }
.floating-cta:hover .floating-cta-arrow { transform: translateX(3px); }
@media (max-width: 600px) {
  .floating-cta {
    bottom: 16px;
    right: 16px;
    padding: 12px 18px;
    font-size: 14px;
  }
}

/* 2 & 9. Conversion modal (shared by exit-intent + lead magnet) */
.conv-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.conv-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.conv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, .72);
  backdrop-filter: blur(4px);
}
.conv-modal-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 36px 32px 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(15, 25, 50, .35);
  transform: scale(.96);
  transition: transform .25s ease;
}
.conv-modal.is-open .conv-modal-card { transform: scale(1); }
.conv-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #98a0b3;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.conv-modal-close:hover { background: #f3f5f9; color: var(--text); }
.conv-modal-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent, #1f6dff);
  margin-bottom: 12px;
}
.conv-modal-card h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.conv-modal-card p {
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
}
.conv-modal-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-direction: column;
}
.conv-modal-form input[type="email"] {
  border: 1px solid var(--border-soft, #E7ECF3);
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.conv-modal-form input[type="email"]:focus {
  border-color: var(--accent, #1f6dff);
  box-shadow: 0 0 0 3px rgba(31, 109, 255, .14);
}
.conv-modal-form .btn { width: 100%; padding: 14px; justify-content: center; }
.conv-modal-fine {
  font-size: 12.5px !important;
  color: #98a0b3 !important;
  margin: 0 !important;
}
.lead-modal-cover {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
}

/* 3. Top announcement bar — subtle, light, matches site aesthetic */
.scarcity-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: #f7f9fc;
  color: var(--text, #0B0F19);
  font-size: 13px;
  overflow: hidden;
  border-bottom: 1px solid rgba(15, 25, 50, .07);
  transition: height .3s ease, padding .3s ease;
}
.scarcity-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 16px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  flex-wrap: wrap;
}
.scarcity-bar-text {
  color: var(--muted, #5B6172);
  font-weight: 500;
  letter-spacing: .005em;
}
.scarcity-bar-cta {
  color: var(--accent, #3385FF);
  background: transparent;
  padding: 2px 0;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  transition: opacity .15s ease;
}
.scarcity-bar-cta:hover { opacity: .75; }
.scarcity-bar-close {
  border: 0;
  background: transparent;
  color: rgba(15, 25, 50, .35);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 4px;
  transition: color .15s ease;
}
.scarcity-bar-close:hover { color: var(--text, #0B0F19); }
@media (max-width: 600px) {
  .scarcity-bar-inner { gap: 10px; padding: 9px 12px; font-size: 12px; }
  .scarcity-bar-cta { font-size: 12px; }
}

/* 4. Social proof toast */
.social-toast {
  position: fixed;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px 12px 12px;
  max-width: 320px;
  box-shadow: 0 16px 40px rgba(15, 25, 50, .18), 0 0 0 1px rgba(15, 25, 50, .06);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 70;
}
.social-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.social-toast-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, .55);
  animation: ms-pulse-green 1.8s ease-out infinite;
}
@keyframes ms-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
  70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
.social-toast-body { flex: 1; min-width: 0; }
.social-toast-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
}
.social-toast-text strong { font-weight: 700; }
.social-toast-time {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.social-toast-close {
  border: 0;
  background: transparent;
  color: #c0c5d0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  margin: -4px -2px -4px 0;
}
.social-toast-close:hover { color: var(--text); }
@media (max-width: 600px) {
  .social-toast {
    left: 12px;
    right: 12px;
    bottom: 80px;
    max-width: none;
  }
}

/* 5. Live viewing counter in hero */
.hero-live-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 14px;
  padding: 6px 14px;
  background: rgba(31, 109, 255, .06);
  border-radius: 999px;
}
.hero-live-counter strong {
  color: var(--text);
  font-weight: 700;
}
.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, .55);
  animation: ms-pulse-green 1.8s ease-out infinite;
}

/* 10. Hero reassurance microcopy */
.hero-reassurance {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0;
  text-align: center;
  letter-spacing: .01em;
}

/* 6. Risk reversal / guarantee section */
.section-guarantee { background: var(--bg, #f7f9fc); }
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 980px) { .guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .guarantee-grid { grid-template-columns: 1fr; } }
.guarantee-card {
  background: #fff;
  border: 1px solid var(--border-soft, #E7ECF3);
  border-radius: var(--r-xl, 18px);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.guarantee-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(51, 133, 255, .12);
  color: #3385FF;
  margin-bottom: 14px;
}
.guarantee-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.guarantee-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -.005em;
}
.guarantee-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* 7. Mid-page email capture */
.section-midcta { padding: 28px 0; }
.midcta-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, #0b0f19 0%, #1a2e58 100%);
  color: #fff;
  border-radius: 22px;
  padding: 36px 40px;
  box-shadow: 0 24px 60px rgba(11, 15, 25, .2);
}
@media (max-width: 760px) {
  .midcta-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; }
}
.midcta-text h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  margin: 0 0 10px;
  letter-spacing: -.01em;
  color: #fff;
}
.midcta-text p {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
  line-height: 1.5;
}
.midcta-form {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}
.midcta-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  color: var(--text);
}
.midcta-form .btn { padding: 12px 18px; flex-shrink: 0; }
@media (max-width: 480px) {
  .midcta-form { flex-direction: column; border-radius: 14px; padding: 8px; gap: 8px; }
  .midcta-form input[type="email"] { text-align: center; }
  .midcta-form .btn { width: 100%; justify-content: center; border-radius: 10px; }
}

/* 8. Trust badges strip */
.section-trustbadges { padding: 24px 0 8px; }
.trust-badge-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}
.trust-badge-row li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(31, 109, 255, .1);
  font-size: 13px;
}

/* Body offset when scarcity bar is present */
body.has-scarcity-bar { --scarcity-bar-h: 44px; padding-top: var(--scarcity-bar-h); }
body.has-scarcity-bar .nav-wrap,
body.has-scarcity-bar .portfolio-nav-wrap { top: var(--scarcity-bar-h); }
@media (max-width: 700px) {
  body.has-scarcity-bar { --scarcity-bar-h: 56px; }
}