/* claudeai.css
   Version: 1.2.0
   Shared design system for redesigned Dave Talks Business content pages.
   Scoped under .eos-page so it only affects article content that opts in
   via the eos- class vocabulary; it does not touch nav/footer/theme styles.
   Bump the Version line above with each edit so it's easy to confirm which
   copy is live by viewing the deployed file's first few lines. */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

.eos-page {
  --red: #ef233c;
  --navy: #2b2d42;
  --ink: #24242a;
  --gray: #8d99ae;
  --bg: #f6f7f9;
  --white: #fff;
  box-sizing: border-box;
}
.eos-page *,
.eos-page *::before,
.eos-page *::after {
  box-sizing: inherit;
}
.eos-page h1,
.eos-page h2,
.eos-page h3,
.eos-page h4 {
  color: var(--navy);
}

/* Hero header */
.eos-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%);
  color: #fff;
  padding: 48px 32px;
  border-radius: 14px;
  margin: 24px 0 32px;
}
.eos-page .eos-hero h1 {
  color: #fff;
  font-size: 34px;
  letter-spacing: 0.01em;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
}
.eos-hero .eos-subhead {
  font-size: 17px;
  line-height: 1.55;
  color: #e7e9ef;
  max-width: 760px;
  margin: 0 0 20px;
}
.eos-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.eos-pills li {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: #fff;
}
.eos-pills li strong {
  color: var(--red);
  margin-right: 4px;
}

/* Section scaffolding */
.eos-section {
  margin: 0 0 72px;
  padding: 48px 40px;
  border-radius: 16px;
  background: var(--white);
}
.eos-section--alt {
  background: var(--bg);
}
.eos-section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 0;
}
.eos-section-row .eos-section {
  margin-bottom: 0;
}
.eos-section-head {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eos-section-head::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--red);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.eos-page .eos-section-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  border-left: none;
  padding-left: 0;
}
.eos-lead {
  color: #555;
  font-size: 16px;
  margin: 0 0 24px;
}

/* Section icon accents (inline SVG, no external assets, pure CSS pseudo-element
   so there is no HTML node for the CMS's WYSIWYG editor to strip on save).
   Applied via an explicit modifier class on .eos-section-head so any page can
   pick the icon that matches its own heading, regardless of section order. */
.eos-section-head--search::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='20' y1='20' x2='15.6' y2='15.6'/%3E%3C/svg%3E");
}
.eos-section-head--list::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='13' y2='16'/%3E%3C/svg%3E");
}
.eos-section-head--handshake::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.35-9.5-8.5C.8 9 2 5.5 5.5 5c2-.3 3.5.7 4.5 2 1-1.3 2.5-2.3 4.5-2 3.5.5 4.7 4 3 7.5C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
}
.eos-section-head--trend::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3,17 9,11 13,15 21,6'/%3E%3Cpolyline points='15,6 21,6 21,12'/%3E%3C/svg%3E");
}
.eos-section-head--people::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1'/%3E%3Ccircle cx='18' cy='8' r='2.3'/%3E%3Cpath d='M22 21v-1a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
}
.eos-section-head--chart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='20' x2='4' y2='10'/%3E%3Cline x1='10' y1='20' x2='10' y2='4'/%3E%3Cline x1='16' y1='20' x2='16' y2='13'/%3E%3Cline x1='2' y1='20' x2='20' y2='20'/%3E%3C/svg%3E");
}
.eos-section-head--gear::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.eos-section-head--target::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='white'/%3E%3C/svg%3E");
}
.eos-section-head--flag::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h13l-3 4 3 4H5'/%3E%3C/svg%3E");
}
.eos-section-head--money::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

/* Horizontal numbered process strip (3 boxes, then 2 boxes on the row below) */
.eos-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 20px;
  counter-reset: eos-step;
}
.eos-step {
  flex: 0 1 220px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid #e7e9ef;
  border-radius: 14px;
  padding: 28px 20px 24px;
  box-shadow: 0 6px 18px rgba(36, 36, 42, 0.06);
  position: relative;
  align-self: stretch;
  font-size: 15px;
  color: #555;
  line-height: 1.55;
}
/* forces "Implement" to start a new row, leaving Implement + Reinforce together below.
   Styled defensively: the CMS's WYSIWYG editor pads truly-empty elements with a
   non-breaking space on save, so this stays visually collapsed either way. */
.eos-step-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
/* Arrow connectors are authored as a literal "→" character rather than an icon
   font glyph: the CMS editor replaces icon-only elements with a non-breaking
   space on save because it treats them as empty. Real text survives untouched. */
.eos-step-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}
/* Icon styling targets the <i> tag directly (no wrapping <span>): the CMS
   editor strips "empty" wrapper spans on save, so the icon must carry its
   own circular badge styling to survive a paste round-trip. */
.eos-step .eos-step-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--red);
  color: #fff;
  font-size: 30px;
  margin-bottom: 16px;
}
.eos-step .eos-step-icon::after {
  counter-increment: eos-step;
  content: counter(eos-step);
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}
.eos-steps strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin: 2px 0 6px;
}

/* Callout / Q&A boxes */
.eos-callout {
  background: var(--bg);
  border-radius: 10px;
  padding: 26px 28px;
  margin: 0 0 28px;
}
.eos-section--alt .eos-callout {
  background: var(--white);
}
.eos-callout p {
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a3a;
  max-width: 700px;
  margin: 0 0 14px;
}
.eos-callout p:last-child {
  margin-bottom: 0;
}
.eos-qa {
  border: 1px solid #e7e9ef;
  border-radius: 10px;
  padding: 24px 28px;
  background: var(--white);
}
.eos-page .eos-qa h3 {
  font-size: 18px;
  margin: 0 0 10px;
}
.eos-qa p {
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a3a;
  max-width: 700px;
  margin: 0;
}

/* Option / offer cards */
.eos-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin: 0 0 22px;
}
.eos-card {
  background: var(--white);
  border: 1px solid #e7e9ef;
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.eos-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
.eos-card .eos-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.eos-page .eos-card h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.eos-page .eos-card h3 a {
  color: var(--navy);
  text-decoration: none;
}
.eos-page .eos-card h3 a:hover {
  color: var(--red);
}
.eos-card p {
  font-size: 15px;
  line-height: 1.5;
  color: #555;
  margin: 0;
}
.eos-note {
  font-size: 14px;
  color: #666;
  font-style: italic;
  margin: 0;
}

/* Generic clean bullet list (dot marker), reusable for any "who/what/why"
   list across pages: e.g. "Who this is for", "What's included", "Who owns
   decisions". Safe from CMS stripping since every <li> carries real text. */
.eos-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eos-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: #3a3a3a;
}
.eos-list li:last-child {
  margin-bottom: 0;
}
.eos-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}
.eos-page .eos-list li strong {
  color: var(--navy);
}

/* Generic numbered vertical list (red circle marker via counter on the <li>
   itself, not a wrapper) for sequences like an escalation path. */
.eos-ordered {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: eos-ord;
}
.eos-ordered li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: #3a3a3a;
}
.eos-ordered li:last-child {
  margin-bottom: 0;
}
.eos-ordered li::before {
  counter-increment: eos-ord;
  content: counter(eos-ord);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eos-page .eos-ordered li strong {
  color: var(--navy);
}

/* Numbered service/capability cards (grid, no arrows — not a strict flow,
   just a set of numbered offerings). Number badge lives on the card itself
   (a <div> with real text content), never an empty wrapper. */
.eos-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  counter-reset: eos-service;
  margin: 0 0 8px;
}
.eos-service {
  background: var(--white);
  border: 1px solid #e7e9ef;
  border-radius: 12px;
  padding: 24px 22px;
  position: relative;
}
.eos-service::before {
  counter-increment: eos-service;
  content: counter(eos-service);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}
.eos-page .eos-service h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.eos-service p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Price badge, reusable on any engagement/offer page */
.eos-price {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  padding: 10px 22px;
  margin-top: 8px;
}

/* Do / don't comparison panels */
.eos-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.eos-panel {
  border-radius: 12px;
  padding: 26px 28px;
}
.eos-panel-do {
  background: #f0f9f3;
  border: 1px solid #cdeedb;
}
.eos-panel-not {
  background: #fdf1f2;
  border: 1px solid #f6d3d7;
}
.eos-page .eos-panel h4 {
  font-size: 17px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eos-page .eos-panel h4::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
}
.eos-panel-do h4::before {
  background: #2a9d63;
}
.eos-panel-not h4::before {
  background: var(--red);
}
.eos-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eos-panel li {
  font-size: 15.5px;
  line-height: 1.65;
  color: #333;
  padding-left: 26px;
  position: relative;
  margin-bottom: 12px;
}
.eos-panel li:last-child {
  margin-bottom: 0;
}
.eos-panel-do li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #2a9d63;
  font-weight: 700;
}
.eos-panel-not li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-weight: 700;
}

/* Decorative divider between "My Commitment" and "Your Commitment" */
.eos-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1px;
  background: #e7e9ef;
  margin: 0 0 40px;
  position: relative;
}
.eos-divider::before {
  content: "\25C6";
  position: absolute;
  background: var(--white);
  color: var(--red);
  font-size: 14px;
  padding: 0 14px;
}
.eos-section--alt .eos-divider::before {
  background: var(--bg);
}

/* "Your commitment" dark accent panel */
.eos-yourcommit {
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  padding: 28px 30px;
}
.eos-page .eos-yourcommit h3 {
  color: #fff;
  font-size: 18px;
  margin: 0 0 12px;
}
.eos-yourcommit ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
}
.eos-yourcommit li {
  font-size: 15px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
  color: #e7e9ef;
}
.eos-yourcommit li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}
.eos-yourcommit p {
  font-size: 14.5px;
  color: #cfd3dc;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 12px;
}

/* Case study / proof grid */
.eos-impact-lead {
  font-size: 16px;
  color: #555;
  margin: 0 0 28px;
  max-width: 700px;
}
.eos-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.eos-impact-card {
  display: block;
  background: var(--white);
  border: 1px solid #e7e9ef;
  border-radius: 10px;
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.eos-impact-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
.eos-impact-meta {
  font-size: 11.5px;
  color: #8d99ae;
  margin-bottom: 10px;
  line-height: 1.4;
}
.eos-impact-stat {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--red);
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
}
.eos-impact-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef233c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3,17 9,11 13,15 21,6'/%3E%3Cpolyline points='15,6 21,6 21,12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.eos-impact-desc {
  font-size: 14.5px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}
.eos-impact-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
}

/* Testimonial cards with product screenshots. The thumbnail and the quote
   live inside one bordered box (flex row) so the proof and the words read
   as a single unit. Every screenshot shares the same fixed height and is
   never cropped (object-fit: contain) -- the image is free to run as wide
   as it needs to, up to the space left over after the text column. The
   text column is held to a fixed 20% share of the card width. */
.eos-testimonials {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.eos-testimonial {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--white);
  border: 1px solid #e7e9ef;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(36, 36, 42, 0.06);
}
.eos-testimonial-shot,
.eos-testimonial-shots {
  flex: 1 1 80%;
  height: 260px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.eos-testimonial-shot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.eos-testimonial-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}
.eos-testimonial-shot a,
.eos-testimonial-shots a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.eos-testimonial-shots {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2px;
  background: #e7e9ef;
}
.eos-testimonial-shots .eos-testimonial-shot {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  border-radius: 0;
}
.eos-testimonial-body {
  flex: 0 0 20%;
  width: 20%;
  min-width: 0;
}
.eos-testimonial-project {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  margin-bottom: 8px;
}
.eos-page .eos-testimonial blockquote {
  margin: 0;
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: #3a3a3a;
  font-style: italic;
}
.eos-page .eos-testimonial blockquote::before {
  content: "\201C";
  position: absolute;
  left: -3px;
  top: -8px;
  font-size: 28px;
  font-style: normal;
  color: var(--red);
  opacity: 0.5;
  line-height: 1;
}
/* Placeholder attribution line (client name + site) -- styled red on purpose
   as a visual flag that this is dummy copy standing in for the real client
   name/site until it's supplied and swapped in. */
.eos-testimonial-attribution {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.eos-testimonial-attribution-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eos-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.eos-testimonial-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  text-align: right;
}
.eos-testimonial-site {
  font-size: 12.5px;
  color: var(--red);
  text-align: right;
}

/* Responsive breakpoints */
@media (max-width: 900px) {
  .eos-section {
    padding: 36px 28px;
    margin-bottom: 48px;
  }
  .eos-section-row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }
  .eos-section-row .eos-section {
    margin-bottom: 48px;
  }
  .eos-steps {
    gap: 20px 14px;
  }
  .eos-step {
    flex-basis: 180px;
    padding: 22px 16px 20px;
  }
  .eos-step-arrow {
    font-size: 36px;
  }
  .eos-compare {
    grid-template-columns: 1fr;
  }
  .eos-yourcommit ul {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .eos-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .eos-step {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 14px;
    max-width: none;
  }
  .eos-step .eos-step-icon {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  .eos-step-break {
    display: none;
  }
  .eos-step-arrow {
    transform: rotate(90deg);
    font-size: 30px;
  }
  .eos-hero {
    padding: 32px 20px;
  }
  .eos-section {
    padding: 28px 20px;
    margin-bottom: 36px;
    border-radius: 12px;
  }
  .eos-section-head {
    gap: 10px;
  }
  .eos-section-head::before {
    width: 32px;
    height: 32px;
    background-size: 16px 16px;
  }
  .eos-page .eos-section-head h2 {
    font-size: 22px;
  }
  .eos-testimonial {
    flex-direction: column;
  }
  .eos-testimonial-shot,
  .eos-testimonial-shots {
    flex: none;
    width: 100%;
    height: 160px;
  }
  .eos-testimonial-body {
    flex: none;
    width: 100%;
  }
}