/* Small, illustrative workflows. The window and all text anchors stay fixed. */
.micro-scene { position:relative; width:100%; max-width:510px; min-width:0; margin:0 auto; color:var(--ink); }
.micro-scene-window { border:1px solid var(--line); border-radius:11px; background:var(--white); box-shadow:0 16px 34px -24px rgb(36 35 33 / .22); overflow:hidden; }
.micro-scene-toolbar { display:flex; align-items:center; gap:12px; min-height:58px; padding:15px 24px; border-bottom:1px solid var(--line); }
.micro-scene-toolbar>strong { font-size:14px; font-weight:600; }
.micro-scene-example { margin-left:auto; color:var(--muted); font-size:10px; }
.micro-scene-mark { display:grid; gap:4px; width:17px; flex-shrink:0; }
.micro-scene-mark i { display:block; height:1px; background:var(--ink); }
.micro-scene-mark i:last-child { width:11px; }
.micro-scene-content { padding:24px; opacity:1; transition:opacity 180ms linear; }
.micro-scene[data-fading="true"] .micro-scene-content { opacity:0; }
.micro-scene-panel { display:flex; flex-direction:column; min-height:269px; }
.micro-scene-panel[hidden] { display:none; }
.micro-scene-tag { font-size:10px; font-weight:500; color:var(--muted); line-height:1.3; }
.micro-scene-panel h2 { font-size:clamp(21px,2.1vw,26px); line-height:1.15; font-weight:600; letter-spacing:-.03em; margin:9px 0 24px; min-height:60px; }
.micro-scene-rows { margin-top:auto; }
.micro-scene-row { display:flex; align-items:center; gap:12px; min-height:66px; padding:12px 0; border-top:1px solid var(--line); }
.micro-scene-row>div { display:grid; gap:5px; min-width:0; }
.micro-scene-row strong { font-size:13px; font-weight:550; line-height:1.3; }
.micro-scene-row>div>span { font-size:11px; color:var(--muted); line-height:1.35; }
.micro-scene-status { width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.micro-scene-status--alert { border-color:var(--red); color:var(--red); }
.micro-scene-status--check { background:var(--ink); border-color:var(--ink); color:var(--white); }
.micro-scene-status--plain>span { width:7px; height:1px; background:var(--muted); }
.micro-scene-status svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.public-shell .detail-hero .micro-scene-note,.micro-scene-note { font-size:11px; color:var(--muted); line-height:1.4; margin:20px 0 0; min-height:31px; }
.micro-scene-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.micro-scene-pause { position:absolute; top:8px; right:8px; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.micro-scene-pause:focus-visible { width:auto; height:auto; padding:7px 10px; clip-path:none; background:var(--white); color:var(--ink); border:1px solid var(--ink); border-radius:6px; font-size:11px; z-index:2; }
@media(max-width:639px) {
 .micro-scene { margin-top:20px; }
 .micro-scene-toolbar { padding:15px 17px; gap:9px; }
 .micro-scene-toolbar>strong { font-size:12px; }
 .micro-scene-content { padding:20px 17px; }
 .micro-scene-panel { min-height:294px; }
 .micro-scene-panel h2 { font-size:23px; min-height:55px; margin-bottom:20px; }
 .micro-scene-row { min-height:77px; gap:9px; }
 .micro-scene-row strong { font-size:12px; }
 .micro-scene-row>div>span { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .micro-scene-content { transition:none; }
 .micro-scene-pause { display:none; }
}

/* Service pages pair the introduction with its example, then keep detail compact. */
.detail-hero.service-hero { align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); padding-block:48px 40px; }
.service-hero-copy { min-width:0; padding-top:0; }
.service-hero .micro-scene { justify-self:end; margin:0; max-width:510px; }
.public-shell .service-hero .service-hero-copy h1 { font-size:clamp(34px,3.8vw,50px); max-width:14ch; }
.public-shell .service-hero .service-hero-copy p { max-width:32ch; margin-top:22px; }
.service-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-block:0 44px; }
.service-detail-card { min-width:0; border:1px solid var(--line); border-radius:11px; padding:28px; background:var(--white); }
.service-detail-card h2 { margin:0 0 21px; font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.15; }
.service-detail-card .plain-list { border:0; padding:0; box-shadow:none; }
.service-detail-card .plain-list details { padding-block:16px; }
.service-detail-card .plain-list details:first-child { padding-top:0; }
.service-detail-card .plain-list summary { font-size:16px; }
.service-detail-card .plain-list details p { font-size:14px; max-width:42ch; }
.service-detail-card .price-row { padding-block:14px; font-size:14px; gap:16px; }
.service-detail-card .price-row strong { white-space:nowrap; }
.service-detail-card .price-row:first-of-type { border-top:0; padding-top:0; }
.service-detail-note { color:var(--muted); font-size:12px; line-height:1.5; margin:18px 0 0; }
.service-detail-card .text-link { font-size:13px; margin-top:16px; }
.service-method-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding-block:4px 42px; }
.service-method-grid>div { min-width:0; padding:24px 28px; border-top:1px solid var(--line); }
.service-method-grid>div:first-child { padding-left:0; }
.service-method-grid>div:last-child { padding-right:0; }
.service-method-grid>div+div { border-left:1px solid var(--line); }
.service-method-number { font-size:12px; font-variant-numeric:tabular-nums; color:var(--red); }
.service-method-grid h2 { margin:15px 0 12px; font-size:25px; font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.service-method-grid p { max-width:29ch; font-size:14px; color:var(--muted); line-height:1.5; margin:0; }
.service-method-grid .text-link { margin-top:14px; font-size:13px; }
@media(min-width:640px) and (max-width:1050px) {
 .detail-hero.service-hero { grid-template-columns:minmax(0,1fr); gap:28px; max-width:none; padding-block:38px 32px; }
 .service-hero .micro-scene { justify-self:center; margin-inline:auto; max-width:510px; }
 .public-shell .service-hero .service-hero-copy h1 { max-width:20ch; font-size:44px; }
 .service-detail-card { padding:24px; }
 .service-detail-card h2 { font-size:25px; }
 .service-method-grid>div { padding-inline:20px; }
 .service-method-grid h2 { font-size:23px; }
}
@media(max-width:639px) {
 .detail-hero.service-hero { grid-template-columns:minmax(0,1fr); gap:28px; padding-block:30px; }
 .public-shell .service-hero .service-hero-copy h1 { max-width:none; font-size:34px; }
 .service-hero .micro-scene { justify-self:stretch; }
 .service-detail-grid { grid-template-columns:minmax(0,1fr); gap:16px; padding-bottom:32px; }
 .service-detail-card { padding:22px 18px; }
 .service-detail-card h2 { font-size:25px; }
 .service-detail-card .plain-list summary { font-size:15px; }
 .service-detail-card .price-row { font-size:12px; gap:10px; }
 .service-method-grid { grid-template-columns:minmax(0,1fr); padding-block:0 26px; }
 .service-method-grid>div,.service-method-grid>div:first-child,.service-method-grid>div:last-child { padding:22px 0; }
 .service-method-grid>div+div { border-left:0; }
 .service-method-grid h2 { margin-block:9px; }
}

/* Uneven offsets and fixed tilts make a loose pile without shaking the text. */
.service-alert-stack { --alert-height:112px; --alert-step:104px; --scatter-factor:1; --angle-factor:1; position:relative; height:356px; isolation:isolate; opacity:1; transition:opacity 300ms ease; }
.service-alert-position { position:absolute; top:16px; left:0; width:calc(100% - 64px); z-index:var(--layer,1); opacity:1; transform:translate(calc(var(--offset,0%) * var(--scatter-factor)),calc(var(--slot) * var(--alert-step) + var(--nudge,0px))) rotate(calc(var(--tilt,0deg) * var(--angle-factor))); }
.service-alert-position:nth-child(1) { --offset:4%; --tilt:-1.6deg; --nudge:-2px; --entry:-8px; }
.service-alert-position:nth-child(2) { --offset:13%; --tilt:1.25deg; --nudge:2px; --entry:8px; }
.service-alert-position:nth-child(3) { --offset:0%; --tilt:-.65deg; --nudge:-1px; --entry:-6px; }
.service-alert-position:nth-child(4) { --offset:10%; --tilt:1.65deg; --nudge:1px; --entry:7px; }
.service-alert-position:nth-child(5) { --offset:2%; --tilt:-1.1deg; --nudge:2px; --entry:-8px; }
.service-alert-position:nth-child(6) { --offset:14%; --tilt:.85deg; --nudge:-2px; --entry:6px; }
.service-alert-position:nth-child(7) { --offset:5%; --tilt:-1.4deg; --nudge:0px; --entry:-5px; }
.service-alert-position:nth-child(8) { --offset:11%; --tilt:.45deg; --nudge:2px; --entry:8px; }
.service-alert-position:nth-child(9) { --offset:1%; --tilt:1.1deg; --nudge:-1px; --entry:-7px; }
.service-alert-position:nth-child(10) { --offset:8%; --tilt:-.8deg; --nudge:1px; --entry:5px; }
.service-alerts[data-clearing="true"] .service-alert-stack { opacity:0; }
.service-alert-position[hidden] { display:none; }
.service-alert-card { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:start; gap:14px; height:var(--alert-height); padding:22px; border:1px solid var(--line); border-radius:11px; background:var(--white); box-shadow:0 12px 26px -18px rgb(36 35 33 / .3); }
.service-alert-position[data-alert-state="entering"] .service-alert-card { animation:service-alert-enter 380ms cubic-bezier(.22,.68,.2,1) both; }
.service-alert-symbol { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--red); border-radius:7px; color:var(--red); font-size:16px; font-weight:550; line-height:1; }
.service-alerts--formation .service-alert-symbol { color:var(--ink); border-color:var(--ink); }
.service-alert-copy { display:grid; gap:8px; min-width:0; }
.service-alert-category { color:var(--muted); font-size:10px; line-height:1.3; }
.service-alert-copy strong { font-size:18px; line-height:1.3; font-weight:550; letter-spacing:-.015em; overflow-wrap:break-word; }
.service-alerts .micro-scene-pause:focus-visible { z-index:20; }
@keyframes service-alert-enter { from { opacity:0; transform:translate(var(--entry,0px),-8px); } to { opacity:1; transform:translate(0,0); } }
@media(max-width:639px) {
 .service-alert-stack { --alert-height:128px; --alert-step:118px; --scatter-factor:.5; --angle-factor:.55; height:404px; }
 .service-alert-position { width:calc(100% - 28px); }
 .service-alert-card { grid-template-columns:24px minmax(0,1fr); gap:11px; padding:18px 15px; }
 .service-alert-symbol { width:24px; height:24px; border-radius:6px; font-size:14px; }
 .service-alert-copy { gap:7px; }
 .service-alert-copy strong { font-size:16px; line-height:1.3; }
}
@media(prefers-reduced-motion:reduce) {
 .service-alert-stack,.service-alert-position { transition:none; }
 .service-alert-position[data-alert-state="entering"] .service-alert-card { animation:none; }
}

/* At intermediate widths, keep the illustration beside the introduction. */
@media (min-width:760px) and (max-width:1050px) {
 .detail-hero.service-hero { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:24px; }
 .public-shell .service-hero .service-hero-copy h1 { font-size:36px; }
 .service-hero .micro-scene { width:100%; }
 .service-alert-stack { --alert-height:128px; --alert-step:118px; --scatter-factor:.5; --angle-factor:.65; height:382px; }
 .service-alert-position { width:calc(100% - 28px); }
 .service-alert-card { grid-template-columns:24px minmax(0,1fr); padding:18px 15px; gap:10px; }
 .service-alert-copy strong { font-size:16px; }
 .service-alert-symbol { width:24px; height:24px; }
}