:root {
  --amber: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-100: #fef3c7;
  --amber-50: #fffaf0;
  --ink: #152033;
  --ink-soft: #45556c;
  --slate: #64748b;
  --line: #e4e9f0;
  --paper: #ffffff;
  --mist: #f7f8fb;
  --teal: #007c89;
  --violet: #6d4aff;
  --green: #15803d;
  --danger: #dc2626;
  --shadow-sm: 0 2px 8px rgba(18, 31, 53, .04);
  --shadow: 0 18px 45px rgba(23, 34, 53, .10);
  --radius: 20px;
  --container: 1180px;
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Roboto Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.container { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
.section { padding: 72px 0; }
.section--soft { background: var(--mist); }
.section--cream { background: #fff9ed; }
.section--dark { color: #fff; background: #172033; }
.section--tight { padding: 72px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--amber-700);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow--light { color: #fddca4; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.display {
  margin: 14px 0 18px;
  font-size: clamp(2.15rem, 4.3vw, 4.45rem);
  line-height: 1.04;
  letter-spacing: -.058em;
  font-weight: 800;
}
.display--small { font-size: clamp(2rem, 3.5vw, 3.35rem); }
.display em { color: var(--amber); font-style: normal; }
.lead { max-width: 640px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.65; }
.lead--light { color: #ccd5e4; }
.hero .display, .page-hero:not(.page-hero--dark) .display { color: #3d291e; }
.page-hero--dark .display { color: #fff; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.numeric { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.center .display,
.center .lead { margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hide { display: none !important; }

/* Header */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid transparent;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(15px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 25px rgba(20, 28, 45, .05); }
.nav {
  display: flex;
  align-items: center;
  min-height: 74px;
  gap: 32px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 146px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 25px; margin-right: auto; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 27px 0 25px;
  color: #344054;
  font-size: .89rem;
  font-weight: 650;
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--amber-700); }
.nav-chevron { width: 12px; height: 12px; }
.nav-trigger { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.nav-trigger svg { width: 12px; height: 12px; transition: transform .18s ease; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 11px; }
.login-link { color: #344054; font-size: .9rem; font-weight: 700; }
.login-link:hover { color: var(--amber-700); }

/* Language Switcher */
.lang-switcher { position: relative; display: inline-flex; align-items: center; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s ease;
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] {
  border-color: #d97706;
  background: #fffdfa;
  color: var(--amber-700);
}
.lang-flag { font-size: 14px; line-height: 1; }
.lang-code { font-size: .78rem; font-weight: 750; letter-spacing: .02em; }
.lang-chevron { width: 11px; height: 11px; color: #64748b; transition: transform .18s ease; }
.lang-toggle[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); color: var(--amber-700); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.04);
  z-index: 50;
}
.lang-list { display: flex; flex-direction: column; gap: 2px; }
.lang-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #334155;
  font-size: .83rem;
  font-weight: 550;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.lang-item:hover { background: #f8fafc; color: var(--amber-700); }
.lang-item.is-active { background: #fff8eb; color: var(--amber-700); font-weight: 700; }
.lang-item-flag { font-size: 14px; line-height: 1; flex-shrink: 0; }
.lang-item-name { flex-grow: 1; }
.lang-item-code { font-size: .7rem; color: #94a3b8; font-family: var(--font-mono); font-weight: 700; }
.lang-item.is-active .lang-item-code { color: var(--amber-700); opacity: .7; }
.lang-item-check { font-size: .85rem; font-style: normal; font-weight: 800; color: var(--amber-700); }

/* Mobile Lang Chips */
.mobile-lang-row { padding: 10px 4px 14px; border-bottom: 1px solid #f0f2f5; margin-bottom: 8px; }
.mobile-lang-label { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.mobile-lang-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px !important;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: .76rem !important;
  font-weight: 650 !important;
  color: #475569 !important;
  background: #f8fafc;
  text-decoration: none;
}
.mobile-lang-chip.is-active {
  border-color: #f59e0b;
  background: #fff8eb;
  color: var(--amber-700) !important;
  font-weight: 750 !important;
}

.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
}
.mobile-panel { display: none; }
.nav-mega {
  position: absolute;
  z-index: 31;
  top: 100%;
  right: 0;
  left: 0;
  padding: 0 0 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,.72));
  box-shadow: 0 22px 35px rgba(21,32,51,.08);
}
.nav-mega[hidden] { display: none; }
.mega-surface {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(21,32,51,.11);
}
.mega-surface--solutions { grid-template-columns: repeat(3, minmax(0,1fr)) 1.12fr; }
.mega-column { min-height: 210px; padding: 22px 20px; border-right: 1px solid var(--line); }
.mega-column:last-child { border: 0; }
.mega-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #344054; font-size: .74rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.mega-index { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #edc779; border-radius: 5px; color: var(--amber-800); background: var(--amber-50); font: 700 .56rem var(--font-mono); font-variant-numeric: tabular-nums; }
.mega-item { display: block; padding: 8px 8px; border-radius: 8px; }
.mega-item:hover { background: #fff8e9; }
.mega-item b { display: block; color: #334155; font-size: .8rem; line-height: 1.25; }
.mega-item span { display: block; margin-top: 2px; color: #8490a1; font-size: .68rem; line-height: 1.42; }
.mega-featured { display: flex; flex-direction: column; color: #fff; background: #1c2a3e; }
.mega-featured .mega-heading { color: #f7d38e; }
.mega-featured .mega-index { border-color: rgba(255,255,255,.24); color: #f8d28b; background: rgba(255,255,255,.08); }
.mega-featured h3 { margin: 7px 0 8px; font-size: 1.05rem; line-height: 1.22; letter-spacing: -.03em; }
.mega-featured p { margin: 0; color: #c7d3e4; font-size: .73rem; line-height: 1.52; }
.mega-featured .text-link { margin-top: auto; padding-top: 17px; color: #ffd487; font-size: .76rem; }
.mega-featured .text-link svg { width: 14px; }

/* Buttons */
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .91rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.button svg { width: 17px; height: 17px; }
.button-primary { color: #fff; background: var(--amber); box-shadow: 0 6px 14px rgba(217,119,6,.2); }
.button-primary:hover { background: var(--amber-700); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(180,83,9,.28); }
.button-secondary { color: var(--amber-800); border-color: #e7b65e; background: #fffdf9; }
.button-secondary:hover { border-color: var(--amber); background: var(--amber-50); }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { background: #273651; transform: translateY(-1px); }
.button-ghost { color: var(--ink); border-color: var(--line); background: #fff; }
.button-ghost:hover { border-color: #b8c2d0; }
.button-small { min-height: 39px; padding: 8px 14px; border-radius: 8px; font-size: .81rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--amber-700);
  font-size: .9rem;
  font-weight: 800;
}
.text-link svg { width: 16px; height: 16px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(3px); }

/* hero */
.announcement {
  border-bottom: 1px solid #f6dfa9;
  color: var(--amber-800);
  background: #fff8e8;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.announcement a { display: block; padding: 9px 16px; }
.announcement span { color: var(--amber); }
.hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 60px;
  background:
    radial-gradient(circle at 81% 18%, rgba(253,230,138,.62), transparent 23%),
    radial-gradient(circle at 9% 94%, rgba(251,191,36,.15), transparent 30%),
    linear-gradient(115deg, #FFFDF8 0%, #FFF7E7 47%, #FFFCF5 100%);
}
.hero:before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  right: -170px; top: -220px;
  border: 1px solid rgba(217,119,6,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 68px rgba(217,119,6,.035), 0 0 0 136px rgba(217,119,6,.02);
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(480px, 1.07fr);
  align-items: center;
  gap: 54px;
}
.hero-copy { padding: 20px 0 34px; }
.hero-copy .display { max-width: 660px; }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: #566276; font-size: .84rem; font-weight: 600; }
.avatar-stack { display: flex; padding-left: 7px; }
.avatar {
  display: grid;
  width: 29px; height: 29px;
  place-items: center;
  margin-left: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #743b0a;
  background: #ffd889;
  font-size: .65rem;
  font-weight: 800;
}
.avatar:nth-child(2) { color: #155e75; background: #b5e6f3; }
.avatar:nth-child(3) { color: #5b21b6; background: #ddd3ff; }
.hero-visual { position: relative; min-height: 490px; }
.dashboard-window {
  position: absolute;
  inset: 22px 0 26px 34px;
  overflow: hidden;
  border: 1px solid #d6dde9;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(31,44,70,.15);
}
.dashboard-window img { width: 100%; height: 100%; object-fit: cover; object-position: 15% 12%; }
.dashboard-window:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 55%);
}
.native-dashboard {
  position: absolute;
  inset: 22px 0 26px 34px;
  overflow: hidden;
  border: 1px solid #d6dde9;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(31,44,70,.15);
}
.native-dashboard__top {
  display: flex;
  height: 43px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid #e7ebf1;
  background: #fffdf9;
}
.native-dots { display: flex; gap: 4px; }
.native-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #c9d1dc; }
.native-url { margin: 0 auto; padding: 4px 14px; border-radius: 5px; color: #78869a; background: #f5f7fa; font: 600 8px var(--font-mono); font-variant-numeric: tabular-nums; }
.native-live { padding: 4px 7px; border-radius: 999px; color: #18733e; background: #e7f8ec; font-size: 8px; font-weight: 800; }
.native-dashboard__body { display: grid; grid-template-columns: 104px 1fr; min-height: 385px; }
.native-sidebar { padding: 16px 10px; border-right: 1px solid #e7ebf1; background: #fbfcfe; }
.native-logo { margin: 0 0 20px 4px; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: -.04em; }
.native-logo b { color: var(--amber); }
.native-sideitem { display: block; margin: 0 0 5px; padding: 7px 7px; border-radius: 6px; color: #758297; font-size: 8px; font-weight: 700; }
.native-sideitem.active { color: var(--amber-800); background: #fff1d0; }
.native-main { padding: 18px; background: #fff; }
.native-main__heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 16px; }
.native-main__heading b { display: block; font-size: 14px; letter-spacing: -.035em; }
.native-main__heading span { display: block; margin-top: 3px; color: #8591a2; font-size: 8px; }
.native-date { padding: 5px 7px; border: 1px solid #e2e8f0; border-radius: 6px; color: #6e7b8d; font: 600 7px var(--font-mono); font-variant-numeric: tabular-nums; }
.native-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.native-stat { padding: 9px; border: 1px solid #e7ecf3; border-radius: 7px; }
.native-stat small { display: block; color: #8b96a5; font-size: 7px; font-weight: 700; }
.native-stat strong { display: block; margin-top: 4px; font: 700 14px var(--font-mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.native-stat strong.amber { color: var(--amber); }
.native-graph { position: relative; height: 124px; margin-top: 11px; overflow: hidden; border: 1px solid #e7ecf3; border-radius: 8px; background: linear-gradient(180deg, #fff, #fff8e9); }
.native-graph:before, .native-graph:after { content: ""; position: absolute; right: 12px; left: 12px; height: 1px; background: #eceff3; }
.native-graph:before { top: 39px; box-shadow: 0 35px 0 #eceff3, 0 70px 0 #eceff3; }
.native-graph svg { position: absolute; right: 9px; bottom: 13px; left: 9px; width: calc(100% - 18px); height: 89px; }
.native-list { display: grid; grid-template-columns: 1.2fr .9fr; gap: 8px; margin-top: 11px; }
.native-list > div { height: 45px; padding: 8px; border: 1px solid #e7ecf3; border-radius: 7px; }
.native-list small { display: block; color: #8491a2; font-size: 7px; }
.native-list b { display: block; margin-top: 3px; font-size: 10px; }
.floating-card {
  position: absolute;
  z-index: 2;
  min-width: 156px;
  padding: 13px 14px;
  border: 1px solid #dbe2eb;
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 34px rgba(26,37,57,.14);
}
.floating-card--metric { top: 0; right: -20px; }
.floating-card--metric strong { display: block; font-family: var(--font-mono); font-size: 1.16rem; font-variant-numeric: tabular-nums; }
.floating-card--metric span { color: #627083; font-size: .72rem; font-weight: 650; }
.trend { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 5px; color: var(--green); font-size: .73rem; font-weight: 800; }
.floating-card--status { bottom: 0; left: -28px; display: flex; align-items: center; gap: 10px; }
.floating-card--status svg { flex: none; width: 27px; height: 27px; padding: 6px; border-radius: 50%; color: #fff; background: var(--amber); }
.floating-card--status b { display: block; font-size: .76rem; }
.floating-card--status span { display: block; margin-top: 2px; color: #6a7687; font-size: .68rem; }
.mini-chart { width: 70px; height: 22px; margin-top: 5px; }
.metric-band {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  overflow: hidden;
  margin-top: 17px;
  border: 1px solid #ece5d8;
  border-radius: 13px;
  background: #fffdf9;
}
.metric-band > div { padding: 18px 22px; border-right: 1px solid #ece5d8; }
.metric-band > div:last-child { border: 0; }
.metric-band strong { display: block; color: var(--amber-800); font-family: var(--font-mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.metric-band span { display: block; margin-top: 3px; color: #6e7888; font-size: .72rem; font-weight: 650; }

/* Section headings, cards and panels */
.section-heading { max-width: 720px; margin: 0 auto 36px; }
.section-heading .display { margin-bottom: 12px; }
.sub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.surface-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.surface-card:hover { border-color: #f0ca82; box-shadow: 0 16px 30px rgba(217,119,6,.09); transform: translateY(-3px); }
.surface-card, .feature-card, .article-card, .solution-card { transition: .22s ease; }
.card-icon {
  display: grid;
  width: 46px; height: 46px;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid #f0cf8e;
  border-radius: 12px;
  color: var(--amber-700);
  background: var(--amber-50);
}
.card-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.card-icon--teal { color: var(--teal); border-color: #a4d6da; background: #ecfafb; }
.card-icon--violet { color: var(--violet); border-color: #d8ceff; background: #f6f3ff; }
.card-icon--green { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.card-icon--rose { color: #e11d48; border-color: #fda4af; background: #fff1f2; }
.card-icon--sky { color: #0284c7; border-color: #7dd3fc; background: #f0f9ff; }
.surface-card h3, .feature-card h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.32; letter-spacing: -.025em; }
.surface-card p, .feature-card p { margin: 0; color: var(--ink-soft); font-size: .87rem; line-height: 1.58; }
.surface-card p b, .surface-card p strong, .feature-card p b, .feature-card p strong, .pain-item p b, .pain-item p strong, .story-copy p b, .story-copy p strong { color: #2a180e; font-weight: 750; }
.surface-card .text-link { margin-top: 20px; font-size: .81rem; }
.card-kicker { display: block; margin-bottom: 9px; color: var(--amber-700); font-family: var(--font-mono); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.partner-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: 32px 0;
  border-top: 1px solid #edf1f7;
  border-bottom: 1px solid #edf1f7;
  margin: 24px auto 32px;
  overflow: hidden;
}
.partner-row p {
  width: 220px;
  flex: 0 0 220px;
  margin: 0;
  color: var(--ink);
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.45;
  position: relative;
  z-index: 2;
}
.partner-marquee {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.partner-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.5vw, 44px);
  width: max-content;
  will-change: transform;
  animation: partner-marquee 25s linear infinite;
}
.partner-marquee:hover .partner-track {
  animation-play-state: paused;
}
@keyframes partner-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  flex-shrink: 0;
  padding: 0 6px;
}
.partner-logo {
  max-width: 100%;
  object-fit: contain;
  filter: none;
  opacity: 0.94;
  transition: opacity .25s ease, transform .25s ease;
  user-select: none;
}
.partner-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.partner-logo--ses { height: 26px; }
.partner-logo--sendgrid { height: 21px; }
.partner-logo--mailgun { height: 19px; }
.partner-logo--gmail { height: 20px; }
.partner-logo--elastic { height: 14.5px; }
.partner-logo--sparkpost { height: 21px; }
.partner-logo--postmark { height: 19px; }

/* Product storytelling */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(380px,1.08fr);
  align-items: center;
  gap: clamp(48px, 9vw, 136px);
}
.story-grid + .story-grid { margin-top: 118px; }
.story-grid--reverse .story-visual { order: 2; }
.story-grid--reverse .story-copy { order: 1; }
.story-copy h2 { margin: 10px 0 13px; font-size: clamp(1.85rem,3vw,3rem); line-height: 1.1; letter-spacing: -.045em; }
.story-copy p { max-width: 510px; margin: 0; color: var(--ink-soft); }
.story-copy .text-link { margin-top: 23px; }
.story-visual { position: relative; }
.shot-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(30,41,59,.12);
}
.shot-frame img { width: 100%; }
.shot-frame--tint { padding: 13px; background: linear-gradient(135deg, #fff2d5, #fbfdff); }
.shot-frame--tint img { border-radius: 9px; }
.annotation {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #d9dfe8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 9px 20px rgba(22,31,49,.1);
  font-size: .68rem;
  font-weight: 800;
}
.annotation i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.annotation--top { top: -16px; right: -30px; }
.annotation--bottom { bottom: -16px; left: -32px; }
.annotation--teal i { background: var(--teal); }
.bullet-list { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.bullet-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: .9rem; }
.bullet-list svg { flex: none; width: 18px; margin-top: 3px; color: var(--amber); }
.bullet-list--round li { position: relative; display: block; padding-left: 21px; color: #536278; font-weight: 600; }
.bullet-list--round li::before { content: ""; position: absolute; top: .49em; left: 0; width: 8px; height: 8px; border: 2px solid var(--amber); border-radius: 50%; }

/* Homepage — four product banners from the approved wireframe */
.home-pillars { padding-top: 94px; padding-bottom: 106px; }
.home-story-heading { max-width: 650px; margin: 0 0 65px; }
.home-story-heading .display { max-width: 610px; color: #3d291e; }
.home-story-list { display: grid; gap: 84px; }
.home-story { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); align-items: center; gap: clamp(48px,7vw,86px); }
.home-story--reverse .home-story-copy { order: 2; }
.home-story--reverse .home-story-visual { order: 1; }
.home-story:not(.home-story--reverse) .home-story-copy { order: 1; }
.home-story:not(.home-story--reverse) .home-story-visual { order: 2; }
.home-story-copy h2 { max-width: 475px; margin: 10px 0 14px; color: #3d291e; font-size: clamp(1.9rem,2.85vw,2.85rem); line-height: 1.1; letter-spacing: -.048em; }
.home-story-copy > p { max-width: 470px; margin: 0; color: #58687f; font-size: .96rem; line-height: 1.66; }
.home-story-copy .text-link { margin-top: 24px; color: var(--amber-700); }
.home-story-visual { position: relative; min-height: 350px; overflow: hidden; border: 1px solid #f0d5a5; border-radius: 21px; background: linear-gradient(140deg,#fff9ed,#fffdf8); box-shadow: 0 22px 50px rgba(91,51,14,.08); }
.home-story-visual::before { content: ""; position: absolute; top: -128px; right: -111px; width: 310px; height: 310px; border: 1px solid rgba(217,119,6,.12); border-radius: 50%; box-shadow: 0 0 0 36px rgba(217,119,6,.035), 0 0 0 72px rgba(217,119,6,.018); }

/* 01 — Sending routing */
.home-route-providers { position: absolute; z-index: 2; top: 56px; left: 24px; display: grid; gap: 9px; }
.home-route-providers span { display: flex; align-items: center; width: 126px; padding: 9px 10px; border: 1px solid #eedabd; border-radius: 8px; color: #6b4b32; background: rgba(255,255,255,.91); box-shadow: 0 6px 12px rgba(86,48,15,.05); font-size: 10px; font-weight: 700; }
.home-route-providers span::before { content: ""; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--amber); }
.home-route-providers span:nth-child(2)::before { background: #7c3aed; }.home-route-providers span:nth-child(3)::before { background: #0ea5a8; }
.home-route-line { position: absolute; top: 111px; left: 145px; width: 108px; height: 83px; border-top: 1px dashed #d69b4b; border-right: 1px dashed #d69b4b; border-bottom: 1px dashed #d69b4b; border-radius: 0 10px 10px 0; }
.home-route-line::after { content: ""; position: absolute; top: 37px; right: -4px; width: 7px; height: 7px; border-top: 1px solid #d69b4b; border-right: 1px solid #d69b4b; transform: rotate(45deg); }
.home-route-canvas { position: absolute; z-index: 1; top: 44px; right: 25px; width: 255px; padding: 15px; border: 1px solid #e7d9c8; border-radius: 12px; background: #fff; box-shadow: 0 18px 32px rgba(84,45,12,.10); }
.home-window-dots { display: flex; gap: 4px; margin-bottom: 15px; }.home-window-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #e6c99f; }
.home-route-canvas h3 { margin: 0 0 3px; color: #3d291e; font-size: 13px; letter-spacing: -.02em; }.home-route-canvas p { margin: 0 0 12px; color: #8390a1; font-size: 9px; }
.home-route-campaign { display: flex; align-items: center; justify-content: space-between; padding: 9px; border: 1px solid #f0e5d5; border-radius: 7px; color: #667085; background: #fffcf8; font-size: 9px; font-weight: 700; }.home-route-campaign b { color: var(--amber-700); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.home-route-progress { height: 7px; margin: 12px 0 5px; overflow: hidden; border-radius: 99px; background: #f3e8da; }.home-route-progress i { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f7b23b,var(--amber)); }
.home-route-meta { display: flex; justify-content: space-between; color: #8b7156; font-size: 8px; font-weight: 700; }.home-route-meta span:last-child { font-variant-numeric: tabular-nums; }
.home-route-inbox { position: absolute; z-index: 3; right: 4px; bottom: 29px; padding: 11px 13px; border: 1px solid #f3cc76; border-radius: 9px; color: #71440d; background: #fff2cd; box-shadow: 0 11px 22px rgba(147,89,7,.11); font-size: 10px; font-weight: 700; }.home-route-inbox b { display: block; margin-top: 2px; color: #3d291e; font-family: var(--font-mono); font-size: 17px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* 02 — Customer profile */
.home-profile-sheet { position: absolute; z-index: 1; top: 35px; left: 41px; width: 294px; padding: 18px; border: 1px solid #e8dccc; border-radius: 13px; background: #fff; box-shadow: 0 18px 32px rgba(84,45,12,.09); }
.home-profile-top { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #f0e7db; }.home-profile-avatar { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: var(--amber-700); background: #f3e5d7; font-size: 12px; font-weight: 700; }.home-profile-top b, .home-profile-top small { display: block; }.home-profile-top b { color: #3d291e; font-size: 12px; }.home-profile-top small { margin-top: 2px; color: #8b97a8; font-size: 9px; }.home-profile-complete { margin-left: auto; color: var(--amber-700); font-size: 9px; font-weight: 700; }
.home-profile-row { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f6eee4; color: #8490a0; font-size: 9px; }.home-profile-row b { color: #4b5b70; font-weight: 700; }
.home-profile-enriched { position: absolute; z-index: 2; top: 207px; right: 25px; width: 182px; padding: 12px; border: 1px solid #eacd9d; border-radius: 9px; background: #fff7e7; box-shadow: 0 12px 24px rgba(84,45,12,.10); }.home-profile-enriched b { color: #3d291e; font-size: 10px; }.home-profile-enriched p { margin: 4px 0 0; color: #8b6845; font-size: 9px; line-height: 1.4; }.home-profile-enriched span { display: inline-block; margin-top: 8px; padding: 5px 7px; border-radius: 4px; color: #fff; background: var(--amber); font-size: 8px; font-weight: 700; }

/* 03 — Visual automation */
.home-flow-board { position: absolute; inset: 34px 28px; overflow: hidden; border: 1px solid #e9decf; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px rgba(84,45,12,.08); }.home-flow-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #f1e9de; color: #3d291e; font-size: 11px; font-weight: 700; }.home-flow-head span { padding: 4px 7px; border: 1px solid #f5d88b; border-radius: 999px; color: var(--amber-700); background: #fff7e5; font-size: 8px; }
.home-flow-map { position: relative; height: 226px; }.home-flow-map::before { content: ""; position: absolute; top: 67px; left: 48px; width: 67%; height: 75px; border: 1px solid #e9c582; border-left: none; border-radius: 0 18px 18px 0; }.home-flow-node { position: absolute; z-index: 1; min-width: 99px; padding: 10px; border: 1px solid #e8dac8; border-radius: 8px; color: #3d291e; background: #fff; box-shadow: 0 6px 13px rgba(84,45,12,.05); font-size: 9px; font-weight: 700; }.home-flow-node small { display: block; margin-top: 3px; color: #8a96a7; font-size: 8px; font-weight: 600; }.home-flow-node.start { top: 42px; left: 22px; border-color: #f1cd82; background: #fff9ed; }.home-flow-node.wait { top: 42px; right: 29px; }.home-flow-node.email { bottom: 30px; left: 118px; border-color: #e2d7f3; background: #fbf9ff; }.home-flow-node.goal { right: 18px; bottom: 30px; border-color: #f0d2a1; background: #fff9f0; }.home-flow-node.goal::before { content: ""; position: absolute; top: 21px; left: -26px; width: 25px; border-top: 1px dashed #d89d47; }

/* 04 — AI pre-flight */
.home-ai-editor { position: absolute; z-index: 1; top: 42px; left: 33px; width: 274px; padding: 15px; border: 1px solid #e7d9c8; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px rgba(84,45,12,.09); }.home-ai-editor-top { display: flex; align-items: center; justify-content: space-between; color: #3d291e; font-size: 11px; font-weight: 700; }.home-ai-editor-top span:last-child { color: var(--amber-700); font-size: 9px; }.home-ai-subject { margin: 14px 0 10px; padding: 9px; border: 1px solid #eee2d2; border-radius: 6px; color: #4b5b70; font-size: 10px; font-weight: 700; }.home-ai-lines { display: grid; gap: 7px; }.home-ai-lines i { display: block; height: 7px; border-radius: 99px; background: #f2eadf; }.home-ai-lines i:nth-child(2) { width: 88%; }.home-ai-lines i:nth-child(3) { width: 72%; }.home-ai-suggest { margin-top: 14px; padding: 10px; border: 1px solid #f3d696; border-radius: 7px; color: #744c17; background: #fff8e8; font-size: 9px; font-weight: 700; }.home-ai-suggest b { color: var(--amber-700); }
.home-ai-score { position: absolute; z-index: 2; right: 20px; bottom: 50px; width: 162px; padding: 13px; border: 1px solid #e8d8c5; border-radius: 10px; background: #fff; box-shadow: 0 12px 26px rgba(84,45,12,.10); }.home-ai-score small { color: #8b97a8; font-size: 8px; font-weight: 700; }.home-ai-score b { display: block; margin: 3px 0 8px; color: #3d291e; font-family: var(--font-mono); font-size: 21px; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }.home-ai-score span { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: #f0e5d6; }.home-ai-score span i { display: block; width: 91%; height: 100%; border-radius: inherit; background: var(--amber); }

/* 05 — Deliverability & DNS Engine */
.home-dns-panel { position: absolute; z-index: 1; top: 28px; left: 24px; width: 290px; padding: 15px; border: 1px solid #d8e5d0; border-radius: 13px; background: #fff; box-shadow: 0 18px 32px rgba(22,101,52,.08); }
.home-dns-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #edf4ea; }
.home-dns-title { display: flex; align-items: center; gap: 7px; color: #1e3a1f; font-size: 11px; font-weight: 700; }
.home-dns-badge { padding: 3px 7px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 9px; font-weight: 700; }
.home-dns-records { display: grid; gap: 7px; margin: 10px 0; }
.home-dns-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border: 1px solid #f0f4ee; border-radius: 6px; background: #fbfdfa; font-size: 9px; }
.dns-tag { padding: 2px 5px; border-radius: 4px; background: #eef2f6; color: #475569; font-weight: 750; font-family: var(--font-mono); font-size: 8px; }
.home-dns-row code { color: #334155; font-family: var(--font-mono); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.dns-status { font-weight: 700; font-size: 8.5px; color: #16a34a; }
.card-kicker--icon { display: flex; align-items: center; gap: 7px; }
.card-kicker--icon svg { width: 16px; height: 16px; }

/* Deliverability & Reputation — feature detail */
.feature-detail--dns { background: #fff; }
.dns-hero { position: relative; overflow: hidden; padding: 78px 0 84px; background: linear-gradient(118deg,#fffaf0 0%,#fffdf9 52%,#f0f8f3 100%); }
.dns-hero::before { position: absolute; width: 430px; height: 430px; right: -120px; top: -245px; border: 1px solid rgba(16,120,78,.13); border-radius: 50%; box-shadow: 0 0 0 55px rgba(16,120,78,.025),0 0 0 105px rgba(16,120,78,.018); content: ""; }
.dns-hero__shell { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.05fr); align-items: center; gap: clamp(48px,6vw,86px); }
.dns-hero__copy { position: relative; z-index: 2; }
.dns-hero__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #137548; font-family: var(--font-mono); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.dns-hero__kicker svg { width: 19px; height: 19px; }
.dns-hero .display { max-width: 650px; margin: 0 0 19px; color: #36261e; font-size: clamp(2.75rem,5vw,4.65rem); }
.dns-hero .display em { color: #148051; font-style: normal; }
.dns-hero .lead { max-width: 590px; color: #665d57; font-size: 1.03rem; line-height: 1.68; }
.dns-hero__proof { display: flex; flex-wrap: wrap; gap: 10px 19px; margin: 28px 0 31px; }
.dns-hero__proof span { display: flex; align-items: center; gap: 7px; color: #496052; font-size: .75rem; font-weight: 750; }
.dns-hero__proof i { width: 7px; height: 7px; border-radius: 50%; background: #19a365; box-shadow: 0 0 0 4px rgba(25,163,101,.10); }

.dns-hero-console { position: relative; z-index: 1; min-height: 430px; }
.dns-hero-console__main { position: absolute; inset: 31px 0 26px 15px; overflow: hidden; border: 1px solid #dce8df; border-radius: 18px; background: #fff; box-shadow: 0 28px 60px rgba(24,66,45,.14); transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); }
.dns-hero-console__top { display: flex; align-items: center; height: 48px; gap: 8px; padding: 0 15px; border-bottom: 1px solid #e8eee9; color: #7b887f; background: #fbfdfb; font-size: .66rem; }
.dns-hero-console__top b { font-weight: 700; }
.dns-hero-console__dots { display: flex; gap: 4px; margin-right: 3px; }
.dns-hero-console__dots i { width: 7px; height: 7px; border-radius: 50%; background: #d8e1da; }
.dns-hero-console__dots i:first-child { background: #f1be61; }
.dns-hero-console__status { margin-left: auto; color: #178452; font-weight: 800; }
.dns-hero-console__body { display: grid; grid-template-columns: 116px 1fr; min-height: 326px; }
.dns-hero-console__side { display: grid; align-content: start; gap: 9px; padding: 25px 13px; border-right: 1px solid #edf1ed; background: #fafcf9; }
.dns-hero-console__side b { margin-bottom: 10px; color: #25392d; font-size: .82rem; }
.dns-hero-console__side b em { color: var(--amber); font-style: normal; }
.dns-hero-console__side span { padding: 8px 9px; color: #8a958d; font-size: .64rem; font-weight: 700; }
.dns-hero-console__side .is-active { border-radius: 6px; color: #137548; background: #eaf7ee; }
.dns-hero-console__data { min-width: 0; padding: 25px 22px; }
.dns-hero-console__data-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.dns-hero-console__data-head h2 { margin: 0 0 4px; color: #26372d; font-size: 1.05rem; }
.dns-hero-console__data-head p { margin: 0; color: #929d96; font-size: .61rem; }
.dns-hero-console__data-head > span { padding: 7px 9px; border: 1px solid #d6e6da; border-radius: 6px; color: #18794e; background: #f5fbf7; font-size: .6rem; font-weight: 800; }
.dns-hero-console__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 23px 0 17px; }
.dns-hero-console__stats div { padding: 13px 11px; border: 1px solid #e7eee8; border-radius: 9px; background: #fbfdfb; }
.dns-hero-console__stats small,.dns-hero-console__stats b { display: block; }
.dns-hero-console__stats small { color: #8b978f; font-size: .49rem; font-weight: 800; letter-spacing: .03em; }
.dns-hero-console__stats b { margin-top: 5px; color: #37483e; font-family: var(--font-mono); font-size: 1.17rem; }
.dns-hero-console__stats .is-green { color: #138650; }.dns-hero-console__stats .is-amber { color: #c77409; }
.dns-hero-console__checks { display: grid; gap: 7px; }
.dns-hero-console__checks div { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; border: 1px solid #edf1ed; border-radius: 7px; color: #536158; font-size: .65rem; }
.dns-hero-console__checks span { display: flex; align-items: center; gap: 7px; font-weight: 800; }
.dns-hero-console__checks i { width: 7px; height: 7px; border-radius: 50%; background: #1ba665; }
.dns-hero-console__checks strong { color: #178452; font-size: .6rem; }
.dns-hero-console__float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #d8e9dc; border-radius: 11px; background: rgba(255,255,255,.97); box-shadow: 0 14px 28px rgba(27,72,48,.14); }
.dns-hero-console__float > span { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; color: #148051; background: #eaf8ef; }
.dns-hero-console__float svg { width: 17px; }
.dns-hero-console__float b,.dns-hero-console__float small { display: block; white-space: nowrap; }
.dns-hero-console__float b { color: #304238; font-size: .7rem; }.dns-hero-console__float small { margin-top: 2px; color: #7f8d84; font-size: .57rem; }
.dns-hero-console__float--top { top: 0; right: -15px; }.dns-hero-console__float--bottom { left: -15px; bottom: 0; }

.dns-friction { padding: 88px 0; border-top: 1px solid #eee5d8; border-bottom: 1px solid #e8e5de; background: #f9faf8; }
.dns-friction__grid { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr); gap: clamp(55px,8vw,110px); align-items: start; }
.dns-friction__intro { position: sticky; top: 110px; }
.dns-friction__intro .display { max-width: 470px; margin: 14px 0 17px; color: #332a25; }
.dns-friction__intro .lead { max-width: 470px; color: #69736d; font-size: .95rem; }
.dns-friction__list { margin: 0; padding: 0; border-top: 1px solid #dce3de; list-style: none; }
.dns-friction__list li { display: grid; grid-template-columns: 47px minmax(0,1fr) auto; gap: 18px; align-items: start; padding: 27px 0; border-bottom: 1px solid #dce3de; }
.dns-friction__number { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #d3ddd6; border-radius: 50%; color: #178452; font-family: var(--font-mono); font-size: .66rem; font-weight: 800; }
.dns-friction__list h3 { margin: 1px 0 7px; color: #29372f; font-size: 1rem; }
.dns-friction__list p { margin: 0; color: #68746c; font-size: .82rem; line-height: 1.62; }
.dns-friction__signal { align-self: center; padding: 5px 8px; border-radius: 999px; color: #8f4f0f; background: #fff1d2; font-size: .57rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.dns-mechanics { padding: 96px 0 105px; background: #fff; }
.dns-mechanics .section-heading { max-width: 790px; margin-right: auto; margin-left: auto; }
.dns-mechanics__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 47px; }
.dns-mechanic { position: relative; display: grid; min-height: 365px; align-content: start; overflow: hidden; padding: 31px; border: 1px solid #e1e7e2; border-radius: 17px; background: #fbfcfb; transition: .22s ease; }
.dns-mechanic:hover { border-color: #bcd9c6; box-shadow: 0 18px 40px rgba(24,91,55,.09); transform: translateY(-3px); }
.dns-mechanic::after { position: absolute; right: -62px; top: -68px; width: 180px; height: 180px; border: 1px solid rgba(24,132,82,.09); border-radius: 50%; box-shadow: 0 0 0 25px rgba(24,132,82,.025); content: ""; }
.dns-mechanic__icon { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; margin-bottom: 19px; place-items: center; border: 1px solid #cde2d4; border-radius: 12px; color: #168150; background: #eff9f2; }
.dns-mechanic__icon svg { width: 21px; }
.dns-mechanic__eyebrow { color: #168150; font-family: var(--font-mono); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dns-mechanic h3 { max-width: 410px; margin: 10px 0 9px; color: #29372f; font-size: 1.23rem; letter-spacing: -.03em; }
.dns-mechanic > p { max-width: 490px; margin: 0; color: #67746c; font-size: .84rem; line-height: 1.63; }
.dns-mechanic__mini { margin-top: auto; padding-top: 24px; }
.dns-mechanic__mini--records { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dns-mechanic__mini--records span { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid #dce8df; border-radius: 7px; background: #fff; font-size: .65rem; }.dns-mechanic__mini--records i { color: #178452; font-size: .57rem; font-style: normal; font-weight: 800; }
.dns-mechanic__mini--warmup > div { display: grid; grid-template-columns: repeat(4,1fr); color: #758078; font-size: .55rem; text-align: center; }.dns-mechanic__mini--warmup > p { display: flex; height: 61px; align-items: end; justify-content: space-around; gap: 8px; margin: 7px 0 0; padding: 7px 12px 0; border-bottom: 1px solid #cfdbd2; background: linear-gradient(#f5faf6 1px,transparent 1px); background-size: 100% 20px; }.dns-mechanic__mini--warmup i { width: 17%; border-radius: 4px 4px 0 0; background: linear-gradient(#43b77c,#178452); }
.dns-mechanic__mini--guard { display: flex; align-items: center; gap: 9px; }.dns-mechanic__mini--guard span { padding: 8px 10px; border-radius: 7px; font-size: .62rem; font-weight: 800; }.dns-mechanic__mini--guard .is-risk { color: #a74739; background: #fff0ed; }.dns-mechanic__mini--guard .is-safe { color: #14774a; background: #eaf8ef; }.dns-mechanic__mini--guard > i { flex: 1; border-top: 1px dashed #b8c8bd; }.dns-mechanic__mini--guard > b { color: #68746c; font-size: .58rem; }
.dns-mechanic__mini--tracking { display: flex; align-items: center; overflow: hidden; padding: 11px 13px; border: 1px solid #dce6df; border-radius: 8px; background: #fff; font-family: var(--font-mono); font-size: .66rem; }.dns-mechanic__mini--tracking span { color: #929c96; }.dns-mechanic__mini--tracking b { color: #33473b; }.dns-mechanic__mini--tracking i { margin-left: auto; color: #168150; font-size: .57rem; font-style: normal; font-weight: 800; }

.dns-compare { padding: 95px 0 105px; color: #fff; background: #17251e; }
.dns-compare__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.58fr); gap: 65px; align-items: end; margin-bottom: 43px; }
.dns-compare__heading .eyebrow { color: #73d59e; }.dns-compare__heading .eyebrow-dot { background: #73d59e; }
.dns-compare__heading .display { max-width: 680px; margin: 14px 0 0; color: #fff; }.dns-compare__heading .display em { color: #8ee1b2; font-style: normal; }
.dns-compare__heading .lead { color: #b8c6bd; font-size: .9rem; }
.dns-compare__board { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.035); }
.dns-compare__head,.dns-compare__row { display: grid; grid-template-columns: .72fr 1fr 1fr; }
.dns-compare__head { min-height: 91px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.03); }
.dns-compare__head > span,.dns-compare__head > div { display: flex; flex-direction: column; justify-content: center; padding: 19px 23px; }
.dns-compare__head > span { color: #9eada4; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dns-compare__head > div { border-left: 1px solid rgba(255,255,255,.12); }
.dns-compare__head small { margin-bottom: 5px; color: #91a198; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; }.dns-compare__head b { font-size: .87rem; }.dns-compare__head .is-new { background: rgba(31,157,92,.1); }.dns-compare__head .is-new small,.dns-compare__head .is-new b { color: #8ee1b2; }
.dns-compare__row { min-height: 132px; border-bottom: 1px solid rgba(255,255,255,.10); }.dns-compare__row:last-child { border-bottom: 0; }
.dns-compare__criterion,.dns-compare__cell { display: flex; align-items: center; padding: 23px; }
.dns-compare__criterion { gap: 14px; }.dns-compare__criterion span { color: #6c8477; font-family: var(--font-mono); font-size: .64rem; }.dns-compare__criterion h3 { margin: 0; color: #eef5f0; font-size: .9rem; }
.dns-compare__cell { gap: 12px; border-left: 1px solid rgba(255,255,255,.10); }.dns-compare__cell.is-new { background: rgba(31,157,92,.055); }
.dns-compare__cell i { display: grid; flex: none; width: 24px; height: 24px; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; }.dns-compare__cell.is-old i { color: #d59687; background: rgba(204,100,78,.14); }.dns-compare__cell.is-new i { color: #8ee1b2; background: rgba(31,157,92,.18); }
.dns-compare__cell p { margin: 0; color: #adbbb2; font-size: .76rem; line-height: 1.58; }.dns-compare__cell.is-new p { color: #cedbd2; }.dns-compare__cell strong { color: #fff; }
.dns-story .story-visual { padding: 20px; border: 1px solid #dce8df; border-radius: 18px; background: #f2f8f4; }.dns-story .shot-frame { margin: 0; box-shadow: 0 20px 42px rgba(27,77,50,.13); }.dns-story .shot-frame img { object-position: top left; }

@media (max-width: 1050px) {
  .dns-hero__shell { grid-template-columns: 1fr; }.dns-hero__copy { max-width: 720px; }.dns-hero-console { max-width: 690px; width: 100%; margin: 0 auto; }
  .dns-friction__grid { grid-template-columns: 1fr; gap: 42px; }.dns-friction__intro { position: static; }.dns-friction__intro .display,.dns-friction__intro .lead { max-width: 700px; }
}
@media (max-width: 760px) {
  .dns-hero { padding: 58px 0 68px; }.dns-hero .display { font-size: clamp(2.35rem,11vw,3.4rem); }.dns-hero-console { min-height: 355px; }.dns-hero-console__main { inset: 20px 0; transform: none; }.dns-hero-console__body { grid-template-columns: 88px 1fr; min-height: 270px; }.dns-hero-console__side { padding: 18px 8px; }.dns-hero-console__side span { padding: 6px; font-size: .54rem; }.dns-hero-console__data { padding: 18px 13px; }.dns-hero-console__stats { margin: 16px 0 12px; }.dns-hero-console__stats div { padding: 9px 7px; }.dns-hero-console__stats small { display: none; }.dns-hero-console__stats b { font-size: .9rem; }.dns-hero-console__float { display: none; }
  .dns-friction { padding: 67px 0; }.dns-friction__list li { grid-template-columns: 39px 1fr; gap: 14px; }.dns-friction__signal { grid-column: 2; justify-self: start; }
  .dns-mechanics { padding: 75px 0; }.dns-mechanics__grid { grid-template-columns: 1fr; }.dns-mechanic { min-height: 340px; padding: 25px; }
  .dns-compare { padding: 74px 0; }.dns-compare__heading { grid-template-columns: 1fr; gap: 20px; }.dns-compare__board { overflow-x: auto; }.dns-compare__head,.dns-compare__row { min-width: 760px; }
}
@media (max-width: 480px) {
  .dns-hero-console { min-height: 315px; }.dns-hero-console__main { left: 0; }.dns-hero-console__side { display: none; }.dns-hero-console__body { grid-template-columns: 1fr; }.dns-hero-console__top b { display: none; }.dns-hero-console__data-head > span { display: none; }
  .dns-mechanic__mini--guard { flex-wrap: wrap; }.dns-mechanic__mini--guard > i { min-width: 30px; }
}

/* Deliverability brand correction — Amber is the primary brand color. */
.dns-hero { border-top: 1px solid #f1dfc5; border-bottom: 1px solid #f1dfc5; background: linear-gradient(112deg,#fffaf1 0%,#fffdf8 52%,#fff3dc 100%); }
.dns-hero::before { border-color: rgba(217,119,6,.15); box-shadow: 0 0 0 55px rgba(217,119,6,.035),0 0 0 105px rgba(217,119,6,.018); }
.dns-hero__kicker { padding: 8px 12px; border-radius: 999px; color: var(--amber-700); background: #fff0cd; }
.dns-hero .display em { color: var(--amber); }
.dns-hero .lead { color: #70563f; }
.dns-hero__proof span { color: #6a4c35; }
.dns-hero__proof i { background: var(--amber); box-shadow: none; }
.dns-hero-console__main { border-color: rgba(82,45,12,.19); box-shadow: 0 28px 60px rgba(91,50,11,.15); }
.dns-hero-console__top { border-color: #f0e5d7; color: #866a51; background: #fffcf7; }
.dns-hero-console__status { color: var(--amber-700); }
.dns-hero-console__side { border-color: #f0e5d7; background: #fffefc; }
.dns-hero-console__side b,.dns-hero-console__data-head h2 { color: #3d291e; }
.dns-hero-console__side .is-active { color: var(--amber-700); background: #fff1cb; }
.dns-hero-console__data-head > span { border-color: #efd6a8; color: #fff; background: var(--amber); }
.dns-hero-console__stats div,.dns-hero-console__checks div { border-color: #f0e5d7; background: #fff; }
.dns-hero-console__stats b,.dns-hero-console__checks span { color: #3d291e; }
.dns-hero-console__stats .is-green,.dns-hero-console__stats .is-amber { color: var(--amber-700); }
.dns-hero-console__checks i { background: var(--amber); }
.dns-hero-console__checks strong { color: var(--amber-700); }
.dns-hero-console__float { border-color: rgba(84,45,12,.17); box-shadow: 0 14px 28px rgba(84,45,12,.13); }
.dns-hero-console__float > span { color: var(--amber-700); background: #fff0c9; }
.dns-hero-console__float b { color: #3d291e; }

.dns-friction { padding: 58px 0; border: 0; background: #fff; }
.dns-friction__grid { gap: clamp(38px,5vw,68px); padding: clamp(30px,4vw,48px); border: 1px solid #eed9ba; border-radius: 20px; background: linear-gradient(112deg,#fffaf1 0%,#fffdf9 56%,#fff 100%); }
.dns-friction__intro .display,.dns-friction__list h3 { color: #3d291e; }
.dns-friction__intro .lead,.dns-friction__list p { color: var(--ink-soft); }
.dns-friction__list,.dns-friction__list li { border-color: #eadfce; }
.dns-friction__number { border-color: #edc979; color: var(--amber-700); background: #fff8e8; }
.dns-friction__signal { color: var(--amber-800); background: var(--amber-100); }

.dns-mechanics { padding: 64px 0 72px; }
.dns-mechanic { border-color: #e1e8f1; background: #fff; box-shadow: 0 8px 20px rgba(30,43,60,.035); }
.dns-mechanic:hover { border-color: #f1d59e; box-shadow: 0 18px 34px rgba(43,31,17,.09); }
.dns-mechanic::after { border-color: rgba(217,119,6,.10); box-shadow: 0 0 0 25px rgba(217,119,6,.025); }
.dns-mechanic__icon { border-color: #f1d59e; color: var(--amber-700); background: #fff8e8; }
.dns-mechanic__eyebrow { color: var(--amber-700); }
.dns-mechanic h3 { color: var(--ink); }
.dns-mechanic > p { color: #66778e; }
.dns-mechanic__mini--records span,.dns-mechanic__mini--tracking { border-color: #efe2d2; background: #fffcf8; }
.dns-mechanic__mini--records i,.dns-mechanic__mini--tracking i { color: var(--amber-700); }
.dns-mechanic__mini--warmup > p { border-color: #f1d59e; background-image: linear-gradient(#f7ead4 1px,transparent 1px); }
.dns-mechanic__mini--warmup i { background: linear-gradient(#f7bd57,var(--amber)); }
.dns-mechanic__mini--guard .is-safe { color: var(--amber-800); background: var(--amber-100); }

.dns-compare { color: #fff; background: var(--ink); }
.dns-compare__heading .eyebrow { color: #fddca4; }
.dns-compare__heading .eyebrow-dot { background: var(--amber); }
.dns-compare__heading .display em { color: #f6b849; }
.dns-compare__heading .lead { color: #ccd5e4; }
.dns-compare__head .is-new,.dns-compare__cell.is-new { background: rgba(217,119,6,.10); }
.dns-compare__head .is-new small,.dns-compare__head .is-new b { color: #fddca4; }
.dns-compare__criterion span { color: #9a8879; }
.dns-compare__cell.is-new i { color: #fde68a; background: rgba(217,119,6,.22); }
.dns-compare__cell.is-new p { color: #e6d9cb; }
.dns-compare { padding: 68px 0; color: var(--ink); background: #fff; }
.dns-compare__heading { margin-bottom: 34px; }
.dns-compare__heading .eyebrow { color: var(--amber-700); }
.dns-compare__heading .eyebrow-dot { background: var(--amber); }
.dns-compare__heading .display { color: var(--ink); }
.dns-compare__heading .display em { color: var(--amber); }
.dns-compare__heading .lead { color: var(--ink-soft); }
.dns-compare__board { border: 1px solid #e4e8ee; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px rgba(29,42,61,.065); }
.dns-compare__head { min-height: 72px; border-bottom: 1px solid #e4e8ee; background: #fbfcfe; }
.dns-compare__head > span,.dns-compare__head > div { padding: 14px 18px; }
.dns-compare__head > span { color: #8a97a8; }
.dns-compare__head > div { border-left: 1px solid #e4e8ee; }
.dns-compare__head small { margin-bottom: 3px; color: #8491a2; }
.dns-compare__head b { color: #506074; }
.dns-compare__head .is-old { background: #f7f9fc; }
.dns-compare__head .is-new { position: relative; background: #fff8e9; }
.dns-compare__head .is-new::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--amber); content: ""; }
.dns-compare__head .is-new small { color: var(--amber-700); }
.dns-compare__head .is-new b { color: #4b311e; }
.dns-compare__row { min-height: 92px; border-bottom: 1px solid #e8edf3; }
.dns-compare__criterion,.dns-compare__cell { padding: 15px 18px; }
.dns-compare__criterion { gap: 11px; }
.dns-compare__criterion span { color: #a1846d; }
.dns-compare__criterion h3 { color: var(--ink); font-size: .86rem; }
.dns-compare__cell { gap: 10px; border-left: 1px solid #e8edf3; }
.dns-compare__cell.is-old { background: #fafbfd; }
.dns-compare__cell.is-new { background: #fffdfa; }
.dns-compare__cell i { width: 22px; height: 22px; }
.dns-compare__cell.is-old i { color: #bd3f3f; background: #fff0ef; }
.dns-compare__cell.is-new i { color: var(--amber-800); background: #ffebbd; }
.dns-compare__cell p,.dns-compare__cell.is-new p { color: #66778e; font-size: .74rem; line-height: 1.48; }
.dns-compare__cell strong { color: #334155; }
.dns-compare__cell.is-new strong { color: #54321e; }
@media (max-width: 760px) {
  .dns-compare { padding: 52px 0; }
  .dns-compare__heading { margin-bottom: 28px; }
  .dns-compare__head,.dns-compare__row { min-width: 680px; }
  .dns-compare__row { min-height: 86px; }
  .dns-compare__criterion,.dns-compare__cell { padding: 13px 15px; }
}
.dns-story .story-visual { border-color: #eed9ba; background: #fff8e8; }
.dns-story .shot-frame { box-shadow: 0 20px 42px rgba(84,45,12,.12); }
.home-warmup-strip { margin-top: 10px; padding: 9px; border-radius: 8px; background: #f8fafc; border: 1px dashed #cbd5e1; }
.home-warmup-info { display: flex; justify-content: space-between; font-size: 8.5px; color: #64748b; font-weight: 600; margin-bottom: 6px; }
.home-warmup-info b { color: var(--ink); font-family: var(--font-mono); font-size: 9px; }
.home-warmup-bar { height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.home-warmup-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10b981, var(--amber)); }
.home-inbox-metric { position: absolute; z-index: 2; right: 14px; bottom: 35px; width: 148px; padding: 12px; border: 1px solid #c7f0d8; border-radius: 10px; background: #f0fdf4; box-shadow: 0 12px 24px rgba(5,150,105,.12); }
.home-inbox-metric small { color: #047857; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.home-inbox-metric b { display: block; margin: 3px 0 2px; color: #065f46; font-family: var(--font-mono); font-size: 20px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; font-weight: 800; }
.home-inbox-metric span { color: #059669; font-size: 8.5px; font-weight: 600; }

/* detail pages */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 72px;
  background: #fffaf0;
}
.page-hero.page-hero--compact {
  padding: 48px 0 36px;
}
.page-hero--compact + .section {
  padding-top: 40px;
}
.page-hero:after {
  content: "";
  position: absolute;
  width: 390px; height: 390px;
  top: -230px; right: 7%;
  border: 1px solid rgba(217,119,6,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 68px rgba(217,119,6,.035);
}
.page-hero--dark { color: white; background: #172033; }
.page-hero--dark:after { border-color: rgba(255,255,255,.15); box-shadow: 0 0 0 68px rgba(255,255,255,.03); }
.page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(380px,.85fr); align-items: center; gap: 74px; }
.page-hero .display { max-width: 700px; }
.page-hero .lead { max-width: 610px; }
.showcase-hero { padding: 78px 0 60px; background: linear-gradient(115deg,#fffaf0 0%,#fffefb 53%,#f6f8fc 100%); }
.showcase-hero:after { display: block; }
.showcase-shell { position: relative; display: grid; grid-template-columns: minmax(0,.98fr) minmax(440px,.9fr); align-items: center; gap: clamp(44px,6vw,82px); overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; }
.showcase-shell::before { content: ""; position: absolute; bottom: -240px; left: -138px; width: 480px; height: 480px; border: 1px solid rgba(217,119,6,.12); border-radius: 50%; box-shadow: 0 0 0 38px rgba(217,119,6,.03),0 0 0 78px rgba(217,119,6,.017); }
.showcase-copy, .showcase-visual { position: relative; z-index: 1; }
.showcase-copy .page-badge { margin-bottom: 17px; background: rgba(255,255,255,.62); }
.showcase-copy .display { max-width: 600px; margin: 0 0 18px; color: #3d291e; font-size: clamp(2.5rem,4.5vw,4.2rem); }
.showcase-copy .lead { max-width: 565px; color: #705c4b; font-size: 1.03rem; }
.showcase-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }

/* ==========================================================================
   Feature Deep-Dive Rich Components: Pain Points, Matrix & Impact
   ========================================================================== */
.pain-point-section {
  padding: 60px 0;
  background: #fdfbf7;
  border-bottom: 1px solid #ebdccc;
}
.pain-box {
  background: #ffffff;
  border: 1px solid #ebdccc;
  border-left: 4px solid #d97706;
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 8px 24px rgba(61, 35, 20, 0.05);
}
.pain-box-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.pain-box-header svg {
  color: #d97706;
  flex-shrink: 0;
}
.pain-box-header h3 {
  margin: 0;
  color: #3d2314;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pain-item {
  background: #fdfbf7;
  border: 1px solid #ebdccc;
  border-radius: 10px;
  padding: 20px;
}
.pain-item h4 {
  margin: 0 0 8px;
  color: #92400e;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pain-item h4 svg {
  color: #dc2626;
  flex-shrink: 0;
}
.pain-item p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Features hub — traditional email marketing paradox */
.hub-paradox {
  position: relative;
  padding: 28px 0 58px;
  overflow: hidden;
  border-bottom: 1px solid #eadbc8;
  background: #fffdf9;
}
.hub-paradox::before {
  position: absolute;
  top: 30px;
  left: 50%;
  width: min(1240px, 90vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, #ead7bd, transparent);
  content: "";
  transform: translateX(-50%);
}
.hub-paradox__shell {
  display: grid;
  grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr);
  gap: clamp(42px,6vw,82px);
  align-items: center;
  padding: clamp(34px,4vw,52px);
  border: 1px solid #eadbc8;
  border-radius: 20px;
  background: linear-gradient(115deg,#fff8eb 0%,#fffdf9 42%,#fff 100%);
  box-shadow: 0 18px 42px rgba(73,42,18,.07);
}
.hub-paradox__intro .eyebrow { margin-bottom: 13px; }
.hub-paradox__intro .display {
  max-width: 470px;
  margin: 0 0 16px;
  color: #3d291e;
  font-size: clamp(2rem,3.1vw,2.85rem);
  line-height: 1.06;
}
.hub-paradox__intro > p {
  max-width: 450px;
  margin: 0;
  color: #6b7a8f;
  font-size: .9rem;
  line-height: 1.65;
}
.hub-paradox__equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 27px;
  padding: 14px;
  border: 1px solid #efd8b7;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
}
.hub-paradox__equation span { display: block; }
.hub-paradox__equation small,.hub-paradox__equation b { display: block; }
.hub-paradox__equation small { margin-bottom: 3px; color: #9a816c; font-family: var(--font-mono); font-size: .48rem; font-weight: 800; }
.hub-paradox__equation b { color: #3d291e; font-size: .73rem; }
.hub-paradox__equation i { color: var(--amber); font-family: var(--font-mono); font-size: 1.2rem; font-style: normal; font-weight: 800; }
.hub-paradox__map {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-paradox__map::before {
  position: absolute;
  top: 42px;
  bottom: 42px;
  left: 29px;
  width: 1px;
  background: #e5cda9;
  content: "";
}
.hub-paradox__map li {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0,1fr) 168px;
  gap: 16px;
  align-items: center;
  min-height: 118px;
  padding: 18px 0;
  border-bottom: 1px solid #eadfD1;
}
.hub-paradox__map li:last-child { border-bottom: 0; }
.hub-paradox__marker { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; }
.hub-paradox__marker > span { color: #a96a27; font-family: var(--font-mono); font-size: .58rem; font-weight: 800; }
.hub-paradox__marker > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #e9c995;
  border-radius: 12px;
  color: var(--amber-700);
  background: #fff8e8;
  box-shadow: 0 0 0 6px #fffdf9;
}
.hub-paradox__marker svg { width: 21px; height: 21px; }
.hub-paradox__map h3 { margin: 0 0 6px; color: #3d291e; font-size: 1rem; line-height: 1.3; }
.hub-paradox__map p { margin: 0; color: #6b7a8f; font-size: .79rem; line-height: 1.55; }
.hub-paradox__map p strong { color: #3d291e; }
.hub-paradox__impact {
  width: 168px;
  padding: 9px 11px;
  border: 1px solid #f0d3a4;
  border-radius: 8px;
  color: #965413;
  background: #fff4df;
  font-size: .61rem;
  line-height: 1.4;
}

@media (max-width: 1000px) {
  .hub-paradox__shell { grid-template-columns: 1fr; gap: 30px; }
  .hub-paradox__intro .display,.hub-paradox__intro > p { max-width: 700px; }
}
@media (max-width: 650px) {
  .hub-paradox { padding: 20px 0 42px; }
  .hub-paradox__shell { padding: 27px 20px; border-radius: 15px; }
  .hub-paradox__intro .display { font-size: clamp(1.9rem,9vw,2.45rem); }
  .hub-paradox__equation { gap: 8px; padding: 11px; }
  .hub-paradox__map::before { left: 23px; }
  .hub-paradox__map li { grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 17px 0; }
  .hub-paradox__marker > i { width: 36px; height: 36px; border-radius: 10px; }
  .hub-paradox__impact { grid-column: 2; width: fit-content; }
}

/* Comparison Matrix: Old vs eMailBase */
.matrix-section {
  padding: 75px 0;
  background: #ffffff;
}
.matrix-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.matrix-col {
  padding: 36px;
}
.matrix-col--old {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}
.matrix-col--new {
  background: #fffdf9;
  position: relative;
}
.matrix-col--new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--amber);
}
.matrix-col-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #cbd5e1;
}
.matrix-col-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
}
.matrix-col--old .matrix-col-badge {
  background: #fee2e2;
  color: #991b1b;
}
.matrix-col--new .matrix-col-badge {
  background: #fef3c7;
  color: #92400e;
}
.matrix-col-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--ink);
}
.matrix-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.matrix-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.5;
}
.matrix-item strong {
  color: var(--ink);
}
.matrix-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.matrix-col--old .matrix-item svg {
  color: #ef4444;
}
.matrix-col--new .matrix-item svg {
  color: #16a34a;
}

/* Impact Metrics Grid */
.impact-section {
  padding: 70px 0;
  background: linear-gradient(135deg, #152033 0%, #243147 100%);
  color: #ffffff;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.impact-card {
  padding: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.impact-val {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #fbbf24;
  margin-bottom: 6px;
}
.impact-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}
.impact-desc {
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .pain-grid { grid-template-columns: 1fr; }
  .matrix-card { grid-template-columns: 1fr; }
  .matrix-col--old { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pain-box { padding: 24px 18px; }
  .matrix-col { padding: 24px 18px; }
  .impact-grid { grid-template-columns: 1fr; }
}

/* REST API & Sub-users — feature detail */
.api-hero { position:relative; overflow:hidden; border-top:1px solid #f1dfc5; border-bottom:1px solid #f1dfc5; background:linear-gradient(112deg,#fffaf1 0%,#fffdf8 52%,#fff3dc 100%); }
.api-hero__shell { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr); gap:clamp(42px,5vw,68px); align-items:center; min-height:540px; padding:68px 0 64px; }
.api-hero__shell::before { position:absolute; bottom:-245px; left:-140px; width:440px; height:440px; border:1px solid rgba(217,119,6,.15); border-radius:50%; box-shadow:0 0 0 45px rgba(217,119,6,.04),0 0 0 92px rgba(217,119,6,.02); content:""; }
.api-hero__copy,.api-workspace { position:relative; z-index:1; }
.api-hero__kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:17px; padding:8px 12px; border-radius:999px; color:var(--amber-700); background:#fff0cd; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.api-hero__kicker svg { width:17px; height:17px; }
.api-hero .display { max-width:520px; margin:0 0 18px; color:#3d291e; font-size:clamp(2.45rem,3.9vw,3.85rem); }
.api-hero .display em { color:var(--amber); }
.api-hero .lead { max-width:510px; margin:0; color:#70563f; font-size:1rem; }
.api-hero__proof { display:flex; flex-wrap:wrap; gap:13px 18px; margin:27px 0 30px; color:#6a4c35; font-size:.76rem; font-weight:750; }
.api-hero__proof span { display:flex; align-items:center; gap:7px; }.api-hero__proof i { width:8px; height:8px; border-radius:50%; background:var(--amber); }
.api-workspace { min-height:400px; }
.api-workspace__window { position:absolute; inset:22px 10px 22px 0; overflow:hidden; border:1px solid rgba(82,45,12,.19); border-radius:16px; background:#fff; box-shadow:0 24px 52px rgba(91,50,11,.15); }
.api-workspace__top { display:flex; align-items:center; height:42px; padding:0 14px; border-bottom:1px solid #f0e5d7; color:#866a51; background:#fffcf7; font-size:.62rem; }
.api-workspace__top > span { display:flex; gap:4px; }.api-workspace__top i { width:7px; height:7px; border-radius:50%; background:#e7c89b; }.api-workspace__top b { margin-left:9px; }.api-workspace__top em { margin-left:auto; padding:4px 7px; border-radius:999px; color:var(--amber-700); background:#fff1cb; font-style:normal; font-weight:800; }
.api-workspace__body { display:grid; grid-template-columns:112px 1fr; min-height:334px; }
.api-workspace__body aside { padding:17px 10px; border-right:1px solid #f0e5d7; background:#fffefc; }
.api-workspace__body aside strong { display:block; margin:0 0 15px 4px; color:#3d291e; font-size:.76rem; }.api-workspace__body aside strong em { color:var(--amber); font-style:normal; }.api-workspace__body aside span { display:block; padding:6px; color:#937a63; font-size:.57rem; font-weight:700; }.api-workspace__body aside .is-active { border-radius:5px; color:var(--amber-700); background:#fff1cb; }
.api-console { padding:20px; background:#fbfcfe; }
.api-console__head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:15px; }.api-console__head small { color:#8a97a8; font-family:var(--font-mono); font-size:.48rem; font-weight:800; }.api-console__head h2 { margin:3px 0 0; color:#334155; font-size:.9rem; }.api-console__head > span { color:#a1aab7; }
.api-endpoint { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid #e2e7ef; border-radius:7px 7px 0 0; background:#fff; font-size:.56rem; }.api-endpoint b { padding:4px 6px; border-radius:4px; color:#fff; background:var(--amber); font-size:.48rem; }.api-endpoint code { color:#3f4d60; }.api-endpoint span { margin-left:auto; color:#23845e; font-weight:800; }
.api-console pre { min-height:125px; margin:0; padding:14px; overflow:hidden; border:1px solid #e2e7ef; border-top:0; color:#64748b; background:#fff; font-family:var(--font-mono); font-size:.57rem; line-height:1.65; }.api-console pre b { color:#9a5517; }.api-console pre em { color:#176799; font-style:normal; }.api-console pre i { color:#6d4aff; font-style:normal; }.api-console pre span { color:#334155; }
.api-webhook { display:flex; align-items:center; gap:7px; margin-top:12px; padding:8px 10px; border:1px solid #efd7aa; border-radius:7px; color:#6b7a8f; background:#fffaf0; font-size:.55rem; }.api-webhook > span { display:flex; align-items:center; gap:6px; }.api-webhook i { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px #ffebbd; }.api-webhook b { margin-left:auto; color:#9a5517; }
.api-team-card,.api-live-card { position:absolute; z-index:3; border:1px solid rgba(84,45,12,.17); border-radius:10px; background:#fff; box-shadow:0 12px 26px rgba(84,45,12,.12); }
.api-team-card { right:-5px; bottom:-3px; width:246px; padding:12px; }.api-team-card > span { color:#8a97a8; font-size:.48rem; font-weight:800; }.api-team-card > div { display:flex; align-items:center; gap:7px; margin-top:8px; }.api-team-card div > i { display:grid; flex:none; width:26px; height:26px; place-items:center; border-radius:7px; color:#fff; background:var(--amber); font-size:.5rem; font-style:normal; font-weight:800; }.api-team-card div > i.is-blue { background:#3f6f93; }.api-team-card p { min-width:0; margin:0; }.api-team-card p b,.api-team-card p small { display:block; }.api-team-card p b { color:#38475b; font-size:.57rem; }.api-team-card p small { color:#8a97a8; font-size:.48rem; }.api-team-card div > em { margin-left:auto; padding:4px 5px; border-radius:4px; color:#965513; background:#fff0cd; font-size:.45rem; font-style:normal; font-weight:800; }.api-team-card div > em.is-blue { color:#315d7d; background:#eaf4fb; }
.api-live-card { top:0; right:5px; width:142px; padding:12px; }.api-live-card > i { float:right; width:7px; height:7px; border-radius:50%; background:#e68a17; box-shadow:0 0 0 3px #fff0cd; }.api-live-card span,.api-live-card b,.api-live-card small { display:block; }.api-live-card span { color:#8a97a8; font-size:.47rem; font-weight:800; }.api-live-card b { margin:3px 0 1px; color:var(--amber-700); font-family:var(--font-mono); font-size:1rem; }.api-live-card small { color:#7a8797; font-size:.47rem; }

.api-pain { padding:24px 0; background:#fff; }.api-pain__grid { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr); gap:clamp(38px,5vw,68px); padding:clamp(30px,4vw,48px); border:1px solid #eed9ba; border-radius:20px; background:linear-gradient(112deg,#fffaf1 0%,#fffdf9 56%,#fff 100%); }.api-pain__intro .display { max-width:440px; margin-bottom:16px; color:#3d291e; font-size:clamp(2rem,3vw,2.7rem); }.api-pain__intro .lead { max-width:430px; margin:0; font-size:.94rem; }.api-pain__takeaway { margin-top:24px; padding:14px 17px; border-left:3px solid var(--amber); background:#fff8e8; }.api-pain__takeaway span { color:var(--amber-700); font-size:.7rem; font-weight:800; text-transform:uppercase; }.api-pain__takeaway p { margin:5px 0 0; color:#6b7a8f; font-size:.78rem; }
.api-pain__list { margin:0; padding:0; border-top:1px solid #eadbc8; list-style:none; }.api-pain__list li { display:grid; grid-template-columns:76px minmax(0,1fr) 142px; gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid #eadbc8; }.api-pain__item-top { display:grid; gap:5px; }.api-pain__item-top span { color:var(--amber-700); font-family:var(--font-mono); font-size:1.2rem; font-weight:800; }.api-pain__item-top small { color:#9b816c; font-family:var(--font-mono); font-size:.52rem; font-weight:700; }.api-pain__list h3 { margin:0 0 5px; color:#3d291e; font-size:1rem; }.api-pain__list p { margin:0; color:#6b7a8f; font-size:.8rem; line-height:1.55; }.api-pain__list strong { width:142px; padding:8px 10px; border:1px solid #efd3a5; border-radius:7px; color:#9a5517; background:#fff4df; font-size:.62rem; line-height:1.35; }

.api-mechanics { padding:48px 0 68px; }.api-mechanics .section-heading { max-width:790px; margin:0 auto 36px; }.api-mechanics__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.api-mechanic { --mechanic:var(--amber); --mechanic-dark:var(--amber-700); --mechanic-line:#f1d59e; --mechanic-soft:#fff8e8; display:flex; min-height:365px; flex-direction:column; padding:24px; border:1px solid #e1e8f1; border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(30,43,60,.035); transition:.22s ease; }.api-mechanic:hover { border-color:var(--mechanic-line); box-shadow:0 18px 34px rgba(43,31,17,.09); transform:translateY(-3px); }.api-mechanic--blue { --mechanic:#3f6f93; --mechanic-dark:#315d7d; --mechanic-line:#cfe0ec; --mechanic-soft:#f0f7fb; }.api-mechanic--slate { --mechanic:#56667b; --mechanic-dark:#3f4d60; --mechanic-line:#d8dfe8; --mechanic-soft:#f5f7fa; }.api-mechanic--brand { --mechanic:#b06b18; --mechanic-dark:#8e510d; --mechanic-line:#efd7aa; --mechanic-soft:#fff8eb; }
.api-mechanic__icon { display:grid; width:44px; height:44px; margin-bottom:19px; place-items:center; border:1px solid var(--mechanic-line); border-radius:12px; color:var(--mechanic-dark); background:var(--mechanic-soft); }.api-mechanic__icon svg { width:22px; }.api-mechanic > span { margin-bottom:9px; color:var(--mechanic-dark); font-family:var(--font-mono); font-size:.62rem; font-weight:800; text-transform:uppercase; }.api-mechanic h3 { margin:0 0 8px; color:var(--ink); font-size:1.02rem; line-height:1.3; }.api-mechanic > p { margin:0; color:#66778e; font-size:.8rem; line-height:1.58; }.api-mechanic__mini { min-height:84px; margin-top:auto; padding:12px; border:1px solid #efe2d2; border-radius:9px; background:#fffcf8; }
.api-mechanic__mini--endpoint { display:flex; align-items:center; gap:7px; }.api-mechanic__mini--endpoint b { padding:4px 5px; border-radius:4px; color:#fff; background:var(--amber); font-size:.46rem; }.api-mechanic__mini--endpoint code { color:#4e5d70; font-size:.53rem; }.api-mechanic__mini--endpoint span { margin-left:auto; color:#277458; font-family:var(--font-mono); font-size:.56rem; font-weight:800; }
.api-mechanic__mini--events { display:grid; gap:6px; }.api-mechanic__mini--events span { display:flex; align-items:center; gap:7px; color:#5c6c80; font-family:var(--font-mono); font-size:.51rem; }.api-mechanic__mini--events i { width:6px; height:6px; border-radius:50%; background:#3f6f93; box-shadow:0 0 0 3px #eaf4fb; }
.api-mechanic__mini--roles { display:grid; gap:7px; }.api-mechanic__mini--roles span { display:flex; align-items:center; gap:6px; color:#4e5d70; font-size:.52rem; }.api-mechanic__mini--roles i { display:grid; width:21px; height:21px; place-items:center; border-radius:5px; color:#fff; background:#56667b; font-size:.43rem; font-style:normal; font-weight:800; }.api-mechanic__mini--roles b { margin-left:auto; color:#8994a3; font-size:.46rem; }.api-mechanic__mini--domain small,.api-mechanic__mini--domain b { display:block; }.api-mechanic__mini--domain small { color:#9a7343; font-size:.45rem; font-weight:800; }.api-mechanic__mini--domain b { margin:6px 0 9px; color:#4d3929; font-family:var(--font-mono); font-size:.58rem; }.api-mechanic__mini--domain span { display:flex; gap:5px; }.api-mechanic__mini--domain i { width:12px; height:12px; border-radius:50%; background:var(--amber); }.api-mechanic__mini--domain i:nth-child(2) { background:#f0b258; }.api-mechanic__mini--domain i:nth-child(3) { background:#3f6f93; }

.api-compare { padding:68px 0; background:#fff; }.api-compare__heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); gap:64px; align-items:end; margin-bottom:34px; }.api-compare__heading .display { max-width:700px; margin-bottom:0; }.api-compare__heading .lead { margin:0 0 5px; font-size:.95rem; }.api-compare__board { overflow:hidden; border:1px solid #e4e8ee; border-radius:16px; background:#fff; box-shadow:0 16px 36px rgba(29,42,61,.065); }.api-compare__head,.api-compare__row { display:grid; grid-template-columns:minmax(184px,.72fr) minmax(270px,1fr) minmax(270px,1fr); }.api-compare__head { min-height:70px; border-bottom:1px solid #e4e8ee; background:#fbfcfe; }.api-compare__head > span,.api-compare__head > div { display:flex; flex-direction:column; justify-content:center; padding:13px 18px; }.api-compare__head > span { color:#8a97a8; font-family:var(--font-mono); font-size:.62rem; font-weight:700; text-transform:uppercase; }.api-compare__head > div { border-left:1px solid #e4e8ee; }.api-compare__head small { margin-bottom:3px; color:#8491a2; font-size:.56rem; font-weight:800; text-transform:uppercase; }.api-compare__head b { color:#506074; font-size:.84rem; }.api-compare__head .is-old { background:#f7f9fc; }.api-compare__head .is-new { position:relative; background:#fff8e9; }.api-compare__head .is-new::before { position:absolute; top:0; right:0; left:0; height:3px; background:var(--amber); content:""; }.api-compare__head .is-new small { color:var(--amber-700); }.api-compare__head .is-new b { color:#4b311e; }
.api-compare__row { min-height:84px; border-bottom:1px solid #e8edf3; }.api-compare__row:last-child { border-bottom:0; }.api-compare__criterion,.api-compare__cell { display:flex; align-items:center; padding:13px 18px; }.api-compare__criterion { gap:11px; }.api-compare__criterion span { color:#a1846d; font-family:var(--font-mono); font-size:.61rem; }.api-compare__criterion h3 { margin:0; color:var(--ink); font-size:.85rem; }.api-compare__cell { gap:10px; border-left:1px solid #e8edf3; }.api-compare__cell.is-old { background:#fafbfd; }.api-compare__cell.is-new { background:#fffdfa; }.api-compare__cell i { display:grid; flex:none; width:22px; height:22px; place-items:center; border-radius:50%; font-style:normal; font-weight:800; }.api-compare__cell.is-old i { color:#bd3f3f; background:#fff0ef; }.api-compare__cell.is-new i { color:var(--amber-800); background:#ffebbd; }.api-compare__cell p { margin:0; color:#66778e; font-size:.74rem; line-height:1.48; }.api-compare__cell strong { color:#334155; }.api-compare__cell.is-new strong { color:#54321e; }
.feature-detail--api .api-story { padding:64px 0; }.feature-detail--api .api-story .story-visual { padding:20px; border:1px solid #eed9ba; border-radius:18px; background:#fff8e8; }.feature-detail--api .api-story .shot-frame { margin:0; box-shadow:0 20px 42px rgba(84,45,12,.12); }.feature-detail--api .api-story .shot-frame img { object-position:top left; }

@media (max-width:1050px) {
  .api-hero__shell { grid-template-columns:1fr; gap:30px; }.api-hero__copy { max-width:680px; }.api-workspace { width:min(100%,650px); }
  .api-pain__grid,.api-compare__heading { grid-template-columns:1fr; gap:30px; }.api-pain__intro .display,.api-pain__intro .lead { max-width:660px; }
  .api-mechanics__grid { grid-template-columns:repeat(2,1fr); }.api-mechanic { min-height:330px; }
}
@media (max-width:700px) {
  .api-hero__shell { min-height:0; padding:44px 0 40px; }.api-hero .display { font-size:clamp(2.25rem,11vw,3.15rem); }.api-hero__proof { display:grid; gap:9px; }.api-workspace { min-height:310px; }.api-workspace__window { inset:15px 0 12px; }.api-workspace__body { grid-template-columns:76px 1fr; min-height:253px; }.api-workspace__body aside { padding:11px 5px; }.api-workspace__body aside strong { font-size:.63rem; }.api-workspace__body aside span { padding:5px; font-size:.46rem; }.api-console { padding:12px 9px; }.api-console pre { min-height:112px; padding:10px; font-size:.48rem; }.api-team-card,.api-live-card { display:none; }
  .api-pain { padding:20px 0; }.api-pain__grid { padding:27px 20px; border-radius:15px; }.api-pain__list li { grid-template-columns:62px 1fr; gap:11px; }.api-pain__list strong { grid-column:2; width:fit-content; }
  .api-mechanics { padding:38px 0 52px; }.api-mechanics__grid { grid-template-columns:1fr; }.api-mechanic { min-height:0; padding:22px; }.api-mechanic__mini { margin-top:21px; }
  .api-compare { padding:52px 0; }.api-compare__heading { margin-bottom:28px; }.api-compare__board { overflow-x:auto; }.api-compare__head,.api-compare__row { min-width:680px; }.api-compare__row { min-height:82px; }.api-compare__criterion,.api-compare__cell { padding:12px 15px; }.feature-detail--api .api-story { padding:52px 0; }
}

/* SocialEnrich Audience Intelligence — feature detail */
.enrich-hero { position:relative; overflow:hidden; border-top:1px solid #f1dfc5; border-bottom:1px solid #f1dfc5; background:linear-gradient(112deg,#fffaf1 0%,#fffdf8 50%,#fff1da 100%); }
.enrich-hero__shell { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr); gap:clamp(42px,5vw,68px); align-items:center; min-height:540px; padding:68px 0 64px; }.enrich-hero__shell::before { position:absolute; bottom:-245px; left:-140px; width:440px; height:440px; border:1px solid rgba(217,119,6,.15); border-radius:50%; box-shadow:0 0 0 45px rgba(217,119,6,.04),0 0 0 92px rgba(217,119,6,.02); content:""; }
.enrich-hero__copy,.enrich-workspace { position:relative; z-index:1; }.enrich-hero__kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:17px; padding:8px 12px; border-radius:999px; color:var(--amber-700); background:#fff0cd; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.enrich-hero__kicker svg { width:17px; height:17px; }.enrich-hero .display { max-width:520px; margin:0 0 18px; color:#3d291e; font-size:clamp(2.45rem,3.9vw,3.85rem); }.enrich-hero .display em { color:var(--amber); }.enrich-hero .lead { max-width:510px; margin:0; color:#70563f; font-size:1rem; }.enrich-hero__promo { display:flex; width:fit-content; align-items:center; gap:8px; margin-top:20px; padding:9px 12px; border:1px dashed #dda54a; border-radius:9px; color:#764618; background:rgba(255,248,231,.86); box-shadow:0 7px 18px rgba(120,68,18,.06); font-size:.68rem; }.enrich-hero__promo svg { width:16px; height:16px; color:var(--amber); }.enrich-hero__promo span { color:#8f6c49; font-weight:700; }.enrich-hero__promo strong { color:var(--amber-800); font-family:var(--font-mono); }.enrich-hero__promo i { width:1px; height:14px; background:#e6c897; }.enrich-hero__promo code { padding:3px 6px; border-radius:4px; color:#7e4610; background:#ffe7b3; font-family:var(--font-mono); font-size:.65rem; font-weight:800; letter-spacing:.03em; }.enrich-hero__proof { display:flex; flex-wrap:wrap; gap:13px 18px; margin:19px 0 30px; color:#6a4c35; font-size:.76rem; font-weight:750; }.enrich-hero__proof span { display:flex; align-items:center; gap:7px; }.enrich-hero__proof i { width:8px; height:8px; border-radius:50%; background:var(--amber); }
.enrich-workspace { min-height:400px; }.enrich-workspace__window { position:absolute; inset:22px 10px 22px 0; overflow:hidden; border:1px solid rgba(82,45,12,.19); border-radius:16px; background:#fff; box-shadow:0 24px 52px rgba(91,50,11,.15); }.enrich-workspace__top { display:flex; align-items:center; height:42px; padding:0 14px; border-bottom:1px solid #f0e5d7; color:#866a51; background:#fffcf7; font-size:.62rem; }.enrich-workspace__top > span { display:flex; gap:4px; }.enrich-workspace__top i { width:7px; height:7px; border-radius:50%; background:#e7c89b; }.enrich-workspace__top b { margin-left:9px; }.enrich-workspace__top em { margin-left:auto; padding:4px 7px; border-radius:999px; color:var(--amber-700); background:#fff1cb; font-style:normal; font-weight:800; }.enrich-workspace__body { display:grid; grid-template-columns:112px 1fr; min-height:334px; }.enrich-workspace__body aside { padding:17px 10px; border-right:1px solid #f0e5d7; background:#fffefc; }.enrich-workspace__body aside strong { display:block; margin:0 0 15px 4px; color:#3d291e; font-size:.76rem; }.enrich-workspace__body aside strong em { color:var(--amber); font-style:normal; }.enrich-workspace__body aside span { display:block; padding:6px; color:#937a63; font-size:.56rem; font-weight:700; }.enrich-workspace__body aside .is-active { border-radius:5px; color:var(--amber-700); background:#fff1cb; }
.enrich-explorer { padding:19px; background:#fbfcfe; }.enrich-explorer__head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:13px; }.enrich-explorer__head small { color:#8a97a8; font-family:var(--font-mono); font-size:.47rem; font-weight:800; }.enrich-explorer__head h2 { margin:3px 0 0; color:#334155; font-size:.9rem; }.enrich-explorer__head > span { padding:5px 7px; border-radius:999px; color:#9a5517; background:#fff0cd; font-size:.49rem; font-weight:800; }.enrich-filters { display:flex; gap:5px; margin-bottom:12px; }.enrich-filters span { padding:6px 7px; border:1px solid #e3e8ef; border-radius:5px; color:#5f6e81; background:#fff; font-size:.49rem; }.enrich-filters span b { color:#a0a9b5; }.enrich-filters button { margin-left:auto; padding:6px 8px; border:0; border-radius:5px; color:#fff; background:var(--amber); font-size:.48rem; font-weight:800; }.enrich-profile { display:flex; align-items:center; gap:9px; padding:11px; border:1px solid #e2e7ef; border-radius:8px; background:#fff; }.enrich-profile > i { display:grid; flex:none; width:34px; height:34px; place-items:center; border-radius:9px; color:#fff; background:var(--amber); font-size:.56rem; font-style:normal; font-weight:800; }.enrich-profile p { margin:0; }.enrich-profile p b,.enrich-profile p small { display:block; }.enrich-profile p b { color:#334155; font-size:.64rem; }.enrich-profile p small { color:#8a97a8; font-size:.5rem; }.enrich-profile > div { margin-left:auto; text-align:right; }.enrich-profile div span,.enrich-profile div strong { display:block; }.enrich-profile div span { color:#9aa5b3; font-size:.44rem; }.enrich-profile div strong { color:#9a5517; font-size:.58rem; }.enrich-signals { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }.enrich-signals > span { padding:9px; border:1px solid #ebeef3; border-radius:7px; background:#fff; }.enrich-signals small,.enrich-signals b { display:block; }.enrich-signals small { color:#a0a9b5; font-size:.42rem; font-weight:800; }.enrich-signals b { margin-top:4px; overflow:hidden; color:#526176; font-size:.49rem; white-space:nowrap; text-overflow:ellipsis; }
.enrich-score,.enrich-stack { position:absolute; z-index:3; border:1px solid rgba(84,45,12,.17); border-radius:10px; background:#fff; box-shadow:0 12px 26px rgba(84,45,12,.12); }.enrich-score { top:0; right:1px; width:142px; padding:12px; }.enrich-score span,.enrich-score b,.enrich-score em { display:block; }.enrich-score span { color:#8a97a8; font-size:.47rem; font-weight:800; }.enrich-score b { margin:2px 0; color:var(--amber-700); font-family:var(--font-mono); font-size:1.2rem; }.enrich-score b small { font-size:.56rem; }.enrich-score div { height:5px; overflow:hidden; border-radius:99px; background:#f3e8da; }.enrich-score div i { display:block; height:100%; background:var(--amber); }.enrich-score em { margin-top:5px; color:#7d684e; font-size:.48rem; font-style:normal; }.enrich-stack { right:-5px; bottom:-2px; width:182px; padding:12px; }.enrich-stack > span { color:#8a97a8; font-size:.46rem; font-weight:800; }.enrich-stack > div { display:flex; align-items:center; gap:7px; margin-top:8px; color:#526176; font-size:.54rem; font-weight:700; }.enrich-stack div i { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px #fff0cd; }.enrich-stack div:nth-child(3) i { background:#4e7b91; box-shadow:0 0 0 3px #eaf3f7; }.enrich-stack div:nth-child(4) i { background:#5a6170; box-shadow:0 0 0 3px #edf0f4; }

.enrich-pain { padding:24px 0; background:#fff; }.enrich-pain__grid { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr); gap:clamp(38px,5vw,68px); padding:clamp(30px,4vw,48px); border:1px solid #eed9ba; border-radius:20px; background:linear-gradient(112deg,#fffaf1 0%,#fffdf9 56%,#fff 100%); }.enrich-pain__intro .display { max-width:440px; margin-bottom:16px; color:#3d291e; font-size:clamp(2rem,3vw,2.7rem); }.enrich-pain__intro .lead { max-width:430px; margin:0; font-size:.94rem; }.enrich-pain__takeaway { margin-top:24px; padding:14px 17px; border-left:3px solid var(--amber); background:#fff8e8; }.enrich-pain__takeaway span { color:var(--amber-700); font-size:.7rem; font-weight:800; text-transform:uppercase; }.enrich-pain__takeaway p { margin:5px 0 0; color:#6b7a8f; font-size:.78rem; }.enrich-pain__list { margin:0; padding:0; border-top:1px solid #eadbc8; list-style:none; }.enrich-pain__list li { display:grid; grid-template-columns:76px minmax(0,1fr) 142px; gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid #eadbc8; }.enrich-pain__item-top { display:grid; gap:5px; }.enrich-pain__item-top span { color:var(--amber-700); font-family:var(--font-mono); font-size:1.2rem; font-weight:800; }.enrich-pain__item-top small { color:#9b816c; font-family:var(--font-mono); font-size:.52rem; font-weight:700; }.enrich-pain__list h3 { margin:0 0 5px; color:#3d291e; font-size:1rem; }.enrich-pain__list p { margin:0; color:#6b7a8f; font-size:.8rem; line-height:1.55; }.enrich-pain__list strong { width:142px; padding:8px 10px; border:1px solid #efd3a5; border-radius:7px; color:#9a5517; background:#fff4df; font-size:.62rem; line-height:1.35; }

.enrich-mechanics { padding:48px 0 68px; }.enrich-mechanics .section-heading { max-width:790px; margin:0 auto 36px; }.enrich-mechanics__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.enrich-mechanic { --mechanic:var(--amber); --mechanic-dark:var(--amber-700); --mechanic-line:#f1d59e; --mechanic-soft:#fff8e8; display:flex; min-height:365px; flex-direction:column; padding:24px; border:1px solid #e1e8f1; border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(30,43,60,.035); transition:.22s ease; }.enrich-mechanic:hover { border-color:var(--mechanic-line); box-shadow:0 18px 34px rgba(43,31,17,.09); transform:translateY(-3px); }.enrich-mechanic--signal { --mechanic:#4e7b91; --mechanic-dark:#355f73; --mechanic-line:#cfe0e7; --mechanic-soft:#f0f7fa; }.enrich-mechanic--b2b { --mechanic:#5a6170; --mechanic-dark:#444b59; --mechanic-line:#d9dde4; --mechanic-soft:#f5f6f8; }.enrich-mechanic--b2c { --mechanic:#b06b18; --mechanic-dark:#8e510d; --mechanic-line:#efd7aa; --mechanic-soft:#fff8eb; }.enrich-mechanic__icon { display:grid; width:44px; height:44px; margin-bottom:19px; place-items:center; border:1px solid var(--mechanic-line); border-radius:12px; color:var(--mechanic-dark); background:var(--mechanic-soft); }.enrich-mechanic__icon svg { width:22px; }.enrich-mechanic > span { margin-bottom:9px; color:var(--mechanic-dark); font-family:var(--font-mono); font-size:.62rem; font-weight:800; text-transform:uppercase; }.enrich-mechanic h3 { margin:0 0 8px; color:var(--ink); font-size:1.02rem; line-height:1.3; }.enrich-mechanic > p { margin:0; color:#66778e; font-size:.8rem; line-height:1.58; }.enrich-mechanic__mini { min-height:84px; margin-top:auto; padding:12px; border:1px solid #efe2d2; border-radius:9px; background:#fffcf8; }.enrich-mechanic__mini--social { display:flex; align-items:center; gap:6px; }.enrich-mechanic__mini--social span { display:grid; width:28px; height:28px; place-items:center; border:1px solid #efd7aa; border-radius:7px; color:#8d5315; background:#fff7e7; font-size:.52rem; font-weight:800; }.enrich-mechanic__mini--social b { margin-left:auto; color:#8a97a8; font-size:.49rem; }.enrich-mechanic__mini--intent small,.enrich-mechanic__mini--intent b,.enrich-mechanic__mini--intent span { display:block; }.enrich-mechanic__mini--intent small { color:#8a97a8; font-size:.43rem; font-weight:800; }.enrich-mechanic__mini--intent b { float:right; margin-top:-10px; color:#355f73; font-size:.55rem; }.enrich-mechanic__mini--intent div { height:5px; margin:9px 0; overflow:hidden; border-radius:99px; background:#dfeaf0; }.enrich-mechanic__mini--intent div i { display:block; height:100%; background:#4e7b91; }.enrich-mechanic__mini--intent span { color:#607085; font-size:.51rem; }.enrich-mechanic__mini--contact { display:flex; align-items:center; gap:7px; }.enrich-mechanic__mini--contact > i { display:grid; width:31px; height:31px; place-items:center; border-radius:8px; color:#fff; background:#5a6170; font-size:.5rem; font-style:normal; font-weight:800; }.enrich-mechanic__mini--contact p { margin:0; }.enrich-mechanic__mini--contact p b,.enrich-mechanic__mini--contact p small { display:block; }.enrich-mechanic__mini--contact p b { color:#455166; font-size:.57rem; }.enrich-mechanic__mini--contact p small { color:#8a97a8; font-size:.47rem; }.enrich-mechanic__mini--contact > span { margin-left:auto; color:#8e510d; }.enrich-mechanic__mini--audience { display:grid; gap:6px; }.enrich-mechanic__mini--audience span { display:flex; align-items:center; gap:7px; color:#5c6c80; font-size:.51rem; }.enrich-mechanic__mini--audience i { width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px #fff0cd; }
.enrich-connect { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:42px; align-items:center; margin-top:22px; padding:30px 32px; overflow:hidden; border:1px solid #5b3a21; border-radius:16px; color:#fff; background:linear-gradient(118deg,#30231c 0%,#49301f 54%,#6c3e16 100%); box-shadow:0 18px 38px rgba(68,39,18,.15); }.enrich-connect::after { position:absolute; top:-120px; right:210px; width:270px; height:270px; border:1px solid rgba(255,190,88,.14); border-radius:50%; box-shadow:0 0 0 34px rgba(255,190,88,.04),0 0 0 72px rgba(255,190,88,.025); content:""; }.enrich-connect__copy,.enrich-connect__actions { position:relative; z-index:1; }.enrich-connect__copy > span { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:#f6c978; font-family:var(--font-mono); font-size:.58rem; font-weight:800; letter-spacing:.07em; }.enrich-connect__copy > span i { width:7px; height:7px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.13); }.enrich-connect h3 { max-width:690px; margin:0 0 8px; color:#fff; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.2; letter-spacing:-.035em; }.enrich-connect p { max-width:700px; margin:0; color:#d8c9bc; font-size:.8rem; line-height:1.55; }.enrich-connect small { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; color:#bfae9e; font-size:.58rem; }.enrich-connect small b { color:#f6c978; }.enrich-connect small i { width:3px; height:3px; border-radius:50%; background:#9b7a5d; }.enrich-connect__actions { display:grid; min-width:250px; gap:9px; }.enrich-connect__actions .button { justify-content:center; min-height:43px; white-space:nowrap; }.enrich-connect__actions .button-primary { color:#402817; background:#f2a62c; box-shadow:0 7px 18px rgba(242,166,44,.2); }.enrich-connect__actions .button-primary:hover { background:#ffb84c; }.enrich-connect__actions .button-secondary { color:#fff7e8; border-color:rgba(255,224,177,.42); background:rgba(255,255,255,.04); }.enrich-connect__actions .button-secondary:hover { border-color:#f2a62c; background:rgba(242,166,44,.1); }

.enrich-compare { padding:68px 0; background:#fff; }.enrich-compare__heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); gap:64px; align-items:end; margin-bottom:34px; }.enrich-compare__heading .display { max-width:700px; margin-bottom:0; }.enrich-compare__heading .lead { margin:0 0 5px; font-size:.95rem; }.enrich-compare__board { overflow:hidden; border:1px solid #e4e8ee; border-radius:16px; background:#fff; box-shadow:0 16px 36px rgba(29,42,61,.065); }.enrich-compare__head,.enrich-compare__row { display:grid; grid-template-columns:minmax(184px,.72fr) minmax(270px,1fr) minmax(270px,1fr); }.enrich-compare__head { min-height:70px; border-bottom:1px solid #e4e8ee; background:#fbfcfe; }.enrich-compare__head > span,.enrich-compare__head > div { display:flex; flex-direction:column; justify-content:center; padding:13px 18px; }.enrich-compare__head > span { color:#8a97a8; font-family:var(--font-mono); font-size:.62rem; font-weight:700; text-transform:uppercase; }.enrich-compare__head > div { border-left:1px solid #e4e8ee; }.enrich-compare__head small { margin-bottom:3px; color:#8491a2; font-size:.56rem; font-weight:800; text-transform:uppercase; }.enrich-compare__head b { color:#506074; font-size:.84rem; }.enrich-compare__head .is-old { background:#f7f9fc; }.enrich-compare__head .is-new { position:relative; background:#fff8e9; }.enrich-compare__head .is-new::before { position:absolute; top:0; right:0; left:0; height:3px; background:var(--amber); content:""; }.enrich-compare__head .is-new small { color:var(--amber-700); }.enrich-compare__head .is-new b { color:#4b311e; }.enrich-compare__row { min-height:84px; border-bottom:1px solid #e8edf3; }.enrich-compare__row:last-child { border-bottom:0; }.enrich-compare__criterion,.enrich-compare__cell { display:flex; align-items:center; padding:13px 18px; }.enrich-compare__criterion { gap:11px; }.enrich-compare__criterion span { color:#a1846d; font-family:var(--font-mono); font-size:.61rem; }.enrich-compare__criterion h3 { margin:0; color:var(--ink); font-size:.85rem; }.enrich-compare__cell { gap:10px; border-left:1px solid #e8edf3; }.enrich-compare__cell.is-old { background:#fafbfd; }.enrich-compare__cell.is-new { background:#fffdfa; }.enrich-compare__cell i { display:grid; flex:none; width:22px; height:22px; place-items:center; border-radius:50%; font-style:normal; font-weight:800; }.enrich-compare__cell.is-old i { color:#bd3f3f; background:#fff0ef; }.enrich-compare__cell.is-new i { color:var(--amber-800); background:#ffebbd; }.enrich-compare__cell p { margin:0; color:#66778e; font-size:.74rem; line-height:1.48; }.enrich-compare__cell strong { color:#334155; }.enrich-compare__cell.is-new strong { color:#54321e; }
.feature-detail--enrich .enrich-story { padding:64px 0; }.feature-detail--enrich .enrich-story .story-visual { padding:20px; border:1px solid #eed9ba; border-radius:18px; background:#fff8e8; }.feature-detail--enrich .enrich-story .shot-frame { margin:0; box-shadow:0 20px 42px rgba(84,45,12,.12); }.feature-detail--enrich .enrich-story .shot-frame img { object-position:top left; }

@media (max-width:1050px) {
  .enrich-hero__shell { grid-template-columns:1fr; gap:30px; }.enrich-hero__copy { max-width:680px; }.enrich-workspace { width:min(100%,650px); }
  .enrich-pain__grid,.enrich-compare__heading { grid-template-columns:1fr; gap:30px; }.enrich-pain__intro .display,.enrich-pain__intro .lead { max-width:660px; }
  .enrich-mechanics__grid { grid-template-columns:repeat(2,1fr); }.enrich-mechanic { min-height:330px; }.enrich-connect { grid-template-columns:1fr; gap:22px; }.enrich-connect__actions { grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; }
}
@media (max-width:700px) {
  .enrich-hero__shell { min-height:0; padding:44px 0 40px; }.enrich-hero .display { font-size:clamp(2.25rem,11vw,3.15rem); }.enrich-hero__promo { flex-wrap:wrap; max-width:100%; }.enrich-hero__promo span { width:calc(100% - 28px); }.enrich-hero__proof { display:grid; gap:9px; }.enrich-workspace { min-height:310px; }.enrich-workspace__window { inset:15px 0 12px; }.enrich-workspace__body { grid-template-columns:76px 1fr; min-height:253px; }.enrich-workspace__body aside { padding:11px 5px; }.enrich-workspace__body aside strong { font-size:.63rem; }.enrich-workspace__body aside span { padding:5px; font-size:.46rem; }.enrich-explorer { padding:12px 9px; }.enrich-filters span:nth-child(3) { display:none; }.enrich-score,.enrich-stack { display:none; }
  .enrich-pain { padding:20px 0; }.enrich-pain__grid { padding:27px 20px; border-radius:15px; }.enrich-pain__list li { grid-template-columns:62px 1fr; gap:11px; }.enrich-pain__list strong { grid-column:2; width:fit-content; }
  .enrich-mechanics { padding:38px 0 52px; }.enrich-mechanics__grid { grid-template-columns:1fr; }.enrich-mechanic { min-height:0; padding:22px; }.enrich-mechanic__mini { margin-top:21px; }.enrich-connect { padding:25px 20px; }.enrich-connect__actions { grid-template-columns:1fr; }.enrich-connect__actions .button { white-space:normal; text-align:center; }
  .enrich-compare { padding:52px 0; }.enrich-compare__heading { margin-bottom:28px; }.enrich-compare__board { overflow-x:auto; }.enrich-compare__head,.enrich-compare__row { min-width:680px; }.enrich-compare__row { min-height:82px; }.enrich-compare__criterion,.enrich-compare__cell { padding:12px 15px; }.feature-detail--enrich .enrich-story { padding:52px 0; }
}

.showcase-chips span { padding: 8px 13px; border: 1px solid #edc979; border-radius: 999px; color: #624629; background: rgba(255,255,255,.67); font-size: .76rem; font-weight: 700; }
.showcase-visual { min-height: 360px; }
.showcase-workspace { overflow: hidden; border: 1px solid #e8dccc; border-radius: 17px; background: #fff; box-shadow: 0 23px 45px rgba(84,45,12,.13); }
.showcase-window-top { display: flex; align-items: center; height: 50px; gap: 5px; padding: 0 17px; border-bottom: 1px solid #f0e5d8; color: #94755a; background: #fffdf9; font-size: .74rem; }.showcase-window-top i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ebcca0; }.showcase-window-top b { margin-left: 7px; }.showcase-window-top span { margin-left: auto; padding: 6px 9px; border-radius: 999px; color: var(--amber-700); background: #fff1c9; font-size: .64rem; font-weight: 700; }
.showcase-workspace-body { display: grid; grid-template-columns: 122px 1fr; min-height: 309px; }.showcase-workspace-body aside { display: grid; align-content: start; gap: 12px; padding: 28px 16px; border-right: 1px solid #f0e5d8; background: #fffcf7; }.showcase-workspace-body aside strong { margin: 0 0 10px; color: #3d291e; font-size: .86rem; }.showcase-workspace-body aside strong span { color: var(--amber); }.showcase-workspace-body aside b, .showcase-workspace-body aside small { padding: 8px 9px; color: #9b816c; font-size: .69rem; font-weight: 700; }.showcase-workspace-body aside b { border-radius: 6px; color: var(--amber-700); background: #fff0c9; }
.showcase-workspace-main { padding: 35px 28px; }.showcase-workspace-main h2 { margin: 0; color: #3d291e; font-size: 1.45rem; letter-spacing: -.04em; }.showcase-workspace-main > p { margin: 5px 0 22px; color: #8a97a8; font-size: .77rem; }.showcase-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.showcase-stat-row span { padding: 15px; border: 1px solid #f0dfcc; border-radius: 9px; color: #75839a; font-size: .66rem; font-weight: 700; }.showcase-stat-row b { display: block; margin-top: 8px; color: #3d291e; font-family: var(--font-mono); font-size: 1.3rem; font-variant-numeric: tabular-nums; }.showcase-stat-row span:first-child b { color: var(--amber-700); }.showcase-bars { display: flex; align-items: end; gap: 7px; height: 100px; margin-top: 15px; padding: 12px 13px 0; border: 1px solid #f0dfcc; border-radius: 9px; background: #fffdf9; }.showcase-bars i { display: block; flex: 1; height: 42%; border-radius: 3px 3px 0 0; background: linear-gradient(#f7bd57,var(--amber)); }.showcase-bars i:nth-child(2) { height: 58%; }.showcase-bars i:nth-child(3) { height: 50%; }.showcase-bars i:nth-child(4) { height: 74%; }.showcase-bars i:nth-child(5) { height: 61%; }.showcase-bars i:nth-child(6) { height: 86%; }.showcase-bars i:nth-child(7) { height: 98%; }
.showcase-shell--solutions { background: transparent; }.showcase-solution-map { height: 100%; min-height: 360px; border: 1px solid #ead9c4; border-radius: 17px; background: #fff; box-shadow: 0 23px 45px rgba(84,45,12,.11); }.showcase-map-title { padding: 17px 20px; border-bottom: 1px solid #f2e7d9; color: #3d291e; font-size: .84rem; font-weight: 700; }.showcase-map-title span { float: right; color: var(--amber); font-size: 1.1rem; }.showcase-map-card { position: absolute; width: 176px; padding: 14px; border: 1px solid #efd8b7; border-radius: 10px; background: #fffdf9; box-shadow: 0 9px 19px rgba(84,45,12,.07); }.showcase-map-card b, .showcase-map-card small { display: block; }.showcase-map-card b { color: #3d291e; font-size: .78rem; }.showcase-map-card small { margin-top: 4px; color: #8d7867; font-size: .65rem; }.showcase-map-card.ecom { top: 92px; left: 28px; }.showcase-map-card.saas { top: 179px; right: 28px; border-color: #cfe5df; }.showcase-map-card.agency { bottom: 26px; left: 108px; border-color: #dfd4ed; }.showcase-map-node { position: absolute; top: 134px; left: 50%; display: grid; width: 108px; height: 108px; place-content: center; border: 1px solid #ebb95c; border-radius: 50%; color: #7e4a16; background: #fff3d8; text-align: center; font-size: .78rem; font-weight: 700; transform: translateX(-50%); }.showcase-map-node small { margin-top: 4px; color: #9d7952; font-size: .61rem; font-weight: 600; }
.showcase-shell--compare { background: transparent; }.showcase-compare-board { padding: 18px; border: 1px solid #e6d9c8; border-radius: 17px; background: #fff; box-shadow: 0 23px 45px rgba(84,45,12,.10); }.showcase-compare-head, .showcase-compare-row { display: grid; grid-template-columns: 1.4fr .65fr .65fr; align-items: center; gap: 8px; }.showcase-compare-head { padding: 10px 11px; border-radius: 7px; color: #81705f; background: #fff8e9; font-size: .66rem; }.showcase-compare-head span { color: var(--amber-700); text-align: center; font-weight: 700; }.showcase-compare-row { padding: 16px 11px; border-bottom: 1px solid #f1e9df; color: #536278; font-size: .73rem; }.showcase-compare-row b { color: #3d291e; }.showcase-compare-row i, .showcase-compare-row em { display: grid; min-height: 27px; place-items: center; border-radius: 6px; font-style: normal; font-size: .68rem; }.showcase-compare-row i { color: #17703a; background: #eaf8ed; font-weight: 700; }.showcase-compare-row em { color: #8c97a5; background: #f3f5f8; }.showcase-compare-note { margin-top: 15px; padding: 11px; border-radius: 7px; color: #80501c; background: #fff3d9; font-size: .67rem; font-weight: 700; }
.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #f2d393;
  border-radius: 999px;
  color: var(--amber-800);
  background: rgba(255,255,255,.7);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
}
.page-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.page-hero--dark .page-badge { border-color: rgba(255,255,255,.2); color: #fddba3; background: rgba(255,255,255,.08); }
.page-hero-visual { position: relative; }
.page-hero-visual .shot-frame { transform: rotate(1.6deg); }
.page-hero-visual .annotation--top { right: -35px; }
.specs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.spec {
  padding: 20px;
  border-top: 2px solid var(--amber);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.spec strong { display: block; margin-bottom: 4px; color: var(--amber-800); font-family: var(--font-mono); font-size: 1rem; font-variant-numeric: tabular-nums; }
.spec span { color: #64748b; font-size: .76rem; font-weight: 650; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 45px; }
.step { position: relative; padding: 0 30px 0 0; }
.step:not(:last-child):after { content: ""; position: absolute; top: 17px; right: 19px; left: 51px; height: 1px; background: #f2d89c; }
.step-number {
  display: grid;
  width: 34px; height: 34px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--amber);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}
.step h3 { margin: 0 0 7px; font-size: 1rem; }
.step p { max-width: 300px; margin: 0; color: var(--ink-soft); font-size: .86rem; }

/* feature hub */
.feature-hero { padding-bottom: 87px; }
.features-hub { background: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.feature-card {
  display: grid;
  min-height: 320px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.feature-card:hover { border-color: #edc77d; box-shadow: 0 18px 37px rgba(217,119,6,.10); transform: translateY(-3px); }
.feature-card-copy { display: flex; flex-direction: column; padding: 30px 26px; }
.feature-card-copy p { line-height: 1.55; }
.feature-card-copy .text-link { margin-top: auto; padding-top: 16px; }
.feature-art {
  position: relative;
  display: grid;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  background: #fff8e8;
}
.feature-art--teal { background: #ebf9fb; }
.feature-art--violet { background: #f3f0ff; }
.feature-art--slate { background: #eef2f8; }
.feature-art .art-window {
  width: 83%;
  overflow: hidden;
  border: 1px solid #d5dce7;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 15px 27px rgba(30,41,59,.12);
  transform: rotate(-3deg);
}
.feature-art .art-window img { width: 180%; max-width: none; transform: translateX(-14%); }
.product-visual {
  position: relative;
  width: 84%;
  min-height: 174px;
  overflow: hidden;
  border: 1px solid #d3dbe6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 15px 27px rgba(30,41,59,.12);
  transform: rotate(-3deg);
}
.product-visual:before { content: ""; display: block; height: 18px; border-bottom: 1px solid #e5eaf1; background: #fffdf9; }
.product-visual:after { content: ""; position: absolute; top: 6px; left: 8px; width: 4px; height: 4px; border-radius: 50%; background: #c8d1dd; box-shadow: 7px 0 #c8d1dd, 14px 0 #c8d1dd; }
.pv-server { display: grid; gap: 7px; padding: 17px 12px; }
.pv-server__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #e6eaf0; border-radius: 6px; }
.pv-provider { display: flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 800; }
.pv-provider i { width: 13px; height: 13px; border-radius: 4px; background: #ffcc74; }
.pv-provider i.teal { background: #8fdde1; }.pv-provider i.violet { background: #c9baff; }
.pv-status { padding: 3px 5px; border-radius: 999px; color: #19733d; background: #e7f8ec; font-size: 6px; font-weight: 800; }
.pv-bar { width: 52px; height: 5px; border-radius: 99px; background: #f0f2f5; }
.pv-bar b { display: block; width: 66%; height: 100%; border-radius: inherit; background: var(--amber); }
.pv-audience { padding: 16px 10px; }
.pv-filter { display: flex; gap: 5px; margin-bottom: 9px; }
.pv-filter span { padding: 4px 5px; border-radius: 4px; color: #14757f; background: #e4f8f9; font-size: 6px; font-weight: 800; }
.pv-person { display: grid; grid-template-columns: 19px 1fr auto; align-items: center; gap: 6px; padding: 6px 1px; border-bottom: 1px solid #edf0f4; }
.pv-person i { width: 18px; height: 18px; border-radius: 50%; background: #d2edf0; }.pv-person:nth-child(3) i { background: #ffe0a9; }.pv-person:nth-child(4) i { background: #ddd4ff; }
.pv-person b { display: block; font-size: 7px; }.pv-person small { display: block; margin-top: 1px; color: #8995a5; font-size: 5px; }
.pv-person span { color: #168343; font-size: 6px; font-weight: 800; }
.pv-flow { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 48px 7px 18px; background: linear-gradient(135deg, #faf8ff, #fff); }
.pv-node { position: relative; z-index: 1; width: 48px; padding: 7px 4px; border: 1px solid #d7cff7; border-radius: 5px; background: #fff; box-shadow: 0 4px 8px rgba(79,70,229,.08); color: #5842bf; font-size: 6px; font-weight: 800; text-align: center; }
.pv-node:after { content: "→"; position: absolute; top: 7px; right: -10px; color: #9e90df; font-size: 9px; }.pv-node:last-child:after { display: none; }
.pv-node:nth-child(2) { margin-top: 26px; border-color: #e7bd6e; color: #9a5805; }.pv-node:nth-child(3) { margin-top: -16px; border-color: #aadfc1; color: #18733e; }
.pv-ai { padding: 26px 14px 13px; }
.pv-ai__prompt { padding: 8px; border: 1px solid #e2e7ef; border-radius: 6px; color: #8793a4; font-size: 6px; }
.pv-ai__line { height: 4px; margin-top: 5px; border-radius: 9px; background: #e8ecf1; }.pv-ai__line.wide { width: 86%; }.pv-ai__line.amber { width: 62%; background: #ffd998; }
.pv-ai__chips { display: flex; gap: 5px; margin-top: 13px; }.pv-ai__chips span { padding: 5px; border-radius: 4px; color: #a35a06; background: #fff1ce; font-size: 6px; font-weight: 800; }
.pv-domain { padding: 24px 13px 13px; }
.pv-domain__name { margin-bottom: 10px; color: #27364e; font: 700 9px var(--font-mono); }
.pv-record { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #edf0f4; font: 600 6px var(--font-mono); font-variant-numeric: tabular-nums; }
.pv-record b { color: #168343; font-family: var(--font-family); }
.pv-report { padding: 24px 12px 12px; }
.pv-report__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.pv-report__metrics span { padding: 7px 4px; border-radius: 5px; background: #f5f7fa; color: #66758a; font-size: 5px; }.pv-report__metrics b { display: block; margin-top: 3px; color: #26354b; font-size: 9px; }
.pv-report__bars { display: flex; align-items: end; gap: 6px; height: 68px; margin-top: 9px; padding: 0 10px; border-bottom: 1px solid #dde4ed; }.pv-report__bars i { width: 10px; border-radius: 3px 3px 0 0; background: #f6c66e; }.pv-report__bars i:nth-child(2n) { background: #d88214; }
.pv-api { padding: 18px 10px 10px; }
.pv-api__endpoint { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 6px; background: #172033; color: #fff; font: 700 7px var(--font-mono); margin-bottom: 7px; }
.pv-api__endpoint code { color: #fde68a; font-family: inherit; font-size: inherit; }
.pv-api__endpoint span { color: #4ade80; font-size: 6px; background: rgba(74,222,128,0.15); padding: 2px 4px; border-radius: 3px; }
.pv-subuser-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #edf0f4; }
.pv-subuser-row i { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; font-size: 7px; font-weight: 800; color: #fff; }
.pv-subuser-row i.admin { background: #d97706; }
.pv-subuser-row i.agency { background: #7c3aed; }
.pv-subuser-row b { display: block; font-size: 8px; color: var(--ink); }
.pv-subuser-row small { display: block; color: #8491a2; font-size: 6.5px; }
.pv-role-pill { padding: 2px 5px; border-radius: 999px; font-size: 6.5px; font-weight: 800; }
.pv-role-pill.admin { color: #92400e; background: #fef3c7; }
.pv-role-pill.agency { color: #6b21a8; background: #ede9fe; }
.pv-webhook-tag { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 4px 6px; border-radius: 4px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 6.5px; color: #166534; font-weight: 700; }
.pv-webhook-tag span { font-family: var(--font-mono); }
.wireframe-flow {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  border: 1px solid #d8e0ea;
  border-radius: 17px;
  background: linear-gradient(135deg, #f9f7ff, #fff);
  box-shadow: 0 24px 55px rgba(30,41,59,.12);
}
.wireframe-flow:before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(#d8d2ef 1px, transparent 1px); background-size: 18px 18px; }
.wireflow-node { position: absolute; z-index: 1; width: 150px; padding: 12px; border: 1px solid #d5cbfb; border-radius: 9px; background: #fff; box-shadow: 0 10px 18px rgba(79,70,229,.10); }
.wireflow-node small { display: block; color: #806ad6; font: 700 7px var(--font-mono); }.wireflow-node b { display: block; margin-top: 4px; font-size: 10px; }
.wireflow-node.n1 { top: 47px; left: 32px; }.wireflow-node.n2 { top: 167px; left: 155px; border-color: #efca83; }.wireflow-node.n2 small { color: var(--amber-700); }.wireflow-node.n3 { top: 64px; right: 35px; border-color: #bce6cb; }.wireflow-node.n3 small { color: #19733d; }
.wireflow-line { position: absolute; z-index: 0; height: 1px; transform-origin: left center; background: #b7a9ed; }.wireflow-line.l1 { top: 116px; left: 145px; width: 117px; transform: rotate(38deg); }.wireflow-line.l2 { top: 176px; left: 282px; width: 112px; transform: rotate(-37deg); }
.wireframe-audience { position: relative; min-height: 318px; padding: 24px; overflow: hidden; border: 1px solid #cfe7e9; border-radius: 17px; background: linear-gradient(135deg, #edfafa, #fff); box-shadow: 0 24px 55px rgba(30,41,59,.12); }
.wire-audience-card { position: absolute; width: 63%; padding: 14px; border: 1px solid #c9e6e9; border-radius: 10px; background: #fff; box-shadow: 0 11px 19px rgba(12,111,120,.10); }
.wire-audience-card.one { top: 39px; left: 28px; }.wire-audience-card.two { right: 18px; bottom: 31px; }
.wire-audience-card span { display: block; padding-bottom: 9px; color: #167681; font: 700 7px var(--font-mono); }.wire-audience-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid #eff4f4; }.wire-audience-row i { width: 18px; height: 18px; border-radius: 50%; background: #bde9ed; }.wire-audience-row:nth-child(3) i { background: #ffd999; }.wire-audience-row b { font-size: 7px; }.wire-audience-row small { margin-left: auto; color: #198347; font-size: 6px; font-weight: 800; }
.sending-stage {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  border: 1px solid #f0d49d;
  border-radius: 17px;
  background: linear-gradient(135deg, #fff5dd, #fffdf8);
  box-shadow: 0 24px 55px rgba(30,41,59,.11);
}
.sending-stage__providers { position: absolute; top: 35px; left: 23px; display: grid; gap: 7px; }
.sending-stage__providers span { padding: 6px 8px; border: 1px solid #efd29b; border-radius: 6px; color: #805112; background: #fff; font: 700 7px var(--font-mono); box-shadow: 0 4px 9px rgba(108,73,25,.06); }
.sending-stage__route { position: absolute; top: 73px; left: 130px; width: 100px; height: 113px; border-top: 1px solid #dfaa4f; border-right: 1px solid #dfaa4f; border-bottom: 1px solid #dfaa4f; border-radius: 0 30px 30px 0; opacity: .7; }
.sending-stage__window { position: absolute; right: 28px; bottom: 31px; width: 58%; padding: 14px; border: 1px solid #d8dee9; border-radius: 10px; background: #fff; box-shadow: 0 12px 21px rgba(35,48,72,.12); }
.sending-stage__window:before { content: ""; display: block; width: 100%; height: 14px; margin-bottom: 11px; border-bottom: 1px solid #e7ebf1; background: radial-gradient(circle at 5px 7px,#c8d0dc 3px,transparent 3.5px),radial-gradient(circle at 15px 7px,#c8d0dc 3px,transparent 3.5px),radial-gradient(circle at 25px 7px,#c8d0dc 3px,transparent 3.5px); }
.sending-stage__window b { display: block; font-size: 9px; }.sending-stage__window p { margin: 3px 0 10px; color: #7d8898; font-size: 7px; }
.sending-stage__bar { height: 7px; overflow: hidden; border-radius: 99px; background: #f3f0ea; }.sending-stage__bar i { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--amber),#f6c767); }
.sending-stage__meta { display: flex; justify-content: space-between; margin-top: 6px; color: #8b6a38; font-size: 7px; font-weight: 800; }
.sending-stage__inbox { position: absolute; right: 10px; top: 19px; padding: 10px; border: 1px solid #d8e5db; border-radius: 9px; color: #2e613e; background: #fff; box-shadow: 0 9px 18px rgba(31,69,45,.1); font-size: 7px; }.sending-stage__inbox b { display: block; margin-top: 3px; font: 800 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.ai-stage { position: relative; min-height: 318px; overflow: hidden; border: 1px solid #ddd5fc; border-radius: 17px; background: linear-gradient(135deg,#f6f3ff,#fff); box-shadow: 0 24px 55px rgba(30,41,59,.12); }
.ai-stage__editor { position: absolute; top: 33px; left: 32px; width: 70%; padding: 14px; border: 1px solid #d8d1f4; border-radius: 10px; background: #fff; box-shadow: 0 12px 22px rgba(79,70,229,.1); }
.ai-stage__editor:before { content: "Soạn chiến dịch"; display: block; padding-bottom: 10px; border-bottom: 1px solid #ece9f8; color: #6350bf; font-size: 8px; font-weight: 800; }
.ai-stage__subject { margin: 11px 0 9px; color: #27354b; font-size: 9px; font-weight: 800; }.ai-stage__line { height: 5px; margin-top: 5px; border-radius: 99px; background: #ecebf3; }.ai-stage__line.wide { width: 90%; }.ai-stage__line.short { width: 61%; }
.ai-stage__suggest { margin-top: 13px; padding: 8px; border: 1px solid #dfd6fd; border-radius: 6px; color: #6350bf; background: #f6f3ff; font-size: 7px; }.ai-stage__suggest b { font-size: 7px; }
.ai-stage__score { position: absolute; right: 19px; bottom: 29px; width: 145px; padding: 12px; border: 1px solid #d8e5db; border-radius: 10px; background: #fff; box-shadow: 0 12px 22px rgba(31,69,45,.1); }.ai-stage__score span { color: #65738a; font-size: 7px; font-weight: 700; }.ai-stage__score b { display: block; margin-top: 4px; color: #168343; font: 800 21px var(--font-mono); font-variant-numeric: tabular-nums; }.ai-stage__score small { color: #168343; font-size: 7px; font-weight: 800; }
.floating-symbol {
  position: absolute;
  display: grid;
  width: 47px; height: 47px;
  place-items: center;
  border: 1px solid #e5bf71;
  border-radius: 13px;
  color: var(--amber-700);
  background: #fffdf8;
  box-shadow: 0 10px 22px rgba(22,31,49,.12);
}
.floating-symbol svg { width: 24px; }
.floating-symbol--one { top: 29px; right: 20px; }
.floating-symbol--two { bottom: 28px; left: 18px; }

/* Solutions hub — operating-model narrative */
.solutions-hero { position:relative; overflow:hidden; border-top:1px solid #f1dfc5; border-bottom:1px solid #f1dfc5; background:linear-gradient(112deg,#fffaf1 0%,#fffdf8 51%,#fff3dc 100%); }
.solutions-hero__shell { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr); gap:clamp(42px,5vw,68px); align-items:center; min-height:550px; padding:70px 0 66px; }.solutions-hero__shell::before { position:absolute; bottom:-245px; left:-140px; width:440px; height:440px; border:1px solid rgba(217,119,6,.15); border-radius:50%; box-shadow:0 0 0 45px rgba(217,119,6,.04),0 0 0 92px rgba(217,119,6,.02); content:""; }.solutions-hero__copy,.solutions-compass { position:relative; z-index:1; }.solutions-hero__kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:17px; padding:8px 12px; border-radius:999px; color:var(--amber-700); background:#fff0cd; font-size:.72rem; font-weight:800; letter-spacing:.07em; }.solutions-hero__kicker svg { width:17px; height:17px; }.solutions-hero .display { max-width:530px; margin:0 0 18px; color:#3d291e; font-size:clamp(2.55rem,4vw,4rem); }.solutions-hero .display em { color:var(--amber); }.solutions-hero .lead { max-width:510px; margin:0; color:#70563f; font-size:1rem; }.solutions-hero__proof { display:flex; flex-wrap:wrap; gap:12px 17px; margin:27px 0 30px; color:#6a4c35; font-size:.75rem; font-weight:750; }.solutions-hero__proof span { display:flex; align-items:center; gap:7px; }.solutions-hero__proof i { width:8px; height:8px; border-radius:50%; background:var(--amber); }
.solutions-compass { overflow:hidden; min-height:405px; border:1px solid rgba(82,45,12,.18); border-radius:16px; background:#fff; box-shadow:0 24px 52px rgba(91,50,11,.15); }.solutions-compass__top { display:flex; align-items:center; height:44px; padding:0 14px; border-bottom:1px solid #f0e5d7; color:#866a51; background:#fffcf7; font-size:.62rem; }.solutions-compass__top > span { display:flex; gap:4px; }.solutions-compass__top i { width:7px; height:7px; border-radius:50%; background:#e7c89b; }.solutions-compass__top b { margin-left:9px; }.solutions-compass__top em { margin-left:auto; color:#9a5517; font-style:normal; font-weight:800; }.solutions-compass__canvas { position:relative; height:309px; overflow:hidden; background-color:#fbfcfe; background-image:radial-gradient(#e0e4ea 1px,transparent 1px); background-size:18px 18px; }.solutions-compass__core { position:absolute; z-index:2; top:50%; left:50%; display:grid; width:132px; height:132px; place-content:center; border:1px solid #e9bc68; border-radius:50%; color:#3d291e; background:#fff6df; text-align:center; box-shadow:0 10px 24px rgba(117,72,20,.12); transform:translate(-50%,-50%); }.solutions-compass__core > span { font-size:.92rem; font-weight:800; }.solutions-compass__core > span em { color:var(--amber); font-style:normal; }.solutions-compass__core small { margin-top:5px; color:#9a7343; font-family:var(--font-mono); font-size:.44rem; font-weight:800; }.solutions-compass__route { position:absolute; z-index:3; display:flex; width:190px; align-items:center; gap:9px; padding:11px; border:1px solid #e1e7ee; border-radius:10px; color:#455368; background:#fff; box-shadow:0 9px 18px rgba(35,48,72,.08); transition:.2s ease; }.solutions-compass__route:hover { border-color:#e8c07a; transform:translateY(-2px); }.solutions-compass__route > i { display:grid; flex:none; width:34px; height:34px; place-items:center; border-radius:9px; color:#9a5517; background:#fff2d3; }.solutions-compass__route svg { width:18px; }.solutions-compass__route span { min-width:0; }.solutions-compass__route b,.solutions-compass__route small { display:block; }.solutions-compass__route b { color:#3f4c5e; font-size:.65rem; }.solutions-compass__route small { margin-top:2px; color:#8a97a8; font-size:.49rem; }.solutions-compass__route > em { margin-left:auto; color:#b18a60; font-family:var(--font-mono); font-size:.5rem; font-style:normal; font-weight:800; }.solutions-compass__route.is-commerce { top:25px; left:24px; }.solutions-compass__route.is-saas { top:25px; right:24px; }.solutions-compass__route.is-education { left:24px; bottom:23px; }.solutions-compass__route.is-agency { right:24px; bottom:23px; }.solutions-compass__route.is-saas > i { color:#3e6e82; background:#edf6f9; }.solutions-compass__route.is-education > i { color:#8a622e; background:#fff6e7; }.solutions-compass__route.is-agency > i { color:#5b516b; background:#f3f1f6; }.solutions-compass__line { position:absolute; z-index:1; border-color:#d7b77f; border-style:solid; }.solutions-compass__line.line-one { top:76px; left:190px; width:94px; height:80px; border-width:1px 0 0 1px; border-radius:12px 0 0; }.solutions-compass__line.line-two { top:76px; right:190px; width:94px; height:80px; border-width:1px 1px 0 0; border-radius:0 12px 0 0; }.solutions-compass__line.line-three { right:190px; bottom:65px; width:94px; height:80px; border-width:0 1px 1px 0; border-radius:0 0 12px; }.solutions-compass__line.line-four { left:190px; bottom:65px; width:94px; height:80px; border-width:0 0 1px 1px; border-radius:0 0 0 12px; }.solutions-compass__footer { display:flex; height:51px; align-items:center; justify-content:center; gap:22px; border-top:1px solid #f0e5d7; color:#7c6a58; background:#fffcf7; font-family:var(--font-mono); font-size:.5rem; font-weight:800; }.solutions-compass__footer span { display:flex; align-items:center; gap:5px; }.solutions-compass__footer i { width:6px; height:6px; border-radius:50%; background:var(--amber); }

.solutions-pressure { padding:26px 0; background:#fff; }.solutions-pressure__shell { display:grid; grid-template-columns:minmax(270px,.7fr) minmax(0,1.3fr); gap:clamp(38px,5vw,70px); padding:clamp(30px,4vw,48px); border:1px solid #eed9ba; border-radius:20px; background:linear-gradient(112deg,#fffaf1 0%,#fffdf9 56%,#fff 100%); }.solutions-pressure__intro h2 { max-width:430px; margin:10px 0 14px; color:#3d291e; font-size:clamp(2rem,3vw,2.7rem); line-height:1.08; letter-spacing:-.045em; }.solutions-pressure__intro p { max-width:430px; margin:0; color:#6b7a8f; font-size:.86rem; line-height:1.65; }.solutions-pressure__list { border-top:1px solid #eadbc8; }.solutions-pressure__list a { display:grid; grid-template-columns:50px minmax(0,1fr) auto; gap:16px; align-items:center; min-height:112px; padding:17px 0; border-bottom:1px solid #eadbc8; color:inherit; }.solutions-pressure__list > a > span { color:var(--amber-700); font-family:var(--font-mono); font-size:1.05rem; font-weight:800; }.solutions-pressure__list small,.solutions-pressure__list b { display:block; }.solutions-pressure__list small { margin-bottom:4px; color:#a1846d; font-family:var(--font-mono); font-size:.5rem; font-weight:800; }.solutions-pressure__list b { color:#3d291e; font-size:.98rem; }.solutions-pressure__list p { margin:5px 0 0; color:#6b7a8f; font-size:.76rem; }.solutions-pressure__list > a > i { display:grid; width:34px; height:34px; place-items:center; border:1px solid #efd3a5; border-radius:9px; color:#9a5517; background:#fff4df; font-style:normal; transition:.2s ease; }.solutions-pressure__list a:hover > i { color:#fff; background:var(--amber); transform:translateX(3px); }

.solutions-playbooks { padding:58px 0 76px; }.solutions-playbooks .section-heading { max-width:800px; margin:0 auto 38px; }.solutions-playbooks__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.solution-playbook { --playbook:#d97706; --playbook-dark:#9a5517; --playbook-soft:#fff7e7; --playbook-line:#efd3a5; display:flex; flex-direction:column; padding:26px; border:1px solid #e1e7ef; border-radius:17px; background:#fff; box-shadow:0 9px 22px rgba(35,48,72,.04); transition:.22s ease; scroll-margin-top:100px; }.solution-playbook:hover { border-color:var(--playbook-line); box-shadow:0 18px 36px rgba(45,34,20,.09); transform:translateY(-3px); }.solution-playbook.is-saas { --playbook:#4d7689; --playbook-dark:#355f73; --playbook-soft:#edf6f9; --playbook-line:#cfe0e7; }.solution-playbook.is-education { --playbook:#9a6c35; --playbook-dark:#805528; --playbook-soft:#fff8eb; --playbook-line:#ead3b1; }.solution-playbook.is-agency { --playbook:#62556f; --playbook-dark:#4f425d; --playbook-soft:#f3f1f6; --playbook-line:#ddd7e3; }.solution-playbook__head { display:flex; align-items:center; gap:9px; }.solution-playbook__icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--playbook-line); border-radius:11px; color:var(--playbook-dark); background:var(--playbook-soft); }.solution-playbook__icon svg { width:21px; }.solution-playbook__head > span { color:var(--playbook-dark); font-family:var(--font-mono); font-size:.58rem; font-weight:800; }.solution-playbook__head > em { margin-left:auto; padding:5px 7px; border-radius:999px; color:var(--playbook-dark); background:var(--playbook-soft); font-size:.48rem; font-style:normal; font-weight:800; }.solution-playbook > h3 { margin:22px 0 8px; color:#273449; font-size:1.27rem; letter-spacing:-.035em; }.solution-playbook > p { margin:0; color:#66778e; font-size:.8rem; line-height:1.6; }.solution-playbook__flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:5px; align-items:center; margin:19px 0; padding:12px 10px; border:1px solid #e7ebf0; border-radius:10px; background:#fafbfd; }.solution-playbook__flow span { min-width:0; }.solution-playbook__flow small,.solution-playbook__flow b { display:block; }.solution-playbook__flow small { margin-bottom:4px; color:var(--playbook-dark); font-size:.4rem; font-weight:800; }.solution-playbook__flow b { overflow:hidden; color:#526176; font-size:.49rem; white-space:nowrap; text-overflow:ellipsis; }.solution-playbook__flow i { color:#b5bdc8; font-size:.64rem; font-style:normal; }.solution-playbook ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }.solution-playbook li { display:flex; align-items:center; gap:8px; color:#526176; font-size:.72rem; }.solution-playbook li::before { display:grid; width:17px; height:17px; place-items:center; border-radius:50%; color:var(--playbook-dark); background:var(--playbook-soft); font-size:.52rem; font-weight:800; content:"✓"; }.solution-playbook .text-link { margin-top:20px; padding-top:0; color:var(--playbook-dark); }

.solutions-foundation { padding:72px 0; border-top:1px solid #ece4da; border-bottom:1px solid #ece4da; background:#f8fafc; }.solutions-foundation__heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.65fr); gap:64px; align-items:end; margin-bottom:34px; }.solutions-foundation__heading .display { max-width:680px; margin:9px 0 0; }.solutions-foundation__heading > p { margin:0 0 4px; color:#66778e; font-size:.9rem; line-height:1.65; }.solutions-foundation__board { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #dde3ea; border-radius:16px; background:#fff; box-shadow:0 15px 34px rgba(35,48,72,.06); }.solutions-foundation__board a { position:relative; min-height:260px; padding:24px; border-right:1px solid #e5e9ef; color:inherit; transition:.2s ease; }.solutions-foundation__board a:last-child { border-right:0; }.solutions-foundation__board a:hover { background:#fffaf1; }.solutions-foundation__board > a > span { position:absolute; top:19px; right:20px; color:#b49776; font-family:var(--font-mono); font-size:.6rem; font-weight:800; }.solutions-foundation__board > a > i { display:grid; width:43px; height:43px; margin-bottom:24px; place-items:center; border:1px solid #efd3a5; border-radius:11px; color:#9a5517; background:#fff5df; }.solutions-foundation__board svg { width:21px; }.solutions-foundation__board small,.solutions-foundation__board b { display:block; }.solutions-foundation__board small { color:#9a5517; font-family:var(--font-mono); font-size:.5rem; font-weight:800; }.solutions-foundation__board b { margin:9px 0 8px; color:#2f3d51; font-size:.9rem; line-height:1.35; }.solutions-foundation__board p { margin:0; color:#708096; font-size:.72rem; line-height:1.55; }

.solutions-launch { padding:70px 0; background:#fff; }.solutions-launch__shell { display:grid; grid-template-columns:minmax(270px,.7fr) minmax(0,1.3fr); gap:clamp(40px,6vw,80px); align-items:center; }.solutions-launch__heading .display { max-width:470px; margin:10px 0 14px; }.solutions-launch__heading > p { max-width:460px; margin:0; color:#66778e; font-size:.88rem; line-height:1.65; }.solutions-launch__steps { position:relative; margin:0; padding:0; list-style:none; }.solutions-launch__steps::before { position:absolute; top:45px; bottom:45px; left:28px; width:1px; background:#e5cda9; content:""; }.solutions-launch__steps li { position:relative; display:grid; grid-template-columns:56px 44px minmax(0,1fr); gap:14px; align-items:center; min-height:112px; padding:15px 0; border-bottom:1px solid #e8edf2; }.solutions-launch__steps li:last-child { border-bottom:0; }.solutions-launch__steps li > span { color:#a96a27; font-family:var(--font-mono); font-size:.6rem; font-weight:800; }.solutions-launch__steps li > i { z-index:1; display:grid; width:42px; height:42px; place-items:center; border:1px solid #e9c995; border-radius:11px; color:#9a5517; background:#fff8e8; box-shadow:0 0 0 6px #fff; }.solutions-launch__steps svg { width:21px; }.solutions-launch__steps small,.solutions-launch__steps b { display:block; }.solutions-launch__steps small { color:#a1846d; font-family:var(--font-mono); font-size:.48rem; font-weight:800; }.solutions-launch__steps b { margin:4px 0; color:#2f3d51; font-size:.92rem; }.solutions-launch__steps p { margin:0; color:#708096; font-size:.73rem; }
.solutions-hub .case-strip { background:linear-gradient(122deg,#2d211b 0%,#47301f 58%,#6a3d18 100%); box-shadow:0 18px 42px rgba(65,38,18,.15); }.solutions-hub .case-strip-copy p { color:#d7c8ba; }.solutions-hub .case-strip-metrics { background:rgba(255,220,165,.13); }.solutions-hub .case-strip-metrics div { background:rgba(255,255,255,.045); }.solutions-hub .case-strip-metrics strong { color:#f6c978; }.solutions-hub .case-strip-metrics span { color:#d9c8b8; }

@media (max-width:1050px) {
  .solutions-hero__shell { grid-template-columns:1fr; gap:32px; }.solutions-hero__copy { max-width:700px; }.solutions-compass { width:min(100%,680px); }
  .solutions-pressure__shell,.solutions-launch__shell,.solutions-foundation__heading { grid-template-columns:1fr; gap:30px; }.solutions-pressure__intro h2,.solutions-pressure__intro p,.solutions-launch__heading .display,.solutions-launch__heading > p { max-width:700px; }
  .solutions-playbooks__grid { grid-template-columns:repeat(2,1fr); }
  .solutions-foundation__board { grid-template-columns:repeat(2,1fr); }.solutions-foundation__board a:nth-child(2) { border-right:0; }.solutions-foundation__board a:nth-child(-n+2) { border-bottom:1px solid #e5e9ef; }
}
@media (max-width:700px) {
  .solutions-hero__shell { min-height:0; padding:44px 0 42px; }.solutions-hero .display { font-size:clamp(2.3rem,11vw,3.2rem); }.solutions-hero__proof { display:grid; gap:9px; }.solutions-compass { min-height:355px; }.solutions-compass__canvas { height:260px; }.solutions-compass__core { width:96px; height:96px; }.solutions-compass__route { width:148px; padding:8px; }.solutions-compass__route.is-commerce { top:18px; left:10px; }.solutions-compass__route.is-saas { top:18px; right:10px; }.solutions-compass__route.is-education { left:10px; bottom:17px; }.solutions-compass__route.is-agency { right:10px; bottom:17px; }.solutions-compass__route > i { width:28px; height:28px; }.solutions-compass__route small { display:none; }.solutions-compass__line { display:none; }.solutions-compass__footer { height:49px; gap:9px; font-size:.42rem; }
  .solutions-pressure { padding:20px 0; }.solutions-pressure__shell { padding:27px 20px; border-radius:15px; }.solutions-pressure__list a { grid-template-columns:38px minmax(0,1fr) auto; gap:10px; }
  .solutions-playbooks { padding:48px 0 58px; }.solutions-playbooks__grid { grid-template-columns:1fr; }.solution-playbook { padding:22px; }.solution-playbook__flow { overflow-x:auto; }.solution-playbook__flow span { min-width:78px; }
  .solutions-foundation { padding:54px 0; }.solutions-foundation__board { grid-template-columns:1fr; }.solutions-foundation__board a { min-height:0; border-right:0; border-bottom:1px solid #e5e9ef; }.solutions-foundation__board a:last-child { border-bottom:0; }
  .solutions-launch { padding:52px 0; }.solutions-launch__steps li { grid-template-columns:42px 38px minmax(0,1fr); gap:10px; }.solutions-launch__steps li > i { width:36px; height:36px; }.solutions-launch__steps::before { left:60px; }
}

/* Solutions hub — six-industry expansion */
.solutions-compass { min-height:516px; }
.solutions-compass__canvas { height:420px; }
.solutions-compass__route.is-commerce { top:28px; left:24px; }
.solutions-compass__route.is-saas { top:28px; right:24px; }
.solutions-compass__route.is-education { top:181px; bottom:auto; left:24px; }
.solutions-compass__route.is-agency { top:181px; right:24px; bottom:auto; }
.solutions-compass__route.is-property { bottom:28px; left:24px; }
.solutions-compass__route.is-travel { right:24px; bottom:28px; }
.solutions-compass__route.is-property > i { color:#8f552f; background:#fff0e8; }
.solutions-compass__route.is-travel > i { color:#436f78; background:#edf7f8; }
.solutions-compass__line.line-one { top:79px; left:214px; width:42px; height:132px; border-width:1px 0 0 1px; border-radius:12px 0 0; }
.solutions-compass__line.line-two { top:79px; right:214px; width:42px; height:132px; border-width:1px 1px 0 0; border-radius:0 12px 0 0; }
.solutions-compass__line.line-three { top:209px; left:214px; width:40px; height:0; border-width:1px 0 0; border-radius:0; }
.solutions-compass__line.line-four { top:209px; right:214px; left:auto; bottom:auto; width:40px; height:0; border-width:1px 0 0; border-radius:0; }
.solutions-compass__line.line-five { bottom:79px; left:214px; width:42px; height:132px; border-width:0 0 1px 1px; border-radius:0 0 0 12px; }
.solutions-compass__line.line-six { right:214px; bottom:79px; width:42px; height:132px; border-width:0 1px 1px 0; border-radius:0 0 12px; }
.solutions-pressure__list--six { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; border-top:0; }
.solutions-pressure__list--six a { min-height:142px; padding:18px; border:1px solid #eadbc8; border-radius:12px; background:rgba(255,255,255,.72); }
.solutions-pressure__list--six a:hover { border-color:#e4bc79; background:#fff; box-shadow:0 10px 22px rgba(91,50,11,.07); }
.solutions-playbooks__grid { grid-template-columns:repeat(3,1fr); }
.solution-playbook.is-property { --playbook:#a25d35; --playbook-dark:#844624; --playbook-soft:#fff3ec; --playbook-line:#edcfbe; }
.solution-playbook.is-travel { --playbook:#4b7b83; --playbook-dark:#39646c; --playbook-soft:#eef8f8; --playbook-line:#cee2e4; }

@media (max-width:1050px) {
  .solutions-playbooks__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
  .solutions-compass { min-height:0; }
  .solutions-compass__canvas { display:grid; height:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }
  .solutions-compass__core,.solutions-compass__line { display:none; }
  .solutions-compass__route,.solutions-compass__route.is-commerce,.solutions-compass__route.is-saas,.solutions-compass__route.is-education,.solutions-compass__route.is-agency,.solutions-compass__route.is-property,.solutions-compass__route.is-travel { position:static; width:auto; min-width:0; }
  .solutions-compass__route b { overflow:hidden; font-size:.57rem; white-space:nowrap; text-overflow:ellipsis; }
  .solutions-compass__route > em { display:none; }
  .solutions-compass__footer { height:auto; flex-wrap:wrap; padding:12px; }
  .solutions-pressure__list--six { grid-template-columns:1fr; }
  .solutions-pressure__list--six a { min-height:0; }
  .solutions-playbooks__grid { grid-template-columns:1fr; }
}

/* solutions */
.solution-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.solution-card {
  position: relative;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  overflow: hidden;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: .22s ease;
}
.solution-card:hover { border-color: #e9bf6a; box-shadow: 0 15px 30px rgba(217,119,6,.10); transform: translateY(-3px); }
.solution-card h3 { margin: 18px 0 8px; font-size: 1.08rem; line-height: 1.22; letter-spacing: -.03em; }
.solution-card p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.solution-card .text-link { margin-top: auto; padding-top: 16px; font-size: .78rem; }
.solution-pattern { position: absolute; right: -26px; bottom: -40px; width: 145px; height: 145px; border: 1px solid currentColor; border-radius: 43px; opacity: .17; transform: rotate(31deg); }
.solution-card--ecom { color: var(--amber-700); background: #fff3e0; }
.solution-card--ecom:hover { border-color: #f5d08a; box-shadow: 0 15px 30px rgba(217,119,6,.12); }
.solution-card--saas { color: var(--teal); background: #edf8f9; }
.solution-card--saas:hover { border-color: #80d0d8; box-shadow: 0 15px 30px rgba(56,178,172,.12); }
.solution-card--agency { color: var(--violet); background: #f4f0ff; }
.solution-card--agency:hover { border-color: #c4b5fd; box-shadow: 0 15px 30px rgba(112,71,239,.12); }
.solution-card--edu { color: #16a34a; background: #eefbf2; }
.solution-card--edu:hover { border-color: #6ee7a0; box-shadow: 0 15px 30px rgba(22,163,74,.12); }
.solution-card--realestate { color: #e11d48; background: #fef1f3; }
.solution-card--realestate:hover { border-color: #fda4af; box-shadow: 0 15px 30px rgba(225,29,72,.10); }
.solution-card--travel { color: #0284c7; background: #eef7fd; }
.solution-card--travel:hover { border-color: #7dd3fc; box-shadow: 0 15px 30px rgba(2,132,199,.12); }
.case-strip { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; border-radius: var(--radius); background: #192539; }
.case-strip-copy { padding: 50px; color: #fff; }
.case-strip-copy h2 { max-width: 510px; margin: 11px 0 17px; font-size: clamp(1.8rem, 3vw, 2.9rem); line-height: 1.08; letter-spacing: -.045em; }
.case-strip-copy p { max-width: 560px; color: #cad4e5; }
.case-strip-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.12); }
.case-strip-metrics div { display: flex; flex-direction: column; justify-content: center; padding: 28px; color: #fff; background: #24334a; }
.case-strip-metrics strong { color: #ffd483; font-family: var(--font-mono); font-size: 2rem; font-variant-numeric: tabular-nums; }
.case-strip-metrics span { margin-top: 4px; color: #c7d2e2; font-size: .76rem; }

/* Pricing */
.pricing-hero { padding-bottom: 64px; }
.billing-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid #eadbc3;
  border-radius: 10px;
  background: #fff;
}
.billing-toggle button { padding: 7px 11px; border: 0; border-radius: 7px; color: #667085; background: transparent; font-size: .76rem; font-weight: 800; cursor: pointer; }
.billing-toggle button.active { color: var(--amber-800); background: var(--amber-100); }
.save-pill { display: inline-flex; margin-left: 8px; padding: 4px 7px; border-radius: 999px; color: #15723a; background: #eaf8ed; font-size: .66rem; font-weight: 800; vertical-align: middle; }
.pricing-deck { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; align-items: stretch; }
.price-card {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  padding: 25px 21px 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.price-card--featured { position: relative; border: 2px solid var(--amber); box-shadow: 0 18px 36px rgba(217,119,6,.16); }
.price-card--featured:before {
  content: "PHỔ BIẾN NHẤT";
  position: absolute;
  top: -13px; left: 17px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--amber);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.price-card h3 { margin: 0; font-size: 1.15rem; }
.plan-audience { min-height: 43px; margin: 6px 0 18px; color: #687589; font-size: .75rem; }
.price { display: flex; align-items: end; gap: 4px; margin-bottom: 8px; }
.price b { font-family: var(--font-mono); font-size: 2.28rem; line-height: .95; letter-spacing: -.07em; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.price span { padding-bottom: 2px; color: #64748b; font-size: .73rem; }
.trial-line { min-height: 21px; margin: 5px 0 17px; color: var(--green); font-size: .7rem; font-weight: 750; }
.trial-line.is-empty { color: transparent; }
.price-card .button { width: 100%; min-height: 42px; margin-bottom: 18px; }
.price-card ul { display: grid; gap: 11px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.price-card li { display: flex; gap: 8px; color: #4c5b6f; font-size: .76rem; line-height: 1.4; }
.price-card li svg { flex: none; width: 15px; color: var(--amber); }
.price-card li strong { color: var(--ink); }
.pricing-note { margin: 22px auto 0; color: #718096; font-size: .75rem; text-align: center; }
.comparison-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.feature-table { width: 100%; min-width: 710px; border-collapse: collapse; font-size: .82rem; }
.feature-table th, .feature-table td { padding: 14px 17px; border-bottom: 1px solid var(--line); text-align: center; }
.feature-table th:first-child, .feature-table td:first-child { width: 34%; text-align: left; }
.feature-table thead th { color: #536174; background: #fff9ed; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.feature-table tbody tr:last-child td { border-bottom: 0; }
.check { color: var(--green); font-weight: 800; }
.dash { color: #a2acb9; }

/* comparisons */
.compare-hero { padding-bottom: 74px; }
.comparison-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; align-items: stretch; }
.compare-point { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.compare-point h3 { margin: 15px 0 8px; font-size: 1rem; }
.compare-point p { margin: 0; color: var(--ink-soft); font-size: .86rem; }
.compare-point--brand { color: #fff; border-color: #1f2d43; background: #1c2a3e; }
.compare-point--brand p { color: #d2dbea; }
.table-mark { display: inline-grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: .75rem; }
.table-mark--no { color: #a0abb9; background: #eef1f5; }
.cost-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 23px; padding: 27px 31px; border: 1px solid #f0cd8c; border-radius: 16px; background: #fff8e9; }
.cost-callout strong { display: block; color: var(--amber-800); font-family: var(--font-mono); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.cost-callout p { margin: 0; color: #536174; font-size: .84rem; }

/* Blog */
.blog-hero { padding-bottom: 70px; }
.featured-article { display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.article-image { min-height: 320px; overflow: hidden; background: #eaf0f6; }
.article-image img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.featured-article .article-content { padding: 41px; }
.article-tag { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: var(--amber-800); background: var(--amber-100); font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.article-content h2 { margin: 13px 0 12px; font-size: clamp(1.55rem, 2.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.045em; }
.article-content p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.article-meta { display: flex; align-items: center; gap: 8px; margin-top: 21px; color: #758197; font-size: .72rem; font-weight: 650; }
.article-meta .separator { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 19px; }
.article-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.article-card:hover { border-color: #edc77d; box-shadow: 0 14px 28px rgba(217,119,6,.09); transform: translateY(-3px); }
.article-card .article-image { min-height: 173px; }
.article-card .article-content { padding: 19px; }
.article-card h3 { margin: 11px 0 9px; font-size: 1rem; line-height: 1.32; letter-spacing: -.025em; }
.article-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .79rem; }
.article-card .article-meta { margin-top: 16px; }
.topic-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.topic { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #576579; background: #fff; font-size: .75rem; font-weight: 700; }
.topic:hover, .topic.active { border-color: #efca83; color: var(--amber-800); background: #fff8e9; }

/* Knowledge hub index: editorial hierarchy instead of a product landing page */
.knowledge-hub-hero { padding: 66px 0 34px; border-bottom: 1px solid #eee4d7; background: linear-gradient(115deg,#fffaf0 0%,#fffdf8 62%,#f7f4ee 100%); }
.knowledge-hub-hero .container { text-align: left; }
.knowledge-hub-hero .display { max-width: 820px; margin-right: 0; margin-left: 0; color: #3d291e; font-size: clamp(2.5rem,5vw,4.5rem); }
.knowledge-hub-hero .lead { max-width: 705px; margin-right: 0; margin-left: 0; color: #657087; font-size: 1.04rem; line-height: 1.65; }
.knowledge-hub-hero .topic-row { justify-content: flex-start; gap: 0; margin-top: 31px; padding-top: 19px; border-top: 1px solid #ecdfcd; }
.knowledge-hub-hero .topic { margin: 0 14px 7px 0; padding: 5px 0; border: 0; border-radius: 0; color: #59677b; background: transparent; font-size: .77rem; }
.knowledge-hub-hero button.topic { font-family: inherit; font-size: .77rem; font-weight: 700; line-height: inherit; cursor: pointer; }
.knowledge-hub-hero .topic::before { display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border: 1.5px solid #d97706; border-radius: 50%; content: ""; vertical-align: middle; }
.knowledge-hub-hero .topic:hover, .knowledge-hub-hero .topic.active { color: var(--amber-800); background: transparent; box-shadow: inset 0 -1px 0 var(--amber); }
.knowledge-hub-hero .topic.active::before { background: var(--amber); }
.knowledge-hub-hero .topic b { display: inline-grid; min-width: 18px; height: 18px; margin-left: 5px; place-items: center; border: 1px solid #e4c28a; border-radius: 999px; color: #95601f; background: #fff9ec; font-family: var(--font-mono); font-size: .62rem; font-variant-numeric: tabular-nums; }
.knowledge-hub-hero .topic.active b { border-color: #e3a849; color: #fff; background: var(--amber); }
.knowledge-hub-hero + .section { padding-top: 55px; }

.knowledge-featured { grid-template-columns: 1.14fr .86fr; border: 1px solid #e9dfd1; border-radius: 18px; background: #fffaf1; box-shadow: none; }
.knowledge-featured .article-image { min-height: 400px; border-right: 1px solid #e9dfd1; background: #eef2f5; }
.knowledge-featured .article-image img { object-position: center top; transition: transform .35s ease; }
.knowledge-featured:hover .article-image img { transform: scale(1.025); }
.knowledge-featured .article-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px,4vw,54px); }
.knowledge-featured .article-tag { padding: 0; border-radius: 0; color: var(--amber-800); background: transparent; font-size: .69rem; }
.knowledge-featured .article-content h2 { max-width: 500px; margin: 17px 0 15px; color: #3d291e; font-size: clamp(1.8rem,3.1vw,2.7rem); }
.knowledge-featured .article-content h2 a { text-decoration: none; }
.knowledge-featured .article-content h2 a:hover { color: var(--amber-700); }
.knowledge-featured .article-content p { max-width: 485px; font-size: .94rem; line-height: 1.68; }
.knowledge-featured .text-link { margin-top: 27px !important; }

.knowledge-library { background: #f7f8fa; }
.knowledge-library .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 37px; }
.knowledge-library .section-heading .display { margin-bottom: 0; }
.knowledge-library .article-grid { gap: 40px 25px; }
.knowledge-library .article-card { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.knowledge-library .article-card:hover { border-color: transparent; box-shadow: none; transform: none; }
.knowledge-library .article-card .article-image { min-height: 193px; border: 1px solid #e0e6ed; border-radius: 12px; background: #eef1f5; box-shadow: 0 9px 20px rgba(28,42,62,.055); }
.knowledge-library .article-card .article-image img { transition: transform .28s ease; }
.knowledge-library .article-card:hover .article-image img { transform: scale(1.025); }
.knowledge-library .article-card .article-content { padding: 18px 1px 0; }
.knowledge-library .article-tag { padding: 0; border-radius: 0; color: #ad5b12; background: transparent; font-size: .65rem; }
.knowledge-library .article-card h3 { margin: 10px 0 8px; color: #26364b; font-size: 1.07rem; line-height: 1.35; letter-spacing: -.03em; }
.knowledge-library .article-card h3 a { text-decoration: none; }
.knowledge-library .article-card h3 a:hover { color: var(--amber-700); }
.knowledge-library .article-card p { -webkit-line-clamp: 3; color: #68768a; font-size: .82rem; line-height: 1.58; }
.knowledge-library .article-card .article-meta { margin-top: 15px; color: #8994a3; font-size: .69rem; }
.knowledge-newsletter { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.75fr); align-items: center; gap: clamp(42px,6vw,82px); min-height: 410px; }
.knowledge-newsletter__copy { max-width: 680px; }
.knowledge-newsletter__copy .eyebrow { display: inline-block; margin-bottom: 14px; }
.knowledge-newsletter__copy h2 { max-width: 650px; margin: 0 0 18px; font-size: clamp(2.15rem,3.6vw,3.55rem); line-height: 1.04; }
.knowledge-newsletter__copy p { max-width: 620px; font-size: .94rem; line-height: 1.68; }
.knowledge-newsletter__form-panel { padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: rgba(255,255,255,.075); box-shadow: 0 18px 45px rgba(0,0,0,.12); backdrop-filter: blur(6px); }
.knowledge-newsletter__form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: #fff; }
.knowledge-newsletter__form-head strong { font-size: .88rem; }
.knowledge-newsletter__form-icon { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,193,92,.34); border-radius: 10px; color: #ffc15c; background: rgba(217,119,6,.13); }
.knowledge-newsletter__form-icon svg { width: 19px; }
.knowledge-newsletter__form-panel .subscribe-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-top: 0; }
.knowledge-newsletter__form-panel .subscribe-bar input { min-height: 48px; border-color: rgba(255,255,255,.26); background: #fff; }
.knowledge-newsletter__form-panel .subscribe-bar .button { min-height: 48px; padding-inline: 20px; white-space: nowrap; }
.knowledge-newsletter__form-panel > small { display: block; margin-top: 12px; color: #aeb8c8; font-size: .68rem; line-height: 1.45; }
.article-hero { padding: 70px 0 61px; background: #fffaf0; }
.article-hero .article-title { max-width: 850px; margin: 13px 0 19px; font-size: clamp(2.15rem,4.8vw,4.2rem); line-height: 1.06; letter-spacing: -.06em; }
.article-layout { display: grid; grid-template-columns: minmax(0, 750px) 230px; justify-content: space-between; gap: 70px; }
.article-body { font-size: 1rem; line-height: 1.78; }
.article-body h2 { margin: 48px 0 14px; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.035em; }
.article-body p { color: #435268; }
.article-body .shot-frame { margin: 30px 0; }
.article-body blockquote { margin: 27px 0; padding: 21px 23px; border-left: 3px solid var(--amber); border-radius: 0 12px 12px 0; color: #4b3721; background: #fff6e1; font-size: 1.06rem; font-weight: 600; }
.article-aside { position: sticky; top: 110px; align-self: start; padding-left: 18px; border-left: 1px solid var(--line); }
.article-aside b { display: block; margin-bottom: 11px; font-size: .77rem; text-transform: uppercase; letter-spacing: .07em; }
.article-aside a { display: block; padding: 7px 0; color: #66758a; font-size: .78rem; }
.article-aside a:hover { color: var(--amber-700); }

/* FAQ, CTA and legal */
.faq-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: 80px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 2px; border: 0; color: var(--ink); background: transparent; font-size: .93rem; font-weight: 750; text-align: left; cursor: pointer; }
.faq-question svg { flex: none; width: 18px; color: var(--amber); transition: transform .2s ease; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 26px 19px 2px; color: var(--ink-soft); font-size: .86rem; }
.faq-item.open .faq-answer { display: block; }
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: 56px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(120deg, #172033 0%, #2d324a 100%);
}
.cta-panel:after { content: ""; position: absolute; width: 390px; height: 390px; right: -120px; bottom: -230px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.04); }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { max-width: 680px; margin: 8px 0 13px; font-size: clamp(1.9rem,3.5vw,3.2rem); line-height: 1.08; letter-spacing: -.05em; }
.cta-panel p { max-width: 600px; margin: 0; color: #d2d9e4; }
.cta-panel .button-secondary { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.legal-content { max-width: 800px; }
.legal-content h2 { margin: 38px 0 11px; font-size: 1.32rem; letter-spacing: -.03em; }
.legal-content h3 { margin: 23px 0 8px; font-size: 1rem; }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: .92rem; }
.legal-content ul { padding-left: 19px; }
.legal-date { color: #687589; font-size: .82rem; }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-main { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 38px; padding: 57px 0 43px; }
.footer-brand p { max-width: 285px; margin: 18px 0; color: #687589; font-size: .83rem; }
.footer-brand .coupon { display: inline-flex; padding: 7px 9px; border: 1px dashed #e4b45c; border-radius: 7px; color: var(--amber-800); background: #fff9e9; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.footer-col h3 { margin: 0 0 14px; color: #3b495e; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.footer-col a { display: block; margin: 9px 0; color: #687589; font-size: .82rem; }
.footer-col a:hover { color: var(--amber-700); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 25px; border-top: 1px solid var(--line); color: #8a95a5; font-size: .73rem; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 15px; }

/* utility visual components */
.two-column { display: grid; grid-template-columns: repeat(2,1fr); gap: 21px; }
.info-panel { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.info-panel h3 { margin: 12px 0 10px; font-size: 1.15rem; }
.info-panel p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: var(--amber-800); background: var(--amber-100); font-size: .68rem; font-weight: 800; }
.pill--teal { color: #087783; background: #dff6f7; }
.pill--violet { color: #5b39d2; background: #ebe7ff; }
.pill--green { color: #14733b; background: #e5f7eb; }
.flow-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.flow-node { min-height: 96px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.flow-node strong { display: block; color: var(--amber-800); font-family: var(--font-mono); font-size: .68rem; font-variant-numeric: tabular-nums; }
.flow-node span { display: block; margin-top: 7px; color: var(--ink); font-size: .82rem; font-weight: 750; line-height: 1.3; }
.inline-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 13px 15px; border: 1px solid #f2d593; border-radius: 10px; color: #755526; background: #fff8e8; font-size: .78rem; }
.inline-note svg { flex: none; width: 17px; color: var(--amber); }
.subscribe-bar { display: flex; gap: 8px; margin-top: 19px; }
.subscribe-bar input { min-width: 0; flex: 1; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; outline: 0; font: inherit; font-size: .81rem; }
.subscribe-bar input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,.12); }

@media (max-width: 1050px) {
  .nav { gap: 22px; }
  .nav-links { gap: 16px; }
  .hero-grid, .page-hero-grid { grid-template-columns: 1fr; }
  .showcase-shell { grid-template-columns: 1fr; gap: 38px; }
  .showcase-copy { max-width: 690px; }
  .showcase-visual { width: min(100%, 620px); }
  .hero-copy { padding-bottom: 0; }
  .hero-visual { max-width: 690px; width: 90%; margin: 0 auto; }
  .page-hero-visual { max-width: 620px; }
  .story-grid { grid-template-columns: .9fr 1.1fr; gap: 48px; }
  .feature-card { min-height: 290px; }
  .solution-card-grid { grid-template-columns: repeat(2,1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 180px; gap: 42px; }
}
@media (max-width: 820px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .nav { min-height: 67px; justify-content: space-between; }
  .nav-links, .nav-actions .login-link, .nav-actions .button-secondary { display: none; }
  .nav-mega { display: none !important; }
  .nav-actions { margin-left: auto; }
  .nav-actions .button-primary { min-height: 39px; padding: 8px 11px; font-size: .77rem; }
  .menu-toggle { display: grid; place-items: center; }
  .mobile-panel {
    position: fixed;
    z-index: 29;
    inset: 67px 0 auto;
    padding: 12px 18px 18px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 15px 30px rgba(20,30,48,.09);
  }
  .mobile-panel.open { display: block; }
  .mobile-panel a { display: block; padding: 12px 2px; border-bottom: 1px solid #f0f2f5; color: #3b495e; font-size: .91rem; font-weight: 700; }
  .mobile-panel a:last-child { border: 0; }
  .section { padding: 56px 0; }
  .section--tight { padding: 55px 0; }
  .hero { padding: 58px 0 44px; }
  .hero-visual { min-height: 410px; width: 94%; }
  .dashboard-window, .native-dashboard { inset: 22px 0 25px 8px; }
  .metric-band { grid-template-columns: repeat(2,1fr); }
  .metric-band > div:nth-child(2) { border-right: 0; }
  .metric-band > div:nth-child(-n+2) { border-bottom: 1px solid #ece5d8; }
  .sub-grid { grid-template-columns: repeat(2,1fr); }
  .partner-row { align-items: flex-start; flex-direction: column; gap: 20px; }
  .partner-row p { width: 100%; flex: none; }
  .partner-row .partners { width: 100%; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
  .home-pillars { padding-top: 76px; padding-bottom: 82px; }
  .home-story-heading { margin-bottom: 46px; }
  .home-story { grid-template-columns: 1fr; gap: 32px; }
  .home-story-list { gap: 61px; }
  .home-story--reverse .home-story-copy, .home-story--reverse .home-story-visual, .home-story:not(.home-story--reverse) .home-story-copy, .home-story:not(.home-story--reverse) .home-story-visual { order: initial; }
  .home-story-visual { min-height: 340px; }
  .story-grid, .story-grid--reverse { grid-template-columns: 1fr; gap: 35px; }
  .story-grid + .story-grid { margin-top: 78px; }
  .story-grid--reverse .story-visual, .story-grid--reverse .story-copy { order: initial; }
  .page-hero { padding: 65px 0 56px; }
  .showcase-hero { padding: 58px 0 44px; }
  .showcase-shell { padding: 0; border-radius: 0; }
  .specs-grid, .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { padding: 0; }
  .step:not(:last-child):after { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 270px; }
  .pricing-deck { grid-template-columns: repeat(2,1fr); }
  .price-card { min-height: 515px; }
  .case-strip { grid-template-columns: 1fr; }
  .case-strip-copy { padding: 37px; }
  .comparison-intro { grid-template-columns: 1fr; }
  .featured-article { grid-template-columns: 1fr; }
  .featured-article .article-content { padding: 29px; }
  .article-grid { grid-template-columns: repeat(2,1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-main { grid-template-columns: 1.3fr repeat(2,1fr); }
  .footer-brand { grid-column: span 3; }
}
@media (max-width: 540px) {
  .container { width: min(calc(100% - 30px), var(--container)); }
  .brand img { width: 128px; }
  .nav-actions .button-primary { display: none; }
  .display { font-size: clamp(2.15rem, 10vw, 3.1rem); }
  .lead { font-size: .96rem; }
  .showcase-shell { padding: 0; }
  .showcase-copy .display { font-size: clamp(2.1rem,10vw,3rem); }
  .showcase-copy .lead { font-size: .96rem; }
  .showcase-chips { gap: 7px; margin-top: 25px; }
  .showcase-chips span { padding: 7px 9px; font-size: .67rem; }
  .showcase-visual { min-height: 300px; }
  .showcase-window-top { height: 41px; padding: 0 11px; font-size: .59rem; }
  .showcase-window-top b { overflow: hidden; max-width: 130px; white-space: nowrap; text-overflow: ellipsis; }
  .showcase-window-top span { padding: 5px 6px; font-size: .55rem; }
  .showcase-workspace-body { grid-template-columns: 90px 1fr; min-height: 259px; }
  .showcase-workspace-body aside { gap: 8px; padding: 19px 9px; }.showcase-workspace-body aside strong { font-size: .72rem; }.showcase-workspace-body aside b, .showcase-workspace-body aside small { padding: 6px; font-size: .57rem; }
  .showcase-workspace-main { padding: 23px 15px; }.showcase-workspace-main h2 { font-size: 1.05rem; }.showcase-workspace-main > p { font-size: .62rem; }.showcase-stat-row span { padding: 9px; font-size: .56rem; }.showcase-stat-row b { margin-top: 5px; font-size: .92rem; }.showcase-bars { height: 75px; gap: 4px; padding: 8px 8px 0; }
  .showcase-solution-map { min-height: 300px; }.showcase-map-card { width: 138px; padding: 10px; }.showcase-map-card.ecom { top: 75px; left: 13px; }.showcase-map-card.saas { top: 151px; right: 13px; }.showcase-map-card.agency { bottom: 16px; left: 61px; }.showcase-map-node { top: 110px; width: 88px; height: 88px; font-size: .66rem; }
  .showcase-compare-board { padding: 12px; }.showcase-compare-row { padding: 12px 8px; font-size: .64rem; }.showcase-compare-head { padding: 8px; font-size: .57rem; }
  .button-row .button { width: 100%; }
  .hero-proof { align-items: flex-start; }
  .hero-visual { min-height: 311px; width: 100%; }
  .native-dashboard { inset: 12px 0 18px 0; }
  .native-dashboard__body { grid-template-columns: 70px 1fr; min-height: 280px; }
  .native-sidebar { padding: 11px 6px; }
  .native-logo { margin-bottom: 13px; font-size: 9px; }
  .native-sideitem { padding: 5px 4px; font-size: 6px; }
  .native-main { padding: 12px 9px; }
  .native-main__heading b { font-size: 11px; }
  .native-main__heading span { display: none; }
  .native-stats { gap: 4px; }
  .native-stat { padding: 5px; }
  .native-stat strong { font-size: 10px; }
  .native-graph { height: 92px; }
  .native-graph:before { top: 29px; box-shadow: 0 26px 0 #eceff3, 0 52px 0 #eceff3; }
  .native-graph svg { height: 65px; }
  .home-story-heading .display { font-size: clamp(2rem, 9vw, 3rem); }
  .home-story-copy h2 { font-size: clamp(1.75rem, 8.5vw, 2.35rem); }
  .home-story-visual { min-height: 320px; }
  .home-route-providers { top: 48px; left: 13px; gap: 7px; }
  .home-route-providers span { width: 100px; padding: 8px 7px; font-size: 8px; }
  .home-route-providers span::before { width: 6px; height: 6px; margin-right: 5px; }
  .home-route-line { top: 95px; left: 110px; width: 69px; height: 74px; }
  .home-route-canvas { top: 34px; right: 10px; width: 205px; padding: 12px; }
  .home-route-inbox { right: 8px; bottom: 18px; }
  .home-profile-sheet { top: 29px; left: 15px; width: calc(100% - 48px); padding: 14px; }
  .home-profile-enriched { top: 209px; right: 8px; width: 162px; }
  .home-flow-board { inset: 23px 10px; }
  .home-flow-map::before { left: 34px; width: 70%; }
  .home-flow-node { min-width: 83px; padding: 8px; font-size: 8px; }
  .home-flow-node.start { left: 12px; }.home-flow-node.wait { right: 13px; }.home-flow-node.email { left: 76px; }.home-flow-node.goal { right: 5px; }
  .home-ai-editor { top: 34px; left: 15px; width: 245px; }
  .home-ai-score { right: 10px; bottom: 22px; }
  .home-dns-panel { top: 25px; left: 12px; width: calc(100% - 40px); }
  .home-inbox-metric { right: 8px; bottom: 15px; }
  .wireframe-flow, .wireframe-audience { min-height: 270px; }
  .wireflow-node { width: 108px; padding: 8px; }
  .wireflow-node.n1 { top: 33px; left: 16px; }.wireflow-node.n2 { top: 151px; left: 93px; }.wireflow-node.n3 { top: 49px; right: 17px; }
  .wireflow-line.l1 { top: 85px; left: 104px; width: 85px; }.wireflow-line.l2 { top: 152px; left: 183px; width: 75px; }
  .floating-card--metric { top: -8px; right: -10px; min-width: 132px; padding: 10px; }
  .floating-card--status { bottom: -9px; left: -4px; padding: 9px; }
  .annotation--top { right: -4px; }
  .annotation--bottom { left: -4px; }
  .sub-grid, .solution-card-grid, .pricing-deck, .article-grid { grid-template-columns: 1fr; }
  .surface-card { padding: 22px; }
  .feature-card { grid-template-columns: 1.05fr .95fr; min-height: 250px; }
  .feature-card-copy { padding: 22px 17px; }
  .feature-card h3 { font-size: .93rem; }
  .feature-card p { font-size: .77rem; }
  .feature-art .art-window { width: 108%; }
  .solution-card { min-height: 230px; }
  .case-strip-copy { padding: 28px; }
  .cost-callout { grid-template-columns: 1fr; gap: 8px; padding: 23px; }
  .article-layout { display: block; }
  .article-aside { display: none; }
  .article-hero { padding: 52px 0 45px; }
  .article-body { font-size: .94rem; }
  .cta-panel { padding: 34px 26px; }
  .footer-main { grid-template-columns: repeat(2,1fr); gap: 26px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   Interactive Cost Calculator & Competitor Comparison
   ========================================================================== */
.calc-section {
  padding: 85px 0 95px;
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.calc-wrapper {
  max-width: 1040px;
  margin: 0 auto;
}
.calc-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.calc-controls {
  margin-bottom: 36px;
}
.calc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.calc-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.calc-value-display {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--amber-700);
  font-family: var(--font-mono);
}
.calc-slider-wrap {
  position: relative;
  margin: 20px 0 15px;
}
.calc-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
  transition: background .2s;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.5);
}
.calc-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
  cursor: grab;
}
.calc-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.calc-chip {
  padding: 6px 14px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.calc-chip:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.calc-chip.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.calc-freq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e2e8f0;
  flex-wrap: wrap;
}
.calc-freq-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
}
.calc-freq-options {
  display: flex;
  gap: 8px;
}
.calc-freq-btn {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.calc-freq-btn.active {
  background: var(--amber-100);
  border-color: var(--amber);
  color: var(--amber-900);
}

/* Savings Banner */
.calc-savings-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 24px 30px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.calc-savings-copy h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: #ffffff;
}
.calc-savings-copy p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}
.calc-savings-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
}
.calc-savings-badge {
  background: #10b981;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.calc-savings-amount {
  font-size: 1.85rem;
  font-weight: 800;
  color: #34d399;
  font-family: var(--font-mono);
}

/* Visual Comparison Bars Grid */
.calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.calc-card {
  padding: 22px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  position: relative;
}
.calc-card--featured {
  background: #ffffff;
  border: 2px solid var(--amber);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.12);
  transform: scale(1.02);
  z-index: 2;
}
.calc-card-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: #64748b;
}
.calc-card--featured .calc-card-tag {
  color: var(--amber-700);
}
.calc-card h4 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: var(--ink);
}
.calc-card-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.calc-card--featured .calc-card-price {
  color: #047857;
}
.calc-card-subtext {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 14px;
  min-height: 34px;
}
.calc-card-bar-wrap {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: auto;
}
.calc-card-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.calc-card--featured .calc-card-bar {
  background: #10b981;
}
.calc-card--mailchimp .calc-card-bar {
  background: #f59e0b;
}
.calc-card--klaviyo .calc-card-bar {
  background: #ef4444;
}
.calc-card--active .calc-card-bar {
  background: #3b82f6;
}
.calc-card--brevo .calc-card-bar {
  background: #06b6d4;
}

.calc-competitor-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.calc-mini-item {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.calc-mini-name {
  font-size: 0.82rem;
  font-weight: 750;
  color: #334155;
  margin-bottom: 4px;
}
.calc-mini-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-mono);
}
.calc-mini-diff {
  font-size: 0.72rem;
  color: #dc2626;
  font-weight: 600;
}

.calc-breakdown-note {
  margin-top: 24px;
  padding: 14px 18px;
  background: #f1f5f9;
  border-radius: 10px;
  font-size: 0.82rem;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .calc-card--featured {
    transform: none;
  }
  .calc-competitor-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .calc-box {
    padding: 24px 16px;
  }
  .calc-savings-banner {
    padding: 18px;
  }
  .calc-competitor-strip {
    grid-template-columns: 1fr;
  }
}

/* Compare hub — compact decision-first layout */
.compare-index { background:#fff; }
.compare-index__hero { position:relative; overflow:hidden; padding:62px 0 58px; background:linear-gradient(120deg,#fff9ed 0%,#fffdf8 54%,#f6f8fc 100%); }
.compare-index__hero::before { position:absolute; right:-170px; bottom:-310px; width:620px; height:620px; border:1px solid rgba(217,119,6,.11); border-radius:50%; box-shadow:0 0 0 48px rgba(217,119,6,.025),0 0 0 96px rgba(217,119,6,.014); content:""; }
.compare-index__hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(480px,1fr); gap:clamp(42px,6vw,84px); align-items:center; }
.compare-index__copy .page-badge svg { width:15px; stroke-width:1.8; }
.compare-index__copy .display { max-width:660px; margin:18px 0 17px; color:var(--brand-ink); font-size:clamp(2.85rem,4.7vw,4.65rem); line-height:.99; letter-spacing:-.065em; }
.compare-index__copy .display em { color:var(--amber); font-style:normal; }
.compare-index__copy .lead { max-width:610px; margin:0; color:#66758a; font-size:.91rem; line-height:1.66; }
.compare-index__copy .button-row { margin-top:25px; }
.compare-index__signals { display:flex; flex-wrap:wrap; gap:8px 17px; margin-top:20px; }
.compare-index__signals span { display:inline-flex; align-items:center; gap:7px; color:#755c47; font-size:.7rem; font-weight:720; }
.compare-index__signals span::before { width:5px; height:5px; border-radius:50%; background:var(--amber); content:""; }
.compare-index__board { position:relative; overflow:hidden; border:1px solid #e6d9c8; border-radius:17px; background:#fff; box-shadow:0 24px 52px rgba(74,50,30,.11); }
.compare-index__board-top { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 17px; border-bottom:1px solid #eee4d9; color:#765d49; background:#fffdfa; font-size:.68rem; }
.compare-index__board-top > span { display:flex; align-items:center; gap:5px; }
.compare-index__board-top i { width:7px; height:7px; border-radius:50%; background:#e9c895; }
.compare-index__board-top b { margin-left:5px; color:#4c3829; }
.compare-index__board-top em { color:var(--amber-700); font-family:var(--font-mono); font-size:.59rem; font-style:normal; font-weight:800; }
.compare-index__board-head,.compare-index__board-row { display:grid; grid-template-columns:1.12fr 1fr 1fr; align-items:stretch; }
.compare-index__board-head { min-height:45px; border-bottom:1px solid #e9edf2; background:#f8fafc; }
.compare-index__board-head > * { display:flex; align-items:center; padding:9px 13px; color:#8793a3; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.035em; }
.compare-index__board-head span { border-left:1px solid #e9edf2; }
.compare-index__board-head span:first-of-type { color:var(--amber-700); background:#fff7e6; }
.compare-index__board-row { min-height:56px; border-bottom:1px solid #e9edf2; }
.compare-index__board-row > * { display:flex; align-items:center; padding:11px 13px; }
.compare-index__board-row b { color:#324156; font-size:.69rem; }
.compare-index__board-row span { border-left:1px solid #e9edf2; color:#788598; background:#fafbfd; font-size:.63rem; line-height:1.35; }
.compare-index__board-row span.is-brand { color:#6f481b; background:#fffdf7; font-weight:730; }
.compare-index__board-note { margin:0; padding:11px 14px; color:#75604d; background:#fff8ea; font-size:.63rem; line-height:1.45; }
.compare-index__board-note strong { color:var(--amber-800); }

.compare-index__criteria { padding:52px 0 58px; background:#fff; }
.compare-index__section-head { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:27px; }
.compare-index__section-head .eyebrow { margin-bottom:7px; }
.compare-index__section-head .display { max-width:720px; margin:0; color:var(--ink); font-size:clamp(2rem,3.25vw,3.05rem); line-height:1.05; }
.compare-index__section-head > p { max-width:360px; margin:0 0 3px; color:#708096; font-size:.82rem; line-height:1.58; }
.compare-index__criteria-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.compare-index__criterion { position:relative; min-height:194px; padding:21px 19px 18px; border:1px solid #e3e8ef; border-radius:14px; background:#fff; box-shadow:0 7px 18px rgba(30,44,66,.035); }
.compare-index__criterion > span { position:absolute; top:18px; right:18px; color:#b49375; font-family:var(--font-mono); font-size:.57rem; font-weight:800; }
.compare-index__criterion > svg { width:35px; height:35px; margin-bottom:24px; padding:8px; border:1px solid #f0d5a8; border-radius:9px; color:#a75a13; background:#fff7e7; stroke-width:1.8; }
.compare-index__criterion h3 { margin:0 0 7px; color:#2f3c50; font-size:.88rem; line-height:1.32; }
.compare-index__criterion p { margin:0; color:#718095; font-size:.7rem; line-height:1.5; }

.compare-index__options { padding:58px 0 62px; background:#f8f9fb; }
.compare-index__section-head--center { display:grid; grid-template-columns:1fr; justify-items:stretch; align-items:center; width:100%; max-width:860px; margin:0 auto 30px; text-align:center; }
.compare-index__section-head--center > div { width:100%; text-align:center; }
.compare-index__section-head--center .eyebrow { justify-content:center; }
.compare-index__section-head--center .display { width:100%; max-width:none; text-align:center; }
.compare-index__section-head--center > p { max-width:650px; margin:10px auto 0; text-align:center; }
.compare-index__option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; align-items:stretch; }
.compare-index__option { position:relative; overflow:hidden; border:1px solid #dfe5ec; border-top:3px solid #edc47d; border-radius:15px; background:#fff; box-shadow:0 9px 22px rgba(31,45,67,.04); transition:.22s ease; }
.compare-index__option:hover { border-color:#e9c17d; box-shadow:0 17px 34px rgba(52,40,27,.08); transform:translateY(-3px); }
.compare-index__option--featured { border-color:#dfa94a; box-shadow:0 13px 30px rgba(107,74,29,.075); }
.compare-index__option-visual { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); align-items:center; gap:10px; min-height:184px; padding:43px 16px 20px; border-bottom:1px solid #eadfce; background:linear-gradient(135deg,#fff8e9,#f7f9fc); text-align:center; }
.compare-index__option-label { position:absolute; top:13px; left:16px; color:#9b642c; font-family:var(--font-mono); font-size:.49rem; font-weight:850; letter-spacing:.055em; }
.compare-index__brand { display:flex; min-width:0; height:118px; min-height:118px; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px 11px; border:1px solid #dbe2ea; border-radius:11px; background:#fff; box-shadow:0 7px 17px rgba(46,58,75,.055); }
.compare-index__brand--emailbase { border-color:#edc57f; background:#fff9ed; box-shadow:0 8px 20px rgba(170,96,20,.09); }
.compare-index__brand img { display:block; width:min(122px,100%); height:auto; }
.compare-index__brand--emailbase img { width:min(112px,100%); height:32px; object-fit:contain; }
.compare-index__brand small { display:block; margin-top:9px; color:#8995a5; font-size:.48rem; font-weight:750; }
.compare-index__brand--emailbase small { color:#a66222; }
.compare-index__brand--competitor { overflow:hidden; }
.compare-index__competitor-logo { display:block; width:100%; max-width:118px; object-fit:contain; }
.compare-index__competitor-logo--sendy { max-width:116px; height:33px; }
.compare-index__competitor-logo--mailchimp { max-width:118px; height:50px; transform:none; }
.compare-index__competitor-logo--mailcoach { max-width:118px; height:36px; }
.compare-index__versus { display:grid; width:34px; height:34px; place-items:center; border:1px solid #edc681; border-radius:50%; color:#99551a; background:#fff; box-shadow:0 5px 12px rgba(99,68,33,.08); font-family:var(--font-mono); font-size:.55rem; font-style:normal; font-weight:900; }
.compare-index__wordmark { display:block; max-width:100%; overflow:hidden; color:#354459; font-size:1.15rem; line-height:1; letter-spacing:-.04em; white-space:nowrap; text-overflow:ellipsis; }
.compare-index__wordmark--sendy { color:#39485d; font-size:1.25rem; font-weight:800; text-transform:lowercase; }
.compare-index__wordmark--mailchimp { color:#241c15; font-size:1.03rem; font-weight:850; }
.compare-index__wordmark--mailcoach { color:#525f90; font-size:1rem; font-weight:800; }
.compare-index__option-visual--sendy { background:linear-gradient(135deg,#fff8eb,#f5f8fb); }
.compare-index__option-visual--mailchimp { background:linear-gradient(135deg,#fff2cc,#fff9eb); }
.compare-index__option-visual--mailcoach { background:linear-gradient(135deg,#fff8e9,#f4f2f8); }
.compare-index__option-body { display:flex; min-height:246px; flex-direction:column; padding:20px; }
.compare-index__tag { color:var(--amber-700); font-family:var(--font-mono); font-size:.53rem; font-weight:800; letter-spacing:.04em; }
.compare-index__option h3 { margin:8px 0 6px; color:#27364b; font-size:1.06rem; }
.compare-index__option-body > p { margin:0; color:#6b7a8e; font-size:.73rem; line-height:1.58; }
.compare-index__fit { margin-top:15px; padding:11px 12px; border-left:2px solid var(--amber); background:#fffbf4; }
.compare-index__fit span,.compare-index__fit b { display:block; }
.compare-index__fit span { margin-bottom:3px; color:#a5682f; font-size:.52rem; font-weight:800; text-transform:uppercase; }
.compare-index__fit b { color:#5f5147; font-size:.65rem; line-height:1.45; }
.compare-index__option .text-link { margin-top:auto; padding-top:15px; color:var(--amber-700); font-size:.7rem; }

.compare-index__decision { padding:56px 0; background:#fff; }
.compare-index__decision-shell { display:grid; grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr); gap:58px; align-items:center; padding:37px 40px; border:1px solid #ecd7b6; border-radius:17px; background:linear-gradient(120deg,#fff9ed,#fff 66%); box-shadow:0 13px 30px rgba(71,48,27,.055); }
.compare-index__decision-copy .display { max-width:420px; margin:4px 0 10px; color:var(--brand-ink); font-size:clamp(2rem,3vw,2.9rem); line-height:1.05; }
.compare-index__decision-copy > p { max-width:390px; margin:0 0 17px; color:#6c788a; font-size:.76rem; line-height:1.56; }
.compare-index__decision-copy .text-link { color:var(--amber-700); font-size:.7rem; }
.compare-index__decision-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #e6eaf0; border-left:1px solid #e6eaf0; }
.compare-index__decision-list > div { display:grid; grid-template-columns:32px 1fr; gap:9px; min-height:94px; padding:15px; border-right:1px solid #e6eaf0; border-bottom:1px solid #e6eaf0; background:rgba(255,255,255,.72); }
.compare-index__decision-list > div > span { padding-top:2px; color:#ac7040; font-family:var(--font-mono); font-size:.58rem; font-weight:800; }
.compare-index__decision-list p { margin:0; }
.compare-index__decision-list b,.compare-index__decision-list small { display:block; }
.compare-index__decision-list b { color:#36455a; font-size:.7rem; line-height:1.4; }
.compare-index__decision-list small { margin-top:5px; color:var(--amber-700); font-size:.59rem; font-weight:750; }
.compare-index > .section--tight { padding:50px 0 58px; }

@media (max-width:1020px) {
  .compare-index__hero-grid { grid-template-columns:1fr; gap:34px; }
  .compare-index__copy .display,.compare-index__copy .lead { max-width:720px; }
  .compare-index__board { max-width:760px; }
  .compare-index__criteria-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compare-index__option-grid { grid-template-columns:1fr; }
  .compare-index__option { display:grid; grid-template-columns:minmax(250px,.78fr) 1.22fr; }
  .compare-index__option-visual { min-height:100%; border-right:1px solid #e5eaf0; border-bottom:0; }
  .compare-index__option-body { min-height:245px; }
  .compare-index__decision-shell { gap:34px; padding:32px; }
}

@media (max-width:700px) {
  .compare-index__hero { padding:43px 0 42px; }
  .compare-index__copy .display { margin-top:15px; font-size:clamp(2.35rem,11vw,3.3rem); }
  .compare-index__copy .button-row { display:grid; grid-template-columns:1fr; }
  .compare-index__copy .button { justify-content:center; }
  .compare-index__board { overflow-x:auto; }
  .compare-index__board-top,.compare-index__board-head,.compare-index__board-row,.compare-index__board-note { min-width:570px; }
  .compare-index__criteria,.compare-index__options,.compare-index__decision { padding:43px 0; }
  .compare-index__section-head { display:block; margin-bottom:23px; }
  .compare-index__section-head > p { margin-top:10px; }
  .compare-index__criteria-grid { grid-template-columns:1fr; }
  .compare-index__criterion { min-height:0; }
  .compare-index__option { display:block; }
  .compare-index__option-visual { min-height:158px; border-right:0; border-bottom:1px solid #e5eaf0; }
  .compare-index__option-body { min-height:0; }
  .compare-index__decision-shell { grid-template-columns:1fr; padding:25px 20px; }
  .compare-index__decision-list { grid-template-columns:1fr; }
  .compare-index > .section--tight { padding:35px 0 44px; }
}

/* Sendy comparison — research-backed operating model board */
.sendy-ops { padding:66px 0 70px; background:linear-gradient(180deg,#f8fafc 0%,#fff 100%); }
.sendy-ops__heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.62fr); gap:64px; align-items:end; margin-bottom:30px; }
.sendy-ops__heading .eyebrow { margin-bottom:9px; }
.sendy-ops__heading .display { max-width:740px; margin:0; color:var(--ink); font-size:clamp(2.25rem,3.6vw,3.55rem); line-height:1.03; }
.sendy-ops__heading .display em { color:var(--amber); font-style:normal; }
.sendy-ops__intro > p { margin:0; color:#66768b; font-size:.84rem; line-height:1.65; }
.sendy-ops__intro > div { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.sendy-ops__intro > div span { padding:6px 9px; border:1px solid #e5d5bf; border-radius:999px; color:#805729; background:#fffaf1; font-family:var(--font-mono); font-size:.53rem; font-weight:800; }
.sendy-ops__board { overflow-x:auto; border:1px solid #dfe5ec; border-radius:17px; background:#fff; box-shadow:0 18px 42px rgba(35,49,69,.07); }
.sendy-ops__head,.sendy-ops__row { display:grid; min-width:920px; grid-template-columns:minmax(190px,.68fr) minmax(310px,1fr) minmax(310px,1fr); }
.sendy-ops__head { min-height:92px; border-bottom:1px solid #dfe5ec; background:#f8fafc; }
.sendy-ops__head > span { display:flex; align-items:end; padding:17px 20px; color:#7f8c9d; font-family:var(--font-mono); font-size:.57rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.sendy-ops__head > div { display:flex; align-items:center; gap:14px; padding:15px 20px; border-left:1px solid #dfe5ec; }
.sendy-ops__head > div.is-emailbase { position:relative; background:#fff7e7; }
.sendy-ops__head > div.is-emailbase::before { position:absolute; top:0; right:0; left:0; height:3px; background:var(--amber); content:""; }
.sendy-ops__head img { display:block; flex:none; max-width:92px; max-height:32px; object-fit:contain; }
.sendy-ops__head .is-emailbase img { max-width:108px; }
.sendy-ops__head p { margin:0; }
.sendy-ops__head small,.sendy-ops__head b { display:block; }
.sendy-ops__head small { margin-bottom:4px; color:#8a6c51; font-family:var(--font-mono); font-size:.5rem; font-weight:850; }
.sendy-ops__head b { color:#3b495c; font-size:.72rem; line-height:1.35; }
.sendy-ops__row { border-bottom:1px solid #e7ebf0; }
.sendy-ops__row:last-child { border-bottom:0; }
.sendy-ops__criterion { padding:18px 19px; background:#fff; }
.sendy-ops__criterion > span { display:inline-block; margin-right:7px; color:#ad7b4b; font-family:var(--font-mono); font-size:.58rem; font-weight:850; }
.sendy-ops__criterion > small { color:#a8784d; font-family:var(--font-mono); font-size:.51rem; font-weight:850; letter-spacing:.045em; }
.sendy-ops__criterion h3 { margin:8px 0 0; color:#2f3e52; font-size:.81rem; line-height:1.38; }
.sendy-ops__cell { padding:17px 19px 18px; border-left:1px solid #e7ebf0; background:#fbfcfe; }
.sendy-ops__cell.is-emailbase { background:#fffdfa; }
.sendy-ops__cell > i { display:inline-flex; margin-bottom:8px; padding:4px 7px; border-radius:999px; color:#627186; background:#edf1f5; font-size:.49rem; font-style:normal; font-weight:850; text-transform:uppercase; }
.sendy-ops__cell.is-emailbase > i { color:#945313; background:#ffebbd; }
.sendy-ops__cell strong { display:block; margin-bottom:5px; color:#36465b; font-size:.72rem; line-height:1.42; }
.sendy-ops__cell.is-emailbase strong { color:#553721; }
.sendy-ops__cell p { margin:0; color:#708096; font-size:.66rem; line-height:1.56; }
.sendy-ops__cell.is-emailbase p { color:#706256; }
.sendy-ops__verdict { display:grid; grid-template-columns:1fr 64px 1fr; align-items:stretch; margin-top:20px; }
.sendy-ops__verdict article { padding:22px 23px; border:1px solid #dfe5ec; border-radius:14px; background:#fff; }
.sendy-ops__verdict article.is-emailbase { border-color:#ebc57f; background:#fff9ed; }
.sendy-ops__verdict article > span { color:#77869a; font-family:var(--font-mono); font-size:.53rem; font-weight:850; letter-spacing:.045em; }
.sendy-ops__verdict article.is-emailbase > span { color:var(--amber-700); }
.sendy-ops__verdict h3 { margin:9px 0 6px; color:#2f3e52; font-size:.91rem; line-height:1.36; }
.sendy-ops__verdict article.is-emailbase h3 { color:#54321e; }
.sendy-ops__verdict p { margin:0; color:#6e7d90; font-size:.7rem; line-height:1.54; }
.sendy-ops__verdict > div { display:grid; place-items:center; }
.sendy-ops__verdict > div span { display:grid; width:43px; height:43px; place-items:center; border:1px solid #e6bd76; border-radius:50%; color:#99581d; background:#fff; font-family:var(--font-mono); font-size:.51rem; font-weight:900; box-shadow:0 6px 13px rgba(78,54,31,.07); }
.sendy-ops__source { margin:14px 3px 0; color:#8a96a6; font-size:.6rem; line-height:1.5; }
.sendy-ops__source a { color:#9b5b20; font-weight:700; }

@media (max-width:900px) {
  .sendy-ops__heading { grid-template-columns:1fr; gap:18px; }
  .sendy-ops__heading .display { max-width:720px; }
  .sendy-ops__intro > p { max-width:680px; }
  .sendy-ops__verdict { grid-template-columns:1fr; gap:10px; }
  .sendy-ops__verdict > div { height:26px; }
  .sendy-ops__verdict > div span { width:37px; height:37px; }
}

@media (max-width:700px) {
  .sendy-ops { padding:48px 0 52px; }
  .sendy-ops__heading { margin-bottom:24px; }
  .sendy-ops__heading .display { font-size:clamp(2rem,10vw,2.75rem); }
  .sendy-ops__head,.sendy-ops__row { min-width:820px; grid-template-columns:180px 1fr 1fr; }
  .sendy-ops__criterion,.sendy-ops__cell { padding:15px; }
  .sendy-ops__verdict article { padding:19px; }
}

/* Global footer — international product finish */
.site-footer--global { position:relative; overflow:hidden; border-top:0; color:#dce3ed; background:#111a2a; }
.site-footer--global::before { position:absolute; top:-340px; left:-250px; width:620px; height:620px; border:1px solid rgba(245,168,58,.09); border-radius:50%; box-shadow:0 0 0 48px rgba(217,119,6,.02),0 0 0 96px rgba(217,119,6,.012); content:""; pointer-events:none; }
.site-footer--global .footer-main { position:relative; display:grid; grid-template-columns:minmax(245px,1.35fr) repeat(4,minmax(120px,.72fr)); gap:clamp(28px,3.5vw,55px); padding:47px 0 43px; }
.site-footer--global .footer-brand { grid-column:auto; }
.site-footer--global .footer-brand .brand { display:inline-flex; width:158px; }
.site-footer--global .footer-brand .brand img { display:block; width:100%; filter:brightness(0) invert(1); opacity:.97; }
.site-footer--global .footer-brand > p { max-width:270px; margin:20px 0 21px; color:#9facbd; font-size:.72rem; line-height:1.65; }
.footer-contact { display:inline-flex; align-items:center; gap:10px; color:#dce4ef; text-decoration:none; }
.footer-contact > svg { width:31px; height:31px; padding:8px; border:1px solid rgba(244,174,74,.35); border-radius:8px; color:#f2b25a; background:rgba(217,119,6,.09); stroke-width:1.7; }
.footer-contact span,.footer-contact small,.footer-contact b { display:block; }
.footer-contact small { margin-bottom:2px; color:#7f8da1; font-size:.49rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.footer-contact b { color:#d7e0ec; font-size:.65rem; font-weight:700; }
.site-footer--global .footer-col h3 { margin:1px 0 17px; color:#f5f7fa; font-size:.63rem; font-weight:800; text-transform:uppercase; letter-spacing:.095em; }
.site-footer--global .footer-col a { display:block; width:fit-content; margin:10px 0; color:#9facbd; font-size:.68rem; line-height:1.35; text-decoration:none; transition:.18s ease; }
.site-footer--global .footer-col a:hover { color:#f4b35b; transform:translateX(2px); }
.site-footer--global .footer-col .footer-app-link { display:inline-flex; align-items:center; gap:6px; margin-top:15px; color:#efb25d; font-weight:750; }
.footer-app-link svg { width:14px; stroke-width:1.8; }
.site-footer--global .footer-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; padding:19px 0 23px; border-top:1px solid rgba(255,255,255,.1); color:#738197; font-size:.6rem; }
.site-footer--global .footer-bottom > p { margin:0; color:#7e8ba0; text-align:center; }
.site-footer--global .footer-bottom-links { display:flex; justify-content:flex-end; gap:16px; }
.site-footer--global .footer-bottom a { color:#8390a3; text-decoration:none; }
.site-footer--global .footer-bottom a:hover { color:#e9b15e; }

@media (max-width:1100px) {
  .site-footer--global .footer-main { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .site-footer--global .footer-brand { grid-column:1 / -1; display:grid; grid-template-columns:180px minmax(250px,1fr) auto; align-items:center; gap:28px; padding-bottom:27px; border-bottom:1px solid rgba(255,255,255,.08); }
  .site-footer--global .footer-brand > p { max-width:420px; margin:0; }
}

@media (max-width:760px) {
  .site-footer--global .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 25px; padding:38px 0 35px; }
  .site-footer--global .footer-brand { display:block; }
  .site-footer--global .footer-brand > p { margin:18px 0; }
  .site-footer--global .footer-bottom { grid-template-columns:1fr; gap:9px; }
  .site-footer--global .footer-bottom > p { text-align:left; }
  .site-footer--global .footer-bottom-links { justify-content:flex-start; }
}

@media (max-width:460px) {
  .site-footer--global .footer-main { grid-template-columns:1fr; }
  .site-footer--global .footer-brand { grid-column:auto; }
}

/* E-commerce solution — brand guideline redesign */
.solution-detail--ecom { background:#fff; }
.ecom-hero { position:relative; overflow:hidden; border-top:1px solid #f1dfc5; border-bottom:1px solid #f1dfc5; background:linear-gradient(112deg,#fffaf0 0%,#fffdf8 54%,#fff2d7 100%); }
.ecom-hero::before { position:absolute; right:-180px; bottom:-270px; width:520px; height:520px; border:1px solid rgba(217,119,6,.15); border-radius:50%; box-shadow:0 0 0 55px rgba(217,119,6,.035),0 0 0 108px rgba(217,119,6,.018); content:""; }
.ecom-hero__shell { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr); gap:clamp(42px,5vw,70px); align-items:center; min-height:580px; padding:72px 0 68px; }
.ecom-hero__copy,.ecom-hero__visual { position:relative; z-index:1; }
.ecom-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:17px; padding:8px 12px; border-radius:999px; color:var(--amber-700); background:#fff0cd; font-size:.71rem; font-weight:800; letter-spacing:.065em; }
.ecom-kicker svg { width:17px; }
.ecom-hero .display { max-width:560px; margin:0 0 18px; color:#3d2314; font-size:clamp(2.6rem,4.1vw,4.1rem); }
.ecom-hero .display em { color:var(--amber); }
.ecom-hero .lead { max-width:560px; margin:0; color:#6f5846; font-size:1rem; }
.ecom-hero__proof { display:flex; flex-wrap:wrap; gap:11px 17px; margin:27px 0 30px; color:#6a4c35; font-size:.75rem; font-weight:750; }
.ecom-hero__proof span { display:flex; align-items:center; gap:7px; }
.ecom-hero__proof i { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.ecom-hero__visual { min-height:430px; padding:22px 12px 20px 25px; }
.ecom-window { overflow:hidden; border:1px solid rgba(82,45,12,.2); border-radius:17px; background:#fff; box-shadow:0 26px 56px rgba(91,50,11,.16); transform:rotate(1deg); }
.ecom-window__top { display:flex; height:43px; align-items:center; gap:9px; padding:0 14px; border-bottom:1px solid #f0e5d7; color:#7b6653; background:#fffcf7; font-size:.59rem; }
.ecom-window__top > span { display:flex; gap:4px; }
.ecom-window__top i { width:7px; height:7px; border-radius:50%; background:#e5c59b; }
.ecom-window__top em { margin-left:auto; padding:4px 7px; border-radius:999px; color:#8c4d10; background:#fff0ca; font-style:normal; font-weight:800; }
.ecom-window__body { height:285px; overflow:hidden; background:#f5f7fa; }
.ecom-window__body img { width:100%; height:100%; object-fit:cover; object-position:top left; }
.ecom-window__footer { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #ece4d9; }
.ecom-window__footer span { padding:13px; border-right:1px solid #ece4d9; }
.ecom-window__footer span:last-child { border-right:0; }
.ecom-window__footer b,.ecom-window__footer small { display:block; }
.ecom-window__footer b { color:#92400e; font:800 .84rem var(--font-mono); }
.ecom-window__footer small { margin-top:3px; color:#8390a2; font-size:.55rem; }
.ecom-float { position:absolute; z-index:2; display:grid; grid-template-columns:34px 1fr; min-width:190px; gap:2px 9px; padding:11px 13px; border:1px solid #ead7bd; border-radius:11px; background:rgba(255,255,255,.97); box-shadow:0 14px 29px rgba(51,37,24,.13); }
.ecom-float svg { grid-row:1/3; width:32px; padding:6px; border-radius:9px; color:#9a5517; background:#fff1d2; }
.ecom-float b { color:#3d291e; font-size:.68rem; }
.ecom-float small { color:#7f8b9b; font-size:.55rem; }
.ecom-float--cart { top:0; right:-13px; }
.ecom-float--order { bottom:1px; left:0; }
.ecom-float--order svg { color:#176b3a; background:#eaf8ee; }

.ecom-pain { padding:70px 0; background:#fff; }
.ecom-pain__shell { display:grid; grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr); gap:clamp(45px,7vw,90px); padding:clamp(31px,4vw,50px); border:1px solid #ead8bf; border-radius:20px; background:linear-gradient(115deg,#fffaf1,#fffdf9 62%,#fff); }
.ecom-pain__intro .display { max-width:500px; margin:10px 0 14px; color:#3d2314; }
.ecom-pain__intro > p { max-width:480px; margin:0; color:#6b788b; font-size:.88rem; line-height:1.65; }
.ecom-pain__takeaway { margin-top:28px; padding:15px 0 0 15px; border-top:1px solid #ead8bd; border-left:3px solid var(--amber); }
.ecom-pain__takeaway small,.ecom-pain__takeaway b { display:block; }
.ecom-pain__takeaway small { margin-bottom:5px; color:var(--amber-700); font:800 .54rem var(--font-mono); letter-spacing:.08em; }
.ecom-pain__takeaway b { color:#5d4431; font-size:.78rem; line-height:1.55; }
.ecom-pain__list { margin:0; padding:0; border-top:1px solid #eadbc8; list-style:none; }
.ecom-pain__list li { display:grid; grid-template-columns:48px minmax(0,1fr); gap:15px; min-height:128px; align-items:center; padding:18px 0; border-bottom:1px solid #eadbc8; }
.ecom-pain__list > li > span { color:var(--amber-700); font:800 1.05rem var(--font-mono); }
.ecom-pain__list small { display:block; margin-bottom:4px; color:#9c8069; font:800 .5rem var(--font-mono); }
.ecom-pain__list h3 { margin:0 0 5px; color:#3d291e; font-size:1rem; }
.ecom-pain__list p { margin:0; color:#6b788c; font-size:.76rem; line-height:1.55; }

.ecom-lifecycle { padding:72px 0 78px; border-top:1px solid #eee5d9; border-bottom:1px solid #eee5d9; background:#f8fafc; }
.ecom-lifecycle .section-heading,.ecom-playbooks .section-heading,.ecom-rollout .section-heading { max-width:820px; margin:0 auto 38px; }
.ecom-lifecycle__map { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #e0e5ec; border-radius:17px; background:#fff; box-shadow:0 14px 30px rgba(35,48,72,.055); }
.ecom-lifecycle__map article { position:relative; min-height:265px; padding:25px; border-right:1px solid #e7eaf0; }
.ecom-lifecycle__map article:last-child { border-right:0; }
.ecom-lifecycle__map article::after { position:absolute; z-index:2; top:49px; right:-11px; display:grid; width:21px; height:21px; place-items:center; border:1px solid #ecd09d; border-radius:50%; color:#a35c12; background:#fff7e5; content:"→"; font-size:.65rem; }
.ecom-lifecycle__map article:last-child::after { display:none; }
.ecom-lifecycle__map article > span { position:absolute; top:22px; right:20px; color:#b49473; font:800 .58rem var(--font-mono); }
.ecom-lifecycle__map i { display:grid; width:43px; height:43px; margin-bottom:24px; place-items:center; border:1px solid #efd3a5; border-radius:11px; color:#9a5517; background:#fff5df; }
.ecom-lifecycle__map svg { width:21px; }
.ecom-lifecycle__map small { color:#9a5517; font:800 .51rem var(--font-mono); }
.ecom-lifecycle__map h3 { margin:9px 0 8px; color:#2d3a4d; font-size:.96rem; }
.ecom-lifecycle__map p { margin:0; color:#6f7e92; font-size:.74rem; line-height:1.55; }

.ecom-playbooks { padding:76px 0; background:#fff; }
.ecom-playbooks__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.ecom-playbooks__grid article { padding:25px; border:1px solid #e2e7ee; border-radius:15px; background:#fff; box-shadow:0 8px 20px rgba(35,48,72,.035); transition:.22s ease; }
.ecom-playbooks__grid article:hover { border-color:#e7bf76; box-shadow:0 16px 32px rgba(217,119,6,.085); transform:translateY(-3px); }
.ecom-playbooks__grid article > div { display:flex; align-items:center; justify-content:space-between; }
.ecom-playbooks__grid article > div span { color:#b16a22; font:800 .77rem var(--font-mono); }
.ecom-playbooks__grid article > div small { padding:5px 8px; border-radius:999px; color:#92500f; background:#fff2d5; font-size:.49rem; font-weight:800; }
.ecom-playbooks__grid h3 { min-height:48px; margin:20px 0 8px; color:#29374b; font-size:1.04rem; }
.ecom-playbooks__grid p { min-height:82px; margin:0; color:#68778b; font-size:.78rem; line-height:1.58; }
.ecom-playbooks__grid ul { display:grid; gap:7px; margin:18px 0 0; padding:14px 0 0; border-top:1px solid #edf0f4; list-style:none; }
.ecom-playbooks__grid li { display:flex; align-items:center; gap:7px; color:#566579; font-size:.7rem; }
.ecom-playbooks__grid li::before { display:grid; width:17px; height:17px; place-items:center; border-radius:50%; color:#94500d; background:#fff1d0; content:"✓"; font-size:.5rem; font-weight:800; }

.ecom-infrastructure { padding:78px 0; border-top:1px solid #eee4d6; border-bottom:1px solid #eee4d6; background:linear-gradient(115deg,#fffaf1,#fffdf9 52%,#f7f9fc); }
.ecom-infrastructure__shell { display:grid; grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr); gap:clamp(46px,6vw,78px); align-items:center; }
.ecom-infrastructure__copy .display { max-width:540px; margin:10px 0 15px; color:#3d291e; }
.ecom-infrastructure__copy > p { margin:0; color:#6a7789; font-size:.88rem; line-height:1.68; }
.ecom-infrastructure__copy ul { display:grid; gap:14px; margin:25px 0 0; padding:0; list-style:none; }
.ecom-infrastructure__copy li { display:flex; gap:10px; color:#5f6e81; font-size:.78rem; line-height:1.55; }
.ecom-infrastructure__copy li svg { flex:none; width:18px; color:var(--amber); }
.ecom-infrastructure__copy li b { color:#3d291e; }
.ecom-report { position:relative; overflow:hidden; border:1px solid #ddcfbd; border-radius:16px; background:#fff; box-shadow:0 24px 52px rgba(80,50,20,.13); }
.ecom-report__top { display:flex; height:43px; align-items:center; gap:9px; padding:0 14px; border-bottom:1px solid #eee5da; color:#806b57; background:#fffcf7; font-size:.59rem; }
.ecom-report__top > span { display:flex; gap:4px; }
.ecom-report__top i { width:7px; height:7px; border-radius:50%; background:#e5c59b; }
.ecom-report__top em { margin-left:auto; font-style:normal; }
.ecom-report img { display:block; width:100%; min-height:310px; object-fit:cover; object-position:top left; }
.ecom-report__note { position:absolute; right:18px; bottom:18px; max-width:230px; padding:12px 14px; border:1px solid #ebd1a7; border-radius:10px; background:rgba(255,252,246,.97); box-shadow:0 12px 24px rgba(65,43,22,.12); }
.ecom-report__note small,.ecom-report__note b { display:block; }
.ecom-report__note small { margin-bottom:4px; color:#a05a15; font:800 .47rem var(--font-mono); }
.ecom-report__note b { color:#3d291e; font-size:.68rem; line-height:1.4; }

.ecom-compare { padding:78px 0; background:#fff; }
.ecom-compare__heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.58fr); gap:65px; align-items:end; margin-bottom:34px; }
.ecom-compare__heading .display { max-width:680px; margin:9px 0 0; }
.ecom-compare__heading > p { margin:0 0 4px; color:#68778a; font-size:.88rem; line-height:1.65; }
.ecom-compare__board { overflow-x:auto; border:1px solid #e1e5eb; border-radius:16px; background:#fff; }
.ecom-compare__head,.ecom-compare__row { display:grid; min-width:780px; grid-template-columns:.72fr 1fr 1fr; }
.ecom-compare__head { background:#fafbfd; }
.ecom-compare__head > span,.ecom-compare__head > div { padding:18px 20px; border-bottom:1px solid #e4e8ee; }
.ecom-compare__head > span { display:flex; align-items:end; color:#8a96a6; font:800 .58rem var(--font-mono); letter-spacing:.06em; }
.ecom-compare__head > div { border-left:1px solid #e4e8ee; }
.ecom-compare__head > div:last-child { border-top:3px solid var(--amber); background:#fff8e9; }
.ecom-compare__head small,.ecom-compare__head b { display:block; }
.ecom-compare__head small { margin-bottom:4px; color:#9a6f42; font:800 .51rem var(--font-mono); }
.ecom-compare__head b { color:#3e4b5d; font-size:.82rem; }
.ecom-compare__row { border-bottom:1px solid #e8ecf1; }
.ecom-compare__row:last-child { border-bottom:0; }
.ecom-compare__row h3,.ecom-compare__row p { margin:0; padding:18px 20px; }
.ecom-compare__row h3 { display:flex; gap:9px; color:#2f3d50; font-size:.8rem; line-height:1.45; }
.ecom-compare__row h3 span { color:#aa7d50; font:800 .58rem var(--font-mono); }
.ecom-compare__row p { display:flex; gap:9px; border-left:1px solid #e8ecf1; color:#67768a; background:#fbfcfe; font-size:.74rem; line-height:1.55; }
.ecom-compare__row p:last-child { color:#584635; background:#fffdfa; }
.ecom-compare__row p i { display:grid; flex:none; width:18px; height:18px; place-items:center; border-radius:50%; color:#b84444; background:#fff0ef; font-style:normal; font-weight:800; }
.ecom-compare__row p:last-child i { color:#8f5012; background:#ffebbd; }

.ecom-rollout { padding:76px 0; border-top:1px solid #ece4da; background:#f8fafc; }
.ecom-rollout__steps { display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; border:1px solid #dee4eb; border-radius:16px; background:#fff; list-style:none; }
.ecom-rollout__steps li { position:relative; min-height:235px; padding:25px; border-right:1px solid #e5e9ef; }
.ecom-rollout__steps li:last-child { border-right:0; }
.ecom-rollout__steps li > span { display:grid; width:38px; height:38px; margin-bottom:26px; place-items:center; border:1px solid #efcf97; border-radius:10px; color:#9a5517; background:#fff5df; font:800 .66rem var(--font-mono); }
.ecom-rollout__steps small { color:#a18365; font:800 .5rem var(--font-mono); }
.ecom-rollout__steps h3 { margin:8px 0; color:#2f3d50; font-size:.92rem; }
.ecom-rollout__steps p { margin:0; color:#6c7b8e; font-size:.73rem; line-height:1.55; }

.ecom-metrics { padding:68px 0; color:#fff; background:linear-gradient(122deg,#2d211b 0%,#47301f 58%,#6a3d18 100%); }
.ecom-metrics__shell { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr); gap:60px; align-items:center; }
.ecom-metrics .eyebrow { color:#f6c978; }
.ecom-metrics h2 { max-width:470px; margin:8px 0 0; color:#fff; font-size:clamp(1.8rem,3vw,2.65rem); line-height:1.1; letter-spacing:-.045em; }
.ecom-metrics__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ecom-metrics__grid article { min-height:135px; padding:19px; border:1px solid rgba(255,221,174,.18); border-radius:11px; background:rgba(255,255,255,.055); }
.ecom-metrics__grid strong { display:block; margin-bottom:10px; color:#f6c978; font:800 .6rem var(--font-mono); }
.ecom-metrics__grid b { display:block; color:#fff; font-size:.83rem; }
.ecom-metrics__grid p { margin:6px 0 0; color:#d8cabc; font-size:.7rem; line-height:1.5; }

@media (max-width:1050px) {
  .ecom-hero__shell,.ecom-infrastructure__shell { grid-template-columns:1fr; gap:38px; }
  .ecom-hero__copy { max-width:720px; }
  .ecom-hero__visual { width:min(100%,720px); }
  .ecom-pain__shell,.ecom-compare__heading,.ecom-metrics__shell { grid-template-columns:1fr; gap:32px; }
  .ecom-lifecycle__map,.ecom-rollout__steps { grid-template-columns:repeat(2,1fr); }
  .ecom-lifecycle__map article:nth-child(2),.ecom-rollout__steps li:nth-child(2) { border-right:0; }
  .ecom-lifecycle__map article:nth-child(-n+2),.ecom-rollout__steps li:nth-child(-n+2) { border-bottom:1px solid #e5e9ef; }
  .ecom-lifecycle__map article:nth-child(2)::after { display:none; }
  .ecom-playbooks__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
  .ecom-hero__shell { min-height:0; padding:48px 0 44px; }
  .ecom-hero .display { font-size:clamp(2.35rem,11vw,3.25rem); }
  .ecom-hero__proof { display:grid; gap:9px; }
  .ecom-hero__visual { min-height:330px; padding:10px 0 36px; }
  .ecom-window__body { height:220px; }
  .ecom-window__footer small { display:none; }
  .ecom-float { min-width:168px; }
  .ecom-float--cart { right:-5px; }
  .ecom-float--order { bottom:0; left:-5px; }
  .ecom-pain { padding:48px 0; }
  .ecom-pain__shell { padding:27px 20px; }
  .ecom-lifecycle,.ecom-playbooks,.ecom-infrastructure,.ecom-compare,.ecom-rollout { padding:55px 0; }
  .ecom-lifecycle__map,.ecom-playbooks__grid,.ecom-rollout__steps,.ecom-metrics__grid { grid-template-columns:1fr; }
  .ecom-lifecycle__map article,.ecom-rollout__steps li { min-height:0; border-right:0; border-bottom:1px solid #e5e9ef; }
  .ecom-lifecycle__map article:last-child,.ecom-rollout__steps li:last-child { border-bottom:0; }
  .ecom-lifecycle__map article::after { display:none; }
  .ecom-playbooks__grid h3,.ecom-playbooks__grid p { min-height:0; }
  .ecom-report img { min-height:240px; }
  .ecom-metrics { padding:52px 0; }
}

/* Compact spacing pass — Solutions hub & E-commerce */
.solutions-hero__shell { min-height:0; padding-top:54px; padding-bottom:52px; }
.solutions-pressure { padding:18px 0; }
.solutions-pressure__shell { grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr); gap:44px; padding:34px 38px; }
.solutions-pressure__list--six { display:block; border-top:1px solid #eadbc8; }
.solutions-pressure__list--six a { min-height:94px; padding:13px 0; border:0; border-bottom:1px solid #eadbc8; border-radius:0; background:transparent; box-shadow:none; }
.solutions-pressure__list--six a:hover { border-color:#eadbc8; background:transparent; box-shadow:none; }
.solutions-playbooks { padding:48px 0 58px; }
.solutions-playbooks .section-heading { margin-bottom:28px; }
.solution-playbook { padding:22px; }
.solution-playbook > h3 { margin-top:17px; }
.solution-playbook__flow { margin:14px 0; }
.solution-playbook .text-link { margin-top:15px; }
.solutions-foundation { padding:56px 0; }
.solutions-foundation__heading { margin-bottom:27px; }
.solutions-foundation__board a { min-height:225px; padding:21px; }
.solutions-foundation__board > a > i { margin-bottom:19px; }
.solutions-launch { padding:54px 0; }
.solutions-launch__steps li { min-height:98px; padding:11px 0; }
.solutions-hub > .section.section--soft,.solutions-hub > .section.section--tight { padding-top:54px; padding-bottom:54px; }

.ecom-hero__shell { min-height:520px; padding-top:56px; padding-bottom:52px; }
.ecom-hero__visual { min-height:390px; }
.ecom-pain { padding:52px 0; }
.ecom-pain__shell { gap:56px; padding:35px 38px; }
.ecom-pain__takeaway { margin-top:21px; }
.ecom-pain__list li { min-height:104px; padding:13px 0; }
.ecom-lifecycle { padding:54px 0 58px; }
.ecom-lifecycle .section-heading,.ecom-playbooks .section-heading,.ecom-rollout .section-heading { margin-bottom:28px; }
.ecom-lifecycle__map article { min-height:218px; padding:21px; }
.ecom-lifecycle__map article > span { top:19px; right:18px; }
.ecom-lifecycle__map i { margin-bottom:18px; }
.ecom-playbooks { padding:54px 0 58px; }
.ecom-playbooks__grid { align-items:start; gap:14px; grid-auto-rows:auto; }
.ecom-playbooks__grid article { min-height:0; height:auto; padding:20px; }
.ecom-playbooks__grid h3 { min-height:0; margin:15px 0 7px; }
.ecom-playbooks__grid p { min-height:0; }
.ecom-playbooks__grid ul { margin-top:13px; padding-top:12px; }
.ecom-infrastructure { padding:58px 0; }
.ecom-infrastructure__shell { gap:50px; }
.ecom-infrastructure__copy ul { margin-top:20px; gap:11px; }
.ecom-compare { padding:58px 0; }
.ecom-compare__heading { margin-bottom:26px; }
.ecom-compare__head > span,.ecom-compare__head > div,.ecom-compare__row h3,.ecom-compare__row p { padding:14px 17px; }
.ecom-rollout { padding:56px 0; }
.ecom-rollout__steps li { min-height:190px; padding:20px; }
.ecom-rollout__steps li > span { margin-bottom:18px; }
.ecom-metrics { padding:52px 0; }
.ecom-metrics__shell { gap:38px; }
.ecom-metrics__grid article { min-height:112px; padding:16px; }
.solution-detail--ecom .faq-section { padding-top:58px; padding-bottom:58px; }
.solution-detail--ecom > .section.section--tight { padding-top:52px; padding-bottom:52px; }
.industry-solution .faq-section { padding-top:58px; padding-bottom:58px; }
.industry-solution > .section.section--tight { padding-top:52px; padding-bottom:52px; }

@media (max-width:1050px) {
  .solutions-pressure__shell { grid-template-columns:1fr; gap:26px; }
  .ecom-hero__shell { min-height:0; }
  .ecom-infrastructure__shell { gap:34px; }
}
@media (max-width:700px) {
  .solutions-hero__shell { padding-top:40px; padding-bottom:40px; }
  .solutions-pressure__shell { padding:25px 20px; }
  .solutions-pressure__list--six a { grid-template-columns:38px minmax(0,1fr) auto; min-height:0; padding:12px 0; }
  .solutions-playbooks,.solutions-foundation,.solutions-launch { padding-top:46px; padding-bottom:46px; }
  .ecom-hero__shell { padding-top:42px; padding-bottom:40px; }
  .ecom-hero__visual { min-height:330px; }
  .ecom-pain { padding:42px 0; }
  .ecom-pain__shell { gap:26px; padding:25px 20px; }
  .ecom-lifecycle,.ecom-playbooks,.ecom-infrastructure,.ecom-compare,.ecom-rollout { padding-top:46px; padding-bottom:46px; }
  .ecom-lifecycle__map article,.ecom-rollout__steps li { min-height:0; padding:20px; }
  .ecom-metrics { padding:44px 0; }
  .solution-detail--ecom .faq-section,.solution-detail--ecom > .section.section--tight,.industry-solution .faq-section,.industry-solution > .section.section--tight { padding-top:46px; padding-bottom:46px; }
}

/* Balance the four-item operational pain block across all industry pages */
.ecom-pain__intro .display { max-width:470px; margin-bottom:11px; font-size:clamp(2rem,3.05vw,3rem); line-height:1.07; }
.ecom-pain__intro > p { max-width:455px; font-size:.8rem; line-height:1.58; }
.ecom-pain__takeaway { margin-top:17px; padding-top:11px; }
.ecom-pain__takeaway b { max-width:450px; font-size:.7rem; line-height:1.48; }
.ecom-pain__list li { min-height:92px; padding:10px 0; }
.ecom-pain__list h3 { font-size:.92rem; }
.ecom-pain__list p { font-size:.71rem; line-height:1.48; }

@media (max-width:700px) {
  .ecom-pain__intro .display { font-size:clamp(1.9rem,9vw,2.55rem); }
  .ecom-pain__list li { min-height:0; }
}

/* Compact and balance Visual Automation pain points */
.automation-pain__intro .display { max-width:410px; margin-bottom:11px; font-size:clamp(1.9rem,2.7vw,2.45rem); line-height:1.08; }
.automation-pain__intro .lead { max-width:405px; font-size:.82rem; line-height:1.58; }
.automation-pain__takeaway { margin-top:16px; padding:11px 14px; }
.automation-pain__takeaway span { font-size:.61rem; }
.automation-pain__takeaway p { margin-top:3px; font-size:.7rem; line-height:1.48; }
.automation-pain__list li { min-height:86px; padding:10px 0; }
.automation-pain__list h3 { font-size:.91rem; }
.automation-pain__list p { font-size:.7rem; line-height:1.48; }
.automation-pain__list strong { width:132px; padding:7px 9px; font-size:.58rem; }

/* E-commerce has a longer pain-point headline than the shared industry pages */
.solution-detail--ecom .ecom-pain__intro .display { max-width:445px; font-size:clamp(1.85rem,2.55vw,2.5rem); }

@media (max-width:700px) {
  .automation-pain__intro .display { max-width:620px; font-size:clamp(1.85rem,8.5vw,2.4rem); }
  .automation-pain__list li { min-height:0; }
  .solution-detail--ecom .ecom-pain__intro .display { font-size:clamp(1.8rem,8.5vw,2.35rem); }
}

/* Visual Automation — feature detail */
.automation-hero { position: relative; overflow: hidden; border-top: 1px solid #f1dfc5; border-bottom: 1px solid #f1dfc5; background: linear-gradient(112deg,#fffaf1 0%,#fffdf8 52%,#fff3dc 100%); }
.automation-hero__shell { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(500px,1.12fr); gap: clamp(42px,5vw,68px); align-items: center; min-height: 540px; padding: 68px 0 64px; }
.automation-hero__shell::before { position: absolute; bottom: -245px; left: -140px; width: 440px; height: 440px; border: 1px solid rgba(217,119,6,.15); border-radius: 50%; box-shadow: 0 0 0 45px rgba(217,119,6,.04),0 0 0 92px rgba(217,119,6,.02); content: ""; }
.automation-hero__copy,.automation-canvas { position: relative; z-index: 1; }
.automation-hero__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 8px 12px; border-radius: 999px; color: var(--amber-700); background: #fff0cd; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.automation-hero__kicker svg { width: 17px; height: 17px; }
.automation-hero .display { max-width: 510px; margin: 0 0 18px; color: #3d291e; font-size: clamp(2.45rem,3.9vw,3.85rem); }
.automation-hero .display em { color: var(--amber); }
.automation-hero .lead { max-width: 500px; margin: 0; color: #70563f; font-size: 1rem; }
.automation-hero__proof { display: flex; flex-wrap: wrap; gap: 13px 18px; margin: 27px 0 30px; color: #6a4c35; font-size: .76rem; font-weight: 750; }
.automation-hero__proof span { display: flex; align-items: center; gap: 7px; }.automation-hero__proof i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.automation-canvas { min-height: 400px; }
.automation-canvas__window { position: absolute; inset: 22px 10px 22px 0; overflow: hidden; border: 1px solid rgba(82,45,12,.19); border-radius: 16px; background: #fff; box-shadow: 0 24px 52px rgba(91,50,11,.15); }
.automation-canvas__top { display: flex; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid #f0e5d7; color: #866a51; background: #fffcf7; font-size: .62rem; }
.automation-canvas__top > span { display: flex; gap: 4px; }.automation-canvas__top i { width: 7px; height: 7px; border-radius: 50%; background: #e7c89b; }.automation-canvas__top b { margin-left: 9px; }.automation-canvas__top em { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: var(--amber-700); background: #fff1cb; font-style: normal; font-weight: 800; }
.automation-canvas__body { display: grid; grid-template-columns: 102px 1fr; min-height: 334px; }
.automation-canvas__body aside { padding: 17px 10px; border-right: 1px solid #f0e5d7; background: #fffefc; }
.automation-canvas__body aside strong { display: block; margin: 0 0 15px 4px; color: #3d291e; font-size: .76rem; }.automation-canvas__body aside strong em { color: var(--amber); font-style: normal; }.automation-canvas__body aside span { display: block; padding: 6px; color: #937a63; font-size: .6rem; font-weight: 700; }.automation-canvas__body aside .is-active { border-radius: 5px; color: var(--amber-700); background: #fff1cb; }
.automation-canvas__flow { position: relative; overflow: hidden; background-color: #fbfcfe; background-image: radial-gradient(#d8dee8 1px,transparent 1px); background-size: 17px 17px; }
.automation-node { position: absolute; z-index: 2; width: 145px; padding: 9px 11px; border: 1px solid #dfe5ed; border-radius: 8px; background: #fff; box-shadow: 0 7px 15px rgba(30,43,60,.08); }
.automation-node small,.automation-node b,.automation-node span { display: block; }.automation-node small { margin-bottom: 3px; color: var(--amber-700); font-family: var(--font-mono); font-size: .47rem; font-weight: 800; letter-spacing: .06em; }.automation-node b { color: #334155; font-size: .63rem; }.automation-node span { margin-top: 2px; color: #8793a4; font-size: .5rem; }
.automation-node--trigger { top: 24px; left: 50%; border-color: #efca83; transform: translateX(-50%); }.automation-node--condition { top: 129px; left: 50%; border-color: #d9cef9; transform: translateX(-50%); }.automation-node--condition small { color: #6d4aff; }.automation-node--email { bottom: 23px; left: 30px; }.automation-node--wait { right: 30px; bottom: 23px; border-color: #efd7aa; }
.automation-connector { position: absolute; z-index: 1; border-color: #bf9d75; border-style: solid; }.automation-connector--one { top: 84px; left: 50%; height: 45px; border-width: 0 0 0 1px; }.automation-connector--left { top: 190px; left: calc(50% - 72px); width: 72px; height: 71px; border-width: 1px 0 0 1px; border-radius: 8px 0 0; }.automation-connector--right { top: 190px; left: 50%; width: 72px; height: 71px; border-width: 1px 1px 0 0; border-radius: 0 8px 0 0; }
.automation-branch { position: absolute; z-index: 2; top: 197px; left: 50%; display: flex; width: 184px; justify-content: space-between; color: #9a7959; font-family: var(--font-mono); font-size: .45rem; font-weight: 800; transform: translateX(-50%); }
.automation-canvas__float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid rgba(84,45,12,.17); border-radius: 10px; background: #fff; box-shadow: 0 12px 26px rgba(84,45,12,.12); }.automation-canvas__float > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: var(--amber-700); background: #fff0c9; font-weight: 800; }.automation-canvas__float b,.automation-canvas__float small { display: block; }.automation-canvas__float b { color: #3d291e; font-size: .7rem; }.automation-canvas__float small { margin-top: 2px; color: #8a97a8; font-size: .57rem; }.automation-canvas__float--top { top: 0; right: -7px; }.automation-canvas__float--bottom { right: 4px; bottom: 0; }

.automation-pain { padding: 24px 0; background: #fff; }
.automation-pain__grid { display: grid; grid-template-columns: minmax(270px,.72fr) minmax(0,1.28fr); gap: clamp(38px,5vw,68px); padding: clamp(30px,4vw,48px); border: 1px solid #eed9ba; border-radius: 20px; background: linear-gradient(112deg,#fffaf1 0%,#fffdf9 56%,#fff 100%); }
.automation-pain__intro .display { max-width: 430px; margin-bottom: 16px; color: #3d291e; font-size: clamp(2rem,3vw,2.7rem); }.automation-pain__intro .lead { max-width: 420px; margin: 0; font-size: .94rem; }.automation-pain__takeaway { margin-top: 24px; padding: 14px 17px; border-left: 3px solid var(--amber); background: #fff8e8; }.automation-pain__takeaway span { color: var(--amber-700); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.automation-pain__takeaway p { margin: 5px 0 0; color: #6b7a8f; font-size: .78rem; }
.automation-pain__list { margin: 0; padding: 0; border-top: 1px solid #eadbc8; list-style: none; }.automation-pain__list li { display: grid; grid-template-columns: 76px minmax(0,1fr) 142px; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid #eadbc8; }.automation-pain__item-top { display: grid; gap: 5px; }.automation-pain__item-top span { color: var(--amber-700); font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800; }.automation-pain__item-top small { color: #9b816c; font-family: var(--font-mono); font-size: .52rem; font-weight: 700; text-transform: uppercase; }.automation-pain__list h3 { margin: 0 0 5px; color: #3d291e; font-size: 1rem; }.automation-pain__list p { margin: 0; color: #6b7a8f; font-size: .8rem; line-height: 1.55; }.automation-pain__list strong { width: 142px; padding: 8px 10px; border: 1px solid #efd3a5; border-radius: 7px; color: #9a5517; background: #fff4df; font-size: .62rem; line-height: 1.35; }

.automation-mechanics { padding: 48px 0 68px; }.automation-mechanics .section-heading { max-width: 760px; margin: 0 auto 36px; }.automation-mechanics__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.automation-mechanic { --mechanic: var(--amber); --mechanic-dark: var(--amber-700); --mechanic-line: #f1d59e; --mechanic-soft: #fff8e8; display: flex; min-height: 370px; flex-direction: column; padding: 24px; border: 1px solid #e1e8f1; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(30,43,60,.035); transition: .22s ease; }.automation-mechanic:hover { border-color: var(--mechanic-line); box-shadow: 0 18px 34px rgba(43,31,17,.09); transform: translateY(-3px); }.automation-mechanic--violet { --mechanic:#7047ef; --mechanic-dark:#5b31d4; --mechanic-line:#ddd3fe; --mechanic-soft:#f7f4ff; }.automation-mechanic--time { --mechanic:#b06b18; --mechanic-dark:#8e510d; --mechanic-line:#efd7aa; --mechanic-soft:#fff8eb; }.automation-mechanic--analytics { --mechanic:#45556c; --mechanic-dark:#334155; --mechanic-line:#d9e0e9; --mechanic-soft:#f5f7fa; }
.automation-mechanic__icon { display: grid; width: 44px; height: 44px; margin-bottom: 19px; place-items: center; border: 1px solid var(--mechanic-line); border-radius: 12px; color: var(--mechanic-dark); background: var(--mechanic-soft); }.automation-mechanic__icon svg { width: 22px; }.automation-mechanic > span { margin-bottom: 9px; color: var(--mechanic-dark); font-family: var(--font-mono); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.automation-mechanic h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.02rem; line-height: 1.3; }.automation-mechanic > p { margin: 0; color: #66778e; font-size: .8rem; line-height: 1.58; }.automation-mechanic__mini { min-height: 82px; margin-top: auto; padding: 12px; border: 1px solid #efe2d2; border-radius: 9px; background: #fffcf8; }
.automation-mechanic__mini--canvas { display: flex; align-items: center; justify-content: center; gap: 6px; }.automation-mechanic__mini--canvas i { padding: 7px 6px; border: 1px solid #efca83; border-radius: 5px; color: #81501b; background: #fff; font-size: .52rem; font-style: normal; font-weight: 800; }.automation-mechanic__mini--canvas b { color: #c19361; font-size: .62rem; }
.automation-mechanic__mini--events b { display: block; margin-bottom: 7px; color: var(--mechanic-dark); font-family: var(--font-mono); font-size: .5rem; }.automation-mechanic__mini--events span { display: flex; align-items: center; gap: 6px; color: #5e6a7b; font-size: .57rem; }.automation-mechanic__mini--events span i { width: 6px; height: 6px; border-radius: 50%; background: var(--mechanic); }.automation-mechanic__mini--events em { display: inline-block; margin-top: 8px; padding: 4px 6px; border-radius: 4px; color: #5b31d4; background: #eee9ff; font-size: .5rem; font-style: normal; font-weight: 800; }
.automation-mechanic__mini--time small,.automation-mechanic__mini--time b,.automation-mechanic__mini--time span { display: block; }.automation-mechanic__mini--time small { color: #9b816c; font-size: .48rem; }.automation-mechanic__mini--time b { margin: 3px 0; color: #8e510d; font-family: var(--font-mono); font-size: 1rem; }.automation-mechanic__mini--time span { color: #778396; font-size: .53rem; }
.automation-mechanic__mini--analytics { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.automation-mechanic__mini--analytics span { padding: 7px 4px; border-radius: 5px; background: #f4f6f9; text-align: center; }.automation-mechanic__mini--analytics small,.automation-mechanic__mini--analytics b { display: block; }.automation-mechanic__mini--analytics small { color: #8a97a8; font-size: .42rem; }.automation-mechanic__mini--analytics b { margin-top: 4px; color: #334155; font-family: var(--font-mono); font-size: .7rem; }

.automation-compare { padding: 68px 0; background: #fff; }.automation-compare__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); gap: 64px; align-items: end; margin-bottom: 34px; }.automation-compare__heading .display { max-width: 700px; margin-bottom: 0; }.automation-compare__heading .lead { margin: 0 0 5px; font-size: .95rem; }.automation-compare__board { overflow: hidden; border: 1px solid #e4e8ee; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px rgba(29,42,61,.065); }.automation-compare__head,.automation-compare__row { display: grid; grid-template-columns: minmax(184px,.72fr) minmax(270px,1fr) minmax(270px,1fr); }.automation-compare__head { min-height: 72px; border-bottom: 1px solid #e4e8ee; background: #fbfcfe; }.automation-compare__head > span,.automation-compare__head > div { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; }.automation-compare__head > span { color: #8a97a8; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; text-transform: uppercase; }.automation-compare__head > div { border-left: 1px solid #e4e8ee; }.automation-compare__head small { margin-bottom: 3px; color: #8491a2; font-size: .56rem; font-weight: 800; text-transform: uppercase; }.automation-compare__head b { color: #506074; font-size: .84rem; }.automation-compare__head .is-old { background: #f7f9fc; }.automation-compare__head .is-new { position: relative; background: #fff8e9; }.automation-compare__head .is-new::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--amber); content: ""; }.automation-compare__head .is-new small { color: var(--amber-700); }.automation-compare__head .is-new b { color: #4b311e; }
.automation-compare__row { min-height: 92px; border-bottom: 1px solid #e8edf3; }.automation-compare__row:last-child { border-bottom: 0; }.automation-compare__criterion,.automation-compare__cell { display: flex; align-items: center; padding: 15px 18px; }.automation-compare__criterion { gap: 11px; }.automation-compare__criterion span { color: #a1846d; font-family: var(--font-mono); font-size: .61rem; }.automation-compare__criterion h3 { margin: 0; color: var(--ink); font-size: .85rem; }.automation-compare__cell { gap: 10px; border-left: 1px solid #e8edf3; }.automation-compare__cell.is-old { background: #fafbfd; }.automation-compare__cell.is-new { background: #fffdfa; }.automation-compare__cell i { display: grid; flex: none; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; }.automation-compare__cell.is-old i { color: #bd3f3f; background: #fff0ef; }.automation-compare__cell.is-new i { color: var(--amber-800); background: #ffebbd; }.automation-compare__cell p { margin: 0; color: #66778e; font-size: .74rem; line-height: 1.48; }.automation-compare__cell strong { color: #334155; }.automation-compare__cell.is-new strong { color: #54321e; }
.automation-story { padding: 64px 0; }.automation-story .story-visual { padding: 20px; border: 1px solid #eed9ba; border-radius: 18px; background: #fff8e8; }.automation-story .shot-frame { margin: 0; box-shadow: 0 20px 42px rgba(84,45,12,.12); }.automation-story .shot-frame img { object-position: top left; }

@media (max-width: 1050px) {
  .automation-hero__shell { grid-template-columns: 1fr; gap: 30px; }.automation-hero__copy { max-width: 680px; }.automation-canvas { width: min(100%,650px); }
  .automation-pain__grid,.automation-compare__heading { grid-template-columns: 1fr; gap: 30px; }.automation-pain__intro .display,.automation-pain__intro .lead { max-width: 660px; }
  .automation-mechanics__grid { grid-template-columns: repeat(2,1fr); }.automation-mechanic { min-height: 330px; }
}
@media (max-width: 700px) {
  .automation-hero__shell { min-height: 0; padding: 44px 0 40px; }.automation-hero .display { font-size: clamp(2.25rem,11vw,3.15rem); }.automation-hero__proof { display: grid; gap: 9px; }.automation-canvas { min-height: 316px; }.automation-canvas__window { inset: 15px 0 12px; }.automation-canvas__body { grid-template-columns: 74px 1fr; min-height: 259px; }.automation-canvas__body aside { padding: 11px 6px; }.automation-canvas__body aside strong { font-size: .64rem; }.automation-canvas__body aside span { padding: 5px; font-size: .5rem; }.automation-node { width: 118px; padding: 7px 8px; }.automation-node--trigger { top: 16px; }.automation-node--condition { top: 99px; }.automation-node--email { left: 14px; bottom: 14px; }.automation-node--wait { right: 14px; bottom: 14px; }.automation-connector--one { top: 70px; height: 29px; }.automation-connector--left,.automation-connector--right { top: 150px; height: 55px; width: 58px; }.automation-connector--left { left: calc(50% - 58px); }.automation-branch { top: 156px; width: 155px; }.automation-canvas__float { display: none; }
  .automation-pain { padding: 20px 0; }.automation-pain__grid { padding: 27px 20px; border-radius: 15px; }.automation-pain__list li { grid-template-columns: 62px 1fr; gap: 11px; }.automation-pain__list strong { grid-column: 2; width: fit-content; }
  .automation-mechanics { padding: 38px 0 52px; }.automation-mechanics__grid { grid-template-columns: 1fr; }.automation-mechanic { min-height: 0; padding: 22px; }.automation-mechanic__mini { margin-top: 21px; }
  .automation-compare { padding: 52px 0; }.automation-compare__heading { margin-bottom: 28px; }.automation-compare__board { overflow-x: auto; }.automation-compare__head,.automation-compare__row { min-width: 680px; }.automation-compare__row { min-height: 86px; }.automation-compare__criterion,.automation-compare__cell { padding: 13px 15px; }
  .automation-story { padding: 52px 0; }
}

/* AI Studio & Spam Score — feature detail */
.ai-hero { position: relative; overflow: hidden; border-top: 1px solid #f1dfc5; border-bottom: 1px solid #f1dfc5; background: linear-gradient(112deg,#fffaf1 0%,#fffdf8 52%,#fff3dc 100%); }
.ai-hero__shell { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(500px,1.12fr); gap: clamp(42px,5vw,68px); align-items: center; min-height: 540px; padding: 68px 0 64px; }
.ai-hero__shell::before { position: absolute; bottom: -245px; left: -140px; width: 440px; height: 440px; border: 1px solid rgba(217,119,6,.15); border-radius: 50%; box-shadow: 0 0 0 45px rgba(217,119,6,.04),0 0 0 92px rgba(217,119,6,.02); content: ""; }
.ai-hero__copy,.ai-workspace { position: relative; z-index: 1; }.ai-hero__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 8px 12px; border-radius: 999px; color: var(--amber-700); background: #fff0cd; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.ai-hero__kicker svg { width: 17px; height: 17px; }.ai-hero .display { max-width: 500px; margin: 0 0 18px; color: #3d291e; font-size: clamp(2.55rem,4vw,3.95rem); }.ai-hero .display em { color: var(--amber); }.ai-hero .lead { max-width: 500px; margin: 0; color: #70563f; font-size: 1rem; }.ai-hero__proof { display: flex; flex-wrap: wrap; gap: 13px 18px; margin: 27px 0 30px; color: #6a4c35; font-size: .76rem; font-weight: 750; }.ai-hero__proof span { display: flex; align-items: center; gap: 7px; }.ai-hero__proof i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.ai-workspace { min-height: 400px; }.ai-workspace__window { position: absolute; inset: 22px 10px 22px 0; overflow: hidden; border: 1px solid rgba(82,45,12,.19); border-radius: 16px; background: #fff; box-shadow: 0 24px 52px rgba(91,50,11,.15); }.ai-workspace__top { display: flex; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid #f0e5d7; color: #866a51; background: #fffcf7; font-size: .62rem; }.ai-workspace__top > span { display: flex; gap: 4px; }.ai-workspace__top i { width: 7px; height: 7px; border-radius: 50%; background: #e7c89b; }.ai-workspace__top b { margin-left: 9px; }.ai-workspace__top em { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #5b31d4; background: #f0ecff; font-style: normal; font-weight: 800; }
.ai-workspace__body { display: grid; grid-template-columns: 102px 1fr; min-height: 334px; }.ai-workspace__body aside { padding: 17px 10px; border-right: 1px solid #f0e5d7; background: #fffefc; }.ai-workspace__body aside strong { display: block; margin: 0 0 15px 4px; color: #3d291e; font-size: .76rem; }.ai-workspace__body aside strong em { color: var(--amber); font-style: normal; }.ai-workspace__body aside span { display: block; padding: 6px; color: #937a63; font-size: .6rem; font-weight: 700; }.ai-workspace__body aside .is-active { border-radius: 5px; color: var(--amber-700); background: #fff1cb; }
.ai-editor { padding: 19px; background: #fbfcfe; }.ai-editor__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }.ai-editor__head small { color: #8a97a8; font-size: .49rem; font-weight: 800; }.ai-editor__head h2 { margin: 3px 0 0; color: #334155; font-size: .93rem; }.ai-editor__head > span { color: #8a97a8; font-size: .54rem; }.ai-editor > label { color: #8a97a8; font-size: .49rem; font-weight: 800; }.ai-editor__subject { margin: 4px 0 11px; padding: 9px 10px; border: 1px solid #e2e7ef; border-radius: 6px; color: #465468; background: #fff; font-size: .63rem; }.ai-editor__subject b { color: var(--amber); }.ai-editor__suggest { padding: 11px; border: 1px solid #ddd3fe; border-radius: 8px; background: #faf8ff; }.ai-editor__suggest span { color: #5b31d4; font-family: var(--font-mono); font-size: .48rem; font-weight: 800; }.ai-editor__suggest p { margin: 5px 0 8px; color: #5b6472; font-size: .58rem; line-height: 1.45; }.ai-editor__suggest button { padding: 5px 7px; border: 0; border-radius: 4px; color: #fff; background: #6d4aff; font-size: .5rem; font-weight: 800; }.ai-editor__lines { display: grid; gap: 6px; margin-top: 13px; }.ai-editor__lines i { height: 5px; border-radius: 99px; background: #e8ecf1; }.ai-editor__lines i:nth-child(2) { width: 86%; }.ai-editor__lines i:nth-child(3) { width: 68%; }
.ai-score,.ai-subjects { position: absolute; z-index: 3; border: 1px solid rgba(84,45,12,.17); border-radius: 10px; background: #fff; box-shadow: 0 12px 26px rgba(84,45,12,.12); }.ai-score { top: 0; right: -7px; width: 154px; padding: 12px; }.ai-score > span { color: #8a97a8; font-size: .5rem; font-weight: 800; }.ai-score > b { display: block; margin: 2px 0; color: var(--amber-700); font-family: var(--font-mono); font-size: 1.35rem; }.ai-score > b small { color: #8a97a8; font-size: .58rem; }.ai-score > em { display: block; color: #7d684e; font-size: .53rem; font-style: normal; }.ai-score > div { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #f3e8da; }.ai-score > div i { display: block; height: 100%; border-radius: inherit; background: var(--amber); }.ai-subjects { right: 4px; bottom: 0; padding: 11px 13px; }.ai-subjects span,.ai-subjects b { display: block; }.ai-subjects span { color: #6d4aff; font-size: .52rem; font-weight: 800; }.ai-subjects b { margin-top: 2px; color: #3d291e; font-size: .67rem; }

.ai-pain { padding: 24px 0; background: #fff; }.ai-pain__grid { display: grid; grid-template-columns: minmax(270px,.72fr) minmax(0,1.28fr); gap: clamp(38px,5vw,68px); padding: clamp(30px,4vw,48px); border: 1px solid #eed9ba; border-radius: 20px; background: linear-gradient(112deg,#fffaf1 0%,#fffdf9 56%,#fff 100%); }.ai-pain__intro .display { max-width: 430px; margin-bottom: 16px; color: #3d291e; font-size: clamp(2rem,3vw,2.7rem); }.ai-pain__intro .lead { max-width: 420px; margin: 0; font-size: .94rem; }.ai-pain__takeaway { margin-top: 24px; padding: 14px 17px; border-left: 3px solid var(--amber); background: #fff8e8; }.ai-pain__takeaway span { color: var(--amber-700); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.ai-pain__takeaway p { margin: 5px 0 0; color: #6b7a8f; font-size: .78rem; }.ai-pain__list { margin: 0; padding: 0; border-top: 1px solid #eadbc8; list-style: none; }.ai-pain__list li { display: grid; grid-template-columns: 76px minmax(0,1fr) 142px; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid #eadbc8; }.ai-pain__item-top { display: grid; gap: 5px; }.ai-pain__item-top span { color: var(--amber-700); font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800; }.ai-pain__item-top small { color: #9b816c; font-family: var(--font-mono); font-size: .52rem; font-weight: 700; text-transform: uppercase; }.ai-pain__list h3 { margin: 0 0 5px; color: #3d291e; font-size: 1rem; }.ai-pain__list p { margin: 0; color: #6b7a8f; font-size: .8rem; line-height: 1.55; }.ai-pain__list strong { width: 142px; padding: 8px 10px; border: 1px solid #efd3a5; border-radius: 7px; color: #9a5517; background: #fff4df; font-size: .62rem; line-height: 1.35; }

.ai-mechanics { padding: 48px 0 68px; }.ai-mechanics .section-heading { max-width: 780px; margin: 0 auto 36px; }.ai-mechanics__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.ai-mechanic { --mechanic:var(--amber); --mechanic-dark:var(--amber-700); --mechanic-line:#f1d59e; --mechanic-soft:#fff8e8; display: flex; min-height: 370px; flex-direction: column; padding: 24px; border: 1px solid #e1e8f1; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(30,43,60,.035); transition: .22s ease; }.ai-mechanic:hover { border-color: var(--mechanic-line); box-shadow: 0 18px 34px rgba(43,31,17,.09); transform: translateY(-3px); }.ai-mechanic--violet { --mechanic:#7047ef; --mechanic-dark:#5b31d4; --mechanic-line:#ddd3fe; --mechanic-soft:#f7f4ff; }.ai-mechanic--subject { --mechanic:#b06b18; --mechanic-dark:#8e510d; --mechanic-line:#efd7aa; --mechanic-soft:#fff8eb; }.ai-mechanic--language { --mechanic:#45556c; --mechanic-dark:#334155; --mechanic-line:#d9e0e9; --mechanic-soft:#f5f7fa; }.ai-mechanic__icon { display: grid; width: 44px; height: 44px; margin-bottom: 19px; place-items: center; border: 1px solid var(--mechanic-line); border-radius: 12px; color: var(--mechanic-dark); background: var(--mechanic-soft); }.ai-mechanic__icon svg { width: 22px; }.ai-mechanic > span { margin-bottom: 9px; color: var(--mechanic-dark); font-family: var(--font-mono); font-size: .62rem; font-weight: 800; text-transform: uppercase; }.ai-mechanic h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.02rem; line-height: 1.3; }.ai-mechanic > p { margin: 0; color: #66778e; font-size: .8rem; line-height: 1.58; }.ai-mechanic__mini { min-height: 82px; margin-top: auto; padding: 12px; border: 1px solid #efe2d2; border-radius: 9px; background: #fffcf8; }
.ai-mechanic__mini--copy > b { color: #5b31d4; font-family: var(--font-mono); font-size: .48rem; }.ai-mechanic__mini--copy p { margin: 5px 0; color: #5e6878; font-size: .56rem; }.ai-mechanic__mini--copy span { color: #8a97a8; font-size: .49rem; }.ai-mechanic__mini--score { position: relative; }.ai-mechanic__mini--score > div { display: inline-block; }.ai-mechanic__mini--score > div b { color: var(--amber-700); font-family: var(--font-mono); font-size: 1.15rem; }.ai-mechanic__mini--score > div small { color: #8a97a8; font-size: .52rem; }.ai-mechanic__mini--score > span { float: right; padding: 4px 6px; border-radius: 4px; color: var(--amber-800); background: var(--amber-100); font-size: .5rem; font-weight: 800; }.ai-mechanic__mini--score p { height: 5px; margin: 9px 0 0; overflow: hidden; border-radius: 99px; background: #f3e8da; }.ai-mechanic__mini--score p i { display: block; height: 100%; background: var(--amber); }.ai-mechanic__mini--subjects { display: grid; gap: 7px; }.ai-mechanic__mini--subjects span { padding: 6px; border: 1px solid #eee3d4; border-radius: 5px; color: #647286; font-size: .53rem; }.ai-mechanic__mini--subjects b { display: inline-grid; width: 17px; height: 17px; margin-right: 5px; place-items: center; border-radius: 4px; color: #8e510d; background: #fff1d0; font-size: .5rem; }.ai-mechanic__mini--language { display: flex; align-items: center; justify-content: space-between; }.ai-mechanic__mini--language span { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #d9e0e9; border-radius: 6px; color: #45556c; background: #fff; font-size: .55rem; font-weight: 800; }.ai-mechanic__mini--language i { color: #9ba6b4; font-style: normal; }

.ai-compare { padding: 68px 0; background: #fff; }.ai-compare__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); gap: 64px; align-items: end; margin-bottom: 34px; }.ai-compare__heading .display { max-width: 700px; margin-bottom: 0; }.ai-compare__heading .lead { margin: 0 0 5px; font-size: .95rem; }.ai-compare__board { overflow: hidden; border: 1px solid #e4e8ee; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px rgba(29,42,61,.065); }.ai-compare__head,.ai-compare__row { display: grid; grid-template-columns: minmax(184px,.72fr) minmax(270px,1fr) minmax(270px,1fr); }.ai-compare__head { min-height: 72px; border-bottom: 1px solid #e4e8ee; background: #fbfcfe; }.ai-compare__head > span,.ai-compare__head > div { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; }.ai-compare__head > span { color: #8a97a8; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; text-transform: uppercase; }.ai-compare__head > div { border-left: 1px solid #e4e8ee; }.ai-compare__head small { margin-bottom: 3px; color: #8491a2; font-size: .56rem; font-weight: 800; text-transform: uppercase; }.ai-compare__head b { color: #506074; font-size: .84rem; }.ai-compare__head .is-old { background: #f7f9fc; }.ai-compare__head .is-new { position: relative; background: #fff8e9; }.ai-compare__head .is-new::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--amber); content: ""; }.ai-compare__head .is-new small { color: var(--amber-700); }.ai-compare__head .is-new b { color: #4b311e; }.ai-compare__row { min-height: 92px; border-bottom: 1px solid #e8edf3; }.ai-compare__row:last-child { border-bottom: 0; }.ai-compare__criterion,.ai-compare__cell { display: flex; align-items: center; padding: 15px 18px; }.ai-compare__criterion { gap: 11px; }.ai-compare__criterion span { color: #a1846d; font-family: var(--font-mono); font-size: .61rem; }.ai-compare__criterion h3 { margin: 0; color: var(--ink); font-size: .85rem; }.ai-compare__cell { gap: 10px; border-left: 1px solid #e8edf3; }.ai-compare__cell.is-old { background: #fafbfd; }.ai-compare__cell.is-new { background: #fffdfa; }.ai-compare__cell i { display: grid; flex: none; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; }.ai-compare__cell.is-old i { color: #bd3f3f; background: #fff0ef; }.ai-compare__cell.is-new i { color: var(--amber-800); background: #ffebbd; }.ai-compare__cell p { margin: 0; color: #66778e; font-size: .74rem; line-height: 1.48; }.ai-compare__cell strong { color: #334155; }.ai-compare__cell.is-new strong { color: #54321e; }
.ai-story { padding: 64px 0; }.ai-story .story-visual { padding: 20px; border: 1px solid #eed9ba; border-radius: 18px; background: #fff8e8; }.ai-story .shot-frame { margin: 0; box-shadow: 0 20px 42px rgba(84,45,12,.12); }.ai-story .shot-frame img { object-position: top left; }

@media (max-width:1050px) { .ai-hero__shell { grid-template-columns:1fr; gap:30px; }.ai-hero__copy { max-width:680px; }.ai-workspace { width:min(100%,650px); }.ai-pain__grid,.ai-compare__heading { grid-template-columns:1fr; gap:30px; }.ai-pain__intro .display,.ai-pain__intro .lead { max-width:660px; }.ai-mechanics__grid { grid-template-columns:repeat(2,1fr); }.ai-mechanic { min-height:330px; } }
@media (max-width:700px) { .ai-hero__shell { min-height:0; padding:44px 0 40px; }.ai-hero .display { font-size:clamp(2.25rem,11vw,3.15rem); }.ai-hero__proof { display:grid; gap:9px; }.ai-workspace { min-height:300px; }.ai-workspace__window { inset:15px 0 12px; }.ai-workspace__body { grid-template-columns:74px 1fr; min-height:243px; }.ai-workspace__body aside { padding:11px 6px; }.ai-workspace__body aside strong { font-size:.64rem; }.ai-workspace__body aside span { padding:5px; font-size:.5rem; }.ai-editor { padding:12px 9px; }.ai-editor__head h2 { font-size:.75rem; }.ai-score,.ai-subjects { display:none; }.ai-pain { padding:20px 0; }.ai-pain__grid { padding:27px 20px; border-radius:15px; }.ai-pain__list li { grid-template-columns:62px 1fr; gap:11px; }.ai-pain__list strong { grid-column:2; width:fit-content; }.ai-mechanics { padding:38px 0 52px; }.ai-mechanics__grid { grid-template-columns:1fr; }.ai-mechanic { min-height:0; padding:22px; }.ai-mechanic__mini { margin-top:21px; }.ai-compare { padding:52px 0; }.ai-compare__heading { margin-bottom:28px; }.ai-compare__board { overflow-x:auto; }.ai-compare__head,.ai-compare__row { min-width:680px; }.ai-compare__row { min-height:86px; }.ai-compare__criterion,.ai-compare__cell { padding:13px 15px; }.ai-story { padding:52px 0; } }

/* ──────────────────────────────────────────────────────────────────────────
   FEATURE DETAIL SYSTEM
   Scoped to the four product pages using .feature-detail.  This prevents the
   refined hero, mechanics and comparison layouts below affecting other pages.
   ────────────────────────────────────────────────────────────────────────── */
.feature-detail {
  --detail-ink: #3d291e;
  --detail-muted: #766553;
  --detail-line: #eadbc8;
  --detail-soft: #fffaf1;
}

/* Light, edge-to-edge product hero — intentionally not a floating card. */
.feature-detail .feature-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid #f0dfc4;
  border-bottom: 1px solid #f0dfc4;
  background: linear-gradient(110deg, #fffaf1 0%, #fff7e9 51%, #fff3de 100%);
}
.feature-detail--automation .feature-hero {
  background: linear-gradient(110deg, #fffaf2 0%, #fbf7ff 55%, #f5f0ff 100%);
}
.feature-detail--ai .feature-hero {
  background: linear-gradient(110deg, #fffaf2 0%, #fff8ec 54%, #f5f1ff 100%);
}
.feature-detail--api .feature-hero {
  background: linear-gradient(110deg, #fffaf2 0%, #f6fbfa 55%, #eef9f6 100%);
}
.feature-detail .feature-hero::before,
.feature-detail .feature-hero::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.feature-detail .feature-hero::before {
  width: min(48vw, 760px);
  height: min(48vw, 760px);
  right: -16vw;
  top: -52%;
  border: 1px solid rgba(232, 126, 0, 0.12);
  box-shadow: 0 0 0 56px rgba(232, 126, 0, 0.025), 0 0 0 118px rgba(232, 126, 0, 0.018);
}
.feature-detail .feature-hero::after {
  width: 600px;
  height: 270px;
  left: -260px;
  bottom: -190px;
  border: 1px solid rgba(232, 126, 0, 0.11);
  box-shadow: 0 0 0 52px rgba(232, 126, 0, 0.025);
}
.feature-detail .feature-hero .page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(400px, 1.06fr);
  align-items: center;
  gap: clamp(38px, 6vw, 82px);
  min-height: 510px;
  padding: 62px 0 56px;
}
.feature-detail .feature-hero .page-badge {
  border-color: #f3cf88;
  background: rgba(255, 249, 239, 0.76);
  color: #bd5b13;
}
.feature-detail .feature-hero .page-badge i {
  background: var(--amber);
}
.feature-detail .feature-hero .display {
  max-width: 680px;
  color: var(--detail-ink);
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  line-height: 0.99;
  letter-spacing: -0.065em;
}
.feature-detail .feature-hero .display em {
  color: var(--amber);
}
.feature-detail .feature-hero .lead {
  max-width: 650px;
  color: var(--detail-muted);
}
.feature-detail .feature-hero .page-hero-visual {
  min-height: 0;
}
.feature-detail .feature-hero .shot-frame {
  overflow: hidden;
  border-color: rgba(130, 95, 55, 0.19);
  box-shadow: 0 28px 54px rgba(98, 68, 31, 0.13);
}
.feature-detail .feature-hero .annotation {
  box-shadow: 0 10px 26px rgba(76, 51, 20, 0.11);
}
.feature-detail--automation .feature-hero .shot-frame {
  transform: rotate(-0.55deg);
}
.feature-detail--ai .feature-hero .shot-frame {
  transform: rotate(0.45deg);
}
.feature-detail--api .feature-hero .shot-frame {
  transform: rotate(-0.35deg);
}

/* A compact problem subsection, rather than another large visual hero. */
.feature-detail .feature-friction {
  padding: 28px 0 22px;
  border: 0;
  background: #fff;
}
.feature-detail .feature-friction .pain-box {
  padding: 24px 26px 26px;
  border: 1px solid var(--detail-line);
  border-radius: 18px;
  border-left: 3px solid var(--amber);
  background: linear-gradient(106deg, #fffdf9 0%, #fff9ef 100%);
  box-shadow: 0 12px 28px rgba(75, 49, 20, 0.045);
}
.feature-detail .feature-friction .pain-box-header {
  margin-bottom: 18px;
  color: #a74f13;
}
.feature-detail .feature-friction .pain-box-header svg {
  width: 22px;
  height: 22px;
}
.feature-detail .feature-friction .pain-box-header h3 {
  color: var(--detail-ink);
  font-size: clamp(1.1rem, 1.6vw, 1.34rem);
  letter-spacing: -0.025em;
}
.feature-detail .feature-friction .pain-grid {
  gap: 12px;
}
.feature-detail .feature-friction .pain-item {
  min-height: 0;
  padding: 16px 17px;
  border: 1px solid rgba(225, 201, 167, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}
.feature-detail .feature-friction .pain-item h4 {
  margin-bottom: 7px;
  color: #854113;
  font-size: 1rem;
}
.feature-detail .feature-friction .pain-item h4 svg {
  flex: 0 0 auto;
  color: #e77724;
}
.feature-detail .feature-friction .pain-item p {
  color: #736655;
  font-size: 0.9rem;
  line-height: 1.52;
}

/* Product-led mechanics: every capability carries its own small UI state. */
.feature-detail .feature-capabilities {
  padding: 54px 0 60px;
}
.feature-detail .feature-capabilities .section-heading {
  max-width: 780px;
  margin: 0 auto 30px;
}
.feature-detail .feature-capabilities .section-heading .lead {
  max-width: 690px;
}
.feature-detail .feature-capabilities .sub-grid {
  gap: 16px;
}
.feature-detail .detail-mechanic {
  --detail-tone: #df7300;
  --detail-tone-soft: #fff3d8;
  --detail-tone-line: #f5cd86;
  position: relative;
  display: flex;
  min-height: 344px;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 11px 26px rgba(32, 44, 65, 0.045);
}
.feature-detail .detail-mechanic--violet {
  --detail-tone: #7446ec;
  --detail-tone-soft: #f4efff;
  --detail-tone-line: #ded0ff;
}
.feature-detail .detail-mechanic--green {
  --detail-tone: #13876f;
  --detail-tone-soft: #e9f9f3;
  --detail-tone-line: #bfead9;
}
.feature-detail .detail-mechanic--teal {
  --detail-tone: #118fa0;
  --detail-tone-soft: #e7f8fb;
  --detail-tone-line: #bce9ef;
}
.feature-detail .detail-mechanic .card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 17px;
  padding: 9px;
  border: 1px solid var(--detail-tone-line);
  border-radius: 12px;
  color: var(--detail-tone);
  background: var(--detail-tone-soft);
}
.feature-detail .detail-mechanic .card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.7;
}
.feature-detail .detail-mechanic .card-kicker {
  margin-bottom: 9px;
  color: var(--detail-tone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.feature-detail .detail-mechanic h3 {
  margin: 0 0 9px;
  color: #1d293d;
  font-size: 1.08rem;
  letter-spacing: -0.025em;
}
.feature-detail .detail-mechanic p {
  margin: 0;
  color: #627086;
  font-size: 0.89rem;
  line-height: 1.53;
}
.feature-detail .detail-mechanic::after {
  display: block;
  width: 100%;
  height: 68px;
  margin-top: auto;
  border: 1px solid var(--detail-tone-line);
  border-radius: 10px;
  background-color: #fffdfa;
  content: "";
}
/* Verified records, channels, language and role sets. */
.feature-detail .detail-mechanic:is(.detail-mechanic--list, .detail-mechanic--link, .detail-mechanic--language, .detail-mechanic--roles)::after {
  background:
    radial-gradient(circle, var(--detail-tone) 0 3px, transparent 3.5px) 12px 16px / 9px 9px no-repeat,
    linear-gradient(#dce3eb, #dce3eb) 28px 18px / 53% 4px no-repeat,
    linear-gradient(#eef2f6, #eef2f6) 28px 27px / 70% 3px no-repeat,
    radial-gradient(circle, var(--detail-tone) 0 3px, transparent 3.5px) 12px 40px / 9px 9px no-repeat,
    linear-gradient(#dce3eb, #dce3eb) 28px 42px / 42% 4px no-repeat,
    linear-gradient(#eef2f6, #eef2f6) 28px 51px / 62% 3px no-repeat,
    #fffdfa;
}
/* Route, canvas and delay states. */
.feature-detail .detail-mechanic:is(.detail-mechanic--flow, .detail-mechanic--canvas, .detail-mechanic--delay)::after {
  background:
    radial-gradient(circle at 17px 34px, var(--detail-tone) 0 7px, transparent 7.5px),
    linear-gradient(var(--detail-tone), var(--detail-tone)) 24px 32px / 40% 2px no-repeat,
    radial-gradient(circle at 53% 34px, #fffdfa 0 7px, var(--detail-tone) 7.5px 9px, transparent 9.5px),
    linear-gradient(var(--detail-tone), var(--detail-tone)) 58% 32px / 24% 2px no-repeat,
    radial-gradient(circle at 87% 34px, var(--detail-tone) 0 7px, transparent 7.5px),
    #fffdfa;
}
/* Visualised growth / live node performance. */
.feature-detail .detail-mechanic:is(.detail-mechanic--bars, .detail-mechanic--spark)::after {
  background:
    linear-gradient(to top, var(--detail-tone) 0 40%, transparent 41%) 16px 12px / 12px 44px no-repeat,
    linear-gradient(to top, var(--detail-tone) 0 65%, transparent 66%) 34px 12px / 12px 44px no-repeat,
    linear-gradient(to top, var(--detail-tone) 0 49%, transparent 50%) 52px 12px / 12px 44px no-repeat,
    linear-gradient(to top, var(--detail-tone) 0 82%, transparent 83%) 70px 12px / 12px 44px no-repeat,
    linear-gradient(to top, var(--detail-tone) 0 70%, transparent 71%) 88px 12px / 12px 44px no-repeat,
    linear-gradient(#ebeff4, #ebeff4) 12px 56px / calc(100% - 24px) 1px no-repeat,
    #fffdfa;
}
/* API and AI output blocks. */
.feature-detail .detail-mechanic:is(.detail-mechanic--code, .detail-mechanic--copy, .detail-mechanic--brand)::after {
  border-color: #403427;
  background:
    linear-gradient(var(--detail-tone), var(--detail-tone)) 14px 17px / 34% 4px no-repeat,
    linear-gradient(#e8c99c, #e8c99c) 14px 29px / 58% 3px no-repeat,
    linear-gradient(#9dd7d0, #9dd7d0) 14px 40px / 45% 3px no-repeat,
    linear-gradient(#d9bdff, #d9bdff) 14px 51px / 26% 3px no-repeat,
    #33281f;
}

/* Comparative operating model: structured board, not two unrelated cards. */
.feature-detail .feature-compare {
  padding: 60px 0 64px;
  background: #fff;
}
.feature-detail .feature-compare .section-heading {
  max-width: 830px;
  margin: 0 auto 30px;
}
.feature-detail .feature-compare .matrix-card {
  gap: 0;
  overflow: hidden;
  border: 1px solid #dde4ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 15px 34px rgba(33, 48, 69, 0.06);
}
.feature-detail .feature-compare .matrix-col {
  padding: 0;
}
.feature-detail .feature-compare .matrix-col--old {
  background: #fafbfd;
}
.feature-detail .feature-compare .matrix-col--new {
  border-top: 4px solid var(--amber);
  background: linear-gradient(135deg, #fffdf8 0%, #fff9ee 100%);
}
.feature-detail .feature-compare .matrix-col-header {
  min-height: 138px;
  padding: 25px 28px 21px;
  border-bottom: 1px solid #e3e8ef;
}
.feature-detail .feature-compare .matrix-col-header h3 {
  margin: 12px 0 0;
  color: #1d293d;
  font-size: clamp(1.2rem, 1.6vw, 1.46rem);
  letter-spacing: -0.035em;
}
.feature-detail .feature-compare .matrix-col-badge {
  font-size: 0.72rem;
  letter-spacing: 0.045em;
}
.feature-detail .feature-compare .matrix-list {
  gap: 0;
  padding: 7px 28px 18px;
}
.feature-detail .feature-compare .matrix-item {
  min-height: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(214, 222, 232, 0.88);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #647186;
  font-size: 0.93rem;
  line-height: 1.5;
}
.feature-detail .feature-compare .matrix-item:last-child {
  border-bottom: 0;
}
.feature-detail .feature-compare .matrix-item strong {
  color: #26364d;
}
.feature-detail .feature-compare .matrix-col--new .matrix-item svg {
  color: #159b59;
}

/* Close visual rhythm for the remaining sections. */
.feature-detail .feature-story {
  padding: 62px 0;
}
.feature-detail .feature-story .story-grid {
  gap: clamp(34px, 5vw, 72px);
}
.feature-detail .feature-impact {
  padding: 46px 0;
}
.feature-detail .feature-impact .impact-grid {
  gap: 13px;
}
.feature-detail .feature-impact .impact-card {
  padding: 21px 20px;
  border-radius: 14px;
}
.feature-detail .feature-faq {
  padding: 60px 0 68px;
}

@media (max-width: 1050px) {
  .feature-detail .feature-hero .page-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 56px 0 50px;
  }
  .feature-detail .feature-hero .page-hero-visual {
    width: min(100%, 700px);
    margin: 8px auto 0;
  }
}
@media (max-width: 900px) {
  .feature-detail .feature-friction .pain-grid,
  .feature-detail .feature-capabilities .sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-detail .feature-compare .matrix-card {
    grid-template-columns: 1fr;
  }
  .feature-detail .feature-compare .matrix-col--new {
    border-top: 4px solid var(--amber);
  }
}
@media (max-width: 640px) {
  .feature-detail .feature-hero .page-hero-grid {
    gap: 30px;
    padding: 44px 0 40px;
  }
  .feature-detail .feature-hero .display {
    font-size: clamp(2.3rem, 11vw, 3.15rem);
    letter-spacing: -0.06em;
  }
  .feature-detail .feature-hero .button-row {
    gap: 10px;
  }
  .feature-detail .feature-friction {
    padding: 20px 0 16px;
  }
  .feature-detail .feature-friction .pain-box {
    padding: 20px 17px;
    border-radius: 14px;
  }
  .feature-detail .feature-friction .pain-grid,
  .feature-detail .feature-capabilities .sub-grid {
    grid-template-columns: 1fr;
  }
  .feature-detail .feature-capabilities,
  .feature-detail .feature-compare,
  .feature-detail .feature-story,
  .feature-detail .feature-faq {
    padding: 48px 0;
  }
  .feature-detail .detail-mechanic {
    min-height: 318px;
  }
  .feature-detail .feature-compare .matrix-col-header,
  .feature-detail .feature-compare .matrix-list {
    padding-left: 19px;
    padding-right: 19px;
  }
}

/* ==========================================================================
   BYO Sending Hub — operating friction & comparison
   Scoped to this feature page so individual feature narratives can vary.
   ========================================================================== */
.sending-hub-pain {
  position: relative;
  overflow: hidden;
  padding: 116px 0;
  border-top: 1px solid #f1e5d4;
  border-bottom: 1px solid #f1e5d4;
  background: linear-gradient(112deg, #fffaf1 0%, #fffdf9 52%, #ffffff 100%);
}
.sending-hub-pain::before {
  content: "";
  position: absolute;
  top: -262px;
  left: -212px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(217, 119, 6, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(217, 119, 6, .025), 0 0 0 104px rgba(217, 119, 6, .014);
}
.sending-hub-pain__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
  align-items: start;
  gap: clamp(48px, 8vw, 118px);
}
.sending-hub-pain__intro .display {
  max-width: 510px;
  margin-top: 16px;
  color: #3d291e;
}
.sending-hub-pain__intro .lead {
  max-width: 490px;
  color: #6c5d51;
}
.sending-hub-pain__takeaway {
  max-width: 474px;
  margin-top: 32px;
  padding: 16px 0 0 18px;
  border-top: 1px solid #ead8bd;
  border-left: 3px solid var(--amber);
}
.sending-hub-pain__takeaway span {
  display: block;
  margin-bottom: 4px;
  color: var(--amber-700);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sending-hub-pain__takeaway p {
  margin: 0;
  color: #725f51;
  font-size: .84rem;
  line-height: 1.6;
}
.sending-hub-pain__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #eadbc8;
}
.sending-hub-pain__item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid #eadbc8;
}
.sending-hub-pain__item-top {
  display: grid;
  gap: 7px;
  align-content: center;
}
.sending-hub-pain__number {
  color: var(--amber-700);
  font-family: var(--font-mono);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -.05em;
}
.sending-hub-pain__item-top > span:last-child {
  color: #9b816c;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sending-hub-pain__item-copy h3 {
  margin: 0 0 6px;
  color: #3d291e;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.sending-hub-pain__item-copy p {
  max-width: 470px;
  margin: 0;
  color: #6b7a8f;
  font-size: .89rem;
  line-height: 1.58;
}
.sending-hub-pain__item-copy strong { color: #4b392d; }
.sending-hub-pain__signal {
  width: 154px;
  padding: 8px 10px;
  border: 1px solid #efd3a5;
  border-radius: 7px;
  color: #9a5517;
  background: #fff4df;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.35;
}

.sending-hub-compare {
  padding: 118px 0;
  background: #ffffff;
}
.sending-hub-compare__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.sending-hub-compare__heading .display {
  max-width: 700px;
  margin-bottom: 0;
}
.sending-hub-compare__heading .lead { margin: 0 0 5px; }
.sending-hub-compare__board {
  overflow: hidden;
  border: 1px solid #e4e8ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 46px rgba(29, 42, 61, .07);
}
.sending-hub-compare__head,
.sending-hub-compare__row {
  display: grid;
  grid-template-columns: minmax(184px, .72fr) minmax(270px, 1fr) minmax(270px, 1fr);
}
.sending-hub-compare__head {
  border-bottom: 1px solid #e4e8ee;
  background: #fbfcfe;
}
.sending-hub-compare__criterion-label {
  display: flex;
  align-items: end;
  padding: 26px 28px 19px;
  color: #8a97a8;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sending-hub-compare__model {
  min-height: 113px;
  padding: 23px 26px 20px;
}
.sending-hub-compare__model span,
.sending-hub-compare__model strong { display: block; }
.sending-hub-compare__model span {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sending-hub-compare__model strong {
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -.022em;
}
.sending-hub-compare__model--old {
  border-left: 1px solid #e4e8ee;
  color: #506074;
  background: #f7f9fc;
}
.sending-hub-compare__model--old span { color: #8491a2; }
.sending-hub-compare__model--new {
  position: relative;
  color: #4b311e;
  background: #fff8e9;
}
.sending-hub-compare__model--new::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--amber);
}
.sending-hub-compare__model--new span { color: var(--amber-700); }
.sending-hub-compare__row { min-height: 121px; }
.sending-hub-compare__row + .sending-hub-compare__row { border-top: 1px solid #e8edf3; }
.sending-hub-compare__criterion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 28px;
  background: #ffffff;
}
.sending-hub-compare__criterion > span {
  flex: 0 0 auto;
  padding-top: 2px;
  color: #a5afbc;
  font-family: var(--font-mono);
  font-size: .69rem;
  font-weight: 800;
}
.sending-hub-compare__criterion h3 {
  margin: 0;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.35;
  letter-spacing: -.018em;
}
.sending-hub-compare__cell {
  display: flex;
  gap: 11px;
  padding: 25px 26px;
}
.sending-hub-compare__cell--old {
  border-left: 1px solid #e8edf3;
  background: #fbfcfe;
}
.sending-hub-compare__cell--new { background: #fffdfa; }
.sending-hub-compare__cell i {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .86rem;
  font-style: normal;
  font-weight: 800;
}
.sending-hub-compare__cell--old i { color: #bd3f3f; background: #fff0ef; }
.sending-hub-compare__cell--new i { color: #8b4b12; background: #ffebbd; }
.sending-hub-compare__cell p {
  margin: 0;
  color: #67778c;
  font-size: .82rem;
  line-height: 1.55;
}
.sending-hub-compare__cell strong { color: #334155; }
.sending-hub-compare__cell--new p { color: #6b5a4d; }
.sending-hub-compare__cell--new strong { color: #54321e; }

@media (max-width: 900px) {
  .sending-hub-pain,
  .sending-hub-compare { padding: 82px 0; }
  .sending-hub-pain__grid,
  .sending-hub-compare__heading { grid-template-columns: 1fr; gap: 35px; }
  .sending-hub-pain__intro .display { max-width: 630px; }
  .sending-hub-compare__heading .lead { max-width: 650px; }
  .sending-hub-compare__head,
  .sending-hub-compare__row { grid-template-columns: 1fr 1fr; }
  .sending-hub-compare__criterion-label { display: none; }
  .sending-hub-compare__model { min-height: 94px; }
  .sending-hub-compare__model--old { border-left: 0; }
  .sending-hub-compare__row { padding: 0; }
  .sending-hub-compare__criterion { grid-column: 1 / -1; padding: 20px 24px 9px; }
  .sending-hub-compare__cell { padding: 18px 24px 24px; }
  .sending-hub-compare__cell--old { border-left: 0; }
}
@media (max-width: 640px) {
  .sending-hub-pain,
  .sending-hub-compare { padding: 66px 0; }
  .sending-hub-pain__item { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 23px 0; }
  .sending-hub-pain__signal { grid-column: 2; width: fit-content; margin-top: 1px; }
  .sending-hub-pain__takeaway { margin-top: 25px; }
  .sending-hub-compare__heading { margin-bottom: 33px; }
  .sending-hub-compare__board { border-radius: 13px; }
  .sending-hub-compare__head { grid-template-columns: 1fr; }
  .sending-hub-compare__model { min-height: auto; padding: 17px 20px; }
  .sending-hub-compare__model--old { border-bottom: 1px solid #e4e8ee; }
  .sending-hub-compare__model--new { display: none; }
  .sending-hub-compare__row { grid-template-columns: 1fr; }
  .sending-hub-compare__criterion { padding: 20px 20px 9px; }
  .sending-hub-compare__cell { padding: 13px 20px 18px; }
  .sending-hub-compare__cell::before {
    display: block;
    min-width: 63px;
    padding-top: 4px;
    color: #8996a6;
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .sending-hub-compare__cell--old::before { content: "Mô hình cũ"; }
  .sending-hub-compare__cell--new::before { content: "BYO Hub"; color: var(--amber-700); }
  .sending-hub-compare__cell i { display: none; }
}

/* BYO Sending Hub — light architecture hero */
.sending-hub-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid #f1dfc5;
  border-bottom: 1px solid #f1dfc5;
  background: linear-gradient(112deg, #fffaf1 0%, #fffdf8 52%, #fff3dc 100%);
}
.sending-hub-hero .container { width: min(calc(100% - 48px), var(--container)); }
.sending-hub-hero__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
  gap: clamp(42px, 5vw, 66px);
  align-items: center;
  min-height: 526px;
  padding: 68px 0 62px;
}
.sending-hub-hero__shell::before {
  content: "";
  position: absolute;
  bottom: -230px;
  left: -135px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(217,119,6,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(217,119,6,.04), 0 0 0 92px rgba(217,119,6,.02);
}
.sending-hub-hero__copy,
.sending-hub-console { position: relative; z-index: 1; }
.sending-hub-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--amber-700);
  background: #fff0cd;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sending-hub-hero__kicker svg { width: 16px; height: 16px; }
.sending-hub-hero__copy .display {
  max-width: 450px;
  margin: 0 0 17px;
  color: #3d291e;
  font-size: clamp(2.4rem, 3.75vw, 3.65rem);
}
.sending-hub-hero__copy .lead {
  max-width: 490px;
  margin: 0;
  color: #70563f;
  font-size: 1rem;
}
.sending-hub-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 28px;
  color: #6a4c35;
  font-size: .78rem;
  font-weight: 750;
}
.sending-hub-hero__proof span { display: inline-flex; align-items: center; gap: 7px; }
.sending-hub-hero__proof i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

.sending-hub-console { min-height: 364px; }
.sending-hub-console__main {
  position: absolute;
  inset: 27px 16px 22px 0;
  overflow: hidden;
  border: 1px solid rgba(82,45,12,.19);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 22px 46px rgba(91,50,11,.16);
}
.sending-hub-console__top {
  display: flex;
  align-items: center;
  height: 39px;
  padding: 0 14px;
  border-bottom: 1px solid #f0e5d7;
  background: #fffcf7;
}
.sending-hub-console__dots { display: flex; gap: 4px; }
.sending-hub-console__dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #e7c89b; }
.sending-hub-console__top b { margin-left: 9px; overflow: hidden; color: #866a51; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.sending-hub-console__status { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #15803d; background: #e8f8ed; font-size: .58rem; font-weight: 800; white-space: nowrap; }
.sending-hub-console__body { display: grid; grid-template-columns: 105px 1fr; min-height: 302px; }
.sending-hub-console__side { padding: 15px 10px; border-right: 1px solid #f0e5d7; background: #fffefc; }
.sending-hub-console__side b { display: block; margin: 0 0 15px 4px; color: #3d291e; font-size: .78rem; }
.sending-hub-console__side b em { color: var(--amber); font-style: normal; }
.sending-hub-console__side > span { display: block; padding: 6px; color: #937a63; font-size: .62rem; font-weight: 700; }
.sending-hub-console__side .is-active { border-radius: 5px; color: var(--amber-700); background: #fff1cb; }
.sending-hub-console__data { padding: 17px; }
.sending-hub-console__data-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 15px; }
.sending-hub-console__data-head h2 { margin: 0; color: #3d291e; font-size: .97rem; letter-spacing: -.035em; }
.sending-hub-console__data-head p { margin: 3px 0 0; color: #8a97a8; font-size: .62rem; }
.sending-hub-console__data-head > span { flex: none; padding: 7px 8px; border-radius: 5px; color: #fff; background: var(--amber); font-size: .58rem; font-weight: 800; }
.sending-hub-console__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 10px; }
.sending-hub-console__stats div { padding: 8px; border: 1px solid #f0e5d7; border-radius: 6px; background: #fff; }
.sending-hub-console__stats small { display: block; color: #7d8ba0; font-size: .55rem; font-weight: 800; }
.sending-hub-console__stats b { display: block; margin-top: 4px; color: #3d291e; font-family: var(--font-mono); font-size: .92rem; letter-spacing: -.045em; }
.sending-hub-console__stats .is-amber { color: var(--amber-700); }
.sending-hub-console__chart { padding: 12px; border: 1px solid #f0e5d7; border-radius: 8px; background: #fffcf8; }
.sending-hub-console__chart > div { display: flex; justify-content: space-between; color: #7d8ba0; font-size: .61rem; font-weight: 700; }.sending-hub-console__chart > div b { color: #3d291e; }
.sending-hub-console__chart p { display: flex; align-items: end; height: 75px; gap: 5px; margin: 8px 0 0; padding: 8px 2px 0; border-bottom: 1px solid #f2ddc1; }
.sending-hub-console__chart p i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#f7b845,var(--amber)); }
.sending-hub-console__servers { display: grid; gap: 9px; padding: 12px; border: 1px solid #f0e5d7; border-radius: 8px; background: #fffcf8; }
.sending-hub-console__servers > div { display: grid; grid-template-columns: 102px 1fr 30px; gap: 8px; align-items: center; }
.sending-hub-console__servers span { display: flex; align-items: center; gap: 5px; overflow: hidden; color: #55677d; font-size: .59rem; font-weight: 750; white-space: nowrap; }
.sending-hub-console__servers span i { display: block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }.sending-hub-console__servers > div:nth-child(2) span i { background: #7c3aed; }.sending-hub-console__servers > div:nth-child(3) span i { background: #0ea5a8; }
.sending-hub-console__servers em { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #f3e7d9; }.sending-hub-console__servers em b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f5b137,var(--amber)); }.sending-hub-console__servers > div:nth-child(2) em b { background: #9f8bea; }.sending-hub-console__servers > div:nth-child(3) em b { background: #43b5af; }
.sending-hub-console__servers strong { color: #79624e; font-family: var(--font-mono); font-size: .59rem; text-align: right; }
.sending-hub-console__float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(84,45,12,.17);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(84,45,12,.12);
}
.sending-hub-console__float > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: var(--amber-700); background: #fff0c9; }
.sending-hub-console__float svg { width: 17px; height: 17px; }
.sending-hub-console__float b,
.sending-hub-console__float small { display: block; line-height: 1.2; }
.sending-hub-console__float b { color: #3d291e; font-size: .72rem; }.sending-hub-console__float small { margin-top: 3px; color: #8a97a8; font-size: .6rem; }
.sending-hub-console__float--top { top: 0; right: -8px; }.sending-hub-console__float--bottom { right: 2px; bottom: 0; }.sending-hub-console__float--bottom > span { color: #6d4aff; background: #f0ecff; }

/* A compact, clearly secondary operational-friction section. */
.sending-hub-pain {
  padding: 58px 0;
  border: 0;
  background: #ffffff;
}
.sending-hub-pain::before { display: none; }
.sending-hub-pain__grid {
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  gap: clamp(38px, 5vw, 68px);
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid #eed9ba;
  border-radius: 20px;
  background: linear-gradient(112deg, #fffaf1 0%, #fffdf9 56%, #ffffff 100%);
}
.sending-hub-pain__intro .display { max-width: 420px; font-size: clamp(2rem, 3vw, 2.7rem); }
.sending-hub-pain__intro .lead { max-width: 410px; font-size: .96rem; }
.sending-hub-pain__takeaway { margin-top: 25px; }
.sending-hub-pain__item { grid-template-columns: 84px minmax(0, 1fr) 142px; gap: 17px; padding: 21px 0; }
.sending-hub-pain__item-copy h3 { font-size: 1.04rem; }.sending-hub-pain__item-copy p { font-size: .84rem; }.sending-hub-pain__signal { width: 142px; font-size: .64rem; }

@media (max-width: 1050px) {
  .sending-hub-hero__shell { grid-template-columns: 1fr; gap: 31px; }
  .sending-hub-hero__copy { max-width: 675px; }
  .sending-hub-console { width: min(100%, 620px); min-height: 350px; }
}
@media (max-width: 900px) {
  .sending-hub-hero__shell { min-height: 0; padding: 56px 0 48px; }
  .sending-hub-pain { padding: 48px 0; }
  .sending-hub-pain__grid { grid-template-columns: 1fr; gap: 30px; }
  .sending-hub-pain__intro .display,
  .sending-hub-pain__intro .lead { max-width: 640px; }
}
@media (max-width: 640px) {
  .sending-hub-hero__shell { padding: 43px 0 38px; }
  .sending-hub-hero .container { width: min(calc(100% - 36px), var(--container)); }
  .sending-hub-hero__copy .display { font-size: clamp(2.2rem, 12vw, 3.15rem); }
  .sending-hub-hero__proof { display: grid; gap: 10px; margin-top: 23px; }
  .sending-hub-console { min-height: 282px; }
  .sending-hub-console__main { inset: 17px 0 12px 0; }
  .sending-hub-console__body { grid-template-columns: 74px 1fr; min-height: 236px; }
  .sending-hub-console__side { padding: 11px 6px; }.sending-hub-console__side b { margin-bottom: 10px; font-size: .67rem; }.sending-hub-console__side > span { padding: 5px; font-size: .54rem; }
  .sending-hub-console__data { padding: 12px 9px; }.sending-hub-console__data-head h2 { font-size: .79rem; }.sending-hub-console__data-head p { display: none; }.sending-hub-console__data-head > span { padding: 6px; font-size: .53rem; }
  .sending-hub-console__stats { gap: 4px; }.sending-hub-console__stats div { padding: 5px; }.sending-hub-console__stats small { font-size: .47rem; }.sending-hub-console__stats b { font-size: .68rem; }
  .sending-hub-console__chart { padding: 8px; }.sending-hub-console__chart p { height: 56px; gap: 3px; }
  .sending-hub-console__servers { gap: 6px; padding: 8px; }.sending-hub-console__servers > div { grid-template-columns: 80px 1fr 24px; gap: 5px; }.sending-hub-console__servers span { font-size: .5rem; }.sending-hub-console__servers strong { font-size: .5rem; }
  .sending-hub-console__float { padding: 8px; }.sending-hub-console__float > span { width: 25px; height: 25px; }.sending-hub-console__float svg { width: 14px; height: 14px; }.sending-hub-console__float b { font-size: .62rem; }.sending-hub-console__float small { font-size: .53rem; }.sending-hub-console__float--top { right: -5px; }.sending-hub-console__float--bottom { right: -4px; bottom: -2px; }
  .sending-hub-pain { padding: 37px 0; }.sending-hub-pain__grid { padding: 27px 20px; border-radius: 15px; }.sending-hub-pain__intro .display { font-size: 2rem; }.sending-hub-pain__item { grid-template-columns: 63px minmax(0, 1fr); gap: 11px; padding: 19px 0; }.sending-hub-pain__signal { grid-column: 2; width: fit-content; }
}

/* BYO Sending Hub — compact page rhythm & mechanic cards */
.sending-hub-hero + .container .partner-row { margin: 18px auto 22px; padding: 27px 0; }
.sending-hub-pain { padding: 22px 0; }
.sending-hub-mechanics { padding: 36px 0 58px; }
.sending-hub-mechanics .section-heading { max-width: 760px; margin-bottom: 36px; }
.sending-hub-mechanics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sending-mechanic {
  --mechanic: var(--amber);
  --mechanic-dark: var(--amber-700);
  --mechanic-line: #f1d59e;
  --mechanic-soft: #fff8e8;
  display: flex;
  min-height: 374px;
  flex-direction: column;
  padding: 25px;
  border: 1px solid #e1e8f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(30, 43, 60, .035);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sending-mechanic:hover { border-color: var(--mechanic-line); box-shadow: 0 18px 34px rgba(43, 31, 17, .09); transform: translateY(-3px); }
.sending-mechanic--failover { --mechanic: #7047ef; --mechanic-dark: #5b31d4; --mechanic-line: #ddd3fe; --mechanic-soft: #f7f4ff; }
.sending-mechanic--dns { --mechanic: #1286a0; --mechanic-dark: #0c708a; --mechanic-line: #bfe6ee; --mechanic-soft: #effbfd; }
.sending-mechanic--warmup { --mechanic: #188268; --mechanic-dark: #116b54; --mechanic-line: #c7e9dc; --mechanic-soft: #effaf5; }
.sending-mechanic__icon {
  display: grid;
  width: 45px;
  height: 45px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid var(--mechanic-line);
  border-radius: 12px;
  color: var(--mechanic-dark);
  background: var(--mechanic-soft);
}
.sending-mechanic__icon svg { width: 23px; height: 23px; }
.sending-mechanic__eyebrow { display: block; margin-bottom: 10px; color: var(--mechanic-dark); font-family: var(--font-mono); font-size: .65rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.sending-mechanic h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.03rem; line-height: 1.3; letter-spacing: -.027em; }
.sending-mechanic > p { margin: 0; color: #66778e; font-size: .83rem; line-height: 1.58; }
.sending-mechanic__mini { margin-top: auto; padding: 13px; border: 1px solid #efe2d2; border-radius: 9px; background: #fffcf8; }
.sending-mechanic__mini--routing { display: grid; gap: 8px; }
.sending-mechanic__mini--routing > span { display: grid; grid-template-columns: 67px 1fr 28px; gap: 7px; align-items: center; color: #775e49; font-size: .58rem; }
.sending-mechanic__mini--routing b { font-weight: 800; white-space: nowrap; }.sending-mechanic__mini--routing i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #f4e8d9; }.sending-mechanic__mini--routing i em { display: block; height: 100%; border-radius: inherit; background: var(--mechanic); }.sending-mechanic__mini--routing > span:nth-child(2) i em { background: #15a7ae; }.sending-mechanic__mini--routing > span:nth-child(3) i em { background: #7646e8; }.sending-mechanic__mini--routing strong { color: #8b6c51; font-family: var(--font-mono); font-size: .57rem; text-align: right; }
.sending-mechanic__mini--failover { display: grid; grid-template-columns: max-content 1fr max-content; gap: 8px; align-items: center; padding: 28px 12px 14px; position: relative; }.sending-mechanic__mini--failover > span { padding: 8px 7px; border: 1px solid #ddd3fe; border-radius: 6px; background: #fbfaff; color: #6448b4; font-size: .58rem; font-weight: 800; }.sending-mechanic__mini--failover .is-off { border-color: #ffd2d1; color: #d54c4c; background: #fff8f8; text-decoration: line-through; }.sending-mechanic__mini--failover > i { border-top: 1px dashed #a88bd2; }.sending-mechanic__mini--failover > b { position: absolute; top: 8px; left: 12px; color: var(--mechanic-dark); font-family: var(--font-mono); font-size: .54rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sending-mechanic__mini--dns { display: grid; gap: 4px; }.sending-mechanic__mini--dns span { display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid #e5f0f1; color: #66818b; font-size: .6rem; }.sending-mechanic__mini--dns span:last-child { padding-bottom: 0; border: 0; }.sending-mechanic__mini--dns b { font-weight: 800; }.sending-mechanic__mini--dns i { color: #168246; font-size: .58rem; font-style: normal; font-weight: 800; }
.sending-mechanic__mini--warmup { padding-bottom: 10px; }.sending-mechanic__mini--warmup > div { display: flex; justify-content: space-between; color: #6f897e; font-size: .56rem; font-weight: 700; }.sending-mechanic__mini--warmup p { display: flex; align-items: end; gap: 8px; height: 39px; margin: 7px 0 0; padding: 0 3px; border-bottom: 1px solid #d5e9df; }.sending-mechanic__mini--warmup p i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#78cdb2,var(--mechanic)); }
.sending-hub-compare { padding: 68px 0; }
.sending-hub-story { padding: 64px 0; }
.sending-hub-impact { padding: 48px 0; }

@media (max-width: 1050px) {
  .sending-hub-mechanics__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sending-mechanic { min-height: 334px; }
}
@media (max-width: 640px) {
  .sending-hub-hero + .container .partner-row { margin: 14px auto 16px; padding: 22px 0; }
  .sending-hub-pain { padding: 20px 0; }
  .sending-hub-mechanics { padding: 38px 0 48px; }
  .sending-hub-mechanics .section-heading { margin-bottom: 28px; }
  .sending-hub-mechanics__grid { grid-template-columns: 1fr; }
  .sending-mechanic { min-height: 0; padding: 22px; }
  .sending-mechanic__mini { min-height: 78px; margin-top: 21px; }
  .sending-hub-compare { padding: 52px 0; }
  .sending-hub-story { padding: 52px 0; }
  .sending-hub-impact { padding: 42px 0; }
}

@media (max-width: 1050px) {
  .knowledge-featured { grid-template-columns: 1fr; }
  .knowledge-featured .article-image { min-height: 330px; border-right: 0; border-bottom: 1px solid #e9dfd1; }
  .knowledge-newsletter { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
  .knowledge-newsletter__form-panel { width: min(100%,680px); }
}
@media (max-width: 700px) {
  .knowledge-hub-hero { padding: 51px 0 26px; }
  .knowledge-hub-hero .display { font-size: clamp(2.35rem,11vw,3.35rem); }
  .knowledge-hub-hero .topic-row { margin-top: 25px; padding-top: 14px; }
  .knowledge-hub-hero .topic { margin-right: 12px; font-size: .7rem; }
  .knowledge-featured .article-image { min-height: 245px; }
  .knowledge-featured .article-content { padding: 28px 23px 31px; }
  .knowledge-library .section-heading { display: block; margin-bottom: 28px; }
  .knowledge-library .article-grid { gap: 34px; }
  .knowledge-library .article-card .article-image { min-height: 205px; }
  .knowledge-newsletter { padding: 34px 24px; }
  .knowledge-newsletter__copy h2 { font-size: clamp(2rem,9.5vw,2.75rem); }
  .knowledge-newsletter__form-panel { padding: 18px; }
  .knowledge-newsletter__form-panel .subscribe-bar { grid-template-columns: 1fr; }
  .knowledge-newsletter__form-panel .subscribe-bar .button { width: 100%; }
}

/* Knowledge library: article rows keep title, summary and publication date scannable. */
.knowledge-library .article-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.knowledge-library .article-card { display: grid; grid-template-columns: 252px minmax(0,1fr); min-height: 202px; overflow: hidden; border: 1px solid #e0e5eb; border-radius: 14px; background: #fff; }
.knowledge-library .article-card:hover { border-color: #e6bb70; box-shadow: 0 12px 26px rgba(41,53,73,.07); transform: translateY(-2px); }
.knowledge-library .article-card[hidden] { display: none !important; }
.knowledge-library .article-card .article-image { min-height: 0; height: 100%; border: 0; border-right: 1px solid #e0e5eb; border-radius: 0; box-shadow: none; }
.knowledge-library .article-card .article-content { display: grid; grid-template-columns: minmax(0,1fr) 142px; grid-template-rows: auto auto 1fr; align-content: center; column-gap: 28px; row-gap: 0; padding: 26px 30px; }
.knowledge-library .article-card .article-tag, .knowledge-library .article-card h3, .knowledge-library .article-card p { grid-column: 1; }
.knowledge-library .article-card h3 { margin-top: 9px; margin-bottom: 8px; font-size: 1.16rem; }
.knowledge-library .article-card p { align-self: start; margin: 0; }
.knowledge-library .article-card .article-meta { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; margin: 0; padding-left: 22px; border-left: 1px solid #e8edf2; color: #7a8798; font-size: .72rem; text-align: right; }
.knowledge-library .article-card .article-meta .separator { display: none; }
.knowledge-library .article-card .article-meta span:first-child { color: #a65a16; font-weight: 750; }
.knowledge-library .article-card .article-meta span:last-child::before { display: block; margin-bottom: 4px; color: #a4adba; content: "Tạo ngày"; font-size: .61rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 700px) {
  .knowledge-library .article-card { grid-template-columns: 1fr; }
  .knowledge-library .article-card .article-image { min-height: 190px; border-right: 0; border-bottom: 1px solid #e0e5eb; }
  .knowledge-library .article-card .article-content { display: block; padding: 22px; }
  .knowledge-library .article-card .article-meta { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 14px; padding-left: 0; border-left: 0; text-align: left; }
  .knowledge-library .article-card .article-meta .separator { display: block; }
  .knowledge-library .article-card .article-meta span:last-child::before { display: none; }
}

/* Compact editorial cards: three readable knowledge entries per desktop row. */
.knowledge-library .article-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.knowledge-library .article-card { display: block; min-height: 350px; overflow: hidden; border-color: #e1e6ed; border-radius: 12px; }
.knowledge-library .article-card .article-image { display: block; height: 118px; min-height: 0; border: 0; border-bottom: 1px solid #e5eaf0; background: #f3f6f9; }
.knowledge-library .article-card .article-image img { object-position: center top; }
.knowledge-library .article-card .article-content { display: flex; min-height: 230px; flex-direction: column; padding: 21px 24px 20px; }
.knowledge-library .article-card .article-tag, .knowledge-library .article-card h3, .knowledge-library .article-card p { display: block; }
.knowledge-library .article-card h3 { margin: 11px 0 9px; font-size: 1.04rem; line-height: 1.35; }
.knowledge-library .article-card p { margin: 0; font-size: .79rem; }
.knowledge-library .article-card .article-meta { display: flex; grid-column: auto; grid-row: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin-top: auto; padding: 15px 0 0; border-top: 1px solid #edf0f3; border-left: 0; color: #8691a0; font-size: .67rem; text-align: left; }
.knowledge-library .article-card .article-meta .separator { display: block; }
.knowledge-library .article-card .article-meta span:first-child { color: #a65a16; }
.knowledge-library .article-card .article-meta span:last-child::before { display: inline; margin: 0 4px 0 0; color: #a4adba; content: "Tạo ngày "; font-size: inherit; letter-spacing: 0; text-transform: none; }

@media (max-width: 1050px) {
  .knowledge-library .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .knowledge-library .article-grid { grid-template-columns: 1fr; }
  .knowledge-library .article-card { min-height: 0; }
  .knowledge-library .article-card .article-image { height: 185px; }
  .knowledge-library .article-card .article-content { min-height: 230px; }
}

/* ==========================================================================
   Interactive Cost Calculator & Competitor Comparison
   ========================================================================== */
.calc-section {
  padding: 85px 0 95px;
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.calc-wrapper {
  max-width: 1040px;
  margin: 0 auto;
}
.calc-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.calc-controls {
  margin-bottom: 36px;
}
.calc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.calc-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.calc-value-display {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--amber-700);
  font-family: var(--font-mono);
}
.calc-slider-wrap {
  position: relative;
  margin: 20px 0 15px;
}
.calc-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
  transition: background .2s;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.5);
}
.calc-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
  cursor: grab;
}
.calc-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.calc-chip {
  padding: 6px 14px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.calc-chip:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.calc-chip.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.calc-freq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e2e8f0;
  flex-wrap: wrap;
}
.calc-freq-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
}
.calc-freq-options {
  display: flex;
  gap: 8px;
}
.calc-freq-btn {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.calc-freq-btn.active {
  background: var(--amber-100);
  border-color: var(--amber);
  color: var(--amber-900);
}

/* Savings Banner */
.calc-savings-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 24px 30px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.calc-savings-copy h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: #ffffff;
}
.calc-savings-copy p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}
.calc-savings-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
}
.calc-savings-badge {
  background: #10b981;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.calc-savings-amount {
  font-size: 1.85rem;
  font-weight: 800;
  color: #34d399;
  font-family: var(--font-mono);
}

/* Visual Comparison Bars Grid */
.calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.calc-card {
  padding: 22px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  position: relative;
}
.calc-card--featured {
  background: #ffffff;
  border: 2px solid var(--amber);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.12);
  transform: scale(1.02);
  z-index: 2;
}
.calc-card-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: #64748b;
}
.calc-card--featured .calc-card-tag {
  color: var(--amber-700);
}
.calc-card h4 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: var(--ink);
}
.calc-card-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.calc-card--featured .calc-card-price {
  color: #047857;
}
.calc-card-subtext {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 14px;
  min-height: 34px;
}
.calc-card-bar-wrap {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: auto;
}
.calc-card-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.calc-card--featured .calc-card-bar {
  background: #10b981;
}
.calc-card--mailchimp .calc-card-bar {
  background: #f59e0b;
}
.calc-card--klaviyo .calc-card-bar {
  background: #ef4444;
}
.calc-card--active .calc-card-bar {
  background: #3b82f6;
}
.calc-card--brevo .calc-card-bar {
  background: #06b6d4;
}

.calc-competitor-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.calc-mini-item {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.calc-mini-name {
  font-size: 0.82rem;
  font-weight: 750;
  color: #334155;
  margin-bottom: 4px;
}
.calc-mini-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-mono);
}
.calc-mini-diff {
  font-size: 0.72rem;
  color: #dc2626;
  font-weight: 600;
}

.calc-breakdown-note {
  margin-top: 24px;
  padding: 14px 18px;
  background: #f1f5f9;
  border-radius: 10px;
  font-size: 0.82rem;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .calc-card--featured {
    transform: none;
  }
  .calc-competitor-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .calc-box {
    padding: 24px 16px;
  }
  .calc-savings-banner {
    padding: 18px;
  }
  .calc-competitor-strip {
    grid-template-columns: 1fr;
  }
}