/* Responsive diagrams and worked examples. No chart values or customer-result claims. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.offer-site .site-header{gap:22px}
.offer-site .site-header nav{margin-left:auto;gap:22px}
.offer-site .site-header nav a{display:flex;align-items:center;min-height:44px}
.offer-site .header-email{min-height:44px;white-space:nowrap}
.menu-toggle{display:none;border:1px solid var(--line);color:var(--dark);background:transparent;border-radius:5px;align-items:center;justify-content:center;padding:0;min-width:44px;min-height:44px}
.menu-toggle path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.offer-site .main-hero{align-items:center;gap:65px}
.delivery-visual{background:#e9edde;border:1px solid #c9d3bc;border-radius:12px;padding:26px 30px 0;position:relative;overflow:hidden}
.visual-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}
.visual-heading .mono{font-size:10px;letter-spacing:.09em;color:#4c614b}
.visual-mark{color:#557448;font-size:24px;line-height:1}
.delivery-path{list-style:none;padding:0;margin:0}
.delivery-path li{display:flex;align-items:flex-start;gap:19px;position:relative;padding:0 0 27px}
.delivery-path li:not(:last-child)::before{content:"";position:absolute;left:17px;top:34px;bottom:0;border-left:1px solid #b9c8aa}
.step-dot{width:35px;height:35px;display:grid;place-items:center;border:1px solid #a9bb96;background:#f7f8f1;border-radius:50%;font:11px ui-monospace,monospace;color:#48623b;flex-shrink:0;position:relative}
.delivery-path li:last-child .step-dot{background:var(--dark);color:var(--white);border-color:var(--dark);font-size:15px}
.delivery-path strong{font-size:17px;line-height:1.4;display:block;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.delivery-path div>span{font-size:12px;line-height:1.6;color:#53624c;display:block}
.visual-next{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #c7d2b9;padding:18px 0;min-height:50px;font-size:12px;font-weight:600;text-decoration:none}
.visual-next:hover{text-decoration:underline}
.offer-site .solution{padding-block:47px;gap:55px}
.offer-site .solution h2{font-size:clamp(32px,3vw,42px);margin-bottom:0}
.offer-site .solution>div:last-child{padding-top:0}
.offer-site .solution .lede{font-size:17px;line-height:1.65;margin-bottom:14px}
.offer-site .solution p:last-child:not(.eyebrow){font-size:14px;margin-bottom:0}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.benefit-figure{margin:0;min-width:0}
.benefit-art{position:relative;width:100%;height:188px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.benefit-art svg{display:block;width:100%;height:166px;overflow:visible}
.diagram-muted{fill:none;stroke:#c27f66;stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round}
.diagram-line,.diagram-arrow{fill:none;stroke:#527449;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.diagram-dot{fill:#527449}
.art-label{font-size:11px;line-height:1.4;color:var(--muted)}
.loop-label{position:absolute;top:93px;left:0;color:#95472f}
.path-labels{display:flex;justify-content:space-between;padding:0 5px;margin-top:-10px;color:#405b37}
.reuse-art{padding-top:2px}
.mini-core{background:var(--dark);color:var(--paper);font-size:14px;text-align:center;border-radius:4px;padding:10px 16px;margin:0 auto;width:max-content}
.reuse-art svg{height:92px}
.project-nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:-4px}
.project-nodes span{font-size:11px;padding:7px 3px;text-align:center;border:1px solid #becbb0;border-radius:4px;background:#e9edde}
.effort-art{padding:12px 0 0;display:flex;flex-direction:column;justify-content:flex-start}
.effort-caption{font-size:11px;color:var(--muted);margin-bottom:15px}
.rebuild-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rebuild-blocks span{border:1px dashed #c49a83;background:#f3e9e0;color:#8b4935;padding:8px;text-align:center;font-size:11px;border-radius:4px}
.reuse-arrow{color:#74886a;text-align:center;font-size:21px;line-height:1.5}
.reuse-blocks{display:flex;gap:7px}
.reuse-blocks span,.reuse-blocks strong{border:1px solid #b9c8aa;font-size:11px;padding:9px 10px;border-radius:4px;text-align:center}
.reuse-blocks span{flex:1;background:#e9edde}
.reuse-blocks strong{font-weight:500;background:var(--dark);color:var(--paper);border-color:var(--dark)}
.benefit-figure h3{font-size:21px;line-height:1.3;letter-spacing:-.03em;margin-bottom:10px}
.benefit-figure p{font-size:14px;line-height:1.7;color:var(--muted);margin:0;max-width:340px}
.case-explorer{border:1px solid #c9d1bf;border-radius:10px;background:var(--white);overflow:hidden}
.case-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:6px;background:#e9edde;gap:6px;border-bottom:1px solid #c9d1bf}
.case-tabs button{min-height:48px;padding:10px 12px;border:1px solid transparent;background:transparent;color:#4c614b;border-radius:5px;font-size:14px;font-weight:500;line-height:1.35;transition:background .18s,color .18s}
.case-tabs button:hover{background:#f5f6ef}
.case-tabs button[aria-selected=true]{background:var(--dark);color:var(--paper);border-color:var(--dark)}
.case-tabs button:focus-visible{outline-offset:-4px;outline-color:#c87556}
.case-panel{padding:30px}
.case-panel + .case-panel{border-top:1px solid var(--line)}
.case-tabs:not([hidden]) ~ .case-panel{border-top:0}
.example-heading{display:flex;align-items:flex-start;gap:30px;justify-content:space-between;margin-bottom:24px}
.example-heading>div{max-width:600px}
.example-heading .eyebrow{font-size:10px;margin-bottom:8px}
.example-heading h3{font-size:27px;line-height:1.2;margin:0;font-weight:550}
.example-heading>p{font-size:13px;color:var(--muted);max-width:220px;margin:25px 0 0}
.example-input{padding:18px 20px;background:#f3f4ee;border:1px solid #dfe2d6;border-radius:6px;margin-bottom:20px}
.example-label{display:block;font:10px/1.5 ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.08em;color:#53624c;margin-bottom:8px;font-weight:600}
.example-input p{font-size:16px;line-height:1.55;margin:0 0 12px;font-weight:500}
.source-tags{display:flex;flex-wrap:wrap;gap:7px 17px;font-size:11px;line-height:1.6}
.source-old{color:#825240}
.source-current{color:#3a6139}
.source-old::before,.source-current::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:currentColor;vertical-align:1px}
.example-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.example-before,.example-after{padding:20px 22px;border-radius:6px;border:1px solid}
.example-before{background:#f8eee8;border-color:#e7cfc0}
.example-after{background:#edf2e5;border-color:#cddbbf}
.example-before .example-label{color:#8b4935}
.example-after .example-label{color:#3a6139}
.example-comparison blockquote{font-size:18px;line-height:1.5;letter-spacing:-.02em;margin:0 0 12px;font-weight:500}
.example-comparison p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.example-change{display:flex;gap:15px;margin:25px 0 22px;align-items:flex-start}
.change-symbol{color:var(--accent);font-size:30px;line-height:1}
.example-change h4{font-size:14px;margin:0 0 5px}
.example-change p{font-size:14px;color:var(--muted);margin:0;line-height:1.65}
.example-metrics{display:flex;gap:18px;font-size:12px;line-height:1.6;color:var(--muted);margin:0;padding:17px 0;border-top:1px solid var(--line)}
.example-metrics strong{white-space:nowrap;color:var(--ink);font-weight:600}
.practice-details{border-top:1px solid var(--line);border-bottom:0}
.practice-details summary{font-size:14px;min-height:48px;padding-block:16px;font-weight:500}
.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:9px 0 4px}
.practice-grid h4{font-size:13px}
.practice-grid p{font-size:13px;color:var(--muted);margin:0;line-height:1.65}
.core-reuse-map{background:#e9edde;border:1px solid #c9d3bc;border-radius:10px;padding:30px}
.core-foundation{background:var(--dark);color:var(--paper);border-radius:6px;padding:25px;text-align:center}
.core-foundation .mono{color:#cfdbc2;font-size:11px}
.core-foundation strong{display:block;font-size:24px;letter-spacing:-.03em;margin:8px 0 12px;line-height:1.4}
.core-foundation p{color:#cfdbc2;font-size:13px;margin:0}
.core-branches{display:grid;grid-template-columns:repeat(3,1fr);height:36px}
.core-branches span{width:1px;background:#7b9366;justify-self:center}
.core-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.core-usecases>div{background:var(--white);border:1px solid #c3cfb6;border-radius:5px;padding:18px;text-align:center}
.core-usecases strong{display:block;font-size:15px;line-height:1.5;margin-bottom:5px}
.core-usecases span{display:block;font-size:12px;color:var(--muted)}
.core-example-link{display:inline-flex;align-items:center;min-height:44px;margin-top:15px}
@keyframes soft-arrival{from{transform:translateY(10px)}to{transform:translateY(0)}}
@keyframes trace-path{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes step-arrival{from{box-shadow:0 0 0 0 #6e8b4550}to{box-shadow:0 0 0 9px #6e8b4500}}
@media(prefers-reduced-motion:no-preference){
 .is-visible .diagram-line{stroke-dasharray:1;animation:trace-path 1.1s ease-out both}
 .delivery-visual.is-visible,.core-reuse-map.is-visible{animation:soft-arrival .6s ease-out both}
 .delivery-visual.is-visible .step-dot{animation:step-arrival .7s ease-out both}
 .delivery-visual.is-visible li:nth-child(2) .step-dot{animation-delay:.25s}
 .delivery-visual.is-visible li:nth-child(3) .step-dot{animation-delay:.5s}
 .delivery-visual.is-visible li:nth-child(4) .step-dot{animation-delay:.75s}
 .case-tabs:not([hidden]) ~ .case-panel:not([hidden]){animation:soft-arrival .22s ease-out both}
}
@media(max-width:1100px){
 .offer-site .site-header{gap:17px}.offer-site .site-header nav{gap:15px;font-size:12px}
 .offer-site .main-hero{gap:38px}.delivery-visual{padding-inline:23px}.delivery-path strong{font-size:16px}
 .benefit-grid{gap:23px}.benefit-figure h3{font-size:19px}.example-heading{display:block}.example-heading>p{max-width:none;margin:12px 0 0}
}
@media(max-width:760px){
 html{scroll-padding-top:90px}
 .offer-site .site-header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;padding:10px 5%;gap:8px;background:var(--paper);box-shadow:0 2px 12px #20282406}
 .offer-site .site-header .brand{font-size:14px;gap:8px;margin-right:auto}
 .offer-site .site-header nav{order:4;margin:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding-top:8px;border-top:1px solid var(--line);font-size:14px}
 .offer-site .site-header nav a{padding:7px 9px;min-height:44px;border-radius:4px}
 .offer-site .site-header nav a:hover{background:var(--green)}
 .offer-site .site-header .header-email{font-size:12px;padding:10px 12px;gap:7px;min-height:44px}
 .offer-site .site-header.nav-ready nav{display:none}
 .offer-site .site-header.nav-ready nav.is-open{display:grid}
 .nav-ready .menu-toggle{display:inline-flex}
 .menu-toggle[aria-expanded=true]{background:var(--green);border-color:#a8b89a}
 .offer-site main{padding-inline:5%}
 .offer-site .main-hero{padding:34px 0 38px;gap:30px}
 .offer-site .main-hero h1{font-size:clamp(44px,10.8vw,64px);margin-bottom:20px}
 .offer-site .main-hero .eyebrow{font-size:10px;letter-spacing:.08em;margin-bottom:18px;max-width:330px}
 .offer-site .hero-promise{font-size:21px;line-height:1.4;margin-bottom:13px}
 .offer-site .main-hero .lede{font-size:16px;line-height:1.6;margin-bottom:0}
 .offer-site .contact-actions{gap:9px;margin-top:23px;width:100%}
 .offer-site .primary-email:not(.header-email){font-size:14px;min-height:50px;width:100%;padding:14px 13px;gap:12px}
 .offer-site .contact-alternatives{display:flex;width:100%;justify-content:space-between;gap:0 12px}
 .offer-site .contact-alternatives .text-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
 .delivery-visual{padding:22px 23px 0;border-radius:9px}
 .visual-heading{margin-bottom:23px}.delivery-path li{gap:15px;padding-bottom:23px}.delivery-path strong{font-size:16px}.delivery-path div>span{font-size:12px}
 .offer-site .solution{padding-block:35px;gap:20px}.offer-site .solution h2{font-size:35px}.offer-site .solution .lede{font-size:16px}
 .offer-site .section{padding-block:40px}.offer-site .section h2{font-size:clamp(33px,8.5vw,43px);line-height:1.1}
 .offer-site .section-heading{gap:17px;margin-bottom:25px}.offer-site .section-heading .eyebrow{margin-bottom:13px}.offer-site .section-heading>p{font-size:15px;line-height:1.65}
 .benefit-grid{grid-template-columns:1fr;gap:30px}
 .benefit-figure{display:grid;grid-template-columns:1fr;gap:0;padding-bottom:0}
 .benefit-art{height:174px;max-width:360px;margin:0 auto 17px;border-bottom:0}
 .benefit-figure:not(:last-child){padding-bottom:27px;border-bottom:1px solid var(--line)}
 .benefit-figure h3{font-size:23px;margin-bottom:8px}.benefit-figure p{font-size:15px;max-width:none}
 .reuse-art{padding-top:5px}.effort-art{padding-top:0;height:160px}
 .case-tabs{gap:4px;padding:5px}.case-tabs button{font-size:12px;min-height:46px;padding:9px 4px}
 .case-panel{padding:21px 18px}.example-heading{margin-bottom:20px}.example-heading h3{font-size:25px;line-height:1.2}.example-heading>p{font-size:13px;line-height:1.6}
 .example-input{padding:15px;margin-bottom:15px}.example-input p{font-size:15px}.source-tags{font-size:11px;gap:6px 10px}
 .example-comparison{grid-template-columns:1fr;gap:12px}.example-before,.example-after{padding:17px}.example-comparison blockquote{font-size:17px}.example-comparison p{font-size:14px}
 .example-change{margin-block:22px;gap:11px}.example-change h4{font-size:15px}.example-change p{font-size:14px}
 .example-metrics{flex-direction:column;gap:5px;font-size:12px;padding-block:16px}.practice-details summary{font-size:14px;padding-right:25px}
 .practice-grid{grid-template-columns:1fr;gap:18px}.practice-grid h4{font-size:14px;margin-bottom:7px}.practice-grid p{font-size:14px}
 .offer-site .learning-list dd,.offer-site .timeline p,.offer-site .experience-list p{font-size:15px}
 .offer-site .offer-rows .text-link{display:inline-flex;align-items:center;min-height:44px}
 .offer-site .about-intro>.text-link{display:inline-flex;align-items:center;min-height:44px}
 .core-reuse-map{padding:20px}.core-foundation{padding:20px 15px}.core-foundation strong{font-size:23px}.core-foundation p{font-size:12px}
 .core-branches{display:none}.core-usecases{grid-template-columns:1fr;gap:13px;margin-top:20px;padding-left:19px;border-left:1px solid #8ca278}.core-usecases>div{position:relative;padding:14px;text-align:left}.core-usecases>div::before{content:"";position:absolute;left:-20px;top:50%;width:19px;height:1px;background:#8ca278}
 .offer-site .closing{padding:36px 20px;margin-block:35px}.offer-site .closing h2{font-size:41px}.offer-site .closing .contact-alternatives{justify-content:space-between}
 .offer-site .site-footer{padding-inline:5%;gap:17px}.offer-site .site-footer>div:nth-child(2){gap:0 22px}.offer-site .site-footer>div:nth-child(2)>a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
 .offer-site .quiz-card .option{padding:14px;font-size:14px;min-height:48px}.offer-site .quiz-actions button{min-height:44px}
}
@media(max-width:360px){
 .offer-site .site-header{padding-inline:4%;gap:6px}.offer-site .site-header .brand{font-size:13px;gap:6px}.offer-site .site-header .header-email{padding-inline:9px;font-size:11px}.offer-site .brand-symbol{width:28px;height:28px}
 .offer-site .main-hero h1{font-size:43px}.offer-site .contact-alternatives{gap:0 8px}.offer-site .contact-alternatives .text-link{font-size:11px}
 .delivery-visual{padding-inline:18px}.delivery-path li{gap:12px}.delivery-path strong{font-size:15px}.visual-next{font-size:11px}
 .case-panel{padding:18px 14px}.example-before,.example-after{padding:15px}.example-heading h3{font-size:23px}
 .offer-site .closing{padding-inline:17px}.offer-site .closing h2{font-size:37px}.offer-site .closing .contact-alternatives{flex-direction:column;align-items:center}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .button:hover{transform:none}
}
