.svay-intro{grid-template-columns:1.1fr 1fr;padding-bottom:44px}.svay-summary{font-size:16px}
.svay-story{display:grid;grid-template-columns:30% minmax(0,1fr);gap:36px;align-items:center;padding-bottom:50px}
.story-tabs{display:grid;gap:28px}.story-tabs button{padding:26px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:5px;box-shadow:6px 8px 0 var(--shadow);color:var(--ink);transform:rotate(-1.5deg);cursor:pointer;transition:transform .2s,background .2s,color .2s}
.story-tabs button:nth-child(2){transform:rotate(1deg)}.story-tabs button:hover{transform:rotate(0)}.story-tabs button[aria-selected=true]{background:var(--action);color:var(--action-ink);border-color:var(--action)}
.story-tabs strong{font-family:Lora,Georgia,serif;font-weight:500;font-size:34px;display:block;margin-bottom:14px;line-height:1.2}.story-tabs span{font-size:16px;line-height:1.6;display:block}
.story-art{container-type:inline-size;min-width:0}.before-scene,.after-scene{height:69cqw;position:relative}.story-art [hidden]{display:none}
.routes{position:absolute;inset:0;width:100%;height:100%;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:6 8;opacity:.45}
.sheet{position:absolute;width:42%;padding:2.3cqw;background:var(--card);border:1px solid var(--line);border-radius:3px;box-shadow:5px 7px 0 var(--shadow)}
.sheet-request{left:2%;top:2%;transform:rotate(-7deg)}.sheet-estimate{right:1%;top:7%;transform:rotate(6deg)}.sheet-fact{left:5%;bottom:4%;transform:rotate(4deg)}.sheet-delivery{right:0;bottom:0;transform:rotate(-5deg)}
.file-label{display:flex;align-items:center;gap:1cqw;font-size:clamp(10px,1.8cqw,14px);color:var(--muted)}.file-icon{background:#237a52;color:#fff;font-weight:600;width:3cqw;height:3.5cqw;display:grid;place-items:center;border-radius:2px}
.sheet h3{font:500 clamp(12px,2.1cqw,17px)/1.3 Onest,sans-serif;letter-spacing:-.02em;margin:1.7cqw 0}.sheet p{font-size:clamp(10px,1.7cqw,13px);color:var(--muted);margin-top:1cqw}
.sheet-grid{height:10cqw;background:repeating-linear-gradient(0deg,transparent 0,transparent calc(2.5cqw - 1px),var(--line) calc(2.5cqw - 1px),var(--line) 2.5cqw),repeating-linear-gradient(90deg,transparent 0,transparent calc(9cqw - 1px),var(--line) calc(9cqw - 1px),var(--line) 9cqw);border:1px solid var(--line);border-top:2.5cqw solid color-mix(in srgb,#237a52 15%,var(--card))}
.messenger{position:absolute;top:43%;left:22%;width:57%;display:flex;align-items:center;gap:2cqw;padding:2cqw;background:var(--mint);border:1px solid var(--blue);box-shadow:4px 5px 0 var(--shadow);border-radius:8px;transform:rotate(-2deg);font-size:clamp(11px,2cqw,15px);line-height:1.5}.messenger svg{width:4cqw;flex:none}.messenger b{font-weight:400;color:var(--muted)}
.after-scene{padding:3cqw;background:color-mix(in srgb,var(--mint) 65%,var(--card));border:1px solid var(--blue);border-radius:6px;box-shadow:8px 10px 0 var(--shadow)}
.deal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:2cqw;margin-bottom:2.5cqw}.deal-head>span{font-size:clamp(17px,3cqw,25px);font-weight:600;color:var(--blue)}.deal-head>strong{font-size:clamp(12px,2cqw,17px);font-weight:500}
.deal-modules{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}.widget{padding:2.5cqw;background:var(--card);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;min-height:36cqw}.widget>p{font-size:clamp(10px,1.7cqw,13px);color:var(--muted)}.widget h3{font-size:clamp(18px,3.6cqw,28px);margin:1cqw 0 2cqw;min-height:8.5cqw}
.widget ul{list-style:none;padding:0;margin:0 0 1cqw;font-size:clamp(11px,2cqw,16px)}.widget li{border-bottom:1px solid var(--line);padding:.6cqw 0}.widget-result{margin-top:auto;padding-top:1.5cqw;font-size:clamp(11px,1.9cqw,15px);color:var(--blue)}
.comparison-head,.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;font-size:clamp(10px,1.7cqw,13px);color:var(--muted)}.compare-row{padding:1.2cqw 0;border-bottom:1px solid var(--line)}.compare-row i{height:.8cqw;background:var(--line);width:80%;border-radius:2px}.difference{background:var(--mint)}.difference i:last-child{width:100%;background:var(--blue)}
.differences{margin-top:2.5cqw}.differences strong{font-size:clamp(12px,2.2cqw,18px);font-weight:500}.differences>div{display:flex;gap:1cqw;margin-top:1cqw;flex-wrap:wrap}.differences span{font-size:clamp(10px,1.7cqw,14px);padding:.6cqw 1.4cqw;background:var(--action);color:var(--action-ink);border-radius:3px}
.scheme-caption{font-size:11px;color:var(--muted);text-align:right;margin-top:20px}
.after-scene:not([hidden]) .calculator{animation:assemble-left .45s ease-out both}.after-scene:not([hidden]) .comparison{animation:assemble-right .45s ease-out both}.after-scene:not([hidden]) .differences{animation:reveal .4s .22s both}.before-scene:not([hidden]){animation:reveal .35s both}
@keyframes assemble-left{from{opacity:0;transform:translate(-25px,-15px) rotate(-6deg)}to{opacity:1;transform:none}}@keyframes assemble-right{from{opacity:0;transform:translate(25px,15px) rotate(6deg)}to{opacity:1;transform:none}}@keyframes reveal{from{opacity:0}to{opacity:1}}
@media(max-width:750px){.svay-intro{grid-template-columns:1fr}.svay-story{grid-template-columns:1fr;gap:34px}.story-tabs{grid-template-columns:1fr 1fr;gap:12px}.story-tabs button{padding:16px}.story-tabs strong{font-size:27px;margin-bottom:10px}.story-tabs span{font-size:12px;line-height:1.5}.story-art{margin:0 5px}.scheme-caption{font-size:10px}.svay-summary{font-size:15px}}
@media(prefers-reduced-motion:reduce){.story-tabs button{transition:none}.after-scene:not([hidden]) .widget,.after-scene:not([hidden]) .differences,.before-scene:not([hidden]){animation:none}}
@media(max-width:750px){.before-scene,.after-scene{height:max(95cqw,330px)}.widget{min-height:185px}.widget h3{min-height:44px}.differences{margin-top:14px}.messenger{top:44%}}
/* Semantic status colors stay inside the process illustration. */
.after-scene{height:auto!important;min-height:73cqw}
.svay-story{--ok:#226b4a;--ok-bg:#e2f2e9;--alert:#a13c3c;--alert-bg:#fae7e5}
[data-theme=dark] .svay-story{--ok:#8cd9ad;--ok-bg:#213d33;--alert:#ffaaa2;--alert-bg:#482d32}
.messenger{width:54%;padding:1.7cqw 2.3cqw}.messenger small{display:block;font-size:clamp(10px,1.5cqw,12px);margin-bottom:.5cqw;color:var(--muted)}
.change-message{top:28%;left:5%;background:color-mix(in srgb,var(--alert-bg) 80%,var(--card));border-color:color-mix(in srgb,var(--alert) 40%,var(--line));transform:rotate(-3deg)}
.reply-message{top:49%;left:39%;width:55%;background:var(--mint);transform:rotate(2deg)}
.widget li{display:flex;justify-content:space-between;gap:6px}.widget li b{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.estimate-total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px;margin-top:1cqw;font-size:clamp(12px,2.2cqw,18px)}.estimate-total strong{font-weight:600;white-space:nowrap}
.amount-table{width:100%;border-collapse:collapse;font-size:clamp(10px,1.8cqw,14px);font-variant-numeric:tabular-nums;line-height:1.5}
.amount-table caption{font-size:clamp(10px,1.6cqw,12px);text-align:left;color:var(--muted);margin-bottom:.8cqw}
.amount-table th,.amount-table td{padding:.7cqw .5cqw;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.amount-table th:first-child{text-align:left}.amount-table th{font-weight:400}.amount-table thead{color:var(--muted)}.amount-table tfoot th,.amount-table tfoot td{font-weight:600;border:0;padding-top:1.4cqw}
.amount-table .row-ok td:last-child{background:var(--ok-bg);color:var(--ok)}.amount-table .row-diff td:last-child{background:var(--alert-bg);color:var(--alert)}
.status-ok,.differences span.status-ok{color:var(--ok);background:var(--ok-bg)}.status-diff,.differences span.status-diff{color:var(--alert);background:var(--alert-bg)}
.widget-result{padding:1cqw;margin-top:1.5cqw;border-radius:3px}.widget{min-height:39cqw}.widget h3{margin-bottom:1cqw}.before-scene,.after-scene{height:73cqw}
@media(max-width:750px){.before-scene{height:360px}.after-scene{height:auto;min-height:360px}.widget{padding:9px;min-height:228px;min-width:0}.calculator li{flex-wrap:wrap;gap:0}.calculator li span{width:100%}.calculator li b{font-size:12px}.amount-table{font-size:10px}.amount-table th,.amount-table td{padding:5px 1px}.estimate-total{font-size:12px}.widget-result{font-size:10px;padding:5px;line-height:1.4}.messenger{font-size:11px;width:68%;padding:9px}.change-message{top:28%;left:2%}.reply-message{top:49%;left:27%;width:71%}.differences{padding-bottom:8px}.scheme-caption{margin-top:18px}}

/* Two compact chat messages without speaker labels. */
.amount-unit{font-size:clamp(9px,1.5cqw,12px);font-weight:400;color:var(--muted)}
@media(max-width:750px){.amount-unit{display:block;font-size:9px;line-height:1.2}.amount-table td{white-space:normal}}
.differences>strong{display:block;font-size:clamp(17px,3cqw,24px);line-height:1.3;letter-spacing:-.025em}
.automation-summary{font-size:clamp(12px,1.9cqw,15px);line-height:1.55;color:var(--muted);margin-top:1cqw}
.messenger{width:82%;gap:1.5cqw;padding:1.8cqw 2cqw;font-size:clamp(10px,2.05cqw,15px)}
.messenger span{white-space:nowrap}.messenger svg{width:3.4cqw;min-width:14px}
.change-message{left:0;top:32%}.reply-message{left:17%;width:82%;top:51%}
@media(max-width:750px){.messenger{width:100%;left:0;font-size:clamp(9px,2.75cqw,11px);gap:1cqw;padding:10px 7px}.change-message{top:32%;transform:rotate(-2deg)}.reply-message{top:51%;transform:rotate(2deg)}}

.svay-section{padding-block:55px 50px}
.svay-intro{display:grid;gap:22px 65px;align-items:end}
.svay-intro>p:first-child{grid-column:1/-1;font-size:14px;color:var(--muted)}
.svay-intro h2{font-size:clamp(34px,3.7vw,50px)}.svay-intro h2 span{color:var(--blue)}.svay-summary{color:var(--muted)}
@media(max-width:750px){.svay-intro{gap:18px}.svay-section{padding-block:35px 30px}}