/* Tool-page first-screen cards (2026-09-25). Base card, drop zone, free box
   and status styles come from the shared product page bundle. */
.ds-prompt-card{position:relative;display:grid;gap:8px}
.ds-prompt-label{color:rgba(255,255,255,.86);font-size:12px;font-weight:850}
.ds-prompt-input{box-sizing:border-box;width:100%;min-height:64px;resize:vertical;padding:10px 12px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(0,0,0,.36);color:#fff;font:inherit;font-size:14px;line-height:1.45;text-shadow:none}
.ds-prompt-input::placeholder{color:rgba(255,255,255,.56)}
.ds-prompt-input:focus-visible{outline:2px solid #7ef0d4;outline-offset:1px}
.ds-prompt-submit{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.ds-prompt-examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:rgba(255,255,255,.8);font-size:12px;font-weight:700}
.ds-prompt-chip{max-width:100%;overflow:hidden;padding:5px 10px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:700;text-align:start;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.ds-prompt-chip:hover,.ds-prompt-chip:focus-visible{border-color:#7ef0d4;color:#7ef0d4}
.ds-upload-price-link{color:#7ef0d4;font-weight:850;text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.ds-prompt-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ds-prompt-submit{justify-self:stretch;width:100%}.ds-prompt-input{min-height:48px}.ds-prompt-examples{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.ds-prompt-examples::-webkit-scrollbar{display:none}.ds-prompt-examples>span{flex:0 0 auto}.ds-prompt-chip{flex:0 0 auto;max-width:78vw}}
@media (max-width:767px) and (max-height:700px){.ds-prompt-examples{display:none}}
@media (min-width:768px) and (max-width:1023px){.ds-hero-copy.has-upload-card h1{font-size:34px!important}}
.ds-prompt-card>*{min-width:0}
@media (min-width:768px){.ds-prompt-chip{white-space:normal;text-overflow:clip;line-height:1.35}}
/* Template modules on tool pages (2026-09-25): use-case grid and the
   three-case proof on /image-edit. */
.ds-tool-usecases{padding:40px 48px;border:1px solid rgba(255,255,255,.1);background:#141a19;color:#e9f2ef}
.ds-tool-usecases .ds-landing-head h2{color:#fff;font-size:28px;line-height:1.2}
.ds-tool-usecase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.ds-tool-usecase{padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04)}
.ds-tool-usecase h3{margin:0;color:#fff;font-size:15px;line-height:1.3}
.ds-tool-usecase p{margin:6px 0 0;color:rgba(233,242,239,.72);font-size:13px;line-height:1.5}
.ds-tool-proof-cases{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px}
.ds-tool-proof-cases h3 a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){.ds-tool-usecase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-tool-proof-cases{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.ds-tool-usecases{padding:26px 18px}.ds-tool-usecases .ds-landing-head h2{font-size:24px}.ds-tool-usecase-grid{grid-template-columns:minmax(0,1fr)}}
.ds-tool-example-figure{max-width:760px;margin:24px auto 0}
/* --ds-example-ratio (width/height) gives the image its box before it loads, so the page does not jump. */
.ds-tool-example-figure img{display:block;width:min(100%,calc(min(78vh,760px) * var(--ds-example-ratio,1)));max-width:100%;height:auto;max-height:min(78vh,760px);margin:0 auto;background:#0f1312}
.ds-tool-example-figure q{font-style:italic}