
:root{--bg:#f6fbff;--surface:#ffffff;--text:#173047;--muted:#5d7184;--line:#d9e8f4;--primary:#0b75b7;--primary-dark:#075b91;--accent:#16a3a6;--soft:#e9f6ff;--shadow:0 14px 40px rgba(24,75,120,.12);--radius:18px;}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:linear-gradient(180deg,#eef8ff 0%,#fff 35%,#f7fbff 100%);line-height:1.75} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(16px,4vw,48px)}.brand{display:flex;gap:12px;align-items:center;color:var(--text)}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));color:white;font-weight:800}.brand small{display:block;color:var(--muted);font-size:12px;line-height:1.4}.global-nav{display:flex;flex-wrap:wrap;gap:12px}.nav-link{color:var(--text);font-weight:700;font-size:14px}.menu-button{display:none;border:1px solid var(--line);background:white;border-radius:999px;padding:8px 14px}.hero{padding:80px clamp(18px,5vw,72px) 56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:42px;align-items:center}.hero-card,.section-card,.article-content,.sidebar .side-card,.cta-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero h1,.article-hero h1{font-size:clamp(32px,5vw,56px);line-height:1.18;margin:10px 0 18px;letter-spacing:-.04em}.lead{font-size:clamp(17px,2vw,20px);color:var(--muted)}.eyebrow{font-weight:800;color:var(--primary);letter-spacing:.08em;font-size:13px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:var(--primary);color:#fff;font-weight:800;border:1px solid var(--primary)}.button:hover{background:var(--primary-dark);text-decoration:none}.button.secondary{background:#fff;color:var(--primary)}.hero-card{padding:26px}.score-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}.score-list li{padding:14px;border-radius:14px;background:var(--soft);display:flex;gap:10px}.score-list span{font-weight:800;color:var(--primary)}.section{padding:44px clamp(18px,5vw,72px)}.section-head{max-width:820px;margin-bottom:22px}.section h2{font-size:clamp(26px,3vw,36px);line-height:1.25}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.section-card{padding:22px}.section-card h3{margin-top:0}.article-list{display:grid;gap:14px}.article-item{display:block;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line)}.article-item:hover{text-decoration:none;box-shadow:var(--shadow)}.tag{display:inline-flex;padding:4px 10px;background:var(--soft);border-radius:999px;font-size:12px;font-weight:800;color:var(--primary);margin-bottom:8px}.article-hero{padding:44px clamp(18px,6vw,90px) 24px;max-width:1180px;margin:auto}.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px}.article-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}.article-layout{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:24px;align-items:start;max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px) 64px}.article-content{padding:clamp(22px,4vw,40px)}.article-content h2{margin-top:42px;padding-top:8px;border-top:1px solid var(--line);font-size:26px}.article-content p{margin:16px 0}.toc{padding:18px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}.toc ol{margin-bottom:0}.check-list{display:grid;gap:10px;padding-left:0;list-style:none}.check-list li{padding:12px 14px 12px 42px;background:#f8fcff;border:1px solid var(--line);border-radius:14px;position:relative}.check-list li:before{content:"✓";position:absolute;left:15px;color:var(--accent);font-weight:900}.note-box{padding:18px;border-left:5px solid var(--accent);background:#f1fbfb;border-radius:14px}.simple-table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}.simple-table th,.simple-table td{padding:13px;border-bottom:1px solid var(--line);vertical-align:top}.simple-table th{width:34%;background:#f7fbff;text-align:left}.simple-table tr:last-child th,.simple-table tr:last-child td{border-bottom:0}.sidebar{position:sticky;top:92px;display:grid;gap:16px}.side-card{padding:18px}.side-card a{display:block;margin-top:10px}.side-card.muted{background:#f8fbfd;color:var(--muted)}.cta-card{padding:24px;margin-top:36px;background:linear-gradient(135deg,#ffffff,#eaf7ff)}.site-footer{padding:38px clamp(18px,5vw,72px);background:#123049;color:#dbeaf5}.site-footer a{color:#fff;display:block;margin-top:8px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}.copyright{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;margin-top:28px;color:#bdd4e6}.to-top{position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;border:0;background:var(--primary);color:white;font-size:20px;box-shadow:var(--shadow);display:none}.to-top.show{display:block}.tool-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.tool-box label{display:block;font-weight:800;margin-top:12px}.tool-box input,.tool-box textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit}.result{margin-top:14px;padding:14px;border-radius:14px;background:var(--soft);font-weight:800}.wide{max-width:1180px;margin:auto}.notice{background:#fff8e6;border:1px solid #f4d28e;border-radius:16px;padding:16px}.search-box{margin:16px 0}.search-box input{width:100%;padding:14px;border:1px solid var(--line);border-radius:999px;font:inherit}@media (max-width:900px){.hero,.grid,.grid.two,.article-layout,.footer-grid{grid-template-columns:1fr}.sidebar{position:static}.global-nav{display:none;width:100%;flex-direction:column}.global-nav.open{display:flex}.menu-button{display:block}.site-header{flex-wrap:wrap}.simple-table th,.simple-table td{display:block;width:100%}.hero{padding-top:42px}} 

/* Contact form */
.contact-form{display:grid;gap:16px;margin-top:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tool-box select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}.required{display:inline-flex;margin-left:6px;padding:2px 8px;border-radius:999px;background:#fff0f0;color:#b42318;font-size:12px;font-weight:800}.checkbox-label{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important}.checkbox-label input{width:auto!important;margin-top:.45em;flex:0 0 auto}.form-message{margin:8px 0 0;color:var(--primary);font-weight:800}.contact-form-box .notice{margin-top:18px}@media (max-width:700px){.form-grid{grid-template-columns:1fr}}

.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-error{background:#fff0f0;border:1px solid #f2b8b5;color:#8a1f16;border-radius:16px;padding:16px}.form-success{background:#effaf4;border:1px solid #a7e3be;color:#155724;border-radius:16px;padding:16px}


/* Original commercial-use PNG illustrations */
.hero-illustration,.card-illustration,.article-thumb,.article-visual-img,.page-visual-img{display:block;width:100%;height:auto;border-radius:16px;background:#eef8ff;border:1px solid var(--line)}
.hero-illustration{margin-bottom:18px;box-shadow:0 10px 26px rgba(24,75,120,.10)}
.card-illustration{aspect-ratio:16/10;object-fit:cover;margin-bottom:14px}
.article-thumb{aspect-ratio:16/9;object-fit:cover;margin-bottom:12px}
.article-visual{margin:28px 0 0}.article-visual-img{max-height:420px;object-fit:cover;box-shadow:var(--shadow)}
.page-visual{margin:28px 0 0;max-width:760px}.page-visual-img{max-height:360px;object-fit:cover;box-shadow:var(--shadow)}
.article-item{overflow:hidden}.article-item strong{display:block}.section-card{overflow:hidden}
@media (max-width:700px){.article-thumb{aspect-ratio:16/10}.article-visual-img,.page-visual-img{max-height:none}}

/* Final layout fixes: logo, favicon-ready header, compact article thumbnails */
.brand{min-width:220px;max-width:340px;}
.brand-logo{display:block;width:320px;max-width:42vw;height:auto;}
.article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;}
.article-item{height:100%;padding:16px;}
.article-item strong{display:block;line-height:1.45;margin-bottom:8px;}
.article-item p{font-size:14px;line-height:1.65;margin:8px 0 0;color:var(--muted);}
.article-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:10px;border:1px solid var(--line);background:#eef8ff;}
.section-card .card-illustration{display:block;width:100%;max-height:130px;object-fit:cover;border-radius:14px;margin-bottom:12px;border:1px solid var(--line);background:#eef8ff;}
.hero-illustration{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:16px;margin-bottom:18px;border:1px solid var(--line);background:#eef8ff;}
.article-visual{margin:24px 0 0;max-width:760px;}
.article-visual-img{display:block;width:100%;max-height:320px;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#eef8ff;box-shadow:var(--shadow);}
.page-visual{margin:24px 0 0;max-width:640px;}
.page-visual-img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#eef8ff;box-shadow:var(--shadow);}
@media (max-width:1100px){.article-list{grid-template-columns:repeat(2,minmax(0,1fr));}.brand{max-width:300px}.brand-logo{width:280px;max-width:50vw;}}
@media (max-width:680px){.article-list{grid-template-columns:1fr;}.brand{max-width:240px;min-width:180px}.brand-logo{width:220px;max-width:58vw}.site-header{gap:10px}.global-nav.open{width:100%;}.article-visual-img,.page-visual-img{max-height:none;}}
