.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px 12px;font:14px/1.5 var(--body);color:var(--muted);padding:16px 0}.breadcrumbs a{color:var(--link)}
.eyebrow{font:700 12px/1.5 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.directory-hero{max-width:810px;padding:34px 0 18px}.directory-hero h1,.use-case-hero h1{font-size:clamp(42px,5.4vw,67px);line-height:1.02;margin:12px 0 20px}.directory-hero p,.intro{font:19px/1.7 var(--body);color:var(--muted)}
.reassure{font:16px/1.6 var(--ui)!important;color:var(--muted);margin-top:20px}.category-nav{display:flex;gap:12px;flex-wrap:wrap;padding:18px 0}.category-nav a{font:17px var(--ui);padding:8px 18px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none}.category-nav a:hover{background:#fff5c5}
.template-group,.related,.template-faq{padding-top:40px;scroll-margin-top:20px}h2{font-size:36px;line-height:1.1;margin:0 0 20px}h3{font-size:26px;line-height:1.15;margin:0 0 10px}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.template-card{min-width:0;background:white;border:2px solid var(--ink);border-radius:16px 10px 18px 12px;box-shadow:3px 4px 0 var(--ink);overflow:hidden}.template-card>a{display:block;height:100%;text-decoration:none}.template-card>a:hover h3{text-decoration:underline}.template-card img{display:block;width:100%;height:210px;object-fit:contain;padding:12px;border-bottom:1px solid var(--line)}.card-copy{padding:20px}.card-copy h3{margin-top:8px}.card-copy p{font:15px/1.65 var(--body);color:var(--muted)}.card-link{font:17px var(--ui);color:var(--link)}
.use-case-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:48px;padding:32px 0 24px;align-items:center}.hero-actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.hero-actions>a:not(.btn){color:var(--link)}.included{background:#fff8d5;border:1.5px solid var(--ink);padding:26px;border-radius:16px 10px 20px 12px;transform:rotate(1deg)}.included h2{font-size:29px}.included ul{padding-left:22px;margin:0;font:16px/1.7 var(--body)}.included li+li{margin-top:14px}
.preview-section{padding-top:34px;scroll-margin-top:20px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}.section-heading h2{font-size:32px}.section-heading>a{font:16px var(--ui);color:var(--link)}.diagram-preview{margin:0;background:white;border:2px solid var(--ink);border-radius:18px 12px 22px 14px;box-shadow:4px 5px 0 var(--ink);overflow:hidden}.diagram-preview img{display:block;width:100%;height:auto;padding:14px}.diagram-preview figcaption{border-top:1px solid var(--line);padding:15px 22px;font:14px/1.6 var(--body);color:var(--muted)}
.guide-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:48px;padding-top:60px;align-items:start}.guide{font:17px/1.7 var(--body)}.guide ol{padding-left:25px;margin:0}.guide li{padding-left:8px;margin-bottom:28px}.guide li::marker{font-weight:700;color:var(--link)}.guide li p{margin:0;color:var(--muted)}.practical-note{background:#e8f4ff;border-left:4px solid #80b6e4;padding:22px;margin-top:24px}.practical-note p{margin:0}.start-card{background:#fffbe3;border:2px solid var(--ink);border-radius:16px 12px 18px 10px;padding:26px}.start-card p{font:16px/1.7 var(--body);color:var(--muted)}.start-card h2{margin-top:10px;font-size:34px}.start-card .btn{margin:6px 0 18px}.download{display:block;color:var(--link);font:16px var(--ui)}.small-print{font-size:13px!important}
.template-faq{max-width:800px;padding-top:56px}.template-faq details{background:white;border:1.5px solid var(--ink);border-radius:12px;padding:18px 22px;margin:14px 0}.template-faq summary{font:700 23px var(--hand);cursor:pointer}.template-faq p{font:16px/1.7 var(--body);margin:12px 0 0;color:var(--muted)}
@media(max-width:900px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.use-case-hero,.guide-layout{gap:28px}.use-case-hero{grid-template-columns:1fr}.included{transform:none}.included ul{display:flex;flex-wrap:wrap;gap:10px 30px}.included li+li{margin:0}}
@media(max-width:600px){.template-grid,.guide-layout{grid-template-columns:1fr}.use-case-hero{padding-top:18px}.guide-layout{padding-top:40px}.template-card img{height:230px}.hero-actions{gap:20px}.diagram-preview img{padding:4px}.included ul{display:block}.included li+li{margin-top:10px}.section-heading{margin-bottom:14px}.section-heading h2{margin-bottom:0}.start-card{order:-1}.breadcrumbs{font-size:12px}}