.hero { padding-top: 20px !important; }

/* Header E integration section: named compatibility, not placeholder logos. */
.integrations {
  max-width: none !important;
  margin-top: 0 !important;
  padding: 48px max(46px, 6vw) 46px !important;
  background: linear-gradient(180deg, #f9fcf9 0%, #fff 100%) !important;
}

.client-engagement-section { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(470px, 1.1fr); gap: clamp(48px, 9vw, 135px); align-items: center; padding: 98px max(46px, 9vw); background: #fffaf5; }
.engagement-intro { max-width: 525px; }
.engagement-intro .section-label { color: #d95d1e; font-weight: 800; }
.engagement-intro h2 { margin: 13px 0 18px; color: #071d43; font: 400 clamp(34px, 3.6vw, 55px)/1.12 var(--serif); letter-spacing: -.045em; }
.engagement-intro > p:last-child { margin: 0; color: #526277; font-size: 16px; line-height: 1.75; }
.engagement-moments { display: grid; gap: 0; border-top: 1px solid #f0cdb8; }
.engagement-moments > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding: 23px 0; border-bottom: 1px solid #f0cdb8; }
.engagement-moments span { grid-row: span 2; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #eeae84; border-radius: 50%; color: #d95d1e; font-size: 11px; font-weight: 800; }
.engagement-moments h3 { margin: 1px 0 6px; color: #071d43; font: 700 20px/1.2 var(--serif); letter-spacing: -.03em; }
.engagement-moments p { margin: 0; color: #526277; font-size: 14px; line-height: 1.6; }

/* Homepage backbone: products explain the solution paths without creating a second story. */
.platform-section {
  max-width: none;
  padding: 78px max(46px, 6vw);
  background: #071d43;
  color: #fff;
}
.platform-intro { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.platform-intro .section-label { color: #ffb388; }
.platform-intro h2 { margin: 14px 0 15px; font: 400 clamp(30px, 3vw, 44px)/1.2 var(--serif); letter-spacing: -.035em; }
.platform-intro p:last-child { margin: 0; color: #d9e4f5; font-size: 15px; line-height: 1.7; }
.platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1420px; margin: 0 auto; }
.platform-grid article { display: flex; min-height: 270px; flex-direction: column; padding: 27px 24px 24px; border: 1px solid rgba(219, 234, 246, .24); border-radius: 13px; background: rgba(255, 255, 255, .055); }
.platform-grid span { color: #ff9e66; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.platform-grid h3 { margin: 34px 0 12px; color: #fff; font: 400 20px/1.25 var(--serif); letter-spacing: -.03em; }
.platform-grid p { margin: 0; color: #cfddf1; font-size: 13px; line-height: 1.65; }
.platform-grid a { width: fit-content; margin-top: auto; padding-top: 20px; color: #fff; font-size: 12px; font-weight: 800; }
.platform-grid a::after { margin-left: 7px; content: "→"; color: #ff9e66; }
.platform-grid.practice-map { position: relative; grid-template-columns: minmax(210px, .92fr) minmax(285px, 1.16fr) minmax(210px, .92fr); grid-template-areas: "front crm tax" "operations crm advisory"; max-width: 1250px; gap: 16px 58px; }
.practice-map article { position: relative; min-height: 238px; padding: 20px 8px 22px; border: 0; border-radius: 0; background: transparent; }
.practice-map article > span { display: inline-block; padding-bottom: 11px; border-bottom: 2px solid #ff8a53; }
.practice-map article h3 { max-width: 230px; margin-top: 22px; }
.practice-map article p { max-width: 265px; }
.practice-map article a { padding-top: 16px; }
.practice-map article:nth-child(1) { grid-area: front; }
.practice-map article:nth-child(2) { grid-area: tax; }
.practice-map article:nth-child(3) { display: flex; grid-area: crm; min-height: 492px; align-items: center; flex-direction: column; justify-content: center; padding: 42px 36px; border-left: 1px solid rgba(255, 179, 136, .65); border-right: 1px solid rgba(255, 179, 136, .65); background: linear-gradient(90deg, transparent, rgba(255, 113, 47, .08), transparent); text-align: center; }
.practice-map article:nth-child(3)::before { display: block; width: fit-content; margin: 0 0 28px; color: #ffbe97; content: "SHARED CLIENT RECORD"; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.practice-map article:nth-child(3) > span { padding: 0; border: 0; }
.practice-map article:nth-child(3) h3 { max-width: none; margin: 14px 0 15px; font-size: 34px; }
.practice-map article:nth-child(3) p { max-width: 330px; font-size: 15px; line-height: 1.7; }
.practice-map article:nth-child(1)::after,
.practice-map article:nth-child(4)::after { position: absolute; z-index: 1; right: -59px; width: 58px; border-top: 1px solid rgba(191, 217, 197, .7); content: ""; }
.practice-map article:nth-child(2)::after,
.practice-map article:nth-child(5)::after { position: absolute; z-index: 1; left: -59px; width: 58px; border-top: 1px solid rgba(191, 217, 197, .7); content: ""; }
.practice-map article:nth-child(1)::after,
.practice-map article:nth-child(2)::after { top: 50%; }
.practice-map article:nth-child(4)::after,
.practice-map article:nth-child(5)::after { top: 50%; }
.practice-map article:nth-child(4) { grid-area: operations; }
.practice-map article:nth-child(5) { grid-area: advisory; }
.sticky-demo-bar { position: fixed; z-index: 100; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 18px; max-width: min(620px, calc(100vw - 48px)); padding: 12px 12px 12px 18px; border: 1px solid #dce8de; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(7,29,67,.18); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .22s ease, transform .22s ease; }
.sticky-demo-bar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sticky-demo-bar div { display: grid; gap: 3px; }.sticky-demo-bar strong { color: #071d43; font-size: 13px; }.sticky-demo-bar span { color: #5a6879; font-size: 11px; }.sticky-demo-bar a { flex: 0 0 auto; padding: 12px 16px; border-radius: 7px; background: #ff5208; color: #fff; font-size: 12px; font-weight: 800; }
@media (max-width: 1180px) { .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .platform-grid.practice-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "crm crm" "front tax" "operations advisory"; gap: 16px; } .practice-map article:nth-child(3) { min-height: 240px; } .practice-map article:nth-child(1)::after, .practice-map article:nth-child(2)::after, .practice-map article:nth-child(4)::after, .practice-map article:nth-child(5)::after { display: none; } }
@media (max-width: 900px) { .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .platform-section { padding: 56px 20px; }.platform-grid { grid-template-columns: 1fr; }.platform-grid article { min-height: 210px; }.platform-grid h3 { margin-top: 24px; }.sticky-demo-bar { right: 12px; bottom: 12px; left: 12px; max-width: none; gap: 10px; padding: 10px 10px 10px 13px; }.sticky-demo-bar strong { font-size: 12px; }.sticky-demo-bar span { font-size: 10px; }.sticky-demo-bar a { padding: 11px 13px; white-space: nowrap; } }
.integrations .section-label { color: #23804a !important; font-weight: 800 !important; }
.integrations h2 { max-width: 680px; margin: 14px auto 40px !important; color: #071d43; font-size: clamp(29px, 3vw, 42px) !important; }
.integrations .logo-grid { max-width: 1220px; gap: 14px !important; margin: 0 auto; }
.integrations .logo-grid.integration-carousel {
  max-width: none;
  overflow: hidden;
  display: block;
  padding: 8px 0 20px;
}
.integration-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: integration-scroll 32s linear infinite;
  will-change: transform;
}
.integrations .logo-grid > .integration-logo,
.integrations .logo-grid > .integration-track > .integration-logo {
  width: 176px; min-height: 132px; height: auto; border: 1px solid #d9e5db; border-radius: 12px; background: #fff;
  box-shadow: 0 9px 28px rgba(7, 29, 67, .045); color: #071d43; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; padding: 17px 12px;
}
.integration-logo img { display: block; width: 42px; height: 42px; object-fit: contain; }
.integration-logo .integration-name { font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.integration-logo .integration-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #eef6f0; color: #23804a; font-family: var(--sans); font-size: 18px; font-weight: 900; letter-spacing: -.04em; }
.integration-microsoft-mark { display: grid; width: 42px; height: 42px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.integration-microsoft-mark i:nth-child(1) { background: #f25022; }
.integration-microsoft-mark i:nth-child(2) { background: #7fba00; }
.integration-microsoft-mark i:nth-child(3) { background: #00a4ef; }
.integration-microsoft-mark i:nth-child(4) { background: #ffb900; }
.integration-logo span { color: #587060; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.integration-drake strong { color: #0872b8; }
.integration-crosslink strong { color: #215f95; }
.integration-proconnect strong { color: #1e78b0; }
.integration-mytaxprep strong { color: #3d8a5b; }
.integration-axcess strong { color: #225f97; }
.integration-google strong { color: #2d7a4a; }
.integration-microsoft strong { color: #236bb0; }
.integration-signature strong { color: #6a4a91; }
.integration-quickbooks strong { color: #2b8d52; }
.integration-xero strong { color: #1c8fc9; }
.integration-stripe strong { color: #635bff; }
.integration-paypal strong { color: #0070ba; }
.integration-more strong { color: #42536d; }
.integration-coming { border-style: dashed !important; border-color: #f2ba8f !important; background: #fffaf5 !important; }
.integration-coming span { color: #b85a18; }
.integrations .integration-note { margin: 30px auto 0 !important; color: #42536d; font-size: 14px; font-weight: 600; }
@keyframes integration-scroll { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .integration-track { animation: none; transform: none; } }
.hero { max-width: 1520px !important; padding-right: 46px !important; padding-left: 46px !important; }
.hero-copy { position: relative !important; width: 760px !important; z-index: 1 !important; transform: translateY(-4px) !important; }
.hero-buttons { display: flex !important; }
.hero-buttons .button-secondary { display: none !important; }
.hero-buttons .button:first-child { min-width: 176px !important; font-size: 0 !important; justify-content: center !important; }
.hero-buttons .button:first-child svg { display: none !important; }
.hero-buttons .button:first-child::after { color: #fff; content: "Book a Demo"; font-size: 14px; font-weight: 700; }
.trust { display: none !important; }
.lede { border-left: 3px solid #23804a; font-size: 0 !important; line-height: 1 !important; max-width: 590px !important; padding-left: 16px; }
.lede::after { color: #13254a; content: "✓  TaxAutomate manages every inbound and outbound client touchpoint—calls, texts, meetings, and updates—so nothing falls through the cracks.\A✓  It uses AI-assisted extraction to build a review-ready binder and prepare supported data for your tax software.\A✓  It automates preparation work around your tax software, giving your team more time to assess, advise, and build client relationships.\A✓  One flexible workflow carries every engagement from intake to signature, payment, and ongoing advisory."; display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.85; white-space: pre-line; }
.flow-list { transform: translate(15px, 35px) !important; }
.hero h1 { font-size: 0 !important; font-weight: 700 !important; line-height: 1.34 !important; margin-top: 14px !important; transform: translateY(-14px) !important; }
.hero h1::before { color: #071d43; content: "AI Tax Automation\A & Firm Operations"; display: block; font: 700 67px/1.34 var(--serif); letter-spacing: -.035em; white-space: pre-line; }
.hero h1::after { color: #ff5a0a; content: "for Tax Firms"; display: block; font: 700 67px/1.34 var(--serif); letter-spacing: -.035em; animation: header-d-firm-label 9s steps(1, end) infinite; }
@keyframes header-d-firm-label { 0%, 32% { content: "for Tax Firms"; } 33%, 65% { content: "for CPA Firms"; } 66%, 100% { content: "for Accounting Firms"; } }
.eyebrow { font-size: 0 !important; font-weight: 800 !important; }
.eyebrow::after { content: "ONE PLATFORM FOR FRONT OFFICE, TAX WORK & ADVISORY"; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.flow-card:first-child { width: 75% !important; min-height: 145px !important; margin-left: 170px !important; margin-right: 0 !important; padding: 26px 42px !important; }
.flow-card:first-child h3 { white-space: nowrap !important; }
.flow-card:first-child::after { top: 88px !important; left: -135px !important; z-index: 3 !important; width: 135px !important; height: 96px !important; border-right: 4px solid #23804a !important; border-bottom: 4px solid #23804a !important; border-radius: 0 0 24px 0 !important; background: transparent !important; }
.flow-card:first-child { border-top: 3px solid #cce0d1 !important; border-right: 3px solid #cce0d1 !important; border-bottom-color: transparent !important; }
.flow-card:first-child::before { position: absolute; right: 0; bottom: -1px; left: 0; z-index: 2; height: 1px; background: linear-gradient(90deg, #cce0d1 0%, #cce0d1 48%, rgba(204,224,209,.25) 76%, transparent 100%); content: ""; }
.flow-card:nth-child(3) { position: relative; z-index: 4; width: 90% !important; margin-left: 17px !important; margin-right: 0 !important; }
.flow-card:nth-child(3) { border-top: 3px solid #ffb388 !important; border-right: 3px solid #ffb388 !important; border-left: 3px solid #ffb388 !important; }
.flow-card:nth-child(3) { grid-template-columns: 112px 1fr !important; min-height: 178px !important; padding: 17px 48px 17px 58px !important; transform: translateY(12px) !important; }
.flow-card:nth-child(3) .step { width: 38px !important; height: 38px !important; font-size: 15px !important; }
.flow-card:nth-child(3) .flow-icon { width: 108px !important; height: 108px !important; }
.flow-card:nth-child(3) .flow-icon svg { width: 72px !important; height: 72px !important; }
.flow-card:nth-child(3) h3 { position: relative !important; font-size: 23px !important; line-height: 1.15 !important; letter-spacing: -.035em !important; white-space: nowrap; }
.flow-card:nth-child(3) p { font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; }
.flow-card:nth-child(3)::after { top: 75px !important; left: -1px !important; z-index: 3 !important; width: 66px !important; height: 103px !important; border-left: 4px solid #ff5208 !important; border-bottom: 4px solid #ff5208 !important; border-radius: 0 0 0 24px !important; background: transparent !important; }
.flow-card:nth-child(3)::before { position: absolute; top: 178px; left: 65px; z-index: 3; width: 47px; height: 72px; border-top: 4px solid #23804a; border-right: 4px solid #23804a; border-radius: 0 24px 0 0; content: ""; }
.flow-card:nth-child(2) { position: relative; z-index: 5; transform: translateY(25px) !important; }
.flow-card:nth-child(2) { width: 80% !important; margin-left: 82px !important; margin-right: 0 !important; }
.flow-card:nth-child(2) { border-top: 3px solid #cce0d1 !important; border-right: 3px solid #cce0d1 !important; border-left: 3px solid #cce0d1 !important; }
.flow-card h3 { font-weight: 700 !important; letter-spacing: -.045em !important; }
.flow-card p { font-weight: 600 !important; letter-spacing: -.025em !important; }
.flow-card h3,
.flow-card p { font-size: 0 !important; }
.flow-card:nth-child(3) h3,
.flow-card:nth-child(3) p { font-size: 0 !important; }
.flow-card h3::after,
.flow-card p::after { color: #071d43; display: block; }
.flow-card:first-child h3::after { content: "AI Receptionist"; font: 700 19px/1.25 var(--serif); letter-spacing: -.045em; }
.flow-card:first-child p::after { content: "Answer calls, qualify leads, book appointments, and keep every client inquiry moving."; font-size: 13px; font-weight: 600; line-height: 1.65; }
.flow-card:nth-child(3) h3::after { content: "Tax Automation"; font: 700 23px/1.15 var(--serif); letter-spacing: -.04em; }
.flow-card:nth-child(3) h3::before { position: absolute; top: -22px; right: 0; display: inline-flex; align-items: center; margin: 0; padding: 5px 8px; border: 1px solid #90a4bc; border-radius: 999px; background: #edf2f7; color: #29496f; content: "WORKS WITH YOUR TAX SOFTWARE"; font: 800 9px/1 var(--sans); letter-spacing: .045em; }
.flow-card:nth-child(3) p::after { content: "TaxAutomate moves return work forward in the tax software you already use. Less re-entry. More time for your team to review and advise."; font-size: 17px; font-weight: 700; line-height: 1.45; }
.flow-card:nth-child(3) h3::after,
.flow-card:nth-child(3) p::after { display: block !important; }
.flow-card:nth-child(2) h3::after { content: "Mobile App & Client CRM"; font: 700 19px/1.25 var(--serif); letter-spacing: -.045em; }
.flow-card:nth-child(2) p::after { content: "Give clients a mobile place to upload, sign, pay, and see what comes next—while your firm keeps one connected relationship record."; font-size: 13px; font-weight: 600; line-height: 1.65; }

/* Keep the marketing copy in the document itself, not only in generated CSS. */
.eyebrow { position: relative !important; top: -15px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .06em !important; }
.eyebrow::after,
.hero h1::before,
.hero h1::after,
.lede::after,
.flow-card h3::after,
.flow-card p::after,
.flow-card:nth-child(2) h3::before,
.hero-buttons .button:first-child::after { display: none !important; }
.hero h1 { font: 700 67px/1.34 var(--serif) !important; letter-spacing: -.035em !important; }
.hero h1 .h1-primary,
.hero h1 .h1-audience { display: block; }
.hero h1 .h1-primary { color: #071d43; }
.hero h1 .h1-primary:nth-child(2) { white-space: nowrap; }
.hero h1 .h1-audience { color: #ff5a0a; }
.lede {
  display: grid !important;
  max-width: 520px !important;
  gap: 14px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.lede .hero-proof {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  color: #13254a;
  font-weight: 650;
  letter-spacing: -.012em;
}
.lede .hero-proof::before {
  display: grid;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  place-items: center;
  border: 1px solid rgba(35, 128, 74, .28);
  border-radius: 50%;
  background: #eef7f1;
  color: #23804a;
  content: "✓";
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.flow-card h3 { color: #071d43; font: 700 19px/1.25 var(--serif) !important; }
.flow-card p { color: #071d43; font-size: 13px !important; font-weight: 600 !important; line-height: 1.65 !important; }
.flow-card:nth-child(2) h3 { font-size: 23px !important; line-height: 1.15 !important; letter-spacing: -.04em !important; }
.flow-card:nth-child(2) p { font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; }
.integration-cue { position: absolute; top: -22px; right: 0; display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid #90a4bc; border-radius: 999px; background: #edf2f7; color: #29496f; font: 800 9px/1 var(--sans); letter-spacing: .045em; }
.hero-buttons .button:first-child { font-size: 14px !important; }

@media (prefers-reduced-motion: no-preference) {
  .flow-card:first-child .flow-icon,
  .flow-card:nth-child(3) .flow-icon {
    animation: header-d-icon-float 2.8s ease-in-out infinite;
    will-change: transform;
  }

  .flow-card:nth-child(3) .flow-icon { animation-delay: -1.4s; }

  .flow-card:nth-child(2) .flow-icon {
    animation: header-d-feature-pulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
  }

  .flow-card:first-child::after,
  .flow-card:nth-child(2)::after,
  .flow-card:nth-child(2)::before {
    animation: header-d-path-glow 2.8s ease-in-out infinite;
  }

  .flow-card:nth-child(2)::after { animation-delay: -.9s; }
  .flow-card:nth-child(2)::before { animation-delay: -1.8s; }
}

@keyframes header-d-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px) scale(1.04); }
}

@keyframes header-d-feature-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 82, 8, 0); transform: scale(1); }
  50% { box-shadow: 0 0 0 20px rgba(255, 82, 8, .22), 0 0 30px rgba(255, 82, 8, .34); transform: scale(1.08); }
}

@keyframes header-d-path-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(35, 128, 74, 0)); opacity: 1; }
  50% { filter: drop-shadow(0 0 8px rgba(35, 128, 74, .85)); opacity: .48; }
}

@media (prefers-reduced-motion: no-preference) {
  .flow-card:first-child .flow-icon,
  .flow-card:nth-child(2) .flow-icon,
  .flow-card:nth-child(3) .flow-icon,
  .flow-card:first-child::after,
  .flow-card:nth-child(2)::after,
  .flow-card:nth-child(2)::before {
    animation: none !important;
    filter: none !important;
  }

  .flow-card:nth-child(2) {
    animation: header-d-feature-focus 7s ease-in-out infinite !important;
  }
}

@keyframes header-d-feature-focus {
  0%, 74%, 100% {
    border-color: #ffb388;
    box-shadow: 0 15px 30px rgba(155, 72, 20, .11);
  }
  82%, 91% {
    border-color: #ff5208;
    box-shadow: 0 19px 42px rgba(255, 82, 8, .23), 0 0 0 3px rgba(255, 82, 8, .10);
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 34px 20px 46px !important;
  }

  .hero-copy {
    width: auto !important;
    transform: none !important;
  }

  .hero h1 {
    font-size: 40px !important;
    line-height: 1.16 !important;
    margin-top: 12px !important;
    transform: none !important;
  }

  .hero h1::before {
    font-size: 40px;
    line-height: 1.16;
  }

  .flow-list {
    padding: 30px 0 0 40px !important;
    transform: none !important;
  }

  .flow-card,
  .flow-card:first-child,
  .flow-card:nth-child(2),
  .flow-card:nth-child(3) {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 24px 22px 24px 42px !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .flow-card .flow-icon,
  .flow-card:nth-child(2) .flow-icon {
    width: 76px !important;
    height: 76px !important;
  }

  .flow-card:nth-child(2) .flow-icon svg {
    width: 52px !important;
    height: 52px !important;
  }

  .flow-card h3,
  .flow-card:first-child h3,
  .flow-card:nth-child(2) h3 {
    font-size: 21px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .flow-card p,
  .flow-card:nth-child(2) p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .flow-card .step,
  .flow-card:nth-child(2) .step {
    top: 23px !important;
    left: -23px !important;
  }

  .flow-card::before,
  .flow-card::after {
    display: none !important;
  }

  .flow-card {
    animation: none !important;
  }

  .flow-card h3,
  .flow-card p {
    font-size: 0 !important;
  }

  .flow-card h3::after { font-size: 21px !important; }
  .flow-card p::after { font-size: 14px !important; }
}

/* Remaining homepage sections: a distinct rhythm after products and integrations. */
.homepage-workflow {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: center;
  padding: 92px max(46px, 8vw);
  background: #fff;
}
.workflow-copy { max-width: 470px; }
.workflow-copy .section-label,
.professional-control .section-label,
.homepage-faq .section-label { color: #23804a; font-weight: 800; }
.workflow-copy h2,
.professional-control h2,
.homepage-faq h2 { margin: 13px 0 18px; color: #071d43; font: 400 clamp(31px, 3.2vw, 50px)/1.14 var(--serif); letter-spacing: -.045em; }
.workflow-copy > p:last-child { margin: 0; color: #42536d; font-size: 16px; line-height: 1.72; }
.workflow-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-left: 2px solid #d8e6db; }
.workflow-steps li { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 0 0 27px 29px; }
.workflow-steps li:last-child { padding-bottom: 0; }
.workflow-steps li > span { position: absolute; left: -18px; top: 0; display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #75a881; border-radius: 50%; background: #fff; color: #23804a; font-size: 12px; font-weight: 800; }
.workflow-steps li > div { grid-column: 2; min-width: 0; }
.workflow-steps h3 { margin: 3px 0 7px; color: #071d43; font: 700 20px/1.2 var(--serif); letter-spacing: -.03em; }
.workflow-steps p { max-width: 460px; margin: 0; color: #526277; font-size: 14px; line-height: 1.6; }
.workflow-cta { grid-column: 2; width: fit-content; margin-top: -4px; padding: 14px 19px; border-radius: 7px; background: #ff5208; color: #fff; font-size: 13px; font-weight: 800; }

.professional-control { display: grid; grid-template-columns: minmax(280px, .92fr) minmax(380px, 1.08fr); gap: clamp(42px, 7vw, 110px); align-items: center; padding: 86px max(46px, 8vw); background: #f2f8f3; }
.professional-control h2 { max-width: 530px; }
.control-points { display: grid; gap: 12px; }
.control-points p { display: grid; grid-template-columns: minmax(150px, .8fr) 1.2fr; gap: 18px; margin: 0; padding: 19px 0; border-top: 1px solid #cbdccc; }
.control-points p:last-child { border-bottom: 1px solid #cbdccc; }
.control-points b { color: #071d43; font-size: 14px; }
.control-points span { color: #526277; font-size: 14px; line-height: 1.55; }

.homepage-principles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: none !important; margin: 0 !important; padding: 68px max(46px, 8vw) !important; background: #fff8f1; }
.homepage-principles div { min-height: 132px; padding: 22px 22px 18px; border-left: 3px solid #ff8a53; }
.homepage-principles strong { display: block; color: #071d43; font: 700 20px/1.2 var(--serif); letter-spacing: -.03em; }
.homepage-principles p { margin: 10px 0 0; color: #526277; font-size: 13px; line-height: 1.6; }

.homepage-faq { padding: 92px max(46px, 16vw); background: #fff; }
.homepage-faq > .section-label, .homepage-faq > h2 { max-width: 760px; margin-right: auto; margin-left: auto; text-align: center; }
.homepage-faq h2 { margin-bottom: 35px; }
.faq-list { display: grid; max-width: 860px; margin: 0 auto; border-top: 1px solid #d7e2d8; }
.faq-list details { border-bottom: 1px solid #d7e2d8; }
.faq-list summary { position: relative; padding: 22px 38px 22px 0; color: #071d43; cursor: pointer; font: 700 17px/1.35 var(--serif); list-style: none; }
.faq-list summary::after { position: absolute; right: 4px; color: #23804a; content: "+"; font: 400 28px/1 var(--sans); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 720px; margin: -2px 0 22px; color: #526277; font-size: 14px; line-height: 1.65; }

@media (max-width: 900px) {
  .client-engagement-section { grid-template-columns: 1fr; gap: 38px; padding: 70px 36px; }
  .homepage-workflow, .professional-control { grid-template-columns: 1fr; padding: 68px 36px; }
  .workflow-cta { grid-column: auto; }
  .homepage-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 56px 36px !important; }
  .homepage-faq { padding: 72px 36px; }
}
@media (max-width: 640px) {
  .client-engagement-section { gap: 30px; padding: 56px 20px; }
  .engagement-intro h2 { font-size: 34px; }
  .homepage-workflow, .professional-control { gap: 34px; padding: 56px 20px; }
  .workflow-copy h2, .professional-control h2, .homepage-faq h2 { font-size: 33px; }
  .workflow-steps li { grid-template-columns: 1fr; padding-left: 25px; }
  .workflow-steps li > div { grid-column: 1; }
  .workflow-steps h3 { font-size: 19px; }
  .workflow-cta { width: 100%; text-align: center; }
  .control-points p { grid-template-columns: 1fr; gap: 6px; }
  .homepage-principles { grid-template-columns: 1fr; gap: 6px; padding: 46px 20px !important; }
  .homepage-principles div { min-height: 0; padding: 17px 12px; }
  .homepage-faq { padding: 58px 20px; }
  .faq-list summary { padding: 18px 32px 18px 0; font-size: 16px; }
}

/* Reference-matched connected hero cards. Card 03 is the tax-automation focal point. */
.hero .flow-list {
  display: block !important;
  width: min(100%, 720px) !important;
  margin: 0 0 0 auto !important;
  padding-left: 130px !important;
  overflow: visible !important;
  transform: none !important;
}

.hero .flow-primary,
.hero .flow-secondary {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  gap: 20px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.hero .flow-secondary { margin-top: 56px !important; }

.hero .flow-list .flow-card,
.hero .flow-list .flow-card:first-child,
.hero .flow-list .flow-card:nth-child(2),
.hero .flow-list .flow-card:nth-child(3) {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-height: 150px !important;
  margin: 0 !important;
  padding: 26px 34px 26px 48px !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
  overflow: visible !important;
  transform: none !important;
  border: 1.5px solid #c9dfcf !important;
  border-radius: 17px !important;
  background: linear-gradient(90deg, #fbfdfb 0%, #f7fbf8 100%) !important;
  box-shadow: 0 10px 28px rgba(9, 40, 30, .045) !important;
}

.hero .flow-primary > .flow-card:nth-child(3) {
  z-index: 4 !important;
  width: calc(100% + 125px) !important;
  min-height: 194px !important;
  margin-left: -85px !important;
  padding: 32px 40px 32px 56px !important;
  grid-template-columns: 124px minmax(0, 1fr) !important;
  gap: 30px !important;
  border: 2px solid !important;
  border-color: #ffad7d #ffad7d transparent transparent !important;
  border-radius: 17px 17px 17px 24px !important;
  background:
    linear-gradient(#ffad7d, #ffad7d) left top / 2px 50% no-repeat,
    linear-gradient(#ffad7d, #ffad7d) 100px bottom / calc(100% - 100px) 2px no-repeat,
    linear-gradient(90deg, #fffaf5 0%, #fff8f4 100%) !important;
  box-shadow: 0 18px 38px rgba(155, 72, 20, .15) !important;
}

.hero .flow-list .flow-card .step {
  position: absolute !important;
  top: calc(50% - 24px) !important;
  left: -24px !important;
  z-index: 6 !important;
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1.5px solid #23804a !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #23804a !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .72) !important;
}

.hero .flow-primary > .flow-card:nth-child(3) .step {
  border-color: #f05a20 !important;
  color: #f05a20 !important;
}

.hero .flow-list .flow-card .flow-icon,
.hero .flow-list .flow-card:nth-child(2) .flow-icon,
.hero .flow-list .flow-card:nth-child(3) .flow-icon {
  display: grid !important;
  width: 92px !important;
  height: 92px !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1.5px solid #77ad87 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .42) !important;
  color: #23804a !important;
}

.hero .flow-primary > .flow-card:nth-child(3) .flow-icon {
  width: 116px !important;
  height: 124px !important;
  border-color: #ff8c4b !important;
  border-radius: 20px !important;
  color: #f05a20 !important;
}

.hero .flow-list .flow-card .flow-icon svg { width: 56px !important; height: 56px !important; }
.hero .flow-primary > .flow-card:nth-child(3) .flow-icon svg { width: 76px !important; height: 76px !important; }

.hero .flow-list .flow-card h3,
.hero .flow-list .flow-card:nth-child(2) h3,
.hero .flow-list .flow-card:nth-child(3) h3 {
  position: relative !important;
  margin: 0 0 10px !important;
  color: #071d43 !important;
  font: 700 22px/1.2 var(--serif) !important;
  letter-spacing: -.035em !important;
  white-space: normal !important;
}

.hero .flow-primary > .flow-card:nth-child(3) h3 { font-size: 27px !important; }

.hero .flow-list .flow-card p,
.hero .flow-list .flow-card:nth-child(2) p,
.hero .flow-list .flow-card:nth-child(3) p {
  display: block !important;
  margin: 0 !important;
  color: #213454 !important;
  font: 600 14px/1.55 var(--sans) !important;
}

.hero .flow-primary > .flow-card:nth-child(3) p { font-size: 16px !important; line-height: 1.52 !important; }

.hero .flow-primary > .flow-card:first-child,
.hero .flow-primary > .flow-card:nth-child(2),
.hero .flow-secondary > .flow-card:first-child,
.hero .flow-secondary > .flow-card:nth-child(2) {
  border-top-width: 2.5px !important;
  border-right-width: 2.5px !important;
}

.hero .flow-list .flow-card h3::before,
.hero .flow-list .flow-card h3::after,
.hero .flow-list .flow-card p::after { display: none !important; content: none !important; }
.hero .flow-list .flow-card.is-linked { cursor: pointer !important; }
.hero .flow-list .flow-card.is-linked:focus-visible {
  outline: 3px solid rgba(240, 90, 32, .42) !important;
  outline-offset: 4px !important;
}
.hero .flow-list .flow-card .integration-cue { position: static !important; display: inline-flex !important; margin-left: 9px !important; vertical-align: middle !important; }

.hero .flow-list .flow-card::before,
.hero .flow-list .flow-card::after { display: none !important; content: none !important; }

/* 01 to 02: straight rail. */
.hero .flow-primary > .flow-card:first-child::after,
/* 04 to 05: straight rail. */
.hero .flow-secondary > .flow-card:first-child::after {
  position: absolute !important;
  top: 50% !important;
  left: -2px !important;
  z-index: 1 !important;
  display: block !important;
  width: 4px !important;
  height: 170px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #6da67d !important;
  content: "" !important;
}

/* Finish the 01-to-02 rail inside card 02: above its surface, below its step circle. */
.hero .flow-primary > .flow-card:first-child::after { height: 101px !important; }
.hero .flow-primary > .flow-card:nth-child(2)::before {
  position: absolute !important;
  top: -6px !important;
  left: -2px !important;
  z-index: 1 !important;
  display: block !important;
  width: 4px !important;
  height: calc(50% + 6px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #6da67d !important;
  content: "" !important;
}

/* Split 04-to-05 at the card boundary so neither card surface can hide the rail. */
.hero .flow-secondary > .flow-card:first-child::after { height: 101px !important; }
.hero .flow-secondary > .flow-card:nth-child(2)::before {
  position: absolute !important;
  top: -6px !important;
  left: -2px !important;
  z-index: 1 !important;
  display: block !important;
  width: 4px !important;
  height: calc(50% + 6px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #6da67d !important;
  content: "" !important;
}

/* 02 to highlighted 03: rail bends left. */
.hero .flow-primary > .flow-card:nth-child(2)::after {
  position: absolute !important;
  top: 50% !important;
  left: -2px !important;
  z-index: 1 !important;
  display: block !important;
  width: 4px !important;
  height: 95px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #6da67d !important;
  content: "" !important;
}

/* Curve the incoming green rail into the highlighted card's top edge. */
.hero .flow-primary > .flow-card:nth-child(3)::before {
  position: absolute !important;
  top: -24px !important;
  left: 44px !important;
  z-index: 5 !important;
  display: block !important;
  width: 40px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' preserveAspectRatio='none'%3E%3Cpath d='M40 0V8C40 17 33 24 24 24H0' fill='none' stroke='%236da67d' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  content: "" !important;
}

/* Highlighted 03 to 04: rail returns to the normal card edge. */
.hero .flow-primary > .flow-card:nth-child(3)::after {
  position: absolute !important;
  top: 50% !important;
  left: -2px !important;
  z-index: 1 !important;
  display: block !important;
  width: 174px !important;
  height: calc(50% + 56px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174 162' preserveAspectRatio='none'%3E%3Cpath d='M2 0V82C2 96 13 106 26 106H102' fill='none' stroke='%23f05a20' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M98 106H127C155 106 172 122 172 156V162' fill='none' stroke='%236da67d' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  content: "" !important;
}

/* Continue the green return rail vertically into the center of 04. */
.hero .flow-secondary > .flow-card:first-child::before {
  position: absolute !important;
  top: -56px !important;
  left: 13px !important;
  z-index: 1 !important;
  display: none !important;
  width: 89px !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89 56' preserveAspectRatio='none'%3E%3Cpath d='M0 0H42C70 0 87 16 87 50V56' fill='none' stroke='%236da67d' stroke-width='4' stroke-linecap='butt' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  content: "" !important;
}

@media (min-width: 1001px) {
  .hero.has-product-reveal { min-height: 0 !important; grid-template-columns: 45% 55% !important; align-items: start !important; padding: 88px 58px 66px !important; }
  .hero.has-product-reveal .hero-copy { position: sticky !important; top: 108px !important; width: min(100%, 580px) !important; align-self: start !important; transform: none !important; }
  .hero.has-product-reveal .hero-copy h1,
  .hero.has-product-reveal .hero-copy h1 .h1-primary,
  .hero.has-product-reveal .hero-copy h1 .h1-audience { font-size: clamp(58px, 4.5vw, 68px) !important; font-weight: 800 !important; line-height: 1.18 !important; }
  .hero.has-product-reveal .hero-copy h1 .h1-primary:first-child { white-space: nowrap !important; }
  .hero.has-product-reveal .hero-copy .lede { max-width: 560px !important; }
  .hero.has-product-reveal .flow-list { position: relative !important; top: auto !important; align-self: start !important; perspective: none !important; }
}

@media (max-width: 1180px) and (min-width: 1001px) {
  .hero .flow-list { padding-left: 50px !important; }
  .hero .flow-list .flow-card { padding-right: 24px !important; padding-left: 38px !important; grid-template-columns: 82px minmax(0, 1fr) !important; gap: 18px !important; }
  .hero .flow-primary > .flow-card:nth-child(3) { width: calc(100% + 48px) !important; margin-left: -48px !important; padding: 28px 28px 28px 46px !important; grid-template-columns: 96px minmax(0, 1fr) !important; gap: 22px !important; }
  .hero .flow-list .flow-card .flow-icon { width: 76px !important; height: 76px !important; }
  .hero .flow-primary > .flow-card:nth-child(3) .flow-icon { width: 92px !important; height: 104px !important; }
  .hero .flow-primary > .flow-card:nth-child(2)::after { left: -48px !important; width: 49px !important; }
  .hero .flow-primary > .flow-card:nth-child(3)::after { width: 49px !important; }
}

@media (max-width: 1000px) {
  .hero.has-product-reveal { min-height: auto !important; }
  .hero.has-product-reveal .hero-copy { position: static !important; transform: none !important; }
  .hero .flow-list { width: 100% !important; padding: 42px 0 0 34px !important; }
  .hero .flow-list .flow-card,
  .hero .flow-list .flow-card:first-child,
  .hero .flow-list .flow-card:nth-child(2),
  .hero .flow-list .flow-card:nth-child(3),
  .hero .flow-primary > .flow-card:nth-child(3) {
    width: 100% !important;
    min-height: 142px !important;
    margin: 0 !important;
    padding: 24px 22px 24px 38px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .hero .flow-primary > .flow-card:nth-child(3) { min-height: 166px !important; }
  .hero .flow-list .flow-card .flow-icon,
  .hero .flow-primary > .flow-card:nth-child(3) .flow-icon { width: 72px !important; height: 78px !important; }
  .hero .flow-list .flow-card .flow-icon svg,
  .hero .flow-primary > .flow-card:nth-child(3) .flow-icon svg { width: 46px !important; height: 46px !important; }
  .hero .flow-list .flow-card h3,
  .hero .flow-primary > .flow-card:nth-child(3) h3 { font-size: 20px !important; }
  .hero .flow-list .flow-card p,
  .hero .flow-primary > .flow-card:nth-child(3) p { font-size: 13px !important; }
  .hero .flow-primary > .flow-card:first-child::after,
  .hero .flow-primary > .flow-card:nth-child(2)::after,
  .hero .flow-primary > .flow-card:nth-child(3)::after,
  .hero .flow-secondary > .flow-card:first-child::before,
  .hero .flow-secondary > .flow-card:first-child::after {
    top: 50% !important;
    left: -1px !important;
    width: 2px !important;
    height: 160px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #6da67d !important;
    content: "" !important;
  }
  .hero .flow-primary > .flow-card:nth-child(3)::before {
    display: none !important;
    content: none !important;
  }
  .hero .flow-secondary > .flow-card:first-child::before {
    display: none !important;
    content: none !important;
  }
}

/* Keep the server-rendered homepage hero inside narrow viewports. The original
   desktop treatment gives .hero-copy a fixed width, which otherwise becomes
   the grid track's minimum width on phones. */
@media (max-width: 1000px) {
  .hero.has-product-reveal,
  .hero.has-product-reveal .hero-copy,
  .hero.has-product-reveal .flow-list,
  .hero.has-product-reveal .flow-primary,
  .hero.has-product-reveal .flow-secondary,
  .hero.has-product-reveal .flow-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero.has-product-reveal .hero-copy,
  .hero.has-product-reveal .flow-list,
  .hero.has-product-reveal .flow-primary,
  .hero.has-product-reveal .flow-secondary,
  .hero.has-product-reveal .flow-card {
    width: 100% !important;
  }

  .hero.has-product-reveal .hero-copy h1 .h1-primary:nth-child(2) {
    white-space: normal !important;
  }
}