/* ────────────────────────────────────────────────────────────────
   Shared styling for the Guides hub and articles (/guides/*).
   The marketing landing page (public/landing.html) deliberately stays
   a single self-contained file; the guides are a small SET of pages,
   so they share ONE stylesheet instead of copying the tokens into
   each. Same tokens as the landing page (the app's DARK palette with
   the default Teal accent, Elevated surface style, dark-only) — the
   landing's token block carries the derivation notes; keep the two in
   step if either moves.
   ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --brand-a: #40DCDB;
  --brand-b: #72E9DB;
  --grad: linear-gradient(100deg, var(--brand-a), var(--brand-b));

  --bg-top: #24302E;
  --bg-bottom: #242424;
  --background: #1B1B1B;
  --surface: #151515;
  --card: #303030;
  --raised: #3A3A3A;
  --chrome: #282828;

  --primary: var(--brand-b);
  --on-primary: #1C1B1F;
  --secondary: #46615D;
  --on-secondary: #FFFFFF;

  --text: #E6E1E5;
  --text-2: #9E9E9E;
  --outline: #938F99;
  --outline-variant: #484848;
  --shadow: 2px 3px 1px rgba(0, 0, 0, 0.55);
  --radius: 12px;
  --pill: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  background-image: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
  color: var(--text);
  font-family: "Hanken Grotesk", ui-rounded, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary); color: var(--on-primary); }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.solid { fill: currentColor; stroke: none; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1000px; }

/* ── Buttons — AppButton: raised pill, 1px outline, theme fill ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px; border-radius: var(--pill);
  border: 1px solid var(--outline); box-shadow: var(--shadow);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: opacity .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; opacity: .85; transform: translateY(-1px); }
a.btn-primary, a.btn-primary:visited { background: var(--grad); color: var(--on-primary); border-color: transparent; }
a.btn-secondary, a.btn-secondary:visited { background: var(--secondary); color: var(--on-secondary); }

/* ── Header — the app's chrome bar (opaque, hairline bottom) ── */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--chrome);
  border-bottom: 1px solid var(--outline);
}
.nav { display: flex; align-items: center; gap: 20px; padding: 10px 0; max-width: 1000px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--outline-variant); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-links a.nav-plain {
  color: var(--text); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 10px;
}
.nav-links a.nav-plain:hover { text-decoration: none; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.nav-links .btn { margin-left: 8px; }

/* ── Eyebrow / section label ── */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--primary);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad); }

.back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); font-weight: 600; font-size: .92rem; margin-bottom: 22px;
}
.back:hover { color: var(--primary); text-decoration: none; }

/* ── Guides hub ── */
.hub { padding: 64px 0 40px; }
.hub h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); margin-bottom: 14px; }
.hub .lead { color: var(--text-2); font-size: 1.12rem; max-width: 40rem; }
.guide-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  padding-bottom: 96px; margin-top: 32px;
}
.guide-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 20px 24px;
  transition: transform .18s ease;
}
.guide-card:hover { transform: translateY(-3px); text-decoration: none; }
.guide-card .ico {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  background: var(--secondary); color: var(--on-secondary);
  border: 1px solid var(--outline);
  display: grid; place-items: center; font-size: 18px;
}
.guide-card .tag { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.guide-card h2 { font-size: 1.16rem; margin-bottom: 8px; color: var(--text); }
.guide-card p { color: var(--text-2); font-size: .95rem; }
.guide-card .more { margin-top: 14px; color: var(--primary); font-weight: 700; font-size: .9rem; }

/* ── Article ── */
.article { padding: 56px 0 40px; }
.article .meta { color: var(--text-2); font-size: .88rem; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.article h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 16px; }
.article .lead { color: var(--text); font-size: 1.18rem; line-height: 1.55; margin-bottom: 8px; }
.prose { margin-top: 12px; }
.prose h2 { font-size: 1.4rem; margin: 52px 0 12px; }
.prose h3 { font-size: 1.12rem; margin: 28px 0 8px; }
.prose p { color: var(--text-2); margin-bottom: 16px; }
.prose ul, .prose ol { color: var(--text-2); margin: 0 0 18px 1.2rem; display: grid; gap: 8px; }
.prose li { padding-left: 4px; }
.prose li strong, .prose p strong { color: var(--text); font-weight: 700; }
.prose a { font-weight: 600; }
.prose blockquote {
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 18px; margin: 0 0 20px;
  color: var(--text); font-size: 1.05rem;
}
.callout {
  background: var(--card); border: 1px solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin: 8px 0 24px;
  display: flex; gap: 12px; align-items: flex-start;
}
.callout .ico {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--grad); color: var(--on-primary);
  display: grid; place-items: center; font-size: 14px; margin-top: 1px;
}
.callout p { color: var(--text-2); margin: 0; font-size: .96rem; }
.callout p strong { color: var(--text); }

/* ── End-of-article CTA ── */
.cta-card {
  margin: 40px 0 8px; text-align: center;
  background: var(--card); border: 1px solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 32px 24px;
}
.cta-card h2 { font-size: 1.4rem; margin-bottom: 8px; }
.cta-card p { color: var(--text-2); max-width: 32rem; margin: 0 auto 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Read next ── */
.next-links { margin: 40px 0 0; display: grid; gap: 10px; }
.next-links .eyebrow { margin-bottom: 4px; }
.next-links a {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--outline);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); font-weight: 600;
}
.next-links a:hover { text-decoration: none; border-color: var(--primary); }
.next-links a svg { color: var(--primary); }

footer { border-top: 1px solid var(--outline-variant); background: var(--chrome); padding: 28px 0 36px; color: var(--text-2); font-size: .92rem; margin-top: 40px; }
.foot { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; max-width: 1000px; }
.foot .spacer { flex: 1; }
.foot a { color: var(--text-2); font-weight: 600; }
.foot a:hover { color: var(--primary); }

@media (max-width: 720px) {
  .guide-grid { grid-template-columns: 1fr; }
  .nav-links a.nav-plain { display: none; }
}