/* IT: follow a real handover across a human workbench. */
.service-page-it { --it-tint:color-mix(in srgb,var(--ha-violet) 15%,var(--ha-paper)); }
.service-page-it main .it-workbench { background:var(--ha-violet); color:var(--ha-paper); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:40px 60px; padding-top:68px; padding-bottom:44px; }
.it-opening { max-width:570px; }
.service-page-it .it-opening h1 { font-size:clamp(52px,5.8vw,88px); margin:0; }
.it-opening > p { margin-top:26px; max-width:38ch; color:var(--ha-paper); }
.it-frictions { margin-top:30px; }
.service-page-it .it-frictions > p { margin:0 0 12px; font-size:16px; font-weight:800; }
.it-frictions > div { display:flex; flex-wrap:wrap; gap:9px; }
.it-frictions button { font:700 14px/1.3 Manrope,sans-serif; border:1px solid var(--ha-paper); border-radius:6px; padding:11px 13px; color:var(--ha-paper); background:transparent; text-align:left; cursor:pointer; }
.it-frictions button[aria-pressed="true"] { color:var(--ha-ink); background:var(--ha-bloom); border-color:var(--ha-bloom); }
.it-frictions button:hover { background:var(--ha-paper); color:var(--ha-ink); }
.it-conversation-link { grid-column:1/-1; justify-self:start; display:inline-block; font-size:15px; font-weight:800; margin-top:26px; text-decoration-thickness:2px; text-underline-offset:5px; }
.it-bench-scene { margin:0; padding:0 16px 14px; color:var(--ha-ink); border-radius:90px 90px 8px 8px; background:var(--it-tint); position:relative; min-width:0; align-self:start; }
.it-people { height:207px; position:relative; margin:0 6%; }
.it-dave { position:absolute; width:205px; height:auto; right:5%; bottom:0; mask-image:linear-gradient(to bottom,black 70%,transparent 99%); }
.it-amp { position:absolute; width:206px; aspect-ratio:3/2; left:1%; bottom:-4px; z-index:1; transform:rotate(-3deg); }
.it-amp img,.it-amp svg { position:absolute; inset:0; width:100%; height:100%; }
.service-page-it .it-scene-speech { position:absolute; top:32px; left:2%; width:205px; margin:0; padding:10px 16px; border-radius:18px 18px 18px 3px; font-size:17px; font-weight:800; line-height:1.3; background:var(--ha-card); box-shadow:5px 6px 0 rgba(var(--ha-ink-rgb),.14); z-index:2; }
.it-job-scene { position:relative; min-height:254px; display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:12px; align-items:start; border-top:4px solid var(--ha-ink); padding-top:20px; }
.it-job-scene::before { content:""; position:absolute; top:0; left:-17px; right:-17px; height:20px; background:var(--ha-paper-face); border-bottom:2px solid var(--ha-ink); }
.it-work-prop { position:relative; z-index:2; padding-top:5px; text-align:center; }
.it-work-prop > svg { width:100%; height:135px; transform:rotate(-5deg); transition:transform 500ms ease; }
.it-tool > svg { transform:rotate(3deg); }
.it-team > svg { transform:rotate(-2deg); }
.it-work-prop strong { display:block; font-size:15px; line-height:1.3; margin-top:8px; }
.it-work-prop span { display:block; font-size:12px; line-height:1.4; margin:6px auto 0; max-width:15ch; color:var(--ha-ink-soft); }
.it-cables { position:absolute; z-index:1; inset:0; width:100%; height:215px; overflow:visible; }
.it-cable { fill:none; stroke:var(--ha-violet); stroke-width:6; stroke-linecap:round; stroke-dasharray:4 5; opacity:.3; }
.it-cable-arrow { fill:none; stroke:var(--ha-violet); stroke-width:6; stroke-linecap:round; opacity:0; }
.it-signal { fill:var(--ha-bloom); opacity:0; }
.it-loose-note { position:absolute; z-index:3; font:700 22px/1 Caveat,cursive; color:var(--ha-ink); background:var(--ha-paper-face); padding:6px 12px; border:1px solid var(--ha-ink); box-shadow:2px 3px 0 rgba(var(--ha-ink-rgb),.12); transition:opacity 200ms ease,transform 400ms ease; }
.it-loose-one { top:32%; left:25%; transform:rotate(12deg); }
.it-loose-two { top:16%; right:14%; transform:rotate(-9deg); }
.it-job-slip { position:absolute; width:42px; height:42px; left:10%; top:35%; z-index:4; opacity:0; }
.it-job-slip svg { width:100%; height:100%; }
.it-state-control { display:flex; gap:8px; margin-top:6px; border-radius:8px; padding:6px; background:var(--ha-card); border:1px solid var(--ha-hairline); }
.it-state-control button { flex:1; border:0; border-radius:5px; padding:12px 10px; font:800 13px/1.2 Manrope,sans-serif; color:var(--ha-ink-soft); background:transparent; cursor:pointer; }
.it-state-control button[aria-pressed="true"] { color:var(--ha-ink); background:var(--ha-paper-face); }
.it-state-control button[data-it-state="true"][aria-pressed="true"] { background:var(--ha-violet); color:var(--ha-paper); }
.it-state-control button[data-it-state="true"] span { display:inline-block; font-size:18px; margin-left:5px; }
.it-state-control button:hover { color:var(--ha-ink); background:var(--ha-paper); }
.it-bench-scene figcaption { font-size:12px; line-height:1.45; text-align:center; color:var(--ha-ink-soft); margin-top:12px; }
.it-workbench[data-it-connected="true"] .it-work-prop > svg { transform:rotate(0); }
.it-workbench[data-it-connected="true"] .it-cable { stroke-dasharray:none; opacity:1; }
.it-workbench[data-it-connected="true"] .it-cable-arrow { opacity:1; }
.it-workbench[data-it-connected="true"] .it-loose-note { opacity:0; transform:scale(.3) rotate(0); }
.it-workbench[data-it-connected="true"] .it-job-slip { opacity:1; top:34%; left:78%; }
.it-workbench.it-connecting .it-cable { stroke-dasharray:100; animation:it-draw 800ms ease both; }
.it-workbench.it-connecting .it-job-slip { animation:it-pass-job 1.3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes it-draw { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
@keyframes it-pass-job { 0% { opacity:0; left:10%; transform:rotate(-8deg); } 15% { opacity:1; } 48% { left:44%; transform:rotate(0); } 72% { left:44%; transform:rotate(0); } 100% { opacity:1; left:78%; transform:rotate(4deg); } }
.it-example-explanation { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; }
.it-example-explanation article { padding-top:18px; }
.service-page-it .it-example-explanation h2 { color:var(--ha-paper); font-size:clamp(24px,2.6vw,37px); }
.service-page-it .it-example-explanation p { font-size:17px; max-width:49ch; margin-top:14px; }
.it-workbench[data-it-ready] .it-example-explanation { display:block; padding-top:14px; border-top:1px solid color-mix(in srgb,var(--ha-paper) 35%,transparent); }
.it-workbench[data-it-ready] .it-example-explanation article:not([hidden]) { display:grid; grid-template-columns:1fr 1.25fr; gap:55px; align-items:center; padding-top:0; }
.it-workbench[data-it-ready] .it-example-explanation p { margin:0; max-width:57ch; }
.service-page-it main .it-foundations { display:grid; grid-template-columns:1fr 1fr; gap:85px; background:var(--ha-ink); color:var(--ha-paper); padding-block:75px; }
.it-foundations-opening h2 { color:var(--ha-bloom); }
.it-foundations-opening > p { max-width:39ch; margin-top:25px; }
.it-foundations-note { display:block; font:700 29px/1.2 Caveat,cursive; color:var(--ha-paper-face); transform:rotate(-2deg); margin-top:35px; }
.it-foundation-list { position:relative; padding-left:25px; border-left:5px solid var(--ha-bloom); }
.it-foundation-list details { border-bottom:1px solid rgba(var(--ha-bloom-rgb),.25); padding:20px 0; }
.it-foundation-list details:first-child { padding-top:0; }
.it-foundation-list details:last-child { border:0; padding-bottom:0; }
.it-foundation-list summary { cursor:pointer; list-style:none; font-size:23px; line-height:1.25; font-weight:800; display:flex; justify-content:space-between; gap:18px; }
.it-foundation-list summary::-webkit-details-marker { display:none; }
.it-foundation-list summary > span { color:var(--ha-bloom); font-weight:500; transition:transform 180ms ease; }
.it-foundation-list details[open] summary > span { transform:rotate(45deg); }
.service-page-it .it-foundation-list p { font-size:17px; margin:16px 0 0; color:var(--ha-soft-on-dark); max-width:45ch; }
.service-page-it main .it-start { padding-block:78px; display:grid; grid-template-columns:.9fr 1.2fr; gap:45px 70px; background:var(--ha-paper); }
.it-start-heading > p { margin-top:24px; max-width:30ch; }
.it-start-work { padding-top:12px; }
.service-page-it .it-start-work .it-handwritten { font:700 clamp(30px,3vw,42px)/1.15 Caveat,cursive; color:var(--ha-violet); transform:rotate(-3deg); margin-bottom:28px; }
.it-start-work > p:not(.it-handwritten) { color:var(--ha-ink-soft); max-width:43ch; }
.it-start-work > a { display:inline-block; margin-top:24px; font-weight:800; text-underline-offset:5px; }
.it-dave-note { grid-column:1/-1; margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) auto; padding:28px 34px 28px 48px; position:relative; background:var(--it-tint); transform:rotate(-.7deg); border-radius:4px 30px 4px 4px; gap:8px 35px; }
.it-dave-note::before { content:""; position:absolute; width:25px; height:25px; left:0; bottom:0; background:var(--ha-bloom); clip-path:polygon(0 0,100% 100%,0 100%); }
.service-page-it .it-dave-note p { grid-row:1/3; font-size:clamp(18px,1.8vw,24px); line-height:1.45; max-width:69ch; margin:0; }
.it-dave-note span { font-weight:800; align-self:end; }
.it-dave-note a { font-size:14px; font-weight:700; }
.it-workbench [hidden] { display:none!important; }
.service-page-it button:focus-visible,.service-page-it summary:focus-visible,.service-page-it a:focus-visible { outline:3px solid var(--ha-bloom); outline-offset:5px; }
.it-workbench button:focus-visible { outline-color:var(--ha-paper); }
@media (max-width:1000px) {
 .service-page-it main .it-workbench { gap:32px; padding-top:48px; }
 .service-page-it .it-opening h1 { font-size:clamp(43px,5.5vw,64px); }
 .it-people { height:175px; margin:0 2%; }
 .it-dave { width:175px; right:0; }
 .it-amp { width:170px; }
 .service-page-it .it-scene-speech { width:166px; font-size:15px; top:22px; }
 .it-work-prop > svg { height:112px; }
 .it-job-scene { min-height:237px; gap:6px; }
 .it-work-prop strong { font-size:13px; }
 .it-loose-note { font-size:19px; padding:5px 8px; }
 .it-state-control { gap:3px; }
 .it-state-control button { padding:12px 5px; font-size:12px; }
 .service-page-it main .it-foundations { gap:44px; }
 .it-foundation-list summary { font-size:20px; }
 .it-workbench[data-it-ready] .it-example-explanation article:not([hidden]) { gap:35px; }
}
@media (max-width:760px) {
 .service-page-it main .it-workbench { grid-template-columns:1fr; gap:18px; padding-top:26px; padding-bottom:38px; }
 .it-opening { max-width:620px; }
 .service-page-it .it-opening h1 { font-size:clamp(47px,9vw,64px); }
 .it-opening > p { font-size:17px; margin-top:16px; }
  .it-frictions { margin-top:18px; }
 .it-frictions button { font-size:13px; }
 .it-conversation-link { margin-top:20px; }
 .it-bench-scene { padding-inline:12px; border-radius:60px 60px 6px 6px; }
 .it-people { height:150px; margin:0 4%; }
 .it-dave { width:185px; right:3%; }
 .it-amp { width:188px; left:2%; }
 .service-page-it .it-scene-speech { width:175px; top:20px; }
 .it-job-scene::before { left:-13px; right:-13px; }
 .it-job-scene { min-height:216px; }
 .it-work-prop > svg { height:116px; }
 .it-work-prop strong { font-size:14px; }
 .it-state-control button { font-size:13px; padding:12px 8px; }
 .it-example-explanation,.it-workbench[data-it-ready] .it-example-explanation article:not([hidden]) { display:block; }
 .service-page-it .it-example-explanation h2 { font-size:30px; }
 .it-workbench[data-it-ready] .it-example-explanation p { margin-top:18px; font-size:16px; }
 .service-page-it main .it-foundations { grid-template-columns:1fr; padding-block:48px; gap:36px; }
 .it-foundations-note { margin-top:22px; font-size:28px; }
 .it-foundation-list { padding-left:19px; }
 .it-foundation-list summary { font-size:21px; }
 .service-page-it main .it-start { grid-template-columns:1fr; padding-block:48px; gap:30px; }
 .it-start-work { padding-top:0; }
 .it-start-work .it-handwritten { margin-bottom:20px; }
 .it-dave-note { grid-template-columns:1fr; margin-top:8px; padding:25px; gap:12px; }
 .service-page-it .it-dave-note p { grid-row:auto; font-size:18px; }
 .it-dave-note span { margin-top:4px; }
}
@media (max-width:360px) {
 .service-page-it .it-opening h1 { font-size:43px; }
 .it-bench-scene { padding-inline:8px; }
 .it-people { height:161px; margin:0; }
 .it-dave { width:150px; right:0; }
 .it-amp { width:150px; }
 .service-page-it .it-scene-speech { width:145px; font-size:14px; top:15px; padding:9px 12px; }
 .it-job-scene { min-height:236px; }
 .it-job-scene::before { left:-9px; right:-9px; }
 .it-work-prop > svg { height:96px; }
 .it-work-prop strong { font-size:12px; }
 .it-work-prop span { font-size:11px; }
 .it-loose-note { font-size:17px; padding:4px 6px; }
 .it-state-control button { font-size:11px; padding:11px 6px; }
 .it-state-control button[data-it-state="true"] span { font-size:14px; margin-left:0; }
 .it-bench-scene figcaption { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
 .it-workbench *, .it-foundation-list summary > span { animation:none!important; transition:none!important; }
}

.it-person-check { opacity:0; }
.it-workbench[data-it-connected="true"] .it-person-check { opacity:1; }
@media (max-width:760px) { .it-amp { width:145px; left:0; } .it-dave { right:0; } .it-state-control button { font-size:12px; } }
@media (max-width:360px) { .it-amp { width:125px; } .it-dave { width:145px; } .it-state-control button { font-size:11px; } }

.it-record-item { opacity:0; }
.it-workbench[data-it-connected="true"] .it-record-item { opacity:1; }
@media (min-width:361px) and (max-width:760px) { .service-page-it .it-scene-speech { width:150px; font-size:14px; top:14px; } }

/* Keep mobile comparison controls beside the scene, clear of the floating guide. */
@media (max-width:760px) {
 .it-bench-scene { display:flex; flex-direction:column; }
 .it-people { order:1; flex-shrink:0; }
 .it-state-control { order:2; margin:0 0 14px; }
 .it-job-scene { order:3; }
 .it-bench-scene figcaption { order:4; }
 .it-state-control button { white-space:nowrap; }
}

.it-state-control button:focus-visible { outline-color:var(--ha-ink); }