/* ============================================================================
   brand-article.css — Brand 2.0 for blog posts
   ----------------------------------------------------------------------------
   A post loads, in this order:
     brand-chrome.css, brand.css, [blog-v2.css], blog.css, brand-article.css
   and no longer loads tokens.css, components.css, draft.css or lp.css, which
   brand.css says must never share a page with it.

   This file changes how a post looks, never what it says. Every element,
   heading, list, table and JSON-LD block stays exactly as it was, because
   that structure is what AI engines read and cite. blog.css still lays the
   post out. This file does three things:

     1. Maps the 1.0 names blog.css and blog-v2.css use onto Brand 2.0 values,
        following legacy_shim_1_0 in the Sanity token manifest: text to ink,
        grey grounds to paper, borders to the hairline, every radius to 2px,
        no shadows. Do not author new markup against these names.
     2. Restyles what would otherwise break a 2.0 rule: body copy is --ink,
        never --ink2; --line is a rule, never a container border; topic colour
        is a thin marker and a 5.5% wash, never a fill; one accent, --signal,
        means action.
     3. Recolours the injected blocks that carry 1.0 colours inline. Those
        rules need !important, because an inline style beats any stylesheet.

   Unlayered on purpose. blog.css is unlayered, and a layered rule loses to it.

   A post sets its topic territory in <head>, the same way the 2.0 product
   pages do:  <style>body { --tt: var(--t-sec); --tt-w: var(--t-sec-w); }</style>
   The territory is the one the blog index already gives the post.
   ========================================================================= */

/* 1. Legacy names, Brand 2.0 values -------------------------------------- */
/* The territory default sits on :root so the post's own body { --tt } wins. */
:root {
  --tt:   var(--signal);
  --tt-w: var(--signal-wash);
}
main {
  --brand-hover: #2550cf;

  --white: var(--field);
  --black: var(--ink);
  --navy-950: var(--ink);
  --navy-900: var(--ink);
  --navy-800: var(--ink);
  --navy-700: #16233f;
  --navy-600: var(--ink2);
  --slate-900: var(--ink);
  --slate-700: var(--ink2);
  --slate-600: var(--ink2);
  --slate-500: var(--ink2);
  --slate-400: var(--ink2);
  --slate-300: var(--line);
  --slate-200: var(--line);
  --slate-100: var(--paper);
  --slate-50:  var(--paper);
  --blue-600: var(--signal);
  --blue-500: var(--signal);
  --blue-400: var(--signal);
  --blue-300: var(--line);
  --blue-200: var(--line);
  --blue-100: var(--paper);
  --blue-50:  var(--signal-wash);
  --green-500: var(--t-sec);
  --border-default: var(--line);
  --border-strong:  var(--line);

  /* Spacing keeps its 1.0 values, so nothing moves. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --r-sm: var(--radius); --r-md: var(--radius); --r-lg: var(--radius);
  --r-xl: var(--radius); --r-pill: var(--radius);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-glow: none;
  --dur-fast: 100ms; --dur-default: 200ms; --dur-deliberate: 350ms;

  --font: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font);

  /* blog-v2.css */
  --bv2-surface: var(--field);
  --bv2-surface-alt: var(--paper);
  --bv2-surface-accent: var(--tt-w);
  --bv2-text: var(--ink);
  --bv2-text-secondary: var(--ink);
  --bv2-text-muted: var(--ink2);
  --bv2-border: var(--line);
  --bv2-accent: var(--signal);
  --bv2-accent-hover: var(--brand-hover);
  --bv2-accent-light: var(--signal-wash);
  --bv2-font: var(--font);
  --bv2-radius: var(--radius);
  --bv2-radius-sm: var(--radius);
}

/* What draft.css gave the post: a zeroed box model and a centred column. */
main *, main *::before, main *::after { margin: 0; padding: 0; }
main {
  max-width: min(1320px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.6;
}
main img { max-width: 100%; }

/* 2. Hero ---------------------------------------------------------------- */
.article-hero { background: var(--field); }
.article-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}
.article-breadcrumb { color: var(--ink2); }
.article-breadcrumb a { color: var(--signal); font-weight: 560; }
.article-breadcrumb span { color: var(--ink2); }
.article-byline-row .author-avatar,
.article-author-bio .author-avatar { border-radius: var(--radius); background: var(--paper); }
.article-byline-row .author-avatar img,
.article-author-bio .author-avatar img { border-radius: var(--radius); }
.article-byline-row .author-name { font-weight: 650; color: var(--ink); }
.article-byline-row .article-date { color: var(--ink2); }
.article-hero-image img { border-radius: var(--radius); }

/* 3. Reading text --------------------------------------------------------- */
.article-body { background: var(--field); }
.article-content h2 {
  font-size: clamp(25px, 2.4vw, 31px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.article-content h3 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.article-content h4 { font-size: 17px; font-weight: 650; line-height: 1.4; color: var(--ink); margin: var(--sp-6) 0 var(--sp-2); }
.article-content p,
.article-content ul,
.article-content ol {
  font-size: 17.5px;
  line-height: 1.7;
  font-weight: 450;
  color: var(--ink);
  text-wrap: pretty;
}
.article-content ol { margin: 0 0 var(--sp-5); padding-left: 1.4em; }
.article-content > p:first-of-type { font-size: 20px; line-height: 1.55; font-weight: 500; color: var(--ink); }
.article-content li::marker { color: var(--ink2); }
.article-content strong { color: var(--ink); font-weight: 650; }
.article-content a {
  color: var(--signal);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-content a:hover { color: var(--brand-hover); }
.article-content .stat-highlight { font-family: var(--font); font-weight: 650; color: var(--ink); }
.article-hub-link { color: var(--ink2); }

/* Kicker labels. Same recipe as the 2.0 .kicker, in the post's territory. */
main .eyebrow,
.article-content .section-eyebrow,
.article-answer-box .eyebrow {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tt);
}

/* 4. Panels: a thin territory marker and a 5.5% wash, never a container
      border. Neutral panels sit on paper. ------------------------------- */
.article-tldr,
.article-key-takeaways,
.article-callout,
.article-stat,
.article-answer-box,
.article-answer-block {
  background: var(--tt-w);
  border: 0;
  border-left: 3px solid var(--tt);
  border-radius: 0;
}
.article-tldr h3 { font-family: var(--font); letter-spacing: .12em; color: var(--tt); }
.article-tldr li,
.article-key-takeaways ul,
.article-callout p,
.article-answer-box p { color: var(--ink); }
.article-checklist,
.article-definition,
.article-benchmarks,
.article-glossary { background: var(--paper); border: 0; border-radius: 0; }
.article-checklist li { color: var(--ink); }
.article-checklist li::marker { color: var(--tt); }
.article-definition h4 { font-family: var(--font); color: var(--ink2); }
.article-stat-number { font-family: var(--font); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.article-stat-label,
.article-step-desc,
.article-steps .article-step-desc,
.article-benchmarks li,
.article-glossary dd { color: var(--ink); }

/* Numbered steps: a square ink marker, not a blue disc. */
.article-step-num,
.article-steps .article-step::before {
  font-family: var(--font);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
}
.article-step-title { color: var(--ink); font-weight: 650; }

/* 5. Tables: hairline rows and an ink rule under the header, as .vs does. */
.article-content table,
.article-comparison,
.article-comparison-table,
.article-content .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink2);
  box-shadow: none;
  border-radius: 0;
}
.article-content caption { caption-side: top; text-align: left; color: var(--ink2); font-size: 14px; padding-bottom: 12px; }
.article-content th,
.article-content td {
  padding: 14px 16px 14px 0;
  text-align: left;
  vertical-align: top;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.article-content thead th {
  border-bottom: 2px solid var(--ink);
  color: var(--ink2);
  font-size: 14px;
  font-weight: 650;
  vertical-align: bottom;
}
.article-content tbody th,
.article-comparison td:first-child { color: var(--ink); font-weight: 560; }
.article-content .article-table tr:nth-child(even) td,
.article-comparison-table tr:nth-child(even) td { background: transparent; }
.article-comparison-table th { background: transparent; color: var(--ink2); border: 0; border-bottom: 2px solid var(--ink); }
.article-comparison-table td { border: 0; border-bottom: 1px solid var(--line); color: var(--ink2); }

/* 6. FAQ: rules between questions, a signal plus, as the 2.0 FAQ does. --- */
.faq-accordion { border-top: 1px solid var(--line); }
.faq-accordion .faq-item,
.article-content .faq-list .faq-item,
.article-content .bv2-faq .faq-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
}
.faq-accordion .faq-question,
.article-content .faq-list .faq-question,
.article-content .bv2-faq .faq-question {
  padding: 20px 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
  background: transparent;
}
.faq-accordion .faq-question:hover,
.article-content .faq-list .faq-question:hover,
.article-content .bv2-faq .faq-question:hover { background: transparent; color: var(--signal); }
.faq-accordion .faq-question::after,
.article-content .faq-list .faq-question::after,
.article-content .bv2-faq .faq-question::after {
  content: '+';
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
  color: var(--signal);
}
.faq-accordion .faq-item.is-open .faq-question::after,
.article-content .faq-list .faq-item.is-open .faq-question::after,
.article-content .bv2-faq .faq-item.is-open .faq-question::after { content: '\2212'; transform: none; }
.faq-accordion .faq-answer p,
.article-content .faq-list .faq-answer p,
.article-content .bv2-faq .faq-answer p { padding: 0; font-size: 16px; line-height: 1.62; color: var(--ink); max-width: 66ch; }
.faq-accordion .faq-item.is-open .faq-answer p,
.article-content .faq-list .faq-item.is-open .faq-answer p,
.article-content .bv2-faq .faq-item.is-open .faq-answer p { padding: 0 0 22px; }

/* 7. Calls to action ------------------------------------------------------ */
main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  font-family: var(--font);
  font-size: var(--ctl-fs);
  font-weight: 600;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
main .btn-primary { background: var(--ink); color: #fff; }
main .btn-primary:hover { background: var(--signal); color: #fff; }

/* The closing CTA is the dark field, with a white control, as .close is. */
.article-cta { background: var(--ink); border-radius: var(--radius); }
.article-cta h3 { font-family: var(--font); font-weight: 700; letter-spacing: -.02em; }
.article-cta .btn,
.article-cta .btn-primary {
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  font-size: var(--ctl-fs);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
}
.article-cta .btn-primary:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }
.article-content .article-mid-cta { border: 0; border-radius: 0; background: var(--paper); }
.article-content .article-mid-cta .article-mid-cta-headline { color: var(--ink); font-weight: 650; }
.article-content .article-mid-cta .article-mid-cta-proof { color: var(--ink2); }

/* 8. Author, related ------------------------------------------------------ */
.article-author-bio { border-top: 1px solid var(--line); }
.article-author-bio .author-name { color: var(--ink); font-weight: 650; }
.article-author-bio .author-title { color: var(--ink2); }
.article-author-bio .author-bio { color: var(--ink); }
.author-social a { color: var(--ink2); }
.author-social a:hover { color: var(--signal); }
.article-related h3 { color: var(--ink); font-weight: 650; }
.article-related-card { border-top: 2px solid var(--ink); padding-top: 16px; }
.article-related-card .related-image { border-radius: var(--radius); }
.article-related-card .related-date { color: var(--ink2); }
.article-related-card .related-title { color: var(--ink); font-weight: 650; }
.article-related-card:hover .related-title { text-decoration: underline; }

/* 9. Injected blocks that carry 1.0 colours inline ------------------------ */
/* Marker-and-wash panels */
main .answer-box,
main .article-industry-note,
main .conclusion-box,
main .objection-section,
main .competitive-framing:not(p),
main .w3-citation-snippet,
main .w3-product-bridge {
  background: var(--tt-w) !important;
  border: 0 !important;
  border-left: 3px solid var(--tt) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Neutral panels */
main .glossary-box,
main .article-value-bar,
main .live-quickwin-related,
main .w3-related {
  background: var(--paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
main .w3-faq-ui {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 24px 0 0 !important;
}
main .w3-faq-ui details { border-bottom: 1px solid var(--line) !important; padding: 0 !important; }
main .w3-faq-ui summary { padding: 18px 0 !important; color: var(--ink); font-weight: 650 !important; }
main .w3-faq-ui details > div { padding: 0 0 18px !important; color: var(--ink); opacity: 1 !important; }
main .w3-updated { color: var(--ink2); opacity: 1 !important; }

/* Inline 1.0 colours, mapped to 2.0 */
main [style*="color: #6C63FF"],
main [style*="color:#6C63FF"] { color: var(--tt) !important; }
main [style*="color: #1a1a2e"],
main [style*="color:#1a1a2e"],
main [style*="color: #444"] { color: var(--ink) !important; }
main [style*="color: #666"],
main [style*="color: #4a4a6a"] { color: var(--ink2) !important; }
main p[style*="border-left: 3px solid #6C63FF"] { border-left-color: var(--tt) !important; }

/* The dark mid-article CTA keeps its field; its control goes white, as on .close */
main .article-mid-cta[style] { background: var(--ink) !important; border-radius: var(--radius) !important; }
main .article-mid-cta[style] a.btn {
  display: inline-flex !important;
  align-items: center;
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x) !important;
  background: #fff !important;
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
}

/* The inline-styled comparison table */
main .comparison-table table { box-shadow: none !important; border-radius: 0 !important; }
main .comparison-table th,
main .comparison-table td {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
}
main .comparison-table tr:first-child th { border-bottom: 2px solid var(--ink); color: var(--ink2) !important; }

/* 10. Tribble in a comparison table: the mark beside our name, as on
       /security-questionnaires/. Only Tribble gets a mark. The name stays as
       text, so what engines read is unchanged. --------------------------- */
.article-content .vs-mark { display: inline-flex; align-items: center; gap: 8px; }
.article-content .vs-mark img { height: 18px; width: auto; display: block; }
.article-content a .vs-mark { text-decoration: inherit; }

/* 11. Small screens: a wide table scrolls inside its own box instead of
       being clipped by the page. CSS only, the table markup is unchanged. */
@media (max-width: 720px) {
  .article-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}