/* Conversion additions inherit the validated AFK prototype. */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);padding-block:14px;isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0 -12px;z-index:-1;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .nav-pill .nav-jump,.site-header .nav-pill .nav-call{background:transparent;color:var(--ink)}
.site-header .nav-pill .nav-call{font-weight:600}
.site-header .nav-pill .nav-jump,.site-header .nav-pill .nav-call{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .16s ease-out}
.site-header .nav-pill .nav-jump:hover,.site-header .nav-pill .nav-call:hover{background:transparent}
@media(hover:hover) and (pointer:fine){
  .site-header .nav-pill .nav-jump:hover,.site-header .nav-pill .nav-call:hover,.site-header .nav-pill .nav-jump:focus-visible,.site-header .nav-pill .nav-call:focus-visible{text-decoration-color:var(--lime)}
}
@media(prefers-reduced-motion:reduce){.site-header .nav-pill .nav-jump,.site-header .nav-pill .nav-call{transition:none}}
.site-header .logo{flex-shrink:0}
#start,main section[id]{scroll-margin-top:106px}
.hero .card>.diagnostic-promise{display:block;max-width:29ch}
.hero-call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;font-size:13px;margin-top:14px;text-decoration:none}
.hero-call:hover{text-decoration:underline}
.hero-call svg{width:18px;height:18px;flex-shrink:0}
.call-section{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start;padding:var(--section-inset);margin:0 0 var(--space);background:var(--lime);border-radius:var(--radius)}
.call-intro h2{font-size:var(--section-title);font-weight:600;max-width:19ch;line-height:1.12}
.call-intro p{font-size:16px;max-width:43ch;margin:22px 0 0;color:#394b26}
.call-action{display:flex;align-items:flex-start;flex-direction:column;gap:16px;min-width:0}
.call-duration{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.call-duration svg{width:20px;height:20px}
.button-call{background:var(--ink);color:var(--paper);font-size:14px;gap:12px;max-width:100%}
.button-call:hover{background:#35412d}
.button-call svg{flex-shrink:0}
.button-call:disabled{opacity:.75;cursor:not-allowed}
.call-note{font-size:12px;color:#394b26;margin:-5px 0 0}
.call-diagnostic{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#394b26}
.sector-field select{display:block;width:100%;min-height:56px;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:28px;padding:14px 18px}
.sector-field select:focus{border-color:#698547}
@media(max-width:960px){.site-header .nav-jump{display:none}}
@media(max-width:760px){
  .site-header{padding-block:12px;gap:12px}
  .site-header .logo{font-size:35px}
  .site-header .nav-pill{box-shadow:none;padding:0;background:transparent}
  .site-header .nav-pill .nav-call{display:none}
  .site-header .nav-pill .button-compact{display:flex;font-size:12px;padding-inline:14px;gap:8px}
  .hero-call{font-size:12px}
  #start,main section[id]{scroll-margin-top:92px}
  .call-section{grid-template-columns:minmax(0,1fr);gap:28px}
  .call-intro h2 br{display:none}
  .call-intro p{margin-top:18px}
  .analysis .diagnostic-form{grid-row:1}
  .analysis-progress{grid-row:2}
  .analysis-progress .mobile-title{font-size:var(--heading);max-width:none}
}

/* Reading order: proof first, then the optional time estimate. */
main>.time-estimate{margin:0 0 var(--space)}

.site-header .logo{min-height:44px}
.client-case{grid-template-areas:"identity content" "process content";grid-template-rows:auto 1fr}
.case-identity{grid-area:identity;display:block;margin:0;padding:var(--section-inset) var(--section-inset) 0;background:var(--ink);color:var(--paper)}
.case-content{grid-area:content}
.case-visual{grid-area:process;padding-top:0}
.case-fraich .case-identity{background:var(--lime);color:var(--ink)}
@media(max-width:760px){
  .client-case{grid-template-areas:"identity" "content" "process";grid-template-rows:auto}
  .client-case .case-identity{background:#fff;color:var(--ink);padding:28px 24px 0}
  .case-identity .client-context{color:var(--muted);margin-bottom:20px;font-size:14px}
  .client-case .case-content{padding-top:0}
  .client-case .case-visual{padding-top:28px}
}

/* Highlight the offer names while retaining each card's contrast. */
.offer-card h3{align-self:flex-start;background:var(--lime);color:var(--ink);padding:2px 7px;border-radius:2px}
.offer-automation h3{background:var(--ink);color:var(--lime)}

/* Client identity is shared across both columns; emphasis stays selective. */
.client-case{grid-template-areas:"identity identity" "process content";grid-template-rows:auto 1fr}
.client-case .case-identity{display:flex;align-items:flex-start;flex-direction:column;gap:16px;padding:28px var(--section-inset);background:var(--surface,#fff);color:var(--ink)}
.case-brand{min-width:0}
.case-identity .client-name{margin:0;font-size:var(--heading);font-weight:800}
.case-identity .client-context{margin:8px 0 0;color:var(--muted);font-size:14px}
.case-category{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%;padding:7px 14px;border-radius:var(--radius);background:var(--lime);color:var(--ink);font-size:14px;font-weight:600;line-height:1.5}
.client-case .case-visual{padding-top:var(--section-inset)}
:is(.case-comparison,.case-detail,.faq-answer,.method-steps,.offer-description,.founder-message,.call-intro) strong{font-weight:700;color:inherit}
:is(.case-comparison,.case-detail,.faq-answer,.method-steps) strong{color:var(--ink)}
@media(max-width:760px){
  .client-case{grid-template-areas:"identity" "content" "process"}
  .client-case .case-identity{align-items:flex-start;flex-direction:column;gap:16px;padding:28px 24px}
  .case-identity .client-context{margin:8px 0 0}
  .client-case .case-visual{padding-top:28px}
}

/* One illustrative relay: the copy is readable before, during and without motion. */
.case-relay li{border-top:0}
.case-relay li:not(:last-child)::after{content:"";position:absolute;left:3px;top:30px;width:1px;height:100%;background:#506046}
.case-relay li::before{z-index:1}
.case-relay .relay-runner{position:absolute;z-index:2;pointer-events:none;left:-2px;top:25px;width:11px;height:11px;border-radius:50%;background:var(--lime);outline:3px solid var(--ink);opacity:0}
.case-relay.relay-ready:not(.is-complete) li::before{background:#71805f}
.case-relay.is-playing .relay-runner{opacity:1}
.case-relay.is-playing li::before{animation:relay-node .12s ease-out both}
.case-relay.is-playing li:nth-child(2)::before{animation-delay:.48s}
.case-relay.is-playing li:nth-child(3)::before{animation-delay:.88s}
@keyframes relay-node{from{background:#71805f}to{background:var(--lime)}}
@media(prefers-reduced-motion:reduce){
  .case-relay .relay-runner{display:none}
  .case-relay.relay-ready li::before{animation:none;background:var(--lime)}
}

/* Offers: marker reveal followed by the example pictograms. */
.offer-card.is-in-view:not(.motion-settled) h3{animation:offer-marker .5s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms) both}
.offer-card.is-in-view:not(.motion-settled) .offer-usecases svg path,
.offer-card.is-in-view:not(.motion-settled) .offer-usecases svg circle{stroke-dasharray:var(--stroke-length,160);animation:offer-icon .55s ease-out calc(var(--motion-delay,0ms) + var(--icon-delay,180ms)) both}
@keyframes offer-marker{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes offer-icon{from{stroke-dashoffset:var(--stroke-length,160)}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
 .offer-card.is-in-view h3,.offer-card.is-in-view .offer-usecases svg path,.offer-card.is-in-view .offer-usecases svg circle{animation:none;clip-path:none;stroke-dasharray:none;stroke-dashoffset:0}
}

/* Related copy and actions stay together at every viewport width. */
.wrap main .section-intro{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px}
.wrap main .section-intro>p{margin:0;max-width:60ch}
.wrap main .section-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px}