/* pages.css: shared chrome for the standalone pages (guides, comparisons, 404).
   Tokens, nav and footer mirror index.html and the blog build so every page
   reads as the same site. index.html keeps its own inline CSS. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#FAFBFC;--paper:#FFFFFF;
  --ink:#0D172B;--ink-2:rgba(13,23,43,.66);--ink-3:rgba(13,23,43,.44);
  --hairline:rgba(13,23,43,.09);--hairline-soft:rgba(13,23,43,.045);
  --primary:#5275FF;--accent:#3A5BDD;--accent-warm:#2E4BC4;
  --grad:linear-gradient(135deg,#5275FF,#3A5BDD);
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces','Iowan Old Style',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Nav */
nav{position:sticky;top:0;z-index:100;background:rgba(250,251,252,.85);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--hairline)}
.nav-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.nav-brand:hover{text-decoration:none}
.nav-brand img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:22px;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover{color:var(--accent);text-decoration:none}
@media(max-width:680px){.nav-links{display:none}}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:var(--grad);color:#fff;font-weight:500;font-size:.9rem;letter-spacing:-.01em;transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(58,91,221,.5);text-decoration:none}
@media(max-width:680px){.nav-cta{padding:8px 14px;font-size:.84rem}}

/* Page shell */
.page{max-width:760px;margin:0 auto;padding:56px 24px 0}
@media(max-width:600px){.page{padding-top:36px}}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent);text-decoration:none}
.crumbs span[aria-hidden]{opacity:.6}
.page h1{font-family:var(--sans);font-weight:500;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.025em;line-height:1.1;text-transform:lowercase;margin:0 0 18px;color:var(--ink)}
.page h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page .answer{font-size:1.18rem;color:var(--ink);line-height:1.55;margin:0 0 20px;max-width:640px}
.page .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 44px;font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3)}
.page .meta .dot{opacity:.6}

/* Body copy */
.body{font-size:1.05rem;line-height:1.75;color:var(--ink)}
.body h2{font-family:var(--sans);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;line-height:1.25;margin:52px 0 14px;color:var(--ink);text-transform:lowercase}
.body h2:first-child{margin-top:0}
.body h3{font-family:var(--sans);font-weight:600;font-size:1.2rem;letter-spacing:-.015em;line-height:1.3;margin:32px 0 10px;color:var(--ink)}
.body p{margin:0 0 18px;color:var(--ink-2)}
.body p strong,.body li strong{font-weight:600;color:var(--ink)}
.body ul,.body ol{margin:0 0 20px 22px;color:var(--ink-2)}
.body li{margin:0 0 8px}
.body a{text-decoration:underline;text-decoration-color:rgba(58,91,221,.35);text-underline-offset:3px}
.body a:hover{text-decoration-color:var(--accent)}

/* Tables */
.table-wrap{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--hairline);border-radius:14px;background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
caption{caption-side:top;text-align:left;padding:14px 16px 4px;font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline-soft)}
thead th{font-weight:600;color:var(--ink);font-size:.86rem;border-top:none;background:var(--cream)}
tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
td{color:var(--ink-2)}
.yes{color:var(--accent);font-weight:500}
.no{color:var(--ink-3)}

/* Pull-out sections */
.aside{margin:28px 0;padding:22px 24px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--primary);border-radius:14px}
.aside .label{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}
.aside p{margin:0;color:var(--ink)}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 30px}
@media(max-width:600px){.choose{grid-template-columns:1fr}}
.choose > div{padding:22px 22px 18px;background:var(--paper);border:1px solid var(--hairline);border-radius:16px}
.choose h3{margin:0 0 10px;font-size:1.08rem}
.choose ul{margin:0 0 0 18px}
.choose li{margin-bottom:6px;font-size:.98rem}

/* Contextual CTA */
.cta{margin:36px 0;padding:28px 30px;background:var(--paper);border:1px solid var(--hairline);border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h3{font-family:var(--sans);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;text-transform:lowercase;margin:0 0 6px}
.cta p{margin:0;color:var(--ink-2);font-size:.98rem;max-width:420px}
.app-store-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:14px;font-weight:500;font-size:.92rem;border:none;cursor:pointer;transition:transform .25s,box-shadow .25s;flex-shrink:0}
.app-store-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(25,24,29,.15);text-decoration:none}
.app-store-btn svg{width:28px;height:28px;flex-shrink:0}
.app-store-btn small{font-size:.62rem;font-weight:400;opacity:.78;display:block;text-align:left;line-height:1.1;margin-bottom:2px;letter-spacing:.02em}
.app-store-btn strong{font-size:1rem;display:block;text-align:left;font-weight:600;letter-spacing:0;line-height:1.05}

/* FAQ */
.faq{margin:16px 0 8px;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--sans);font-size:1.05rem;font-weight:500;color:inherit;letter-spacing:-.01em;line-height:1.3;margin:0;flex:1}
.faq summary::after{content:'+';font-family:var(--mono);font-weight:400;font-size:1.4rem;color:var(--ink-2);transition:transform .3s,color .3s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 0 22px;color:var(--ink-2);font-size:.98rem;line-height:1.65;max-width:640px}
.faq .a p{margin:0 0 10px}

/* Related */
.related{margin:44px 0 0;padding-top:28px;border-top:1px solid var(--hairline)}
.related .label{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin-bottom:12px}
.related ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}
.related a{font-weight:500}

/* Footer */
footer{background:var(--paper);border-top:1px solid var(--hairline);padding:32px 24px;text-align:center;font-size:.88rem;color:var(--ink-3);margin-top:80px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--accent)}
footer .footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:12px;flex-wrap:wrap}
@media(max-width:600px){footer .footer-links{gap:16px;font-size:.84rem}}

/* 404 */
.lost{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px 40px}
.lost .code{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.lost h1{font-family:var(--sans);font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1.05;text-transform:lowercase;margin:0 0 16px}
.lost h1 em{font-family:var(--serif);font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lost p{color:var(--ink-2);font-size:1.1rem;max-width:460px;margin:0 0 28px}
.lost .links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-ghost{display:inline-flex;align-items:center;padding:12px 22px;border-radius:14px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);font-weight:500;font-size:.92rem}
.btn-ghost:hover{text-decoration:none;border-color:var(--ink-3)}

/* Legal pages: headings keep their real case, quotes read as a summary box */
.legal h2,.legal h3{text-transform:none}
.legal blockquote{margin:0 0 26px;padding:18px 22px;background:var(--paper);border:1px solid var(--hairline);border-left:3px solid var(--primary);border-radius:14px}
.legal blockquote p{margin:0;color:var(--ink)}
.legal ul{margin-bottom:22px}
.legal p{color:var(--ink)}