/*
  Predictable Innovation: blog post template.
  One stylesheet for every guide under /methods/.

  Order:
   1. Fonts
   2. Tokens
   3. Base
   4. (Header and footer live in site.css: they belong to the whole site)
   5. Post head (breadcrumbs, title, summary, byline, cover)
   6. Layout (article column and contents rail)
   7. Article text (headings, paragraphs, lists, links, highlights)
   8. Article components (short answer, parts, figures, pipeline, quote,
      tables, call to action, steps, field note, questions, closer,
      sources, share, author, video, prompt, related guide)
   9. Graphics kit (flow, stack, matrix, timeline, charts, SVG diagrams,
      screenshots, source quotes, photos)
  10. After the article (read next, apply band)
  11. Responsive, motion and print

  Scope: every rule sits under .blog, the element that wraps a post (post head,
  article, read next, apply band). The site's header and footer stay outside
  it, so nothing here can change them, even after client-side navigation.
  The tokens live on .blog too. html:has(.blog) carries --header-h and the
  scroll padding for jump links.

  Fonts: section 1 loads the woff2 files from ../fonts/. With next/font,
  delete section 1 and point --f-sans, --f-serif and --f-display at the
  next/font variables. When self-hosting, fix the url() paths.

  Rules: colors and fonts only through the tokens below. No em dashes in
  content. Nothing fades in.
*/

/* 1. Fonts (self-hosted, SIL Open Font License, see assets/fonts/licenses) */
@font-face { font-family: 'Inter Tight'; src: url('../../assets/fonts/inter-tight-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../../assets/fonts/inter-tight-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../../assets/fonts/fraunces-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../../assets/fonts/fraunces-var-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('../../assets/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* 2. Tokens */
.blog {
  /* Ink and grays */
  --ink: #080a09;          /* headings, strong text, dark panels */
  --text: #262b27;         /* body text */
  --soft: #3a403b;         /* summary under the title */
  --muted: #5c635d;        /* meta, captions, table heads (6.2:1 on white) */
  --faint: #9aa097;        /* separators, inactive icons, chart context */
  --line: #e1e3dd;         /* hairlines */
  --line-2: #d3d6cf;       /* borders on pills and buttons */
  --paper: #f4f4f2;        /* figures, field notes, author box */
  --white: #ffffff;

  /* Brand accents */
  --red: #e32652;          /* link underlines, bullets, progress, chart emphasis */
  --red-ink: #c51d43;      /* buttons and small red text (5.3:1 on white) */
  --red-hover: #b2193c;
  --lemon: #e3fe52;        /* the highlighter and small labels, never text */
  --wash: #f5ffc4;         /* short answer box, the better column in a comparison */
  --wash-line: #e2f0a0;

  /* Dark surfaces (call to action, apply band, footer, covers) */
  --dark: #080a09;
  --dark-2: #111412;
  --dark-line: #343a35;
  --dark-muted: #b3b5af;

  /* Chart colors: emphasis first. Point = red, context = gray, second series = ink */
  --chart-point: #e32652;
  --chart-series-2: #080a09;
  --chart-context: #9aa097;
  --chart-grid: #e1e3dd;
  --chart-axis: #b9bdb6;
  --chart-band: #f5ffc4;

  /* Fills for diagrams: rings, layers, curve segments, steps */
  --fill-mid: #8e958c;     /* second ring, a filled segment, inactive pins hub */
  --fill-light: #c9ccc6;   /* outer ring, a lighter segment, a middle step */

  /* Type */
  --f-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;

  --fs-title: clamp(36px, 1.5rem + 2.4vw, 58px);
  --fs-dek: clamp(20px, 1.05rem + 0.35vw, 23px);
  --fs-h2: clamp(28px, 1.25rem + 0.75vw, 34px);
  --fs-h3: clamp(19px, 1.1rem + 0.1vw, 20px);
  --fs-lede: clamp(20px, 1.1rem + 0.35vw, 23px);
  --fs-body: clamp(18px, 1rem + 0.25vw, 20px);
  --fs-small: 15px;

  /* Layout */
  --measure: 660px;        /* article column: about 70 characters a line */
  --rail: 400px;           /* contents rail and cover column */
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 8px;
}

/* 3. Base */
.blog, .blog *, .blog *::before, .blog *::after { box-sizing: border-box; }
html:has(.blog) { --header-h: 76px; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 28px); }
.blog {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.blog img { max-width: 100%; height: auto; display: block; }
.blog picture { display: contents; }
.blog picture > source { display: none; }
.blog figure { margin: 0; }
.blog svg { display: block; }
.blog a { color: inherit; }
.blog ::selection { background: var(--lemon); color: var(--ink); }
.blog :focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.blog .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.blog .wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.blog .icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.blog .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 4px;
  font-family: var(--f-sans); font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.blog .btn--lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.blog .btn--red { background: var(--red-ink); color: var(--white); }
.blog .btn--red:hover { background: var(--red-hover); color: var(--white); }
.blog .btn--white { background: var(--paper); color: var(--ink); }
.blog .btn--white:hover { background: var(--lemon); color: var(--ink); }
.blog .btn--line { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); font-weight: 600; min-height: 40px; padding: 0 14px; }
.blog .btn--line:hover { border-color: var(--ink); }

/* 4. Header and footer: see site.css. The page header must be sticky and carry the reading progress bar (.progress or the site's own). Set --header-h to its height. */

/* 5. Post head */
.blog .post-head { padding-top: 52px; }
.blog .post-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 80px; align-items: center; }
.blog .crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: var(--muted); }
.blog .crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--faint); }
.blog .crumbs a { color: var(--muted); text-decoration: none; }
.blog .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.blog .post-title {
  margin: 18px 0 0; font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-title);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); font-optical-sizing: auto; text-wrap: balance;
}
.blog .post-dek {
  max-width: 640px; margin: 22px 0 0; font-family: var(--f-serif); font-weight: 330; font-style: italic;
  font-size: var(--fs-dek); line-height: 1.4; letter-spacing: -0.005em; color: var(--soft);
}
.blog .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.blog .byline-who { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.blog .byline-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.blog .byline-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
.blog .byline-role { display: block; font-size: 15px; line-height: 1.35; color: var(--muted); }
.blog .byline-who:hover .byline-name { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog .byline-rule { width: 1px; height: 38px; background: var(--line); }
.blog .byline-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.blog .byline-meta li { display: inline-flex; align-items: center; gap: 7px; }
.blog .byline-meta .icon { width: 17px; height: 17px; stroke-width: 1.8; }
.blog .post-cover { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--dark); }
.blog .post-cover img { width: 100%; height: 100%; object-fit: cover; }

/* 6. Layout */
.blog .post-body { padding-top: 56px; }
.blog .post-body-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) var(--rail); justify-content: space-between; align-items: start; }
.blog .rail { align-self: stretch; }
.blog .rail-inner { position: sticky; top: calc(var(--header-h) + 32px); max-width: 320px; }
.blog .toc-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.blog .toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.blog .toc a {
  display: block; margin-left: -1px; padding: 7px 0 7px 18px; border-left: 2px solid transparent;
  font-size: 15px; line-height: 1.4; color: var(--muted); text-decoration: none;
}
.blog .toc a:hover { color: var(--ink); }
.blog .toc a[aria-current="true"] { border-left-color: var(--red); color: var(--ink); font-weight: 600; }
.blog .rail-apply { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 15px; font-weight: 700; color: var(--red-ink); text-decoration: none; }
.blog .rail-apply:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog .rail-apply .icon { width: 16px; height: 16px; stroke-width: 2.2; }

.blog .toc-fold { display: none; margin-top: 28px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.blog .toc-fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ink);
}
.blog .toc-fold summary::-webkit-details-marker { display: none; }
.blog .toc-fold summary span span { font-weight: 400; color: var(--muted); }
.blog .toc-fold[open] summary .icon { transform: rotate(180deg); }
.blog .toc-fold ol { margin: 0 0 8px; padding: 0; list-style: none; }
.blog .toc-fold li::before { display: none; }
.blog .toc-fold a { display: block; padding: 9px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; color: var(--ink); text-decoration: none; }
.blog .toc-fold a[aria-current="true"] { font-weight: 600; }

/* 7. Article text */
.blog .prose { min-width: 0; font-size: var(--fs-body); line-height: 1.65; letter-spacing: 0.01em; color: var(--text); }
.blog .prose > * { margin-top: 0; margin-bottom: 0; }
.blog .prose > * + * { margin-top: 1.1em; }
.blog .prose p, .blog .prose li, .blog .prose figcaption { text-wrap: pretty; }
.blog .prose > h2 {
  position: relative; margin-top: clamp(56px, 5vw, 76px);
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.16;
  letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
}
.blog .prose > h3 { margin-top: 40px; font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; color: var(--ink); }
.blog .prose > h2 + *, .blog .prose > h3 + * { margin-top: 16px; }
.blog .prose .lede { margin-top: 40px; font-size: var(--fs-lede); line-height: 1.55; letter-spacing: 0.005em; color: var(--ink); }
.blog .prose :where(ul) { margin: 0; padding: 0; list-style: none; }
.blog .prose > ul > li, .blog .prose .list > li { position: relative; padding-left: 24px; }
.blog .prose > ul > li::before, .blog .prose .list > li::before {
  content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; background: var(--red);
}
.blog .prose > ul > li + li, .blog .prose .list > li + li { margin-top: 10px; }
.blog .prose > ol { padding-left: 1.4em; }
.blog .prose > ol > li + li { margin-top: 10px; }
.blog .prose > ol > li::marker { font-weight: 700; color: var(--ink); }
.blog .prose strong { font-weight: 700; color: var(--ink); }
.blog .prose :where(a:not([class])) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.blog .prose :where(a:not([class])):hover { background: var(--lemon); }
.blog .prose mark {
  padding: 0 2px; color: var(--ink);
  background: linear-gradient(180deg, transparent 44%, var(--lemon) 44%, var(--lemon) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.blog .prose sup { font-size: 0.68em; line-height: 0; vertical-align: 0.5em; margin-left: 1px; }
.blog .prose a.ref { color: var(--red-ink); font-weight: 700; text-decoration: none; }
.blog .prose a.ref:hover { text-decoration: underline; }
.blog .anchor {
  position: absolute; left: -34px; top: 0.32em; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; color: var(--faint); opacity: 0; transition: opacity .15s;
}
.blog .anchor .icon { width: 18px; height: 18px; }
.blog h2:hover > .anchor, .blog .anchor:focus-visible { opacity: 1; }
.blog .anchor:hover { color: var(--red-ink); }

/* 8. Article components */

/* Short answer: the first block under the title. One quotable sentence, then takeaways. */
.blog .answer { padding: 28px 36px 32px; border-radius: var(--radius); background: var(--wash); color: var(--ink); }
.blog .prose .answer .answer-label {
  display: inline-block; margin: 0; padding: 6px 9px; border-radius: 3px; background: var(--lemon);
  font-family: var(--f-sans); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: var(--ink);
}
.blog .answer-def {
  margin: 12px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(21px, 1.2rem + 0.3vw, 24px);
  line-height: 1.38; letter-spacing: -0.01em; color: var(--ink);
}
.blog .answer .list { margin-top: 18px; font-size: 17.5px; line-height: 1.5; }
.blog .answer .list > li + li { margin-top: 9px; }
.blog .prose .answer .list > li::before { background: var(--ink); top: 0.62em; }

/* Parts: a definition list for "it has N parts" */
.blog .parts { margin-top: 22px; border-top: 2px solid var(--ink); }
.blog .parts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.blog .parts dt { font-family: var(--f-serif); font-weight: 500; font-size: 21px; line-height: 1.35; color: var(--ink); }
.blog .parts dd { margin: 0; font-size: 18px; line-height: 1.5; }

/* Figures */
.blog .fig { margin-left: 0; margin-right: 0; }
.blog .prose > .fig { margin-top: 30px; }
.blog .fig figcaption, .blog .fig-caption { margin-top: 16px; font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--muted); }
.blog .fig--panel { padding: 28px 28px 22px; border-radius: var(--radius); background: var(--paper); }

/* Pipeline: steps in a row, an end result, and a hinge block between two rows */
.blog .pipe-label { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.blog .pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.blog .pills > li { display: inline-flex; align-items: center; gap: 5px; }
.blog .pills > li + li::before {
  content: ""; width: 13px; height: 13px; background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blog .pill {
  display: inline-block; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white);
  font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: var(--ink); white-space: nowrap;
}
.blog .pill--end { border-color: var(--red-ink); background: var(--red-ink); color: var(--white); font-weight: 700; }
.blog .hinge { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.blog .hinge .icon { margin: 0 auto; width: 20px; height: 20px; stroke-width: 2.2; color: var(--ink); }
.blog .hinge-block { padding: 16px 18px 15px; border-radius: 6px; background: var(--dark); text-align: center; }
.blog .hinge-name { display: block; font-family: var(--f-display); font-size: 26px; line-height: 1; letter-spacing: 0.02em; color: var(--lemon); text-transform: uppercase; }
.blog .hinge-sub { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--dark-muted); }

/* Pull quote: one line from the post, worth repeating */
.blog .prose > .pull { margin-top: 44px; margin-bottom: 8px; }
.blog .pull blockquote {
  margin: 0; font-family: var(--f-serif); font-weight: 400; font-style: italic;
  font-size: clamp(27px, 1.4rem + 0.9vw, 34px); line-height: 1.22; letter-spacing: -0.012em; color: var(--ink);
}
.blog .pull blockquote::before {
  content: "\201C"; display: block; height: 42px; font-style: normal; font-weight: 600; font-size: 96px; line-height: 0.9; color: var(--red);
}
.blog .pull blockquote p { margin: 0; }

/* Tables: real HTML tables, stacked into labeled blocks on phones */
.blog .prose > .table { margin-top: 26px; }
.blog .t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16.5px; line-height: 1.5; letter-spacing: 0; color: var(--text); }
.blog .t th, .blog .t td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog .t th:last-child, .blog .t td:last-child { padding-right: 0; }
.blog .t thead th { padding-top: 0; padding-bottom: 12px; vertical-align: bottom; border-bottom: 2px solid var(--ink); font-size: 15px; font-weight: 700; color: var(--ink); }
.blog .t thead th.is-muted { color: var(--muted); }
.blog .t tbody th { font-weight: 700; color: var(--ink); }
.blog .t caption { caption-side: bottom; padding-top: 14px; text-align: left; font-size: 15px; line-height: 1.5; color: var(--muted); }
.blog .t .q { font-family: var(--f-serif); font-style: italic; font-size: 19px; line-height: 1.4; }
.blog .t .is-before { color: var(--muted); }
.blog .t .is-after { padding-left: 18px; padding-right: 18px; background: var(--wash); color: var(--ink); border-bottom-color: var(--wash-line); }
.blog .t thead .is-after { padding-top: 14px; border-radius: 6px 6px 0 0; border-bottom-color: var(--ink); }
.blog .t tbody tr:last-child > * { border-bottom: 0; }
.blog .t tbody tr:last-child .is-after { border-radius: 0 0 6px 6px; }
.blog .t--quotes td:first-child { font-family: var(--f-serif); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--ink); }
.blog .t--stages tbody th { font-family: var(--f-serif); font-weight: 500; font-size: 19px; line-height: 1.35; }
.blog .t--stages td:nth-child(2) { color: var(--muted); }
.blog .t--stages td:last-child { color: var(--ink); }
.blog .t--quotes tbody tr:last-child > *, .blog .t--stages tbody tr:last-child > * { border-bottom: 1px solid var(--line); }

/* Call to action card: one per post, after the most useful section */
.blog .prose > .cta-card { margin-top: 48px; }
.blog .cta-card { padding: 36px 38px; border-radius: var(--radius); background: var(--dark); color: var(--paper); }
.blog .cta-kicker { margin: 0; font-size: 15px; font-weight: 700; color: var(--lemon); }
.blog .cta-title { margin: 10px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(25px, 1.3rem + 0.6vw, 30px); line-height: 1.2; letter-spacing: -0.012em; color: var(--paper); }
.blog .cta-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.blog .cta-option { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--dark-line); border-radius: 6px; background: var(--dark-2); }
.blog .cta-option-name { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--paper); }
.blog .cta-price { font-family: var(--f-display); font-size: 40px; line-height: 1.05; letter-spacing: 0; color: var(--paper); }
.blog .cta-option p { margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--dark-muted); }
.blog .cta-option a {
  margin-top: 6px; color: var(--paper); font-size: 15px; font-weight: 700; letter-spacing: 0;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.blog .cta-option a:hover { color: var(--lemon); }
.blog .cta-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.blog .cta-foot span { font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--dark-muted); }

/* Steps up: a small first step that grows into the whole account */
.blog .steps-up-bars { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; height: 160px; align-items: end; }
.blog .steps-up-bars span { display: block; height: calc(var(--v) * 100%); margin: 0 9px; border-radius: 4px 4px 0 0; background: var(--c, var(--faint)); }
.blog .steps-up-bars span:first-child { margin-left: 0; }
.blog .steps-up-bars span:last-child { margin-right: 0; }
.blog .steps-up ol { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.blog .steps-up li { display: flex; flex-direction: column; padding: 14px 9px 0; }
.blog .steps-up li:first-child { padding-left: 0; }
.blog .steps-up li:last-child { padding-right: 0; }
.blog .steps-up li strong { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.blog .steps-up li span { margin-top: 6px; font-size: 15px; line-height: 1.45; letter-spacing: 0; color: var(--muted); }
.blog .is-start { --c: var(--lemon); }
.blog .is-start.steps-up-bar, .blog .steps-up-bars .is-start { box-shadow: inset 0 0 0 1px #c8dc3c; }
.blog .is-mid-1 { --c: var(--fill-light); }
.blog .is-mid-2 { --c: var(--fill-mid); }
.blog .is-end { --c: var(--ink); }

/* Numbered steps: only for a real sequence */
.blog .steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.blog .prose > .steps { margin-top: 22px; }
.blog .steps > li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; counter-increment: step; }
.blog .steps > li::before {
  content: counter(step); width: 42px; height: 42px; border-radius: 4px; background: var(--dark); color: var(--white);
  font-family: var(--f-display); font-size: 22px; line-height: 42px; text-align: center;
}
.blog .steps > li > p { margin: 0; padding-top: 5px; }

/* Field note: first-hand experience, with the author's face */
.blog .prose > .note { margin-top: 32px; }
.blog .note { padding: 28px 32px 30px; border-radius: var(--radius); background: var(--paper); }
.blog .note-who { display: flex; align-items: center; gap: 12px; }
.blog .note-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog .note-who p { margin: 0; font-size: 15px; line-height: 1.35; letter-spacing: 0; }
.blog .note-who strong { display: block; }
.blog .note-who span { color: var(--muted); }
.blog .note-text { margin: 16px 0 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(20px, 1.1rem + 0.35vw, 23px); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink); }

/* Questions: visible answers, H3 per question (also marked up as FAQPage) */
.blog .faq { margin-top: 18px; border-top: 1px solid var(--line); }
.blog .faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.blog .faq-item h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--ink); }
.blog .faq-item p { margin: 8px 0 0; font-size: 18px; line-height: 1.62; }

/* Closer: the last line of the bottom line */
.blog .prose > .closer { margin-top: 30px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(27px, 1.4rem + 0.6vw, 32px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }

/* Sources */
.blog .prose > .sources { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.blog .prose .sources h2 { margin: 0; font-family: var(--f-sans); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.blog .sources ol { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding-left: 22px; font-size: 15.5px; line-height: 1.55; letter-spacing: 0; color: var(--muted); }
.blog .sources li { padding-left: 4px; }
.blog .sources li:target { background: var(--wash); }

/* Share */
.blog .prose > .share { margin-top: 32px; }
.blog .share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.blog .share-label { margin-right: 8px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.blog .share .btn .icon { width: 16px; height: 16px; stroke-width: 1.9; }
.blog .share .btn .icon--fill { fill: currentColor; stroke: none; }

/* Author box */
.blog .prose > .author { margin-top: 44px; }
.blog .author { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 28px; align-items: start; padding: 32px; border-radius: var(--radius); background: var(--paper); letter-spacing: 0; }
.blog .author-photo { width: 136px; height: 170px; border-radius: 6px; object-fit: cover; }
.blog .author-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--muted); }
.blog .author-name { margin: 6px 0 0; font-family: var(--f-serif); font-weight: 500; font-size: 28px; line-height: 1.15; color: var(--ink); }
.blog .author-role { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--soft); }
.blog .author-bio { margin: 14px 0 0; font-size: 17px; line-height: 1.6; }
.blog .author-stats { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 20px 0 0; padding: 0; list-style: none; }
.blog .author-stats li { display: flex; flex-direction: column; gap: 4px; }
.blog .author-stats b { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1; color: var(--ink); }
.blog .author-stats span { font-size: 14px; line-height: 1.35; color: var(--muted); }
.blog .author-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; font-size: 15px; font-weight: 700; }

/* Video: a poster that loads the player only when clicked */
.blog .video-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--dark); color: var(--white); text-decoration: none; }
.blog .video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.blog .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog .video-play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--red-ink); color: var(--white); transition: background-color .15s;
}
.blog .video-play svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.blog .video-frame:hover .video-play { background: var(--red-hover); }
.blog .video-title { position: absolute; left: 22px; right: 22px; bottom: 18px; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }

/* Prompt box: a prompt the reader can copy */
.blog .prose > .prompt { margin-top: 26px; }
.blog .prompt { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.blog .prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.blog .prompt-head span { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.blog .prompt-copy { min-height: 34px; padding: 0 12px; font-size: 14px; }
.blog .prompt pre { margin: 0; padding: 16px 18px 18px; white-space: pre-wrap; font-family: var(--f-sans); font-size: 16.5px; line-height: 1.55; letter-spacing: 0; color: var(--ink); }

/* Related guide: replaces "Learn how to..." callouts */
.blog .prose > .related { margin-top: 26px; }
.blog .related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.45; letter-spacing: 0; }
.blog .related-label { font-size: 14px; font-weight: 700; color: var(--muted); }
.blog .related a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog .related a:hover { background: var(--lemon); }

/* 9. Graphics kit. Shared rules: words are real text, the takeaway is in the caption,
   red marks the one thing that matters, lemon marks where to start or the better option. */
.blog .g { margin-top: 30px; letter-spacing: 0; }
.blog .g-title { margin: 0 0 14px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }

/* Flow: boxes in order, joined by arrows. Turns vertical on phones. */
.blog .g-flow { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; }
.blog .g-flow > li { position: relative; flex: 1 1 0; display: flex; }
.blog .g-flow > li + li { padding-left: 30px; }
.blog .g-flow > li + li::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blog .g-box { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--white); }
.blog .g-box b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.blog .g-box span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.blog .g-box.is-key { border-color: var(--dark); background: var(--dark); }
.blog .g-box.is-key b { color: var(--lemon); }
.blog .g-box.is-key span { color: var(--dark-muted); }
.blog .g-box.is-start { border-color: #c8dc3c; background: var(--wash); }

/* Numbered columns: three or four ideas in order (positioning, messaging, copywriting) */
.blog .g-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: col; }
.blog .g-cols > li { counter-increment: col; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 2px solid var(--ink); }
.blog .g-cols > li::before { content: counter(col, decimal-leading-zero); font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--ink); }
.blog .g-cols b { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.blog .g-cols p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.blog .g-cols dl { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.blog .g-cols dt { font-weight: 700; color: var(--ink); }
.blog .g-cols dd { margin: 0 0 6px; color: var(--muted); }

/* Layer stack: who shapes the buyer's view, from the widest circle down to you */
.blog .g-stack { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 0 14px; align-items: stretch; }
.blog .g-stack-layers { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.blog .g-stack-layers li { margin: 0 calc(var(--i, 0) * 3.2%); padding: 9px 12px; border-radius: 4px; background: var(--paper); text-align: center; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.blog .g-stack-layers li.is-top { background: var(--dark); color: var(--white); }
.blog .g-stack-layers li.is-you { margin-left: 34%; margin-right: 34%; background: var(--red-ink); color: var(--white); font-weight: 700; }
.blog .g-path { position: relative; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; line-height: 1.35; color: var(--muted); }
.blog .g-path::before { content: ""; position: absolute; top: 30px; bottom: 30px; width: 2px; background: var(--line-2); }
.blog .g-path--left { text-align: right; padding-right: 16px; }
.blog .g-path--left::before { right: 0; }
.blog .g-path--right { padding-left: 16px; }
.blog .g-path--right::before { left: 0; }
.blog .g-path b { color: var(--ink); }

/* 2x2 matrix */
.blog .g-matrix { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.blog .g-matrix-axis { display: flex; align-items: center; justify-content: center; padding: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--muted); }
.blog .g-matrix-row { justify-content: flex-start; text-align: left; color: var(--ink); }
.blog .g-matrix-cell { padding: 16px 16px 18px; border-radius: 6px; background: var(--paper); }
.blog .g-matrix-cell b { display: block; font-size: 15px; line-height: 1.3; color: var(--ink); }
.blog .g-matrix-cell ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--text); }
.blog .g-matrix-cell li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; background: var(--red); }
.blog .g-matrix-cell .g-who { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--red-ink); }

/* Attribute grid (whole product): rows of attributes, from tangible to intangible */
.blog .g-attr { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 14px; }
.blog .g-attr-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.blog .g-attr-rows > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.blog .g-attr-rows > li > b { font-size: 14px; line-height: 1.3; color: var(--ink); }
.blog .g-attr-rows ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.blog .g-attr-rows ul li { padding: 6px 10px; border-radius: 4px; background: var(--paper); font-size: 13px; line-height: 1.3; color: var(--text); }
.blog .g-attr-scale { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 2px 0; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--muted); }
.blog .g-attr-scale::before { content: ""; position: absolute; top: 40px; bottom: 40px; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(var(--red), var(--line-2)); }
.blog .g-attr-scale span { position: relative; background: var(--white); padding: 4px 0; }

/* Statement builder: fill-in-the-blanks templates (positioning statement) */
.blog .g-statement { margin: 0; border-top: 2px solid var(--ink); }
.blog .g-statement > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.blog .g-statement dt { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted); }
.blog .g-statement dd { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink); }
.blog .g-statement dd b { font-weight: 700; }
.blog .g-blank { padding: 1px 6px; border-radius: 3px; background: var(--wash); box-shadow: inset 0 -2px 0 #c8dc3c; color: var(--soft); font-style: italic; }

/* Template card: a worksheet the reader can copy */
.blog .g-card { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.blog .g-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--dark); color: var(--white); }
.blog .g-card-head b { font-size: 15px; line-height: 1.3; }
.blog .g-card-head span { font-size: 13px; color: var(--dark-muted); }
.blog .g-card-body { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 1px; background: var(--line); }
.blog .g-card-section { padding: 16px 18px 18px; background: var(--white); }
.blog .g-card-section.is-full { grid-column: 1 / -1; }
.blog .g-card-section h4 { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--red-ink); }
.blog .g-card-section ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: var(--text); }
.blog .g-card-section li + li { margin-top: 6px; }
.blog .g-card-section li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; background: var(--ink); }

/* Timeline or agenda */
.blog .g-timeline { margin: 0; padding: 0; list-style: none; }
.blog .g-timeline li { display: grid; grid-template-columns: 76px 18px minmax(0, 1fr); gap: 0 14px; }
.blog .g-timeline time, .blog .g-timeline .g-when { padding-top: 1px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.blog .g-timeline .g-dot { position: relative; }
.blog .g-timeline .g-dot::before { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.blog .g-timeline .g-dot::after { content: ""; position: absolute; left: 8px; top: 19px; bottom: -5px; width: 2px; background: var(--line-2); }
.blog .g-timeline li:last-child .g-dot::after { display: none; }
.blog .g-timeline li.is-key .g-dot::before { background: var(--red); box-shadow: none; }
.blog .g-timeline .g-what { padding-bottom: 18px; }
.blog .g-timeline .g-what b { display: block; font-size: 15px; line-height: 1.4; color: var(--ink); }
.blog .g-timeline .g-what span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Feature matrix and score tables reuse .t. Check and no-mark icons: */
.blog .t--matrix th, .blog .t--matrix td { text-align: center; padding-right: 10px; padding-left: 10px; }
.blog .t--matrix th:first-child, .blog .t--matrix td:first-child, .blog .t--matrix tbody th { text-align: left; padding-left: 0; }
.blog .t--matrix .yes svg { display: inline-block; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.blog .t--matrix .no { color: var(--faint); font-size: 13px; }
.blog .t--matrix .is-best { background: var(--wash); }
.blog .t--score td { text-align: center; font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.blog .t--score thead th { text-align: center; }
.blog .t--score thead th:first-child { text-align: left; }
.blog .t--score tfoot th, .blog .t--score tfoot td { padding-top: 14px; border-top: 2px solid var(--ink); border-bottom: 0; }
.blog .t--score tfoot td { color: var(--red-ink); }

/* Charts. Same rules for every chart:
   - one axis, thin marks (bars up to 24px thick, 4px rounded end), solid 1px grid
   - red is the point, gray is context, ink is the second series
   - values and labels in text colors, never in the mark color
   - every chart has its numbers in a table under it */
.blog .g-chart { margin: 0; }
.blog .g-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.blog .g-chart-head b { font-size: 15px; line-height: 1.35; color: var(--ink); }
.blog .g-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.blog .g-legend li { display: inline-flex; align-items: center; gap: 6px; }
.blog .g-legend i { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.blog .g-legend i.is-line { height: 3px; border-radius: 2px; }

/* Share bars (instead of pies) */
.blog .g-bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog .g-bars li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; line-height: 1.3; color: var(--ink); }
/* --s is the value as a share of the largest bar in the figure (largest = 100), so every bar uses one scale */
.blog .g-bars .g-track { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.blog .g-bars .g-fill { flex: 0 0 auto; height: 18px; width: calc((100% - 56px) * var(--s) / 100); min-width: 2px; border-radius: 0 4px 4px 0; background: var(--c, var(--chart-context)); }
.blog .g-bars li.is-point .g-fill { --c: var(--chart-point); }
.blog .g-bars b { font-weight: 700; font-variant-numeric: tabular-nums; }
.blog .g-bars-group + .g-bars-group { margin-top: 22px; }
.blog .g-bars-group > p { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* Spectrum bars: where something sits between two ends */
.blog .g-spectrum { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.blog .g-spectrum li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 12px; align-items: center; font-size: 14px; line-height: 1.3; }
.blog .g-spectrum .g-end { color: var(--ink); font-weight: 600; }
.blog .g-spectrum .g-end:last-child { text-align: right; }
.blog .g-spectrum .g-track { position: relative; height: 10px; border-radius: 5px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.blog .g-spectrum .g-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); border-radius: 5px; background: var(--chart-point); }
.blog .g-spectrum .g-val { position: absolute; top: -22px; left: calc(var(--v) * 1%); transform: translateX(calc(var(--v) * -1%)); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.blog .g-spectrum-name { grid-column: 1 / -1; margin-bottom: -6px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* Dot plot: scores on one scale */
.blog .g-dots { margin: 0; padding: 0; list-style: none; }
.blog .g-dots li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; color: var(--ink); }
.blog .g-dots .g-track { position: relative; height: 34px; background: linear-gradient(to right, var(--chart-grid) 1px, transparent 1px) 0 0 / 20% 100% repeat-x; box-shadow: inset -1px 0 0 var(--chart-grid); }
.blog .g-dots .g-dot-mark { position: absolute; top: 50%; left: calc(var(--v) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c, var(--chart-context)); box-shadow: 0 0 0 2px var(--white); }
.blog .g-dots .g-dot-mark.is-point { --c: var(--chart-point); top: 32%; }
.blog .g-dots .g-dot-mark.is-series-2 { --c: var(--chart-series-2); }
.blog .g-dots .g-dot-mark.is-context { top: 68%; }
.blog .g-dots-scale { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.blog .g-dots-scale > span:last-child span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.blog .g-dots-scale span { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

/* SVG charts and diagrams: classes set the colors so the palette lives here */
.blog .g-svg { width: 100%; height: auto; overflow: visible; }
.blog .g-svg text { font-family: var(--f-sans); fill: var(--muted); font-size: 13px; }
.blog .g-svg .t-ink { fill: var(--ink); font-weight: 700; }
.blog .g-svg .t-white { fill: var(--white); font-weight: 700; }
.blog .g-svg .t-big { font-family: var(--f-display); font-size: 22px; fill: var(--ink); }
.blog .g-svg .t-big.t-on-dark { fill: var(--white); }
.blog .g-svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
.blog .g-svg .axis { stroke: var(--chart-axis); stroke-width: 1; }
.blog .g-svg .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.blog .g-svg .ln-point { stroke: var(--chart-point); }
.blog .g-svg .ln-ink { stroke: var(--chart-series-2); }
.blog .g-svg .ln-context { stroke: var(--chart-context); }
.blog .g-svg .band { fill: var(--chart-band); }
.blog .g-svg .f-ink { fill: var(--ink); }
.blog .g-svg .f-red { fill: var(--red); }
.blog .g-svg .f-lemon { fill: var(--lemon); }
.blog .g-svg .f-wash { fill: var(--wash); }
.blog .g-svg .f-paper { fill: var(--paper); }
.blog .g-svg .f-gray { fill: var(--fill-light); }
.blog .g-svg .f-gray-2 { fill: var(--fill-mid); }
.blog .g-svg .f-white { fill: var(--white); }
.blog .g-svg .s-ink { fill: none; stroke: var(--ink); stroke-width: 2; }
.blog .g-svg .s-red { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.blog .g-svg .s-gray { fill: none; stroke: var(--line-2); stroke-width: 2; }
.blog .g-svg .s-white { stroke: var(--white); stroke-width: 2; }
.blog .g-svg .dot-ring { stroke: var(--white); stroke-width: 2; }
.blog .g-wide { display: block; }
.blog .g-narrow { display: none; }

/* Legend lists under SVG diagrams: shapes in the drawing, words here */
.blog .g-key { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--text); }
.blog .g-key li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.blog .g-key i { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--f-display); font-size: 14px; background: var(--c, var(--paper)); color: var(--fc, var(--ink)); }
.blog .g-key b { color: var(--ink); }

/* Adoption curve labels under the curve (segments sized like the curve) */
.blog .g-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.blog .g-segs li { padding: 10px 6px 0; font-size: 13px; line-height: 1.3; color: var(--ink); font-weight: 700; }
.blog .g-segs li span { display: block; font-weight: 400; color: var(--muted); }
.blog .g-segs li.is-tiny { padding-left: 0; padding-right: 0; }

/* Screenshot frame: other people's products and evidence, kept as images */
.blog .shot-frame { padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); }
.blog .shot-frame img { width: 100%; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); background: var(--white); }
.blog .shot-source { font-weight: 700; color: var(--ink); }
.blog .shot-flag { display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 3px; background: var(--red-ink); color: var(--white); font-size: 12px; font-weight: 700; }

/* Source quote: someone else's words, with the source */
.blog .source-quote { padding-top: 18px; border-top: 2px solid var(--ink); }
.blog .source-quote blockquote { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(19px, 1.05rem + 0.2vw, 21px); line-height: 1.5; color: var(--ink); }
.blog .source-quote blockquote p { margin: 0; }
.blog .source-quote blockquote p + p { margin-top: 0.8em; }

/* Photo: real people and places only */
.blog .photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }

/* Covers: see covers.html. The page uses the 4:3 file. */
.blog .cover-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--dark); }
.blog .cover-thumb img { width: 100%; height: 100%; object-fit: cover; }


/* Additions: vertical flow, stat row, rating dots, adoption curve, pins and rings */
.blog .g-flow--down { flex-direction: column; }
.blog .g-flow--down > li + li { padding-left: 0; padding-top: 30px; }
.blog .g-flow--down > li + li::before { left: 50%; top: 7px; margin: 0 0 0 -8px; transform: rotate(90deg); }
.blog .g-flow--down .g-box { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.blog .g-flow--down .g-box b { flex: 0 0 auto; }
.blog .g-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; padding: 0 0 18px; list-style: none; border-bottom: 1px solid var(--line); }
.blog .g-stats li { display: flex; flex-direction: column; gap: 6px; }
.blog .g-stats b { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 1.2rem + 1vw, 34px); line-height: 1; color: var(--ink); }
.blog .g-stats span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.blog .g-rate { display: inline-flex; gap: 3px; vertical-align: middle; }
.blog .g-rate i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.blog .g-rate i.on { background: var(--ink); }
.blog .g-rate-text { margin-left: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.blog .g-curve-plot { position: relative; }
.blog .g-curve-chasm { position: absolute; top: 0; transform: translateX(-50%); padding: 3px 7px; border-radius: 3px; background: var(--red-ink); color: var(--white); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.blog .g-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.blog .g-pins-label { margin: 10px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center; color: var(--ink); }
.blog .g-pins-label.is-wrong { color: var(--muted); }
.blog .g-rings { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; }
.blog .g-rings .g-key { margin: 0; grid-template-columns: 1fr; }
.blog .g-linechart { position: relative; }
.blog .prose .g figcaption { margin-top: 16px; }
@media (max-width: 700px) {
  .blog .g-stats { grid-template-columns: 1fr; gap: 12px; }
  .blog .g-rings { grid-template-columns: 1fr; }
  .blog .g-rings svg { max-width: 280px; margin: 0 auto; }
  .blog .g-segs { row-gap: 6px; }
  .blog .g-segs li { grid-row: 1; padding: 8px 0 0; font-size: 12px; white-space: nowrap; }
  .blog .g-segs li:nth-child(2), .blog .g-segs li:nth-child(4) { grid-row: 2; padding-top: 0; }
  .blog .g-segs li:nth-child(1) { grid-column: 1; } .blog .g-segs li:nth-child(2) { grid-column: 2; } .blog .g-segs li:nth-child(3) { grid-column: 3; }
  .blog .g-segs li:nth-child(4) { grid-column: 4; } .blog .g-segs li:nth-child(5) { grid-column: 5; }
}

/* 10. After the article */
.blog .read-next { margin-top: 96px; border-top: 1px solid var(--line); }
.blog .read-next-inner { padding-top: 72px; padding-bottom: 96px; }
.blog .read-next-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.blog .read-next-head h2 { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.blog .read-next-head a { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog .read-next-head a:hover { background: var(--lemon); }
.blog .next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 28px 0 0; padding: 0; list-style: none; }
.blog .next-card { display: flex; flex-direction: column; gap: 14px; height: 100%; color: var(--ink); text-decoration: none; }
.blog .next-card h3 { margin: 4px 0 0; font-family: var(--f-serif); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.blog .next-card:hover h3 { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog .next-card-text { display: flex; flex-direction: column; gap: 14px; }
.blog .next-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.blog .next-time { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.blog .next-time .icon { width: 15px; height: 15px; stroke-width: 1.8; }

.blog .apply-band { background: var(--dark); color: var(--paper); }
.blog .apply-band-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.blog .apply-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(54px, 2.2rem + 3.6vw, 84px); line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase; color: var(--paper); }
.blog .apply-title em { font-style: normal; color: var(--red); }
.blog .apply-text { max-width: 520px; margin: 24px 0 0; font-size: clamp(18px, 1rem + 0.2vw, 19px); line-height: 1.55; color: var(--paper); }
.blog .apply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.blog .apply-note { font-size: 15px; line-height: 1.5; color: var(--dark-muted); }
.blog .book-card { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 28px; border: 1px solid var(--dark-line); border-radius: var(--radius); background: var(--dark-2); }
.blog .book-card img { flex: 0 0 128px; width: 128px; border-radius: 2px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 244, 242, 0.14); }
.blog .book-kicker { margin: 0; font-size: 15px; font-weight: 700; color: var(--lemon); }
.blog .book-title { margin: 6px 0 0; font-family: var(--f-serif); font-weight: 300; font-style: italic; font-size: clamp(20px, 1.1rem + 0.4vw, 24px); line-height: 1.25; color: var(--paper); }
.blog .book-text { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--dark-muted); }
.blog .book-card .btn { margin-top: 14px; min-height: 44px; }
.blog .book-card > div { flex: 1 1 170px; min-width: 0; }

/* 11. Responsive */
@media (max-width: 1179px) {
  .blog .post-head-grid, .blog .post-body-grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
  .blog .post-cover, .blog .rail, .blog .anchor { display: none; }
  .blog .toc-fold { display: block; }
}
@media (max-width: 1079px) {
  html:has(.blog) { --header-h: 60px; }
  .blog .read-next-inner { padding-top: 56px; padding-bottom: 64px; }
  .blog .next-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .blog .next-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .blog .next-card .cover-thumb { flex: 0 0 104px; width: 104px; aspect-ratio: 4 / 3; border-radius: 4px; }
  .blog .next-card h3 { margin: 0; font-size: 18px; line-height: 1.28; }
  .blog .next-card p { display: none; }
  .blog .next-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .blog .apply-band-grid { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 48px; }
}
@media (max-width: 700px) {
  .blog .post-head { padding-top: 28px; }
  .blog .post-title { margin-top: 16px; line-height: 1.08; }
  .blog .post-dek { margin-top: 16px; }
  .blog .byline { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }
  .blog .byline-who img { width: 48px; height: 48px; }
  .blog .byline-rule { display: none; }
  .blog .post-body { padding-top: 28px; }
  .blog .answer { padding: 22px 22px 26px; }
  .blog .answer .list { font-size: 16.5px; }
  .blog .prose .lede { margin-top: 32px; }
  .blog .parts > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .blog .parts dt { font-size: 20px; line-height: 1.3; }
  .blog .parts dd { font-size: 16.5px; }
  .blog .fig--panel { padding: 22px 18px 20px; }
  .blog .hinge-name { font-size: 23px; }
  .blog .pull blockquote::before { height: 34px; font-size: 78px; }
  .blog .prose > .pull { margin-top: 36px; margin-bottom: 4px; }

  /* Tables stack into labeled blocks */
  .blog .t, .blog .t tbody, .blog .t tr, .blog .t th, .blog .t td { display: block; width: auto; }
  .blog .t thead { display: none; }
  .blog .t { border-top: 2px solid var(--ink); font-size: 16px; }
  .blog .t tr { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
  .blog .t th, .blog .t td { padding: 0; border: 0; }
  .blog .t tbody tr:last-child > *, .blog .t--quotes tbody tr:last-child > *, .blog .t--stages tbody tr:last-child > * { border-bottom: 0; }
  .blog .t td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--f-sans); font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--muted); }
  .blog .t tr > * + * { margin-top: 10px; }
  .blog .t .is-after { padding: 10px 12px 12px; border-radius: 4px; }
  .blog .t tbody tr:last-child .is-after { border-radius: 4px; }
  .blog .t .is-after[data-label]::before { color: var(--ink); }
  .blog .t--quotes td:first-child { font-size: 19px; }
  .blog .t--quotes td:first-child::before { display: none; }
  .blog .t--stages tbody th { font-size: 20px; }
  .blog .t caption { display: block; padding-top: 12px; }
  .blog .t--matrix tr, .blog .t--score tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .blog .t--matrix td, .blog .t--score td { margin-top: 0 !important; display: flex; justify-content: space-between; gap: 12px; text-align: left; font-family: var(--f-sans); font-size: 15px; }
  .blog .t--matrix tbody th, .blog .t--score tbody th { grid-column: 1 / -1; }
  .blog .t--matrix td[data-label]::before, .blog .t--score td[data-label]::before { margin: 0; font-size: 14px; font-weight: 400; color: var(--muted); }
  .blog .t--matrix td, .blog .t--score td { grid-column: 1 / -1; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .blog .t--score tfoot { display: block; }
  .blog .t--score tfoot tr { padding-top: 12px; border-top: 2px solid var(--ink); }
  .blog .t--score tfoot th, .blog .t--score tfoot td { padding-top: 6px; border-top: 0; }

  .blog .cta-card { padding: 26px 20px; }
  .blog .cta-options { grid-template-columns: 1fr; gap: 12px; }
  .blog .cta-option { padding: 18px; }
  .blog .cta-price { font-size: 34px; }

  .blog .steps-up-bars { display: none; }
  .blog .steps-up ol { display: block; }
  .blog .steps-up li { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .blog .steps-up li::after { content: ""; order: 1; display: block; height: 12px; width: calc(var(--v) * 100%); margin-top: 9px; border-radius: 2px; background: var(--c, var(--faint)); }
  .blog .steps-up li strong { order: 0; font-size: 16.5px; }
  .blog .steps-up li span { order: 2; margin-top: 8px; font-size: 15.5px; }

  .blog .steps > li { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .blog .steps > li::before { width: 38px; height: 38px; font-size: 20px; line-height: 38px; }
  .blog .note { padding: 22px 20px 24px; }
  .blog .faq-item { padding: 18px 0; }
  .blog .faq-item p { font-size: 17px; }
  .blog .prose > .sources { margin-top: 48px; }
  .blog .share-label { flex: 0 0 100%; }
  .blog .author { grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; padding: 24px 20px; }
  .blog .author-text { display: contents; }
  .blog .author-photo { grid-column: 1; grid-row: 1 / span 3; width: 84px; height: 105px; }
  .blog .author-label, .blog .author-name, .blog .author-role { grid-column: 2; }
  .blog .author-name { font-size: 24px; }
  .blog .author-bio, .blog .author-stats, .blog .author-links { grid-column: 1 / -1; }
  .blog .author-bio { margin-top: 18px; }
  .blog .author-bio { font-size: 16px; }
  .blog .author-stats b { font-size: 28px; }
  .blog .apply-title { font-size: 54px; }
  .blog .book-card { gap: 18px; padding: 20px; }
  .blog .book-card img { flex-basis: 96px; width: 96px; }
  .blog .book-card .btn { padding: 0 12px; font-size: 14px; white-space: nowrap; }

  /* Graphics on phones */
  .blog .g-flow { flex-direction: column; }
  .blog .g-flow > li + li { padding-left: 0; padding-top: 30px; }
  .blog .g-flow > li + li::before { left: 50%; top: 7px; margin: 0 0 0 -8px; transform: rotate(90deg); }
  .blog .g-cols { grid-template-columns: 1fr; gap: 14px; }
  .blog .g-stack { grid-template-columns: 1fr; }
  .blog .g-path { display: none; }
  .blog .g-stack-layers li { margin-left: calc(var(--i, 0) * 1.5%); margin-right: calc(var(--i, 0) * 1.5%); }
  .blog .g-matrix { grid-template-columns: 1fr; }
  .blog .g-matrix-axis.g-matrix-corner, .blog .g-matrix-axis.g-matrix-col { display: none; }
  .blog .g-matrix-row { padding: 8px 0 0; }
  .blog .g-matrix-cell[data-col]::before { content: attr(data-col); display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .blog .g-attr { grid-template-columns: 1fr; }
  .blog .g-attr-scale { display: none; }
  .blog .g-attr-rows > li { grid-template-columns: 1fr; gap: 6px; }
  .blog .g-statement > div { grid-template-columns: 1fr; gap: 2px; }
  .blog .g-statement dd { font-size: 17px; }
  .blog .g-card-body { grid-template-columns: 1fr; }
  .blog .g-timeline li { grid-template-columns: 58px 18px minmax(0, 1fr); gap: 0 10px; }
  .blog .g-bars li { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; font-size: 13px; }
  .blog .g-spectrum li { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .blog .g-spectrum-name { margin-bottom: 0; }
  .blog .g-spectrum .g-track { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
  .blog .g-dots li { grid-template-columns: 1fr; gap: 2px; padding: 10px 0 4px; }
  .blog .g-dots-scale { grid-template-columns: 1fr; }
  .blog .g-dots-scale > span:first-child { display: none; }
  .blog .g-key { grid-template-columns: 1fr; }
  .blog .g-wide { display: none; }
  .blog .g-narrow { display: block; }
  .blog .shot-frame { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog, .blog *, .blog *::before, .blog *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .blog .rail, .blog .toc-fold, .blog .share, .blog .cta-card, .blog .read-next, .blog .apply-band, .blog .video { display: none !important; }
  .blog .post-body-grid, .blog .post-head-grid { grid-template-columns: 1fr; }
  .blog .prose a:not([class])::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--muted); }
}

/* 12. Added for the guides (ours, not in the kit; redesign/reports/css-moves.md). Every rule under .blog, like the kit's.
   Book figure (positioning-book, "Preview Of The Art of High-tech Positioning book"; the designer's
   redesign/new-css/positioning-book.css, moved here from a <style> in the post): the cover and the button side by side
   from 701 px up, stacked on phones. */
.blog .g-book { display: grid; grid-template-columns: minmax(0, 256px) auto; gap: 22px 32px; align-items: end; justify-content: start; }
.blog .g-book p { margin: 0; }
@media (max-width: 700px) {
  .blog .g-book { grid-template-columns: minmax(0, 256px); }
}