/* Shared styles for the public content pages (guides and tools).
   Served at /content.css. The app's own styles.css is not used here on purpose: these pages are
   static, indexable documents and must not break when the app is restyled. */
:root { --bg:#0A1119; --panel:#111c27; --line:#20323f; --text:#e7eef5; --muted:#a9bccd;
        --cyan:#35e0d2; --violet:#D0BCFF; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text);
       font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--violet); }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 20px 64px; }
header.top { border-bottom:1px solid var(--line); margin-bottom:32px; }
header.top .wrap { display:flex; align-items:center; justify-content:space-between;
                   gap:16px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.14em;
         font-size:13px; color:#fff; text-decoration:none; }
.brand span { color:var(--cyan); }
.brand .mark { width:26px; height:26px; border-radius:8px; border:2px solid var(--cyan); }
.top-cta { background:var(--violet); color:#1b1030; font-weight:700; text-decoration:none;
           padding:9px 16px; border-radius:10px; font-size:14px; }
.kick { font:700 12px/1 ui-monospace,Consolas,monospace; letter-spacing:.2em; color:var(--cyan);
        margin:0 0 16px; }
h1 { font-size:clamp(28px,5vw,42px); line-height:1.15; letter-spacing:-.02em; margin:0 0 18px; }
.lead { font-size:18px; color:#cddce8; margin:0 0 30px; }
h2 { font-size:clamp(20px,3vw,26px); line-height:1.25; margin:44px 0 14px; }
h3 { font-size:17px; margin:26px 0 8px; }
p { margin:0 0 14px; color:#c3d3e0; }
ul, ol { margin:0 0 16px; padding-left:22px; color:#c3d3e0; }
li { margin:0 0 8px; }
blockquote { margin:0 0 16px; padding:14px 18px; background:var(--panel);
             border-left:3px solid var(--cyan); border-radius:0 10px 10px 0; }
blockquote p { margin:0 0 8px; color:#dbe8f2; font-size:16.5px; }
blockquote cite { font-style:normal; font-size:13.5px; color:var(--muted); }
.note { font-size:13.5px; color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px;
        padding:20px 22px; margin:18px 0 26px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
label { display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:6px; }
input[type=number], input[type=date], input[type=text], select {
  width:100%; border:1px solid var(--line); border-radius:10px; background:#0b141d;
  color:var(--text); padding:11px 12px; font:inherit; font-size:16px; }
input:focus, select:focus { outline:none; border-color:var(--cyan); }
button.go { margin-top:16px; border:0; border-radius:12px; background:var(--violet);
            color:#1b1030; font:inherit; font-weight:700; padding:12px 22px; cursor:pointer; }
button.go:hover { filter:brightness(1.07); }
.out { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.out[hidden] { display:none; }
table { width:100%; border-collapse:collapse; }
th[scope=row] { text-align:left; font-weight:500; color:var(--muted); padding:8px 0; }
td { text-align:right; padding:8px 0; font-variant-numeric:tabular-nums; }
tr.big th, tr.big td { color:#fff; font-weight:800; font-size:19px;
                       border-top:1px solid var(--line); padding-top:12px; }
.verdict { margin-top:14px; font-size:15px; }
.verdict.ok { color:var(--cyan); }
.verdict.bad { color:#ffb4a8; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 0; }
.btn { display:inline-block; text-decoration:none; border-radius:12px; padding:12px 20px;
       font-weight:700; font-size:15px; }
.btn.primary { background:var(--violet); color:#1b1030; }
.btn.ghost { border:1px solid var(--line); color:#dbe8f2; }
.related { border-top:1px solid var(--line); margin-top:44px; padding-top:20px; }
.related h2 { margin-top:0; font-size:18px; }
.related ul { list-style:none; padding:0; }
.related li { margin:0 0 10px; }
footer.site { border-top:1px solid var(--line); margin-top:52px; padding-top:20px;
              font-size:13.5px; color:var(--muted); }
footer.site a { color:var(--violet); }
@media (max-width:640px) { .grid, .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); } }