/* Shared styles for the static content pages (/ideas/, /guides/, /vs/).
   These pages are plain HTML with no build step and no React — the whole point
   is that a crawler reads the copy straight out of the source. Keeping the
   design tokens here rather than inlined in each page means ten files don't
   each carry their own drifting copy of the palette.

   Tokens are the subset of index.html's :root that these pages actually use,
   with the same values and the same precedence: light at :root, explicit
   [data-theme] wins either direction. Each page runs the same rw_theme
   bootstrap inline so arriving from a dark-themed page doesn't flash white. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8f6;
  --bg-card: #ffffff;
  --border: #e2e8e4;
  --white: #0a1410;
  --muted: #5b6660;
  --sage: #33453d;
  --accent: #0b7a43;
  --accent-fill: #00b04a;
  --accent-deep: #009140;
  --on-accent: #ffffff;
  --nav-glass: rgba(255,255,255,0.96);
  --card-shadow: 0 1px 2px rgba(16,32,24,0.04), 0 8px 20px rgba(16,32,24,0.05);
  --code-bg: #f2f5f3;
}
:root[data-theme="dark"] {
  --bg-primary: #060f0a;
  --bg-secondary: #0c1a12;
  --bg-card: #0f1f16;
  --border: #1a3525;
  --white: #ffffff;
  --muted: #6b8f7a;
  --sage: #b8d4c5;
  --accent: #00e664;
  --accent-fill: #00e664;
  --accent-deep: #00c853;
  --on-accent: #06120c;
  --nav-glass: rgba(8,18,12,0.95);
  --card-shadow: none;
  --code-bg: #0c1a12;
}
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8f6;
  --bg-card: #ffffff;
  --border: #e2e8e4;
  --white: #0a1410;
  --muted: #5b6660;
  --sage: #33453d;
  --accent: #0b7a43;
  --accent-fill: #00b04a;
  --accent-deep: #009140;
  --on-accent: #ffffff;
  --nav-glass: rgba(255,255,255,0.96);
  --card-shadow: 0 1px 2px rgba(16,32,24,0.04), 0 8px 20px rgba(16,32,24,0.05);
  --code-bg: #f2f5f3;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-glass);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand span { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--white); }
.brand span em { font-style: normal; color: var(--accent); }
.header-cta {
  background: var(--accent-fill); color: var(--on-accent);
  font-weight: 700; font-size: 14px; text-decoration: none;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  transition: background .2s ease;
}
.header-cta:hover { background: var(--accent-deep); }

/* ---------- layout ---------- */

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

.crumbs { font-size: 14px; color: var(--muted); padding: 28px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span { margin: 0 7px; opacity: .5; }

article { padding: 20px 0 72px; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}

h1 {
  font-size: clamp(30px, 5.2vw, 44px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.13; margin-bottom: 20px;
}
.standfirst { font-size: 19px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.byline { font-size: 14px; color: var(--muted); padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 34px; }

article h2 {
  font-size: clamp(23px, 3.4vw, 29px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.25;
  margin: 46px 0 16px; scroll-margin-top: 84px;
}
article h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  margin: 32px 0 10px; scroll-margin-top: 84px;
}
article p { margin-bottom: 18px; font-size: 17px; }
article ul, article ol { margin: 0 0 20px 22px; }
article li { margin-bottom: 10px; font-size: 17px; }
article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
article strong { font-weight: 700; }

article blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px; margin: 26px 0;
  color: var(--sage); font-size: 18px;
}

.callout {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px; margin: 30px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout .label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}

.hook-example {
  background: var(--code-bg); border-left: 3px solid var(--accent);
  padding: 14px 18px; margin: 0 0 14px; border-radius: 0 8px 8px 0;
  font-size: 16.5px;
}

table.cmp { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 16px; }
table.cmp th, table.cmp td {
  text-align: left; padding: 13px 14px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
table.cmp th { font-weight: 700; font-size: 14px; letter-spacing: .02em; }
table.cmp tr td:first-child { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- hub grids ---------- */

.hub-head { padding: 34px 0 8px; }
.card-grid {
  display: grid; gap: 18px; padding: 26px 0 60px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; box-shadow: var(--card-shadow);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h2, .card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.card p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ---------- cta ---------- */

.cta-block {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 18px; padding: 32px; margin: 48px 0 0; text-align: center;
}
.cta-block h2 { margin-top: 0; font-size: 24px; }
.cta-block p { color: var(--muted); max-width: 460px; margin: 0 auto 22px; }
.cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent-fill); color: var(--on-accent);
  font-weight: 700; font-size: 15px; padding: 14px 28px;
  border-radius: 999px; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.cta:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border); background: var(--bg-secondary);
  padding: 40px 0; margin-top: 40px;
}
.site-footer .cols {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 32px 60px;
}
.site-footer h4 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; font-weight: 700;
}
.site-footer a {
  display: block; color: var(--white); text-decoration: none;
  font-size: 15px; margin-bottom: 8px; font-weight: 500;
}
.site-footer a:hover { color: var(--accent); }
.site-footer .legal {
  max-width: 1080px; margin: 28px auto 0; padding: 20px 24px 0;
  border-top: 1px solid var(--border); font-size: 14px; color: var(--muted);
}

@media (max-width: 560px) {
  .site-header .inner { padding: 12px 18px; }
  .wrap, .wrap-wide { padding: 0 18px; }
  article p, article li { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .cta, .header-cta { transition: none; }
  .card:hover, .cta:hover { transform: none; }
}

.hub-section {
  max-width: 1080px; margin: 44px auto 0; padding: 0 24px;
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
}
.hub-section-sub {
  max-width: 1080px; margin: 8px auto 0; padding: 0 24px;
  color: var(--muted); font-size: 17px; line-height: 1.6;
}

/* ---- Calendly embed ----------------------------------------------------
   Mirrors the .calendly-embed block in index.html (the sales page keeps its
   own copy in its inline <style>). Used by /affiliate/, which books the same
   30-minute slot as the sales page but under an affiliate-specific heading,
   so a partner never lands on a generic "talk to sales" card. Keep the two
   in sync if the framing changes. */
.booking {
  border-top: 1px solid var(--border);
  margin-top: 44px;
  padding-top: 36px;
}
.booking-head { margin-bottom: 22px; }
.booking-head h2 { margin-top: 0; }
.booking-head p { color: var(--muted); margin-bottom: 0; }
.calendly-embed {
  position: relative;
  /* 700px (what the sales page uses) clips the last week row of a six-row
     month and leaves the iframe with its own scrollbar. 780 clears it. */
  height: 780px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card, #fff);
}
.calendly-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.calendly-loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  background: var(--bg-card, #fff);
  color: var(--muted); font-size: 15px;
}
.calendly-loading::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: calendly-spin .7s linear infinite;
}
@keyframes calendly-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .calendly-loading::before { animation: none; }
}
/* Calendly shows days and times side by side above roughly 900px and stacks
   into a tall single column below it. The article column is 712px (.wrap is
   760px, border-box, less 48px padding), which lands in the cramped middle.
   Break the booking block out symmetrically to 960px — the same width the
   sales page gives it — so the widget gets the wide layout without widening
   the prose measure around it. -124px is (712 - 960) / 2.
   Gated at 1040px so the breakout never exceeds the viewport. */
@media (min-width: 1040px) {
  .booking { width: 960px; margin-left: -124px; }
}

/* Below the breakout, the widget is in its stacked layout and needs the
   height back. */
@media (max-width: 1039px) {
  .calendly-embed { height: 820px; }
}

@media (max-width: 560px) {
  .calendly-embed { height: 900px; border-radius: 12px; }
}
.booking-fallback {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
}