/* ============================================================================
   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); }

/* 4. Callouts. A callout is a hairline rule, a short territory dash before a
      small label, then the text: the .claim and .ledger pattern in brand.css.
      No boxes and no side bars. A boxed callout with a coloured left bar is
      the generic template look, and on a post with many injected blocks it
      becomes a wall of them. ------------------------------------------------ */
.article-tldr,
.article-key-takeaways,
.article-callout,
.article-stat,
.article-answer-box,
.article-checklist,
.article-definition,
.article-benchmarks,
.article-glossary {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 0 0;
}

/* Labels: small and quiet, with the territory as a 26px dash. */
main .eyebrow,
.article-content .section-eyebrow,
.article-tldr h3,
.article-definition h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink2);
}
main .eyebrow::before,
.article-content .section-eyebrow::before,
.article-tldr h3::before,
.article-definition h4::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--tt);
}

.article-tldr li,
.article-key-takeaways li {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 450;
  color: var(--ink);
}
.article-callout p { font-size: 17.5px; font-weight: 500; color: var(--ink); }
.article-answer-box p { color: var(--ink); }
.article-checklist h3 { font-size: 18px; font-weight: 650; color: var(--ink); }
.article-checklist li { font-size: 16px; color: var(--ink); }
.article-checklist li::marker { color: var(--ink2); }
.article-stat-number { font-family: var(--font); font-size: 34px; 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; }
.article-content a.article-related-card { color: inherit; font-weight: inherit; text-decoration: none; }
/* On some posts the related grid sits outside the reading column; keep it in line with the text. */
.article-body > .article-related { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 9. Injected blocks that carry 1.0 colours inline ------------------------ */
/* The same rule-and-label treatment. */
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,
main .glossary-box {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 0 0 !important;
}
/* Their small uppercase labels get the territory dash. */
main p[style*="text-transform: uppercase"] {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--ink2) !important;
  letter-spacing: .12em !important;
}
main p[style*="text-transform: uppercase"]::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--tt);
}
/* A bar of stats: a rule above and below, left aligned, no tinted box. */
main .article-value-bar {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  justify-content: flex-start !important;
  padding: 14px 0 !important;
}
main .article-value-bar span[style*="display: block"] { text-align: left !important; }
/* A quoted statistic set as a side-barred italic line: keep the words, drop the bar. */
main p[style*="border-left"] { border-left: 0 !important; padding-left: 0 !important; color: var(--ink2) !important; }

/* Blocks injected after the article, straight into <main>: a white band with
   the content in the reading column, so they read as part of the post rather
   than as text running from the window edge. */
main > .w3-faq-ui,
main > .live-quickwin-related,
main > .w3-rescue-links {
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--field) !important;
  padding: 8px max(16px, calc((100% - 720px) / 2)) 48px !important;
}
main > .w3-faq-ui h2,
main > .live-quickwin-related h2,
main > .live-quickwin-related h3 {
  font-size: clamp(22px, 2.2vw, 26px) !important;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 32px 0 12px !important;
}
main .w3-faq-ui details { border-bottom: 1px solid var(--line) !important; padding: 0 !important; }
main .w3-faq-ui summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0 !important;
  font-size: 17px;
  font-weight: 650 !important;
  color: var(--ink);
  cursor: pointer;
}
main .w3-faq-ui summary::-webkit-details-marker { display: none; }
main .w3-faq-ui summary::after { content: '+'; font-size: 24px; font-weight: 650; line-height: 1; color: var(--signal); }
main .w3-faq-ui details[open] summary::after { content: '\2212'; }
main .w3-faq-ui details > div {
  margin: 0 !important;
  padding: 0 0 18px !important;
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.62 !important;
  color: var(--ink);
  opacity: 1 !important;
}
main > .live-quickwin-related ul { padding-left: 1.2em !important; }
main > .live-quickwin-related li { font-size: 16px; line-height: 1.6; margin: 6px 0 !important; }
main > .live-quickwin-related a { color: var(--signal); text-underline-offset: 3px; }
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; }

/* The dark mid-article CTA keeps its ink field. */
main .article-mid-cta[style] { background: var(--ink) !important; border-radius: var(--radius) !important; }
/* Its label is forced white inline with !important, which no stylesheet can
   override, so the control takes --signal, the one accent for action. */
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: var(--signal) !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;
  }
}

/* 12. Conversion: one early ask under the byline, a floating button, and a
       prompt for readers who stay. Everything opens the demo modal. -------- */
.article-early-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 28px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-early-cta p { margin: 0; flex: 1 1 360px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.article-early-cta strong { font-weight: 650; }
.article-early-cta .btn { flex: none; }

/* The floating button sits outside <main>, so it carries its own control styles. */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.floating-cta.visible { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta:hover { background: var(--signal); color: #fff; }
body.linger-open .floating-cta { opacity: 0; pointer-events: none; }

/* The linger prompt is the dark field, like the closing CTA: it stands off the
   page by its field, not by a shadow or a border. */
.linger-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 950;
  width: min(380px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.linger-cta.visible { opacity: 1; transform: none; }
.linger-cta-title { margin: 0 0 6px; font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.linger-cta-body { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.linger-cta-actions { display: flex; align-items: center; gap: 16px; }
.linger-cta-book {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.linger-cta-book:hover { background: var(--paper); }
.linger-cta-no {
  border: 0;
  background: none;
  padding: 8px 0;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linger-cta-no:hover { color: #fff; }

@media (max-width: 720px) {
  .floating-cta { left: 16px; right: 16px; bottom: 16px; justify-content: center; }
  .linger-cta { left: 16px; right: 16px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cta, .linger-cta { transition: none; }
}