/* /automation/ only (loaded by build.mjs on that page). Automation-specific diagrams and the workflow switcher. Brand, type, buttons,
   page widths, standard cards, header, menu and footer come from /styles.css. */
.automation-page .automation-section{border-top:1px solid var(--line)}
.automation-page .automation-hero h1{max-width:11em}
.automation-page .workflow-board{padding:clamp(20px,2.5vw,32px);background:var(--sage);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.automation-page .board-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px}
/* The board title is the h2 above the scenario panels (h3); it keeps the small mono label look. */
.automation-page .board-top .board-title{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;line-height:inherit;margin:0}
.automation-page .board-mark{border:1px solid #81917b;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;flex:none}
.automation-page .scenario-choice{border:0;padding:0;margin:0 0 22px}
.automation-page .scenario-choice legend{font-size:12px;color:var(--muted);margin-bottom:8px}
.automation-page .scenario-buttons{display:flex;flex-wrap:wrap;gap:8px}
.automation-page .scenario-buttons label{display:flex;align-items:center;gap:7px;padding:10px 12px;min-height:44px;border:1px solid #98a78e;border-radius:6px;font-size:13px;cursor:pointer}
.automation-page .scenario-buttons label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.automation-page .scenario-buttons input{accent-color:var(--orange);width:15px;height:15px;margin:0}
.automation-page .scenario-panel h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;font-weight:800;margin-bottom:24px;max-width:24ch}
.automation-page .lanes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.automation-page .lane-name{font-size:13px;font-weight:700;margin-bottom:14px}
.automation-page .lane-name span{margin-right:6px}
.automation-page .lane ol{list-style:none;margin:0;padding:0 0 0 7px}
.automation-page .lane li{position:relative;border-left:1px solid #a8b59f;padding:0 0 17px 16px;font-size:14px;line-height:1.55;min-height:47px}
.automation-page .lane li:before{position:absolute;content:'';left:-4px;top:7px;width:7px;height:7px;border-radius:50%;border:1px solid #65775c;background:var(--sage)}
.automation-page .lane li:last-child{border-color:transparent;padding-bottom:0}
.automation-page .today{color:var(--muted)}
.automation-page .better li:before{background:var(--ink);border-color:var(--ink)}
.automation-page .better li:last-child{font-weight:700}
.automation-page .work-fragment{background:var(--white);border:1px solid #b9c5b1;border-radius:9px;padding:18px;margin-top:24px}
.automation-page .fragment-top{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--line);font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.03em}
.automation-page .fragment-index{margin-left:auto;color:var(--muted)}
.automation-page .doc-icon{display:block;width:11px;height:14px;border:1px solid currentColor}
.automation-page .work-fragment dl{display:grid;gap:7px;margin:14px 0;font-size:13px}
.automation-page .work-fragment dl>div{display:grid;grid-template-columns:1fr 1.35fr;gap:12px}
.automation-page .work-fragment dt{color:var(--muted)}
.automation-page .work-fragment dd{margin:0;font-weight:600}
.automation-page .missing{color:var(--orange-deep)}
.automation-page .review-state{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700}
.automation-page .exception{border-top:1px solid #b9c5b1;margin-top:20px}
.automation-page .exception summary,.automation-page .automation-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;min-height:52px;padding:12px 0;font-size:14px;font-weight:600}
.automation-page .exception summary::-webkit-details-marker,.automation-page .automation-faq-list summary::-webkit-details-marker{display:none}
.automation-page .exception summary:after,.automation-page .automation-faq-list summary:after{content:'+';font-size:23px;font-weight:400}
.automation-page .exception[open] summary:after,.automation-page .automation-faq-list details[open] summary:after{content:'−'}
.automation-page .exception-body{border-left:2px solid var(--orange);padding:4px 0 8px 15px;font-size:13px;line-height:1.7}
.automation-page .exception-body p{margin-top:6px}
.automation-page .automation-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.automation-page .case-copy .mono{margin-bottom:20px}
.automation-page .case-copy>p:not(.mono){font-size:17px;line-height:1.8;margin-top:22px;color:var(--on-dark-muted)}
.automation-page .case-proof{font-size:14px;border-top:1px solid #637563;padding-top:18px;margin-top:26px;color:var(--on-dark-muted)}
.automation-page .case-proof strong{display:block;color:var(--on-dark);margin-bottom:5px}
.automation-page .case-copy .text-cta{display:inline-block;margin-top:22px;color:var(--on-dark)}
.automation-page .case-diagram{border:1px solid #7c9076;border-radius:var(--radius);padding:26px;background:#2b4436}
.automation-page .diagram-title{font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--on-dark-muted);margin-bottom:25px}
.automation-page .source-card{width:78%;margin:auto;padding:20px;background:var(--paper);color:var(--ink);border-radius:6px;border:1px solid #d1d9c9}
.automation-page .source-card .mono{font-size:10px}
.automation-page .source-card p{font-size:24px;line-height:1.2;font-weight:800;margin-top:9px}
.automation-page .source-lines{display:flex;gap:5px;margin-top:17px}
.automation-page .source-lines span{height:3px;width:35px;background:#bcc8b4}
.automation-page .branch{width:1px;height:28px;background:#abbba3;margin:auto}
.automation-page .approval-band{border:1px solid #9bad91;text-align:center;padding:12px;font-size:13px}
.automation-page .output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding-top:27px;position:relative}
.automation-page .output-grid:before{content:'';position:absolute;top:13px;left:16.6%;right:16.6%;height:1px;background:#9bad91}
.automation-page .output{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;border:1px solid #8da181;padding:14px 11px;min-height:144px;border-radius:5px;background:#324d3d}
.automation-page .output:before{content:'';position:absolute;top:-15px;left:50%;width:1px;height:14px;background:#9bad91}
.automation-page .output-number,.automation-page .output>span:last-child{font:9px/1.5 var(--mono);color:var(--on-dark-muted)}
.automation-page .output p{font-size:19px;line-height:1.25;font-weight:700}
.automation-page .diagram-note{font-size:12px;line-height:1.7;color:var(--on-dark-muted);margin-top:20px}
.automation-page .services-head,.automation-page .method-head{margin-bottom:38px}
.automation-page .services-head .mono,.automation-page .method-head .mono,.automation-page .faq-title .mono,.automation-page .start-copy .mono{margin-bottom:18px}
.automation-page .automation-review{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(28px,5vw,65px);background:var(--sage)!important}
.automation-page .review-intro h3{font-size:clamp(27px,3vw,38px)}
.automation-page .automation-scope-title{font-size:21px!important;font-weight:800;margin:24px 0 10px}
.automation-page .review-boundary{font-size:15px!important;line-height:1.7}
.automation-page .review-details ul{list-style:none;padding:0;margin:20px 0}
.automation-page .review-details li{padding:11px 0 11px 23px;border-top:1px solid #b7c2af;position:relative;font-size:15px}
.automation-page .review-details li:before{content:'↳';position:absolute;left:0}
.automation-page .timing{font-size:15px!important;font-weight:700}
.automation-page .commercial-note{font-size:12px!important;margin-top:15px}
.automation-page .review-after{font-size:14px;color:var(--muted);margin-top:19px;max-width:78ch}
.automation-page .automation-other-routes{margin-top:34px}
.automation-page .automation-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:27px}
.automation-page .automation-step{border-top:1px solid var(--line);padding-top:22px}
.automation-page .automation-step-number{color:var(--orange);font-size:12px;margin-bottom:21px}
.automation-page .automation-step h3{font-size:25px;line-height:1.2;font-weight:800}
.automation-page .automation-step p:last-child{font-size:16px;line-height:1.7;color:var(--muted);margin-top:16px}
.automation-page .automation-about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,6vw,85px)}
.automation-page .automation-about-title{display:flex;gap:23px;align-items:flex-start}
.automation-page .automation-portrait{width:90px;height:113px;object-fit:cover;border-radius:12px;flex:none}
.automation-page .automation-about-title .mono{font-size:9px;margin-bottom:10px}
.automation-page .automation-about-title h2{font-size:34px}
.automation-page .location{font-size:12px;color:var(--muted);margin-top:12px}
.automation-page .about-text>p{font-size:18px;line-height:1.8}
.automation-page .automation-career{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.automation-page .automation-career p{font-size:13px;color:var(--muted)}
.automation-page .automation-career strong{display:block;color:var(--ink);margin-bottom:5px}
.automation-page .about-text .text-cta{display:inline-block;margin-top:21px}
.automation-page .automation-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,85px)}
.automation-page .automation-faq-list{border-top:1px solid var(--line)}
.automation-page .automation-faq-list details{border-bottom:1px solid var(--line)}
.automation-page .automation-faq-list summary{min-height:76px;font-size:16px}
.automation-page .automation-faq-list details>p{font-size:16px;line-height:1.8;color:var(--muted);padding-bottom:25px}
.automation-page .automation-start{background:var(--sage);border-top:1px solid var(--line)}
.automation-page .automation-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,85px);align-items:end}
.automation-page .start-actions>p{font-size:18px;line-height:1.8}
.automation-page .automation-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:24px}
.automation-page .enhancement{display:none}.has-js .automation-page .enhancement{display:block}
.has-js .automation-page .scenario-panel:not([data-active=true]){display:none}
.automation-page .scenario-panel+.scenario-panel{border-top:1px solid var(--line);margin-top:30px;padding-top:30px}
.has-js .automation-page .scenario-panel+.scenario-panel{border:0;margin:0;padding:0}
/* Without JavaScript all three panels show, so keep the hero copy at the top instead of centred against the tall board. */
html:not(.has-js) .automation-page .automation-hero{align-items:start}
@media(max-width:1000px){.automation-page .automation-steps{grid-template-columns:1fr 1fr}.automation-page .automation-about{grid-template-columns:1fr}.automation-page .automation-about-title{max-width:530px}.automation-page .workflow-board{max-width:760px}}
@media(max-width:760px){.automation-page .automation-case-grid,.automation-page .automation-review,.automation-page .automation-faq,.automation-page .automation-start-grid{grid-template-columns:1fr}.automation-page .automation-case-grid{gap:35px}.automation-page .scenario-panel h3{font-size:25px}.automation-page .output p{font-size:17px}.automation-page .case-diagram{padding:22px 18px}.automation-page .output{padding:12px 9px}.automation-page .work-fragment dl{font-size:12px}.automation-page .about-text>p{font-size:16px}.automation-page .automation-faq-list summary{font-size:15px}.automation-page .automation-faq-list details>p{font-size:15px}.automation-page .start-actions>p{font-size:16px}.automation-page .automation-step h3{font-size:23px}.automation-page .automation-step p:last-child{font-size:15px}}
@media(max-width:420px){.automation-page .lanes{grid-template-columns:1fr;gap:25px}.automation-page .lane li{min-height:34px;padding-bottom:11px}.automation-page .board-top{font-size:9px}.automation-page .scenario-buttons{gap:6px}.automation-page .scenario-buttons label{font-size:12px;padding:10px 9px}.automation-page .automation-career{grid-template-columns:1fr}.automation-page .automation-about-title{gap:17px}.automation-page .automation-portrait{width:66px;height:83px}.automation-page .automation-about-title h2{font-size:28px}.automation-page .automation-steps{grid-template-columns:1fr}.automation-page .source-card{width:88%}.automation-page .output p{font-size:15px}.automation-page .output-number,.automation-page .output>span:last-child{font-size:8px}}
@media(forced-colors:active){.automation-page .workflow-board,.automation-page .source-card,.automation-page .output,.automation-page .scenario-buttons label{border:1px solid CanvasText}.automation-page .lane li:before{background:CanvasText}.automation-page .branch,.automation-page .output:before,.automation-page .output-grid:before{background:CanvasText}}
.automation-page .head .eyebrow{font-size:11px;color:var(--muted);margin-bottom:17px;font-weight:500}

/* v4 design review fixes */
/* The dark band's light eyebrow colour was landing on the paper source card (1.86:1). */
.automation-page .source-card .eyebrow{color:var(--orange)}
/* Orange small text on sage is 4.38:1; orange-deep is 6.34:1. */
.automation-page .automation-review .text-cta,.automation-page .automation-start .text-cta,.automation-page .automation-start .eyebrow{color:var(--orange-deep)}
/* Focus ring round the chip (on sage) instead of round the radio on the ink chip (2.30:1). */
@supports selector(:has(*)){
.automation-page .scenario-buttons input:focus-visible{outline:none}
.automation-page .scenario-buttons label:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:3px}
}
/* 44px hit area for text links without moving anything. */
.automation-page .text-cta{position:relative}
.automation-page .text-cta::after{content:"";position:absolute;inset:-11px -4px}
.automation-page .rule .text-cta{display:inline-block;margin-top:12px}
/* Diagram: stem from the checks band to the output rail; no mono text below 9px; section eyebrow closer to the others. */
.automation-page .output-grid::after{content:'';position:absolute;top:0;left:50%;width:1px;height:13px;background:#9bad91}
@media(max-width:420px){.automation-page .output-number,.automation-page .output>span:last-child{font-size:9px}}
.automation-page .automation-about-title .mono{font-size:11px}
@media(forced-colors:active){.automation-page .output-grid::after{background:CanvasText}}
/* Below about 360px the three output boxes shrink instead of pushing the page wider (no horizontal scroll at 320px). */
@media(max-width:360px){.automation-page .automation-case-grid{grid-template-columns:minmax(0,1fr)}.automation-page .case-diagram{padding:20px 14px}.automation-page .output-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.automation-page .output{min-width:0;padding:10px 6px}.automation-page .output p{font-size:13px}}