/* Reviewed, image-led tool pages. Keep the working controls ahead of the guide. */
.designed-tool-page{--design-ink:#132b4b;--design-line:#d8e4f0;color:var(--design-ink)}
.designed-tool-page .breadcrumbs{margin:20px 0 14px;font-size:.875rem;line-height:1.5}
.designed-tool-page .tool-head-illustrated{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:24px;padding:20px 24px;margin:0 0 20px;border:1px solid var(--design-line);border-radius:20px;background:#fff;box-shadow:0 6px 24px #142b4b08}
.tool-head-copy{min-width:0}
.designed-tool-page .tool-head h1{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.14;letter-spacing:-.035em;margin:12px 0;color:#132b4b;overflow-wrap:anywhere}
.designed-tool-page .tool-head-copy>p{font-size:1rem;line-height:1.6;margin:0;color:#51647c;max-width:60ch}
.designed-tool-page .tool-head .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem;letter-spacing:.035em;line-height:1.5}
.designed-tool-page .local-pill{font-size:.75rem;white-space:normal}
.tool-illustration{display:block;overflow:hidden;border-radius:14px;background:#f6faff;min-width:0}
.tool-illustration img{display:block;width:100%;height:auto;aspect-ratio:640/426;object-fit:cover}
.designed-tool-page .tool-card{margin:0 0 20px;border:1px solid #cdddec;border-top:3px solid #235bc0;border-radius:18px;padding:24px;box-shadow:0 10px 28px #18395b09}
.designed-tool-page .tool-card label{font-size:.9375rem;line-height:1.5}
.designed-tool-page .tool-card button:not(.vfr-route-map button){box-shadow:none;min-height:46px}
.designed-tool-page .tool-card button:not(.vfr-route-map button):hover:not(:disabled){transform:none;box-shadow:0 3px 10px #18395b14}
.designed-tool-page .tool-card input:not([type=checkbox]):not([type=radio]),.designed-tool-page .tool-card textarea,.designed-tool-page .tool-card select{font-size:1rem;background:#fff}
.designed-tool-page .vfr-caution{font-size:.9375rem;line-height:1.6;padding:12px 16px;margin-top:0}
.designed-tool-page .answer{background:#f0f6ff;border:1px solid #d6e5f8;border-left:3px solid #316ac2;box-shadow:none;margin-top:24px}
.designed-tool-page .prose,.designed-tool-page .faq{max-width:850px}
.designed-tool-page .prose p,.designed-tool-page .faq p{font-size:1rem;line-height:1.75}
.designed-tool-page .faq summary{font-size:1rem;line-height:1.55;padding:3px 0}
.designed-tool-page .related{border-top:1px solid var(--design-line);margin-top:24px}
@media(max-width:900px){.designed-tool-page .tool-head-illustrated{grid-template-columns:minmax(0,1fr) 200px;gap:18px}.designed-tool-page .tool-head h1{font-size:1.875rem}}
@media(max-width:600px){.designed-tool-page .tool-head-illustrated{grid-template-columns:minmax(0,1fr) 88px;align-items:start;gap:12px;padding:16px;border-radius:16px}.designed-tool-page .tool-head h1{font-size:1.65rem;line-height:1.18;letter-spacing:-.025em}.designed-tool-page .tool-head-copy>p{font-size:.9375rem}.designed-tool-page .tool-head .eyebrow{font-size:.75rem}.tool-illustration{margin-top:5px;border-radius:9px}.designed-tool-page .tool-card{padding:16px;border-radius:16px}.designed-tool-page .breadcrumbs{margin:16px 0 10px}}
@media(prefers-reduced-motion:reduce){.designed-tool-page *{scroll-behavior:auto;transition:none!important}}
/* Give translated titles the full phone width; the thumbnail shares the kicker row. */
@media(max-width:600px){.designed-tool-page .tool-head-copy{display:contents}.designed-tool-page .tool-head-copy>.eyebrow{grid-column:1;grid-row:1;align-self:center}.designed-tool-page .tool-head-copy>h1,.designed-tool-page .tool-head-copy>p{grid-column:1/-1;margin:0}.designed-tool-page .tool-illustration{grid-column:2;grid-row:1;align-self:center;margin-top:0}.designed-tool-page .tool-head-copy>h1{margin-top:2px}}

/* Non-tool page families retain their content and navigation, with a calmer
   reading rhythm. Working controls and generated previews are not targeted. */
.designed-content-page{--design-line:#d8e4f0}
.designed-content-page .breadcrumbs{font-size:.875rem;line-height:1.5;margin:20px 0 14px}
.designed-content-page .page-intro{padding:32px 36px 24px;max-width:900px}
.designed-content-page .page-intro h1,.designed-content-page .article h1{font-size:clamp(2rem,3.5vw,2.75rem);letter-spacing:-.035em;line-height:1.15;color:#132b4b;overflow-wrap:anywhere}
.designed-content-page .page-intro p{max-width:68ch;font-size:1.0625rem;line-height:1.65;color:#51647c}
.designed-content-page .article{max-width:820px;margin:0 auto;padding:18px 0 56px}
.designed-content-page .article .lead{font-size:1.125rem;line-height:1.65;color:#415a77}
.designed-content-page .article p,.designed-content-page .article li,.designed-content-page .prose p,.designed-content-page .faq p{font-size:1rem;line-height:1.8;color:#425971}
.designed-content-page .article h2{font-size:1.5rem;line-height:1.3;letter-spacing:-.015em;margin:32px 0 12px;color:#17365b}
.designed-content-page .article h3{font-size:1.125rem;line-height:1.45;margin:24px 0 10px;color:#214b7a}
.designed-content-page .article a{text-underline-offset:3px}
.designed-content-page .article pre{max-width:100%;overflow:auto;padding:16px;border:1px solid var(--design-line);border-radius:12px;background:#f4f8fe;font-size:.875rem;line-height:1.65}
.designed-content-page .workflow-files{border:1px solid #cadcef;border-left:3px solid #2a63ba;border-radius:12px;padding:16px 20px;background:#f2f7fe;margin:24px 0}
.designed-content-page .workflow-files h2{margin-top:0}
.designed-content-page .section-title h2{font-size:1.5rem;letter-spacing:-.025em;line-height:1.3}
.designed-content-page .tool-grid{gap:16px}
.designed-content-page .tool-link{border-color:#d6e3f0;border-radius:16px;box-shadow:0 4px 16px #18395b06;transition:border-color .15s,box-shadow .15s}
.designed-content-page .tool-link:hover{transform:none;border-color:#8eafd8;box-shadow:0 6px 22px #18395b10}
.designed-content-page .tool-link b{font-size:1rem;line-height:1.4;letter-spacing:-.01em;color:#173b68}
.designed-content-page .tool-link small{font-size:.875rem;line-height:1.6;color:#556b85}
.designed-content-page .faq summary{font-size:1rem;line-height:1.55}
.design-homepage .hero{padding-top:36px;padding-bottom:36px;gap:36px}
.design-homepage .hero h1{font-size:clamp(2.3rem,4.5vw,3.75rem);line-height:1.06;letter-spacing:-.045em}
.design-homepage .home-discovery{border-color:#cbddf0;box-shadow:0 10px 30px #173b6808}
.design-profession-landing .tool-grid{margin-bottom:28px}
@media(max-width:600px){.designed-content-page .page-intro{padding:24px 20px 18px}.designed-content-page .article{padding-top:10px}.designed-content-page .article h1,.designed-content-page .page-intro h1{font-size:2rem}.designed-content-page .workflow-files{padding:14px}.design-homepage .hero{padding:28px 22px;gap:20px}.design-homepage .hero h1{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.designed-content-page *{scroll-behavior:auto;transition:none!important}}
/* Local file workspaces keep previews bounded without hiding their controls. */
.designed-tool-page .tool-card[data-tool="encoding-inspector"] pre,.designed-tool-page .tool-card[data-tool="csv-key-comparator"] pre{max-width:100%;max-height:28rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.designed-tool-page .tool-card[data-tool="encoding-inspector"] dd{margin:0 0 .65rem;overflow-wrap:anywhere}
.designed-tool-page .tool-card[data-tool="encoding-inspector"] dt{font-weight:650}