.conversion-hero {
  padding: 54px 0 62px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.conversion-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  gap: 58px;
  align-items: center;
}

.conversion-copy h1 { max-width: 600px; }

.quick-answer {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--green);
  background: var(--green-pale);
  color: var(--green-dark);
  font-weight: 760;
  line-height: 1.5;
}

.conversion-tool {
  min-width: 0;
  border: 1px solid #cfd9d1;
  border-radius: var(--radius);
  padding: 24px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 33, 27, .08);
}

.tool-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.tool-heading h2 { margin: 0; font-size: 24px; }
.example-label { color: var(--muted); font-size: 12px; font-weight: 700; }

.direction-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 20px; border-radius: 6px; padding: 4px; background: #eef1ee; }
.direction-button { min-height: 42px; border: 0; border-radius: 5px; padding: 0 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 760; }
.direction-button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(23, 33, 27, .14); }

.conversion-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field.full { grid-column: 1 / -1; }
.field-hint { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.conversion-error { margin: 14px 0 0; color: #a2382f; font-size: 13px; }

.conversion-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; border-radius: var(--radius); padding: 18px; background: #17211b; color: #fff; }
.result-primary, .result-note { grid-column: 1 / -1; }
.result-value { margin-top: 3px; font-size: 18px; font-weight: 820; }
.result-value.large { font-size: 36px; line-height: 1.05; }
.result-label { color: #aebdb3; font-size: 12px; }
.result-note { margin: 2px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); color: #aebdb3; font-size: 12px; line-height: 1.5; }

.conversion-formula { display: grid; gap: 8px; margin-top: 18px; border-left: 3px solid var(--blue-ink); padding: 16px 18px; background: var(--blue-pale); }
.conversion-formula code { color: var(--blue-ink); font-weight: 760; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.conversion-table { width: 100%; min-width: 610px; border-collapse: collapse; font-size: 14px; }
.conversion-table th, .conversion-table td { padding: 13px 15px; border-bottom: 1px solid #e7ece8; text-align: right; white-space: nowrap; }
.conversion-table th:first-child, .conversion-table td:first-child { text-align: left; }
.conversion-table th { background: #edf3ee; color: #4c5a51; font-size: 12px; text-transform: uppercase; }
.conversion-table tr:last-child td { border-bottom: 0; }

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related-link { display: grid; gap: 8px; border-top: 3px solid var(--green); padding-top: 17px; text-decoration: none; }
.related-link:hover strong { color: var(--green-dark); }
.related-link span { color: var(--muted); line-height: 1.65; }
[hidden] { display: none !important; }

@media (max-width: 840px) { .conversion-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .conversion-hero { padding: 38px 0 48px; }
  .conversion-tool { padding: 18px 14px; }
  .tool-heading { align-items: flex-start; flex-direction: column; }
  .conversion-fields, .related-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .direction-toggle { grid-template-columns: 1fr; }
  .result-value.large { font-size: 31px; }
}