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

:root {
  --sand: #FAF6F1;
  --sand-dark: #F0E8DD;
  --warm: #E8793A;
  --warm-light: #FAEDE3;
  --warm-deep: #C4612B;
  --ink: #2C2420;
  --ink-soft: #6B5D52;
  --ink-muted: #9B8E83;
  --cream: #FFFCF8;
  --sage: #7A9B82;
  --sage-light: #EAF2EC;
  --blue: #4A7FAD;
  --blue-light: #E3EEF8;
  --plum: #7C6BA5;
  --plum-light: #EDE8F5;
  --radius: 16px;
  --radius-sm: 10px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  background: var(--sand);
  color: var(--ink);
  line-height: 1.7;
  font-weight: 400;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Stops iOS Safari inflating body copy when a phone is turned landscape. */
  -webkit-text-size-adjust: 100%;
}

/* A long unbroken token (URL, product name) must wrap rather than widen the
   page — horizontal scroll is the single worst mobile failure mode here. */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

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

h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; line-height: 1.2; }

a { color: var(--warm); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- NAV ---- */
nav {
  padding: 28px 0;
  position: relative;
  z-index: 10;
}
nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-placeholder {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo-placeholder span { color: var(--warm); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--warm); }
.nav-links a[aria-current="page"] { color: var(--warm); }
.nav-links a.nav-cta[aria-current="page"] { color: var(--warm-deep); }

nav a.nav-cta {
  font-size: 15px;
  font-weight: 600;
  color: var(--warm-deep);
  text-decoration: none;
  padding: 10px 24px;
  border: 2px solid var(--warm);
  border-radius: 100px;
  transition: all 0.3s ease;
}
nav a.nav-cta:hover {
  background: var(--warm);
  color: #fff;
}

/* ---- PAGE HERO ---- */
.page-hero {
  padding: 72px 0 64px;
  position: relative;
  /* The ::before glow below sits at right:-120px, which on a phone widened the
     document to 510px and gave every inner page a horizontal scrollbar.
     `clip` (not `hidden`) contains it without making this a scroll container,
     and leaving overflow-y visible keeps the glow bleeding above the section. */
  overflow-x: clip;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(232,121,58,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .section-label {
  margin-bottom: 16px;
}
.page-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  color: var(--ink);
  max-width: 720px;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  animation: fadeUp 0.7s ease both;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--warm);
}
.page-hero p {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 560px;
  line-height: 1.8;
  animation: fadeUp 0.7s 0.1s ease both;
}

/* ---- SECTION BASICS ---- */
.section-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warm);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--warm);
  border-radius: 2px;
}

section.content-section {
  padding: 80px 0;
}
section.content-section.alt {
  background: var(--cream);
  border-top: 1px solid rgba(107,93,82,0.06);
  border-bottom: 1px solid rgba(107,93,82,0.06);
}
section.content-section h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
section.content-section h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
section.content-section p {
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: 16px;
  font-size: 16.5px;
}
section.content-section p:last-child { margin-bottom: 0; }

/* ---- CARDS GRID ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
/* Three-up variant. A class, not an inline style, so the mobile rule below can
   still collapse it — an inline grid-template-columns outranks the media query
   and traps the cards in 3 columns on a phone. */
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.card:hover::after { transform: scaleX(1); }
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(44,36,32,0.06);
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon.orange { background: var(--warm-light); color: var(--warm); }
.card-icon.sage { background: var(--sage-light); color: var(--sage); }
.card-icon.plum { background: var(--plum-light); color: var(--plum); }
.card-icon.blue { background: var(--blue-light); color: var(--blue); }
.card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.card p {
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: 15.5px;
  max-width: none;
}

/* ---- SCENARIO BLOCKS ---- */
.scenario {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.scenario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(44,36,32,0.05);
}
.scenario-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.scenario h3 {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  font-style: italic;
}
.scenario p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: none;
}
.scenario .result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(107,93,82,0.08);
  font-weight: 500;
  color: var(--sage);
}

/* ---- STEP LIST ---- */
.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  margin-top: 40px;
}
.step {
  position: relative;
}
.step-number {
  font-family: 'DM Serif Display', serif;
  font-size: 52px;
  color: var(--sand-dark);
  line-height: 1;
  margin-bottom: 14px;
}
.step h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.step p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: none;
}

/* ---- CTA BLOCK ---- */
.cta-block {
  padding: 80px 0;
  text-align: center;
  overflow-x: clip;
}
.cta-card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: 24px;
  padding: 64px 40px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.cta-block h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.cta-block p {
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 32px;
  line-height: 1.75;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.email-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--warm);
  text-decoration: none;
  padding: 16px 40px;
  background: var(--warm-light);
  border-radius: 100px;
  transition: all 0.35s ease;
}
.email-link:hover {
  background: var(--warm);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(232,121,58,0.25);
}
.email-small {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---- TECH NOTE ---- */
.tech-note {
  background: var(--sand-dark);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
  margin-top: 24px;
  max-width: 640px;
}
.tech-note p {
  font-size: 15px;
  color: var(--ink-muted);
  max-width: none;
  margin-bottom: 0;
}
.tech-note strong {
  color: var(--ink-soft);
}

/* ---- ABOUT SECTION ---- */
.about-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.about-highlight {
  text-align: center;
  padding: 32px 20px;
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
}
.about-highlight .stat {
  font-family: 'DM Serif Display', serif;
  font-size: 40px;
  color: var(--warm);
  line-height: 1;
  margin-bottom: 8px;
}
.about-highlight h3 { font-size: 18px; margin-bottom: 6px; }
.about-highlight p { font-size: 15px; color: var(--ink-soft); max-width: none; }

/* ---- BLOG GRID ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.blog-post {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: all 0.3s ease;
}
.blog-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(44,36,32,0.06);
}
.blog-category {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warm);
  margin-bottom: 12px;
}
.blog-post h3 {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1.35;
}
.blog-post p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: none;
}
.blog-post .read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warm);
}

/* ---- ARTICLE ---- */
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 40px;
  font-size: 15px;
  color: var(--ink-muted);
}
.article-meta .author {
  font-weight: 600;
  color: var(--ink-soft);
}
.article-meta .separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.article-body {
  max-width: 680px;
}
.article-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.article-body p {
  color: var(--ink-soft);
  line-height: 1.85;
  font-size: 17px;
  margin-bottom: 20px;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body ul, .article-body ol {
  color: var(--ink-soft);
  line-height: 1.85;
  font-size: 17px;
  margin-bottom: 20px;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body strong {
  color: var(--ink);
  font-weight: 600;
}
.article-body blockquote {
  border-left: 3px solid var(--warm);
  padding: 16px 24px;
  margin: 28px 0;
  background: var(--warm-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-body blockquote p {
  color: var(--ink);
  font-style: italic;
  margin-bottom: 0;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--warm);
  text-decoration: none;
  margin-bottom: 32px;
}
.article-back:hover { text-decoration: underline; }

/* ---- RELATED SERVICES ---- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.related-link {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius-sm);
  padding: 24px 20px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: all 0.3s ease;
}
.related-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(44,36,32,0.05);
}
.related-link h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.related-link p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: none;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ---- FOOTER ---- */
footer {
  padding: 48px 0;
  border-top: 1px solid rgba(107,93,82,0.1);
}
footer .container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-left p {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: none;
}
.footer-links {
  display: flex;
  gap: 32px;
}
.footer-col h3 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--warm); }

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-reveal .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* -- Nav: always visible. No drop-down, nothing hidden behind a tap.
     `display: contents` lifts the links out of their wrapper so the logo and
     the CTA can share the top row and the destinations sit on their own row
     beneath, all reachable without opening anything. -- */
  nav { padding: 18px 0; }
  nav .container { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; column-gap: 16px; }
  .nav-links { display: contents; }
  .logo-placeholder { order: 1; }
  nav a.nav-cta {
    order: 2;
    margin-left: auto;
    padding: 9px 18px;
    font-size: 15px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Forces a line break after the CTA so the destinations always start their
     own row instead of creeping up alongside it. */
  nav .container::after {
    content: '';
    order: 2;
    flex: 0 0 100%;
    height: 0;
  }
  .nav-links a:not(.nav-cta) {
    order: 3;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    color: var(--ink);
  }
  .nav-links a[aria-current="page"] { color: var(--warm); }

  .page-hero { padding: 48px 0; }
  .page-hero p { font-size: 17.5px; }
  section.content-section { padding: 56px 0; }
  .cards-grid,
  .cards-grid--3 { grid-template-columns: 1fr; }
  .about-highlights { grid-template-columns: 1fr; }
  .cta-block { padding: 56px 0; }
  .cta-card { padding: 44px 22px; }
  .cta-block p { font-size: 17px; }

  /* Comfortable thumb targets: these links were 26px tall on a phone. */
  .logo-placeholder { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col a { padding: 9px 0; margin-bottom: 0; }
  .article-back { padding: 10px 0; }
  .email-link { padding: 16px 32px; }

  /* 12px uppercase labels are hard to read at arm's length. */
  .footer-col h3 { font-size: 14px; }
  .scenario-label, .blog-category { font-size: 14px; }

  /* Two compact columns beat one long stack of link groups. */
  footer { padding: 40px 0; }
  footer .container { flex-direction: column; gap: 32px; }
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
  }
}

@media (max-width: 420px) {
  .page-hero h1 { font-size: 32px; }
  .email-link { padding: 15px 22px; font-size: 16.5px; }
  .step-list { gap: 28px; }
}

/* ---- TABLES ----
   Added 2026-07-24. The site had no table styling until the AEO content landed,
   so the first comparison tables shipped with inline styles on seven pages.
   Comparison tables are an AEO requirement in blog-guide.md, so they need real
   rules. Always wrap a wide table in .table-scroll: the container scrolls, the
   page does not, which is the horizontal-scroll rule in CLAUDE.md. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
  border: 1px solid rgba(107,93,82,0.16);
  border-radius: var(--radius-sm);
}
.table-scroll > table { margin: 0; border: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
  margin: 28px 0;
  background: var(--cream);
}
table th,
table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(107,93,82,0.14);
}
table th {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--sand-dark);
  white-space: nowrap;
}
table td { color: var(--ink-soft); }
table tbody tr:last-child th,
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:nth-child(even) td { background: rgba(240,232,221,0.35); }
/* First column reads as a row label in comparison tables. */
table tbody th[scope="row"] { color: var(--ink); font-weight: 600; background: transparent; }

/* ---- LISTS OUTSIDE ARTICLE BODIES ----
   The global reset zeroes padding, and only .article-body styled its lists, so a
   bare <ul> on a service page rendered with clipped markers. */
.content-section ul,
.content-section ol {
  margin: 0 0 20px 0;
  padding-left: 22px;
  color: var(--ink-soft);
}
.content-section li { margin-bottom: 10px; }
.content-section li::marker { color: var(--warm); }

@media (max-width: 768px) {
  table { font-size: 15px; }
  table th, table td { padding: 10px 12px; }
}

/* ---------- Diagrams (inline SVG figures) ----------
   Inline rather than <img> so the labels are real text in the HTML: crawlable,
   selectable, and readable by answer engines. The SVG inherits the page font
   because no font-family is set on it. Do not add one. */
.diagram {
  margin: 36px 0 8px;
}
.diagram-scroll {
  overflow-x: auto;
  background: var(--cream);
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.diagram-scroll svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 620px;
}
.diagram figcaption {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
@media (max-width: 640px) {
  .diagram-scroll { padding: 16px 14px; }
  .diagram figcaption { font-size: 14px; }
}