/* Square — shared stylesheet for content pages (blog, comparisons, docs). Matches the wall's palette. */
:root {
  --bg:#0b0d10; --panel:#14171c; --panel2:#1b1f26; --line:#262b33;
  --text:#e8eaed; --text2:#c7cdd8; --dim:#8b93a1; --accent:#ffd84d; --green:#3ddc84; --red:#ff5d5d;
  --link:#ffd84d; --code:#1b1f26; --shade:#000a; --mark:#ffd84d22;
}
:root[data-theme="light"] {
  --bg:#f5f6f8; --panel:#ffffff; --panel2:#f0f2f5; --line:#d8dee6;
  --text:#14181e; --text2:#2c343e; --dim:#5f6873; --accent:#e0b400; --green:#1f9d5a; --red:#e04848;
  --link:#8a6d00; --code:#eef0f3; --shade:#0002; --mark:#f5c51833;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text);
  font:16.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; }
a { color:var(--link); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
code, kbd, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background:var(--code); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:.9em; }
pre { background:var(--code); border:1px solid var(--line); border-radius:8px; padding:14px 16px; overflow-x:auto; font-size:.88em; line-height:1.5; }
pre code { background:none; border:0; padding:0; font-size:inherit; }

/* header */
.top { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .in { max-width:1080px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.top .logo { font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; font-size:15px; letter-spacing:.5px; color:var(--text); text-decoration:none; }
.top .logo span { color:var(--accent); }
.top nav { display:flex; gap:4px 14px; flex-wrap:wrap; font-size:13.5px; }
.top nav a { color:var(--dim); text-decoration:none; }
.top nav a:hover, .top nav a[aria-current] { color:var(--text); }
.top .cta { margin-left:auto; }
.btn { display:inline-block; background:var(--accent); color:#111 !important; border:0; border-radius:6px; padding:8px 14px;
  font:700 13.5px ui-monospace,Menlo,Consolas,monospace; cursor:pointer; text-decoration:none !important; }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:var(--panel2); color:var(--text) !important; border:1px solid var(--line); font-weight:400; }
.btn.big { padding:12px 20px; font-size:15px; }
.themeBtn { background:none; border:1px solid var(--line); border-radius:6px; color:var(--dim); cursor:pointer; padding:5px 8px; font-size:13px; }

/* layout */
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.page { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; padding:36px 0 60px; }
@media (min-width: 980px) { .page.hasToc { grid-template-columns:minmax(0,1fr) 240px; } }
main { min-width:0; max-width:760px; }
.crumbs { font-size:13px; color:var(--dim); margin-bottom:14px; }
.crumbs a { color:var(--dim); text-decoration:none; }
.crumbs a:hover { color:var(--text); }
.crumbs span { margin:0 6px; }
h1 { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:clamp(26px, 4.2vw, 36px); line-height:1.2; letter-spacing:-.2px; margin:0 0 10px; }
.lede { font-size:19px; color:var(--text2); line-height:1.5; margin:0 0 14px; }
.meta { font-size:13px; color:var(--dim); font-family:ui-monospace,Menlo,Consolas,monospace; margin-bottom:26px; display:flex; gap:14px; flex-wrap:wrap; }
.meta a { color:var(--dim); }
h2 { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:24px; line-height:1.25; margin:44px 0 12px; scroll-margin-top:70px; }
h3 { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:18px; margin:30px 0 8px; scroll-margin-top:70px; }
h4 { font-size:16px; margin:22px 0 6px; }
h2 a.anchor, h3 a.anchor { color:var(--line); text-decoration:none; margin-left:8px; font-weight:400; opacity:0; }
h2:hover a.anchor, h3:hover a.anchor { opacity:1; }
p { margin:0 0 16px; }
ul, ol { padding-left:26px; margin:0 0 16px; }
li { margin:5px 0; }
li > ul, li > ol { margin:4px 0; }
hr { border:0; border-top:1px solid var(--line); margin:36px 0; }
img { max-width:100%; height:auto; border-radius:8px; }
strong { color:var(--text); }
mark { background:var(--mark); color:inherit; padding:0 3px; border-radius:3px; }
blockquote { margin:20px 0; padding:14px 18px; border-left:3px solid var(--accent); background:var(--panel); border-radius:0 8px 8px 0; color:var(--text2); }
blockquote p:last-child { margin:0; }
table { border-collapse:collapse; width:100%; margin:18px 0 24px; font-size:14.5px; display:block; overflow-x:auto; }
th, td { border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; }
th { background:var(--panel2); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
tr:nth-child(even) td { background:color-mix(in srgb, var(--panel) 60%, transparent); }
details { border:1px solid var(--line); border-radius:8px; padding:0 14px; margin:8px 0; background:var(--panel); }
summary { cursor:pointer; padding:11px 0; font-weight:600; }
details[open] summary { border-bottom:1px solid var(--line); margin-bottom:8px; }

/* FAQ section: h3 questions get a bit of card treatment */
.faq h3 { font-family:inherit; font-size:17px; margin:22px 0 6px; }

/* callouts */
.callout { border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:16px 18px; margin:22px 0; }
.callout.cta { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.callout h3 { margin:0 0 6px; }
.callout p:last-child { margin:0; }
.facts { border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:4px 18px; margin:0 0 26px; font-size:14.5px; }
.facts dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:12px 0; }
.facts dt { color:var(--dim); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
.facts dd { margin:0; }

/* toc */
.toc { position:sticky; top:70px; align-self:start; font-size:13px; border-left:1px solid var(--line); padding-left:14px; max-height:calc(100vh - 90px); overflow:auto; }
.toc b { display:block; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--dim); font-weight:400; font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.toc a { display:block; color:var(--dim); text-decoration:none; padding:3px 0; line-height:1.4; }
.toc a:hover { color:var(--text); }
.toc a.h3 { padding-left:12px; font-size:12.5px; }
@media (max-width: 979px) { .toc { position:static; border-left:0; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--panel); margin-bottom:26px; max-height:none; } }

/* cards / hubs */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; margin:20px 0 30px; padding:0; list-style:none; }
.cards li { margin:0; }
.card { display:block; height:100%; border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:16px 18px; text-decoration:none; color:var(--text); transition:border-color .15s; }
.card:hover { border-color:var(--accent); text-decoration:none; }
.card b { display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; line-height:1.35; margin-bottom:6px; }
.card p { color:var(--dim); font-size:13.5px; margin:0; line-height:1.5; }
.card small { display:block; color:var(--dim); font-size:11.5px; margin-top:8px; font-family:ui-monospace,Menlo,Consolas,monospace; }
.related { margin-top:44px; border-top:1px solid var(--line); padding-top:22px; }
.related h2 { margin-top:0; font-size:18px; }
.related ul { list-style:none; padding:0; }
.related li { margin:6px 0; }
.related li small { color:var(--dim); }

/* footer */
footer { border-top:1px solid var(--line); background:var(--panel); padding:34px 0 40px; margin-top:20px; font-size:13.5px; color:var(--dim); }
footer .cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:20px 28px; }
footer b { display:block; color:var(--text); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
footer a { color:var(--dim); text-decoration:none; display:block; padding:2px 0; }
footer a:hover { color:var(--text); }
footer .fine { margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; display:flex; gap:16px; flex-wrap:wrap; }
footer .fine a { display:inline; }

/* hero for hubs */
.hero { padding:44px 0 10px; }
.hero h1 { font-size:clamp(28px,4.5vw,40px); }
.hero p { font-size:18px; color:var(--text2); max-width:720px; }
.kicker { font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--accent); font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.badge { display:inline-block; font:12px ui-monospace,Menlo,Consolas,monospace; background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:2px 9px; color:var(--dim); }
.pill { display:inline-block; font:11px ui-monospace,Menlo,Consolas,monospace; background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--dim); margin-right:6px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:20px 0; }
.check li { list-style:none; position:relative; }
.check li:before { content:"✓"; color:var(--green); position:absolute; left:-22px; font-weight:700; }
.cross li:before { content:"✕"; color:var(--red); }
.sq { display:inline-block; width:.8em; height:.8em; background:var(--accent); border-radius:2px; vertical-align:-1px; }
.author { display:flex; gap:12px; align-items:center; margin:36px 0 0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); font-size:14px; color:var(--text2); }
.author .av { width:40px; height:40px; border-radius:8px; background:var(--accent); display:grid; place-items:center; color:#111; font-weight:700; font-family:ui-monospace,Menlo,monospace; flex:0 0 auto; }
@media print { .top, footer, .toc, .related, .callout.cta { display:none; } }