/* ============================================================================
   tly-ai-hub.css
   ONE shared, scoped, namespaced design system for the three TLY AI hubs.
   Replicates the live Creator-partners dark v6 system on the unified brand
   tokens, per COUNCIL-RESTYLE-VERDICT.md (news variant + two warm variants).

   Namespace contract: EVERY selector is prefixed with .tly-ai-hub so nothing
   leaks to the global Kajabi theme or any other page. Tokens are scoped INSIDE
   .tly-ai-hub (never :root) so they cannot override global variables.

   Section modifiers (added alongside .tly-ai-hub on the same wrapper):
     .tly-ai-news-section        editorial dense feed / tracker (cream)
     .tly-ai-workflows-section   warm Creator-card browse and learn (cream)
     .tly-ai-casestudies-section warm Creator-card pillar and case study (cream)

   Zero em or en dashes anywhere, including comments. Mobile first. WCAG AA.

   ----------------------------------------------------------------------------
   FONT IMPORT (extended): Archivo 400/500/700/900 + IBM Plex Mono 400/500 +
   Inter 400/500/600/700 are already loaded by block 7 on the AI News hub, so
   they are NOT re-imported here. We ADD the two families the Creator CSS uses
   but the live import omits: Source Serif 4 (incl italic) and Manrope. If this
   sheet is ever loaded on a page that does NOT already carry the block 7
   import, prepend the full import below instead.

   Full extended import (use only if block 7 is absent on the page):
   @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400;1,8..60,600&display=swap");

   This sheet imports ONLY the two missing families (safe to keep; @import is
   idempotent at the browser level and dedupes against the block 7 import):
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400;1,8..60,600&display=swap");

/* ============================================================================
   1. BASE  .tly-ai-hub  (tokens, reset, typography, primitives, buttons)
   These replicate the live Creator primitives faithfully but on the CREAM
   surface that all three hubs share. The dark hero, dark cards, and dark
   carousel are available as primitives for any hub that wants them.
   ============================================================================ */
.tly-ai-hub {
  /* canonical brand tokens, scoped here (block 7 :root values, verbatim) */
  --cream: #FBFAF7;
  --cream2: #EFEEEA;
  --cream3: #E6E4DE;
  --ink: #14140E;
  --ink2: #1A1916;
  --espresso: #2A2925;
  --muted: #59574F;
  --muted2: #807D74;
  --line: rgba(20, 20, 14, .14);
  --hair: rgba(20, 20, 14, .08);
  --emerald: #006B3F;
  --emerald2: #1F8A5B;
  --emerald-deep: #004D2D;
  --coral: #C2553F;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 18px 42px rgba(20, 20, 14, .07);
  --display: "Archivo", "Arial Black", Arial, system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --manrope: "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tly-ai-hub *,
.tly-ai-hub *::before,
.tly-ai-hub *::after { box-sizing: border-box; }

.tly-ai-hub .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.tly-ai-hub .wrap-n { max-width: 840px; margin: 0 auto; padding: 0 24px; }
.tly-ai-hub .sec { padding: 72px 0; }
.tly-ai-hub .sec.alt { background: var(--cream2); }

.tly-ai-hub a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }
.tly-ai-hub a:hover { color: var(--emerald-deep); }

/* ---- display headlines: Archivo 900, tight tracking, italic em in emerald --- */
.tly-ai-hub h1,
.tly-ai-hub h2,
.tly-ai-hub h3,
.tly-ai-hub h4 { font-family: var(--display); font-weight: 900; color: var(--ink); text-wrap: balance; margin: 0; }
.tly-ai-hub h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -.04em; margin: 0 0 22px; }
.tly-ai-hub h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.032em; margin: 56px 0 14px; }
.tly-ai-hub h3 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.14; letter-spacing: -.02em; margin: 30px 0 8px; }
.tly-ai-hub h4 { font-size: 18px; line-height: 1.22; letter-spacing: -.01em; margin: 22px 0 6px; }
.tly-ai-hub h1 em,
.tly-ai-hub h2 em,
.tly-ai-hub h3 em,
.tly-ai-hub h4 em { color: var(--emerald); font-style: italic; }

/* ---- body copy: comfortable measure, generous leading, intentional stress --- */
.tly-ai-hub p { font-family: var(--serif); font-size: 19px; line-height: 1.62; color: var(--ink); margin: 0 0 22px; max-width: 72ch; }
.tly-ai-hub p strong { font-weight: 600; color: var(--ink); }
.tly-ai-hub p em { font-style: italic; }
.tly-ai-hub ul,
.tly-ai-hub ol { font-family: var(--serif); font-size: 18px; line-height: 1.58; color: var(--ink); max-width: 72ch; padding-left: 1.2em; margin: 0 0 22px; }
.tly-ai-hub li { margin: 0 0 .55em; }
.tly-ai-hub li strong { font-weight: 600; }

/* ---- mono eyebrow / label ---- */
.tly-ai-hub .eyebrow,
.tly-ai-hub .mono,
.tly-ai-hub .kicker,
.tly-ai-hub .tly-eyebrow,
.tly-ai-hub .cta-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--emerald2);
  margin: 0 0 16px;
  display: block;
}

/* ---- deck / lead under a headline: Source Serif italic ---- */
.tly-ai-hub .deck,
.tly-ai-hub .tly-deck,
.tly-ai-hub .arn-deck,
.tly-ai-hub .lead,
.tly-ai-hub .executive-summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.46;
  color: var(--espresso);
  max-width: 60ch;
  margin: 0 0 26px;
}
.tly-ai-hub .executive-summary { font-style: normal; }

/* ---- pull quote ---- */
.tly-ai-hub .pq,
.tly-ai-hub .tly-pq,
.tly-ai-hub .tly-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(23px, 2.8vw, 31px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ink);
  border-left: 3px solid var(--emerald);
  padding: 4px 0 4px 26px;
  margin: 36px 0;
  max-width: 30ch;
}

/* ---- card primitive: 24px radius + soft shadow (Creator .pcard analog) ---- */
.tly-ai-hub .card,
.tly-ai-hub .tly-card,
.tly-ai-hub .arn-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.tly-ai-hub .card:hover,
.tly-ai-hub .tly-card:hover,
.tly-ai-hub .arn-card:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ---- DARK Creator primitives (cp2-hero, pcard, caro), available to any hub --- */
.tly-ai-hub .cp2-hero {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 96px 0 76px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.tly-ai-hub .cp2-hero .bgword {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 38vw;
  color: rgba(31, 138, 91, .055); line-height: 1; pointer-events: none; user-select: none;
}
.tly-ai-hub .cp2-hero .wrap { max-width: 780px; position: relative; z-index: 1; }
.tly-ai-hub .cp2-hero h1 { color: var(--cream); margin: 18px 0 0; }
.tly-ai-hub .cp2-hero h1 em { color: var(--emerald2); }
.tly-ai-hub .cp2-hero .deck { color: rgba(236, 233, 223, .8); margin: 22px auto 0; text-align: center; }
.tly-ai-hub .cp2-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.tly-ai-hub .cp2-micro { font-family: var(--manrope); font-size: 13px; color: var(--muted2); margin-top: 16px; }

/* signature emerald band */
.tly-ai-hub .sig { background: var(--emerald-deep); text-align: center; padding: 72px 0; border-radius: var(--radius); }
.tly-ai-hub .sig p {
  font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.18; color: var(--cream); letter-spacing: -.01em; margin: 0 auto; max-width: none;
}

/* carousel: hidden scrollbar + scroll snap (Creator .caro / .caro-nav verbatim) */
.tly-ai-hub .caro-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.tly-ai-hub .caro-nav { display: flex; gap: 10px; }
.tly-ai-hub .caro-nav button {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: 17px; cursor: pointer; transition: .15s;
}
.tly-ai-hub .caro-nav button:hover { background: var(--ink); color: var(--cream); }
.tly-ai-hub .caro {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 2px 14px; margin-top: 34px; scrollbar-width: none;
}
.tly-ai-hub .caro::-webkit-scrollbar { display: none; }

/* warm carousel card (cream surface analog of .pcard) */
.tly-ai-hub .pcard {
  scroll-snap-align: start; flex: 0 0 348px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.tly-ai-hub .pcard .pname { font-family: var(--display); font-weight: 900; font-size: 23px; color: var(--ink); letter-spacing: -.02em; }
.tly-ai-hub .pcard .ptags { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--emerald2); margin: 9px 0 14px; }
.tly-ai-hub .pcard .pdesc { font-family: var(--manrope); font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; }
.tly-ai-hub .pcard .pmove { font-family: var(--manrope); font-size: 14px; line-height: 1.55; color: var(--ink); margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 14px; }
.tly-ai-hub .pcard .pmove b { color: var(--emerald); font-weight: 700; }

/* ---- chip / button system (block 7 .chip verbatim) ---- */
.tly-ai-hub .chip,
.tly-ai-hub .tly-btn,
.tly-ai-hub .arn-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; padding: 15px 22px; border: 2px solid var(--ink);
  color: var(--ink); background: transparent; transition: all .15s; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.tly-ai-hub .chip:hover,
.tly-ai-hub .tly-btn:hover,
.tly-ai-hub .arn-chip:hover { background: var(--ink); color: var(--cream); }
.tly-ai-hub .chip.solid,
.tly-ai-hub .tly-btn { background: var(--ink); color: var(--cream); }
.tly-ai-hub .chip.solid:hover,
.tly-ai-hub .tly-btn:hover { background: var(--espresso); color: var(--cream); }
.tly-ai-hub .chip.emerald { background: var(--emerald); color: var(--cream); border-color: var(--emerald); }
.tly-ai-hub .chip.emerald:hover { background: var(--emerald-deep); }
.tly-ai-hub .chip.cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tly-ai-hub .chip.cream:hover { background: var(--cream2); color: var(--ink); border-color: var(--cream2); }
.tly-ai-hub .chip.ghost { border-color: rgba(255, 255, 255, .32); color: var(--cream); background: transparent; }
.tly-ai-hub .chip.ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tly-ai-hub .chip.honey { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tly-ai-hub .chip.honey:hover { background: #EFEEEA; }
.tly-ai-hub .chip.sm { padding: 11px 14px; font-size: 10px; letter-spacing: .2em; }
.tly-ai-hub .chip.lg { padding: 19px 26px; font-size: 12px; }
.tly-ai-hub .dl-link { font-family: var(--body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald2); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================================
   2. SHARED SEMANTIC CONTENT CLASSES used by the staged batch4 piece bodies.
   Styling these EXACTLY means a piece only needs its inline <style> stripped
   and a wrapper added; no body rewrite. Three markup conventions exist in
   batch4 and all are covered here:
     A) workflow pieces  : bare classes  deck answer kt pq cmp guard method
                           part faq cta src fill verdict step lbl callout warn
                           tmpl read meta tag
     B) news pieces      : tly-shell + tly-* prefixed classes
     C) pillar pieces    : post-hero post-head post-body crumb tag byline
                           executive-summary cta-block blog-course-cta
                           cta-eyebrow cta-headline cta-body lead-magnet more
                           grid card kicker lab
   ============================================================================ */

/* ---- breadcrumb (crumb / tly-crumbs / arn-crumb) ---- */
.tly-ai-hub .crumb,
.tly-ai-hub .tly-crumbs,
.tly-ai-hub .arn-crumb {
  font-family: var(--body); font-size: 12px; letter-spacing: .04em; color: var(--muted);
  margin: 0 0 26px; font-weight: 500; max-width: none;
}
.tly-ai-hub .crumb a,
.tly-ai-hub .tly-crumbs a,
.tly-ai-hub .arn-crumb a { color: var(--emerald); text-decoration: none; }
.tly-ai-hub .crumb a:hover,
.tly-ai-hub .tly-crumbs a:hover { text-decoration: underline; }

/* ---- meta / dateline / byline / series / tly-meta / tly-series ---- */
.tly-ai-hub .meta,
.tly-ai-hub .tly-meta,
.tly-ai-hub .byline,
.tly-ai-hub .tly-series,
.tly-ai-hub .part,
.tly-ai-hub .tly-rel,
.tly-ai-hub .tly-related {
  font-family: var(--body); font-size: 13px; line-height: 1.5; color: var(--muted);
  letter-spacing: .02em; margin: 0 0 14px; max-width: 72ch;
}
.tly-ai-hub .tly-series a,
.tly-ai-hub .part a,
.tly-ai-hub .tly-rel a,
.tly-ai-hub .tly-related a { color: var(--emerald); font-weight: 600; }

/* ---- tag pill ---- */
.tly-ai-hub .tag {
  display: inline-block; font-family: var(--body); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; background: var(--emerald); color: var(--cream);
  padding: 7px 13px; margin: 0 0 22px;
}

/* ---- direct-answer block (answer / tly-answer / executive-summary) ---- */
.tly-ai-hub .answer,
.tly-ai-hub .tly-answer {
  font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink);
  background: var(--cream2); border-left: 4px solid var(--emerald);
  padding: 22px 26px; margin: 0 0 30px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: none;
}
.tly-ai-hub .answer strong,
.tly-ai-hub .tly-answer strong { color: var(--emerald-deep); font-weight: 600; }

/* ---- key takeaways (kt / tly-kt / key-takeaways / takeaways / tly-takeaways) -- */
.tly-ai-hub .kt,
.tly-ai-hub .tly-kt,
.tly-ai-hub .key-takeaways,
.tly-ai-hub .takeaways,
.tly-ai-hub .tly-takeaways {
  background: var(--cream2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 30px; margin: 30px 0; box-shadow: var(--shadow);
}
.tly-ai-hub .kt h2,
.tly-ai-hub .tly-kt h2,
.tly-ai-hub .key-takeaways h2,
.tly-ai-hub .takeaways h2,
.tly-ai-hub .tly-takeaways h2,
.tly-ai-hub .kt h3,
.tly-ai-hub .tly-kt h3 { font-size: 18px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; color: var(--emerald2); margin: 0 0 14px; }
.tly-ai-hub .kt ul,
.tly-ai-hub .tly-kt ul,
.tly-ai-hub .key-takeaways ul,
.tly-ai-hub .takeaways ul,
.tly-ai-hub .tly-takeaways ul { font-family: var(--manrope); font-size: 16px; line-height: 1.55; margin: 0; padding-left: 1.2em; }
.tly-ai-hub .kt li,
.tly-ai-hub .tly-kt li,
.tly-ai-hub .tly-takeaways li { margin: 0 0 .7em; color: var(--ink); }

/* ---- comparison / decision table (cmp / tly-table) + verdict rows ---- */
.tly-ai-hub .cmp,
.tly-ai-hub .tly-table {
  width: 100%; border-collapse: collapse; margin: 26px 0; font-family: var(--body);
  font-size: 15px; line-height: 1.5; border: 1px solid var(--ink); background: #fff;
}
.tly-ai-hub .cmp caption,
.tly-ai-hub .tly-table caption { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 0 12px; }
.tly-ai-hub .cmp th,
.tly-ai-hub .tly-table th { background: var(--ink); color: var(--cream); font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: 13px 14px; vertical-align: top; }
.tly-ai-hub .cmp td,
.tly-ai-hub .tly-table td { padding: 13px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink); }
.tly-ai-hub .cmp th[scope="row"] { background: var(--cream2); color: var(--ink); font-weight: 600; }
.tly-ai-hub .cmp tbody tr:nth-child(even) td { background: var(--cream); }
.tly-ai-hub .cmp tr.verdict td,
.tly-ai-hub .cmp tr.verdict th { background: #E7F0EA; color: var(--emerald-deep); font-weight: 600; }

/* ---- callout / aside / guard box (callout warn guard tly-callout tly-aside) -- */
.tly-ai-hub .guard,
.tly-ai-hub .callout,
.tly-ai-hub .warn,
.tly-ai-hub .tly-callout,
.tly-ai-hub .tly-aside,
.tly-ai-hub .tly-callout-human,
.tly-ai-hub .tly-callout-method,
.tly-ai-hub .tly-callout-warn,
.tly-ai-hub .method,
.tly-ai-hub .tly-playbook {
  background: var(--ink); color: var(--cream); border-radius: var(--radius);
  padding: 30px 34px; margin: 30px 0; box-shadow: var(--shadow);
}
.tly-ai-hub .guard h2, .tly-ai-hub .guard h3,
.tly-ai-hub .callout h2, .tly-ai-hub .callout h3,
.tly-ai-hub .warn h2, .tly-ai-hub .warn h3,
.tly-ai-hub .method h2, .tly-ai-hub .method h3,
.tly-ai-hub .tly-callout h2, .tly-ai-hub .tly-callout h3,
.tly-ai-hub .tly-aside h2, .tly-ai-hub .tly-aside h3,
.tly-ai-hub .tly-callout-human h3, .tly-ai-hub .tly-callout-method h3,
.tly-ai-hub .tly-callout-warn h3, .tly-ai-hub .tly-playbook h3 { color: var(--cream); margin: 0 0 14px; }
.tly-ai-hub .guard p, .tly-ai-hub .callout p, .tly-ai-hub .warn p,
.tly-ai-hub .method p, .tly-ai-hub .tly-callout p, .tly-ai-hub .tly-aside p,
.tly-ai-hub .tly-callout-human p, .tly-ai-hub .tly-callout-method p,
.tly-ai-hub .tly-callout-warn p, .tly-ai-hub .tly-playbook p { color: rgba(236, 233, 223, .86); font-family: var(--serif); font-size: 16.5px; line-height: 1.55; max-width: none; }
.tly-ai-hub .guard ul, .tly-ai-hub .callout ul, .tly-ai-hub .warn ul,
.tly-ai-hub .tly-callout ul, .tly-ai-hub .tly-aside ul { color: rgba(236, 233, 223, .86); font-family: var(--serif); }
/* the mono label that opens callouts (lab / tly-label / lbl) */
.tly-ai-hub .lab,
.tly-ai-hub .tly-label,
.tly-ai-hub .lbl {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--emerald2); font-weight: 500; margin: 0 0 14px;
}
/* warn variant keeps coral reserved for genuinely high-signal warnings */
.tly-ai-hub .warn .lab,
.tly-ai-hub .tly-callout-warn .lab,
.tly-ai-hub .tly-callout-warn .tly-label { color: var(--coral); }

/* ---- numbered step block (step / tly-steps / tly-check) ---- */
.tly-ai-hub .step,
.tly-ai-hub .tly-card.tly-steps,
.tly-ai-hub .tly-steps {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px 26px; margin: 0 0 16px; box-shadow: var(--shadow);
}
.tly-ai-hub .step .lbl { color: var(--emerald); }
.tly-ai-hub .tly-check { list-style: none; padding-left: 0; }
.tly-ai-hub .tly-check li { position: relative; padding-left: 26px; }
.tly-ai-hub .tly-check li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--emerald2); }

/* ---- fill-in template field (fill) + template block (tmpl) ---- */
.tly-ai-hub .fill {
  font-family: var(--mono); font-size: .92em; background: var(--cream3);
  color: var(--emerald-deep); padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.tly-ai-hub .tmpl {
  background: var(--cream2); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 30px 34px; margin: 30px 0;
}
.tly-ai-hub .tmpl h2,
.tly-ai-hub .tmpl h3 { margin-top: 18px; }
.tly-ai-hub .tmpl h2:first-child { margin-top: 0; }

/* ---- FAQ (faq / faq-item / faq-section / tly-faq / answer) ---- */
.tly-ai-hub .faq,
.tly-ai-hub .faq-section,
.tly-ai-hub .tly-faq { margin: 30px 0; }
.tly-ai-hub .faq-item,
.tly-ai-hub .faq > div { border-top: 1px solid var(--line); padding: 22px 0; }
.tly-ai-hub .faq h3,
.tly-ai-hub .faq-item h3,
.tly-ai-hub .tly-faq h3,
.tly-ai-hub .faq-item .lbl { font-size: 19px; margin: 0 0 8px; }
.tly-ai-hub .faq p,
.tly-ai-hub .faq-item p,
.tly-ai-hub .tly-faq p,
.tly-ai-hub .faq-item .answer { max-width: 64ch; margin: 0 0 8px; }

/* ---- sources / fine print (src / tly-sources / tly-sib) ---- */
.tly-ai-hub .src,
.tly-ai-hub .tly-sources {
  font-family: var(--body); font-size: 13px; line-height: 1.6; color: var(--muted);
  letter-spacing: .01em; margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  max-width: 76ch;
}
.tly-ai-hub .src strong,
.tly-ai-hub .tly-sources strong { color: var(--ink); }
.tly-ai-hub .tly-sib {
  background: var(--cream2); border-radius: var(--radius); padding: 22px 26px; margin: 30px 0;
  font-family: var(--body); font-size: 15px;
}

/* ---- CTA blocks: bare .cta links, .cta-block, blog-course-cta, tly-cta ---- */
.tly-ai-hub a.cta,
.tly-ai-hub .cta-secondary a,
.tly-ai-hub .cta-actions a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; padding: 16px 24px; border: 2px solid var(--emerald);
  background: var(--emerald); color: var(--cream); text-decoration: none; transition: all .15s;
  margin: 0 10px 12px 0;
}
.tly-ai-hub a.cta:hover,
.tly-ai-hub .cta-actions a:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); color: var(--cream); }
.tly-ai-hub a.cta.alt {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.tly-ai-hub a.cta.alt:hover { background: var(--ink); color: var(--cream); }

.tly-ai-hub .cta-block,
.tly-ai-hub .blog-course-cta,
.tly-ai-hub .tly-cta,
.tly-ai-hub .tly-cta-block,
.tly-ai-hub .lead-magnet {
  background: var(--ink); color: var(--cream); border-radius: var(--radius);
  padding: 34px 38px; margin: 36px 0; box-shadow: var(--shadow);
}
.tly-ai-hub .cta-block .cta-eyebrow,
.tly-ai-hub .blog-course-cta .cta-eyebrow,
.tly-ai-hub .tly-cta .cta-eyebrow { color: var(--emerald2); }
.tly-ai-hub .cta-block .cta-headline,
.tly-ai-hub .blog-course-cta .cta-headline,
.tly-ai-hub .tly-cta h2,
.tly-ai-hub .tly-cta h3 { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 34px); line-height: 1.06; letter-spacing: -.02em; color: var(--cream); margin: 0 0 14px; }
.tly-ai-hub .cta-block .cta-body,
.tly-ai-hub .blog-course-cta .cta-body,
.tly-ai-hub .tly-cta p { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: rgba(236, 233, 223, .9); max-width: 60ch; margin: 0 0 18px; }
.tly-ai-hub .tly-cta a,
.tly-ai-hub .cta-block a:not(.chip):not(.tly-btn) { color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- "more / related" pillar footer grid ---- */
.tly-ai-hub .more { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.tly-ai-hub .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin: 22px 0; }

/* ---- pillar header (post-hero / post-head / post-body) ---- */
.tly-ai-hub .post-hero,
.tly-ai-hub .post-head { padding: 8px 0 14px; }
.tly-ai-hub .post-body { padding: 8px 0 0; }

/* ============================================================================
   3. SECTION MODIFIER: NEWS  .tly-ai-news-section
   The 6 Council news differentiators on the SAME tokens.
   ============================================================================ */
/* (1) dense feed rhythm: tighter section + card padding */
.tly-ai-hub.tly-ai-news-section .sec { padding: 48px 0; }
.tly-ai-hub.tly-ai-news-section .card,
.tly-ai-hub.tly-ai-news-section .tly-card,
.tly-ai-hub.tly-ai-news-section .arn-card { padding: 18px 20px; box-shadow: none; border-radius: var(--radius-sm); }
.tly-ai-hub.tly-ai-news-section .arn-grid,
.tly-ai-hub.tly-ai-news-section .grid { gap: 12px; }

/* (2) mono eyebrow is the FIRST read; dateline prominent in neutral ink */
.tly-ai-hub.tly-ai-news-section .eyebrow,
.tly-ai-hub.tly-ai-news-section .mono,
.tly-ai-hub.tly-ai-news-section .kicker,
.tly-ai-hub.tly-ai-news-section .tly-eyebrow,
.tly-ai-hub.tly-ai-news-section .arn-kicker { color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.tly-ai-hub.tly-ai-news-section .dateline {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); display: block; margin: 0 0 12px;
}

/* (3) neutral Archivo headlines, tighter line-height 1.2, sparse italic emerald */
.tly-ai-hub.tly-ai-news-section h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -.03em; }
.tly-ai-hub.tly-ai-news-section h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -.022em; margin: 44px 0 10px; }
.tly-ai-hub.tly-ai-news-section h3 { line-height: 1.2; }
/* italic emerald reserved for critical proper nouns only; default stays ink */
.tly-ai-hub.tly-ai-news-section h1 em,
.tly-ai-hub.tly-ai-news-section h2 em,
.tly-ai-hub.tly-ai-news-section h3 em { color: var(--emerald); }

/* (4) formal meta row: Source / Jurisdiction / Type as 12px Inter table data */
.tly-ai-hub.tly-ai-news-section .metarow {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 26px; padding: 0;
  border: 1px solid var(--line); font-family: var(--body); font-size: 12px;
}
.tly-ai-hub.tly-ai-news-section .metarow > div {
  flex: 1 1 160px; padding: 10px 14px; border-right: 1px solid var(--hair);
}
.tly-ai-hub.tly-ai-news-section .metarow > div:last-child { border-right: 0; }
.tly-ai-hub.tly-ai-news-section .metarow dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted2); margin: 0 0 3px;
}
.tly-ai-hub.tly-ai-news-section .metarow dd { margin: 0; color: var(--ink); font-weight: 500; line-height: 1.35; }
.tly-ai-hub.tly-ai-news-section .tly-meta { font-family: var(--mono); color: var(--ink); }

/* (5) flatter, sharper list entries */
.tly-ai-hub.tly-ai-news-section .kt,
.tly-ai-hub.tly-ai-news-section .tly-kt,
.tly-ai-hub.tly-ai-news-section .key-takeaways,
.tly-ai-hub.tly-ai-news-section .answer { box-shadow: none; border-radius: var(--radius-sm); }
.tly-ai-hub.tly-ai-news-section .pq,
.tly-ai-hub.tly-ai-news-section .tly-pq { margin: 28px 0; }

/* (6) coral reserved ONLY for a rare high-signal badge */
.tly-ai-hub.tly-ai-news-section .badge-breaking,
.tly-ai-hub.tly-ai-news-section .badge-updated {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500; padding: 4px 9px; margin: 0 0 12px;
}
.tly-ai-hub.tly-ai-news-section .badge-breaking { background: var(--coral); color: var(--cream); }
.tly-ai-hub.tly-ai-news-section .badge-updated { color: var(--coral); border: 1px solid var(--coral); }

/* news tracker table (the centerpiece) reuses .cmp styling, tightened */
.tly-ai-hub.tly-ai-news-section .tracker { font-size: 13.5px; }
.tly-ai-hub.tly-ai-news-section .tracker td { padding: 11px 13px; }
.tly-ai-hub.tly-ai-news-section .tracker .c-date { font-family: var(--body); font-weight: 600; color: var(--muted2); white-space: nowrap; }
.tly-ai-hub.tly-ai-news-section .type {
  display: inline-block; font-family: var(--body); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600; padding: 3px 8px; border: 1px solid var(--line);
  white-space: nowrap;
}
.tly-ai-hub.tly-ai-news-section .type.statute { background: #E7F0EA; color: var(--emerald-deep); border-color: #BFD8C6; }
.tly-ai-hub.tly-ai-news-section .type.court { background: #F5E7E2; color: #8A3322; border-color: #E2C3B8; }
.tly-ai-hub.tly-ai-news-section .type.rule { background: #EDECF4; color: #3B3A63; border-color: #CBC9DC; }
.tly-ai-hub.tly-ai-news-section .type.guidance { background: #F1EFE6; color: var(--espresso); border-color: var(--line); }
.tly-ai-hub.tly-ai-news-section .type.enf { background: #FBE9D8; color: #8A5A1F; border-color: #E7CBA3; }

/* ============================================================================
   4. SECTION MODIFIERS: WARM  .tly-ai-workflows-section + .tly-ai-casestudies-section
   Spacious Creator-card treatment: roomy padding, carousels, liberal emerald
   italic accents, soft badge tags. Same tokens.
   ============================================================================ */
.tly-ai-hub.tly-ai-workflows-section .sec,
.tly-ai-hub.tly-ai-casestudies-section .sec { padding: 80px 0; }

/* spacious cards */
.tly-ai-hub.tly-ai-workflows-section .card,
.tly-ai-hub.tly-ai-workflows-section .tly-card,
.tly-ai-hub.tly-ai-casestudies-section .card,
.tly-ai-hub.tly-ai-casestudies-section .tly-card { padding: 30px; }

/* liberal italic emerald accent on headlines (Creator voice) */
.tly-ai-hub.tly-ai-workflows-section h1,
.tly-ai-hub.tly-ai-casestudies-section h1 { font-size: clamp(40px, 6.4vw, 78px); }
.tly-ai-hub.tly-ai-workflows-section h2 em,
.tly-ai-hub.tly-ai-casestudies-section h2 em,
.tly-ai-hub.tly-ai-workflows-section h3 em,
.tly-ai-hub.tly-ai-casestudies-section h3 em { color: var(--emerald); }

/* soft badge tags (vs the news hard tag) */
.tly-ai-hub.tly-ai-workflows-section .tag,
.tly-ai-hub.tly-ai-casestudies-section .tag,
.tly-ai-hub.tly-ai-workflows-section .ptags,
.tly-ai-hub.tly-ai-casestudies-section .ptags {
  background: var(--cream2); color: var(--emerald-deep); font-weight: 600;
}

/* case studies lean on the dark hero + signature band for drama */
.tly-ai-hub.tly-ai-casestudies-section .cp2-hero { margin: 0 0 8px; }

/* ============================================================================
   5. RESPONSIVE (mobile first defaults above; tablet / desktop refinements)
   ============================================================================ */
@media (max-width: 880px) {
  .tly-ai-hub .wrap { padding: 0 22px; }
  .tly-ai-hub .pcard { flex-basis: 82vw; }
  .tly-ai-hub .grid { grid-template-columns: 1fr; }
  .tly-ai-hub.tly-ai-news-section .metarow > div { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--hair); }
  .tly-ai-hub.tly-ai-news-section .metarow > div:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .tly-ai-hub { font-size: 17px; }
  .tly-ai-hub .wrap { padding: 0 18px; }
  .tly-ai-hub .guard, .tly-ai-hub .callout, .tly-ai-hub .method,
  .tly-ai-hub .tly-callout, .tly-ai-hub .cta-block, .tly-ai-hub .tly-cta,
  .tly-ai-hub .blog-course-cta, .tly-ai-hub .lead-magnet { padding: 24px 22px; }
  .tly-ai-hub .cmp,
  .tly-ai-hub .tly-table { font-size: 14px; }
  .tly-ai-hub .cmp, .tly-ai-hub .tly-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tly-ai-hub * { transition: none !important; scroll-behavior: auto !important; }
}