:root{
  --ink:#2f3437;
  --muted:#787774;
  --line:#e9e9e7;
  --accent:#2383e2;
  --soft:#fff;
  --white:#fff;
}

html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai",sans-serif;line-height:1.65;font-size:15px}
.container{width:100%;max-width:960px;padding-left:28px;padding-right:28px}

.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:none;backdrop-filter:blur(10px)}
.header-row{min-height:64px;gap:24px}
.brand{font-size:1.16rem;letter-spacing:-.025em;font-weight:750}
.category-trigger{font-size:.84rem;font-weight:650;padding:8px 10px;border-radius:5px}
.category-trigger:hover,.category-trigger:focus-visible,.category-menu.is-open .category-trigger{background:#f1f1ef;color:var(--ink)}
.category-panel{left:-84px;width:min(720px,calc(100vw - 40px));border-radius:7px;padding:16px;box-shadow:0 8px 24px rgba(15,15,15,.12)}
.category-panel:before{left:128px}
.menu-category{border-radius:5px;padding:8px!important}
.menu-category:hover,.menu-category:focus-visible{background:#f1f1ef}
.menu-category-icon{width:34px;height:34px;border-radius:5px;background:#f1f1ef;color:#55534e}
.header-search{width:min(250px,25vw)}
.header-search input{height:38px;border-radius:5px;background:#f7f7f5;border-color:transparent;padding-left:34px}
.header-search input:focus{border-color:#c7c7c5;box-shadow:none}
.header-search button{border-radius:4px;background:#2f3437}

.hero{max-width:720px;padding:72px 0 58px}
.hero:after{display:none}
.hero h1,.page-intro h1{color:#222;letter-spacing:-.045em;font-weight:750}
.hero h1{font-size:clamp(2.65rem,6vw,4.25rem);margin-bottom:16px}
.hero h1 span{color:#55534e}
.lead{color:var(--muted);font-size:1.06rem;max-width:600px}
.eyebrow{color:#9b9a97;font-size:.72rem;letter-spacing:.08em}
.hero-action{background:#2f3437;border-radius:5px;box-shadow:none;padding:10px 14px;font-size:.84rem}
.hero-action:hover{background:#444;transform:none}
.hero-metrics{max-width:620px;border-top:1px solid var(--line);gap:40px}
.hero-metrics strong{font-size:1.2rem;font-weight:700}

section{margin-bottom:54px}
.section-heading{margin-bottom:16px}
.section-heading h2,h2{font-size:1.3rem;letter-spacing:-.025em;font-weight:700}
.section-heading p{color:var(--muted)}
.tool-grid{gap:10px}
.category-grid{gap:10px}
.tool-card,.category-card,.content-card,.calculator-card,.result-card,.sidebar-card{border:1px solid var(--line);border-radius:7px;box-shadow:none;padding:20px}
.tool-card{min-height:176px;transition:background .12s,border-color .12s}
.tool-card:hover,.category-card:hover{transform:none;background:#f7f7f5;border-color:#d8d8d5}
.tool-card-icon,.category-icon{width:38px;height:38px;border-radius:5px;background:#f1f1ef;color:#55534e;font-size:1rem}
.category-card .category-icon{width:40px;height:40px;font-size:1.05rem}
.tool-category-label{background:#f1f1ef;color:#787774;border-radius:4px;padding:3px 7px}
.tool-card h3,.category-card h3{font-size:.98rem;letter-spacing:-.015em}
.tool-card p,.category-card p{font-size:.84rem;line-height:1.55}
.tool-link,.category-card span:last-child{font-size:.78rem;color:#55534e}
.tool-arrow{color:#9b9a97}

.page-intro{padding:46px 0 28px}
.page-intro h1{font-size:clamp(2rem,5vw,2.8rem)}
.breadcrumbs{padding-top:20px;font-size:.8rem}
.breadcrumbs a{color:#55534e;text-decoration:underline;text-decoration-color:#d3d3d1}
.trust-row span{background:#f1f1ef;color:#55534e;border-radius:4px;font-weight:600}
.calculator-layout{grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);gap:12px}
.calculator-card,.result-card{padding:22px}
.result-card{background:#f7f7f5;color:var(--ink)}
.result-card h2,.breakdown strong{color:var(--ink)}
.result-card .eyebrow,.result-unit,.breakdown div{color:var(--muted)}
.result-card .step-badge.dark{background:#e9e9e7;color:#55534e}
.breakdown{border-color:#dfdfdc}
.breakdown div{border-color:#e5e5e2}
.result-value{font-size:clamp(2.2rem,5vw,3.15rem)}
.step-badge{border-radius:4px;background:#f1f1ef;color:#787774}
input,.input-wrap select{border-radius:5px!important;border-color:#d9d9d6!important;background:#fff!important}
input:focus,.input-wrap select:focus{outline:2px solid rgba(35,131,226,.18);border-color:#2383e2!important}
.button-row button,.copy-button{border-radius:5px}
.primary{background:#2f3437}
.secondary,.copy-button{background:#fff}
.formula-box{border-radius:5px;background:#f1f1ef;color:var(--ink);font-size:1rem;font-weight:650}
.example-box{background:#f7f7f5;border-left-color:#b4b4b0;border-radius:0 5px 5px 0}
.notice-box{background:#fbf3db;border-color:#eee0b6;border-radius:5px}
.sidebar-card{border-radius:7px}

footer{background:#fff;color:var(--ink);border-top:1px solid var(--line);margin-top:64px;padding:32px 0}
.footer-grid p{color:var(--muted)}
.site-footer{margin-top:88px!important;padding:0 0 22px!important;background:#f7f7f5!important;color:var(--ink)!important;border-top:1px solid var(--line)}.footer-callout{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 32px;margin-bottom:42px;border-radius:0 0 10px 10px;background:#2f3437;color:#fff}.footer-callout span{display:block;margin-bottom:3px;color:#c7c7c5;font-size:.7rem;font-weight:700;letter-spacing:.08em}.footer-callout h2{margin:0 0 4px;color:#fff;font-size:1.2rem;letter-spacing:-.02em}.footer-callout p{margin:0;color:#c7c7c5;font-size:.82rem}.footer-callout>a{display:inline-flex;align-items:center;gap:12px;flex:none;padding:10px 14px;border-radius:5px;background:#fff;color:#2f3437;font-size:.8rem;font-weight:750}.footer-callout>a:hover{background:#f1f1ef}.footer-callout b{font-size:1rem}.footer-layout{display:grid;grid-template-columns:minmax(230px,1.05fr) minmax(470px,1.95fr);gap:72px;padding:0 4px 40px}.site-footer .footer-logo-image{filter:none}.footer-brand p{max-width:300px;margin:15px 0 12px;color:var(--muted);font-size:.82rem;line-height:1.75}.footer-contact{font-size:.8rem;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:#c7c7c5;text-underline-offset:3px}.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.footer-links h2{margin:3px 0 13px;font-size:.78rem;letter-spacing:.02em;color:var(--ink)}.footer-links a{display:block;margin:8px 0;color:var(--muted);font-size:.79rem}.footer-links a:hover,.footer-contact:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem}.footer-privacy{display:inline-flex;align-items:center;gap:7px}.footer-privacy i{display:block;width:7px;height:7px;border-radius:50%;background:#46a758}
.legal-intro{max-width:700px;padding-bottom:24px}.legal-intro p{max-width:640px;color:var(--muted)}.legal-content{max-width:800px;padding:34px 38px;margin-bottom:70px}.legal-content h2{margin-top:34px;margin-bottom:9px;padding-top:4px}.legal-content p,.legal-content li{color:var(--muted)}.legal-content p{line-height:1.82}.legal-content a{color:#2383e2;text-decoration:underline;text-underline-offset:3px}.legal-lead{font-size:1.08rem;color:var(--ink)!important;line-height:1.85!important}.legal-updated{margin-top:15px!important;font-size:.78rem!important}.legal-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 32px}.legal-feature-grid>div{padding:18px;background:#f7f7f5;border:1px solid var(--line);border-radius:6px}.legal-feature-grid span{display:grid;place-items:center;width:34px;height:34px;background:#e9e9e7;border-radius:5px;color:#55534e;font-weight:700}.legal-feature-grid h3{font-size:.95rem;margin:11px 0 3px}.legal-feature-grid p{font-size:.84rem;margin:0;line-height:1.6}.contact-box{display:flex;align-items:center;gap:16px;padding:20px;background:#f7f7f5;border:1px solid var(--line);border-radius:6px;margin:24px 0}.contact-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:6px;background:#2f3437;color:#fff;font-size:1.3rem}.contact-box .eyebrow{margin:0}.contact-box a{font-size:1.15rem;font-weight:750;color:#2383e2}.contact-box p:last-child{margin:3px 0 0;font-size:.85rem}.legal-content ul,.legal-content ol{padding-left:24px}.legal-content li{padding:4px 0;line-height:1.75}.legal-table-wrap{overflow-x:auto;margin:20px 0}.legal-table{width:100%;border-collapse:collapse;font-size:.84rem}.legal-table th,.legal-table td{padding:13px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}.legal-table th{background:#f7f7f5;color:var(--ink)}.source-directory{list-style:none;padding:0!important}.source-directory li{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.source-directory li:last-child{border-bottom:0}.source-directory a{font-weight:700}.source-directory span{color:var(--muted)}

@media(max-width:760px){
  .container{padding-left:20px;padding-right:20px}
  .hero{padding:52px 0 44px}
  .hero-metrics{gap:16px}
  .main-nav{margin-left:-20px;margin-right:-20px;flex-basis:calc(100% + 40px)}
  .calculator-layout{grid-template-columns:1fr}
  .site-footer{margin-top:52px!important}.footer-callout{align-items:flex-start;flex-direction:column;margin:0 -20px 34px;padding:25px 20px;border-radius:0;gap:18px}.footer-layout{grid-template-columns:1fr;gap:30px;padding:0 0 28px}.footer-links{grid-template-columns:repeat(3,1fr);gap:18px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:7px;padding-left:0;padding-right:0}
}

@media(max-width:520px){
  .category-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.5rem}
  .tool-card,.category-card{padding:17px}
  .legal-content{padding:22px 20px}.legal-feature-grid{grid-template-columns:1fr}.contact-box{align-items:flex-start}
  .footer-links{grid-template-columns:1fr 1fr}.footer-links>div:last-child{grid-column:1/-1}
}
.category-count{display:inline-block;margin-top:8px;padding:4px 8px;border-radius:4px;background:#f1f1ef;color:#787774;font-size:.75rem;font-weight:700}