/* Tools page: the calculators in the site's drawing-sheet style */
.tools-hero { background: radial-gradient(900px 400px at 70% 20%, rgba(0, 69, 112, 0.5), rgba(11, 26, 46, 0) 70%), var(--navy-900); color: #e6edf5; }
.tools-hero__inner { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: 20px; }
.tools-hero__title { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; font-weight: 300; letter-spacing: -0.012em; color: #f1f1f2; max-width: 22ch; }
.tools-hero__title em { font-style: normal; font-weight: 600; color: var(--blue-300); }
.tools-hero__lede { max-width: var(--measure); font-size: 18px; font-weight: 300; color: #c3d2e0; }

.container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.card { background: var(--white); border: 1px solid rgba(0, 69, 112, 0.35); border-top: 3px solid var(--navy-600); padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.card-title { font-size: 22px; font-weight: 500; color: var(--navy-700); }
.input-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.input-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.input-group.wide { grid-column: span 2; }
.input-group label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-500); }
.input-wrapper { display: flex; align-items: stretch; border: 1px solid rgba(0, 69, 112, 0.45); background: var(--paper); }
.input-wrapper:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(0, 149, 198, 0.2); }
.input-wrapper input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font: 500 17px var(--font-mono); color: var(--ink); }
.input-wrapper input:focus, .input-group > select:focus { outline: none; }
.input-wrapper select, .input-group > select { border: 0; border-left: 1px solid rgba(0, 69, 112, 0.25); background: var(--white); padding: 10px 10px; font: 500 14px var(--font-sans); color: var(--navy-600); }
.input-group > select { border: 1px solid rgba(0, 69, 112, 0.45); background: var(--paper); padding: 11px 12px; font-size: 15px; }
.input-wrapper .unit { display: flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: 13px; color: var(--navy-600); border-left: 1px solid rgba(0, 69, 112, 0.25); background: var(--white); }
.convert-indicator { font-family: var(--font-mono); font-size: 12px; color: var(--blue-500); min-height: 16px; }
.convert-indicator:empty { display: none; }
.card .btn-primary { align-self: flex-start; border: 0; cursor: pointer; font-family: var(--font-sans); background: var(--blue-500); color: var(--white); }
.card .btn-primary:hover { background: #00a6dc; }
.result { border-top: 1.5px solid var(--navy-600); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.result-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-500); }
.result-value { font-family: var(--font-mono); font-size: 40px; font-weight: 500; color: var(--navy-700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.formula { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin-top: 6px; }
.info { grid-column: 1 / -1; border-top: 1.5px solid var(--navy-600); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.info-section { padding: 20px 24px 22px 0; border-bottom: 0.5px solid rgba(0, 69, 112, 0.4); font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.info-section:nth-child(even) { padding-left: 24px; border-left: 0.5px solid rgba(0, 69, 112, 0.4); }
.info-section strong { font-weight: 500; color: var(--navy-700); }
.info-section code { font-family: var(--font-mono); font-size: 13px; color: var(--navy-600); background: rgba(0, 69, 112, 0.06); padding: 1px 6px; }
@media (max-width: 900px) {
  .container, .info { grid-template-columns: 1fr; }
  .info-section:nth-child(even) { padding-left: 0; border-left: 0; }
  .input-group.wide { grid-column: auto; }
}

.restricted-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.btn--outline { border: 1px solid var(--navy-600); color: var(--navy-700); font-weight: 500; }
.btn--outline:hover { background: var(--navy-600); color: var(--white); }
.tools__list--light { border-top: 1.5px solid var(--navy-600); }
.tools__list--light li { border-bottom: 0.5px solid rgba(0, 69, 112, 0.4); }
.tools__list--light a { color: var(--navy-700); }
.tools__list--light a:hover { color: var(--blue-500); }
.tools__list--light a::after { color: var(--blue-500); }
.tools__list--light .tools__sub { color: var(--ink-2); }