/* ================================================================ WLIQ LIVE — Design System ================================================================ A clean,reusable stylesheet for all WLIQ service pages. NAMING CONVENTION:- Layout:.container,.section,.section--dark,.section--gray - Typography:.section-label,.section-heading,.section-intro - Components:.card,.card--dark,.card--bordered - Grids:.grid,.grid--2,.grid--3,.grid--4 - Splits:.split,.split--70-30,.split--40-60 - Elements:.stat,.step,.faq,.cta,.badge,.logo-box - Utilities:.text-center,.text-white,.text-muted - Animations:.reveal,.stagger FONTS:Inter (all text) COLORS:#1d1d1f (black),#ffffff (white),#f5f5f5 (gray bg),#6e6e73 (body text),#686868 (muted),#e8e8ed (border) MAX-WIDTH:1440px BREAKPOINTS:1024px,991px,767px ================================================================ */
/* ============ RESET & BASE ============ */
:root {
  --font-primary: 'Inter', sans-serif;
  --font-h1: 80px;
  --font-h2: 50px;
  --font-h3: 30px;
  --font-h4: 20px;
  --font-h5: 18px;
  --font-h6: 18px;
  --body-font: 16px;
  --f-14: 14px;
  --f-16: 16px;
  --f-18: 18px;
  --f-20: 20px;
  --f-24: 24px;

  --s10: 10px;
  --s15: 15px;
  --s20: 20px;
  --s25: 25px;
  --s30: 30px;
  --s35: 35px;
  --sectionSpace: 140px;
  --s40: 40px;
  --s50: 50px;
  --s100: 100px;
  --s60: 60px;
  --s70: 70px;
  --s80: 80px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 0;
}

body {
  width: 100%;
  margin: 0 auto;
  font-family: var(--font-primary);
  font-size: var(--body-font);
  line-height: 1.5;
  color: #1d1d1f;
  background: #f5f5f5;
  overflow-x: hidden;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

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

button {
  cursor: pointer;
  border: none;
  font-family: var(--font-primary);
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

p:last-child {
  margin-bottom: 0;
}

h1,
.h1 {
  font-size: var(--font-h1);
  line-height: 1.3;
}

h2,
.h2 {
  font-size: var(--font-h2);
  line-height: 1.3;
}

h3,
.h3 {
  font-size: var(--font-h3);
  line-height: 1.3;
}

h4,
.h4 {
  font-size: var(--font-h4);
  line-height: 1.3;
}

h5,
.h5 {
  font-size: var(--font-h5);
}

h6,
.h6 {
  font-size: var(--font-h6);
}

/* ============ LAYOUT ============ */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s40);
}

/* ============ NAVIGATION ============ */
.nav {
  position: relative;
  background: transparent;
  border-bottom: none;
  height: 72px;
  display: flex;
  align-items: center;
}

.nav__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--s50);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s10);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--f-14);
  letter-spacing: 0.08em;
  color: #1d1d1f;
  text-transform: uppercase;
}

.nav__logo-iq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2d2d2d;
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  padding: 4px var(--s10);
  border-radius: 4px;
  line-height: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s35);
}

.nav__link {
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  transition: color 0.2s;
}

.nav__link:hover {
  color: #1d1d1f;
}

.nav__cta {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #ffffff;
  background: #2d2d2d;
  padding: var(--s10) var(--s20);
  border-radius: 8px;
  transition: background 0.2s;
}

.nav__cta:hover {
  background: rgba(29, 29, 31, 0.85);
}

/* ============ SECTIONS ============ */

.section {
  padding: var(--sectionSpace) 0;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.section--dark {
  background: linear-gradient(180deg, #111111 0%, #1a1a1a 100%);
  padding: var(--sectionSpace) 0;
}

.section--gray {
  background: transparent;
  padding: var(--sectionSpace) 0;
}

.section--light {
  background: transparent;
  padding: var(--sectionSpace) 0;
}

.section--light+.section--light {
  padding-top: 0 !important;
}

.section--light+.section--gray {
  padding-top: 0 !important;
}

.section--gray+.section--light {
  padding-top: 0 !important;
}

.section--gray+.section--gray {
  padding-top: 0 !important;
}

.section--dark+.section--dark {
  padding-top: 0 !important;
}

.section--compact {
  padding: var(--s35) 0;
}

/* ============ TYPOGRAPHY — Section Headers ============ */
.section-label {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #686868;
  margin: 0 0 var(--s10) 0;
}

.section--dark .section-label {
  color: rgba(255, 255, 255, 0.4);
}

.section-heading {
  font-family: var(--font-primary);
  font-size: var(--font-h2);
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.1;
  margin: 0 0 var(--s25) 0;
  letter-spacing: -0.03em;
}

.section-heading .muted,
.section-heading span {
  color: #686868;
}

.section--dark .section-heading {
  color: #ffffff;
}

.section--dark .section-heading .muted,
.section--dark .section-heading span {
  color: rgba(255, 255, 255, 0.4);
}

.section-intro {
  font-family: var(--font-primary);
  font-size: var(--f-18);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.65;
  margin: 0;
  max-width: 680px;
}

.section--dark .section-intro {
  color: rgba(255, 255, 255, 0.6);
}

.section--dark .card--dark div {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--f-14);
  line-height: 1.6;
}

.section--dark .card--dark strong {
  color: rgba(255, 255, 255, 0.7);
}

.section-header {
  margin-bottom: 72px;
}

.section-header--center {
  text-align: center;
  margin-bottom: calc(var(--s100) - 20px);
}

.section-header--center .section-intro {
  margin-left: auto;
  margin-right: auto;
}

.section-header--left {
  margin-bottom: var(--s50);
}

.section-header--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s100);
  align-items: end;
  margin-bottom: calc(var(--s100) - 20px);
}

.section-header--split__left {
  /* label + heading stack naturally */
}

.section-header--split__left .section-heading {
  margin-bottom: 0;
}

.section--light .section-header--split__left .section-heading {
  color: #2d2d2d;
}

.section--light .section-header--split__left .section-label {
  color: #4a5568;
}

.section--light .section-header--split__left .section-heading span {
  color: #4a4a4a;
}

.section-header--split__right {
  display: flex;
  align-items: flex-end;
}

.section-header--split .section-intro {
  margin: 0;
}

/* ============ HERO ============ */
.hero {
  padding-top: 80px;
  padding-bottom: 80px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

.hero-tagline {
  font-family: var(--font-primary);
  font-size: var(--f-24);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: var(--s15);
}

.hero-tagline strong {
  font-weight: 700;
  color: #1d1d1f;
}

.hero-subtitle {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #6e6e73;
  margin-bottom: var(--s15);
}

.hero h1 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  margin-bottom: var(--s20);
}

.hero h1 em {
  font-style: normal;
  font-weight: 600;
  color: #1d1d1f;
}

.hero-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #676767;
  max-width: 480px;
}

.hero-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

/* --- Dark Hero Variant --- */
.hero-dark {
  background: linear-gradient(180deg, #111111 0%, #1a1a1a 100%);
}

.hero-dark .hero-tagline {
  color: #ffffff;
}

.hero-dark .hero-tagline strong {
  color: #ffffff;
}

.hero-dark .hero-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

.hero-dark h1 {
  color: #ffffff;
}

.hero-dark h1 em {
  color: #ffffff;
}

.hero-dark .hero-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* --- Editorial Hero Variant (Fabrica-inspired) --- */
.hero--editorial {
  padding: 120px 0 80px;
}

.hero--editorial+.section--gray {
  padding-top: 20px !important;
}

.hero--editorial .container {
  display: block;
  max-width: 1440px;
}

.hero-display {
  font-family: var(--font-primary);
  font-size: var(--font-h1);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #1d1d1f;
  margin: 0 0 180px;
  max-width: 55%;
}

.hero-display h1 {
  font-size: var(--font-h1);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 100px;
}

.hero-display h1 span {
  color: #686868;
}

.hero-meta-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-top: var(--s35);
  border-top: 1px solid #e8e8ed;
  font-size: var(--body-font);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.7;
}

.hero-meta-tag {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: var(--s10) var(--s20);
  border-radius: 980px;
  white-space: nowrap;
}

.hero-tag-dot {
  width: 7px;
  height: 7px;
  background: #007AFF;
  border-radius: 50%;
  display: inline-block;
}

.hero-meta-primary {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: #1d1d1f;
  max-width: 520px;
}

.hero-meta-muted {
  color: #686868;
  font-weight: 500;
}

.hero-meta-secondary {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #686868;
  max-width: 380px;
  margin-left: auto;
}

/* ============ GRID SYSTEM ============ */
.grid {
  display: grid;
  gap: 3px;
}

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

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

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* ============ SPLIT LAYOUTS ============ */
.split {
  display: grid;
  gap: 60px;
  align-items: start;
}

.split--50-60 {
  grid-template-columns: 1fr 1.2fr;
}

.split--70-30 {
  grid-template-columns: 7fr 3fr;
}

.split--60-40 {
  grid-template-columns: 1.2fr 1fr;
}

.split--40-60 {
  grid-template-columns: 1fr 1.2fr;
}

/* ============ CARDS ============ */
/* Light card (on white/gray bg) */
.card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s40);
  min-height: 450px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark card (on dark section bg) */
.card--dark {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 16px;
  padding: var(--s40);
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

/* Card layout — heading top-aligned, description group bottom-aligned */
.card>h4+p,
.card--dark>h4+p,
.card--bordered>h4+p,
.card>h4~p:last-child,
.card--dark>h4~p:last-child,
.card--bordered>h4~p:last-child,
.card>h3+p,
.card--dark>h3+p,
.card--bordered>h3+p,
.card>h3~p:last-child,
.card--dark>h3~p:last-child,
.card--bordered>h3~p:last-child {
  margin-top: auto;
}

.card>p+p,
.card--dark>p+p,
.card--bordered>p+p {
  margin-top: 20px !important;
}

/* Accent dark card */
.card--dark-accent {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 16px;
  padding: var(--s40) var(--s30);
  display: flex;
  flex-direction: column;
}

/* Tall card — space between title and description */
.card--tall {
  min-height: 380px;
  justify-content: space-between;
}

.card--tall p:last-child {
  margin-top: auto;
}

/* Step card labels and numbers */
.card__step-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: var(--s20);
}

.card__step-number {
  display: block;
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  margin-bottom: var(--s20);
}

/* Bordered card (clean white, no border) */
.card--bordered {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

/* Ghost number inside bordered cards */
.card--bordered .step__number {
  position: absolute;
  top: -10px;
  right: 16px;
  font-size: 130px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
  letter-spacing: -0.05em;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  display: block;
  margin: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.card--dark.card--bordered {
  background: #ffffff;
  border: none;
}

/* ============ SERVICE CARD (structured card with numbered header, list, footer) ============ */
/* Used on web-apps.html "Four ways to build" section */

.card--service {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s50);
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.card--service:hover {
  transform: none;
}

/* Header: number + title */
.card__service-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: var(--s20);
  padding-bottom: var(--s20);
  border-bottom: 1px solid #e8e8ed;
}

.card__service-num {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: #b0b0b5;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.card--service h3 {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  line-height: 1.3;
}

/* Description */
.card__service-desc {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  color: #6e6e73;
  line-height: 1.65;
  margin: 0 0 var(--s25) 0;
}

/* Feature list */
.card__service-list {
  list-style: none;
  padding: 0 0 0 0;
  margin: 0 0 var(--s30) 0;
}

.card--service .card__service-list li {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: #48484a;
  line-height: 1.5;
  padding: var(--s10) 0 var(--s10) var(--s20);
  position: relative;
  border-bottom: 1px solid #f5f5f7;
}

.card--service .card__service-list li:last-child {
  border-bottom: none;
}

.card--service .card__service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8c8cc;
}

/* Footer: meta + explore link */
.card__service-footer {
  margin-top: auto;
  padding-top: var(--s25);
  border-top: 1px solid #e8e8ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.card__service-footer .card__meta {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #b0b0b5;
}

/* Explore link base style */
.explore-link {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  margin-top: 20px !important;
}

.explore-link:hover {
  color: var(--primary-color) !important;
  transition: color 0.2s ease;
}

.section--dark .explore-link {
  color: #ffffff !important;
}

.section--dark .explore-link:hover {
  color: var(--primary-color) !important;
  transition: color 0.2s ease;
}

.card--service .explore-link {
  font-size: 13px;
}

/* Dark section overrides for service cards */
.section--dark .card--service {
  background: rgba(255, 255, 255, 0.04);
  border: none;
}

.section--dark .card__service-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.section--dark .card__service-num {
  color: rgba(255, 255, 255, 0.3);
}

.section--dark .card--service h3 {
  color: #ffffff;
}

.section--dark .card__service-desc {
  color: rgba(255, 255, 255, 0.6);
}

.section--dark .card--service .card__service-list li {
  color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.section--dark .card--service .card__service-list li::before {
  background: rgba(255, 255, 255, 0.2);
}

.section--dark .card__service-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.section--dark .card__service-footer .card__meta {
  color: rgba(255, 255, 255, 0.3);
}

.section--dark .card--service .explore-link {
  color: #ffffff;
}

.section--dark .card--service .explore-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Ghost number card — light bg with large watermark number top-right */
.card--ghost-num {
  background: #f5f5f7;
  border: none;
  border-radius: 16px;
  padding: var(--s40);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card--ghost-num:hover {
  transform: translateY(-2px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card--ghost-num .step__number {
  position: absolute;
  top: 0px;
  right: 36px;
  font-size: 130px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  margin: 0;
  z-index: 0;
  height: auto;
  width: auto;
  background: transparent;
}

.card--ghost-num h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s10) 0;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}

.card--ghost-num p {
  font-size: 14px;
  color: #686868;
  line-height: 1.65;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Flat card (no border,filled bg) */
.card--flat {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s25);
  display: flex;
  flex-direction: column;
}

/* Flat card with extra padding */
.card--flat-lg {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s40) var(--s30);
  display: flex;
  flex-direction: column;
}

/* Large padded card */
.card--padded {
  padding: var(--s40) var(--s35);
}

/* ============ STAT COMPONENT ============ */
.stat__number {
  font-family: var(--font-primary);
  font-size: 56px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1;
  margin: 0 0 4px 0;
}

.stat__unit {
  font-size: var(--f-20);
  font-weight: 600;
  color: #686868;
  margin-left: 2px;
}

.stat__label {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s15) 0;
}

.stat__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

.section--light .stat__number {
  color: inherit;
}

.section--light .stat__unit {
  color: rgb(0 0 0 / 40%);
}

.section--light .stat__label {
  color: inherit;
}

.section--light .stat__desc {
  color: #6e6e73;
}

/* Stat overrides inside white cards (dark text on white bg) */
.card .stat__number,
.card--padded .stat__number {
  color: #1d1d1f;
}

.card .stat__unit,
.card--padded .stat__unit {
  color: #686868;
}

.card .stat__label,
.card--padded .stat__label {
  color: #1d1d1f;
  margin-bottom: 4px;
}

.card .stat__desc,
.card--padded .stat__desc {
  color: #6e6e73;
}

/* Stat overrides inside dark cards */
.card--dark .stat__number {
  color: #ffffff;
}

.card--dark .stat__unit {
  color: rgba(255, 255, 255, 0.4);
}

.card--dark .stat__label {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.card--dark .stat__desc {
  color: rgba(255, 255, 255, 0.5);
}

/* ============ VIDEO EMBED COMPONENT ============ */
.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  background: #2d2d2d;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--s20);
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed__placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.video-embed__placeholder svg {
  width: 48px;
  height: 48px;
}

.video-card__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 4px 0;
}

.video-card__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.5;
  margin: 0;
}

/* ============ STEP COMPONENT ============ */
.step__number {
  font-family: var(--font-primary);
  font-size: 130px;
  font-weight: 700;
  color: #ffffff;
  background: #2d2d2d;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s20);
}

.step__number--large {
  width: 32px;
  height: 32px;
}

.step__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s100) 0;
}

.step__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin: auto 0 0 0;
}

.step__duration {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 0 var(--s15) 0;
}

/* Step components on dark backgrounds */
.card--dark-accent .step__number,
.card--dark .step__number {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.card--dark-accent .step__duration,
.card--dark .step__duration {
  color: rgba(255, 255, 255, 0.4);
}

.card--dark-accent .step__title,
.card--dark .step__title {
  color: #ffffff;
}

.card--dark-accent .step__text,
.card--dark .step__text {
  color: rgba(255, 255, 255, 0.6);
}

/* ============ EXAMPLE BOX ============ */
.example-box {
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: var(--s15);
  margin-top: var(--s20);
}

.example-box__label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 0 var(--s10) 0;
}

.example-box__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  line-height: 1.5;
  margin: 0;
}

/* ============ BADGE ============ */
.badge {
  position: absolute;
  top: var(--s20);
  right: var(--s20);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 4px var(--s15);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============ LOGO BOX ============ */
.logo-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s20);
}

.logo-box svg {
  width: 28px;
  height: 28px;
}

/* Brand-colored logo boxes (tool pages) */
.logo-box--zapier {
  background: #ff4a00;
}

.logo-box--make {
  background: #6d00cc;
}

.logo-box--n8n {
  background: #ea4b71;
}

.logo-box--power {
  background: #0066ff;
}

/* ============ CARD INLINE ELEMENTS (h4 + p inside .card) ============ */
.card h4 {
  font-family: var(--font-primary);
  font-size: var(--f-24);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s50) 0;
}

.card p {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

.card p:last-child {
  margin-top: 0;
}

.card h3 {
  font-family: var(--font-primary);
  font-size: var(--f-24);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s20) 0;
  line-height: 1.25;
}

.card ul {
  list-style: none;
  padding: 0;
  margin: var(--s15) 0 0 0;
}

.card ul li {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: #6e6e73;
  padding: 5px 0 var(--s10) var(--s20);
  line-height: 1.5;
  position: relative;
}

.card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8c8cc;
}

.card--dark ul li::before,
.card--dark-accent ul li::before {
  background: rgba(255, 255, 255, 0.25);
}

/* ============ CARD TITLES & TEXT ============ */
.card__title {
  font-family: var(--font-primary);
  font-size: var(--f-24);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s100) 0;
}

.card__subtitle {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin: 0 0 var(--s15) 0;
}

.card__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.5;
  margin-top: auto;
  margin-bottom: 0;
}

/* List inside a card — used for bulleted capability/limitation lists */
.card__list {
  list-style: none;
  padding: 0;
  margin: var(--s10) 0 0 0;
  display: flex;
  flex-direction: column;
  margin-top: auto !important;
}

.card__list li {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  padding-left: var(--s20);
  position: relative;
}

.card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b0b0b5;
}

/* Dark card text variants */
.card--dark .card__title,
.card--dark-accent .card__title {
  color: #ffffff;
}

.card--dark .card__text,
.card--dark-accent .card__text {
  color: rgba(255, 255, 255, 0.6);
}

.card--dark h3,
.card--dark-accent h3 {
  color: #ffffff;
}

.card--dark h4,
.card--dark-accent h4 {
  color: #ffffff;
}

.card--dark p,
.card--dark-accent p {
  color: rgba(255, 255, 255, 0.6);
}

.card--dark ul li,
.card--dark-accent ul li {
  color: rgba(255, 255, 255, 0.5);
}

/* ============ LARGE NUMBER (decorative) ============ */
.big-number {
  font-family: var(--font-primary);
  font-size: 56px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
  margin-bottom: var(--s20);
}

.card:has(.big-number) .icon-box {
  display: none;
}

/* ============ ICON (for pricing / feature icons) ============ */
.icon-box {
  width: 44px;
  height: 44px;
  margin-bottom: var(--s20);
}

.icon-box svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section--gray .icon-box svg,
.section--light .icon-box svg {
  stroke: rgba(0, 0, 0, 0.6);
}

.section--dark .icon-box svg {
  stroke: rgba(255, 255, 255, 0.6);
}

/* ============ SPLIT PANEL (e.g.,70/30 dark panels) ============ */
.panel {
  background: #f5f5f5;
  border: none;
  border-radius: 16px;
  padding: var(--s40) var(--s35);
}

.panel__percent {
  font-family: var(--font-primary);
  font-size: 52px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1;
  margin: 0 0 var(--s10) 0;
}

.panel__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s100) 0;
}

.panel__desc {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.65;
  margin: 0 0 var(--s25) 0;
}

.panel__list li {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  padding: var(--s10) 0 var(--s10) var(--s20);
  position: relative;
  border-bottom: none;
}

.panel__list li:last-child {
  border-bottom: none;
}

.panel__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--s15);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

.section--gray .panel {
  background: #ffffff;
}

/* ============ BEFORE / AFTER (Transformation) ============ */
.compare {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: var(--s40);
}

.compare__before {
  background: #f5f5f5;
  border: none;
  border-radius: 16px;
  padding: var(--s40) var(--s35);
}

.compare__after {
  background: linear-gradient(180deg, #111111 0%, #1a1a1a 100%);
  border-radius: 16px;
  padding: var(--s40) var(--s35);
}

.compare__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare__arrow svg {
  width: 32px;
  height: 32px;
  color: #686868;
}

.compare__label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--s15) 0;
}

.compare__before .compare__label {
  color: #686868;
}

.compare__after .compare__label {
  color: rgba(255, 255, 255, 0.5);
}

.compare__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  margin: 0 0 var(--s100) 0;
}

.compare__before .compare__title {
  color: #1d1d1f;
}

.compare__after .compare__title {
  color: #ffffff;
}

.compare__text {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  line-height: 1.65;
  margin: 0 0 var(--s25) 0;
}

.compare__before .compare__text {
  color: #6e6e73;
}

.compare__after .compare__text {
  color: rgba(255, 255, 255, 0.6);
}

.compare__metric {
  border-top: none;
  padding-top: var(--s20);
}

.compare__before .compare__metric {
  border-top-color: transparent;
}

.compare__after .compare__metric {
  border-top-color: transparent;
}

.compare__metric-value {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 4px 0;
}

.compare__before .compare__metric-value {
  color: #686868;
}

.compare__after .compare__metric-value {
  color: #ffffff;
}

.compare__metric-label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  margin: 0;
}

.compare__before .compare__metric-label {
  color: #686868;
}

.compare__after .compare__metric-label {
  color: rgba(255, 255, 255, 0.5);
}

.compare__footer {
  text-align: center;
}

.compare__footer-text {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  margin: 0 0 var(--s10) 0;
}

.compare__footer-sub {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin: 0;
}

.section--dark .compare__footer-text {
  color: #ffffff;
}

.section--dark .compare__footer-sub {
  color: rgba(255, 255, 255, 0.5);
}

.section--light .compare__before {
  background: #ffffff;
}

.section--light .compare__before .compare__metric-value {
  color: #000000;
}

/* ============ VS COMPARISON TABLE ============ */
.vs-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 16px;
  overflow: hidden;
}

.vs-table thead th {
  padding: var(--s20) var(--s30);
  text-align: left;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vs-table thead th:first-child {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
  width: 220px;
}

.vs-table thead th:nth-child(2) {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.vs-table thead th:nth-child(3) {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
}

.vs-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vs-table tbody td {
  padding: var(--s30);
  vertical-align: top;
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  line-height: 1.6;
}

.vs-table tbody td:first-child {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.02);
  width: 220px;
}

.vs-table tbody td:nth-child(2) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.vs-table tbody td:nth-child(3) {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.01);
}
/* ============ FAQ ACCORDION ============ */
/* --- FAQ Split Layout (heading left,accordion right) --- */
.faq {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.faq__header {
  position: sticky;
  top: 120px;
}

.faq__title {
  font-family: var(--font-primary);
  font-size: clamp(72px, 10vw, 140px);
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s25);
}

.faq__intro {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  color: #6e6e73;
  line-height: 1.65;
}

.faq__list {
  margin: 0;
}

.faq__item {
  background: #ffffff;
  border-radius: 16px;
  padding: 0 var(--s30);
  margin-bottom: 3px;
}

.faq__item:first-child {
  border-top: none;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s25) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  text-align: left;
  gap: var(--s20);
  transition: color 0.3s;
}

.faq__question:hover,
.faq__question:focus {
  color: #686868;
  outline: none;
}

.faq__icon {
  flex-shrink: 0;
  color: #686868;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__answer-inner {
  padding: 0 0 var(--s25) 0;
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.65;
}

/* ============ CTA ROUND BOX (index.html) ============ */
.cta-roundbox {
  max-width: 1440px;
  margin: 0 auto;
  padding: 200px var(--s30) var(--s30);
}

.cta-roundbox__box {
  background: linear-gradient(180deg, #0a0a0a 0%, #2d2d2d 100%);
  border-radius: 20px;
  padding: 100px 64px;
}

.cta-roundbox__box .cta-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
/* ============ CTA SECTION ============ */
.cta-card {
  background: linear-gradient(180deg, #0a0a0a 0%, #2d2d2d 100%);
  border-radius: 16px;
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}

.cta-card__heading {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 var(--s20) 0;
}

.cta-card__text {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin: 0;
}

/* ============ CTA CARD SUBCOMPONENTS ============ */

/* Left info column */
.cta-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--s25);
}

/* Right form area — handles both div wrap and direct form */
.cta-card__form-wrap,
.cta-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--s20);
}

/* Numbered step list */
.cta-card__steps {
  display: flex;
  flex-direction: column;
  gap: var(--s15);
  margin-top: var(--s10);
}

.cta-card__step {
  display: flex;
  align-items: flex-start;
  gap: var(--s15);
}

.cta-card__step-num {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 24px;
  padding-top: 3px;
}

.cta-card__step-text {
  font-family: var(--font-primary);
  font-size: var(--f-15);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  margin: 0;
}

/* Bullet checklist variant */
.cta-card__checklist {
  list-style: none;
  margin: var(--s10) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s12);
}

.cta-card__checklist li {
  font-family: var(--font-primary);
  font-size: var(--f-15);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  padding-left: var(--s20);
  position: relative;
}

.cta-card__checklist li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 500;
}

/* Plain ul inside cta-card__info (for pages without checklist class) */
.cta-card__info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s12);
}

.cta-card__info ul li {
  font-family: var(--font-primary);
  font-size: var(--f-15);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  padding-left: var(--s20);
  position: relative;
}

.cta-card__info ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
}

/* ============ DARK BLOCK (dark container inside gray sections) ============ */
.dark-block {
  background: linear-gradient(180deg, #111111 0%, #1a1a1a 100%);
  border-radius: 16px;
  padding: 80px 60px;
  color: #f5f5f7;
}

.dark-block__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px auto;
}

/* Split header: title left, description right */
.dark-block__header--split {
  text-align: left;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s40);
  align-items: start;
}

.dark-block__header--split .section-heading {
  margin-bottom: 0;
}

.dark-block__header--split .section-intro {
  margin-top: 0;
}

.dark-block .section-label {
  color: rgba(255, 255, 255, 0.5);
}

.dark-block .section-heading {
  color: #ffffff;
}

.dark-block .section-heading .muted,
.dark-block .section-heading span {
  color: rgba(255, 255, 255, 0.4);
}

.dark-block .section-intro {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--f-16);
  line-height: 1.6;
}

.dark-block__stat {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: var(--s40) var(--s30);
  display: flex;
  flex-direction: column;
  gap: var(--s30);
}

.dark-block__stat .stat__number {
  color: #ffffff;
  display: block;
}

.dark-block__stat .stat__label {
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-top: var(--s10);
}

.dark-block__stat p {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-primary);
  font-size: var(--f-16);
  line-height: 1.6;
}
/* ============ FORM ============ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s20);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s20);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}

.form__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

.form__input,
.form__textarea {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 8px;
  padding: var(--s15) var(--s20);
  outline: none;
  transition: border-color 0.2s ease;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.form__input:focus,
.form__textarea:focus {
  border-color: rgba(255, 255, 255, 0.35);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__submit {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 980px;
  padding: var(--s10) var(--s30);
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.form__submit:hover {
  background: #f5f5f5;
  border-color: #1d1d1f;
}

/* ============ ILLUSTRATION PLACEHOLDER ============ */
.illo-placeholder {
  background: #f5f5f5;
  border: none;
  border-radius: 16px;
  padding: var(--s40) var(--s25);
  text-align: center;
  margin-top: var(--s35);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.illo-placeholder__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #686868;
  display: block;
  margin-bottom: var(--s10);
}

.illo-placeholder__desc {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: #b0b0b5;
  display: block;
  max-width: 240px;
}

/* ============ PROBLEM LABEL (on flat cards) ============ */
.card__problem {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 0 var(--s10) 0;
}

.card__title--sm {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s100) 0;
}

/* ============ PRICING NOTE ============ */
.pricing-note {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  text-align: center;
  margin: var(--s40) 0 0 0;
}

.pricing-note a {
  color: #1d1d1f;
  font-weight: 500;
  text-decoration: none;
}

.pricing-note a:hover {
  text-decoration: underline;
}

.section--gray .pricing-note {
  color: rgba(0, 0, 0, 0.6);
}

.section--gray .pricing-note a {
  color: rgba(0, 0, 0, 1);
}

/* ============ DARK CARD TITLES (pricing factors,etc.) ============ */
.card--dark .card__title--sm,
.card--dark-accent .card__title--sm {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 var(--s100) 0;
}

/* ============ BACK LINK ============ */
.back-link {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: #1d1d1f;
  text-decoration: underline;
}

/* ============ ANIMATIONS ============ */
/* .reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.stagger {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
} */

.stagger.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger:nth-child(1) {
  transition-delay: 0ms;
}

.stagger:nth-child(2) {
  transition-delay: 100ms;
}

.stagger:nth-child(3) {
  transition-delay: 200ms;
}

.stagger:nth-child(4) {
  transition-delay: 300ms;
}

.stagger:nth-child(5) {
  transition-delay: 400ms;
}

.stagger:nth-child(6) {
  transition-delay: 500ms;
}

.stagger:nth-child(7) {
  transition-delay: 600ms;
}

.stagger:nth-child(8) {
  transition-delay: 700ms;
}

/* ============ UTILITY CLASSES ============ */
.text-center {
  text-align: center;
}

.text-white {
  color: #ffffff;
}

.text-muted {
  color: #686868;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-40 {
  margin-bottom: var(--s40);
}

/* ============ FOOTER ============ */
.footer {
  background: #2d2d2d;
  padding: 64px 0 var(--s35);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: rgba(255, 255, 255, 0.4);
}

/* ============ EQUATION BLOCKS (stat equation layout) ============ */
.equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s25);
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.equation__block {
  background: #f5f5f5;
  border: none;
  border-radius: 16px;
  padding: 64px var(--s30);
  min-width: 200px;
  flex: 1;
  max-width: 260px;
  text-align: left;
}

.equation__block--highlight {
  border-color: rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.equation__value {
  display: block;
  font-family: var(--font-primary);
  font-size: 48px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1;
  margin-bottom: var(--s10);
}

.equation__block--highlight .equation__value {
  color: #1d1d1f;
}

.equation__label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: #6e6e73;
  line-height: 1.5;
}

.equation__operator {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.2);
}

.equation__solution {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.equation__solution-title {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 var(--s15) 0;
}

.equation__solution-text {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  line-height: 1.6;
  color: #6e6e73;
  margin: 0;
}

/* ============ COLUMN STRIP (side-by-side feature columns) ============ */
.col-strip {
  display: grid;
  gap: 0;
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.col-strip--5 {
  grid-template-columns: repeat(5, 1fr);
}

.col-strip__item {
  padding: var(--s35) var(--s25);
  border-right: none;
}

.col-strip__item:last-child {
  border-right: none;
}

.col-strip__num {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #686868;
  margin-bottom: var(--s15);
}

.col-strip__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s100) 0;
}

.col-strip__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0 0 var(--s15) 0;
}

.col-strip__example {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-style: italic;
  color: #686868;
  margin: 0;
  line-height: 1.5;
}

/* ============ TYPE CARD (card with role label) ============ */
.type-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s30) var(--s25);
}

.type-card__name {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s100) 0;
}

.type-card__role {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin: 0 0 var(--s10) 0;
}

.type-card__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  line-height: 1.55;
  color: #6e6e73;
  margin: 0;
}

/* ============ GRID ROW VARIANTS ============ */
.grid--4-3 .grid-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.grid--4-3 .grid-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  max-width: calc((100% - 9px) / 4 * 3 + 6px);
  margin: 0 auto;
}

/* ============ SOURCE TAGS ============ */
.source-group {
  margin-bottom: var(--s25);
}

.source-group:last-child {
  margin-bottom: 0;
}

.source-group__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #686868;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--s10) 0;
}

.source-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s10);
}

.source-tag {
  display: inline-block;
  padding: var(--s10) var(--s15);
  background: #ffffff;
  border: none;
  border-radius: 16px;
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
}

/* ============ TIMELINE (vertical progress steps) ============ */
.timeline {
  max-width: 720px;
  margin: 0 auto;
}

.timeline__step {
  display: flex;
  gap: var(--s25);
  margin-bottom: var(--s35);
}

.timeline__step:last-child {
  margin-bottom: 0;
}

.timeline__bar {
  position: relative;
  width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}

.timeline__bar::after {
  content: '';
  position: absolute;
  top: var(--s40);
  left: 50%;
  width: 1px;
  height: calc(100% + 32px);
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(-50%);
}

.timeline__step:last-child .timeline__bar::after {
  display: none;
}

.timeline__num {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.timeline__body {
  flex: 1;
  padding-top: 2px;
}

.timeline__header {
  display: flex;
  align-items: baseline;
  gap: var(--s15);
  margin-bottom: var(--s10);
}

.timeline__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.timeline__duration {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: #686868;
}

.timeline__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  line-height: 1.6;
  color: #6e6e73;
  margin: 0;
}

/* Timeline on light/gray backgrounds */
.section--light .timeline__bar::after,
.section--gray .timeline__bar::after {
  background: #e8e8ed;
}

.section--light .timeline__num,
.section--gray .timeline__num {
  background: #2d2d2d;
  color: #ffffff;
}

.section--light .timeline__title,
.section--gray .timeline__title {
  color: #1d1d1f;
}

.section--light .timeline__duration,
.section--gray .timeline__duration {
  color: #686868;
}

.section--light .timeline__text,
.section--gray .timeline__text {
  color: #6e6e73;
}

/* ============ SPEC ROWS (label + description, divider-separated) ============ */
.spec-list {
  max-width: 960px;
  margin: 0 auto;
  border-top: 1px solid #e8e8ed;
}

.spec-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s35);
  padding: var(--s30) 0;
  border-bottom: 1px solid #e8e8ed;
  align-items: baseline;
}

.spec-row__label {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.spec-row__text {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

/* Spec rows on dark backgrounds */
.section--dark .spec-list {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.section--dark .spec-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.section--dark .spec-row__label {
  color: #ffffff;
}

.section--dark .spec-row__text {
  color: rgba(255, 255, 255, 0.6);
}

/* ============ SPEC CARD (contained card wrapper for spec-list + heading) ============ */
.spec-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 56px 56px var(--s25);
  max-width: 960px;
  margin: 0 auto;
}

.spec-card__heading {
  font-family: var(--font-primary);
  font-size: var(--f-28);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 var(--s35) 0;
  line-height: 1.3;
}

.spec-card__heading .muted {
  color: #686868;
}

.spec-card .spec-list {
  max-width: none;
  margin: 0;
}

/* Dark section variant */
.section--dark .spec-card {
  background: rgba(255, 255, 255, 0.04);
}

.section--dark .spec-card__heading {
  color: #ffffff;
}

.section--dark .spec-card__heading .muted {
  color: rgba(255, 255, 255, 0.4);
}

/* ============ SPEC-ROW SPLIT (heading + description left / bullet list right) ============ */
.spec-row--split {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s50);
  padding: var(--s50) 0;
}

.spec-row__left {
  display: flex;
  flex-direction: column;
  gap: var(--s15);
}

.spec-row__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.spec-row__title {
  font-family: var(--font-primary);
  font-size: var(--f-22);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  line-height: 1.3;
}

.spec-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s12);
}

.spec-row__list li {
  font-family: var(--font-primary);
  font-size: var(--f-15);
  color: #6e6e73;
  line-height: 1.55;
  padding-left: var(--s20);
  position: relative;
}

.spec-row__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #686868;
}

/* Dark section overrides for spec-row--split */
.section--dark p{color: rgba(255, 255, 255, 0.6);}
.section--dark .timeline__title,
.section--dark .spec-row__title {
  color: #ffffff;
}

.section--dark .spec-row__list li {
  color: rgba(255, 255, 255, 0.6);
}

.section--dark .spec-row__list li::before {
  color: rgba(255, 255, 255, 0.25);
}

/* Stat-bento item alias (same as card) */
.stat-bento__item {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: var(--s50) var(--s40);
  display: flex;
  flex-direction: column;
  gap: var(--s15);
}

/* ============ STAT BENTO (4-col grid, number top + label bottom) ============ */
.stat-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.stat-bento__card {
  background: #ffffff;
  border-radius: 20px;
  padding: var(--s50) var(--s40);
  min-height: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-bento__card--number {
  min-height: 100px;
  justify-content: flex-end;
}

.stat-bento__card--label {
  min-height: 300px;
  justify-content: space-between;
}

.stat-bento__index {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #ff4a00;
  position: absolute;
  top: 40px;
  right: 40px;
  display: none;
}

.stat-bento__number {
  font-family: var(--font-primary);
  font-size: 72px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.stat-bento__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
  margin: 0;
}

.stat-bento__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  line-height: 1.6;
  margin: 0;
}

/* Stat bento on dark backgrounds */
.section--dark .stat-bento__card {
  background: rgba(255, 255, 255, 0.06);
}

.section--dark .stat-bento__number {
  color: #ffffff;
}

.section--dark .stat-bento__title {
  color: #ffffff;
}

.section--dark .stat-bento__text {
  color: rgba(255, 255, 255, 0.5);
}

.section--dark .stat-bento__index {
  color: #ff4a00;
}
/* ============ DELIVER CARD (with icon box) ============ */
.deliver-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 var(--s25);
  text-align: center;
  position: relative;
}

.deliver-card__title {
  font-family: var(--font-primary);
  font-size: var(--f-18);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: var(--s15);
}

.deliver-card__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* ============ SHOWCASE PANEL (example dashboard cards) ============ */
.showcase {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.showcase__panel {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.showcase__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s25) var(--s30);
  border-bottom: none;
  flex-wrap: wrap;
  gap: var(--s15);
}

.showcase__tag {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin: 0 0 4px 0;
}

.showcase__title {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.showcase__sources {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: #686868;
}

.showcase__sources strong {
  color: #6e6e73;
}

.showcase__body {
  display: grid;
  grid-template-columns: 260px 1fr;
}

.showcase__sidebar {
  padding: var(--s25) var(--s30);
  border-right: none;
  background: #ffffff;
}

.showcase__sidebar-title {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #686868;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--s15) 0;
}

.showcase__feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.showcase__feature-list li {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: #1d1d1f;
  padding: var(--s10) 0;
  border-bottom: none;
  line-height: 1.4;
}

.showcase__feature-list li:last-child {
  border-bottom: none;
}

.showcase__mockup {
  padding: var(--s20);
  background: #ffffff;
  overflow-x: auto;
}

/* ============ MOCK DASHBOARD (mini dashboard UI) ============ */
.mock {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--font-primary);
}

.mock__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s10) var(--s20);
  border-bottom: none;
  background: #fafafa;
}

.mock__nav-left {
  display: flex;
  align-items: center;
  gap: var(--s10);
}

.mock__logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-primary);
  background: #2d2d2d;
}

.mock__logo--alt {
  background: #6e6e73;
}

.mock__nav-title {
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
}

.mock__status {
  font-size: 9px;
  font-weight: 500;
  padding: 2px var(--s10);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.mock__status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34c759;
  display: inline-block;
}

.mock__nav-right {
  display: flex;
  align-items: center;
  gap: var(--s10);
}

.mock__tab {
  font-size: 10px;
  color: #686868;
  padding: 3px var(--s10);
  border-radius: 4px;
  cursor: default;
}

.mock__tab--active {
  background: #f0f0f2;
  color: #1d1d1f;
  font-weight: 600;
}

.mock__period {
  font-size: 10px;
  color: #686868;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mock__period svg {
  width: 12px;
  height: 12px;
}

/* KPI row */
.mock__kpi-row {
  display: grid;
  gap: var(--s10);
  padding: var(--s15) var(--s20);
}

.mock__kpi-row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.mock__kpi {
  background: #fafafa;
  border: none;
  border-radius: 8px;
  padding: var(--s10) var(--s15);
  position: relative;
  overflow: hidden;
}

.mock__kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mock__kpi-label {
  font-size: 9px;
  color: #686868;
  font-weight: 500;
}

.mock__kpi-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px var(--s10);
  border-radius: 4px;
}

.mock__kpi-badge--up {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.mock__kpi-badge--down {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

.mock__kpi-badge--flat {
  background: rgba(134, 134, 139, 0.1);
  color: #686868;
}

.mock__kpi-value {
  font-size: var(--f-20);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 2px 0;
  font-family: var(--font-primary);
}

.mock__kpi-sub {
  font-size: 8px;
  color: #686868;
  margin: 0;
}

.mock__kpi-spark {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 24px;
}

/* Mock cards */
.mock__card {
  margin: 0 var(--s20) var(--s10) var(--s20);
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: var(--s15) var(--s15);
}

.mock__card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s10);
}

.mock__card-title {
  font-size: 10px;
  font-weight: 600;
  color: #1d1d1f;
}

.mock__card-subtitle {
  font-size: 9px;
  color: #686868;
}

.mock__svg-chart {
  width: 100%;
  height: auto;
  display: block;
}

.mock__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s10);
  margin: 0 var(--s20) var(--s10) var(--s20);
}

.mock__row .mock__card {
  margin: 0;
}

/* Mock table rows */
.mock__table {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}

.mock__tr {
  display: grid;
  grid-template-columns: 8px 80px 1fr 70px;
  align-items: center;
  gap: var(--s10);
}

.mock__tr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mock__dot--dark {
  background: #2d2d2d;
}

.mock__dot--blue {
  background: #007aff;
}

.mock__dot--green {
  background: #34c759;
}

.mock__dot--purple {
  background: #af52de;
}

.mock__dot--teal {
  background: #5ac8fa;
}

.mock__dot--gray {
  background: #686868;
}

.mock__tr-label {
  font-size: 9px;
  color: #1d1d1f;
  font-weight: 500;
}

.mock__tr-bar {
  height: 6px;
  background: #f0f0f2;
  border-radius: 3px;
  overflow: hidden;
}

.mock__tr-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.mock__bar--dark {
  background: #2d2d2d;
}

.mock__bar--blue {
  background: #007aff;
}

.mock__bar--green {
  background: #34c759;
}

.mock__bar--purple {
  background: #af52de;
}

.mock__bar--teal {
  background: #5ac8fa;
}

.mock__bar--gray60 {
  background: rgba(29, 29, 31, 0.6);
}

.mock__bar--gray40 {
  background: rgba(29, 29, 31, 0.4);
}

.mock__bar--gray25 {
  background: rgba(29, 29, 31, 0.25);
}

.mock__tr-val {
  font-size: 9px;
  color: #1d1d1f;
  font-weight: 600;
  text-align: right;
}

.mock__cash-positive {
  color: #34c759 !important;
}

/* Width utilities for mock bars */
.w-100 {
  width: 100%;
}

.w-82 {
  width: 82%;
}

.w-75 {
  width: 75%;
}

.w-58 {
  width: 58%;
}

.w-56 {
  width: 56%;
}

.w-42 {
  width: 42%;
}

.w-38 {
  width: 38%;
}

.w-28 {
  width: 28%;
}

.w-24 {
  width: 24%;
}

.w-13 {
  width: 13%;
}

.w-8 {
  width: 8%;
}

/* AI insight box */
.mock__ai {
  display: flex;
  gap: var(--s15);
  padding: var(--s15) var(--s20) var(--s15) var(--s20);
  margin: 0 var(--s20) var(--s15) var(--s20);
  background: rgba(29, 29, 31, 0.03);
  border: none;
  border-radius: 8px;
}

.mock__ai-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock__ai-icon svg {
  width: 16px;
  height: 16px;
}

.mock__ai-content {
  flex: 1;
}

.mock__ai-label {
  font-size: 9px;
  font-weight: 700;
  color: #1d1d1f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
}

.mock__ai-text {
  font-size: 10px;
  line-height: 1.5;
  color: #1d1d1f;
  margin: 0 0 var(--s10) 0;
}

.mock__ai-text strong {
  font-weight: 600;
}

.mock__ai-actions {
  display: flex;
  gap: var(--s10);
}

.mock__ai-btn {
  font-size: 9px;
  font-weight: 600;
  padding: 4px var(--s10);
  border-radius: 4px;
  background: #2d2d2d;
  color: #ffffff;
  cursor: default;
}

.mock__ai-btn--ghost {
  background: transparent;
  border: none;
  color: #686868;
}

/* Donut chart */
.mock__donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--s20);
}

.mock__donut-svg {
  flex-shrink: 0;
}

.mock__donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mock__donut-li {
  display: flex;
  align-items: center;
  gap: var(--s10);
  font-size: 9px;
  color: #1d1d1f;
}

.mock__donut-li-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mock__donut-li-val {
  margin-left: auto;
  font-weight: 600;
  color: #6e6e73;
}

/* Funnel */
.mock__funnel {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
  margin-top: var(--s10);
}

.mock__funnel-step {
  display: flex;
  align-items: center;
  gap: var(--s10);
}

.mock__funnel-bar-wrap {
  flex: 1;
  height: 10px;
  background: #f5f5f5;
  border-radius: 5px;
  overflow: hidden;
}

.mock__funnel-bar-fill {
  height: 100%;
  border-radius: 5px;
}

.mock__funnel-label {
  font-size: 9px;
  color: #1d1d1f;
  font-weight: 500;
  white-space: nowrap;
  min-width: 60px;
}

.mock__funnel-meta {
  display: flex;
  gap: var(--s15);
  margin-top: var(--s10);
  font-size: 8px;
  color: #686868;
}

.mock__chart-mt {
  margin-top: var(--s10);
}

/* ============ SYMPTOM ROW (numbered problem list with stat) ============ */
.symptom-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--s50);
}

.symptom-row {
  display: grid;
  grid-template-columns: 48px 1fr 180px;
  align-items: center;
  gap: var(--s20);
  padding: var(--s20) 0;
  border-bottom: none;
  background: #fff;
  border-radius: 18px;
  padding-left: var(--s20);
}

.symptom-row:first-child {
  border-top: none;
}

.symptom-num {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 700;
  color: #1d1d1f;
}

.symptom-text {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.55;
  margin: 0;
}

.symptom-stat {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #1d1d1f;
  background: #ffffff;
  border: none;
  border-radius: 20px;
  padding: var(--s10) var(--s15);
  text-align: center;
  white-space: nowrap;
}

/* ============ CHAT MOCKUP (conversational AI demo) ============ */
.chat {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  max-width: 480px;
}

.chat__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s15) var(--s20);
  background: #1a1a1a;
  border-bottom: none;
}

.chat__topbar-left {
  display: flex;
  align-items: center;
  gap: var(--s10);
}

.chat__topbar-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat__topbar-icon svg {
  width: 14px;
  height: 14px;
}

.chat__topbar-title {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #ffffff;
}

.chat__topbar-status {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: var(--s10);
}

.chat__topbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34c759;
  display: inline-block;
}

.chat__body {
  padding: var(--s20);
  display: flex;
  flex-direction: column;
  gap: var(--s20);
  background: #fafafa;
  max-height: 400px;
  overflow-y: auto;
}

.chat__msg {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  line-height: 1.6;
  padding: var(--s15) var(--s20);
  border-radius: 16px;
  max-width: 92%;
}

.chat__msg--user {
  background: #2d2d2d;
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat__msg--ai {
  background: #f5f5f5;
  color: #1d1d1f;
  border: none;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat__msg--ai strong {
  font-weight: 600;
}

.chat__source {
  font-family: var(--font-primary);
  font-size: 12px;
  color: #686868;
  margin-top: var(--s10);
  padding-top: var(--s10);
  border-top: none;
  line-height: 1.4;
}

.chat__input {
  display: flex;
  align-items: center;
  gap: var(--s15);
  padding: var(--s15) var(--s20);
  border-top: none;
  background: transparent;
}

.chat__input-field {
  flex: 1;
  font-family: var(--font-primary);
  font-size: var(--f-14);
  color: #686868;
}

.chat__input-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2d2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat__input-btn svg {
  width: 14px;
  height: 14px;
}

/* ============ CHECK LIST (feature bullets with check icon) ============ */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--s15);
  margin-top: var(--s35);
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s15);
  font-family: var(--font-primary);
  font-size: var(--f-16);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.section--light .check-list__item,
.section--gray .check-list__item {
  color: #1d1d1f;
}

.check-list__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-list__icon svg {
  width: 14px;
  height: 14px;
}

/* ============ COMP ROW (horizontal component list) ============ */
.comp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s50);
}

.comp-row {
  display: grid;
  grid-template-columns: 56px 1fr 140px;
  align-items: center;
  gap: var(--s20);
  padding: var(--s25) 0;
  border-bottom: none;
}

.comp-row:first-child {
  border-top: none;
}

.comp-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #2d2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-icon svg {
  width: 24px;
  height: 24px;
}

.comp-title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 4px 0;
}

.comp-desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.55;
  margin: 0;
}

.comp-tech {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #686868;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============ SOURCE / FILE BADGES ============ */
.badge-band {
  margin-bottom: var(--s35);
}

.badge-band:last-child {
  margin-bottom: 0;
}

.badge-band__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #686868;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--s15) 0;
}

.badge-band__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s10);
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s10);
  padding: var(--s10) var(--s20);
  background: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
}

.source-badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.file-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s10);
  padding: var(--s10) var(--s20);
  background: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
}

.file-badge__ext {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  padding: 3px var(--s10);
  border-radius: 4px;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.file-badge__ext--pdf {
  background: #c0392b;
}

.file-badge__ext--docx {
  background: #2980b9;
}

.file-badge__ext--xlsx {
  background: #27ae60;
}

.file-badge__ext--gdoc {
  background: #3498db;
}

.file-badge__ext--gsheet {
  background: #2ecc71;
}

.file-badge__ext--txt {
  background: #686868;
}

.file-badge__ext--ocr {
  background: #8e44ad;
}

/* ============ CASE CARD (Q&A chat-style use case) ============ */
.case-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.case-card__tag {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--s20) var(--s25);
  border-bottom: none;
  background: #fafafa;
}

.case-card__body {
  padding: var(--s20) var(--s25);
  display: flex;
  flex-direction: column;
  gap: var(--s15);
}

.case-q {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #ffffff;
  background: #2d2d2d;
  padding: var(--s15) var(--s20);
  border-radius: 10px;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  max-width: 90%;
  line-height: 1.5;
}

.case-a {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
  background: #f5f5f5;
  padding: var(--s15) var(--s20);
  border-radius: 10px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  max-width: 92%;
  line-height: 1.6;
}

.case-a strong {
  font-weight: 600;
}

.case-source {
  font-family: var(--font-primary);
  font-size: 12px;
  color: #686868;
  margin-top: var(--s10);
}

/* ============ ACCESS MATRIX (permission table) ============ */
.access-matrix {
  margin-top: var(--s50);
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.access-matrix__header {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  background: #1a1a1a;
  padding: var(--s15) var(--s25);
  gap: var(--s10);
}

.access-matrix__header span {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.access-matrix__header span:first-child {
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
}

.access-row {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  padding: var(--s15) var(--s25);
  gap: var(--s10);
  align-items: center;
  border-bottom: none;
}

.access-row:last-child {
  border-bottom: none;
}

.access-row:nth-child(even) {
  background: #fafafa;
}

.access-row__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
}

.access-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-cell svg {
  width: 14px;
  height: 14px;
}

/* ============ SECTION HEADER SPACING (reusable margin-bottom) ============ */
.section-header-mb {
  margin-bottom: var(--s50);
}

/* ================================================================ RESPONSIVE ================================================================ */
/* ================================================================ LEGACY INTEGRATION — Reusable Components ================================================================ */
/* ============ FALSE CHOICE ============ */
.choice {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s25);
  margin-top: var(--s50);
}

.choice__option {
  flex: 1;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 16px;
  padding: var(--s40);
  text-align: left;
}

.choice__option-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: var(--s20);
}

.choice__option-title {
  font-size: var(--f-20);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: var(--s100);
}

.choice__option-desc {
  font-size: var(--f-14);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}

.choice__or {
  display: flex;
  align-items: center;
  font-size: var(--f-14);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.choice__reveal {
  margin-top: var(--s50);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 16px;
  padding: var(--s40);
  text-align: left;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.choice__reveal-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--s15);
}

.choice__reveal-text {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

/* Light/gray section variant for choice */
.section--light .choice__option,
.section--gray .choice__option {
  background: #ffffff;
  border-color: #e8e8ed;
}

.section--light .choice__option-label,
.section--gray .choice__option-label {
  color: #686868;
}

.section--light .choice__option-title,
.section--gray .choice__option-title {
  color: #1d1d1f;
}

.section--light .choice__option-desc,
.section--gray .choice__option-desc {
  color: #6e6e73;
}

.section--light .choice__or,
.section--gray .choice__or {
  color: #686868;
}

.section--light .choice__reveal,
.section--gray .choice__reveal {
  background: #2d2d2d;
  border: none;
}

/* ============ WAY LAYERS ============ */
.way-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 1200px;
  margin: 0 auto;
}

.way-layer {
  display: grid;
  grid-template-columns: 48px 250px 1fr;
  gap: var(--s25);
  align-items: start;
  padding: var(--s30);
  border-bottom: none;
  border-radius: 18px;
  background: #ffffff;
}

.way-layer:last-child {
  border-bottom: none;
}

.way-layer__icon {
  width: 48px;
  height: 48px;
  background: #f5f5f5;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.way-layer__icon svg {
  width: 22px;
  height: 22px;
}

.way-layer__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.way-layer__name {
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
}

.way-layer__when {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #686868;
}

.way-layer__desc {
  font-size: var(--f-16);
  color: #6e6e73;
  line-height: 1.65;
  padding-top: 2px;
}

/* ============ ADDS / CAPABILITY ITEMS ============ */
.adds-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adds-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s20);
  padding: var(--s20);
  border-bottom: none;
  background: #fff;
  border-radius: 20px;
}

.adds-item:last-child {
  border-bottom: none;
}

.adds-item__icon {
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.adds-item__icon svg {
  width: 20px;
  height: 20px;
}

.adds-item__title {
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}

.adds-item__text {
  font-size: var(--f-14);
  color: #6e6e73;
  line-height: 1.6;
  margin-bottom: var(--s10);
}

.adds-item__example {
  font-size: var(--f-14);
  color: #686868;
  font-style: italic;
}

/* ============ SYSTEM CATEGORY CARDS ============ */
.sys-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s35);
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
}

.sys-card__label {
  font-size: var(--f-20);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #1d1d1f;
  margin-bottom: var(--sectionSpace);
}

.sys-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
  margin-bottom: var(--s20);
}

.sys-card__list li {
  font-size: var(--f-16);
  color: #1d1d1f;
  padding-left: var(--s20);
  position: relative;
}

.sys-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--s10);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #686868;
}

.sys-card__note {
  font-size: var(--f-14);
  color: #686868;
  font-style: italic;
}

/* ============ INTEGRATION FLOW CARDS ============ */
.flow-card {
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 16px;
  padding: var(--s35);
  display: flex;
  flex-direction: column;
  gap: var(--s25);
}

.flow-card__tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.flow-card__title {
  font-size: var(--f-20);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 var(--s100) 0;
}

.flow-card__steps {
  display: flex;
  flex-direction: column;
  gap: var(--s20);
}

.flow-card__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s15);
  align-items: start;
}

.flow-card__step-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.flow-card__step-icon svg {
  width: 14px;
  height: 14px;
}

.flow-card__step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 2px;
}

.flow-card__step-text {
  font-size: var(--f-14);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.flow-card__result {
  border-top: none;
  padding-top: var(--s20);
}

.flow-card__result-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: var(--s10);
}

.flow-card__result-text {
  font-size: var(--f-16);
  color: #ffffff;
  font-weight: 500;
  line-height: 1.5;
}

/* ============ STACK LAYERS ============ */
.stack-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 1060px;
  margin: 0 auto;
}

.stack-layer {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s35);
  align-items: center;
  padding: var(--s30) 0;
  border-bottom: none;
}

.stack-layer:last-child {
  border-bottom: none;
}

.stack-layer__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #686868;
  margin-bottom: 4px;
}

.stack-layer__name {
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
}

.stack-layer__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s10);
}

.stack-layer__item {
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  padding: calc(var(--s10)/2) var(--s20);
}

/* ============ PRICING FACTORS ============ */
.pricing-factors {
  display: flex;
  justify-content: center;
  gap: var(--s50);
  flex-wrap: wrap;
  margin-top: var(--s50);
}

.pricing-factor {
  display: flex;
  align-items: center;
  gap: var(--s15);
}

.pricing-factor__icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-factor__icon svg {
  width: 22px;
  height: 22px;
}

.pricing-factor__text {
  font-size: var(--f-16);
  font-weight: 500;
  color: #ffffff;
}

/* ============ RESPONSIVE — NEW COMPONENTS ============ */
/* ============ SQUIGGLY UNDERLINE ACCENT ============ */
.squiggle {
  position: relative;
  display: inline;
}

.squiggle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(var(--s10) * -1);
  width: 100%;
  height: 38px;
  background-image: url('title-highlight-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

/* ============ BEFORE / AFTER EXAMPLES ============ */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.ba-example {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.ba-example__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}

.ba-example__img {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ba-example__img--before {
  background: #e8e8ed;
}

.ba-example__img--after {
  background: #f5f5f7;
}

.ba-example__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-example__badge {
  position: absolute;
  top: var(--s15);
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px var(--s10);
  border-radius: 980px;
}

.ba-example__img--before .ba-example__badge {
  left: var(--s15);
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

.ba-example__img--after .ba-example__badge {
  right: var(--s15);
  background: #2d2d2d;
  color: #ffffff;
}

.ba-example__divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}

.ba-example__info {
  padding: var(--s20) var(--s25);
}

.ba-example__category {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #686868;
  margin-bottom: 4px;
}

.ba-example__name {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 600;
  color: #1d1d1f;
}

/* Dark section variant */
.section--dark .ba-example {
  background: rgba(255, 255, 255, 0.04);
}

.section--dark .ba-example__img--before {
  background: rgba(255, 255, 255, 0.06);
}

.section--dark .ba-example__img--after {
  background: rgba(255, 255, 255, 0.06);
}

.section--dark .ba-example__category {
  color: rgba(255, 255, 255, 0.4);
}

.section--dark .ba-example__name {
  color: #ffffff;
}

.section--dark .ba-example__divider {
  background: rgba(255, 255, 255, 0.2);
}

/* Placeholder icons for before/after when no image is provided */
.ba-example__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s10);
  color: #686868;
}

.ba-example__placeholder svg {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

.ba-example__placeholder span {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
}
/* ================================================================ AI READINESS AUDIT — Custom Components ================================================================ */
/* ============ SCORECARD (dark mockup card) ============ */
.scorecard {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  overflow: hidden;
}

.scorecard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s20) var(--s25);
  background: rgba(255, 255, 255, 0.04);
}

.scorecard__title {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.scorecard__date {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
}

.scorecard__body {
  padding: var(--s35) var(--s25);
  display: flex;
  gap: var(--s35);
  align-items: flex-start;
}

.scorecard__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s10);
  flex-shrink: 0;
}

.scorecard__ring-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scorecard__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scorecard__num {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.scorecard__of {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  position: absolute;
  bottom: var(--s20);
  left: 50%;
  transform: translateX(-50%);
}

.scorecard__score-label {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.scorecard__bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}

.scorecard__bar-row {
  display: flex;
  align-items: center;
  gap: var(--s15);
}

.scorecard__bar-label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  width: 90px;
  flex-shrink: 0;
  text-align: right;
}

.scorecard__bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.scorecard__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}

.scorecard__bar-fill--low {
  background: #e84393;
}

.scorecard__bar-fill--med {
  background: #686868;
}

.scorecard__bar-fill--high {
  background: #ffffff;
}

.scorecard__bar-val {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  width: 32px;
  flex-shrink: 0;
}
/* ============ DEPARTMENT LIST (rows with tags) ============ */
.dept-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dept-row {
  display: flex;
  align-items: center;
  gap: var(--s20);
  padding: var(--s20) var(--s25);
  background: #ffffff;
  border-radius: 16px;
}

.dept-row__name {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 600;
  color: #1d1d1f;
  width: 120px;
  flex-shrink: 0;
}

.dept-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s10);
}

.dept-row__tag {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: #6e6e73;
  background: #f5f5f5;
  padding: 4px var(--s15);
  border-radius: 980px;
}
/* ============ REPORT MOCKUP (deliverables visual) ============ */
.report-mock {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

.report-mock__bar {
  height: 4px;
  background: #2d2d2d;
}

.report-mock__body {
  padding: var(--s35);
}

.report-mock__logo {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  color: #686868;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--s20);
}

.report-mock__title {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 var(--s10) 0;
}

.report-mock__subtitle {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  display: block;
  margin-bottom: var(--s30);
}

.report-mock__sections {
  display: flex;
  flex-direction: column;
  gap: var(--s15);
}

.report-mock__row {
  display: flex;
  align-items: center;
  gap: var(--s15);
}

.report-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.report-mock__dot--pink {
  background: #e84393;
}

.report-mock__dot--dark {
  background: #2d2d2d;
}

.report-mock__dot--blue {
  background: #3498db;
}

.report-mock__dot--green {
  background: #27ae60;
}

.report-mock__dot--gray {
  background: #686868;
}

.report-mock__name {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
  flex: 1;
}

.report-mock__pages {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: #686868;
  flex-shrink: 0;
}
/* ============ DELIVER LIST (numbered deliverable items) ============ */
.deliver-list {
  display: flex;
  flex-direction: column;
  gap: var(--s20);
  margin-top: var(--s25);
}

.deliver-list__item {
  display: flex;
  gap: var(--s20);
  align-items: flex-start;
}

.deliver-list__num {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 700;
  color: #1d1d1f;
  background: #f5f5f5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.deliver-list__name {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 4px 0;
}

.deliver-list__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.5;
  margin: 0;
}

.section--gray .deliver-list__num {
  background-color: #ffffff;
}

.section--gray .deliver-extras__pill {
  background: #ffffff;
}

/* ============ DELIVER EXTRAS (pills section) ============ */
.deliver-extras {
  margin-top: var(--s35);
  padding-top: var(--s25);
  border-top: 1px solid #e8e8ed;
}

.deliver-extras__label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #686868;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--s15);
}

.deliver-extras__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s10);
}

.deliver-extras__pill {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1f;
  background: #f5f5f5;
  padding: var(--s10) var(--s15);
  border-radius: 980px;
}

/* ============ SOLUTION LIST (rows with tags) ============ */
.solution-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.solution-row {
  display: flex;
  align-items: center;
  gap: var(--s20);
  padding: var(--s20) var(--s25);
  background: #ffffff;
  border-radius: 16px;
}

.solution-row__name {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 600;
  color: #1d1d1f;
  width: 200px;
  flex-shrink: 0;
}

.solution-row__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  flex: 1;
  line-height: 1.5;
}

.solution-row__tag {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #686868;
  background: #f5f5f5;
  padding: 4px var(--s15);
  border-radius: 980px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* ============ IMPACT LIST (benefit bars) ============ */
.impact-list {
  display: flex;
  flex-direction: column;
  gap: var(--s20);
  max-width: 800px;
  margin: 0 auto;
}

.impact-row {
  display: flex;
  align-items: center;
  gap: var(--s25);
}

.impact-row__text {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #1d1d1f;
  width: 340px;
  flex-shrink: 0;
}

.impact-row__bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s15);
}

.impact-row__bar-track {
  flex: 1;
  height: 8px;
  background: #e8e8ed;
  border-radius: 4px;
  overflow: hidden;
}

.impact-row__bar-fill {
  height: 100%;
  background: #2d2d2d;
  border-radius: 4px;
  transition: width 1s ease;
}

.impact-row__bar-label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #686868;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 36px;
  flex-shrink: 0;
}
/* Impact list on dark backgrounds */
.section--dark .impact-row__text {
  color: #f5f5f7;
}

.section--dark .impact-row__bar-track {
  background: rgba(255, 255, 255, 0.06);
}

.section--dark .impact-row__bar-fill {
  background: #f5f5f7;
}

.section--dark .impact-row__bar-label {
  color: rgba(255, 255, 255, 0.5);
}

/* ============ QUOTE CARD ITALIC (for warning signs) ============ */
.card__text--quote {
  font-style: italic;
  margin-top: 0;
  margin-bottom: var(--s20);
  color: #000;
}

.card:has(.card__text--quote) .card__subtitle {
  margin-top: auto;
  margin-bottom: 0;
}

.hero .focus-line {
  svg {
      opacity: 1 !important;
  }
}

.fl,
.focus-line {
  position: relative;

  svg {
      position: absolute;
      left: 0;
      bottom: calc(var(--s10) * -1);
      opacity: 0;
      transition: opacity 0.5s ease;
      transition-delay: 1.5s;
  }
}

.reveal.visible .fl svg,
.reveal.visible .focus-line svg {
  opacity: 1;
}

.bg-noice {
  position: relative;
  overflow: hidden;
}

.bg-noice:before {
  pointer-events: none;
  content: '';
  position: absolute;
  inset: -200%;
  width: 400%;
  height: 400%;
  position: absolute;
  will-change: transform;
  background: url(tvnoice.png);
  background-blend-mode: difference;
  animation: tvnoice .2s infinite alternate;
  opacity: 0.05;
}

@keyframes tvnoice {
  100% {
      background-position: 50% 0, 60% 50%
  }
}

/* ============ HORIZONTAL SCROLL TRACK ============ */
.scroll-track {
  display: flex;
  gap: var(--s20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--s10) var(--s10) var(--s25) var(--s10);
  margin-top: var(--s40);
}

.scroll-track::-webkit-scrollbar {
  height: 3px;
}

.scroll-track::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-track::-webkit-scrollbar-thumb {
  background: #c7c7cc;
  border-radius: 2px;
}

.scroll-card {
  flex: 0 0 400px;
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 20px;
  padding: var(--s35);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.scroll-card__num {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin-bottom: var(--s10);
}

.scroll-card h3 {
  font-family: var(--font-primary);
  font-size: var(--font-h4);
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
  margin-bottom: var(--s15);
}

.scroll-card p {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin-bottom: 0;
}

.scroll-card .explore-link {
  margin-top: auto;
  padding-top: var(--s20);
}
/* ============ FULL-PAGE HORIZONTAL SCROLL (AI page) ============ */

/* Lock the viewport — no native scroll in any direction */
body.hscroll-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* Fixed header above everything */
body.hscroll-page .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Hide footer on desktop (sits behind viewport) */
body.hscroll-page .wl-footer,
body.hscroll-page .blur-overlay {
  display: none;
}

/* Fixed background layer — color fades via JS */
.hscroll-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #ffffff;
  transition: background-color 0.05s linear;
}

/* The scroll track — flexed panels, moved via translateX in JS */
.hscroll-wrap {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100vh;
  z-index: 1;
  will-change: transform;
}

/* Each panel = one full viewport width */
.hscroll-panel {
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 100px 60px 80px 60px;
  overflow: hidden;
  position: relative;
  background: transparent;
}

.hscroll-panel>.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Dark panel text overrides (panel 3) */
.hscroll-panel--dark h1,
.hscroll-panel--dark h2,
.hscroll-panel--dark h3,
.hscroll-panel--dark h4 {
  color: #f5f5f7;
}

.hscroll-panel--dark p,
.hscroll-panel--dark li,
.hscroll-panel--dark span {
  color: #a1a1a6;
}

.hscroll-panel--dark a {
  color: #6eaaff;
}

/* Hero overrides inside horizontal scroll */
.hscroll-panel .hero--editorial {
  padding: 0;
  min-height: 0;
  width: 100%;
  max-width: 1200px;
}

.hscroll-panel .hero--editorial .container {
  max-width: 100%;
  padding: 0;
}

/* Progress bar at bottom */
.hscroll-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #2d2d2d;
  z-index: 9001;
  width: 0%;
  transition: width 0.05s linear;
}

body.hscroll-page .hscroll-progress--dark {
  background: #f5f5f7;
}

/* Navigation dots — position indicator */
.hscroll-dots {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 9001;
  padding: var(--s10) var(--s20);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.hscroll-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}

.hscroll-dots button.active {
  background: #2d2d2d;
  width: 24px;
  border-radius: 4px;
}

/* Panel counter */
.hscroll-counter {
  position: fixed;
  bottom: 32px;
  right: 40px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: #686868;
  z-index: 9001;
}

/* ---- Intro paragraph below hero ---- */
.hscroll-intro {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.7;
  max-width: 680px;
  margin-top: var(--s25);
}

/* ---- Service cards: 5-col white cards, no borders ---- */
.hservice-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: var(--s30);
}

.hservice-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s25) var(--s20);
  display: flex;
  flex-direction: column;
}

.hservice-card__num {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #686868;
  margin-bottom: var(--s10);
}

.hservice-card h3 {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
  margin-bottom: var(--s08);
}

.hservice-card p {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.55;
  margin-bottom: 0;
  flex-grow: 1;
}

.hservice-card .explore-link {
  margin-top: var(--s15);
  font-size: 13px;
}

/* ---- Process steps: translucent cards on dark bg ---- */
.hprocess-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: var(--s30);
}

.hprocess-card {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 16px;
  padding: var(--s25) var(--s20);
}

.hprocess-card__step {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #686868;
  margin-bottom: var(--s10);
}

.hprocess-card h3 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  color: #f5f5f7;
  margin-bottom: var(--s08);
}

.hprocess-card p {
  font-family: var(--font-primary);
  font-size: 13px;
  color: #a1a1a6;
  line-height: 1.6;
}

/* ---- Result cards: white on gray ---- */
.hresult-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--s30);
}

.hresult-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s30) var(--s25);
}

/* ---- Readiness cards: white on gray ---- */
.hready-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--s25);
}

.hready-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s25) var(--s20);
}

.hready-card h3 {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: var(--s10);
}

.hready-card ul {
  padding-left: var(--s20);
}

.hready-card li {
  font-family: var(--font-primary);
  font-size: 13px;
  color: #6e6e73;
  line-height: 1.6;
  margin-bottom: var(--s10);
}

/* ---- FAQ grid: white cards ---- */
.hfaq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: var(--s30);
}

.hfaq-item {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: var(--s25) var(--s20);
}

.hfaq-item h4 {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: var(--s08);
}

.hfaq-item p {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
}

/* ---- Section subtitle ---- */
.hsection-sub {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.7;
  max-width: 640px;
  margin-top: var(--s10);
}

/* ---- Mobile: revert to vertical scroll ---- */
/* ================================================================
 UTILITY ADDITIONS — replaces all inline styles site-wide
 All classes below are shared across pages. No inline styles needed.
 ================================================================ */

/* ---------- Hero ---------- */
/* Span muted color when h1 itself is .hero-display (not nested) */
.hero-display span {
  color: #686868;
}

/* ---------- Stat bento ---------- */
.stat-bento--3col {
  grid-template-columns: repeat(3, 1fr);
}
/* ---------- CTA card ---------- */

/* Muted span inside cta-card__heading (used on every CTA section) */
.cta-card__heading span {
  color: rgba(255, 255, 255, 0.4);
}

/* Sub-note below cta-card__text — small, dim */
.cta-card__note {
  margin-top: 1.5rem;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}

/* Links inside CTA card */
.cta-card a {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- Spec row ---------- */

/* Links inside spec rows on dark backgrounds */
.spec-row__text a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

/* ---------- Section header ---------- */

/* Max-width constrained section header (960px) */
.section-header--960 {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Section intro ---------- */

/* Centered section intro above CTA blocks */
.section-intro--cta {
  text-align: center;
  margin: var(--s50) auto 0;
}

/* Links inside centered CTA intro */
.section-intro--cta a {
  font-weight: 600;
  text-decoration: underline;
}

/* On dark sections, the CTA intro text and links are white */
.section--dark .section-intro--cta {
  color: rgba(255, 255, 255, 0.5);
}

.section--dark .section-intro--cta a {
  color: #ffffff;
}

/* ---------- Card ---------- */

/* Card that spans full grid width */
.card--full-width {
  grid-column: 1 / -1;
}

/* ---------- Placeholder ---------- */

/* Coming soon / placeholder text */
.text--placeholder {
  opacity: 0.5;
}

/* ---------- Margin utilities ---------- */

.mt-60 {
  margin-top: 60px;
}

/* ---------- Stat highlight ---------- */
/* Large number + description block (e.g. "50+ checkpoints") */

.stat-highlight {
  background: #2d2d2d;
  border-radius: 20px;
  padding: 72px 64px;
  max-width: 960px;
  margin: 60px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.stat-highlight__number {
  font-family: var(--font-primary);
  font-size: 96px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin: 0 0 var(--s20) 0;
  letter-spacing: -0.04em;
}

.stat-highlight__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 560px;
}

.stat-highlight__label {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.stat-highlight__text {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.65;
  margin: 0;
}

/* Dark section: invert to light card */
.section--dark .stat-highlight {
  background: rgba(255, 255, 255, 0.04);
}

/* Gray/Light section: keep dark card (default) */

/* ---------- PDF preview ---------- */

.pdf-preview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pdf-preview__frame {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
  background: #ffffff;
}

/* ---------- Reveal centered ---------- */
/* reveal div that is also text-centered with standard top spacing */

.reveal--centered {
  text-align: center;
  margin-top: var(--s25);
}

/* ---------- AI horizontal scroll — CTA panel ---------- */

/* Narrow centered container for the final CTA hscroll panel */
.hscroll-panel .container.hcta-wrap {
  max-width: 700px;
  text-align: center;
}

/* Override hsection-sub max-width inside hcta-wrap */
.hcta-wrap .hsection-sub {
  max-width: none;
  margin-top: var(--s15);
}

/* Btn top spacing inside hcta-wrap */
.hcta-wrap .btn {
  margin-top: var(--s25);
  display: inline-block;
}

/* ---------- AI horizontal scroll — panel note ---------- */
/* Small footnote text at the bottom of readiness or info panels */

.hpanel-note {
  margin-top: var(--s15);
  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
}

/* ================================================================
 CSS ALIASES — Non-canonical class names used in generated pages.
 These map alternate names to the same visual styles as canonical
 classes. No HTML changes required.
 ================================================================ */

/* ---- TIMELINE ALIASES ---- */

/* timeline__item → same as timeline__step */
.timeline__item {
  display: flex;
  gap: var(--s25);
  margin-bottom: var(--s35);
}

.timeline__item:last-child {
  margin-bottom: 0;
}

/* timeline__number → same as timeline__num (circle badge) */
.timeline__number {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 700;
  color: #ffffff;
  background: rgb(57 57 57);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

/* timeline__marker → styled as the numbered circle, acts as bar+num */
.timeline__marker {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

/* timeline__item connecting line via ::after on the item itself */
.timeline__item {
  position: relative;
}

.timeline__item::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 16px;
  width: 1px;
  bottom: -4px;
  background: #e8e8ed;
  height: calc(100% + 32px);
}

.timeline__item:last-child::after {
  display: none;
}

.section--dark .timeline__item::after {
  background: rgba(255, 255, 255, 0.12);
}

/* timeline__content → same as timeline__body */
.timeline__content {
  flex: 1;
  padding-top: 2px;
}

.timeline__content h3 {
  font-family: var(--font-primary);
  font-size: var(--f-20);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 var(--s10) 0;
  line-height: 1.3;
}

.timeline__content h3 span {
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin-left: var(--s10);
}

.timeline__content p {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  line-height: 1.6;
  color: #6e6e73;
  margin: 0 0 var(--s10) 0;
}

.timeline__content p:last-child {
  margin-bottom: 0;
}

/* timeline__meta → same as timeline__duration (date/week label) */
.timeline__meta {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin: 0 0 var(--s10) 0;
}

/* timeline__phase → same as timeline__duration */
.timeline__phase {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  margin: 0 0 var(--s10) 0;
}

/* Dark/gray section overrides for timeline aliases */
.section--gray .timeline__marker,
.section--light .timeline__marker {
  background: #2d2d2d;
  color: #ffffff;
}

.section--gray .timeline__number,
.section--light .timeline__number {
  background: #2d2d2d;
  color: #ffffff;
}

.section--gray .timeline__content h3,
.section--light .timeline__content h3 {
  color: #1d1d1f;
}

.section--gray .timeline__content h3 span,
.section--light .timeline__content h3 span {
  color: #686868;
}

.section--gray .timeline__content p,
.section--light .timeline__content p {
  color: #6e6e73;
}

.section--gray .timeline__meta,
.section--light .timeline__meta {
  color: #686868;
}

.section--dark .timeline__content h3 {
  color: #ffffff;
}

.section--dark .timeline__content h3 span {
  color: rgba(255, 255, 255, 0.4);
}

.section--dark .timeline__content p {
  color: rgba(255, 255, 255, 0.6);
}

.section--dark .timeline__meta,
.section--dark .timeline__phase {
  color: rgba(255, 255, 255, 0.4);
}

.section--dark .timeline__marker,
.section--dark .timeline__number {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* card__meta — small meta/deliverable note inside cards or timelines */
.card__meta {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #686868;
  margin: var(--s10) 0 0 0;
}

.section--dark .card__meta {
  color: rgba(255, 255, 255, 0.35);
}

/* ---- SPEC-ROW TEXT ALIASES ---- */

/* spec-row__value, spec-row__desc, spec-row__details, spec-row__content → spec-row__text */
.spec-row__value,
.spec-row__desc,
.spec-row__details,
.spec-row__content {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

.spec-row__value a,
.spec-row__desc a,
.spec-row__details a,
.spec-row__content a {
  color: #1d1d1f;
  text-decoration: none;
}

.section--dark .spec-row__value,
.section--dark .spec-row__desc,
.section--dark .spec-row__details,
.section--dark .spec-row__content {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- SPEC-ROWS CONTAINER ALIAS ---- */

/* spec-rows → spec-list */
.spec-rows {
  max-width: 960px;
  margin: 0 auto;
  border-top: 1px solid #e8e8ed;
}

.section--dark .spec-rows {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* spec-rows--dark modifier — section--dark context handles colors */
.spec-rows--dark {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ---- BENTO ALIASES ---- */

/* bento-item → stat-bento__item */
.bento-item {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: var(--s50) var(--s40);
  display: flex;
  flex-direction: column;
  gap: var(--s15);
}

/* bento-card → stat-bento__card */
.bento-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: var(--s50) var(--s40);
  display: flex;
  flex-direction: column;
  gap: var(--s15);
}

/* bento-value → stat-bento__number */
.bento-value {
  font-family: var(--font-primary);
  font-size: 72px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.section--dark .bento-value {
  color: #ffffff;
}

/* bento-label → stat-bento__text */
.bento-label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  line-height: 1.6;
  margin: 0;
}

.section--dark .bento-label {
  color: rgba(255, 255, 255, 0.5);
}

/* ---- SPEC-LABEL / SPEC-VALUE ALIASES ---- */

/* spec-label → spec-row__label */
.spec-label {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.section--dark .spec-label {
  color: #ffffff;
}

/* spec-value → spec-row__text */
.spec-value {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

.spec-value a {
  color: #1d1d1f;
  text-decoration: none;
}

.section--dark .spec-value {
  color: rgba(255, 255, 255, 0.6);
}

/* ================================================================
 END CSS ALIASES
 ================================================================ */

/* ================================================================
 CSS ALIASES — BATCH 2
 Additional non-canonical class names found in generated pages.
 Maps to equivalent canonical styles with dark-section overrides.
 ================================================================ */

/* ---- SECTION-HEADER LAYOUT ALIASES ---- */
/* section-header__left / section-header__right
 → aliases for section-header--split__left / section-header--split__right */

.section-header--split .section-header__left,
.section-header__left {
  /* label + heading stack naturally, no explicit styles needed beyond layout */
}

.section-header--split .section-header__right,
.section-header__right {
  display: flex;
  align-items: flex-end;
}

/* When inside section-header--split, respect the grid layout */
.section-header--split:has(.section-header__left) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s50);
  align-items: end;
  margin-bottom: var(--s50);
}

/* Ensure section-intro inside section-header__right has no margin */
.section-header__right .section-intro {
  margin: 0;
}

/* ---- SPEC-ROW MODIFIER ALIAS ---- */
/* spec-row--dark: applies dark border directly on the row itself
 (used when spec-list is not inside section--dark) */

.spec-row--dark {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.spec-row--dark .spec-row__label {
  color: #ffffff;
}

.spec-row--dark .spec-row__text,
.spec-row--dark .spec-row__value,
.spec-row--dark .spec-row__desc,
.spec-row--dark .spec-row__details,
.spec-row--dark .spec-row__content {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- STAT-BENTO EXTENDED ALIASES ---- */

/* stat-bento__label → alias for stat-bento__text */
.stat-bento__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  line-height: 1.6;
  margin: 0;
}

.section--dark .stat-bento__label {
  color: rgba(255, 255, 255, 0.5);
}

/* stat-bento__value: large text stat (like "Figma", "2", "AA") */
.stat-bento__value {
  font-family: var(--font-primary);
  font-size: var(--f-24);
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.section--dark .stat-bento__value {
  color: #ffffff;
}

/* stat-bento__desc: small description below a stat-bento__value */
.stat-bento__desc {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 500;
  color: #686868;
  line-height: 1.5;
  margin: 4px 0 0 0;
}

.section--dark .stat-bento__desc {
  color: rgba(255, 255, 255, 0.4);
}

/* stat-bento__sub: secondary line under main stat */
.stat-bento__sub {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  margin: 4px 0 0 0;
}

.section--dark .stat-bento__sub {
  color: rgba(255, 255, 255, 0.4);
}

/* stat-bento__note: small footnote text inside a bento block */
.stat-bento__note {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 400;
  color: #6e6e73;
  line-height: 1.6;
  margin: var(--s15) 0 0 0;
}

.section--dark .stat-bento__note {
  color: rgba(255, 255, 255, 0.45);
}

/* stat-bento__item--accent / stat-bento__card--accent: highlighted item */
.stat-bento__item--accent,
.stat-bento__card--accent {
  background: rgba(0, 122, 255, 0.12);
  border: 1px solid rgba(0, 122, 255, 0.25);
}

.stat-bento__item--accent .stat-bento__number,
.stat-bento__card--accent .stat-bento__number {
  color: #1d1d1f;
}

.section--dark .stat-bento__item--accent,
.section--dark .stat-bento__card--accent {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.3);
}

.section--dark .stat-bento__item--accent .stat-bento__number,
.section--dark .stat-bento__card--accent .stat-bento__number {
  color: #4da6ff;
}

/* stat-bento__item--wide: span two columns in stat-bento grid */
.stat-bento__item--wide {
  grid-column: span 2;
}

/* stat-bento__featured: prominent single stat display */
.stat-bento__featured {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
  padding: var(--s50) var(--s40);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  margin-bottom: var(--s25);
}

.section--dark .stat-bento__featured .stat-bento__number {
  color: #ffffff;
}

.section--dark .stat-bento__featured .stat-bento__label {
  color: rgba(255, 255, 255, 0.5);
}

/* stat-bento__grid: inner grid layout within a bento block */
.stat-bento__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s20);
}

.stat-bento__grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* stat-bento__cell: individual cell inside stat-bento__grid */
.stat-bento__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: var(--s20) var(--s20);
}

.section--light .stat-bento__cell,
.section--gray .stat-bento__cell {
  background: #f5f5f7;
}

/* stat-bento__split: two-column layout within a stat-bento section */
.stat-bento__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s35);
  align-items: start;
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: var(--s50) var(--s40);
}

.section--light .stat-bento__split,
.section--gray .stat-bento__split {
  background: #ffffff;
}

/* stat-bento__left / stat-bento__right: halves of stat-bento__split */
.stat-bento__left,
.stat-bento__right {
  display: flex;
  flex-direction: column;
  gap: var(--s20);
}

/* stat-bento__big: large stat display within stat-bento__left */
.stat-bento__big {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}

.stat-bento__big .stat-bento__number {
  font-size: 80px;
}

.section--dark .stat-bento__big .stat-bento__number {
  color: #ffffff;
}

.section--dark .stat-bento__big .stat-bento__label {
  color: rgba(255, 255, 255, 0.5);
}
/* ---- STAT-CARD COMPONENT ---- */
/* Used in ai-video-generation hero dark section */

.stat-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: var(--s35) var(--s30);
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}

.stat-card--accent {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.3);
}

.stat-card__number {
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.stat-card--accent .stat-card__number {
  color: #4da6ff;
}

.stat-card__label {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin: 0;
}

.stat-card__detail {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  margin: 0;
}

/* ---- STAT__DETAIL (flat stat detail, not nested in stat-card) ---- */
.stat__detail {
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 400;
  color: #6e6e73;
  line-height: 1.6;
  margin: var(--s10) 0 0 0;
}

.section--dark .stat__detail {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- CARD__TAG ---- */
/* Category tag inside a card (ada-compliance-audit.html) */
.card__tag {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #686868;
  background: rgba(134, 134, 139, 0.12);
  padding: 4px var(--s10);
  border-radius: 6px;
  margin: 0 0 var(--s10) 0;
}

.section--dark .card__tag {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- CARD__BODY ---- */
/* Generic body text container inside a card */
.card__body {
  font-family: var(--font-primary);
  font-size: var(--f-16);
  font-weight: 400;
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}

.section--dark .card__body {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- BTN ALIASES ---- */
/* btn--ghost: outlined ghost button variant */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: var(--f-14);
  font-weight: 600;
  color: #ffffff;
  background: #2d2d2d;
  padding: var(--s15) var(--s25);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn:hover {
  background: rgba(45, 45, 45, 0.85);
  color: #ffffff;
}

.btn--ghost {
  color: #1d1d1f;
  background: transparent;
  border-color: rgba(29, 29, 31, 0.25);
}

.btn--ghost:hover {
  background: rgba(29, 29, 31, 0.06);
  border-color: rgba(29, 29, 31, 0.4);
  color: #1d1d1f;
}

.section--dark .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.section--dark .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.btn--sm {
  font-size: 13px;
  padding: var(--s10) var(--s20);
  border-radius: 7px;
}

/* ================================================================
 END CSS ALIASES BATCH 2
 ================================================================ */
/* ================================================================
 RESPONSIVE — All breakpoints consolidated
 ================================================================ */

@media (max-width:1199.98px) {
  :root {
    --font-h1: 44px;
    --font-h2: 38px;
    --sectionSpace: 100px;
    --s100: 80px;
    --s40: 30px;
    --s50: 30px;
}
}
@media (max-width:1024.98px) {

  .dark-block {
      padding: 60px var(--s40);
  }

  .dark-block__header--split {
      grid-template-columns: 1fr;
      gap: var(--s20);
  }

  .stat-bento {
      grid-template-columns: repeat(2, 1fr);
  }

  :root {
      --font-h1: 44px;
      --font-h2: 38px;
      --sectionSpace: 100px;
      --s100: 80px;
      --s40: 30px;
      --s50: 30px;
  }

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

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

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

  .card,
  .card--tall {
      min-height: 320px;
  }

  .split--50-60,
  .split--70-30,
  .split--60-40,
  .split--40-60 {
      grid-template-columns: 1fr;
      gap: var(--s30);
  }

  .compare {
      grid-template-columns: 1fr;
      gap: var(--s20);
  }

  .compare__arrow {
      transform: rotate(90deg);
      justify-self: center;
  }

  .cta-card {
      grid-template-columns: 1fr;
      padding: var(--s50) var(--s40);
      gap: var(--s40);
  }

  .hero {
      padding-top: 100px;
      padding-bottom: 60px;
  }

  .hero .container {
      grid-template-columns: 1fr;
      gap: var(--s50);
  }

  /* Editorial hero — 1024px */
  .hero--editorial {
      padding: 80px 0 60px;
  }

  .hero-display {
      margin-bottom: var(--s40);
      max-width: 80%;
  }

  .hero-meta-row {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
  }

  .hero-meta-tag {
      grid-column: 1 / -1;
      width: fit-content;
  }

  .hero-desc {
      max-width: 100%;
  }

  /* KB components — 1024px */
  .symptom-row {
      grid-template-columns: 48px 1fr;
  }

  .symptom-stat {
      display: none;
  }

  .comp-row {
      grid-template-columns: 56px 1fr;
  }

  .comp-tech {
      display: none;
  }

  .access-matrix__header,
  .access-row {
      grid-template-columns: 160px repeat(4, 1fr);
  }

  /* New components — 1024px */
  .col-strip--5 {
      grid-template-columns: repeat(3, 1fr);
  }

  .col-strip__item:nth-child(3) {
      border-right: none;
  }

  .grid--4-3 .grid-row-4 {
      grid-template-columns: repeat(2, 1fr);
  }

  .grid--4-3 .grid-row-3 {
      grid-template-columns: repeat(2, 1fr);
      max-width: 100%;
  }

  .showcase__body {
      grid-template-columns: 1fr;
  }

  .showcase__sidebar {
      border-right: none;
      border-bottom: none;
  }

  .equation {
      flex-direction: column;
      gap: var(--s20);
  }

  .equation__block {
      max-width: 100%;
  }

  .way-layer {
      grid-template-columns: 48px 1fr;
  }

  .way-layer__desc {
      grid-column: 1 / -1;
      padding-left: 72px;
  }

  .stack-layer {
      grid-template-columns: 1fr;
      gap: var(--s20);
  }

  .solution-row {
      flex-wrap: wrap;
      gap: var(--s10);
  }

  .solution-row__name {
      width: auto;
  }

  .solution-row__desc {
      width: 100%;
      order: 3;
  }

  body.hscroll-page {
      overflow-y: auto;
      overflow-x: hidden;
      height: auto;
      width: auto;
  }

  body.hscroll-page .header {
      position: fixed;
      background: #111111;
  }

  body.hscroll-page .wl-footer,
  body.hscroll-page .blur-overlay {
      display: block;
  }

  .hscroll-bg {
      display: none;
  }

  .hscroll-wrap {
      position: static !important;
      width: 100% !important;
      flex-direction: column !important;
      height: auto !important;
      transform: none !important;
  }

  .hscroll-panel {
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 0;
      flex: 0 0 auto !important;
      padding: 80px var(--s20) 60px var(--s20);
  }

  .hscroll-panel--light {
      background: #ffffff;
  }

  .hscroll-panel--gray {
      background: #f5f5f7;
  }

  .hscroll-panel--dark {
      background: linear-gradient(180deg, #111111 0%, #1a1a1a 100%);
  }

  .hservice-grid {
      grid-template-columns: 1fr;
  }

  .hfaq-grid {
      grid-template-columns: 1fr;
  }

  .hscroll-dots,
  .hscroll-counter,
  .hscroll-progress {
      display: none !important;
  }

  .stat-bento--3col {
      grid-template-columns: repeat(2, 1fr);
  }

  .stat-bento__grid {
      grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width:991.98px) {

  .cta-roundbox {
      padding: 0 var(--s20) var(--s20);
  }

  .cta-roundbox__box {
      padding: 60px var(--s35);
  }

  :root {
      --font-h1: 36px;
      --font-h2: 32px;
      --font-h3: 26px;
      --font-h4: 20px;
      --font-h5: 18px;
      --font-h6: 16px;
      --body-font: 16px;
      --f-18: 16px;
      --f-20: 18px;
      --f-24: 20px;
      --sectionSpace: 80px;
      --s100: 60px;
      --s50: 40px;
      --s40: 30px;
  }

  .container {
      padding: 0 var(--s25);
  }

  .section-header--split {
      grid-template-columns: 1fr !important;
      gap: var(--s20) !important;
  }

  .grid--5,
  .grid--4,
  .grid--2 {
      grid-template-columns: 1fr !important;
  }

  .grid--3 {
      grid-template-columns: 1fr !important;
  }

  .card,
  .card--tall {
      min-height: auto;
  }

  .form__row {
      grid-template-columns: 1fr;
  }

  .cta-card {
      padding: var(--s40) var(--s25);
  }

  .hero {
      padding-top: 80px;
      padding-bottom: var(--s50);
  }

  .hero .container {
      gap: var(--s35);
  }

  /* Editorial hero — 768px */
  .hero--editorial {
      padding: 60px 0 var(--s50);
  }

  .hero-display {
      max-width: 100%;
  }

  .hero-meta-row {
      grid-template-columns: 1fr;
      gap: 20px;
  }

  .hero-meta-primary {
      max-width: 100%;
  }

  .hero-meta-secondary {
      max-width: 100%;
  }

  .stat__number {
      font-size: 40px;
  }

  .faq {
      grid-template-columns: 1fr;
      gap: var(--s40);
  }

  .faq__header {
      position: static;
  }


  /* KB components — 768px */
  .symptom-row {
      grid-template-columns: 1fr;
      gap: var(--s10);
  }

  .symptom-num {
      font-size: 12px;
  }

  .comp-row {
      grid-template-columns: 1fr;
      gap: var(--s15);
  }

  .comp-icon {
      width: 40px;
      height: 40px;
  }

  .access-matrix__header,
  .access-row {
      grid-template-columns: 120px repeat(4, 1fr);
      padding: var(--s15) var(--s20);
      font-size: 12px;
  }

  .chat {
      max-width: 100%;
  }

  /* New components — 768px */
  .col-strip--5 {
      grid-template-columns: 1fr;
  }

  .col-strip__item {
      border-right: none;
      border-bottom: none;
  }

  .col-strip__item:last-child {
      border-bottom: none;
  }

  .grid--4-3 .grid-row-4,
  .grid--4-3 .grid-row-3 {
      grid-template-columns: 1fr;
  }

  .grid--4-3 .grid-row-3 {
      max-width: 100%;
  }

  .mock__kpi-row--4 {
      grid-template-columns: repeat(2, 1fr);
  }

  .mock__row {
      grid-template-columns: 1fr;
  }

  .equation__value {
      font-size: 36px;
  }
}

@media (max-width:767.98px) {

  .vs-table thead th:first-child,
  .vs-table tbody td:first-child {
      display: none;
  }

  .vs-table thead th,
  .vs-table tbody td {
      padding: var(--s20) var(--s20);
  }

  .cta-roundbox {
      padding: 0 var(--s20) var(--s20);
  }

  .cta-roundbox__box {
      padding: var(--s50) var(--s25);
      border-radius: 16px;
  }

  .dark-block {
      padding: var(--s40) var(--s25);
  }

  .dark-block .grid--3 {
      grid-template-columns: 1fr;
  }

  .stat-bento__card {
      min-height: auto;
      gap: var(--s20);
  }

  .stat-bento {
      grid-template-columns: repeat(1, 1fr);
  }

  :root {
      --font-h1: 30px;
      --font-h2: 26px;
      --font-h3: 22px;
      --font-h4: 18px;
      --sectionSpace: 60px;
      --s100: 50px;
      --s50: 35px;
      --s40: 25px;
      --s35: 25px;
      --s30: 20px;
  }

  .hero {
      padding-top: 64px;
      padding-bottom: var(--s35);
  }

  .hero-subtitle {
      font-size: var(--f-16);
  }

  .hero-tagline {
      font-size: var(--f-20);
  }

  .hero-desc {
      font-size: var(--f-14);
  }

  .cta-card__heading {
      font-size: 22px;
  }

  .stat__number {
      font-size: 36px;
  }

  .choice {
      flex-direction: column;
      align-items: center;
  }

  .choice__option {
      max-width: 100%;
      width: 100%;
  }

  .choice__or {
      transform: none;
  }

  .way-layer {
      grid-template-columns: 1fr;
      gap: var(--s15);
  }

  .way-layer__icon {
      display: none;
  }

  .way-layer__desc {
      padding-left: 0;
  }

  .adds-item {
      grid-template-columns: 1fr;
  }

  .adds-item__icon {
      display: none;
  }

  .flow-card__step {
      grid-template-columns: 1fr;
  }

  .flow-card__step-icon {
      display: none;
  }

  .pricing-factors {
      flex-direction: column;
      align-items: center;
      gap: var(--s25);
  }

  .choice__option {
      padding: var(--s30) var(--s20);
  }

  .choice__reveal {
      padding: var(--s30) var(--s20);
  }

  .flow-card {
      padding: var(--s25);
  }

  .sys-card {
      padding: var(--s25);
  }

  .ba-grid {
      grid-template-columns: 1fr;
  }

  .scorecard__body {
      flex-direction: column;
      align-items: center;
  }

  .scorecard__bar-label {
      width: 70px;
      font-size: 12px;
  }

  .scorecard__header {
      flex-direction: column;
      gap: 4px;
      text-align: center;
  }

  .scorecard__body {
      padding: var(--s25) var(--s20);
  }

  .dept-row {
      flex-wrap: wrap;
      gap: var(--s15);
      padding: var(--s20) var(--s20);
  }

  .dept-row__name {
      width: auto;
  }

  .dept-row .icon-box {
      display: none;
  }

  .report-mock__body {
      padding: var(--s25) var(--s20);
  }

  .report-mock__title {
      font-size: var(--f-20);
  }

  .solution-row .icon-box {
      display: none;
  }

  .solution-row {
      padding: var(--s20) var(--s20);
  }

  .impact-row {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--s10);
  }

  .impact-row__text {
      width: 100%;
  }

  .impact-row__bar-wrap {
      width: 100%;
  }

  .scroll-card {
      flex: 0 0 300px;
      padding: var(--s25);
  }

  .stat-bento--3col {
      grid-template-columns: repeat(1, 1fr);
  }

  .stat-bento__split {
      grid-template-columns: 1fr;
  }
}