/* Shared styles for content pages (articles, the /resources.html hub, and future tool pages).
   Base, nav, buttons and footer are copied from index.html so these pages match the
   homepage; below them are the article, card and hub styles. */

/* ---------------- Tokens (same as index.html :root) ---------------- */
:root{
  --bg:        oklch(0.16 0.012 250);
  --bg-2:      oklch(0.20 0.013 250);
  --bg-3:      oklch(0.24 0.014 250);
  --line:      oklch(0.30 0.014 250);
  --line-2:    oklch(0.36 0.016 250);
  --fg:        oklch(0.97 0.005 250);
  --fg-2:      oklch(0.86 0.010 250);
  --fg-3:      oklch(0.70 0.013 250);
  --fg-4:      oklch(0.56 0.014 250);

  --accent:        oklch(0.72 0.15 254);
  --accent-2:      oklch(0.62 0.19 259);
  --accent-soft:   oklch(0.72 0.15 254 / 0.15);
  --accent-line:   oklch(0.72 0.15 254 / 0.35);
  --accent-fg:     oklch(0.18 0.04 259);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "DM Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 40px);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button,a{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.02em; line-height:1.05; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
@supports(padding:env(safe-area-inset-left)){
  .nav-wrap > .container{ padding-left:max(var(--pad), env(safe-area-inset-left)); padding-right:max(var(--pad), env(safe-area-inset-right)); }
  footer{ padding-bottom:max(40px, env(safe-area-inset-bottom)); }
}
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.gridbg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px; border-radius:10px;
  font-size:14.5px; font-weight:500; letter-spacing:-0.005em;
  border:1px solid transparent; cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-fg); font-weight:600; }
.btn-primary:hover{ background:var(--accent-2); }

/* ---------------- Nav ---------------- */
.nav-wrap{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: oklch(0.16 0.012 250 / 0.72);
  border-bottom:1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav-wrap.scrolled{ border-bottom-color: var(--line); background: oklch(0.16 0.012 250 / 0.88); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-0.015em; font-size:15.5px; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08) inset, 0 4px 14px var(--accent-soft);
}
.brand-mark img{ display:block; width:100%; height:100%; object-fit:cover; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{ padding:8px 14px; font-size:14px; color:var(--fg-2); border-radius:8px; white-space:nowrap; }
.nav-link:hover{ color:var(--fg); }
.nav-cta{ margin-left:6px; }
.nav-cta .btn{ padding:9px 16px; font-size:13.5px; }
.nav-discord{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid oklch(0.62 0.16 274 / 0.55);background:oklch(0.52 0.20 274 / 0.14);color:oklch(0.72 0.14 274);font-family:var(--font-ui,inherit);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s,border-color .18s;}
.nav-discord svg{width:16px;height:16px;flex:0 0 auto;}
.nav-discord:hover{background:oklch(0.52 0.20 274);border-color:oklch(0.62 0.16 274);color:#fff;}
@media (max-width:1150px){.nav-links{gap:2px;}.nav-link{padding-left:8px;padding-right:8px;font-size:13px;}}
@media (max-width:1150px) and (min-width:861px){.nav-discord span{display:none;}.nav-discord{padding:7px 9px;gap:0;}}
@media (max-width:860px){.nav-discord{width:100%;justify-content:center;padding:12px;font-size:15px;margin-top:12px;}}

.hamburger{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); }
.hamburger span{ width:18px; height:1.5px; background:var(--fg); display:block; position:relative; }
.hamburger span::before,
.hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--fg); transition:transform .2s ease, top .2s ease; }
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }
.nav-wrap.menu-open .hamburger span{ background:transparent; }
.nav-wrap.menu-open .hamburger span::before{ top:0; transform:rotate(45deg); }
.nav-wrap.menu-open .hamburger span::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 820px){
  .nav-links{
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:12px var(--pad) 20px;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .nav-wrap.menu-open .nav-links{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-link{ padding:14px 4px; font-size:16px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav-link:last-of-type{ border-bottom:0; }
  .nav-cta{ margin:14px 0 0; }
  .nav-cta .btn{ width:100%; padding:14px; font-size:15px; }
  .hamburger{ display:inline-flex; }
  /* As on the homepage: phones can't run the Windows app, so no "Download" link. */
  #nav-links a.nav-link[href="/#download"]{ display:none; }
}

/* ---------------- Footer (same as index.html) ---------------- */
footer{ border-top:1px solid var(--line); padding: 60px 0 32px; background: oklch(0.14 0.012 250); }
.foot-grid{ display:grid; grid-template-columns: 1fr; gap:36px; }
@media (min-width: 720px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .foot-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-tag{ margin-top:14px; color:var(--fg-3); font-size:14px; max-width:340px; line-height:1.55; }
.foot-h{ font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-4); margin-bottom:16px; }
.foot-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--fg-2); }
.foot-list a:hover{ color:var(--fg); }
.foot-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; color:var(--fg-4); font-family:var(--font-label);
}
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:34px; height:34px; border:1px solid var(--line); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-3); transition: color .2s ease, border-color .2s ease; }
.foot-social a:hover{ color:var(--accent); border-color:var(--accent-line); }
.foot-social svg{ width:14px; height:14px; }

/* ---------------- Article page ---------------- */
.seo-wrap{ padding:40px 0 88px; }
.article-layout{ display:grid; grid-template-columns:minmax(0, 700px); justify-content:center; column-gap:64px; }
.article-main{ min-width:0; }
.toc-side{ display:none; }
@media (min-width: 1200px){
  .article-layout{ grid-template-columns:minmax(0, 700px) 220px; }
  .toc-side{ display:block; }
  .seo-page .toc-inline{ display:none; }
}

/* Breadcrumb */
.crumbs ol{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; row-gap:4px;
  font-family:var(--font-label); font-size:13px; line-height:1.5; color:var(--fg-3);
}
.crumbs li{ display:inline-flex; align-items:center; }
.crumbs li + li::before{
  content:""; width:5px; height:5px; margin:0 11px 0 9px; flex:0 0 auto;
  border-right:1.5px solid var(--fg-4); border-top:1.5px solid var(--fg-4); transform:rotate(45deg);
}
.crumbs a{ color:var(--fg-3); transition:color .15s ease; }
.crumbs a:hover{ color:var(--accent); }
.crumbs [aria-current="page"]{ color:var(--fg-2); }

.seo-page{ min-width:0; font-size:17px; line-height:1.72; color:var(--fg-2); }
.seo-page h1{ font-size:clamp(32px, 5vw, 48px); line-height:1.08; color:var(--fg); }
.seo-page h2{ font-size:clamp(23px, 3vw, 28px); line-height:1.22; color:var(--fg); margin:56px 0 16px; }
.seo-page h2[id]{ scroll-margin-top:calc(var(--bar-h, 0px) + 64px + 24px); }
.seo-page h3{ font-size:19px; line-height:1.35; letter-spacing:-0.01em; color:var(--fg); margin:32px 0 8px; }
.seo-page p{ margin:0 0 18px; }
.seo-page strong{ color:var(--fg); font-weight:600; }
.seo-page :is(p, li, td, th) a:not(.cta-button){ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.seo-page ul, .seo-page ol{ margin:0 0 22px; padding-left:24px; }
.seo-page li{ margin:0 0 10px; padding-left:4px; }
.seo-page li::marker{ color:var(--accent); }
.seo-page ol li::marker{ font-weight:600; }

/* Category tag (article meta row, cards) */
.tag{
  display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  font-family:var(--font-label); font-size:12px; font-weight:600; line-height:1.3; letter-spacing:0.02em;
  text-decoration:none; white-space:nowrap;
}
a.tag:hover{ background:oklch(0.72 0.15 254 / 0.24); }

/* Under the h1: category tag, updated date, reading time */
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 0; margin:20px 0 10px;
  font-family:var(--font-label); font-size:13.5px; color:var(--fg-3);
}
.article-meta .tag{ margin-right:14px; }
/* Date and reading time wrap together, so a separator never starts a line */
.article-meta .meta-info{ display:inline-flex; white-space:nowrap; }
.article-meta .meta-info span + span::before{ content:"\00B7"; margin:0 10px; color:var(--fg-4); }

/* Small muted text: the note under the meta row and the closing disclaimer */
.seo-page .updated,
.seo-page .disclaimer{ font-family:var(--font-label); font-size:13px; line-height:1.6; color:var(--fg-3); }
.seo-page .updated{ margin:0 0 8px; }
.seo-page .disclaimer{ margin-top:48px; padding-top:20px; border-top:1px solid var(--line); }

/* Table of contents: collapsible box in the article below 1200px, sticky side column above */
.seo-page .toc-inline{ margin:22px 0 34px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.seo-page .toc-inline summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; cursor:pointer; list-style:none;
  font-family:var(--font-label); font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3);
}
.seo-page .toc-inline summary::-webkit-details-marker{ display:none; }
.seo-page .toc-inline summary::after{
  content:""; width:7px; height:7px; margin-right:4px; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.seo-page .toc-inline[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.seo-page .toc-inline ol{ margin:0; padding:0 16px 14px 36px; }
.seo-page .toc-inline li{ margin:0 0 7px; font-size:15px; line-height:1.45; }
.seo-page .toc li a{ color:var(--fg-2); text-decoration:none; }
.seo-page .toc li a:hover{ color:var(--accent); }

.toc-side{
  position:sticky; top:calc(var(--bar-h, 0px) + 64px + 32px); align-self:start;
  max-height:calc(100vh - var(--bar-h, 0px) - 128px); overflow:auto; padding-top:6px;
}
.toc-h{ font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-4); margin-bottom:12px; }
.toc-side ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc-side a{
  display:block; margin-left:-1px; padding:6px 0 6px 14px; border-left:1px solid transparent;
  font-size:13.5px; line-height:1.4; color:var(--fg-3); transition:color .15s ease, border-color .15s ease;
}
.toc-side a:hover{ color:var(--fg); }
.toc-side a.active{ color:var(--accent); border-left-color:var(--accent); }

/* TL;DR summary card */
.seo-page .tldr{
  margin:8px 0 40px; padding:24px 26px 20px;
  border:1px solid var(--accent-line); border-radius:var(--radius);
  background: linear-gradient(160deg, oklch(0.72 0.15 254 / 0.12), oklch(0.20 0.013 250 / 0.6) 60%);
  box-shadow: 0 24px 60px -36px oklch(0.72 0.15 254 / 0.5);
}
.seo-page .tldr h2{
  margin:0 0 10px; font-family:var(--font-label); font-size:12px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--accent);
}
.seo-page .tldr > p{ color:var(--fg); font-size:17.5px; }
.seo-page .key-facts{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.seo-page .key-facts li{ position:relative; margin:0; padding:0 0 0 26px; font-size:15.5px; line-height:1.6; }
.seo-page .key-facts li::before{
  content:""; position:absolute; left:2px; top:0.5em; width:12px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}

/* Comparison tables: full width on desktop, sideways scroll on phones */
.seo-page .compare-table{
  width:100%; margin:8px 0 28px; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  font-size:15px; line-height:1.5;
}
.seo-page .compare-table th,
.seo-page .compare-table td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.seo-page .compare-table tbody tr:last-child td{ border-bottom:0; }
.seo-page .compare-table thead th{ background:var(--bg-2); color:var(--fg); font-weight:600; font-size:14px; }
.seo-page .compare-table thead th:nth-child(2){ color:var(--accent); }
.seo-page .compare-table td:first-child{ color:var(--fg-3); font-weight:500; }
.seo-page .compare-table td:nth-child(2){ background:oklch(0.72 0.15 254 / 0.06); color:var(--fg); }
@media (max-width: 640px){
  .seo-page .compare-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .seo-page .compare-table th, .seo-page .compare-table td{ min-width:190px; }
  .seo-page .compare-table th:first-child, .seo-page .compare-table td:first-child{
    min-width:128px; position:sticky; left:0; z-index:1; background:var(--bg-2);
    box-shadow: 1px 0 0 var(--line);
  }
}

/* CTA block, primary button in the homepage's hero button style */
.seo-page .cta-block{
  margin:52px 0; padding:32px 30px; text-align:center;
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  background: radial-gradient(120% 140% at 50% 0%, oklch(0.72 0.15 254 / 0.16), var(--bg-2) 62%);
}
.seo-page .cta-block h2{ margin:0 0 10px; }
.seo-page .cta-block p{ max-width:560px; margin:0 auto 22px; }
.seo-page .cta-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:12px;
  background:var(--accent); color:var(--accent-fg);
  font-size:15.5px; font-weight:650; letter-spacing:-0.01em; line-height:1.3; text-decoration:none;
  box-shadow:0 10px 30px -12px oklch(0.55 0.18 254 / 0.8);
  transition: background .18s ease, transform .18s ease;
}
.seo-page .cta-button:hover{ background:var(--accent-2); transform:translateY(-1px); }

/* ---------------- Cards (hub page and "Related articles") ---------------- */
.card-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; }
@media (min-width: 700px){ .card-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .card-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.rcard{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:22px 22px 18px; min-height:220px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2);
  color:var(--fg-2); text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rcard:hover{ border-color:var(--accent-line); transform:translateY(-2px); box-shadow:0 22px 50px -30px oklch(0.72 0.15 254 / 0.55); }
.rcard:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.rcard[hidden]{ display:none; }
.rcard-title{ font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-0.015em; color:var(--fg); text-wrap:balance; }
.rcard-sum{ flex:1; font-size:14.5px; line-height:1.55; color:var(--fg-3); }
.rcard-foot{
  align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--font-label); font-size:12.5px; color:var(--fg-3);
}
.rcard-cta{ color:var(--accent); font-size:13.5px; font-weight:600; white-space:nowrap; }
.rcard:hover .rcard-cta{ text-decoration:underline; text-underline-offset:3px; }

.related{ max-width:984px; margin:72px auto 0; padding-top:40px; border-top:1px solid var(--line); }
.related h2{ font-size:clamp(22px, 2.6vw, 26px); line-height:1.2; color:var(--fg); margin:0 0 20px; }

/* ---------------- Resources hub ---------------- */
.hub-head{ max-width:720px; margin:8px 0 34px; }
.hub-head h1{ font-size:clamp(40px, 6vw, 64px); letter-spacing:-0.03em; }
.hub-head p{ margin-top:16px; font-size:18px; line-height:1.6; color:var(--fg-2); }
.hub-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.hub-tab{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line-2); background:transparent;
  color:var(--fg-2); font-family:var(--font-label); font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.hub-tab:hover{ border-color:var(--fg-4); color:var(--fg); }
.hub-tab[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.hub-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hub-section[hidden]{ display:none; }
.hub-section + .hub-section{ margin-top:52px; }
.hub-section-h{ font-size:22px; line-height:1.2; color:var(--fg); margin:0 0 18px; }

@media (max-width: 560px){
  .seo-wrap{ padding:28px 0 64px; }
  .crumbs li[aria-current="page"]{ display:none; } /* the h1 right below repeats it */
  .seo-page{ font-size:16.5px; }
  .seo-page h2{ margin-top:48px; }
  .seo-page .tldr{ padding:20px 18px 16px; }
  .seo-page .cta-block{ padding:26px 18px; }
  .seo-page .cta-button{ width:100%; padding:15px 18px; }
  .related{ margin-top:56px; padding-top:32px; }
  .hub-tabs{ flex-wrap:nowrap; overflow-x:auto; margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); padding:0 var(--pad) 4px; scrollbar-width:none; }
  .hub-tabs::-webkit-scrollbar{ display:none; }
  .rcard{ min-height:0; }
}