/*
Theme Name: ClinicVolume
Theme URI: https://clinicvolume.com
Author: ClinicVolume
Description: Bespoke lightweight theme for clinicvolume.com — a marketing agency focused on patient acquisition for doctors, clinics and medical practices. Rose/crimson light theme, fully responsive, no page builder, minimal JS, semantic HTML.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: clinicvolume
*/

/*
  ClinicVolume — single stylesheet, no build step.
  One file deliberately: one render-blocking request beats several, and the
  whole thing is small enough that splitting it buys nothing.

  Palette is rose/crimson + near-black maroon, chosen to stay distinct from
  the operator's other sites (blue, orange, indigo, teal, magenta, violet,
  emerald, gold, lime and cyan are already in use) and to read as warm and
  human rather than clinical-cold blue, which every generic healthcare site
  defaults to. Green/amber/red appear ONLY as functional data colors (growth,
  caution, decline, form success/error) — the error red is deliberately a
  different, more orange-leaning hue than the brand rose so the two are
  never visually confused.

  Every layout rule is mobile-first: base styles target the narrowest
  viewport and min-width media queries add columns as space allows.
*/

/* ---------- Tokens ---------- */
:root {
  --white: #ffffff;
  --gray-50: #fdf6f7;
  --gray-100: #f7ebed;
  --border: #ecdcdf;
  --ink-900: #200a0d;
  --ink-800: #2c1216;
  --ink-700: #3f2027;
  --ink-600: #634147;
  --ink-500: #866269;
  --ink-400: #b19399;

  --plum-900: #2b0508;
  --plum-800: #3d0a10;
  --brand-900: #4c0519;
  --brand-800: #6b0921;
  --brand-700: #8f0f2b;
  --brand-600: #be123c;
  --brand-500: #e11d48;
  --brand-400: #fb7185;
  --brand-100: #ffe4e8;
  --brand-50: #fff1f2;

  --green-600: #15803d;
  --green-50: #ecfdf3;
  --amber-600: #b45309;
  --amber-50: #fffaeb;
  --red-600: #c2410c;
  --red-50: #fef3ee;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(43, 10, 28, 0.05);
  --shadow-md: 0 1px 2px rgba(43, 10, 28, 0.05), 0 14px 30px -14px rgba(43, 10, 28, 0.22);
  --container: 1200px;
  --container-narrow: 760px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-700);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Guards against any single long string (a URL, a keyword) forcing a
     horizontal scrollbar on a 320px phone. */
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink-900);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

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

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

input,
select,
textarea {
  font: inherit;
  color: inherit;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--brand-600);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  padding-block: 3.5rem;
}

.section-tight {
  padding-block: 2.5rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 5.5rem;
  }
}

.section-alt {
  background: var(--gray-50);
}

.section-dark {
  background: var(--plum-900);
  color: #d8c6d0;
}

.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--border);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  margin-top: 0.75rem;
  font-size: clamp(1.55rem, 1.3rem + 1.4vw, 2.25rem);
}

.section-head p {
  margin-top: 0.9rem;
  color: var(--ink-500);
  font-size: 1.05rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  /* Long CTA labels wrap instead of overflowing a narrow phone. */
  text-align: center;
  line-height: 1.3;
}

.btn-primary {
  background: var(--brand-600);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--brand-800);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink-700);
  border-color: var(--border);
}

.btn-secondary:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

/* On the narrowest phones a pair of CTAs stacks full-width rather than
   squeezing two pills onto one line. */
@media (max-width: 400px) {
  .hero-ctas .btn,
  .cta-band-actions .btn {
    width: 100%;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink-900);
  min-width: 0;
}

.brand-mark {
  color: var(--brand-600);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand-name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.brand-name .accent {
  color: var(--brand-600);
}

.brand-tagline {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Below 380px the tagline is the first thing to go, so the logo and the
   menu button always fit on one row. */
@media (max-width: 380px) {
  .brand-tagline {
    display: none;
  }
  .brand-name {
    font-size: 0.95rem;
  }
}

.main-nav {
  display: none;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.main-nav a {
  display: inline-block;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-600);
  font-weight: 500;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--brand-700);
  background: var(--brand-50);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}

.mobile-nav {
  border-top: 1px solid var(--border);
  background: var(--white);
  /* A long menu stays scrollable instead of running off the viewport. */
  max-height: calc(100vh - 4.25rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav ul {
  padding: 0.75rem 0;
}

.mobile-nav a {
  display: block;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 500;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-nav .btn {
  margin: 0.75rem 1.25rem;
}

@media (min-width: 1040px) {
  .main-nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 1039px) {
  .header-actions .btn-primary {
    display: none;
  }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  padding-block: 1rem;
  font-size: 0.85rem;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--ink-500);
}

.breadcrumbs a:hover {
  color: var(--brand-700);
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink-700);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: 2.75rem 3.25rem;
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--white) 65%);
}

@media (min-width: 768px) {
  .hero {
    padding-block: 4.5rem 5rem;
  }
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }
}

/* hero.jpg is 1536x1024 (3:2) — match that ratio exactly so object-fit
   never has to crop it. This class was missing on the aiagents.firm.in
   build and the image rendered stretched as a result; add it up front. */
.hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  aspect-ratio: 3/2;
  max-width: 100%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero h1 {
  font-size: clamp(1.85rem, 1.4rem + 2.2vw, 3rem);
  text-wrap: balance;
}

.hero-lede {
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: var(--ink-600);
  max-width: 46ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero-trust {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-500);
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-trust svg {
  color: var(--green-600);
  flex-shrink: 0;
}

/* ---------- Reporting dashboard mockup ---------- */
.dashboard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
}

@media (min-width: 480px) {
  .dashboard {
    padding: 1.5rem;
  }
}

.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.dashboard-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--green-600);
  font-weight: 600;
}

.dashboard-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green-600);
}

.score-ring-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.score-ring {
  --score: 98;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--brand-600) calc(var(--score) * 1%), var(--gray-100) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.score-ring-inner {
  width: 5.1rem;
  height: 5.1rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-ring-inner strong {
  font-size: 1.6rem;
  color: var(--ink-900);
  line-height: 1;
}

.score-ring-inner span {
  font-size: 0.65rem;
  color: var(--ink-500);
  margin-top: 0.15rem;
}

.score-caption {
  min-width: 0;
}

.score-caption p:first-child {
  font-weight: 700;
  color: var(--ink-900);
}

.score-caption p {
  font-size: 0.9rem;
  color: var(--ink-500);
  margin-top: 0.2rem;
}

.metric-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

@media (min-width: 480px) {
  .metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-card {
  text-align: left;
  min-width: 0;
}

.metric-label {
  font-size: 0.68rem;
  color: var(--ink-500);
}

.metric-value {
  margin-top: 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}

.metric-value.up { color: var(--green-600); }
.metric-value.down { color: var(--red-600); }
.metric-value.flat { color: var(--amber-600); }
.metric-value.brand { color: var(--brand-600); }

.dashboard-note {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--ink-400);
}

/* Channel bars inside the mockup */
.bar-rows {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
}

.bar-row .bar-label {
  color: var(--ink-600);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
  min-width: 0;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-500);
}

.bar-row .bar-value {
  color: var(--ink-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Channel / status badges ---------- */
.severity {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.severity-brand { background: var(--brand-50); color: var(--brand-700); }
.severity-good { background: var(--green-50); color: var(--green-600); }
.severity-warn { background: var(--amber-50); color: var(--amber-600); }
.severity-bad { background: var(--red-50); color: var(--red-600); }

/* ---------- Icon tile ---------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-600);
  flex-shrink: 0;
}

.icon-tile.dark {
  background: var(--plum-900);
  color: var(--white);
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2,
.grid-3 {
  grid-template-columns: 1fr;
}

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

@media (min-width: 640px) {
  .grid-2,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}

a.card {
  text-decoration: none;
  display: block;
  color: inherit;
}

a.card:hover {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card h3 {
  margin-top: 1rem;
  font-size: 1.05rem;
}

.card p {
  margin-top: 0.5rem;
  color: var(--ink-500);
  font-size: 0.92rem;
}

.card-link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}

.card-img {
  margin: -1.5rem -1.5rem 1.25rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16/10;
}

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

/* Problem list */
.problem-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 0;
}

.problem-item svg {
  color: var(--red-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* ---------- Steps ---------- */
.steps-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  position: relative;
  min-width: 0;
}

.step-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-100);
  -webkit-text-stroke: 1px var(--brand-500);
}

.step-card h3 {
  margin-top: 0.75rem;
  font-size: 1rem;
}

.step-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* ---------- Media / split (image + text) ---------- */
.media-split {
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 860px) {
  .media-split {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .media-split.reverse > .media-figure {
    order: 2;
  }
}

.media-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  max-width: 100%;
}

.media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
  border: 1px solid var(--border);
  max-width: 100%;
}

.media-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Before / after ---------- */
.compare-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-card {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border);
  min-width: 0;
}

@media (min-width: 480px) {
  .compare-card {
    padding: 1.75rem;
  }
}

.compare-card.before {
  background: var(--gray-50);
}

.compare-card.after {
  background: var(--brand-50);
  border-color: var(--brand-100);
}

.compare-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.compare-card.after .compare-label {
  color: var(--brand-700);
}

.compare-metrics {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.compare-metrics dt {
  font-size: 0.78rem;
  color: var(--ink-500);
}

.compare-metrics dd {
  margin: 0.2rem 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink-900);
}

.compare-card.after .compare-metrics dd {
  color: var(--brand-700);
}

.compare-note {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--ink-500);
  text-align: center;
}

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

@media (min-width: 640px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .industry-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.industry-card {
  text-align: center;
  padding: 1.5rem 1rem;
}

.industry-card h3 {
  font-size: 0.92rem;
  margin-top: 0.75rem;
}

.industry-card .icon-tile {
  margin-inline: auto;
}

/* ---------- FAQ ---------- */
.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 600;
  color: var(--ink-900);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .faq-icon {
  flex-shrink: 0;
  transition: transform 0.15s ease;
  color: var(--brand-600);
}

.faq-item[open] summary .faq-icon {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 1.1rem;
  color: var(--ink-500);
  max-width: 65ch;
}

/* ---------- Final CTA ---------- */
.cta-band {
  background: var(--plum-900);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--white);
}

@media (min-width: 640px) {
  .cta-band {
    padding: 3rem 1.5rem;
  }
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
}

.cta-band p {
  margin-top: 0.75rem;
  color: #d8c6d0;
  max-width: 46ch;
  margin-inline: auto;
}

.cta-band-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.cta-band .btn-secondary {
  background: transparent;
  border-color: #5c3247;
  color: var(--white);
}

.cta-band .btn-secondary:hover {
  border-color: var(--brand-400);
  color: var(--brand-400);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--border);
  padding-block: 3rem 1.5rem;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-about p {
  margin-top: 0.9rem;
  color: var(--ink-500);
  font-size: 0.9rem;
  max-width: 34ch;
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.9rem;
}

.footer-links li + li {
  margin-top: 0.55rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--ink-600);
  font-size: 0.92rem;
}

.footer-links a:hover {
  color: var(--brand-700);
}

.footer-contact {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.footer-contact a {
  text-decoration: none;
  color: var(--ink-600);
  font-weight: 600;
}

.footer-contact a:hover {
  color: var(--brand-700);
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ink-500);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-legal a {
  text-decoration: none;
  color: var(--ink-500);
}

.footer-legal a:hover {
  color: var(--brand-700);
}

/* ---------- Content pages (blog, legal, article) ---------- */
.prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.prose h2 {
  margin-top: 2.25rem;
  font-size: 1.35rem;
}

.prose h3 {
  margin-top: 1.75rem;
  font-size: 1.08rem;
}

.prose p {
  margin-top: 1rem;
  color: var(--ink-600);
}

.prose ul,
.prose ol {
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
}

.prose ul li {
  display: flex;
  gap: 0.6rem;
  color: var(--ink-600);
}

.prose ul li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-500);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.prose a {
  color: var(--brand-700);
}

/* Tables scroll inside their own box rather than widening the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1.25rem;
}

.prose table,
.table-scroll table {
  font-size: 0.92rem;
  min-width: 32rem;
}

.prose th,
.prose td,
.table-scroll th,
.table-scroll td {
  padding: 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th,
.table-scroll th {
  background: var(--gray-50);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: 1rem;
}

.blog-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card .category {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-500);
}

/* ---------- Form ---------- */
.form-grid {
  display: grid;
  gap: 1rem;
}

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

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  /* 16px stops iOS Safari zooming the page in on focus. */
  font-size: 1rem;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  outline: 2px solid var(--brand-100);
}

.field-note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-500);
}

/* ---------- Pricing ---------- */
.pricing-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 860px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  min-width: 0;
}

.pricing-card.featured {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-md);
  position: relative;
}

.pricing-featured-tag {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-600);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-900);
}

.pricing-price {
  margin-top: 0.5rem;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink-900);
}

.pricing-price span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-500);
}

.pricing-desc {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.pricing-features {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.65rem;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--ink-600);
}

.pricing-features svg {
  color: var(--brand-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.pricing-card .btn {
  margin-top: 1.5rem;
}

/* ---------- Timeline (process) ---------- */
.timeline {
  position: relative;
  padding-left: 2.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 2.25rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--brand-600);
  border: 3px solid var(--brand-100);
}

.timeline-item h3 {
  font-size: 1.05rem;
}

.timeline-item p {
  margin-top: 0.5rem;
  color: var(--ink-500);
  font-size: 0.92rem;
}

/* ---------- Misc ---------- */
.text-center {
  text-align: center;
}

.mt-lg {
  margin-top: 3rem;
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: 3rem;
}

.contact-layout {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.contact-info-list svg {
  color: var(--brand-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.contact-info-list a {
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 600;
}

.contact-info-list a:hover {
  color: var(--brand-700);
}

.error-hero {
  text-align: center;
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .error-hero {
    padding-block: 5rem;
  }
}

.error-code {
  font-size: 4rem;
  font-weight: 800;
  color: var(--brand-600);
}

/* ---------- Mega menu ---------- */
.has-dropdown {
  position: relative;
}

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-600);
  cursor: pointer;
}

.dropdown-trigger:hover,
.dropdown-trigger[aria-expanded="true"] {
  color: var(--brand-700);
  background: var(--brand-50);
}

.dropdown-trigger svg {
  transition: transform 0.15s ease;
}

.dropdown-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(52rem, 92vw);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  z-index: 60;
}

.dropdown-panel[hidden] {
  display: none;
}

.dropdown-col-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 0.6rem;
}

.dropdown-links li + li {
  margin-top: 0.15rem;
}

.dropdown-links a {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
  font-size: 0.88rem;
}

.dropdown-links a:hover {
  background: var(--gray-50);
  color: var(--brand-700);
}

/* Mobile: dropdown groups render as nested <details> inside the mobile menu */
.mobile-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-dropdown summary::-webkit-details-marker {
  display: none;
}

.mobile-dropdown summary svg {
  transition: transform 0.15s ease;
}

.mobile-dropdown[open] summary svg {
  transform: rotate(180deg);
}

.mobile-dropdown .dropdown-links {
  padding: 0.25rem 1.25rem 0.75rem 2rem;
}

.mobile-dropdown .dropdown-links a {
  padding: 0.5rem 0;
  color: var(--ink-500);
}

/* ---------- Platform / capability chips ---------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-600);
}

.badge-chip .dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-500);
}

/* ---------- Category grid ---------- */
.category-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  min-width: 0;
}

.category-card h3 {
  font-size: 1rem;
  color: var(--brand-700);
}

.category-card ul {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

.category-card ul li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-600);
}

.category-card ul li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--brand-500);
  margin-top: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Deliverables matrix ---------- */
.matrix-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.matrix-cell {
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--border);
  min-width: 0;
}

.matrix-cell .matrix-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.matrix-cell h3 {
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.matrix-cell.included {
  background: var(--green-50);
  border-color: #bfe8cf;
}
.matrix-cell.included .matrix-label {
  color: var(--green-600);
}

.matrix-cell.plan {
  background: var(--brand-50);
  border-color: var(--brand-100);
}
.matrix-cell.plan .matrix-label {
  color: var(--brand-700);
}

.matrix-cell.optional {
  background: var(--gray-50);
}
.matrix-cell.optional .matrix-label {
  color: var(--ink-500);
}

.matrix-cell.excluded {
  background: var(--red-50);
  border-color: #f3c9c6;
}
.matrix-cell.excluded .matrix-label {
  color: var(--red-600);
}

/* ---------- Funnel / flow diagrams ---------- */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-node {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.flow-node .icon-tile {
  width: 2.25rem;
  height: 2.25rem;
}

.flow-node span.label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-900);
}

.flow-node.accent {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.flow-connector {
  width: 2px;
  height: 1.4rem;
  background: var(--border);
  position: relative;
}

.flow-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--border);
}

/* Funnel stages */
.funnel {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.funnel-stage {
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  padding: 1rem 1.25rem;
  margin-inline: auto;
  width: 100%;
  text-align: center;
}

.funnel-stage .stage-name {
  font-weight: 700;
  color: var(--brand-800);
  font-size: 0.95rem;
}

.funnel-stage .stage-desc {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: 0.25rem;
}

/* The taper only reads at tablet width and up; on a phone full-width
   stages are clearer than progressively narrower boxes. */
@media (min-width: 768px) {
  .funnel-stage.w1 { width: 100%; }
  .funnel-stage.w2 { width: 86%; }
  .funnel-stage.w3 { width: 72%; }
  .funnel-stage.w4 { width: 58%; }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (min-width: 860px) {
  .stat-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: center;
  min-width: 0;
}

.stat-value {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 800;
  color: var(--brand-600);
  line-height: 1.1;
}

.stat-label {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-500);
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .whatsapp-fab {
    right: 1rem;
    bottom: 1rem;
    width: 3.25rem;
    height: 3.25rem;
  }
}