/* Draft 14: mission first, white/carbon, and a restrained vermilion signal.
   The original stylesheet remains for secondary reference pages. This layer
   owns the shared chrome and the new homepage; product pages are separate. */
:root {
  --paper: #ffffff;
  --ink: #202124;
  --muted: #62646a;
  --accent: #c63f28;
  --blue: var(--accent); /* Compatibility alias for retained reference pages. */
  --neutral: #f4f4f3;
  --display: 'DM Sans', sans-serif;
  --line: #dededb;
  --gutter: clamp(24px, 4.7vw, 80px);
  --max: 1320px;
}
html { scroll-padding-top: 100px; }
body { background: var(--paper); }
h1, h2, h3, h4 { font-weight: 500; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.nav-wrap { min-height: 92px; gap: 28px; padding-block: 14px; }
.brand-wordmark { width: 188px; }
/* The descriptor is live text; the wordmark artwork remains unmodified. Keep
   the signature inside the existing header height and its anchor clearance. */
.brand-signature { flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-descriptor { font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: .035em; padding-left: 6px; color: var(--muted); }
.desktop-nav { gap: clamp(20px, 2.2vw, 36px); font-size: 14px; }
.button { background: var(--ink); color: white; border: 1px solid var(--ink); border-radius: 0; min-height: 52px; padding: 15px 21px; font-size: 13px; gap: 27px; font-weight: 500; }
.button:hover { transform: none; background: var(--accent); border-color: var(--accent); }
.nav-cta { background: white; color: var(--ink); min-height: 44px; padding: 12px 17px; font-size: 12px; gap: 16px; }
.nav-cta:hover { background: var(--accent); color: white; }
.eyebrow { font-size: 10px; letter-spacing: .14em; margin-bottom: 25px; line-height: 1.5; }
.eyebrow::before { width: 14px; height: 2px; border-radius: 0; background: var(--accent); }
.text-link { font-size: 14px; gap: 24px; }
.site-footer { padding-top: 48px; border-top: 1px solid var(--line); }
.footer-top { align-items: start; }
.footer-top p { font-family: var(--body); font-style: normal; font-size: 14px; max-width: 28ch; color: var(--muted); }
.footer-top nav { flex-wrap: wrap; gap: 15px 25px; font-size: 13px; }
.footer-bottom { font-size: 11px; }
.footer-bottom, .trademark { color: var(--muted); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; }
.footer-utilities { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.footer-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; color: var(--ink); }
.footer-linkedin:hover { color: var(--accent); }
.footer-linkedin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shared labels used in the workflow brief. */
.map-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; line-height: 1.6; }

/* Capabilities are an open, ruled index, not four separate product purchases. */
.engagement-section { padding-block: 85px; }
.edition-section-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 9%; }
.edition-section-heading h2 { font-size: clamp(36px, 3.8vw, 53px); line-height: 1.06; letter-spacing: -.05em; }
.edition-section-heading > p { font-size: 16px; max-width: 40ch; line-height: 1.65; padding-bottom: 4px; }
.engagement-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 49px; gap: 28px; }
.engagement-grid article { border-top: 1px solid var(--ink); padding-top: 19px; display: flex; flex-direction: column; }
.capability-index { display: flex; flex-direction: column; gap: 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.capability-index > span:first-child { font-family: var(--display); font-size: 14px; color: var(--accent); }
.engagement-grid h3 { margin-top: 17px; font-size: clamp(22px, 2.25vw, 33px); line-height: 1.08; letter-spacing: -.05em; }
.engagement-grid p { margin-top: 18px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.engagement-grid a { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.engagement-grid a:hover { color: var(--blue); }
.engagement-grid a span { font-size: 19px; color: var(--blue); }

/* An illustrative healthcare workflow appears before the capability index. */
.change-study { background: var(--neutral); color: var(--ink); border-bottom: 1px solid var(--line); padding-block: 75px; margin-top: 0; }
.change-study-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 11%; }
.change-study-copy .eyebrow { color: var(--muted); }
.change-study-copy h2 { font-size: clamp(35px, 3.75vw, 54px); letter-spacing: -.045em; line-height: 1.13; font-weight: 400; }
.change-study-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; margin-top: 25px; color: var(--muted); max-width: 38ch; }
.change-study-copy > .text-link { margin-top: 23px; color: var(--ink); font-size: 13px; }
.change-study-copy > .study-caption { font-size: 10px!important; color: var(--muted)!important; margin-top: 33px!important; }
.change-study-paper { background: var(--paper); color: var(--ink); padding: 30px 33px; border-top: 3px solid var(--accent); }
.study-paper-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 17px; align-items: center; }
.study-platform { font-size: 10px; color: var(--muted); }
.change-study-paper > h3 { font-size: 31px; line-height: 1.12; letter-spacing: -.035em; margin-top: 24px; }
.study-steps { list-style: none; margin: 21px 0 0; padding: 0; }
.study-steps > li { display: grid; grid-template-columns: 27px 1fr; gap: 15px; padding: 21px 0; border-top: 1px solid var(--line); }
.study-step-number { font-size: 11px; color: var(--blue); padding-top: 3px; }
.study-steps h4 { font-family: var(--body); font-size: 14px; letter-spacing: -.01em; line-height: 1.5; }
.study-steps p { font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 7px; }


.deployment-invitation { padding-block: 75px 82px; background: var(--ink); color: white; }
.deployment-invitation-inner { display: grid; grid-template-columns: 1.05fr .75fr; gap: 18%; align-items: end; }
.deployment-invitation h2 { font-size: clamp(43px, 4.7vw, 68px); line-height: 1.05; }
.deployment-invitation h2 + p { margin-top: 23px; font-size: 15px; line-height: 1.75; max-width: 45ch; }
.contact-action { margin-top: 25px; }
.contact-pending { margin-top: 23px; font-size: 12px; color: var(--muted); }
.first-conversation { border-top: 1px solid #68696c; padding-top: 21px; }
.first-conversation > .map-label { font-size: 10px; }
.first-conversation ol { list-style: none; padding: 0; margin: 23px 0 0; counter-reset: first-question; }
.first-conversation li { counter-increment: first-question; padding: 15px 0; border-bottom: 1px solid #55565a; display: flex; align-items: baseline; gap: 20px; font-size: 14px; }
.first-conversation li::before { content: '0' counter(first-question); font-size: 10px; color: #f2917e; }
.conversation-signoff { display: block; font-size: 10px; color: #d5d5d7; margin-top: 25px; }

/* Tablet navigation changes before the desktop links collide. */
@media (max-width: 1100px) {
  .nav-wrap { gap: 20px; }
  .desktop-nav { gap: 17px; font-size: 12px; }
  .brand-wordmark { width: 160px; }
  .nav-cta { font-size: 11px; padding: 12px; gap: 9px; }
  .engagement-grid { gap: 22px; }
  .change-study-grid { gap: 8%; }
}
@media (max-width: 900px) {
  .desktop-nav, .nav-cta { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 2px; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { width: 17px; height: 2px; background: var(--ink); }
  .mobile-nav nav { position: absolute; top: 79px; left: 0; width: 100%; background: var(--paper); display: flex; flex-direction: column; padding: 18px var(--gutter) 28px; border-bottom: 1px solid var(--ink); gap: 0; box-shadow: 0 12px 25px #20212410; }
  .mobile-nav nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .mobile-nav nav a[aria-current] { color: var(--blue); }
  .nav-wrap { min-height: 80px; padding-block: 13px; }
  .map-label { font-size: 8px; }
  .engagement-grid { grid-template-columns: 1fr 1fr; gap: 35px 32px; }
  .engagement-grid h3 { font-size: 30px; }
  .engagement-grid p { font-size: 15px; }
  .engagement-grid a { font-size: 12px; }
  .edition-section-heading { grid-template-columns: 1.15fr .85fr; gap: 7%; }
  .edition-section-heading > p { font-size: 14px; }
  .change-study-grid { gap: 6%; grid-template-columns: .85fr 1.15fr; }
  .change-study-paper { padding: 26px 23px; }
  .change-study-copy > p:not(.eyebrow) { font-size: 14px; }
  .deployment-invitation-inner { gap: 10%; }
}
@media (max-width: 700px) {
  :root { --gutter: 25px; }
  .map-label { font-size: 9px; }
  .engagement-section { padding-block: 62px; }
  .edition-section-heading { grid-template-columns: 1fr; gap: 24px; }
  .edition-section-heading h2 { font-size: clamp(36px, 8.7vw, 49px); }
  .edition-section-heading > p { font-size: 15px; max-width: 44ch; }
  .engagement-grid { margin-top: 32px; }
  .engagement-grid h3 { font-size: 26px; }
  .engagement-grid p { font-size: 13px; }
  .engagement-grid a { font-size: 10px; padding-top: 22px; gap: 7px; }
  .capability-index { font-size: 9px; gap: 10px; }
  .change-study { padding-block: 59px 65px; }
  .change-study-grid { grid-template-columns: 1fr; gap: 38px; }
  .change-study-copy h2 { font-size: 39px; }
  .change-study-copy > p:not(.eyebrow) { font-size: 15px; max-width: 43ch; margin-top: 21px; }
  .change-study-copy > .study-caption { margin-top: 19px!important; }
  .change-study-paper { padding: 25px; margin-right: 0; }
  .study-steps p { font-size: 13px; }
  .deployment-invitation { padding-block: 60px; }
  .deployment-invitation-inner { grid-template-columns: 1fr; gap: 39px; }
  .deployment-invitation h2 { font-size: 47px; }
  .first-conversation { max-width: 460px; }
  .footer-top { gap: 25px; }
  .footer-top p { margin-left: 0; font-size: 12px; }
  .footer-top nav { font-size: 12px; }
  .footer-bottom { flex-wrap: wrap; gap: 9px 24px; }
}
@media (max-width: 380px) {
  :root { --gutter: 20px; }
  .engagement-grid { grid-template-columns: 1fr; gap: 28px; }
  .engagement-grid h3 { font-size: 30px; }
  .engagement-grid p { font-size: 14px; }
  .engagement-grid a { font-size: 12px; }
  .change-study-paper { padding: 23px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none!important; transition: none!important; }
}

/* Shared focus and selection colors. */
::selection { background: #f2d9d3; color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.passage-section { padding-block: 0 90px; }
.passage-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12%; align-items: end; border-top: 1px solid var(--line); padding-top: 70px; }
.passage-intro h2 { font-size: clamp(36px, 3.8vw, 53px); line-height: 1.08; letter-spacing: -.045em; }
.passage-intro > div > p:not(.eyebrow) { font-size: 15px; color: var(--muted); line-height: 1.75; }
.passage-intro .text-link { margin-top: 22px; font-size: 13px; }
.passage-track { list-style: none; padding: 0; margin: 49px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.passage-track li { position: relative; padding: 26px 28px 0 0; border-top: 1px solid var(--ink); }
.passage-track li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--accent); }
.passage-track .map-label { color: var(--muted); font-size: 9px; }
.passage-track strong { display: block; font-size: 23px; font-weight: 500; letter-spacing: -.03em; margin-top: 15px; }
.passage-track p { color: var(--muted); font-size: 12px; line-height: 1.65; margin-top: 9px; max-width: 30ch; }
.deployment-invitation .eyebrow, .deployment-invitation h2 + p { color: #d5d5d7; }
.deployment-invitation .eyebrow::before { background: #f2917e; }
.deployment-invitation .button { background: white; color: var(--ink); border-color: white; }
.deployment-invitation .button:hover { background: #e9e9e7; }

@media (max-width: 900px) {
  .passage-intro { gap: 7%; }
  .passage-track strong { font-size: 20px; }
}
@media (max-width: 700px) {
  .passage-section { padding-block: 0 57px; }
  .passage-intro { grid-template-columns: 1fr; gap: 22px; padding-top: 57px; }
  .passage-intro h2 { font-size: clamp(34px, 8.4vw, 45px); }
  .passage-track { grid-template-columns: 1fr; margin-top: 32px; }
  .passage-track li { padding: 20px 0 26px; }
  .passage-track li:last-child { padding-bottom: 0; }
  .passage-track strong { margin-top: 9px; font-size: 24px; }
  .passage-track p { max-width: none; }
}


/* LOCAL HERO PROTOTYPE — one opening animation, followed by the introduction.
   The opening uses the Company's display scale: 600 / 5.8vw / 1.02.
   Every track shares a 16s loop, including the final hold and quiet reset. */
/* A zero-height fragment target keeps replay anchored above the whole stage. */
html:has(.builder-hero) { scroll-behavior: auto; }
.hero-replay-target { display: block; height: 0; scroll-margin-top: 100px; }
.builder-hero { padding-top: 48px; padding-bottom: 26px; }
.builder-stage { position: relative; display: grid; place-items: center; min-height: clamp(390px, 62svh, 640px); overflow: hidden; isolation: isolate; }
.builder-cycle { position: absolute; inset: 0; pointer-events: none; }
.builder-word, .builder-resolution h1 { font: 600 clamp(48px, 5.8vw, 84px)/1.02 var(--display); letter-spacing: -.055em; }
.builder-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; opacity: 0; animation: builder-word 16s .2s infinite both; }
.builder-word:nth-child(2) { animation-delay: 1.4s; }
.builder-word:nth-child(3) { animation-delay: 2.6s; color: var(--accent); }
.builder-word:nth-child(4) { animation-delay: 3.8s; }
.builder-word:nth-child(5) { animation-delay: 5s; }

/* One repeating 16s timeline: phrase beats at 0.2–6.2s; identity at 6.15s;
   invitation at 6.65s; supporting row at 7.35s. Salesforce settles at 9.92s,
   holds until 15.2s, and the whole group fades before the opening returns.
   Hidden content keeps its layout space, so each restart stays in place. */
.builder-resolution { width: 100%; position: relative; text-align: center; opacity: 1; animation: builder-resolve 16s infinite both; }
.builder-resolution h1 { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .23em; }
.builder-resolution h1 span:last-child { color: var(--accent); }
.builder-tagline { max-width: none; margin-top: 24px; font: 500 clamp(26px, 2.6vw, 36px)/1.2 var(--display); letter-spacing: -.035em; animation: builder-invite 16s infinite both; }
/* The inline grid reserves Salesforce's width. These word tracks share the
   full hero clock rather than starting an independent, drifting sub-loop. */
.builder-tagline-visual { display: inline-flex; align-items: baseline; gap: .22em; }
.builder-rotator { display: inline-grid; text-align: left; }
.builder-rotator > span { grid-area: 1 / 1; }
.builder-work { opacity: 1; animation: builder-work 16s ease-in-out infinite both; }
.builder-flow { opacity: 0; animation: builder-flow 16s ease-in-out infinite both; }
.builder-salesforce { opacity: 0; animation: builder-salesforce 16s ease-in-out infinite both; }
.builder-roles { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 28px; list-style: none; width: fit-content; max-width: 100%; padding: 22px 0 0; margin: 38px auto 0; border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(13px, 1.25vw, 15px); line-height: 1.5; opacity: 1; animation: builder-roles 16s infinite both; }
.builder-roles li { white-space: nowrap; }
.builder-roles li:nth-child(3) { color: var(--accent); }
.builder-hero-footer { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding-top: 8px; }
.builder-scroll { display: grid; place-items: center; width: 40px; height: 40px; font-size: 24px; }
.builder-scroll:hover { color: var(--accent); }
.hero-motion-controls { display: flex; align-items: center; gap: 23px; min-height: 32px; }
.hero-pause-input { width: 13px; height: 13px; padding: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.hero-pause-control { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 11px; color: var(--muted); padding-block: 8px; }
.hero-pause-control:hover, .hero-replay:hover { color: var(--accent); }
.hero-resume-caption { display: none; }
.hero-replay { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); padding-block: 8px; }
.hero-replay-again, #hero-replay:target + .builder-hero .hero-replay-start { display: none; }
#hero-replay:target + .builder-hero .hero-replay-again { display: inline-flex; }
.hero-pause-input:focus-visible, .hero-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
/* A native checkbox makes pause available to pointer and keyboard users.
   Replay is hidden while paused so a new sequence cannot appear frozen. */
.builder-hero:has(.hero-pause-input:checked) .builder-stage * { animation-play-state: paused!important; }
.builder-hero:has(.hero-pause-input:checked) .hero-pause-caption { display: none; }
.builder-hero:has(.hero-pause-input:checked) .hero-resume-caption { display: inline; }
.builder-hero:has(.hero-pause-input:checked) .hero-replay { display: none!important; }
#hero-replay:target + .builder-hero .builder-word { animation-name: builder-word-replay; }
#hero-replay:target + .builder-hero .builder-resolution { animation-name: builder-resolve-replay; }
#hero-replay:target + .builder-hero .builder-tagline { animation-name: builder-invite-replay; }
#hero-replay:target + .builder-hero .builder-roles { animation-name: builder-roles-replay; }
#hero-replay:target + .builder-hero .builder-work { animation-name: builder-work-replay; }
#hero-replay:target + .builder-hero .builder-flow { animation-name: builder-flow-replay; }
#hero-replay:target + .builder-hero .builder-salesforce { animation-name: builder-salesforce-replay; }
/* Each phrase is visible for 1.2s, then hidden for the rest of its loop.
   Work → Flow retains the approved 80ms handoff (49–49.5% of 16s).
   The parent fades out at 15.2–15.7s before any child resets at 16s. */
@keyframes builder-word { 0% { opacity: 0; transform: translateY(24px); } 1.125%, 5.85% { opacity: 1; transform: translateY(0); } 7.5%, 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes builder-resolve { 0%, 38.4375% { opacity: 0; } 43.125%, 95% { opacity: 1; } 98.125%, 100% { opacity: 0; } }
@keyframes builder-invite { 0%, 41.5625% { opacity: 0; transform: translateY(12px); } 45%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes builder-roles { 0%, 45.9375% { opacity: 0; transform: translateY(8px); } 49.6875%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes builder-work { 0%, 49% { opacity: 1; } 49.5%, 100% { opacity: 0; } }
@keyframes builder-flow { 0%, 49% { opacity: 0; } 49.5%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes builder-salesforce { 0%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }
/* Alternate names restart all tracks together through native fragments. */
@keyframes builder-word-replay { 0% { opacity: 0; transform: translateY(24px); } 1.125%, 5.85% { opacity: 1; transform: translateY(0); } 7.5%, 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes builder-resolve-replay { 0%, 38.4375% { opacity: 0; } 43.125%, 95% { opacity: 1; } 98.125%, 100% { opacity: 0; } }
@keyframes builder-invite-replay { 0%, 41.5625% { opacity: 0; transform: translateY(12px); } 45%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes builder-roles-replay { 0%, 45.9375% { opacity: 0; transform: translateY(8px); } 49.6875%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes builder-work-replay { 0%, 49% { opacity: 1; } 49.5%, 100% { opacity: 0; } }
@keyframes builder-flow-replay { 0%, 49% { opacity: 0; } 49.5%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes builder-salesforce-replay { 0%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }

/* Supporting copy now starts after the opening. The former animated timeline
   becomes a quiet, static illustration of the passage to production. */
.hero-prototype { padding-top: 58px; border-top: 1px solid var(--line); }
.hero-prototype > .eyebrow { color: var(--accent); margin-bottom: 29px; }
.hero-opening { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 7%; align-items: end; }
.hero-opening h2 { font: 400 clamp(40px, 4.8vw, 64px)/1.08 var(--display); letter-spacing: -.058em; }
.hero-opening h2 > span { display: block; }
.hero-opening h2 > span + span { margin-top: 10px; }
.hero-opening h2 em { color: var(--accent); font-family: inherit; font-style: normal; font-weight: inherit; }
.hero-introduction { padding-bottom: 3px; }
.hero-introduction > p { font-size: 16px; line-height: 1.7; max-width: 39ch; }
.hero-introduction .button { margin-top: 24px; font-size: 12px; gap: 29px; }
.hero-deployment { margin-top: 42px; padding: 27px 30px 30px; background: var(--neutral); border-block: 1px solid var(--line); }
.hero-story-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 13px; font-weight: 500; }
.hero-illustrative { color: var(--muted); font-size: 10px; font-weight: 400; }
.hero-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; position: relative; padding: 0; margin: 27px 0 0; }
.hero-flow::before { content: ''; position: absolute; left: 5px; top: 5px; height: 1px; width: 80%; background: #c6c6c2; }
.hero-flow li { position: relative; min-width: 0; padding-right: 10px; }
.hero-flow li:last-child { padding-right: 0; }
.hero-flow-dot { position: relative; z-index: 1; display: block; width: 11px; height: 11px; border: 2px solid var(--neutral); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hero-flow-number { display: block; color: var(--muted); font-size: 9px; margin-top: 19px; }
.hero-flow strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; margin-top: 6px; }
.hero-flow-detail { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 7px; }
.hero-context { display: flex; justify-content: space-between; gap: 25px; padding-block: 24px; font-size: 11px; }
.hero-context p { color: var(--muted); }
.hero-context a { display: inline-flex; align-items: center; gap: 20px; }
.hero-context a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .builder-stage { min-height: 480px; }
  .hero-opening { grid-template-columns: 1fr; gap: 25px; }
  .hero-opening h2 { font-size: clamp(40px, 6.6vw, 58px); }
  .hero-introduction { display: flex; gap: 35px; align-items: center; justify-content: space-between; }
  .hero-introduction > p { font-size: 15px; max-width: 42ch; }
  .hero-introduction .button { margin-top: 0; flex-shrink: 0; font-size: 11px; padding-inline: 15px; gap: 17px; }
  .hero-flow strong { font-size: 13px; }
  .hero-flow-detail { font-size: 10px; }
}
@media (max-width: 600px) {
  .builder-hero { padding-top: 18px; padding-bottom: 16px; }
  .builder-stage { min-height: clamp(360px, 64svh, 520px); }
  .builder-word, .builder-resolution h1 { font-size: clamp(35px, 10.5vw, 60px); }
  .builder-word { padding: 0; }
  .builder-resolution h1 { flex-direction: column; }
  .builder-tagline { font-size: 26px; margin-top: 21px; }
  /* Keep phrases legible on narrow screens; the desktop row wraps naturally. */
  .builder-roles { font-size: 12px; gap: 10px 18px; margin-top: 29px; padding-top: 19px; }
  .hero-prototype { padding-top: 38px; }
  .hero-prototype > .eyebrow { font-size: 9px; margin-bottom: 23px; letter-spacing: .1em; }
  .hero-opening { gap: 23px; }
  .hero-opening h2 { font-size: clamp(32px, 8.8vw, 48px); line-height: 1.09; letter-spacing: -.05em; }
  .hero-introduction { display: block; }
  .hero-introduction > p { font-size: 15px; line-height: 1.75; }
  .hero-introduction .button { margin-top: 22px; font-size: 12px; padding-inline: 18px; gap: 26px; }
  .hero-deployment { margin-top: 31px; padding: 23px 24px 28px; }
  .hero-story-caption { align-items: flex-start; gap: 8px; flex-direction: column; }
  .hero-flow { display: flex; flex-direction: column; margin-top: 22px; }
  .hero-flow::before { width: 1px; height: calc(100% - 43px); top: 8px; left: 5px; }
  .hero-flow li { display: grid; grid-template-columns: 19px 21px 1fr; gap: 0 8px; padding: 0 0 19px; min-height: 67px; }
  .hero-flow li:last-child { padding-bottom: 0; min-height: 43px; }
  .hero-flow-dot { grid-column: 1; grid-row: 1 / 3; margin-top: 3px; }
  .hero-flow-number { grid-column: 2; grid-row: 1; margin-top: 2px; }
  .hero-flow strong { grid-column: 3; grid-row: 1; font-size: 14px; margin-top: 0; }
  .hero-flow-detail { grid-column: 3; grid-row: 2; font-size: 10px; margin-top: 5px; }
  .hero-context { flex-direction: column; gap: 9px; padding-block: 21px; line-height: 1.6; font-size: 10px; }
  .hero-context a { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .builder-hero *, .builder-hero *::before, .builder-hero *::after { animation: none!important; transition: none!important; }
  .builder-cycle, .hero-motion-controls { display: none!important; }
  .builder-resolution, .builder-tagline, .builder-roles { opacity: 1; transform: none; }
  /* The no-motion still emphasizes Salesforce, with no overlapping words. */
  .builder-work, .builder-flow { opacity: 0; visibility: hidden; }
  .builder-salesforce { opacity: 1; visibility: visible; }
}