dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 24px);max-height:calc(100svh - 24px);height:fit-content;border:0;padding:0;background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius-lg);overscroll-behavior:contain}
dialog::backdrop{background:var(--color-backdrop)}
dialog[open]{animation:dialog-in var(--dur-short) var(--ease-out)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:var(--space-lg);margin-bottom:var(--space-lg)}
.dialog-head h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;margin-top:var(--space-2xs)}
.dialog-label{font-size:var(--text-xs);color:var(--color-muted)}
.close-button{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--color-rule);border-radius:50%;font-size:1.5rem;line-height:1;transition:border-color var(--dur-short) var(--ease-out)}
.dialog-note{margin-top:var(--space-md);font-size:var(--text-xs);color:var(--color-muted)}
.noscript-note{padding:var(--space-lg);font-size:var(--text-sm)}

/* Before/after: drag the seam. Left: a faceless template made of grey blocks. Right: the real site. */
.case-dialog{max-width:1080px}
.case-dialog-inner{padding:var(--space-lg)}
.compare{--pos:50%;position:relative;overflow:clip;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-card);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.compare{aspect-ratio:1265/707}
.compare>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--color-accent);pointer-events:none}
.compare-line>span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--color-accent);color:var(--color-accent-ink);font-size:1.1rem;box-shadow:0 6px 18px -6px var(--color-shadow)}
.compare-tag{position:absolute;top:var(--space-sm);padding:5px 12px;border-radius:var(--radius-pill);font-size:var(--text-xs);pointer-events:none;transition:opacity var(--dur-short) var(--ease-out)}
.compare-tag.is-before{left:var(--space-sm);background:var(--color-template-2);color:var(--color-ink)}
.compare-tag.is-after{right:var(--space-sm);background:var(--color-accent);color:var(--color-accent-ink)}
.compare[data-edge="before"] .compare-tag.is-after,.compare[data-edge="after"] .compare-tag.is-before{opacity:0}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:has(input:focus-visible) .compare-line>span{outline:2px solid var(--color-ink);outline-offset:3px}
.compare.is-hinting .compare-before{transition:clip-path 900ms var(--ease-in-out)}
.compare.is-hinting .compare-line{transition:left 900ms var(--ease-in-out)}

.tpl{display:flex;flex-direction:column;gap:3%;height:100%;padding:2.4% 3%;background:var(--color-template-3)}
.tpl i,.tpl b{display:block;border-radius:3px;background:var(--color-template)}
.tpl-top{display:flex;align-items:center;justify-content:space-between;height:7%}
.tpl-top b{width:14%;height:70%;background:var(--color-template-2)}
.tpl-nav{display:flex;gap:1.6%;width:56%;height:40%}
.tpl-nav i{flex:1}
.tpl-slider{position:relative;display:grid;place-items:center;flex:0 0 36%;background:var(--color-template)}
.tpl-slider svg{width:12%;height:auto;color:var(--color-template-2)}
.tpl-slider svg *{fill:currentColor}
.tpl-dots{position:absolute;bottom:8%;left:50%;display:flex;gap:6px;transform:translateX(-50%)}
.tpl-dots i{width:8px;height:8px;border-radius:50%;background:var(--color-template-2)}
.tpl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2%;flex:0 0 26%}
.tpl-cards>span{display:flex;flex-direction:column;align-items:center;gap:10%;padding:4%;background:var(--color-template)}
.tpl-cards b{width:22%;aspect-ratio:1;border-radius:50%;background:var(--color-template-2)}
.tpl-cards i{width:80%;height:8%;background:var(--color-template-3)}
.tpl-text{display:grid;gap:3px;align-content:start;flex:1}
.tpl-text i{height:7px}
.tpl-text i:nth-child(odd){width:96%}
.tpl-text i:nth-child(even){width:88%}
.tpl[data-tone="dark"]{background:var(--color-template-dark-3)}
.tpl[data-tone="dark"] :is(i,.tpl-slider,.tpl-cards>span){background:var(--color-template-dark)}
.tpl[data-tone="dark"] :is(.tpl-top b,.tpl-cards b,.tpl-dots i){background:var(--color-template-dark-2)}
.tpl[data-tone="dark"] .tpl-cards i{background:var(--color-template-dark-3)}
.tpl[data-tone="dark"] .tpl-slider svg{color:var(--color-template-dark-2)}

.case-points{display:grid;gap:var(--space-xs);margin:var(--space-lg) 0 0;padding:0;list-style:none}
.case-points li{display:flex;align-items:baseline;gap:var(--space-sm);font-size:var(--text-sm)}
.case-points li::before{content:'';flex:none;width:9px;height:9px;border-radius:2px;background:var(--color-accent);transform:rotate(45deg) translateY(-1px)}
.case-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-rule)}

/* Contact */
.contact-dialog{max-width:600px}
.contact-inner{padding:var(--space-lg)}
.contact-inner>h2{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.08;margin-bottom:var(--space-sm)}
.contact-intro{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-lg)}
#contact-form{display:flex;flex-direction:column;align-items:stretch}
#contact-form label{font-size:var(--text-sm);margin-bottom:var(--space-xs)}
#contact-form label>span{color:var(--color-muted);font-size:var(--text-xs)}
#contact-form select,#contact-form textarea{width:100%;margin-bottom:var(--space-lg);padding:12px 14px;background:var(--color-card);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-size:var(--text-base)}
#contact-form select{min-height:48px}
#contact-form textarea{min-height:104px;resize:vertical}
#contact-form textarea::placeholder{color:var(--color-muted)}
#contact-form :is(select,textarea):focus-visible{outline-offset:1px}
.contact-context{margin:calc(-1 * var(--space-sm)) 0 var(--space-lg);padding:var(--space-xs) var(--space-sm);border-left:3px solid var(--color-accent);font-size:var(--text-xs);color:var(--color-muted)}
.contact-explanation{margin-bottom:var(--space-md);font-size:var(--text-xs);color:var(--color-muted)}
.copy-brief{min-height:44px;margin-top:var(--space-xs);font-size:var(--text-xs);text-decoration:underline;text-underline-offset:4px}
.contact-status{min-height:2.6em;font-size:var(--text-xs);color:var(--color-muted)}
.contact-status.is-error{color:var(--color-error)}
#brief-fallback{width:100%;min-height:120px;padding:10px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-size:var(--text-xs)}

@media(hover:hover) and (pointer:fine){.close-button:hover{border-color:var(--color-ink)}}
@media(min-width:40rem){
  .case-dialog-inner,.contact-inner{padding:var(--space-xl)}
  .case-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
}