/* content.css — styling for the additive AI-SEO/GEO content pages (/learn, /compare, /glossary,
   /industries, /research). Deliberately ISOLATED from styles.css (which is CI-pinned by
   a copy-drift guard): these pages link BOTH — styles.css for the design tokens (:root),
   the top nav, .logo, .btn and the footer; content.css for article/prose layout only. No token is
   redefined here; everything reads the existing --bg/--ink/--brand/--radius/--sans/--disp variables. */

/* ---- article shell ---- */
.doc-main{padding:36px 0 20px}
.doc-wrap{max-width:1120px;margin:0 auto;padding:0 30px}
.crumbs{font-size:13px;color:var(--ink-faint);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--brand-deep)}
.crumbs .sep{color:var(--line);}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.doc{max-width:760px;margin:0 auto}
.doc .eyebrow{margin-bottom:12px}
.doc h1{font-family:var(--disp);font-weight:600;font-size:clamp(32px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.doc h2{font-family:var(--disp);font-weight:600;font-size:clamp(23px,3vw,29px);line-height:1.15;letter-spacing:-.015em;margin:44px 0 14px}
.doc h3{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.25;margin:28px 0 8px}
.doc p{font-size:16.5px;line-height:1.62;color:var(--ink-soft);margin-bottom:16px}
.doc p strong,.doc li strong{color:var(--ink);font-weight:700}
.doc a:not(.btn){color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.doc a:not(.btn):hover{text-decoration-thickness:2px}
.doc ul,.doc ol{margin:0 0 18px 0;padding-left:22px}
.doc li{font-size:16.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:8px}
.doc ul li::marker{color:var(--brand)}

/* ---- direct-answer lead block (the 40-60 word extractable summary) ---- */
.answer{background:var(--bg-elev);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:18px 20px;margin:0 0 14px}
.answer p{font-size:17px;line-height:1.58;color:var(--ink);margin:0}
.answer p+p{margin-top:10px}
.updated{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-faint);margin-bottom:34px}

/* ---- comparison table (AI engines lift these wholesale) ---- */
.cmp-wrap{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table.cmp{width:100%;border-collapse:collapse;min-width:520px;background:var(--bg-elev);font-size:15px}
table.cmp caption{caption-side:top;text-align:left;font-size:13px;color:var(--ink-faint);padding:12px 16px 0}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.cmp thead th{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line)}
table.cmp tbody th{font-weight:600;color:var(--ink);width:34%}
table.cmp td{color:var(--ink-soft)}
table.cmp .us{background:var(--brand-soft);color:var(--ink);font-weight:600}
table.cmp thead .us{color:var(--brand-deep)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none}

/* ---- stat callout ---- */
.callout{margin:24px 0;padding:16px 20px;background:var(--bg-sunk);border-radius:var(--radius-sm)}
.callout p{margin:0;font-size:16px;color:var(--ink)}
.callout cite{display:block;margin-top:6px;font-size:12.5px;font-style:normal;color:var(--ink-soft)}
.callout cite a{color:var(--ink-soft)}

/* ---- "In this guide" card lists (hub + comparison pages) ---- */
.cards{margin:34px 0 10px}
.cards h2{margin:0}
ul.cardlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cardlist li{margin:0;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px 18px}
.cardlist a{font-weight:600;font-size:16.5px;line-height:1.35}
.cardlist span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}

/* ---- FAQ ---- */
.faq{margin-top:20px}
.faq .qa{border-top:1px solid var(--line);padding:18px 0}
.faq .qa:last-child{border-bottom:1px solid var(--line)}
.faq h3{margin:0 0 6px}
.faq p{margin:0}

/* ---- inline CTA band ---- */
.cta-inline{margin:40px 0 8px;padding:26px 24px;background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}
.cta-inline h2{font-family:var(--disp);font-weight:600;font-size:24px;margin:0 0 8px;letter-spacing:-.015em}
.cta-inline p{font-size:15px;color:var(--ink-soft);max-width:460px;margin:0 auto 16px}

/* ---- related links + sources footnote ---- */
.related{margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.related h2{font-size:15px;font-family:var(--sans);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.related a{color:var(--brand-deep);text-decoration:none;font-weight:600;font-size:15.5px}
.related a:hover{text-decoration:underline}
.sources{margin-top:30px;font-size:12.5px;color:var(--ink-faint);line-height:1.55}
.sources h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--sans);font-weight:700;margin:0 0 6px}
.sources ol{margin:0;padding-left:18px}
.sources a{color:var(--ink-faint);text-decoration:underline}

@media(max-width:900px){
  .doc-wrap{padding:0 20px}
  .doc-main{padding:26px 0 12px}
}
@media(max-width:560px){
  .doc h1{font-size:30px}
  .doc p,.doc li{font-size:16px}
}

/* ---- product vignettes (SOW 6.1) ----
   Static illustrations of what the prose already describes. No script, no live data, no network: these
   are ordinary elements styled to read like the product, so a signed-out reader can SEE the thing the
   sentence next to them explains. Each page carries exactly one, chosen by what its prose describes.

   Two properties worth keeping when editing:
   1. The tone word and the tag labels are uppercased HERE, in CSS, never in markup. Markup holds the
      mixed-case string the app itself renders, so a reader with styles off and a screen reader both get
      the product's real wording rather than shouted letters. The landing does the same thing.
   2. LIGHT ONLY BY CONSTRUCTION, not by omission. Both dark blocks in styles.css are gated on
      :root[data-app]; these pages never set that attribute, so no dark variant exists to style or test. */
.vig{margin:26px 0 30px;padding:18px 20px 16px;background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.vig-k{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.vig-n{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--ink-faint)}
.vig-row{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
/* The two halves are LABELLED on purpose. A score and a grade are different readings of a lead —
   the tone word comes from the 0-100 score, the letter from the fit band — so an unlabelled tile sitting
   flush against a four-rung legend would invite a reader to conclude that 92 IS an A. It is not a
   mapping the product publishes, so the columns name themselves and imply nothing. */
.vig-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.vig-lbl{font:700 10px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}

/* score tile — the landing's number + tone pairing, at article scale */
.vig-score{width:58px;height:58px;border-radius:15px;flex:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--hot-soft);color:var(--hot-deep)}
.vig-score .n{font:700 22px/1 var(--disp)}
.vig-score .t{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}

/* fit ladder — one rung per grade, each paired with the label pipeline.html actually renders */
.fitl{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1 1 190px;min-width:0}
.fitl li{display:flex;align-items:center;gap:10px;margin:0;font-size:14.5px;line-height:1.3;color:var(--ink)}
.fitl .g{flex:none;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font:700 14px/1 var(--disp)}
.fitl .l{font-weight:600;min-width:0}
.fitl .ga{background:var(--hot-soft);color:var(--hot-deep)}
.fitl .gb{background:var(--warn-soft);color:var(--warn-deep)}
.fitl .gc{background:var(--brand-soft);color:var(--brand-deep)}
.fitl .gd{background:var(--bg-sunk);color:var(--ink-soft)}

/* locked-card row — records already reserved to a room, and the one that is yours */
.lockr{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lockr li{display:flex;align-items:center;gap:12px;margin:0;padding:9px 12px;background:var(--bg-sunk);
  border-radius:var(--radius-sm);min-width:0}
.lockr .s{flex:none;width:30px;height:30px;border-radius:9px;background:var(--line)}
.lockr .b{flex:1 1 auto;min-width:0;display:grid;gap:6px}
.lockr .b i{display:block;height:7px;border-radius:4px;background:var(--line)}
.lockr .b .w1{width:62%}
.lockr .b .w2{width:38%}
.lockr .t{flex:none;display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1 var(--sans);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.lockr .t svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.lockr .mine{background:var(--brand-soft)}
.lockr .mine .s{background:var(--hot-soft);color:var(--hot-deep);display:flex;align-items:center;
  justify-content:center;font:700 13px/1 var(--disp)}
.lockr .mine .b i{background:var(--brand)}
.lockr .mine .t{color:var(--brand-deep)}

@media(max-width:560px){
  .vig{padding:16px 14px 14px}
  .vig-row{gap:14px}
  .lockr li{gap:9px;padding:8px 10px}
}