/* ThriveAI article styles.
 *
 * These pages sit on the home page's design system: ploy.css supplies the
 * colour tokens, Inter carries everything, IBM Plex Mono carries the eyebrow
 * labels, and an 8px baseline (--bl, the home page calls it --sw-bl) sets the
 * vertical rhythm. Nothing here introduces a colour or a typeface the home page
 * does not already use.
 *
 * ploy.css is a precompiled Tailwind build, so anything it does not already
 * cover is hand-written here against the --ploy-* custom properties.
 *
 * Load order: /assets/ploy.css first, then this file.
 */

/* ===========================================================================
   SWISS PALETTE OVERRIDE
   Copied verbatim from the home page's inline <style>. Every ploy neutral
   ships with warm chroma (hue 50-83); the home page zeroes that chroma so the
   page reads as genuinely neutral paper, and overriding the tokens flips every
   compiled utility class at once. The articles must carry the same block or
   they render a warm off-white next to the home page's white.
   If the home page's palette ever changes, change it here in the same commit.
   =========================================================================== */
:root, html.dark, [data-theme="dark"] {
  --ploy-background-primary: #fff;
  --ploy-neutral-primary: #fff;
  --ploy-neutral-primary-s1: #fff;
  --ploy-neutral-primary-s3: #d8d8d8;   /* hairline */
  --ploy-neutral-primary-s4: #bdbdbd;
  --ploy-neutral-primary-100: #f2f2f2;
  --ploy-neutral-primary-500: #7a7a7a;  /* mono labels */
  --ploy-neutral-primary-700: #4a4a4a;  /* secondary body */
  --ploy-neutral-inverse-950: #111;     /* headings */
  --ploy-neutral-inverse-800: #333;     /* body */
  --ploy-background-inverse: #111;
  --ploy-text-inverse: #fff;
  --ploy-border-primary: #d8d8d8;
  --ploy-input-background: #1a1a1a;
  --ploy-text-on-accent-primary: #fff;
}
/* Grotesque only. ploy.css sets h1/h2/h3 to Cormorant Garamond. */
h1, h2, h3, h4 {
  font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.025em;
}
/* The callout's tinted panel needs a neutral of its own now that the warm
   background token is gone. */
.article-page { --panel: #f7f7f7; }

.article-page {
  --bl: 8px;
  --hair: var(--ploy-neutral-primary-s3);
  --measure: 42rem;
  --shell: 72.5rem;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.102px;
  background: var(--ploy-background-primary);
  color: var(--ploy-text-primary);
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

.skip-link { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; z-index: 100;
  padding: 0.75rem 1.25rem; background: var(--ploy-accent-primary); color: #fff;
  font-size: 0.9rem; font-weight: 500;
}

/* ---------------------------------------------------------------- header */
/* Uses the home page's header markup, so these rules only have to restate what
   the compiled utilities already do there. */

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--ploy-background-primary) 90%, transparent);
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.site-nav {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 2.5rem;
}
.site-header .logo {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em;
  color: var(--ploy-neutral-inverse-950); text-decoration: none;
}
.logo .slash { color: var(--ploy-neutral-primary-500); font-weight: 400; margin: 0 0.15em; }
.nav-right { display: flex; align-items: center; gap: 1.5rem; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--ploy-accent-primary); color: var(--ploy-text-on-accent-primary);
  font-size: 0.875rem; font-weight: 500; min-height: 2.5rem;
  padding: 0.5rem 1.1rem; text-decoration: none;
  transition: opacity 0.2s ease;
}
.nav-cta:hover { opacity: 0.9; }

/* Swiss has no rounded corners. ploy.css rounds buttons and cards, so this
   squares them rather than chasing each utility class. Copied from the home
   page, where the same rule is what makes the header CTA a rectangle. */
header a[class*="rounded"], nav a[class*="rounded"], .nav-cta {
  border-radius: 0 !important;
}

/* ------------------------------------------------------------ page shell */

.article-wrap {
  max-width: var(--shell); margin: 0 auto;
  padding: calc(var(--bl) * 20) 2.5rem calc(var(--bl) * 12);
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 4rem;
  align-items: start;
}

.toc-sidebar { position: sticky; top: 6.5rem; align-self: start; }
.toc-label {
  font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500);
  border-bottom: 2px solid var(--ploy-accent-primary);
  padding-bottom: var(--bl); display: inline-block;
  margin-bottom: calc(var(--bl) * 3);
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin-bottom: calc(var(--bl) * 1.5); }
.toc-list a {
  color: var(--ploy-neutral-primary-700); font-size: 0.875rem;
  text-decoration: none; line-height: 1.45; display: block;
  transition: color 0.18s ease;
}
.toc-list a:hover, .toc-list a.active { color: var(--ploy-neutral-inverse-950); }
.toc-l2 { padding-left: 0.9rem; }

/* ----------------------------------------------------------- article body */

.article { max-width: var(--measure); }

.article-meta {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500); margin-bottom: calc(var(--bl) * 3);
}
.article-category { color: var(--ploy-accent-primary); }
.article-meta .sep { color: var(--hair); }

.article h1 {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 600;
  color: #111; margin: 0 0 calc(var(--bl) * 3); text-wrap: balance;
}
.article-lede {
  font-size: 1.2rem; line-height: 1.6; font-weight: 400;
  color: var(--ploy-neutral-primary-700);
  margin: 0 0 calc(var(--bl) * 5);
}

.article-byline {
  display: flex; align-items: center; gap: 0.85rem;
  padding-bottom: calc(var(--bl) * 5); margin-bottom: calc(var(--bl) * 6);
  border-bottom: 1px solid var(--hair);
}
.byline-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: var(--portrait-radius);
  object-fit: cover; object-position: center top;
  background: var(--panel); border: 1px solid var(--hair);
  flex: none;
}
.byline-info { display: flex; flex-direction: column; }
.byline-name { font-size: 0.9rem; font-weight: 500; color: var(--ploy-neutral-inverse-950); }
.byline-role {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--ploy-neutral-primary-500);
}

.article-shot {
  margin: 0 0 calc(var(--bl) * 6);
  border-top: 1px solid var(--hair);
  padding-top: calc(var(--bl) * 3);
}
.article-shot img { display: block; width: 100%; height: auto; }

.article h2 {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.2; letter-spacing: -0.028em; font-weight: 600;
  color: var(--ploy-neutral-inverse-950);
  margin: calc(var(--bl) * 8) 0 calc(var(--bl) * 3);
  scroll-margin-top: 6.5rem;
}
.article h3 {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600;
  color: var(--ploy-neutral-inverse-950);
  margin: calc(var(--bl) * 5) 0 calc(var(--bl) * 2);
  scroll-margin-top: 6.5rem;
}
.article p { margin: 0 0 calc(var(--bl) * 3); line-height: 1.75; color: var(--ploy-neutral-primary-700); }
.article ul, .article ol { margin: 0 0 calc(var(--bl) * 3); padding-left: 1.25rem; }
.article li { margin-bottom: calc(var(--bl) * 1.5); line-height: 1.7; color: var(--ploy-neutral-primary-700); }
.article strong { font-weight: 600; color: var(--ploy-neutral-inverse-950); }
.article em { font-style: italic; }
.article a:not(.btn):not(.related-card) {
  color: var(--ploy-accent-primary);
  text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.pullquote {
  margin: calc(var(--bl) * 6) 0; padding-left: 1.5rem;
  border-left: 2px solid var(--ploy-accent-primary);
  font-size: 1.2rem; line-height: 1.55; letter-spacing: -0.02em;
  color: var(--ploy-neutral-inverse-950);
}

.callout {
  margin: calc(var(--bl) * 5) 0; padding: calc(var(--bl) * 3);
  background: var(--panel);
  border-left: 2px solid var(--ploy-accent-primary);
}
.callout-label {
  display: block; font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500); margin-bottom: var(--bl);
}
.callout p:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own box so the page never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: calc(var(--bl) * 5) 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0; }
.data-table th, .data-table td {
  text-align: left; padding: calc(var(--bl) * 1.5) calc(var(--bl) * 2);
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.data-table th {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500); font-weight: 500; white-space: nowrap;
  border-bottom: 1px solid var(--ploy-neutral-inverse-950);
}
.data-table td { color: var(--ploy-neutral-primary-700); }

/* -------------------------------------------------------------------- FAQ */

.faq-section { margin-top: calc(var(--bl) * 8); }

/* Native disclosure widgets: no script, keyboard accessible, and the answers
   stay in the DOM so crawlers still read them while closed. Same shape as the
   tool pages' .tl-faq. */
.faq-item { border-top: 1px solid var(--hair); }
.faq-item:last-of-type { border-bottom: 1px solid var(--hair); }
.faq-q {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: calc(var(--bl) * 2.5) 0; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ploy-neutral-inverse-950);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+'; flex: none;
  color: var(--ploy-accent-primary); font-size: 1.3rem; font-weight: 400; line-height: 1;
}
.faq-item[open] .faq-q::after { content: '\2212'; }
.faq-q:hover { color: var(--ploy-accent-primary); }
.faq-q:focus-visible { outline: 2px solid var(--ploy-accent-primary); outline-offset: 2px; }
.faq-a {
  margin: 0; padding: 0 0 calc(var(--bl) * 3);
  color: var(--ploy-neutral-primary-700); line-height: 1.7;
}

/* ------------------------------------------------------------------- CTAs */
/* Square copper fill, matching .sw-btn.fill on the home page. Every CTA on
   these pages points at the contact form. */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ploy-accent-primary); color: #fff;
  font-size: 0.95rem; font-weight: 500; min-height: 3rem;
  padding: 0.8rem 1.6rem; border-radius: 0; text-decoration: none;
  transition: opacity 0.18s ease;
}
.btn:hover { opacity: 0.9; }

.article-cta, .article-end-cta {
  margin: calc(var(--bl) * 8) 0 0; padding: calc(var(--bl) * 6) 0 0;
  border-top: 1px solid var(--hair);
}
.article-end-cta-label {
  display: block; font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500); margin-bottom: calc(var(--bl) * 2);
}
.article-cta p, .article-end-cta p { margin-bottom: calc(var(--bl) * 3); }

/* --------------------------------------------------------------- related */

.related-section {
  border-top: 1px solid var(--hair);
  margin-top: calc(var(--bl) * 10); padding-top: calc(var(--bl) * 6);
}
.related-section h2 {
  font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--ploy-neutral-primary-500);
  border-bottom: 2px solid var(--ploy-accent-primary);
  padding-bottom: var(--bl); display: inline-block;
  margin: 0 0 calc(var(--bl) * 4);
}
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.related-card {
  display: block; padding: calc(var(--bl) * 3);
  border: 1px solid var(--hair); text-decoration: none;
  transition: border-color 0.18s ease;
}
.related-card:hover { border-color: var(--ploy-neutral-inverse-950); }
.related-card .category {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ploy-accent-primary); margin-bottom: var(--bl);
}
.related-card h3 {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ploy-neutral-inverse-950); margin: 0 0 var(--bl);
}
.related-card p {
  font-size: 0.875rem; line-height: 1.55;
  color: var(--ploy-neutral-primary-700); margin: 0;
}

/* Footer layout lives in /assets/swiss.css, which every page loads. */

/* -------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  .article-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc-sidebar { position: static; margin-bottom: calc(var(--bl) * 6); }
}
@media (max-width: 767px) {
  .site-nav { padding: 0.75rem 1.25rem; }
  .article-wrap { padding: calc(var(--bl) * 16) 1.25rem calc(var(--bl) * 10); }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
}