/* Convexy — shared styling for the generated guide + answer pages.
   Same design tokens as the landing page and legal.css (warm paper, clay accent,
   IBM Plex). Slightly wider measure than legal.css because these pages carry step
   lists and format tables. */

:root{
  --bg:#f4ede1; --bg2:#efe7d9; --card:#fdf9f1; --card2:#f7f0e4; --ink:#241d14;
  --sub:rgba(36,29,20,.58); --faint:rgba(36,29,20,.36); --line:rgba(36,29,20,.10);
  --sig:oklch(0.55 0.13 42); --sig-ink:#fff; --sig-soft:color-mix(in oklab, oklch(0.55 0.13 42) 12%, transparent);
  --good:oklch(0.52 0.13 150); --warn:oklch(0.58 0.14 55);
  --warn-soft:color-mix(in oklab, oklch(0.58 0.14 55) 10%, transparent);
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'IBM Plex Sans',system-ui,sans-serif;
  --maxw:760px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141009; --bg2:#100c06; --card:#262019; --card2:#332b22; --ink:#f4ece1;
    --sub:rgba(244,236,225,.58); --faint:rgba(244,236,225,.36); --line:rgba(244,236,225,.14);
    --sig:oklch(0.70 0.13 46); --sig-ink:#141009; --sig-soft:color-mix(in oklab, oklch(0.70 0.13 46) 20%, transparent);
    --good:oklch(0.74 0.13 150); --warn:oklch(0.74 0.14 60);
    --warn-soft:color-mix(in oklab, oklch(0.74 0.14 60) 14%, transparent);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.7;font-size:17px;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--sig);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono)}

/* Top bar */
header.bar{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.2) blur(14px);background:color-mix(in oklab,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.bar-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-0.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.barnav{display:flex;align-items:center;gap:18px;font-size:14.5px;font-weight:500}
.barnav a{color:var(--sub)}
.barnav a:hover{color:var(--ink);text-decoration:none}
.barnav a.cta{color:var(--sig-ink);background:var(--sig);padding:8px 14px;border-radius:999px;font-weight:600}
.barnav a.cta:hover{filter:brightness(1.06)}
@media (max-width:560px){ .barnav a:not(.cta){display:none} }

/* Layout */
main{flex:1;max-width:var(--maxw);margin:0 auto;padding:40px 24px 72px;width:100%}

.crumbs{font-size:13.5px;color:var(--faint);font-family:var(--mono);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--sub)}
.crumbs [aria-current]{color:var(--ink)}

h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-0.03em;font-weight:700;margin-bottom:16px}
h2{font-size:clamp(21px,3vw,26px);line-height:1.25;letter-spacing:-0.02em;font-weight:700;margin:44px 0 14px}
h3{font-size:18px;font-weight:650;letter-spacing:-0.01em;margin-bottom:6px}
p{margin-bottom:16px}
.lead{font-size:19.5px;line-height:1.6;color:var(--sub);margin-bottom:8px}

.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose strong{font-weight:650}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--card2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* Code blocks. Without this, the inline-code pill styling bleeds onto whole blocks and a
   long line forces the page body to scroll sideways. The block scrolls, the page never does. */
.prose pre{
  font-family:var(--mono);font-size:13.5px;line-height:1.6;
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin:0 0 16px;overflow-x:auto;
}
.prose pre code{background:none;border:none;border-radius:0;padding:0;font-size:inherit}

/* Steps */
.steps ol.steplist{list-style:none;margin:0;counter-reset:step}
.steplist li{counter-increment:step;position:relative;padding:0 0 20px 46px;margin:0}
.steplist li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sig-soft);color:var(--sig);
  font-family:var(--mono);font-size:13px;font-weight:600;
}
.steplist li p{margin-bottom:0;color:var(--sub)}

/* Notes */
.note{
  display:flex;gap:10px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--sig);border-radius:10px;
  padding:14px 16px;margin:20px 0;font-size:15.5px;color:var(--sub);
}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink);font-weight:650}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--faint);font-weight:400;font-size:19px}
.faq details[open] summary::after{content:'\2212'}
.faq .answer{padding-top:10px;color:var(--sub);font-size:16px}
.faq .answer p:last-child{margin-bottom:0}

/* Format / conversion tables */
.table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:500;background:var(--card2)}
tr:last-child td{border-bottom:none}
td.no{color:var(--faint)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 20px}
.chip{font-family:var(--mono);font-size:12.5px;padding:5px 10px;border-radius:7px;background:var(--card2);border:1px solid var(--line);color:var(--sub)}
.chip.on{background:var(--sig-soft);border-color:transparent;color:var(--sig);font-weight:600}

/* Index / hub grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:20px 0}
.grid a{
  display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font-weight:600;font-size:15.5px;
}
.grid a:hover{border-color:var(--sig);text-decoration:none}
.grid a span{display:block;font-weight:400;font-size:13.5px;color:var(--sub);margin-top:3px}

/* CTA */
.cta-card{
  margin-top:52px;padding:28px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);text-align:center;
}
.cta-card h2{margin:0 0 8px;font-size:22px}
.cta-card p{color:var(--sub);margin-bottom:18px}
.btn{
  display:inline-block;background:var(--sig);color:var(--sig-ink);
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:16px;
}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.cta-card .fine{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:14px 0 0}

/* Footer */
footer{border-top:1px solid var(--line);background:var(--bg2)}
.foot{max-width:var(--maxw);margin:0 auto;padding:26px 24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.foot .links{display:flex;flex-wrap:wrap;gap:18px;font-size:14.5px}
.foot .links a{color:var(--sub)}
.foot .links a:hover{color:var(--ink);text-decoration:none}
.foot .copy{font-family:var(--mono);font-size:12.5px;color:var(--faint)}