/* Tinubuan free calculators (/tools/). Loaded after blog.css and reuses its tokens. */
.tool-page{padding-bottom:96px}
.tool-hero{width:calc(100% - 40px);max-width:var(--max);margin:12px auto 0;padding:clamp(30px,4vw,52px);background:var(--ink);color:#fff;border-radius:28px;background-image:radial-gradient(circle at 92% 0%,rgba(244,213,74,.22),transparent 42%)}
.tool-hero .blog-kicker{margin:22px 0 12px;color:var(--yellow)}
.tool-hero h1{max-width:760px;margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:620;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.tool-hero>p:last-child{max-width:620px;margin:16px 0 0;color:rgba(255,255,255,.84);font-size:clamp(16px,1.6vw,19px);line-height:1.5}
.tool-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;color:rgba(255,255,255,.7);font-size:13px;font-weight:650}
.tool-breadcrumbs a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

.tool-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;max-width:var(--max);margin:0 auto;padding:40px 28px 0;align-items:start}
.tool-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px}
.tool-card h2{margin:0 0 20px;font-size:22px;letter-spacing:-.025em}
.tool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tool-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.tool-field--wide{grid-column:1/-1}
.tool-label{font-size:13px;font-weight:720;line-height:1.3}
.tool-field small{color:var(--muted);font-size:12px;line-height:1.4}
.tool-input{display:flex;align-items:center;min-height:48px;padding:0 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease}
.tool-input:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(244,213,74,.55)}
.tool-input i{color:var(--muted);font-style:normal;font-weight:700}
.tool-input input,.tool-input select{flex:1;min-width:0;height:46px;padding:0 6px;border:0;background:transparent;color:var(--ink);font:650 16px Figtree,Arial,sans-serif;outline:none}
.tool-input input::-webkit-inner-spin-button{opacity:.4}
.tool-select{padding-right:8px}
.tool-select select{padding:0;cursor:pointer}
.tool-submit{margin-top:22px;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--yellow);color:var(--ink);font:780 15px Figtree,Arial,sans-serif;cursor:pointer}
.tool-submit:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.js-tools .tool-submit{display:none}

.tool-result{position:sticky;top:96px}
.tool-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool-stat{padding:14px 16px;background:var(--paper);border-radius:14px;min-width:0}
.tool-stat span{display:block;color:var(--muted);font-size:12px;font-weight:720;line-height:1.3}
.tool-stat strong{display:block;margin-top:6px;font-size:20px;letter-spacing:-.02em;overflow-wrap:anywhere}
.tool-stat.is-main{background:var(--yellow-soft);border:1px solid #f7e48f}
.tool-stat.is-main strong{font-size:clamp(24px,2.6vw,30px)}
.tool-note{margin:18px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.tool-table-wrap{margin-top:18px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch}
.tool-table-wrap:focus-visible{outline:3px solid rgba(244,213,74,.7)}
.tool-table{width:100%;min-width:440px;border-collapse:collapse;font-size:14px}
.tool-table th,.tool-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tool-table th{background:var(--paper);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tool-table tr:last-child td{border-bottom:0}
.tool-table .num{text-align:right;font-variant-numeric:tabular-nums}

.tool-explainer,.tool-faq{max-width:760px;margin:0 auto;padding:64px 28px 0}
.tool-explainer h2,.tool-faq h2{margin:0 0 16px;font-size:clamp(26px,3vw,34px);letter-spacing:-.035em}
.tool-explainer p,.tool-explainer li{font-size:17px;line-height:1.7}
.tool-explainer li{margin-bottom:8px}
.tool-explainer a{border-bottom:1px solid var(--ink);font-weight:700}
.tool-faq details{border-top:1px solid var(--line);padding:16px 0}
.tool-faq details:last-child{border-bottom:1px solid var(--line)}
.tool-faq summary{cursor:pointer;font-size:17px;font-weight:720}
.tool-faq details p{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.65}

.tool-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:var(--max);margin:0 auto;padding:64px 28px 0}
.tool-more-card{display:flex;flex-direction:column;gap:8px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:22px;transition:transform .25s ease,box-shadow .25s ease}
.tool-more-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(2,12,69,.08)}
.tool-more-card span{color:#6b5410;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.tool-more-card strong{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.tool-more-card small{color:var(--muted);font-size:15px;line-height:1.5}
.tool-more--hub{padding-top:40px}
.tool-cta{max-width:calc(var(--max) - 56px);margin:72px auto 0}

@media(max-width:1024px){
  .tool-shell{grid-template-columns:minmax(0,1fr)}
  .tool-result{position:static}
}

@media(max-width:760px){
  .tool-page{padding-bottom:64px}
  .tool-hero{width:calc(100% - 20px);margin:8px 10px 0;padding:24px 20px 30px;border-radius:22px}
  .tool-hero .blog-kicker{margin-top:18px}
  .tool-shell{padding:24px 16px 0;gap:16px}
  .tool-card{padding:22px 18px;border-radius:19px}
  .tool-fields{grid-template-columns:1fr;gap:14px}
  .tool-stats{gap:10px}
  .tool-stat{padding:12px 13px}
  .tool-stat strong{font-size:18px}
  .tool-explainer,.tool-faq{padding:48px 18px 0}
  .tool-explainer p,.tool-explainer li{font-size:16px}
  .tool-more{grid-template-columns:1fr;padding:48px 16px 0;gap:14px}
  .tool-more-card{padding:22px}
  .tool-cta{margin:56px 16px 0;max-width:none}
}

@media(max-width:360px){
  .tool-stats{grid-template-columns:1fr}
}