/* Shared styles for /convert/<pair>/ programmatic landing pages. */
:root{ --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --maroon:#7c2433; --gold:#c6912e; --golddeep:#a5741c; --line:#e8ddc9; --radius:16px; }
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; display:flex; flex-direction:column; min-height:100%; }
header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1.5px solid var(--line); background:var(--paper); }
header .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--maroon); text-decoration:none; }
header .brand span{ color:var(--gold); }
header .back{ font-size:13px; font-weight:700; color:var(--maroon); text-decoration:none; }
main{ width:100%; max-width:640px; margin:0 auto; padding:22px 16px calc(40px + env(safe-area-inset-bottom)); }
.crumb{ font-size:12.5px; color:var(--inksoft); margin-bottom:12px; }
.crumb a{ color:var(--maroon); text-decoration:none; font-weight:700; }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:30px; margin:2px 0 6px; letter-spacing:-.01em; }
.lead{ color:var(--inksoft); font-size:15.5px; margin-bottom:20px; }
.panel{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.step-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--golddeep); margin:0 0 12px; }

/* interactive box */
.conv{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.conv input{ flex:1; min-width:120px; height:56px; font:inherit; font-size:22px; font-weight:800; padding:0 14px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.conv input:focus{ outline:none; border-color:var(--gold); }
.conv .eq{ font-size:20px; color:var(--inksoft); font-weight:700; }
.conv .out{ flex:1; min-width:120px; height:56px; display:flex; align-items:center; padding:0 14px;
  font-size:22px; font-weight:800; border:1.5px dashed var(--line); border-radius:12px; background:#fbf7ee; color:var(--maroon); overflow:hidden; }
.units{ font-size:13px; color:var(--inksoft); margin-top:8px; }
.formula{ margin-top:14px; font-size:14.5px; color:var(--inksoft); }
.formula b{ color:var(--ink); }

/* table */
table{ width:100%; border-collapse:collapse; font-size:15px; }
th,td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
th{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--golddeep); }
td:last-child,th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
tr:last-child td{ border-bottom:none; }

/* related */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips a{ font-size:13px; font-weight:700; padding:7px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--maroon); text-decoration:none; }
.chips a:hover{ border-color:var(--gold); }
details{ border-top:1.5px solid var(--line); padding:11px 0; }
details summary{ cursor:pointer; font-weight:700; font-size:14.5px; }
details p{ color:var(--inksoft); font-size:14px; margin-top:6px; }
footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--maroon); }
@media(max-width:560px){ h1.title{ font-size:25px; } }