body.public-tools-directory-page{margin:0}
.public-tools-page{max-width:1240px;margin:28px auto 48px;padding:0 20px;color:#244d3f}
.public-tools-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:180px;padding:22px 32px;background:#f8f8f1;border:1px solid #d7e1d5;border-radius:12px;position:relative;margin-bottom:22px}
.public-tools-hero:before{content:"";position:absolute;top:-1px;left:32px;width:44px;height:3px;background:#b59a5e;border-radius:0 0 3px 3px}
.public-tools-eyebrow{font-size:.78rem;letter-spacing:.09em;color:#80663d;margin:0 0 8px}
.public-tools-hero h1{font-family:var(--font-serif,"Noto Serif TC",serif);font-size:clamp(30px,3vw,40px);line-height:1.3;margin:0 0 10px;color:#203f35}
.public-tools-hero p:last-child{color:#536b5d;line-height:1.75;margin:0;max-width:620px}
.public-tools-hero>img{width:220px;height:auto;flex:none}
.public-tools-featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.public-tool-feature{min-width:0;border:1px solid #dce3d7;border-radius:12px;background:#fffefa;overflow:hidden;display:flex;flex-direction:column}
.public-tool-copy{padding:22px 24px 18px}
.public-tool-copy h2,.public-tools-more h2{font-family:var(--font-serif,"Noto Serif TC",serif);font-size:1.45rem;line-height:1.45;color:#234b3d;margin:0 0 8px}
.public-tool-copy p{font-size:1rem;line-height:1.75;color:#536b5d;margin:0 0 15px}
.public-tool-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:44px;padding:9px 17px;border:1px solid #234f40;border-radius:6px;background:#234f40;color:#fff!important;text-decoration:none;font-weight:600;line-height:1.5}
.public-tool-button:hover{background:#183e31}
.public-tool-feature figure{margin:auto 0 0;padding:0 24px 14px}
.public-tool-screenshot{height:265px;display:flex;align-items:center;justify-content:center;background:#eff3ec;border:1px solid #e1e6db;border-radius:6px;overflow:hidden;padding:12px}
.public-tool-screenshot img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain}
.public-tool-feature figcaption{margin-top:8px;font-size:.8rem;color:#66796b;line-height:1.6}
.public-tools-more{margin-top:28px}
.public-tools-more h2{font-size:1.2rem;margin-bottom:10px}
.public-tools-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;border-top:1px solid #dce3d7}
.public-tools-directory>a{display:flex;align-items:center;gap:13px;min-width:0;padding:16px 4px;border-bottom:1px solid #dce3d7;text-decoration:none;color:#244d3f;line-height:1.5}
.public-tools-directory>a:hover{background:#eff3ec}
.public-tool-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;background:#edf2e8;border:1px solid #dce3d7;border-radius:8px}
.public-tool-icon svg{width:22px;height:22px}
.public-tools-directory strong{display:block;font-size:1.05rem;font-weight:600}
.public-tools-directory small{display:block;font-size:.94rem;line-height:1.65;color:#596e60;margin-top:3px}
.public-tool-arrow{margin-left:auto;flex:none;color:#967c43}
.public-tools-page a:focus-visible{outline:3px solid #a68b51;outline-offset:3px}
.public-tools-directory-page #hkf-site-header [data-hkf-text-toggle]{white-space:nowrap!important;word-break:normal;flex-shrink:0}
@media(max-width:700px){.public-tools-page{margin:18px auto 32px;padding-inline:16px}.public-tools-hero{padding:20px;gap:8px;min-height:0;margin-bottom:16px}.public-tools-hero>img{width:110px}.public-tools-hero h1{font-size:30px}.public-tools-hero p:last-child{font-size:1rem}.public-tools-eyebrow{font-size:.7rem;letter-spacing:.02em}.public-tools-featured{grid-template-columns:1fr;gap:16px}.public-tool-copy{padding:18px 18px 14px}.public-tool-feature figure{padding:0 18px 12px}.public-tool-screenshot{height:240px;padding:8px}.public-tools-directory{grid-template-columns:1fr}.public-tools-more{margin-top:22px}.public-tools-directory-page #hkf-site-header .public-header-utility-contact{flex-wrap:wrap!important;justify-content:center;gap:4px 10px}.public-tools-directory-page #hkf-site-header .public-header-utility-inner{padding-block:6px}.public-tools-directory-page #hkf-site-header .hkf-text-size{flex-shrink:0}}
@media(max-width:400px){.public-tools-hero>img{width:80px}.public-tools-hero{padding:18px 16px}.public-tools-eyebrow{max-width:170px}.public-tools-hero:before{left:16px}}
@media(max-width:400px){.public-tools-eyebrow{max-width:none;font-size:.65rem;letter-spacing:0;white-space:nowrap}}