/* ───────────────────────────────────────────────────────────────────────────
   Ordersmithy — free tool pages.
   Loaded after brand.css + product.css. A new free tool reuses these blocks:
   spreadsheet preview, answer cards, three steps, formula cards, next-step card.
   ─────────────────────────────────────────────────────────────────────────── */

.tool-hero h1{max-width:16ch}
.btn svg{flex:none}

/* ── spreadsheet preview ── */
.sheet{margin:52px auto 0;max-width:1040px;text-align:left;border:1px solid var(--line-2);border-radius:14px;
  overflow:hidden;background:var(--panel);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.sheet-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.sheet-bar .dots{display:flex;gap:6px}
.sheet-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.sheet-name{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-scroll{overflow-x:auto}
.sheet table{width:100%;border-collapse:collapse;font-size:14px;min-width:780px}
.sheet th{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);text-align:right;padding:11px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.sheet td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:right;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet td:first-child,.sheet th:first-child{text-align:left;font-family:'JetBrains Mono',monospace;font-size:13px}
.sheet .l{text-align:left}
.sheet td.l{color:var(--ink)}
.sheet td b{color:var(--ink)}
.sheet tbody tr:last-child td{border-bottom:0}
.sheet tbody tr:nth-child(odd){background:rgba(7,12,20,.35)}
.sheet figcaption{padding:12px 16px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:12.5px;color:var(--ink-3)}
.st{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid}
.st-out{color:#FF8080;background:rgba(255,90,90,.12);border-color:rgba(255,90,90,.35)}
.st-now{color:var(--accent-2);background:var(--accent-dim);border-color:rgba(255,107,44,.4)}
.st-soon{color:var(--warn);background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.35)}
.st-ok{color:var(--ok);background:rgba(53,208,138,.1);border-color:rgba(53,208,138,.35)}
.st-none{color:var(--ink-3);background:transparent;border-color:var(--line-2)}

/* ── answers ── */
.answers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ans{grid-column:span 2}
.ans:nth-child(n+4){grid-column:span 3}
@media(max-width:1000px){.answers{grid-template-columns:repeat(2,minmax(0,1fr))}.ans,.ans:nth-child(n+4){grid-column:auto}.ans:last-child{grid-column:1/-1}}
@media(max-width:560px){.answers{grid-template-columns:1fr}.ans:last-child{grid-column:auto}}
.ans{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--accent);
  border-radius:0 0 14px 14px;padding:22px 20px}
.ans b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:18px;margin-bottom:8px}
.ans p{color:var(--ink-2);font-size:15px;margin:0;line-height:1.6}

/* ── three steps ── */
.steps3{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:880px){.steps3{grid-template-columns:1fr}}
.steps3 li{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
.steps3 .n{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--accent);background:var(--accent-dim);
  border:1px solid rgba(255,107,44,.3)}
.steps3 p{color:var(--ink-2);font-size:15.5px;margin:0}

/* ── formula cards ── */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}
@media(max-width:880px){.fgrid{grid-template-columns:1fr}}
.fcard{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}
.fcard p{color:var(--ink-2);font-size:15.5px;margin:14px 0 0}
.fcard p b{color:var(--ink)}
.fcard .formula{margin-top:14px;white-space:nowrap;overflow-x:auto;line-height:1.9}
.fcard .formula b{color:var(--accent)}
.ztable{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.ztable th{text-align:left;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:0 10px 10px 0;border-bottom:1px solid var(--line)}
.ztable td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.ztable td:nth-child(-n+2){font-family:'JetBrains Mono',monospace;color:var(--ink)}
.ztable tr:last-child td{border-bottom:0}
#formula .runnote{margin-top:6px}

/* ── next step ── */
.nextcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;align-items:center;
  padding:clamp(28px,5vw,48px);border:1px solid var(--line-2);border-radius:20px;
  background:radial-gradient(70% 120% at 0% 0%,rgba(255,107,44,.13),transparent 60%),var(--panel)}
@media(max-width:820px){.nextcard{grid-template-columns:1fr}}
.nextcard h2.d{margin-bottom:12px}
.nextcard p{color:var(--ink-2);margin:0;max-width:56ch}
.nextcta{display:flex;flex-direction:column;gap:12px}
@media(max-width:820px){.nextcta{flex-direction:row;flex-wrap:wrap}}

@media(max-width:780px){
  .tool-hero h1{font-size:clamp(34px,9vw,48px)}
  .sheet{margin-top:38px}
}

@media(max-width:640px){
  .sheet .mh{display:none}
  .sheet table{min-width:0;font-size:13.5px}
  .sheet th{white-space:normal;padding:10px 7px;font-size:11px}
  .sheet td{padding:10px 7px}
  .sheet td.l{white-space:normal}
  .fcard{padding:22px 18px}
  .fcard .formula{white-space:normal;font-size:13px}
}