/* ==========================================================================
   Legacy bridge
   The pages carried over from the old site (speaker, faq, blog, legal, …) use
   the previous class vocabulary: .wrap, .sec-head, .card, .btn-gold, .micro.
   None of those exist in styles.css. Rather than rewrite every page's markup,
   this maps the old names onto the new design's tokens, so carried-over
   content picks up the new look as it stands.

   Load it AFTER styles.css. Only old class names appear here - nothing in this
   file touches a class the new design owns.
   ========================================================================== */

/* ------------------------------------------------------------- container */
.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 56rem; }

/* --------------------------------------------------------- section heads */
.sec-head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.sec-head.mid,
.sec-head-centred { margin-inline: auto; text-align: center; }
.sec-head h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
.sec-head h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.sec-head .lede,
.sec-head p { margin-top: 1.25rem; color: var(--muted); font-size: 1.05rem; }

/* the old eyebrow was a pill; the new design's is a serif italic line, and
   .eyebrow already carries that - only the layout needs neutralising */
.eyebrow { display: block; background: none; border: 0; padding: 0; }
.eyebrow .dot, .eyebrow .jd, .eyebrow svg { display: none; }

/* ------------------------------------------------------------- type bits */
.lede { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.micro, .fc-sub, .disc-head + p { color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.grad, .accent { color: var(--accent); }
h3 { font-size: 1.25rem; }

/* ----------------------------------------------------------------- cards */
.card, .wb-card, .post, .faq-item, .m-card, .price-card, .reg-card, .legal-card {
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.card h3, .post h3 { margin-bottom: 0.5rem; }
.card p, .post p { color: var(--muted); }

.wb-grid, .blog-grid, .yt-grid, .m-grid, .rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------- buttons */
.btn-gold, .big-cta, .wb-submit, .btn-save {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 600 1rem/1 var(--sans);
  cursor: pointer;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.btn-gold:hover, .big-cta:hover, .wb-submit:hover, .btn-save:hover {
  background: var(--accent-d);
  box-shadow: 0 12px 30px -14px rgba(184, 137, 59, .65);
}
.btn-ghost, .btn-sm.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.5rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink);
  font: 600 1rem/1 var(--sans); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ form bits */
.wb-field { margin-bottom: 1.1rem; }
.wb-lbl {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.wb-req { color: var(--accent); }
.wb-ctl {
  width: 100%; padding: 0.85rem 1rem; font: 400 1rem/1.5 var(--sans);
  color: var(--ink); background: var(--base);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.wb-ctl:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,137,59,.2); }
.wb-err { display: none; margin-top: 0.4rem; color: #B3261E; font-size: 0.85rem; }
.wb-field.wb-invalid .wb-err { display: block; }
.wb-field.wb-invalid .wb-ctl { border-color: #B3261E; }
.wb-disc { margin-top: 1rem; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

/* the carried-over "thank you" panel */
.reg-done { display: none; text-align: center; }
.reg-done.show { display: block; }
.reg-done .ck {
  width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(184,137,59,.12); border: 1px solid rgba(184,137,59,.4);
}
.reg-done .ck svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 2.4; }
.reg-section { padding-block: var(--section-y); }
.reg-wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }
.reg-head { text-align: center; margin-bottom: 2rem; }
.reg-head h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.reg-kicker { color: var(--accent); font-family: var(--serif); font-style: italic; }
.reg-kicker .dot { display: none; }
.reg-desc { margin-top: 1rem; color: var(--muted); }
.reg-legal { color: var(--muted); font-size: 0.8rem; text-align: center; }

/* --------------------------------------------------------------- tables */
.rows .row { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }

/* ------------------------------------------- speaker page: form first on a phone
   These rules lived in the old page's <head>, which the conversion does not
   carry over. Without them the pitch sits above the form again on mobile. */
@media (max-width: 760px) {
  .reg-wrap { display: flex; flex-direction: column; }
  .reg-wrap > * { order: 4; }
  .reg-wrap > .sp-title { order: 1; }
  .reg-wrap > #spCard { order: 2; margin-top: 0.4rem; }
  .reg-wrap > .sp-intro { order: 3; margin-top: 1.6rem; }
}
.sp-lede { max-width: 56ch; margin-inline: auto; text-wrap: balance; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.1rem; }
.sp-chip {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.38rem 0.8rem; white-space: nowrap;
}
.sp-note { margin-top: 0.9rem; color: var(--muted); font-size: 0.82rem; }

/* ==========================================================================
   PART 2 - vocabulary the carried-over pages still need
   Added after converting the public pages. Two kinds of thing live here:

   1. Aliases for the old design's custom properties. The CSS a page brought
      with it (the journey road, the algo stages) is written against --gold,
      --bone, --ash and friends. Those names no longer exist, so without the
      aliases those declarations resolve to nothing and the component renders
      colourless. Each one points at the nearest new token, so the old rules
      now paint in the new palette.

   2. Components that lived in the old global styles.css rather than in the
      page - the FAQ list, the legal pages, the blog cards, the webinar form.
      Written against the new tokens, not copied from the old sheet.
   ========================================================================== */

:root {
  /* type */
  --display: var(--serif);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ink: the old palette was light-on-dark, so the roles inverted */
  --bone: var(--ink);          /* strongest text */
  --gilt: var(--ink-soft);     /* secondary heading / highlight */
  --ash: var(--muted);         /* body copy, captions */
  --gold: var(--accent);       /* the accent itself */
  --brass: var(--accent-d);
  --up: #1E7F4F;               /* the "good" tick */

  /* surfaces */
  --carbon: var(--surface);
  --line-soft: var(--line);

  /* the old skin's neumorphic shadows, restated for a light page */
  --neu-out: 0 1px 2px rgba(11, 27, 52, .04), 0 10px 28px -18px rgba(11, 27, 52, .18);
  --neu-out-sm: 0 1px 2px rgba(11, 27, 52, .05);
  --neu-in-sm: inset 0 1px 2px rgba(11, 27, 52, .06);
}

/* ------------------------------------------------------------------- FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0.85rem; max-width: 55rem; }
.faq-item {
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.3rem 1.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.1rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.19rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
/* without a size the inline SVG fills the summary and makes it 1000px tall */
.faq-item .q-ico {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 3px;
  color: var(--accent); transition: transform .25s var(--ease);
}
.faq-item[open] .q-ico { transform: rotate(45deg); }
.faq-item .a {
  padding: 0 1.5rem 1.5rem; color: var(--muted);
  font-size: 0.97rem; line-height: 1.65; max-width: 74ch;
}

/* ------------------------------------------------- legal / policy pages */
.legal-section { padding-block: var(--section-y); }
.legal-wrap { width: min(51rem, 92vw); margin-inline: auto; }
.legal-head { margin-bottom: 2.1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.1; margin: 0.6rem 0 0.75rem; }
.legal-head .updated {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: .04em; color: var(--muted);
}
.legal-intro { color: var(--muted); font-size: 1rem; line-height: 1.7; margin: 0; }
.legal-toc { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.legal-toc a {
  font-size: 0.81rem; color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.44rem 0.9rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.legal-toc a:hover, .legal-toc a.cur { border-color: var(--accent); color: var(--accent); }
.legal-body h2 { font-size: clamp(1.25rem, 2.6vw, 1.56rem); margin: 2.1rem 0 0.75rem; }
.legal-body h2 .n {
  font-family: var(--mono); font-size: 0.87rem; font-weight: 400;
  color: var(--accent); margin-right: 0.6rem;
}
.legal-body h3 { font-size: 1.03rem; margin: 1.25rem 0 0.5rem; color: var(--ink-soft); }
.legal-body p { color: var(--muted); font-size: 0.97rem; line-height: 1.72; margin: 0 0 0.9rem; }
.legal-body ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.legal-body li {
  position: relative; padding-left: 1.25rem; color: var(--muted);
  font-size: 0.97rem; line-height: 1.65; margin-bottom: 0.55rem;
}
.legal-body li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .55;
}
.legal-note {
  margin-top: 1.9rem; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius); padding: 1.1rem 1.4rem;
  color: var(--ink); font-size: 0.91rem; line-height: 1.62;
}
.legal-note strong { color: var(--accent); }
.legal { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); line-height: 1.6; }
.legal a { color: var(--accent); }

/* ----------------------------------------------- blog cards and posts */
.post { overflow: hidden; padding: 0; }
.post .thumb {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.post .thumb svg, .post .thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.post .body { padding: 1.4rem 1.4rem 1.6rem; }
.post .meta {
  font-family: var(--mono); font-size: 0.69rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  display: flex; gap: 0.6rem; align-items: center;
}
.post .meta .sep, .post-cat .sep, .breadcrumb .sep { color: var(--muted); opacity: .5; }
.post .read {
  margin-top: 1rem; font-size: 0.84rem; color: var(--accent); font-weight: 600;
  display: inline-flex; gap: 0.45rem; align-items: center;
}
.post .read svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.post:hover .read svg { transform: translateX(4px); }

.related { width: min(var(--shell), 92vw); margin-inline: auto; padding-bottom: 1.9rem; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (max-width: 680px) { .related-grid { grid-template-columns: 1fr; } }
.lbl, .answer-box .lbl, .takeaways .lbl, .related .lbl, .mission .lbl {
  font-family: var(--mono); font-size: 0.69rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem;
}
.related .lbl { display: flex; align-items: center; gap: .7em; margin-bottom: 1.4rem; }
.related .lbl::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ------------------------------------------------ webinar form extras */
.wb-seg { display: flex; gap: 0.5rem; }
.wb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wb-seg label {
  flex: 1; display: block; text-align: center; cursor: pointer; user-select: none;
  font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 0.7rem 0.4rem;
  background: var(--base); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.wb-seg label:hover { border-color: var(--accent); color: var(--ink); }
.wb-seg input:checked + label {
  color: #fff; border-color: var(--accent); background: var(--accent);
}
.wb-seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-phone { display: flex; align-items: stretch; }
.wb-phone .wb-pre {
  display: flex; align-items: center; font-family: var(--mono); font-size: 0.88rem;
  color: var(--ink-soft); background: var(--surface);
  border: 1.5px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  padding-inline: 0.75rem;
}
.wb-phone .wb-ctl { border-radius: 0 var(--radius) var(--radius) 0; }
.wb-field.wb-invalid .wb-pre { border-color: #B3261E; }

/* -------------------------------------------------- download / join page */
.gets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.gets li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.97rem; color: var(--ink); }
.gets .tick {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  background: rgba(30, 127, 79, .12); border: 1px solid rgba(30, 127, 79, .35);
  display: grid; place-items: center;
}
.gets .tick svg { width: 13px; height: 13px; color: var(--up); }
.get-right {
  padding: clamp(2.1rem, 4vw, 3.25rem);
  background: var(--surface); border-left: 1px solid var(--line);
}
@media (max-width: 860px) { .get-right { border-left: 0; border-top: 1px solid var(--line); } }
.wa-join {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.wa-eyebrow {
  font-family: var(--mono); font-size: 0.69rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--up);
}
.wa-desc { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--muted); max-width: 34ch; }

/* ==========================================================================
   PART 3 - the long-form article, and the download page's form
   Added once the blog posts carried their bodies across (the conversion had
   been cutting the article out). Same approach as part 2: the old sheet's
   intent, restated against the new tokens.
   ========================================================================== */

:root {
  --down: #B3261E;             /* the old error red, toned for a light page */
  --body: var(--sans);
}

/* ------------------------------------------------------ the article shell */
.article-wrap {
  width: min(45rem, 92vw); margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5.25rem) 0 4rem;
}
.post-head { margin-bottom: 1.9rem; }
.post-h1 {
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05;
  letter-spacing: -.015em; margin: 0 0 1.1rem;
}
.post-dek {
  font-size: clamp(1.06rem, 1.8vw, 1.25rem); color: var(--muted);
  line-height: 1.5; max-width: 60ch; margin: 0;
}
.breadcrumb { font-size: 0.83rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .here { color: var(--ink); }

.byline {
  display: flex; align-items: center; gap: 0.8rem; padding: 1.4rem 0; margin-bottom: 0.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.byline img {
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--line); object-fit: cover;
}
.byline .who { font-family: var(--serif); font-weight: 600; font-size: 0.97rem; color: var(--ink); }
.byline .role {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .04em;
  color: var(--muted); margin-top: 3px;
}

/* --------------------------------------------------------- article body */
.prose { font-size: 1.09rem; line-height: 1.72; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.4rem; }
.prose p { margin: 0; }
/* .prose p (0,1,1) out-ranks .prose > * + * (0,1,0), so the margin:0 above was
   also wiping the gap between a heading and its first paragraph, and between
   consecutive paragraphs: every block sat flush. Same rank, later: wins. */
.prose > * + p { margin-top: 1.1rem; }
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15;
  letter-spacing: -.01em; color: var(--ink); margin-top: 2.9rem;
}
.prose h3 { font-size: 1.31rem; color: var(--ink); margin-top: 2rem; }
.prose em { font-style: italic; color: var(--ink); }
.prose strong { color: var(--ink); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
  margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--accent);
  color: var(--ink); font-style: italic;
}
.prose .tbl {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); margin: 1.9rem 0;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); font-weight: 600; }
.prose td { color: var(--muted); }

.post-cta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem);
  margin: 3.1rem 0; text-align: center;
}
.post-cta h3 { font-size: clamp(1.37rem, 2.8vw, 1.87rem); color: var(--ink); margin: 0 0 0.75rem; }
.post-cta p { color: var(--muted); font-size: 0.97rem; margin: 0 auto 1.4rem; max-width: 46ch; }
.post-faq { margin: 2.9rem 0; }
.post-faq h2 { font-size: clamp(1.37rem, 2.6vw, 1.75rem); color: var(--ink); margin: 0 0 1.1rem; }

/* ------------------------------------- download page: the two-up get card */
.get-card {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--base);
  box-shadow: 0 40px 90px -60px rgba(11, 27, 52, .45);
}
@media (max-width: 860px) { .get-card { grid-template-columns: 1fr; } }
.get-left { padding: clamp(2.1rem, 4vw, 3.25rem); background: var(--base); }
.get-left h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.get-left .lede { margin: 1rem 0 1.6rem; }

/* --------------------------------------------- download page: the form */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--ink); }
.field .control {
  display: flex; align-items: center; background: var(--base);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field .control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 137, 59, .2); }
.field input {
  flex: 1; background: transparent; border: 0; outline: 0; color: var(--ink);
  font-family: var(--sans); font-size: 1rem; padding: 0.8rem 0.95rem;
}
.field input::placeholder { color: var(--muted); }
.field .prefix {
  font-family: var(--mono); font-size: 0.88rem; color: var(--muted);
  padding: 0 0.75rem 0 0.95rem; margin-right: 0.25rem;
  height: 24px; display: flex; align-items: center;
  border-right: 1px solid var(--line);
}
.err {
  color: var(--down); font-size: 0.78rem; font-family: var(--mono);
  margin-top: 0.45rem; min-height: 1px; display: none;
}
.field.invalid .err { display: block; }
.field.invalid .control { border-color: var(--down); }
.submit { width: 100%; justify-content: center; padding: 0.95rem; font-size: 1rem; margin-top: 0.25rem; }
.submit[disabled] { opacity: .7; cursor: wait; }

/* The post-submit panel. It is hidden until the form marks itself done - the
   same two-class pattern the speaker page uses, so keep both rules together. */
.success { display: none; text-align: center; padding: 1.1rem 0.25rem; }
.form-wrap.done form { display: none; }
.form-wrap.done .success { display: block; }
.success .seal {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.1rem;
  background: rgba(30, 127, 79, .12); border: 1px solid rgba(30, 127, 79, .4);
  display: grid; place-items: center;
}
.success .seal svg { width: 30px; height: 30px; color: var(--up); }
.success h3 { font-size: 1.62rem; margin-bottom: 0.5rem; }
.success p { color: var(--muted); margin: 0 auto 1.4rem; max-width: 34ch; }

/* the last two the old sheet carried */
.get { position: relative; }
.form-eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}

/* Inline icons that carry a viewBox but no width/height. The old sheet sized
   them; without a rule they expand to fill their line box - the tick in a
   prose list came out 720px square, and the arrow in the submit button 330px. */
.prose li > svg,
.takeaways li > svg,
.answer-box li > svg,
.post-faq li > svg,
.gets li > svg,
button > svg,
.btn > svg,
.submit > svg {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
}
.prose li > svg, .takeaways li > svg, .answer-box li > svg, .post-faq li > svg {
  color: var(--accent); margin-right: 0.45rem;
}
/* the takeaway box itself */
.takeaways {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.75rem); margin: 2.1rem 0;
}
.takeaways ul { list-style: none; margin: 0; padding: 0; }
.takeaways li {
  display: flex; align-items: flex-start; gap: 0.1rem;
  color: var(--ink); font-size: 0.97rem; line-height: 1.6; margin-bottom: 0.6rem;
}

/* ==========================================================================
   PART 4 — the FAQ and the blog, in the new design's idiom

   Parts 2 and 3 made these pages render correctly; this makes them look like
   they belong. The content is untouched — only the skin changes.

   What the design does, and what is borrowed here:
     · headings take the violet → magenta → orange ink (.grad-ink)
     · a question is a soft-bordered 14px card whose plus turns 45° when open
       (the mentorship page's .ms-q)
     · a card lifts on hover under a wide magenta glow (.study-card)
     · gold stays on buttons; violet is for accents and decoration
   ========================================================================== */

:root {
  --tst-grad: linear-gradient(90deg, #7C3AED 0%, #C026D3 50%, #EA580C 100%);
  --tst-violet: #7C3AED;
  --tst-violet-soft: #A78BFA;
  --tst-ink: #140D2E;
  --tst-line: #ECE9F6;
}

/* the two-tone heading the design uses everywhere */
.sec-head .grad,
.sec-head .accent,
.post-h1 .grad {
  background: var(--tst-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-bottom: 0.06em;
}
.sec-head { max-width: 42rem; }
.sec-head h1, .sec-head h2 { letter-spacing: -0.025em; color: var(--tst-ink); }

/* ----------------------------------------------------------------- FAQ --- */
.faq-list { display: grid; gap: 0.7rem; max-width: 56rem; }
.faq-item {
  border: 1px solid var(--tst-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF, #FBFAFE);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item:hover { border-color: #DCD5F3; }
.faq-item[open] {
  border-color: rgba(124, 58, 237, .45);
  box-shadow: 0 18px 40px -30px rgba(124, 58, 237, .9);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem; line-height: 1.45;
  color: var(--tst-ink); cursor: pointer; list-style: none;
}
.faq-item summary:hover { color: var(--tst-violet); }

/* the plus becomes a round badge that turns into a cross when the answer opens */
.faq-item .q-ico {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: rgba(124, 58, 237, .10); color: var(--tst-violet);
  margin-top: 0; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.faq-item[open] .q-ico {
  transform: rotate(45deg); background: var(--tst-violet); color: #FFFFFF;
}
.faq-item .a {
  padding: 0 1.3rem 1.3rem; color: var(--muted);
  font-size: 0.98rem; line-height: 1.7; max-width: 74ch;
}
.faq-item .a a { color: var(--tst-violet); text-underline-offset: 3px; }

/* --------------------------------------------------------- blog cards --- */
.blog-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.post {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: #FFFFFF;
  border: 1px solid var(--tst-line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20, 13, 46, .04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 50px 90px -40px rgba(192, 38, 211, .55);
}
.post .thumb {
  aspect-ratio: 16 / 9; border-bottom: 1px solid var(--tst-line);
  background: #F6F4FD;
}
.post .thumb svg, .post .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.post:hover .thumb svg, .post:hover .thumb img { transform: scale(1.06); }
.post .body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.2rem; }
.post .meta {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tst-violet); display: flex; gap: 0.5rem; align-items: center;
  margin-bottom: 0.5rem;
}
.post .meta .sep { color: #B9B2D0; }
.post h3 {
  margin: 0 0 0.4rem; font-size: 1.16rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.3; color: var(--tst-ink);
}
.post p { color: var(--muted); font-size: 0.93rem; line-height: 1.6; }
.post .read {
  margin-top: auto; padding-top: 0.9rem;
  font-size: 0.85rem; font-weight: 700; color: var(--tst-violet);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.post:hover .read svg { transform: translateX(4px); }

/* ------------------------------------------------------ the article --- */
.post-h1 { color: var(--tst-ink); }
.post-dek { color: var(--muted); }
.breadcrumb a:hover { color: var(--tst-violet); }

.byline { border-color: var(--tst-line); }
.byline img { border-radius: 50%; border: 2px solid rgba(124, 58, 237, .35); object-fit: cover; object-position: center 20%; }
.byline .who { color: var(--tst-ink); }

.prose { color: #2C2545; }
.prose h2, .prose h3 { color: var(--tst-ink); letter-spacing: -0.02em; }
.prose a { color: var(--tst-violet); }
.prose strong { color: var(--tst-ink); }
.prose blockquote { border-left-color: var(--tst-violet); color: var(--tst-ink); }
.prose .tbl { border-color: var(--tst-line); background: #FBFAFE; border-radius: 14px; }
.prose th { color: var(--tst-ink); }
.prose td, .prose th { border-color: var(--tst-line); }

/* the takeaway panel: a violet wash rather than a plain grey box */
.takeaways {
  background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(232, 121, 249, .05) 55%, rgba(251, 146, 60, .05));
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 18px;
}
.takeaways .lbl, .answer-box .lbl, .related .lbl, .mission .lbl {
  color: var(--tst-violet); font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
}
.related .lbl::before { background: linear-gradient(90deg, var(--tst-violet), transparent); }
.takeaways li { color: var(--tst-ink); }
.takeaways li > svg, .prose li > svg, .answer-box li > svg, .post-faq li > svg { color: var(--tst-violet); }

/* the end-of-post call to action, carrying the design's three colours */
.post-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FBFAFE, #F4F1FC);
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 22px;
}
.post-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--tst-grad);
}
.post-cta h3 { color: var(--tst-ink); }
.post-faq h2 { color: var(--tst-ink); }

@media (prefers-reduced-motion: reduce) {
  .post, .post .thumb svg, .post .thumb img, .faq-item, .faq-item .q-ico { transition: none; }
  .post:hover { transform: none; }
  .post:hover .thumb svg, .post:hover .thumb img { transform: none; }
}